greatbody
/
logseq
mirror of https://github.com/logseq/logseq
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

enhance(ui): clean up css vars

pull/10897/head
charlie 2024-01-31 11:51:25 +08:00
parent 5a6151d9e7
commit 4c98549d9a
6 changed files with 20 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/main/frontend/common.css
View File

@ -405,11 +405,7 @@ button.menu:focus {
} }
.menu-separator { .menu-separator {
@apply my-1; @apply my-1 opacity-50 border-t;
opacity: 0.5;
border-top-width: 1px;
border-color: var(--ls-border-color, #ccc);
} }
a.login { a.login {
@ -641,11 +637,11 @@ a.tooltip-priority {
} }
.page-reference:hover { .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 { .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 { #head .fade-link {

4
src/main/frontend/components/block.css
View File

@ -479,10 +479,10 @@
} }
.color-level { .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 & { .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 { & .color-level {

4
src/main/frontend/components/command_palette.css
View File

@ -39,13 +39,13 @@
&.chosen, &.chosen,
&.chosen p { &.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); color: var(--ls-secondary-text-color);
} }
.dark &.chosen, .dark &.chosen,
.dark &.chosen p { .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 { &:hover p {

6
src/main/frontend/components/container.css
View File

@ -163,8 +163,8 @@
} }
&:hover, &.active { &:hover, &.active {
background-color: or(--ls-left-sidebar-active-background, --lx-gray-04, --color-level-3); background-color: var(--lx-gray-04, var(--color-level-3, var(--rx-gray-04)));
color: or(--ls-left-sidebar-active-text-color, --lx-gray-12); color: var(--lx-gray-12, var(--rx-gray-12));
.ui__icon { .ui__icon {
opacity: .9; opacity: .9;
@ -209,7 +209,7 @@
} }
&:hover { &: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; opacity: 1 !important;

6
src/main/frontend/components/theme.css
View File

@ -18,17 +18,17 @@
.visible-scrollbar { .visible-scrollbar {
::-webkit-scrollbar-thumb { ::-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 { ::-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); width: var(--ls-scrollbar-width);
height: 8px; height: 8px;
} }
::-webkit-scrollbar-thumb:active { ::-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 { ::-webkit-scrollbar-corner {

14
src/main/frontend/ui.css
View File

@ -23,7 +23,7 @@
} }
&:hover, &.chosen { &: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 { .has-help small {
visibility: visible; visibility: visible;
@ -32,7 +32,7 @@
&:not(.chosen):hover { &:not(.chosen):hover {
background-color: unset !important; 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 @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; 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; background-repeat: no-repeat;
border-width: 1px; 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 { &.is-small {
@apply pl-2 py-1.5 sm:leading-4 sm:text-xs; @apply pl-2 py-1.5 sm:leading-4 sm:text-xs;
@ -348,9 +348,9 @@ html.is-mobile {
width: 24px; width: 24px;
height: 24px; height: 24px;
flex-shrink: 0; 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; 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, .ti,
.tie { .tie {
@ -359,7 +359,7 @@ html.is-mobile {
&:before { &:before {
@apply block absolute inset-0 ; @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: " "; content: " ";
} }
} }