mirror of https://github.com/logseq/logseq
enhance(ui): polish the non-accent colors
parent
ea6e07cd2e
commit
388e9f33fc
|
@ -74,6 +74,10 @@ html {
|
|||
}
|
||||
|
||||
#ui__ac-inner {}
|
||||
|
||||
.cp__cmdk {
|
||||
--lx-gray-07: var(--rx-gray-07);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
(:require [clojure.string :as string]
|
||||
[frontend.util :as util]))
|
||||
|
||||
(def color-list [:tomato :red :crimson :pink :plum :purple :violet :indigo :blue :cyan :teal :green :grass :orange :brown])
|
||||
(def color-list [:tomato :red :crimson :pink :plum :purple :violet :indigo :blue :cyan :teal :green :grass :orange])
|
||||
;(def color-list [:tomato :red :blue])
|
||||
|
||||
(defn variable
|
||||
|
|
|
@ -265,8 +265,7 @@ li p:last-child,
|
|||
}
|
||||
|
||||
.admonition-icon {
|
||||
border-right: 1px solid;
|
||||
border-right-color: var(--ls-border-color, #ccc);
|
||||
@apply border-r;
|
||||
}
|
||||
|
||||
i.ti {
|
||||
|
@ -527,7 +526,7 @@ svg.tip {
|
|||
|
||||
hr {
|
||||
margin: 2rem 0;
|
||||
border-color: var(--ls-border-color, #ccc);
|
||||
border-color: var(--lx-gray-05, var(--ls-border-color, var(--rx-gray-05)));
|
||||
}
|
||||
|
||||
.resize {
|
||||
|
|
|
@ -180,15 +180,21 @@
|
|||
position: absolute;
|
||||
border-radius: 2px;
|
||||
opacity: 0.6;
|
||||
}
|
||||
border-left-color: var(--lx-gray-09, var(--ls-border-color, var(--rx-gray-09)));
|
||||
|
||||
.block-children-left-border:hover {
|
||||
background-color: or(--ls-block-left-color, --lx-gray-11, --ls-primary-text-color);
|
||||
&:hover {
|
||||
background-color: var(--lx-gray-10, var(--ls-primary-text-color, var(--rx-gray-10)));
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
&:active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.block-children {
|
||||
border-left: 1px solid;
|
||||
border-left-color: or(--lx-gray-04-alpha, --ls-guideline-color, #ddd) !important;
|
||||
border-left-color: var(--lx-gray-04-alpha, var(--ls-guideline-color, var(--rx-gray-04-alpha))) !important;
|
||||
|
||||
padding-top: 2px;
|
||||
padding-bottom: 3px;
|
||||
|
@ -374,7 +380,7 @@
|
|||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.bullet-container .selected {
|
||||
span.bullet-container:not(.as-order-list) .selected {
|
||||
border: 3px solid;
|
||||
}
|
||||
}
|
||||
|
@ -574,11 +580,11 @@
|
|||
|
||||
&:not(.typed-list) {
|
||||
&.bullet-closed {
|
||||
background-color: or(--ls-bullet-closed-background, --lx-gray-04-alpha, --ls-block-bullet-border-color, #ced9e0);
|
||||
background-color: var(--lx-gray-04-alpha, var(--ls-block-bullet-border-color, var(--rx-gray-04-alpha)));
|
||||
}
|
||||
|
||||
.bullet {
|
||||
background-color: or(--lx-gray-08, --ls-block-bullet-color, #394b59);
|
||||
background-color: var(--lx-gray-08, var(--ls-block-bullet-color, var(--rx-gray-08)));
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
}
|
||||
|
@ -597,11 +603,11 @@
|
|||
color: var(--ls-primary-text-color);
|
||||
|
||||
&:hover > .bullet-container:not(.typed-list) {
|
||||
background-color: or(--lx-gray-04-alpha, --ls-block-bullet-border-color, #ced9e0);
|
||||
background-color: var(--lx-gray-04-alpha, var(--ls-block-bullet-border-color, var(--rx-gray-04-alpha)));
|
||||
|
||||
.bullet {
|
||||
transform: scale(1.2);
|
||||
background-color: or(--lx-gray-08, --ls-block-bullet-color, inherit) !important;
|
||||
background-color: var(--lx-gray-08, var(--ls-block-bullet-color, var(--rx-gray-08))) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
.journal-item {
|
||||
border-top: 1px solid;
|
||||
border-top-color: or(--ls-journal-page-rule, --lx-gray-07, --ls-border-color, #738694);
|
||||
border-top-color: var(--lx-gray-07, var(--ls-border-color, var(--rx-gray-06)));
|
||||
margin: 24px 0;
|
||||
padding: 24px 0;
|
||||
min-height: 250px;
|
||||
|
|
|
@ -332,33 +332,26 @@
|
|||
:action pick-theme
|
||||
:desc (ui/render-keyboard-shortcut (shortcut-helper/gen-shortcut-seq :ui/toggle-theme))})))
|
||||
|
||||
(defn accent-color-row []
|
||||
(defn accent-color-row [_in-modal?]
|
||||
(let [color-accent (state/sub :ui/radix-color)
|
||||
pick-theme [:div.grid {:style {:grid-template-columns "repeat(5, 1fr)"
|
||||
:gap "0.75rem"
|
||||
:width "100%"
|
||||
:max-width "16rem"}}
|
||||
pick-theme [:div.cp__accent-colors-list-wrap
|
||||
{:class (if _in-modal? "as-modal-picker" "")}
|
||||
(for [color (concat [:none :logseq] colors/color-list)
|
||||
:let [active? (= color color-accent)]]
|
||||
[:div.flex.items-center {:style {:height 28}}
|
||||
[:div {:class "w-5 h-5 rounded-full flex justify-center items-center transition ease-in duration-100 hover:cursor-pointer hover:opacity-100"
|
||||
:title color
|
||||
:style {:background-color (colors/variable color :09)
|
||||
:outline-color (colors/variable color (if active? :07 :06))
|
||||
:outline-width (if active? "4px" "1px")
|
||||
:outline-style :solid
|
||||
:opacity (if active? 1 0.5)}
|
||||
:on-click (fn [_e] (state/set-color-accent! color))}
|
||||
[:div {:class "w-2 h-2 rounded-full transition ease-in duration-100"
|
||||
:style {:background-color (str "var(--rx-" (name color) "-07)")
|
||||
:opacity (if active? 1 0)}}]]])
|
||||
(when color-accent
|
||||
[:div.col-span-5
|
||||
(shui-ui/button
|
||||
{:variant :secondary
|
||||
:size :xs
|
||||
:on-click (fn [_e] (state/unset-color-accent!))}
|
||||
"Back to default color")])]]
|
||||
[:div
|
||||
{:class "w-5 h-5 rounded-full flex justify-center items-center transition ease-in duration-100 hover:cursor-pointer hover:opacity-100"
|
||||
:title color
|
||||
:tab-index -1
|
||||
:style {:background-color (colors/variable color :09)
|
||||
:outline-color (colors/variable color (if active? :07 :06))
|
||||
:outline-width (if active? "4px" "1px")
|
||||
:outline-style :solid
|
||||
:opacity (if active? 1 0.5)}
|
||||
:on-click (fn [_e] (state/set-color-accent! color))}
|
||||
[:span {:class "w-2 h-2 rounded-full transition ease-in duration-100"
|
||||
:style {:background-color (str "var(--rx-" (name color) "-07)")
|
||||
:opacity (if active? 1 0)}}]]])]]
|
||||
|
||||
[:<>
|
||||
(row-with-button-action {:left-label "Accent color"
|
||||
|
@ -370,7 +363,7 @@
|
|||
(rum/defc modal-accent-colors-inner
|
||||
[]
|
||||
[:div.cp__settings-accent-colors-modal-inner
|
||||
(accent-color-row)])
|
||||
(accent-color-row true)])
|
||||
|
||||
(defn file-format-row [t preferred-format]
|
||||
[:div.it.sm:grid.sm:grid-cols-3.sm:gap-4.sm:items-center
|
||||
|
@ -708,7 +701,7 @@
|
|||
(language-row t preferred-language)
|
||||
(theme-modes-row t switch-theme system-theme? dark?)
|
||||
(when (and (util/electron?) (not util/mac?)) (native-titlebar-row t))
|
||||
(when show-radix-themes? (accent-color-row))
|
||||
(when show-radix-themes? (accent-color-row false))
|
||||
(when (config/global-config-enabled?) (edit-global-config-edn))
|
||||
(when current-repo (edit-config-edn))
|
||||
(when current-repo (edit-custom-css))
|
||||
|
|
|
@ -505,4 +505,14 @@ body[data-settings-tab=keymap] {
|
|||
.panel-content {
|
||||
@apply sm:min-w-[520px];
|
||||
}
|
||||
}
|
||||
|
||||
.cp__accent-colors {
|
||||
&-list-wrap {
|
||||
@apply grid grid-cols-8 gap-2 max-w-[250px];
|
||||
|
||||
&.as-modal-picker {
|
||||
@apply grid-cols-8 gap-3 pt-1 pb-2 ml-8 max-w-none;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -530,10 +530,10 @@
|
|||
:editor/toggle-open-blocks {:binding "t o"
|
||||
:fn editor-handler/toggle-open!}
|
||||
|
||||
:ui/cycle-color-off {:binding "c o"
|
||||
:ui/accent-color-reset {:binding "c o"
|
||||
:fn state/unset-color-accent!}
|
||||
|
||||
:ui/cycle-color {:binding "c c"
|
||||
:ui/accent-colors-picker {:binding "c c"
|
||||
:fn #(state/pub-event! [:modal/show-accent-colors-modal])}
|
||||
|
||||
:git/commit {:binding "mod+g c"
|
||||
|
@ -736,8 +736,8 @@
|
|||
:dev/show-block-ast
|
||||
:dev/show-page-data
|
||||
:dev/show-page-ast
|
||||
:ui/cycle-color
|
||||
:ui/cycle-color-off])
|
||||
:ui/accent-colors-picker
|
||||
:ui/accent-color-reset])
|
||||
(with-meta {:before m/enable-when-not-editing-mode!}))
|
||||
|
||||
:shortcut.handler/misc
|
||||
|
@ -851,8 +851,8 @@
|
|||
:ui/toggle-right-sidebar
|
||||
:ui/toggle-settings
|
||||
:ui/toggle-contents
|
||||
:ui/cycle-color-off
|
||||
:ui/cycle-color]
|
||||
:ui/accent-color-reset
|
||||
:ui/accent-colors-picker]
|
||||
|
||||
:shortcut.category/whiteboard
|
||||
[:editor/new-whiteboard
|
||||
|
|
|
@ -2227,7 +2227,7 @@ Similar to re-frame subscriptions"
|
|||
(util/set-android-theme))
|
||||
|
||||
(defn unset-color-accent! []
|
||||
(swap! state assoc :ui/radix-color nil)
|
||||
(swap! state assoc :ui/radix-color :logseq)
|
||||
(storage/remove :ui/radix-color)
|
||||
(util/set-android-theme))
|
||||
|
||||
|
|
Loading…
Reference in New Issue