├── monospace ├── Inconsolata-Bold.ttf ├── Inconsolata-Regular.ttf └── OFL.txt ├── LICENSE ├── README.md ├── monospace.css └── monospace-dark.css /monospace/Inconsolata-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/typora/typora-monospace-theme/HEAD/monospace/Inconsolata-Bold.ttf -------------------------------------------------------------------------------- /monospace/Inconsolata-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/typora/typora-monospace-theme/HEAD/monospace/Inconsolata-Regular.ttf -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 typora 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Monospace Theme 2 | 3 | This is a experimental theme to check the possibility of css-powered custom theme. 4 | 5 | It is a coder-friendly theme which will display the rendered Markdown close to its un-rendered source code. It will display most Markdown syntax as it is, yet also displays rendered images, tables, table of contents, etc. 6 | 7 | To have better user experience, please enable the option `Display source for simple blocks` from `Preference Panel` -> `Editor` section. 8 | 9 | It contains a light theme `Monospace` and a dark theme `Monospace Dark`. 10 | 11 | ## Monospace 12 | 13 | ![](http://ww3.sinaimg.cn/large/006y8lVagw1f83umfo6ewj31bu18k492.jpg) 14 | 15 | ![](http://ww1.sinaimg.cn/large/006y8lVagw1f83un0678jj31aa170tm3.jpg) 16 | 17 | ![](http://ww2.sinaimg.cn/large/006y8lVagw1f83unb5p80j31bu164dkk.jpg) 18 | 19 | ## Monospace Dark 20 | 21 | ![](http://ww1.sinaimg.cn/large/006y8lVagw1f83unkgrtmj31bu16410y.jpg) 22 | 23 | ![](http://ww4.sinaimg.cn/large/006y8lVagw1f83unr3t7yj31bu164ak2.jpg) 24 | 25 | ![](http://ww3.sinaimg.cn/large/006y8lVagw1f83uo2qoixj31aa14kk4g.jpg) 26 | 27 | ## Install 28 | 29 | Download, and move files under `theme` folder into [Typora's Theme Folder](http:/theme.typora.io/doc/Install-Theme/). 30 | 31 | Or download [monospace.zip](https://github.com/typora/typora-monospace-theme/releases/download/v0.9.19/monospace.zip), and extract contents into "Typora's Theme Folder". -------------------------------------------------------------------------------- /monospace/OFL.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2011, Raph Levien (firstname.lastname@gmail.com), Copyright (c) 2012, Cyreal (cyreal.org) 2 | This Font Software is licensed under the SIL Open Font License, Version 1.1. 3 | This license is copied below, and is also available with a FAQ at: 4 | http://scripts.sil.org/OFL 5 | 6 | 7 | ----------------------------------------------------------- 8 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 9 | ----------------------------------------------------------- 10 | 11 | PREAMBLE 12 | The goals of the Open Font License (OFL) are to stimulate worldwide 13 | development of collaborative font projects, to support the font creation 14 | efforts of academic and linguistic communities, and to provide a free and 15 | open framework in which fonts may be shared and improved in partnership 16 | with others. 17 | 18 | The OFL allows the licensed fonts to be used, studied, modified and 19 | redistributed freely as long as they are not sold by themselves. The 20 | fonts, including any derivative works, can be bundled, embedded, 21 | redistributed and/or sold with any software provided that any reserved 22 | names are not used by derivative works. The fonts and derivatives, 23 | however, cannot be released under any other type of license. The 24 | requirement for fonts to remain under this license does not apply 25 | to any document created using the fonts or their derivatives. 26 | 27 | DEFINITIONS 28 | "Font Software" refers to the set of files released by the Copyright 29 | Holder(s) under this license and clearly marked as such. This may 30 | include source files, build scripts and documentation. 31 | 32 | "Reserved Font Name" refers to any names specified as such after the 33 | copyright statement(s). 34 | 35 | "Original Version" refers to the collection of Font Software components as 36 | distributed by the Copyright Holder(s). 37 | 38 | "Modified Version" refers to any derivative made by adding to, deleting, 39 | or substituting -- in part or in whole -- any of the components of the 40 | Original Version, by changing formats or by porting the Font Software to a 41 | new environment. 42 | 43 | "Author" refers to any designer, engineer, programmer, technical 44 | writer or other person who contributed to the Font Software. 45 | 46 | PERMISSION & CONDITIONS 47 | Permission is hereby granted, free of charge, to any person obtaining 48 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 49 | redistribute, and sell modified and unmodified copies of the Font 50 | Software, subject to the following conditions: 51 | 52 | 1) Neither the Font Software nor any of its individual components, 53 | in Original or Modified Versions, may be sold by itself. 54 | 55 | 2) Original or Modified Versions of the Font Software may be bundled, 56 | redistributed and/or sold with any software, provided that each copy 57 | contains the above copyright notice and this license. These can be 58 | included either as stand-alone text files, human-readable headers or 59 | in the appropriate machine-readable metadata fields within text or 60 | binary files as long as those fields can be easily viewed by the user. 61 | 62 | 3) No Modified Version of the Font Software may use the Reserved Font 63 | Name(s) unless explicit written permission is granted by the corresponding 64 | Copyright Holder. This restriction only applies to the primary font name as 65 | presented to the users. 66 | 67 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 68 | Software shall not be used to promote, endorse or advertise any 69 | Modified Version, except to acknowledge the contribution(s) of the 70 | Copyright Holder(s) and the Author(s) or with their explicit written 71 | permission. 72 | 73 | 5) The Font Software, modified or unmodified, in part or in whole, 74 | must be distributed entirely under this license, and must not be 75 | distributed under any other license. The requirement for fonts to 76 | remain under this license does not apply to any document created 77 | using the Font Software. 78 | 79 | TERMINATION 80 | This license becomes null and void if any of the above conditions are 81 | not met. 82 | 83 | DISCLAIMER 84 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 85 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 86 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 87 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 88 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 89 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 90 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 91 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 92 | OTHER DEALINGS IN THE FONT SOFTWARE. 93 | -------------------------------------------------------------------------------- /monospace.css: -------------------------------------------------------------------------------- 1 | @include-when-export url(https://fonts.loli.net/css?family=Inconsolata:400,700&subset=latin-ext); 2 | /* latin-ext */ 3 | @font-face { 4 | font-family: 'Inconsolata'; 5 | font-style: normal; 6 | font-weight: 400; 7 | src: local('Inconsolata Regular'), url(monospace/Inconsolata-Regular.ttf) format('truetype'); 8 | } 9 | /* latin */ 10 | @font-face { 11 | font-family: 'Inconsolata'; 12 | font-style: normal; 13 | font-weight: 700; 14 | src: local('Inconsolata Bold'), url(monospace/Inconsolata-Bold.ttf) format('truetype'); 15 | } 16 | 17 | :root { 18 | --side-bar-bg-color: #263238; 19 | --active-file-bg-color: rgba(7, 145, 253, 0.57); 20 | --active-file-text-color: white; 21 | --control-text-color: #ddd; 22 | } 23 | 24 | html { 25 | font-size: 16px; 26 | color: #333333; 27 | } 28 | 29 | html, 30 | body { 31 | font-family: 'Inconsolata', monospace; 32 | background: white; 33 | } 34 | 35 | #write { 36 | padding-left: 10ch; 37 | padding-right: 10ch; 38 | } 39 | /** 40 | * --------------------- 41 | * Block Elements 42 | */ 43 | pre.md-meta-block { 44 | font-family: monospace; 45 | color: #585858; 46 | padding: 15px; 47 | background: inherit; 48 | border: 1px grey dashed; 49 | font-size: 0.8rem; 50 | line-height: 1.45; 51 | } 52 | h1, 53 | h2, 54 | h3, 55 | h4, 56 | h5, 57 | h6, 58 | [mdlike='h1'], 59 | [mdlike='h2'], 60 | [mdlike='h3'], 61 | [mdlike='h4'], 62 | [mdlike='h5'], 63 | [mdlike='h6'] { 64 | font-weight: bold; 65 | font-family: "PT Mono", monospace; 66 | color: #6363ac; 67 | } 68 | [mdlike='h1'] > .md-blockmeta, 69 | [mdlike='h2'] > .md-blockmeta, 70 | [mdlike='h3'] > .md-blockmeta, 71 | [mdlike='h4'] > .md-blockmeta, 72 | [mdlike='h5'] > .md-blockmeta, 73 | [mdlike='h6'] > .md-blockmeta { 74 | color: inherit; 75 | font-weight: inherit; 76 | font-style: inherit; 77 | } 78 | h1, 79 | [mdlike='h1'] { 80 | font-size: 2rem; 81 | } 82 | h1:before { 83 | content: "# "; 84 | } 85 | h2, 86 | [mdlike='h2'] { 87 | font-size: 1.6rem; 88 | } 89 | h2:before { 90 | content: "## "; 91 | } 92 | h3, 93 | [mdlike='h3'] { 94 | font-size: 1.3rem; 95 | } 96 | h3:before, 97 | h3.md-focus:before { 98 | content: "### "; 99 | } 100 | h4, 101 | h5, 102 | h6, 103 | [mdlike='h4'], 104 | [mdlike='h5'], 105 | [mdlike='h6'] { 106 | color: #0e5796; 107 | } 108 | h4, 109 | [mdlike='h4'] { 110 | font-size: 1.2rem; 111 | } 112 | h4:before, 113 | h4.md-focus:before { 114 | content: "#### "; 115 | } 116 | h5, 117 | [mdlike='h5'] { 118 | font-size: 1.1rem; 119 | } 120 | h5:before, 121 | h5.md-focus:before { 122 | content: "##### "; 123 | } 124 | h6, 125 | [mdlike='h6'] { 126 | font-size: 1rem; 127 | } 128 | h6:before, 129 | h6.md-focus:before { 130 | content: "####### "; 131 | } 132 | /** override the default style for focused headings */ 133 | h3.md-focus:before, 134 | h4.md-focus:before, 135 | h5.md-focus:before, 136 | h6.md-focus:before { 137 | color: inherit; 138 | border: inherit; 139 | border-radius: inherit; 140 | position: inherit; 141 | left: initial; 142 | float: none; 143 | top: initial; 144 | font-size: inherit; 145 | padding-left: inherit; 146 | padding-right: inherit; 147 | vertical-align: inherit; 148 | font-weight: inherit; 149 | line-height: inherit; 150 | } 151 | 152 | table { 153 | line-height: 1.6rem; 154 | border-collapse: collapse; 155 | border-spacing: 0; 156 | empty-cells: show; 157 | border: 1px solid #cbcbcb; 158 | } 159 | thead { 160 | background-color: #e0e0e0; 161 | color: #000; 162 | text-align: left; 163 | vertical-align: bottom; 164 | } 165 | td, 166 | th { 167 | border-left: 1px solid #cbcbcb; 168 | border-width: 0 0 0 1px; 169 | margin: 0; 170 | overflow: visible; 171 | padding: .5em 1em; 172 | } 173 | .md-toc-item { 174 | position: relative; 175 | } 176 | .md-toc-inner { 177 | width: 100%; 178 | display: inline-block; 179 | } 180 | a.md-toc-inner { 181 | color: grey; 182 | } 183 | .md-toc-h2 .md-toc-inner { 184 | padding-left: 2em; 185 | margin-left: 0; 186 | } 187 | .md-toc-h3 .md-toc-inner { 188 | padding-left: 4em; 189 | margin-left: 0; 190 | } 191 | .md-toc-h4 .md-toc-inner { 192 | padding-left: 6em; 193 | margin-left: 0; 194 | } 195 | .md-toc-h5 .md-toc-inner { 196 | padding-left: 8em; 197 | margin-left: 0; 198 | } 199 | .md-toc-h6 .md-toc-inner { 200 | padding-left: 10em; 201 | margin-left: 0; 202 | } 203 | #write > table { 204 | width: 100%; 205 | } 206 | #write > h1, 207 | #write > [mdlike='h1'] { 208 | margin-left: -2ch; 209 | } 210 | #write > h2, 211 | #write > [mdlike='h2'] { 212 | margin-left: -3ch; 213 | } 214 | #write > h3, 215 | #write > [mdlike='h3'] { 216 | margin-left: -4ch; 217 | } 218 | #write > h4, 219 | #write > [mdlike='h4'] { 220 | margin-left: -5ch; 221 | } 222 | #write > h5, 223 | #write > [mdlike='h5'] { 224 | margin-left: -6ch; 225 | } 226 | #write > h6, 227 | #write > [mdlike='h6'] { 228 | margin-left: -7ch; 229 | } 230 | #write p{ 231 | margin-top: 1rem; 232 | margin-bottom: 1rem; 233 | } 234 | #write h1, 235 | #write h2, 236 | #write h3, 237 | #write h4, 238 | #write h5, 239 | #write h6, 240 | #write [mdlike='h1'], 241 | #write [mdlike='h2'], 242 | #write [mdlike='h3'], 243 | #write [mdlike='h4'], 244 | #write [mdlike='h5'], 245 | #write [mdlike='h6'] { 246 | margin-top: 0.83em; 247 | margin-bottom: 0.83em; 248 | } 249 | @media (min-width: 800px) { 250 | .pin-outline #write { 251 | padding-left: 10ch; 252 | padding-right: 6ch; 253 | } 254 | #write { 255 | padding-left: 12ch; 256 | padding-right: 12ch; 257 | } 258 | #write > h6, 259 | #write > p [mdlike='h6'] { 260 | margin-left: -8ch; 261 | } 262 | } 263 | @media (max-width: 1200px) { 264 | .pin-outline #write { 265 | padding-left: 10ch; 266 | padding-right: 8ch; 267 | } 268 | 269 | .pin-outline #write > h1, 270 | .pin-outline #write > h2, 271 | .pin-outline #write > h3, 272 | .pin-outline #write > h4, 273 | .pin-outline #write > h5, 274 | .pin-outline #write > h6, 275 | .pin-outline #write > p [mdlike='h1'], 276 | .pin-outline #write > p [mdlike='h2'], 277 | .pin-outline #write > p [mdlike='h3'], 278 | .pin-outline #write > p [mdlike='h4'], 279 | .pin-outline #write > p [mdlike='h5'], 280 | .pin-outline #write > p [mdlike='h6'] { 281 | margin-left: 0; 282 | } 283 | } 284 | @media (max-width: 600px) { 285 | .pin-outline #write { 286 | padding-left: 4ch; 287 | padding-right: 4ch; 288 | } 289 | 290 | #write { 291 | padding-left: 4ch; 292 | padding-right: 4ch; 293 | } 294 | #write > h1, 295 | #write > h2, 296 | #write > h3, 297 | #write > h4, 298 | #write > h5, 299 | #write > h6, 300 | #write > [mdlike='h1'], 301 | #write > [mdlike='h2'], 302 | #write > [mdlike='h3'], 303 | #write > [mdlike='h4'], 304 | #write > [mdlike='h5'], 305 | #write > [mdlike='h6'] { 306 | margin-left: 0; 307 | } 308 | } 309 | ul[cid] { 310 | list-style-type: none; 311 | } 312 | ul[cid] li:before { 313 | content: "*"; 314 | margin-left: -3ch; 315 | position: absolute; 316 | color: #438600; 317 | } 318 | ul[data-mark="-"] > li:before { 319 | content: "-"; 320 | } 321 | ul[data-mark="+"] > li:before { 322 | content: "+"; 323 | } 324 | .task-list > li:before { 325 | margin-left: -6ch; 326 | } 327 | ol[cid] { 328 | counter-reset: item; 329 | list-style-type: none; 330 | } 331 | ol[cid] > li:before { 332 | content: counter(item) ". "; 333 | counter-increment: item; 334 | color: #438600; 335 | margin-left: -2ch; 336 | position: absolute; 337 | } 338 | .task-list-item input:before { 339 | content: '[ ]'; 340 | display: inline-block; 341 | margin-left: -2ch; 342 | width: 4ch; 343 | position: absolute; 344 | top: -1px; 345 | vertical-align: middle; 346 | text-align: center; 347 | background-color: white; 348 | color: #438600; 349 | } 350 | .task-list-item input:checked:before { 351 | content: '[x]'; 352 | } 353 | .task-list-item input:checked ~ * { 354 | text-decoration: line-through; 355 | } 356 | blockquote { 357 | background-color: rgba(128, 128, 128, 0.05); 358 | border-top-right-radius: 5px; 359 | border-bottom-right-radius: 5px; 360 | padding: 0 20px; 361 | border-left: 8px solid #979797; 362 | } 363 | hr { 364 | position: relative; 365 | height: 20px; 366 | font-size: 0; 367 | line-height: 0; 368 | overflow: hidden; 369 | border: 0; 370 | margin-bottom: 20px; 371 | } 372 | hr:after { 373 | content: "--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------"; 374 | position: absolute; 375 | top: 0; 376 | left: 0; 377 | font-size: 14px; 378 | line-height: 20px; 379 | width: 100%; 380 | word-wrap: break-word; 381 | } 382 | /** 383 | * Code Fences 384 | */ 385 | .md-fences:not(.md-fences-with-lineon) .cm-s-inner { 386 | padding-left: 8px; 387 | } 388 | .CodeMirror.cm-s-inner { 389 | padding-top: 8px; 390 | border-radius: 3px; 391 | padding-bottom: 16px; 392 | } 393 | 394 | .CodeMirror-gutters { 395 | background: #263238; 396 | color: #537f7e; 397 | border: none; 398 | } 399 | .cm-s-inner { 400 | background-color: #263238; 401 | color: #e9eded; 402 | } 403 | .CodeMirror.cm-s-inner .CodeMirror-guttermarker, 404 | .CodeMirror.cm-s-inner .CodeMirror-guttermarker-subtle, 405 | .CodeMirror.cm-s-inner .CodeMirror-linenumber { 406 | color: #537f7e; 407 | } 408 | .CodeMirror.cm-s-inner .CodeMirror-cursor { 409 | border-left: 1px solid #f8f8f0; 410 | } 411 | .CodeMirror.cm-s-inner div.CodeMirror-selected { 412 | background: rgba(255, 255, 255, 0.15); 413 | } 414 | .CodeMirror.cm-s-inner .CodeMirror-focused div.CodeMirror-selected { 415 | background: rgba(255, 255, 255, 0.1); 416 | } 417 | .CodeMirror.cm-s-inner .CodeMirror-line::selection, 418 | .CodeMirror.cm-s-inner .CodeMirror-line > span::selection, 419 | .CodeMirror.cm-s-inner .CodeMirror-line > span > span::selection { 420 | background: rgba(255, 255, 255, 0.1); 421 | } 422 | .CodeMirror.cm-s-inner .CodeMirror-line::-moz-selection, 423 | .CodeMirror.cm-s-inner .CodeMirror-line > span::-moz-selection, 424 | .CodeMirror.cm-s-inner .CodeMirror-line > span > span::-moz-selection { 425 | background: rgba(255, 255, 255, 0.1); 426 | } 427 | .CodeMirror.cm-s-inner .CodeMirror-activeline-background { 428 | background: rgba(0, 0, 0, 0); 429 | } 430 | .CodeMirror.cm-s-inner .cm-keyword { 431 | color: #c792ea; 432 | } 433 | .CodeMirror.cm-s-inner .cm-operator { 434 | color: #e9eded; 435 | } 436 | .CodeMirror.cm-s-inner .cm-variable-2 { 437 | color: #80CBC4; 438 | } 439 | .CodeMirror.cm-s-inner .cm-variable-3 { 440 | color: #82B1FF; 441 | } 442 | .CodeMirror.cm-s-inner .cm-builtin { 443 | color: #DECB6B; 444 | } 445 | .CodeMirror.cm-s-inner .cm-atom { 446 | color: #F77669; 447 | } 448 | .CodeMirror.cm-s-inner .cm-number { 449 | color: #F77669; 450 | } 451 | .CodeMirror.cm-s-inner .cm-def { 452 | color: #e9eded; 453 | } 454 | .CodeMirror.cm-s-inner .cm-string { 455 | color: #C3E88D; 456 | } 457 | .CodeMirror.cm-s-inner .cm-string-2 { 458 | color: #80CBC4; 459 | } 460 | .CodeMirror.cm-s-inner .cm-comment { 461 | color: #546E7A; 462 | } 463 | .CodeMirror.cm-s-inner .cm-variable { 464 | color: #82B1FF; 465 | } 466 | .CodeMirror.cm-s-inner .cm-tag { 467 | color: #80CBC4; 468 | } 469 | .CodeMirror.cm-s-inner .cm-meta { 470 | color: #80CBC4; 471 | } 472 | .CodeMirror.cm-s-inner .cm-attribute { 473 | color: #FFCB6B; 474 | } 475 | .CodeMirror.cm-s-inner .cm-property { 476 | color: #80CBAE; 477 | } 478 | .CodeMirror.cm-s-inner .cm-qualifier { 479 | color: #DECB6B; 480 | } 481 | .CodeMirror.cm-s-inner .cm-variable-3 { 482 | color: #DECB6B; 483 | } 484 | .CodeMirror.cm-s-inner .cm-tag { 485 | color: #ff5370; 486 | } 487 | .CodeMirror.cm-s-inner .cm-header, 488 | .CodeMirror.cm-s-inner .cm-header { 489 | color: #b6e6ff; 490 | } 491 | .CodeMirror.cm-s-inner .cm-error { 492 | color: #ffffff; 493 | background-color: #EC5F67; 494 | } 495 | .CodeMirror.cm-s-inner .cm-link { 496 | color: #B2B2E0; 497 | } 498 | .cm-s-inner .CodeMirror-matchingbracket { 499 | text-decoration: underline; 500 | color: white !important; 501 | } 502 | /**apply to code fences with plan text**/ 503 | .md-fences { 504 | background: #263238; 505 | color: #e9eded; 506 | border: none; 507 | overflow-x: visible; 508 | white-space: pre; 509 | border-radius: 3px; 510 | padding-top: 4px; 511 | padding-bottom: 4px; 512 | } 513 | .md-fences .CodeMirror.cm-s-inner:before { 514 | content: "``` " attr(lang); 515 | } 516 | .md-fences .CodeMirror-scroll:after { 517 | content: " "; 518 | } 519 | .md-fences .CodeMirror.cm-s-inner:after { 520 | content: "```"; 521 | bottom: 0; 522 | z-index: 99; 523 | } 524 | .md-fences .code-tooltip { 525 | background-color: #263238; 526 | } 527 | /** 528 | * Inline Elements 529 | */ 530 | code { 531 | color: #949415; 532 | font-size: 0.9em; 533 | } 534 | mark { 535 | background: bisque; 536 | } 537 | strong { 538 | color: #b5302e; 539 | } 540 | em { 541 | color: #400469; 542 | } 543 | a { 544 | color: #005dad; 545 | } 546 | #write a:hover { 547 | background-color: #2a6496; 548 | color: white; 549 | text-decoration: none; 550 | } 551 | .md-meta, 552 | .md-content { 553 | display: inline; 554 | } 555 | #typora-source .cm-header { 556 | font-weight: bold; 557 | font-family: "PT Mono", monospace; 558 | color: #6363ac; 559 | font-size: 1rem; 560 | line-height: 1rem; 561 | } 562 | #typora-source .cm-strong { 563 | color: #b5302e; 564 | } 565 | #typora-source .cm-em { 566 | color: #400469; 567 | } 568 | #typora-source .cm-link { 569 | color: #005dad; 570 | } 571 | #typora-source .cm-string { 572 | color: #5b808d; 573 | } 574 | #typora-source .cm-comment { 575 | color: #949415; 576 | } 577 | /* 578 | * Electron UI 579 | */ 580 | .outline-item:hover { 581 | background-color: #333; 582 | color: white; 583 | border-color: #333; 584 | } 585 | 586 | #typora-sidebar { 587 | color: #ddd; 588 | } 589 | 590 | .html-for-mac #typora-sidebar { 591 | border-right: none; 592 | } 593 | 594 | content { 595 | background: var(--bg-color); 596 | } 597 | 598 | .sidebar-footer { 599 | background: var(--side-bar-bg-color); 600 | border-top: 1px #555 solid; 601 | } 602 | 603 | .file-list-item, 604 | .sidebar-tabs { 605 | border-top: none; 606 | border-bottom: none; 607 | } 608 | 609 | .file-node-content:hover { 610 | color: white; 611 | } 612 | 613 | .md-task-list-item>input { 614 | margin-top: calc(1rem - 12px); 615 | } 616 | 617 | #typora-quick-open { 618 | color: #eee; 619 | } 620 | -------------------------------------------------------------------------------- /monospace-dark.css: -------------------------------------------------------------------------------- 1 | @include-when-export url(https://fonts.loli.net/css?family=Inconsolata:400,700&subset=latin-ext); 2 | 3 | :root { 4 | --bg-color: #222; 5 | --side-bar-bg-color: #5F5F5F; 6 | --active-file-text-color: #222; 7 | --text-color: #ebebeb; 8 | --window-border: 1px solid #606060; 9 | --active-file-bg-color: rgba(219, 219, 253, 0.4); 10 | --active-file-text-color: white; 11 | --control-text-color: #ccc; 12 | --rawblock-edit-panel-bd: #263238; 13 | } 14 | 15 | html, body { 16 | font-size: 16px; 17 | color: #ebebeb; 18 | background: #222; 19 | background: var(--bg-color); 20 | font-family: 'Inconsolata', monospace; 21 | } 22 | 23 | /* latin-ext */ 24 | @font-face { 25 | font-family: 'Inconsolata'; 26 | font-style: normal; 27 | font-weight: 400; 28 | src: local('Inconsolata Regular'), url(monospace/Inconsolata-Regular.ttf) format('truetype'); 29 | } 30 | /* latin */ 31 | @font-face { 32 | font-family: 'Inconsolata'; 33 | font-style: normal; 34 | font-weight: 700; 35 | src: local('Inconsolata Bold'), url(monospace/Inconsolata-Bold.ttf) format('truetype'); 36 | } 37 | 38 | html.mac-supports-vibrant, 39 | .mac-supports-vibrant body { 40 | 41 | } 42 | 43 | #write { 44 | padding-left: 10ch; 45 | padding-right: 10ch; 46 | } 47 | /** 48 | * --------------------- 49 | * Block Elements 50 | */ 51 | pre.md-meta-block { 52 | font-family: monospace; 53 | color: #DDD; 54 | padding: 15px; 55 | background: inherit; 56 | border: 1px grey dashed; 57 | font-size: 0.8rem; 58 | line-height: 1.45; 59 | } 60 | h1, 61 | h2, 62 | h3, 63 | h4, 64 | h5, 65 | h6, 66 | [mdlike='h1'], 67 | [mdlike='h2'], 68 | [mdlike='h3'], 69 | [mdlike='h4'], 70 | [mdlike='h5'], 71 | [mdlike='h6'] { 72 | font-weight: bold; 73 | font-family: "PT Mono", monospace; 74 | color: #dbdbfd; 75 | } 76 | [mdlike='h1'] > .md-blockmeta, 77 | [mdlike='h2'] > .md-blockmeta, 78 | [mdlike='h3'] > .md-blockmeta, 79 | [mdlike='h4'] > .md-blockmeta, 80 | [mdlike='h5'] > .md-blockmeta, 81 | [mdlike='h6'] > .md-blockmeta { 82 | color: inherit; 83 | font-weight: inherit; 84 | font-style: inherit; 85 | } 86 | h1, 87 | [mdlike='h1'] { 88 | font-size: 2rem; 89 | } 90 | h1:before { 91 | content: "# "; 92 | } 93 | h2, 94 | [mdlike='h2'] { 95 | font-size: 1.6rem; 96 | } 97 | h2:before { 98 | content: "## "; 99 | } 100 | h3, 101 | [mdlike='h3'] { 102 | font-size: 1.3rem; 103 | } 104 | h3:before, 105 | h3.md-focus:before { 106 | content: "### "; 107 | } 108 | h4, 109 | h5, 110 | h6, 111 | [mdlike='h4'], 112 | [mdlike='h5'], 113 | [mdlike='h6'] { 114 | color: #549ad8; 115 | } 116 | h4, 117 | [mdlike='h4'] { 118 | font-size: 1.2rem; 119 | } 120 | h4:before, 121 | h4.md-focus:before { 122 | content: "#### "; 123 | } 124 | h5, 125 | [mdlike='h5'] { 126 | font-size: 1.1rem; 127 | } 128 | h5:before, 129 | h5.md-focus:before { 130 | content: "##### "; 131 | } 132 | h6, 133 | [mdlike='h6'] { 134 | font-size: 1rem; 135 | } 136 | h6:before, 137 | h6.md-focus:before { 138 | content: "####### "; 139 | } 140 | /** override the default style for focused headings */ 141 | h3.md-focus:before, 142 | h4.md-focus:before, 143 | h5.md-focus:before, 144 | h6.md-focus:before { 145 | color: inherit; 146 | border: inherit; 147 | border-radius: inherit; 148 | position: inherit; 149 | left: initial; 150 | float: none; 151 | top: initial; 152 | font-size: inherit; 153 | padding-left: inherit; 154 | padding-right: inherit; 155 | vertical-align: inherit; 156 | font-weight: inherit; 157 | line-height: inherit; 158 | } 159 | table { 160 | line-height: 1.6rem; 161 | border-collapse: collapse; 162 | border-spacing: 0; 163 | empty-cells: show; 164 | border: 1px solid #cbcbcb; 165 | } 166 | thead { 167 | background-color: #263238; 168 | color: #f5f5f5; 169 | text-align: left; 170 | vertical-align: bottom; 171 | } 172 | td, 173 | th { 174 | border-left: 1px solid #cbcbcb; 175 | border-width: 0 0 0 1px; 176 | margin: 0; 177 | overflow: visible; 178 | padding: .5em 1em; 179 | } 180 | .md-toc-item { 181 | position: relative; 182 | } 183 | .md-toc-inner { 184 | width: 100%; 185 | display: inline-block; 186 | } 187 | a.md-toc-inner { 188 | color: #CCC; 189 | } 190 | .md-toc-h2 .md-toc-inner { 191 | padding-left: 2em; 192 | margin-left: 0; 193 | } 194 | .md-toc-h3 .md-toc-inner { 195 | padding-left: 4em; 196 | margin-left: 0; 197 | } 198 | .md-toc-h4 .md-toc-inner { 199 | padding-left: 6em; 200 | margin-left: 0; 201 | } 202 | .md-toc-h5 .md-toc-inner { 203 | padding-left: 8em; 204 | margin-left: 0; 205 | } 206 | .md-toc-h6 .md-toc-inner { 207 | padding-left: 10em; 208 | margin-left: 0; 209 | } 210 | #write > table { 211 | width: 100%; 212 | } 213 | #write > h1, 214 | #write > [mdlike='h1'] { 215 | margin-left: -2ch; 216 | } 217 | #write > h2, 218 | #write > [mdlike='h2'] { 219 | margin-left: -3ch; 220 | } 221 | #write > h3, 222 | #write > [mdlike='h3'] { 223 | margin-left: -4ch; 224 | } 225 | #write > h4, 226 | #write > [mdlike='h4'] { 227 | margin-left: -5ch; 228 | } 229 | #write > h5, 230 | #write > [mdlike='h5'] { 231 | margin-left: -6ch; 232 | } 233 | #write > h6, 234 | #write > [mdlike='h6'] { 235 | margin-left: -7ch; 236 | } 237 | #write p { 238 | margin-top: 1rem; 239 | margin-bottom: 1rem; 240 | } 241 | #write h1, 242 | #write h2, 243 | #write h3, 244 | #write h4, 245 | #write h5, 246 | #write h6, 247 | #write [mdlike='h1'], 248 | #write [mdlike='h2'], 249 | #write [mdlike='h3'], 250 | #write [mdlike='h4'], 251 | #write [mdlike='h5'], 252 | #write [mdlike='h6'] { 253 | margin-top: 0.83em; 254 | margin-bottom: 0.83em; 255 | } 256 | @media (min-width: 800px) { 257 | .pin-outline #write { 258 | padding-left: 10ch; 259 | padding-right: 6ch; 260 | } 261 | 262 | #write { 263 | padding-left: 12ch; 264 | padding-right: 12ch; 265 | } 266 | #write > h6, 267 | #write > p [mdlike='h6'] { 268 | margin-left: -8ch; 269 | } 270 | } 271 | @media (max-width: 1200px) { 272 | .pin-outline #write { 273 | padding-left: 10ch; 274 | padding-right: 8ch; 275 | } 276 | 277 | .pin-outline #write > h1, 278 | .pin-outline #write > h2, 279 | .pin-outline #write > h3, 280 | .pin-outline #write > h4, 281 | .pin-outline #write > h5, 282 | .pin-outline #write > h6, 283 | .pin-outline #write > p [mdlike='h1'], 284 | .pin-outline #write > p [mdlike='h2'], 285 | .pin-outline #write > p [mdlike='h3'], 286 | .pin-outline #write > p [mdlike='h4'], 287 | .pin-outline #write > p [mdlike='h5'], 288 | .pin-outline #write > p [mdlike='h6'] { 289 | margin-left: 0; 290 | } 291 | } 292 | @media (max-width: 600px) { 293 | .pin-outline #write { 294 | padding-left: 4ch; 295 | padding-right: 4ch; 296 | } 297 | 298 | #write { 299 | padding-left: 4ch; 300 | padding-right: 4ch; 301 | } 302 | #write > h1, 303 | #write > h2, 304 | #write > h3, 305 | #write > h4, 306 | #write > h5, 307 | #write > h6, 308 | #write > p [mdlike='h1'], 309 | #write > p [mdlike='h2'], 310 | #write > p [mdlike='h3'], 311 | #write > p [mdlike='h4'], 312 | #write > p [mdlike='h5'], 313 | #write > p [mdlike='h6'] { 314 | margin-left: 0; 315 | } 316 | } 317 | ul[cid] { 318 | list-style-type: none; 319 | } 320 | ul[cid] li:before { 321 | content: "*"; 322 | margin-left: -3ch; 323 | position: absolute; 324 | color: #4fac4f; 325 | } 326 | ul[data-mark="-"] > li:before { 327 | content: "-"; 328 | } 329 | ul[data-mark="+"] > li:before { 330 | content: "+"; 331 | } 332 | .task-list > li:before { 333 | margin-left: -6ch; 334 | } 335 | ol[cid] { 336 | counter-reset: item; 337 | list-style-type: none; 338 | } 339 | ol[cid] > li:before { 340 | content: counter(item) ". "; 341 | counter-increment: item; 342 | color: #4fac4f; 343 | margin-left: -2ch; 344 | position: absolute; 345 | } 346 | .task-list-item input:before { 347 | content: '[ ]'; 348 | display: inline-block; 349 | margin-left: -2ch; 350 | width: 4ch; 351 | position: absolute; 352 | top: -1px; 353 | vertical-align: middle; 354 | text-align: center; 355 | background-color: #222; 356 | color: #4fac4f; 357 | } 358 | .task-list-item input:checked:before { 359 | content: '[x]'; 360 | } 361 | .task-list-item input:checked ~ * { 362 | text-decoration: line-through; 363 | } 364 | blockquote { 365 | background-color: rgba(128, 128, 128, 0.05); 366 | border-top-right-radius: 5px; 367 | border-bottom-right-radius: 5px; 368 | padding: 0 20px; 369 | border-left: 8px solid #979797; 370 | } 371 | hr { 372 | position: relative; 373 | height: 20px; 374 | font-size: 0; 375 | line-height: 0; 376 | overflow: hidden; 377 | border: 0; 378 | margin-bottom: 20px; 379 | } 380 | hr:after { 381 | content: "--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------"; 382 | position: absolute; 383 | top: 0; 384 | left: 0; 385 | font-size: 14px; 386 | line-height: 20px; 387 | width: 100%; 388 | word-wrap: break-word; 389 | } 390 | /** 391 | * Code Fences 392 | */ 393 | .md-fences:not(.md-fences-with-lineon) .cm-s-inner { 394 | padding-left: 8px; 395 | } 396 | .CodeMirror.cm-s-inner { 397 | padding-top: 8px; 398 | border-radius: 3px; 399 | padding-bottom: 16px; 400 | } 401 | .CodeMirror.cm-s-inner .CodeMirror-gutters { 402 | background: #263238; 403 | color: #537f7e; 404 | border: none; 405 | } 406 | .CodeMirror .CodeMirror-guttermarker, 407 | .CodeMirror.cm-s-inner .CodeMirror-guttermarker, 408 | .CodeMirror .CodeMirror-guttermarker-subtle, 409 | .CodeMirror.cm-s-inner .CodeMirror-guttermarker-subtle, 410 | .CodeMirror .CodeMirror-linenumber, 411 | .CodeMirror.cm-s-inner .CodeMirror-linenumber { 412 | color: #537f7e; 413 | } 414 | .CodeMirror .CodeMirror-cursor, 415 | .CodeMirror.cm-s-inner .CodeMirror-cursor { 416 | border-left: 1px solid #f8f8f0; 417 | } 418 | .CodeMirror div.CodeMirror-selected, 419 | .CodeMirror.cm-s-inner div.CodeMirror-selected { 420 | background: rgba(255, 255, 255, 0.15); 421 | } 422 | .CodeMirror .CodeMirror-focused div.CodeMirror-selected, 423 | .CodeMirror.cm-s-inner .CodeMirror-focused div.CodeMirror-selected { 424 | background: rgba(255, 255, 255, 0.1); 425 | } 426 | .CodeMirror .CodeMirror-line::selection, 427 | .CodeMirror.cm-s-inner .CodeMirror-line::selection, 428 | .CodeMirror .CodeMirror-line > span::selection, 429 | .CodeMirror.cm-s-inner .CodeMirror-line > span::selection, 430 | .CodeMirror .CodeMirror-line > span > span::selection, 431 | .CodeMirror.cm-s-inner .CodeMirror-line > span > span::selection { 432 | background: rgba(255, 255, 255, 0.1); 433 | } 434 | .CodeMirror .CodeMirror-line::-moz-selection, 435 | .CodeMirror.cm-s-inner .CodeMirror-line::-moz-selection, 436 | .CodeMirror .CodeMirror-line > span::-moz-selection, 437 | .CodeMirror.cm-s-inner .CodeMirror-line > span::-moz-selection, 438 | .CodeMirror .CodeMirror-line > span > span::-moz-selection, 439 | .CodeMirror.cm-s-inner .CodeMirror-line > span > span::-moz-selection { 440 | background: rgba(255, 255, 255, 0.1); 441 | } 442 | .CodeMirror .CodeMirror-activeline-background, 443 | .CodeMirror.cm-s-inner .CodeMirror-activeline-background { 444 | background: rgba(0, 0, 0, 0); 445 | } 446 | .CodeMirror .cm-keyword, 447 | .CodeMirror.cm-s-inner .cm-keyword { 448 | color: #c792ea; 449 | } 450 | .CodeMirror .cm-operator, 451 | .CodeMirror.cm-s-inner .cm-operator { 452 | color: #e9eded; 453 | } 454 | .CodeMirror .cm-variable-2, 455 | .CodeMirror.cm-s-inner .cm-variable-2 { 456 | color: #80CBC4; 457 | } 458 | .CodeMirror .cm-variable-3, 459 | .CodeMirror.cm-s-inner .cm-variable-3 { 460 | color: #82B1FF; 461 | } 462 | .CodeMirror .cm-builtin, 463 | .CodeMirror.cm-s-inner .cm-builtin { 464 | color: #DECB6B; 465 | } 466 | .CodeMirror .cm-atom, 467 | .CodeMirror.cm-s-inner .cm-atom { 468 | color: #ceb6b8; 469 | } 470 | .CodeMirror .cm-number, 471 | .CodeMirror.cm-s-inner .cm-number { 472 | color: #ceb6b8; 473 | } 474 | .CodeMirror .cm-def, 475 | .CodeMirror.cm-s-inner .cm-def { 476 | color: #e9eded; 477 | } 478 | .CodeMirror .cm-string, 479 | .CodeMirror.cm-s-inner .cm-string { 480 | color: #C3E88D; 481 | } 482 | .CodeMirror .cm-string-2, 483 | .CodeMirror.cm-s-inner .cm-string-2 { 484 | color: #80CBC4; 485 | } 486 | .CodeMirror .cm-comment, 487 | .CodeMirror.cm-s-inner .cm-comment { 488 | color: #546E7A; 489 | } 490 | .CodeMirror .cm-variable, 491 | .CodeMirror.cm-s-inner .cm-variable { 492 | color: #ebebeb; 493 | } 494 | .CodeMirror .cm-tag, 495 | .CodeMirror.cm-s-inner .cm-tag { 496 | color: #f76764; 497 | } 498 | .CodeMirror .cm-meta, 499 | .CodeMirror.cm-s-inner .cm-meta { 500 | color: #DDD; 501 | } 502 | .CodeMirror .cm-attribute, 503 | .CodeMirror.cm-s-inner .cm-attribute { 504 | color: #8888fd; 505 | } 506 | .CodeMirror .cm-property, 507 | .CodeMirror.cm-s-inner .cm-property { 508 | color: #ebebeb; 509 | } 510 | .CodeMirror .cm-qualifier, 511 | .CodeMirror.cm-s-inner .cm-qualifier { 512 | color: #DECB6B; 513 | } 514 | .CodeMirror .cm-variable-3, 515 | .CodeMirror.cm-s-inner .cm-variable-3 { 516 | color: #DECB6B; 517 | } 518 | .CodeMirror .cm-tag, 519 | .CodeMirror.cm-s-inner .cm-tag { 520 | color: #ff5370; 521 | } 522 | .CodeMirror .cm-header, 523 | .CodeMirror.cm-s-inner .cm-header, 524 | .CodeMirror .cm-header, 525 | .CodeMirror.cm-s-inner .cm-header { 526 | color: #b6e6ff; 527 | } 528 | .CodeMirror .cm-error, 529 | .CodeMirror.cm-s-inner .cm-error { 530 | color: #ffffff; 531 | background-color: #EC5F67; 532 | } 533 | .CodeMirror .cm-link, 534 | .CodeMirror.cm-s-inner .cm-link { 535 | color: #B2B2E0; 536 | } 537 | .cm-s-inner { 538 | background-color: #263238; 539 | color: #e9eded; 540 | } 541 | .cm-s-inner .CodeMirror-matchingbracket { 542 | text-decoration: underline; 543 | color: white !important; 544 | } 545 | /**apply to code fences with plan text**/ 546 | .md-fences { 547 | background: #263238; 548 | color: #e9eded; 549 | border: none; 550 | overflow-x: visible; 551 | white-space: pre; 552 | border-radius: 3px; 553 | padding-top: 4px; 554 | padding-bottom: 4px; 555 | } 556 | .md-fences .CodeMirror.cm-s-inner:before { 557 | content: "``` " attr(lang); 558 | } 559 | .md-fences .CodeMirror-scroll:after { 560 | content: " "; 561 | } 562 | .md-fences .CodeMirror.cm-s-inner:after { 563 | content: "```"; 564 | bottom: 0; 565 | z-index: 99; 566 | } 567 | .md-fences .code-tooltip { 568 | background-color: #263238; 569 | } 570 | /** 571 | * Inline Elements 572 | */ 573 | code { 574 | color: #caca16; 575 | font-size: 0.9em; 576 | } 577 | mark { 578 | background: bisque; 579 | } 580 | strong { 581 | color: #ffffc5; 582 | } 583 | em { 584 | color: #c885f5; 585 | } 586 | a { 587 | color: #8ac9ff; 588 | } 589 | #write a:hover { 590 | background-color: #2a6496; 591 | color: white; 592 | text-decoration: none; 593 | } 594 | .md-meta, 595 | .md-content { 596 | display: inline; 597 | } 598 | #typora-source .cm-header { 599 | font-weight: bold; 600 | font-family: "PT Mono", monospace; 601 | color: #dbdbfd; 602 | font-size: 1rem; 603 | line-height: 1rem; 604 | } 605 | #typora-source .cm-strong { 606 | color: #ffffc5; 607 | } 608 | #typora-source .cm-em { 609 | color: #c885f5; 610 | } 611 | #typora-source .cm-link { 612 | color: #8ac9ff; 613 | } 614 | #typora-source .cm-string { 615 | color: #5b808d; 616 | } 617 | #typora-source .cm-comment { 618 | color: #caca16; 619 | } 620 | /* 621 | * Electron UI 622 | */ 623 | .outline-item:hover { 624 | background-color: #333; 625 | color: white; 626 | border-color: #333; 627 | } 628 | #write div.md-toc-tooltip { 629 | background-color: #222; 630 | } 631 | .btn, 632 | .btn .btn-default { 633 | background: transparent; 634 | color: #b8bfc6; 635 | } 636 | .md-table-edit { 637 | border-top: 1px solid gray; 638 | background-color: #363B40; 639 | } 640 | .popover-title { 641 | background: transparent; 642 | } 643 | .context-menu { 644 | border-radius: 0; 645 | } 646 | .context-menu.dropdown-menu > li > a:hover, 647 | .context-menu.dropdown-menu > li > a:focus { 648 | background-color: inherit; 649 | } 650 | .context-menu.dropdown-menu .divider { 651 | background-color: #777777; 652 | } 653 | .btn { 654 | color: #fff; 655 | letter-spacing: 1px; 656 | text-decoration: none; 657 | white-space: nowrap; 658 | background-color: #444449; 659 | border-radius: 5px; 660 | cursor: pointer; 661 | box-sizing: border-box; 662 | } 663 | .btn:hover, 664 | .btn:focus, 665 | #footer-word-count:hover, 666 | .show-word-count #footer-word-count, 667 | .mouse-entered .footer-btn:hover { 668 | color: #fff; 669 | border-color: #777; 670 | background-color: #777; 671 | outline: 0; 672 | } 673 | #outline-btn, 674 | #outline-btn:hover .ion-android-radio-button-on { 675 | color: white; 676 | } 677 | .btn.btn-primary { 678 | color: #FFF; 679 | background-color: #777; 680 | border-color: #777; 681 | } 682 | .btn.btn-primary:hover { 683 | color: #FFF; 684 | background-color: #428bca; 685 | border-color: #428bca; 686 | } 687 | .mouse-entered #top-titlebar .toolbar-icon.btn:hover { 688 | background-color: #777777; 689 | color: #f5f5f5; 690 | } 691 | #md-searchpanel, 692 | #md-notification { 693 | left: 0; 694 | } 695 | #md-searchpanel, 696 | #md-notification, 697 | .on-search-panel-open header, 698 | .modal-content, 699 | .popover, 700 | .dropdown-menu, 701 | .megamenu-menu, 702 | #outline-dropmenu, 703 | .typora-node #outline-dropmenu { 704 | background-color: #42464A; 705 | } 706 | .popover.bottom > .arrow:after { 707 | border-bottom-color: #42464A; 708 | } 709 | #md-notification { 710 | color: #ddd; 711 | } 712 | .typora-node #outline-dropmenu { 713 | border-right: 1px solid #555; 714 | } 715 | .info-panel-tab.active, 716 | .info-panel-tab.active:hover, 717 | .info-panel-tab:hover { 718 | color: #ddd; 719 | } 720 | .menu-style-btn.active, 721 | .context-menu.dropdown-menu > .active > a, 722 | .context-menu.dropdown-menu > li > a:hover { 723 | background-color: #777777; 724 | color: white; 725 | } 726 | .form-control:focus { 727 | color: #999; 728 | } 729 | .input-group-addon { 730 | padding-right: 16px; 731 | } 732 | input, 733 | input.form-control { 734 | border-radius: 0; 735 | background-color: transparent; 736 | border: 1px solid #ccc; 737 | color: inherit; 738 | } 739 | .dropdown-menu .menu-item-container a.menu-style-btn:not(.menu-style-btn-2width) { 740 | width: calc(25% - 2.5px); 741 | } 742 | #w-unpin { 743 | color: #222; 744 | } 745 | .dropdown-menu .divider { 746 | background-color: #999; 747 | } 748 | #footer-word-count-info { 749 | bottom: 28px; 750 | } 751 | #megamenu-content, 752 | .megamenu-opened header { 753 | background-color: #222; 754 | background: #222; 755 | } 756 | .md-expand.md-image > .md-meta { 757 | background-color: rgba(219, 219, 219, 0.86); 758 | } 759 | @media (min-width: 1000px) { 760 | .ty-footer { 761 | background-color: inherit; 762 | } 763 | } 764 | 765 | .md-image>.md-meta { 766 | color: #b5adcd; 767 | background-color: rgba(190, 190, 190, 0.37); 768 | } 769 | 770 | .md-expand.md-image > .md-meta { 771 | color: #5f5b6c; 772 | } 773 | 774 | #typora-sidebar { 775 | background: transparent; 776 | } 777 | 778 | .html-for-mac #typora-sidebar { 779 | border-right: none; 780 | } 781 | 782 | content, 783 | titlebar { 784 | background: var(--bg-color); 785 | } 786 | 787 | .sidebar-footer { 788 | background: #222; 789 | border-top: 1px transparent solid; 790 | } 791 | 792 | .file-list-item, 793 | .sidebar-tabs { 794 | border-top: none; 795 | border-bottom: none; 796 | } 797 | 798 | .ty-side-sort-btn.active { 799 | background: var(--bg-color); 800 | } 801 | 802 | .file-node-content:hover { 803 | color: white; 804 | } 805 | 806 | .md-task-list-item>input { 807 | margin-top: calc(1rem - 12px); 808 | } 809 | --------------------------------------------------------------------------------