├── ava-diana └── Quicksand │ ├── Quicksand-Bold.ttf │ ├── Quicksand-Light.ttf │ ├── Quicksand-Medium.ttf │ ├── Quicksand-Regular.ttf │ └── OFL.txt ├── README.md └── ava-diana.css /ava-diana/Quicksand/Quicksand-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mingluosunyi/typora-theme-ava-diana/HEAD/ava-diana/Quicksand/Quicksand-Bold.ttf -------------------------------------------------------------------------------- /ava-diana/Quicksand/Quicksand-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mingluosunyi/typora-theme-ava-diana/HEAD/ava-diana/Quicksand/Quicksand-Light.ttf -------------------------------------------------------------------------------- /ava-diana/Quicksand/Quicksand-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mingluosunyi/typora-theme-ava-diana/HEAD/ava-diana/Quicksand/Quicksand-Medium.ttf -------------------------------------------------------------------------------- /ava-diana/Quicksand/Quicksand-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mingluosunyi/typora-theme-ava-diana/HEAD/ava-diana/Quicksand/Quicksand-Regular.ttf -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # typora-theme-ava-diana 2 | A typora theme for Ava and Diana,two lovely idols. 3 | 4 | 一个typora主题，写给向晚和嘉然小姐，本来是打算写珈乐主题的，但是紫色配色上真的不是很nice，最后迫不得已选了比较好看的蓝粉配色。 5 | 6 | ## features (特点) 7 | + good user interface.(人机交互不错) 8 | + owns codemirror style.(代码块主题) 9 | + transition.(过渡效果) 10 | 11 | ## Screen Shots 12 | 13 | ![img1](https://cdn.jsdelivr.net/gh/mingluosunyi/pictures/typora%E5%B1%95%E7%A4%BA1.png) 14 | ![img2](https://cdn.jsdelivr.net/gh/mingluosunyi/pictures/typora.png) 15 | ![img3](https://cdn.jsdelivr.net/gh/mingluosunyi/pictures/typora%E5%B1%95%E7%A4%BA2.png) 16 | ![img4](https://cdn.jsdelivr.net/gh/mingluosunyi/pictures/typora%E5%B1%95%E7%A4%BA3.png) 17 | 18 | ## install 19 | 1. Download `ava-diana.css` and `ava-diana` folder. 20 | 21 | (下载`ava-diana.css`和`ava-diana`文件夹。) 22 | 23 | 2. Open Theme Folder from `Preference Panel` → `Appearance` section. 24 | 25 | (在Typora的`Preference`菜单中打开`Appearance`。) 26 | 27 | 3. Copy `ava-diana.css` and `ava-diana` folder into the newly opened folder. 28 | 29 | (把下载的`ava-diana.css`和`ava-diana`文件夹复制到新打开的文件夹内。) 30 | 31 | 4. Restart typora, then select `ava-diana` theme from `Themes` menu. 32 | 33 | (重启Typora，选择主题。) 34 | 35 | > Designed and tested on MacOS. Not fully tested, but should work for Windows/Linux. 36 | -------------------------------------------------------------------------------- /ava-diana/Quicksand/OFL.txt: -------------------------------------------------------------------------------- 1 | Copyright 2011 The Quicksand Project Authors (https://github.com/andrew-paglinawan/QuicksandFamily), with Reserved Font Name “Quicksand”. 2 | 3 | This Font Software is licensed under the SIL Open Font License, Version 1.1. 4 | This license is copied below, and is also available with a FAQ at: 5 | http://scripts.sil.org/OFL 6 | 7 | 8 | ----------------------------------------------------------- 9 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 10 | ----------------------------------------------------------- 11 | 12 | PREAMBLE 13 | The goals of the Open Font License (OFL) are to stimulate worldwide 14 | development of collaborative font projects, to support the font creation 15 | efforts of academic and linguistic communities, and to provide a free and 16 | open framework in which fonts may be shared and improved in partnership 17 | with others. 18 | 19 | The OFL allows the licensed fonts to be used, studied, modified and 20 | redistributed freely as long as they are not sold by themselves. The 21 | fonts, including any derivative works, can be bundled, embedded, 22 | redistributed and/or sold with any software provided that any reserved 23 | names are not used by derivative works. The fonts and derivatives, 24 | however, cannot be released under any other type of license. The 25 | requirement for fonts to remain under this license does not apply 26 | to any document created using the fonts or their derivatives. 27 | 28 | DEFINITIONS 29 | "Font Software" refers to the set of files released by the Copyright 30 | Holder(s) under this license and clearly marked as such. This may 31 | include source files, build scripts and documentation. 32 | 33 | "Reserved Font Name" refers to any names specified as such after the 34 | copyright statement(s). 35 | 36 | "Original Version" refers to the collection of Font Software components as 37 | distributed by the Copyright Holder(s). 38 | 39 | "Modified Version" refers to any derivative made by adding to, deleting, 40 | or substituting -- in part or in whole -- any of the components of the 41 | Original Version, by changing formats or by porting the Font Software to a 42 | new environment. 43 | 44 | "Author" refers to any designer, engineer, programmer, technical 45 | writer or other person who contributed to the Font Software. 46 | 47 | PERMISSION & CONDITIONS 48 | Permission is hereby granted, free of charge, to any person obtaining 49 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 50 | redistribute, and sell modified and unmodified copies of the Font 51 | Software, subject to the following conditions: 52 | 53 | 1) Neither the Font Software nor any of its individual components, 54 | in Original or Modified Versions, may be sold by itself. 55 | 56 | 2) Original or Modified Versions of the Font Software may be bundled, 57 | redistributed and/or sold with any software, provided that each copy 58 | contains the above copyright notice and this license. These can be 59 | included either as stand-alone text files, human-readable headers or 60 | in the appropriate machine-readable metadata fields within text or 61 | binary files as long as those fields can be easily viewed by the user. 62 | 63 | 3) No Modified Version of the Font Software may use the Reserved Font 64 | Name(s) unless explicit written permission is granted by the corresponding 65 | Copyright Holder. This restriction only applies to the primary font name as 66 | presented to the users. 67 | 68 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 69 | Software shall not be used to promote, endorse or advertise any 70 | Modified Version, except to acknowledge the contribution(s) of the 71 | Copyright Holder(s) and the Author(s) or with their explicit written 72 | permission. 73 | 74 | 5) The Font Software, modified or unmodified, in part or in whole, 75 | must be distributed entirely under this license, and must not be 76 | distributed under any other license. The requirement for fonts to 77 | remain under this license does not apply to any document created 78 | using the Font Software. 79 | 80 | TERMINATION 81 | This license becomes null and void if any of the above conditions are 82 | not met. 83 | 84 | DISCLAIMER 85 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 86 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 87 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 88 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 89 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 90 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 91 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 92 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 93 | OTHER DEALINGS IN THE FONT SOFTWARE. 94 | -------------------------------------------------------------------------------- /ava-diana.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --blcqd-bg-color:#f8f8f8; 3 | --shadow-color:#c3c5c7; 4 | --checkbox-color: #f8a9b5; 5 | --checked-font-color: #eee; 6 | --bg-color: #ffffff; /*改变背景色*/ 7 | --text-color: #333333; /*改变文字颜色*/ 8 | --md-char-color: #C7C5C5; /*改变元字符的颜色，例如 markdown 中的“*”*/ 9 | --meta-content-color: #C7C5C5; /*改变元内容的颜色，例如 markdown 中的图像文本和链接地址*/ 10 | 11 | --primary-color: #428bca; /*主按钮的颜色*/ 12 | --primary-btn-border-color: #285e8e; 13 | --primary-btn-text-color: #fff; 14 | 15 | --window-border: 1px solid #eee; /*边栏等的边框*/ 16 | 17 | --active-file-bg-color: #eee; /*文件树或文件列表中当前项的背景色*/ 18 | --active-file-text-color: inherit; 19 | --active-file-border-color: #777; 20 | 21 | --side-bar-bg-color: var(--bg-color); /*改变边栏颜色*/ 22 | --item-hover-bg-color: rgba(229, 229, 229, 0.59); /*鼠标悬停时控件项的背景，如侧边栏中的菜单*/ 23 | --item-hover-text-color: inherit; 24 | --monospace: monospace; /*代码的等宽字体*/ 25 | } 26 | 27 | /*font-family*/ 28 | 29 | @font-face { 30 | font-family: 'Quicksand'; 31 | src: url('ava-diana/Quicksand/Quicksand-Regular.ttf') 32 | } 33 | 34 | @font-face { 35 | font-family: 'Quicksand-bold'; 36 | src: url('ava-diana/Quicksand/Quicksand-Bold.ttf') 37 | } 38 | 39 | 40 | html， 41 | body, 42 | #write { 43 | font-family: "Quicksand",'Arial Hebrew Scholar'; 44 | font-size: 16px; 45 | color: var(--text-color); 46 | } 47 | 48 | #write { 49 | min-width: 574px; 50 | } 51 | 52 | /*YAML Front Matter*/ 53 | 54 | #write pre.md-meta-block { 55 | white-space: pre-wrap; 56 | min-height: 30px; 57 | background-image: linear-gradient(177deg,#fbebef, #dff0f5); 58 | padding: 1.5em; 59 | padding-left: calc(1000px + 1.5em); 60 | font-weight: 300; 61 | font-size: 1em; 62 | padding-bottom: 1.5em; 63 | padding-top: 3em; 64 | margin-top: -1.5em; 65 | color: rgba(12, 12, 12, 0.4); 66 | margin-left: -1000px; 67 | margin-right: -1000px; 68 | margin-bottom: 1.5em; 69 | font-family: var(--monospace); 70 | } 71 | 72 | /*#write pre.md-meta-block::selection { 73 | text-shadow: none; 74 | background: #B8A6D9; 75 | color: hsla(81, 40%, 75%, 1); 76 | }*/ 77 | 78 | /*headings*/ 79 | h1 { 80 | font-size: 3.250rem; 81 | font-weight: 500; 82 | letter-spacing: 0.03em; 83 | line-height: 4rem; 84 | margin: 0 0 1.75rem; 85 | padding: 20px 30px; 86 | text-align: center; 87 | text-transform: uppercase; 88 | margin-top: 4rem; 89 | margin-bottom: 4rem; 90 | color: #464b1f; 91 | } 92 | 93 | h2 { 94 | font-size: 1.999rem; 95 | font-weight: normal; 96 | letter-spacing: 0.02em; 97 | line-height: 3rem; 98 | margin: 0 0 1.9375rem; 99 | /*text-transform: uppercase;*/ 100 | margin-top: 3rem; 101 | color: #464b1f; 102 | } 103 | 104 | h3 { 105 | font-size: 1.413rem; 106 | font-weight: normal; 107 | letter-spacing: 0.02em; 108 | line-height: 3rem; 109 | /*text-transform: uppercase;*/ 110 | margin-top: 2rem; 111 | margin-left: 2rem; 112 | color: #464b1f; 113 | } 114 | 115 | h4 { 116 | font-weight: normal; 117 | letter-spacing: 0.02em; 118 | font-size: 1.250rem; 119 | line-height: 2rem; 120 | /*text-transform: uppercase;*/ 121 | margin-top: 1rem; 122 | margin-left: 3rem; 123 | color: #464b1f; 124 | } 125 | 126 | h5 { 127 | font-size: 1.150rem; 128 | /*text-transform: uppercase;*/ 129 | color: #464b1f; 130 | margin-left: 3.5rem; 131 | } 132 | 133 | h6 { 134 | font-size: 1rem; 135 | /*text-transform: uppercase;*/ 136 | margin-left: 4rem; 137 | color: #464b1f; 138 | } 139 | 140 | /*blockquote*/ 141 | 142 | blockquote::before { 143 | content: ''; 144 | position: absolute; 145 | left: 0; 146 | top: 0; 147 | width: calc(.1rem + 2.43px); 148 | height: 100%; 149 | transform:translateX(calc(-.05rem - 1.215px)); 150 | background-image: linear-gradient(#fbebef, #dff0f5); 151 | border-radius: calc(.5rem + 0.25%) 0 0 calc(.5rem + 0.25%); 152 | z-index: 1; 153 | } 154 | 155 | @media (min-width: 575px) { 156 | blockquote::before { 157 | width: calc(.1rem + 0.5%); 158 | } 159 | } 160 | 161 | blockquote { 162 | position: relative; 163 | word-spacing: .06em; 164 | margin: 0 1rem; 165 | padding: 1rem calc(.5rem + 5.13px); 166 | /*border-left: solid .5rem var(--select-text-bg-color);*/ 167 | /*border-radius: .5rem 1rem 1rem .5rem;*/ 168 | background-color: var(--blcqd-bg-color); 169 | line-height: 1.6; 170 | /*box-shadow: 3px 3px 3px 1px var(--shadow-color);*/ 171 | border-radius: 0 calc(.5rem + 0.25%) calc(.5rem + 0.25%) 0; 172 | } 173 | 174 | @media (min-width: 575px) { 175 | blockquote { 176 | padding: 1rem calc(.5rem + 1%); 177 | border-radius: 0 calc(.5rem + 0.25%) calc(.5rem + 0.25%) 0; 178 | } 179 | } 180 | 181 | blockquote::after { 182 | content: ''; 183 | position: absolute; 184 | top: 0; 185 | left: 0; 186 | bottom: 0; 187 | right: 0; 188 | /*box-shadow: -3px 3px 3px 1px var(--shadow-color);*/ 189 | z-index: 3; 190 | } 191 | 192 | blockquote blockquote { 193 | box-shadow: none; 194 | } 195 | 196 | /*list*/ 197 | 198 | #write ul li { 199 | list-style-type: none; 200 | position: relative; 201 | } 202 | 203 | #write ul li::before { 204 | content: ' - '; 205 | font-family: 'Quicksand-bold'; 206 | position: absolute; 207 | font-weight: bold; 208 | font-size: 2rem; 209 | color: #aabfc5; 210 | transform: translate(-1.4rem,-.75rem); 211 | } 212 | 213 | #write ul li li::before { 214 | content: ' · '; 215 | font-family: 'Quicksand-bold'; 216 | position: absolute; 217 | font-size: 2rem; 218 | font-weight: bold; 219 | color: #aabfc5; 220 | transform: translate(-1rem,-.75rem); 221 | } 222 | 223 | /*task list*/ 224 | #write .md-task-list-item{ 225 | transition: all .2s ease-in-out 0s; 226 | transform: translateX(1.4rem); 227 | } 228 | 229 | #write .md-task-list-item::before { 230 | content: ''; 231 | } 232 | 233 | #write input+p { 234 | display: inline-block; 235 | } 236 | 237 | 238 | #write input[type='checkbox'] { 239 | appearance: none; 240 | -moz-appearance: none; 241 | -webkit-appearance: none; 242 | position: relative; 243 | } 244 | 245 | #write input[type='checkbox']::before { 246 | content: ''; 247 | position: absolute; 248 | transform: translate(calc(-1.1rem - 10px),calc(-1rem)); 249 | /*transform: translate(0px,calc(-1rem));*/ 250 | height: 1.4rem; 251 | width: 1.4rem; 252 | border-radius: 50%; 253 | padding: .15rem; 254 | background-color: white; 255 | background-clip: content-box; 256 | box-sizing: border-box; 257 | border: solid .15em #c3c4d0; 258 | /*background-color: deepskyblue;*/ 259 | } 260 | 261 | #write input[type='checkbox']:checked::before { 262 | content: ''; 263 | position: absolute; 264 | /*transform: translate(-10px,70%);*/ 265 | height: 1.4rem; 266 | width: 1.4rem; 267 | border-radius: 50%; 268 | padding: .15rem; 269 | background-color: #a8c8da; 270 | background-clip: content-box; 271 | box-sizing: border-box; 272 | border: solid .15rem #a8c8da; 273 | } 274 | 275 | #write input[type='checkbox']+p { 276 | color: inherit; 277 | } 278 | 279 | 280 | #write input[type='checkbox']:checked+p { 281 | color: #c3c4d0; 282 | } 283 | 284 | #write .md-task-list-item:hover { 285 | color: #c3c4d0; 286 | } 287 | 288 | /*fences*/ 289 | /* Based on https://github.com/dempfi/ayu */ 290 | 291 | /*.cm-s-inner.CodeMirror { background: #f8f8f8; color: #4f4652; } 292 | .cm-s-inner div.CodeMirror-selected { background: #cbccc6; } 293 | .cm-s-inner .CodeMirror-line::selection, .cm-s-inner .CodeMirror-line > span::selection, .cm-s-inner .CodeMirror-line > span > span::selection { background: #34455a; } 294 | .cm-s-inner .CodeMirror-line::-moz-selection, .cm-s-inner .CodeMirror-line > span::-moz-selection, .cm-s-inner .CodeMirror-line > span > span::-moz-selection { background: rgba(25, 30, 42, 99); } 295 | .cm-s-inner .CodeMirror-gutters { background: #f8f8f8; border-right: 0px; border-right: 1px solid #ddd} 296 | .cm-s-inner .CodeMirror-guttermarker { color: white; } 297 | .cm-s-inner .CodeMirror-guttermarker-subtle { color: rgba(112, 122, 140, 66); } 298 | .cm-s-inner .CodeMirror-linenumber { color: #cbccc6; } 299 | .cm-s-inner .CodeMirror-cursor { border-left: 2px solid #e56769;} 300 | .cm-s-inner div.CodeMirror-cursor { border-left: 2px solid #e56769;} 301 | .cm-s-inner. cm-fat-cursor .CodeMirror-cursor {background-color: #a2a8a175 !important;} 302 | .cm-s-inner .cm-animate-fat-cursor { background-color: #a2a8a175 !important; } 303 | 304 | .cm-s-inner span.cm-comment { color: #7e7e78; font-style:italic; } 305 | .cm-s-inner span.cm-atom { color: #ae81ff; } 306 | .cm-s-inner span.cm-number { color: #ffa600; } 307 | 308 | .cm-s-inner span.cm-comment.cm-attribute { color: #ffd580; } 309 | .cm-s-inner span.cm-comment.cm-def { color: #9566fa; } 310 | .cm-s-inner span.cm-comment.cm-tag { color: #5ccfe6; } 311 | .cm-s-inner span.cm-comment.cm-type { color: #5998a6; } 312 | 313 | .cm-s-inner span.cm-property { color: #f29e74; } 314 | .cm-s-inner span.cm-attribute { color: #ffd580; } 315 | .cm-s-inner span.cm-keyword { color: #ffa759; } 316 | .cm-s-inner span.cm-builtin { color: #ffcc66; } 317 | .cm-s-inner span.cm-string { color: #008700; } 318 | 319 | .cm-s-inner span.cm-variable { color: #97009c; } 320 | .cm-s-inner span.cm-variable-2 { color: #f28779; } 321 | .cm-s-inner span.cm-variable-3 { color: #5ccfe6; } 322 | .cm-s-inner span.cm-type { color: #ff8620; } 323 | .cm-s-inner span.cm-def { color: #fcbb3c; } 324 | .cm-s-inner span.cm-bracket { color: rgba(92, 207, 230, 80); } 325 | .cm-s-inner span.cm-tag { color: #5ccfe6; } 326 | .cm-s-inner span.cm-header { color: #bae67e; } 327 | .cm-s-inner span.cm-link { color: #5ccfe6; } 328 | .cm-s-inner span.cm-error { color: #ff3333; }*/ 329 | 330 | .cm-s-inner.CodeMirror { color: #999; background-color: #fff; } 331 | .cm-s-inner div.CodeMirror-selected { background: #cfc; } 332 | .cm-s-inner .CodeMirror-line::selection, .cm-s-inner .CodeMirror-line > span::selection, .cm-s-inner .CodeMirror-line > span > span::selection { background: #cfc; } 333 | .cm-s-inner .CodeMirror-line::-moz-selection, .cm-s-inner .CodeMirror-line > span::-moz-selection, .cm-s-inner .CodeMirror-line > span > span::-moz-selection { background: #cfc; } 334 | 335 | .cm-s-inner .CodeMirror-gutters { 336 | /*background: #f8f8f8; */ 337 | color: #333; 338 | } 339 | .cm-s-inner .CodeMirror-linenumber { color: #aaa; padding-left: 8px; } 340 | .cm-s-inner .CodeMirror-cursor { border-left: 2px solid #e56769;} 341 | .cm-s-inner div.CodeMirror-cursor { border-left: 2px solid #e56769;} 342 | 343 | .cm-s-inner .cm-keyword { color: #313de2} 344 | .cm-s-inner .cm-atom { color: #F90; } 345 | .cm-s-inner .cm-number { color: #ca7841; } 346 | .cm-s-inner .cm-def { color: #8DA6CE; } 347 | .cm-s-inner span.cm-variable-2, .cm-s-inner span.cm-tag { color: #690; } 348 | .cm-s-inner span.cm-variable-3, .cm-s-inner span.cm-def, .cm-s-inner span.cm-type { color: #07a; } 349 | 350 | .cm-s-inner .cm-variable { color: #07a; } 351 | .cm-s-inner .cm-property { color: #905; } 352 | .cm-s-inner .cm-qualifier { color: #690; } 353 | 354 | .cm-s-inner .cm-operator { color: #cda869; } 355 | .cm-s-inner .cm-comment { color:#777; font-weight:normal; } 356 | .cm-s-inner .cm-string { color:#07a; font-style:italic; } 357 | .cm-s-inner .cm-string-2 { color:#bd6b18; } /*?*/ 358 | .cm-s-inner .cm-meta { color: #000; } /*?*/ 359 | .cm-s-inner .cm-builtin { color: #9B7536; } /*?*/ 360 | .cm-s-inner .cm-tag { color: #997643; } 361 | .cm-s-inner .cm-attribute { color: #d6bb6d; } /*?*/ 362 | .cm-s-inner .cm-header { color: #FF6400; } 363 | .cm-s-inner .cm-hr { color: #AEAEAE; } 364 | .cm-s-inner .cm-link { color:#ad9361; font-style:italic; text-decoration:none; } 365 | .cm-s-inner .cm-error { border-bottom: 1px solid red; } 366 | 367 | /*div.cm-s-inner .CodeMirror-activeline-background { background: rgba(168, 200, 218, 0.56); }*/ 368 | div.cm-s-inner span.CodeMirror-matchingbracket { outline:1px solid grey; color: inherit; } 369 | 370 | /*.cm-s-inner .CodeMirror-activeline-background { background: #f8f8f8; }*/ 371 | .cm-s-inner .CodeMirror-matchingbracket { 372 | text-decoration: underline; 373 | color: white !important; 374 | } 375 | 376 | /**apply to code fences with plan text**/ 377 | .CodeMirror-lines { 378 | padding-left: 4px; 379 | } 380 | 381 | .code-tooltip { 382 | box-shadow: 0 1px 1px 0 rgba(0,28,36,.3); 383 | border-top: 1px solid #eef2f2; 384 | } 385 | 386 | .md-fences, 387 | code, 388 | tt { 389 | border: 1px solid #e7eaed; 390 | /*background-color: #f8f8f8;*/ 391 | border-radius: 3px; 392 | padding: 0; 393 | padding: 2px 4px 0px 4px; 394 | font-size: 0.9em; 395 | } 396 | 397 | code { 398 | /*background-color: #f3f4f4;*/ 399 | padding: 0 2px 0 2px; 400 | } 401 | 402 | .md-fences { 403 | margin-bottom: 15px; 404 | margin-top: 15px; 405 | padding-top: 8px; 406 | padding-bottom: 6px; 407 | } 408 | 409 | /*mathjax-block*/ 410 | #write mjx-container { 411 | font-size: 26px; 412 | font-family: "Apple Symbols"; 413 | } 414 | 415 | /*table*/ 416 | #write table { 417 | width: 100%; 418 | border-collapse: collapse; 419 | border: 1px solid #e9eaed; 420 | } 421 | 422 | #write th { 423 | font-family: Quicksand-bold; 424 | background-color: rgba(251, 235, 239, 0.95); 425 | } 426 | 427 | #write tbody tr:nth-of-type(2n+1){ 428 | background-color: rgba(251, 235, 239, 0.25); 429 | } 430 | 431 | #write td, 432 | #write th { 433 | position: relative; 434 | border: solid 1px #e5e3e3; 435 | -webkit-user-modify: read-write; 436 | padding: .8em 0; 437 | } 438 | 439 | #write td .md-focus::after, 440 | #write th .md-focus::after { 441 | content: ''; 442 | position: absolute; 443 | bottom: 0; 444 | left: 0; 445 | width: 100%; 446 | height: 3px; 447 | border-bottom: 4px solid rgba(166, 200, 233, 0.98); 448 | visibility: hidden; 449 | } 450 | 451 | #write td .md-focus::after, 452 | #write th .md-focus::after { 453 | visibility: initial; 454 | } 455 | 456 | #write td .md-focus, 457 | #write th .md-focus { 458 | outline: none; 459 | } 460 | 461 | /*foot notes*/ 462 | sup.md-footnote { 463 | background-image: linear-gradient(30deg,#fbebef, #dff0f5); 464 | } 465 | 466 | .reversefootnote { 467 | color: #c2b8d8; 468 | } 469 | 470 | span.md-meta.md-before { 471 | color: #c2b8d8; 472 | } 473 | 474 | span.md-meta.md-after { 475 | color: #c2b8d8; 476 | } 477 | 478 | .md-def-name::before { 479 | color: #c2b8d8; 480 | } 481 | 482 | .md-def-name { 483 | color: #464b1f; 484 | } 485 | 486 | .md-def-name::after { 487 | color: #c2b8d8; 488 | } 489 | 490 | /*horizon rules*/ 491 | hr { 492 | border-top: solid 1px #eee; 493 | border-bottom: solid 1px #eee; 494 | } 495 | 496 | /*toc*/ 497 | p.md-toc-content { 498 | position: relative; 499 | /*background-color: #f8f8f8;*/ 500 | padding-left: 145px; 501 | margin-left: -100px; 502 | margin-right: -100px; 503 | margin-top: 0px; 504 | padding-top: 20px; 505 | padding-bottom: 20px; 506 | } 507 | 508 | /*#write .md-toc-item { 509 | font-family: var(--monospace); 510 | }*/ 511 | 512 | #write .md-toc-item a{ 513 | color: rgba(12, 12, 12, 0.45); 514 | transition: all 200ms ease-in-out 0s; 515 | line-height: 1em; 516 | } 517 | 518 | #write .md-toc-item a:hover { 519 | color: #aad1e3; 520 | } 521 | 522 | #write .md-toc-h1 .md-toc-inner { 523 | color: rgba(12, 12, 12, 0.3); 524 | font-family: Quicksand-bold; 525 | font-size: 1.6rem; 526 | text-transform: uppercase; 527 | } 528 | 529 | .md-toc-h2 .md-toc-inner { 530 | font-weight: 500; 531 | font-size: 1.4rem; 532 | margin-left: 3rem; 533 | } 534 | 535 | .md-toc-h3 .md-toc-inner { 536 | font-size: 1.2rem; 537 | margin-left: 5rem; 538 | } 539 | 540 | .md-toc-h4 .md-toc-inner { 541 | font-size: 1rem; 542 | margin-left: 7rem; 543 | } 544 | 545 | .md-toc-h5 .md-toc-inner{ 546 | font-size: 1rem; 547 | margin-left: 9rem; 548 | } 549 | 550 | .md-toc-h6{ 551 | font-size: 1rem; 552 | margin-left: 11rem; 553 | } 554 | 555 | @media screen and (max-width:48em) { 556 | .md-toc-h3 .md-toc-inner { 557 | font-size: 1.2rem; 558 | margin-left: 5rem; 559 | } 560 | 561 | .md-toc-h4 .md-toc-inner { 562 | font-size: 1rem; 563 | margin-left: 7rem; 564 | } 565 | 566 | .md-toc-h5 .md-toc-inner{ 567 | font-size: 1rem; 568 | margin-left: 9rem; 569 | } 570 | 571 | .md-toc-h6{ 572 | font-size: 1rem; 573 | margin-left: 11rem; 574 | } 575 | } 576 | 577 | @media screen and (min-width:60em) { 578 | .md-toc-h2 .md-toc-inner { 579 | font-weight: 500; 580 | font-size: 1.4rem; 581 | margin-left: 5rem; 582 | } 583 | 584 | .md-toc-h3 .md-toc-inner { 585 | font-size: 1.2rem; 586 | margin-left: 7rem; 587 | } 588 | 589 | .md-toc-h4 .md-toc-inner { 590 | font-size: 1rem; 591 | margin-left: 9.5rem; 592 | } 593 | 594 | .md-toc-h5 .md-toc-inner{ 595 | font-size: 1rem; 596 | margin-left: 12.5rem; 597 | } 598 | 599 | .md-toc-h6{ 600 | font-size: 1rem; 601 | margin-left: 16rem; 602 | } 603 | } 604 | 605 | @media screen and (min-width:78em) { 606 | .md-toc-h2 .md-toc-inner { 607 | font-weight: 500; 608 | font-size: 1.4rem; 609 | margin-left: 5rem; 610 | } 611 | 612 | .md-toc-h3 .md-toc-inner { 613 | font-size: 1.2rem; 614 | margin-left: 8rem; 615 | } 616 | 617 | .md-toc-h4 .md-toc-inner { 618 | font-size: 1rem; 619 | margin-left: 10.5rem; 620 | } 621 | 622 | .md-toc-h5 .md-toc-inner{ 623 | font-size: 1rem; 624 | margin-left: 13.5rem; 625 | } 626 | 627 | .md-toc-h6{ 628 | font-size: 1rem; 629 | margin-left: 17rem; 630 | } 631 | } 632 | 633 | /*inline elements*/ 634 | .md-link a { 635 | text-decoration: none; 636 | color: #e56769; 637 | } 638 | 639 | .md-link a:hover { 640 | text-decoration: underline; 641 | } 642 | 643 | .md-image>.md-meta { 644 | color: #C7C5C5; 645 | font-size: 1rem; 646 | } 647 | 648 | mark { 649 | color: #fff; 650 | background-color: rgba(231, 153, 176, 0.68); 651 | border-radius: .2em; 652 | /*border: 1px solid #c5c8ca;*/ 653 | padding: .1em .2em; 654 | } 655 | 656 | /*sidebar*/ 657 | .show-folder-name .file-list-item { 658 | padding-top: 18px; 659 | } 660 | 661 | /*.sidebar-content { 662 | color: pink; 663 | }*/ 664 | 665 | .pin-outline .outline-active { 666 | color: #E799B0; 667 | font-weight: 700; 668 | } 669 | 670 | @media print { 671 | /* for example: */ 672 | .typora-export * { 673 | -webkit-print-color-adjust: exact; 674 | } 675 | /* add styles here */ 676 | #write input[type='checkbox']::before { 677 | display: none; 678 | } 679 | #write ul li::before { 680 | display: none; 681 | } 682 | #write ul li li::before{ 683 | display: none; 684 | } 685 | #write input[type='checkbox'] { 686 | appearance: initial; 687 | -moz-appearance: initial; 688 | -webkit-appearance: initial; 689 | } 690 | #write ul li { 691 | list-style-type: initial; 692 | } 693 | #write .md-task-list-item{ 694 | transform: none; 695 | } 696 | #write .md-task-list-item p{ 697 | margin-left: 1rem; 698 | } 699 | } --------------------------------------------------------------------------------