joplin-userstyle.css (9094B)
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: "Work Sans"; 48 --font-sans: "Work Sans"; 49 --font-mono: "Cascadia 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 }}