mirror of
https://github.com/logseq/logseq.git
synced 2026-05-04 19:06:21 +00:00
568 lines
12 KiB
CSS
568 lines
12 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-02, 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,
|
|
.ui__button.as-ghost {
|
|
@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];
|
|
|
|
&:has(> .repos-list) {
|
|
@apply !z-[var(--ls-z-index-level-5)];
|
|
}
|
|
}
|
|
|
|
.ui__dialog-overlay {
|
|
&[data-align=start],
|
|
&[data-align=top] {
|
|
@apply !items-start;
|
|
|
|
.ui__dialog-content {
|
|
@apply top-20;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui__dialog-content {
|
|
@apply outline-none m-4;
|
|
|
|
&[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;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Deprecated: .ui__button-shortcut-key - replaced by shui-shortcut-key */
|
|
|
|
/* Unified Keyboard Shortcut Component Styles */
|
|
|
|
/* Combo Keys - simultaneous key combinations with separator */
|
|
.shui-shortcut-combo {
|
|
@apply flex items-start relative rounded;
|
|
background-color: rgba(223, 239, 254, 0.14);
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
box-sizing: border-box;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Glow effect for combo and separate keys */
|
|
/* Combo keys: glow on container (wraps all keys together) */
|
|
.shui-shortcut-combo.shui-shortcut-glow {
|
|
box-shadow: rgba(255, 255, 255, 0.15) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.15) 0px -1px 0px 0px inset;
|
|
border: none;
|
|
}
|
|
|
|
/* Separate keys: glow on individual keys (not container) */
|
|
.shui-shortcut-separate.shui-shortcut-glow kbd.shui-shortcut-key {
|
|
box-shadow: rgba(255, 255, 255, 0.15) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0.15) 0px -1px 0px 0px inset;
|
|
border: none;
|
|
}
|
|
|
|
.shui-shortcut-combo kbd.shui-shortcut-key {
|
|
@apply flex flex-col items-center justify-center px-1 py-0.5 relative shrink-0;
|
|
min-width: fit-content;
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
|
|
.shui-shortcut-separator {
|
|
background-color: rgba(224, 243, 255, 0.18);
|
|
align-self: stretch;
|
|
flex-shrink: 0;
|
|
width: 1px;
|
|
}
|
|
|
|
/* Separate Keys - sequential key presses with 4px gap */
|
|
.shui-shortcut-separate {
|
|
@apply flex items-start relative;
|
|
gap: 4px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.shui-shortcut-separate kbd.shui-shortcut-key {
|
|
@apply flex flex-col items-center justify-center px-1 py-0.5 relative rounded shrink-0;
|
|
background-color: rgba(223, 239, 254, 0.14);
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
box-sizing: border-box;
|
|
min-width: fit-content;
|
|
}
|
|
|
|
/* Compact Keys - minimal text-only style */
|
|
.shui-shortcut-compact {
|
|
@apply flex items-start relative;
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: normal;
|
|
line-height: 16px;
|
|
font-style: normal;
|
|
color: #ecedee;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
letter-spacing: -0.5px;
|
|
white-space: nowrap;
|
|
gap: 2px;
|
|
}
|
|
|
|
/* Individual key styling with inner glow */
|
|
kbd.shui-shortcut-key,
|
|
.shui-shortcut-key {
|
|
@apply text-xs font-normal h-5 flex items-center justify-center;
|
|
font-family: 'Inter', sans-serif;
|
|
color: #ecedee;
|
|
font-size: 12px;
|
|
text-align: center;
|
|
letter-spacing: -0.5px;
|
|
padding: 2px 4px;
|
|
line-height: 16px;
|
|
min-width: fit-content;
|
|
transition: transform 140ms ease-out, box-shadow 140ms ease-out;
|
|
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
/* Keys in separate containers get their own styling */
|
|
.shui-shortcut-separate kbd.shui-shortcut-key {
|
|
@apply rounded;
|
|
background-color: rgba(223, 239, 254, 0.14);
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Key press animation */
|
|
kbd.shui-shortcut-key-pressed,
|
|
.shui-shortcut-key-pressed {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
/* Key press animation with glow - preserve glow effect */
|
|
/* Combo keys: animate the container */
|
|
.shui-shortcut-combo.shui-shortcut-glow.shui-shortcut-key-pressed {
|
|
box-shadow: rgba(255, 255, 255, 0.15) 0px 2px 0px 0px inset, rgba(0, 0, 0, 0.15) 0px 0px 0px 0px inset, 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Separate keys: animate individual keys */
|
|
.shui-shortcut-separate.shui-shortcut-glow kbd.shui-shortcut-key-pressed {
|
|
box-shadow: rgba(255, 255, 255, 0.15) 0px 2px 0px 0px inset, rgba(0, 0, 0, 0.15) 0px 0px 0px 0px inset, 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Key press animation without glow */
|
|
.shui-shortcut-combo:not(.shui-shortcut-glow) kbd.shui-shortcut-key-pressed,
|
|
.shui-shortcut-separate:not(.shui-shortcut-glow) kbd.shui-shortcut-key-pressed {
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Row highlight animation */
|
|
.shui-shortcut-row--pressed {
|
|
background-color: rgba(223, 239, 254, 0.1);
|
|
transition: background-color 160ms ease-out;
|
|
}
|
|
|
|
/* Ensure consistent height for shortcut containers */
|
|
.shui-shortcut-row {
|
|
min-height: 20px;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
/* Respect reduced motion preference */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
kbd.shui-shortcut-key,
|
|
.shui-shortcut-key,
|
|
.shui-shortcut-row--pressed {
|
|
transition: none;
|
|
transform: none;
|
|
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
.shui-shortcut-row--pressed {
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
.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) - 20px);
|
|
}
|
|
|
|
&[data-side=bottom] {
|
|
max-height: calc(var(--radix-dropdown-menu-content-available-height) - 10px);
|
|
}
|
|
|
|
&.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-[4px] top-[17px] 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;
|
|
}
|
|
}
|