mirror of https://github.com/logseq/logseq
enhance(ui): clean up css vars
parent
5a6151d9e7
commit
4c98549d9a
|
@ -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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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: " ";
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue