diff --git a/src/components/Node.tsx b/src/components/Node.tsx index f83b8cf..ea023fc 100644 --- a/src/components/Node.tsx +++ b/src/components/Node.tsx @@ -62,11 +62,11 @@ export function Node({
{name.includes('/') ? ( - name.split('/').map((chunk, index) => ( - - {index > 0 && '/'} + name.split('/').map((chunk, index, arr) => ( + - + {index + 1 !== arr.length && '/'} + )) ) : ( diff --git a/src/styles/dark/export.scss b/src/styles/dark/export.scss index 8f10ec9..f143168 100644 --- a/src/styles/dark/export.scss +++ b/src/styles/dark/export.scss @@ -568,7 +568,7 @@ } // How to merge the selectors? -// Is it possible to not have two copy of dark theme variables? +// Is it possible to not have two copies of dark theme variables? @media (prefers-color-scheme: dark) { :root[data-color-mode='auto'] { @include assign(); diff --git a/src/styles/index.scss b/src/styles/index.scss index 2a75f96..b7703ac 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -478,22 +478,23 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header- } &.disabled { - .node-item { pointer-events: none; color: var(--gitako-text-disabled); } - } display: flex; justify-content: space-between; + align-items: center; margin: 0; - color: var(--gitako-text-link); line-height: 20px; - padding: 8px 10px; cursor: pointer; border-bottom: 1px solid var(--gitako-border-secondary); white-space: nowrap; transition: padding 0.3s ease; // on toggle expansion in search results + &:not(:hover) { + color: var(--gitako-text-primary); + } + @mixin icon-size() { width: 16px; height: 16px; @@ -536,11 +537,22 @@ $minimal-z-index: max($github-header-z-index, $github-pull-request-float-header- align-items: center; } + &:not(:hover) { + .node-item-label .prefix { + color: var(--gitako-text-tertiary); + } + } + .go-to-button { + @include icon-button(); + @include button-color(); + width: 28px; + height: 28px; + border-radius: 28px; white-space: nowrap; - background: transparent; - border: none; - padding: 0; + .octicon-wrapper { + margin-right: 0; + } } &:not(:hover) { .go-to-button {