├── _config.yml
├── icon.png
├── package.json
├── LICENSE
├── README.md
└── custom.css
/_config.yml:
--------------------------------------------------------------------------------
1 | theme: jekyll-theme-minimal
--------------------------------------------------------------------------------
/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/l3ony2k/D42ker-Logseq/HEAD/icon.png
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "D42ker Logseq",
3 | "author": "L3ON",
4 | "repo": "LeonWong0609/D42ker-Logseq",
5 | "version": "0.0.8",
6 | "description": "Default Logseq dark theme with 0 saturation background and some other tweaks",
7 | "logseq": {
8 | "themes": [
9 | {
10 | "name": "D42ker Logseq",
11 | "url": "./custom.css",
12 | "description": "A darker Logseq theme with 0 saturation background and some other tweaks.",
13 | "mode": "dark"
14 | }
15 | ],
16 | "id": "logseq-d42ker-theme",
17 | "icon": "./icon.png"
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 Leon
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | 
3 |
4 |
5 | D42ker Logseq Theme
6 |
7 |
8 | 
9 |
10 |
11 | **🎉 It's now on the [Marketplace](https://github.com/logseq/marketplace). Just go to marketplace in Logseq and add this theme 😀**
12 |
13 | (logseq-default-dark-0-saturation)
14 |
15 | Default [Logseq](https://logseq.com/) dark theme with 0 saturation background and some other tweaks.
16 |
17 | Most of the enhanced features were inspired by great guys on [Logseq Discord server](https://discord.gg/KpN4eHY).
18 |
19 | ## Modifications
20 |
21 | All these changes are based on default dark theme of Logseq.
22 |
23 | - 0 saturation background
24 | - Red accent color
25 | - link
26 | - highlight (mark)
27 | - searchbar
28 | - checkbox
29 | - …
30 | - Highlight current focused block (Thanks to @cannibalox, @pengx17)
31 | - Added 🔴 🟡 🟢 to `[#A]` `[#B]` `[#C]`, respectively (Thanks to @pengx17)
32 | - Colorful highlight (from [Yin and Yang Obsidian theme](https://github.com/chetachiezikeuzor/Yin-and-Yang-Theme))
33 | - thanks to @bettyzhang ([Discord Link](https://discord.com/channels/725182569297215569/756886540038438992/850029658351468574))
34 |
35 | -
36 | Usage
37 |
38 | - add following code to your `config.edn`
39 |
40 | ```
41 | ["Blue Highlighter" [[:editor/input "" {:backward-pos 7}]]]
42 | ["Green Highlighter" [[:editor/input "" {:backward-pos 7}]]]
43 | ["Gray Highlighter" [[:edior/input "" {:backward-pos 7}]]]
44 | ["Grey Highlighter" [[:editor/input "" {:backward-pos 7}]]]
45 | ["Orange Highlighter" [[:editor/input "" {:backward-pos 7}]]]
46 | ["Pink Highlighter" [[:editor/input "" {:backward-pos 7}]]]
47 | ["Red Highlighter" [[:editor/input "" {:backward-pos 7}]]]
48 | ["Yellow Highlighter" [[:editor/input "" {:backward-pos 7}]]]
49 | ["Purple Highlighter" [[:editor/input "" {:backward-pos 7}]]]
50 | ```
51 |
52 | - your `config.edn` should look like this
53 |
54 | 
55 |
56 | - use `/blue` then select `Blue Highlighter` to apply
57 |
58 | 
59 |
60 |
61 |
62 | - Lightened table background
63 | - ~~Fixed some CodeMirror issues~~
64 | - Thin outline around block editor text area (Thanks to @sabre23t [Discord](https://discord.com/channels/725182569297215569/752845138148982877/857463855948103701))
65 | - Red accent color in light theme
66 | - I seldom use light theme, so it might be buggy 😢
67 |
68 | ## How to use
69 |
70 | Copy and paste the contents of `custom.css` file into your `logseq/custom.css` file.
71 |
72 | Or
73 |
74 | Add the following line to your `logseq/custom.css` file.
75 |
76 | ```css
77 | @import url('https://cdn.jsdelivr.net/gh/LeonWong0609/logseq-default-dark-0-saturation@main/custom.css');
78 | ```
79 |
80 | ***
81 |
82 | **🎉 现已登录 [Marketplace](https://github.com/logseq/marketplace)，在 Logseq 的 marketplace 中可以直接添加该主题 😀**
83 |
84 | 默认的 [Logseq](https://logseq.com/) 深色主题，0 饱和度的背景和其他一些调整。
85 |
86 | 大多数增强功能的灵感都来自 [Logseq Discord 服务器](https://discord.gg/KpN4eHY) 的朋友们。
87 |
88 | ## 修改
89 |
90 | 所有的修改都基于 Logseq 的默认深色主题
91 |
92 | - 0 饱和度主背景
93 | - 红色作为强调色
94 | - 链接
95 | - 默认高亮
96 | - 搜索框
97 | - 待办列表
98 | - …
99 | - 为当前聚焦的 block 增加高亮 (Thanks to @cannibalox, @pengx17)
100 | - 在 `[#A]` `[#B]` `[#C]` 优先级的任务前分别添加 🔴 🟡 🟢 (Thanks to @pengx17)
101 | - 多彩高亮 (from [Yin and Yang Obsidian theme](https://github.com/chetachiezikeuzor/Yin-and-Yang-Theme))
102 | - thanks to @bettyzhang ([Discord Link](https://discord.com/channels/725182569297215569/756886540038438992/850029658351468574))
103 |
104 | -
105 | 使用方法
106 |
107 | - 将以下代码加入到 `config.edn` 中
108 |
109 | ```
110 | ["Blue Highlighter" [[:editor/input "" {:backward-pos 7}]]]
111 | ["Green Highlighter" [[:editor/input "" {:backward-pos 7}]]]
112 | ["Gray Highlighter" [[:edior/input "" {:backward-pos 7}]]]
113 | ["Grey Highlighter" [[:editor/input "" {:backward-pos 7}]]]
114 | ["Orange Highlighter" [[:editor/input "" {:backward-pos 7}]]]
115 | ["Pink Highlighter" [[:editor/input "" {:backward-pos 7}]]]
116 | ["Red Highlighter" [[:editor/input "" {:backward-pos 7}]]]
117 | ["Yellow Highlighter" [[:editor/input "" {:backward-pos 7}]]]
118 | ["Purple Highlighter" [[:editor/input "" {:backward-pos 7}]]]
119 | ```
120 |
121 | - 添加完成后 `config.edn` 应该看起来像这样
122 |
123 | 
124 |
125 | - 编辑模式下使用 `/blue` 命令后，选中 `Blue Highlighter` 来应用
126 |
127 | 
128 |
129 |
130 |
131 | - 提亮表格背景
132 | - ~~调整一些代码显示~~
133 | - 为当前处于编辑状态的 block 增加边框 (Thanks to @sabre23t [Discord](https://discord.com/channels/725182569297215569/752845138148982877/857463855948103701))
134 | - 修改浅色主题的强调色为红色
135 | - 我很少使用浅色主题，所以浅色主题不如深色主题完善 😢
136 |
137 | ## 使用方法
138 |
139 | 将 `custom.css` 文件中的内容复制粘贴到 `logseq/custom.css` 文件中。
140 |
141 | 或
142 |
143 | 在 `logseq/custom.css` 文件中添加下面这行代码：
144 |
145 | ```css
146 | @import url('https://cdn.jsdelivr.net/gh/LeonWong0609/logseq-default-dark-0-saturation@main/custom.css');
147 | ```
148 |
149 | ***
150 |
151 | ## Screenshots / 截屏
152 |
153 | 
154 |
155 | 👆 overview / 总览
156 |
157 | 
158 |
159 | 👆 table / 表格
160 |
161 | 
162 |
163 | 👆 highlights (mark) / 高亮标记
164 |
165 | 
166 |
167 | 👆 outline around block editor text area & highlight current focused block / 编辑状态指示边框 & 当前聚焦 block 高亮
168 |
169 | 
170 |
171 | 👆 light theme / 浅色主题
172 |
--------------------------------------------------------------------------------
/custom.css:
--------------------------------------------------------------------------------
1 | /* moded with `bullet_threading.css` by @pengx17
2 | https://github.com/pengx17/logseq-dev-theme/blob/main/bullet_threading.css */
3 | :root {
4 | --ls-block-bullet-active-color: var(--ls-link-text-color);
5 | --ls-block-bullet-threading-width: var(--ls-block-bullet-threading-width-overwrite, 1px);
6 | }
7 |
8 | .block-control {
9 | z-index: 1;
10 | }
11 |
12 | .block-children {
13 | border-left-color: var(--ls-guideline-color);
14 | border-left-width: var(--ls-block-bullet-threading-width) !important;
15 | }
16 |
17 | .block-children-container {
18 | position: relative;
19 | }
20 |
21 | .block-children-left-border {
22 | z-index: 1;
23 | position: absolute;
24 | height: 100%;
25 | width: 4px;
26 | padding-right: 0px;
27 | border-radius: 2px;
28 | background-color: transparent;
29 | left: -1px;
30 | transition: background-color 0.2s;
31 | }
32 |
33 | .block-children-left-border:hover {
34 | background-color: var(--ls-block-bullet-active-color);
35 | }
36 |
37 | .block-content-wrapper {
38 | position: relative;
39 | }
40 |
41 | .bullet-container {
42 | height: 14px !important;
43 | width: 14px !important;
44 | position: relative;
45 | transform: translate(1px, -1px);
46 | }
47 |
48 | /* Block bullet path should only show in a nested block */
49 | .ls-block {
50 | /* Fix for headings like h1, h2 etc */
51 | /* Basic "curve" */
52 | /* Fix multi-line blocks with children */
53 | }
54 | .ls-block .bullet {
55 | background-color: var(--ls-block-bullet-active-color);
56 | box-shadow: 0 0 0 1px var(--ls-block-bullet-active-color);
57 | }
58 | .ls-block div.items-center {
59 | position: relative;
60 | height: 26px !important;
61 | }
62 | .ls-block > .items-baseline {
63 | align-items: initial;
64 | }
65 | .ls-block:not(:focus-within) .bullet {
66 | background-color: var(--ls-block-bullet-color);
67 | transform: scale(1);
68 | box-shadow: none;
69 | }
70 | .ls-block:not(:focus-within) > .items-baseline {
71 | align-items: baseline;
72 | }
73 | .ls-block .ls-block > div > div.items-center::before {
74 | pointer-events: none;
75 | content: "";
76 | left: calc(var(--ls-block-bullet-threading-width) * -1);
77 | right: 6px;
78 | top: calc(-50% + var(--ls-block-bullet-threading-width) * 0.5 - 1px);
79 | bottom: 50%;
80 | /* shift left 1px for border */
81 | position: absolute;
82 | border-left: var(--ls-block-bullet-threading-width) solid transparent;
83 | border-bottom: var(--ls-block-bullet-threading-width) solid transparent;
84 | border-bottom-left-radius: 6px;
85 | }
86 | .ls-block .ls-block:focus-within > div > div.items-center::before {
87 | border-color: var(--ls-block-bullet-active-color);
88 | }
89 | .ls-block .block-children > .ls-block::before {
90 | pointer-events: none;
91 | content: "";
92 | top: -1rem;
93 | bottom: 0;
94 | border-left: var(--ls-block-bullet-threading-width) solid transparent;
95 | left: calc(var(--ls-block-bullet-threading-width) * -1);
96 | position: absolute;
97 | }
98 | .ls-block .block-children:focus-within > .ls-block:not(:focus-within)::before {
99 | border-color: var(--ls-block-bullet-active-color);
100 | }
101 | .ls-block .block-children:focus-within > .ls-block:focus-within ~ .ls-block::before {
102 | border-color: transparent;
103 | }
104 | .ls-block[haschild=true] > div > .block-content-wrapper::before {
105 | pointer-events: none;
106 | content: "";
107 | top: 12px;
108 | bottom: 0;
109 | left: -15px;
110 | position: absolute;
111 | border-left: var(--ls-block-bullet-threading-width) solid transparent;
112 | }
113 | .ls-block[haschild=true]:focus-within > div > .block-content-wrapper::before {
114 | border-color: var(--ls-block-bullet-active-color);
115 | }
116 |
117 | /* Disable for doc mode */
118 | .doc-mode div.items-center::before,
119 | .doc-mode div.items-center::after,
120 | .doc-mode .ls-block::before,
121 | .doc-mode .ls-block::after {
122 | display: none;
123 | }
124 |
125 | /* https://github.com/LeonWong0609/D42ker-Logseq */
126 |
127 | @import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap');
128 |
129 | /* presentation mode color tweaks */
130 |
131 | .reveal a {
132 | color: #db9090;
133 | text-decoration: none;
134 | -webkit-transition: color 0.15s ease;
135 | -moz-transition: color 0.15s ease;
136 | transition: color 0.15s ease;
137 | }
138 |
139 | .reveal a:hover {
140 | color: #e8d0d0;
141 | text-shadow: none;
142 | border: 0;
143 | }
144 |
145 | .reveal a:hover img {
146 | background: rgba(255, 255, 255, 0.2);
147 | border-color: #653434;
148 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
149 | }
150 |
151 | .reveal .controls {
152 | color: #653434;
153 | }
154 |
155 | .reveal .progress {
156 | background: rgba(0, 0, 0, 0.2);
157 | color: #653434;
158 | }
159 |
160 | /* code mirror tweaks */
161 |
162 | .extensions__code > .CodeMirror {
163 | font-family: "Fira Code", menlo, consolas, monospace;
164 | background: var(--ls-secondary-background-color);
165 | }
166 |
167 | .CodeMirror-line::selection,
168 | .CodeMirror-line > span::selection,
169 | .CodeMirror-line > span > span::selection {
170 | background: #a8a8a8;
171 | }
172 |
173 | .CodeMirror-line::-moz-selection,
174 | .CodeMirror-line > span::-moz-selection,
175 | .CodeMirror-line > span > span::-moz-selection {
176 | background: #a8a8a8;
177 | }
178 |
179 | html[data-theme="dark"] .CodeMirror {
180 | color: #cccccc;
181 | background: var(--ls-block-properties-background-color) !important;
182 | padding-top: 5px !important;
183 | }
184 |
185 | .CodeMirror .cm-tab:before {
186 | content: "→";
187 | color: #80808040 !important;
188 | position: absolute;
189 | }
190 |
191 | html[data-theme="dark"] .CodeMirror .CodeMirror-selected {
192 | background: #613939;
193 | }
194 |
195 | html[data-theme="dark"] .CodeMirror .CodeMirror-gutters {
196 | background-color: var(--ls-block-properties-background-color);
197 | border-color: transparent;
198 | }
199 |
200 | html[data-theme="dark"] .CodeMirror pre.CodeMirror-line {
201 | background-color: transparent !important;
202 | }
203 |
204 | html[data-theme="dark"] .CodeMirror .CodeMirror-linenumber {
205 | color: #505050;
206 | padding: 0 5px;
207 | text-shadow: none !important;
208 | }
209 |
210 | .extensions__code-lang {
211 | background: var(--ls-block-properties-background-color);
212 | color: #505050;
213 | font-family: "Fira Code", menlo, consolas, monospace;
214 | }
215 |
216 | html[data-theme="dark"] .CodeMirror .CodeMirror-gutter .CodeMirror-gutter-text {
217 | color: #505050;
218 | }
219 |
220 | html[data-theme="dark"] .CodeMirror .CodeMirror-lines .CodeMirror-cursor {
221 | border-left: 1px solid #999999;
222 | }
223 |
224 | html[data-theme="dark"] .CodeMirror .CodeMirror-activeline-background {
225 | background: rgba(255, 255, 255, 0.1);
226 | }
227 |
228 | html[data-theme="dark"] .cp__right-sidebar .CodeMirror {
229 | background-color: #212121;
230 | }
231 |
232 | html[data-theme="dark"] .cp__right-sidebar .CodeMirror .CodeMirror-gutters {
233 | background-color: #212121;
234 | }
235 |
236 | html[data-theme="dark"] .cp__right-sidebar .CodeMirror .CodeMirror-selected {
237 | background: #313131;
238 | }
239 |
240 | .cm-s-solarized.cm-s-dark {
241 | text-shadow: none !important;
242 | }
243 |
244 | /* table tweaks (colors & reduce margin) */
245 |
246 | .dark-theme tr:nth-child(odd) {
247 | background: #212121;
248 | }
249 |
250 | .white-theme tr:nth-child(odd) {
251 | background: #fcfbfa;
252 | }
253 |
254 | table {
255 | margin: 0.3rem 0;
256 | outline: 1px solid var(--ls-border-color);
257 | outline-offset: -1px;
258 | }
259 |
260 | th {
261 | border-bottom: 1px solid var(--ls-border-color) !important;
262 | /*font-style: italic;*/
263 | font-size: 0.88rem !important;
264 | font-weight: bold;
265 | padding: 8px;
266 | background: var(--ls-table-tr-even-background-color);
267 | }
268 |
269 | td {
270 | font-size: 1rem;
271 | border-bottom: 1px solid var(--ls-border-color) !important;
272 | }
273 |
274 | /* embeded page tweaks (reduce margin) */
275 |
276 | .embed-page {
277 | margin: 0.3rem 0;
278 | padding: 0.5rem;
279 | }
280 |
281 | /* header margin tweaks */
282 |
283 | .ls-block h1,
284 | .ls-block h2,
285 | .ls-block h3,
286 | .ls-block h4,
287 | .ls-block h5,
288 | .ls-block h6 {
289 | margin: 0.5rem 0 !important;
290 | }
291 |
292 | /* quote tweaks (reduce margin & padding) */
293 |
294 | blockquote {
295 | padding: 8px 12px;
296 | border-left: 5px solid;
297 | border-left-color: var(--ls-page-blockquote-border-color, #d3d3d3);
298 | margin: 0.3rem 0 !important;
299 | }
300 |
301 | /* dark color scheme */
302 |
303 | .dark-theme,
304 | html[data-theme="dark"] {
305 | --ls-primary-background-color: #191919;
306 | --ls-secondary-background-color: #212121;
307 | --ls-tertiary-background-color: #212121;
308 | --ls-quaternary-background-color: #212121;
309 | --ls-table-tr-even-background-color: #1b1b1b;
310 | --ls-active-primary-color: #c28e8e;
311 | --ls-active-secondary-color: #e8d0d0;
312 | --ls-block-properties-background-color: #202020;
313 | --ls-page-properties-background-color: #202020;
314 | --ls-block-ref-link-text-color: #916060;
315 | --ls-search-background-color: linear-gradient(
316 | to right,
317 | #382020 0,
318 | /* #38202080 150px, */ #121212 100%
319 | );
320 | --ls-border-color: #303030;
321 | --ls-secondary-border-color: #771212;
322 | --ls-guideline-color: #303030;
323 | --ls-menu-hover-color: #362323;
324 | --ls-primary-text-color: #f0f0f0;
325 | --ls-secondary-text-color: #e7e7e7;
326 | --ls-title-text-color: #fff;
327 | --ls-link-text-color: var(--ls-link-ref-text-color);
328 | --ls-link-text-hover-color: var(--ls-active-secondary-color);
329 | --ls-link-ref-text-color: #db9090;
330 | --ls-link-ref-text-hover-color: var(--ls-link-text-hover-color);
331 | --ls-tag-text-color: var(--ls-link-text-color);
332 | --ls-tag-text-hover-color: var(--ls-link-text-hover-color);
333 | --ls-slide-background-color: var(--ls-primary-background-color);
334 | --ls-block-bullet-border-color: #4a2c2c;
335 | --ls-block-bullet-color: #424242;
336 | --ls-block-highlight-color: #362323;
337 | --ls-selection-background-color: #9d4e4e;
338 | --ls-page-checkbox-color: #a06060;
339 | --ls-page-checkbox-border-color: var(--ls-primary-background-color);
340 | --ls-page-blockquote-color: var(--ls-primary-text-color);
341 | --ls-page-blockquote-bg-color: #202020;
342 | --ls-page-blockquote-border-color: #653c3c;
343 | --ls-page-inline-code-color: var(--ls-primary-text-color);
344 | --ls-page-inline-code-bg-color: #2e2e2e;
345 | --ls-scrollbar-foreground-color: #333333;
346 | --ls-scrollbar-background-color: #00000000;
347 | --ls-scrollbar-thumb-hover-color: rgb(255 255 255 / 27%);
348 | --ls-head-text-color: var(--ls-link-text-color);
349 | --ls-icon-color: var(--ls-link-text-color);
350 | --ls-search-icon-color: var(--ls-link-text-color);
351 | --ls-a-chosen-bg: #362323;
352 | --ls-right-sidebar-code-bg-color: #2c2c2c;
353 | --color-level-1: var(--ls-secondary-background-color);
354 | --color-level-2: var(--ls-tertiary-background-color);
355 | --color-level-3: var(--ls-quaternary-background-color);
356 | --color-level-4: #195d6c;
357 | --color-level-5: #266c7d;
358 | --color-level-6: #3a7e8e;
359 | --bold-color: #fff;
360 | --mark-bg: #653434;
361 | --head-bg: #121212cc;
362 | --right-sidebar-topbar-bg: #212121cc;
363 | }
364 |
365 | /* light color scheme */
366 |
367 | .white-theme,
368 | html[data-theme="light"] {
369 | --ls-primary-background-color: #fff;
370 | --ls-secondary-background-color: #f7f6f4;
371 | --ls-tertiary-background-color: #f1eee8;
372 | --ls-quaternary-background-color: #e8e5de;
373 | --ls-table-tr-even-background-color: var(--ls-secondary-background-color);
374 | --ls-active-primary-color: #910404;
375 | --ls-active-secondary-color: #610000;
376 | --ls-block-properties-background-color: #f7f6f4;
377 | --ls-page-properties-background-color: #eae7e1;
378 | --ls-block-ref-link-text-color: #913636;
379 | --ls-search-background-color: var(--ls-secondary-background-color);
380 | --ls-border-color: rgba(46, 27, 5, 0.08);
381 | --ls-secondary-border-color: #e2e2e2;
382 | --ls-guideline-color: rgba(46, 27, 5, 0.08);
383 | --ls-menu-hover-color: var(--ls-a-chosen-bg);
384 | --ls-primary-text-color: #333;
385 | --ls-secondary-text-color: #2e1616;
386 | --ls-title-text-color: var(--ls-primary-text-color);
387 | --ls-link-text-color: #913636;
388 | --ls-link-text-hover-color: #db5f5f;
389 | --ls-link-ref-text-color: var(--ls-link-text-color);
390 | --ls-link-ref-text-hover-color: var(--ls-link-text-hover-color);
391 | --ls-tag-text-color: var(--ls-link-ref-text-color);
392 | --ls-tag-text-hover-color: var(--ls-link-ref-text-hover-color);
393 | --ls-slide-background-color: #fff;
394 | --ls-block-bullet-border-color: #dedede;
395 | --ls-block-bullet-color: rgba(67, 63, 56, 0.25);
396 | --ls-block-highlight-color: #ffe2e2;
397 | --ls-selection-background-color: #d89d9d;
398 | --ls-page-checkbox-color: #d89d9d;
399 | --ls-page-checkbox-border-color: var(--ls-page-checkbox-color);
400 | --ls-page-blockquote-color: var(--ls-primary-text-color);
401 | --ls-page-blockquote-bg-color: var(--ls-secondary-background-color);
402 | --ls-page-blockquote-border-color: #bc7979;
403 | --ls-page-inline-code-bg-color: #f7f6f4;
404 | --ls-page-inline-code-color: var(--ls-primary-text-color);
405 | --ls-scrollbar-foreground-color: rgba(0, 0, 0, 0.1);
406 | --ls-scrollbar-background-color: rgba(0, 0, 0, 0.05);
407 | --ls-scrollbar-thumb-hover-color: rgba(0, 0, 0, 0.2);
408 | --ls-head-text-color: var(--ls-link-text-color);
409 | --ls-icon-color: #c1b7b7;
410 | --ls-search-icon-color: var(--ls-icon-color);
411 | --ls-a-chosen-bg: #f4f5f7;
412 | --ls-right-sidebar-code-bg-color: var(--ls-secondary-background-color);
413 | --color-level-1: var(--ls-secondary-background-color);
414 | --color-level-2: var(--ls-tertiary-background-color);
415 | --color-level-3: var(--ls-quaternary-background-color);
416 | --color-level-4: #d0e6fa;
417 | --color-level-5: #bbdaf6;
418 | --bold-color: #222;
419 | --mark-bg: #fb7b7b80;
420 | --head-bg: #ffffffcc;
421 | --right-sidebar-topbar-bg: #f7f6f4cc;
422 | }
423 |
424 | /* more contrast to bolded text */
425 |
426 | b,
427 | strong {
428 | color: var(--bold-color);
429 | }
430 |
431 | /* ==mark== tweaks */
432 |
433 | mark {
434 | background: var(--mark-bg);
435 | color: var(--ls-primary-text-color);
436 | padding: 1px 2px;
437 | margin: 0 2px;
438 | border-radius: 3px;
439 | }
440 |
441 | mark.yellow {
442 | background-color: #ffe85580;
443 | }
444 |
445 | mark.pink {
446 | background-color: #ff89be80;
447 | }
448 |
449 | mark.blue {
450 | background-color: #84b5ff80;
451 | }
452 |
453 | mark.green {
454 | background-color: #97ff9780;
455 | }
456 |
457 | mark.red {
458 | background-color: #ff558280;
459 | }
460 |
461 | mark.grey {
462 | background-color: #80808080;
463 | }
464 |
465 | mark.gray {
466 | background-color: #80808080;
467 | }
468 |
469 | mark.orange {
470 | background-color: #ffb86c80;
471 | }
472 |
473 | mark.purple {
474 | background-color: #c097ff80;
475 | }
476 |
477 | .block-ref {
478 | padding: 2px 0 2px 0;
479 | display: inline;
480 | }
481 |
482 | /* dotted & colored ((block reference)) underline */
483 |
484 | .block-ref {
485 | padding-bottom: 2px;
486 | border-bottom: 0.5px dashed;
487 | border-bottom-color: var(--ls-block-ref-link-text-color);
488 | cursor: alias;
489 | }
490 |
491 | /* `inline code` tweaks */
492 |
493 | :not(pre) > code {
494 | border-radius: 3px;
495 | font-size: 0.9em;
496 | font-family: "Fira Code", menlo, consolas, monospace;
497 | padding: 1px 3px !important;
498 | }
499 |
500 | /* menu btn tweaks */
501 |
502 | .cp__vertial-menu-button {
503 | opacity: 0.3;
504 | display: block;
505 | }
506 |
507 | .cp__vertial-menu-button:hover {
508 | opacity: 1;
509 | }
510 |
511 | .cp__vertial-menu-button svg {
512 | width: 20px;
513 | height: 20px;
514 | }
515 |
516 | #search-wrapper svg {
517 | color: var(--ls-search-icon-color, #9fa6b2);
518 | opacity: 0.3;
519 | transition: 0.3s;
520 | }
521 |
522 | /* sidebar tweaks */
523 |
524 | .cp__sidebar-main-content {
525 | max-width: var(--ls-main-content-max-width);
526 | flex: 1;
527 | }
528 |
529 | /* add left padding to header 1 */
530 |
531 | .cp__sidebar-main-content h1.title {
532 | padding: 0 15px;
533 | margin-bottom: 15px;
534 | }
535 |
536 | /************************************************************
537 | .cp__right-sidebar-inner {
538 | padding-top: 0;
539 | position: relative;
540 | min-height: 100%;
541 | overflow-x: scroll;
542 | overflow-y: auto
543 | } ***********************************************************/
544 |
545 | /* hide help btn */
546 |
547 | .cp__sidebar-help-btn {
548 | display: none;
549 | }
550 |
551 | /* .cp__right-sidebar pre.CodeMirror-line{background:#fff} */
552 |
553 | /*#ui__ac-inner {
554 | max-height: 400px;
555 | overflow-x: hidden;
556 | overflow-y: auto;
557 | position: relative;
558 | -webkit-overflow-scrolling: touch
559 | }*/
560 |
561 | .pl-4.pr-4 {
562 | background-color: #303030 !important;
563 | }
564 |
565 | /* no idea wat is this
566 | .dark .dark\:text-gray-300{--tw-text-opacity:1;color:rgba(212,212,212,var(--tw-text-opacity))} */
567 |
568 | /* hide weird thin line in main page */
569 |
570 | #sidebar-nav-wrapper {
571 | flex: 0;
572 | border-right: 0px solid #1a1a1a !important;
573 | }
574 |
575 | /* highlight current focused block */
576 |
577 | /*.ls-block .bullet {
578 | background-color: #916060
579 | }
580 |
581 | .ls-block:not(:focus-within) .bullet {
582 | background-color: var(--ls-block-bullet-color)
583 | }
584 |
585 | .ls-block>.block-children:focus-within {
586 | border-left-color: #916060;
587 | border-left-width: 1px
588 | }*/
589 |
590 | /* add traffic lights to prioritized tasks */
591 |
592 | .priority[href="#/page/A" i]::before {
593 | content: "🔴";
594 | margin-right: 2px;
595 | }
596 |
597 | .priority[href="#/page/B" i]::before {
598 | content: "🟡";
599 | margin-right: 2px;
600 | }
601 |
602 | .priority[href="#/page/C" i]::before {
603 | content: "🟢";
604 | margin-right: 2px;
605 | }
606 |
607 | /* reduce contrast of ~~del~~ */
608 |
609 | del {
610 | opacity: 0.6;
611 | }
612 |
613 | /* add thin outline to current editing block */
614 |
615 | /*.block-editor textarea {
616 | border-radius: 2px;
617 | outline: .5px solid #916060;
618 | outline-offset: 1px
619 | }*/
620 |
621 | /* add blur and shadow to both headers */
622 |
623 | .cp__header {
624 | height: 42px;
625 | }
626 |
627 | .h-12 {
628 | height: 2.5em;
629 | background-color: var(--right-sidebar-topbar-bg) !important;
630 | backdrop-filter: blur(15px);
631 | box-shadow: var(--right-sidebar-topbar-bg) 0 3px 5px 0;
632 | }
633 |
634 | /* sticky sidebar headers */
635 |
636 | .cp__right-sidebar .sidebar-item {
637 | padding-top: 0px !important;
638 | }
639 |
640 | .sidebar-item.content > div > div:first-of-type {
641 | position: sticky;
642 | top: 0rem;
643 | padding: 0.6rem;
644 | margin: 0 -1rem;
645 | z-index: 100;
646 | background-color: var(--right-sidebar-topbar-bg);
647 | backdrop-filter: blur(6px);
648 | box-shadow: var(--right-sidebar-topbar-bg) 0 3px 5px 0;
649 | }
650 |
651 | /* less contrast for query title 0.2.5 */
652 |
653 | .custom-query-title {
654 | opacity: 0.5;
655 | }
656 |
657 | /* properties area tweaks */
658 |
659 | .page-properties {
660 | opacity: 0.5;
661 | background: none;
662 | font-style: italic;
663 | border-bottom: solid 1px #202020;
664 | margin: 0 0 5px 0;
665 | }
666 |
667 | .block-properties {
668 | padding: 0;
669 | }
670 |
671 | /* custom query tweaks */
672 |
673 | .query-title {
674 | background: #2e2e2e !important;
675 | font-size: 0.88em;
676 | font-family: "Fira Code", menlo, consolas, monospace;
677 | }
678 |
679 | .custom-query {
680 | margin-top: 0 !important;
681 | }
682 |
683 | /* sidebar resizer */
684 |
685 | .cp__right-sidebar-inner .resizer {
686 | width: 8px;
687 | cursor: ew-resize !important;
688 | }
689 |
690 | .resizer:hover {
691 | background: #aaaaaa20;
692 | z-index: 9999999;
693 | }
694 |
695 | /* hr margin */
696 |
697 | hr {
698 | margin: 0.7rem 0;
699 | }
700 |
701 | /* darker + btn */
702 |
703 | .add-button-link:hover svg.add-button {
704 | opacity: 0.2;
705 | }
706 |
707 | /* right toolbar icon color tweaks */
708 | div.toggle-right-sidebar, div.injected-ui-item-toolbar a.button, div.toolbar-plugins-manager a.button {
709 | color: var(--ls-primary-text-color) !important;
710 | }
711 |
712 | /* doc mode border issue */
713 | .document-mode .block-children {
714 | border-left: 0 !important;
715 | }
716 |
--------------------------------------------------------------------------------