diff --git a/resources/css/common.css b/resources/css/common.css index 7ab63e367..f506bad10 100644 --- a/resources/css/common.css +++ b/resources/css/common.css @@ -81,45 +81,45 @@ html[data-theme=dark] { .white-theme, html[data-theme=light] { --ls-primary-background-color: white; - --ls-secondary-background-color: #dee9f2; - --ls-tertiary-background-color: #f0f8ff; - --ls-quaternary-background-color: #e1f0fe; + --ls-secondary-background-color: #f7f6f4; + --ls-tertiary-background-color: #f1eee8; + --ls-quaternary-background-color: #e8e5de; --ls-table-tr-even-background-color: #f4f5f7; --ls-active-primary-color: rgb(4, 85, 145); --ls-active-secondary-color: #003761; - --ls-block-properties-background-color: var(--ls-tertiary-background-color); + --ls-block-properties-background-color: #f7f6f4; --ls-block-ref-link-text-color: #D8E1E8; --ls-search-background-color: var(--ls-primary-background-color); --ls-border-color: #ccc; --ls-secondary-border-color: #e2e2e2; - --ls-guideline-color: var(--ls-border-color); + --ls-guideline-color: rgba(46, 27, 5, 0.08); --ls-menu-hover-color: var(--ls-a-chosen-bg); - --ls-primary-text-color: #24292e; + --ls-primary-text-color: #433F38; --ls-secondary-text-color: #161e2e; - --ls-title-text-color: #222; - --ls-link-text-color: var(--ls-active-primary-color); - --ls-link-text-hover-color: var(--ls-active-secondary-color); - --ls-link-ref-text-color: var(--ls-link-text-color); - --ls-link-ref-text-hover-color: var(--ls-link-text-hover-color); - --ls-tag-text-color: var(--ls-link-text-color); - --ls-tag-text-hover-color: var(--ls-link-text-hover-color); + --ls-title-text-color: var(--ls-primary-text-color); + --ls-link-text-color: #106BA3; + --ls-link-text-hover-color: #5d9cd6; + --ls-link-ref-text-color: #106BA3; + --ls-link-ref-text-hover-color: #5d9cd6; + --ls-tag-text-color: var(--ls-link-ref-text-color); + --ls-tag-text-hover-color: var(--ls-link-ref-text-hover-color); --ls-slide-background-color: #fff; - --ls-block-bullet-border-color: var(--ls-border-color); - --ls-block-bullet-color: #394b59; + --ls-block-bullet-border-color: #dedede; + --ls-block-bullet-color: rgba(67, 63, 56, 0.25); --ls-block-highlight-color: #c0e6fd; --ls-selection-background-color: #e4f2ff; - --ls-page-checkbox-color: var(--ls-active-primary-color); - --ls-page-checkbox-border-color: #8c8c8c; + --ls-page-checkbox-color: #9dbbd8; + --ls-page-checkbox-border-color: var(--ls-page-checkbox-color); --ls-page-blockquote-color: var(--ls-primary-text-color); - --ls-page-blockquote-bg-color: var(--ls-secondary-background-color); - --ls-page-blockquote-border-color: var(--ls-active-primary-color); - --ls-page-inline-code-bg-color: var(--ls-secondary-background-color); + --ls-page-blockquote-bg-color: #fbfaf8; + --ls-page-blockquote-border-color: #799bbc; + --ls-page-inline-code-bg-color: #f7f6f4; --ls-page-inline-code-color: var(--ls-primary-text-color); --ls-scrollbar-foreground-color: rgba(0, 0, 0, 0.1); --ls-scrollbar-background-color: rgba(0, 0, 0, 0.05); --ls-scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.2); --ls-head-text-color: var(--ls-link-text-color); - --ls-icon-color: #6b7280; + --ls-icon-color: #c1bdb7; --ls-search-icon-color: var(--ls-icon-color); --ls-a-chosen-bg: #f4f5f7; --ls-right-sidebar-code-bg-color: var(--ls-secondary-background-color); @@ -445,6 +445,10 @@ li p:last-child, opacity: 0.6; } +.opacity-30 { + opacity: 0.3; +} + .opacity-70 { opacity: 0.7; } @@ -542,22 +546,6 @@ li p:last-child, overflow-y: auto; } -.marker-switch { - font-size: 85%; - margin-right: 6px; - margin-left: 2px; - border-radius: 3px; - font-weight: 500; - display: inline-block; - text-align: center; - width: 16px; - height: 18px; - opacity: 0.5; - padding: 0 2px 0 2px; - border: 1px solid; - line-height: 1.3; -} - .heading-bg { border-radius: 50%; width: 12px; @@ -637,10 +625,6 @@ a.login:hover { color: var(--ls-link-text-hover-color, #000); } -a.marker-switch:hover { - opacity: 1; -} - a.tooltip-priority { display: contents; position: absolute; @@ -673,13 +657,17 @@ img.small { } a.tag { - opacity: var(--ls-tag-text-opacity, 0.6); - color: var(--ls-tag-text-color, #045591); + font-size: 13px; + padding: 0px 3px; + text-align: center; + text-decoration: none; + display: inline-block; + cursor: pointer; + opacity: 0.8; } a.tag:hover { - opacity: var(--ls-tag-text-hover-opacity, 0.8); - color: var(--ls-tag-text-hover-color, #045591); + opacity: 1; } svg.note { @@ -714,3 +702,127 @@ hr { resize: both; overflow: hidden; } + +/* ideas from https://github.com/PiotrSss/logseq-bujo-theme/blob/main/main.css */ + +/*************************************************************** +***************************** TOP ****************************** +***************************************************************/ + +.cp__header-logo, .fade-link { + opacity: .3; + transition: .3s; +} + +a.fade-link:hover { + opacity: 1; +} + +/* import (arrows) icon */ + +#head .refresh svg { + height: 20px; +} + +#head { + background: none; +} + +/* < > buttons */ + +a[title="Go Back"], +a[title="Go Forward"] { + border-radius: 3px; + opacity: 1; + transition: .3s; +} + +/* search-field */ + +#search-wrapper { + opacity: 0; + transition: .3s; + padding-right: 12px; +} + +#search-wrapper:hover, +#search-wrapper:focus-within { + opacity: 1; +} + +#search>.inner { + max-width: 100%; + border-radius: 4px; +} + +#search_field:focus { + background: var(--ls-search-background-color); +} + +/* text mark/highlight */ + +mark { + padding: 2px 4px; + border-radius: 3px; +} + +/* page reference */ + +.page-reference { + border-radius: 3px; + padding: 2px 0px; + transition: .3s; +} + +.page-reference .bracket { + opacity: .3; +} + +/* block references */ + +.block-ref { + padding: 2px 5px; + border-radius: 3px; + font-style: italic; +} + +.block-ref .block-ref { + padding: 6px 5px; + border: none; +} + +/* inline code */ +:not(pre)>code { + border-radius: 3px; + font-size: .9em; + font-family: MonoLisa, "Fira Code", Monaco, Menlo, Consolas, "COURIER NEW", monospace; + padding: 3px 5px !important; +} + +a { + transition: .3s; +} + +/* search-field */ + +.dark-theme #search_field { + background: linear-gradient(to right, #021c23 0%, #021b21 200px, #002b36 100%); + transition: background .3s; +} + +.dark-theme #search_field:focus { + box-shadow: 0px 0px 20px 0px rgba(18, 18, 18, .8); +} + +.page-reference:hover { + background: var(--ls-secondary-background-color); +} + +.references-blocks .page-reference:hover { + background: var(--ls-tertiary-background-color); +} + +#head .fade-link { + font-weight: 600; + font-size: 13px; +} diff --git a/src/main/frontend/components/block.cljs b/src/main/frontend/components/block.cljs index 09a523db0..e2b8a191c 100644 --- a/src/main/frontend/components/block.cljs +++ b/src/main/frontend/components/block.cljs @@ -394,7 +394,7 @@ (when (and (or show-brackets? nested-link?) (not html-export?) (not contents-page?)) - [:span.text-gray-500 "[["]) + [:span.text-gray-500.bracket "[["]) (if (string/ends-with? s ".excalidraw") [:a.page-ref {:on-click (fn [e] @@ -410,7 +410,7 @@ (when (and (or show-brackets? nested-link?) (not html-export?) (not contents-page?)) - [:span.text-gray-500 "]]"])])) + [:span.text-gray-500.bracket "]]"])])) (defn- latex-environment-content [name option content] diff --git a/src/main/frontend/components/block.css b/src/main/frontend/components/block.css index 0e857ae82..3e5925d15 100644 --- a/src/main/frontend/components/block.css +++ b/src/main/frontend/components/block.css @@ -94,7 +94,7 @@ } .block-children { - border-left: 2px solid; + border-left: 1px solid; border-left-color: var(--ls-guideline-color, #ddd); padding-top: 2px; @@ -118,7 +118,6 @@ } .block-ref { - color: var(--ls-link-text-color); padding-bottom: 2px; border-bottom: 0.5px solid; border-bottom-color: var(--ls-block-ref-link-text-color); @@ -176,6 +175,7 @@ &:hover { color: var(--ls-link-text-hover-color); + opacity: 1; } } diff --git a/src/main/frontend/components/header.cljs b/src/main/frontend/components/header.cljs index 2f8913b77..15b1c82aa 100644 --- a/src/main/frontend/components/header.cljs +++ b/src/main/frontend/components/header.cljs @@ -40,8 +40,8 @@ (ui/dropdown-with-links (fn [{:keys [toggle-fn]}] - [:a {:on-click toggle-fn} - [:span.ml-1.text-sm (t :login)]]) + [:a.fade-link {:on-click toggle-fn} + [:span.ml-1 (t :login)]]) (let [list [{:title (t :login-google) :url (str config/website "/login/google")} {:title (t :login-github) diff --git a/src/main/frontend/components/header.css b/src/main/frontend/components/header.css index f1daa33be..74a830bd7 100644 --- a/src/main/frontend/components/header.css +++ b/src/main/frontend/components/header.css @@ -46,7 +46,7 @@ .cp__header-logo, .cp__right-menu-button { - opacity: 0.7; + opacity: 0.3; } .cp__header-logo { diff --git a/src/main/frontend/components/repo.cljs b/src/main/frontend/components/repo.cljs index 434f3d254..bdbb833d9 100644 --- a/src/main/frontend/components/repo.cljs +++ b/src/main/frontend/components/repo.cljs @@ -87,7 +87,7 @@ (when-not (= repo config/local-repo) (if (and nfs-repo? (nfs-handler/supported?)) (let [syncing? (state/sub :graph/syncing?)] - [:div.ml-2.mr-1.opacity-70.hover:opacity-100.refresh {:class (if syncing? "loader" "initial")} + [:div.ml-2.mr-2.opacity-30.refresh.hover:opacity-100 {:class (if syncing? "loader" "initial")} [:a {:on-click #(nfs-handler/refresh! repo repo-handler/create-today-journal!) @@ -192,7 +192,7 @@ (> (count repos) 1) (ui/dropdown-with-links (fn [{:keys [toggle-fn]}] - [:a#repo-switch {:on-click toggle-fn} + [:a#repo-switch.fade-link {:on-click toggle-fn} (let [repo-name (get-repo-name current-repo) repo-name (if (util/electron?) (last (string/split repo-name #"/")) @@ -221,8 +221,9 @@ (if (config/local-db? current-repo) (if (util/electron?) (last (string/split repo-name #"/")) - repo-name) - [:a + [:span.fade-link + repo-name]) + [:a.fade-link {:href current-repo :target "_blank"} repo-name])) diff --git a/src/main/frontend/components/search.cljs b/src/main/frontend/components/search.cljs index 5d8bd5b37..5705bb343 100644 --- a/src/main/frontend/components/search.cljs +++ b/src/main/frontend/components/search.cljs @@ -246,7 +246,7 @@ [:div.inner [:label.sr-only {:for "search_field"} (t :search)] [:div#search-wrapper.relative.w-full.text-gray-400.focus-within:text-gray-600 - [:div.absolute.inset-y-0.flex.items-center.pointer-events-none.left-0 + [:div.absolute.inset-y-0.flex.items-center.pointer-events-none {:style {:left 6}} [:svg.h-5.w-5 {:view-box "0 0 20 20", :fill "currentColor"} [:path diff --git a/src/main/frontend/components/search.css b/src/main/frontend/components/search.css index 07789dc46..0013b76a3 100644 --- a/src/main/frontend/components/search.css +++ b/src/main/frontend/components/search.css @@ -1,7 +1,6 @@ #search { > .inner { width: 100%; - max-width: 280px; } } @@ -16,4 +15,4 @@ #search_field { background-color: var(--ls-search-background-color, #fff); color: var(--ls-secondary-text-color, #161e2e); -} \ No newline at end of file +} diff --git a/src/main/frontend/components/theme.css b/src/main/frontend/components/theme.css index 1864ccdf6..387add2c8 100644 --- a/src/main/frontend/components/theme.css +++ b/src/main/frontend/components/theme.css @@ -41,6 +41,17 @@ html { } } +.form-checkbox { + color: var(--ls-page-checkbox-color, #6093a0); + background-color: var(--ls-page-checkbox-color, #6093a0); + border-color: var(--ls-page-checkbox-border-color, #6093a0); + border: none; +} + +.form-checkbox:hover { + transform: scale(1.1); +} + html[data-theme=dark] { background-color: var(--ls-primary-background-color); @@ -51,13 +62,6 @@ html[data-theme=dark] { input.form-input { background: none; } - - .form-checkbox { - color: var(--ls-page-checkbox-color, #6093a0); - background-color: var(--ls-page-checkbox-color, #6093a0); - border-color: var(--ls-page-checkbox-border-color, #6093a0); - border: none; - } } html[data-theme=light] { @@ -203,5 +207,3 @@ html.is-electron { } } } - - diff --git a/src/main/frontend/ui.css b/src/main/frontend/ui.css index 5aa9adab9..095b2aa45 100644 --- a/src/main/frontend/ui.css +++ b/src/main/frontend/ui.css @@ -82,29 +82,6 @@ border-left: 4px solid transparent; } -.form-checkbox { - color: var(--ls-page-checkbox-color, #137cbd); - background-color: transparent; - border-radius: 0; - border: 2px solid; - border-color: var(--ls-page-checkbox-border-color); - appearance: none -} - -.form-checkbox { - &:checked { - border: none; - - &:focus { - box-shadow: none; - } - } - - &:not(:checked):focus { - box-shadow: none; - } -} - .form-select { background-color: var(--ls-primary-background-color, transparent); background-repeat: no-repeat;