From 4c98549d9a3e7bae7a2b9e3a1c002f8323dcc011 Mon Sep 17 00:00:00 2001 From: charlie Date: Wed, 31 Jan 2024 11:51:25 +0800 Subject: [PATCH] enhance(ui): clean up css vars --- src/main/frontend/common.css | 10 +++------- src/main/frontend/components/block.css | 4 ++-- src/main/frontend/components/command_palette.css | 4 ++-- src/main/frontend/components/container.css | 6 +++--- src/main/frontend/components/theme.css | 6 +++--- src/main/frontend/ui.css | 14 +++++++------- 6 files changed, 20 insertions(+), 24 deletions(-) diff --git a/src/main/frontend/common.css b/src/main/frontend/common.css index af3eced3f..71b388e0d 100644 --- a/src/main/frontend/common.css +++ b/src/main/frontend/common.css @@ -405,11 +405,7 @@ button.menu:focus { } .menu-separator { - @apply my-1; - - opacity: 0.5; - border-top-width: 1px; - border-color: var(--ls-border-color, #ccc); + @apply my-1 opacity-50 border-t; } a.login { @@ -641,11 +637,11 @@ a.tooltip-priority { } .page-reference:hover { - background: or(--ls-page-reference-hover-background, --lx-accent-04-alpha, --ls-secondary-background-color); + background: var(--lx-accent-04-alpha, var(--ls-secondary-background-color, hsl(var(--primary)/.4))); } .references-blocks .page-reference:hover { - background: or(--ls-page-reference-block-hover-background, --lx-accent-04-alpha, --ls-tertiary-background-color); + background: var(--lx-accent-04-alpha, var(--ls-tertiary-background-color, hsl(var(--primary)/.4))); } #head .fade-link { diff --git a/src/main/frontend/components/block.css b/src/main/frontend/components/block.css index 3e49cdb96..12efa4a7e 100644 --- a/src/main/frontend/components/block.css +++ b/src/main/frontend/components/block.css @@ -479,10 +479,10 @@ } .color-level { - background-color: or(--ls-right-sidebar-content-background, --lx-gray-02, --color-level-1, --rx-gray-02); + background-color: var(--lx-gray-02, var(--color-level-1, var(--rx-gray-02))); .dark & { - background-color: or(--ls-right-sidebar-content-background, --lx-gray-01, --color-level-1, --rx-gray-01); + background-color: var(--lx-gray-01, var(--color-level-1, var(--rx-gray-01))); } & .color-level { diff --git a/src/main/frontend/components/command_palette.css b/src/main/frontend/components/command_palette.css index 11a62039a..e45afbda0 100644 --- a/src/main/frontend/components/command_palette.css +++ b/src/main/frontend/components/command_palette.css @@ -39,13 +39,13 @@ &.chosen, &.chosen p { - background-color: or(--ls-cp-chosen, --lx-gray-03, --ls-a-chosen-bg); + background-color: var(--lx-gray-03, var(--ls-a-chosen-bg, var(--rx-gray-03))); color: var(--ls-secondary-text-color); } .dark &.chosen, .dark &.chosen p { - background-color: or(--ls-cp-chosen, --lx-gray-02, --ls-a-chosen-bg); + background-color: var(--lx-gray-02, var(--ls-a-chosen-bg, var(--rx-gray-02))); } &:hover p { diff --git a/src/main/frontend/components/container.css b/src/main/frontend/components/container.css index cc9f7aad3..3e1c95267 100644 --- a/src/main/frontend/components/container.css +++ b/src/main/frontend/components/container.css @@ -163,8 +163,8 @@ } &:hover, &.active { - background-color: or(--ls-left-sidebar-active-background, --lx-gray-04, --color-level-3); - color: or(--ls-left-sidebar-active-text-color, --lx-gray-12); + background-color: var(--lx-gray-04, var(--color-level-3, var(--rx-gray-04))); + color: var(--lx-gray-12, var(--rx-gray-12)); .ui__icon { opacity: .9; @@ -209,7 +209,7 @@ } &:hover { - background-color: or(--ls-nav-item-hover, --lx-gray-04, --ls-tertiary-background-color); + background-color: var(--lx-gray-04, var(--ls-tertiary-background-color, var(--rx-gray-04))); * { opacity: 1 !important; diff --git a/src/main/frontend/components/theme.css b/src/main/frontend/components/theme.css index 34228c668..bb6503d9c 100644 --- a/src/main/frontend/components/theme.css +++ b/src/main/frontend/components/theme.css @@ -18,17 +18,17 @@ .visible-scrollbar { ::-webkit-scrollbar-thumb { - background-color: or(--ls-scrollbar-thumb-color, --lx-gray-05, --ls-scrollbar-foreground-color); + background-color: var(--lx-gray-05, var(--ls-scrollbar-foreground-color)); } ::-webkit-scrollbar { - background-color: or(--ls-scrollbar-color, --lx-gray-02, --ls-scrollbar-background-color); + background-color: var(--lx-gray-02, var(--ls-scrollbar-background-color)); width: var(--ls-scrollbar-width); height: 8px; } ::-webkit-scrollbar-thumb:active { - background-color: or(--ls-scrollbar-thumb-color-active, --lx-gray-06, --ls-scrollbar-thumb-hover-color); + background-color: var(--lx-gray-06, var(--ls-scrollbar-thumb-hover-color)); } ::-webkit-scrollbar-corner { diff --git a/src/main/frontend/ui.css b/src/main/frontend/ui.css index aaa70cea0..ad47e8a0d 100644 --- a/src/main/frontend/ui.css +++ b/src/main/frontend/ui.css @@ -23,7 +23,7 @@ } &:hover, &.chosen { - background-color: or(--lx-gray-05, --ls-menu-hover-color, hsl(var(--secondary))); + background-color: var(--lx-gray-05, var(--ls-menu-hover-color, hsl(var(--secondary)))); .has-help small { visibility: visible; @@ -32,7 +32,7 @@ &:not(.chosen):hover { background-color: unset !important; - color: or(--lx-gray-12, --ls-primary-text-color, hsl(var(--secondary))); + color: var(--lx-gray-12, var(--ls-primary-text-color, hsl(var(--secondary)))); } } } @@ -304,10 +304,10 @@ html.is-mobile { @apply block w-full pl-3 pr-10 py-2 text-base leading-6 rounded border-gray-300 focus:outline-none sm:text-sm sm:leading-5; - background-color: or(--ls-form-select-background-color, --lx-gray-03, --ls-primary-background-color, transparent); + background-color: var(--lx-gray-03, var(--ls-primary-background-color, transparent)); background-repeat: no-repeat; border-width: 1px; - border-color: or(--ls-form-select-border-color, --lx-gray-07, --ls-border-color); + border-color: var(--lx-gray-07, var(--ls-border-color)); &.is-small { @apply pl-2 py-1.5 sm:leading-4 sm:text-xs; @@ -348,9 +348,9 @@ html.is-mobile { width: 24px; height: 24px; flex-shrink: 0; - border-color: or(--ls-type-icon-border-color, --lx-gray-03, --ls-primary-background-color); + border-color: var(--lx-gray-03, var(--ls-primary-background-color)); overflow: hidden; - color: or(--ls-type-icon-text-color, --lx-gray-12, --ls-primary-text-color); + color: var(--lx-gray-12, var(--ls-primary-text-color)); .ti, .tie { @@ -359,7 +359,7 @@ html.is-mobile { &:before { @apply block absolute inset-0 ; - background: or(--ls-type-icon-before-color, --lx-gray-03, --ls-primary-background-color); + background: var(--lx-gray-03, var(--ls-primary-background-color)); content: " "; } }