clone/logseq
1
0
Fork 0
mirror of https://github.com/logseq/logseq.git synced 2026-02-01 22:47:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

second pass at styling

Browse Source
This commit is contained in:
Ben Yorke
2023-05-26 21:12:53 +02:00
parent 3e86da1b7b
commit c6cad4135e
12 changed files with 128 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
resources/css/common.css
View File

@@ -203,7 +203,7 @@ html {
}
body {
color: var(--ls-primary-text-color);
color: or(--logseq-og-default-text-color, --lx-gray-12, --ls-primary-text-color);
line-height: 1.5;
background-color: transparent;
min-height: 100%;
@@ -267,12 +267,12 @@ pre {
a {
cursor: pointer;
color: var(--ls-link-text-color, #045591);
color: or(--logseq-og-anchor-link-text-color, --lx-accent-11, --ls-link-text-color, #045591);
text-decoration: none;
}
a:hover {
color: var(--ls-link-text-hover-color, #000);
color: or(--logseq-og-anchor-link-text-color-hover, --lx-accent-12, --ls-link-text-hover-color, #000);
}
code {
@@ -522,7 +522,7 @@ i.ti {
/* region FIXME: override elements (?) */
h1.title {
margin-bottom: 1.5rem;
color: var(--ls-title-text-color, #222);
color: or(--logseq-og-journal-title-color, --lx-gray-12, --ls-title-text-color, #222);
font-size: var(--ls-page-title-size, 36px);
font-weight: 500;
}
@@ -568,14 +568,14 @@ button.menu {
.menu-link:hover,
button.pull:hover,
button.menu:focus {
background-color: var(--ls-menu-hover-color, #f4f5f7);
background-color: or(--logseq-og-settings-list-item-hover-background-color, --lx-gray-05, --ls-menu-hover-color, #f4f5f7);
}
.menu-links-wrapper, .menu-links-outer {
@apply py-2 rounded-md shadow-lg overflow-y-auto;
max-height: calc(100vh - 100px) !important;
background-color: var(--ls-primary-background-color, #fff);
background-color: or(--logseq-og-settings-dropdown-background, --lx-gray-03, --ls-primary-background-color, #fff);
min-width: 12rem;
}
@@ -586,8 +586,8 @@ button.menu:focus {
}
.menu-link {
background-color: var(--ls-primary-background-color, #fff);
color: var(--ls-primary-text-color);
background-color: or(--logseq-og-settings-dropdown-link-item-background, --lx-gray-03, --ls-primary-background-color, #fff);
color: or(--logseq-og-settings-dropdown-link-text-color, --lx-gray-11, --ls-primary-text-color);
user-select: none;
}
@@ -677,13 +677,17 @@ a.tag {
text-decoration: none;
display: inline-block;
cursor: pointer;
color: var(--ls-tag-text-color, #045591);
padding: 0 2px;
border-radius: 4px;
background: or(--logseq-og-tag-background, --lx-accent-05, transparent);
color: or(--logseq-og-tag-text, --lx-accent-11, --ls-tag-text-color, #045591);
opacity: var(--ls-tag-text-opacity, 0.8);
}
a.tag:hover {
opacity: var(--ls-tag-text-hover-opacity, 1);
color: var(--ls-tag-text-hover-color, #045591);
background: or(--logseq-og-tag-background-hover, --lx-accent-06, transparent);
color: or(--logseq-og-tag-text-hvoer, --lx-accent-12, --ls-tag-text-hover-color, #045591);
}
svg.note {
@@ -789,8 +793,8 @@ mark {
font-family: MonoLisa, 'Fira Code', Monaco, Menlo, Consolas, 'COURIER NEW',
monospace;
letter-spacing: 0;
background-color: var(--ls-page-inline-code-bg-color, #eee);
color: var(--ls-page-inline-code-color);
background-color: or(--logseq-og-inline-code-background, --lx-gray-06, --ls-page-inline-code-bg-color, #eee);
color: or(--logseq-og-inline-code-text, --lx-gray-11, --ls-page-inline-code-color);
word-spacing: -0.15em;
text-rendering: optimizeSpeed;
}
@@ -826,11 +830,11 @@ a.tooltip-priority {
}
.page-reference:hover {
background: var(--ls-secondary-background-color);
background: or(--logseq-og-page-reference-hover-background, --lx-accent-04-alpha, --ls-secondary-background-color);
}
.references-blocks .page-reference:hover {
background: var(--ls-tertiary-background-color);
background: or(--logseq-og-page-reference-block-hover-background, --lx-accent-04-alpha, --ls-tertiary-background-color);
}
#head .fade-link {

26
src/main/frontend/colors.cljs
View File

@@ -1517,14 +1517,32 @@
(js/document.createElement "style"))
steps ["01" "02" "03" "04" "05" "06" "07" "08" "09" "10" "11" "12" "01-alpha" "02-alpha" "03-alpha" "04-alpha" "05-alpha" "06-alpha" "07-alpha" "08-alpha" "09-alpha" "10-alpha" "11-alpha" "12-alpha"]
gray (get gray-pairing-map color)
accent (map #(str "--lx-accent-" % ": var(--rx-" (name color) "-" % "); ") steps)
gray (map #(str "--lx-gray-" % ": var(--rx-" (name gray) "-" % "); ") steps)]
accents (map #(str "--lx-accent-" % ": var(--rx-" (name color) "-" % "); ") steps)
grays (map #(str "--lx-gray-" % ": var(--rx-" (name gray) "-" % "); ") steps)
translations (str "--ls-primary-background-color: var(--rx-" (name gray) "-01); "
"--ls-secondary-background-color: var(--rx-" (name gray) "-02); "
"--ls-tertiary-background-color: var(--rx-" (name gray) "-03); "
"--ls-quaternary-background-color: var(--rx-" (name gray) "-04); "
"--ls-link-text-color: var(--rx-" (name color) "-11); "
"--ls-link-text-hover-color: var(--rx-" (name color) "-12); "
"--ls-secondary-text-color: var(--rx-" (name gray) "-11); "
"--ls-primary-text-color: var(--rx-" (name gray) "-12); "
"--ls-border-color: var(--rx-" (name gray) "-05); "
"--ls-secondary-border-color: var(--rx-" (name color) "-05); "
"--ls-wb-stroke-color-default: var(--rx-" (name color) "-07); "
"--ls-wb-background-color-default: var(--rx-" (name color) "-04); "
"--ls-wb-text-color-default: var(--rx-" (name gray) "-12); ")
; "--tl-selectStroke: var(--rx-" (name color) "-08); ")
tl-translations (str "[class^=\"tl-\"] { --tl-selectStroke: var(--rx-" (name color) "-09); }")]
(set! (.-id style-tag) "color-variables")
; (set! (.-innerHTML style-tag) (str/join "\n" (flatten [":root {" accent gray "}"])))
(->> [":root {" accent gray "}"]
(->> [":root { " accents grays translations " } body, .dark-theme, .light-theme {" accents grays translations "} " tl-translations]
(flatten)
(str/join "\n")
(set! (.-innerHTML style-tag)))
(js/document.head.appendChild style-tag)))
(defn unset-radix [])
(defn unset-radix []
(js/console.log "unset-radix")
(when-let [style-tag (js/document.querySelector "style#color-variables")]
(js/document.head.removeChild style-tag)))

11
src/main/frontend/components/block.css
View File

@@ -188,7 +188,7 @@
.block-children {
border-left: 1px solid;
border-left-color: var(--ls-guideline-color, #ddd);
border-left-color: or(--logseq-og-guideline-color, --lx-gray-07-alpha, --ls-guideline-color, #ddd);
padding-top: 2px;
padding-bottom: 3px;
@@ -478,7 +478,10 @@
}
.color-level {
background-color: var(--color-level-1);
background-color: var(--logseq-og-right-sidebar-content-background, --lx-gray-02, --color-level-1);
.dark & {
background-color: var(--logseq-og-right-sidebar-content-background, --lx-gray-01, --color-level-1);
}
& .color-level {
background-color: var(--color-level-2);
@@ -542,7 +545,7 @@
font-size: 14px;
background-color: var(--ls-block-bullet-color, #394b59);
background-color: or(--lx-gray-07, --ls-block-bullet-color, #394b59);
transition: transform 0.2s;
> * {
@@ -552,7 +555,7 @@
&:not(.typed-list) {
&.bullet-closed {
background-color: var(--ls-block-bullet-border-color, #ced9e0);
background-color: or(--logseq-og-bullet-closed-background, --lx-gray-04-alpha, --ls-block-bullet-border-color, #ced9e0);
}
}

47
src/main/frontend/components/container.css
View File

@@ -6,13 +6,17 @@
}
#app-container {
background-color: or(--lx-gray-02, --ls-primary-background-color, #fff);
background-color: or(--logseq-og-top-bar-background, --lx-gray-01, --ls-primary-background-color, #fff);
position: relative;
}
.dark #app-container {
background-color: or(--logseq-og-top-bar-background, --lx-gray-02, --ls-primary-background-color, #fff);
}
#root {
> div {
color: var(--ls-primary-text-color, #24292e);
color: or(--logseq-og-document-text-color, --lx-gray-12, --ls-primary-text-color, #24292e);
font-size: var(--ls-page-text-size);
}
}
@@ -75,6 +79,10 @@
overflow: auto;
}
.dark .left-sidebar-inner {
background-color: or(--lx-gray-01, --ls-primary-background);
}
.left-sidebar-inner {
position: relative;
height: 100%;
@@ -82,7 +90,7 @@
width: var(--ls-left-sidebar-sm-width);
overflow-y: auto;
overflow-x: hidden;
background-color: or(--lx-gray-01, --ls-primary-background-color);
background-color: or(--lx-gray-02, --ls-primary-background-color);
transition: transform .3s;
transform: translate3d(-100%, 0, 0);
z-index: 3;
@@ -143,11 +151,13 @@
}
&:hover {
background-color: or(--lx-gray-04, --ls-tertiary-background-color);
background-color: or(--logseq-og-left-sidebar-hover-background, --lx-gray-04, --ls-tertiary-background-color);
color: or(--logseq-og-left-sidebar-text-color-hover, --lx-gray-12, --ls-header-button-background);
}
&.active, &:active {
background-color: or(--lx-gray-05, --ls-quaternary-background-color);
background-color: or(--logseq-og-left-sidebar-active-background, --lx-gray-05, --ls-quaternary-background-color);
color: or(--logseq-og-left-sidebar-active-text-color, --lx-gray-12, --ls-quaternary-background-color);
}
}
@@ -190,7 +200,7 @@
}
&:hover {
background-color: var(--ls-tertiary-background-color);
background-color: or(--lx-gray-04, --ls-tertiary-background-color);
* {
opacity: 1 !important;
@@ -246,7 +256,7 @@
}
&:hover {
background-color: var(--ls-quaternary-background-color);
background-color: or(--lx-gray-04, --ls-quaternary-background-color);
}
}
}
@@ -275,7 +285,11 @@
user-select: none;
@screen sm {
background-image: linear-gradient(transparent, var(--ls-secondary-background-color));
background-image: linear-gradient(transparent, or(--logseq-og-left-sidebar-bottom-gradient, --lx-gray-02, --ls-secondary-background-color));
.dark & {
background-image: linear-gradient(transparent, or(--logseq-og-left-sidebar-bottom-gradient, --lx-gray-01, --ls-secondary-background-color));
}
}
&-link {
@@ -321,7 +335,11 @@
@screen sm {
padding-top: 0;
width: var(--ls-left-sidebar-width);
background-color: or(--lx-gray-01, --ls-secondary-background-color);
background-color: or(--lx-gray-02, --ls-secondary-background-color);
.dark & {
background-color: or(--logseq-og-left-sidebar-background, --lx-gray-01, --ls-secondary-background-color);
}
> .wrap {
margin-top: 52px;
@@ -345,8 +363,9 @@
a {
@apply opacity-90 hover:opacity-100;
transition: all 120ms ease-out;
color: var(--ls-header-button-background);
color: or(--logseq-og-left-sidebar-text-color, --lx-gray-11, --ls-header-button-background);
}
> .left-sidebar-inner {
@@ -423,7 +442,7 @@
transition: width .3s;
&:before {
background-color: or(--lx-gray-01, --ls-secondary-background-color);
background-color: or(--lx-gray-02, --ls-secondary-background-color);
width: 0;
overflow: hidden;
}
@@ -493,7 +512,11 @@ html[data-theme='dark'] {
}
.cp__sidebar-main-layout {
background-color: or(--lx-gray-02, --ls-primary-background-color);
background-color: or(--logseq-og-main-content-background, --lx-gray-01, --ls-primary-background-color);
}
.dark .cp__sidebar-main-layout {
background-color: or(--logseq-og-main-content-background, --lx-gray-02, --ls-primary-background-color);
}
.cp__sidebar-main-content {

2
src/main/frontend/components/header.css
View File

@@ -195,7 +195,7 @@
background: none;
@screen md {
background: var(--ls-tertiary-background-color);
background: or(--logseq-og-header-button-hover, --lx-gray-04, --ls-tertiary-background-color);
}
}

2
src/main/frontend/components/journal.css
View File

@@ -7,7 +7,7 @@
.journal-item {
border-top: 1px solid;
border-top-color: var(--ls-border-color, #738694);
border-top-color: or(--logseq-og-journal-page-rule, --lx-gray-07, --ls-border-color, #738694);
margin: 24px 0;
padding: 24px 0;
min-height: 250px;

6
src/main/frontend/components/right_sidebar.css
View File

@@ -23,7 +23,11 @@ html[data-theme=light] a.toggle:hover {
.cp__header a, .cp__header button, .cp__right-sidebar-topbar button {
opacity: 1;
color: var(--ls-header-button-background);
color: or(--logseq-og-header-button-text-color, --lx-gray-11, --ls-header-button-background);
}
.cp__header a:hover, .cp__header button:hover, .cp__right-sidebar-topbar button:hover {
color: or(--logseq-og-header-button-text-color-hover, --lx-gray-12, --ls-header-button-background);
}
html[data-theme=dark] {

12
src/main/frontend/components/settings.cljs
View File

@@ -313,6 +313,18 @@
:overflow :scroll
:width "100%"
:padding-left "0.25rem"}}
[:div.theme-row--color {:on-click #(state/unset-color-accent!)}
[:div.theme-row--color-swatch {:style {"--background" "var(--rx-gray-03)"
"--background-hover" "var(--rx-gray-04)"
"--background-active" "var(--rx-gray-05)"
"--border" "var(--rx-gray-07)"
"--border-hover" "var(--rx-gray-08)"}
:border-right "1px solid rgba(255,255,255,0.4)"}]
[:div.text-xs {:style {:margin "0 -0.5rem"
:opacity 0.5
:height "1rem"
:padding "0 0.5rem"}}
"Aqua"]]
(for [color colors/color-list]
[:div.theme-row--color {:on-click #(state/toggle-color-accent! color)
:class (when (= color-accent color) "selected")}

6
src/main/frontend/components/whiteboard.css
View File

@@ -140,12 +140,16 @@ input.tl-text-input {
position: absolute;
left: 2.5rem;
top: 0;
background: var(--ls-primary-background-color);
padding: 4px;
border-radius: 0 0 12px 12px;
z-index: 2000;
gap: 4px;
line-height: 1.4;
background: or(--logseq-og-whiteboard-title-background, --lx-gray-01, --ls-primary-background-color);
}
.dark .whiteboard-page-title-root {
background: or(--logseq-og-whiteboard-title-background, --lx-gray-02, --ls-primary-background-color);
}
.whiteboard-page-title {

5
src/main/frontend/state.cljs
View File

@@ -2136,5 +2136,10 @@ Similar to re-frame subscriptions"
(do (swap! state assoc :color/accent color)
(colors/set-radix color))))
(defn unset-color-accent! []
(swap! state assoc :color/accent nil)
(colors/unset-radix))
(defn get-color-accent []
(get @state :color/accent))

12
src/main/frontend/ui.css
View File

@@ -70,8 +70,8 @@
}
.notification-area {
background-color: or(--lx-gray-05, --ls-tertiary-background-color, #fff);
color: or(--lx-gray-12, --ls-primary-text-color);
background-color: or(--logseq-of-notification-background, --lx-gray-04, --ls-tertiary-background-color, #fff);
color: or(--logseq-og-notification-text-color, --lx-gray-11, --ls-primary-text-color);
}
}
@@ -303,8 +303,8 @@ html.is-mobile {
&[intent='logseq'] {
@apply focus:border-gray-500 dark:hover:text-gray-200;
color: or(--lx-accent-11, --ls-primary-text-color);
background: or(--lx-accent-12, --ls-secondary-background-color);
color: or(--logseq-of-notification-clear-button-text, --lx-gray-12, --ls-primary-text-color);
background: or(--logseq-og-notification-clear-button-background, --lx-gray-04, --ls-secondary-background-color);
&:hover {
color: or(--lx-accent-11, --ls-link-text-color);
@@ -332,8 +332,8 @@ html.is-mobile {
}
.dropdown-wrapper {
background-color: or(--lx-gray-03, --ls-primary-background-color, #fff);
border: 1px solid or(--lx-gray-05, --ls-tertiary-background-color);
background-color: or(--logseq-og-dropdown-background, --lx-gray-03, --ls-primary-background-color, #fff);
border: 1px solid or(--logseq-og-dropdown-border-color, --lx-gray-05, --ls-tertiary-background-color);
min-width: 12rem;
border-radius: 6px;
}

20
tldraw/apps/tldraw-logseq/src/styles.css
View File

@@ -281,12 +281,12 @@ html[data-theme='light'] {
color: var(--ls-primary-text-color);
&:hover {
background-color: var(--ls-primary-background-color);
background-color: or(--logseq-og-whiteboard-button-background-hover, --lx-gray-06, --ls-primary-background-color);
}
&[data-selected='true'] {
background-color: var(--color-selectedFill);
color: var(--color-selectedContrast);
background-color: or(--logseq-og-whiteboard-button-background-selected, --lx-accent-09, --color-selectedFill);
color: or(--logseq-og-whiteboard-button-text-selected, --lx-gray-12, --color-selectedContrast);
}
}
@@ -354,7 +354,7 @@ button.tl-select-input-trigger {
}
&[data-state='checked'] {
background-color: var(--color-indigo-500);
background-color: or(--logseq-og-whiteboard-select-background-selected, --lx-accent-09, --color-indigo-500);
color: #fff;
}
}
@@ -819,8 +819,9 @@ html[data-theme='light'] {
html[data-theme='dark'] {
.tl-type-tag[data-active='true'] {
background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), #338fff;
border: 1px solid #338fff;
background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
or(--logseq-og-whiteboard-logseq-button-border, --lx-accent-09, #338fff);
border: 1px solid or(--logseq-og-whiteboard-logseq-button-border, --lx-accent-09, #338fff);
color: var(--ls-secondary-text-color);
}
}
@@ -1128,6 +1129,7 @@ button.tl-shape-links-panel-item-remove-button {
.tl-quick-links-row:nth-child(1) {
@apply rounded bg-indigo-600;
background: or(--logseq-og-whiteboard-quick-links-background, --lx-accent-09, --color-indigo-600);
color: #fff;
}
@@ -1145,7 +1147,7 @@ button.tl-shape-links-panel-item-remove-button {
@apply opacity-50;
}
.tl-quick-links-row:nth-child(1):hover {
@apply bg-indigo-500;
background: or(--logseq-og-whiteboard-quick-links-background-hover, --lx-accent-08, --color-indigo-500);
}
}
@@ -1158,8 +1160,8 @@ button.tl-shape-links-panel-item-remove-button {
padding: 10px 15px;
font-size: 15px;
line-height: 1;
color: var(--ls-secondary-text-color);
background-color: var(--ls-secondary-background-color);
color: or(--logseq-og-whiteboard-tooltip-text, --lx-gray-12, --ls-secondary-text-color);
background-color: or(--logseq-og-whiteboard-tooltip-background, --lx-gray-05, --ls-secondary-background-color);
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
user-select: none;
animation-duration: 700ms;