├── .gitignore ├── LICENSE ├── README.md ├── ReleaseNote.md ├── ceylon-dark.css ├── ceylon-darker.css ├── ceylon.css ├── ceylon ├── .DS_Store ├── Inter-italic.ttf ├── Inter-roman.ttf ├── OFL.txt ├── display │ ├── .DS_Store │ ├── IBM-Plex-Sans │ │ ├── IBMPlexSans-Bold.ttf │ │ ├── IBMPlexSans-BoldItalic.ttf │ │ ├── IBMPlexSans-ExtraLight.ttf │ │ ├── IBMPlexSans-ExtraLightItalic.ttf │ │ ├── IBMPlexSans-Italic.ttf │ │ ├── IBMPlexSans-Light.ttf │ │ ├── IBMPlexSans-LightItalic.ttf │ │ ├── IBMPlexSans-Medium.ttf │ │ ├── IBMPlexSans-MediumItalic.ttf │ │ ├── IBMPlexSans-Regular.ttf │ │ ├── IBMPlexSans-SemiBold.ttf │ │ ├── IBMPlexSans-SemiBoldItalic.ttf │ │ ├── IBMPlexSans-Thin.ttf │ │ └── IBMPlexSans-ThinItalic.ttf │ └── satoshi │ │ ├── Satoshi-Variable.woff2 │ │ └── Satoshi-VariableItalic.woff2 ├── fonts.css ├── icons │ ├── cd-dualtone-file-selected.svg │ ├── cd-dualtone-file.svg │ ├── cd-dualtone-folder-closed.svg │ ├── cd-dualtone-folder-open.svg │ ├── dark-file-selected.svg │ ├── dark-file.svg │ ├── dark-folder-closed.svg │ ├── dark-folder-open.svg │ ├── dualtone-file-selected.svg │ ├── dualtone-file.svg │ ├── dualtone-folder-closed.svg │ ├── dualtone-folder-open.svg │ ├── outline-file-selected.svg │ ├── outline-file.svg │ ├── outline-folder-closed.svg │ └── outline-folder-open.svg └── monospace │ ├── .DS_Store │ ├── FiraMono │ ├── FiraMono-Bold.ttf │ ├── FiraMono-Medium.ttf │ └── FiraMono-Regular.ttf │ └── IBMPlexMono │ ├── .DS_Store │ ├── IBMPlexMono-Bold.ttf │ ├── IBMPlexMono-BoldItalic.ttf │ ├── IBMPlexMono-ExtraLight.ttf │ ├── IBMPlexMono-ExtraLightItalic.ttf │ ├── IBMPlexMono-Italic.ttf │ ├── IBMPlexMono-Light.ttf │ ├── IBMPlexMono-LightItalic.ttf │ ├── IBMPlexMono-Medium.ttf │ ├── IBMPlexMono-MediumItalic.ttf │ ├── IBMPlexMono-Regular.ttf │ ├── IBMPlexMono-SemiBold.ttf │ ├── IBMPlexMono-SemiBoldItalic.ttf │ ├── IBMPlexMono-Thin.ttf │ ├── IBMPlexMono-ThinItalic.ttf │ └── OFL.txt └── img ├── SCR-20240713-oluo.png ├── SCR-20240713-olvw.png ├── SCR-20240713-olxc.png └── theme-banner.png /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Ceylon Theme for Typora 2 | 3 | [![HitCount](https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgithub.com%2Ftdarshana%2Ftypora-ceylon-theme&count_bg=%2331B9CD&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=hits&edge_flat=false)](https://github.com/tdarshana/typora-ceylon-theme) [![GitHub issues](https://img.shields.io/github/issues/tdarshana/typora-ceylon-theme.svg)](https://github.com/tdarshana/typora-ceylon-theme/issues) [![GitHub license](https://img.shields.io/github/license/tdarshana/typora-ceylon-theme.svg)](https://github.com/tdarshana/typora-ceylon-theme?tab=Apache-2.0-1-ov-file) [![GitHub forks](https://img.shields.io/github/forks/tdarshana/typora-ceylon-theme.svg)](https://github.com/tdarshana/typora-ceylon-theme/network) [![GitHub stars](https://img.shields.io/github/stars/tdarshana/typora-ceylon-theme.svg)](https://github.com/tdarshana/typora-ceylon-theme/stargazers) 4 | 5 | ![banner-image](./img/theme-banner.png) 6 | 7 | The following will demonstrate how this theme looks like in a MacOs os in Retina Display. The looks may change according to your OS and Screen configurations. 8 | 9 | This theme is build from [Typora Vue theme](https://github.com/blinkfox/typora-vue-theme) and some looks from Obsidean Editor. 10 | 11 | ## Showcase 12 | 13 | ![img](./img/SCR-20240713-oluo.png) 14 | 15 | ![img](./img/SCR-20240713-olvw.png) 16 | 17 | ![img](./img/SCR-20240713-olxc.png) 18 | 19 | You can install this by downloading the latest version from [release page](https://github.com/tdarshana/typora-ceylon-theme/releases) and extracting it to your Typora theme folder. For the installation you can follow the official guide [here](https://theme.typora.io/doc/Install-Theme/). 20 | 21 | Really appriciate if you can support me with a Kofi, or give this repo a star in Github. 22 | 23 | [![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/G2G2UOIB9) 24 | 25 | Thank you! 26 | -------------------------------------------------------------------------------- /ReleaseNote.md: -------------------------------------------------------------------------------- 1 | # Release Notes 2 | 3 | ## Version 1.0.1 4 | 5 | ### New Features 6 | 7 | - Sidebar Icon Improvements 8 | - Folder & File Icons on Actions 9 | - Heading hover & selection heading type display 10 | 11 | ### Bug Fixes 12 | 13 | - [#1 Heading Indicator displacement on slection fix](https://github.com/tdarshana/typora-ceylon-theme/issues/1) 14 | - [#2 When output to a PDF, the colored line of title is much much longer than expected](https://github.com/tdarshana/typora-ceylon-theme/issues/2) 15 | 16 | ## Version 1.1.0 17 | 18 | ### New Features 19 | 20 | - Dark theme 21 | - TOC Change styles 22 | - Heading spacing 23 | 24 | ## Version 1.2.0 25 | 26 | ### New Features 27 | 28 | - Ceylon Darker theme added 29 | -------------------------------------------------------------------------------- /ceylon-dark.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*** Custom fonts ***/ 4 | @import url('./ceylon/fonts.css'); 5 | 6 | /* VARIABLES */ 7 | :root { 8 | --theme-0: #282C34; 9 | --theme-primary: #4592e4; 10 | 11 | --theme-muted: #22252B; 12 | --theme-border: #334155; 13 | --theme-muted-blue: #4f565f; 14 | 15 | --theme-link: #4592e4; 16 | --theme-font-general: #ABB2BF; 17 | --select-text-bg-color: #4f565f; 18 | 19 | /* Slate grayscale */ 20 | --theme-50: #0f172a; 21 | --theme-100: #1e293b; 22 | --theme-200: #334155; 23 | --theme-300: #475569; 24 | --theme-400: #64748b; 25 | --theme-500: #94a3b8; 26 | --theme-600: #cbd5e1; 27 | --theme-700: #e2e8f0; 28 | --theme-800: #f1f5f9; 29 | --theme-900: #f8fafc; 30 | 31 | /* Tailwind variables */ 32 | --tw-primary: #4592e4; 33 | 34 | --tw-prose-body: var(--theme-font-general); 35 | --tw-prose-headings: var(--theme-600); 36 | --tw-prose-lead: var(--theme-600); 37 | --tw-prose-links: var(--theme-link); 38 | --tw-prose-bold: var(--theme-600); 39 | --tw-prose-counters: var(--theme-500); 40 | --tw-prose-bullets: var(--theme-500); 41 | --tw-prose-hr: var(--theme-200); 42 | --tw-prose-quotes: var(--theme-900); 43 | --tw-prose-quote-borders: var(--theme-200); 44 | --tw-prose-captions: var(--theme-500); 45 | --tw-prose-code: var(--theme-900); 46 | --tw-prose-pre-code: var(--theme-100); 47 | --tw-prose-pre-bg: var(--theme-800); 48 | --tw-prose-th-borders: var(--theme-300); 49 | --tw-prose-td-borders: var(--theme-200); 50 | --tw-prose-bg: var(--theme-0); 51 | --tw-prose-meta: var(--theme-500); 52 | --tw-prose-meta-bg: var(--theme-muted); 53 | 54 | --tw-prose-invert-body: var(--theme-300); 55 | --tw-prose-invert-headings: var(--theme-0); 56 | --tw-prose-invert-lead: var(--theme-400); 57 | --tw-prose-invert-links: var(--theme-0); 58 | --tw-prose-invert-bold: var(--theme-0); 59 | --tw-prose-invert-counters: var(--theme-400); 60 | --tw-prose-invert-bullets: var(--theme-600); 61 | --tw-prose-invert-hr: var(--theme-700); 62 | --tw-prose-invert-quotes: var(--theme-100); 63 | --tw-prose-invert-quote-borders: var(--theme-700); 64 | --tw-prose-invert-captions: var(--theme-400); 65 | --tw-prose-invert-code: var(--theme-0); 66 | --tw-prose-invert-pre-bg: var(--theme-900); 67 | --tw-prose-invert-th-borders: var(--theme-600); 68 | --tw-prose-invert-td-borders: var(--theme-700); 69 | --tw-prose-invert-bg: var(--theme-800); 70 | --tw-prose-invert-meta: var(--theme-400); 71 | --tw-prose-invert-meta-bg: var(--theme-700); 72 | 73 | --tw-highlight-color: #fde047; 74 | /* yellow-300 */ 75 | --tw-drop-shadow-md: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)); 76 | --tw-button-hover-bg: var(--theme-100); 77 | 78 | --tw-button-hover-bg-inverted: var(--theme-700); 79 | 80 | /* Typora variables */ 81 | 82 | --background: var(--tw-prose-bg); 83 | --bg-color: var(--tw-prose-bg); 84 | --text-color: var(--tw-prose-body); 85 | --primary-color: var(--theme-primary); 86 | --md-char-color: var(--theme-400); 87 | --meta-content-color: var(--theme-500); 88 | --typora-source-body: var(--theme-800); 89 | --heading-char-color: var(--md-char-color); 90 | --mermaid-theme: neutral; 91 | --active-toggle-btn-color: var(--theme-200); 92 | 93 | --md-char-color-inverted: var(--theme-500); 94 | --meta-content-color-inverted: var(--theme-400); 95 | --typora-source-body-inverted: var(--theme-300); 96 | --mermaid-theme-inverted: dark; 97 | --active-toggle-btn-color-inverted: var(--theme-400); 98 | 99 | /* hbar */ 100 | /* --side-bar-bg-color: var(--tw-prose-bg); */ 101 | --side-bar-bg-color: var(--theme-muted); 102 | --active-file-bg-color: var(--theme-100); 103 | --active-file-text-color: var(--tw-prose-bold); 104 | --active-file-border-color: var(--theme-100); 105 | --panel-border-color: var(--theme-300); 106 | --blur-text-color: var(--theme-300); 107 | --window-border: 1px solid var(--theme-border); 108 | --item-hover-bg-color: var(--theme-100); 109 | --search-hit-text-bg-color: var(--theme-200); 110 | --search-hit-text-font-color: inherit; 111 | --search-select-text-color: var(--select-text-font-color); 112 | --search-select-bg-color: var(--select-text-bg-color); 113 | 114 | --blur-text-color-inverted: var(--theme-500); 115 | --panel-border-color-inverted: var(--theme-700); 116 | --active-file-bg-color-inverted: var(--theme-700); 117 | --window-border-inverted: 1px solid var(--theme-700); 118 | --search-hit-text-bg-color-inverted: var(--theme-700); 119 | --search-hit-text-font-color-inverted: var(--theme-0); 120 | --search-select-bg-color-inverted: var(--theme-400); 121 | --rawblock-edit-panel-bd: var(--tw-prose-pre-bg); 122 | --item-hover-bg-color-inverted: var(--theme-700); 123 | 124 | --ui-font-monospace: "IBMPlexMono", "FiraCode", "FiraMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; 125 | 126 | --ui-font-display: "IBMPlexSans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 127 | 128 | /* Custom */ 129 | --footnote: var(--tw-prose-body); 130 | /* I'd love to use the --theme grayscale for --footnote-bg, but there's (currently) 131 | no way to add an alpha-channel to a CSS variable (and we need the transparency 132 | because otherwise the caret wil not be visible), so I here just used a hardcoded 133 | copy of --theme-500 */ 134 | --footnote-bg: #94a3b855; 135 | --button-bg: var(--theme-200); 136 | 137 | --button-bg-inverted: var(--theme-600); 138 | 139 | --md-grid-header: var(--theme-100); 140 | --md-grid-header-ext: var(--theme-400); 141 | --md-grid-ext: var(--theme-300); 142 | --md-grid-header-active: var(--theme-500); 143 | --md-grid-active: var(--theme-400); 144 | --md-grid-border-color: var(--theme-500); 145 | 146 | --md-grid-header-inverted: var(--theme-600); 147 | --md-grid-header-ext-inverted: var(--theme-500); 148 | --md-grid-ext-inverted: var(--theme-600); 149 | --md-grid-header-active-inverted: var(--theme-400); 150 | --md-grid-active-inverted: var(--theme-500); 151 | --md-grid-border-color-inverted: var(--theme-200); 152 | 153 | --code-blocks-font-size: 0.86em; 154 | --inline-code-font-size: 0.86em; 155 | 156 | --inline-code-font-color: #b099fc; 157 | } 158 | 159 | .ty-file-search-match-text { 160 | background-color: var(--search-hit-text-bg-color); 161 | } 162 | 163 | /* TAILWIND RESET */ 164 | 165 | /* 166 | 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 167 | 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) 168 | */ 169 | 170 | *, 171 | ::before, 172 | ::after { 173 | box-sizing: border-box; 174 | /* 1 */ 175 | border-width: 0; 176 | /* 2 */ 177 | border-style: solid; 178 | /* 2 */ 179 | border-color: currentColor; 180 | /* 2 */ 181 | } 182 | 183 | ::before, 184 | ::after { 185 | --tw-content: ""; 186 | } 187 | 188 | /* 189 | 1. Use a consistent sensible line-height in all browsers. 190 | 2. Prevent adjustments of font size after orientation changes in iOS. 191 | 3. Use a more readable tab size. 192 | */ 193 | 194 | #text { 195 | line-height: 1.5; 196 | /* 1 */ 197 | -webkit-text-size-adjust: 100%; 198 | /* 2 */ 199 | -moz-tab-size: 4; 200 | /* 3 */ 201 | -o-tab-size: 4; 202 | tab-size: 4; 203 | /* 3 */ 204 | } 205 | 206 | /* 207 | 1. Remove the margin in all browsers. 208 | 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. 209 | */ 210 | 211 | #text { 212 | margin: 0; 213 | /* 1 */ 214 | line-height: inherit; 215 | /* 2 */ 216 | } 217 | 218 | /* 219 | 1. Add the correct height in Firefox. 220 | 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 221 | 3. Ensure horizontal rules are visible by default. 222 | */ 223 | 224 | hr { 225 | height: 0; 226 | /* 1 */ 227 | color: inherit; 228 | /* 2 */ 229 | border-top-width: 1px; 230 | /* 3 */ 231 | } 232 | 233 | /* 234 | Add the correct text decoration in Chrome, Edge, and Safari. 235 | */ 236 | 237 | abbr:where([title]) { 238 | -webkit-text-decoration: underline dotted; 239 | text-decoration: underline dotted; 240 | } 241 | 242 | /* 243 | Remove the default font size and weight for headings. 244 | */ 245 | 246 | h1, 247 | h2, 248 | h3, 249 | h4, 250 | h5, 251 | h6 { 252 | font-size: inherit; 253 | font-weight: inherit; 254 | } 255 | 256 | /* 257 | Reset links to optimize for opt-in styling instead of opt-out. 258 | */ 259 | 260 | a { 261 | color: inherit; 262 | text-decoration: inherit; 263 | } 264 | 265 | /* 266 | Add the correct font weight in Edge and Safari. 267 | */ 268 | 269 | b, 270 | strong { 271 | font-weight: bolder; 272 | } 273 | 274 | /* 275 | 1. Use the user's configured `mono` font family by default. 276 | 2. Correct the odd `em` font sizing in all browsers. 277 | */ 278 | 279 | code, 280 | kbd, 281 | samp, 282 | pre { 283 | font-family: var(--ui-font-monospace); 284 | /* 1 */ 285 | font-size: 1em; 286 | /* 2 */ 287 | } 288 | 289 | /* 290 | Add the correct font size in all browsers. 291 | */ 292 | 293 | small { 294 | font-size: 80%; 295 | } 296 | 297 | /* 298 | Prevent `sub` and `sup` elements from affecting the line height in all browsers. 299 | */ 300 | 301 | sub, 302 | sup { 303 | font-size: 75%; 304 | line-height: 0; 305 | position: relative; 306 | vertical-align: baseline; 307 | } 308 | 309 | sub { 310 | bottom: -0.25em; 311 | } 312 | 313 | sup { 314 | top: -0.5em; 315 | } 316 | 317 | /* 318 | 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 319 | 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 320 | 3. Remove gaps between table borders by default. 321 | */ 322 | 323 | table { 324 | text-indent: 0; 325 | /* 1 */ 326 | border-color: inherit; 327 | /* 2 */ 328 | border-collapse: collapse; 329 | /* 3 */ 330 | } 331 | 332 | /* 333 | 1. Change the font styles in all browsers. 334 | 2. Remove the margin in Firefox and Safari. 335 | 3. Remove default padding in all browsers. 336 | */ 337 | 338 | button, 339 | input, 340 | optgroup, 341 | select, 342 | textarea { 343 | font-family: inherit; 344 | /* 1 */ 345 | font-size: 100%; 346 | /* 1 */ 347 | line-height: inherit; 348 | /* 1 */ 349 | color: inherit; 350 | /* 1 */ 351 | margin: 0; 352 | /* 2 */ 353 | padding: 0; 354 | /* 3 */ 355 | } 356 | 357 | /* 358 | Removes the default spacing and border for appropriate elements. 359 | */ 360 | 361 | blockquote, 362 | dl, 363 | dd, 364 | h1, 365 | h2, 366 | h3, 367 | h4, 368 | h5, 369 | h6, 370 | hr, 371 | figure, 372 | p, 373 | pre { 374 | margin: 0; 375 | } 376 | 377 | fieldset { 378 | margin: 0; 379 | padding: 0; 380 | } 381 | 382 | legend { 383 | padding: 0; 384 | } 385 | 386 | ol, 387 | ul, 388 | menu { 389 | list-style: none; 390 | margin: 0; 391 | padding: 0; 392 | } 393 | 394 | /* 395 | Prevent resizing textareas horizontally by default. 396 | */ 397 | 398 | textarea { 399 | resize: vertical; 400 | } 401 | 402 | /* TAILWIND PROSE IMPLEMENTATION */ 403 | 404 | #write { 405 | font-size: 1.12rem; 406 | line-height: 1.5; 407 | } 408 | 409 | html, 410 | body { 411 | font-family: var(--ui-font-display); 412 | } 413 | 414 | /* on Windows/Linux, it is the part that is not titlebar or status bar. */ 415 | content, 416 | titlebar { 417 | background: var(--tw-prose-bg); 418 | } 419 | 420 | #write { 421 | padding-top: 60px; 422 | padding-bottom: 60px; 423 | color: var(--tw-prose-body); 424 | /*Custom width*/ 425 | max-width: 92ch; 426 | /*Default width*/ 427 | /*max-width: 60ch;*/ 428 | } 429 | 430 | 431 | #write> :where(:first-child) { 432 | margin-top: 0; 433 | } 434 | 435 | #write> :where(:last-child) { 436 | margin-bottom: 0; 437 | } 438 | 439 | /** 440 | * --------------------- 441 | * Block Elements 442 | */ 443 | 444 | /* yaml */ 445 | pre.md-meta-block { 446 | color: var(--tw-prose-meta); 447 | background-color: var(--tw-prose-meta-bg); 448 | font-weight: 400; 449 | font-size: var(--code-blocks-font-size); 450 | line-height: 1.7777778; 451 | border-radius: 0.5rem 452 | /* 8px */ 453 | ; 454 | padding: 1.1111111em 1.3333333em; 455 | margin-bottom: 2.8em; 456 | } 457 | 458 | /* Heading indicator */ 459 | :root { 460 | --h1-ind-color: #E4374B; 461 | --h2-ind-color: #0EB54F; 462 | --h3-ind-color: #076DDD; 463 | --h4-ind-color: #876CE0; 464 | --h5-ind-color: #D2A852; 465 | --h6-ind-color: #E0E5D5; 466 | } 467 | 468 | h1, 469 | h2, 470 | h3, 471 | h4, 472 | h5, 473 | h6 { 474 | position: relative; 475 | padding-left: 10px; 476 | } 477 | 478 | h1::before, 479 | h2::before, 480 | h3::before, 481 | h4::before, 482 | h5::before, 483 | h6::before { 484 | content: ''; 485 | position: absolute; 486 | left: 0; 487 | width: 3px; 488 | top: 2px; 489 | bottom: 2px; 490 | height: calc(100% - 4px); 491 | } 492 | 493 | h1:hover::before, 494 | h1.md-focus::before { 495 | content: 'H1'; 496 | border-color: var(--h1-ind-color); 497 | } 498 | 499 | h2:hover::before, 500 | h2.md-focus::before { 501 | content: 'H2'; 502 | border-color: var(--h2-ind-color); 503 | } 504 | 505 | h3:hover::before, 506 | h3.md-focus::before { 507 | content: 'H3'; 508 | border-color: var(--h3-ind-color); 509 | } 510 | 511 | h4:hover::before, 512 | h4.md-focus::before { 513 | content: 'H4'; 514 | border-color: var(--h4-ind-color); 515 | } 516 | 517 | h5:hover::before, 518 | h5.md-focus::before { 519 | content: 'H5'; 520 | border-color: var(--h5-ind-color); 521 | } 522 | 523 | h6:hover::before, 524 | h6.md-focus::before { 525 | content: 'H6'; 526 | border-color: var(--h6-ind-color); 527 | } 528 | 529 | h1:hover::before, 530 | h2:hover::before, 531 | h3:hover::before, 532 | h4:hover::before, 533 | h5:hover::before, 534 | h6:hover::before, 535 | h1.md-focus::before, 536 | h2.md-focus::before, 537 | h3.md-focus::before, 538 | h4.md-focus::before, 539 | h5.md-focus::before, 540 | h6.md-focus::before { 541 | border-width: 0; 542 | border-radius: 0; 543 | left: 0; 544 | background-color: var(--background); 545 | width: 26px; 546 | left: -23px; 547 | font-size: 10px; 548 | color: var(--theme-400);; 549 | margin: 0 auto; 550 | border-right-width: 5px; 551 | display: flex; 552 | align-items: center; 553 | justify-content: center; 554 | line-height: normal; 555 | padding: 0; 556 | top: 2px; 557 | bottom: 2px; 558 | } 559 | 560 | /* headings */ 561 | h1 { 562 | color: var(--tw-prose-headings); 563 | font-weight: 800; 564 | font-size: 2em; 565 | margin-top: 0; 566 | margin-bottom: 0; 567 | line-height: 1.2; 568 | } 569 | 570 | h1 strong { 571 | font-weight: 900; 572 | } 573 | 574 | h1::before { 575 | background-color: var(--h1-ind-color); 576 | /* Color of the bar */ 577 | } 578 | 579 | h2 { 580 | color: var(--tw-prose-headings); 581 | font-weight: 700; 582 | font-size: 1.7em; 583 | line-height: 1.3; 584 | } 585 | 586 | h2 strong { 587 | font-weight: 800; 588 | } 589 | 590 | h2::before { 591 | background-color: var(--h2-ind-color); 592 | /* Color of the bar */ 593 | } 594 | 595 | h3 { 596 | color: var(--tw-prose-headings); 597 | font-weight: 600; 598 | font-size: 1.5em; 599 | line-height: 1.4; 600 | } 601 | 602 | h3 strong { 603 | font-weight: 700; 604 | } 605 | 606 | h3::before { 607 | background-color: var(--h3-ind-color); 608 | /* Color of the bar */ 609 | } 610 | 611 | h4 { 612 | color: var(--tw-prose-headings); 613 | font-weight: 600; 614 | line-height: 1.7; 615 | } 616 | 617 | h4 strong { 618 | font-weight: 700; 619 | } 620 | 621 | h4::before { 622 | background-color: var(--h4-ind-color); 623 | /* Color of the bar */ 624 | } 625 | 626 | h5 { 627 | color: var(--tw-prose-headings); 628 | font-weight: 500; 629 | line-height: 1.8; 630 | font-size: 0.9em; 631 | } 632 | 633 | h5 strong { 634 | font-weight: 500; 635 | } 636 | 637 | h5::before { 638 | background-color: var(--h5-ind-color); 639 | /* Color of the bar */ 640 | } 641 | 642 | h6 { 643 | color: var(--tw-prose-headings); 644 | font-weight: 400; 645 | line-height: 1.9; 646 | font-size: 0.9em; 647 | } 648 | 649 | h5 strong { 650 | font-weight: 400; 651 | } 652 | 653 | h6::before { 654 | background-color: var(--h6-ind-color); 655 | /* Color of the bar */ 656 | } 657 | 658 | h2 code { 659 | font-size: 0.8611111em; 660 | } 661 | 662 | h3 code { 663 | font-size: 0.9em; 664 | } 665 | 666 | h2+* { 667 | margin-top: 0; 668 | } 669 | 670 | h3+* { 671 | margin-top: 0; 672 | } 673 | 674 | h4+* { 675 | margin-top: 0; 676 | } 677 | 678 | /* table */ 679 | 680 | table { 681 | width: 100%; 682 | table-layout: auto; 683 | text-align: left; 684 | margin-top: 2em; 685 | margin-bottom: 2em; 686 | font-size: 0.9em; 687 | line-height: 1.5; 688 | 689 | border-spacing: 0; 690 | border-collapse: separate; /* Use separate border model */ 691 | border-radius: 0.5em; /* Add border radius to the entire table */ 692 | overflow: hidden; /* Ensure the border radius is applied to the whole table */ 693 | } 694 | 695 | /* table header */ 696 | 697 | thead { 698 | border-bottom-color: var(--theme-muted-blue); 699 | background-color: var(--theme-muted); 700 | } 701 | 702 | table th, 703 | table td { 704 | border: 1px solid var(--theme-300); 705 | padding: .6em; 706 | border-radius: 0; /* Remove border-radius from individual cells */ 707 | } 708 | 709 | table th:first-child { 710 | border-top-left-radius: 0.5em; /* Add rounded corners only to table */ 711 | } 712 | 713 | table th:last-child { 714 | border-top-right-radius: 0.5em; /* Add rounded corners only to table */ 715 | } 716 | 717 | table tr:last-child td:first-child { 718 | border-bottom-left-radius: 0.5em; /* Add rounded corners only to table */ 719 | } 720 | 721 | table tr:last-child td:last-child { 722 | border-bottom-right-radius: 0.5em; /* Add rounded corners only to table */ 723 | } 724 | 725 | /* Remove duplicate borders */ 726 | table th, 727 | table td { 728 | border-top-width: 0; /* Remove top border */ 729 | border-left-width: 0; /* Remove left border */ 730 | } 731 | 732 | table th { 733 | border-top-width: 1px; /* Restore top border for header cells */ 734 | } 735 | 736 | table td:first-child { 737 | border-left-width: 1px; /* Restore left border for the first column cells */ 738 | } 739 | 740 | table th:first-child { 741 | border-left-width: 1px; /* Restore left border for the first header cell */ 742 | } 743 | 744 | table tr:first-child th { 745 | border-top-width: 1px; /* Restore top border for the first header row */ 746 | } 747 | 748 | table tr:first-child td { 749 | border-top-width: 1px; /* Restore top border for the first data row */ 750 | } 751 | 752 | table tr td:last-child { 753 | border-right-width: 1px; /* Ensure right border for the last column cells */ 754 | } 755 | 756 | table tr:last-child td { 757 | border-bottom-width: 1px; /* Ensure bottom border for the last row cells */ 758 | } 759 | 760 | /* table end */ 761 | 762 | .md-grid-board tr[row="1"] { 763 | background-color: var(--md-grid-header); 764 | } 765 | 766 | .md-grid-board a:hover, 767 | .md-grid-board a.md-active { 768 | background: var(--md-grid-active); 769 | } 770 | 771 | .md-grid-board tr[row="1"] a:hover, 772 | .md-grid-board tr[row="1"] a.md-active { 773 | background: var(--md-grid-header-active); 774 | } 775 | 776 | .md-grid-board .md-grid-ext { 777 | background: var(--md-grid-ext); 778 | } 779 | 780 | .md-grid-board tr[row="1"] .md-grid-ext { 781 | background: var(--md-grid-header-ext); 782 | } 783 | 784 | .md-grid-board a { 785 | border-color: var(--md-grid-border-color) !important; 786 | } 787 | 788 | /* lists */ 789 | 790 | ol { 791 | list-style-type: decimal; 792 | padding-left: 1.6em; 793 | margin-top: 1em; 794 | margin-bottom: 1em; 795 | } 796 | 797 | li { 798 | margin-top: 0; 799 | margin-bottom: 0; 800 | } 801 | 802 | ul { 803 | list-style-type: disc; 804 | padding-left: 1.6em; 805 | margin-top: 1em; 806 | margin-bottom: 1em; 807 | } 808 | 809 | #write ul.task-list { 810 | padding-left: 0; 811 | } 812 | 813 | #write li.task-list-item { 814 | padding-left: 0.4em; 815 | } 816 | 817 | #write input[type="checkbox"] { 818 | margin-left: -1em; 819 | } 820 | 821 | input[checked]~* { 822 | opacity: 0.7; 823 | text-decoration: line-through; 824 | } 825 | 826 | ol>li::marker { 827 | font-weight: 400; 828 | color: var(--tw-prose-counters); 829 | } 830 | 831 | ul>li::marker { 832 | color: var(--tw-prose-bullets); 833 | } 834 | 835 | ul>li, 836 | ol>li { 837 | padding-left: 0.4em; 838 | } 839 | 840 | ul>li p, 841 | ol>li p { 842 | margin-top: 0; 843 | margin-bottom: 0; 844 | } 845 | 846 | #write>ul>li> :not(input):first-child, 847 | #write>ol>li> :not(input):first-child, 848 | #write>ul>li>input+*, 849 | #write>ol>li>input+* { 850 | margin-top: 0; 851 | } 852 | 853 | #write>ul>li>*:last-child, 854 | #write>ol>li>*:last-child { 855 | margin-bottom: 0; 856 | } 857 | 858 | #write ul>li>p:only-child, 859 | #write ol>li>p:only-child, 860 | #write ul>li>input+p:last-child, 861 | #write ol>li>input+p:last-child { 862 | margin-top: 0; 863 | margin-bottom: 0; 864 | } 865 | 866 | ul ul, 867 | ul ol, 868 | ol ul, 869 | ol ol { 870 | margin-top: 0; 871 | margin-bottom: 0; 872 | } 873 | 874 | .ol-list .ol-list, 875 | .ol-list .ul-list, 876 | .ul-list .ul-list, 877 | .ul-list .ol-list { 878 | margin-top: 0; 879 | margin-bottom: 0; 880 | } 881 | 882 | /* blockquote */ 883 | blockquote { 884 | font-weight: 400; 885 | font-style: normal; 886 | color: var(--tw-prose-quotes); 887 | border-left-width: 0.25rem; 888 | border-left-color: var(--theme-link); 889 | quotes: "\201C" "\201D" "\2018" "\2019"; 890 | margin-top: 1.6em; 891 | margin-bottom: 1.6em; 892 | padding-left: 1.0666667em; 893 | padding-top: 1em; 894 | padding-bottom: 1em; 895 | padding-right: 1em; 896 | border-radius: 0 .5em .5em 0; 897 | background-color: var(--theme-muted-blue); 898 | } 899 | 900 | blockquote h1::before, 901 | blockquote h2::before, 902 | blockquote h3::before, 903 | blockquote h4::before, 904 | blockquote h5::before, 905 | blockquote h6::before { 906 | content: none; 907 | /* Removes the content, effectively hiding the bar */ 908 | padding-left: 0 !important; 909 | } 910 | 911 | /* hr */ 912 | hr { 913 | border-color: var(--tw-prose-hr); 914 | border-top-width: 1px; 915 | } 916 | 917 | [mdtype="hr"] { 918 | margin-top: 1.4em; 919 | margin-bottom: 1.4em; 920 | } 921 | 922 | p { 923 | margin-top: 1em; 924 | margin-bottom: 1em; 925 | } 926 | 927 | /* diagram panel */ 928 | .md-diagram-panel { 929 | color: var(--tw-prose-body); 930 | } 931 | 932 | .enable-diagrams .md-diagram .code-tooltip { 933 | bottom: -1.9em; 934 | right: 0; 935 | } 936 | 937 | .md-fences-adv-panel { 938 | margin-top: 1.3em; 939 | } 940 | 941 | /* footnote definition */ 942 | sup.md-footnote { 943 | color: var(--footnote); 944 | background-color: var(--footnote-bg); 945 | } 946 | 947 | .footnotes { 948 | font-size: 0.85em; 949 | } 950 | 951 | .md-reverse-footnote-area a { 952 | font-family: "IBMPlexSans"; 953 | text-decoration: none; 954 | color: var(--tw-primary); 955 | border-radius: 3px; 956 | } 957 | 958 | .md-hover-tip .code-tooltip-content { 959 | font-size: 1.05rem; 960 | line-height: 1.6; 961 | padding: 0.8em 1.2em; 962 | } 963 | 964 | .md-reverse-footnote-area a:hover { 965 | background-color: var(--item-hover-bg-color); 966 | } 967 | 968 | .md-def-name:before { 969 | color: var(--md-char-color); 970 | } 971 | 972 | .md-rawblock.md-rawblock-on-edit, 973 | .md-rawblock:hover { 974 | color: var(--tw-prose-pre-code); 975 | } 976 | 977 | .md-inline-math script { 978 | color: var(--tw-prose-code); 979 | } 980 | 981 | g[data-mml-node="merror"]>rect[data-background] { 982 | fill: var(--tw-highlight-color) !important; 983 | } 984 | 985 | g[data-mml-node="merror"]>g { 986 | fill: #000 !important; 987 | stroke: #000 !important; 988 | } 989 | 990 | .code-tooltip { 991 | color: var(--tw-prose-pre-code); 992 | } 993 | 994 | .code-tooltip .md-mathjax-preview { 995 | color: var(--tw-prose-body); 996 | } 997 | 998 | .md-htmlblock-container, 999 | .md-rawblock-input.md-rawblock-control, 1000 | .md-htmlblock-panel.md-rawblock-control, 1001 | .md-math-container { 1002 | border-radius: 0.5rem 0 0.5rem 0.5rem; 1003 | } 1004 | 1005 | .md-rawblock-input { 1006 | font-size: var(--code-blocks-font-size); 1007 | padding: 0 1.3333333em; 1008 | } 1009 | 1010 | .md-mathblock-panel .md-rawblock-input.md-rawblock-control { 1011 | border-top-color: transparent; 1012 | border-bottom-color: transparent; 1013 | border-radius: 0; 1014 | } 1015 | 1016 | .md-mathblock-panel .md-rawblock-before { 1017 | padding-top: 1.1em; 1018 | border-top-left-radius: 0.5rem; 1019 | } 1020 | 1021 | .md-mathblock-panel .md-rawblock-after { 1022 | padding-bottom: 1.1em; 1023 | border-bottom-left-radius: 0.5rem; 1024 | border-bottom-right-radius: 0.5rem; 1025 | } 1026 | 1027 | .md-htmlblock-panel .md-rawblock-input { 1028 | padding-top: 1.1111111em; 1029 | padding-bottom: 1.1111111em; 1030 | } 1031 | 1032 | .md-mathblock-panel .md-rawblock-before, 1033 | .md-mathblock-panel .md-rawblock-after { 1034 | font-size: var(--code-blocks-font-size); 1035 | padding-left: calc(4px + 1.3333333em); 1036 | color: var(--code-bracket); 1037 | } 1038 | 1039 | .md-rawblock-tooltip { 1040 | color: var(--tw-prose-pre-code); 1041 | border-radius: 0.5rem 0.5rem 0 0; 1042 | } 1043 | 1044 | .md-rawblock-tooltip-name { 1045 | opacity: 1; 1046 | } 1047 | 1048 | .md-comment { 1049 | font-size: var(--inline-code-font-size); 1050 | color: var(--code-comment); 1051 | } 1052 | 1053 | .md-raw-inline, 1054 | .md-tag, 1055 | [md-inline="linebreak"], 1056 | .md-image>.md-meta, 1057 | .md-inline-math.md-expand>.md-inline-math-container { 1058 | font-size: var(--code-blocks-font-size); 1059 | } 1060 | 1061 | /** 1062 | * Code Fences 1063 | * see http://support.typora.io/Code-Block-Styles 1064 | */ 1065 | 1066 | :root { 1067 | --cf-bg-color: #23272E; 1068 | --cf-font-color: var(--theme-font-general); 1069 | } 1070 | 1071 | .md-fences { 1072 | color: var(--cf-font-color); 1073 | background-color: var(--cf-bg-color); 1074 | font-weight: 400; 1075 | font-size: var(--code-blocks-font-size); 1076 | line-height: 1.5; 1077 | margin-top: 1em; 1078 | margin-bottom: 1em; 1079 | border-radius: 0.5rem; 1080 | padding: 1em 1em; 1081 | -webkit-font-smoothing: initial; 1082 | -moz-osx-font-smoothing: initial; 1083 | } 1084 | 1085 | .md-fences.md-focus { 1086 | border-bottom-right-radius: 0; 1087 | } 1088 | 1089 | .md-fences>.code-tooltip { 1090 | height: 1.8rem; 1091 | top: 0.4rem; 1092 | right: 0.4rem; 1093 | font-size: 0.8rem; 1094 | border-radius: 0.5rem; 1095 | padding-left: 0 !important; 1096 | padding-right: 0 !important; 1097 | background-color: var(--theme-200); 1098 | color: var(--theme-font-general); 1099 | } 1100 | 1101 | .md-fences:hover>.code-tooltip { 1102 | background-color: var(--theme-300); 1103 | } 1104 | 1105 | .code-tooltip .ty-input { 1106 | min-width: 10rem; 1107 | } 1108 | 1109 | pre code { 1110 | background-color: transparent; 1111 | border-width: 0; 1112 | border-radius: 0; 1113 | padding: 0; 1114 | font-weight: inherit; 1115 | color: inherit; 1116 | font-size: inherit; 1117 | font-family: inherit; 1118 | line-height: inherit; 1119 | } 1120 | 1121 | pre code::before { 1122 | content: none; 1123 | } 1124 | 1125 | pre code::after { 1126 | content: none; 1127 | } 1128 | 1129 | /* SYNTAX HIGHLIGHTING */ 1130 | 1131 | :root { 1132 | --code-gutter: #495162; 1133 | } 1134 | 1135 | #write .cm-s-inner { 1136 | --code-neutral: rgb(126, 132, 142); 1137 | --code-cursor: var(--theme-800); 1138 | --code-string: #98C379; 1139 | --code-number: rgb(209, 154, 102); 1140 | --code-tag: #E06C75; 1141 | --code-keyword: rgb(198, 120, 221); 1142 | --code-variable: rgb(97, 175, 239); 1143 | --code-comment: #7E848E; 1144 | --code-operator: var(--code-comment); 1145 | --code-bracket: var(--code-comment); 1146 | --code-citation: var(--theme-500); 1147 | } 1148 | 1149 | .CodeMirror-selectedtext { 1150 | background-color: transparent; 1151 | } 1152 | 1153 | .CodeMirror-cursor { 1154 | border-left: 2px solid var(--code-cursor) !important; 1155 | } 1156 | 1157 | .CodeMirror-gutters { 1158 | border-color: var(--code-gutter); 1159 | } 1160 | 1161 | .cm-s-inner span.cm-string { 1162 | color: var(--code-string); 1163 | } 1164 | 1165 | .cm-s-inner span.cm-number { 1166 | color: var(--code-number); 1167 | } 1168 | 1169 | .cm-s-inner span.cm-tag { 1170 | color: var(--code-tag) 1171 | } 1172 | 1173 | .cm-s-inner span.cm-keyword { 1174 | color: var(--code-keyword); 1175 | } 1176 | 1177 | .cm-s-inner span.cm-qualifier { 1178 | color: white; 1179 | } 1180 | 1181 | .cm-s-inner .CodeMirror-guttermarker, 1182 | .cm-s-inner .CodeMirror-guttermarker-subtle, 1183 | .cm-s-inner span.cm-comment.cm-def, 1184 | .cm-s-inner span.cm-comment.cm-type, 1185 | .cm-s-inner span.cm-builtin, 1186 | .cm-s-inner span.cm-type, 1187 | .cm-s-inner span.cm-header, 1188 | .cm-s-inner span.cm-link, 1189 | .cm-s-inner span.cm-error { 1190 | background: transparent; 1191 | color: var(--code-neutral); 1192 | } 1193 | 1194 | 1195 | .cm-s-inner span.cm-atom, 1196 | .cm-s-inner span.cm-def { 1197 | color: var(--code-variable); 1198 | } 1199 | 1200 | .cm-s-inner span.cm-attribute { 1201 | color: #D19A66; 1202 | } 1203 | 1204 | .cm-s-inner span.cm-property, 1205 | .cm-s-inner span.cm-property-2, 1206 | .cm-s-inner span.cm-variable, 1207 | .cm-s-inner span.cm-variable-2, 1208 | .cm-s-inner span.cm-variable-3 { 1209 | color: rgb(97, 175, 239); 1210 | } 1211 | 1212 | .cm-s-inner span.cm-type { 1213 | color: #0EB54F; 1214 | } 1215 | 1216 | .cm-s-inner span.cm-comment { 1217 | color: var(--code-comment) 1218 | } 1219 | 1220 | .cm-s-inner .CodeMirror-linenumber { 1221 | color: var(--code-gutter); 1222 | } 1223 | 1224 | .cm-s-inner span.cm-operator { 1225 | color: var(--code-operator); 1226 | } 1227 | 1228 | .cm-s-inner span.cm-bracket, 1229 | .cm-s-inner span.cm-tag.cm-bracket, 1230 | .cm-s-inner span.cm-meta { 1231 | color: var(--code-bracket); 1232 | } 1233 | 1234 | .cm-s-inner span.cm-link { 1235 | text-decoration: underline; 1236 | } 1237 | 1238 | /** 1239 | * Inline Elements 1240 | */ 1241 | 1242 | /* basic styles */ 1243 | 1244 | code { 1245 | color: var(--inline-code-font-color); 1246 | font-weight: normal; 1247 | font-size: var(--inline-code-font-size); 1248 | font-family: var(--ui-font-monospace); 1249 | padding: .2rem .2rem; 1250 | border-radius: 3px; 1251 | background: var(--theme-muted) !important; 1252 | display: inline; 1253 | vertical-align: bottom; 1254 | line-height: inherit; 1255 | -webkit-font-smoothing: initial; 1256 | -moz-osx-font-smoothing: initial; 1257 | } 1258 | 1259 | [md-inline="code"].md-expand>code::before, 1260 | [md-inline="code"].md-expand>code::after { 1261 | content: ""; 1262 | } 1263 | 1264 | a code { 1265 | color: var(--tw-prose-links); 1266 | } 1267 | 1268 | strong { 1269 | color: var(--tw-prose-bold); 1270 | font-weight: 600; 1271 | } 1272 | 1273 | a { 1274 | color: var(--tw-prose-links); 1275 | text-decoration: none; 1276 | font-weight: 500; 1277 | } 1278 | 1279 | a:hover { 1280 | text-decoration: underline; 1281 | } 1282 | 1283 | /* A block-level image should have a total top and bottom margin of 2em. 1284 | It is always wrapped in a paragraph with 1.2em vertical margin, hence we 1285 | add 0.8 here */ 1286 | p>.md-image:only-child { 1287 | margin-top: 0.8em !important; 1288 | margin-bottom: 0.8em !important; 1289 | } 1290 | 1291 | .md-image>.md-meta { 1292 | color: var(--tw-prose-code); 1293 | } 1294 | 1295 | .md-image>img { 1296 | border-radius: 0.5em !important; 1297 | border: none !important; 1298 | } 1299 | 1300 | /* extend styles */ 1301 | 1302 | mark { 1303 | border-radius: 3px; 1304 | padding: 0 2px; 1305 | background-color: var(--tw-highlight-color); 1306 | } 1307 | 1308 | /** 1309 | * Source Code Mode 1310 | * see http://support.typora.io/Code-Block-Styles 1311 | */ 1312 | 1313 | .cm-s-typora-default .CodeMirror-activeline-background { 1314 | background-color: var(--item-hover-bg-color); 1315 | } 1316 | 1317 | #typora-source { 1318 | font-family: var(--ui-font-monospace); 1319 | color: var(--typora-source-body); 1320 | } 1321 | 1322 | #typora-source .cm-header { 1323 | color: var(--code-tag); 1324 | } 1325 | 1326 | #typora-source .cm-link { 1327 | color: var(--code-string); 1328 | } 1329 | 1330 | #typora-source .cm-string { 1331 | color: var(--code-string); 1332 | } 1333 | 1334 | #typora-source .cm-comment { 1335 | color: var(--code-comment); 1336 | } 1337 | 1338 | #typora-source .cm-atom { 1339 | color: var(--code-citation); 1340 | } 1341 | 1342 | #typora-source .cm-tag { 1343 | color: var(--code-tag); 1344 | } 1345 | 1346 | #typora-source .cm-attribute { 1347 | color: var(--code-variable); 1348 | } 1349 | 1350 | #typora-source .cm-bracket { 1351 | color: var(--code-bracket); 1352 | } 1353 | 1354 | .file-list-item-file-ext-part { 1355 | opacity: 0.5; 1356 | } 1357 | 1358 | #write div.md-toc-tooltip { 1359 | background-color: var(--tw-prose-bg); 1360 | } 1361 | 1362 | .md-toc { 1363 | font-size: 0.94em; 1364 | } 1365 | 1366 | .md-toc-h1 .md-toc-inner { 1367 | margin-left: 0; 1368 | } 1369 | 1370 | .md-toc-h2 .md-toc-inner { 1371 | margin-left: 1em; 1372 | } 1373 | 1374 | .md-toc-h3 .md-toc-inner { 1375 | margin-left: 2em; 1376 | } 1377 | 1378 | .md-toc-h4 .md-toc-inner { 1379 | margin-left: 3em; 1380 | } 1381 | 1382 | .md-toc-h5 .md-toc-inner { 1383 | margin-left: 4em; 1384 | } 1385 | 1386 | .md-toc-h6 .md-toc-inner { 1387 | margin-left: 5em; 1388 | } 1389 | 1390 | #typora-sidebar { 1391 | border-right: var(--window-border); 1392 | } 1393 | 1394 | .sidebar-tab { 1395 | text-transform: none; 1396 | font-weight: 700; 1397 | font-size: 1.1em; 1398 | } 1399 | 1400 | .md-search-hit { 1401 | color: var(--search-hit-text-font-color); 1402 | background-color: var(--search-hit-text-bg-color); 1403 | } 1404 | 1405 | #md-searchpanel { 1406 | box-shadow: none; 1407 | filter: var(--tw-drop-shadow-md); 1408 | } 1409 | 1410 | #md-searchpanel .btn:not(.close-btn):hover { 1411 | box-shadow: none; 1412 | -webkit-box-shadow: none; 1413 | background-color: var(--tw-button-hover-bg); 1414 | } 1415 | 1416 | #md-searchpanel input, 1417 | #md-searchpanel .btn, 1418 | #searchpanel-msg { 1419 | border-radius: 5px; 1420 | } 1421 | 1422 | #searchpanel-msg { 1423 | color: var(--theme-500); 1424 | border-color: var(--theme-300); 1425 | background: var(--theme-100); 1426 | } 1427 | 1428 | .form-control { 1429 | border-color: var(--panel-border-color); 1430 | } 1431 | 1432 | .btn-default { 1433 | background-color: var(--button-bg); 1434 | } 1435 | 1436 | 1437 | /*sidebar file-list and search results*/ 1438 | 1439 | #file-library-list[data-state="complete"] #sidebar-loading-template { 1440 | padding: 0rem; 1441 | } 1442 | 1443 | #typora-sidebar .file-list-item, 1444 | .ty-search-item { 1445 | border: none; 1446 | padding: 1rem; 1447 | } 1448 | 1449 | body.html-for-mac #typora-sidebar .file-list-item, 1450 | body.html-for-mac .ty-search-item { 1451 | transition-duration: 0.3s !important; 1452 | transition-property: background-color, border, color, height !important; 1453 | } 1454 | 1455 | #typora-sidebar .file-list-item:hover, 1456 | .ty-search-item:hover { 1457 | background: var(--borders); 1458 | } 1459 | 1460 | #typora-sidebar .ty-search-item-line { 1461 | font-family: var(--font-family); 1462 | font-size: 0.8rem; 1463 | font-weight: 400; 1464 | padding: 0.3rem; 1465 | border-radius: 0.3rem; 1466 | margin-left: 24px; 1467 | } 1468 | 1469 | body.o #typora-sidebar .ty-search-item-line { 1470 | transition-duration: 0.2s; 1471 | } 1472 | 1473 | #typora-sidebar .ty-search-item-line * { 1474 | opacity: 1; 1475 | } 1476 | 1477 | #typora-sidebar .ty-search-item .ty-search-item-line:hover, 1478 | #typora-sidebar .ty-search-item-line.active { 1479 | background-color: var(--select-text-bg-color); 1480 | color: white; 1481 | } /* makes easier identifying which searched item is active in the sidebar */ 1482 | 1483 | #typora-sidebar .file-list-item-file-name { 1484 | font-weight: 800; 1485 | font-size: 0.9rem; 1486 | margin-bottom: 0rem; 1487 | line-height: 1.8rem; 1488 | float: right; 1489 | } 1490 | 1491 | #typora-sidebar .file-list-item-file-ext-part { 1492 | font-weight: 800; 1493 | opacity: 0.5; 1494 | } 1495 | 1496 | #typora-sidebar .file-list-item-parent-loc, 1497 | #typora-sidebar .file-list-item-time { 1498 | font-family: var(--font-family); 1499 | font-weight: 400; 1500 | opacity: 0.5; 1501 | display: block; 1502 | } 1503 | 1504 | #typora-sidebar .file-list-item-summary { 1505 | float: left; 1506 | font-size: 0.8rem; 1507 | opacity: 0.9; 1508 | } 1509 | 1510 | #typora-sidebar .file-list-item-count { 1511 | font-size: 0.75rem; 1512 | background-color: var(--primary-color); 1513 | color: white; 1514 | border-radius: 0.2rem; 1515 | min-width: 1.25rem; 1516 | height: 1.25rem; 1517 | text-align: center; 1518 | line-height: 1.25rem; 1519 | position: relative; 1520 | top: 0.3rem; 1521 | } 1522 | 1523 | #typora-sidebar input.file-list-item-file-name { 1524 | margin: 0.5rem 0rem 0.5rem 0.7rem; 1525 | padding: 0.4rem !important; 1526 | line-height: 1rem; 1527 | float: right; 1528 | border-radius: 0.3rem; 1529 | font-weight: 500; 1530 | background-color: var(--background) !important; 1531 | } 1532 | 1533 | #typora-sidebar .file-list-item.file-library-file-node { 1534 | border: none; 1535 | } 1536 | 1537 | #typora-sidebar .file-tree-node.active .file-node-background, 1538 | #typora-sidebar .file-list-item.active, 1539 | #typora-sidebar .ty-search-item.active { 1540 | background-color: var(--background); 1541 | outline: 1px solid var(--borders); 1542 | border-right: none; 1543 | border-top: none; 1544 | border-bottom: none; 1545 | border-left: 3px solid var(--primary-color); 1546 | color: var(--primary-color) !important; 1547 | font-weight: 500; 1548 | } 1549 | 1550 | #typora-sidebar .file-tree-node.active .file-node-content { 1551 | color: var(--primary-color) !important; 1552 | font-weight: 500; 1553 | } 1554 | 1555 | #typora-sidebar .file-tree-node { 1556 | padding: 0rem; 1557 | font-weight: 400; 1558 | font-size: 1rem; 1559 | margin-left: 0.8rem; 1560 | } 1561 | 1562 | #typora-sidebar .file-tree-node .file-node-content { 1563 | padding: 0rem; 1564 | line-height: 2.2rem; 1565 | height: 2.2rem; 1566 | background: none; 1567 | margin-bottom: 0px; 1568 | } 1569 | 1570 | #typora-sidebar .file-tree-node .file-node-background { 1571 | padding: 0rem; 1572 | height: 2.2rem; 1573 | } 1574 | 1575 | #typora-sidebar .file-tree-node .file-node-icon { 1576 | margin-right: 0.5rem; 1577 | } 1578 | 1579 | #typora-sidebar .file-tree-node .file-node-icon.fa-file-text-o { 1580 | margin-top: 0.33rem; 1581 | } 1582 | 1583 | #typora-sidebar .file-tree-node .file-node-icon.fa-folder { 1584 | margin-top: 0.36rem; 1585 | } 1586 | 1587 | #typora-sidebar .file-tree-node .fa-caret-down, 1588 | #typora-sidebar .file-tree-node .fa-caret-right { 1589 | position: relative; 1590 | top: 5px; 1591 | } 1592 | 1593 | #typora-sidebar .file-tree-node .file-tree-rename-input { 1594 | height: 2.2rem; 1595 | background: none; 1596 | border: none; 1597 | font-weight: 400; 1598 | margin: 0rem; 1599 | padding-left: 0rem; 1600 | } 1601 | 1602 | #typora-sidebar .ty-search-item-collapse-icon { 1603 | top: 9px; 1604 | } 1605 | 1606 | /*no left border*/ 1607 | #typora-sidebar .file-tree-node.active > .file-node-background { 1608 | border: none; 1609 | } 1610 | 1611 | /*no dotted highlighting*/ 1612 | .file-library-node:not(.file-node-root):focus > .file-node-content { 1613 | outline: none; 1614 | } 1615 | 1616 | #typora-sidebar #sidebar-files-menu { 1617 | border: solid 1px var(--borders); 1618 | border-radius: 0.3rem; 1619 | box-shadow: rgba(116, 129, 141, 0.1) 0px 3px 8px 0px; 1620 | } 1621 | 1622 | #typora-sidebar #ty-sidebar-footer { 1623 | background-color: var(--bg-color); 1624 | border-top: solid 1px var(--borders); 1625 | font-weight: 500; 1626 | } 1627 | 1628 | #typora-sidebar #ty-sidebar-footer li { 1629 | transition-duration: 0.2s; 1630 | transition-property: background-color, color; 1631 | } 1632 | 1633 | #typora-sidebar 1634 | #ty-sidebar-footer 1635 | li:not(.file-sort-item):not(:first-child):not(.empty-menu-group):not(.folder-menu-group):hover { 1636 | color: var(--primary-color); 1637 | background-color: var(--boxes); 1638 | } 1639 | 1640 | #typora-sidebar 1641 | #ty-sidebar-footer 1642 | .file-action-item.file-sort-item 1643 | > span:first-of-type { 1644 | line-height: 2rem; 1645 | } 1646 | 1647 | /* Folder + File Icons */ 1648 | 1649 | /* Hide the original Font Awesome icon */ 1650 | #typora-sidebar .file-tree-node .file-node-icon { 1651 | font-size: 0; /* Hide the text/icon inside the tag */ 1652 | width: 16px; /* Set a fixed width */ 1653 | height: 16px; /* Set a fixed height */ 1654 | background-size: contain; /* Ensure the SVG scales correctly */ 1655 | background-repeat: no-repeat; /* Prevent repeating */ 1656 | display: inline-block; /* Maintain the element's block nature */ 1657 | } 1658 | 1659 | #typora-sidebar .file-tree-node .file-node-icon.fa-folder { 1660 | background-image: url('./ceylon/icons/cd-dualtone-folder-closed.svg'); 1661 | margin-top: 0.5rem; 1662 | } 1663 | 1664 | /* Specific styling for the collapsed folder icon SVG */ 1665 | #typora-sidebar .file-tree-node.file-node-collapsed > .file-node-content > .file-node-icon.fa-folder { 1666 | background-image: url('./ceylon/icons/cd-dualtone-folder-closed.svg'); 1667 | margin-top: 0.5rem; 1668 | } 1669 | 1670 | /* Specific styling for the expanded folder icon SVG */ 1671 | #typora-sidebar .file-tree-node.file-node-expanded > .file-node-content > .file-node-icon.fa-folder { 1672 | background-image: url('./ceylon/icons/cd-dualtone-folder-open.svg'); 1673 | margin-top: 0.5rem; 1674 | } 1675 | 1676 | /* Specific styling for the file icon SVG */ 1677 | #typora-sidebar .file-tree-node > .file-node-content > .file-node-icon.fa-file-text-o { 1678 | background-image: url('./ceylon/icons/cd-dualtone-file.svg'); 1679 | margin-top: 0.5rem; 1680 | } 1681 | 1682 | /* Specific styling for the active file icon SVG */ 1683 | #typora-sidebar .file-tree-node.active > .file-node-content > .file-node-icon.fa-file-text-o { 1684 | background-image: url('./ceylon/icons/cd-dualtone-file-selected.svg'); 1685 | margin-top: 0.5rem; 1686 | } -------------------------------------------------------------------------------- /ceylon-darker.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*** Custom fonts ***/ 4 | @import url('./ceylon/fonts.css'); 5 | 6 | /* VARIABLES */ 7 | :root { 8 | --theme-0: #111116; 9 | --theme-primary: #428ECC; 10 | 11 | --theme-muted: #000000; 12 | --theme-border: #1a2330; 13 | --theme-muted-blue: #3c4552; 14 | 15 | --theme-link: #428ECC; 16 | --theme-font-general: #8b92a0; 17 | --select-text-bg-color: #3c4249; 18 | 19 | /* Slate grayscale */ 20 | --theme-50: #0a0f1b; 21 | --theme-100: #161e2b; 22 | --theme-200: #263141; 23 | --theme-300: #475569; 24 | --theme-400: #434f5f; 25 | --theme-500: #707c8b; 26 | --theme-600: #969ea7; 27 | --theme-700: #c1c7ce; 28 | --theme-800: #dee2e6; 29 | --theme-900: #e2e5e7; 30 | 31 | /* Tailwind variables */ 32 | --tw-primary: #428ECC; 33 | 34 | --tw-prose-body: var(--theme-font-general); 35 | --tw-prose-headings: var(--theme-600); 36 | --tw-prose-lead: var(--theme-600); 37 | --tw-prose-links: var(--theme-link); 38 | --tw-prose-bold: var(--theme-600); 39 | --tw-prose-counters: var(--theme-500); 40 | --tw-prose-bullets: var(--theme-500); 41 | --tw-prose-hr: var(--theme-200); 42 | --tw-prose-quotes: var(--theme-500); 43 | --tw-prose-quote-borders: var(--theme-200); 44 | --tw-prose-captions: var(--theme-500); 45 | --tw-prose-code: var(--theme-900); 46 | --tw-prose-pre-code: var(--theme-100); 47 | --tw-prose-pre-bg: var(--theme-800); 48 | --tw-prose-th-borders: var(--theme-300); 49 | --tw-prose-td-borders: var(--theme-200); 50 | --tw-prose-bg: var(--theme-0); 51 | --tw-prose-meta: var(--theme-500); 52 | --tw-prose-meta-bg: var(--theme-muted); 53 | 54 | --tw-prose-invert-body: var(--theme-300); 55 | --tw-prose-invert-headings: var(--theme-0); 56 | --tw-prose-invert-lead: var(--theme-400); 57 | --tw-prose-invert-links: var(--theme-0); 58 | --tw-prose-invert-bold: var(--theme-0); 59 | --tw-prose-invert-counters: var(--theme-400); 60 | --tw-prose-invert-bullets: var(--theme-600); 61 | --tw-prose-invert-hr: var(--theme-700); 62 | --tw-prose-invert-quotes: var(--theme-100); 63 | --tw-prose-invert-quote-borders: var(--theme-700); 64 | --tw-prose-invert-captions: var(--theme-400); 65 | --tw-prose-invert-code: var(--theme-0); 66 | --tw-prose-invert-pre-bg: var(--theme-900); 67 | --tw-prose-invert-th-borders: var(--theme-600); 68 | --tw-prose-invert-td-borders: var(--theme-700); 69 | --tw-prose-invert-bg: var(--theme-800); 70 | --tw-prose-invert-meta: var(--theme-400); 71 | --tw-prose-invert-meta-bg: var(--theme-700); 72 | 73 | --tw-highlight-color: #9c8a2e; 74 | /* yellow-300 */ 75 | --tw-drop-shadow-md: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)); 76 | --tw-button-hover-bg: var(--theme-100); 77 | 78 | --tw-button-hover-bg-inverted: var(--theme-700); 79 | 80 | /* Typora variables */ 81 | 82 | --background: var(--tw-prose-bg); 83 | --bg-color: var(--tw-prose-bg); 84 | --text-color: var(--tw-prose-body); 85 | --primary-color: var(--theme-primary); 86 | --md-char-color: var(--theme-400); 87 | --meta-content-color: var(--theme-500); 88 | --typora-source-body: var(--theme-800); 89 | --heading-char-color: var(--md-char-color); 90 | --mermaid-theme: neutral; 91 | --active-toggle-btn-color: var(--theme-200); 92 | 93 | --md-char-color-inverted: var(--theme-500); 94 | --meta-content-color-inverted: var(--theme-400); 95 | --typora-source-body-inverted: var(--theme-300); 96 | --mermaid-theme-inverted: dark; 97 | --active-toggle-btn-color-inverted: var(--theme-400); 98 | 99 | /* hbar */ 100 | /* --side-bar-bg-color: var(--tw-prose-bg); */ 101 | --side-bar-bg-color: var(--theme-muted); 102 | --active-file-bg-color: var(--theme-100); 103 | --active-file-text-color: var(--tw-prose-bold); 104 | --active-file-border-color: var(--theme-100); 105 | --panel-border-color: var(--theme-300); 106 | --blur-text-color: var(--theme-300); 107 | --window-border: 1px solid var(--theme-border); 108 | --item-hover-bg-color: var(--theme-100); 109 | --search-hit-text-bg-color: var(--theme-200); 110 | --search-hit-text-font-color: inherit; 111 | --search-select-text-color: var(--select-text-font-color); 112 | --search-select-bg-color: var(--select-text-bg-color); 113 | 114 | --blur-text-color-inverted: var(--theme-500); 115 | --panel-border-color-inverted: var(--theme-700); 116 | --active-file-bg-color-inverted: var(--theme-700); 117 | --window-border-inverted: 1px solid var(--theme-700); 118 | --search-hit-text-bg-color-inverted: var(--theme-700); 119 | --search-hit-text-font-color-inverted: var(--theme-0); 120 | --search-select-bg-color-inverted: var(--theme-400); 121 | --rawblock-edit-panel-bd: var(--tw-prose-pre-bg); 122 | --item-hover-bg-color-inverted: var(--theme-700); 123 | 124 | --ui-font-monospace: "IBMPlexMono", "FiraCode", "FiraMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; 125 | 126 | --ui-font-display: "IBMPlexSans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 127 | 128 | /* Custom */ 129 | --footnote: var(--tw-prose-body); 130 | /* I'd love to use the --theme grayscale for --footnote-bg, but there's (currently) 131 | no way to add an alpha-channel to a CSS variable (and we need the transparency 132 | because otherwise the caret wil not be visible), so I here just used a hardcoded 133 | copy of --theme-500 */ 134 | --footnote-bg: #94a3b855; 135 | --button-bg: var(--theme-200); 136 | 137 | --button-bg-inverted: var(--theme-600); 138 | 139 | --md-grid-header: var(--theme-100); 140 | --md-grid-header-ext: var(--theme-400); 141 | --md-grid-ext: var(--theme-300); 142 | --md-grid-header-active: var(--theme-500); 143 | --md-grid-active: var(--theme-400); 144 | --md-grid-border-color: var(--theme-500); 145 | 146 | --md-grid-header-inverted: var(--theme-600); 147 | --md-grid-header-ext-inverted: var(--theme-500); 148 | --md-grid-ext-inverted: var(--theme-600); 149 | --md-grid-header-active-inverted: var(--theme-400); 150 | --md-grid-active-inverted: var(--theme-500); 151 | --md-grid-border-color-inverted: var(--theme-200); 152 | 153 | --code-blocks-font-size: 0.86em; 154 | --inline-code-font-size: 0.86em; 155 | 156 | --inline-code-font-color: #836ec9; 157 | } 158 | 159 | .ty-file-search-match-text { 160 | background-color: var(--search-hit-text-bg-color); 161 | } 162 | 163 | /* TAILWIND RESET */ 164 | 165 | /* 166 | 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 167 | 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) 168 | */ 169 | 170 | *, 171 | ::before, 172 | ::after { 173 | box-sizing: border-box; 174 | /* 1 */ 175 | border-width: 0; 176 | /* 2 */ 177 | border-style: solid; 178 | /* 2 */ 179 | border-color: currentColor; 180 | /* 2 */ 181 | } 182 | 183 | ::before, 184 | ::after { 185 | --tw-content: ""; 186 | } 187 | 188 | /* 189 | 1. Use a consistent sensible line-height in all browsers. 190 | 2. Prevent adjustments of font size after orientation changes in iOS. 191 | 3. Use a more readable tab size. 192 | */ 193 | 194 | #text { 195 | line-height: 1.5; 196 | /* 1 */ 197 | -webkit-text-size-adjust: 100%; 198 | /* 2 */ 199 | -moz-tab-size: 4; 200 | /* 3 */ 201 | -o-tab-size: 4; 202 | tab-size: 4; 203 | /* 3 */ 204 | } 205 | 206 | /* 207 | 1. Remove the margin in all browsers. 208 | 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. 209 | */ 210 | 211 | #text { 212 | margin: 0; 213 | /* 1 */ 214 | line-height: inherit; 215 | /* 2 */ 216 | } 217 | 218 | /* 219 | 1. Add the correct height in Firefox. 220 | 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 221 | 3. Ensure horizontal rules are visible by default. 222 | */ 223 | 224 | hr { 225 | height: 0; 226 | /* 1 */ 227 | color: inherit; 228 | /* 2 */ 229 | border-top-width: 1px; 230 | /* 3 */ 231 | } 232 | 233 | /* 234 | Add the correct text decoration in Chrome, Edge, and Safari. 235 | */ 236 | 237 | abbr:where([title]) { 238 | -webkit-text-decoration: underline dotted; 239 | text-decoration: underline dotted; 240 | } 241 | 242 | /* 243 | Remove the default font size and weight for headings. 244 | */ 245 | 246 | h1, 247 | h2, 248 | h3, 249 | h4, 250 | h5, 251 | h6 { 252 | font-size: inherit; 253 | font-weight: inherit; 254 | } 255 | 256 | /* 257 | Reset links to optimize for opt-in styling instead of opt-out. 258 | */ 259 | 260 | a { 261 | color: inherit; 262 | text-decoration: inherit; 263 | } 264 | 265 | /* 266 | Add the correct font weight in Edge and Safari. 267 | */ 268 | 269 | b, 270 | strong { 271 | font-weight: bolder; 272 | } 273 | 274 | /* 275 | 1. Use the user's configured `mono` font family by default. 276 | 2. Correct the odd `em` font sizing in all browsers. 277 | */ 278 | 279 | code, 280 | kbd, 281 | samp, 282 | pre { 283 | font-family: var(--ui-font-monospace); 284 | /* 1 */ 285 | font-size: 1em; 286 | /* 2 */ 287 | } 288 | 289 | /* 290 | Add the correct font size in all browsers. 291 | */ 292 | 293 | small { 294 | font-size: 80%; 295 | } 296 | 297 | /* 298 | Prevent `sub` and `sup` elements from affecting the line height in all browsers. 299 | */ 300 | 301 | sub, 302 | sup { 303 | font-size: 75%; 304 | line-height: 0; 305 | position: relative; 306 | vertical-align: baseline; 307 | } 308 | 309 | sub { 310 | bottom: -0.25em; 311 | } 312 | 313 | sup { 314 | top: -0.5em; 315 | } 316 | 317 | /* 318 | 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 319 | 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 320 | 3. Remove gaps between table borders by default. 321 | */ 322 | 323 | table { 324 | text-indent: 0; 325 | /* 1 */ 326 | border-color: inherit; 327 | /* 2 */ 328 | border-collapse: collapse; 329 | /* 3 */ 330 | } 331 | 332 | /* 333 | 1. Change the font styles in all browsers. 334 | 2. Remove the margin in Firefox and Safari. 335 | 3. Remove default padding in all browsers. 336 | */ 337 | 338 | button, 339 | input, 340 | optgroup, 341 | select, 342 | textarea { 343 | font-family: inherit; 344 | /* 1 */ 345 | font-size: 100%; 346 | /* 1 */ 347 | line-height: inherit; 348 | /* 1 */ 349 | color: inherit; 350 | /* 1 */ 351 | margin: 0; 352 | /* 2 */ 353 | padding: 0; 354 | /* 3 */ 355 | } 356 | 357 | /* 358 | Removes the default spacing and border for appropriate elements. 359 | */ 360 | 361 | blockquote, 362 | dl, 363 | dd, 364 | h1, 365 | h2, 366 | h3, 367 | h4, 368 | h5, 369 | h6, 370 | hr, 371 | figure, 372 | p, 373 | pre { 374 | margin: 0; 375 | } 376 | 377 | fieldset { 378 | margin: 0; 379 | padding: 0; 380 | } 381 | 382 | legend { 383 | padding: 0; 384 | } 385 | 386 | ol, 387 | ul, 388 | menu { 389 | list-style: none; 390 | margin: 0; 391 | padding: 0; 392 | } 393 | 394 | /* 395 | Prevent resizing textareas horizontally by default. 396 | */ 397 | 398 | textarea { 399 | resize: vertical; 400 | } 401 | 402 | /* TAILWIND PROSE IMPLEMENTATION */ 403 | 404 | #write { 405 | font-size: 1.12rem; 406 | line-height: 1.5; 407 | } 408 | 409 | html, 410 | body { 411 | font-family: var(--ui-font-display); 412 | } 413 | 414 | /* on Windows/Linux, it is the part that is not titlebar or status bar. */ 415 | content, 416 | titlebar { 417 | background: var(--tw-prose-bg); 418 | } 419 | 420 | #write { 421 | padding-top: 60px; 422 | padding-bottom: 60px; 423 | color: var(--tw-prose-body); 424 | /*Custom width*/ 425 | max-width: 92ch; 426 | /*Default width*/ 427 | /*max-width: 60ch;*/ 428 | } 429 | 430 | 431 | #write> :where(:first-child) { 432 | margin-top: 0; 433 | } 434 | 435 | #write> :where(:last-child) { 436 | margin-bottom: 0; 437 | } 438 | 439 | /** 440 | * --------------------- 441 | * Block Elements 442 | */ 443 | 444 | /* yaml */ 445 | pre.md-meta-block { 446 | color: var(--tw-prose-meta); 447 | background-color: var(--tw-prose-meta-bg); 448 | font-weight: 400; 449 | font-size: var(--code-blocks-font-size); 450 | line-height: 1.7777778; 451 | border-radius: 0.5rem 452 | /* 8px */ 453 | ; 454 | padding: 1.1111111em 1.3333333em; 455 | margin-bottom: 2.8em; 456 | } 457 | 458 | /* Heading indicator */ 459 | :root { 460 | --h1-ind-color: #E4374B; 461 | --h2-ind-color: #0EB54F; 462 | --h3-ind-color: #076DDD; 463 | --h4-ind-color: #876CE0; 464 | --h5-ind-color: #D2A852; 465 | --h6-ind-color: #E0E5D5; 466 | } 467 | 468 | h1, 469 | h2, 470 | h3, 471 | h4, 472 | h5, 473 | h6 { 474 | position: relative; 475 | padding-left: 10px; 476 | } 477 | 478 | h1::before, 479 | h2::before, 480 | h3::before, 481 | h4::before, 482 | h5::before, 483 | h6::before { 484 | content: ''; 485 | position: absolute; 486 | left: 0; 487 | width: 3px; 488 | top: 2px; 489 | bottom: 2px; 490 | height: calc(100% - 4px); 491 | } 492 | 493 | h1:hover::before, 494 | h1.md-focus::before { 495 | content: 'H1'; 496 | border-color: var(--h1-ind-color); 497 | } 498 | 499 | h2:hover::before, 500 | h2.md-focus::before { 501 | content: 'H2'; 502 | border-color: var(--h2-ind-color); 503 | } 504 | 505 | h3:hover::before, 506 | h3.md-focus::before { 507 | content: 'H3'; 508 | border-color: var(--h3-ind-color); 509 | } 510 | 511 | h4:hover::before, 512 | h4.md-focus::before { 513 | content: 'H4'; 514 | border-color: var(--h4-ind-color); 515 | } 516 | 517 | h5:hover::before, 518 | h5.md-focus::before { 519 | content: 'H5'; 520 | border-color: var(--h5-ind-color); 521 | } 522 | 523 | h6:hover::before, 524 | h6.md-focus::before { 525 | content: 'H6'; 526 | border-color: var(--h6-ind-color); 527 | } 528 | 529 | h1:hover::before, 530 | h2:hover::before, 531 | h3:hover::before, 532 | h4:hover::before, 533 | h5:hover::before, 534 | h6:hover::before, 535 | h1.md-focus::before, 536 | h2.md-focus::before, 537 | h3.md-focus::before, 538 | h4.md-focus::before, 539 | h5.md-focus::before, 540 | h6.md-focus::before { 541 | border-width: 0; 542 | border-radius: 0; 543 | left: 0; 544 | background-color: var(--background); 545 | width: 26px; 546 | left: -23px; 547 | font-size: 10px; 548 | color: var(--theme-400);; 549 | margin: 0 auto; 550 | border-right-width: 5px; 551 | display: flex; 552 | align-items: center; 553 | justify-content: center; 554 | line-height: normal; 555 | padding: 0; 556 | top: 2px; 557 | bottom: 2px; 558 | } 559 | 560 | /* headings */ 561 | h1 { 562 | color: var(--tw-prose-headings); 563 | font-weight: 800; 564 | font-size: 2em; 565 | margin-top: 0; 566 | margin-bottom: 0; 567 | line-height: 1.2; 568 | } 569 | 570 | h1 strong { 571 | font-weight: 900; 572 | } 573 | 574 | h1::before { 575 | background-color: var(--h1-ind-color); 576 | /* Color of the bar */ 577 | } 578 | 579 | h2 { 580 | color: var(--tw-prose-headings); 581 | font-weight: 700; 582 | font-size: 1.7em; 583 | line-height: 1.3; 584 | } 585 | 586 | h2 strong { 587 | font-weight: 800; 588 | } 589 | 590 | h2::before { 591 | background-color: var(--h2-ind-color); 592 | /* Color of the bar */ 593 | } 594 | 595 | h3 { 596 | color: var(--tw-prose-headings); 597 | font-weight: 600; 598 | font-size: 1.5em; 599 | line-height: 1.4; 600 | } 601 | 602 | h3 strong { 603 | font-weight: 700; 604 | } 605 | 606 | h3::before { 607 | background-color: var(--h3-ind-color); 608 | /* Color of the bar */ 609 | } 610 | 611 | h4 { 612 | color: var(--tw-prose-headings); 613 | font-weight: 600; 614 | line-height: 1.7; 615 | } 616 | 617 | h4 strong { 618 | font-weight: 700; 619 | } 620 | 621 | h4::before { 622 | background-color: var(--h4-ind-color); 623 | /* Color of the bar */ 624 | } 625 | 626 | h5 { 627 | color: var(--tw-prose-headings); 628 | font-weight: 500; 629 | line-height: 1.8; 630 | font-size: 0.9em; 631 | } 632 | 633 | h5 strong { 634 | font-weight: 500; 635 | } 636 | 637 | h5::before { 638 | background-color: var(--h5-ind-color); 639 | /* Color of the bar */ 640 | } 641 | 642 | h6 { 643 | color: var(--tw-prose-headings); 644 | font-weight: 400; 645 | line-height: 1.9; 646 | font-size: 0.9em; 647 | } 648 | 649 | h5 strong { 650 | font-weight: 400; 651 | } 652 | 653 | h6::before { 654 | background-color: var(--h6-ind-color); 655 | /* Color of the bar */ 656 | } 657 | 658 | h2 code { 659 | font-size: 0.8611111em; 660 | } 661 | 662 | h3 code { 663 | font-size: 0.9em; 664 | } 665 | 666 | h2+* { 667 | margin-top: 0; 668 | } 669 | 670 | h3+* { 671 | margin-top: 0; 672 | } 673 | 674 | h4+* { 675 | margin-top: 0; 676 | } 677 | 678 | /* table */ 679 | 680 | table { 681 | width: 100%; 682 | table-layout: auto; 683 | text-align: left; 684 | margin-top: 2em; 685 | margin-bottom: 2em; 686 | font-size: 0.9em; 687 | line-height: 1.5; 688 | 689 | border-spacing: 0; 690 | border-collapse: separate; /* Use separate border model */ 691 | border-radius: 0.5em; /* Add border radius to the entire table */ 692 | overflow: hidden; /* Ensure the border radius is applied to the whole table */ 693 | } 694 | 695 | /* table header */ 696 | 697 | thead { 698 | border-bottom-color: var(--theme-muted-blue); 699 | background-color: var(--theme-muted); 700 | } 701 | 702 | table th, 703 | table td { 704 | border: 1px solid var(--theme-300); 705 | padding: .6em; 706 | border-radius: 0; /* Remove border-radius from individual cells */ 707 | } 708 | 709 | table th:first-child { 710 | border-top-left-radius: 0.5em; /* Add rounded corners only to table */ 711 | } 712 | 713 | table th:last-child { 714 | border-top-right-radius: 0.5em; /* Add rounded corners only to table */ 715 | } 716 | 717 | table tr:last-child td:first-child { 718 | border-bottom-left-radius: 0.5em; /* Add rounded corners only to table */ 719 | } 720 | 721 | table tr:last-child td:last-child { 722 | border-bottom-right-radius: 0.5em; /* Add rounded corners only to table */ 723 | } 724 | 725 | /* Remove duplicate borders */ 726 | table th, 727 | table td { 728 | border-top-width: 0; /* Remove top border */ 729 | border-left-width: 0; /* Remove left border */ 730 | } 731 | 732 | table th { 733 | border-top-width: 1px; /* Restore top border for header cells */ 734 | } 735 | 736 | table td:first-child { 737 | border-left-width: 1px; /* Restore left border for the first column cells */ 738 | } 739 | 740 | table th:first-child { 741 | border-left-width: 1px; /* Restore left border for the first header cell */ 742 | } 743 | 744 | table tr:first-child th { 745 | border-top-width: 1px; /* Restore top border for the first header row */ 746 | } 747 | 748 | table tr:first-child td { 749 | border-top-width: 1px; /* Restore top border for the first data row */ 750 | } 751 | 752 | table tr td:last-child { 753 | border-right-width: 1px; /* Ensure right border for the last column cells */ 754 | } 755 | 756 | table tr:last-child td { 757 | border-bottom-width: 1px; /* Ensure bottom border for the last row cells */ 758 | } 759 | 760 | /* table end */ 761 | 762 | .md-grid-board tr[row="1"] { 763 | background-color: var(--md-grid-header); 764 | } 765 | 766 | .md-grid-board a:hover, 767 | .md-grid-board a.md-active { 768 | background: var(--md-grid-active); 769 | } 770 | 771 | .md-grid-board tr[row="1"] a:hover, 772 | .md-grid-board tr[row="1"] a.md-active { 773 | background: var(--md-grid-header-active); 774 | } 775 | 776 | .md-grid-board .md-grid-ext { 777 | background: var(--md-grid-ext); 778 | } 779 | 780 | .md-grid-board tr[row="1"] .md-grid-ext { 781 | background: var(--md-grid-header-ext); 782 | } 783 | 784 | .md-grid-board a { 785 | border-color: var(--md-grid-border-color) !important; 786 | } 787 | 788 | /* lists */ 789 | 790 | ol { 791 | list-style-type: decimal; 792 | padding-left: 1.6em; 793 | margin-top: 1em; 794 | margin-bottom: 1em; 795 | } 796 | 797 | li { 798 | margin-top: 0; 799 | margin-bottom: 0; 800 | } 801 | 802 | ul { 803 | list-style-type: disc; 804 | padding-left: 1.6em; 805 | margin-top: 1em; 806 | margin-bottom: 1em; 807 | } 808 | 809 | #write ul.task-list { 810 | padding-left: 0; 811 | } 812 | 813 | #write li.task-list-item { 814 | padding-left: 0.4em; 815 | } 816 | 817 | #write input[type="checkbox"] { 818 | margin-left: -1em; 819 | } 820 | 821 | input[checked]~* { 822 | opacity: 0.7; 823 | text-decoration: line-through; 824 | } 825 | 826 | ol>li::marker { 827 | font-weight: 400; 828 | color: var(--tw-prose-counters); 829 | } 830 | 831 | ul>li::marker { 832 | color: var(--tw-prose-bullets); 833 | } 834 | 835 | ul>li, 836 | ol>li { 837 | padding-left: 0.4em; 838 | } 839 | 840 | ul>li p, 841 | ol>li p { 842 | margin-top: 0; 843 | margin-bottom: 0; 844 | } 845 | 846 | #write>ul>li> :not(input):first-child, 847 | #write>ol>li> :not(input):first-child, 848 | #write>ul>li>input+*, 849 | #write>ol>li>input+* { 850 | margin-top: 0; 851 | } 852 | 853 | #write>ul>li>*:last-child, 854 | #write>ol>li>*:last-child { 855 | margin-bottom: 0; 856 | } 857 | 858 | #write ul>li>p:only-child, 859 | #write ol>li>p:only-child, 860 | #write ul>li>input+p:last-child, 861 | #write ol>li>input+p:last-child { 862 | margin-top: 0; 863 | margin-bottom: 0; 864 | } 865 | 866 | ul ul, 867 | ul ol, 868 | ol ul, 869 | ol ol { 870 | margin-top: 0; 871 | margin-bottom: 0; 872 | } 873 | 874 | .ol-list .ol-list, 875 | .ol-list .ul-list, 876 | .ul-list .ul-list, 877 | .ul-list .ol-list { 878 | margin-top: 0; 879 | margin-bottom: 0; 880 | } 881 | 882 | /* blockquote */ 883 | blockquote { 884 | font-weight: 400; 885 | font-style: normal; 886 | color: var(--tw-prose-quotes); 887 | border-left-width: 0.25rem; 888 | border-left-color: var(--theme-link); 889 | quotes: "\201C" "\201D" "\2018" "\2019"; 890 | margin-top: 1.6em; 891 | margin-bottom: 1.6em; 892 | padding-left: 1.0666667em; 893 | padding-top: 1em; 894 | padding-bottom: 1em; 895 | padding-right: 1em; 896 | border-radius: 0 .5em .5em 0; 897 | background-color: var(--theme-200); 898 | } 899 | 900 | blockquote h1::before, 901 | blockquote h2::before, 902 | blockquote h3::before, 903 | blockquote h4::before, 904 | blockquote h5::before, 905 | blockquote h6::before { 906 | content: none; 907 | /* Removes the content, effectively hiding the bar */ 908 | padding-left: 0 !important; 909 | } 910 | 911 | /* hr */ 912 | hr { 913 | border-color: var(--tw-prose-hr); 914 | border-top-width: 1px; 915 | } 916 | 917 | [mdtype="hr"] { 918 | margin-top: 1.4em; 919 | margin-bottom: 1.4em; 920 | } 921 | 922 | p { 923 | margin-top: 1em; 924 | margin-bottom: 1em; 925 | } 926 | 927 | /* diagram panel */ 928 | .md-diagram-panel { 929 | color: var(--tw-prose-body); 930 | } 931 | 932 | .enable-diagrams .md-diagram .code-tooltip { 933 | bottom: -1.9em; 934 | right: 0; 935 | } 936 | 937 | .md-fences-adv-panel { 938 | margin-top: 1.3em; 939 | } 940 | 941 | /* footnote definition */ 942 | sup.md-footnote { 943 | color: var(--footnote); 944 | background-color: var(--footnote-bg); 945 | } 946 | 947 | .footnotes { 948 | font-size: 0.85em; 949 | } 950 | 951 | .md-reverse-footnote-area a { 952 | font-family: "IBMPlexSans"; 953 | text-decoration: none; 954 | color: var(--tw-primary); 955 | border-radius: 3px; 956 | } 957 | 958 | .md-hover-tip .code-tooltip-content { 959 | font-size: 1.05rem; 960 | line-height: 1.6; 961 | padding: 0.8em 1.2em; 962 | } 963 | 964 | .md-reverse-footnote-area a:hover { 965 | background-color: var(--item-hover-bg-color); 966 | } 967 | 968 | .md-def-name:before { 969 | color: var(--md-char-color); 970 | } 971 | 972 | .md-rawblock.md-rawblock-on-edit, 973 | .md-rawblock:hover { 974 | color: var(--tw-prose-pre-code); 975 | } 976 | 977 | .md-inline-math script { 978 | color: var(--tw-prose-code); 979 | } 980 | 981 | g[data-mml-node="merror"]>rect[data-background] { 982 | fill: var(--tw-highlight-color) !important; 983 | } 984 | 985 | g[data-mml-node="merror"]>g { 986 | fill: #000 !important; 987 | stroke: #000 !important; 988 | } 989 | 990 | .code-tooltip { 991 | color: var(--tw-prose-pre-code); 992 | } 993 | 994 | .code-tooltip .md-mathjax-preview { 995 | color: var(--tw-prose-body); 996 | } 997 | 998 | .md-htmlblock-container, 999 | .md-rawblock-input.md-rawblock-control, 1000 | .md-htmlblock-panel.md-rawblock-control, 1001 | .md-math-container { 1002 | border-radius: 0.5rem 0 0.5rem 0.5rem; 1003 | } 1004 | 1005 | .md-rawblock-input { 1006 | font-size: var(--code-blocks-font-size); 1007 | padding: 0 1.3333333em; 1008 | } 1009 | 1010 | .md-mathblock-panel .md-rawblock-input.md-rawblock-control { 1011 | border-top-color: transparent; 1012 | border-bottom-color: transparent; 1013 | border-radius: 0; 1014 | } 1015 | 1016 | .md-mathblock-panel .md-rawblock-before { 1017 | padding-top: 1.1em; 1018 | border-top-left-radius: 0.5rem; 1019 | } 1020 | 1021 | .md-mathblock-panel .md-rawblock-after { 1022 | padding-bottom: 1.1em; 1023 | border-bottom-left-radius: 0.5rem; 1024 | border-bottom-right-radius: 0.5rem; 1025 | } 1026 | 1027 | .md-htmlblock-panel .md-rawblock-input { 1028 | padding-top: 1.1111111em; 1029 | padding-bottom: 1.1111111em; 1030 | } 1031 | 1032 | .md-mathblock-panel .md-rawblock-before, 1033 | .md-mathblock-panel .md-rawblock-after { 1034 | font-size: var(--code-blocks-font-size); 1035 | padding-left: calc(4px + 1.3333333em); 1036 | color: var(--code-bracket); 1037 | } 1038 | 1039 | .md-rawblock-tooltip { 1040 | color: var(--tw-prose-pre-code); 1041 | border-radius: 0.5rem 0.5rem 0 0; 1042 | } 1043 | 1044 | .md-rawblock-tooltip-name { 1045 | opacity: 1; 1046 | } 1047 | 1048 | .md-comment { 1049 | font-size: var(--inline-code-font-size); 1050 | color: var(--code-comment); 1051 | } 1052 | 1053 | .md-raw-inline, 1054 | .md-tag, 1055 | [md-inline="linebreak"], 1056 | .md-image>.md-meta, 1057 | .md-inline-math.md-expand>.md-inline-math-container { 1058 | font-size: var(--code-blocks-font-size); 1059 | } 1060 | 1061 | /** 1062 | * Code Fences 1063 | * see http://support.typora.io/Code-Block-Styles 1064 | */ 1065 | 1066 | :root { 1067 | --cf-bg-color: #050607; 1068 | --cf-font-color: var(--theme-font-general); 1069 | } 1070 | 1071 | .md-fences { 1072 | color: var(--cf-font-color); 1073 | background-color: var(--cf-bg-color); 1074 | font-weight: 400; 1075 | font-size: var(--code-blocks-font-size); 1076 | line-height: 1.5; 1077 | margin-top: 1em; 1078 | margin-bottom: 1em; 1079 | border-radius: 0.5rem; 1080 | padding: 1em 1em; 1081 | -webkit-font-smoothing: initial; 1082 | -moz-osx-font-smoothing: initial; 1083 | } 1084 | 1085 | .md-fences.md-focus { 1086 | border-bottom-right-radius: 0; 1087 | } 1088 | 1089 | .md-fences>.code-tooltip { 1090 | height: 1.8rem; 1091 | top: 0.4rem; 1092 | right: 0.4rem; 1093 | font-size: 0.8rem; 1094 | border-radius: 0.5rem; 1095 | padding-left: 0 !important; 1096 | padding-right: 0 !important; 1097 | background-color: var(--theme-200); 1098 | color: var(--theme-font-general); 1099 | } 1100 | 1101 | .md-fences:hover>.code-tooltip { 1102 | background-color: var(--theme-300); 1103 | } 1104 | 1105 | .code-tooltip .ty-input { 1106 | min-width: 10rem; 1107 | } 1108 | 1109 | pre code { 1110 | background-color: transparent; 1111 | border-width: 0; 1112 | border-radius: 0; 1113 | padding: 0; 1114 | font-weight: inherit; 1115 | color: inherit; 1116 | font-size: inherit; 1117 | font-family: inherit; 1118 | line-height: inherit; 1119 | } 1120 | 1121 | pre code::before { 1122 | content: none; 1123 | } 1124 | 1125 | pre code::after { 1126 | content: none; 1127 | } 1128 | 1129 | /* SYNTAX HIGHLIGHTING */ 1130 | 1131 | :root { 1132 | --code-gutter: #434957; 1133 | } 1134 | 1135 | #write .cm-s-inner { 1136 | --code-neutral: rgb(99, 104, 112); 1137 | --code-cursor: var(--theme-800); 1138 | --code-string: #709158; 1139 | --code-number: rgb(161, 108, 59); 1140 | --code-tag: #9b3d45; 1141 | --code-keyword: rgb(151, 83, 172); 1142 | --code-variable: rgb(66, 142, 204); 1143 | --code-comment: #595d63; 1144 | --code-operator: var(--code-comment); 1145 | --code-bracket: var(--code-comment); 1146 | --code-citation: var(--theme-500); 1147 | } 1148 | 1149 | .CodeMirror-selectedtext { 1150 | background-color: transparent; 1151 | } 1152 | 1153 | .CodeMirror-cursor { 1154 | border-left: 2px solid var(--code-cursor) !important; 1155 | } 1156 | 1157 | .CodeMirror-gutters { 1158 | border-color: var(--code-gutter); 1159 | } 1160 | 1161 | .cm-s-inner span.cm-string { 1162 | color: var(--code-string); 1163 | } 1164 | 1165 | .cm-s-inner span.cm-number { 1166 | color: var(--code-number); 1167 | } 1168 | 1169 | .cm-s-inner span.cm-tag { 1170 | color: var(--code-tag) 1171 | } 1172 | 1173 | .cm-s-inner span.cm-keyword { 1174 | color: var(--code-keyword); 1175 | } 1176 | 1177 | .cm-s-inner span.cm-qualifier { 1178 | color: white; 1179 | } 1180 | 1181 | .cm-s-inner .CodeMirror-guttermarker, 1182 | .cm-s-inner .CodeMirror-guttermarker-subtle, 1183 | .cm-s-inner span.cm-comment.cm-def, 1184 | .cm-s-inner span.cm-comment.cm-type, 1185 | .cm-s-inner span.cm-builtin, 1186 | .cm-s-inner span.cm-type, 1187 | .cm-s-inner span.cm-header, 1188 | .cm-s-inner span.cm-link, 1189 | .cm-s-inner span.cm-error { 1190 | background: transparent; 1191 | color: var(--code-neutral); 1192 | } 1193 | 1194 | 1195 | .cm-s-inner span.cm-atom, 1196 | .cm-s-inner span.cm-def { 1197 | color: var(--code-variable); 1198 | } 1199 | 1200 | .cm-s-inner span.cm-attribute { 1201 | color: #a16934; 1202 | } 1203 | 1204 | .cm-s-inner span.cm-variable { 1205 | color: #bd8d35; 1206 | } 1207 | 1208 | .cm-s-inner span.cm-property { 1209 | color: #377fb9; 1210 | } 1211 | 1212 | .cm-s-inner span.cm-string-2 { 1213 | color: #608f3f; 1214 | } 1215 | 1216 | .cm-s-inner span.cm-property, 1217 | .cm-s-inner span.cm-property-2, 1218 | .cm-s-inner span.cm-variable-2, 1219 | .cm-s-inner span.cm-variable-3 { 1220 | color: rgb(57, 127, 184); 1221 | } 1222 | 1223 | .cm-s-inner span.cm-type { 1224 | color: #1a8b45; 1225 | } 1226 | 1227 | .cm-s-inner span.cm-comment { 1228 | color: var(--code-comment) 1229 | } 1230 | 1231 | .cm-s-inner .CodeMirror-linenumber { 1232 | color: var(--code-gutter); 1233 | } 1234 | 1235 | .cm-s-inner span.cm-operator { 1236 | color: var(--code-operator); 1237 | } 1238 | 1239 | .cm-s-inner span.cm-bracket, 1240 | .cm-s-inner span.cm-tag.cm-bracket, 1241 | .cm-s-inner span.cm-meta { 1242 | color: var(--code-bracket); 1243 | } 1244 | 1245 | .cm-s-inner span.cm-link { 1246 | text-decoration: underline; 1247 | } 1248 | 1249 | /** 1250 | * Inline Elements 1251 | */ 1252 | 1253 | /* basic styles */ 1254 | 1255 | code { 1256 | color: var(--inline-code-font-color); 1257 | font-weight: normal; 1258 | font-size: var(--inline-code-font-size); 1259 | font-family: var(--ui-font-monospace); 1260 | padding: .2rem .2rem; 1261 | border-radius: 3px; 1262 | background: var(--theme-muted) !important; 1263 | display: inline; 1264 | vertical-align: bottom; 1265 | line-height: inherit; 1266 | -webkit-font-smoothing: initial; 1267 | -moz-osx-font-smoothing: initial; 1268 | } 1269 | 1270 | [md-inline="code"].md-expand>code::before, 1271 | [md-inline="code"].md-expand>code::after { 1272 | content: ""; 1273 | } 1274 | 1275 | a code { 1276 | color: var(--tw-prose-links); 1277 | } 1278 | 1279 | strong { 1280 | color: var(--tw-prose-bold); 1281 | font-weight: 600; 1282 | } 1283 | 1284 | a { 1285 | color: var(--tw-prose-links); 1286 | text-decoration: none; 1287 | font-weight: 500; 1288 | } 1289 | 1290 | a:hover { 1291 | text-decoration: underline; 1292 | } 1293 | 1294 | /* A block-level image should have a total top and bottom margin of 2em. 1295 | It is always wrapped in a paragraph with 1.2em vertical margin, hence we 1296 | add 0.8 here */ 1297 | p>.md-image:only-child { 1298 | margin-top: 0.8em !important; 1299 | margin-bottom: 0.8em !important; 1300 | } 1301 | 1302 | .md-image>.md-meta { 1303 | color: var(--tw-prose-code); 1304 | } 1305 | 1306 | .md-image>img { 1307 | border-radius: 0.5em !important; 1308 | border: none !important; 1309 | } 1310 | 1311 | /* extend styles */ 1312 | 1313 | mark { 1314 | border-radius: 3px; 1315 | padding: 0 2px; 1316 | background-color: var(--tw-highlight-color); 1317 | } 1318 | 1319 | /** 1320 | * Source Code Mode 1321 | * see http://support.typora.io/Code-Block-Styles 1322 | */ 1323 | 1324 | .cm-s-typora-default .CodeMirror-activeline-background { 1325 | background-color: var(--item-hover-bg-color); 1326 | } 1327 | 1328 | #typora-source { 1329 | font-family: var(--ui-font-monospace); 1330 | color: var(--typora-source-body); 1331 | } 1332 | 1333 | #typora-source .cm-header { 1334 | color: var(--code-tag); 1335 | } 1336 | 1337 | #typora-source .cm-link { 1338 | color: var(--code-string); 1339 | } 1340 | 1341 | #typora-source .cm-string { 1342 | color: var(--code-string); 1343 | } 1344 | 1345 | #typora-source .cm-comment { 1346 | color: var(--code-comment); 1347 | } 1348 | 1349 | #typora-source .cm-atom { 1350 | color: var(--code-citation); 1351 | } 1352 | 1353 | #typora-source .cm-tag { 1354 | color: var(--code-tag); 1355 | } 1356 | 1357 | #typora-source .cm-attribute { 1358 | color: var(--code-variable); 1359 | } 1360 | 1361 | #typora-source .cm-bracket { 1362 | color: var(--code-bracket); 1363 | } 1364 | 1365 | .file-list-item-file-ext-part { 1366 | opacity: 0.5; 1367 | } 1368 | 1369 | #write div.md-toc-tooltip { 1370 | background-color: var(--tw-prose-bg); 1371 | } 1372 | 1373 | .md-toc { 1374 | font-size: 0.94em; 1375 | } 1376 | 1377 | .md-toc-h1 .md-toc-inner { 1378 | margin-left: 0; 1379 | } 1380 | 1381 | .md-toc-h2 .md-toc-inner { 1382 | margin-left: 1em; 1383 | } 1384 | 1385 | .md-toc-h3 .md-toc-inner { 1386 | margin-left: 2em; 1387 | } 1388 | 1389 | .md-toc-h4 .md-toc-inner { 1390 | margin-left: 3em; 1391 | } 1392 | 1393 | .md-toc-h5 .md-toc-inner { 1394 | margin-left: 4em; 1395 | } 1396 | 1397 | .md-toc-h6 .md-toc-inner { 1398 | margin-left: 5em; 1399 | } 1400 | 1401 | #typora-sidebar { 1402 | border-right: var(--window-border); 1403 | } 1404 | 1405 | .sidebar-tab { 1406 | text-transform: none; 1407 | font-weight: 700; 1408 | font-size: 1.1em; 1409 | } 1410 | 1411 | .md-search-hit { 1412 | color: var(--search-hit-text-font-color); 1413 | background-color: var(--search-hit-text-bg-color); 1414 | } 1415 | 1416 | #md-searchpanel { 1417 | box-shadow: none; 1418 | filter: var(--tw-drop-shadow-md); 1419 | } 1420 | 1421 | #md-searchpanel .btn:not(.close-btn):hover { 1422 | box-shadow: none; 1423 | -webkit-box-shadow: none; 1424 | background-color: var(--tw-button-hover-bg); 1425 | } 1426 | 1427 | #md-searchpanel input, 1428 | #md-searchpanel .btn, 1429 | #searchpanel-msg { 1430 | border-radius: 5px; 1431 | } 1432 | 1433 | #searchpanel-msg { 1434 | color: var(--theme-500); 1435 | border-color: var(--theme-300); 1436 | background: var(--theme-100); 1437 | } 1438 | 1439 | .form-control { 1440 | border-color: var(--panel-border-color); 1441 | } 1442 | 1443 | .btn-default { 1444 | background-color: var(--button-bg); 1445 | } 1446 | 1447 | 1448 | /*sidebar file-list and search results*/ 1449 | 1450 | #file-library-list[data-state="complete"] #sidebar-loading-template { 1451 | padding: 0rem; 1452 | } 1453 | 1454 | #typora-sidebar .file-list-item, 1455 | .ty-search-item { 1456 | border: none; 1457 | padding: 1rem; 1458 | } 1459 | 1460 | body.html-for-mac #typora-sidebar .file-list-item, 1461 | body.html-for-mac .ty-search-item { 1462 | transition-duration: 0.3s !important; 1463 | transition-property: background-color, border, color, height !important; 1464 | } 1465 | 1466 | #typora-sidebar .file-list-item:hover, 1467 | .ty-search-item:hover { 1468 | background: var(--borders); 1469 | } 1470 | 1471 | #typora-sidebar .ty-search-item-line { 1472 | font-family: var(--font-family); 1473 | font-size: 0.8rem; 1474 | font-weight: 400; 1475 | padding: 0.3rem; 1476 | border-radius: 0.3rem; 1477 | margin-left: 24px; 1478 | } 1479 | 1480 | body.o #typora-sidebar .ty-search-item-line { 1481 | transition-duration: 0.2s; 1482 | } 1483 | 1484 | #typora-sidebar .ty-search-item-line * { 1485 | opacity: 1; 1486 | } 1487 | 1488 | #typora-sidebar .ty-search-item .ty-search-item-line:hover, 1489 | #typora-sidebar .ty-search-item-line.active { 1490 | background-color: var(--select-text-bg-color); 1491 | color: white; 1492 | } /* makes easier identifying which searched item is active in the sidebar */ 1493 | 1494 | #typora-sidebar .file-list-item-file-name { 1495 | font-weight: 800; 1496 | font-size: 0.9rem; 1497 | margin-bottom: 0rem; 1498 | line-height: 1.8rem; 1499 | float: right; 1500 | } 1501 | 1502 | #typora-sidebar .file-list-item-file-ext-part { 1503 | font-weight: 800; 1504 | opacity: 0.5; 1505 | } 1506 | 1507 | #typora-sidebar .file-list-item-parent-loc, 1508 | #typora-sidebar .file-list-item-time { 1509 | font-family: var(--font-family); 1510 | font-weight: 400; 1511 | opacity: 0.5; 1512 | display: block; 1513 | } 1514 | 1515 | #typora-sidebar .file-list-item-summary { 1516 | float: left; 1517 | font-size: 0.8rem; 1518 | opacity: 0.9; 1519 | } 1520 | 1521 | #typora-sidebar .file-list-item-count { 1522 | font-size: 0.75rem; 1523 | background-color: var(--primary-color); 1524 | color: white; 1525 | border-radius: 0.2rem; 1526 | min-width: 1.25rem; 1527 | height: 1.25rem; 1528 | text-align: center; 1529 | line-height: 1.25rem; 1530 | position: relative; 1531 | top: 0.3rem; 1532 | } 1533 | 1534 | #typora-sidebar input.file-list-item-file-name { 1535 | margin: 0.5rem 0rem 0.5rem 0.7rem; 1536 | padding: 0.4rem !important; 1537 | line-height: 1rem; 1538 | float: right; 1539 | border-radius: 0.3rem; 1540 | font-weight: 500; 1541 | background-color: var(--background) !important; 1542 | } 1543 | 1544 | #typora-sidebar .file-list-item.file-library-file-node { 1545 | border: none; 1546 | } 1547 | 1548 | #typora-sidebar .file-tree-node.active .file-node-background, 1549 | #typora-sidebar .file-list-item.active, 1550 | #typora-sidebar .ty-search-item.active { 1551 | background-color: var(--background); 1552 | outline: 1px solid var(--borders); 1553 | border-right: none; 1554 | border-top: none; 1555 | border-bottom: none; 1556 | border-left: 3px solid var(--primary-color); 1557 | color: var(--primary-color) !important; 1558 | font-weight: 500; 1559 | } 1560 | 1561 | #typora-sidebar .file-tree-node.active .file-node-content { 1562 | color: var(--primary-color) !important; 1563 | font-weight: 500; 1564 | } 1565 | 1566 | #typora-sidebar .file-tree-node { 1567 | padding: 0rem; 1568 | font-weight: 400; 1569 | font-size: 1rem; 1570 | margin-left: 0.8rem; 1571 | } 1572 | 1573 | #typora-sidebar .file-tree-node .file-node-content { 1574 | padding: 0rem; 1575 | line-height: 2.2rem; 1576 | height: 2.2rem; 1577 | background: none; 1578 | margin-bottom: 0px; 1579 | } 1580 | 1581 | #typora-sidebar .file-tree-node .file-node-background { 1582 | padding: 0rem; 1583 | height: 2.2rem; 1584 | } 1585 | 1586 | #typora-sidebar .file-tree-node .file-node-icon { 1587 | margin-right: 0.5rem; 1588 | } 1589 | 1590 | #typora-sidebar .file-tree-node .file-node-icon.fa-file-text-o { 1591 | margin-top: 0.33rem; 1592 | } 1593 | 1594 | #typora-sidebar .file-tree-node .file-node-icon.fa-folder { 1595 | margin-top: 0.36rem; 1596 | } 1597 | 1598 | #typora-sidebar .file-tree-node .fa-caret-down, 1599 | #typora-sidebar .file-tree-node .fa-caret-right { 1600 | position: relative; 1601 | top: 5px; 1602 | } 1603 | 1604 | #typora-sidebar .file-tree-node .file-tree-rename-input { 1605 | height: 2.2rem; 1606 | background: none; 1607 | border: none; 1608 | font-weight: 400; 1609 | margin: 0rem; 1610 | padding-left: 0rem; 1611 | } 1612 | 1613 | #typora-sidebar .ty-search-item-collapse-icon { 1614 | top: 9px; 1615 | } 1616 | 1617 | /*no left border*/ 1618 | #typora-sidebar .file-tree-node.active > .file-node-background { 1619 | border: none; 1620 | } 1621 | 1622 | /*no dotted highlighting*/ 1623 | .file-library-node:not(.file-node-root):focus > .file-node-content { 1624 | outline: none; 1625 | } 1626 | 1627 | #typora-sidebar #sidebar-files-menu { 1628 | border: solid 1px var(--borders); 1629 | border-radius: 0.3rem; 1630 | box-shadow: rgba(116, 129, 141, 0.1) 0px 3px 8px 0px; 1631 | } 1632 | 1633 | #typora-sidebar #ty-sidebar-footer { 1634 | background-color: var(--bg-color); 1635 | border-top: solid 1px var(--borders); 1636 | font-weight: 500; 1637 | } 1638 | 1639 | #typora-sidebar #ty-sidebar-footer li { 1640 | transition-duration: 0.2s; 1641 | transition-property: background-color, color; 1642 | } 1643 | 1644 | #typora-sidebar 1645 | #ty-sidebar-footer 1646 | li:not(.file-sort-item):not(:first-child):not(.empty-menu-group):not(.folder-menu-group):hover { 1647 | color: var(--primary-color); 1648 | background-color: var(--boxes); 1649 | } 1650 | 1651 | #typora-sidebar 1652 | #ty-sidebar-footer 1653 | .file-action-item.file-sort-item 1654 | > span:first-of-type { 1655 | line-height: 2rem; 1656 | } 1657 | 1658 | /* Folder + File Icons */ 1659 | 1660 | /* Hide the original Font Awesome icon */ 1661 | #typora-sidebar .file-tree-node .file-node-icon { 1662 | font-size: 0; /* Hide the text/icon inside the tag */ 1663 | width: 16px; /* Set a fixed width */ 1664 | height: 16px; /* Set a fixed height */ 1665 | background-size: contain; /* Ensure the SVG scales correctly */ 1666 | background-repeat: no-repeat; /* Prevent repeating */ 1667 | display: inline-block; /* Maintain the element's block nature */ 1668 | } 1669 | 1670 | #typora-sidebar .file-tree-node .file-node-icon.fa-folder { 1671 | background-image: url('./ceylon/icons/cd-dualtone-folder-closed.svg'); 1672 | margin-top: 0.5rem; 1673 | } 1674 | 1675 | /* Specific styling for the collapsed folder icon SVG */ 1676 | #typora-sidebar .file-tree-node.file-node-collapsed > .file-node-content > .file-node-icon.fa-folder { 1677 | background-image: url('./ceylon/icons/cd-dualtone-folder-closed.svg'); 1678 | margin-top: 0.5rem; 1679 | } 1680 | 1681 | /* Specific styling for the expanded folder icon SVG */ 1682 | #typora-sidebar .file-tree-node.file-node-expanded > .file-node-content > .file-node-icon.fa-folder { 1683 | background-image: url('./ceylon/icons/cd-dualtone-folder-open.svg'); 1684 | margin-top: 0.5rem; 1685 | } 1686 | 1687 | /* Specific styling for the file icon SVG */ 1688 | #typora-sidebar .file-tree-node > .file-node-content > .file-node-icon.fa-file-text-o { 1689 | background-image: url('./ceylon/icons/cd-dualtone-file.svg'); 1690 | margin-top: 0.5rem; 1691 | } 1692 | 1693 | /* Specific styling for the active file icon SVG */ 1694 | #typora-sidebar .file-tree-node.active > .file-node-content > .file-node-icon.fa-file-text-o { 1695 | background-image: url('./ceylon/icons/cd-dualtone-file-selected.svg'); 1696 | margin-top: 0.5rem; 1697 | } -------------------------------------------------------------------------------- /ceylon.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /*** Custom fonts ***/ 4 | @import url('./ceylon/fonts.css'); 5 | 6 | /* VARIABLES */ 7 | :root { 8 | --theme-0: #fff; 9 | --theme-primary: #076DDD; 10 | 11 | --theme-muted: #F6F7F8; 12 | --theme-border: #EBEDF0; 13 | --theme-muted-blue: #d4e7fd; 14 | 15 | --theme-link: #076DDD; 16 | --theme-font-general: #171E27; 17 | 18 | /* Slate grayscale */ 19 | --theme-50: #f8fafc; 20 | --theme-100: #f1f5f9; 21 | --theme-200: #e2e8f0; 22 | --theme-300: #cbd5e1; 23 | --theme-400: #94a3b8; 24 | --theme-500: #64748b; 25 | --theme-600: #475569; 26 | --theme-700: #334155; 27 | --theme-800: #1e293b; 28 | --theme-900: #0f172a; 29 | 30 | /* Tailwind variables */ 31 | --tw-primary: #0967f3; 32 | 33 | --tw-prose-body: var(--theme-font-general); 34 | --tw-prose-headings: var(--theme-900); 35 | --tw-prose-lead: var(--theme-600); 36 | --tw-prose-links: var(--theme-link); 37 | --tw-prose-bold: var(--theme-900); 38 | --tw-prose-counters: var(--theme-500); 39 | --tw-prose-bullets: var(--theme-500); 40 | --tw-prose-hr: var(--theme-200); 41 | --tw-prose-quotes: var(--theme-900); 42 | --tw-prose-quote-borders: var(--theme-200); 43 | --tw-prose-captions: var(--theme-500); 44 | --tw-prose-code: var(--theme-900); 45 | --tw-prose-pre-code: var(--theme-100); 46 | --tw-prose-pre-bg: var(--theme-800); 47 | --tw-prose-th-borders: var(--theme-300); 48 | --tw-prose-td-borders: var(--theme-200); 49 | --tw-prose-bg: var(--theme-0); 50 | --tw-prose-meta: var(--theme-500); 51 | --tw-prose-meta-bg: var(--theme-100); 52 | 53 | --tw-prose-invert-body: var(--theme-300); 54 | --tw-prose-invert-headings: var(--theme-0); 55 | --tw-prose-invert-lead: var(--theme-400); 56 | --tw-prose-invert-links: var(--theme-0); 57 | --tw-prose-invert-bold: var(--theme-0); 58 | --tw-prose-invert-counters: var(--theme-400); 59 | --tw-prose-invert-bullets: var(--theme-600); 60 | --tw-prose-invert-hr: var(--theme-700); 61 | --tw-prose-invert-quotes: var(--theme-100); 62 | --tw-prose-invert-quote-borders: var(--theme-700); 63 | --tw-prose-invert-captions: var(--theme-400); 64 | --tw-prose-invert-code: var(--theme-0); 65 | --tw-prose-invert-pre-bg: var(--theme-900); 66 | --tw-prose-invert-th-borders: var(--theme-600); 67 | --tw-prose-invert-td-borders: var(--theme-700); 68 | --tw-prose-invert-bg: var(--theme-800); 69 | --tw-prose-invert-meta: var(--theme-400); 70 | --tw-prose-invert-meta-bg: var(--theme-700); 71 | 72 | --tw-highlight-color: #fde047; 73 | /* yellow-300 */ 74 | --tw-drop-shadow-md: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)); 75 | --tw-button-hover-bg: var(--theme-100); 76 | 77 | --tw-button-hover-bg-inverted: var(--theme-700); 78 | 79 | /* Typora variables */ 80 | 81 | --background: var(--tw-prose-bg); 82 | --bg-color: var(--tw-prose-bg); 83 | --text-color: var(--tw-prose-body); 84 | --primary-color: var(--theme-primary); 85 | --md-char-color: var(--theme-400); 86 | --meta-content-color: var(--theme-500); 87 | --typora-source-body: var(--theme-800); 88 | --heading-char-color: var(--md-char-color); 89 | --mermaid-theme: neutral; 90 | --active-toggle-btn-color: var(--theme-200); 91 | 92 | --md-char-color-inverted: var(--theme-500); 93 | --meta-content-color-inverted: var(--theme-400); 94 | --typora-source-body-inverted: var(--theme-300); 95 | --mermaid-theme-inverted: dark; 96 | --active-toggle-btn-color-inverted: var(--theme-400); 97 | 98 | /* Sidebar */ 99 | /* --side-bar-bg-color: var(--tw-prose-bg); */ 100 | --side-bar-bg-color: var(--theme-muted); 101 | --active-file-bg-color: var(--theme-100); 102 | --active-file-text-color: var(--tw-prose-bold); 103 | --active-file-border-color: var(--theme-100); 104 | --panel-border-color: var(--theme-300); 105 | --blur-text-color: var(--theme-300); 106 | --window-border: 1px solid var(--theme-border); 107 | --item-hover-bg-color: var(--theme-100); 108 | --search-hit-text-bg-color: var(--theme-200); 109 | --search-hit-text-font-color: inherit; 110 | --search-select-text-color: var(--select-text-font-color); 111 | --search-select-bg-color: var(--select-text-bg-color); 112 | 113 | --blur-text-color-inverted: var(--theme-500); 114 | --panel-border-color-inverted: var(--theme-700); 115 | --active-file-bg-color-inverted: var(--theme-700); 116 | --window-border-inverted: 1px solid var(--theme-700); 117 | --search-hit-text-bg-color-inverted: var(--theme-700); 118 | --search-hit-text-font-color-inverted: var(--theme-0); 119 | --search-select-bg-color-inverted: var(--theme-400); 120 | --rawblock-edit-panel-bd: var(--tw-prose-pre-bg); 121 | --item-hover-bg-color-inverted: var(--theme-700); 122 | 123 | --ui-font-monospace: "IBMPlexMono", "FiraCode", "FiraMono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; 124 | 125 | --ui-font-display: "IBMPlexSans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 126 | 127 | /* Custom */ 128 | --footnote: var(--tw-prose-body); 129 | /* I'd love to use the --theme grayscale for --footnote-bg, but there's (currently) 130 | no way to add an alpha-channel to a CSS variable (and we need the transparency 131 | because otherwise the caret wil not be visible), so I here just used a hardcoded 132 | copy of --theme-500 */ 133 | --footnote-bg: #94a3b855; 134 | --button-bg: var(--theme-200); 135 | 136 | --button-bg-inverted: var(--theme-600); 137 | 138 | --md-grid-header: var(--theme-100); 139 | --md-grid-header-ext: var(--theme-400); 140 | --md-grid-ext: var(--theme-300); 141 | --md-grid-header-active: var(--theme-500); 142 | --md-grid-active: var(--theme-400); 143 | --md-grid-border-color: var(--theme-500); 144 | 145 | --md-grid-header-inverted: var(--theme-600); 146 | --md-grid-header-ext-inverted: var(--theme-500); 147 | --md-grid-ext-inverted: var(--theme-600); 148 | --md-grid-header-active-inverted: var(--theme-400); 149 | --md-grid-active-inverted: var(--theme-500); 150 | --md-grid-border-color-inverted: var(--theme-200); 151 | 152 | --code-blocks-font-size: 0.86em; 153 | --inline-code-font-size: 0.86em; 154 | 155 | --inline-code-font-color: #876CE0; 156 | } 157 | 158 | .ty-file-search-match-text { 159 | background-color: var(--search-hit-text-bg-color); 160 | } 161 | 162 | /* TAILWIND RESET */ 163 | 164 | /* 165 | 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 166 | 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) 167 | */ 168 | 169 | *, 170 | ::before, 171 | ::after { 172 | box-sizing: border-box; 173 | /* 1 */ 174 | border-width: 0; 175 | /* 2 */ 176 | border-style: solid; 177 | /* 2 */ 178 | border-color: currentColor; 179 | /* 2 */ 180 | } 181 | 182 | ::before, 183 | ::after { 184 | --tw-content: ""; 185 | } 186 | 187 | /* 188 | 1. Use a consistent sensible line-height in all browsers. 189 | 2. Prevent adjustments of font size after orientation changes in iOS. 190 | 3. Use a more readable tab size. 191 | */ 192 | 193 | #text { 194 | line-height: 1.5; 195 | /* 1 */ 196 | -webkit-text-size-adjust: 100%; 197 | /* 2 */ 198 | -moz-tab-size: 4; 199 | /* 3 */ 200 | -o-tab-size: 4; 201 | tab-size: 4; 202 | /* 3 */ 203 | } 204 | 205 | /* 206 | 1. Remove the margin in all browsers. 207 | 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. 208 | */ 209 | 210 | #text { 211 | margin: 0; 212 | /* 1 */ 213 | line-height: inherit; 214 | /* 2 */ 215 | } 216 | 217 | /* 218 | 1. Add the correct height in Firefox. 219 | 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 220 | 3. Ensure horizontal rules are visible by default. 221 | */ 222 | 223 | hr { 224 | height: 0; 225 | /* 1 */ 226 | color: inherit; 227 | /* 2 */ 228 | border-top-width: 1px; 229 | /* 3 */ 230 | } 231 | 232 | /* 233 | Add the correct text decoration in Chrome, Edge, and Safari. 234 | */ 235 | 236 | abbr:where([title]) { 237 | -webkit-text-decoration: underline dotted; 238 | text-decoration: underline dotted; 239 | } 240 | 241 | /* 242 | Remove the default font size and weight for headings. 243 | */ 244 | 245 | h1, 246 | h2, 247 | h3, 248 | h4, 249 | h5, 250 | h6 { 251 | font-size: inherit; 252 | font-weight: inherit; 253 | } 254 | 255 | /* 256 | Reset links to optimize for opt-in styling instead of opt-out. 257 | */ 258 | 259 | a { 260 | color: inherit; 261 | text-decoration: inherit; 262 | } 263 | 264 | /* 265 | Add the correct font weight in Edge and Safari. 266 | */ 267 | 268 | b, 269 | strong { 270 | font-weight: bolder; 271 | } 272 | 273 | /* 274 | 1. Use the user's configured `mono` font family by default. 275 | 2. Correct the odd `em` font sizing in all browsers. 276 | */ 277 | 278 | code, 279 | kbd, 280 | samp, 281 | pre { 282 | font-family: var(--ui-font-monospace); 283 | /* 1 */ 284 | font-size: 1em; 285 | /* 2 */ 286 | } 287 | 288 | /* 289 | Add the correct font size in all browsers. 290 | */ 291 | 292 | small { 293 | font-size: 80%; 294 | } 295 | 296 | /* 297 | Prevent `sub` and `sup` elements from affecting the line height in all browsers. 298 | */ 299 | 300 | sub, 301 | sup { 302 | font-size: 75%; 303 | line-height: 0; 304 | position: relative; 305 | vertical-align: baseline; 306 | } 307 | 308 | sub { 309 | bottom: -0.25em; 310 | } 311 | 312 | sup { 313 | top: -0.5em; 314 | } 315 | 316 | /* 317 | 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 318 | 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 319 | 3. Remove gaps between table borders by default. 320 | */ 321 | 322 | table { 323 | text-indent: 0; 324 | /* 1 */ 325 | border-color: inherit; 326 | /* 2 */ 327 | border-collapse: collapse; 328 | /* 3 */ 329 | } 330 | 331 | /* 332 | 1. Change the font styles in all browsers. 333 | 2. Remove the margin in Firefox and Safari. 334 | 3. Remove default padding in all browsers. 335 | */ 336 | 337 | button, 338 | input, 339 | optgroup, 340 | select, 341 | textarea { 342 | font-family: inherit; 343 | /* 1 */ 344 | font-size: 100%; 345 | /* 1 */ 346 | line-height: inherit; 347 | /* 1 */ 348 | color: inherit; 349 | /* 1 */ 350 | margin: 0; 351 | /* 2 */ 352 | padding: 0; 353 | /* 3 */ 354 | } 355 | 356 | /* 357 | Removes the default spacing and border for appropriate elements. 358 | */ 359 | 360 | blockquote, 361 | dl, 362 | dd, 363 | h1, 364 | h2, 365 | h3, 366 | h4, 367 | h5, 368 | h6, 369 | hr, 370 | figure, 371 | p, 372 | pre { 373 | margin: 0; 374 | } 375 | 376 | fieldset { 377 | margin: 0; 378 | padding: 0; 379 | } 380 | 381 | legend { 382 | padding: 0; 383 | } 384 | 385 | ol, 386 | ul, 387 | menu { 388 | list-style: none; 389 | margin: 0; 390 | padding: 0; 391 | } 392 | 393 | /* 394 | Prevent resizing textareas horizontally by default. 395 | */ 396 | 397 | textarea { 398 | resize: vertical; 399 | } 400 | 401 | /* TAILWIND PROSE IMPLEMENTATION */ 402 | 403 | #write { 404 | font-size: 1.12rem; 405 | line-height: 1.5; 406 | } 407 | 408 | html, 409 | body { 410 | font-family: var(--ui-font-display); 411 | } 412 | 413 | /* on Windows/Linux, it is the part that is not titlebar or status bar. */ 414 | content, 415 | titlebar { 416 | background: var(--tw-prose-bg); 417 | } 418 | 419 | #write { 420 | padding-top: 60px; 421 | padding-bottom: 60px; 422 | color: var(--tw-prose-body); 423 | /*Custom width*/ 424 | max-width: 92ch; 425 | /*Default width*/ 426 | /*max-width: 60ch;*/ 427 | } 428 | 429 | 430 | #write> :where(:first-child) { 431 | margin-top: 0; 432 | } 433 | 434 | #write> :where(:last-child) { 435 | margin-bottom: 0; 436 | } 437 | 438 | /** 439 | * --------------------- 440 | * Block Elements 441 | */ 442 | 443 | /* yaml */ 444 | pre.md-meta-block { 445 | color: var(--tw-prose-meta); 446 | background-color: var(--tw-prose-meta-bg); 447 | font-weight: 400; 448 | font-size: var(--code-blocks-font-size); 449 | line-height: 1.7777778; 450 | border-radius: 0.5rem 451 | /* 8px */ 452 | ; 453 | padding: 1.1111111em 1.3333333em; 454 | margin-bottom: 2.8em; 455 | } 456 | 457 | /* Heading indicator */ 458 | :root { 459 | --h1-ind-color: #E4374B; 460 | --h2-ind-color: #0EB54F; 461 | --h3-ind-color: #076DDD; 462 | --h4-ind-color: #876CE0; 463 | --h5-ind-color: #D2A852; 464 | --h6-ind-color: #E0E5D5; 465 | } 466 | 467 | h1, 468 | h2, 469 | h3, 470 | h4, 471 | h5, 472 | h6 { 473 | position: relative; 474 | padding-left: 10px; 475 | } 476 | 477 | h1::before, 478 | h2::before, 479 | h3::before, 480 | h4::before, 481 | h5::before, 482 | h6::before { 483 | content: ''; 484 | position: absolute; 485 | left: 0; 486 | width: 3px; 487 | top: 2px; 488 | bottom: 2px; 489 | height: calc(100% - 4px); 490 | } 491 | 492 | @media print { 493 | h1::before { 494 | height: 33.63px; 495 | } 496 | h2::before { 497 | height: 30.64px; 498 | } 499 | h3::before { 500 | height: 28.92px; 501 | } 502 | h4::before { 503 | height: 22.66px; 504 | } 505 | h5::before { 506 | height: 21.39px; 507 | } 508 | h6::before { 509 | height: 22.8px; 510 | } 511 | } 512 | 513 | h1:hover::before, 514 | h1.md-focus::before { 515 | content: 'H1'; 516 | border-color: var(--h1-ind-color); 517 | } 518 | 519 | h2:hover::before, 520 | h2.md-focus::before { 521 | content: 'H2'; 522 | border-color: var(--h2-ind-color); 523 | } 524 | 525 | h3:hover::before, 526 | h3.md-focus::before { 527 | content: 'H3'; 528 | border-color: var(--h3-ind-color); 529 | } 530 | 531 | h4:hover::before, 532 | h4.md-focus::before { 533 | content: 'H4'; 534 | border-color: var(--h4-ind-color); 535 | } 536 | 537 | h5:hover::before, 538 | h5.md-focus::before { 539 | content: 'H5'; 540 | border-color: var(--h5-ind-color); 541 | } 542 | 543 | h6:hover::before, 544 | h6.md-focus::before { 545 | content: 'H6'; 546 | border-color: var(--h6-ind-color); 547 | } 548 | 549 | h1:hover::before, 550 | h2:hover::before, 551 | h3:hover::before, 552 | h4:hover::before, 553 | h5:hover::before, 554 | h6:hover::before, 555 | h1.md-focus::before, 556 | h2.md-focus::before, 557 | h3.md-focus::before, 558 | h4.md-focus::before, 559 | h5.md-focus::before, 560 | h6.md-focus::before { 561 | border-width: 0; 562 | border-radius: 0; 563 | left: 0; 564 | background-color: var(--background); 565 | width: 26px; 566 | left: -23px; 567 | font-size: 10px; 568 | color: var(--theme-400);; 569 | margin: 0 auto; 570 | border-right-width: 5px; 571 | display: flex; 572 | align-items: center; 573 | justify-content: center; 574 | line-height: normal; 575 | padding: 0; 576 | top: 2px; 577 | bottom: 2px; 578 | } 579 | 580 | /* headings */ 581 | h1 { 582 | color: var(--tw-prose-headings); 583 | font-weight: 800; 584 | font-size: 2em; 585 | margin-top: 0; 586 | margin-bottom: 0; 587 | line-height: 1.2; 588 | } 589 | 590 | h1 strong { 591 | font-weight: 900; 592 | } 593 | 594 | h1::before { 595 | background-color: var(--h1-ind-color); 596 | /* Color of the bar */ 597 | } 598 | 599 | h2 { 600 | color: var(--tw-prose-headings); 601 | font-weight: 700; 602 | font-size: 1.7em; 603 | line-height: 1.3; 604 | } 605 | 606 | h2 strong { 607 | font-weight: 800; 608 | } 609 | 610 | h2::before { 611 | background-color: var(--h2-ind-color); 612 | /* Color of the bar */ 613 | } 614 | 615 | h3 { 616 | color: var(--tw-prose-headings); 617 | font-weight: 600; 618 | font-size: 1.5em; 619 | line-height: 1.4; 620 | } 621 | 622 | h3 strong { 623 | font-weight: 700; 624 | } 625 | 626 | h3::before { 627 | background-color: var(--h3-ind-color); 628 | /* Color of the bar */ 629 | } 630 | 631 | h4 { 632 | color: var(--tw-prose-headings); 633 | font-weight: 600; 634 | line-height: 1.7; 635 | } 636 | 637 | h4 strong { 638 | font-weight: 700; 639 | } 640 | 641 | h4::before { 642 | background-color: var(--h4-ind-color); 643 | /* Color of the bar */ 644 | } 645 | 646 | h5 { 647 | color: var(--tw-prose-headings); 648 | font-weight: 500; 649 | line-height: 1.8; 650 | font-size: 0.9em; 651 | } 652 | 653 | h5 strong { 654 | font-weight: 500; 655 | } 656 | 657 | h5::before { 658 | background-color: var(--h5-ind-color); 659 | /* Color of the bar */ 660 | } 661 | 662 | h6 { 663 | color: var(--tw-prose-headings); 664 | font-weight: 400; 665 | line-height: 1.9; 666 | font-size: 0.9em; 667 | } 668 | 669 | h5 strong { 670 | font-weight: 400; 671 | } 672 | 673 | h6::before { 674 | background-color: var(--h6-ind-color); 675 | } 676 | 677 | h2 code { 678 | font-size: 0.8611111em; 679 | } 680 | 681 | h3 code { 682 | font-size: 0.9em; 683 | } 684 | 685 | h2+* { 686 | margin-top: 0; 687 | } 688 | 689 | h3+* { 690 | margin-top: 0; 691 | } 692 | 693 | h4+* { 694 | margin-top: 0; 695 | } 696 | 697 | /* table */ 698 | 699 | table { 700 | width: 100%; 701 | table-layout: auto; 702 | text-align: left; 703 | margin-top: 2em; 704 | margin-bottom: 2em; 705 | font-size: 0.9em; 706 | line-height: 1.5; 707 | 708 | border-spacing: 0; 709 | border-collapse: separate; /* Use separate border model */ 710 | border-radius: 0.5em; /* Add border radius to the entire table */ 711 | overflow: hidden; /* Ensure the border radius is applied to the whole table */ 712 | } 713 | 714 | /* table header */ 715 | 716 | thead { 717 | border-bottom-color: var(--theme-muted-blue); 718 | background-color: var(--theme-muted); 719 | } 720 | 721 | table th, 722 | table td { 723 | border: 1px solid var(--theme-300); 724 | padding: .6em; 725 | border-radius: 0; /* Remove border-radius from individual cells */ 726 | } 727 | 728 | table th:first-child { 729 | border-top-left-radius: 0.5em; /* Add rounded corners only to table */ 730 | } 731 | 732 | table th:last-child { 733 | border-top-right-radius: 0.5em; /* Add rounded corners only to table */ 734 | } 735 | 736 | table tr:last-child td:first-child { 737 | border-bottom-left-radius: 0.5em; /* Add rounded corners only to table */ 738 | } 739 | 740 | table tr:last-child td:last-child { 741 | border-bottom-right-radius: 0.5em; /* Add rounded corners only to table */ 742 | } 743 | 744 | /* Remove duplicate borders */ 745 | table th, 746 | table td { 747 | border-top-width: 0; /* Remove top border */ 748 | border-left-width: 0; /* Remove left border */ 749 | } 750 | 751 | table th { 752 | border-top-width: 1px; /* Restore top border for header cells */ 753 | } 754 | 755 | table td:first-child { 756 | border-left-width: 1px; /* Restore left border for the first column cells */ 757 | } 758 | 759 | table th:first-child { 760 | border-left-width: 1px; /* Restore left border for the first header cell */ 761 | } 762 | 763 | table tr:first-child th { 764 | border-top-width: 1px; /* Restore top border for the first header row */ 765 | } 766 | 767 | table tr:first-child td { 768 | border-top-width: 1px; /* Restore top border for the first data row */ 769 | } 770 | 771 | table tr td:last-child { 772 | border-right-width: 1px; /* Ensure right border for the last column cells */ 773 | } 774 | 775 | table tr:last-child td { 776 | border-bottom-width: 1px; /* Ensure bottom border for the last row cells */ 777 | } 778 | 779 | /* table end */ 780 | 781 | 782 | 783 | .md-grid-board tr[row="1"] { 784 | background-color: var(--md-grid-header); 785 | } 786 | 787 | .md-grid-board a:hover, 788 | .md-grid-board a.md-active { 789 | background: var(--md-grid-active); 790 | } 791 | 792 | .md-grid-board tr[row="1"] a:hover, 793 | .md-grid-board tr[row="1"] a.md-active { 794 | background: var(--md-grid-header-active); 795 | } 796 | 797 | .md-grid-board .md-grid-ext { 798 | background: var(--md-grid-ext); 799 | } 800 | 801 | .md-grid-board tr[row="1"] .md-grid-ext { 802 | background: var(--md-grid-header-ext); 803 | } 804 | 805 | .md-grid-board a { 806 | border-color: var(--md-grid-border-color) !important; 807 | } 808 | 809 | /* lists */ 810 | 811 | ol { 812 | list-style-type: decimal; 813 | padding-left: 1.6em; 814 | margin-top: 1em; 815 | margin-bottom: 1em; 816 | } 817 | 818 | li { 819 | margin-top: 0; 820 | margin-bottom: 0; 821 | } 822 | 823 | ul { 824 | list-style-type: disc; 825 | padding-left: 1.6em; 826 | margin-top: 1em; 827 | margin-bottom: 1em; 828 | } 829 | 830 | #write ul.task-list { 831 | padding-left: 0; 832 | } 833 | 834 | #write li.task-list-item { 835 | padding-left: 0.4em; 836 | } 837 | 838 | #write input[type="checkbox"] { 839 | margin-left: -1em; 840 | } 841 | 842 | input[checked]~* { 843 | opacity: 0.7; 844 | text-decoration: line-through; 845 | } 846 | 847 | ol>li::marker { 848 | font-weight: 400; 849 | color: var(--tw-prose-counters); 850 | } 851 | 852 | ul>li::marker { 853 | color: var(--tw-prose-bullets); 854 | } 855 | 856 | ul>li, 857 | ol>li { 858 | padding-left: 0.4em; 859 | } 860 | 861 | ul>li p, 862 | ol>li p { 863 | margin-top: 0; 864 | margin-bottom: 0; 865 | } 866 | 867 | #write>ul>li> :not(input):first-child, 868 | #write>ol>li> :not(input):first-child, 869 | #write>ul>li>input+*, 870 | #write>ol>li>input+* { 871 | margin-top: 0; 872 | } 873 | 874 | #write>ul>li>*:last-child, 875 | #write>ol>li>*:last-child { 876 | margin-bottom: 0; 877 | } 878 | 879 | #write ul>li>p:only-child, 880 | #write ol>li>p:only-child, 881 | #write ul>li>input+p:last-child, 882 | #write ol>li>input+p:last-child { 883 | margin-top: 0; 884 | margin-bottom: 0; 885 | } 886 | 887 | ul ul, 888 | ul ol, 889 | ol ul, 890 | ol ol { 891 | margin-top: 0; 892 | margin-bottom: 0; 893 | } 894 | 895 | .ol-list .ol-list, 896 | .ol-list .ul-list, 897 | .ul-list .ul-list, 898 | .ul-list .ol-list { 899 | margin-top: 0; 900 | margin-bottom: 0; 901 | } 902 | 903 | /* blockquote */ 904 | blockquote { 905 | font-weight: 400; 906 | font-style: normal; 907 | color: var(--tw-prose-quotes); 908 | border-left-width: 0.25rem; 909 | border-left-color: var(--theme-link); 910 | quotes: "\201C" "\201D" "\2018" "\2019"; 911 | margin-top: 1.6em; 912 | margin-bottom: 1.6em; 913 | padding-left: 1.0666667em; 914 | padding-top: 1em; 915 | padding-bottom: 1em; 916 | padding-right: 1em; 917 | border-radius: 0 .5em .5em 0; 918 | background-color: var(--theme-muted-blue); 919 | } 920 | 921 | blockquote h1::before, 922 | blockquote h2::before, 923 | blockquote h3::before, 924 | blockquote h4::before, 925 | blockquote h5::before, 926 | blockquote h6::before { 927 | content: none; 928 | /* Removes the content, effectively hiding the bar */ 929 | padding-left: 0 !important; 930 | } 931 | 932 | /* hr */ 933 | hr { 934 | border-color: var(--tw-prose-hr); 935 | border-top-width: 1px; 936 | } 937 | 938 | [mdtype="hr"] { 939 | margin-top: 1.4em; 940 | margin-bottom: 1.4em; 941 | } 942 | 943 | p { 944 | margin-top: 1em; 945 | margin-bottom: 1em; 946 | } 947 | 948 | /* diagram panel */ 949 | .md-diagram-panel { 950 | color: var(--tw-prose-body); 951 | } 952 | 953 | .enable-diagrams .md-diagram .code-tooltip { 954 | bottom: -1.9em; 955 | right: 0; 956 | } 957 | 958 | .md-fences-adv-panel { 959 | margin-top: 1.3em; 960 | } 961 | 962 | /* footnote definition */ 963 | sup.md-footnote { 964 | color: var(--footnote); 965 | background-color: var(--footnote-bg); 966 | } 967 | 968 | .footnotes { 969 | font-size: 0.85em; 970 | } 971 | 972 | .md-reverse-footnote-area a { 973 | font-family: "IBMPlexSans"; 974 | text-decoration: none; 975 | color: var(--tw-primary); 976 | border-radius: 3px; 977 | } 978 | 979 | .md-hover-tip .code-tooltip-content { 980 | font-size: 1.05rem; 981 | line-height: 1.6; 982 | padding: 0.8em 1.2em; 983 | } 984 | 985 | .md-reverse-footnote-area a:hover { 986 | background-color: var(--item-hover-bg-color); 987 | } 988 | 989 | .md-def-name:before { 990 | color: var(--md-char-color); 991 | } 992 | 993 | .md-rawblock.md-rawblock-on-edit, 994 | .md-rawblock:hover { 995 | color: var(--tw-prose-pre-code); 996 | } 997 | 998 | .md-inline-math script { 999 | color: var(--tw-prose-code); 1000 | } 1001 | 1002 | g[data-mml-node="merror"]>rect[data-background] { 1003 | fill: var(--tw-highlight-color) !important; 1004 | } 1005 | 1006 | g[data-mml-node="merror"]>g { 1007 | fill: #000 !important; 1008 | stroke: #000 !important; 1009 | } 1010 | 1011 | .code-tooltip { 1012 | color: var(--tw-prose-pre-code); 1013 | } 1014 | 1015 | .code-tooltip .md-mathjax-preview { 1016 | color: var(--tw-prose-body); 1017 | } 1018 | 1019 | .md-htmlblock-container, 1020 | .md-rawblock-input.md-rawblock-control, 1021 | .md-htmlblock-panel.md-rawblock-control, 1022 | .md-math-container { 1023 | border-radius: 0.5rem 0 0.5rem 0.5rem; 1024 | } 1025 | 1026 | .md-rawblock-input { 1027 | font-size: var(--code-blocks-font-size); 1028 | padding: 0 1.3333333em; 1029 | } 1030 | 1031 | .md-mathblock-panel .md-rawblock-input.md-rawblock-control { 1032 | border-top-color: transparent; 1033 | border-bottom-color: transparent; 1034 | border-radius: 0; 1035 | } 1036 | 1037 | .md-mathblock-panel .md-rawblock-before { 1038 | padding-top: 1.1em; 1039 | border-top-left-radius: 0.5rem; 1040 | } 1041 | 1042 | .md-mathblock-panel .md-rawblock-after { 1043 | padding-bottom: 1.1em; 1044 | border-bottom-left-radius: 0.5rem; 1045 | border-bottom-right-radius: 0.5rem; 1046 | } 1047 | 1048 | .md-htmlblock-panel .md-rawblock-input { 1049 | padding-top: 1.1111111em; 1050 | padding-bottom: 1.1111111em; 1051 | } 1052 | 1053 | .md-mathblock-panel .md-rawblock-before, 1054 | .md-mathblock-panel .md-rawblock-after { 1055 | font-size: var(--code-blocks-font-size); 1056 | padding-left: calc(4px + 1.3333333em); 1057 | color: var(--code-bracket); 1058 | } 1059 | 1060 | .md-rawblock-tooltip { 1061 | color: var(--tw-prose-pre-code); 1062 | border-radius: 0.5rem 0.5rem 0 0; 1063 | } 1064 | 1065 | .md-rawblock-tooltip-name { 1066 | opacity: 1; 1067 | } 1068 | 1069 | .md-comment { 1070 | font-size: var(--inline-code-font-size); 1071 | color: var(--code-comment); 1072 | } 1073 | 1074 | .md-raw-inline, 1075 | .md-tag, 1076 | [md-inline="linebreak"], 1077 | .md-image>.md-meta, 1078 | .md-inline-math.md-expand>.md-inline-math-container { 1079 | font-size: var(--code-blocks-font-size); 1080 | } 1081 | 1082 | /** 1083 | * Code Fences 1084 | * see http://support.typora.io/Code-Block-Styles 1085 | */ 1086 | 1087 | 1088 | 1089 | :root { 1090 | --cf-bg-color: #23272E; 1091 | --cf-font-color: #F8F8F2; 1092 | } 1093 | 1094 | .md-fences { 1095 | color: var(--cf-font-color); 1096 | background-color: var(--cf-bg-color); 1097 | font-weight: 400; 1098 | font-size: var(--code-blocks-font-size); 1099 | line-height: 1.5; 1100 | margin-top: 1em; 1101 | margin-bottom: 1em; 1102 | border-radius: 0.5rem; 1103 | padding: 1em 1em; 1104 | -webkit-font-smoothing: initial; 1105 | -moz-osx-font-smoothing: initial; 1106 | } 1107 | 1108 | .md-fences.md-focus { 1109 | border-bottom-right-radius: 0; 1110 | } 1111 | 1112 | .md-fences>.code-tooltip { 1113 | height: 1.8rem; 1114 | top: 0.4rem; 1115 | right: 0.4rem; 1116 | font-size: 0.8rem; 1117 | border-radius: 0.5rem; 1118 | padding-left: 0 !important; 1119 | padding-right: 0 !important; 1120 | background-color: var(--theme-600); 1121 | } 1122 | 1123 | .md-fences:hover>.code-tooltip { 1124 | background-color: var(--theme-700); 1125 | } 1126 | 1127 | .code-tooltip .ty-input { 1128 | min-width: 10rem; 1129 | } 1130 | 1131 | pre code { 1132 | background-color: transparent; 1133 | border-width: 0; 1134 | border-radius: 0; 1135 | padding: 0; 1136 | font-weight: inherit; 1137 | color: inherit; 1138 | font-size: inherit; 1139 | font-family: inherit; 1140 | line-height: inherit; 1141 | } 1142 | 1143 | pre code::before { 1144 | content: none; 1145 | } 1146 | 1147 | pre code::after { 1148 | content: none; 1149 | } 1150 | 1151 | /* SYNTAX HIGHLIGHTING */ 1152 | 1153 | :root { 1154 | --code-gutter: #495162; 1155 | } 1156 | 1157 | #write .cm-s-inner { 1158 | 1159 | --code-neutral: rgb(126, 132, 142); 1160 | --code-cursor: var(--theme-50); 1161 | --code-string: #98C379; 1162 | --code-number: rgb(209, 154, 102); 1163 | --code-tag: #E06C75; 1164 | --code-keyword: rgb(198, 120, 221); 1165 | --code-variable: rgb(97, 175, 239); 1166 | --code-comment: #7E848E; 1167 | --code-operator: var(--code-comment); 1168 | --code-bracket: var(--code-comment); 1169 | --code-citation: var(--theme-500); 1170 | } 1171 | 1172 | .CodeMirror-selectedtext { 1173 | background-color: transparent; 1174 | } 1175 | 1176 | .CodeMirror-cursor { 1177 | border-left: 2px solid var(--code-cursor) !important; 1178 | } 1179 | 1180 | .CodeMirror-gutters { 1181 | border-color: var(--code-gutter); 1182 | } 1183 | 1184 | .cm-s-inner span.cm-string { 1185 | color: var(--code-string); 1186 | } 1187 | 1188 | .cm-s-inner span.cm-number { 1189 | color: var(--code-number); 1190 | } 1191 | 1192 | .cm-s-inner span.cm-tag { 1193 | color: var(--code-tag) 1194 | } 1195 | 1196 | .cm-s-inner span.cm-keyword { 1197 | color: var(--code-keyword); 1198 | } 1199 | 1200 | .cm-s-inner span.cm-qualifier { 1201 | color: white; 1202 | } 1203 | 1204 | .cm-s-inner .CodeMirror-guttermarker, 1205 | .cm-s-inner .CodeMirror-guttermarker-subtle, 1206 | .cm-s-inner span.cm-comment.cm-def, 1207 | .cm-s-inner span.cm-comment.cm-type, 1208 | .cm-s-inner span.cm-builtin, 1209 | .cm-s-inner span.cm-type, 1210 | .cm-s-inner span.cm-header, 1211 | .cm-s-inner span.cm-link, 1212 | .cm-s-inner span.cm-error { 1213 | background: transparent; 1214 | color: var(--code-neutral); 1215 | } 1216 | 1217 | 1218 | .cm-s-inner span.cm-atom, 1219 | .cm-s-inner span.cm-def { 1220 | color: var(--code-variable); 1221 | } 1222 | 1223 | .cm-s-inner span.cm-attribute { 1224 | color: #D19A66; 1225 | } 1226 | 1227 | .cm-s-inner span.cm-property, 1228 | .cm-s-inner span.cm-property-2, 1229 | .cm-s-inner span.cm-variable, 1230 | .cm-s-inner span.cm-variable-2, 1231 | .cm-s-inner span.cm-variable-3 { 1232 | color: rgb(97, 175, 239); 1233 | } 1234 | 1235 | .cm-s-inner span.cm-type { 1236 | color: #0EB54F; 1237 | } 1238 | 1239 | .cm-s-inner span.cm-comment { 1240 | color: var(--code-comment) 1241 | } 1242 | 1243 | .cm-s-inner .CodeMirror-linenumber { 1244 | color: var(--code-gutter); 1245 | } 1246 | 1247 | .cm-s-inner span.cm-operator { 1248 | color: var(--code-operator); 1249 | } 1250 | 1251 | .cm-s-inner span.cm-bracket, 1252 | .cm-s-inner span.cm-tag.cm-bracket, 1253 | .cm-s-inner span.cm-meta { 1254 | color: var(--code-bracket); 1255 | } 1256 | 1257 | .cm-s-inner span.cm-link { 1258 | text-decoration: underline; 1259 | } 1260 | 1261 | /** 1262 | * Inline Elements 1263 | */ 1264 | 1265 | /* basic styles */ 1266 | 1267 | code { 1268 | color: var(--inline-code-font-color); 1269 | font-weight: normal; 1270 | font-size: var(--inline-code-font-size); 1271 | font-family: var(--ui-font-monospace); 1272 | padding: .2rem .2rem; 1273 | border-radius: 3px; 1274 | background: #f5f7f9 !important; 1275 | display: inline; 1276 | vertical-align: bottom; 1277 | line-height: inherit; 1278 | -webkit-font-smoothing: initial; 1279 | -moz-osx-font-smoothing: initial; 1280 | } 1281 | 1282 | 1283 | 1284 | /* code::before { 1285 | content: "`"; 1286 | } 1287 | 1288 | code::after { 1289 | content: "`"; 1290 | } */ 1291 | 1292 | [md-inline="code"].md-expand>code::before, 1293 | [md-inline="code"].md-expand>code::after { 1294 | content: ""; 1295 | } 1296 | 1297 | a code { 1298 | color: var(--tw-prose-links); 1299 | } 1300 | 1301 | strong { 1302 | color: var(--tw-prose-bold); 1303 | font-weight: 600; 1304 | } 1305 | 1306 | a { 1307 | color: var(--tw-prose-links); 1308 | text-decoration: none; 1309 | font-weight: 500; 1310 | } 1311 | 1312 | a:hover { 1313 | text-decoration: underline; 1314 | } 1315 | 1316 | /* A block-level image should have a total top and bottom margin of 2em. 1317 | It is always wrapped in a paragraph with 1.2em vertical margin, hence we 1318 | add 0.8 here */ 1319 | p>.md-image:only-child { 1320 | margin-top: 0.8em !important; 1321 | margin-bottom: 0.8em !important; 1322 | } 1323 | 1324 | .md-image>.md-meta { 1325 | color: var(--tw-prose-code); 1326 | } 1327 | 1328 | .md-image>img { 1329 | border-radius: 0.5em !important; 1330 | border: none !important; 1331 | } 1332 | 1333 | /* extend styles */ 1334 | 1335 | mark { 1336 | border-radius: 3px; 1337 | padding: 0 2px; 1338 | background-color: var(--tw-highlight-color); 1339 | } 1340 | 1341 | /** 1342 | * Source Code Mode 1343 | * see http://support.typora.io/Code-Block-Styles 1344 | */ 1345 | 1346 | .cm-s-typora-default .CodeMirror-activeline-background { 1347 | background-color: var(--item-hover-bg-color); 1348 | } 1349 | 1350 | #typora-source { 1351 | font-family: var(--ui-font-monospace); 1352 | color: var(--typora-source-body); 1353 | } 1354 | 1355 | #typora-source .cm-header { 1356 | color: var(--code-tag); 1357 | } 1358 | 1359 | #typora-source .cm-link { 1360 | color: var(--code-string); 1361 | } 1362 | 1363 | #typora-source .cm-string { 1364 | color: var(--code-string); 1365 | } 1366 | 1367 | #typora-source .cm-comment { 1368 | color: var(--code-comment); 1369 | } 1370 | 1371 | #typora-source .cm-atom { 1372 | color: var(--code-citation); 1373 | } 1374 | 1375 | #typora-source .cm-tag { 1376 | color: var(--code-tag); 1377 | } 1378 | 1379 | #typora-source .cm-attribute { 1380 | color: var(--code-variable); 1381 | } 1382 | 1383 | #typora-source .cm-bracket { 1384 | color: var(--code-bracket); 1385 | } 1386 | 1387 | .file-list-item-file-ext-part { 1388 | opacity: 0.5; 1389 | } 1390 | 1391 | #write div.md-toc-tooltip { 1392 | background-color: var(--tw-prose-bg); 1393 | } 1394 | 1395 | .md-toc { 1396 | font-size: 0.94em; 1397 | } 1398 | 1399 | .md-toc-h1 .md-toc-inner { 1400 | margin-left: 0; 1401 | } 1402 | 1403 | .md-toc-h2 .md-toc-inner { 1404 | margin-left: 1em; 1405 | } 1406 | 1407 | .md-toc-h3 .md-toc-inner { 1408 | margin-left: 2em; 1409 | } 1410 | 1411 | .md-toc-h4 .md-toc-inner { 1412 | margin-left: 3em; 1413 | } 1414 | 1415 | .md-toc-h5 .md-toc-inner { 1416 | margin-left: 4em; 1417 | } 1418 | 1419 | .md-toc-h6 .md-toc-inner { 1420 | margin-left: 5em; 1421 | } 1422 | 1423 | #typora-sidebar { 1424 | border-right: var(--window-border); 1425 | } 1426 | 1427 | .sidebar-tab { 1428 | text-transform: none; 1429 | font-weight: 700; 1430 | font-size: 1.1em; 1431 | } 1432 | 1433 | .md-search-hit { 1434 | color: var(--search-hit-text-font-color); 1435 | background-color: var(--search-hit-text-bg-color); 1436 | } 1437 | 1438 | #md-searchpanel { 1439 | box-shadow: none; 1440 | filter: var(--tw-drop-shadow-md); 1441 | } 1442 | 1443 | #md-searchpanel .btn:not(.close-btn):hover { 1444 | box-shadow: none; 1445 | -webkit-box-shadow: none; 1446 | background-color: var(--tw-button-hover-bg); 1447 | } 1448 | 1449 | #md-searchpanel input, 1450 | #md-searchpanel .btn, 1451 | #searchpanel-msg { 1452 | border-radius: 5px; 1453 | } 1454 | 1455 | #searchpanel-msg { 1456 | color: var(--theme-500); 1457 | border-color: var(--theme-300); 1458 | background: var(--theme-100); 1459 | } 1460 | 1461 | .form-control { 1462 | border-color: var(--panel-border-color); 1463 | } 1464 | 1465 | .btn-default { 1466 | background-color: var(--button-bg); 1467 | } 1468 | 1469 | 1470 | /*sidebar file-list and search results*/ 1471 | 1472 | #file-library-list[data-state="complete"] #sidebar-loading-template { 1473 | padding: 0rem; 1474 | } 1475 | 1476 | #typora-sidebar .file-list-item, 1477 | .ty-search-item { 1478 | border: none; 1479 | padding: 1rem; 1480 | } 1481 | 1482 | body.html-for-mac #typora-sidebar .file-list-item, 1483 | body.html-for-mac .ty-search-item { 1484 | transition-duration: 0.3s !important; 1485 | transition-property: background-color, border, color, height !important; 1486 | } 1487 | 1488 | #typora-sidebar .file-list-item:hover, 1489 | .ty-search-item:hover { 1490 | background: var(--borders); 1491 | } 1492 | 1493 | #typora-sidebar .ty-search-item-line { 1494 | font-family: var(--font-family); 1495 | font-size: 0.8rem; 1496 | font-weight: 400; 1497 | padding: 0.3rem; 1498 | border-radius: 0.3rem; 1499 | margin-left: 24px; 1500 | } 1501 | 1502 | body.o #typora-sidebar .ty-search-item-line { 1503 | transition-duration: 0.2s; 1504 | } 1505 | 1506 | #typora-sidebar .ty-search-item-line * { 1507 | opacity: 1; 1508 | } 1509 | 1510 | #typora-sidebar .ty-search-item .ty-search-item-line:hover, 1511 | #typora-sidebar .ty-search-item-line.active { 1512 | background-color: var(--select-text-bg-color); 1513 | color: white; 1514 | } /* makes easier identifying which searched item is active in the sidebar */ 1515 | 1516 | #typora-sidebar .file-list-item-file-name { 1517 | font-weight: 800; 1518 | font-size: 0.9rem; 1519 | margin-bottom: 0rem; 1520 | line-height: 1.8rem; 1521 | float: right; 1522 | } 1523 | 1524 | #typora-sidebar .file-list-item-file-ext-part { 1525 | font-weight: 800; 1526 | opacity: 0.5; 1527 | } 1528 | 1529 | #typora-sidebar .file-list-item-parent-loc, 1530 | #typora-sidebar .file-list-item-time { 1531 | font-family: var(--font-family); 1532 | font-weight: 400; 1533 | opacity: 0.5; 1534 | display: block; 1535 | } 1536 | 1537 | #typora-sidebar .file-list-item-summary { 1538 | float: left; 1539 | font-size: 0.8rem; 1540 | opacity: 0.9; 1541 | } 1542 | 1543 | #typora-sidebar .file-list-item-count { 1544 | font-size: 0.75rem; 1545 | background-color: var(--primary-color); 1546 | color: white; 1547 | border-radius: 0.2rem; 1548 | min-width: 1.25rem; 1549 | height: 1.25rem; 1550 | text-align: center; 1551 | line-height: 1.25rem; 1552 | position: relative; 1553 | top: 0.3rem; 1554 | } 1555 | 1556 | #typora-sidebar input.file-list-item-file-name { 1557 | margin: 0.5rem 0rem 0.5rem 0.7rem; 1558 | padding: 0.4rem !important; 1559 | line-height: 1rem; 1560 | float: right; 1561 | border-radius: 0.3rem; 1562 | font-weight: 500; 1563 | background-color: var(--background) !important; 1564 | } 1565 | 1566 | #typora-sidebar .file-list-item.file-library-file-node { 1567 | border: none; 1568 | } 1569 | 1570 | #typora-sidebar .file-tree-node.active .file-node-background, 1571 | #typora-sidebar .file-list-item.active, 1572 | #typora-sidebar .ty-search-item.active { 1573 | background-color: var(--background); 1574 | outline: 1px solid var(--borders); 1575 | border-right: none; 1576 | border-top: none; 1577 | border-bottom: none; 1578 | border-left: 3px solid var(--primary-color); 1579 | color: var(--primary-color) !important; 1580 | font-weight: 500; 1581 | } 1582 | 1583 | #typora-sidebar .file-tree-node.active .file-node-content { 1584 | color: var(--primary-color) !important; 1585 | font-weight: 500; 1586 | } 1587 | 1588 | #typora-sidebar .file-tree-node { 1589 | padding: 0rem; 1590 | font-weight: 400; 1591 | font-size: 1rem; 1592 | margin-left: 0.8rem; 1593 | } 1594 | 1595 | #typora-sidebar .file-tree-node .file-node-content { 1596 | padding: 0rem; 1597 | line-height: 2.2rem; 1598 | height: 2.2rem; 1599 | background: none; 1600 | margin-bottom: 0px; 1601 | } 1602 | 1603 | #typora-sidebar .file-tree-node .file-node-background { 1604 | padding: 0rem; 1605 | height: 2.2rem; 1606 | } 1607 | 1608 | #typora-sidebar .file-tree-node .file-node-icon { 1609 | margin-right: 0.5rem; 1610 | } 1611 | 1612 | #typora-sidebar .file-tree-node .file-node-icon.fa-file-text-o { 1613 | margin-top: 0.33rem; 1614 | } 1615 | 1616 | #typora-sidebar .file-tree-node .file-node-icon.fa-folder { 1617 | margin-top: 0.36rem; 1618 | } 1619 | 1620 | #typora-sidebar .file-tree-node .fa-caret-down, 1621 | #typora-sidebar .file-tree-node .fa-caret-right { 1622 | position: relative; 1623 | top: 5px; 1624 | } 1625 | 1626 | #typora-sidebar .file-tree-node .file-tree-rename-input { 1627 | height: 2.2rem; 1628 | background: none; 1629 | border: none; 1630 | font-weight: 400; 1631 | margin: 0rem; 1632 | padding-left: 0rem; 1633 | } 1634 | 1635 | #typora-sidebar .ty-search-item-collapse-icon { 1636 | top: 9px; 1637 | } 1638 | 1639 | /*no left border*/ 1640 | #typora-sidebar .file-tree-node.active > .file-node-background { 1641 | border: none; 1642 | } 1643 | 1644 | /*no dotted highlighting*/ 1645 | .file-library-node:not(.file-node-root):focus > .file-node-content { 1646 | outline: none; 1647 | } 1648 | 1649 | #typora-sidebar #sidebar-files-menu { 1650 | border: solid 1px var(--borders); 1651 | border-radius: 0.3rem; 1652 | box-shadow: rgba(116, 129, 141, 0.1) 0px 3px 8px 0px; 1653 | } 1654 | 1655 | #typora-sidebar #ty-sidebar-footer { 1656 | background-color: var(--bg-color); 1657 | border-top: solid 1px var(--borders); 1658 | font-weight: 500; 1659 | } 1660 | 1661 | #typora-sidebar #ty-sidebar-footer li { 1662 | transition-duration: 0.2s; 1663 | transition-property: background-color, color; 1664 | } 1665 | 1666 | #typora-sidebar 1667 | #ty-sidebar-footer 1668 | li:not(.file-sort-item):not(:first-child):not(.empty-menu-group):not(.folder-menu-group):hover { 1669 | color: var(--primary-color); 1670 | background-color: var(--boxes); 1671 | } 1672 | 1673 | #typora-sidebar 1674 | #ty-sidebar-footer 1675 | .file-action-item.file-sort-item 1676 | > span:first-of-type { 1677 | line-height: 2rem; 1678 | } 1679 | 1680 | /* Folder + File Icons */ 1681 | 1682 | /* Hide the original Font Awesome icon */ 1683 | #typora-sidebar .file-tree-node .file-node-icon { 1684 | font-size: 0; /* Hide the text/icon inside the tag */ 1685 | width: 16px; /* Set a fixed width */ 1686 | height: 16px; /* Set a fixed height */ 1687 | background-size: contain; /* Ensure the SVG scales correctly */ 1688 | background-repeat: no-repeat; /* Prevent repeating */ 1689 | display: inline-block; /* Maintain the element's block nature */ 1690 | } 1691 | 1692 | #typora-sidebar .file-tree-node .file-node-icon.fa-folder { 1693 | background-image: url('./ceylon/icons/dualtone-folder-closed.svg'); 1694 | margin-top: 0.5rem; 1695 | } 1696 | 1697 | /* Specific styling for the collapsed folder icon SVG */ 1698 | #typora-sidebar .file-tree-node.file-node-collapsed > .file-node-content > .file-node-icon.fa-folder { 1699 | background-image: url('./ceylon/icons/dualtone-folder-closed.svg'); 1700 | margin-top: 0.5rem; 1701 | } 1702 | 1703 | /* Specific styling for the expanded folder icon SVG */ 1704 | #typora-sidebar .file-tree-node.file-node-expanded > .file-node-content > .file-node-icon.fa-folder { 1705 | background-image: url('./ceylon/icons/dualtone-folder-open.svg'); 1706 | margin-top: 0.5rem; 1707 | } 1708 | 1709 | /* Specific styling for the file icon SVG */ 1710 | #typora-sidebar .file-tree-node > .file-node-content > .file-node-icon.fa-file-text-o { 1711 | background-image: url('./ceylon/icons/dualtone-file.svg'); 1712 | margin-top: 0.5rem; 1713 | } 1714 | 1715 | /* Specific styling for the active file icon SVG */ 1716 | #typora-sidebar .file-tree-node.active > .file-node-content > .file-node-icon.fa-file-text-o { 1717 | background-image: url('./ceylon/icons/dualtone-file-selected.svg'); 1718 | margin-top: 0.5rem; 1719 | } -------------------------------------------------------------------------------- /ceylon/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/.DS_Store -------------------------------------------------------------------------------- /ceylon/Inter-italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/Inter-italic.ttf -------------------------------------------------------------------------------- /ceylon/Inter-roman.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/Inter-roman.ttf -------------------------------------------------------------------------------- /ceylon/OFL.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2012-2013, The Mozilla Corporation and Telefonica S.A. 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 | https://openfontlicense.org 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 | -------------------------------------------------------------------------------- /ceylon/display/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/display/.DS_Store -------------------------------------------------------------------------------- /ceylon/display/IBM-Plex-Sans/IBMPlexSans-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/display/IBM-Plex-Sans/IBMPlexSans-Bold.ttf -------------------------------------------------------------------------------- /ceylon/display/IBM-Plex-Sans/IBMPlexSans-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/display/IBM-Plex-Sans/IBMPlexSans-BoldItalic.ttf -------------------------------------------------------------------------------- /ceylon/display/IBM-Plex-Sans/IBMPlexSans-ExtraLight.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/display/IBM-Plex-Sans/IBMPlexSans-ExtraLight.ttf -------------------------------------------------------------------------------- /ceylon/display/IBM-Plex-Sans/IBMPlexSans-ExtraLightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/display/IBM-Plex-Sans/IBMPlexSans-ExtraLightItalic.ttf -------------------------------------------------------------------------------- /ceylon/display/IBM-Plex-Sans/IBMPlexSans-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/display/IBM-Plex-Sans/IBMPlexSans-Italic.ttf -------------------------------------------------------------------------------- /ceylon/display/IBM-Plex-Sans/IBMPlexSans-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/display/IBM-Plex-Sans/IBMPlexSans-Light.ttf -------------------------------------------------------------------------------- /ceylon/display/IBM-Plex-Sans/IBMPlexSans-LightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/display/IBM-Plex-Sans/IBMPlexSans-LightItalic.ttf -------------------------------------------------------------------------------- /ceylon/display/IBM-Plex-Sans/IBMPlexSans-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/display/IBM-Plex-Sans/IBMPlexSans-Medium.ttf -------------------------------------------------------------------------------- /ceylon/display/IBM-Plex-Sans/IBMPlexSans-MediumItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/display/IBM-Plex-Sans/IBMPlexSans-MediumItalic.ttf -------------------------------------------------------------------------------- /ceylon/display/IBM-Plex-Sans/IBMPlexSans-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/display/IBM-Plex-Sans/IBMPlexSans-Regular.ttf -------------------------------------------------------------------------------- /ceylon/display/IBM-Plex-Sans/IBMPlexSans-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/display/IBM-Plex-Sans/IBMPlexSans-SemiBold.ttf -------------------------------------------------------------------------------- /ceylon/display/IBM-Plex-Sans/IBMPlexSans-SemiBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/display/IBM-Plex-Sans/IBMPlexSans-SemiBoldItalic.ttf -------------------------------------------------------------------------------- /ceylon/display/IBM-Plex-Sans/IBMPlexSans-Thin.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/display/IBM-Plex-Sans/IBMPlexSans-Thin.ttf -------------------------------------------------------------------------------- /ceylon/display/IBM-Plex-Sans/IBMPlexSans-ThinItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/display/IBM-Plex-Sans/IBMPlexSans-ThinItalic.ttf -------------------------------------------------------------------------------- /ceylon/display/satoshi/Satoshi-Variable.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/display/satoshi/Satoshi-Variable.woff2 -------------------------------------------------------------------------------- /ceylon/display/satoshi/Satoshi-VariableItalic.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/display/satoshi/Satoshi-VariableItalic.woff2 -------------------------------------------------------------------------------- /ceylon/fonts.css: -------------------------------------------------------------------------------- 1 | /* FONTS */ 2 | 3 | /* Display Fonts */ 4 | @font-face { 5 | font-family: "Inter"; 6 | font-style: normal; 7 | font-weight: 100 900; 8 | font-display: block; 9 | src: url("Inter-roman.ttf") format("truetype"); 10 | font-named-instance: "Regular"; 11 | } 12 | 13 | @font-face { 14 | font-family: "Inter"; 15 | font-style: italic; 16 | font-weight: 100 900; 17 | font-display: block; 18 | src: url("Inter-italic.ttf") format("truetype"); 19 | font-named-instance: "Italic"; 20 | } 21 | 22 | /* Display Font - IBM Plex Sans */ 23 | /* License - SIL Open Font License 1.1 - https://github.com/IBM/plex/blob/master/LICENSE.txt */ 24 | @font-face { 25 | font-family: "IBMPlexSans"; 26 | font-style: normal; 27 | font-weight: 400; 28 | font-display: block; 29 | src: url("./display/IBM-Plex-Sans/IBMPlexSans-Regular.ttf") format("truetype"); 30 | } 31 | 32 | @font-face { 33 | font-family: "IBMPlexSans"; 34 | font-style: italic; 35 | font-weight: 400; 36 | font-display: block; 37 | src: url("./display/IBM-Plex-Sans/IBMPlexSans-Italic.ttf") format("truetype"); 38 | } 39 | 40 | @font-face { 41 | font-family: "IBMPlexSans"; 42 | font-style: normal; 43 | font-weight: 700; 44 | font-display: block; 45 | src: url("./display/IBM-Plex-Sans/IBMPlexSans-Bold.ttf") format("truetype"); 46 | } 47 | 48 | @font-face { 49 | font-family: "IBMPlexSans"; 50 | font-style: italic; 51 | font-weight: 700; 52 | font-display: block; 53 | src: url("./display/IBM-Plex-Sans/IBMPlexSans-BoldItalic.ttf") 54 | format("truetype"); 55 | } 56 | 57 | @font-face { 58 | font-family: "IBMPlexSans"; 59 | font-style: normal; 60 | font-weight: 100; 61 | font-display: block; 62 | src: url("./display/IBM-Plex-Sans/IBMPlexSans-Thin.ttf") format("truetype"); 63 | } 64 | 65 | @font-face { 66 | font-family: "IBMPlexSans"; 67 | font-style: italic; 68 | font-weight: 100; 69 | font-display: block; 70 | src: url("./display/IBM-Plex-Sans/IBMPlexSans-ThinItalic.ttf") 71 | format("truetype"); 72 | } 73 | 74 | @font-face { 75 | font-family: "IBMPlexSans"; 76 | font-style: normal; 77 | font-weight: 200; 78 | font-display: block; 79 | src: url("./display/IBM-Plex-Sans/IBMPlexSans-ExtraLight.ttf") 80 | format("truetype"); 81 | } 82 | 83 | @font-face { 84 | font-family: "IBMPlexSans"; 85 | font-style: italic; 86 | font-weight: 200; 87 | font-display: block; 88 | src: url("./display/IBM-Plex-Sans/IBMPlexSans-ExtraLightItalic.ttf") 89 | format("truetype"); 90 | } 91 | 92 | @font-face { 93 | font-family: "IBMPlexSans"; 94 | font-style: normal; 95 | font-weight: 300; 96 | font-display: block; 97 | src: url("./display/IBM-Plex-Sans/IBMPlexSans-Light.ttf") format("truetype"); 98 | } 99 | 100 | @font-face { 101 | font-family: "IBMPlexSans"; 102 | font-style: italic; 103 | font-weight: 300; 104 | font-display: block; 105 | src: url("./display/IBM-Plex-Sans/IBMPlexSans-LightItalic.ttf") 106 | format("truetype"); 107 | } 108 | 109 | @font-face { 110 | font-family: "IBMPlexSans"; 111 | font-style: normal; 112 | font-weight: 500; 113 | font-display: block; 114 | src: url("./display/IBM-Plex-Sans/IBMPlexSans-Medium.ttf") format("truetype"); 115 | } 116 | 117 | @font-face { 118 | font-family: "IBMPlexSans"; 119 | font-style: italic; 120 | font-weight: 500; 121 | font-display: block; 122 | src: url("./display/IBM-Plex-Sans/IBMPlexSans-MediumItalic.ttf") 123 | format("truetype"); 124 | } 125 | 126 | @font-face { 127 | font-family: "IBMPlexSans"; 128 | font-style: normal; 129 | font-weight: 600; 130 | font-display: block; 131 | src: url("./display/IBM-Plex-Sans/IBMPlexSans-SemiBold.ttf") 132 | format("truetype"); 133 | } 134 | 135 | @font-face { 136 | font-family: "IBMPlexSans"; 137 | font-style: italic; 138 | font-weight: 600; 139 | font-display: block; 140 | src: url("./display/IBM-Plex-Sans/IBMPlexSans-SemiBoldItalic.ttf") 141 | format("truetype"); 142 | } 143 | 144 | /* Monospace Font - IBM Plex Mono */ 145 | /* License - SIL Open Font License 1.1 - https://github.com/IBM/plex/blob/master/LICENSE.txt */ 146 | 147 | @font-face { 148 | font-family: "IBMPlexMono"; 149 | font-style: normal; 150 | font-weight: 400; 151 | font-display: block; 152 | src: url("./monospace/IBMPlexMono/IBMPlexMono-Regular.ttf") format("truetype"); 153 | } 154 | 155 | @font-face { 156 | font-family: "IBMPlexMono"; 157 | font-style: italic; 158 | font-weight: 400; 159 | font-display: block; 160 | src: url("./monospace/IBMPlexMono/IBMPlexMono-Italic.ttf") format("truetype"); 161 | } 162 | 163 | @font-face { 164 | font-family: "IBMPlexMono"; 165 | font-style: normal; 166 | font-weight: 700; 167 | font-display: block; 168 | src: url("./monospace/IBMPlexMono/IBMPlexMono-Bold.ttf") format("truetype"); 169 | } 170 | 171 | @font-face { 172 | font-family: "IBMPlexMono"; 173 | font-style: italic; 174 | font-weight: 700; 175 | font-display: block; 176 | src: url("./monospace/IBMPlexMono/IBMPlexMono-BoldItalic.ttf") 177 | format("truetype"); 178 | } 179 | 180 | @font-face { 181 | font-family: "IBMPlexMono"; 182 | font-style: normal; 183 | font-weight: 100; 184 | font-display: block; 185 | src: url("./monospace/IBMPlexMono/IBMPlexMono-Thin.ttf") format("truetype"); 186 | } 187 | 188 | @font-face { 189 | font-family: "IBMPlexMono"; 190 | font-style: italic; 191 | font-weight: 100; 192 | font-display: block; 193 | src: url("./monospace/IBMPlexMono/IBMPlexMono-ThinItalic.ttf") 194 | format("truetype"); 195 | } 196 | 197 | @font-face { 198 | font-family: "IBMPlexMono"; 199 | font-style: normal; 200 | font-weight: 200; 201 | font-display: block; 202 | src: url("./monospace/IBMPlexMono/IBMPlexMono-ExtraLight.ttf") 203 | format("truetype"); 204 | } 205 | 206 | @font-face { 207 | font-family: "IBMPlexMono"; 208 | font-style: italic; 209 | font-weight: 200; 210 | font-display: block; 211 | src: url("./monospace/IBMPlexMono/IBMPlexMono-ExtraLightItalic.ttf") 212 | format("truetype"); 213 | } 214 | 215 | @font-face { 216 | font-family: "IBMPlexMono"; 217 | font-style: normal; 218 | font-weight: 300; 219 | font-display: block; 220 | src: url("./monospace/IBMPlexMono/IBMPlexMono-Light.ttf") format("truetype"); 221 | } 222 | 223 | @font-face { 224 | font-family: "IBMPlexMono"; 225 | font-style: italic; 226 | font-weight: 300; 227 | font-display: block; 228 | src: url("./monospace/IBMPlexMono/IBMPlexMono-LightItalic.ttf") 229 | format("truetype"); 230 | } 231 | 232 | @font-face { 233 | font-family: "IBMPlexMono"; 234 | font-style: normal; 235 | font-weight: 500; 236 | font-display: block; 237 | src: url("./monospace/IBMPlexMono/IBMPlexMono-Medium.ttf") format("truetype"); 238 | } 239 | 240 | @font-face { 241 | font-family: "IBMPlexMono"; 242 | font-style: italic; 243 | font-weight: 500; 244 | font-display: block; 245 | src: url("./monospace/IBMPlexMono/IBMPlexMono-MediumItalic.ttf") 246 | format("truetype"); 247 | } 248 | 249 | @font-face { 250 | font-family: "IBMPlexMono"; 251 | font-style: normal; 252 | font-weight: 600; 253 | font-display: block; 254 | src: url("./monospace/IBMPlexMono/IBMPlexMono-SemiBold.ttf") 255 | format("truetype"); 256 | } 257 | 258 | @font-face { 259 | font-family: "IBMPlexMono"; 260 | font-style: italic; 261 | font-weight: 600; 262 | font-display: block; 263 | src: url("./monospace/IBMPlexMono/IBMPlexMono-SemiBoldItalic.ttf") 264 | format("truetype"); 265 | } 266 | 267 | /* Monospace Font - Fira Code */ 268 | 269 | @font-face { 270 | font-family: "FiraCode"; 271 | font-style: normal; 272 | font-weight: 100 900; 273 | font-display: block; 274 | src: url("././monospace/FiraCode-vf.ttf") format("truetype"); 275 | font-named-instance: "Regular"; 276 | } 277 | 278 | /* Monospace Font - Fira Mono */ 279 | 280 | @font-face { 281 | font-family: "FiraMono"; 282 | font-style: normal; 283 | font-weight: 400; 284 | font-display: block; 285 | src: url("./monospace/FiraMono/FiraMono-Regular.ttf") format("truetype"); 286 | font-named-instance: "Regular"; 287 | } 288 | 289 | @font-face { 290 | font-family: "FiraMono"; 291 | font-style: bold; 292 | font-weight: 800; 293 | font-display: block; 294 | src: url("./monospace/FiraMono/FiraMono-Bold.ttf") format("truetype"); 295 | font-named-instance: "Regular"; 296 | } 297 | 298 | @font-face { 299 | font-family: "FiraMono"; 300 | font-style: bold; 301 | font-weight: 500; 302 | font-display: block; 303 | src: url("./monospace/FiraMono/fi-Bold.ttf") format("truetype"); 304 | font-named-instance: "Regular"; 305 | } -------------------------------------------------------------------------------- /ceylon/icons/cd-dualtone-file-selected.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /ceylon/icons/cd-dualtone-file.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /ceylon/icons/cd-dualtone-folder-closed.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /ceylon/icons/cd-dualtone-folder-open.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /ceylon/icons/dark-file-selected.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /ceylon/icons/dark-file.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /ceylon/icons/dark-folder-closed.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /ceylon/icons/dark-folder-open.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /ceylon/icons/dualtone-file-selected.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /ceylon/icons/dualtone-file.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /ceylon/icons/dualtone-folder-closed.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /ceylon/icons/dualtone-folder-open.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /ceylon/icons/outline-file-selected.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /ceylon/icons/outline-file.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /ceylon/icons/outline-folder-closed.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /ceylon/icons/outline-folder-open.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /ceylon/monospace/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/monospace/.DS_Store -------------------------------------------------------------------------------- /ceylon/monospace/FiraMono/FiraMono-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/monospace/FiraMono/FiraMono-Bold.ttf -------------------------------------------------------------------------------- /ceylon/monospace/FiraMono/FiraMono-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/monospace/FiraMono/FiraMono-Medium.ttf -------------------------------------------------------------------------------- /ceylon/monospace/FiraMono/FiraMono-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/monospace/FiraMono/FiraMono-Regular.ttf -------------------------------------------------------------------------------- /ceylon/monospace/IBMPlexMono/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/monospace/IBMPlexMono/.DS_Store -------------------------------------------------------------------------------- /ceylon/monospace/IBMPlexMono/IBMPlexMono-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/monospace/IBMPlexMono/IBMPlexMono-Bold.ttf -------------------------------------------------------------------------------- /ceylon/monospace/IBMPlexMono/IBMPlexMono-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/monospace/IBMPlexMono/IBMPlexMono-BoldItalic.ttf -------------------------------------------------------------------------------- /ceylon/monospace/IBMPlexMono/IBMPlexMono-ExtraLight.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/monospace/IBMPlexMono/IBMPlexMono-ExtraLight.ttf -------------------------------------------------------------------------------- /ceylon/monospace/IBMPlexMono/IBMPlexMono-ExtraLightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/monospace/IBMPlexMono/IBMPlexMono-ExtraLightItalic.ttf -------------------------------------------------------------------------------- /ceylon/monospace/IBMPlexMono/IBMPlexMono-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/monospace/IBMPlexMono/IBMPlexMono-Italic.ttf -------------------------------------------------------------------------------- /ceylon/monospace/IBMPlexMono/IBMPlexMono-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/monospace/IBMPlexMono/IBMPlexMono-Light.ttf -------------------------------------------------------------------------------- /ceylon/monospace/IBMPlexMono/IBMPlexMono-LightItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/monospace/IBMPlexMono/IBMPlexMono-LightItalic.ttf -------------------------------------------------------------------------------- /ceylon/monospace/IBMPlexMono/IBMPlexMono-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/monospace/IBMPlexMono/IBMPlexMono-Medium.ttf -------------------------------------------------------------------------------- /ceylon/monospace/IBMPlexMono/IBMPlexMono-MediumItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/monospace/IBMPlexMono/IBMPlexMono-MediumItalic.ttf -------------------------------------------------------------------------------- /ceylon/monospace/IBMPlexMono/IBMPlexMono-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/monospace/IBMPlexMono/IBMPlexMono-Regular.ttf -------------------------------------------------------------------------------- /ceylon/monospace/IBMPlexMono/IBMPlexMono-SemiBold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/monospace/IBMPlexMono/IBMPlexMono-SemiBold.ttf -------------------------------------------------------------------------------- /ceylon/monospace/IBMPlexMono/IBMPlexMono-SemiBoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/monospace/IBMPlexMono/IBMPlexMono-SemiBoldItalic.ttf -------------------------------------------------------------------------------- /ceylon/monospace/IBMPlexMono/IBMPlexMono-Thin.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/monospace/IBMPlexMono/IBMPlexMono-Thin.ttf -------------------------------------------------------------------------------- /ceylon/monospace/IBMPlexMono/IBMPlexMono-ThinItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/ceylon/monospace/IBMPlexMono/IBMPlexMono-ThinItalic.ttf -------------------------------------------------------------------------------- /ceylon/monospace/IBMPlexMono/OFL.txt: -------------------------------------------------------------------------------- 1 | Copyright © 2017 IBM Corp. with Reserved Font Name "Plex" 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 | https://openfontlicense.org 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 | -------------------------------------------------------------------------------- /img/SCR-20240713-oluo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/img/SCR-20240713-oluo.png -------------------------------------------------------------------------------- /img/SCR-20240713-olvw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/img/SCR-20240713-olvw.png -------------------------------------------------------------------------------- /img/SCR-20240713-olxc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/img/SCR-20240713-olxc.png -------------------------------------------------------------------------------- /img/theme-banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tdarshana/typora-ceylon-theme/b0c2fa4be7e3a8caff1d9bb5b9623583c0b2ff58/img/theme-banner.png --------------------------------------------------------------------------------