Radish alpha
r
radicle-explorer
Radicle web interface
Radicle
Git (anonymous pull)
Log in to clone via SSH
Commits ›
Refine file tree styling
dnlklmn committed 2 years ago
commit 9638922cab68abf375a69c6e79c70b99d13db03f
parent b7b93707093476bd3289e6afb6ddf0bac45e23aa
3 files changed +18 -13
modified src/views/projects/Source/Tree/File.svelte
@@ -14,6 +14,8 @@
    margin: 0.25rem 0;

    padding: 0.25rem 0.875rem;

    width: 100%;
+ 
    gap: 0.25rem;
+ 
    font-weight: var(--font-weight-regular);

  }



  .file:hover {
@@ -21,33 +23,31 @@
  }



  .file.active {
- 
    color: var(--color-foreground-match-background) !important;
- 
    background-color: var(--color-fill-secondary);
+ 
    color: var(--color-foreground-contrast) !important;
+ 
    background-color: var(--color-fill-ghost);
+ 
    font-weight: var(--font-weight-medium);

  }



  .file.active:hover {
- 
    color: var(--color-foreground-match-background) !important;
- 
    background-color: var(--color-fill-secondary-hover);
+ 
    background-color: var(--color-fill-ghost-hover);

  }



  .name {
- 
    margin-left: 0.25rem;

    user-select: none;

    white-space: nowrap;

    text-overflow: ellipsis !important;

    overflow: hidden;

    font-size: var(--font-size-small);
- 
    font-weight: var(--font-weight-medium);

  }

  .icon-container {
- 
    color: var(--color-fill-secondary);
+ 
    color: var(--color-foreground-dim);

    display: flex;

    justify-content: center;

    align-items: center;

    margin-right: 0.125rem;

  }

  .active .icon-container {
- 
    color: var(--color-foreground-match-background);
+ 
    color: var(--color-foreground-contrast);

  }

</style>
modified src/views/projects/Source/Tree/Folder.svelte
@@ -49,7 +49,7 @@
  .folder-name {

    margin-left: 0.25rem;

    font-size: var(--font-size-small);
- 
    font-weight: var(--font-weight-medium);
+ 
    font-weight: var(--font-weight-regular);

  }



  .container {
@@ -65,9 +65,14 @@
    display: flex;

    justify-content: center;

    align-items: center;
- 
    color: var(--color-fill-secondary);
+ 
    color: var(--color-foreground-dim);

    margin-right: 0.125rem;

  }
+
+ 
  .expanded {
+ 
    font-weight: var(--font-weight-medium);
+ 
    color: var(--color-foreground-contrast);
+ 
  }

</style>



<!-- svelte-ignore a11y-click-events-have-key-events -->
@@ -78,14 +83,14 @@
  on:click={() => {

    expanded = !expanded;

  }}>
- 
  <div class="icon-container">
+ 
  <div class="icon-container" class:expanded>

    {#if expanded}

      <IconSmall name="folder-open" />

    {:else}

      <IconSmall name="folder" />

    {/if}

  </div>
- 
  <span class="folder-name">{name}</span>
+ 
  <span class="folder-name" class:expanded>{name}</span>

</div>



{#if expanded}
modified src/views/projects/Source/Tree/Submodule.svelte
@@ -24,7 +24,7 @@
    text-overflow: ellipsis !important;

    overflow: hidden;

    font-size: var(--font-size-small);
- 
    font-weight: var(--font-weight-medium);
+ 
    font-weight: var(--font-weight-regular);

  }

  .icon-container {

    display: flex;