Initial import of LogDarioSeq baseline
Establishes version control for the personal Logseq DB fork before starting the server-client architecture migration and domain features described in docs/agent-guide and the approved implementation plan. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
561
resources/css/shui.css
Normal file
561
resources/css/shui.css
Normal file
@@ -0,0 +1,561 @@
|
||||
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%;
|
||||
--kbd-glow-top: transparent;
|
||||
--kbd-glow-bottom: rgba(0, 0, 0, 0.10);
|
||||
}
|
||||
|
||||
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%;
|
||||
--kbd-glow-top: rgba(255, 255, 255, 0.15);
|
||||
--kbd-glow-bottom: rgba(0, 0, 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,
|
||||
.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-0;
|
||||
|
||||
&:not([data-auto-width]) {
|
||||
width: calc(100% - 2rem);
|
||||
}
|
||||
|
||||
&[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;
|
||||
transition: transform 140ms ease-out, box-shadow 140ms ease-out, filter 140ms ease-out;
|
||||
filter: brightness(1);
|
||||
}
|
||||
|
||||
/* Glow effect for combo and separate keys */
|
||||
/* Top highlight and bottom shadow use theme-aware variables for light/dark visibility */
|
||||
/* Combo keys: glow on container (wraps all keys together) */
|
||||
.shui-shortcut-combo.shui-shortcut-glow {
|
||||
box-shadow: var(--kbd-glow-top) 0px 1px 0px 0px inset, var(--kbd-glow-bottom) 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: var(--kbd-glow-top) 0px 1px 0px 0px inset, var(--kbd-glow-bottom) 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, filter 140ms ease-out;
|
||||
box-shadow: 0 0 0 transparent;
|
||||
filter: brightness(1);
|
||||
}
|
||||
|
||||
/* 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 — separate keys: animate individual kbd elements */
|
||||
kbd.shui-shortcut-key-pressed,
|
||||
.shui-shortcut-key-pressed {
|
||||
transform: translateY(1px);
|
||||
filter: brightness(0.92);
|
||||
}
|
||||
|
||||
.shui-shortcut-separate.shui-shortcut-glow kbd.shui-shortcut-key-pressed {
|
||||
box-shadow: var(--kbd-glow-top) 0px 2px 0px 0px inset, var(--kbd-glow-bottom) 0px -0.5px 0px 0px inset;
|
||||
}
|
||||
|
||||
/* Key press animation — combo keys: animate the container (the whole keycap) */
|
||||
.shui-shortcut-combo.shui-shortcut-key-pressed {
|
||||
transform: translateY(1px);
|
||||
filter: brightness(0.92);
|
||||
}
|
||||
|
||||
.shui-shortcut-combo.shui-shortcut-glow.shui-shortcut-key-pressed {
|
||||
box-shadow: var(--kbd-glow-top) 0px 2px 0px 0px inset, var(--kbd-glow-bottom) 0px -0.5px 0px 0px inset;
|
||||
}
|
||||
|
||||
/* Row highlight animation — accent band sweep (only on actual row elements) */
|
||||
.shui-shortcut-row.shui-shortcut-row--pressed,
|
||||
.shortcut-row.shui-shortcut-row--pressed {
|
||||
background-image: linear-gradient(
|
||||
90deg,
|
||||
transparent 0%,
|
||||
transparent 35%,
|
||||
rgba(223, 239, 254, 0.08) 50%,
|
||||
transparent 65%,
|
||||
transparent 100%
|
||||
);
|
||||
background-size: 300% 100%;
|
||||
background-repeat: no-repeat;
|
||||
animation: shortcut-row-sweep 700ms ease-out forwards;
|
||||
}
|
||||
|
||||
@keyframes shortcut-row-sweep {
|
||||
from { background-position: -50% 0; }
|
||||
to { background-position: 150% 0; }
|
||||
}
|
||||
|
||||
/* 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-combo {
|
||||
transition: none;
|
||||
transform: none;
|
||||
filter: none;
|
||||
box-shadow: 0 0 0 transparent;
|
||||
}
|
||||
|
||||
.shui-shortcut-row.shui-shortcut-row--pressed,
|
||||
.shortcut-row.shui-shortcut-row--pressed {
|
||||
animation: none !important;
|
||||
background-image: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ui__list-item-highlighted-span {
|
||||
background-color: var(--lx-accent-06, var(--color-level-4));
|
||||
}
|
||||
|
||||
.dark .ui__list-item-highlighted-span {
|
||||
background-color: var(--lx-accent-08-alpha, var(--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 {
|
||||
.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;
|
||||
}
|
||||
|
||||
input[type=number] {
|
||||
appearance: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.ui__toast-content {
|
||||
&.untitled {
|
||||
.ui__toast-header {
|
||||
@apply absolute top-1 right-1 w-fit z-1;
|
||||
}
|
||||
|
||||
.ui__toast-body {
|
||||
@apply flex-initial py-2;
|
||||
}
|
||||
|
||||
.ui__toast-text {
|
||||
@apply flex flex-row items-center gap-2 overflow-auto;
|
||||
}
|
||||
|
||||
.ui__toast-description {
|
||||
@apply max-w-full overflow-auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user