joplin-userchrome.css (10351B)
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: "Work Sans"; 46 --font-mono: "Cascadia 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 }}