├── README.md ├── design ├── Haru.pptx └── haru.png ├── haru-dark.css ├── haru.css └── haru ├── Cascadia-Code-Regular-2.ttf ├── GlowSansSC-Normal-Book.woff2 ├── Open-Sans-2.ttf ├── RobotoSlab-Regular-2.ttf ├── codeblock.dark.css ├── mermaid.dark.css └── sourcemode.dark.css /README.md: -------------------------------------------------------------------------------- 1 | --- 2 | layout: theme 3 | title: Haru 4 | category: theme 5 | homepage: https://github.com/LSTM-Kirigaya/typora-haru-theme 6 | download: https://github.com/LSTM-Kirigaya/typora-haru-theme/releases/download/typora/haru.zip 7 | built-in: false 8 | author: 锦恢 9 | thumbnail: haru.png 10 | typora-root-url: ../../ 11 | typora-copy-images-to: ../../media/theme/haru 12 | --- 13 | 14 | > Designed and tested on Windows11 & Ubuntu18.04. Not fully tested, but should work for MacOS. 15 | 16 | Some bugs have been fixed. Thanks for [hongyun-robot](https://github.com/hongyun-robot) and [LILKOTYO](https://github.com/LILKOTYO)! 17 | 18 | # Haru 19 | 20 | ## Introduction 21 | 22 | `Haru` is a light style theme for Typora. I hope it can bring you inspiration, elegance and peaceful mind. 23 | 24 | ![](https://raw.githubusercontent.com/LSTM-Kirigaya/KImage/main/Img/haru.png) 25 | 26 | 27 | Dark Side (HaruDark) is currently supported: 28 | 29 | ![](https://pic3.zhimg.com/v2-d9f4c37e1655dec2e98f1352b89d668e_r.jpg) 30 | 31 | --- 32 | 33 | ## Screenshot 34 | 35 | ### Basic 36 | 37 | ![](https://raw.githubusercontent.com/LSTM-Kirigaya/KImage/main/Img/haru1.png) 38 | 39 | ### Example 40 | 41 | ![](https://raw.githubusercontent.com/LSTM-Kirigaya/KImage/main/Img/haru2.png) 42 | 43 | ### Typora Menu 44 | 45 | ![](https://raw.githubusercontent.com/LSTM-Kirigaya/KImage/main/Img/haru3.png) 46 | 47 | ### Exit Dialog 48 | 49 | ![](https://raw.githubusercontent.com/LSTM-Kirigaya/KImage/main/Img/haru4.png) 50 | 51 | --- 52 | 53 | ## Feature 54 | 55 | ### Round corner design 56 | 57 | Almost every element or container in haru is designed as round corner, including `img`, `iframe`, word count labe and even some input widget embedded in Typora. 58 | 59 | ### Table without border 60 | 61 | Table in haru doesn't have border and cell will be highlighted on any hover. 62 | 63 | ![](https://raw.githubusercontent.com/LSTM-Kirigaya/KImage/main/Img/haru6.png) 64 | 65 | 66 | 67 | ### Title + Blockquote? 68 | 69 | I combine title and blockquote to make extra information: 70 | 71 | ```markdown 72 | > # In Haru, you can use `>` + `#` to create Tips block 73 | 74 | > ## `>` + `##` = warning block 75 | 76 | > ### `>` + `###` = error block 77 | 78 | > #### `>` + `####` = remind block 79 | ``` 80 | 81 | rendered result: 82 | 83 | ![](https://raw.githubusercontent.com/LSTM-Kirigaya/KImage/main/Img/haru5.png) 84 | 85 | --- 86 | 87 | ## Install 88 | 89 | 1. Download `haru.zip` from Typora Gallery or my github [release](https://github.com/LSTM-Kirigaya/typora-haru-theme/releases/tag/typora) 90 | 2. Typora Menu `->` Themes `->` Open Theme Folder 91 | 3. Unzip `haru.zip` into the folder 92 | 4. Restart Typora 93 | 5. Select the Haru theme from the **Themes menu** in Typora 94 | 6. Enjoy a nice day :coffee: 95 | 96 | --- 97 | 98 | ## Last but not least 99 | 100 | - Actually, many ideas in `haru.css` are copied from my own website [汇尘轩](https://xn--lbun88i.studio/) directly, which contains an online markdown render. 101 | - The open source html2pdf tools almost drive me mad :anger: , so I decide to go back to Typora and transfer the style I designed for my website to Typora, in order to enjoy the peace and inspiration which I have designed for myself :smile: 102 | - Some ideas are inspired by typora themes listed below: 103 | - [see-yue](https://github.com/jinghu-moon/typora-see-yue-theme) 104 | - [mint](https://github.com/Y1chenYao/typora-mint-theme) 105 | - [autumnus](https://github.com/Soanguy/typora-theme-autumnus) 106 | 107 | 108 | > Yeah, `mint` is an excellent theme; `see-yue` is quite inspirational; `autumnus` is peaceful, I quite like the style of its title. 109 | 110 | 111 | 112 | ## Contract 113 | 114 | If you are interested in my design or something else, welcome to my [website](https://kirigaya.cn/)or [github homepage](https://github.com/LSTM-Kirigaya). If you has some feedback, you can create [Issues](https://github.com/LSTM-Kirigaya/typora-haru-theme/issues) or email me 1193466151@qq.com 115 | -------------------------------------------------------------------------------- /design/Haru.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LSTM-Kirigaya/typora-haru-theme/285e0cf7d61a7f447224f40730197e664d584641/design/Haru.pptx -------------------------------------------------------------------------------- /design/haru.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LSTM-Kirigaya/typora-haru-theme/285e0cf7d61a7f447224f40730197e664d584641/design/haru.png -------------------------------------------------------------------------------- /haru-dark.css: -------------------------------------------------------------------------------- 1 | @import "haru/mermaid.dark.css"; 2 | @import "haru/codeblock.dark.css"; 3 | @import "haru/sourcemode.dark.css"; 4 | 5 | :root { 6 | --main-color: rgba(128, 30, 255, 1); 7 | --cursor-color: rgb(248, 242, 255); 8 | --shadow-color : rgb(178, 80, 255); 9 | --dark-main-color: rgb(32, 36, 43); 10 | --transplate-color : rgba(128, 30, 255, 0.1); 11 | --dark-color : rgb(40, 44, 52); 12 | --small-dark-color: rgb(49, 54, 63); 13 | --light-color : rgb(248, 242, 255); 14 | --font-color : rgb(248, 248, 250); 15 | --base-font : "Glow Sans", "Microsoft YaHei", serif; 16 | --title-font: "Roboto Slab", "Times", serif; 17 | --blockquote-font : "Times", "Roboto Slab", serif; 18 | --blockquote-color : rgba(117, 117, 117, 0.9); 19 | --monospace: "Cascadia code", "Courier New", monospace; 20 | 21 | --quote-title-font-size : 0.9em; 22 | --quote-tag-font-size : 1.1em; 23 | 24 | /* typora GUI config */ 25 | --sidebar-font-color : rgb(248, 248, 250); 26 | --main-panel-font-color : rgb(248, 248, 250); 27 | } 28 | 29 | @font-face { 30 | font-family: "Roboto Slab"; 31 | src: url("./haru/RobotoSlab-Regular-2.ttf"); 32 | } 33 | 34 | @font-face { 35 | font-family: "Cascadia code"; 36 | src: url("./haru/Cascadia-Code-Regular-2.ttf"); 37 | } 38 | 39 | @font-face { 40 | font-family: "Open Sans"; 41 | src: url("./haru/Open-Sans-2.ttf"); 42 | } 43 | 44 | @font-face { 45 | font-family: "Glow Sans"; 46 | src: url("./haru/GlowSansSC-Normal-Book.woff2") format('woff2'); 47 | } 48 | 49 | /* global setting */ 50 | body { 51 | font-family: "Roboto Slab", "SimHei", serif; 52 | background-color: var(--dark-color); 53 | } 54 | 55 | html { 56 | -webkit-text-size-adjust: 100%; 57 | -ms-text-size-adjust: 100%; 58 | text-rendering: optimizelegibility; 59 | -webkit-font-smoothing: initial; 60 | background-color: var(--dark-color); 61 | } 62 | 63 | h1, h2, h3, h4, h5, h6 { 64 | color: var(--font-color); 65 | font-family: var(--title-font); 66 | } 67 | 68 | /* write is a wrapper of writable region */ 69 | #write { 70 | position: static; 71 | /* width: 90%; */ 72 | max-width: 1000px; 73 | min-height: calc(100vh - 6rem); 74 | min-width: calc(100vw - 45rem); 75 | line-height: 1.6; 76 | transform: none; 77 | height: auto; 78 | caret-color: var(--cursor-color); 79 | } 80 | 81 | h1, h2, h3, 82 | #write h1, h2, h3, h4, h5, h6 { 83 | font-weight: 800; 84 | line-height: 1.5; 85 | margin: 0 0 1em 0; 86 | } 87 | 88 | h1, 89 | #write h1 { 90 | font-size: 40px; 91 | margin: 0 0 1.0em 0; 92 | line-height: 1.3; 93 | border-bottom: solid 3px var(--main-color); 94 | width: fit-content; 95 | color: var(--light-color); 96 | } 97 | 98 | 99 | h2, 100 | #write h2 { 101 | font-size: 28px; 102 | border-radius: .5em; 103 | width: fit-content; 104 | color: var(--light-color); 105 | } 106 | 107 | #write h2::before { 108 | content: "H2"; 109 | border-radius: .3em; 110 | font-size: .8em; 111 | padding: 3px 7px; 112 | margin-right: 15px; 113 | background-color: var(--main-color); 114 | color: white; 115 | } 116 | 117 | #write h3 { 118 | font-size: 24px; 119 | border-radius: .3em; 120 | width: fit-content; 121 | color: var(--light-color); 122 | } 123 | 124 | #write h3::before { 125 | content: "H3"; 126 | color : white; 127 | font-size: 0.8em; 128 | background-color: var(--main-color); 129 | border-radius: .3em; 130 | margin-right: 12px; 131 | padding: 4px 7px; 132 | float: none; 133 | position: relative; 134 | top: 0; 135 | left: 0; 136 | vertical-align: baseline; 137 | border-width: 0; 138 | } 139 | 140 | #write h4 { 141 | font-size: 20px; 142 | color: var(--light-color); 143 | } 144 | 145 | #write h5 { 146 | font-size: 16px; 147 | color: var(--light-color); 148 | } 149 | 150 | #write hr { 151 | width: 60%; 152 | text-align:center; 153 | border-bottom: solid 1.8px var(--main-color); 154 | margin: 4.5em auto; 155 | color: var(--light-color); 156 | border-top: var(--main-color); 157 | } 158 | 159 | 160 | #write img { 161 | border-radius: .5em !important; 162 | box-shadow: 0 0 10px 3px rgba(134, 136, 137, 0.1); 163 | transition: all 0.3s linear; 164 | -moz-transition: all 0.3s linear; 165 | -webkit-transition: all 0.3s linear; 166 | } 167 | 168 | /* #write img:hover { 169 | box-shadow: 0 0 10px 5px var(--shadow-color); 170 | transition: all 0.3s linear; 171 | -moz-transition: all 0.3s linear; 172 | -webkit-transition: all 0.3s linear; 173 | } */ 174 | 175 | 176 | blockquote, 177 | #write blockquote { 178 | padding: 10px 10px; 179 | font-size: var(--quote-title-font-size); 180 | color: var(--blockquote-color); 181 | border-left: 6px solid var(--main-color); 182 | border-radius : 0.5em; 183 | font-family: var(--blockquote-font); 184 | background-color: var(--small-dark-color); 185 | line-height: 35px; 186 | } 187 | 188 | #write blockquote span { 189 | word-break: break-all; 190 | color: var(--light-color); 191 | } 192 | 193 | #write blockquote h1 { 194 | font-weight: 200; 195 | font-size: var(--quote-tag-font-size); 196 | border-bottom: none; 197 | font-family: var(--base-font); 198 | line-height: 35px; 199 | color: var(--light-color); 200 | } 201 | 202 | #write blockquote h1::before { 203 | content: "Tips"; 204 | background-color: var(--main-color); 205 | font-family: var(--title-font); 206 | color: white; 207 | font-size: var(--quote-tag-font-size); 208 | border-radius: .3em; 209 | padding: 3px 7px; 210 | margin-right: 15px; 211 | color: var(--light-color); 212 | } 213 | 214 | #write blockquote h2 { 215 | font-weight: 200; 216 | font-size: var(--quote-tag-font-size); 217 | font-family: var(--base-font); 218 | line-height: 35px; 219 | color: var(--light-color); 220 | } 221 | 222 | #write blockquote h2::before { 223 | content: "Warning"; 224 | background-color: rgb(207, 210, 16); 225 | font-family: var(--title-font); 226 | color: white; 227 | font-size: var(--quote-tag-font-size); 228 | border-radius: .3em; 229 | padding: 3px 7px; 230 | margin-right: 15px; 231 | } 232 | 233 | #write blockquote h3 { 234 | font-weight: 200; 235 | font-size: var(--quote-tag-font-size); 236 | font-family: var(--base-font); 237 | line-height: 35px; 238 | color: var(--light-color); 239 | } 240 | 241 | #write blockquote h3::before { 242 | content: "Error"; 243 | background-color: rgb(224, 66, 66); 244 | font-family: var(--title-font); 245 | color: white; 246 | font-size: var(--quote-tag-font-size); 247 | border-radius: .3em; 248 | padding: 3px 7px; 249 | margin-right: 15px; 250 | float: none; 251 | position: relative; 252 | top: 0; 253 | left: 0; 254 | vertical-align: baseline; 255 | border-width: 0; 256 | } 257 | 258 | #write blockquote h4 { 259 | font-weight: 200; 260 | font-size: var(--quote-tag-font-size); 261 | font-family: var(--base-font); 262 | line-height: 35px; 263 | color: var(--light-color); 264 | } 265 | 266 | #write blockquote h4::before { 267 | content: "Remind"; 268 | background-color: var(--shadow-color); 269 | font-family: var(--title-font); 270 | color: white; 271 | font-size: var(--quote-tag-font-size); 272 | border-radius: .3em; 273 | padding: 3px 7px; 274 | margin-right: 15px; 275 | float: none; 276 | position: relative; 277 | top: 0; 278 | left: 0; 279 | vertical-align: baseline; 280 | border-width: 0; 281 | } 282 | 283 | #write blockquote h5 { 284 | font-weight: 200; 285 | font-size: var(--quote-tag-font-size); 286 | font-family: var(--base-font); 287 | line-height: 35px; 288 | color: var(--light-color); 289 | } 290 | 291 | #write blockquote h5::before { 292 | content: "Remind"; 293 | background-color: var(--shadow-color); 294 | font-family: var(--title-font); 295 | color: white; 296 | font-size: var(--quote-tag-font-size); 297 | border-radius: .3em; 298 | padding: 3px 7px; 299 | margin-right: 15px; 300 | float: none; 301 | position: relative; 302 | top: 0; 303 | left: 0; 304 | vertical-align: baseline; 305 | border-width: 0; 306 | } 307 | 308 | 309 | /* code block */ 310 | #write pre.md-fences { 311 | padding: 1rem 0.5rem 1rem; 312 | display: block; 313 | -webkit-overflow-scrolling: touch; 314 | /* box-shadow: 0 0 6px 2px rgba(151, 151, 151, 0.9); */ 315 | /* border-top: rgb(51, 51, 51) solid 35px; */ 316 | border-top: var(--small-dark-color) solid 35px; 317 | background-color: var(--small-dark-color); 318 | color: var(--font-color); 319 | } 320 | 321 | #write pre { 322 | background-color: var(--small-dark-color); 323 | } 324 | 325 | pre.md-fences::before { 326 | content: ' '; 327 | background: var(--main-color); 328 | box-shadow: 23px 0 rgb(128, 128, 128), 45px 0 gray; 329 | border-radius: 50%; 330 | margin-top: -2.3rem; 331 | position: absolute; 332 | left: 15px; 333 | height: 12px; 334 | width: 12px; 335 | } 336 | 337 | #write pre.md-fences { 338 | line-height: 1.5rem; 339 | font-size: .9rem; 340 | font-weight: 300; 341 | border-radius: .7em; 342 | font-family: var(--monospace) !important; 343 | color: var(--font-color); 344 | } 345 | 346 | /* inline code */ 347 | code { 348 | margin: 0 2px; 349 | padding: 4px 6px; 350 | color: var(--light-color); 351 | white-space: pre-wrap; 352 | background: var(--small-dark-color); 353 | border-radius: 8px; 354 | } 355 | 356 | #write blockquote code { 357 | margin: 0 2px; 358 | padding: 4px 6px; 359 | color: var(--light-color); 360 | white-space: pre-wrap; 361 | background: var(--main-color); 362 | border-radius: 8px; 363 | } 364 | 365 | kbd, 366 | samp, 367 | tt, 368 | var { 369 | font-family: var(--monospace) !important; 370 | } 371 | 372 | 373 | /* YAML */ 374 | pre.md-meta-block { 375 | font-size: .8rem; 376 | min-height: .8rem; 377 | white-space: pre-wrap; 378 | background: var(--main-color) !important; 379 | display: block; 380 | overflow-x: hidden; 381 | padding: 15px; 382 | font-family: var(--monospace); 383 | border-radius: 1.2em; 384 | color: var(--light-color); 385 | caret-color: var(--light-color); 386 | } 387 | 388 | 389 | /* Math */ 390 | .md-header-span .md-attr { 391 | color: #8C8E92; 392 | display: inline; 393 | } 394 | 395 | .md-rawblock-control:not(.md-rawblock-tooltip) { 396 | background-color: var(--small-dark-color) !important; 397 | } 398 | 399 | .md-rawblock-on-edit>.md-rawblock-tooltip { 400 | background-color: var(--small-dark-color); 401 | color: var(--font-color); 402 | transition: 0.3s linear; 403 | } 404 | 405 | 406 | 407 | .md-fences-adv-panel, .md-math-container, .md-mathjax-preview { 408 | transition: all 0.3s linear; 409 | -moz-transition: all 0.3s linear; 410 | -webkit-transition: all 0.3s linear; 411 | } 412 | 413 | 414 | #math-inline-preview .md-arrow:after { 415 | background: var(--small-dark-color); 416 | } 417 | 418 | .md-rawblock:hover>.md-rawblock-tooltip { 419 | background-color: var(--small-dark-color); 420 | color: var(--font-color); 421 | } 422 | 423 | .typora-sourceview-on #toggle-sourceview-btn, 424 | #footer-word-count:hover, 425 | .ty-show-word-count #footer-word-count { 426 | background: var(--small-dark-color) !important; 427 | } 428 | 429 | #toggle-sourceview-btn:hover { 430 | color: var(--font-color) !important; 431 | background: var(--small-dark-color) !important; 432 | } 433 | 434 | .md-comment { 435 | color: #5a95e3; 436 | opacity: 0.8; 437 | } 438 | 439 | .md-inline-math script { 440 | color: var(--light-color) !important; 441 | } 442 | 443 | .md-inline-math svg { 444 | color: var(--light-color) !important; 445 | } 446 | 447 | #math-inline-preview .md-arrow:after { 448 | background: var(--small-dark-color) !important; 449 | } 450 | 451 | .md-mathjax-midline { 452 | background-color: var(--small-dark-color) !important; 453 | } 454 | 455 | .mathjax-block mjx-container[jax=SVG][display=true], .md-mathjax-preview mjx-container[jax=SVG][display=true] { 456 | color: var(--light-color) !important; 457 | background: var(--dark-color); 458 | } 459 | 460 | 461 | /* table */ 462 | #write table 463 | { 464 | width: 95%; 465 | border-collapse: collapse; 466 | text-align: center; 467 | font-family: var(--monospace); 468 | margin: 20px; 469 | } 470 | #write table td, table th 471 | { 472 | border: 1px solid transparent; 473 | color: rgb(18, 18, 18); 474 | height: 30px; 475 | padding: 10px; 476 | border-radius: .5em; 477 | transition: all 0.3s linear; 478 | -moz-transition: all 0.3s linear; 479 | -webkit-transition: all 0.3s linear; 480 | } 481 | #write table td { 482 | font-family: var(--title-font); 483 | color: var(--light-color) !important; 484 | } 485 | #write table thead th 486 | { 487 | background-color: var(--shadow-color); 488 | font-family: var(--title-font); 489 | font-size: 20px; 490 | color: white; 491 | font-weight: bolder; 492 | width: 100px; 493 | text-align: center; 494 | vertical-align: middle; 495 | padding: 10px; 496 | } 497 | table tr:nth-child(odd) 498 | { 499 | background: var(--dark-color); 500 | } 501 | table tr:nth-child(even) 502 | { 503 | background: var(--dark-main-color); 504 | } 505 | table td:hover { 506 | background-color: var(--shadow-color) !important; 507 | transition: all 0.3s linear; 508 | -moz-transition: all 0.3s linear; 509 | -webkit-transition: all 0.3s linear; 510 | } 511 | 512 | 513 | /* main element consisting of your text */ 514 | p { 515 | color: var(--font-color); 516 | margin: 0 0 2em 0; 517 | font-weight: 500; 518 | line-height: 1.6; 519 | font-family: var(--base-font); 520 | } 521 | 522 | a { 523 | color: var(--main-color); 524 | font-weight: 500; 525 | text-decoration: none; 526 | text-decoration-style: none; 527 | cursor: pointer; 528 | padding: 0 3px 0 3px; 529 | } 530 | 531 | 532 | /* list */ 533 | 534 | ol, 535 | ul { 536 | padding-left: 2em; 537 | line-height: 2; 538 | } 539 | 540 | ul>li>ul>li { 541 | list-style-type: circle; 542 | } 543 | 544 | ul>li>ul>li>ul>li { 545 | list-style-type: square; 546 | } 547 | 548 | 549 | iframe { 550 | border-radius: 1.2em; 551 | box-shadow: 0 0 8px 3px rgba(181, 181, 182, 0.9); 552 | } 553 | 554 | 555 | /* checkbox */ 556 | .md-task-list-item:hover > input:before, 557 | input[type='checkbox']:hover:before { 558 | opacity: 1; 559 | transition: 0.3s; 560 | background-color: var(--shadow-color); 561 | } 562 | 563 | .task-list-item input::before { 564 | content: ""; 565 | display: inline-block; 566 | border-radius: .3em; 567 | vertical-align: middle; 568 | border: 1.2px solid var(--main-color); 569 | background-color: #ffffff; 570 | width: 1.1rem; 571 | height: 1.1rem; 572 | margin-left: -0.1rem; 573 | margin-right: 0.1rem; 574 | margin-top: -0.68rem; 575 | } 576 | 577 | .task-list-item input:checked::before { 578 | padding-left: 0.125em; 579 | content: '✔'; 580 | color:white; 581 | background-color: var(--main-color); 582 | font-size: 0.8rem; 583 | line-height: 0.95rem; 584 | margin-top: -0.68rem; 585 | transition: background-color 200ms ease-in-out; 586 | } 587 | 588 | 589 | 590 | 591 | 592 | #footer-word-count-label { 593 | font-family: var(--title-font) !important; 594 | color: white; 595 | padding: 1px 8px; 596 | border-radius: 1.0em; 597 | background-color: var(--main-color); 598 | } 599 | 600 | /* bg color when text is selected */ 601 | div::selection { 602 | background: var(--main-color); 603 | color: white; 604 | } 605 | 606 | div::-moz-selection { 607 | background: var(--main-color); 608 | color: white; 609 | } 610 | 611 | div::-webkit-selection { 612 | background: var(--main-color); 613 | color: white; 614 | } 615 | 616 | blockquote::selection { 617 | background: var(--main-color); 618 | color: white; 619 | } 620 | 621 | blockquote::-moz-selection { 622 | background: var(--main-color); 623 | color: white; 624 | } 625 | 626 | blockquote::-webkit-selection { 627 | background: var(--main-color); 628 | color: white; 629 | } 630 | 631 | p::selection { 632 | background: var(--main-color); 633 | color: white; 634 | } 635 | 636 | p::-moz-selection { 637 | background: var(--main-color); 638 | color: white; 639 | } 640 | 641 | p::-webkit-selection { 642 | background: var(--main-color); 643 | color: white; 644 | } 645 | 646 | label::selection { 647 | background: var(--main-color); 648 | color: white; 649 | } 650 | 651 | label::-moz-selection { 652 | background: var(--main-color); 653 | color: white; 654 | } 655 | 656 | label::-webkit-selection { 657 | background: var(--main-color); 658 | color: white; 659 | } 660 | 661 | span::selection { 662 | background: var(--main-color); 663 | color: white; 664 | } 665 | 666 | span::-moz-selection { 667 | background: var(--main-color); 668 | color: white; 669 | } 670 | 671 | span::-webkit-selection { 672 | background: var(--main-color); 673 | color: white; 674 | } 675 | 676 | h1::selection { 677 | background: var(--main-color); 678 | color: white; 679 | } 680 | 681 | h1::-moz-selection { 682 | background: var(--main-color); 683 | color: white; 684 | } 685 | 686 | h1::-webkit-selection { 687 | background: var(--main-color); 688 | color: white; 689 | } 690 | 691 | h2::selection { 692 | background: var(--main-color); 693 | color: white; 694 | } 695 | 696 | h2::-moz-selection { 697 | background: var(--main-color); 698 | color: white; 699 | } 700 | 701 | h2::-webkit-selection { 702 | background: var(--main-color); 703 | color: white; 704 | } 705 | 706 | h3::selection { 707 | background: var(--main-color); 708 | color: white; 709 | } 710 | 711 | h3::-moz-selection { 712 | background: var(--main-color); 713 | color: white; 714 | } 715 | 716 | h3::-webkit-selection { 717 | background: var(--main-color); 718 | color: white; 719 | } 720 | 721 | h4::selection { 722 | background: var(--main-color); 723 | color: white; 724 | } 725 | 726 | h4::-moz-selection { 727 | background: var(--main-color); 728 | color: white; 729 | } 730 | 731 | h4::-webkit-selection { 732 | background: var(--main-color); 733 | color: white; 734 | } 735 | 736 | h5::selection { 737 | background: var(--main-color); 738 | color: white; 739 | } 740 | 741 | h5::-moz-selection { 742 | background: var(--main-color); 743 | color: white; 744 | } 745 | 746 | h5::-webkit-selection { 747 | background: var(--main-color); 748 | color: white; 749 | } 750 | 751 | code::selection { 752 | background: var(--main-color); 753 | color: white; 754 | } 755 | 756 | code::-moz-selection { 757 | background: var(--main-color); 758 | color: white; 759 | } 760 | 761 | code::-webkit-selection { 762 | background: var(--main-color); 763 | color: white; 764 | } 765 | 766 | 767 | /* outside */ 768 | 769 | 770 | #megamenu-content { 771 | background-color: var(--dark-color); 772 | } 773 | 774 | #megamenu-menu-panel { 775 | font-family: var(--title-font); 776 | padding: 10px; 777 | } 778 | 779 | .megamenu-menu-panel { 780 | padding: 10px; 781 | color: var(--font-color); 782 | } 783 | 784 | 785 | .megamenu-menu-header-title-menu { 786 | color: var(--sidebar-font-color); 787 | } 788 | 789 | .megamenu-menu-header-title-back { 790 | color: var(--sidebar-font-color); 791 | } 792 | 793 | 794 | /* sidebar */ 795 | .megamenu-menu-header { 796 | width: 60%; 797 | text-align:center; 798 | border-bottom: solid 3px var(--main-color); 799 | } 800 | #megamenu-menu-sidebar { 801 | background-color: var(--small-dark-color); 802 | color: var(--sidebar-font-color); 803 | box-shadow: 0 0 8px 4px rgba(42, 4, 80, 0.8); 804 | margin-top: 3%; 805 | height: 92%; 806 | border-radius: 0 4em 4em 0; 807 | } 808 | #megamenu-back-btn { 809 | border-radius: 1.2em; 810 | color: var(--main-color); 811 | transition: all linear .3s; 812 | padding: 0 0 10px; 813 | } 814 | 815 | #megamenu-back-btn:hover { 816 | background-color: var(--main-color); 817 | color: white; 818 | border: 2px solid white; 819 | transition: all linear .3s; 820 | } 821 | 822 | #megamenu-menu-list > li { 823 | transition: all linear .3s; 824 | } 825 | 826 | #megamenu-menu-list > li:hover { 827 | transition: all linear .3s; 828 | border-top-left-radius: 1.2em; 829 | border-bottom-left-radius: 1.2em; 830 | } 831 | 832 | #megamenu-menu-list > li:focus { 833 | transition: all linear .3s; 834 | color : white; 835 | background-color: var(--shadow-color); 836 | width: fit-content; 837 | border-top-right-radius: 1.2em; 838 | border-bottom-right-radius: 1.2em; 839 | } 840 | 841 | .dropdown-menu .divider { 842 | width: 30%; 843 | color: var(--main-color); 844 | background-color: var(--main-color); 845 | } 846 | 847 | .dropdown-menu { 848 | color: var(--font-color) !important; 849 | background-color: var(--small-dark-color) !important; 850 | } 851 | 852 | .menu-item-container a.menu-style-btn { 853 | background-color: var(--small-dark-color) !important; 854 | } 855 | 856 | .megamenu-menu-list li a { 857 | transition: all linear .3s; 858 | width: fit-content; 859 | padding-right: 60px; 860 | } 861 | 862 | .megamenu-menu-list li a:hover { 863 | transition: all linear .3s; 864 | color: white !important; 865 | background-color: var(--main-color) !important; 866 | border-bottom-right-radius: 2em; 867 | border-top-right-radius: 2em; 868 | } 869 | 870 | .megamenu-menu-list li a.active, .megamenu-menu-list:not(.saved) li a:hover { 871 | color: white !important; 872 | background-color: var(--main-color) !important; 873 | border-bottom-right-radius: 2em; 874 | border-top-right-radius: 2em; 875 | } 876 | 877 | sup.md-footnote { 878 | background-color: var(--dark-color); 879 | color: var(--light-color); 880 | } 881 | 882 | 883 | /* open */ 884 | #m-open-local, 885 | #m-import-local { 886 | border-radius: 1.2em; 887 | } 888 | 889 | #m-open-local:hover, 890 | #m-import-local:hover { 891 | border: 1px solid var(--shadow-color); 892 | } 893 | 894 | #recent-file-panel-search-input { 895 | border-radius: 1.2em; 896 | transition: all linear .3s; 897 | font-family: var(--title-font); 898 | border: var(--small-dark-color) solid; 899 | background-color: var(--small-dark-color); 900 | } 901 | 902 | #recent-file-panel-action-btn { 903 | border-radius: 1.2em; 904 | } 905 | 906 | #recent-file-panel-search-input:hover { 907 | transition: all linear .3s; 908 | box-shadow: 0 0 10px 3px var(--shadow-color); 909 | } 910 | 911 | #recent-file-panel-search-input:focus { 912 | transition: all linear .3s; 913 | color: white; 914 | border: none; 915 | background-color: var(--shadow-color); 916 | } 917 | 918 | 919 | 920 | /* 最近打开的文件 */ 921 | #recent-file-panel-action-btn { 922 | background-color: var(--small-dark-color); 923 | color: var(--font-color); 924 | border-radius: 0.7em; 925 | } 926 | 927 | .megamenu-menu-panel table { 928 | color: var(--font-color); 929 | } 930 | 931 | #recent-file-panel tbody tr:nth-child(2n-1) { 932 | background-color: var(--small-dark-color); 933 | } 934 | 935 | .megamenu-menu-panel table tr td, .megamenu-menu-panel table tr th { 936 | color: var(--font-color); 937 | border-radius: 0.7em; 938 | } 939 | 940 | 941 | 942 | /* side bar Ctrl Shift 2 */ 943 | /* .typora-node.pin-outline:not(.megamenu-opened):not(.typora-sourceview-on) #typora-sidebar { 944 | display: block; 945 | left: 0; 946 | transition: left .3s; 947 | border-radius: 0em 3em 3em 0em; 948 | box-shadow: 0 0 8px 3px rgb(100 100 100 / 80%); 949 | margin-top: 20px; 950 | margin-bottom: 5%; 951 | height: 95%; 952 | padding-right: 10px; 953 | } */ 954 | 955 | .info-panel-tab-border { 956 | color: var(--main-color) !important; 957 | background-color: var(--main-color) !important; 958 | } 959 | 960 | .outline-content { 961 | padding: 3px 18px 3px 0; 962 | } 963 | 964 | .outline-item { 965 | margin-left: -20px; 966 | margin-right: -20px; 967 | border-left: 20px solid transparent; 968 | border-right: 16px solid transparent; 969 | } 970 | 971 | .outline-item:hover { 972 | background-color: var(--shadow-color); 973 | color: white; 974 | } 975 | 976 | .active-tab-files #info-panel-tab-file .info-panel-tab-title { 977 | background-color: var(--main-color); 978 | color: white; 979 | padding: 5px 5px; 980 | border-radius: 1.2em; 981 | transition: all linear .3s; 982 | } 983 | 984 | .active-tab-outline #info-panel-tab-outline .info-panel-tab-title { 985 | background-color: var(--main-color); 986 | color: white; 987 | padding: 5px 5px; 988 | border-radius: 1.2em; 989 | transition: all linear .3s; 990 | } 991 | 992 | .ty-show-search #info-panel-tab-search .info-panel-tab-title { 993 | background-color: var(--main-color); 994 | color: white; 995 | padding: 5px 5px; 996 | border-radius: 1.2em; 997 | transition: all linear .3s; 998 | } 999 | 1000 | 1001 | #file-library-search-input { 1002 | border-radius: .5em; 1003 | } 1004 | 1005 | #file-library-search-input:focus { 1006 | border: 2px solid var(--main-color); 1007 | } 1008 | 1009 | .info-panel-tab-border { 1010 | display: none; 1011 | } 1012 | div#file-library-list-children { 1013 | transition: all linear .3s; 1014 | } 1015 | 1016 | .file-list-item.active { 1017 | border-top-right-radius: 2.2em; 1018 | border-bottom-right-radius: 2.2em; 1019 | width: fit-content; 1020 | background-color: var(--main-color) !important; 1021 | color: white; 1022 | transition: all linear .3s; 1023 | } 1024 | 1025 | .outline-item-active { 1026 | border-top-right-radius: 2.2em; 1027 | border-bottom-right-radius: 2.2em; 1028 | width: fit-content; 1029 | background-color: var(--main-color) !important; 1030 | color: white; 1031 | transition: all linear .3s; 1032 | } 1033 | 1034 | 1035 | /* theme */ 1036 | .theme-preview-div.active, .theme-preview-div.active:hover { 1037 | border-color: var(--main-color); 1038 | } 1039 | #theme-preview-grid { 1040 | max-width: 100% !important; 1041 | } 1042 | #open-theme-folder-btn { 1043 | transition: all .3s; 1044 | border-radius: 2em; 1045 | border: none; 1046 | color: white !important; 1047 | background-color: var(--main-color); 1048 | } 1049 | #open-theme-folder-btn:hover { 1050 | transition: all .3s; 1051 | color: white !important; 1052 | background-color: var(--shadow-color); 1053 | } 1054 | 1055 | /* export */ 1056 | .long-btn { 1057 | transition: all .3s; 1058 | border-radius: 2em; 1059 | border: 2px solid var(--main-color); 1060 | color: var(--main-color); 1061 | } 1062 | 1063 | .long-btn:hover { 1064 | transition: all .3s; 1065 | color: white !important; 1066 | background-color: var(--main-color); 1067 | } 1068 | 1069 | .long-btn-wrap { 1070 | padding: 10px; 1071 | } 1072 | 1073 | .megamenu-content, 1074 | .megamenu-opened header { 1075 | background: var(--dark-color); 1076 | } 1077 | 1078 | .megamenu-section-export { 1079 | font-family: var(--title-font) !important; 1080 | background: var(--dark-color); 1081 | } 1082 | 1083 | 1084 | .megamenu-menu-panel h1 { 1085 | padding-bottom: 10px; 1086 | width: fit-content !important; 1087 | border-bottom: var(--main-color) solid 3px; 1088 | background: var(--dark-color); 1089 | } 1090 | 1091 | .megamenu-menu-panel h2::before { 1092 | content: "H2"; 1093 | border-radius: .3em; 1094 | font-size: 25px; 1095 | padding: 3px 7px; 1096 | margin: 5px 15px 5px 1px; 1097 | background-color: var(--main-color); 1098 | color: white; 1099 | } 1100 | 1101 | 1102 | /* modal exit dialog */ 1103 | .btn-primary { 1104 | transition: all .3 linear; 1105 | border-radius: 1.2em; 1106 | background-color: var(--main-color); 1107 | color: var(--font-color); 1108 | } 1109 | 1110 | .btn-default { 1111 | transition: all .3 linear; 1112 | border-radius: 1.2em; 1113 | border: var(--main-color) 3px solid; 1114 | color: var(--shadow-color); 1115 | background-color: var(--small-dark-color); 1116 | } 1117 | 1118 | .btn-primary:hover, 1119 | .btn-default:hover { 1120 | transition: all .3 linear; 1121 | color: white; 1122 | background-color: var(--shadow-color); 1123 | } 1124 | 1125 | .btn-primary:focus, 1126 | .btn-default:focus { 1127 | transition: all .3 linear; 1128 | color: white; 1129 | background-color: var(--main-color); 1130 | } 1131 | 1132 | .modal-content { 1133 | border-radius: 1.5em; 1134 | border: none; 1135 | background: var(--small-dark-color) !important; 1136 | color: var(--font-color) !important; 1137 | } 1138 | 1139 | .ImgCaption { 1140 | padding-top: 0; 1141 | margin-top: 0; 1142 | border-bottom: 2px solid var(--main-color); 1143 | width: fit-content; 1144 | } 1145 | 1146 | /* Perference */ 1147 | .nav-group-item-item:hover { 1148 | transition: all .3s; 1149 | border: 2px solid var(--main-color); 1150 | } 1151 | .nav-group-item.active { 1152 | color: white; 1153 | font-family: var(--title-font); 1154 | transition: all .3s; 1155 | border-radius: 1.5em; 1156 | padding: 6px 11px 6px 11px; 1157 | } 1158 | .nav-group-item { 1159 | transition: all .3s; 1160 | border-radius: 1.5em; 1161 | width: fit-content; 1162 | cursor: pointer; 1163 | } 1164 | .nav-group-item.active, .nav-group-item:active { 1165 | background-color: var(--main-color) !important; 1166 | color: white !important; 1167 | } 1168 | .pane-group { 1169 | font-family: var(--title-font); 1170 | } 1171 | 1172 | input:not([type=range]):not([type=color]) { 1173 | outline: none; 1174 | border: 2px solid var(--main-color); 1175 | border-radius: .7em; 1176 | font-size: 16px; 1177 | } 1178 | 1179 | input:not([type=range]):not([type=color]):focus { 1180 | border-radius: .7em; 1181 | color: white; 1182 | background-color: var(--main-color); 1183 | box-shadow: 0 0 6px 3px var(--shadow-color); 1184 | transition: all .3s linear; 1185 | } 1186 | 1187 | .pane select, 1188 | .pane .btn { 1189 | border-radius: 0.7em; 1190 | cursor: pointer; 1191 | margin-right: 10px; 1192 | } 1193 | 1194 | .pane .btn:hover { 1195 | color: white !important; 1196 | transition: all .3s linear; 1197 | background-color: var(--main-color); 1198 | } 1199 | 1200 | .label-input-group td:hover { 1201 | box-shadow: none; 1202 | } 1203 | 1204 | .label-input-group .row:hover { 1205 | color: black; 1206 | background-color: white; 1207 | } 1208 | 1209 | #write.enable-diagrams>[mermaid-type=gantt].md-fences:not(.md-focus) { 1210 | width: inherit !important; 1211 | margin-left: inherit !important; 1212 | } 1213 | 1214 | /* TODO fix the bug below */ 1215 | #footer-word-count-info table, #footer-word-count-info td, #footer-word-count-info tr { 1216 | border: none!important; 1217 | background: inherit !important; 1218 | font-size: 13.5px!important; 1219 | text-align: left!important; 1220 | padding: 0; 1221 | -webkit-user-select: initial; 1222 | user-select: initial; 1223 | margin: 0!important; 1224 | line-height: 1.8; 1225 | } 1226 | 1227 | /* dark side */ 1228 | 1229 | .ty-icon { 1230 | color: var(--light-color) !important; 1231 | } 1232 | 1233 | .typora-node #typora-sidebar { 1234 | background-color: var(--small-dark-color); 1235 | } 1236 | 1237 | .info-panel-tab-title { 1238 | color: var(--light-color); 1239 | } 1240 | 1241 | div #file-library-list-children { 1242 | color: var(--light-color); 1243 | } 1244 | 1245 | 1246 | .modal-backdrop { 1247 | background-color: rgba(174, 174, 174, 0.7); 1248 | } 1249 | 1250 | .md-table-resize-popover { 1251 | background-color: #333; 1252 | } 1253 | 1254 | .form-inline .input-group .input-group-addon { 1255 | color: white; 1256 | } 1257 | 1258 | #md-searchpanel { 1259 | border-bottom: 1px dashed grey; 1260 | } 1261 | 1262 | ::-moz-selection { 1263 | background: #4a89dc; 1264 | color: #fff; 1265 | text-shadow: none; 1266 | } 1267 | 1268 | *.in-text-selection, 1269 | ::selection { 1270 | background: #4a89dc; 1271 | color: #fff; 1272 | text-shadow: none; 1273 | } 1274 | 1275 | .title-text { 1276 | color: var(--font-color) !important; 1277 | } 1278 | 1279 | #top-titlebar, #top-titlebar * { 1280 | color: var(--font-color) !important; 1281 | } 1282 | 1283 | 1284 | /* 左侧side bar 中的 打开文件夹 */ 1285 | .sidebar-footer-main-item-label { 1286 | color: var(--font-color) !important; 1287 | } 1288 | 1289 | #outline-content { 1290 | color: var(--font-color); 1291 | } 1292 | 1293 | .outline-content li, .outline-content ul { 1294 | padding-left: 10px; 1295 | } 1296 | 1297 | 1298 | /* 底部状态栏 */ 1299 | .typora-node.pin-outline:not(.megamenu-opened):not(.typora-sourceview-on) footer.ty-footer { 1300 | color: var(--font-color) !important; 1301 | } 1302 | .show-footer footer.ty-footer { 1303 | color: var(--font-color) !important; 1304 | } 1305 | 1306 | .typora-sourceview-on #toggle-sourceview-btn { 1307 | background-color: var(--small-dark-color) !important; 1308 | border-top-right-radius: 0.8em; 1309 | } 1310 | 1311 | .ty-tooltip { 1312 | border-radius: 0.7em !important; 1313 | background: var(--small-dark-color) !important; 1314 | color: var(--font-color) !important; 1315 | } 1316 | 1317 | .CodeMirror-lines { 1318 | color: var(--font-color); 1319 | } 1320 | 1321 | ol { 1322 | list-style: decimal; 1323 | color: var(--font-color); 1324 | } 1325 | 1326 | ul { 1327 | list-style: circle; 1328 | color: var(--font-color); 1329 | } 1330 | 1331 | ol::marker { 1332 | color: var(--font-color) !important; 1333 | } 1334 | 1335 | ul::marker{ 1336 | color: var(--font-color) !important; 1337 | } 1338 | 1339 | /* preference setting */ 1340 | .window { 1341 | background-color: var(--dark-color) !important; 1342 | color: var(--font-color) !important; 1343 | } 1344 | 1345 | .window-header { 1346 | background-color: var(--small-dark-color) !important; 1347 | } 1348 | 1349 | .pane select, .pane .btn { 1350 | background-color: var(--small-dark-color); 1351 | } 1352 | 1353 | button.btn-default { 1354 | color: var(--font-color); 1355 | } 1356 | 1357 | .export-detail, .export-item.active, .export-items-list-control { 1358 | background-color: var(--small-dark-color); 1359 | } 1360 | 1361 | textarea { 1362 | background-color: var(--small-dark-color); 1363 | border-radius: 0.7em; 1364 | font-family: var(--base-font) !important; 1365 | } 1366 | 1367 | .file-node-content { 1368 | transition: all 0.15s linear; 1369 | -moz-transition: all 0.15s linear; 1370 | -webkit-transition: all 0.15s linear; 1371 | color: var(--font-color); 1372 | padding: 5px; 1373 | } 1374 | 1375 | 1376 | .file-node-content:hover { 1377 | transition: all 0.15s linear; 1378 | -moz-transition: all 0.15s linear; 1379 | -webkit-transition: all 0.15s linear; 1380 | color: var(--font-color); 1381 | cursor: pointer; 1382 | } 1383 | 1384 | .file-node-content:focus { 1385 | transition: all 0.15s linear; 1386 | -moz-transition: all 0.15s linear; 1387 | -webkit-transition: all 0.15s linear; 1388 | cursor: pointer; 1389 | } 1390 | 1391 | #file-library .active { 1392 | transition: all 0.15s linear; 1393 | -moz-transition: all 0.15s linear; 1394 | -webkit-transition: all 0.15s linear; 1395 | color: var(--font-color); 1396 | cursor: pointer; 1397 | } 1398 | 1399 | .file-tree-node.active>.file-node-background { 1400 | transition: all 0.15s linear; 1401 | -moz-transition: all 0.15s linear; 1402 | -webkit-transition: all 0.15s linear; 1403 | background-color: var(--main-color); 1404 | border-left: var(--small-dark-color); 1405 | border-color: var(--small-dark-color); 1406 | } 1407 | 1408 | .export-detail input[type=number], .export-detail input[type=text] { 1409 | background-color: var(--small-dark-color); 1410 | border-radius: 0.7em; 1411 | font-family: var(--base-font) !important; 1412 | color: var(--font-color); 1413 | } 1414 | 1415 | table select { 1416 | transition: none; 1417 | } 1418 | 1419 | table select:hover { 1420 | transition: none; 1421 | } 1422 | 1423 | /* 输入三个点之后的语言建议 */ 1424 | #ty-auto-suggest { 1425 | background: var(--dark-color); 1426 | box-shadow: 0 0 10px 3px rgba(69, 74, 83, 0.5); 1427 | } -------------------------------------------------------------------------------- /haru.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --main-color: rgba(128, 30, 255, 1); 3 | --shadow-color : rgb(178, 80, 255); 4 | --transplate-color : rgba(128, 30, 255, 0.1); 5 | --dark-color : rgb(70, 18, 137); 6 | --light-color : rgb(248, 242, 255); 7 | --font-color : rgb(12, 12, 12); 8 | --base-font : "Glow Sans", "Microsoft YaHei", serif; 9 | --title-font: "Roboto Slab", "Times", serif; 10 | --blockquote-font : "Times", "Roboto Slab", serif; 11 | --blockquote-color : rgba(117, 117, 117, 0.9); 12 | --monospace: "Cascadia code", "Courier New", monospace; 13 | 14 | /* --background : url("https://cdn.jsdelivr.net/gh/LSTM-Kirigaya/KImage/Img/2k.jpg"); */ 15 | 16 | --quote-title-font-size : 0.9em; 17 | --quote-tag-font-size : 1.1em; 18 | 19 | /* typora GUI config */ 20 | --sidebar-font-color : black; 21 | --main-panel-font-color : black; 22 | } 23 | 24 | @font-face { 25 | font-family: "Roboto Slab"; 26 | src: url("./haru/RobotoSlab-Regular-2.ttf"); 27 | } 28 | 29 | @font-face { 30 | font-family: "Cascadia code"; 31 | src: url("./haru/Cascadia-Code-Regular-2.ttf"); 32 | } 33 | 34 | @font-face { 35 | font-family: "Open Sans"; 36 | src: url("./haru/Open-Sans-2.ttf"); 37 | } 38 | 39 | @font-face { 40 | font-family: "Glow Sans"; 41 | src: url("./haru/GlowSansSC-Normal-Book.woff2") format('woff2'); 42 | } 43 | 44 | /* global setting */ 45 | body { 46 | font-family: "Roboto Slab", "SimHei", serif; 47 | /* background-color: rgb(255, 255, 255); */ 48 | } 49 | 50 | html { 51 | -webkit-text-size-adjust: 100%; 52 | -ms-text-size-adjust: 100%; 53 | text-rendering: optimizelegibility; 54 | -webkit-font-smoothing: initial; 55 | } 56 | 57 | 58 | /* write is a wrapper of writable region */ 59 | #write { 60 | position: static; 61 | /* width: 90%; */ 62 | max-width: 1000px; 63 | min-height: calc(100vh - 6rem); 64 | min-width: calc(100vw - 45rem); 65 | line-height: 1.6; 66 | transform: none; 67 | height: auto; 68 | caret-color: var(--main-color); 69 | } 70 | 71 | h1, h2, h3, 72 | #write h1, h2, h3, h4, h5, h6 { 73 | color: var(--font-color); 74 | font-family: var(--title-font); 75 | font-weight: 800; 76 | line-height: 1.5; 77 | margin: 0 0 1em 0; 78 | } 79 | 80 | h1, 81 | #write h1 { 82 | font-size: 40px; 83 | margin: 0 0 1.0em 0; 84 | line-height: 1.3; 85 | border-bottom: solid 3px var(--main-color); 86 | width: fit-content; 87 | } 88 | 89 | h2, 90 | #write h2 { 91 | font-size: 28px; 92 | border-radius: .5em; 93 | width: fit-content; 94 | } 95 | 96 | #write h2::before { 97 | content: "H2"; 98 | border-radius: .3em; 99 | font-size: .8em; 100 | padding: 3px 7px; 101 | margin-right: 15px; 102 | background-color: var(--main-color); 103 | color: white; 104 | } 105 | 106 | #write h3 { 107 | font-size: 24px; 108 | border-radius: .3em; 109 | width: fit-content; 110 | } 111 | 112 | #write h3::before { 113 | content: "H3"; 114 | color : white; 115 | font-size: 0.8em; 116 | background-color: var(--main-color); 117 | border-radius: .3em; 118 | margin-right: 12px; 119 | padding: 4px 7px; 120 | float: none; 121 | position: relative; 122 | top: 0; 123 | left: 0; 124 | vertical-align: baseline; 125 | border-width: 0; 126 | } 127 | 128 | #write h4 { 129 | font-size: 20px; 130 | } 131 | 132 | #write h5 { 133 | font-size: 16px; 134 | } 135 | 136 | #write hr { 137 | width: 60%; 138 | text-align:center; 139 | border-bottom: solid 1.8px var(--main-color); 140 | margin: 4.5em auto; 141 | } 142 | 143 | 144 | #write img { 145 | border-radius: .5em !important; 146 | box-shadow: 0 0 10px 3px rgba(134, 136, 137, 0.1); 147 | transition: all 0.3s linear; 148 | -moz-transition: all 0.3s linear; 149 | -webkit-transition: all 0.3s linear; 150 | } 151 | 152 | /* #write img:hover { 153 | box-shadow: 0 0 10px 5px var(--shadow-color); 154 | transition: all 0.3s linear; 155 | -moz-transition: all 0.3s linear; 156 | -webkit-transition: all 0.3s linear; 157 | } */ 158 | 159 | blockquote, 160 | #write blockquote { 161 | padding: 10px 10px; 162 | font-size: var(--quote-title-font-size); 163 | color: var(--blockquote-color); 164 | border-left: 6px solid var(--main-color); 165 | background: var(--light-color); 166 | border-radius : 0.5em; 167 | font-family: var(--blockquote-font); 168 | line-height: 35px; 169 | } 170 | 171 | #write blockquote span { 172 | word-break: break-all; 173 | } 174 | 175 | #write blockquote h1 { 176 | font-weight: 200; 177 | font-size: var(--quote-tag-font-size); 178 | border-bottom: none; 179 | font-family: var(--base-font); 180 | line-height: 35px; 181 | } 182 | 183 | #write blockquote h1::before { 184 | content: "Tips"; 185 | background-color: var(--main-color); 186 | font-family: var(--title-font); 187 | color: white; 188 | font-size: var(--quote-tag-font-size); 189 | border-radius: .3em; 190 | padding: 3px 7px; 191 | margin-right: 15px; 192 | } 193 | 194 | #write blockquote h2 { 195 | font-weight: 200; 196 | font-size: var(--quote-tag-font-size); 197 | font-family: var(--base-font); 198 | line-height: 35px; 199 | } 200 | 201 | #write blockquote h2::before { 202 | content: "Warning"; 203 | background-color: rgb(207, 210, 16); 204 | font-family: var(--title-font); 205 | color: white; 206 | font-size: var(--quote-tag-font-size); 207 | border-radius: .3em; 208 | padding: 3px 7px; 209 | margin-right: 15px; 210 | } 211 | 212 | #write blockquote h3 { 213 | font-weight: 200; 214 | font-size: var(--quote-tag-font-size); 215 | font-family: var(--base-font); 216 | line-height: 35px; 217 | } 218 | 219 | #write blockquote h3::before { 220 | content: "Error"; 221 | background-color: rgb(224, 66, 66); 222 | font-family: var(--title-font); 223 | color: white; 224 | font-size: var(--quote-tag-font-size); 225 | border-radius: .3em; 226 | padding: 3px 7px; 227 | margin-right: 15px; 228 | float: none; 229 | position: relative; 230 | top: 0; 231 | left: 0; 232 | vertical-align: baseline; 233 | border-width: 0; 234 | } 235 | 236 | #write blockquote h4 { 237 | font-weight: 200; 238 | font-size: var(--quote-tag-font-size); 239 | font-family: var(--base-font); 240 | line-height: 35px; 241 | } 242 | 243 | #write blockquote h4::before { 244 | content: "Remind"; 245 | background-color: var(--shadow-color); 246 | font-family: var(--title-font); 247 | color: white; 248 | font-size: var(--quote-tag-font-size); 249 | border-radius: .3em; 250 | padding: 3px 7px; 251 | margin-right: 15px; 252 | float: none; 253 | position: relative; 254 | top: 0; 255 | left: 0; 256 | vertical-align: baseline; 257 | border-width: 0; 258 | } 259 | 260 | #write blockquote h5 { 261 | font-weight: 200; 262 | font-size: var(--quote-tag-font-size); 263 | font-family: var(--base-font); 264 | line-height: 35px; 265 | } 266 | 267 | #write blockquote h5::before { 268 | content: "Remind"; 269 | background-color: var(--shadow-color); 270 | font-family: var(--title-font); 271 | color: white; 272 | font-size: var(--quote-tag-font-size); 273 | border-radius: .3em; 274 | padding: 3px 7px; 275 | margin-right: 15px; 276 | float: none; 277 | position: relative; 278 | top: 0; 279 | left: 0; 280 | vertical-align: baseline; 281 | border-width: 0; 282 | } 283 | 284 | 285 | /* code block */ 286 | #write pre.md-fences { 287 | padding: 1rem 0.5rem 1rem; 288 | display: block; 289 | -webkit-overflow-scrolling: touch; 290 | /* box-shadow: 0 0 6px 2px rgba(151, 151, 151, 0.9); */ 291 | /* border-top: rgb(51, 51, 51) solid 35px; */ 292 | border-top: rgb(244, 244, 244) solid 35px; 293 | background-color: rgb(244, 244, 244); 294 | } 295 | 296 | 297 | pre.md-fences::before { 298 | content: ' '; 299 | background: var(--main-color); 300 | box-shadow: 23px 0 rgb(128, 128, 128), 45px 0 gray; 301 | border-radius: 50%; 302 | margin-top: -2.3rem; 303 | position: absolute; 304 | left: 15px; 305 | height: 12px; 306 | width: 12px; 307 | } 308 | 309 | #write pre.md-fences { 310 | line-height: 1.5rem; 311 | font-size: .9rem; 312 | font-weight: 300; 313 | border-radius: .7em; 314 | font-family: var(--monospace) !important; 315 | } 316 | 317 | /* inline code */ 318 | code { 319 | margin: 0 2px; 320 | padding: 4px 6px; 321 | color: #666363; 322 | white-space: pre-wrap; 323 | background: var(--light-color); 324 | border-radius: 8px; 325 | } 326 | 327 | #write blockquote code { 328 | margin: 0 2px; 329 | padding: 4px 6px; 330 | color: white; 331 | white-space: pre-wrap; 332 | background: var(--main-color); 333 | border-radius: 8px; 334 | } 335 | 336 | kbd, 337 | samp, 338 | tt, 339 | var { 340 | font-family: var(--monospace) !important; 341 | } 342 | 343 | 344 | /* YAML */ 345 | pre.md-meta-block { 346 | font-size: .8rem; 347 | min-height: .8rem; 348 | white-space: pre-wrap; 349 | background: var(--main-color); 350 | display: block; 351 | overflow-x: hidden; 352 | padding: 15px; 353 | font-family: var(--monospace); 354 | border-radius: 1.2em; 355 | color: white; 356 | caret-color: white; 357 | } 358 | 359 | 360 | /* Math */ 361 | #math-inline-preview-content .MathJax { 362 | color: white !important; 363 | } 364 | 365 | /* table */ 366 | #write table 367 | { 368 | width: 95%; 369 | border-collapse: collapse; 370 | text-align: center; 371 | font-family: var(--monospace); 372 | margin: 20px; 373 | } 374 | #write table td, table th 375 | { 376 | border: 1px solid transparent; 377 | color: rgb(18, 18, 18); 378 | height: 30px; 379 | padding: 10px; 380 | border-radius: .5em; 381 | transition: all 0.3s linear; 382 | -moz-transition: all 0.3s linear; 383 | -webkit-transition: all 0.3s linear; 384 | } 385 | #write table td { 386 | font-family: var(--title-font); 387 | } 388 | #write table thead th 389 | { 390 | background-color: var(--shadow-color); 391 | font-family: var(--title-font); 392 | font-size: 20px; 393 | color: white; 394 | font-weight: bolder; 395 | width: 100px; 396 | text-align: center; 397 | vertical-align: middle; 398 | padding: 10px; 399 | } 400 | table tr:nth-child(odd) 401 | { 402 | background: white; 403 | } 404 | table tr:nth-child(even) 405 | { 406 | background: var(--light-color); 407 | } 408 | table td:hover { 409 | background-color: var(--shadow-color) !important; 410 | color: white !important; 411 | transition: all 0.3s linear; 412 | -moz-transition: all 0.3s linear; 413 | -webkit-transition: all 0.3s linear; 414 | } 415 | 416 | 417 | /* main element consisting of your text */ 418 | p { 419 | color: var(--font-color); 420 | margin: 0 0 2em 0; 421 | font-weight: 500; 422 | line-height: 1.6; 423 | font-family: var(--base-font); 424 | } 425 | 426 | a { 427 | color: var(--main-color); 428 | font-weight: 500; 429 | text-decoration: none; 430 | text-decoration-style: none; 431 | cursor: pointer; 432 | padding: 0 3px 0 3px; 433 | } 434 | 435 | 436 | /* list */ 437 | 438 | ol, 439 | ul { 440 | padding-left: 2em; 441 | line-height: 2; 442 | } 443 | 444 | ul>li>ul>li { 445 | list-style-type: circle; 446 | } 447 | 448 | ul>li>ul>li>ul>li { 449 | list-style-type: square; 450 | } 451 | 452 | 453 | iframe { 454 | border-radius: 1.2em; 455 | box-shadow: 0 0 8px 3px rgba(181, 181, 182, 0.9); 456 | } 457 | 458 | 459 | /* checkbox */ 460 | .md-task-list-item:hover > input:before, 461 | input[type='checkbox']:hover:before { 462 | opacity: 1; 463 | transition: 0.3s; 464 | background-color: var(--shadow-color); 465 | } 466 | 467 | .task-list-item input::before { 468 | content: ""; 469 | display: inline-block; 470 | border-radius: .3em; 471 | vertical-align: middle; 472 | border: 1.2px solid var(--main-color); 473 | background-color: #ffffff; 474 | width: 1.1rem; 475 | height: 1.1rem; 476 | margin-left: -0.1rem; 477 | margin-right: 0.1rem; 478 | margin-top: -0.68rem; 479 | } 480 | 481 | .task-list-item input:checked::before { 482 | padding-left: 0.125em; 483 | content: '✔'; 484 | color:white; 485 | background-color: var(--main-color); 486 | font-size: 0.8rem; 487 | line-height: 0.95rem; 488 | margin-top: -0.68rem; 489 | transition: background-color 200ms ease-in-out; 490 | } 491 | 492 | 493 | 494 | 495 | 496 | #footer-word-count-label { 497 | font-family: var(--title-font) !important; 498 | color: white; 499 | padding: 1px 8px; 500 | border-radius: 1.0em; 501 | background-color: var(--main-color); 502 | } 503 | 504 | /* bg color when text is selected */ 505 | div::selection { 506 | background: var(--main-color); 507 | color: white; 508 | } 509 | 510 | div::-moz-selection { 511 | background: var(--main-color); 512 | color: white; 513 | } 514 | 515 | div::-webkit-selection { 516 | background: var(--main-color); 517 | color: white; 518 | } 519 | 520 | blockquote::selection { 521 | background: var(--main-color); 522 | color: white; 523 | } 524 | 525 | blockquote::-moz-selection { 526 | background: var(--main-color); 527 | color: white; 528 | } 529 | 530 | blockquote::-webkit-selection { 531 | background: var(--main-color); 532 | color: white; 533 | } 534 | 535 | p::selection { 536 | background: var(--main-color); 537 | color: white; 538 | } 539 | 540 | p::-moz-selection { 541 | background: var(--main-color); 542 | color: white; 543 | } 544 | 545 | p::-webkit-selection { 546 | background: var(--main-color); 547 | color: white; 548 | } 549 | 550 | label::selection { 551 | background: var(--main-color); 552 | color: white; 553 | } 554 | 555 | label::-moz-selection { 556 | background: var(--main-color); 557 | color: white; 558 | } 559 | 560 | label::-webkit-selection { 561 | background: var(--main-color); 562 | color: white; 563 | } 564 | 565 | span::selection { 566 | background: var(--main-color); 567 | color: white; 568 | } 569 | 570 | span::-moz-selection { 571 | background: var(--main-color); 572 | color: white; 573 | } 574 | 575 | span::-webkit-selection { 576 | background: var(--main-color); 577 | color: white; 578 | } 579 | 580 | h1::selection { 581 | background: var(--main-color); 582 | color: white; 583 | } 584 | 585 | h1::-moz-selection { 586 | background: var(--main-color); 587 | color: white; 588 | } 589 | 590 | h1::-webkit-selection { 591 | background: var(--main-color); 592 | color: white; 593 | } 594 | 595 | h2::selection { 596 | background: var(--main-color); 597 | color: white; 598 | } 599 | 600 | h2::-moz-selection { 601 | background: var(--main-color); 602 | color: white; 603 | } 604 | 605 | h2::-webkit-selection { 606 | background: var(--main-color); 607 | color: white; 608 | } 609 | 610 | h3::selection { 611 | background: var(--main-color); 612 | color: white; 613 | } 614 | 615 | h3::-moz-selection { 616 | background: var(--main-color); 617 | color: white; 618 | } 619 | 620 | h3::-webkit-selection { 621 | background: var(--main-color); 622 | color: white; 623 | } 624 | 625 | h4::selection { 626 | background: var(--main-color); 627 | color: white; 628 | } 629 | 630 | h4::-moz-selection { 631 | background: var(--main-color); 632 | color: white; 633 | } 634 | 635 | h4::-webkit-selection { 636 | background: var(--main-color); 637 | color: white; 638 | } 639 | 640 | h5::selection { 641 | background: var(--main-color); 642 | color: white; 643 | } 644 | 645 | h5::-moz-selection { 646 | background: var(--main-color); 647 | color: white; 648 | } 649 | 650 | h5::-webkit-selection { 651 | background: var(--main-color); 652 | color: white; 653 | } 654 | 655 | code::selection { 656 | background: var(--main-color); 657 | color: white; 658 | } 659 | 660 | code::-moz-selection { 661 | background: var(--main-color); 662 | color: white; 663 | } 664 | 665 | code::-webkit-selection { 666 | background: var(--main-color); 667 | color: white; 668 | } 669 | 670 | 671 | /* outside */ 672 | 673 | 674 | #megamenu-content { 675 | background-color: rgba(255, 255, 255, 0.1); 676 | } 677 | 678 | #megamenu-menu-panel { 679 | font-family: var(--title-font); 680 | padding: 10px; 681 | } 682 | 683 | .megamenu-menu-panel { 684 | padding: 10px; 685 | } 686 | 687 | 688 | .megamenu-menu-header-title-menu { 689 | color: var(--sidebar-font-color); 690 | } 691 | 692 | .megamenu-menu-header-title-back { 693 | color: var(--sidebar-font-color); 694 | } 695 | 696 | 697 | /* sidebar */ 698 | .megamenu-menu-header { 699 | width: 60%; 700 | text-align:center; 701 | border-bottom: solid 3px var(--main-color); 702 | } 703 | #megamenu-menu-sidebar { 704 | background-color: rgba(255, 255, 255, 0.1); 705 | color: var(--sidebar-font-color); 706 | box-shadow: 0 0 8px 4px rgb(100 100 100 / 80%); 707 | margin-top: 3%; 708 | height: 92%; 709 | border-radius: 0 4em 4em 0; 710 | } 711 | #megamenu-back-btn { 712 | border-radius: 1.2em; 713 | color: var(--main-color); 714 | transition: all linear .3s; 715 | padding: 0 0 10px; 716 | } 717 | 718 | #megamenu-back-btn:hover { 719 | background-color: var(--main-color); 720 | color: white; 721 | border: 2px solid white; 722 | transition: all linear .3s; 723 | } 724 | 725 | #megamenu-menu-list > li { 726 | transition: all linear .3s; 727 | } 728 | 729 | #megamenu-menu-list > li:hover { 730 | transition: all linear .3s; 731 | border-top-left-radius: 1.2em; 732 | border-bottom-left-radius: 1.2em; 733 | } 734 | 735 | #megamenu-menu-list > li:focus { 736 | transition: all linear .3s; 737 | color : white; 738 | background-color: var(--shadow-color); 739 | width: fit-content; 740 | border-top-right-radius: 1.2em; 741 | border-bottom-right-radius: 1.2em; 742 | } 743 | 744 | .dropdown-menu .divider { 745 | width: 30%; 746 | color: var(--main-color); 747 | background-color: var(--main-color); 748 | } 749 | .megamenu-menu-list li a { 750 | transition: all linear .3s; 751 | width: fit-content; 752 | padding-right: 60px; 753 | } 754 | 755 | .megamenu-menu-list li a:hover { 756 | transition: all linear .3s; 757 | color: white !important; 758 | background-color: var(--main-color) !important; 759 | border-bottom-right-radius: 2em; 760 | border-top-right-radius: 2em; 761 | } 762 | 763 | .megamenu-menu-list li a.active, .megamenu-menu-list:not(.saved) li a:hover { 764 | color: white !important; 765 | background-color: var(--main-color) !important; 766 | border-bottom-right-radius: 2em; 767 | border-top-right-radius: 2em; 768 | } 769 | 770 | 771 | /* open */ 772 | #m-open-local, 773 | #m-import-local { 774 | border-radius: 1.2em; 775 | } 776 | 777 | #m-open-local:hover, 778 | #m-import-local:hover { 779 | border: 1px solid var(--shadow-color); 780 | } 781 | 782 | #recent-file-panel-search-input { 783 | border-radius: 1.2em; 784 | transition: all linear .3s; 785 | font-family: var(--title-font); 786 | } 787 | #recent-file-panel-action-btn { 788 | border-radius: 1.2em; 789 | } 790 | 791 | #recent-file-panel-search-input:hover { 792 | transition: all linear .3s; 793 | box-shadow: 0 0 10px 3px var(--shadow-color); 794 | } 795 | 796 | #recent-file-panel-search-input:focus { 797 | transition: all linear .3s; 798 | color: white; 799 | border: none; 800 | background-color: var(--shadow-color); 801 | } 802 | 803 | /* side bar Ctrl Shift 2 */ 804 | /* .typora-node.pin-outline:not(.megamenu-opened):not(.typora-sourceview-on) #typora-sidebar { 805 | display: block; 806 | left: 0; 807 | transition: left .3s; 808 | border-radius: 0em 3em 3em 0em; 809 | box-shadow: 0 0 8px 3px rgb(100 100 100 / 80%); 810 | margin-top: 20px; 811 | margin-bottom: 5%; 812 | height: 95%; 813 | padding-right: 10px; 814 | } */ 815 | 816 | .info-panel-tab-border { 817 | color: var(--main-color) !important; 818 | background-color: var(--main-color) !important; 819 | } 820 | 821 | .outline-content { 822 | padding: 3px 18px 3px 0; 823 | } 824 | 825 | .outline-item { 826 | margin-left: -20px; 827 | margin-right: -20px; 828 | border-left: 20px solid transparent; 829 | border-right: 16px solid transparent; 830 | } 831 | 832 | .outline-item:hover { 833 | background-color: var(--shadow-color); 834 | color: white; 835 | } 836 | 837 | .active-tab-files #info-panel-tab-file .info-panel-tab-title { 838 | background-color: var(--main-color); 839 | color: white; 840 | padding: 5px 5px; 841 | border-radius: 1.2em; 842 | transition: all linear .3s; 843 | } 844 | 845 | .active-tab-outline #info-panel-tab-outline .info-panel-tab-title { 846 | background-color: var(--main-color); 847 | color: white; 848 | padding: 5px 5px; 849 | border-radius: 1.2em; 850 | transition: all linear .3s; 851 | } 852 | 853 | .ty-show-search #info-panel-tab-search .info-panel-tab-title { 854 | background-color: var(--main-color); 855 | color: white; 856 | padding: 5px 5px; 857 | border-radius: 1.2em; 858 | transition: all linear .3s; 859 | } 860 | 861 | 862 | #file-library-search-input { 863 | border-radius: .5em; 864 | } 865 | 866 | #file-library-search-input:focus { 867 | border: 2px solid var(--main-color); 868 | } 869 | 870 | .info-panel-tab-border { 871 | display: none; 872 | } 873 | div#file-library-list-children { 874 | transition: all linear .3s; 875 | } 876 | 877 | .file-list-item.active { 878 | border-top-right-radius: 2.2em; 879 | border-bottom-right-radius: 2.2em; 880 | width: fit-content; 881 | background-color: var(--main-color) !important; 882 | color: white; 883 | transition: all linear .3s; 884 | } 885 | 886 | .outline-item-active { 887 | border-top-right-radius: 2.2em; 888 | border-bottom-right-radius: 2.2em; 889 | width: fit-content; 890 | background-color: var(--main-color) !important; 891 | color: white; 892 | transition: all linear .3s; 893 | } 894 | 895 | 896 | /* theme */ 897 | .theme-preview-div.active, .theme-preview-div.active:hover { 898 | border-color: var(--main-color); 899 | } 900 | #theme-preview-grid { 901 | max-width: 100% !important; 902 | } 903 | #open-theme-folder-btn { 904 | transition: all .3s; 905 | border-radius: 2em; 906 | border: none; 907 | color: white !important; 908 | background-color: var(--main-color); 909 | } 910 | #open-theme-folder-btn:hover { 911 | transition: all .3s; 912 | color: white !important; 913 | background-color: var(--shadow-color); 914 | } 915 | 916 | /* export */ 917 | .long-btn { 918 | transition: all .3s; 919 | border-radius: 2em; 920 | border: 2px solid var(--main-color); 921 | color: var(--main-color); 922 | } 923 | 924 | .long-btn:hover { 925 | transition: all .3s; 926 | color: white !important; 927 | background-color: var(--main-color); 928 | } 929 | 930 | .long-btn-wrap { 931 | padding: 10px; 932 | } 933 | 934 | .megamenu-section-export { 935 | font-family: var(--title-font) !important; 936 | } 937 | 938 | 939 | .megamenu-menu-panel h1 { 940 | padding-bottom: 10px; 941 | width: fit-content !important; 942 | border-bottom: var(--main-color) solid 3px; 943 | } 944 | 945 | .megamenu-menu-panel h2::before { 946 | content: "H2"; 947 | border-radius: .3em; 948 | font-size: 25px; 949 | padding: 3px 7px; 950 | margin: 5px 15px 5px 1px; 951 | background-color: var(--main-color); 952 | color: white; 953 | } 954 | 955 | 956 | /* modal exit dialog */ 957 | .btn-primary { 958 | transition: all .3 linear; 959 | border-radius: 1.2em; 960 | background-color: var(--main-color); 961 | } 962 | 963 | .btn-default { 964 | transition: all .3 linear; 965 | border-radius: 1.2em; 966 | border: var(--main-color) 3px solid; 967 | color: var(--main-color); 968 | background-color: white; 969 | } 970 | 971 | .btn-primary:hover, 972 | .btn-default:hover { 973 | transition: all .3 linear; 974 | color: white; 975 | background-color: var(--shadow-color); 976 | } 977 | 978 | .btn-primary:focus, 979 | .btn-default:focus { 980 | transition: all .3 linear; 981 | color: white; 982 | background-color: var(--main-color); 983 | } 984 | 985 | .modal-content { 986 | border-radius: 1.5em; 987 | border: none; 988 | } 989 | 990 | .ImgCaption { 991 | padding-top: 0; 992 | margin-top: 0; 993 | border-bottom: 2px solid var(--shadow-color); 994 | width: fit-content; 995 | } 996 | 997 | /* Perference */ 998 | .nav-group-item-item:hover { 999 | transition: all .3s; 1000 | border: 2px solid var(--main-color); 1001 | } 1002 | .nav-group-item.active { 1003 | color: white; 1004 | font-family: var(--title-font); 1005 | transition: all .3s; 1006 | border-radius: 1.5em; 1007 | padding: 6px 11px 6px 11px; 1008 | } 1009 | .nav-group-item { 1010 | transition: all .3s; 1011 | border-radius: 1.5em; 1012 | width: fit-content; 1013 | cursor: pointer; 1014 | } 1015 | .nav-group-item.active, .nav-group-item:active { 1016 | background-color: var(--main-color) !important; 1017 | color: white !important; 1018 | } 1019 | .pane-group { 1020 | font-family: var(--title-font); 1021 | } 1022 | 1023 | input:not([type=range]):not([type=color]) { 1024 | outline: none; 1025 | border: 2px solid var(--main-color); 1026 | border-radius: .7em; 1027 | font-size: 16px; 1028 | } 1029 | 1030 | input:not([type=range]):not([type=color]):focus { 1031 | border-radius: .7em; 1032 | color: white; 1033 | background-color: var(--main-color); 1034 | box-shadow: 0 0 6px 3px var(--shadow-color); 1035 | transition: all .3s linear; 1036 | } 1037 | 1038 | .pane select, 1039 | .pane .btn { 1040 | border-radius: 0.7em; 1041 | cursor: pointer; 1042 | margin-right: 10px; 1043 | } 1044 | 1045 | .pane .btn:hover { 1046 | color: white !important; 1047 | transition: all .3s linear; 1048 | background-color: var(--main-color); 1049 | } 1050 | 1051 | .label-input-group td:hover { 1052 | box-shadow: none; 1053 | } 1054 | 1055 | .label-input-group .row:hover { 1056 | color: black; 1057 | background-color: white; 1058 | } 1059 | 1060 | #write.enable-diagrams>[mermaid-type=gantt].md-fences:not(.md-focus) { 1061 | width: inherit !important; 1062 | margin-left: inherit !important; 1063 | } 1064 | 1065 | /* TODO fix the bug below */ 1066 | #footer-word-count-info table, #footer-word-count-info td, #footer-word-count-info tr { 1067 | border: none!important; 1068 | background: inherit !important; 1069 | font-size: 13.5px!important; 1070 | text-align: left!important; 1071 | padding: 0; 1072 | -webkit-user-select: initial; 1073 | user-select: initial; 1074 | margin: 0!important; 1075 | line-height: 1.8; 1076 | } 1077 | 1078 | .ty-tooltip { 1079 | border-radius: 0.7em !important; 1080 | } 1081 | 1082 | #recent-file-panel-action-btn { 1083 | border-radius: 0.7em; 1084 | } 1085 | 1086 | .outline-content li, .outline-content ul { 1087 | padding-left: 10px; 1088 | } 1089 | 1090 | 1091 | .file-node-content { 1092 | transition: all 0.15s linear; 1093 | -moz-transition: all 0.15s linear; 1094 | -webkit-transition: all 0.15s linear; 1095 | color: var(--font-color); 1096 | padding: 5px; 1097 | } 1098 | 1099 | 1100 | .file-node-content:hover { 1101 | transition: all 0.15s linear; 1102 | -moz-transition: all 0.15s linear; 1103 | -webkit-transition: all 0.15s linear; 1104 | color: var(--font-color); 1105 | cursor: pointer; 1106 | } 1107 | 1108 | .file-node-content:focus { 1109 | transition: all 0.15s linear; 1110 | -moz-transition: all 0.15s linear; 1111 | -webkit-transition: all 0.15s linear; 1112 | cursor: pointer; 1113 | } 1114 | 1115 | #file-library .active { 1116 | transition: all 0.15s linear; 1117 | -moz-transition: all 0.15s linear; 1118 | -webkit-transition: all 0.15s linear; 1119 | color: var(--light-color); 1120 | cursor: pointer; 1121 | } 1122 | 1123 | .file-tree-node.active>.file-node-background { 1124 | transition: all 0.15s linear; 1125 | -moz-transition: all 0.15s linear; 1126 | -webkit-transition: all 0.15s linear; 1127 | background-color: var(--main-color); 1128 | border-left: var(--small-dark-color); 1129 | border-color: var(--small-dark-color); 1130 | } 1131 | -------------------------------------------------------------------------------- /haru/Cascadia-Code-Regular-2.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LSTM-Kirigaya/typora-haru-theme/285e0cf7d61a7f447224f40730197e664d584641/haru/Cascadia-Code-Regular-2.ttf -------------------------------------------------------------------------------- /haru/GlowSansSC-Normal-Book.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LSTM-Kirigaya/typora-haru-theme/285e0cf7d61a7f447224f40730197e664d584641/haru/GlowSansSC-Normal-Book.woff2 -------------------------------------------------------------------------------- /haru/Open-Sans-2.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LSTM-Kirigaya/typora-haru-theme/285e0cf7d61a7f447224f40730197e664d584641/haru/Open-Sans-2.ttf -------------------------------------------------------------------------------- /haru/RobotoSlab-Regular-2.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LSTM-Kirigaya/typora-haru-theme/285e0cf7d61a7f447224f40730197e664d584641/haru/RobotoSlab-Regular-2.ttf -------------------------------------------------------------------------------- /haru/codeblock.dark.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /* CSS Document */ 3 | 4 | /** code highlight */ 5 | 6 | .cm-s-inner .cm-variable, 7 | .cm-s-inner .cm-operator, 8 | .cm-s-inner .cm-property { 9 | color: #b8bfc6; 10 | } 11 | 12 | .cm-overlay { 13 | color: rgb(248, 242, 255); 14 | } 15 | 16 | .cm-s-inner .cm-keyword { 17 | color: #c983d8; 18 | } 19 | 20 | .cm-s-inner .cm-tag { 21 | color: #7DF46A; 22 | } 23 | 24 | .cm-s-inner .cm-attribute { 25 | color: #7575E4; 26 | } 27 | 28 | .CodeMirror div.CodeMirror-cursor { 29 | border-left: 1px solid #b8bfc6; 30 | z-index: 3; 31 | } 32 | 33 | .cm-s-inner .cm-string { 34 | color: #98C360; 35 | } 36 | 37 | .cm-s-inner .cm-comment, 38 | .cm-s-inner.cm-comment { 39 | color: #DA924A; 40 | } 41 | 42 | .cm-s-inner .cm-header, 43 | .cm-s-inner .cm-def, 44 | .cm-s-inner.cm-header, 45 | .cm-s-inner.cm-def { 46 | color: #8d8df0; 47 | } 48 | 49 | .cm-s-inner .cm-quote, 50 | .cm-s-inner.cm-quote { 51 | color: #57ac57; 52 | } 53 | 54 | .cm-s-inner .cm-hr { 55 | color: #d8d5d5; 56 | } 57 | 58 | .cm-s-inner .cm-link { 59 | color: #d3d3ef; 60 | } 61 | 62 | .cm-s-inner .cm-negative { 63 | color: #d95050; 64 | } 65 | 66 | .cm-s-inner .cm-positive { 67 | color: #50e650; 68 | } 69 | 70 | .cm-s-inner .cm-string-2 { 71 | color: #f50; 72 | } 73 | 74 | .cm-s-inner .cm-meta, 75 | .cm-s-inner .cm-qualifier { 76 | color: #b7b3b3; 77 | } 78 | 79 | .cm-s-inner .cm-builtin { 80 | color: #E6C07B; 81 | } 82 | 83 | .cm-s-inner .cm-bracket { 84 | color: #997; 85 | } 86 | 87 | .cm-s-inner .cm-atom, 88 | .cm-s-inner.cm-atom { 89 | color: #84B6CB; 90 | } 91 | 92 | .cm-s-inner .cm-number { 93 | color: #64AB8F; 94 | } 95 | 96 | .cm-s-inner .cm-variable { 97 | color: #b8bfc6; 98 | } 99 | 100 | .cm-s-inner .cm-variable-2 { 101 | color: #9FBAD5; 102 | } 103 | 104 | .cm-s-inner .cm-variable-3 { 105 | color: #1cc685; 106 | } 107 | 108 | .CodeMirror-selectedtext, 109 | .CodeMirror-selected { 110 | background: #4a89dc; 111 | color: #fff !important; 112 | text-shadow: none; 113 | } 114 | 115 | .CodeMirror-gutters { 116 | border-right: none; 117 | } -------------------------------------------------------------------------------- /haru/mermaid.dark.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --mermaid-theme: night; 3 | } 4 | 5 | [lang='mermaid'] .label { 6 | color: #333; 7 | } -------------------------------------------------------------------------------- /haru/sourcemode.dark.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /* CSS Document */ 3 | 4 | /** markdown source **/ 5 | .cm-s-typora-default .cm-header, 6 | .cm-s-typora-default .cm-property 7 | { 8 | color: #cebcca; 9 | } 10 | 11 | .CodeMirror.cm-s-typora-default div.CodeMirror-cursor{ 12 | border-left: 3px solid #b8bfc6; 13 | } 14 | 15 | .cm-s-typora-default .cm-comment { 16 | color: #9FB1FF; 17 | } 18 | 19 | .cm-s-typora-default .cm-string { 20 | color: #A7A7D9 21 | } 22 | 23 | .cm-s-typora-default .cm-atom, .cm-s-typora-default .cm-number { 24 | color: #848695; 25 | font-style: italic; 26 | } 27 | 28 | .cm-s-typora-default .cm-link { 29 | color: #95B94B; 30 | } 31 | 32 | .cm-s-typora-default .CodeMirror-activeline-background { 33 | background: rgba(51, 51, 51, 0.72); 34 | } 35 | 36 | .cm-s-typora-default .cm-comment, .cm-s-typora-default .cm-code { 37 | color: #8aa1e1; 38 | } --------------------------------------------------------------------------------