diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss index 42e7b97f27..60e0519f13 100644 --- a/packages/theme/styles/common.scss +++ b/packages/theme/styles/common.scss @@ -121,31 +121,47 @@ display: flex; align-items: center; margin: 0 1rem; - padding: .625rem .75rem; height: 2.25rem; min-width: 0; border: 1px solid transparent; border-radius: .25rem; user-select: none; cursor: pointer; - + + &.child, + &.special { + padding: 0 .75rem; + } + &:not(.child, .special) { + padding: 0 .75rem 0 .25rem; + + .an-element__label { padding-left: .5rem; } + } .an-element__icon { - margin-right: .5rem; min-width: 1rem; color: var(--theme-dark-color); - &.indent-2 { margin-left: 1.75rem; } + &.indent-2 { padding-left: 1.75rem; } &.indent-4 { margin-left: 3.25rem; } &.indent-8 { margin-left: 3.25rem; } + &:not(.indent-2, .indent-4, .indent-8) { margin-right: .625rem; } + &.indent-2, &.indent-4, &.indent-8 { + margin-right: .5rem; + & + .an-element__label { padding-left: 0; } + } } .an-element__label { + overflow: hidden; + display: inline-flex; + align-items: center; flex-grow: 1; margin-right: .75rem; + min-width: 0; + height: 100%; white-space: nowrap; text-overflow: ellipsis; - overflow: hidden; - user-select: none; font-weight: 400; + user-select: none; &.title:not(.dark), &:not(.bold, .title.dark) { color: var(--theme-content-color); } diff --git a/packages/ui/src/components/IconWithEmoji.svelte b/packages/ui/src/components/IconWithEmoji.svelte index 1881ad9771..77fde9a789 100644 --- a/packages/ui/src/components/IconWithEmoji.svelte +++ b/packages/ui/src/components/IconWithEmoji.svelte @@ -48,7 +48,7 @@ .emoji-small { width: 1rem; height: 1rem; - font-size: 1rem; + font-size: 0.8125rem; } .emoji-medium { width: 1.25rem; @@ -60,7 +60,7 @@ height: 1.5rem; font-size: 1.5rem; } - .semojivg-full { + .emoji-full { width: inherit; height: inherit; } diff --git a/plugins/view-resources/src/components/navigator/TreeElement.svelte b/plugins/view-resources/src/components/navigator/TreeElement.svelte index 007895a9ac..527caaa678 100644 --- a/plugins/view-resources/src/components/navigator/TreeElement.svelte +++ b/plugins/view-resources/src/components/navigator/TreeElement.svelte @@ -59,29 +59,27 @@ }} > <span class="an-element__label" class:bold class:title={node}> - <div class="flex-row-center"> - {#if icon && !parent} - <div - class="an-element__icon" - class:indent-2={indent === 'ml-2'} - class:indent-4={indent === 'ml-4'} - class:indent-8={indent === 'ml-8'} - > - <Icon {icon} {iconProps} size={'small'} /> - </div> - {/if} - <span class="overflow-label"> - {#if label}<Label {label} />{:else}{title}{/if} - </span> + {#if icon && !parent} + <div + class="an-element__icon" + class:indent-2={indent === 'ml-2'} + class:indent-4={indent === 'ml-4'} + class:indent-8={indent === 'ml-8'} + > + <Icon {icon} {iconProps} size={'small'} /> + </div> + {/if} + <span class="overflow-label"> + {#if label}<Label {label} />{:else}{title}{/if} + </span> - {#if node} - <div class="an-element__icon-arrow" class:collapsed> - <svg fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> - <polygon points="11.3,5.8 8,9.1 4.7,5.8 4,6.5 8,10.5 12,6.5 " /> - </svg> - </div> - {/if} - </div> + {#if node} + <div class="an-element__icon-arrow" class:collapsed> + <svg fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"> + <polygon points="11.3,5.8 8,9.1 4.7,5.8 4,6.5 8,10.5 12,6.5 " /> + </svg> + </div> + {/if} </span> {#if node === false} <div class="an-element__tool" on:click|preventDefault|stopPropagation={onMenuClick}> diff --git a/plugins/workbench-resources/src/components/navigator/SpecialElement.svelte b/plugins/workbench-resources/src/components/navigator/SpecialElement.svelte index 6b67196b1d..806905ebee 100644 --- a/plugins/workbench-resources/src/components/navigator/SpecialElement.svelte +++ b/plugins/workbench-resources/src/components/navigator/SpecialElement.svelte @@ -29,7 +29,7 @@ <!-- svelte-ignore a11y-mouse-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events --> -<div class="antiNav-element" class:selected class:disabled> +<div class="antiNav-element special" class:selected class:disabled> <div class="an-element__icon" class:indent-2={indent === 'ml-2'}