joplin-userstyle.css (9052B)
1 /* html-ized markdown */ 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 --blue: {{color4}}; 20 --blue-dark: {{color12}}; 21 --purple: {{color5}}; 22 --purple-dark: {{color13}}; 23 --aqua: {{color6}}; 24 --aqua-dark: {{color14}}; 25 --orange: {{color3}}; 26 --orange-dark: {{color11}}; 27 --base-size-1: 1px; 28 --base-size-4: 5px; 29 --base-size-8: 9px; 30 --base-size-11: 11px; 31 --base-size-13: 13px; 32 --base-size-14: 14px; 33 --base-size-15: 15px; 34 --base-size-16: 16px; 35 --base-size-17: 17px; 36 --base-size-18: 18px; 37 --base-size-18: 19px; 38 --base-size-24: 24px; 39 --base-size-32: 32px; 40 --base-size-40: 40px; 41 --base-size-272: 272px; 42 --z-toc: 99; 43 --font-weight-light: 200; 44 --font-weight-base: 400; 45 --font-weight-base-extra: 500; 46 --font-weight-bold: 600; 47 --font-title: "Lexend Deca"; 48 --font-sans: "Lexend Deca"; 49 --font-mono: "Fira Code"; 50 --primary: var(--yellow); 51 --secondary: var(--yellow); 52 --font-line-height: 1.4em; 53 --font-size: var(--base-size-17); 54 --icon-size: var(--font-size); 55 } 56 57 .hljs { 58 background-color: black; 59 padding: var(--base-size-18); 60 border-radius: var(--base-size-4) !important; 61 } 62 63 #rendered-md { 64 padding: 6%; 65 } 66 67 body { 68 font-family: var(--font-sans) !important; 69 font-weight: var(--font-weight-base) !important; 70 color: var(--dark-white); 71 background-color: var(--black); 72 font-size: var(--font-size); 73 } 74 75 p, h1, h2, h3, h4, h5, h6, ul, table { 76 margin-top: 0; 77 } 78 79 h1, h2, h3, h4 { 80 font-family: var(--font-title); 81 font-weight: var(--font-weight-light) !important; 82 letter-spacing: 0.01em; 83 margin-top: var(--base-size-24); 84 } 85 86 h1 { 87 font-size: calc(var(--font-size)*2) !important; 88 line-height: var(--font-line-height) !important; 89 margin-top: var(--base-size-40) !important; 90 border-bottom: none !important; 91 font-weight: bold !important; 92 } 93 94 h1:first-child { 95 margin-top: 0px !important; 96 } 97 98 h2 { 99 font-size: calc(var(--font-size)*1.6) !important; 100 font-weight: bold !important; 101 } 102 103 h3 { 104 font-size: calc(var(--font-size)*1.4) !important; 105 font-weight: bold !important; 106 } 107 108 h4 { 109 font-size: calc(var(--font-size)*1.3) !important; 110 font-weight: bold !important; 111 } 112 113 p, li { 114 /* font-weight: var(--font-weight-base) !important; */ 115 letter-spacing: .03em; 116 color: var(--dark-white); 117 margin-bottom: var(--base-size-24); 118 word-wrap: break-word; 119 overflow-wrap: break-word; 120 hyphens: auto; 121 } 122 123 ol li, ul li { 124 margin-bottom: var(--base-size-4); 125 } 126 127 ul ul { 128 /* list-style-type: cjk-heavenly-stem; */ 129 list-style-type: disc; 130 } 131 132 hr { 133 padding: var(--base-size-24) !important; 134 } 135 136 blockquote { 137 font-style: italic !important; 138 opacity: 1; 139 border-radius: 10px !important; 140 border-left: 6px solid var(--white); 141 background-color: var(--darker-grey); 142 padding-right: 8px; 143 } 144 145 .md-checkbox { 146 margin-left: 0 !important; 147 } 148 149 .md-checkbox .checkbox-wrapper { 150 align-items: flex-start; 151 } 152 153 .md-checkbox input[type="checkbox"i] { 154 margin-left: -24px !important; 155 opacity: 0.8 !important; 156 margin-top: 7px; 157 border: var(--base-size-1) solid var(--secondary); 158 } 159 160 .md-checkbox input[type=checkbox]:checked { 161 opacity: 0.3 !important; 162 text-decoration: line-through; 163 ; 164 } 165 166 a, summary { 167 text-decoration: none !important; 168 padding: 0 0 var(--base-size-4) 0 !important; 169 color: var(--secondary) !important; 170 font-weight: var(--font-weight-bold) !important; 171 } 172 173 a:hover { 174 border-bottom: var(--base-size-1) dashed var(--secondary) !important; 175 } 176 177 a[data-resource-id] { 178 color: var(--dark-green) !important; 179 /* change the colour of INTERNAL links */ 180 /* https://discourse.joplinapp.org/t/share-your-css/1730/65 */ 181 } 182 183 a[data-resource-id] :hover { 184 border-bottom: var(--base-size-1) dashed var(--primary) !important; 185 } 186 187 /* joplin icon in joplin link */ 188 .resource-icon { 189 background-color: var(--primary) !important; 190 width: 0.75em; 191 height: 0.9em; 192 top: 0.1em; 193 } 194 195 /* 196 ``` 197 code blocks 198 ``` 199 */ 200 pre { 201 font-family: var(--font-mono) !important; 202 } 203 204 /* ```inline code``` */ 205 .inline-code { 206 font-family: var(--font-mono) !important; 207 font-size: var(--base-size-15) !important; 208 padding: .3em .6em !important; 209 border-radius: var(--base-size-4) !important; 210 background-color: #040404 !important; 211 border: none !important; 212 color: var(--aqua) !important; 213 } 214 215 /* ==emphasis== */ 216 mark { 217 padding: 0 var(--base-size-4) !important; 218 background-color: var(--yellow-dark); 219 } 220 221 /*Bold*/ 222 strong { 223 color: var(--green-dark) !important; 224 font-weight: var(--font-weight-bold); 225 } 226 227 nav.table-of-contents>ul { 228 top: 0; 229 right: 0; 230 position: fixed; 231 z-index: var(--z-toc); 232 background: var(--dark-grey); 233 padding: var(--base-size-8); 234 border-radius: var(--base-size-4); 235 max-width: 15%; 236 font-size: calc(var(--font-size)/1.3) !important; 237 max-height: var(--base-size-272); 238 overflow: scroll; 239 opacity: 0.8; 240 } 241 242 nav.table-of-contents ul { 243 list-style-type: none; 244 margin-left: var(--base-size-4); 245 } 246 247 nav.table-of-contents li { 248 white-space: nowrap; 249 overflow: hidden; 250 text-overflow: ellipsis; 251 margin-bottom: 0; 252 } 253 254 nav.table-of-contents li a { 255 padding: 0; 256 color: var(--light-grey) !important; 257 } 258 259 @media all and (min-width: 920px) { 260 nav.table-of-contents>ul { 261 height: 100%; 262 max-height: 100%; 263 } 264 265 #rendered-md { 266 width: 75%; 267 } 268 } 269 270 b-gray, b-green, b-red, b-blue, b-orange, b-pink, b-purple { 271 width: 90%; 272 display: block; 273 margin-left: 20px; 274 padding: 10px; 275 border: 1px solid; 276 border-left: 5px solid; 277 border-radius: 2px; 278 word-wrap: break-word; 279 box-shadow: 3px 3px 7px 0 rgba(255,255,255,0.7) ; 280 color: #000000; 281 } 282 283 284 b-gray { 285 border-color: {{color7}}; 286 background-color: {{color15}}; 287 } 288 289 b-green { 290 border-color: {{color2}}; 291 background-color: {{color10}}; 292 } 293 294 295 b-red { 296 border-color: {{color1}}; 297 background-color: {{color9}}; 298 } 299 300 b-blue { 301 border-color: {{color4}}; 302 background-color: {{color12}}; 303 } 304 305 b-orange { 306 border-color: {{color3}}; 307 background-color: {{color11}}; 308 } 309 310 b-purple { 311 border-color: {{color5}}; 312 background-color: {{color13}}; 313 } 314 315 b-pink { 316 border-color: {{color6}}; 317 background-color: {{color14}}; 318 } 319 /**/ 320 321 /* TESTING BELOW */ 322 /* code mirror */ 323 324 .cm { 325 font-family: var(--font-sans); 326 font-size: var(--font-size); 327 } 328 329 /* background and base color */ 330 .cm-s-material-darker.CodeMirror { 331 background-color: var(--black) !important; 332 color: var(--light-grey) !important 333 } 334 335 /* lists */ 336 .cm-s-material-darker .cm-variable-2 { 337 color: var(--light-grey) !important 338 } 339 340 /* internal links */ 341 .cm-s-material-darker .cm-string { 342 color: var(--primary) !important 343 } 344 345 /* headers */ 346 .cm-header-1, .cm-header-2, .cm-header-3, .cm-header-4 { 347 color: var(--dark-white) !important 348 } 349 350 .cm-variable-2, .cm-meta { 351 color: var(--red-dark) !important; 352 /* changes the font colour for all lists (.cm-meta controls the checkbox square brackets [ ] ) */ 353 } 354 .cm-comment { 355 color: var(--green-dark) !important; 356 /* changes the font colour for code text*/ 357 } 358 .cm-quote { 359 color: var(--purple-dark) !important; 360 /* changes the font colour for quoted text*/ 361 } 362 .cm-image-marker { 363 color: var(--red); 364 /* changes the font colour for the "!" before displayed image links */ 365 font-weight: 900; 366 /* changes the font weight for the "!" before displayed image links */ 367 } 368 .cm-link, .cm-url { 369 /* .cm-link is everything in the square brackets | .cm-url is the url itself in the round brackets */ 370 color: var(--green) !important; 371 /* changes the font colour for links */ 372 text-decoration: none !important; 373 /* removes underlining for links */ 374 } 375 .cm-tag, .cm-attribute { 376 /* HTML - .cm-tag is the HTML tag itself such as "<img>" | .cm-attribute is any HTML tag attributes such as "width" or "src" */ 377 /* the below are NOT applied if the html text is marked as "code" unless it is in a fenced html code block (```HTML) */ 378 color: var(--dark-purple) !important; 379 /* changes the font colour for HTML tags */ 380 font-weight: 500; 381 /* changes the font weight for HTML tags */ 382 } 383 .cm-hr { 384 color: var(--orange-dark) !important; 385 /* changes the font colour for horizontal rule markdown "***" */ 386 font-weight: 900; 387 /* changes the font weight for horizontal rule markdown "***" */ 388 }