mirror of
https://github.com/logseq/logseq.git
synced 2026-05-19 18:32:41 +00:00
06d890f6ca
The settings article has a fixed CSS width (44rem) for dialog intrinsic sizing, but when the viewport constrains the dialog, the inner flex container overflows and gets clipped. CSS percentages resolve against the declared width, not the rendered width, so a JS solution is needed. A ResizeObserver on the dialog element measures its actual clientWidth, subtracts the aside (only in row layout), and sets an explicit max-width on the shortcut container. Also makes inner elements flexible: removes flex-shrink-0 and min-width constraints on keystroke buttons, adds flex-wrap to toolbar and shortcut rows, and adds min-width: 0 to shortcut badge containers in shui.css. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
584 lines
13 KiB
CSS
584 lines
13 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-05-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% 16%;
|
|
}
|
|
|
|
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,
|
|
.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: var(--lx-gray-06-alpha, var(--rx-gray-06-alpha));
|
|
border: 1px solid var(--lx-gray-06-alpha, var(--rx-gray-06-alpha));
|
|
box-sizing: border-box;
|
|
white-space: nowrap;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* Glow effect for combo and separate keys */
|
|
/* Uses absolute white/black for physical light simulation (top highlight, bottom shadow) */
|
|
/* 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: 20px;
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
|
|
.shui-shortcut-separator {
|
|
background-color: var(--lx-gray-07-alpha, var(--rx-gray-07-alpha));
|
|
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;
|
|
min-width: 0;
|
|
}
|
|
|
|
.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: var(--lx-gray-06-alpha, var(--rx-gray-06-alpha));
|
|
border: 1px solid var(--lx-gray-06-alpha, var(--rx-gray-06-alpha));
|
|
box-sizing: border-box;
|
|
min-width: 20px;
|
|
}
|
|
|
|
/* 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: var(--lx-gray-12, var(--rx-gray-12));
|
|
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: var(--lx-gray-12, var(--rx-gray-12));
|
|
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 transparent;
|
|
}
|
|
|
|
/* Keys in separate containers get their own styling */
|
|
.shui-shortcut-separate kbd.shui-shortcut-key {
|
|
@apply rounded;
|
|
background-color: var(--lx-gray-06-alpha, var(--rx-gray-06-alpha));
|
|
border: 1px solid var(--lx-gray-06-alpha, var(--rx-gray-06-alpha));
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Override shortcut text color inside primary buttons for better contrast */
|
|
.bg-primary kbd.shui-shortcut-key,
|
|
.bg-primary .shui-shortcut-key,
|
|
.bg-primary .shui-shortcut-compact,
|
|
.bg-primary\/90 kbd.shui-shortcut-key,
|
|
.bg-primary\/90 .shui-shortcut-key,
|
|
.bg-primary\/90 .shui-shortcut-compact,
|
|
.bg-primary\/100 kbd.shui-shortcut-key,
|
|
.bg-primary\/100 .shui-shortcut-key,
|
|
.bg-primary\/100 .shui-shortcut-compact {
|
|
color: hsl(var(--primary-foreground));
|
|
}
|
|
|
|
/* 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 transparent;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|