├── .gitignore ├── README.md ├── custom └── fonts │ ├── FiraCode │ ├── FiraCode-Bold.woff │ └── FiraCode-Regular.woff │ ├── FiraMono │ └── FiraMono-Regular.woff │ ├── FiraSans │ ├── FiraSans-Light.woff │ ├── FiraSans-Regular.woff │ └── FiraSans-SemiBold.woff │ └── RobotoSlab │ ├── roboto-slab-v11-latin-200.woff │ ├── roboto-slab-v11-latin-300.woff │ ├── roboto-slab-v11-latin-600.woff │ └── roboto-slab-v11-latin-regular.woff ├── dist └── melon-theme-fonts.zip ├── melon-theme-4.css └── screenshots └── scrn4_01.png /.gitignore: -------------------------------------------------------------------------------- 1 | vscode.code-workspace 2 | .idea/ 3 | .github/workflows 4 | .directory 5 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🍋 melon-4 2 | A theme for [Trilium Notes](https://github.com/zadam/trilium), (>= 0.48.x) "_a hierarchical note taking application with focus on building large personal knowledge bases_". 3 | 4 | I really like this application and its many features. At the same time I felt like it needed some visual _overhaul_ for lack of better terms. I am trying to achieve a consistent look and feel. Sometimes things break (e.g. due to updates of the application) - please don't hesitate to file an issue! 5 | 6 | ## Screenshots 7 | ### Main Window 8 | ![scrn4_01](https://user-images.githubusercontent.com/28687075/192508241-88fb757e-9c85-4272-b2e4-7da5da79ec5e.png "More info below!") 9 | 10 | ## Theme Installation 11 | 12 | ### Please follow the official instructions [here](https://github.com/zadam/trilium/wiki/Themes). 13 | 14 | #### In a nutshell: 15 | Install the theme by following these steps: 16 | - copy the (**raw**) content of ![trilium-theme-melon-4.css](https://raw.githubusercontent.com/raphwriter/trilium-theme-melon/master/melon-theme-4.css) 17 | - paste it into a new trilium **code** note (type: CSS) named "melon-theme-4" 18 | - add a new attribute to the melon-theme-4 note `(Alt + A)` 19 | - either copy & paste `#appTheme=melon-4` to the node's attributes 20 | - or use the UI with these settings 21 | - Type: Label 22 | - Name: appTheme 23 | - Value: melon4 24 | - inheritable: _not ticked_ 25 | - go to Menu > Options 26 | - select it as your new theme 27 | 28 | ## Additional Fonts 29 | To get the full experience you need to install some additional fonts. 30 | - The web font files (.woff) have to be imported into the theme note (right click on theme note, select _Import into note_) 31 | - the _customResourceProvider_ attribute needs to be added to every font file you want to use 32 | - the respective attribute _value_ should be _fonts/Font-File-Name.woff_ 33 | 34 | ### Example Attributes (use to copy&paste) 35 | 36 | ``` 37 | #originalFileName=FiraCode-Regular.woff #customResourceProvider="fonts/FiraCode-Regular.woff" 38 | 39 | ``` 40 | 41 | -------------------------------------------------------------------------------- /custom/fonts/FiraCode/FiraCode-Bold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raphwriter/trilium-theme-melon/a2c0d7174df539f468f4e568e5bddf678f35410c/custom/fonts/FiraCode/FiraCode-Bold.woff -------------------------------------------------------------------------------- /custom/fonts/FiraCode/FiraCode-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raphwriter/trilium-theme-melon/a2c0d7174df539f468f4e568e5bddf678f35410c/custom/fonts/FiraCode/FiraCode-Regular.woff -------------------------------------------------------------------------------- /custom/fonts/FiraMono/FiraMono-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raphwriter/trilium-theme-melon/a2c0d7174df539f468f4e568e5bddf678f35410c/custom/fonts/FiraMono/FiraMono-Regular.woff -------------------------------------------------------------------------------- /custom/fonts/FiraSans/FiraSans-Light.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raphwriter/trilium-theme-melon/a2c0d7174df539f468f4e568e5bddf678f35410c/custom/fonts/FiraSans/FiraSans-Light.woff -------------------------------------------------------------------------------- /custom/fonts/FiraSans/FiraSans-Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raphwriter/trilium-theme-melon/a2c0d7174df539f468f4e568e5bddf678f35410c/custom/fonts/FiraSans/FiraSans-Regular.woff -------------------------------------------------------------------------------- /custom/fonts/FiraSans/FiraSans-SemiBold.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raphwriter/trilium-theme-melon/a2c0d7174df539f468f4e568e5bddf678f35410c/custom/fonts/FiraSans/FiraSans-SemiBold.woff -------------------------------------------------------------------------------- /custom/fonts/RobotoSlab/roboto-slab-v11-latin-200.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raphwriter/trilium-theme-melon/a2c0d7174df539f468f4e568e5bddf678f35410c/custom/fonts/RobotoSlab/roboto-slab-v11-latin-200.woff -------------------------------------------------------------------------------- /custom/fonts/RobotoSlab/roboto-slab-v11-latin-300.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raphwriter/trilium-theme-melon/a2c0d7174df539f468f4e568e5bddf678f35410c/custom/fonts/RobotoSlab/roboto-slab-v11-latin-300.woff -------------------------------------------------------------------------------- /custom/fonts/RobotoSlab/roboto-slab-v11-latin-600.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raphwriter/trilium-theme-melon/a2c0d7174df539f468f4e568e5bddf678f35410c/custom/fonts/RobotoSlab/roboto-slab-v11-latin-600.woff -------------------------------------------------------------------------------- /custom/fonts/RobotoSlab/roboto-slab-v11-latin-regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raphwriter/trilium-theme-melon/a2c0d7174df539f468f4e568e5bddf678f35410c/custom/fonts/RobotoSlab/roboto-slab-v11-latin-regular.woff -------------------------------------------------------------------------------- /dist/melon-theme-fonts.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raphwriter/trilium-theme-melon/a2c0d7174df539f468f4e568e5bddf678f35410c/dist/melon-theme-fonts.zip -------------------------------------------------------------------------------- /melon-theme-4.css: -------------------------------------------------------------------------------- 1 | /* ============================================================================= */ 2 | /* MELON 4 */ 3 | /* by https://github.com/raphwriter/ */ 4 | /* A Theme For Trilium Notes (https://github.com/zadam/trilium) */ 5 | /* ============================================================================= */ 6 | 7 | 8 | 9 | /* ----------------------------------------------------------------------------- */ 10 | /* FONT DECLARATIONS 11 | /* ----------------------------------------------------------------------------- */ 12 | 13 | /* Fira Mono */ 14 | @font-face { 15 | font-family: 'Fira Mono'; 16 | font-style: normal; 17 | font-weight: 400; 18 | src: url('/custom/fonts/FiraMono-Regular.woff') format('woff'); 19 | } 20 | 21 | /* Fira Sans */ 22 | @font-face { 23 | font-family: 'Fira Sans'; 24 | font-style: light; 25 | font-weight: 300; 26 | src: url('/custom/fonts/FiraSans-Light.woff') format('woff'); 27 | } 28 | @font-face { 29 | font-family: 'Fira Sans'; 30 | font-style: regular; 31 | font-weight: 400; 32 | src: url('/custom/fonts/FiraSans-Regular.woff') format('woff'); 33 | } 34 | 35 | /* Fira Code */ 36 | @font-face { 37 | font-family: 'Fira Code'; 38 | font-style: normal; 39 | font-weight: 300; 40 | src: url('/custom/fonts/FiraCode-Regular.woff') format('woff'); 41 | } 42 | @font-face { 43 | font-family: 'Fira Code'; 44 | font-style: normal; 45 | font-weight: 600; 46 | src: url('/custom/fonts/FiraCode-Bold.woff') format('woff'); 47 | } 48 | 49 | /* Roboto-slab */ 50 | @font-face { 51 | font-family: 'Roboto Slab'; 52 | font-style: normal; 53 | font-weight: 200; 54 | src: url('/custom/fonts/roboto-slab-v11-latin-200.woff') format('woff'); 55 | } 56 | @font-face { 57 | font-family: 'Roboto Slab'; 58 | font-style: normal; 59 | font-weight: 300; 60 | src: url('/custom/fonts/roboto-slab-v11-latin-300.woff') format('woff'); 61 | } 62 | @font-face { 63 | font-family: 'Roboto Slab'; 64 | font-style: normal; 65 | font-weight: 400; 66 | src: url('/custom/fonts/roboto-slab-v11-latin-regular.woff') format('woff'); 67 | } 68 | @font-face { 69 | font-family: 'Roboto Slab'; 70 | font-style: normal; 71 | font-weight: 600; 72 | src: url('/custom/fonts/roboto-slab-v11-latin-600.woff') format('woff'); 73 | } 74 | 75 | 76 | html { 77 | /* ----------------------------------------------------------------------------- */ 78 | /* COLOR VARIABLES 79 | /* ----------------------------------------------------------------------------- */ 80 | 81 | --color-blue-dark: #2e4b76; 82 | --color-blue-dark-alpha: #2e4b76d1; 83 | --color-blue-dark-text: #e8f1f5; 84 | --color-blue-light: #3cad9e; 85 | --color-blue-light-alpha: #3cad9e70; 86 | --color-blue-light-alpha-darker: #3cad9ed1; 87 | --color-blue-light-alpha-lighter: #2aa19229; 88 | --color-blue-light-text: #f0f4f4; 89 | --color-blue-light-gradient-1: #4ea596; 90 | --color-blue-light-gradient-2: #2ba090; 91 | --color-yellow: #e9c46a; 92 | --color-yellow-darker: #ecb400; 93 | --color-yellow-text: #63583c; 94 | --color-yellow-bg-alpha: #e9c46a1a; 95 | --color-sidebar-yellow-dark: #e1dbce; 96 | --color-orange-light: #f4a261; 97 | --color-orange-light-text: #c96a2e; 98 | --color-orange-dark: #e76f51; 99 | --color-orange-dark-text: #f2dcd6; 100 | --color-gray: #d6d6d6; 101 | --color-gray-text: #333; 102 | --color-gray-text-code: #555; 103 | --color-gray-light: #f5f5f5; 104 | --color-gray-light-alpha: rgba(199, 199, 199, 0.2); 105 | --color-gray-light-text: #999; 106 | --color-gray-medium: #868E8D; 107 | --color-gray-light-buttons: #e9e9e9; 108 | --color-gray-light-buttons-text: #434343; 109 | --color-gray-dark: #666; 110 | --color-gray-dark-text: #666; 111 | --color-paper: #ecebe3; 112 | --color-paper-text: #555; 113 | --color-paper-light: #fcfcfa; 114 | --color-paper-light-cool: #fcfcfd; 115 | --color-shadow: rgba(181, 181, 181, 0.6); 116 | --color-shadow-light: rgba(181, 181, 181, 0.3); 117 | --gradient-blue-light: linear-gradient(138deg, var(--color-blue-light-gradient-1) 0%, var(--color-blue-light-gradient-1) 35%, var(--color-blue-light-gradient-2) 100%); 118 | --gradient-paper-light: linear-gradient(170deg, var(--color-paper-light-cool) 0%, var(--color-paper-light-cool) 45%, var(--color-paper-light) 100%); 119 | --launcher-pane-background-color: var(--gradient-blue-light); 120 | --ck-color-image-caption-background: var(--color-shadow-light); 121 | --main-background-color: #fafafa; 122 | 123 | /* ----------------------------------------------------------------------------- */ 124 | /* BORDER & SHADOW VARIABLES 125 | /* ----------------------------------------------------------------------------- */ 126 | 127 | --border-radius-small: 2px; 128 | --border-radius-tabs: 2px; 129 | --border-radius-large: 10px; 130 | --border-standard: 1px solid var(--color-gray); 131 | --border-accent: 2px solid var(--color-orange-dark); 132 | --border-accent-alt: 2px solid var(--color-blue-light); 133 | --border-accent-muted: 2px solid var(--color-gray-dark); 134 | --border-accent-light: 1px dotted var(--color-blue-dark-text); 135 | 136 | --shadow-light: 3px 4px 3px -3px var(--color-shadow-light); 137 | --shadow-standard: 3px 4px 3px -3px var(--color-shadow); 138 | --shadow-accented: 2px 2px 5px -2px var(--color-gray-dark); 139 | --shadow-90deg: 0 3px 5px -3px var(--color-shadow); 140 | --shadow-90deg-inset: 0 9px 4px -9px inset var(--color-shadow-light); 141 | --shadow-embedded-notes: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; 142 | 143 | /* ----------------------------------------------------------------------------- */ 144 | /* FONT VARIABLES 145 | /* ----------------------------------------------------------------------------- */ 146 | 147 | --main-font-family-sans: 'Fira Sans', 'Open Sans', 'Source Sans Pro', 'Liberation Sans', Arial, Sans-serif; 148 | --main-font-family-serif: 'Roboto Slab', Georgia, Serif; 149 | --main-font-family-mono: 'Fira Mono', 'Source Code Pro', Courier, Monospace; 150 | --detail-text-font-family: 'Fira Sans', 'Open Sans', 'Source Sans Pro', 'Liberation Sans', Arial, Sans-serif; 151 | --font-family-monospace: 'Fira Mono', 'Source Code Pro', Courier, Monospace; 152 | --font-headers: 'Roboto Slab', Georgia, Serif; 153 | --font-body: 'Fira Sans', 'Open Sans', 'Source Sans Pro', 'Liberation Sans', Arial, Sans-serif; 154 | --font-code: 'Fira Code', 'Source Code Pro', Courier, Monospace; 155 | } 156 | 157 | #root-widget { 158 | /* FF basic styling */ 159 | scrollbar-color: var(--color-gray-dark) var(--color-gray-light); 160 | scrollbar-gutter: 5px; 161 | } 162 | 163 | 164 | /* ----------------------------------------------------------------------------- */ 165 | /* RESET 166 | /* ----------------------------------------------------------------------------- */ 167 | 168 | #root-widget *, .modal-content, :not(.ribbon-body *), form input, :not(h1, h2, h3, h4, h5, h6) { 169 | font-family: var(--font-body); 170 | border-radius: var(--border-radius-small); 171 | } 172 | 173 | 174 | #root-widget #center-pane .note-detail :is(h1, h2, h3, h4, h5, h6), 175 | .modal-content :is(h1, h2, h3, h4, h5, h6) { 176 | border-bottom: none; 177 | color: var(--color-gray-light-buttons-text); 178 | font-family: var(--main-font-family-serif); 179 | margin-top: 1.6rem; 180 | margin-bottom: .3rem; 181 | font-weight: bold; 182 | padding: 6px 0px; 183 | border-radius: 0; 184 | 185 | font-family: var(--font-headers) !important; 186 | } 187 | 188 | 189 | /* Excalidraw fixes */ 190 | #root-widget #center-pane div.excalidraw-wrapper :is(h1, h2, h3, h4, h5, h6) { 191 | margin: unset; 192 | padding: unset; 193 | } 194 | 195 | #root-widget #center-pane div.excalidraw-wrapper .App-menu__left .panelColumn { 196 | row-gap: 0; 197 | } 198 | 199 | 200 | #root-widget a { 201 | color: var(--color-blue-dark); 202 | } 203 | 204 | 205 | span.edited-note-line { 206 | display: inline-flex; 207 | margin-left: 1rem; 208 | color: var(--color-gray-dark); 209 | background-color: white; 210 | border: var(--border-standard); 211 | margin-bottom: 0.2rem; 212 | padding: 0.1rem 0.3rem; 213 | } 214 | span.edited-note-line:before { 215 | /*color: var(--color-gray-dark); 216 | content: "- "; 217 | margin-right: 0.2rem;*/ 218 | } 219 | span.edited-note-line small { 220 | color: var(--color-gray-dark); 221 | margin-right: 2px; 222 | margin-left: 2px; 223 | } 224 | 225 | div#rest-pane.component div#center-pane .title-row { 226 | 227 | } 228 | 229 | 230 | /* ----------------------------------------------------------------------------- */ 231 | /* CodeMirror 232 | /* ----------------------------------------------------------------------------- */ 233 | 234 | div#root-widget div#rest-pane div#center-pane div.note-detail div.note-detail-code div.note-detail-code-editor div.CodeMirror-code span { 235 | /*color: var(--color-gray-text-code);*/ 236 | font-family: var(--font-code); 237 | } 238 | div.CodeMirror span.cm-atom { 239 | color: var(--color-gray-text-code); 240 | } 241 | div.CodeMirror span.cm-builtin { 242 | color: var(--color-gray-text-code); 243 | } 244 | div.CodeMirror span.cm-callee { 245 | color: var(--color-yellow-text); 246 | } 247 | div.CodeMirror span.cm-comment { 248 | color: var(--color-yellow-darker); 249 | background-color: var(--color-gray-light); 250 | padding: 5px 2px; 251 | margin: -5px -2px; 252 | } 253 | div.CodeMirror span.cm-def { 254 | color: var(--color-gray-text-code); 255 | } 256 | div.CodeMirror span.cm-keyword { 257 | color: var(--color-gray-text-code); 258 | } 259 | div.CodeMirror span.cm-matchhighlight { 260 | color: var(--color-gray-text-code); 261 | } 262 | div.CodeMirror span.cm-number { 263 | color: var(--color-gray-text-code); 264 | } 265 | div.CodeMirror span.cm-operator { 266 | color: var(--color-gray-text-code); 267 | } 268 | div.CodeMirror span.cm-overlay { 269 | color: var(--color-gray-text-code); 270 | } 271 | div.CodeMirror span.cm-property { 272 | color: var(--color-paper-text); 273 | text-decoration: underline; 274 | text-decoration-color: var(--color-gray); 275 | text-decoration-style: dotted; 276 | } 277 | div.CodeMirror span.cm-variable { 278 | color: var(--color-blue-dark); 279 | } 280 | div.CodeMirror span.cm-variable-2 { 281 | color: var(--color-blue-light); 282 | } 283 | div.CodeMirror span.cm-variable-3 { 284 | color: var(--color-gray-text-code); 285 | } 286 | div.CodeMirror span.cm-qualifier { 287 | color: var(--color-gray-text-code); 288 | } 289 | div.CodeMirror span.cm-string { 290 | color: var(--color-orange-dark); 291 | } 292 | div.CodeMirror span.cm-string-2 { 293 | color: var(--color-gray-text-code); 294 | } 295 | div.CodeMirror span.cm-tag { 296 | color: var(--color-gray-text-code); 297 | } 298 | 299 | .note-detail-code-editor div.CodeMirror-selected, 300 | .note-detail-code-editor div.CodeMirror-line::selection { 301 | background-color: var(--color-blue-light-alpha); 302 | } 303 | 304 | .CodeMirror-matchingbracket { 305 | text-decoration: none; 306 | color: var(--color-orange-dark) !important; 307 | border: 1px solid var(--color-gray); 308 | } 309 | 310 | .CodeMirror-linenumber { 311 | /*! font-size: 0.9rem; */ 312 | color: var(--color-gray); 313 | font-family: var(--font-code) !important; 314 | } 315 | 316 | .CodeMirror-linenumber::before { 317 | /*content: "\00B7";*/ 318 | } 319 | 320 | /* ----------------------------------------------------------------------------- */ 321 | /* HYPERLINKS 322 | /* ----------------------------------------------------------------------------- */ 323 | 324 | a, a:visited, a:hover, 325 | .note-detail a, .note-detail a:hover, 326 | .modal-dialog a, .modal-dialog a:hover, 327 | .note-paths-widget a, .note-paths-widget a:hover, 328 | .similar-notes-widget a, .similar-notes-widget a:hover, 329 | .related-notes-container a, .related-notes-container a:hover, 330 | div.tooltip a, 331 | li a, li a:visited, li a:hover 332 | { 333 | color: var(--color-blue-dark); 334 | border-bottom: 1px solid var(--color-gray-dark); 335 | border-radius: 0 !important; 336 | text-decoration: none; 337 | } 338 | 339 | a:hover, 340 | .note-detail a:hover, 341 | .modal-dialog a:hover, 342 | .note-paths-widget a:hover, 343 | .similar-notes-widget a:hover, 344 | .related-notes-container a:hover { 345 | border-bottom: 1px solid var(--color-blue-light); 346 | border-radius: 0; 347 | color: var(--color-blue-light); 348 | text-decoration: none; 349 | } 350 | 351 | div#root-widget div#rest-pane div#center-pane div.scrolling-container div.note-detail.component div.note-detail-editable-text div.note-detail-editable-text-editor.ck.ck-content li span.todo-list__label__description a { 352 | margin-left: 0.4rem; 353 | } 354 | 355 | 356 | /* ----------------------------------------------------------------------------- */ 357 | /* CK EDITOR 358 | /* ----------------------------------------------------------------------------- */ 359 | div.ck-body-wrapper div.ck.ck-reset_all.ck-body.ck-rounded-corners button.ck.ck-button.ck-off.ck-block-toolbar-button, 360 | div.ck-body-wrapper div.ck.ck-reset_all.ck-body.ck-rounded-corners button.ck.ck-button.ck-on.ck-block-toolbar-button { 361 | /*! position: absolute; */ 362 | /*! left: -50px; */ 363 | margin: 0 0 0 -20px; 364 | /*! border: 1px dashed var(--color-gray-light-buttons-text); */ 365 | border-radius: 7px; 366 | width: 31px; 367 | height: 31px; 368 | color: var(--color-gray-light-buttons-text); 369 | outline: 1px solid var(--color-blue-light-text); 370 | outline-offset: -3px; 371 | box-shadow: var(--shadow-embedded-notes); 372 | padding: 5px; 373 | background: var(--gradient-paper-light); 374 | border: 2px solid white; 375 | } 376 | 377 | div.ck-body-wrapper div.ck.ck-reset_all.ck-body.ck-rounded-corners div.ck.ck-balloon-panel.ck-balloon-panel_with-arrow.ck-toolbar-container.ck-balloon-panel_visible { 378 | border-radius: 7px; 379 | background: var(--gradient-paper-light); 380 | border: 2px solid white; 381 | box-shadow: var(--shadow-embedded-notes); 382 | color: var(--color-gray-light-buttons-text); 383 | outline: 1px solid var(--color-blue-light-text); 384 | outline-offset: -3px; 385 | padding: 5px; 386 | 387 | } 388 | 389 | div.ck-body-wrapper div.ck.ck-reset_all.ck-body.ck-rounded-corners div.ck.ck-balloon-panel.ck-balloon-panel_with-arrow.ck-toolbar-container.ck-balloon-panel_visible .ck-toolbar, 390 | div.ck-body-wrapper div.ck.ck-reset_all.ck-body.ck-rounded-corners div.ck.ck-balloon-panel.ck-balloon-panel_with-arrow.ck-toolbar-container.ck-balloon-panel_visible .ck-toolbar .ck-toolbar__items { 391 | background: var(--gradient-paper-light); 392 | } 393 | 394 | .ck.ck-button, a.ck.ck-button { 395 | background: var(--gradient-light-gray); 396 | } 397 | 398 | .ck.ck-button:not(.ck-disabled):hover, a.ck.ck-button:not(.ck-disabled):hover { 399 | background: var(--color-blue-light-alpha); 400 | } 401 | 402 | 403 | /* ----------------------------------------------------------------------------- */ 404 | /* MODALS 405 | /* ----------------------------------------------------------------------------- */ 406 | 407 | /* ----------- RECENT CHANGES ----------- */ 408 | div#recent-changes-content div { 409 | margin-bottom: 2rem; 410 | } 411 | 412 | div#recent-changes-content div ul { 413 | margin-left: .5rem; 414 | margin-top: .5rem; 415 | padding-left: 0; 416 | } 417 | 418 | div#recent-changes-content div ul li { 419 | list-style-type: none; 420 | margin-bottom: .3rem; 421 | } 422 | 423 | div#recent-changes-content div ul li span { 424 | color: var(--color-blue-light); 425 | font-family: var(--main-font-family-serif); 426 | } 427 | 428 | div#recent-changes-content div ul li span small { 429 | color: var(--color-gray-light-text); 430 | display: block; 431 | margin-left: 0rem; 432 | } 433 | 434 | div#recent-changes-content div b { 435 | border-bottom: 1px solid var(--color-gray); 436 | color: var(--color-blue-dark); 437 | display: block; 438 | font-family: var(--main-font-family-serif); 439 | font-weight: normal; 440 | } 441 | 442 | 443 | 444 | /* ----------------------------------------------------------------------------- */ 445 | /* COMPONENTS 446 | /* ----------------------------------------------------------------------------- */ 447 | 448 | /* ----------- GUTTER ----------- */ 449 | 450 | div#root-widget div.gutter-horizontal { 451 | background: var(--color-gray-light); 452 | /*! width: 5px !important; */ 453 | border-left: var(--border-standard); 454 | border-radius: 0; 455 | padding-right: 0.5rem; 456 | border-right: var(--border-standard); 457 | } 458 | 459 | 460 | 461 | /* -----------LEFT PANE -------------- */ 462 | div#left-pane { 463 | background-color: var(--color-paper-light-cool); 464 | } 465 | 466 | 467 | /* ----------- RIGHT PANE ------------ */ 468 | 469 | div#right-pane.component { 470 | margin-left: 10px; 471 | } 472 | 473 | div#right-pane.component div.card-header { 474 | border-radius: 0; 475 | font-family: var(--font-headers); 476 | font-weight: normal; 477 | } 478 | 479 | div#right-pane.component div.card-header .toc > ol { 480 | padding-left: 15px; 481 | } 482 | 483 | div#right-pane.component div.card-body .toc > ol > ol li { 484 | list-style: lower-latin; 485 | } 486 | 487 | div#right-pane.component div.card-body div.toc-widget { 488 | padding-left: 0; 489 | contain: none; 490 | overflow: auto; 491 | } 492 | 493 | div#right-pane.component div.card-body div.toc-widget li { 494 | text-justify: none; 495 | font-size: 0.9rem; 496 | line-height: 1.2rem; 497 | margin-bottom: 0.4rem; 498 | } 499 | 500 | div#right-pane.component div.card-body div.toc-widget li:hover { 501 | font-weight: unset; 502 | color: var(--color-blue-dark); 503 | text-decoration: underline; 504 | text-decoration-color: var(--color-blue-light); 505 | } 506 | 507 | div#right-pane.component div.card-body div.highlights-list-widget { 508 | padding-left: 0; 509 | } 510 | 511 | div#right-pane.component div.card-body div.highlights-list-widget li { 512 | text-justify: none; 513 | font-size: 0.9rem; 514 | line-height: 1.2rem; 515 | margin-bottom: 0.4rem; 516 | } 517 | 518 | div#right-pane.component div.card-body div.highlights-list-widget li:hover { 519 | font-weight: unset; 520 | color: var(--color-blue-dark); 521 | text-decoration: underline; 522 | text-decoration-color: var(--color-blue-light); 523 | } 524 | 525 | div#right-pane.component div.card-body div.highlights-list-widget li strong { 526 | font-weight: unset; 527 | } 528 | 529 | /* ----------- DROPDOWN MENU ----------- */ 530 | 531 | div#root-widget div#left-pane .dropdown-menu a { 532 | color: var(--color-dark-blue); 533 | } 534 | 535 | a.dropdown-item { 536 | border-bottom: none; 537 | } 538 | div#root-widget div#launcher-pane div.dropdown div.dropdown-menu span.bx { 539 | color: var(--color-blue-dark); 540 | } 541 | 542 | div#root-widget div#launcher-pane div.dropdown div.dropdown-menu a { 543 | color: var(--color-blue-dark); 544 | } 545 | 546 | div#root-widget div#rest-pane .dropdown-menu a:hover:not(.disabled), .dropdown-item:hover:not(.disabled), 547 | div#root-widget div#rest-pane div#center-pane div.ribbon-container div.ribbon-top-row div.ribbon-button-container div.dropdown.show div.dropdown-menu a.dropdown-item.show-source-button:hover kbd{ 548 | background-color: var(--color-blue-light-alpha) !important; 549 | color: var(--color-blue-light-gradient-2) !important; 550 | } 551 | 552 | 553 | 554 | /* ----------- TABS ----------- */ 555 | 556 | div#root-widget div#rest-pane > div.component:first-child { 557 | border-bottom: var(--border-standard); 558 | height: 50px !important; 559 | } 560 | 561 | div#root-widget div#rest-pane div.tab-row-widget { 562 | 563 | } 564 | 565 | div#root-widget div#rest-pane div.tab-row-widget-container { 566 | 567 | } 568 | 569 | div#root-widget div#rest-pane div.tab-row-widget div.note-new-tab { 570 | height: 100%; 571 | margin: 0; 572 | display: flex; 573 | align-items: center; 574 | justify-content: center; 575 | color: var(--color-gray-dark); 576 | background-color: var(--color-gray-light-alpha); 577 | border-radius: 0; 578 | margin-left: 5px; 579 | } 580 | 581 | div#root-widget div#rest-pane div.tab-row-widget div.note-new-tab:hover { 582 | color: var(--color-blue-light); 583 | background-color: var(--color-blue-light-alpha); 584 | } 585 | 586 | .tab-row-widget .note-tab .note-tab-title { 587 | 588 | } 589 | 590 | div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab div.note-tab-wrapper { 591 | background-color: var(--color-gray-light); 592 | color: var(--color-gray-light-text); 593 | align-items: center; 594 | height: 50px; 595 | border-radius: 0; 596 | } 597 | 598 | div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab div.note-tab-wrapper:hover { 599 | color: var(--color-blue-light); 600 | background-color: var(--color-blue-light-alpha); 601 | } 602 | 603 | div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab[active=""] div.note-tab-wrapper { 604 | color: white; 605 | } 606 | 607 | div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab div.note-tab-wrapper > div { 608 | height: 50px; 609 | align-items: center; 610 | display: flex; 611 | padding: 0; 612 | font-family: var(--font-headers); 613 | font-weight: normal; 614 | } 615 | 616 | /* close button */ 617 | div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab div.note-tab-wrapper .note-tab-close span { 618 | justify-content: end; 619 | margin-right: 3px; 620 | margin-left: 3px; 621 | 622 | } 623 | 624 | div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab div.note-tab-wrapper .note-tab-close { 625 | height: 1.5rem; 626 | width: 1.5rem; 627 | justify-content: center; 628 | } 629 | 630 | div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab div.note-tab-wrapper .note-tab-close:hover { 631 | color: var(--color-gray-light-buttons-text); 632 | cursor: pointer; 633 | } 634 | 635 | /* close button "x" */ 636 | div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab div.note-tab-wrapper > div span { 637 | top: unset; 638 | font-size: 1.5rem; 639 | } 640 | 641 | div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab[active] .note-tab-wrapper { 642 | background-color: #3cad9e; 643 | color: var(--color-blue-light-text); 644 | background: var(--gradient-blue-light); 645 | } 646 | 647 | div#rest-pane div.tab-row-widget div.tab-row-widget-container div.note-tab[active] .note-tab-wrapper div.note-tab-title::before { 648 | /*! content: "\203B "; */ /* reference mark */ 649 | /*! content: "\1F348 "; */ /* melon */ 650 | content: "\1F34B "; /* lemon */ 651 | margin-right: 5px; 652 | font-size: .8rem; 653 | } 654 | 655 | 656 | 657 | /* ----------- TREE ----------- */ 658 | 659 | div#root-widget div#left-pane div.tree ul#ft-id-1 { 660 | margin-left: .4rem; 661 | margin-right: .7rem; 662 | } 663 | 664 | div#root-widget div#left-pane span.fancytree-node:hover { 665 | background-color: #2aa19229; 666 | border: 1px dotted var(--color-blue-light); 667 | color: var(--color-blue-light); 668 | } 669 | 670 | 671 | div#root-widget div#left-pane .fancytree-node { 672 | height: 36px; padding: 2px 4px 5px; 673 | font-family: var(--main-font-family-serif); 674 | } 675 | 676 | div#root-widget div#left-pane span.fancytree-node.fancytree-active { 677 | background-color: var(--color-gray-light-alpha) !important; 678 | border: none !important; 679 | } 680 | 681 | div#root-widget div#left-pane span.fancytree-node.fancytree-node span { 682 | font-family: var(--main-font-family-serif); 683 | } 684 | 685 | div#root-widget div#left-pane span.fancytree-node.fancytree-active span { 686 | color: var(--color-blue-dark); 687 | } 688 | 689 | div#root-widget div#left-pane span.fancytree-node.protected > span.fancytree-custom-icon { 690 | /* remove shadow from protected notes icon */ 691 | filter: none; 692 | color: var(--color-gray-medium); 693 | } 694 | 695 | 696 | /* multiple selected nodes */ 697 | 698 | div#root-widget div#left-pane div.tree-wrapper div.tree span.fancytree-selected { 699 | background-color: var(--color-gray-light) !important; 700 | color: var(--color-blue-dark-alpha); 701 | } 702 | 703 | div#root-widget div#left-pane div.tree-wrapper div.tree span.fancytree-selected .fancytree-title { 704 | font-style: normal; 705 | text-decoration: none; 706 | } 707 | 708 | /* NOTES WITH MULTIPLE PARENTS*/ 709 | 710 | div#root-widget div#left-pane span.fancytree-node.multiple-parents .fancytree-title::after { 711 | /* cloned notes icon */ 712 | font-family: boxicons; 713 | /*content: " \1F517";*/ 714 | content: " \EA72"; 715 | font-size: .85rem; 716 | color: var(--color-blue-dark); 717 | } 718 | 719 | div#root-widget div#left-pane div.tree-wrapper div.tree .ui-fancytree.fancytree-container.fancytree-plain.fancytree-ext-clones.fancytree-treefocus span.fancytree-node.fancytree-has-children.multiple-parents.fancytree-match.fancytree-active-clone { 720 | background-color: var(--color-gray-light) !important; 721 | color: var(--color-blue-dark-alpha); 722 | } 723 | 724 | 725 | 726 | /* ----------- CONTEXT MENU ----------- */ 727 | 728 | #context-menu-container { 729 | font-family: var(--main-font-family-sans); 730 | } 731 | 732 | 733 | 734 | /* ----------- LAUNCHER PANE ----------- */ 735 | 736 | div#launcher-pane { 737 | background-color: var(--color-blue-light); 738 | background: var(--gradient-blue-light); 739 | } 740 | 741 | div#launcher-pane .component, 742 | div#launcher-pane .component button, 743 | div#launcher-pane .icon-action { 744 | color: var(--color-blue-light-text); 745 | 746 | } 747 | 748 | div#launcher-pane .global-menu-button { 749 | filter:invert(1); 750 | } 751 | 752 | div#launcher-pane .global-menu-button:hover { 753 | filter:invert(1); 754 | } 755 | 756 | 757 | div#launcher-pane .component button:hover { 758 | filter: invert(0); 759 | background-color: var(--color-gray-light-alpha); 760 | display: block; 761 | width: inherit; 762 | } 763 | 764 | div#launcher-pane .icon-action:hover { 765 | background-color: var(--color-gray-text); 766 | } 767 | 768 | .tooltip-inner { 769 | font-family: var(--main-font-family-sans); 770 | } 771 | 772 | 773 | /* ----------- RIBBON ----------- */ 774 | 775 | div#rest-pane.component div#center-pane div.ribbon-body.active { 776 | margin-left: 0; 777 | margin-right: 0; 778 | border: none; 779 | } 780 | 781 | div#rest-pane.component div#center-pane div.attribute-list { 782 | margin-top: 0; 783 | } 784 | 785 | div#rest-pane.component div#center-pane div.ribbon-tab-container { 786 | justify-content: start; 787 | margin-left: 0; 788 | } 789 | 790 | div#rest-pane.component div#center-pane div.ribbon-container { 791 | margin-bottom: 0px; 792 | /*! padding-bottom: 5px; */ 793 | border-bottom: 1px solid var(--color-gray-light-buttons); 794 | border-top: 1px solid var(--color-gray-light-buttons); 795 | background-color: var(--color-blue-light-text); 796 | } 797 | 798 | div#rest-pane.component div#center-pane div.ribbon-body-container div.attribute-list span, 799 | div#rest-pane.component div#center-pane div.ribbon-body-container, 800 | div#rest-pane.component div#center-pane div.ribbon-body-container p, 801 | div#rest-pane.component div#center-pane div.ribbon-body-container div.inherited-attributes-container span { 802 | font-family: var(--main-font-family-mono) !important; 803 | font-size: 0.85rem; 804 | 805 | } 806 | 807 | /* show inherited attributes as tags/labels */ 808 | div#rest-pane.component div#center-pane div.ribbon-body-container div.inherited-attributes-container span { 809 | margin-right: 0.5rem; 810 | border-right: 1px solid var(--color-gray-dark); 811 | padding-right: 0.5rem; 812 | border-radius: 0; 813 | border: var(--border-standard); 814 | background-color: white; 815 | padding: 0.2rem 0.3rem; 816 | line-height: 1.7rem; 817 | } 818 | 819 | div#rest-pane.component div#center-pane div.ribbon-body-container div.attribute-list p a { 820 | border-right: var(--border-standard); 821 | padding-right: 0.5rem; 822 | /*! margin-right: 0.5rem; */ 823 | border-bottom: none; 824 | } 825 | div#rest-pane.component div#center-pane div.ribbon-body-container div.attribute-list p a:last-child { 826 | border-right: 0; 827 | } 828 | 829 | div#rest-pane.component div#center-pane div.ribbon-body-container div.attribute-list p a:last-of-type { 830 | border-right: var(--border-standard); 831 | /*?!*/ 832 | } 833 | 834 | div#rest-pane.component div#center-pane div.promoted-attributes-widget { 835 | /*! font-size: 0.75rem; */ 836 | font-weight: 100; 837 | 838 | } 839 | div#rest-pane.component div#center-pane div.promoted-attributes-container { 840 | justify-content: start; 841 | align-items: center; 842 | align-content: first baseline; 843 | } 844 | 845 | div#rest-pane.component div#center-pane div.promoted-attributes-widget div.promoted-attributes-container div.promoted-attribute-cell { 846 | margin: 5px 1rem; 847 | } 848 | 849 | div#rest-pane.component div#center-pane div.promoted-attributes-widget div.promoted-attributes-container div.promoted-attribute-cell div.input-group { 850 | margin-left: 0.3rem; 851 | } 852 | 853 | div#rest-pane.component div#center-pane div.promoted-attributes-widget div.promoted-attributes-container div.promoted-attribute-cell div.input-group input { 854 | padding: 0 0.5rem; 855 | font-size: 0.9rem; 856 | /*! height: 1.7rem; */ 857 | border: var(--border-standard); 858 | background: white !important; 859 | } 860 | 861 | div#rest-pane.component div#center-pane span.bx { 862 | font-family: boxicons !important; 863 | } 864 | 865 | div#rest-pane.component div#center-pane div.split-note-container-widget div.ribbon-container div.ribbon-tab-title { 866 | 867 | } 868 | 869 | div#rest-pane.component div#center-pane div.split-note-container-widget div.ribbon-container div.ribbon-top-row { 870 | justify-content: space-between; 871 | border: none; 872 | } 873 | 874 | div#rest-pane.component div#center-pane .ribbon-button-container { 875 | border: none; 876 | padding: 0.3rem .3rem 0rem; 877 | justify-content: end; 878 | align-content: end; 879 | } 880 | div#rest-pane.component div#center-pane .ribbon-button-container button { 881 | 882 | } 883 | div#rest-pane.component div#center-pane div.split-note-container-widget div.ribbon-container div.ribbon-tab-spacer, 884 | div#rest-pane.component div#center-pane div.split-note-container-widget div.ribbon-container div.ribbon-tab-title { 885 | border-radius: 0; 886 | padding: 0.3rem 1rem; 887 | border-bottom: none; 888 | 889 | } 890 | 891 | div#rest-pane.component div#center-pane div.split-note-container-widget div.ribbon-container div.ribbon-tab-spacer { 892 | display: none; 893 | max-width: 0; 894 | 895 | } 896 | 897 | div#rest-pane.component div#center-pane div.split-note-container-widget div.ribbon-container div.ribbon-tab-title.active { 898 | color: var(--color-blue-light); 899 | } 900 | 901 | div#rest-pane.component div#center-pane div.split-note-container-widget div.ribbon-container div.ribbon-tab-title:hover { 902 | background-color: var(--color-blue-light-alpha); 903 | color: var(--color-blue-light); 904 | } 905 | 906 | div#rest-pane.component div#center-pane div.split-note-container-widget div.ribbon-container div.ribbon-tab-title.active:hover { 907 | background-color: var(--color-blue-light-alpha); 908 | color: var(--color-blue-light); 909 | } 910 | 911 | div#root-widget div#center-pane .note-paths-widget a { 912 | font-weight: 400; 913 | } 914 | 915 | div#root-widget div#center-pane .note-paths-widget ul { 916 | padding: .4rem 0; 917 | } 918 | 919 | div#root-widget div#center-pane .note-paths-widget li { 920 | list-style-type: none; 921 | 922 | } 923 | 924 | div#root-widget div#center-pane .note-paths-widget li::before { 925 | content: "\203A \202F"; 926 | } 927 | 928 | div#rest-pane.component div#center-pane .button-widget.icon-action { 929 | color: var(--color-gray-medium); 930 | } 931 | 932 | 933 | /* Promoted Attributes */ 934 | div#center-pane.component div.promoted-attributes-container { 935 | 936 | } 937 | 938 | 939 | /* ----------- FORM ELEMENTS ----------- */ 940 | 941 | 942 | 943 | div#root-widget div#center-pane button:not(.bx).btn-primary { 944 | background-color: var(--color-blue-light); 945 | color: white; 946 | } 947 | 948 | div#center-pane button:not(.bx).btn-secondary { 949 | background-color: var(--color-gray-dark); 950 | } 951 | 952 | div#center-pane .switch { 953 | background: none; 954 | } 955 | 956 | div#center-pane .switch .slider { 957 | /*slider background*/ 958 | background-color: var(--color-gray-light-buttons); 959 | box-shadow: var(--shadow-light); 960 | border-radius: var(--border-radius-small); 961 | } 962 | 963 | div#center-pane .switch .slider::before { 964 | /*slider off state*/ 965 | background-color: var(--color-gray-light-buttons-text); 966 | border-radius: var(--border-radius-small); 967 | } 968 | 969 | div#center-pane .switch .slider.checked::before { 970 | /*slider on state*/ 971 | background-color: var(--color-blue-light); 972 | border-radius: var(--border-radius-small); 973 | } 974 | 975 | input#clone-to-note-autocomplete, 976 | .algolia-autocomplete { 977 | 978 | } 979 | 980 | /*Algolia (Search Autocomplete Form Field)*/ 981 | .algolia-autocomplete small { 982 | font-family: var(--main-font-family-mono); 983 | color: var(--color-gray-dark); 984 | display: block; 985 | 986 | } 987 | .algolia-autocomplete .aa-suggestion { 988 | border-bottom: var(--border-standard); 989 | } 990 | .algolia-autocomplete .aa-dropdown-menu b { 991 | color: var(--color-blue-light-gradient-1); 992 | text-decoration: underline; 993 | font-weight: normal; 994 | 995 | } 996 | 997 | /* checkbox background*/ 998 | .ck-content .todo-list .todo-list__label > input[checked]::before { 999 | background: var(--color-blue-dark-alpha); 1000 | border-radius: var(--border-radius-small); 1001 | } 1002 | 1003 | 1004 | #left-pane input.search-string { 1005 | background: white !important; 1006 | border: 1px solid var(--color-blue-light); 1007 | border-radius: var(--border-radius-small); 1008 | border: var(--border-accent-light); 1009 | box-shadow: var(--shadow-light) inset; 1010 | margin-right: 10px; 1011 | } 1012 | 1013 | #left-pane div.quick-search { 1014 | border-bottom: var(--border-standard); 1015 | padding: unset; 1016 | 1017 | align-content: center; 1018 | align-items: center; 1019 | } 1020 | 1021 | #left-pane div.quick-search button { 1022 | padding: unset; 1023 | align-self: center; 1024 | margin: 0 10px; 1025 | } 1026 | 1027 | 1028 | div#root-widget div#rest-pane div#center-pane div.split-note-container-widget div.note-split.component { 1029 | margin-left: 0; 1030 | border-right: var(--border-standard); 1031 | } 1032 | 1033 | 1034 | 1035 | /* ----------- NOTEBOOK CARDS ----------- */ 1036 | 1037 | /* LIST VIEW & GRID VIEW */ 1038 | div#center-pane .note-list { 1039 | 1040 | } 1041 | 1042 | div#center-pane .note-list .note-book-card { 1043 | border: var(--border-standard) !important; 1044 | border-radius: var(--border-radius-small); 1045 | box-shadow: var(--shadow-standard); 1046 | padding: 10px; 1047 | } 1048 | 1049 | 1050 | div#center-pane .note-book-card :is(h1, h2, h3, h4, h5, h6) { 1051 | /*border-bottom: var(--border-standard); 1052 | background-color: var(--color-gray-light); 1053 | display: block; 1054 | margin-top: 0; 1055 | width: 100%; 1056 | padding: 6px; 1057 | margin-bottom: 0;*/ 1058 | } 1059 | 1060 | 1061 | 1062 | div#center-pane .note-book-card .rendered-content :is(h1, h2, h3, h4, h5, h6) { 1063 | color: var(--color-blue-dark); 1064 | background: none; 1065 | font-weight: bold; 1066 | } 1067 | 1068 | div#center-pane .note-book-card h5:first-of-type { 1069 | background-color: var(--color-blue-light-text); 1070 | border: 1px solid white; 1071 | outline: 1px solid var(--color-gray); 1072 | } 1073 | 1074 | div#center-pane h5 > span.note-book-title{ 1075 | font-family: var(--font-headers); 1076 | /*! font-weight: normal; */ 1077 | } 1078 | 1079 | div#center-pane .note-book-card :is(h1, h2, h3, h4, h5, h6).note-book-header span.note-icon { 1080 | padding: 3px; 1081 | border-radius: 3px; 1082 | margin-right: 5px; 1083 | } 1084 | 1085 | 1086 | /* GRID VIEW */ 1087 | /* GRID VIEW - note card */ 1088 | div#center-pane .note-list.grid-view .note-book-card { 1089 | margin: 10px; 1090 | } 1091 | /* GRID VIEW - note headers */ 1092 | #root-widget #center-pane .note-list.grid-view .note-book-card :is(h1, h2, h3, h4, h5, h6) { 1093 | margin: 0.1rem 0; 1094 | padding: 0.3rem 0 0.4rem; 1095 | } 1096 | 1097 | 1098 | 1099 | /* LIST VIEW */ 1100 | 1101 | /* LIST VIEW - note card*/ 1102 | div#center-pane .note-list-widget .note-list.list-view .note-book-card { 1103 | margin: 5px 0px; 1104 | overflow-y: hidden; 1105 | } 1106 | /* LIST VIEW - note headers*/ 1107 | #root-widget #center-pane .note-list-widget .note-list.list-view .note-book-card :is(h1, h2, h3, h4, h5, h6) { 1108 | margin: 0.1rem 0; 1109 | padding: 0.1rem 0 0.5rem; 1110 | } 1111 | 1112 | 1113 | div.note-list-widget div.note-list-widget-content div.note-list-container div.note-book-card.expanded div.note-book-content div.rendered-note-content pre { 1114 | font-size: .9rem; 1115 | padding: 3px 6px; 1116 | } 1117 | 1118 | div#center-pane .note-book-card.expanded > .note-book-title { 1119 | font-weight: 500; 1120 | } 1121 | 1122 | .note-list-widget .note-list-widget-content .note-list .note-book-card :is(h1, h2, h3, h4, h5) { 1123 | font-size: 1rem; 1124 | } 1125 | 1126 | .note-list-container div.note-book-card h5.note-book-title { 1127 | margin-top: 0; 1128 | } 1129 | 1130 | .note-list-widget .note-list-widget-content .note-list .note-book-card { 1131 | background-color: white; 1132 | } 1133 | 1134 | .note-list-widget .note-list-widget-content .note-list .note-book-card:hover { 1135 | background-color: white; 1136 | box-shadow: var(--shadow-standard); 1137 | } 1138 | 1139 | .note-list-widget .note-list-widget-content .note-list .note-book-card h5 { 1140 | color: var(--color-blue-dark); 1141 | } 1142 | 1143 | .note-list-widget .note-list-widget-content .note-list .note-book-card h5 span.rendered-note-attributes { 1144 | display: none; /* comment to show note attributes in list/grid view */ 1145 | 1146 | } 1147 | 1148 | .note-list-widget .note-list-widget-content .note-list .note-book-card .note-book-content { 1149 | 1150 | } 1151 | 1152 | .note-list-widget .note-list-widget-content .note-list .note-book-card.expanded .note-book-content { 1153 | 1154 | } 1155 | 1156 | .note-list-widget .note-list-widget-content .note-list .note-book-card .note-book-content a, 1157 | .note-list-widget .note-list-widget-content .note-list .note-book-card h5 a { 1158 | color: var(--color-blue-dark); 1159 | } 1160 | 1161 | .note-list-widget .note-list-widget-content .note-list .note-book-card .note-book-content .rendered-note-content { 1162 | color: var(--color-gray-dark); 1163 | padding: 0 5px !important; 1164 | } 1165 | 1166 | div#center-pane div.note-list-widget div.note-list-widget-content div.note-list.grid-view div.note-list-wrapper div.note-list-container div.note-book-card.block-link.expanded div.note-book-content.type-text { 1167 | contain: content; 1168 | border: 1px solid lightgray; 1169 | margin-top: 1rem; 1170 | padding: 0.5rem; 1171 | } 1172 | 1173 | div#center-pane div.note-list-widget div.note-list-widget-content div.note-list.grid-view div.note-list-wrapper div.note-list-container div.note-book-card.block-link.expanded div.note-book-content.type-text .rendered-content { 1174 | /*font-size: .95rem;*/ 1175 | } 1176 | 1177 | 1178 | div#center-pane div.note-list-widget div.note-list-widget-content div.note-list.grid-view div.note-list-wrapper div.note-list-container div.note-book-card.block-link.expanded div.note-book-content.type-text img { 1179 | max-width: 100%; 1180 | } 1181 | 1182 | /* remove background from small note renders*/ 1183 | div#center-pane div.note-list-widget div.note-list-widget-content div.note-list-wrapper div.note-list-container div.note-book-card div.note-book-content.type-text div.rendered-note-content div.ck-content :is(h2, h3, h4, h5, pre) { 1184 | background: none; 1185 | /*! padding-left: 0; */ 1186 | margin-bottom: 5px; 1187 | } 1188 | 1189 | div#center-pane div.note-list-widget div.note-list-widget-content div.note-list-wrapper div.note-list-container div.note-book-card div.note-book-content.type-text div.rendered-note-content div.ck-content :is(h2, h3, h4, h5) { 1190 | padding-left: 0; 1191 | } 1192 | 1193 | /* ----------- NOTES ----------- */ 1194 | 1195 | #center-pane .backlinks-ticker { 1196 | background-color: var(--color-gray-light); 1197 | color: var(--color-gray-dark-text); 1198 | border: var(--border-accent-light); 1199 | top: 0; 1200 | right: 12px; 1201 | width: fit-content; 1202 | } 1203 | 1204 | #center-pane .backlinks-items div :is(h2, h3, h4, h5, h6) { 1205 | font-size: 1.1rem; 1206 | } 1207 | 1208 | #center-pane .backlinks-ticker span.backlinks-count { 1209 | font-family: var(--main-font-family-mono); 1210 | font-size: .95rem; 1211 | 1212 | } 1213 | 1214 | #center-pane .title-row { 1215 | min-height: 4.5rem; 1216 | display: flex; 1217 | align-items: center; 1218 | } 1219 | 1220 | #center-pane .title-row .note-icon-widget { 1221 | 1222 | /*! align-content: baseline; */ 1223 | display: flex; 1224 | margin: 0; 1225 | padding: 5px; 1226 | 1227 | } 1228 | 1229 | /* Trilium >= 0.55.1 */ 1230 | #center-pane div.scrolling-container { 1231 | /*! display: flex; */ 1232 | /*! flex-direction: column; */ 1233 | /*! justify-content: space-between; */ 1234 | } 1235 | 1236 | #center-pane .note-detail { 1237 | /*! margin: 0; */ 1238 | /*! padding: 0; */ 1239 | flex-grow: 1; 1240 | /*! display: flex; */ 1241 | } 1242 | 1243 | div#center-pane div.note-detail div.canvas-widget { 1244 | display: grid; 1245 | } 1246 | 1247 | 1248 | div#center-pane div.note-detail div.note-detail-readonly-text 1249 | { 1250 | border-left: 5px solid var(--color-blue-light); 1251 | padding: 2rem 4rem 1rem 2rem; 1252 | } 1253 | 1254 | div#center-pane div.note-detail div.note-detail-printable { 1255 | 1256 | } 1257 | 1258 | div#center-pane div.note-detail div.note-detail-editable-text-editor { 1259 | 1260 | } 1261 | 1262 | div#center-pane div.note-detail div.note-detail-editable-text { 1263 | /*padding: 20px 25px 5px 25px;*/ 1264 | padding: 2rem 0 1rem 2rem; 1265 | border-left: 5px solid var(--color-orange-dark); 1266 | flex-direction: column; 1267 | display: flex; 1268 | flex-grow: 1; 1269 | } 1270 | 1271 | #center-pane .note-detail + .note-list-widget { 1272 | padding: 0; 1273 | background-color: var(--color-blue-light-text); 1274 | border-top: var(--border-standard); 1275 | box-shadow: var(--shadow-90deg-inset); 1276 | margin-bottom: 0; 1277 | margin-right: 0; 1278 | display: flex; 1279 | flex-direction: column; 1280 | flex-shrink: 0; 1281 | } 1282 | 1283 | #center-pane .note-list-widget div.note-list.list-view, 1284 | #center-pane .note-list-widget div.note-list.grid-view { 1285 | } 1286 | 1287 | #center-pane div.note-list.list-view div.note-list-wrapper div.note-list-container { 1288 | display: flex; 1289 | flex-direction: column; 1290 | } 1291 | 1292 | #center-pane .title-row .note-icon-widget button { 1293 | color: var(--color-blue-dark); 1294 | } 1295 | 1296 | #center-pane .title-row .note-title-widget { 1297 | align-self: center; 1298 | display: flex; 1299 | align-items: center; 1300 | } 1301 | 1302 | #center-pane .title-row .note-title-widget input.note-title { 1303 | color: var(--color-blue-dark) !important; 1304 | font-family: var(--main-font-family-serif); 1305 | font-weight: 600; 1306 | font-size: 2rem; 1307 | /*! box-shadow: none; */ 1308 | 1309 | } 1310 | 1311 | #center-pane .title-row .note-title-widget input.note-title.protected { 1312 | text-shadow: none; 1313 | color: var(--color-gray-medium) !important; 1314 | } 1315 | 1316 | #center-pane .title-row .note-title-widget input.note-title.protected { 1317 | 1318 | } 1319 | 1320 | #center-pane .note-detail h2:first-of-type { 1321 | margin-top: auto; 1322 | } 1323 | 1324 | #center-pane .note-detail p { 1325 | color: var(--color-gray-text); 1326 | } 1327 | 1328 | #center-pane .note-detail li { 1329 | color: var(--color-gray-text); 1330 | } 1331 | 1332 | #center-pane .note-detail p a { 1333 | color: var(--color-blue-dark); 1334 | border-bottom: 1px solid var(--color-orange-dark); 1335 | } 1336 | 1337 | #center-pane div.note-detail-editable-text div.note-detail-editable-text-editor.ck.ck-content pre, 1338 | #center-pane .CodeMirror pre code { 1339 | color: var(--color-blue-dark) !important; 1340 | padding: 1.5rem; 1341 | margin: 1.0rem auto 2.5rem; 1342 | background-color: var(--color-gray-light); 1343 | border: 1px dotted var(--color-gray); 1344 | } 1345 | 1346 | /* embedded notes */ 1347 | div#center-pane div.scrolling-container div.note-detail section.include-note { 1348 | background-color: var(--main-background-color); 1349 | margin: 1.1rem; 1350 | box-shadow: var(--shadow-embedded-notes); 1351 | border-radius: 0; 1352 | padding: 0.5rem 0.5rem; 1353 | outline: 1px dotted var(--color-gray-light-text); 1354 | outline-offset: 1rem; 1355 | } 1356 | 1357 | #center-pane code { 1358 | font-family: var(--main-font-family-mono); 1359 | } 1360 | 1361 | div#root-widget div#rest-pane div#center-pane div.note-detail img { 1362 | border: 1px solid var(--color-gray); 1363 | padding: .5rem; 1364 | } 1365 | 1366 | /* TABLES */ 1367 | 1368 | div#center-pane div.note-detail table, 1369 | div#center-pane figure.table table { 1370 | border: var(--border-light); 1371 | } 1372 | 1373 | /* FIGURES & IMAGES */ 1374 | 1375 | /* figcaption */ 1376 | div#root-widget div#center-pane div.split-note-container-widget div.note-detail figure > figcaption { 1377 | font-style: italic; 1378 | background-color: white !important; 1379 | } 1380 | -------------------------------------------------------------------------------- /screenshots/scrn4_01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/raphwriter/trilium-theme-melon/a2c0d7174df539f468f4e568e5bddf678f35410c/screenshots/scrn4_01.png --------------------------------------------------------------------------------