From 600ae29830f56966a684c0ec57354da6c616a4fc Mon Sep 17 00:00:00 2001 From: Sergey Kolesnik Date: Sun, 3 Mar 2024 03:38:08 +0300 Subject: [PATCH] fix: adapt styles to v0.10.7 --- src/base.css | 114 +++++++++++++++++++++++++++++++++++++++----- src/dark-black.css | 54 ++++++++++----------- src/dark-coffee.css | 46 +++++++++--------- src/light-sepia.css | 16 +++---- src/light-white.css | 16 +++---- 5 files changed, 169 insertions(+), 77 deletions(-) diff --git a/src/base.css b/src/base.css index d756f88..8db290c 100644 --- a/src/base.css +++ b/src/base.css @@ -53,6 +53,21 @@ } +/* radix ui hacks */ +.text-gray-11 { + color: var(--ls-secondary-text-color); +} +.text-gray-12 { + color: var(--ls-primary-text-color); +} +.border-gray-06 { + border-color: var(--ls-border-color); +} +.border-gray-07 { + border-color: var(--ls-border-color); +} + + /* global color vars */ :root { --ph-highlight-color-blue: var(--color-blue-300); @@ -94,8 +109,8 @@ body[data-page=whiteboard] #app-container { } ::selection { - background-color: var(--ls-selection-background-color); - color: var(--ls-selection-text-color); + background-color: var(--ls-selection-background-color) !important; + color: var(--ls-selection-text-color) !important; } @@ -132,6 +147,15 @@ body[data-page=whiteboard] #app-container { text-align: left; } +#right-sidebar .item-actions > button.ui__button { + color: var(--ls-primary-text-color); + background-color: transparent; +} +#right-sidebar .item-actions > button.ui__button:hover { + color: var(--bujo-button-text); + background-color: var(--bujo-button-background-hover); +} + #right-sidebar .resizer:active, #right-sidebar .resizer:focus, #right-sidebar .resizer:hover { @@ -186,6 +210,15 @@ body[data-page=whiteboard] #app-container { color: var(--bujo-left-sidebar-page-text); } +#left-sidebar button.ui__button { + color: var(--bujo-button-text); + background-color: transparent; +} +#left-sidebar button.ui__button:hover { + color: var(--bujo-button-text); + background-color: var(--bujo-button-background); +} + #left-sidebar > .left-sidebar-inner { background-color: var(--bujo-left-sidebar-background); } @@ -196,10 +229,14 @@ body[data-page=whiteboard] #app-container { background-color: var(--bujo-resizer); } -.ui__context-menu-content { - /* use default --accent & --accent-foreground vars */ +div[data-radix-popper-content-wrapper] > div[role=menu] > div[role=menuitem]:hover { + background-color: hsl(var(--accent)); +} +.ui__context-menu-content, .ui__dropdown-menu-content, .ui__select-content { + /* use default vars */ --accent: unset !important; --accent-foreground: unset !important; + --muted: unset !important; } .left-sidebar-inner .nav-contents-container.is-scrolled { @@ -262,6 +299,9 @@ a[title=Pink] > .heading-bg { /* search */ +.ui__modal-panel { + border-color: var(--ls-border-color); +} .cp__cmdk { background-color: var(--bujo-search-item-background); } @@ -277,12 +317,22 @@ a[title=Pink] > .heading-bg { } /* results */ +.cp__cmdk .search-results > div.\!opacity-100, .cp__cmdk .search-results > div:hover { - color: var(--bujo-text-accent); -} -.cp__cmdk .search-results > div.\!opacity-100 { background-color: var(--bujo-search-item-chosen-background); } + +.cp__cmdk .search-results > div:hover { + color: var(--bujo-search-item-icon-text); +} +.cp__cmdk .search-results > div > div > div:has(> .ui__icon) { + background-color: var(--bujo-search-item-icon-background); +} +.cp__cmdk .search-results > div.\!opacity-100 > div > div:has(> .ui__icon), +.cp__cmdk .search-results > div:hover > div > div:has(> .ui__icon) { + background-color: transparent; +} + html[data-theme="dark"] .cp__cmdk .ui__list-item-highlighted-span, html[data-theme="light"] .cp__cmdk .ui__list-item-highlighted-span { background-color: var(--ls-page-mark-bg-color); @@ -294,6 +344,10 @@ html[data-theme="light"] .cp__cmdk .ui__list-item-highlighted-span { opacity: 0.7 !important; } +.cp__cmdk > .hints { + border-color: var(--ls-border-color); +} + /* ---- */ /* MAIN */ @@ -436,7 +490,10 @@ a.asset-ref { /* title in pdf extension */ .page-properties { border-radius: var(--ls-border-radius-low); } -.page-property-key:hover { +.page-property-key.page-ref { + color: var(--ls-secondary-text-color); +} +.page-property-key.page-ref:hover { color: var(--bujo-property-text-hover); background-color: transparent; transition: .1s; @@ -469,6 +526,13 @@ a.asset-ref { /* title in pdf extension */ /* page link */ +.page-ref { + color: var(--ls-link-ref-text-color); +} +.page-ref:hover { + color: var(--ls-link-ref-text-hover-color); +} + .page-reference .bracket { opacity: .5; color: var(--bujo-link-ref-brackets); @@ -775,7 +839,7 @@ a.priority[href="#/page/C" i]::before { } .bullet-link-wrap > .bullet-container:not(.as-order-list) > .bullet.selected { - background-color: var(--bujo-block-bullet-selected) !important; + color: var(--bujo-block-bullet-selected) !important; } .ls-block.selected .bullet-link-wrap > .bullet-container.as-order-list > .bullet:not(.selected) { @@ -1267,6 +1331,7 @@ body:has(> #logseq-bullet-threading_lsp_main) { [data-ref="logseq-media-ts"] > .kef-media-ts-ts > svg { position: relative !important; bottom: 0.1rem !important; + color: var(--ls-secondary-text-color); } @@ -1505,6 +1570,9 @@ label.day-enabled { /* callouts (admonitions) */ +svg.note { + color: var(--ls-primary-text-color); +} svg.tip { color: var(--ls-primary-text-color); } @@ -1527,11 +1595,11 @@ svg.tip { .cp__themes-installed { background-color: var(--bujo-themes-switch-background); } -.cp__themes-installed .it { - background-color: transparent; +.cp__themes-installed .it:hover { + background-color: transparent !important; } .cp__themes-installed .it.is-active { - background-color: var(--bujo-themes-switch-selected-background); + background-color: var(--bujo-themes-switch-selected-background) !important; } @@ -1593,6 +1661,13 @@ html[data-theme="dark"] .cp__shortcut-page-x > article > ul li.th { * WHITEBOARDS */ +html[data-color=none] .tl-container { + --ls-primary-background-color: hsl(var(--background)); + --ls-secondary-background-color: unset !important; + --ls-tertiary-background-color: unset !important; + --ls-quaternary-background-color: unset !important; +} + .whiteboard .logseq-tldraw { --color-selectedFill: var(--bujo-whiteboard-fill); --color-selectedStroke: var(--bujo-whiteboard-border-accent); @@ -1613,6 +1688,7 @@ html[data-theme="dark"] .cp__shortcut-page-x > article > ul li.th { .whiteboard :is(.tl-context-bar, .tl-tools-floating-panel) .tl-button:hover { background-color: var(--bujo-whiteboard-background-accent); } +.whiteboard .tl-tools-floating-panel .tl-button[data-selected=true], .whiteboard .tl-tools-floating-panel .tl-button[data-selected=true]:hover { background-color: var(--bujo-whiteboard-fill); } @@ -1620,6 +1696,20 @@ html[data-theme="dark"] .cp__shortcut-page-x > article > ul li.th { color: var(--bujo-whiteboard-text-accent); } +.whiteboard .tl-action-bar .tl-button:hover { + background-color: var(--bujo-whiteboard-background); +} + +.whiteboard .tl-action-bar .tl-button.tl-toggle-input:hover { + background-color: var(--bujo-whiteboard-background-accent); +} +.whiteboard .tl-action-bar .tl-button.tl-toggle-input[data-state=on] { + background-color: var(--bujo-whiteboard-background); +} +.whiteboard .tl-action-bar .tl-button.tl-toggle-input[data-state=on]:hover { + background-color: var(--bujo-whiteboard-background-accent); +} + .whiteboard .tl-context-bar .tl-geometry-toolbar .tl-button { border: none; } diff --git a/src/dark-black.css b/src/dark-black.css index e07eb82..52d0348 100644 --- a/src/dark-black.css +++ b/src/dark-black.css @@ -144,6 +144,8 @@ --bujo-search-item-background: var(--ls-secondary-background-color); --bujo-search-item-chosen-background: var(--ls-tertiary-background-color); + --bujo-search-item-icon-text: var(--bujo-text-accent); + --bujo-search-item-icon-background: var(--bujo-background5); --ls-search-icon-color: var(--bujo-accent-normal); --bujo-search-item-new-page-icon-text: var(--bujo-text-accent); @@ -335,8 +337,8 @@ /* new way of setting vars in radix ui */ /* logseq as an accent option */ -html[data-theme=dark], -html[data-theme=dark][data-color=logseq] { +html[data-theme=dark] { + /* --lx-accent-01: var(--ls-primary-background-color); --lx-accent-02: var(--ls-secondary-background-color); --lx-accent-03: var(--ls-tertiary-background-color); @@ -388,7 +390,7 @@ html[data-theme=dark][data-color=logseq] { --rx-gray-10: hsl(var(--rx-gray-10-hsl)); --rx-gray-11: hsl(var(--rx-gray-11-hsl)); --rx-gray-12: hsl(var(--rx-gray-12-hsl)); -/* + --lx-gray-01: var(--rx-gray-01); --lx-gray-02: var(--rx-gray-02); --lx-gray-03: var(--rx-gray-03); @@ -414,7 +416,7 @@ html[data-theme=dark][data-color=logseq] { --lx-gray-10-alpha: var(--rx-gray-10); --lx-gray-11-alpha: var(--rx-gray-11); --lx-gray-12-alpha: var(--rx-gray-12); -*/ + */ --background: var(--bujo-background2_hsl); --primary: var(--bujo-background2_hsl); @@ -447,60 +449,58 @@ html[data-theme=dark][data-color=logseq] { /* CODE BLOCK */ /* ---------- */ -html[data-theme="dark"] .CodeMirror { - color: hsla(var(--bujo-foreground2_hsl), .7); +html[data-theme=dark] .CodeMirror { + color: hsla(var(--bujo-foreground2_hsl), .7) !important; + background-color: var(--ls-primary-background-color) !important; } html[data-theme=dark] .CodeMirror .CodeMirror-activeline-background { background: var(--bujo-tiny-shadow-white); } -html[data-theme=dark] .CodeMirror { - background-color: var(--ls-primary-background-color); -} html[data-theme=dark] .CodeMirror .CodeMirror-gutters { background-color: var(--ls-secondary-background-color); } -html[data-theme="dark"] .CodeMirror .cm-keyword { +html[data-theme=dark] .CodeMirror .cm-keyword { color: var(--ls-secondary-text-color); } -html[data-theme="dark"] .CodeMirror .cm-operator { +html[data-theme=dark] .CodeMirror .cm-operator { color: var(--ls-primary-text-color); opacity: 0.7; } -html[data-theme="dark"] .CodeMirror .cm-property { +html[data-theme=dark] .CodeMirror .cm-property { color: var(--ls-primary-text-color); } -html[data-theme="dark"] .CodeMirror .cm-builtin { +html[data-theme=dark] .CodeMirror .cm-builtin { color: var(--bujo-accent-dimmed); } -html[data-theme="dark"] .CodeMirror .cm-number { +html[data-theme=dark] .CodeMirror .cm-number { color: var(--bujo-highlight-lit); } -html[data-theme="dark"] .CodeMirror .cm-meta { +html[data-theme=dark] .CodeMirror .cm-meta { color: var(--bujo-highlight-lit); } -html[data-theme="dark"] .CodeMirror .cm-string, -html[data-theme="dark"] .CodeMirror .cm-string-2 { +html[data-theme=dark] .CodeMirror .cm-string, +html[data-theme=dark] .CodeMirror .cm-string-2 { color: var(--bujo-fill3); } -html[data-theme="dark"] .CodeMirror .cm-comment { +html[data-theme=dark] .CodeMirror .cm-comment { color: var(--bujo-background6); } -html[data-theme="dark"] .CodeMirror .cm-variable, -html[data-theme="dark"] .CodeMirror .cm-qualifier, -html[data-theme="dark"] .CodeMirror .cm-variable-3, -html[data-theme="dark"] .CodeMirror .cm-type { +html[data-theme=dark] .CodeMirror .cm-variable, +html[data-theme=dark] .CodeMirror .cm-qualifier, +html[data-theme=dark] .CodeMirror .cm-variable-3, +html[data-theme=dark] .CodeMirror .cm-type { color: var(--ls-primary-text-color); } -html[data-theme="dark"] .CodeMirror .cm-variable-2 { +html[data-theme=dark] .CodeMirror .cm-variable-2 { color: var(--ls-primary-text-color); font-style: italic; opacity: 0.7; } -html[data-theme="dark"] .CodeMirror .cm-def, -html[data-theme="dark"] .CodeMirror .cm-attribute, -html[data-theme="dark"] .CodeMirror .cm-atom, -html[data-theme="dark"] .CodeMirror .cm-tag { +html[data-theme=dark] .CodeMirror .cm-def, +html[data-theme=dark] .CodeMirror .cm-attribute, +html[data-theme=dark] .CodeMirror .cm-atom, +html[data-theme=dark] .CodeMirror .cm-tag { color: var(--ls-secondary-text-color); font-style: italic; } diff --git a/src/dark-coffee.css b/src/dark-coffee.css index c3e9a01..988649c 100644 --- a/src/dark-coffee.css +++ b/src/dark-coffee.css @@ -147,6 +147,8 @@ --bujo-search-item-background: var(--ls-secondary-background-color); --bujo-search-item-chosen-background: var(--bujo-background5); + --bujo-search-item-icon-text: var(--bujo-text-accent); + --bujo-search-item-icon-background: var(--bujo-background5); --ls-search-icon-color: var(--bujo-accent-normal); --bujo-search-item-new-page-icon-text: var(--bujo-text-accent); @@ -338,8 +340,8 @@ /* new way of setting vars in radix ui */ /* logseq as an accent option */ -html[data-theme=dark], -html[data-theme=dark][data-color=logseq] { +html[data-theme=dark] { + /* --lx-accent-01: var(--ls-primary-background-color); --lx-accent-02: var(--ls-secondary-background-color); --lx-accent-03: var(--ls-tertiary-background-color); @@ -365,20 +367,22 @@ html[data-theme=dark][data-color=logseq] { --lx-accent-10-alpha: var(--lx-accent-10); --lx-accent-11-alpha: var(--lx-accent-11); --lx-accent-12-alpha: var(--lx-accent-12); - - --rx-gray-01-hsl: var(--bujo-background1_hsl); /*hsl(13, 18%, 10%);*/ - --rx-gray-02-hsl: var(--bujo-background2_hsl); /*hsl(10, 10%, 12%);*/ - --rx-gray-03-hsl: var(--bujo-background2_5_hsl); /*hsl(13, 11%, 13%);*/ - --rx-gray-04-hsl: var(--bujo-background3_hsl); /*hsl(15, 11%, 14%);*/ - --rx-gray-05-hsl: var(--bujo-background4_hsl); /*hsl( 9, 9%, 15%);*/ - --rx-gray-06-hsl: var(--bujo-background4_5_hsl); /*hsl( 9, 9%, 17%);*/ - --rx-gray-07-hsl: var(--bujo-background5_hsl); /*hsl( 8, 8%, 20%);*/ - --rx-gray-08-hsl: var(--bujo-background6_hsl); /*hsl(17, 12%, 23%);*/ - --rx-gray-09-hsl: var(--bujo-background7_hsl); /*hsl(24, 11%, 34%);*/ - --rx-gray-10-hsl: var(--bujo-background8_hsl); /*hsl(24, 11%, 40%);*/ - --rx-gray-11-hsl: var(--bujo-foreground1_hsl); /*hsl(27, 20%, 52%);*/ - --rx-gray-12-hsl: var(--bujo-foreground2_hsl); /*hsl(27, 20%, 71%);*/ - + */ + + /*--rx-gray-01-hsl: var(--bujo-background1_hsl);*/ /*hsl(13, 18%, 10%);*/ + /*--rx-gray-02-hsl: var(--bujo-background2_hsl);*/ /*hsl(10, 10%, 12%);*/ + /*--rx-gray-03-hsl: var(--bujo-background2_5_hsl);*/ /*hsl(13, 11%, 13%);*/ + /*--rx-gray-04-hsl: var(--bujo-background3_hsl);*/ /*hsl(15, 11%, 14%);*/ + /*--rx-gray-05-hsl: var(--bujo-background4_hsl);*/ /*hsl( 9, 9%, 15%);*/ + /*--rx-gray-06-hsl: var(--bujo-background4_5_hsl);*/ /*hsl( 9, 9%, 17%);*/ + /*--rx-gray-07-hsl: var(--bujo-background5_hsl);*/ /*hsl( 8, 8%, 20%);*/ + /*--rx-gray-08-hsl: var(--bujo-background6_hsl);*/ /*hsl(17, 12%, 23%);*/ + /*--rx-gray-09-hsl: var(--bujo-background7_hsl);*/ /*hsl(24, 11%, 34%);*/ + /*--rx-gray-10-hsl: var(--bujo-background8_hsl);*/ /*hsl(24, 11%, 40%);*/ + /*--rx-gray-11-hsl: var(--bujo-foreground1_hsl);*/ /*hsl(27, 20%, 52%);*/ + /*--rx-gray-12-hsl: var(--bujo-foreground2_hsl);*/ /*hsl(27, 20%, 71%);*/ + + /* --rx-gray-01: hsl(var(--rx-gray-01-hsl)); --rx-gray-02: hsl(var(--rx-gray-02-hsl)); --rx-gray-03: hsl(var(--rx-gray-03-hsl)); @@ -391,7 +395,7 @@ html[data-theme=dark][data-color=logseq] { --rx-gray-10: hsl(var(--rx-gray-10-hsl)); --rx-gray-11: hsl(var(--rx-gray-11-hsl)); --rx-gray-12: hsl(var(--rx-gray-12-hsl)); -/* + --lx-gray-01: var(--rx-gray-01); --lx-gray-02: var(--rx-gray-02); --lx-gray-03: var(--rx-gray-03); @@ -417,7 +421,7 @@ html[data-theme=dark][data-color=logseq] { --lx-gray-10-alpha: var(--rx-gray-10); --lx-gray-11-alpha: var(--rx-gray-11); --lx-gray-12-alpha: var(--rx-gray-12); -*/ + */ --background: var(--bujo-background2_hsl); --primary: var(--bujo-background2_5_hsl); @@ -451,14 +455,12 @@ html[data-theme=dark][data-color=logseq] { /* ---------- */ html[data-theme=dark] .CodeMirror { - color: hsla(var(--bujo-foreground2_hsl), .7); + color: hsla(var(--bujo-foreground2_hsl), .7) !important; + background-color: var(--ls-primary-background-color) !important; } html[data-theme=dark] .CodeMirror .CodeMirror-activeline-background { background: var(--bujo-tiny-shadow-white); } -html[data-theme=dark] .CodeMirror { - background-color: var(--ls-primary-background-color); -} html[data-theme=dark] .CodeMirror .CodeMirror-gutters { background-color: var(--ls-secondary-background-color); } diff --git a/src/light-sepia.css b/src/light-sepia.css index 80f30dc..062184f 100644 --- a/src/light-sepia.css +++ b/src/light-sepia.css @@ -155,6 +155,8 @@ --bujo-search-item-background: var(--bujo-background4); --bujo-search-item-chosen-background: var(--bujo-background7); + --bujo-search-item-icon-text: var(--bujo-text-accent); + --bujo-search-item-icon-background: var(--bujo-background1); --ls-search-icon-color: var(--bujo-accent-normal); --bujo-search-item-new-page-icon-text: var(--bujo-background4); @@ -344,8 +346,8 @@ /* new way of setting vars in radix ui */ /* logseq as an accent option */ -html[data-theme=light], -html[data-theme=light][data-color=logseq] { +html[data-theme=light] { + /* --lx-accent-01: var(--ls-primary-background-color); --lx-accent-02: var(--ls-secondary-background-color); --lx-accent-03: var(--ls-tertiary-background-color); @@ -397,7 +399,7 @@ html[data-theme=light][data-color=logseq] { --rx-gray-10: hsl(var(--rx-gray-10-hsl)); --rx-gray-11: hsl(var(--rx-gray-11-hsl)); --rx-gray-12: hsl(var(--rx-gray-12-hsl)); -/* + --lx-gray-01: var(--rx-gray-01); --lx-gray-02: var(--rx-gray-02); --lx-gray-03: var(--rx-gray-03); @@ -423,7 +425,7 @@ html[data-theme=light][data-color=logseq] { --lx-gray-10-alpha: var(--rx-gray-10); --lx-gray-11-alpha: var(--rx-gray-11); --lx-gray-12-alpha: var(--rx-gray-12); -*/ + */ --background: var(--bujo-background2_hsl); --primary: var(--bujo-background3_hsl); @@ -457,14 +459,12 @@ html[data-theme=light][data-color=logseq] { /* ---------- */ html[data-theme=light] .CodeMirror { - color: hsla(var(--bujo-foreground2_hsl), .7); + color: hsla(var(--bujo-foreground2_hsl), .7) !important; + background-color: var(--bujo-background3) !important; } html[data-theme=light] .CodeMirror .CodeMirror-activeline-background { background: var(--bujo-shadow-white); } -html[data-theme=light] .CodeMirror { - background-color: var(--bujo-background3); -} html[data-theme=light] .CodeMirror .CodeMirror-gutters { background-color: var(--bujo-background4); } diff --git a/src/light-white.css b/src/light-white.css index a88fe60..1aaff8d 100644 --- a/src/light-white.css +++ b/src/light-white.css @@ -171,6 +171,8 @@ --bujo-search-item-background: var(--ls-secondary-background-color); --bujo-search-item-chosen-background: var(--bujo-background5); + --bujo-search-item-icon-text: var(--bujo-text-accent); + --bujo-search-item-icon-background: var(--bujo-background1); --ls-search-icon-color: var(--bujo-highlight-clean); --bujo-search-item-new-page-icon-text: var(--bujo-highlight-lit); @@ -371,8 +373,8 @@ /* new way of setting vars in radix ui */ /* logseq as an accent option */ -html[data-theme=light], -html[data-theme=light][data-color=logseq] { +html[data-theme=light] { + /* --lx-accent-01: var(--ls-primary-background-color); --lx-accent-02: var(--ls-secondary-background-color); --lx-accent-03: var(--ls-tertiary-background-color); @@ -424,7 +426,7 @@ html[data-theme=light][data-color=logseq] { --rx-gray-10: hsl(var(--rx-gray-10-hsl)); --rx-gray-11: hsl(var(--rx-gray-11-hsl)); --rx-gray-12: hsl(var(--rx-gray-12-hsl)); -/* + --lx-gray-01: var(--rx-gray-01); --lx-gray-02: var(--rx-gray-02); --lx-gray-03: var(--rx-gray-03); @@ -450,7 +452,7 @@ html[data-theme=light][data-color=logseq] { --lx-gray-10-alpha: var(--rx-gray-10); --lx-gray-11-alpha: var(--rx-gray-11); --lx-gray-12-alpha: var(--rx-gray-12); -*/ + */ --background: var(--bujo-background0_hsl); --primary: var(--bujo-background1_hsl); @@ -484,14 +486,12 @@ html[data-theme=light][data-color=logseq] { /* ---------- */ html[data-theme=light] .CodeMirror { - color: hsla(var(--bujo-foreground4_hsl), .5); + color: hsla(var(--bujo-foreground4_hsl), .5) !important; + background-color: var(--bujo-background3) !important; } html[data-theme=light] .CodeMirror .CodeMirror-activeline-background { background: var(--bujo-shadow-white); } -html[data-theme=light] .CodeMirror { - background-color: var(--bujo-background3); -} html[data-theme=light] .CodeMirror .CodeMirror-gutters { background-color: var(--bujo-background5); }