joplin-userchrome.css (10257B)
1 /* html-ized markdown for entire app */ 2 /* designed originally by uxamanda (https://discourse.joplinapp.org/u/uxamanda). latest version https://github.com/amandamcg/joplin-theme */ 3 /* Redesigned by Stephen (robotcorner) https://https://github.com/robotcorner/joplin-theme-dark-gruvbox */ 4 5 :root { 6 --white: {{color7}}; 7 --dark-white: {{color15}}; 8 --light-grey: {{color7}}; 9 --grey: {{color15}}; 10 --dark-grey: {{color8}}; 11 --darker-grey: {{color8}}; 12 --black: {{color0}}; 13 --red: {{color1}}; 14 --red-dark: {{color9}}; 15 --green: {{color2}}; 16 --green-dark: {{color10}}; 17 --yellow:{{color3}}; 18 --yellow-dark: {{color11}}; 19 --yellow-darkest: {{color11}}; 20 --blue: {{color4}}; 21 --blue-dark: {{color12}}; 22 --purple: {{color5}}; 23 --purple-dark: {{color13}}; 24 --aqua: {{color6}}; 25 --aqua-dark: {{color14}}; 26 --aqua-very-dark: {{color14}}; 27 --orange: {{color3}}; 28 --orange-dark: {{color11}}; 29 30 --base-size-1: 1px; 31 --base-size-4: 5px; 32 --base-size-8: 9px; 33 --base-size-10: 11px; 34 --base-size-14: 14px; 35 --base-size-16: 16px; 36 --base-size-18: 18px; 37 --base-size-24: 24px; 38 --base-size-32: 32px; 39 --base-size-40: 40px; 40 --base-size-272: 272px; 41 --z-toc: 99; 42 --font-weight-light: 200; 43 --font-weight-base: 400; 44 --font-weight-bold: 500; 45 --font-sans: "Lexend Deca"; 46 --font-mono: "Fira Code"; 47 --primary: var(--purple); 48 --secondary: var(--orange-dark); 49 --font-line-height: 1.4em; 50 --font-size: var(--base-size-16); 51 --icon-size: var(--font-size); 52 } 53 54 * { 55 font-family: var(--font-sans) !important; 56 font-weight: var(--font-weight-base) !important; 57 font-size: var(--font-size) !important; 58 line-height: var(--font-line-height) !important; 59 } 60 61 .fa, .far, .fas { 62 font-weight: 900 !important; 63 font-family: "Font Awesome 5 Free" !important; 64 font-size: var(--icon-size) !important; 65 } 66 67 body { 68 background-color: var(--black) !important; 69 font-size: var(--base-size-16) !important; 70 } 71 72 .noteTextViewer { 73 border-left: var(--base-size-1) solid var(--dark-grey) !important; 74 } 75 76 #react-root>div>div>div:last-child { 77 border-left: none !important; 78 background-color: var(--black) 79 } 80 81 #react-root>div>div>div:last-child>div>div { 82 border-bottom: var(--base-size-1) solid var(--dark-grey) !important; 83 } 84 85 #react-root>div>div>div:last-child>div>div>span { 86 padding: 0 18px 4px 4px !important; 87 } 88 89 #react-root>div>div>div:last-child>div>div>div .editor-toolbar { 90 border-bottom: var(--base-size-1) solid var(--dark-grey) !important; 91 margin-bottom: 0 !important; 92 border-top: none !important; 93 } 94 95 #react-root>div>div>div:last-child>div>div .editor-toolbar { 96 border-bottom: none !important; 97 } 98 99 #react-root>div>div>div:last-child>div>div>div>div:last-child>div:last-child { 100 border: none !important; 101 } 102 103 /* markdown */ 104 .ace_text-layer { 105 padding: 3%; 106 } 107 108 .ace_content { 109 background-color: var(--black) !important; 110 } 111 112 .ace_editor div, .ace_editor span { 113 font-family: var(--font-mono) !important; 114 font-weight: --font-weight-base; 115 color: var(--dark-white); 116 } 117 118 .ace_heading { 119 /*color: var(--white) !important;*/ 120 color: var(--yellow) !important; 121 } 122 123 /*Bold*/ 124 .ace_string.ace_strong { 125 color: var(--green-dark) !important; 126 font-weight: bold !important; 127 } 128 129 /* Italics */ 130 .ace_string.ace_emphasis { 131 color: var(--green-dark) !important; 132 font-style: italic !important; 133 } 134 135 /* Line Breaks */ 136 .ace_constant.ace_language.ace_escape { 137 color: gold !important; 138 } 139 140 .ace_variable { 141 color: var(--white) !important; 142 } 143 144 /* Lists and Checkboxes */ 145 .ace_list { 146 /*color: var(--light-grey) !important;*/ 147 color: palegoldenrod !important; 148 } 149 150 /* Inline Codes and Codeblocks */ 151 .ace_support.ace_function { 152 color: var(--aqua) !important; 153 } 154 155 .ace_string { 156 color: var(--primary) !important; 157 158 } 159 160 .ace_cursor { 161 border-left: var(--base-size-1) solid var(--orange) !important; 162 } 163 164 /* prevent cursor from blinking */ 165 /* https://discourse.joplinapp.org/t/share-your-css/1730/17 */ 166 .ace_cursor-layer:not(.ace_hidden-cursors) .ace_cursor { 167 opacity: 1 !important; 168 } 169 170 /* gui */ 171 .side-bar { 172 background-color: var(--black) !important; 173 opacity: 0.8; 174 } 175 176 .side-bar .folders {} 177 178 .side-bar .folders .list-item, .side-bar div, .side-bar span { 179 color: var(--dark-white) !important; 180 font-weight: var(--font-weight-base) !important; 181 font-size: var(--font-size) !important; 182 margin-bottom: var(--base-size-1); 183 } 184 185 .side-bar div div { 186 font-size: var(--font-size) !important; 187 } 188 189 /* making icons the same width so text aligns */ 190 .side-bar .fas:first-of-type { 191 width: var(--base-size-18) 192 } 193 194 .list-item div { 195 margin-left: auto !important; 196 padding-right: var(--base-size-14) !important; 197 opacity: 0.3 !important; 198 } 199 200 .synchronize-button {} 201 202 .note-list { 203 background-color: var(--black); 204 padding: var(--base-size-8) 0; 205 opacity: 0.7; 206 } 207 208 .note-list input[type="checkbox"i] { 209 opacity: 0.5 !important; 210 } 211 212 .note-list div { 213 border-bottom: 0 !important; 214 } 215 216 .note-list input[type="checkbox"i] { 217 margin-right: 1em !important; 218 } 219 220 .note-list a.list-item span, .tags .list-item { 221 /* font-family: "IBM Plex Mono" !important; */ 222 /* font-size: 12px !important; */ 223 color: var(--dark-white) !important; 224 } 225 226 .tag-list { 227 order: 4; 228 } 229 230 /* icons */ 231 .fa, .far, .fas { 232 color: var(--light-grey) !important; 233 padding-right: var(--base-size-4); 234 padding-left: var(--base-size-4) 235 } 236 237 #react-root>div { 238 background-color: var(--dark-grey) !important; 239 } 240 241 #react-root div div div:last-child div input { 242 margin: 0 !important; 243 margin-right: var(--base-size-18) !important; 244 margin-bottom: 4px !important; 245 height: 34px !important; 246 min-height: 34px !important; 247 font-size: var(--font-size) !important; 248 font-family: var(--font-mono); 249 font-weight: var(--font-weight-light); 250 background-color: var(--black) !important 251 } 252 253 254 .editor-toolbar .button { 255 height: var(--base-size-40) 256 } 257 258 .editor-toolbar .button:not(.disabled):hover, .header .button:not(.disabled):hover{ 259 color: var(--white) !important; 260 background-color: var(--yellow-darkest) !important; 261 border: 1px solid var(--yellow-darkest) !important; 262 } 263 264 .editor-toolbar .button, .header .button { 265 border: 0 !important; 266 } 267 268 .editor-toolbar .button i { 269 font-size: var(--icon-size) !important; 270 } 271 272 .editor-toolbar .fa, .editor-toolbar .fas { 273 padding-right: 4; 274 } 275 276 .header { 277 border-bottom: var(--base-size-1) solid var(--dark-grey) !important; 278 } 279 280 .header .title { 281 color: var(--darker-white); 282 } 283 284 input { 285 border-radius: var(--base-size-4) !important; 286 border: 0px !important; 287 background-color: var(--dark-grey) !important; 288 border: var(--base-size-1) solid var(--grey) !important; 289 opacity: 0.7; 290 /*outline: none;*/ 291 } 292 293 input:focus { 294 outline: none; 295 border: var(--base-size-1) solid var(--orange-dark) !important; 296 } 297 298 .header .title { 299 display: none !important; 300 } 301 302 .folders i.fa.fa-minus-square, .folders i.fa.fa-plus-square { 303 padding-right: 3px !important; 304 } 305 306 .folders .list-item-container { 307 margin: 0 !important; 308 } 309 310 .note-list .list-item-container:hover, .folders .list-item-container:hover { 311 /* background-color: var(--darker-white) !important; */ 312 background-color: var(--yellow-darkest) !important; 313 } 314 315 .folders a.list-item { 316 padding-left: var(--base-size-8); 317 margin: 0 !important; 318 } 319 320 .side-bar>div:last-child div { 321 font-family: var(--font-mono) !important; 322 font-size: calc(var(--font-size)/1.3) !important; 323 padding: 2px; 324 } 325 326 .side-bar>div:last-child { 327 padding: var(--base-size-4) !important; 328 font-family: var(--font-mono) !important; 329 border-top: var(--base-size-1) solid var(--black); 330 } 331 332 .synchronize-button { 333 border: none !important; 334 background: var(--dark-grey); 335 border-radius: var(--base-size-4) !important; 336 padding: var(--base-size-14) !important; 337 color: var(--light-grey) !important; 338 text-transform: uppercase; 339 font-family: var(--font-mono) !important; 340 font-weight: var(--font-weight-bold) !important; 341 letter-spacing: 1px; 342 } 343 344 /* TESTING BELOW */ 345 /* code mirror */ 346 347 .cm { 348 font-family: var(--font-sans); 349 font-size: var(--font-size); 350 } 351 352 /* background and base color */ 353 .cm-s-material-darker.CodeMirror { 354 background-color: var(--black) !important; 355 color: var(--light-grey) !important 356 } 357 358 /* lists */ 359 .cm-s-material-darker .cm-variable-2 { 360 color: var(--light-grey) !important 361 } 362 363 /* internal links */ 364 .cm-s-material-darker .cm-string { 365 color: var(--primary) !important 366 } 367 368 /* headers */ 369 .cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4 { 370 color: var(--dark-white) !important 371 } 372 373 .cm-variable-2, .cm-meta { 374 color: var(--red-dark) !important; 375 /* changes the font colour for all lists (.cm-meta controls the checkbox square brackets [ ] ) */ 376 } 377 .cm-comment { 378 color: var(--green-dark) !important; 379 /* changes the font colour for code text*/ 380 } 381 .cm-quote { 382 color: var(--purple-dark) !important; 383 /* changes the font colour for quoted text*/ 384 } 385 .cm-image-marker { 386 color: var(--red); 387 /* changes the font colour for the "!" before displayed image links */ 388 font-weight: 900; 389 /* changes the font weight for the "!" before displayed image links */ 390 } 391 .cm-link, .cm-url { 392 /* .cm-link is everything in the square brackets | .cm-url is the url itself in the round brackets */ 393 color: var(--green) !important; 394 /* changes the font colour for links */ 395 text-decoration: none !important; 396 /* removes underlining for links */ 397 } 398 .cm-tag, .cm-attribute { 399 /* HTML - .cm-tag is the HTML tag itself such as "<img>" | .cm-attribute is any HTML tag attributes such as "width" or "src" */ 400 /* the below are NOT applied if the html text is marked as "code" unless it is in a fenced html code block (```HTML) */ 401 color: var(--dark-purple) !important; 402 /* changes the font colour for HTML tags */ 403 font-weight: 500; 404 /* changes the font weight for HTML tags */ 405 } 406 .cm-hr { 407 color: var(--orange-dark) !important; 408 /* changes the font colour for horizontal rule markdown "***" */ 409 font-weight: 900; 410 /* changes the font weight for horizontal rule markdown "***" */ 411 }