mirror of https://github.com/logseq/logseq
426 lines
8.0 KiB
CSS
426 lines
8.0 KiB
CSS
html * {
|
|
border-color: hsl(var(--border));
|
|
}
|
|
|
|
html[data-theme=light] {
|
|
--accent: var(--rx-gray-12-hsl);
|
|
--accent-foreground: var(--rx-gray-02-hsl);
|
|
--input: var(--rx-gray-03-hsl);
|
|
--secondary: 240 4.8% 95.9%;
|
|
}
|
|
|
|
html[data-theme=dark] {
|
|
--accent: var(--rx-gray-12-hsl);
|
|
--accent-foreground: var(--rx-gray-02-hsl);
|
|
--primary-foreground: 0 0% 22%;
|
|
--background: 0 0% 11%;
|
|
--foreground: 0 0% 95%;
|
|
--card: 0 0% 11%;
|
|
--card-foreground: 0 0% 95%;
|
|
--secondary: 0 0% 20%;
|
|
--secondary-foreground: 0 0% 98%;
|
|
--border: 0 0% 16%;
|
|
--muted: 0 0% 15%;
|
|
--popover: 0 0% 7%;
|
|
--popover-foreground: 0 0 95%;
|
|
--input: 0 0% 25%;
|
|
}
|
|
|
|
html {
|
|
div[data-radix-menu-content],
|
|
.ui__select-content {
|
|
--accent: var(--rx-gray-04-hsl);
|
|
--accent-foreground: var(--rx-gray-12-hsl);
|
|
|
|
--muted: var(--rx-gray-05-hsl);
|
|
}
|
|
|
|
.ui__calendar {
|
|
--accent: var(--rx-gray-04-hsl);
|
|
--accent-foreground: var(--rx-gray-12-hsl);
|
|
}
|
|
|
|
&:not([data-color=logseq]) {
|
|
.ui__dropdown-menu-item,
|
|
div[data-radix-popper-content-wrapper] div[data-radix-collection-item] {
|
|
&:focus, &.is-active {
|
|
background-color: var(--lx-gray-04, hsl(var(--accent)));
|
|
}
|
|
}
|
|
|
|
.ui__dropdown-menu-content.has-search-key {
|
|
> .head:focus-within + div[data-radix-collection-item] {
|
|
background-color: var(--lx-gray-04, hsl(var(--accent)));
|
|
}
|
|
}
|
|
|
|
|
|
div[data-radix-popper-content-wrapper] div[role=menu],
|
|
.menu-links-wrapper,
|
|
.menu-links-outer,
|
|
.absolute-modal[data-modal-name] {
|
|
background-color: var(--lx-popover-bg, var(--lx-gray-01, hsl(var(--popover))));
|
|
}
|
|
}
|
|
|
|
&[data-color=logseq] {
|
|
.references-blocks-item {
|
|
--lx-bg-override: var(--rx-gray-03-alpha);
|
|
}
|
|
|
|
.block-children-left-border:hover {
|
|
--ls-block-left-color: var(--rx-logseq-11);
|
|
}
|
|
}
|
|
|
|
&[data-color=none] {
|
|
--ls-block-bullet-color: var(--rx-gray-08);
|
|
--ls-block-bullet-active-color: var(--rx-gray-12);
|
|
|
|
::selection {
|
|
@apply bg-primary/20;
|
|
}
|
|
|
|
#ui__ac-inner {
|
|
}
|
|
|
|
.cp__cmdk {
|
|
--lx-gray-07: var(--rx-gray-07);
|
|
}
|
|
|
|
.ui__toggle {
|
|
&-background-off {
|
|
@apply bg-gray-08;
|
|
|
|
.switcher {
|
|
@apply bg-gray-10;
|
|
}
|
|
}
|
|
|
|
&-background-on {
|
|
.switcher {
|
|
@apply bg-gray-03;
|
|
}
|
|
}
|
|
}
|
|
|
|
.tl-container {
|
|
--ls-primary-background-color: hsl(var(--background));
|
|
--ls-secondary-background-color: var(--rx-gray-01);
|
|
--ls-tertiary-background-color: var(--rx-gray-03);
|
|
--ls-quaternary-background-color: var(--rx-gray-05);
|
|
}
|
|
}
|
|
}
|
|
|
|
html[data-theme=light] {
|
|
&[data-color=logseq] {
|
|
.references-blocks-item {
|
|
--lx-bg-override: var(--rx-gray-03-alpha);
|
|
}
|
|
}
|
|
|
|
.extensions__pdf-container {
|
|
--lx-pdf-container-dark-bg: var(--lx-gray-11, #042f3c);
|
|
}
|
|
}
|
|
|
|
html[data-theme=dark] {
|
|
background-color: #161616;
|
|
|
|
&[data-color=logseq] {
|
|
@apply bg-[#002b36];
|
|
|
|
.ui__modal-panel {
|
|
@apply border-accent-01;
|
|
}
|
|
|
|
.tippy-tooltip {
|
|
@apply border-accent-02;
|
|
}
|
|
|
|
.references-blocks-item {
|
|
background-color: var(--lx-gray-03, var(--ls-secondary-background-color));
|
|
}
|
|
|
|
.cp__right-sidebar-inner {
|
|
.references-blocks-item {
|
|
background-color: var(--lx-gray-04, var(--ls-tertiary-background-color));
|
|
}
|
|
}
|
|
|
|
.cp__themes-installed {
|
|
.it.is-active, .it:hover {
|
|
@apply bg-accent-01;
|
|
}
|
|
}
|
|
|
|
.ui__button {
|
|
&.as-outline {
|
|
--accent: 192 100% 12%;
|
|
}
|
|
}
|
|
|
|
div[data-radix-menu-content],
|
|
.ui__select-content {
|
|
--accent: 190 100% 15%;
|
|
--muted: 192 100% 13%;
|
|
--secondary-foreground: 0 0% 82%;
|
|
}
|
|
|
|
.ui__button {
|
|
&.as-ghost {
|
|
@apply hover:bg-accent-01;
|
|
}
|
|
}
|
|
|
|
.menu-separator {
|
|
@apply opacity-20;
|
|
}
|
|
|
|
.ui__calendar {
|
|
--accent: 196 100% 15%;
|
|
}
|
|
|
|
.rc-datepicker {
|
|
--accent: 200 97% 37%;
|
|
}
|
|
|
|
.cp__cmdk {
|
|
.border-gray-06,
|
|
.border-gray-07 {
|
|
border-color: var(--ls-border-color, var(--lx-gray-06));
|
|
opacity: .6;
|
|
}
|
|
|
|
> .hints {
|
|
@apply border-accent-01 bg-gray-02;
|
|
}
|
|
}
|
|
|
|
.tl-button {
|
|
&:hover {
|
|
@apply bg-accent-02;
|
|
}
|
|
}
|
|
|
|
.cp__header {
|
|
> .r > div:not(.ui__dropdown-trigger) a.button, button.button {
|
|
@apply opacity-60 hover:opacity-90;
|
|
}
|
|
}
|
|
|
|
.form-input {
|
|
@apply border-accent-01;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui__dialog-overlay, .ui__alert-dialog-overlay,
|
|
.ui__dialog-content, .ui__alert-dialog-content,
|
|
.ui__dropdown-menu-content, .ui__select-content {
|
|
|
|
&.z-50 {
|
|
@apply z-[999];
|
|
}
|
|
}
|
|
|
|
div[data-radix-popper-content-wrapper] {
|
|
@apply !z-[999];
|
|
}
|
|
|
|
.ui__dialog-overlay {
|
|
&[data-align=start],
|
|
&[data-align=top] {
|
|
@apply !items-start;
|
|
|
|
.ui__dialog-content {
|
|
@apply top-20;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui__dialog-content {
|
|
@apply outline-none;
|
|
|
|
&[data-auto-width] {
|
|
@apply max-w-[90vw] w-max sm:max-w-[960px];
|
|
}
|
|
|
|
&[data-close-btn=false] {
|
|
.ui__dialog-close {
|
|
@apply hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui__alert-dialog-content {
|
|
&[data-mode=confirm] {
|
|
.ui__alert-dialog-footer {
|
|
@apply flex justify-between font-normal items-center select-none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui__button-shortcut-key {
|
|
@apply text-xs font-normal h-5 w-5 flex items-center justify-center rounded bg-gray-06-alpha;
|
|
|
|
&:first-of-type {
|
|
@apply ml-2;
|
|
}
|
|
}
|
|
|
|
.ui__list-item-highlighted-span {
|
|
background-color: or(--lx-accent-06, --color-level-4);
|
|
}
|
|
|
|
.dark .ui__list-item-highlighted-span {
|
|
background-color: or(--lx-accent-08-alpha, --color-level-4);
|
|
}
|
|
|
|
.ui__dropdown-menu-content, div[data-radix-menu-content],
|
|
.ui__select-content {
|
|
@apply overflow-y-auto;
|
|
|
|
&[data-side=top] {
|
|
max-height: calc(var(--radix-dropdown-menu-content-available-height) - 40px);
|
|
}
|
|
|
|
&[data-side=bottom] {
|
|
max-height: calc(var(--radix-dropdown-menu-content-available-height) - 20px);
|
|
}
|
|
|
|
&.text-popover-foreground {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
.ui__popover-content {
|
|
@apply overflow-y-auto;
|
|
|
|
&[data-side=top] {
|
|
max-height: calc(var(--radix-popover-content-available-height) - 40px);
|
|
}
|
|
|
|
&[data-side=bottom] {
|
|
max-height: calc(var(--radix-popover-content-available-height) - 20px);
|
|
}
|
|
}
|
|
|
|
.ui__popover-content {
|
|
@apply !pointer-events-auto;
|
|
}
|
|
|
|
.ui__multi-select-content {
|
|
@apply relative;
|
|
|
|
> .head {
|
|
@apply sticky top-0 z-10;
|
|
}
|
|
|
|
.search-input {
|
|
> .ui__input {
|
|
@apply rounded-[1px] h-8;
|
|
}
|
|
}
|
|
|
|
&:has([data-radix-collection-item]) {
|
|
> .head {
|
|
@apply mb-1.5;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui__calendar {
|
|
.rdp-caption_dropdowns {
|
|
@apply flex items-center justify-center relative rounded opacity-80;
|
|
|
|
.rdp-vhidden {
|
|
@apply hidden;
|
|
}
|
|
|
|
.rdp-dropdown_month,
|
|
.rdp-dropdown_year {
|
|
@apply relative pr-3 mr-3;
|
|
|
|
select {
|
|
@apply absolute px-2 py-0 border left-0 z-[2] opacity-0 bg-none;
|
|
}
|
|
|
|
> .text-sm {
|
|
@apply w-full z-[1];
|
|
|
|
svg {
|
|
@apply absolute right-0 top-[6px];
|
|
}
|
|
}
|
|
}
|
|
|
|
.rdp-dropdown_month {
|
|
@apply ml-4;
|
|
}
|
|
|
|
& + div {
|
|
@apply absolute -right-1 flex gap-2;
|
|
|
|
button[name=previous-month] {
|
|
@apply relative;
|
|
svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
}
|
|
|
|
button[name=next-month] {
|
|
@apply relative;
|
|
svg {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.rdp-caption_start {
|
|
> div {
|
|
@apply justify-start;
|
|
}
|
|
}
|
|
|
|
.del-date-btn {
|
|
@apply absolute right-[13px] top-[21px] px-1 opacity-70 hover:opacity-100
|
|
active:opacity-80 hover:text-red-rx-09 rounded-md !h-6 !w-6;
|
|
}
|
|
|
|
&.has-del-btn {
|
|
.rdp-caption_dropdowns {
|
|
& + div {
|
|
@apply right-5;
|
|
}
|
|
}
|
|
}
|
|
|
|
input[type=number] {
|
|
appearance: initial;
|
|
}
|
|
|
|
.rdp-button {
|
|
&[name=previous-month], &[name=next-month] {
|
|
@apply !h-6 !w-6;
|
|
}
|
|
}
|
|
}
|
|
|
|
.popper-arrow {
|
|
fill: white;
|
|
filter: drop-shadow(0 0 3px var(--lx-gray-12));
|
|
clip-path: inset(0 -10px -10px -10px);
|
|
}
|
|
|
|
.dark-theme {
|
|
.popper-arrow {
|
|
/* FIXME: set the best color for different themes */
|
|
fill: none;
|
|
}
|
|
}
|