Skip to content

Commit

Permalink
fix: adapt styles to v0.10.7
Browse files Browse the repository at this point in the history
  • Loading branch information
@stdword
stdword committed Mar 3, 2024
1 parent 44c3a8a commit 600ae29
Show file tree
Hide file tree
Showing 5 changed files with 169 additions and 77 deletions.
114 changes: 102 additions & 12 deletions src/base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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;
}


Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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);
}
Expand All @@ -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 {
Expand Down Expand Up @@ -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);
}
Expand All @@ -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);
Expand All @@ -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 */
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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);
}


Expand Down Expand Up @@ -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);
}
Expand All @@ -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;
}


Expand Down Expand Up @@ -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);
Expand All @@ -1613,13 +1688,28 @@ 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);
}
.whiteboard .tl-tools-floating-panel .tl-button[data-selected=true] > i:is(.ti, .tie) {
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;
}
Expand Down
54 changes: 27 additions & 27 deletions src/dark-black.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand All @@ -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);
Expand Down Expand Up @@ -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;
}
Expand Down
Loading

0 comments on commit 600ae29

Please sign in to comment.