├── .github └── ISSUE_TEMPLATE │ ├── bug_report.md │ └── feature_request.md ├── .gitignore ├── CHANGELOG ├── LICENSE ├── README.md ├── images ├── colour-typo.png ├── dark-mode.png ├── floating-action-button.png ├── undraw_exploring_re_grb8.svg ├── undraw_file_searching_re_3evy.svg └── undraw_online_reading_np7n.svg ├── manifest.json ├── obsidian.css ├── obsidian.css.map ├── scss ├── _body.scss ├── _embeds.scss ├── _floating-action-button.scss ├── _hub.scss ├── _plugins.scss ├── _scrollbar.scss ├── _settingsmodals.scss ├── _sidebars.scss ├── _style-settings.scss ├── _tags.scss ├── _titlebar.scss ├── _vars.scss └── base.scss ├── theme-picker.png ├── theme.css └── theme.css.map /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help improve the theme 4 | title: '' 5 | labels: bug 6 | assignees: '' 7 | 8 | --- 9 | 10 | 11 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature_request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature request 3 | about: Suggest an idea for this project 4 | title: "[FR] " 5 | labels: '' 6 | assignees: '' 7 | 8 | --- 9 | 10 | 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store -------------------------------------------------------------------------------- /CHANGELOG: -------------------------------------------------------------------------------- 1 | ## [1.0.4](https://github.com/selfire1/obsidian-you-theme/releases/tag/1.0.4) (2022-09-29) 2 | 3 | ### Features 4 | 5 | - feat: ✨ Add compatibality with custom fonts 6 | 7 | ### Fixes 8 | 9 | - fix: add semicolon 10 | - fix: 💄 Restyle blockquotes 11 | - refactor: 💄 Increase blockquote font size 12 | 13 | ### Misc 14 | 15 | - chore: 🔖 Add compatability for Obsidian 0.16.0 16 | - docs: 📝 Add Obsidian hub support 17 | 18 | ## [1.0.3](https://github.com/selfire1/obsidian-you-theme/releases/tag/1.0.3) (2022-04-19) 19 | 20 | ### Bug fixes 21 | 22 | - fix: 🐛 Fix targeting of header weights 23 | 24 | ## [1.0.2](https://github.com/selfire1/obsidian-you-theme/releases/tag/1.0.2) (2022-04-19) 25 | 26 | ### Bug fixes 27 | 28 | - fix: 🐛 Fix targeting of headers 29 | 30 | ## [1.0.1](https://github.com/selfire1/obsidian-you-theme/releases/tag/1.0.1) (2022-02-24) 31 | 32 | ### Bug fixes 33 | 34 | - fix: 🐛 Show FAB with custom page header mode disabled ([#12](https://github.com/selfire1/obsidian-you-theme/issues/12)) 35 | 36 | ## [1.0.0](https://github.com/selfire1/obsidian-you-theme/releases/tag/1.0.0) (2022-02-23) 37 | 38 | ### ✨ NEW 39 | 40 | - Rewrite theme into SCSS 41 | - Apply Material 3 Typography 42 | - Implement Material 3 Colour Scheme 43 | - Add styling for plugins (breadcrumbs, cooklang) 44 | - Redesign elements like buttons, metadata container and FAB 45 | - Add option for a custom Floating Action Button 46 | - Style Obsidian Live Preview 47 | 48 | ### Deletions 49 | 50 | - 🔥 Remove custom colours. In the future, adaptive colour schemes will be added through a plugin. 51 | 52 | ## [0.1.7](https://github.com/selfire1/obsidian-you-theme/releases/tag/0.1.7) (2021-12-04) 53 | 54 | ### Improvements 55 | 56 | - style: 💄 Lighten page header buttons 57 | - style: 💄 Colour code cohesively 58 | 59 | ## [0.1.6](https://github.com/selfire1/obsidian-you-theme/releases/tag/0.1.6) (2021-11-17) 60 | 61 | ### Bug fixes 62 | 63 | - fix: 🐛 Target FAB independent of added buttons (for `Custom Page Header` support) 64 | 65 | ### Deletions 66 | 67 | - revert: 🔥 Remove option for minimal tite bar 68 | 69 | ## [0.1.5](https://github.com/selfire1/obsidian-you-theme/releases/tag/0.1.5) (2021-11-16) 70 | 71 | ### Bug fixes 72 | 73 | - fix: 🚑️ Fix logic of style settings 74 | 75 | ## [0.1.4](https://github.com/selfire1/obsidian-you-theme/releases/tag/0.1.4) (2021-11-16) 76 | 77 | ### ✨ NEW 78 | 79 | - feat: ✨ Add setting to hide title bar buttons 80 | - feat: ✨ Support iOS safe area insets 81 | 82 | ### Bug fixes 83 | 84 | - fix: 🐛 Fix incorrect colour of hamburger menu 85 | 86 | ## [0.1.3](https://github.com/selfire1/obsidian-you-theme/releases/tag/0.1.3) (2021-11-06) 87 | 88 | ### ✨ NEW 89 | 90 | - feat: ✨ Make FAB independent of language 91 | 92 | --- 93 | 94 | ## [0.1.2](https://github.com/selfire1/obsidian-you-theme/releases/tag/0.1.2) (2021-11-05) 95 | 96 | ### Bug fixes 97 | 98 | - fix: 🐛 Set default branding toggle to true 99 | 100 | --- 101 | 102 | ## [0.1.1](https://github.com/selfire1/obsidian-you-theme/releases/tag/0.1.1) (2021-11-05) 103 | 104 | ### ✨ NEW 105 | 106 | - feat: ✨ Add German support for FAB [#5](https://github.com/selfire1/obsidian-you-theme/issues/5) 107 | - feat: ✨ Add toggle for branding in Style Settings [#2](https://github.com/selfire1/obsidian-you-theme/issues/2) 108 | 109 | ### Misc 110 | 111 | - style: 💄 Show branding based on style settings toggle 112 | - fix: 🐛 Fix height of community plugins back button [#4](https://github.com/selfire1/obsidian-you-theme/issues/4) 113 | - fix: 🐛 Target correct setting 114 | - docs: 📝 Update .gitignore 115 | 116 | --- 117 | 118 | ## [0.1.0](https://github.com/selfire1/obsidian-you-theme/releases) 119 | 120 | The first release! Plenty of new things: 121 | 122 | ### ✨ NEW 123 | 124 | - ✨ NEW: Update FAB to Material 3 125 | - ✨ NEW: Initialise dark theme colours 126 | - ✨ NEW: Style empty state screen 127 | - ✨ NEW: Style Settings Support! 128 | - ✨ NEW: Style scrollbars 129 | - ✨ NEW: Style embeds 130 | - ✨ NEW: Round images 131 | - ✨ NEW: Try styling navigate back button 132 | - ✨ NEW: Basic Dataview styling 133 | - ✨ NEW: Style embeds 134 | - ✨ NEW: Add sidebar branding 135 | - ✨ NEW: Add rounded corners to prompts 136 | - ✨ NEW: Style metadata container 137 | - ✨ NEW: Format editor frontmatter 138 | - ✨ NEW: Remove underline for internal links 139 | - ✨ NEW: iA Quattro as font 140 | - ✨ NEW: Mobile toolbar colours 141 | - ✨ NEW: Calculate complimentary colour 142 | - ✨ NEW: Refactor colours 143 | - ✨ NEW: Format and colour toolbar 144 | - ✨ NEW: Add floating action button (FAB) 145 | - ✨ NEW: Add tag pills 146 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 Joschua Glau 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Obsidian You 🎨 2 | ⚠️ **LEGACY**: This theme is not built for Obsidian 1.0. 3 | 4 | ![Obsidian You Overview](https://github.com/selfire1/obsidian-you-theme/blob/main/theme-picker.png?raw=true) 5 | 6 | **Take Obsidian on the go, your way.** A theme exclusively designed for mobile. 7 | 8 | ✅ Available in Obsidian's Community themes. 9 | 10 | ## Goals 11 | * Reflecting Google's [Material Design Guidelines](https://m3.material.io/) to feel native on Android, and beautiful anywhere else. ✨ 12 | 13 | ## Features 14 | ### Tonal colour palettes & Adaptive type scale 15 | 16 | 17 | Obsidian You is based on Google's [Colour System](https://m3.material.io/styles/color/the-color-system/) and [Typography](https://m3.material.io/styles/typography/overview). Carefully generated colour palettes make Obsidian beautiful, consistent and accessible. Light or dark mode alike. The M3 type scale makes sure all your text is styled consistently. 18 | 19 | ### Floating Action Button 20 | 21 | 22 | Skip the thumb-stretching. You can even customise the FAB command to your liking. Install the [Customizable Page Header Buttons](https://github.com/kometenstaub/customizable-page-header-buttons) plugin. The first custom button will be the FAB command. Have every command of Obsidian right at your fingertips! (And you can even pick a pretty icon) 23 | 24 | ### Dark Mode 25 | 26 | 27 | Reduce eye strain and save battery while you're up all night connecting. The tonal colour pallette automatically adapts to dark mode. For easy switching between modes on mobile, have a look at [Luna: Dark Mode Switcher](https://github.com/selfire1/obsidian-luna-dark-mode). 28 | 29 | ## Supported plugins 30 | * [Style Settings](https://github.com/mgmeyers/obsidian-style-settings): Customise colour, fonts and additional settings. 31 | * [Obsidian Advanced Toolbar](https://github.com/phibr0/obsidian-advanced-toolbar): Activate in *Style Settings*. 32 | * [Customizable Page Header Buttons](https://github.com/kometenstaub/customizable-page-header-buttons): Customise the FAB 33 | * [Breadcrumbs](https://github.com/SkepticMystic/breadcrumbs) 34 | * [Cooklang Obsidian](https://github.com/deathau/cooklang-obsidian) 35 | 36 | ## Additional tools 37 | * 🌝 [Luna – Dark Mode Helper](https://github.com/selfire1/obsidian-luna-dark-mode): An Obsidian Plugin that switches into Dark Mode based on time or sun position,supporting Mobile. 38 | * 📱 [Set Mobile Theme](https://github.com/selfire1/obsidian-set-mobile-theme): Load a seperate theme for Obsidian on Desktop and on Mobile. 39 | * 🎨 [Obsidian You](https://github.com/selfire1/obsidian-you-theme): A personal Obsidian theme designed exclusively for mobile. 40 | 41 | ## Acknowledgements 42 | * Thank you to [mgmeyers](https://github.com/mgmeyers) for providing valuable and detailed feedback, 43 | * thank you to `@Eleanor` and `@daggers` for test-driving this theme. 44 | 45 | ## Support 46 | You can help me keep creating tools like this by [buying me a coffee](https://www.buymeacoffee.com/joschua). ☕️ 47 | 48 | Buy Me A Coffee 49 | -------------------------------------------------------------------------------- /images/colour-typo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/selfire1/obsidian-you-theme/1e1c8b6ac23cdd9aa05841ea941bac63a68c77b2/images/colour-typo.png -------------------------------------------------------------------------------- /images/dark-mode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/selfire1/obsidian-you-theme/1e1c8b6ac23cdd9aa05841ea941bac63a68c77b2/images/dark-mode.png -------------------------------------------------------------------------------- /images/floating-action-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/selfire1/obsidian-you-theme/1e1c8b6ac23cdd9aa05841ea941bac63a68c77b2/images/floating-action-button.png -------------------------------------------------------------------------------- /images/undraw_exploring_re_grb8.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/undraw_file_searching_re_3evy.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/undraw_online_reading_np7n.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Obsidian You", 3 | "version": "1.0.4", 4 | "minAppVersion": "0.16.0", 5 | "author": "Joschua", 6 | "authorUrl": "https://github.com/selfire1/" 7 | } 8 | -------------------------------------------------------------------------------- /obsidian.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | body { 3 | /* ## Fonts */ 4 | --font-text-theme: Roboto, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", 5 | Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", 6 | "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif; 7 | --font-monospace-theme: "Roboto Mono", monospace, Menlo, SFMono-Regular, Consolas; 8 | --font-interface-theme: var(--font-text-theme); 9 | } 10 | 11 | :root { 12 | /* ------------- */ 13 | /* # TYPOGRAPHY */ 14 | /* ------------- */ 15 | /* ## Font Sizes */ 16 | --smallest: 0.75rem; 17 | /* Equal to px */ 18 | --smaller: 0.875rem; 19 | /* Equal to 14px */ 20 | --h1: 2.25rem; 21 | --h2: 2rem; 22 | --h3: 1.75rem; 23 | --h4: 1.5rem; 24 | --h5: 1.375rem; 25 | --h6: 1rem; 26 | /* Roundness */ 27 | --big-radius: 24px; 28 | --medium-radius: 16px; 29 | --small-radius: 8px; 30 | /* ## Font Weights */ 31 | --light: 350; 32 | --regular: 400; 33 | --medium: 500; 34 | --bold: 650; 35 | /* ------------- */ 36 | /* # COLOURS */ 37 | /* ------------- */ 38 | --elevation1: 0.05; 39 | --elevation2: 0.08; 40 | --elevation3: 0.11; 41 | --elevation4: 0.12; 42 | --elevation5: 0.14; 43 | } 44 | 45 | .theme-light { 46 | --primary: #5F4BBD; 47 | --primary-r: 95; 48 | --primary-g: 75; 49 | --primary-b: 189; 50 | --onPrimary: #FFFFFF; 51 | --primaryContainer: #E7DEFF; 52 | --onPrimaryContainer: #1A0064; 53 | --secondary: #605C71; 54 | --onSecondary: #FFFFFF; 55 | --secondaryContainer: #E6DFF9; 56 | --onSecondaryContainer: #1C192C; 57 | --tertiary: #7C5264; 58 | --onTertiary: #FFFFFF; 59 | --tertiaryContainer: #FFD9E8; 60 | --onTertiaryContainer: #301020; 61 | --error: #BA1B1B; 62 | --errorContainer: #FFDAD4; 63 | --onError: #FFFFFF; 64 | --onErrorContainer: #410001; 65 | --background: #FFFBFF; 66 | --onBackground: #1C1B1E; 67 | --surface: #FFFBFF; 68 | --surface-r: 255; 69 | --surface-g: 251; 70 | --surface-b: 255; 71 | --surface: #FFFBFF; 72 | --onSurface: #1C1B1E; 73 | --surfaceVariant: #E5E0EB; 74 | --onSurfaceVariant: #48454F; 75 | --outline: #79767F; 76 | --inverseOnSurface: #F4EFF4; 77 | --inverseSurface: #313033; 78 | --primaryInverse: #CABEFF; 79 | --on-primary: var(--onPrimary); 80 | --primary-container: var(--primaryContainer); 81 | --on-primary-container: var(--onPrimaryContainer); 82 | --on-secondary: var(--onSecondary); 83 | --secondary-container: var(--secondaryContainer); 84 | --on-secondary-container: var(--onSecondaryContainer); 85 | --on-tertiary: var(--onTertiary); 86 | --tertiary-container: var(--tertiaryContainer); 87 | --on-tertiary-container: var(--onTertiaryContainer); 88 | --error-container: var(--errorContainer); 89 | --on-error: var(--onError); 90 | --on-error-container: var(--onErrorContainer); 91 | --on-background: var(--onBackground); 92 | --on-surface: var(--onSurface); 93 | --surface-variant: var(--surfaceVariant); 94 | --on-surface-variant: var(--onSurfaceVariant); 95 | --inverse-on-surface: var(--inverseOnSurface); 96 | --inverse-surface: var(--inverseSurface); 97 | --primary-inverse: var(--primaryInverse); 98 | --surface1: rgb( 99 | calc(var(--primary-r) * var(--elevation1) + var(--surface-r) * (1 - var(--elevation1))), 100 | calc(var(--primary-g) * var(--elevation1) + var(--surface-g) * (1 - var(--elevation1))), 101 | calc(var(--primary-b) * var(--elevation1) + var(--surface-b) * (1 - var(--elevation1))) 102 | ); 103 | --surface2: rgb( 104 | calc(var(--primary-r) * var(--elevation2) + var(--surface-r) * (1 - var(--elevation2))), 105 | calc(var(--primary-g) * var(--elevation2) + var(--surface-g) * (1 - var(--elevation2))), 106 | calc(var(--primary-b) * var(--elevation2) + var(--surface-b) * (1 - var(--elevation2))) 107 | ); 108 | --surface3: rgb( 109 | calc(var(--primary-r) * var(--elevation3) + var(--surface-r) * (1 - var(--elevation3))), 110 | calc(var(--primary-g) * var(--elevation3) + var(--surface-g) * (1 - var(--elevation3))), 111 | calc(var(--primary-b) * var(--elevation3) + var(--surface-b) * (1 - var(--elevation3))) 112 | ); 113 | --surface4: rgb( 114 | calc(var(--primary-r) * var(--elevation4) + var(--surface-r) * (1 - var(--elevation4))), 115 | calc(var(--primary-g) * var(--elevation4) + var(--surface-g) * (1 - var(--elevation4))), 116 | calc(var(--primary-b) * var(--elevation4) + var(--surface-b) * (1 - var(--elevation4))) 117 | ); 118 | --surface5: rgb( 119 | calc(var(--primary-r) * var(--elevation5) + var(--surface-r) * (1 - var(--elevation5))), 120 | calc(var(--primary-g) * var(--elevation5) + var(--surface-g) * (1 - var(--elevation5))), 121 | calc(var(--primary-b) * var(--elevation5) + var(--surface-b) * (1 - var(--elevation5))) 122 | ); 123 | /* Standard colours */ 124 | --background-primary: var(--background); 125 | --background-primary-alt: var(--surface1); 126 | --background-secondary: var(--surface-variant); 127 | --background-secondary-alt: var(--surface3); 128 | --background-modifier-border: var(--surface-variant); 129 | --background-modifier-form-field: #fff; 130 | --background-modifier-form-field-highlighted: #fff; 131 | --background-modifier-box-shadow: rgba(0, 0, 0, 0.1); 132 | --background-modifier-success: #a4e7c3; 133 | --background-modifier-error: var(--error); 134 | --background-modifier-error-rgb: 230, 135, 135; 135 | --background-modifier-error-hover: #b00020; 136 | --background-modifier-cover: rgba(0, 0, 0, 0.8); 137 | --text-accent: var(--primary); 138 | --text-accent-hover: var(--primary-container); 139 | --text-normal: var(--on-background); 140 | --text-muted: var(--on-surface-variant); 141 | --text-muted-rgb: 136, 136, 136; 142 | --text-faint: var(--secondary); 143 | --text-error: #800000; 144 | --text-error-hover: #990000; 145 | --text-highlight-bg: var(--surface-variant); 146 | --text-highlight-bg-active: rgba(255, 128, 0, 0.4); 147 | --text-selection: rgba(204, 230, 255, 0.99); 148 | --text-on-accent: #f2f2f2; 149 | --interactive-normal: #f2f3f5; 150 | --interactive-hover: #fcb2b2; 151 | --interactive-accent: var(--primary); 152 | --interactive-accent-rgb: var(--primary); 153 | --interactive-accent-hover: var(--primary); 154 | --interactive-success: #197300; 155 | --scrollbar-active-thumb-bg: rgba(0, 0, 0, 0.2); 156 | --scrollbar-bg: rgba(0, 0, 0, 0.05); 157 | --scrollbar-thumb-bg: rgba(0, 0, 0, 0.1); 158 | --highlight-mix-blend-mode: darken; 159 | --focus: var(--surface4); 160 | --hover: var(--surface2); 161 | } 162 | 163 | .theme-dark { 164 | --primary: #CABEFF; 165 | --primary-r: 202; 166 | --primary-g: 190; 167 | --primary-b: 255; 168 | --onPrimary: #30128D; 169 | --primaryContainer: #4731A4; 170 | --onPrimaryContainer: #E7DEFF; 171 | --secondary: #C9C3DC; 172 | --onSecondary: #312E41; 173 | --secondaryContainer: #484459; 174 | --onSecondaryContainer: #E6DFF9; 175 | --tertiary: #EDB8CD; 176 | --onTertiary: #482535; 177 | --tertiaryContainer: #623B4C; 178 | --onTertiaryContainer: #FFD9E8; 179 | --error: #FFB4A9; 180 | --errorContainer: #930006; 181 | --onError: #680003; 182 | --onErrorContainer: #FFDAD4; 183 | --background: #1C1B1E; 184 | --onBackground: #E5E1E5; 185 | --surface: #1C1B1E; 186 | --surface-r: 28; 187 | --surface-g: 27; 188 | --surface-b: 30; 189 | --onSurface: #E5E1E5; 190 | --surfaceVariant: #48454F; 191 | --onSurfaceVariant: #C9C4D0; 192 | --outline: #938F99; 193 | --inverseOnSurface: #1C1B1E; 194 | --inverseSurface: #E5E1E5; 195 | --primaryInverse: #5F4BBD; 196 | --on-primary: var(--onPrimary); 197 | --primary-container: var(--primaryContainer); 198 | --on-primary-container: var(--onPrimaryContainer); 199 | --on-secondary: var(--onSecondary); 200 | --secondary-container: var(--secondaryContainer); 201 | --on-secondary-container: var(--onSecondaryContainer); 202 | --on-tertiary: var(--onTertiary); 203 | --tertiary-container: var(--tertiaryContainer); 204 | --on-tertiary-container: var(--onTertiaryContainer); 205 | --error-container: var(--errorContainer); 206 | --on-error: var(--onError); 207 | --on-error-container: var(--onErrorContainer); 208 | --on-background: var(--onBackground); 209 | --on-surface: var(--onSurface); 210 | --surface-variant: var(--surfaceVariant); 211 | --on-surface-variant: var(--onSurfaceVariant); 212 | --inverse-on-surface: var(--inverseOnSurface); 213 | --inverse-surface: var(--inverseSurface); 214 | --primary-inverse: var(--primaryInverse); 215 | --surface1: rgb( 216 | calc(var(--primary-r) * var(--elevation1) + var(--surface-r) * (1 - var(--elevation1))), 217 | calc(var(--primary-g) * var(--elevation1) + var(--surface-g) * (1 - var(--elevation1))), 218 | calc(var(--primary-b) * var(--elevation1) + var(--surface-b) * (1 - var(--elevation1))) 219 | ); 220 | --surface2: rgb( 221 | calc(var(--primary-r) * var(--elevation2) + var(--surface-r) * (1 - var(--elevation2))), 222 | calc(var(--primary-g) * var(--elevation2) + var(--surface-g) * (1 - var(--elevation2))), 223 | calc(var(--primary-b) * var(--elevation2) + var(--surface-b) * (1 - var(--elevation2))) 224 | ); 225 | --surface3: rgb( 226 | calc(var(--primary-r) * var(--elevation3) + var(--surface-r) * (1 - var(--elevation3))), 227 | calc(var(--primary-g) * var(--elevation3) + var(--surface-g) * (1 - var(--elevation3))), 228 | calc(var(--primary-b) * var(--elevation3) + var(--surface-b) * (1 - var(--elevation3))) 229 | ); 230 | --surface4: rgb( 231 | calc(var(--primary-r) * var(--elevation4) + var(--surface-r) * (1 - var(--elevation4))), 232 | calc(var(--primary-g) * var(--elevation4) + var(--surface-g) * (1 - var(--elevation4))), 233 | calc(var(--primary-b) * var(--elevation4) + var(--surface-b) * (1 - var(--elevation4))) 234 | ); 235 | --surface5: rgb( 236 | calc(var(--primary-r) * var(--elevation5) + var(--surface-r) * (1 - var(--elevation5))), 237 | calc(var(--primary-g) * var(--elevation5) + var(--surface-g) * (1 - var(--elevation5))), 238 | calc(var(--primary-b) * var(--elevation5) + var(--surface-b) * (1 - var(--elevation5))) 239 | ); 240 | --focus: var(--surface4); 241 | --hover: var(--surface2); 242 | /* Standard Colours */ 243 | --background-primary: var(--background); 244 | --background-primary-alt: var(--surface1); 245 | --background-secondary: var(--surface-variant); 246 | --background-secondary-alt: var(--surface3); 247 | --background-modifier-border: var(--surface-variant); 248 | --background-modifier-form-field: rgba(0, 0, 0, 0.3); 249 | --background-modifier-form-field-highlighted: rgba(0, 0, 0, 0.22); 250 | --background-modifier-box-shadow: rgba(0, 0, 0, 0.3); 251 | --background-modifier-success: #197300; 252 | --background-modifier-error: var(--error); 253 | --background-modifier-error-rgb: 61, 0, 0; 254 | --background-modifier-error-hover: #470000; 255 | --background-modifier-cover: rgba(0, 0, 0, 0.8); 256 | --text-accent: var(--primary); 257 | --text-accent-hover: var(--primary-container); 258 | --text-normal: var(--on-background); 259 | --text-muted: var(--on-surface-variant); 260 | --text-muted-rgb: 153, 153, 153; 261 | --text-faint: #666; 262 | --text-error: #cf6679; 263 | --text-error-hover: #990000; 264 | --text-highlight-bg: var(--surface-variant); 265 | --text-highlight-bg-active: rgba(255, 128, 0, 0.4); 266 | --text-selection: rgba(23, 48, 77, 0.99); 267 | --text-on-accent: #dcddde; 268 | --interactive-normal: #2a2a2a; 269 | --interactive-hover: #303030; 270 | --interactive-accent: var(--primary); 271 | --interactive-accent-rgb: var(--primary); 272 | --interactive-accent-hover: var(--primary); 273 | --interactive-success: #197300; 274 | --scrollbar-active-thumb-bg: rgba(255, 255, 255, 0.2); 275 | --scrollbar-bg: rgba(255, 255, 255, 0.05); 276 | --scrollbar-thumb-bg: rgba(255, 255, 255, 0.1); 277 | --highlight-mix-blend-mode: lighten; 278 | } 279 | 280 | .cm-formatting-header { 281 | color: var(--surface-variant) !important; 282 | } 283 | 284 | .markdown-reading-view h1, 285 | .cm-s-obsidian .cm-header-1, 286 | .mod-cm6 .cm-editor .HyperMD-header-1 { 287 | line-height: 2.75rem; 288 | font-size: var(--h1); 289 | font-weight: var(--regular); 290 | } 291 | 292 | .markdown-reading-view h2, 293 | .cm-s-obsidian .cm-header-2, 294 | .mod-cm6 .cm-editor .HyperMD-header-2 { 295 | line-height: 2.5rem; 296 | font-size: var(--h2); 297 | font-weight: var(--regular); 298 | } 299 | 300 | .markdown-reading-view h3, 301 | .cm-s-obsidian .cm-header-3, 302 | .mod-cm6 .cm-editor .HyperMD-header-3 { 303 | line-height: 2.25rem; 304 | font-size: var(--h3); 305 | font-weight: var(--regular); 306 | } 307 | 308 | .markdown-reading-view h4, 309 | .cm-s-obsidian .cm-header-4, 310 | .mod-cm6 .cm-editor .HyperMD-header-4 { 311 | line-height: 2rem; 312 | font-size: var(--h4); 313 | font-weight: var(--regular); 314 | } 315 | 316 | .markdown-reading-view h5, 317 | .cm-s-obsidian .cm-header-5, 318 | .mod-cm6 .cm-editor .HyperMD-header-5 { 319 | line-height: 1.75rem; 320 | font-size: var(--h5); 321 | font-weight: var(--regular); 322 | } 323 | 324 | .markdown-reading-view h6, 325 | .cm-s-obsidian .cm-header-6, 326 | .mod-cm6 .cm-editor .HyperMD-header-6 { 327 | line-height: 1.5rem; 328 | font-size: var(--h6); 329 | letter-spacing: 0.009375rem; 330 | font-weight: var(--medium); 331 | } 332 | 333 | /* ------------- */ 334 | /* # Body */ 335 | /* ------------- */ 336 | .markdown-preview-view, 337 | .markdown-source-view, 338 | .cm-line { 339 | line-height: 1.5rem; 340 | font-size: 1rem; 341 | letter-spacing: 0.009375rem; 342 | font-weight: var(--medium); 343 | } 344 | 345 | strong, 346 | .cm-s-obsidian .cm-strong { 347 | font-weight: var(--bold); 348 | } 349 | 350 | /* Checkboxes */ 351 | input[type=checkbox]:checked { 352 | filter: grayscale(100%); 353 | } 354 | 355 | .theme-dark .task-list-item-checkbox { 356 | filter: invert(1); 357 | } 358 | 359 | /* Images */ 360 | img { 361 | border-radius: var(--small-radius); 362 | } 363 | 364 | span.cm-formatting.cm-formatting-list.cm-formatting-list-ul.cm-list-1, 365 | span.cm-formatting.cm-formatting-list.cm-formatting-list-ol.cm-list-1 { 366 | color: var(--secondary); 367 | } 368 | 369 | /* Callout boxes from Vileplume: https://github.com/hungsu/vileplume-obsidian */ 370 | /* Blockquotes */ 371 | .markdown-preview-view blockquote, 372 | .markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote { 373 | line-height: 1.5rem; 374 | font-size: 1rem; 375 | letter-spacing: 0.009375rem; 376 | font-weight: var(--medium); 377 | border-left: 3px solid var(--tertiary); 378 | background-color: var(--surface); 379 | } 380 | 381 | .cm-s-obsidian span.cm-quote { 382 | color: var(--tertiary); 383 | } 384 | 385 | /* Lists */ 386 | ul > li::marker, 387 | ol > li::marker { 388 | color: var(--text-muted); 389 | } 390 | 391 | /* Internal links */ 392 | .markdown-preview-view .internal-link, 393 | .cm-s-obsidian .cm-formatting-link, 394 | .cm-s-obsidian span.cm-link, 395 | .cm-s-obsidian span.cm-hmd-internal-link, 396 | .markdown-source-view.mod-cm6 .cm-underline { 397 | text-decoration: none; 398 | font-weight: var(--medium); 399 | } 400 | 401 | /* Frontmatter Edit Mode */ 402 | .markdown-preview-section .frontmatter code, 403 | .frontmatter .token, 404 | .cm-s-obsidian .cm-hmd-frontmatter, 405 | pre.frontmatter[class*=language-yaml], 406 | span.cm-hmd-frontmatter, 407 | span.cm-def.cm-hmd-frontmatter { 408 | line-height: 1.25rem; 409 | font-size: 0.875rem; 410 | letter-spacing: 0.015625rem; 411 | font-weight: var(--medium); 412 | color: var(--secondary); 413 | font-family: var(--default-font); 414 | } 415 | 416 | /* Frontmatter / Metadata container */ 417 | .frontmatter-container { 418 | border: 1px solid var(--surface-variant); 419 | background-color: var(--surface); 420 | transition: border 250ms ease-in; 421 | } 422 | .frontmatter-container.is-collapsed { 423 | border: 0; 424 | color: var(--on-surface); 425 | background-color: var(--surface); 426 | transition: border 450ms ease-out; 427 | } 428 | .frontmatter-container .frontmatter-container-header { 429 | text-transform: none; 430 | line-height: 1.25rem; 431 | font-size: 0.875rem; 432 | letter-spacing: 0.00625rem; 433 | font-weight: var(--medium); 434 | color: var(--secondary); 435 | border: none; 436 | } 437 | .frontmatter-container .frontmatter-container-header:hover { 438 | color: var(--secondary); 439 | } 440 | .frontmatter-container .frontmatter-collapse-indicator { 441 | color: var(--secondary); 442 | } 443 | .frontmatter-container .frontmatter-collapse-indicator:hover { 444 | color: var(--secondary); 445 | } 446 | .frontmatter-container .tag { 447 | background-color: var(--secondary-container); 448 | color: var(--on-secondary-container); 449 | } 450 | .frontmatter-container .frontmatter-alias { 451 | background-color: var(--secondary-container); 452 | color: var(--on-secondary-container); 453 | } 454 | .frontmatter-container .frontmatter-alias-icon { 455 | color: var(--on-secondary-container); 456 | } 457 | 458 | .frontmatter-section { 459 | line-height: 1rem; 460 | font-size: 0.75rem; 461 | letter-spacing: 0.03125rem; 462 | font-weight: var(--medium); 463 | } 464 | 465 | /* Code blocks */ 466 | /* Inline */ 467 | .markdown-preview-view code, 468 | .cm-s-obsidian span.cm-inline-code, 469 | .cm-s-obsidian span.cm-inline-code:not(.cm-formatting):not(.cm-hmd-indented-code):not(.obsidian-search-match-highlight), 470 | .cm-s-obsidian .HyperMD-codeblock { 471 | line-height: 1.25rem; 472 | font-size: 0.875rem; 473 | letter-spacing: 0.015625rem; 474 | font-weight: var(--medium); 475 | background-color: var(--surface-variant); 476 | color: var(--on-surface-variant); 477 | font-family: var(--font-monospace); 478 | border-radius: 0; 479 | } 480 | 481 | .markdown-preview-view pre { 482 | border-radius: var(--small-radius); 483 | line-height: 1.25rem; 484 | font-size: 0.875rem; 485 | letter-spacing: 0.015625rem; 486 | font-weight: var(--medium); 487 | background-color: var(--surface-variant); 488 | color: var(--on-surface-variant); 489 | font-family: var(--font-monospace); 490 | } 491 | 492 | .cm-s-obsidian div.HyperMD-codeblock-begin-bg, 493 | .cm-s-obsidian div.HyperMD-codeblock-end-bg, 494 | .cm-s-obsidian div.HyperMD-codeblock-bg { 495 | background-color: var(--surface-variant); 496 | border: none; 497 | } 498 | 499 | /* Empty State screen */ 500 | .empty-state-title::before { 501 | content: " "; 502 | background-size: 45vw 45vw; 503 | height: 45vw; 504 | width: 45vw; 505 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='Layer 1' width='578.0013' height='621.92557' viewBox='0 0 578.0013 621.92557' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M677.64241,491.89724l-249.84894,64.339a33.03735,33.03735,0,0,1-40.18683-23.728L312.04574,239.081a33.03734,33.03734,0,0,1,23.728-40.18683l232.44363-59.85691L627.712,165.67105l73.65843,286.03936A33.03734,33.03734,0,0,1,677.64241,491.89724Z' transform='translate(-310.99935 -139.03722)' fill='%23f2f2f2'/%3E%3Cpath d='M338.14273,208.094a23.52653,23.52653,0,0,0-16.89723,28.61789l75.5609,293.42725a23.52654,23.52654,0,0,0,28.6179,16.89723l249.84894-64.339a23.52654,23.52654,0,0,0,16.89723-28.61789l-72.51713-281.6073-52.285-23.40643Z' transform='translate(-310.99935 -139.03722)' fill='%23fff'/%3E%3Cpath d='M627.07719,167.18472l-38.66749,9.95733a10.99077,10.99077,0,0,1-13.38436-7.9027L567.671,140.68008a.68692.68692,0,0,1,.944-.7991l58.56966,26.01073A.68692.68692,0,0,1,627.07719,167.18472Z' transform='translate(-310.99935 -139.03722)' fill='%23f2f2f2'/%3E%3Cpath d='M606.73438,417.76533,492.98165,447.058a5.49538,5.49538,0,0,1-2.74083-10.64353L603.99355,407.1218a5.49538,5.49538,0,1,1,2.74083,10.64353Z' transform='translate(-310.99935 -139.03722)' fill='%23ccc'/%3E%3Cpath d='M633.31182,430.07333l-135.705,34.9456A5.49538,5.49538,0,0,1,494.866,454.3754l135.705-34.94561a5.49539,5.49539,0,0,1,2.74084,10.64354Z' transform='translate(-310.99935 -139.03722)' fill='%23ccc'/%3E%3Ccircle id='a597741b-ffcf-4aba-98b0-6652ef5d57c9' data-name='Ellipse 44' cx='135.55495' cy='323.87767' r='19.42315' fill='%23e6e6e6'/%3E%3Cpath d='M594.63919,366.93361,443.56425,405.8227A17.01917,17.01917,0,0,1,422.863,393.59731l-31.6597-122.9905a17.01916,17.01916,0,0,1,12.22538-20.7012l151.075-38.88909a17.01916,17.01916,0,0,1,20.7012,12.22539l31.65971,122.9905A17.01917,17.01917,0,0,1,594.63919,366.93361Z' transform='translate(-310.99935 -139.03722)' fill='%23fff'/%3E%3Cpath d='M594.63919,366.93361,443.56425,405.8227A17.01917,17.01917,0,0,1,422.863,393.59731l-31.6597-122.9905a17.01916,17.01916,0,0,1,12.22538-20.7012l151.075-38.88909a17.01916,17.01916,0,0,1,20.7012,12.22539l31.65971,122.9905A17.01917,17.01917,0,0,1,594.63919,366.93361ZM403.9273,251.84246a15.017,15.017,0,0,0-10.7871,18.26578l31.6597,122.9905a15.017,15.017,0,0,0,18.26577,10.7871l151.075-38.88908a15.017,15.017,0,0,0,10.7871-18.26578L573.268,223.74048a15.017,15.017,0,0,0-18.26578-10.7871Z' transform='translate(-310.99935 -139.03722)' fill='%23e6e6e6'/%3E%3Cpath id='b056fd3f-f1a0-44f0-b006-deff0bee637d-685' data-name='Path 411' d='M546.83934,252.37075l-76.24555,19.62681a2.73087,2.73087,0,0,1-3.30848-1.71854,2.63064,2.63064,0,0,1,1.85283-3.33925l77.61329-19.97889c3.13521,1.58858,2.31023,4.83781.087,5.41011Z' transform='translate(-310.99935 -139.03722)' fill='%23f2f2f2'/%3E%3Cpath id='f1ea6668-a825-428d-96fe-a2c4e1b5a672-686' data-name='Path 412' d='M550.282,265.74474l-76.24555,19.62681A2.73089,2.73089,0,0,1,470.728,283.653a2.63065,2.63065,0,0,1,1.85284-3.33925l77.61329-19.97889c3.13521,1.58858,2.31022,4.83781.087,5.41011Z' transform='translate(-310.99935 -139.03722)' fill='%23f2f2f2'/%3E%3Cpath id='ee9aa382-a9c9-40d0-8ed3-22ec2dd616d6-687' data-name='Path 413' d='M459.51412,297.22917l-23.2694,5.98992a2.962,2.962,0,0,1-3.60325-2.12795l-7.06858-27.45979a2.962,2.962,0,0,1,2.12794-3.60325l23.2694-5.98991a2.963,2.963,0,0,1,3.60325,2.12795l7.06859,27.45982a2.962,2.962,0,0,1-2.12795,3.60324Z' transform='translate(-310.99935 -139.03722)' fill='%23e6e6e6'/%3E%3Cpath id='be954d2b-d8b8-4d26-80a0-a319e99a4b10-688' data-name='Path 414' d='M557.10914,293.18514,440.74446,323.13925a2.73087,2.73087,0,0,1-3.30847-1.71854,2.63062,2.63062,0,0,1,1.85284-3.33925L557.02218,287.775c3.13521,1.58859,2.31022,4.83781.087,5.41012Z' transform='translate(-310.99935 -139.03722)' fill='%23f2f2f2'/%3E%3Cpath id='baaae9e4-1b4d-40c2-8a9d-f2abb078b489-689' data-name='Path 415' d='M560.55283,306.563,444.18814,336.51715a2.73086,2.73086,0,0,1-3.30846-1.71854,2.63061,2.63061,0,0,1,1.85283-3.33926l117.73335-30.30643c3.13521,1.58858,2.31022,4.83781.087,5.41011Z' transform='translate(-310.99935 -139.03722)' fill='%23f2f2f2'/%3E%3Cpath id='a91bf4c9-37f6-4391-92ed-1882bd0ce21c-690' data-name='Path 416' d='M563.99426,319.93218,447.62957,349.8863a2.73086,2.73086,0,0,1-3.30846-1.71854,2.63061,2.63061,0,0,1,1.85283-3.33926l117.73335-30.30643c3.13521,1.58858,2.31023,4.83781.087,5.41011Z' transform='translate(-310.99935 -139.03722)' fill='%23f2f2f2'/%3E%3Cpath id='efb98e07-468b-4c85-9a64-ee4cc5493d6f-691' data-name='Path 417' d='M567.43768,333.30908,451.073,363.2632a2.73087,2.73087,0,0,1-3.30847-1.71854,2.63063,2.63063,0,0,1,1.85284-3.33926L567.35072,327.899c3.13521,1.58858,2.31022,4.83781.087,5.41011Z' transform='translate(-310.99935 -139.03722)' fill='%23f2f2f2'/%3E%3Cpath id='aeb1db98-32e5-40b8-ab89-fdad6a3263dc-692' data-name='Path 418' d='M570.87937,346.67924,454.51469,376.63336a2.73088,2.73088,0,0,1-3.30847-1.71855,2.63062,2.63062,0,0,1,1.85284-3.33925l117.73335-30.30643c3.13521,1.58858,2.31022,4.83781.087,5.41011Z' transform='translate(-310.99935 -139.03722)' fill='%23f2f2f2'/%3E%3Cpath id='be265de5-288f-49a7-867d-c42e7cdbf4db-693' data-name='Path 395' d='M447.98728,469.72335a2.01449,2.01449,0,0,1-1.27407-.08782l-.02505-.01034L441.3969,467.382a2.02852,2.02852,0,1,1,1.58747-3.73356l3.42865,1.45835,4.49293-10.56929a2.02766,2.02766,0,0,1,2.65942-1.07259l.00068.00028-.027.06912.02812-.06941a2.03011,2.03011,0,0,1,1.0723,2.66008l-5.28586,12.42716a2.02886,2.02886,0,0,1-1.36522,1.16845Z' transform='translate(-310.99935 -139.03722)' fill='%23fff'/%3E%3Cpath d='M773.47457,603.71475h-258a33.03734,33.03734,0,0,1-33-33v-303a33.03734,33.03734,0,0,1,33-33H755.50142l50.97315,40.62891V570.71475A33.03734,33.03734,0,0,1,773.47457,603.71475Z' transform='translate(-310.99935 -139.03722)' fill='%23e6e6e6'/%3E%3Cpath d='M515.47446,244.21475a23.52654,23.52654,0,0,0-23.5,23.5v303a23.52653,23.52653,0,0,0,23.5,23.5h258a23.52653,23.52653,0,0,0,23.5-23.5V279.92032l-44.79614-35.70557Z' transform='translate(-310.99935 -139.03722)' fill='%23fff'/%3E%3Cpath d='M723.29356,332.319H605.82977a5.49538,5.49538,0,0,1,0-10.99076H723.29356a5.49538,5.49538,0,1,1,0,10.99076Z' transform='translate(-310.99935 -139.03722)' fill='%23878787'/%3E%3Cpath d='M745.962,350.86594H605.82977a5.49539,5.49539,0,0,1,0-10.99077H745.962a5.49539,5.49539,0,1,1,0,10.99077Z' transform='translate(-310.99935 -139.03722)' fill='%23878787'/%3E%3Cpath d='M723.29425,404.44277h-117.46a5.495,5.495,0,1,0,0,10.99h117.46a5.495,5.495,0,0,0,0-10.99Z' transform='translate(-310.99935 -139.03722)' fill='%23ccc'/%3E%3Cpath d='M745.96417,422.99281H605.83429a5.495,5.495,0,1,0,0,10.99H745.96417a5.495,5.495,0,0,0,0-10.99Z' transform='translate(-310.99935 -139.03722)' fill='%23ccc'/%3E%3Cpath d='M723.29356,498.55433H605.82977a5.49538,5.49538,0,0,1,0-10.99076H723.29356a5.49538,5.49538,0,1,1,0,10.99076Z' transform='translate(-310.99935 -139.03722)' fill='%23ccc'/%3E%3Cpath d='M745.962,517.10125H605.82977a5.49539,5.49539,0,0,1,0-10.99077H745.962a5.49539,5.49539,0,1,1,0,10.99077Z' transform='translate(-310.99935 -139.03722)' fill='%23ccc'/%3E%3Ccircle id='abdb8e2f-a218-463c-85f4-c869fef49971' data-name='Ellipse 44' cx='245.91553' cy='197.05988' r='19.42315' fill='%23878787'/%3E%3Cpath id='ba7dbbd6-0052-44b1-a552-47a8298b8d3e-694' data-name='Path 395' d='M554.99015,343.50645a2.0144,2.0144,0,0,1-1.21191-.40277l-.02168-.01626-4.5647-3.49185a2.02852,2.02852,0,1,1,2.46838-3.21972l2.95665,2.26729,6.98671-9.11494a2.02767,2.02767,0,0,1,2.84288-.3755l.00058.00044-.04336.06021.04454-.06021a2.03011,2.03011,0,0,1,.37507,2.84345l-8.2179,10.71637a2.02892,2.02892,0,0,1-1.61348.79109Z' transform='translate(-310.99935 -139.03722)' fill='%23fff'/%3E%3Cpath d='M578.33429,419.21278a19.42256,19.42256,0,0,1-19.41992,19.43,4.17626,4.17626,0,0,1-.5-.02,19.422,19.422,0,1,1,19.91992-19.41Z' transform='translate(-310.99935 -139.03722)' fill='%23ccc'/%3E%3Ccircle id='e4a71040-498e-4958-ad41-c2d79154b8f7' data-name='Ellipse 44' cx='245.91553' cy='363.29519' r='19.42315' fill='%23ccc'/%3E%3Cpath d='M805.48234,276.65121h-39.929a10.99077,10.99077,0,0,1-10.99076-10.99077v-29.491a.68692.68692,0,0,1,1.11347-.53844l50.23281,39.79483A.68692.68692,0,0,1,805.48234,276.65121Z' transform='translate(-310.99935 -139.03722)' fill='%23ccc'/%3E%3Cpath d='M578.33429,419.21278a19.42256,19.42256,0,0,1-19.41992,19.43,4.17626,4.17626,0,0,1-.5-.02,42.05076,42.05076,0,0,1,3.77-38.56A19.43323,19.43323,0,0,1,578.33429,419.21278Z' transform='translate(-310.99935 -139.03722)' fill='%23878787'/%3E%3Cpath d='M600.33429,409.94277a5.50988,5.50988,0,0,1,5.5-5.5h29.27a41.57257,41.57257,0,0,1,3.60986,10.99H605.83429A5.50129,5.50129,0,0,1,600.33429,409.94277Z' transform='translate(-310.99935 -139.03722)' fill='%23878787'/%3E%3Cpath d='M639.39435,422.99281a41.92449,41.92449,0,0,1-1.46,10.99h-32.1001a5.495,5.495,0,1,1,0-10.99Z' transform='translate(-310.99935 -139.03722)' fill='%23878787'/%3E%3Cpath d='M711.816,490.77021a6.00013,6.00013,0,0,1-8.24672,1.9979l-70.0049-42.70029a6,6,0,0,1,6.24883-10.24462l70.00489,42.70029A6.00014,6.00014,0,0,1,711.816,490.77021Z' transform='translate(-310.99935 -139.03722)' fill='%233f3d56'/%3E%3Cpath d='M641.8111,448.06992a48,48,0,1,1-15.98318-65.97376A48.05436,48.05436,0,0,1,641.8111,448.06992Zm-71.71233-43.74176a36,36,0,1,0,49.48033-11.98738A36.04071,36.04071,0,0,0,570.09877,404.32816Z' transform='translate(-310.99935 -139.03722)' fill='%233f3d56'/%3E%3Ccircle cx='484.60301' cy='267.17256' r='24.56103' fill='%23a0616a'/%3E%3Cpath d='M794.015,543.90119a11.002,11.002,0,0,1,8.32251-14.15136,10.46752,10.46752,0,0,1,1.45923-.17969l25.87158-41.52344L806.036,465.57991a9.43208,9.43208,0,1,1,13.1206-13.55274L851.786,484.201l.06567.08008a8.54468,8.54468,0,0,1-.59448,10.18457l-36.25,42.873a10.301,10.301,0,0,1,.27,1.0459,11.0026,11.0026,0,0,1-9.875,13.11621q-.46839.041-.93213.041A11.0367,11.0367,0,0,1,794.015,543.90119Z' transform='translate(-310.99935 -139.03722)' fill='%23a0616a'/%3E%3Cpolygon points='444.151 609.001 431.891 609 426.059 561.712 444.153 561.713 444.151 609.001' fill='%23a0616a'/%3E%3Cpath d='M758.2767,759.92208l-39.53051-.00146v-.5a15.38605,15.38605,0,0,1,15.38647-15.38623h.001l24.1438.001Z' transform='translate(-310.99935 -139.03722)' fill='%232f2e41'/%3E%3Cpolygon points='566.007 592.05 555.473 598.322 526.268 560.676 541.815 551.419 566.007 592.05' fill='%23a0616a'/%3E%3Cpath d='M885.77238,739.69878l-33.96586,20.2233-.25581-.4296a15.386,15.386,0,0,1,5.34836-21.09206l.00084-.0005,20.74515-12.35158Z' transform='translate(-310.99935 -139.03722)' fill='%232f2e41'/%3E%3Cpath d='M735.512,727.21272c-8.21289-96.70606-13.09863-186.54492,16.92408-223.19336l.23217-.28418,50.52564,20.21094.08325.18066c.17041.37109,16.97388,37.333,13.0542,62.19434L828.794,643.64924l40.63574,68.041A4.50136,4.50136,0,0,1,867.379,718.118l-17.65918,7.76953a4.52142,4.52142,0,0,1-5.64844-1.76562l-44.2041-72.08008-24.96778-55.28613a1.50028,1.50028,0,0,0-2.85888.459L758.20052,727.31135a4.4918,4.4918,0,0,1-4.47461,4.02441H739.99764A4.53045,4.53045,0,0,1,735.512,727.21272Z' transform='translate(-310.99935 -139.03722)' fill='%232f2e41'/%3E%3Cpath d='M752.60628,504.786l-.24072-.11523-.0376-.26465c-1.88745-13.21.34668-27.8877,6.63989-43.625a34.63634,34.63634,0,0,1,40.20191-20.74317h0a34.59441,34.59441,0,0,1,22.06055,16.96387,34.2209,34.2209,0,0,1,2.3728,27.4248c-7.93384,23.2002-18.22583,44.90723-18.32886,45.124l-.21558.45312Z' transform='translate(-310.99935 -139.03722)' fill='%23878787'/%3E%3Cpath d='M697.48021,471.88251A11.002,11.002,0,0,1,713.65,474.72233a10.46856,10.46856,0,0,1,.67932,1.3039l47.95411,9.69217,12.7683-30.00357a9.43208,9.43208,0,1,1,17.28928,7.54372l-18.71,41.83025-.052.08956a8.54469,8.54469,0,0,1-9.74785,3.00972L710.97846,489.2473a10.30273,10.30273,0,0,1-.88511.61918,11.00261,11.00261,0,0,1-15.74382-4.6565q-.20244-.42436-.36484-.85874A11.0367,11.0367,0,0,1,697.48021,471.88251Z' transform='translate(-310.99935 -139.03722)' fill='%23a0616a'/%3E%3Cpath d='M884.33087,432.51247c-2.36572-4.19178-5.8125-8.03119-10.36914-9.58069-5.88476-2.001-12.25683.12964-18.30713,1.55218-4.66162,1.09595-9.53173,1.76679-14.23046.84192-4.69825-.92492-9.23047-3.65924-11.36817-7.94409-3.145-6.30359-.4956-13.82062-.687-20.86255a25.33438,25.33438,0,0,0-31.92334-23.81061c-5.79346-1.67193-11.03906-1.82659-14.62256,2.62714a17.0001,17.0001,0,0,0-17,17h16.25537a16.1496,16.1496,0,0,0,2.4541,11.93109c2.86963,4.21582,7.85938,7.2655,8.81983,12.274.93115,4.85351-2.36817,9.45868-5.8291,12.98669-3.46045,3.528-7.4751,7.02381-8.55567,11.84626a14.68871,14.68871,0,0,0,2.10352,10.56475,34.40329,34.40329,0,0,0,7.38623,8.13575,108.40184,108.40184,0,0,0,45.0376,23.04034c11.7041,2.81781,24.50586,3.54822,35.37109-1.6355a35.12563,35.12563,0,0,0,15.46484-48.96667Z' transform='translate(-310.99935 -139.03722)' fill='%232f2e41'/%3E%3Cpath d='M888.00065,760.96278h-190a1,1,0,0,1,0-2h190a1,1,0,0,1,0,2Z' transform='translate(-310.99935 -139.03722)' fill='%23ccc'/%3E%3C/svg%3E"); 506 | display: block; 507 | margin: 10px; 508 | } 509 | 510 | .empty-state-title { 511 | transform: translateY(-25px); 512 | line-height: 1.5rem; 513 | font-size: 1rem; 514 | letter-spacing: 0.009375rem; 515 | font-weight: var(--medium); 516 | text-align: center; 517 | color: var(--on-surface); 518 | } 519 | 520 | .is-mobile .empty-state-action:nth-child(2) { 521 | transform: translate(0px, -60px); 522 | background-color: var(--primary); 523 | color: var(--on-primary); 524 | text-transform: none; 525 | line-height: 1.25rem; 526 | font-size: 0.875rem; 527 | letter-spacing: 0.00625rem; 528 | font-weight: var(--medium); 529 | height: 40px; 530 | border-radius: 1.25rem; 531 | padding-top: 10px; 532 | padding-left: 1.5rem; 533 | padding-right: 1.5rem; 534 | display: block; 535 | margin: auto; 536 | padding-left: 16px; 537 | padding-right: 24px; 538 | vertical-align: middle; 539 | } 540 | .is-mobile .empty-state-action:nth-child(2)::before { 541 | content: ""; 542 | height: 1.125rem; 543 | width: 1.125rem; 544 | background-size: 1.125rem 1.125rem; 545 | background-position: center; 546 | background-color: var(--on-primary); 547 | display: inline-block; 548 | margin-top: -4px; 549 | mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z' /%3E%3C/svg%3E"); 550 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z' /%3E%3C/svg%3E"); 551 | mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z' /%3E%3C/svg%3E"); 552 | -webkit-mask-size: cover; 553 | mask-size: cover; 554 | transform: translateY(4px); 555 | margin-right: 8px; 556 | } 557 | .is-mobile .empty-state-action:first-of-type { 558 | transform: translate(0px, 30px); 559 | background-color: inherit; 560 | color: var(--primary); 561 | text-transform: none; 562 | line-height: 1.25rem; 563 | font-size: 0.875rem; 564 | letter-spacing: 0.00625rem; 565 | font-weight: var(--medium); 566 | height: 40px; 567 | border-radius: 1.25rem; 568 | border-width: 0.0625rem; 569 | border-color: var(--outline); 570 | padding-top: 9px; 571 | padding-left: 1.5rem; 572 | padding-right: 1.5rem; 573 | display: block; 574 | margin: auto; 575 | padding-left: 16px; 576 | padding-right: 24px; 577 | vertical-align: middle; 578 | } 579 | .is-mobile .empty-state-action:first-of-type::before { 580 | content: ""; 581 | height: 1.125rem; 582 | width: 1.125rem; 583 | background-size: 1.125rem 1.125rem; 584 | background-position: center; 585 | background-color: var(--primary); 586 | display: inline-block; 587 | margin-top: -4px; 588 | mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z' /%3E%3C/svg%3E"); 589 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z' /%3E%3C/svg%3E"); 590 | mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z' /%3E%3C/svg%3E"); 591 | -webkit-mask-size: cover; 592 | mask-size: cover; 593 | transform: translateY(4px); 594 | margin-right: 8px; 595 | } 596 | .is-mobile .empty-state-action:nth-child(3) { 597 | background-color: inherit; 598 | color: var(--primary); 599 | text-transform: none; 600 | line-height: 1.25rem; 601 | font-size: 0.875rem; 602 | letter-spacing: 0.00625rem; 603 | font-weight: var(--medium); 604 | height: 40px; 605 | border-radius: 1.25rem; 606 | border-width: 0.0625rem; 607 | border-color: var(--outline); 608 | padding-top: 9px; 609 | padding-left: 1.5rem; 610 | padding-right: 1.5rem; 611 | display: block; 612 | margin: auto; 613 | padding-left: 16px; 614 | padding-right: 24px; 615 | vertical-align: middle; 616 | } 617 | .is-mobile .empty-state-action:nth-child(3)::before { 618 | content: ""; 619 | height: 1.125rem; 620 | width: 1.125rem; 621 | background-size: 1.125rem 1.125rem; 622 | background-position: center; 623 | background-color: var(--primary); 624 | display: inline-block; 625 | margin-top: -4px; 626 | mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3' /%3E%3C/svg%3E"); 627 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3' /%3E%3C/svg%3E"); 628 | mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3' /%3E%3C/svg%3E"); 629 | -webkit-mask-size: cover; 630 | mask-size: cover; 631 | transform: translateY(4px); 632 | margin-right: 8px; 633 | } 634 | 635 | progress { 636 | -webkit-appearance: none; 637 | appearance: none; 638 | } 639 | 640 | progress::-webkit-progress-bar { 641 | border-radius: var(--medium-radius); 642 | background: var(--primary-container); 643 | height: 0.6em; 644 | } 645 | 646 | progress::-webkit-progress-value { 647 | border-radius: var(--medium-radius); 648 | background: var(--on-primary-container); 649 | height: 0.6em; 650 | } 651 | 652 | /* Mobile Toolbar */ 653 | .is-mobile .mobile-toolbar { 654 | border-top: none; 655 | border-radius: 0; 656 | background-color: var(--surface1); 657 | } 658 | 659 | .is-mobile .mobile-toolbar-option { 660 | color: var(--on-surface-variant); 661 | } 662 | .is-mobile .mobile-toolbar-option:focus, .is-mobile .mobile-toolbar-option:active { 663 | color: var(--on-secondary-container); 664 | } 665 | 666 | /* Tags */ 667 | /* Adapted from https://github.com/kepano/obsidian-minimal/blob/master/obsidian.css */ 668 | /* Preview */ 669 | a.tag { 670 | line-height: 1.25rem; 671 | font-size: 0.875rem; 672 | letter-spacing: 0.015625rem; 673 | font-weight: var(--medium); 674 | background-color: var(--tertiary-container); 675 | color: var(--on-tertiary-container); 676 | padding: 3px 12px; 677 | text-align: center; 678 | text-decoration: none; 679 | display: inline-block; 680 | margin: 2px 0 0 0; 681 | border-radius: var(--medium-radius); 682 | } 683 | 684 | /* Editor */ 685 | .cm-s-obsidian span.cm-hashtag { 686 | line-height: 1.25rem; 687 | font-size: 0.875rem; 688 | letter-spacing: 0.015625rem; 689 | font-weight: var(--medium); 690 | background-color: var(--tertiary-container); 691 | color: var(--on-tertiary-container); 692 | text-align: center; 693 | text-decoration: none; 694 | display: inline-block; 695 | margin: 2px 0; 696 | vertical-align: middle; 697 | padding-top: 1px; 698 | border-left: none; 699 | border-right: none; 700 | padding-bottom: 2px; 701 | cursor: text; 702 | } 703 | .cm-s-obsidian span.cm-hashtag.cm-hashtag-begin { 704 | border-top-left-radius: var(--medium-radius); 705 | border-bottom-left-radius: var(--medium-radius); 706 | padding-left: 8px; 707 | border-right: none; 708 | } 709 | .cm-s-obsidian span.cm-hashtag.cm-hashtag-end { 710 | border-top-right-radius: var(--medium-radius); 711 | border-bottom-right-radius: var(--medium-radius); 712 | border-left: none; 713 | padding-right: 8px; 714 | } 715 | 716 | /* Hide the # character in front of a tag in Preview */ 717 | /* Thanks to `@Klaas`: https://discord.com/channels/686053708261228577/702656734631821413/890122749459197993 */ 718 | /* Currently not working, review later */ 719 | /* a.tag { 720 | position: relative; 721 | padding-left: 3px; 722 | } 723 | 724 | a.tag:after { 725 | background: var(--background-primary); 726 | position: absolute; 727 | content: " "; 728 | top: 0; 729 | bottom: 0; 730 | width: 0.66rem; 731 | left: 0px; 732 | border-radius: 4px; 733 | } */ 734 | /* ------------- */ 735 | /* # Title Bar */ 736 | /* ------------- */ 737 | .workspace-split.mod-root > .workspace-leaf:first-of-type:last-of-type .view-header, 738 | .workspace-leaf.mod-active .view-header { 739 | border-bottom: none; 740 | background-color: var(--surface2); 741 | height: 64px; 742 | align-items: center; 743 | display: flex; 744 | } 745 | 746 | /* Style hamburger menu */ 747 | /* Replace icon */ 748 | .three-horizontal-bars { 749 | background-color: currentColor; 750 | } 751 | 752 | svg.three-horizontal-bars { 753 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z' /%3E%3C/svg%3E"); 754 | mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z' /%3E%3C/svg%3E"); 755 | } 756 | 757 | .view-header-title { 758 | line-height: 1.75rem; 759 | font-size: var(--h5); 760 | font-weight: var(--regular); 761 | color: var(--on-surface); 762 | } 763 | 764 | .is-mobile .view-header-title { 765 | -webkit-mask-image: none; 766 | mask-image: none; 767 | } 768 | 769 | .is-mobile .view-header-icon { 770 | color: var(--on-surface); 771 | padding-left: 16px; 772 | padding-right: 16px; 773 | } 774 | 775 | .view-action:not(.page-header-button) { 776 | display: none; 777 | } 778 | 779 | .view-action.page-header-button { 780 | color: var(--on-surface-variant); 781 | margin-left: 12px; 782 | margin-right: 12px; 783 | } 784 | 785 | .view-action:not(.page-header-button) { 786 | display: none; 787 | } 788 | 789 | /* Floating Action Button (FAB)*/ 790 | body:not(.custom-page-header) { 791 | /* Advanced Mobile Toolbar Mode */ 792 | /* Shrink FAB on small displays */ 793 | } 794 | body:not(.custom-page-header) .view-action:nth-last-of-type(4) { 795 | color: var(--on-tertiary-container); 796 | background-color: var(--tertiary-container); 797 | display: flex; 798 | padding: 0px; 799 | margin: 0; 800 | margin: 16px; 801 | position: absolute; 802 | transform: translate(-50%, -50%); 803 | left: calc(100% - 44px - 16px); 804 | justify-content: center; 805 | align-items: center; 806 | width: 56px; 807 | height: 56px; 808 | border-radius: var(--medium-radius); 809 | box-shadow: 0.8px 0.8px 4px rgba(0, 0, 0, 0.028), 2.7px 2.7px 13.4px rgba(0, 0, 0, 0.042), 12px 12px 60px rgba(0, 0, 0, 0.07); 810 | top: calc(100vh - 48px - 44px - 16px); 811 | } 812 | body:not(.custom-page-header) .view-action:nth-last-of-type(4) > *:first-child { 813 | width: 24px; 814 | height: 24px; 815 | } 816 | body:not(.custom-page-header) body:not(:not(.advanced-toolbar-mode)) .view-action:nth-of-type(4) { 817 | top: calc(90vh - var(--at-button-height) * var(--at-row-count)); 818 | } 819 | @media screen and (max-height: 400px) { 820 | body:not(.custom-page-header) .view-action:nth-of-type(4) { 821 | transform: scale(0.8) translate(-50%, -50%); 822 | } 823 | } 824 | 825 | body:not(:not(.custom-page-header)) { 826 | /* Advanced Mobile Toolbar Mode */ 827 | /* Shrink FAB on small displays */ 828 | } 829 | body:not(:not(.custom-page-header)) .view-action.page-header-button:first-of-type { 830 | color: var(--on-tertiary-container); 831 | background-color: var(--tertiary-container); 832 | display: flex; 833 | padding: 0px; 834 | margin: 0; 835 | margin: 16px; 836 | position: absolute; 837 | transform: translate(-50%, -50%); 838 | left: calc(100% - 44px - 16px); 839 | justify-content: center; 840 | align-items: center; 841 | width: 56px; 842 | height: 56px; 843 | border-radius: var(--medium-radius); 844 | box-shadow: 0.8px 0.8px 4px rgba(0, 0, 0, 0.028), 2.7px 2.7px 13.4px rgba(0, 0, 0, 0.042), 12px 12px 60px rgba(0, 0, 0, 0.07); 845 | top: calc(100vh - 48px - 44px - 16px); 846 | } 847 | body:not(:not(.custom-page-header)) .view-action.page-header-button:first-of-type > *:first-child { 848 | width: 24px; 849 | height: 24px; 850 | } 851 | body:not(:not(.custom-page-header)) body:not(:not(.advanced-toolbar-mode)) .view-action:nth-last-of-type(5) { 852 | top: calc(90vh - var(--at-button-height) * var(--at-row-count)); 853 | } 854 | @media screen and (max-height: 400px) { 855 | body:not(:not(.custom-page-header)) .view-action:nth-last-of-type(5) { 856 | transform: scale(0.8) translate(-50%, -50%); 857 | } 858 | } 859 | 860 | /* Pencil SVG */ 861 | svg.pencil > path { 862 | display: none; 863 | } 864 | 865 | svg.pencil { 866 | background-color: currentColor; 867 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:50px;height:50px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M14.06,9L15,9.94L5.92,19H5V18.08L14.06,9M17.66,3C17.41,3 17.15,3.1 16.96,3.29L15.13,5.12L18.88,8.87L20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18.17,3.09 17.92,3 17.66,3M14.06,6.19L3,17.25V21H6.75L17.81,9.94L14.06,6.19Z' /%3E%3C/svg%3E"); 868 | mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:50px;height:50px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M14.06,9L15,9.94L5.92,19H5V18.08L14.06,9M17.66,3C17.41,3 17.15,3.1 16.96,3.29L15.13,5.12L18.88,8.87L20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18.17,3.09 17.92,3 17.66,3M14.06,6.19L3,17.25V21H6.75L17.81,9.94L14.06,6.19Z' /%3E%3C/svg%3E"); 869 | } 870 | 871 | /* -------------- */ 872 | /* Quick Action */ 873 | /* -------------- */ 874 | /* Text input */ 875 | .is-mobile input.prompt-input { 876 | background-color: var(--primary-container); 877 | border-radius: var(--big-radius); 878 | line-height: 1.5rem; 879 | font-size: 1rem; 880 | letter-spacing: 0.009375rem; 881 | font-weight: var(--medium); 882 | color: var(--on-primary-container); 883 | } 884 | .is-mobile input.prompt-input:active, .is-mobile input.prompt-input:focus { 885 | border: 0; 886 | } 887 | .is-mobile input.prompt-input::placeholder { 888 | color: var(--secondary); 889 | } 890 | 891 | /* Selection items */ 892 | .is-mobile .suggestion-item { 893 | border-bottom: 1px solid; 894 | padding-bottom: 10px; 895 | padding-top: 10px; 896 | border-color: var(--surface-variant); 897 | border-radius: 0; 898 | line-height: 1.5rem; 899 | font-size: 1rem; 900 | letter-spacing: 0.009375rem; 901 | font-weight: var(--medium); 902 | } 903 | .is-mobile .suggestion-item .suggestion-prefix { 904 | position: absolute; 905 | top: 0px; 906 | margin-top: 2px; 907 | margin-bottom: 2px; 908 | color: var(--secondary); 909 | line-height: 1rem; 910 | font-size: 0.75rem; 911 | letter-spacing: 0.025rem; 912 | font-weight: var(--medium); 913 | } 914 | .is-mobile .suggestion-item.is-selected { 915 | background-color: var(--surface); 916 | } 917 | 918 | .is-mobile .suggestion-hotkey { 919 | display: none; 920 | } 921 | 922 | .suggestion-highlight { 923 | color: var(--secondary); 924 | } 925 | 926 | /* Height */ 927 | .is-mobile .modal, 928 | .is-mobile .prompt, 929 | .is-mobile .suggestion-container { 930 | height: calc(100% - 100px); 931 | } 932 | 933 | .is-mobile .prompt { 934 | min-width: 100%; 935 | background-color: var(--surface); 936 | } 937 | 938 | .is-mobile .suggestion-container:not(.modal-container) { 939 | height: 200px; 940 | } 941 | 942 | /* Settings */ 943 | /* Back modal */ 944 | .is-mobile .modal-setting-back-button { 945 | background-color: var(--primary-faint); 946 | } 947 | 948 | /* Reduce space between settings */ 949 | .vertical-tab-nav-item { 950 | padding: 0px 6px 10px 24px; 951 | } 952 | 953 | /* Style back */ 954 | .is-mobile .modal-setting-back-button { 955 | border-top-left-radius: var(--big-radius); 956 | border-top-right-radius: var(--big-radius); 957 | } 958 | 959 | /* Style setting headers */ 960 | .vertical-tab-header-group-title { 961 | padding: 6px 6px 6px 26px; 962 | } 963 | 964 | /* Add divider line */ 965 | .vertical-tab-header-group { 966 | border-bottom: 1px solid var(--background-secondary-alt); 967 | } 968 | 969 | .vertical-tab-header-group:last-of-type { 970 | border-bottom: none; 971 | } 972 | 973 | /* Buttons */ 974 | /* Filled button */ 975 | button.mod-cta { 976 | background-color: var(--primary); 977 | color: var(--background-primary); 978 | } 979 | 980 | /* Outlined buttons */ 981 | .modal.mod-settings button:not(.mod-cta):not(.mod-warning), 982 | button:not(.mod-cta):not(.mod-warning), 983 | .is-mobile .empty-state-action:not(:nth-child(2)) { 984 | background-color: transparent; 985 | border: 1px solid var(--text-faint); 986 | color: var(--primary); 987 | } 988 | 989 | .is-mobile button, 990 | .is-mobile .empty-state-action { 991 | font-size: var(--smallest); 992 | border-radius: var(--big-radius); 993 | } 994 | 995 | /* Setting Headers */ 996 | .theme-light .vertical-tab-header-group-title { 997 | color: var(--primary-light); 998 | } 999 | 1000 | .theme-dark .vertical-tab-header-group-title { 1001 | color: var(--primary-dark); 1002 | } 1003 | 1004 | /* Prompts (Quick switcher) */ 1005 | .is-mobile .modal, 1006 | .is-mobile .prompt, 1007 | .is-mobile .suggestion-container { 1008 | border-radius: var(--medium-radius) var(--medium-radius) 0 0; 1009 | padding: 15px 20px; 1010 | } 1011 | 1012 | /* Pulling down */ 1013 | .pull-action.pull-down-action { 1014 | border-radius: 0 0 var(--medium-radius) var(--medium-radius); 1015 | background-color: var(--secondary-container); 1016 | color: var(--on-secondary-container); 1017 | text-transform: none; 1018 | line-height: 1.25rem; 1019 | font-size: 0.875rem; 1020 | letter-spacing: 0.00625rem; 1021 | font-weight: var(--medium); 1022 | } 1023 | 1024 | .pull-action.mod-activated { 1025 | background-color: var(--primary); 1026 | color: var(--on-primary); 1027 | text-transform: none; 1028 | line-height: 1.25rem; 1029 | font-size: 0.875rem; 1030 | letter-spacing: 0.00625rem; 1031 | font-weight: var(--medium); 1032 | } 1033 | 1034 | /* Pulling from the left (navigating back 1035 | Trying to target but it's not these: 1036 | */ 1037 | /* PLUGINS */ 1038 | /* Dataview Tables */ 1039 | .table-view-table > thead > tr > th { 1040 | border-bottom: none !important; 1041 | font-weight: var(--medium); 1042 | font-size: var(--editor-font-size); 1043 | padding: var(--editor-font-size); 1044 | } 1045 | 1046 | tr { 1047 | border-top: 1px solid var(--background-secondary-alt); 1048 | } 1049 | 1050 | /* ------------- */ 1051 | /* # Sidebars */ 1052 | /* ------------- */ 1053 | /* Branding "Obsidian You" */ 1054 | body:not(:not(.branding)) .workspace-drawer-header { 1055 | padding: 10px 20px 0 10px; 1056 | } 1057 | 1058 | body:not(:not(.branding)) .workspace-drawer-header::before { 1059 | content: "Obsidian "; 1060 | margin: 10px 12px 10px 12px; 1061 | font-size: var(--h4); 1062 | color: var(--primary-dark); 1063 | clear: right; 1064 | display: block; 1065 | } 1066 | 1067 | body:not(:not(.branding)) .workspace-drawer-header::after { 1068 | content: "You"; 1069 | margin: 10px; 1070 | font-weight: var(--bold); 1071 | font-size: var(--h4); 1072 | color: var(--secondary); 1073 | transform: translate(-15px, 0px); 1074 | clear: right; 1075 | display: block; 1076 | } 1077 | 1078 | body:not(:not(.branding)) .workspace-drawer-header { 1079 | border-bottom: 1px solid var(--background-secondary-alt); 1080 | } 1081 | 1082 | /* Title of 'File explorer' and the like */ 1083 | .workspace-drawer-active-tab-header { 1084 | margin: 20px -1px 20px 11px; 1085 | } 1086 | 1087 | .workspace-drawer-header-name-text { 1088 | color: var(--text-muted); 1089 | font-size: var(--smaller); 1090 | } 1091 | 1092 | /* Icons */ 1093 | .workspace-drawer-tab-option-item-icon, .workspace-drawer-active-tab-icon { 1094 | color: var(--primary-dark); 1095 | } 1096 | 1097 | /* Search */ 1098 | .workspace-leaf-content[data-type=search] .nav-action-button { 1099 | transform: scale(0.8); 1100 | margin: none; 1101 | padding: none; 1102 | } 1103 | 1104 | /* Suggestions */ 1105 | .is-mobile .suggestion-container.mod-search-suggestion { 1106 | max-height: 40%; 1107 | min-height: 30%; 1108 | min-width: 100%; 1109 | } 1110 | 1111 | /* Top buttons */ 1112 | .is-mobile .workspace-drawer-actions, 1113 | .is-mobile .nav-buttons-container { 1114 | background-color: var(--background-secondary); 1115 | border-radius: var(--big-radius); 1116 | margin: 0 11px 10px; 1117 | } 1118 | 1119 | .is-mobile .workspace-leaf-content[data-type=search] .nav-action-button { 1120 | margin: 0px 2px 2px 0; 1121 | text-align: center; 1122 | height: 36px; 1123 | cursor: var(--cursor); 1124 | } 1125 | 1126 | .nav-action-button { 1127 | color: var(--text-muted); 1128 | transform: scale(0.8); 1129 | padding: 5px 8px 0px 8px; 1130 | margin: 0px 6px 0px 6px; 1131 | } 1132 | 1133 | .workspace-drawer-tab-container > * { 1134 | border-top: none !important; 1135 | } 1136 | 1137 | /* Significantly simplify left and right bars */ 1138 | .nav-folder.mod-root > .nav-file-title, 1139 | .nav-folder.mod-root > .nav-folder-title, 1140 | .workspace-drawer-header-name, 1141 | .workspace-drawer-header-icon, 1142 | .workspace-drawer-header-left { 1143 | display: none; 1144 | } 1145 | 1146 | /* Right sidebar */ 1147 | .workspace-drawer.mod-right { 1148 | border: none; 1149 | } 1150 | 1151 | .backlink-pane, 1152 | .outgoing-link-pane { 1153 | padding: 0 11px; 1154 | } 1155 | 1156 | /* Backlink counts */ 1157 | .tree-item-flair-outer { 1158 | display: flex; 1159 | justify-content: center; 1160 | align-items: center; 1161 | } 1162 | 1163 | /* Left sidebar */ 1164 | .workspace-drawer.mod-left { 1165 | border-right: 1px var(--background-primary) solid !important; 1166 | } 1167 | 1168 | /* Ribbon */ 1169 | .workspace-drawer-ribbon { 1170 | background-color: var(--background-primary); 1171 | } 1172 | 1173 | .workspace-drawer-tab-option-item { 1174 | margin-left: 12px; 1175 | margin-right: 12px; 1176 | } 1177 | 1178 | .workspace-drawer-tab-option-item-title, 1179 | .workspace-drawer-active-tab-title { 1180 | color: var(--text-normal); 1181 | font-size: var(--regular); 1182 | } 1183 | 1184 | .workspace-drawer-tab-container > * { 1185 | border-top: 1px solid var(--background-secondary-alt); 1186 | } 1187 | 1188 | /* ------------- */ 1189 | /* # File explorer */ 1190 | /* ------------- */ 1191 | /* Folder */ 1192 | .nav-folder-title-content { 1193 | padding-left: 0px; 1194 | } 1195 | 1196 | .nav-file-title-content, 1197 | .nav-folder-title-content { 1198 | font-size: var(--smaller); 1199 | padding: 0px 0px; 1200 | font-weight: var(--medium); 1201 | } 1202 | 1203 | /* Files */ 1204 | .is-mobile .nav-file-title, 1205 | .is-mobile .tag-container { 1206 | padding: 1px 11px 0 11px; 1207 | color: var(--text-muted); 1208 | font-size: var(--smaller); 1209 | font-weight: var(--light); 1210 | } 1211 | 1212 | /* Highlighted file or backlink */ 1213 | .nav-file-title.is-active, 1214 | .tree-item-self.is-clickable:hover, 1215 | .nav-folder-title.is-active, 1216 | body:not(.is-grabbing) .nav-file-title:hover, 1217 | body:not(.is-grabbing) .nav-folder-title:hover { 1218 | background-color: var(--primary-faint); 1219 | color: var(--primary-dark); 1220 | border-radius: var(--small-radius); 1221 | } 1222 | 1223 | .markdown-source-view .markdown-embed, .markdown-source-view .file-embed { 1224 | border: 2px solid var(--surface-variant); 1225 | border-radius: var(--small-radius); 1226 | } 1227 | 1228 | /* Embeds */ 1229 | /* Naked Embeds (modified from death_au (https://forum.obsidian.md/t/naked-embeds-css-tweak/72) */ 1230 | .markdown-embed-title { 1231 | display: none; 1232 | } 1233 | 1234 | .markdown-preview-view .markdown-embed-content > :first-child { 1235 | margin-top: 0; 1236 | } 1237 | 1238 | .markdown-preview-view .markdown-embed-content > :last-child { 1239 | margin-bottom: 0; 1240 | } 1241 | 1242 | .markdown-preview-view .markdown-embed { 1243 | border: none; 1244 | padding: 0; 1245 | margin: 0; 1246 | } 1247 | 1248 | /* the link on the top right corner*/ 1249 | .markdown-embed-link { 1250 | color: var(--secondary) !important; 1251 | top: 15px; 1252 | } 1253 | 1254 | .markdown-embed-link:hover { 1255 | color: var(--text-accent) !important; 1256 | } 1257 | 1258 | /* Scroll bars */ 1259 | .is-mobile ::-webkit-scrollbar { 1260 | display: none; 1261 | } 1262 | 1263 | /* Inspired by Minimal by kepano: https://github.com/kepano/obsidian-minimal/blob/master/obsidian.css */ 1264 | .BC-trail { 1265 | margin-top: 5px !important; 1266 | line-height: 1rem; 1267 | font-size: 0.75rem; 1268 | letter-spacing: 0.03125rem; 1269 | font-weight: var(--medium); 1270 | color: var(--secondary); 1271 | } 1272 | 1273 | .timer { 1274 | font-style: italic; 1275 | } 1276 | 1277 | .timer::before { 1278 | content: "⏱ "; 1279 | font-style: normal; 1280 | } 1281 | 1282 | .cm-metadata, 1283 | .cm-metadata-key { 1284 | line-height: 1.25rem; 1285 | font-size: 0.875rem; 1286 | letter-spacing: 0.015625rem; 1287 | font-weight: var(--medium); 1288 | color: var(--secondary); 1289 | font-family: var(--font-monospace); 1290 | } 1291 | 1292 | .workspace-leaf-content[data-type=cook] .cm-formatting { 1293 | color: var(--surface-variant) !important; 1294 | } 1295 | 1296 | /* Style Settings */ 1297 | /* @settings 1298 | 1299 | name: Obsidian You 1300 | id: title 1301 | settings: 1302 | - 1303 | id: font-header 1304 | title: Fonts 1305 | type: heading 1306 | level: 2 1307 | collapsed: true 1308 | - 1309 | id: font-preview 1310 | title: Preview Font 1311 | description: Used in preview mode 1312 | type: variable-text 1313 | default: Roboto, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif; 1314 | - 1315 | id: font-editor 1316 | title: Editor Font 1317 | description: Used in editor mode 1318 | type: variable-text 1319 | default: Roboto,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Microsoft YaHei Light",sans-serif; 1320 | - 1321 | id: font-monospace 1322 | title: Monospace Font 1323 | description: Used in code 1324 | type: variable-text 1325 | default: Menlo,"Roboto Mono",monospace,SFMono-Regular,Consolas; 1326 | - 1327 | id: plugin-header 1328 | title: Plugin settings 1329 | type: heading 1330 | level: 2 1331 | collapsed: true 1332 | - 1333 | id: custom-page-header 1334 | title: Customizable Page Header 1335 | description: Uses the first Customizable Page Header icon for the FAB 1336 | type: class-toggle 1337 | - 1338 | id: advanced-toolbar-mode 1339 | title: Advanced toolbar mode 1340 | description: Adapts automatically to avanced mobile toolbar 1341 | type: class-toggle 1342 | - 1343 | id: other-header 1344 | title: Misc settings 1345 | type: heading 1346 | level: 2 1347 | collapsed: true 1348 | - 1349 | id: branding 1350 | title: Obsidian You branding 1351 | description: Toggles contrasting branding in the sidebars 1352 | type: class-toggle 1353 | default: true 1354 | */ 1355 | 1356 | /*# sourceMappingURL=obsidian.css.map */ 1357 | -------------------------------------------------------------------------------- /obsidian.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["scss/_vars.scss","scss/_body.scss","scss/_titlebar.scss","scss/_floating-action-button.scss","scss/_settingsmodals.scss","scss/_sidebars.scss","scss/_embeds.scss","scss/_scrollbar.scss","scss/_plugins.scss","scss/_style-settings.scss"],"names":[],"mappings":";AAAA;AACE;EACA;AAAA;AAAA;EAGA;EACA;;;AAGF;AACE;AACA;AACA;AAGA;EACA;AAAqB;EACrB;AAAqB;EAGrB;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;AACA;AACA;EAGF;EACA;EACA;EACA;EACA;;;AAGA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAGA;AAAA;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;AAAA;AAME;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;;;AAIF;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAGA;AAAA;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;AAAA;EAOE;EACA;AAEE;EACF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACjJF;EACE;;;AAGF;AAAA;AAAA;EAtKE;EACA;EACA;;;AA0KF;AAAA;AAAA;EAtKE;EACA;EACA;;;AA0KF;AAAA;AAAA;EAtKE;EACA;EACA;;;AA0KF;AAAA;AAAA;EAtKE;EACA;EACA;;;AA0KF;AAAA;AAAA;EAtKE;EACA;EACA;;;AA0KF;AAAA;AAAA;EAtKE;EACA;EACA;EACA;;;AAyKF;AACA;AACA;AAIA;AAAA;AAAA;EA3KE;EACA;EACA;EACA;;;AA+KF;AAAA;EAEE;;;AAGF;AACA;EACE;;;AAGF;EACE;;;AAGF;AACA;EACE;;;AAIF;AAAA;EAGE;;;AAGF;AAgBA;AACA;AAAA;EA7NE;EACA;EACA;EACA;EA6NA;EACA;;;AAEF;EACE;;;AAEF;AACA;AAAA;EAEE;;;AAGF;AACA;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;;;AAGF;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;EAhPE;EACA;EACA;EACA;EAoPA;EACA;;;AAIF;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EA5PA;EACA;EACA;EACA;EACA;EA0PA;EACA;;AAEA;EACE;;AAIJ;EAIE;;AAHA;EACE;;AAKJ;EACE;EACA;;AAEF;EACE;EACA;;AAEA;EACE;;;AAMJ;EApRE;EACA;EACA;EACA;;;AAsRF;AACA;AACA;AAAA;AAAA;AAAA;EAjTE;EACA;EACA;EACA;EAmTA;EACA;EACA;EACA;;;AAGF;EACE;EA7TA;EACA;EACA;EACA;EA4TA;EACA;EACA;;;AAIF;AAAA;AAAA;EAGE;EACA;;;AAGF;AAEA;EAEI;EACA;EACA,QAHO;EAIP,OAJO;EAKP;EACA;EACA;;;AAGJ;EACE;EAjWA;EACA;EACA;EACA;EAgWA;EACA;;;AAKE;EACA;EA9TF;EACA;EAxBA;EACA;EACA;EACA;EACA;EAsBA;EACA;EACA;EACA;EACA;EACA;EACA;EAuBA;EACA;EACA;;AAtBE;EAEA;EACA,QAFO;EAGP,OAHO;EAIP;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;AAsSF;EACE;EA5RF;EACA;EAhEA;EACA;EACA;EACA;EACA;EA8DA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAsBA;EACA;EACA;;AArBE;EAEA;EACA,QAFO;EAGP,OAHO;EAIP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAmQF;EAjSA;EACA;EAhEA;EACA;EACA;EACA;EACA;EA8DA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAsBA;EACA;EACA;;AArBE;EAEA;EACA,QAFO;EAGP,OAHO;EAIP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAyQJ;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACE;EACA;;;AAGJ;AACA;EACE;EACA;EACA;;;AAGF;EACE;;AAEA;EACE;;;AAIJ;AACA;AAEA;AACA;EAtZE;EACA;EACA;EACA;EAqZA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EAnaE;EACA;EACA;EACA;EAkaA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACA;EACA;EACA;EACA;;AAGA;EACA;EACA;EACA;EACA;;;AAIF;AACA;AACA;AAEA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACjfA;AACA;AACA;AAEE;AAAA;EAIE;EAIA;EACA;EACA;EACA;;;AAGF;AACA;AACA;EACE;;;AAGF;EACE;EACA;;;AAGF;EDLA;EACA;EACA;ECKE;;;AAEF;EACA;EACA;;;AAGA;EACE;EACA;EACA;;;AAGJ;EACE;;;AAGF;EACE;EACA;EACA;;;AClBF;EACE;;;AAIF;AAEA;AAKE;AAIA;;AARA;EAzCA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;;AAKA;EACE;EACA;;AAkBF;EACE;;AAGF;EACE;IACE;;;;AAMN;AAIE;AAIA;;AAPA;EA3DA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;;AAKA;EACE;EACA;;AAmCF;EACE;;AAGF;EACE;IACE;;;;AAKN;AACA;EACE;;;AAGF;EACE;EACA;EACA;;;AClFF;AACA;AACA;AAEA;AACA;EACE;EACA;EH8BA;EACA;EACA;EACA;EG/BA;;AAEA;EACE;;AAGF;EACE;;;AAIJ;AACA;EACE;EACA;EACA;EACA;EACA;EHWA;EACA;EACA;EACA;;AGVF;EAEI;EACA;EACA;EACA;EACA;EHeF;EACA;EACA;EACA;;AGXA;EACA;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;AACA;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;;;AAIF;EACA;;;AAGA;AACA;AACA;EACE;;;AAIF;AACA;EACE;;;AAGF;AACA;EACE;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;;;AAEF;EACE;;;AAGF;AAEA;AACA;EACE;EACA;;;AAGF;AACA;AAAA;AAAA;EAGI;EACA;EACA;;;AAGJ;AAAA;EAEE;EACA;;;AAGF;AACA;EACE;;;AAEF;EACE;;;AAGF;AACA;AAAA;AAAA;EAGE;EACA;;;AAGF;AAEE;EACE;EACA;EACA;EH1FF;EACA;EACA;EACA;EACA;;;AG0FF;EACE;EACA;EHhGA;EACA;EACA;EACA;EACA;;;AGgGF;AAAA;AAAA;AAIA;AACA;AACA;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AC7KF;AACA;AACA;AAEA;AACA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AACA;EACE;;;AAGF;EACE;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;AACA;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AACA;AAAA;AAAA;AAAA;AAAA;EAKE;;;AAGF;AACA;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;;;AAGF;AACA;AACA;AACA;AACA;EACE;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;AACA;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;AACA;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;EACA;;;AC3KF;EACE;EACA;;;AAGF;AACA;AACA;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;EACE;;;AC/BF;AAEA;EACI;;;AAGJ;ACAA;EACI;EP6DF;EACA;EACA;EACA;EO9DE;;;AAqBJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;AAAA;EPOE;EACA;EACA;EACA;EOPE;EACA;;;AAGJ;EACI;;;AC/CJ;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","file":"obsidian.css"} -------------------------------------------------------------------------------- /scss/_body.scss: -------------------------------------------------------------------------------- 1 | // MIXINS 2 | @mixin display-s { 3 | line-height: 2.75rem; 4 | font-size: var(--h1); 5 | font-weight: var(--regular); 6 | } 7 | 8 | @mixin headline-l { 9 | line-height: 2.5rem; 10 | font-size: var(--h2); 11 | font-weight: var(--regular); 12 | } 13 | 14 | @mixin headline-m { 15 | line-height: 2.25rem; 16 | font-size: var(--h3); 17 | font-weight: var(--regular); 18 | } 19 | 20 | @mixin headline-s { 21 | line-height: 2rem; 22 | font-size: var(--h4); 23 | font-weight: var(--regular); 24 | } 25 | 26 | @mixin title-l { 27 | line-height: 1.75rem; 28 | font-size: var(--h5); 29 | font-weight: var(--regular); 30 | } 31 | 32 | @mixin title-m { 33 | line-height: 1.5rem; 34 | font-size: var(--h6); 35 | letter-spacing: .009375rem; 36 | font-weight: var(--medium); 37 | } 38 | 39 | @mixin body-large { 40 | line-height: 1.5rem; 41 | font-size: 1rem; 42 | letter-spacing: .009375rem; 43 | font-weight: var(--medium); 44 | } 45 | 46 | @mixin body-medium { 47 | line-height: 1.25rem; 48 | font-size: .875rem; 49 | letter-spacing: .015625rem; 50 | font-weight: var(--medium); 51 | } 52 | 53 | @mixin body-small { 54 | line-height: 1rem; 55 | font-size: .75rem; 56 | letter-spacing: .025rem; 57 | font-weight: var(--medium); 58 | } 59 | 60 | @mixin label-large { 61 | text-transform: none; 62 | line-height: 1.25rem; 63 | font-size: .875rem; 64 | letter-spacing: .00625rem; 65 | font-weight: var(--medium); 66 | } 67 | 68 | @mixin label-medium { 69 | line-height: 1rem; 70 | font-size: .75rem; 71 | letter-spacing: .03125rem; 72 | font-weight: var(--medium); 73 | } 74 | 75 | @mixin label-small { 76 | line-height: .375rem; 77 | font-size: .6875rem; 78 | letter-spacing: .03125rem; 79 | font-weight: var(--medium); 80 | } 81 | 82 | // Buttons 83 | @mixin button-filled($icon: "") { 84 | background-color: var(--primary); 85 | color: var(--on-primary); 86 | @include label-large(); 87 | height: 40px; 88 | border-radius: 1.25rem; 89 | padding-top: 10px; 90 | padding-left: 1.5rem; 91 | padding-right: 1.5rem; 92 | display: block; 93 | margin: auto; 94 | 95 | @if $icon != "" { 96 | &::before { 97 | $size: 1.125rem; 98 | content: ''; 99 | height: $size; 100 | width: $size; 101 | background-size: $size $size; 102 | background-position: center; 103 | background-color: var(--on-primary); 104 | display: inline-block; 105 | margin-top: -4px; 106 | 107 | mask: url($icon); 108 | -webkit-mask-image: url($icon); 109 | mask-image: url($icon); 110 | -webkit-mask-size: cover; 111 | mask-size: cover; 112 | transform: translateY(4px); 113 | margin-right: 8px; 114 | 115 | } 116 | padding-left: 16px; 117 | padding-right: 24px; 118 | vertical-align: middle; 119 | } 120 | 121 | } 122 | 123 | @mixin button-outline($icon: "") { 124 | background-color: inherit; 125 | color: var(--primary); 126 | @include label-large(); 127 | height: 40px; 128 | border-radius: 1.25rem; 129 | border-width: .0625rem; 130 | border-color: var(--outline); 131 | padding-top: 9px; 132 | padding-left: 1.5rem; 133 | padding-right: 1.5rem; 134 | display: block; 135 | margin: auto; 136 | 137 | @if $icon != "" { 138 | &::before { 139 | $size: 1.125rem; 140 | content: ''; 141 | height: $size; 142 | width: $size; 143 | background-size: $size $size; 144 | background-position: center; 145 | background-color: var(--primary); 146 | display: inline-block; 147 | margin-top: -4px; 148 | mask: url($icon); 149 | -webkit-mask-image: url($icon); 150 | mask-image: url($icon); 151 | -webkit-mask-size: cover; 152 | mask-size: cover; 153 | transform: translateY(4px); 154 | margin-right: 8px; 155 | 156 | } 157 | padding-left: 16px; 158 | padding-right: 24px; 159 | vertical-align: middle; 160 | } 161 | 162 | } 163 | 164 | // Headers 165 | .cm-formatting-header { 166 | color: var(--surface-variant) !important; 167 | } 168 | 169 | .markdown-reading-view h1, 170 | .cm-s-obsidian .cm-header-1, 171 | .mod-cm6 .cm-editor .HyperMD-header-1 { 172 | @include display-s(); 173 | } 174 | 175 | .markdown-reading-view h2, 176 | .cm-s-obsidian .cm-header-2, 177 | .mod-cm6 .cm-editor .HyperMD-header-2 { 178 | @include headline-l(); 179 | } 180 | 181 | .markdown-reading-view h3, 182 | .cm-s-obsidian .cm-header-3, 183 | .mod-cm6 .cm-editor .HyperMD-header-3 { 184 | @include headline-m(); 185 | } 186 | 187 | .markdown-reading-view h4, 188 | .cm-s-obsidian .cm-header-4, 189 | .mod-cm6 .cm-editor .HyperMD-header-4 { 190 | @include headline-s(); 191 | } 192 | 193 | .markdown-reading-view h5, 194 | .cm-s-obsidian .cm-header-5, 195 | .mod-cm6 .cm-editor .HyperMD-header-5 { 196 | @include title-l(); 197 | } 198 | 199 | .markdown-reading-view h6, 200 | .cm-s-obsidian .cm-header-6, 201 | .mod-cm6 .cm-editor .HyperMD-header-6 { 202 | @include title-m(); 203 | } 204 | 205 | /* ------------- */ 206 | /* # Body */ 207 | /* ------------- */ 208 | 209 | 210 | // Body Text 211 | .markdown-preview-view, 212 | .markdown-source-view, 213 | .cm-line { 214 | @include body-large(); 215 | } 216 | 217 | // Bold text 218 | strong, 219 | .cm-s-obsidian .cm-strong { 220 | font-weight: var(--bold); 221 | } 222 | 223 | /* Checkboxes */ 224 | input[type="checkbox"]:checked { 225 | filter: grayscale(100%); 226 | } 227 | 228 | .theme-dark .task-list-item-checkbox { 229 | filter: invert(1); 230 | } 231 | 232 | /* Images */ 233 | img { 234 | border-radius: var(--small-radius); 235 | } 236 | 237 | // Lists 238 | span.cm-formatting.cm-formatting-list.cm-formatting-list-ul.cm-list-1, 239 | span.cm-formatting.cm-formatting-list.cm-formatting-list-ol.cm-list-1 240 | { 241 | color: var(--secondary); 242 | } 243 | 244 | /* Callout boxes from Vileplume: https://github.com/hungsu/vileplume-obsidian */ 245 | // .markdown-preview-view blockquote, 246 | // .markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote { 247 | // @include body-medium(); 248 | // border-radius: var(--big-radius); 249 | // border: 1px solid rgba(255, 255, 255, 0.03); 250 | // padding: 10px 20px; 251 | // position: relative; 252 | // box-shadow: 0.9px 0.9px 3.6px rgba(0, 0, 0, 0.017), 253 | // 2.5px 2.4px 10px rgba(0, 0, 0, 0.025), 6px 5.7px 24.1px rgba(0, 0, 0, 0.033), 254 | // 20px 19px 80px rgba(0, 0, 0, 0.05); 255 | 256 | // background-color: var(--secondary-container) !important; 257 | // color: var(--on-secondary-container); 258 | // } 259 | 260 | /* Blockquotes */ 261 | .markdown-preview-view blockquote, 262 | .markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote { 263 | @include body-large(); 264 | border-left: 3px solid var(--tertiary); 265 | background-color: var(--surface); 266 | } 267 | .cm-s-obsidian span.cm-quote { 268 | color: var(--tertiary); 269 | } 270 | /* Lists */ 271 | ul > li::marker, 272 | ol > li::marker { 273 | color: var(--text-muted); 274 | } 275 | 276 | /* Internal links */ 277 | .markdown-preview-view .internal-link, 278 | .cm-s-obsidian .cm-formatting-link, 279 | .cm-s-obsidian span.cm-link, 280 | .cm-s-obsidian span.cm-hmd-internal-link, 281 | .markdown-source-view.mod-cm6 .cm-underline { 282 | text-decoration: none; 283 | font-weight: var(--medium); 284 | } 285 | 286 | /* Frontmatter Edit Mode */ 287 | .markdown-preview-section .frontmatter code, 288 | .frontmatter .token, 289 | .cm-s-obsidian .cm-hmd-frontmatter, 290 | pre.frontmatter[class*="language-yaml"], 291 | span.cm-hmd-frontmatter, 292 | span.cm-def.cm-hmd-frontmatter { 293 | @include body-medium(); 294 | color: var(--secondary); 295 | font-family: var(--default-font); 296 | } 297 | 298 | 299 | /* Frontmatter / Metadata container */ 300 | // To-Do: Improve performance by using opacity for animation 301 | .frontmatter-container { 302 | border: 1px solid var(--surface-variant); 303 | background-color: var(--surface); 304 | transition: border 250ms ease-in; 305 | 306 | &.is-collapsed { 307 | border: 0; 308 | color: var(--on-surface); 309 | background-color: var(--surface); 310 | transition: border 450ms ease-out; 311 | } 312 | 313 | .frontmatter-container-header { 314 | @include label-large(); 315 | color: var(--secondary); 316 | border: none; 317 | 318 | &:hover { 319 | color: var(--secondary); 320 | } 321 | } 322 | 323 | .frontmatter-collapse-indicator { 324 | &:hover { 325 | color: var(--secondary); 326 | } 327 | color: var(--secondary); 328 | } 329 | 330 | .tag { 331 | background-color: var(--secondary-container); 332 | color: var(--on-secondary-container); 333 | } 334 | .frontmatter-alias { 335 | background-color: var(--secondary-container); 336 | color: var(--on-secondary-container); 337 | 338 | &-icon { 339 | color: var(--on-secondary-container); 340 | 341 | } 342 | } 343 | } 344 | 345 | .frontmatter-section { 346 | @include label-medium(); 347 | } 348 | 349 | 350 | /* Code blocks */ 351 | /* Inline */ 352 | .markdown-preview-view code, 353 | .cm-s-obsidian span.cm-inline-code, 354 | .cm-s-obsidian span.cm-inline-code:not(.cm-formatting):not(.cm-hmd-indented-code):not(.obsidian-search-match-highlight), 355 | .cm-s-obsidian .HyperMD-codeblock { 356 | @include body-medium(); 357 | background-color: var(--surface-variant); 358 | color: var(--on-surface-variant); 359 | font-family: var(--font-monospace); 360 | border-radius: 0; 361 | } 362 | // Blocks 363 | .markdown-preview-view pre { 364 | border-radius: var(--small-radius); 365 | @include body-medium(); 366 | background-color: var(--surface-variant); 367 | color: var(--on-surface-variant); 368 | font-family: var(--font-monospace); 369 | } 370 | 371 | // Code Block in Live Preview 372 | .cm-s-obsidian div.HyperMD-codeblock-begin-bg, 373 | .cm-s-obsidian div.HyperMD-codeblock-end-bg, 374 | .cm-s-obsidian div.HyperMD-codeblock-bg { 375 | background-color: var(--surface-variant); 376 | border: none; 377 | } 378 | 379 | /* Empty State screen */ 380 | // SVG source: https://undraw.co/ 381 | .empty-state-title::before { 382 | $size: 45vw; 383 | content: ' '; 384 | background-size: $size $size; 385 | height: $size; 386 | width: $size; 387 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='Layer 1' width='578.0013' height='621.92557' viewBox='0 0 578.0013 621.92557' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M677.64241,491.89724l-249.84894,64.339a33.03735,33.03735,0,0,1-40.18683-23.728L312.04574,239.081a33.03734,33.03734,0,0,1,23.728-40.18683l232.44363-59.85691L627.712,165.67105l73.65843,286.03936A33.03734,33.03734,0,0,1,677.64241,491.89724Z' transform='translate(-310.99935 -139.03722)' fill='%23f2f2f2'/%3E%3Cpath d='M338.14273,208.094a23.52653,23.52653,0,0,0-16.89723,28.61789l75.5609,293.42725a23.52654,23.52654,0,0,0,28.6179,16.89723l249.84894-64.339a23.52654,23.52654,0,0,0,16.89723-28.61789l-72.51713-281.6073-52.285-23.40643Z' transform='translate(-310.99935 -139.03722)' fill='%23fff'/%3E%3Cpath d='M627.07719,167.18472l-38.66749,9.95733a10.99077,10.99077,0,0,1-13.38436-7.9027L567.671,140.68008a.68692.68692,0,0,1,.944-.7991l58.56966,26.01073A.68692.68692,0,0,1,627.07719,167.18472Z' transform='translate(-310.99935 -139.03722)' fill='%23f2f2f2'/%3E%3Cpath d='M606.73438,417.76533,492.98165,447.058a5.49538,5.49538,0,0,1-2.74083-10.64353L603.99355,407.1218a5.49538,5.49538,0,1,1,2.74083,10.64353Z' transform='translate(-310.99935 -139.03722)' fill='%23ccc'/%3E%3Cpath d='M633.31182,430.07333l-135.705,34.9456A5.49538,5.49538,0,0,1,494.866,454.3754l135.705-34.94561a5.49539,5.49539,0,0,1,2.74084,10.64354Z' transform='translate(-310.99935 -139.03722)' fill='%23ccc'/%3E%3Ccircle id='a597741b-ffcf-4aba-98b0-6652ef5d57c9' data-name='Ellipse 44' cx='135.55495' cy='323.87767' r='19.42315' fill='%23e6e6e6'/%3E%3Cpath d='M594.63919,366.93361,443.56425,405.8227A17.01917,17.01917,0,0,1,422.863,393.59731l-31.6597-122.9905a17.01916,17.01916,0,0,1,12.22538-20.7012l151.075-38.88909a17.01916,17.01916,0,0,1,20.7012,12.22539l31.65971,122.9905A17.01917,17.01917,0,0,1,594.63919,366.93361Z' transform='translate(-310.99935 -139.03722)' fill='%23fff'/%3E%3Cpath d='M594.63919,366.93361,443.56425,405.8227A17.01917,17.01917,0,0,1,422.863,393.59731l-31.6597-122.9905a17.01916,17.01916,0,0,1,12.22538-20.7012l151.075-38.88909a17.01916,17.01916,0,0,1,20.7012,12.22539l31.65971,122.9905A17.01917,17.01917,0,0,1,594.63919,366.93361ZM403.9273,251.84246a15.017,15.017,0,0,0-10.7871,18.26578l31.6597,122.9905a15.017,15.017,0,0,0,18.26577,10.7871l151.075-38.88908a15.017,15.017,0,0,0,10.7871-18.26578L573.268,223.74048a15.017,15.017,0,0,0-18.26578-10.7871Z' transform='translate(-310.99935 -139.03722)' fill='%23e6e6e6'/%3E%3Cpath id='b056fd3f-f1a0-44f0-b006-deff0bee637d-685' data-name='Path 411' d='M546.83934,252.37075l-76.24555,19.62681a2.73087,2.73087,0,0,1-3.30848-1.71854,2.63064,2.63064,0,0,1,1.85283-3.33925l77.61329-19.97889c3.13521,1.58858,2.31023,4.83781.087,5.41011Z' transform='translate(-310.99935 -139.03722)' fill='%23f2f2f2'/%3E%3Cpath id='f1ea6668-a825-428d-96fe-a2c4e1b5a672-686' data-name='Path 412' d='M550.282,265.74474l-76.24555,19.62681A2.73089,2.73089,0,0,1,470.728,283.653a2.63065,2.63065,0,0,1,1.85284-3.33925l77.61329-19.97889c3.13521,1.58858,2.31022,4.83781.087,5.41011Z' transform='translate(-310.99935 -139.03722)' fill='%23f2f2f2'/%3E%3Cpath id='ee9aa382-a9c9-40d0-8ed3-22ec2dd616d6-687' data-name='Path 413' d='M459.51412,297.22917l-23.2694,5.98992a2.962,2.962,0,0,1-3.60325-2.12795l-7.06858-27.45979a2.962,2.962,0,0,1,2.12794-3.60325l23.2694-5.98991a2.963,2.963,0,0,1,3.60325,2.12795l7.06859,27.45982a2.962,2.962,0,0,1-2.12795,3.60324Z' transform='translate(-310.99935 -139.03722)' fill='%23e6e6e6'/%3E%3Cpath id='be954d2b-d8b8-4d26-80a0-a319e99a4b10-688' data-name='Path 414' d='M557.10914,293.18514,440.74446,323.13925a2.73087,2.73087,0,0,1-3.30847-1.71854,2.63062,2.63062,0,0,1,1.85284-3.33925L557.02218,287.775c3.13521,1.58859,2.31022,4.83781.087,5.41012Z' transform='translate(-310.99935 -139.03722)' fill='%23f2f2f2'/%3E%3Cpath id='baaae9e4-1b4d-40c2-8a9d-f2abb078b489-689' data-name='Path 415' d='M560.55283,306.563,444.18814,336.51715a2.73086,2.73086,0,0,1-3.30846-1.71854,2.63061,2.63061,0,0,1,1.85283-3.33926l117.73335-30.30643c3.13521,1.58858,2.31022,4.83781.087,5.41011Z' transform='translate(-310.99935 -139.03722)' fill='%23f2f2f2'/%3E%3Cpath id='a91bf4c9-37f6-4391-92ed-1882bd0ce21c-690' data-name='Path 416' d='M563.99426,319.93218,447.62957,349.8863a2.73086,2.73086,0,0,1-3.30846-1.71854,2.63061,2.63061,0,0,1,1.85283-3.33926l117.73335-30.30643c3.13521,1.58858,2.31023,4.83781.087,5.41011Z' transform='translate(-310.99935 -139.03722)' fill='%23f2f2f2'/%3E%3Cpath id='efb98e07-468b-4c85-9a64-ee4cc5493d6f-691' data-name='Path 417' d='M567.43768,333.30908,451.073,363.2632a2.73087,2.73087,0,0,1-3.30847-1.71854,2.63063,2.63063,0,0,1,1.85284-3.33926L567.35072,327.899c3.13521,1.58858,2.31022,4.83781.087,5.41011Z' transform='translate(-310.99935 -139.03722)' fill='%23f2f2f2'/%3E%3Cpath id='aeb1db98-32e5-40b8-ab89-fdad6a3263dc-692' data-name='Path 418' d='M570.87937,346.67924,454.51469,376.63336a2.73088,2.73088,0,0,1-3.30847-1.71855,2.63062,2.63062,0,0,1,1.85284-3.33925l117.73335-30.30643c3.13521,1.58858,2.31022,4.83781.087,5.41011Z' transform='translate(-310.99935 -139.03722)' fill='%23f2f2f2'/%3E%3Cpath id='be265de5-288f-49a7-867d-c42e7cdbf4db-693' data-name='Path 395' d='M447.98728,469.72335a2.01449,2.01449,0,0,1-1.27407-.08782l-.02505-.01034L441.3969,467.382a2.02852,2.02852,0,1,1,1.58747-3.73356l3.42865,1.45835,4.49293-10.56929a2.02766,2.02766,0,0,1,2.65942-1.07259l.00068.00028-.027.06912.02812-.06941a2.03011,2.03011,0,0,1,1.0723,2.66008l-5.28586,12.42716a2.02886,2.02886,0,0,1-1.36522,1.16845Z' transform='translate(-310.99935 -139.03722)' fill='%23fff'/%3E%3Cpath d='M773.47457,603.71475h-258a33.03734,33.03734,0,0,1-33-33v-303a33.03734,33.03734,0,0,1,33-33H755.50142l50.97315,40.62891V570.71475A33.03734,33.03734,0,0,1,773.47457,603.71475Z' transform='translate(-310.99935 -139.03722)' fill='%23e6e6e6'/%3E%3Cpath d='M515.47446,244.21475a23.52654,23.52654,0,0,0-23.5,23.5v303a23.52653,23.52653,0,0,0,23.5,23.5h258a23.52653,23.52653,0,0,0,23.5-23.5V279.92032l-44.79614-35.70557Z' transform='translate(-310.99935 -139.03722)' fill='%23fff'/%3E%3Cpath d='M723.29356,332.319H605.82977a5.49538,5.49538,0,0,1,0-10.99076H723.29356a5.49538,5.49538,0,1,1,0,10.99076Z' transform='translate(-310.99935 -139.03722)' fill='%23878787'/%3E%3Cpath d='M745.962,350.86594H605.82977a5.49539,5.49539,0,0,1,0-10.99077H745.962a5.49539,5.49539,0,1,1,0,10.99077Z' transform='translate(-310.99935 -139.03722)' fill='%23878787'/%3E%3Cpath d='M723.29425,404.44277h-117.46a5.495,5.495,0,1,0,0,10.99h117.46a5.495,5.495,0,0,0,0-10.99Z' transform='translate(-310.99935 -139.03722)' fill='%23ccc'/%3E%3Cpath d='M745.96417,422.99281H605.83429a5.495,5.495,0,1,0,0,10.99H745.96417a5.495,5.495,0,0,0,0-10.99Z' transform='translate(-310.99935 -139.03722)' fill='%23ccc'/%3E%3Cpath d='M723.29356,498.55433H605.82977a5.49538,5.49538,0,0,1,0-10.99076H723.29356a5.49538,5.49538,0,1,1,0,10.99076Z' transform='translate(-310.99935 -139.03722)' fill='%23ccc'/%3E%3Cpath d='M745.962,517.10125H605.82977a5.49539,5.49539,0,0,1,0-10.99077H745.962a5.49539,5.49539,0,1,1,0,10.99077Z' transform='translate(-310.99935 -139.03722)' fill='%23ccc'/%3E%3Ccircle id='abdb8e2f-a218-463c-85f4-c869fef49971' data-name='Ellipse 44' cx='245.91553' cy='197.05988' r='19.42315' fill='%23878787'/%3E%3Cpath id='ba7dbbd6-0052-44b1-a552-47a8298b8d3e-694' data-name='Path 395' d='M554.99015,343.50645a2.0144,2.0144,0,0,1-1.21191-.40277l-.02168-.01626-4.5647-3.49185a2.02852,2.02852,0,1,1,2.46838-3.21972l2.95665,2.26729,6.98671-9.11494a2.02767,2.02767,0,0,1,2.84288-.3755l.00058.00044-.04336.06021.04454-.06021a2.03011,2.03011,0,0,1,.37507,2.84345l-8.2179,10.71637a2.02892,2.02892,0,0,1-1.61348.79109Z' transform='translate(-310.99935 -139.03722)' fill='%23fff'/%3E%3Cpath d='M578.33429,419.21278a19.42256,19.42256,0,0,1-19.41992,19.43,4.17626,4.17626,0,0,1-.5-.02,19.422,19.422,0,1,1,19.91992-19.41Z' transform='translate(-310.99935 -139.03722)' fill='%23ccc'/%3E%3Ccircle id='e4a71040-498e-4958-ad41-c2d79154b8f7' data-name='Ellipse 44' cx='245.91553' cy='363.29519' r='19.42315' fill='%23ccc'/%3E%3Cpath d='M805.48234,276.65121h-39.929a10.99077,10.99077,0,0,1-10.99076-10.99077v-29.491a.68692.68692,0,0,1,1.11347-.53844l50.23281,39.79483A.68692.68692,0,0,1,805.48234,276.65121Z' transform='translate(-310.99935 -139.03722)' fill='%23ccc'/%3E%3Cpath d='M578.33429,419.21278a19.42256,19.42256,0,0,1-19.41992,19.43,4.17626,4.17626,0,0,1-.5-.02,42.05076,42.05076,0,0,1,3.77-38.56A19.43323,19.43323,0,0,1,578.33429,419.21278Z' transform='translate(-310.99935 -139.03722)' fill='%23878787'/%3E%3Cpath d='M600.33429,409.94277a5.50988,5.50988,0,0,1,5.5-5.5h29.27a41.57257,41.57257,0,0,1,3.60986,10.99H605.83429A5.50129,5.50129,0,0,1,600.33429,409.94277Z' transform='translate(-310.99935 -139.03722)' fill='%23878787'/%3E%3Cpath d='M639.39435,422.99281a41.92449,41.92449,0,0,1-1.46,10.99h-32.1001a5.495,5.495,0,1,1,0-10.99Z' transform='translate(-310.99935 -139.03722)' fill='%23878787'/%3E%3Cpath d='M711.816,490.77021a6.00013,6.00013,0,0,1-8.24672,1.9979l-70.0049-42.70029a6,6,0,0,1,6.24883-10.24462l70.00489,42.70029A6.00014,6.00014,0,0,1,711.816,490.77021Z' transform='translate(-310.99935 -139.03722)' fill='%233f3d56'/%3E%3Cpath d='M641.8111,448.06992a48,48,0,1,1-15.98318-65.97376A48.05436,48.05436,0,0,1,641.8111,448.06992Zm-71.71233-43.74176a36,36,0,1,0,49.48033-11.98738A36.04071,36.04071,0,0,0,570.09877,404.32816Z' transform='translate(-310.99935 -139.03722)' fill='%233f3d56'/%3E%3Ccircle cx='484.60301' cy='267.17256' r='24.56103' fill='%23a0616a'/%3E%3Cpath d='M794.015,543.90119a11.002,11.002,0,0,1,8.32251-14.15136,10.46752,10.46752,0,0,1,1.45923-.17969l25.87158-41.52344L806.036,465.57991a9.43208,9.43208,0,1,1,13.1206-13.55274L851.786,484.201l.06567.08008a8.54468,8.54468,0,0,1-.59448,10.18457l-36.25,42.873a10.301,10.301,0,0,1,.27,1.0459,11.0026,11.0026,0,0,1-9.875,13.11621q-.46839.041-.93213.041A11.0367,11.0367,0,0,1,794.015,543.90119Z' transform='translate(-310.99935 -139.03722)' fill='%23a0616a'/%3E%3Cpolygon points='444.151 609.001 431.891 609 426.059 561.712 444.153 561.713 444.151 609.001' fill='%23a0616a'/%3E%3Cpath d='M758.2767,759.92208l-39.53051-.00146v-.5a15.38605,15.38605,0,0,1,15.38647-15.38623h.001l24.1438.001Z' transform='translate(-310.99935 -139.03722)' fill='%232f2e41'/%3E%3Cpolygon points='566.007 592.05 555.473 598.322 526.268 560.676 541.815 551.419 566.007 592.05' fill='%23a0616a'/%3E%3Cpath d='M885.77238,739.69878l-33.96586,20.2233-.25581-.4296a15.386,15.386,0,0,1,5.34836-21.09206l.00084-.0005,20.74515-12.35158Z' transform='translate(-310.99935 -139.03722)' fill='%232f2e41'/%3E%3Cpath d='M735.512,727.21272c-8.21289-96.70606-13.09863-186.54492,16.92408-223.19336l.23217-.28418,50.52564,20.21094.08325.18066c.17041.37109,16.97388,37.333,13.0542,62.19434L828.794,643.64924l40.63574,68.041A4.50136,4.50136,0,0,1,867.379,718.118l-17.65918,7.76953a4.52142,4.52142,0,0,1-5.64844-1.76562l-44.2041-72.08008-24.96778-55.28613a1.50028,1.50028,0,0,0-2.85888.459L758.20052,727.31135a4.4918,4.4918,0,0,1-4.47461,4.02441H739.99764A4.53045,4.53045,0,0,1,735.512,727.21272Z' transform='translate(-310.99935 -139.03722)' fill='%232f2e41'/%3E%3Cpath d='M752.60628,504.786l-.24072-.11523-.0376-.26465c-1.88745-13.21.34668-27.8877,6.63989-43.625a34.63634,34.63634,0,0,1,40.20191-20.74317h0a34.59441,34.59441,0,0,1,22.06055,16.96387,34.2209,34.2209,0,0,1,2.3728,27.4248c-7.93384,23.2002-18.22583,44.90723-18.32886,45.124l-.21558.45312Z' transform='translate(-310.99935 -139.03722)' fill='%23878787'/%3E%3Cpath d='M697.48021,471.88251A11.002,11.002,0,0,1,713.65,474.72233a10.46856,10.46856,0,0,1,.67932,1.3039l47.95411,9.69217,12.7683-30.00357a9.43208,9.43208,0,1,1,17.28928,7.54372l-18.71,41.83025-.052.08956a8.54469,8.54469,0,0,1-9.74785,3.00972L710.97846,489.2473a10.30273,10.30273,0,0,1-.88511.61918,11.00261,11.00261,0,0,1-15.74382-4.6565q-.20244-.42436-.36484-.85874A11.0367,11.0367,0,0,1,697.48021,471.88251Z' transform='translate(-310.99935 -139.03722)' fill='%23a0616a'/%3E%3Cpath d='M884.33087,432.51247c-2.36572-4.19178-5.8125-8.03119-10.36914-9.58069-5.88476-2.001-12.25683.12964-18.30713,1.55218-4.66162,1.09595-9.53173,1.76679-14.23046.84192-4.69825-.92492-9.23047-3.65924-11.36817-7.94409-3.145-6.30359-.4956-13.82062-.687-20.86255a25.33438,25.33438,0,0,0-31.92334-23.81061c-5.79346-1.67193-11.03906-1.82659-14.62256,2.62714a17.0001,17.0001,0,0,0-17,17h16.25537a16.1496,16.1496,0,0,0,2.4541,11.93109c2.86963,4.21582,7.85938,7.2655,8.81983,12.274.93115,4.85351-2.36817,9.45868-5.8291,12.98669-3.46045,3.528-7.4751,7.02381-8.55567,11.84626a14.68871,14.68871,0,0,0,2.10352,10.56475,34.40329,34.40329,0,0,0,7.38623,8.13575,108.40184,108.40184,0,0,0,45.0376,23.04034c11.7041,2.81781,24.50586,3.54822,35.37109-1.6355a35.12563,35.12563,0,0,0,15.46484-48.96667Z' transform='translate(-310.99935 -139.03722)' fill='%232f2e41'/%3E%3Cpath d='M888.00065,760.96278h-190a1,1,0,0,1,0-2h190a1,1,0,0,1,0,2Z' transform='translate(-310.99935 -139.03722)' fill='%23ccc'/%3E%3C/svg%3E"); 388 | display: block; 389 | margin: 10px; 390 | } 391 | 392 | .empty-state-title { 393 | transform: translateY(-25px); 394 | @include body-large(); 395 | text-align: center; 396 | color: var(--on-surface); 397 | } 398 | 399 | .is-mobile .empty-state-action { 400 | // Go to File button 401 | &:nth-child(2) { 402 | transform: translate(0px, -60px); 403 | @include button-filled("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z' /%3E%3C/svg%3E"); 404 | } 405 | 406 | // New File button 407 | &:first-of-type { 408 | transform: translate(0px, 30px); 409 | @include button-outline("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z' /%3E%3C/svg%3E"); 410 | } 411 | 412 | // Recent files button 413 | &:nth-child(3) { 414 | @include button-outline("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3' /%3E%3C/svg%3E"); 415 | } 416 | } 417 | 418 | // Progress element 419 | progress { 420 | -webkit-appearance: none; 421 | appearance: none; 422 | } 423 | progress::-webkit-progress-bar { 424 | border-radius: var(--medium-radius); 425 | background: var(--primary-container); 426 | height: 0.6em; 427 | } 428 | progress::-webkit-progress-value { 429 | border-radius: var(--medium-radius); 430 | background: var(--on-primary-container); 431 | height: 0.6em; 432 | } 433 | 434 | /* Mobile Toolbar */ 435 | .is-mobile .mobile-toolbar { 436 | border-top: none; 437 | border-radius: 0; 438 | background-color: var(--surface1); 439 | } 440 | 441 | .is-mobile .mobile-toolbar-option { 442 | color: var(--on-surface-variant); 443 | 444 | &:focus, &:active { 445 | color: var(--on-secondary-container); 446 | } 447 | } 448 | 449 | /* Tags */ 450 | /* Adapted from https://github.com/kepano/obsidian-minimal/blob/master/obsidian.css */ 451 | 452 | /* Preview */ 453 | a.tag { 454 | @include body-medium(); 455 | background-color: var(--tertiary-container); 456 | color: var(--on-tertiary-container); 457 | padding: 3px 12px; 458 | text-align: center; 459 | text-decoration: none; 460 | display: inline-block; 461 | margin: 2px 0 0 0; 462 | border-radius: var(--medium-radius); 463 | } 464 | 465 | /* Editor */ 466 | .cm-s-obsidian span.cm-hashtag { 467 | @include body-medium(); 468 | background-color: var(--tertiary-container); 469 | color: var(--on-tertiary-container); 470 | text-align: center; 471 | text-decoration: none; 472 | display: inline-block; 473 | margin: 2px 0; 474 | vertical-align: middle; 475 | padding-top: 1px; 476 | border-left: none; 477 | border-right: none; 478 | padding-bottom: 2px; 479 | cursor: text; 480 | 481 | &.cm-hashtag-begin { 482 | border-top-left-radius: var(--medium-radius); 483 | border-bottom-left-radius: var(--medium-radius); 484 | padding-left: 8px; 485 | border-right: none; 486 | } 487 | 488 | &.cm-hashtag-end { 489 | border-top-right-radius: var(--medium-radius); 490 | border-bottom-right-radius: var(--medium-radius); 491 | border-left: none; 492 | padding-right: 8px; 493 | } 494 | } 495 | 496 | /* Hide the # character in front of a tag in Preview */ 497 | /* Thanks to `@Klaas`: https://discord.com/channels/686053708261228577/702656734631821413/890122749459197993 */ 498 | /* Currently not working, review later */ 499 | 500 | /* a.tag { 501 | position: relative; 502 | padding-left: 3px; 503 | } 504 | 505 | a.tag:after { 506 | background: var(--background-primary); 507 | position: absolute; 508 | content: " "; 509 | top: 0; 510 | bottom: 0; 511 | width: 0.66rem; 512 | left: 0px; 513 | border-radius: 4px; 514 | } */ -------------------------------------------------------------------------------- /scss/_embeds.scss: -------------------------------------------------------------------------------- 1 | // In live preview 2 | .markdown-source-view .markdown-embed, .markdown-source-view .file-embed { 3 | border: 2px solid var(--surface-variant); 4 | border-radius: var(--small-radius); 5 | } 6 | 7 | /* Embeds */ 8 | /* Naked Embeds (modified from death_au (https://forum.obsidian.md/t/naked-embeds-css-tweak/72) */ 9 | .markdown-embed-title { 10 | display: none; 11 | } 12 | .markdown-preview-view .markdown-embed-content > :first-child { 13 | margin-top: 0; 14 | } 15 | .markdown-preview-view .markdown-embed-content > :last-child { 16 | margin-bottom: 0; 17 | } 18 | 19 | .markdown-preview-view .markdown-embed { 20 | border: none; 21 | padding: 0; 22 | margin: 0; 23 | } 24 | 25 | /* the link on the top right corner*/ 26 | .markdown-embed-link { 27 | color: var(--secondary) !important; 28 | top: 15px; 29 | } 30 | 31 | .markdown-embed-link:hover { 32 | color: var(--text-accent) !important; 33 | } -------------------------------------------------------------------------------- /scss/_floating-action-button.scss: -------------------------------------------------------------------------------- 1 | @mixin fab-styling { 2 | // Colour 3 | color: var(--on-tertiary-container); 4 | background-color: var(--tertiary-container); 5 | 6 | // Positioning 7 | display: flex; 8 | padding: 0px; 9 | margin: 0; 10 | margin: 16px; 11 | position: absolute; 12 | transform: translate(-50%, -50%); 13 | left: calc(100% - 44px - 16px); 14 | // 44px to align to the right 15 | // 16px margin 16 | justify-content: center; 17 | align-items: center; 18 | width: 56px; 19 | height: 56px; 20 | border-radius: var(--medium-radius); 21 | box-shadow: 0.8px 0.8px 4px rgba(0, 0, 0, 0.028), 22 | 2.7px 2.7px 13.4px rgba(0, 0, 0, 0.042), 12px 12px 60px rgba(0, 0, 0, 0.07); 23 | // No idea how those numbers work but they give me 16px padding from the toolbar 24 | top: calc(100vh - 48px - 44px - 16px); 25 | // 44px to align to the right 26 | // 48px toolbar 27 | // 8px margin 28 | 29 | & > *:first-child { 30 | width: 24px; 31 | height: 24px; 32 | } 33 | } 34 | 35 | // Hide all buttons 36 | .view-action:not(.page-header-button) { 37 | display: none; 38 | } 39 | 40 | // -------------- 41 | /* Floating Action Button (FAB)*/ 42 | // Custom page header mode DISABLED 43 | body:not(.custom-page-header) { 44 | .view-action:nth-last-of-type(4) { 45 | @include fab-styling(); 46 | } 47 | 48 | /* Advanced Mobile Toolbar Mode */ 49 | body:not(:not(.advanced-toolbar-mode)) .view-action:nth-of-type(4) { 50 | top: calc(90vh - calc(var(--at-button-height) * var(--at-row-count))); 51 | } 52 | /* Shrink FAB on small displays */ 53 | @media screen and (max-height: 400px) { 54 | .view-action:nth-of-type(4) { 55 | transform: scale(0.8) translate(-50%, -50%); 56 | } 57 | } 58 | } 59 | // ----------------- 60 | // Custom page header mode ENABLED, target first action button 61 | body:not(:not(.custom-page-header)) { 62 | .view-action.page-header-button:first-of-type { 63 | @include fab-styling(); 64 | } 65 | /* Advanced Mobile Toolbar Mode */ 66 | body:not(:not(.advanced-toolbar-mode)) .view-action:nth-last-of-type(5) { 67 | top: calc(90vh - calc(var(--at-button-height) * var(--at-row-count))); 68 | } 69 | /* Shrink FAB on small displays */ 70 | @media screen and (max-height: 400px) { 71 | .view-action:nth-last-of-type(5) { 72 | transform: scale(0.8) translate(-50%, -50%); 73 | } 74 | } 75 | } 76 | // ----------------- 77 | /* Pencil SVG */ 78 | svg.pencil > path { 79 | display: none; 80 | } 81 | 82 | svg.pencil { 83 | background-color: currentColor; 84 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:50px;height:50px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M14.06,9L15,9.94L5.92,19H5V18.08L14.06,9M17.66,3C17.41,3 17.15,3.1 16.96,3.29L15.13,5.12L18.88,8.87L20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18.17,3.09 17.92,3 17.66,3M14.06,6.19L3,17.25V21H6.75L17.81,9.94L14.06,6.19Z' /%3E%3C/svg%3E"); 85 | mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:50px;height:50px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M14.06,9L15,9.94L5.92,19H5V18.08L14.06,9M17.66,3C17.41,3 17.15,3.1 16.96,3.29L15.13,5.12L18.88,8.87L20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18.17,3.09 17.92,3 17.66,3M14.06,6.19L3,17.25V21H6.75L17.81,9.94L14.06,6.19Z' /%3E%3C/svg%3E"); 86 | } 87 | -------------------------------------------------------------------------------- /scss/_hub.scss: -------------------------------------------------------------------------------- 1 | /* @plugins 2 | core: 3 | - backlink 4 | - command-palette 5 | - file-explorer 6 | - global-search 7 | - graph 8 | - outgoing-link 9 | - outline 10 | - page-preview 11 | - starred 12 | - switcher 13 | - tag-pane 14 | 15 | community: 16 | - obsidian-system-dark-mode 17 | - obsidian-style-settings 18 | - cooklang-obsidian 19 | - breadcrumbs 20 | */ 21 | -------------------------------------------------------------------------------- /scss/_plugins.scss: -------------------------------------------------------------------------------- 1 | @use 'body'; 2 | 3 | // ----------------------- 4 | // Breadcrumbs 5 | // ----------------------- 6 | 7 | .BC-trail { 8 | margin-top: 5px !important; 9 | @include body.label-medium(); 10 | color: var(--secondary); 11 | } 12 | 13 | 14 | // ----------------------- 15 | // Dataview 16 | // ----------------------- 17 | // Tables 18 | //.markdown-rendered table { 19 | // border: 1px solid var(--surface-variant); 20 | // border-radius: var(--big-radius); 21 | //} 22 | //.table-view-table>thead>tr>th { 23 | //@include body.label-small(); 24 | //color: var(--secondary); 25 | //} 26 | 27 | // ----------------------- 28 | // Cooklang 29 | // ----------------------- 30 | 31 | .timer { 32 | font-style: italic; 33 | } 34 | 35 | .timer::before { 36 | content: "⏱ "; 37 | font-style: normal; 38 | } 39 | 40 | .cm-metadata, 41 | .cm-metadata-key { 42 | @include body.body-medium(); 43 | color: var(--secondary); 44 | font-family: var(--font-monospace); 45 | } 46 | 47 | .workspace-leaf-content[data-type=cook] .cm-formatting { 48 | color: var(--surface-variant) !important; 49 | } -------------------------------------------------------------------------------- /scss/_scrollbar.scss: -------------------------------------------------------------------------------- 1 | /* Scroll bars */ 2 | 3 | .is-mobile ::-webkit-scrollbar { 4 | display: none; 5 | } 6 | 7 | /* Inspired by Minimal by kepano: https://github.com/kepano/obsidian-minimal/blob/master/obsidian.css */ 8 | // ::-webkit-scrollbar { 9 | // width: 10px; 10 | // background-color: transparent; 11 | // } 12 | // ::-webkit-scrollbar-track { 13 | // background-color: transparent; 14 | // } 15 | // ::-webkit-scrollbar-thumb { 16 | // background-clip: padding-box; 17 | // border: 3px solid transparent; 18 | // background-color: var(--background-modifier-border); 19 | // border-width: 3px 4px 3px 3px; 20 | // min-height: 45px; 21 | // } 22 | 23 | // .modal .vertical-tab-header::-webkit-scrollbar-thumb:hover, 24 | // .mod-left-split .workspace-tabs ::-webkit-scrollbar-thumb:hover, 25 | // ::-webkit-scrollbar-thumb:hover { 26 | // background-color: var(--background-modifier-border-hover); 27 | // } 28 | // .modal .vertical-tab-header::-webkit-scrollbar-thumb:active, 29 | // .mod-left-split .workspace-tabs ::-webkit-scrollbar-thumb:active, 30 | // ::-webkit-scrollbar-thumb:active { 31 | // background-color: var(--background-modifier-border-focus); 32 | // } 33 | -------------------------------------------------------------------------------- /scss/_settingsmodals.scss: -------------------------------------------------------------------------------- 1 | @use 'body'; 2 | 3 | /* -------------- */ 4 | /* Quick Action */ 5 | /* -------------- */ 6 | 7 | /* Text input */ 8 | .is-mobile input.prompt-input { 9 | background-color: var(--primary-container); 10 | border-radius: var(--big-radius); 11 | @include body.body-large(); 12 | color: var(--on-primary-container); 13 | 14 | &:active, &:focus { 15 | border: 0; 16 | } 17 | 18 | &::placeholder { 19 | color: var(--secondary); 20 | } 21 | } 22 | 23 | /* Selection items */ 24 | .is-mobile .suggestion-item { 25 | border-bottom: 1px solid; 26 | padding-bottom: 10px; 27 | padding-top: 10px; 28 | border-color: var(--surface-variant); 29 | border-radius: 0; 30 | @include body.body-large(); 31 | 32 | // Command palette plugin names (WIP) 33 | .suggestion-prefix { 34 | // padding-top: 20px; 35 | position: absolute; 36 | top: 0px; 37 | margin-top: 2px; 38 | margin-bottom: 2px; 39 | color: var(--secondary); 40 | // right: 100px; 41 | // background: var(--background-primary); 42 | // padding-left: 8px; 43 | @include body.body-small(); 44 | } 45 | 46 | &.is-selected { 47 | background-color: var(--surface); 48 | } 49 | } 50 | 51 | .is-mobile .suggestion-hotkey { 52 | display: none; 53 | } 54 | 55 | .suggestion-highlight { 56 | color: var(--secondary); 57 | } 58 | 59 | /* Height */ 60 | .is-mobile .modal, 61 | .is-mobile .prompt, 62 | .is-mobile .suggestion-container { 63 | height: calc(100% - 100px); 64 | } 65 | // Prompts (Quick Switcher, etc …) 66 | .is-mobile .prompt { 67 | min-width: 100%; 68 | background-color: var(--surface); 69 | } 70 | 71 | // For link suggestions 72 | .is-mobile .suggestion-container:not(.modal-container) { 73 | height: 200px; 74 | } 75 | 76 | /* Settings */ 77 | /* Back modal */ 78 | .is-mobile .modal-setting-back-button { 79 | background-color: var(--primary-faint); 80 | } 81 | 82 | 83 | /* Reduce space between settings */ 84 | .vertical-tab-nav-item { 85 | padding: 0px 6px 10px 24px; 86 | } 87 | 88 | /* Style back */ 89 | .is-mobile .modal-setting-back-button { 90 | border-top-left-radius: var(--big-radius); 91 | border-top-right-radius: var(--big-radius); 92 | } 93 | 94 | /* Style setting headers */ 95 | .vertical-tab-header-group-title { 96 | padding: 6px 6px 6px 26px; 97 | } 98 | 99 | /* Add divider line */ 100 | .vertical-tab-header-group { 101 | border-bottom: 1px solid var(--background-secondary-alt); 102 | } 103 | .vertical-tab-header-group:last-of-type { 104 | border-bottom: none; 105 | } 106 | 107 | /* Buttons */ 108 | 109 | /* Filled button */ 110 | button.mod-cta { 111 | background-color: var(--primary); 112 | color: var(--background-primary); 113 | } 114 | 115 | /* Outlined buttons */ 116 | .modal.mod-settings button:not(.mod-cta):not(.mod-warning), 117 | button:not(.mod-cta):not(.mod-warning), 118 | .is-mobile .empty-state-action:not(:nth-child(2)) { 119 | background-color: transparent; 120 | border: 1px solid var(--text-faint); 121 | color: var(--primary); 122 | } 123 | 124 | .is-mobile button, 125 | .is-mobile .empty-state-action { 126 | font-size: var(--smallest); 127 | border-radius: var(--big-radius); 128 | } 129 | 130 | /* Setting Headers */ 131 | .theme-light .vertical-tab-header-group-title { 132 | color: var(--primary-light); 133 | } 134 | .theme-dark .vertical-tab-header-group-title { 135 | color: var(--primary-dark); 136 | } 137 | 138 | /* Prompts (Quick switcher) */ 139 | .is-mobile .modal, 140 | .is-mobile .prompt, 141 | .is-mobile .suggestion-container { 142 | border-radius: var(--medium-radius) var(--medium-radius) 0 0; 143 | padding: 15px 20px; 144 | } 145 | 146 | /* Pulling down */ 147 | .pull-action { 148 | &.pull-down-action { 149 | border-radius: 0 0 var(--medium-radius) var(--medium-radius); 150 | background-color: var(--secondary-container); 151 | color: var(--on-secondary-container); 152 | @include body.label-large(); 153 | } 154 | } 155 | .pull-action.mod-activated { 156 | background-color: var(--primary); 157 | color: var(--on-primary); 158 | @include body.label-large(); 159 | } 160 | 161 | /* Pulling from the left (navigating back 162 | Trying to target but it's not these: 163 | */ 164 | 165 | /* PLUGINS */ 166 | /* Dataview Tables */ 167 | .table-view-table > thead > tr > th { 168 | border-bottom: none !important; 169 | font-weight: var(--medium); 170 | font-size: var(--editor-font-size); 171 | padding: var(--editor-font-size); 172 | } 173 | 174 | tr { 175 | border-top: 1px solid var(--background-secondary-alt); 176 | } -------------------------------------------------------------------------------- /scss/_sidebars.scss: -------------------------------------------------------------------------------- 1 | 2 | /* ------------- */ 3 | /* # Sidebars */ 4 | /* ------------- */ 5 | 6 | /* Branding "Obsidian You" */ 7 | body:not(:not(.branding)) .workspace-drawer-header { 8 | padding: 10px 20px 0 10px; 9 | } 10 | 11 | body:not(:not(.branding)) .workspace-drawer-header::before { 12 | content: "Obsidian "; 13 | margin: 10px 12px 10px 12px; 14 | font-size: var(--h4); 15 | color: var(--primary-dark); 16 | clear: right; 17 | display: block; 18 | } 19 | 20 | body:not(:not(.branding)) .workspace-drawer-header::after { 21 | content: "You"; 22 | margin: 10px; 23 | font-weight: var(--bold); 24 | font-size: var(--h4); 25 | color: var(--secondary); 26 | transform: translate(-15px, 0px); 27 | clear: right; 28 | display: block; 29 | } 30 | 31 | body:not(:not(.branding)) .workspace-drawer-header { 32 | border-bottom: 1px solid var(--background-secondary-alt); 33 | } 34 | 35 | /* Title of 'File explorer' and the like */ 36 | .workspace-drawer-active-tab-header { 37 | margin: 20px -1px 20px 11px; 38 | } 39 | 40 | .workspace-drawer-header-name-text { 41 | color: var(--text-muted); 42 | font-size: var(--smaller); 43 | } 44 | 45 | /* Icons */ 46 | .workspace-drawer-tab-option-item-icon, .workspace-drawer-active-tab-icon { 47 | color: var(--primary-dark); 48 | } 49 | 50 | /* Search */ 51 | .workspace-leaf-content[data-type="search"] .nav-action-button { 52 | transform: scale(0.8); 53 | margin: none; 54 | padding: none; 55 | } 56 | 57 | /* Suggestions */ 58 | .is-mobile .suggestion-container.mod-search-suggestion { 59 | max-height: 40%; 60 | min-height: 30%; 61 | min-width: 100%; 62 | } 63 | 64 | /* Top buttons */ 65 | .is-mobile .workspace-drawer-actions, 66 | .is-mobile .nav-buttons-container { 67 | background-color: var(--background-secondary); 68 | border-radius: var(--big-radius); 69 | margin: 0 11px 10px; 70 | } 71 | 72 | .is-mobile .workspace-leaf-content[data-type="search"] .nav-action-button { 73 | margin: 0px 2px 2px 0; 74 | text-align: center; 75 | height: 36px; 76 | cursor: var(--cursor); 77 | } 78 | 79 | .nav-action-button { 80 | color: var(--text-muted); 81 | transform: scale(0.8); 82 | padding: 5px 8px 0px 8px; 83 | margin: 0px 6px 0px 6px; 84 | } 85 | 86 | .workspace-drawer-tab-container > * { 87 | border-top: none !important; 88 | } 89 | 90 | /* Significantly simplify left and right bars */ 91 | .nav-folder.mod-root > .nav-file-title, 92 | .nav-folder.mod-root > .nav-folder-title, 93 | .workspace-drawer-header-name, 94 | .workspace-drawer-header-icon, 95 | .workspace-drawer-header-left { 96 | display: none; 97 | } 98 | 99 | /* Right sidebar */ 100 | .workspace-drawer.mod-right { 101 | border: none; 102 | } 103 | 104 | .backlink-pane, 105 | .outgoing-link-pane { 106 | padding: 0 11px; 107 | } 108 | 109 | /* Backlink counts */ 110 | .tree-item-flair-outer { 111 | display: flex; 112 | justify-content: center; 113 | align-items: center; 114 | } 115 | 116 | /* Left sidebar */ 117 | .workspace-drawer.mod-left { 118 | border-right: 1px var(--background-primary) solid !important; 119 | } 120 | 121 | /* Ribbon */ 122 | .workspace-drawer-ribbon { 123 | background-color: var(--background-primary); 124 | } 125 | 126 | .workspace-drawer-tab-option-item { 127 | margin-left: 12px; 128 | margin-right: 12px; 129 | } 130 | 131 | .workspace-drawer-tab-option-item-title, 132 | .workspace-drawer-active-tab-title { 133 | color: var(--text-normal); 134 | font-size: var(--regular); 135 | } 136 | 137 | .workspace-drawer-tab-container > * { 138 | border-top: 1px solid var(--background-secondary-alt); 139 | } 140 | 141 | /* ------------- */ 142 | /* # File explorer */ 143 | /* ------------- */ 144 | /* Folder */ 145 | .nav-folder-title-content { 146 | padding-left: 0px; 147 | } 148 | 149 | .nav-file-title-content, 150 | .nav-folder-title-content { 151 | font-size: var(--smaller); 152 | padding: 0px 0px; 153 | font-weight: var(--medium); 154 | } 155 | 156 | /* Files */ 157 | .is-mobile .nav-file-title, 158 | .is-mobile .tag-container { 159 | padding: 1px 11px 0 11px; 160 | color: var(--text-muted); 161 | font-size: var(--smaller); 162 | font-weight: var(--light); 163 | } 164 | 165 | /* Highlighted file or backlink */ 166 | .nav-file-title.is-active, 167 | .tree-item-self.is-clickable:hover, 168 | .nav-folder-title.is-active, 169 | body:not(.is-grabbing) .nav-file-title:hover, 170 | body:not(.is-grabbing) .nav-folder-title:hover { 171 | background-color: var(--primary-faint); 172 | color: var(--primary-dark); 173 | border-radius: var(--small-radius); 174 | } -------------------------------------------------------------------------------- /scss/_style-settings.scss: -------------------------------------------------------------------------------- 1 | /* Style Settings */ 2 | /* @settings 3 | 4 | name: Obsidian You 5 | id: title 6 | settings: 7 | - 8 | id: font-header 9 | title: Fonts 10 | type: heading 11 | level: 2 12 | collapsed: true 13 | - 14 | id: font-preview 15 | title: Preview Font 16 | description: Used in preview mode 17 | type: variable-text 18 | default: Roboto, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif; 19 | - 20 | id: font-editor 21 | title: Editor Font 22 | description: Used in editor mode 23 | type: variable-text 24 | default: Roboto,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Microsoft YaHei Light",sans-serif; 25 | - 26 | id: font-monospace 27 | title: Monospace Font 28 | description: Used in code 29 | type: variable-text 30 | default: Menlo,"Roboto Mono",monospace,SFMono-Regular,Consolas; 31 | - 32 | id: plugin-header 33 | title: Plugin settings 34 | type: heading 35 | level: 2 36 | collapsed: true 37 | - 38 | id: custom-page-header 39 | title: Customizable Page Header 40 | description: Uses the first Customizable Page Header icon for the FAB 41 | type: class-toggle 42 | - 43 | id: advanced-toolbar-mode 44 | title: Advanced toolbar mode 45 | description: Adapts automatically to avanced mobile toolbar 46 | type: class-toggle 47 | - 48 | id: other-header 49 | title: Misc settings 50 | type: heading 51 | level: 2 52 | collapsed: true 53 | - 54 | id: branding 55 | title: Obsidian You branding 56 | description: Toggles contrasting branding in the sidebars 57 | type: class-toggle 58 | default: true 59 | */ 60 | -------------------------------------------------------------------------------- /scss/_tags.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/selfire1/obsidian-you-theme/1e1c8b6ac23cdd9aa05841ea941bac63a68c77b2/scss/_tags.scss -------------------------------------------------------------------------------- /scss/_titlebar.scss: -------------------------------------------------------------------------------- 1 | @use 'body'; 2 | 3 | /* ------------- */ 4 | /* # Title Bar */ 5 | /* ------------- */ 6 | // Title Bar 7 | .workspace-split.mod-root 8 | > .workspace-leaf:first-of-type:last-of-type 9 | .view-header, 10 | .workspace-leaf.mod-active .view-header { 11 | border-bottom: none; 12 | // box-shadow: 0.9px 0.9px 3.6px rgba(0, 0, 0, 0.035), 13 | // 2.5px 2.4px 10px rgba(0, 0, 0, 0.05), 14 | // 6px 5.7px 24.1px rgba(0, 0, 0, 0.065), 20px 19px 80px rgba(0, 0, 0, 0.1); 15 | background-color: var(--surface2); 16 | height: 64px; 17 | align-items: center; 18 | display: flex; 19 | } 20 | 21 | /* Style hamburger menu */ 22 | /* Replace icon */ 23 | .three-horizontal-bars { 24 | background-color: currentColor; 25 | } 26 | 27 | svg.three-horizontal-bars { 28 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z' /%3E%3C/svg%3E"); 29 | mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z' /%3E%3C/svg%3E"); 30 | } 31 | 32 | .view-header-title { 33 | @include body.title-l(); 34 | color: var(--on-surface); 35 | } 36 | .is-mobile .view-header-title { 37 | -webkit-mask-image: none; 38 | mask-image: none; 39 | } 40 | 41 | .is-mobile .view-header-icon { 42 | color: var(--on-surface); 43 | padding-left: 16px; 44 | padding-right: 16px; 45 | } 46 | 47 | .view-action:not(.page-header-button) { 48 | display: none; 49 | } 50 | 51 | .view-action.page-header-button { 52 | color: var(--on-surface-variant); 53 | margin-left: 12px; 54 | margin-right: 12px; 55 | } -------------------------------------------------------------------------------- /scss/_vars.scss: -------------------------------------------------------------------------------- 1 | body { 2 | /* ## Fonts */ 3 | --font-text-theme: Roboto, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", 4 | Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", 5 | "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif; 6 | --font-monospace-theme: "Roboto Mono", monospace, Menlo, SFMono-Regular, Consolas; 7 | --font-interface-theme: var(--font-text-theme); 8 | } 9 | 10 | :root { 11 | /* ------------- */ 12 | /* # TYPOGRAPHY */ 13 | /* ------------- */ 14 | 15 | 16 | /* ## Font Sizes */ 17 | --smallest: 0.75rem; /* Equal to px */ 18 | --smaller: 0.875rem; /* Equal to 14px */ 19 | 20 | // Topography type scale - Headers 21 | --h1: 2.25rem; // Display S 22 | --h2: 2rem; // Headline L 23 | --h3: 1.75rem; // Headline M 24 | --h4: 1.5rem; // Headline S 25 | --h5: 1.375rem; // Title L 26 | --h6: 1rem; // Title M 27 | 28 | /* Roundness */ 29 | --big-radius: 24px; 30 | --medium-radius: 16px; 31 | --small-radius: 8px; 32 | 33 | /* ## Font Weights */ 34 | --light: 350; 35 | --regular: 400; 36 | --medium: 500; 37 | --bold: 650; 38 | 39 | /* ------------- */ 40 | /* # COLOURS */ 41 | /* ------------- */ 42 | // Colour pallettes generated via https://material-foundation.github.io/material-theme-builder/ 43 | // Surface elevation multipliers 44 | --elevation1: 0.05; 45 | --elevation2: 0.08; 46 | --elevation3: 0.11; 47 | --elevation4: 0.12; 48 | --elevation5: 0.14; 49 | } 50 | 51 | .theme-light { 52 | // Light Tokens 53 | --primary: #5F4BBD; 54 | --primary-r: 95; 55 | --primary-g: 75; 56 | --primary-b: 189; 57 | --onPrimary: #FFFFFF; 58 | --primaryContainer: #E7DEFF; 59 | --onPrimaryContainer: #1A0064; 60 | --secondary: #605C71; 61 | --onSecondary: #FFFFFF; 62 | --secondaryContainer: #E6DFF9; 63 | --onSecondaryContainer: #1C192C; 64 | --tertiary: #7C5264; 65 | --onTertiary: #FFFFFF; 66 | --tertiaryContainer: #FFD9E8; 67 | --onTertiaryContainer: #301020; 68 | --error: #BA1B1B; 69 | --errorContainer: #FFDAD4; 70 | --onError: #FFFFFF; 71 | --onErrorContainer: #410001; 72 | --background: #FFFBFF; 73 | --onBackground: #1C1B1E; 74 | --surface: #FFFBFF; 75 | --surface-r: 255; 76 | --surface-g: 251; 77 | --surface-b: 255; 78 | --surface: #FFFBFF; 79 | --onSurface: #1C1B1E; 80 | --surfaceVariant: #E5E0EB; 81 | --onSurfaceVariant: #48454F; 82 | --outline: #79767F; 83 | --inverseOnSurface: #F4EFF4; 84 | --inverseSurface: #313033; 85 | --primaryInverse: #CABEFF; 86 | 87 | // Change camel case variabels into Hyphen Delimited Strings 88 | --on-primary: var(--onPrimary); 89 | --primary-container: var(--primaryContainer); 90 | --on-primary-container: var(--onPrimaryContainer); 91 | 92 | --on-secondary: var(--onSecondary); 93 | --secondary-container: var(--secondaryContainer); 94 | --on-secondary-container: var(--onSecondaryContainer); 95 | 96 | --on-tertiary: var(--onTertiary); 97 | --tertiary-container: var(--tertiaryContainer); 98 | --on-tertiary-container: var(--onTertiaryContainer); 99 | 100 | --error-container: var(--errorContainer); 101 | --on-error: var(--onError); 102 | --on-error-container: var(--onErrorContainer); 103 | 104 | --on-background: var(--onBackground); 105 | --on-surface: var(--onSurface); 106 | --surface-variant: var(--surfaceVariant); 107 | --on-surface-variant: var(--onSurfaceVariant); 108 | 109 | --inverse-on-surface: var(--inverseOnSurface); 110 | --inverse-surface: var(--inverseSurface); 111 | --primary-inverse: var(--primaryInverse); 112 | 113 | // Calculating surface elevation 114 | --surface1: rgb( 115 | calc(var(--primary-r) * var(--elevation1) + var(--surface-r) * (1 - var(--elevation1))), 116 | calc(var(--primary-g) * var(--elevation1) + var(--surface-g) * (1 - var(--elevation1))), 117 | calc(var(--primary-b) * var(--elevation1) + var(--surface-b) * (1 - var(--elevation1))) 118 | ); 119 | --surface2: rgb( 120 | calc(var(--primary-r) * var(--elevation2) + var(--surface-r) * (1 - var(--elevation2))), 121 | calc(var(--primary-g) * var(--elevation2) + var(--surface-g) * (1 - var(--elevation2))), 122 | calc(var(--primary-b) * var(--elevation2) + var(--surface-b) * (1 - var(--elevation2))) 123 | ); 124 | --surface3: rgb( 125 | calc(var(--primary-r) * var(--elevation3) + var(--surface-r) * (1 - var(--elevation3))), 126 | calc(var(--primary-g) * var(--elevation3) + var(--surface-g) * (1 - var(--elevation3))), 127 | calc(var(--primary-b) * var(--elevation3) + var(--surface-b) * (1 - var(--elevation3))) 128 | ); 129 | --surface4: rgb( 130 | calc(var(--primary-r) * var(--elevation4) + var(--surface-r) * (1 - var(--elevation4))), 131 | calc(var(--primary-g) * var(--elevation4) + var(--surface-g) * (1 - var(--elevation4))), 132 | calc(var(--primary-b) * var(--elevation4) + var(--surface-b) * (1 - var(--elevation4))) 133 | ); 134 | --surface5: rgb( 135 | calc(var(--primary-r) * var(--elevation5) + var(--surface-r) * (1 - var(--elevation5))), 136 | calc(var(--primary-g) * var(--elevation5) + var(--surface-g) * (1 - var(--elevation5))), 137 | calc(var(--primary-b) * var(--elevation5) + var(--surface-b) * (1 - var(--elevation5))) 138 | ); 139 | 140 | /* Standard colours */ 141 | --background-primary: var(--background); 142 | --background-primary-alt: var(--surface1); 143 | --background-secondary: var(--surface-variant); 144 | --background-secondary-alt: var(--surface3); 145 | --background-modifier-border: var(--surface-variant); 146 | --background-modifier-form-field: #fff; 147 | --background-modifier-form-field-highlighted: #fff; 148 | --background-modifier-box-shadow: rgba(0, 0, 0, 0.1); 149 | --background-modifier-success: #a4e7c3; 150 | --background-modifier-error: var(--error); 151 | --background-modifier-error-rgb: 230, 135, 135; 152 | --background-modifier-error-hover: #b00020; 153 | --background-modifier-cover: rgba(0, 0, 0, 0.8); 154 | --text-accent: var(--primary); 155 | --text-accent-hover: var(--primary-container); 156 | --text-normal: var(--on-background); 157 | --text-muted: var(--on-surface-variant); 158 | --text-muted-rgb: 136, 136, 136; 159 | --text-faint: var(--secondary); 160 | --text-error: #800000; 161 | --text-error-hover: #990000; 162 | --text-highlight-bg: var(--surface-variant); 163 | --text-highlight-bg-active: rgba(255, 128, 0, 0.4); 164 | --text-selection: rgba(204, 230, 255, 0.99); 165 | --text-on-accent: #f2f2f2; 166 | --interactive-normal: #f2f3f5; 167 | --interactive-hover: #fcb2b2; 168 | --interactive-accent: var(--primary); 169 | --interactive-accent-rgb: var(--primary); 170 | --interactive-accent-hover: var(--primary); 171 | --interactive-success: #197300; 172 | --scrollbar-active-thumb-bg: rgba(0, 0, 0, 0.2); 173 | --scrollbar-bg: rgba(0, 0, 0, 0.05); 174 | --scrollbar-thumb-bg: rgba(0, 0, 0, 0.1); 175 | --highlight-mix-blend-mode: darken; 176 | 177 | // Interaction states 178 | --focus: var(--surface4); 179 | --hover: var(--surface2); 180 | 181 | } 182 | 183 | .theme-dark { 184 | // Dark Tokens 185 | --primary: #CABEFF; 186 | --primary-r: 202; 187 | --primary-g: 190; 188 | --primary-b: 255; 189 | --onPrimary: #30128D; 190 | --primaryContainer: #4731A4; 191 | --onPrimaryContainer: #E7DEFF; 192 | --secondary: #C9C3DC; 193 | --onSecondary: #312E41; 194 | --secondaryContainer: #484459; 195 | --onSecondaryContainer: #E6DFF9; 196 | --tertiary: #EDB8CD; 197 | --onTertiary: #482535; 198 | --tertiaryContainer: #623B4C; 199 | --onTertiaryContainer: #FFD9E8; 200 | --error: #FFB4A9; 201 | --errorContainer: #930006; 202 | --onError: #680003; 203 | --onErrorContainer: #FFDAD4; 204 | --background: #1C1B1E; 205 | --onBackground: #E5E1E5; 206 | --surface: #1C1B1E; 207 | --surface-r: 28; 208 | --surface-g: 27; 209 | --surface-b: 30; 210 | --onSurface: #E5E1E5; 211 | --surfaceVariant: #48454F; 212 | --onSurfaceVariant: #C9C4D0; 213 | --outline: #938F99; 214 | --inverseOnSurface: #1C1B1E; 215 | --inverseSurface: #E5E1E5; 216 | --primaryInverse: #5F4BBD; 217 | 218 | // Change camel case variabels into Hyphen Delimited Strings 219 | --on-primary: var(--onPrimary); 220 | --primary-container: var(--primaryContainer); 221 | --on-primary-container: var(--onPrimaryContainer); 222 | 223 | --on-secondary: var(--onSecondary); 224 | --secondary-container: var(--secondaryContainer); 225 | --on-secondary-container: var(--onSecondaryContainer); 226 | 227 | --on-tertiary: var(--onTertiary); 228 | --tertiary-container: var(--tertiaryContainer); 229 | --on-tertiary-container: var(--onTertiaryContainer); 230 | 231 | --error-container: var(--errorContainer); 232 | --on-error: var(--onError); 233 | --on-error-container: var(--onErrorContainer); 234 | 235 | --on-background: var(--onBackground); 236 | --on-surface: var(--onSurface); 237 | --surface-variant: var(--surfaceVariant); 238 | --on-surface-variant: var(--onSurfaceVariant); 239 | 240 | --inverse-on-surface: var(--inverseOnSurface); 241 | --inverse-surface: var(--inverseSurface); 242 | --primary-inverse: var(--primaryInverse); 243 | 244 | // Calculating surface elevation 245 | --surface1: rgb( 246 | calc(var(--primary-r) * var(--elevation1) + var(--surface-r) * (1 - var(--elevation1))), 247 | calc(var(--primary-g) * var(--elevation1) + var(--surface-g) * (1 - var(--elevation1))), 248 | calc(var(--primary-b) * var(--elevation1) + var(--surface-b) * (1 - var(--elevation1))) 249 | ); 250 | --surface2: rgb( 251 | calc(var(--primary-r) * var(--elevation2) + var(--surface-r) * (1 - var(--elevation2))), 252 | calc(var(--primary-g) * var(--elevation2) + var(--surface-g) * (1 - var(--elevation2))), 253 | calc(var(--primary-b) * var(--elevation2) + var(--surface-b) * (1 - var(--elevation2))) 254 | ); 255 | --surface3: rgb( 256 | calc(var(--primary-r) * var(--elevation3) + var(--surface-r) * (1 - var(--elevation3))), 257 | calc(var(--primary-g) * var(--elevation3) + var(--surface-g) * (1 - var(--elevation3))), 258 | calc(var(--primary-b) * var(--elevation3) + var(--surface-b) * (1 - var(--elevation3))) 259 | ); 260 | --surface4: rgb( 261 | calc(var(--primary-r) * var(--elevation4) + var(--surface-r) * (1 - var(--elevation4))), 262 | calc(var(--primary-g) * var(--elevation4) + var(--surface-g) * (1 - var(--elevation4))), 263 | calc(var(--primary-b) * var(--elevation4) + var(--surface-b) * (1 - var(--elevation4))) 264 | ); 265 | --surface5: rgb( 266 | calc(var(--primary-r) * var(--elevation5) + var(--surface-r) * (1 - var(--elevation5))), 267 | calc(var(--primary-g) * var(--elevation5) + var(--surface-g) * (1 - var(--elevation5))), 268 | calc(var(--primary-b) * var(--elevation5) + var(--surface-b) * (1 - var(--elevation5))) 269 | ); 270 | 271 | // Interaction states 272 | --focus: var(--surface4); 273 | --hover: var(--surface2); 274 | 275 | /* Standard Colours */ 276 | --background-primary: var(--background); 277 | --background-primary-alt: var(--surface1); 278 | --background-secondary: var(--surface-variant); 279 | --background-secondary-alt: var(--surface3); 280 | --background-modifier-border: var(--surface-variant); 281 | --background-modifier-form-field: rgba(0, 0, 0, 0.3); 282 | --background-modifier-form-field-highlighted: rgba(0, 0, 0, 0.22); 283 | --background-modifier-box-shadow: rgba(0, 0, 0, 0.3); 284 | --background-modifier-success: #197300; 285 | --background-modifier-error: var(--error); 286 | --background-modifier-error-rgb: 61, 0, 0; 287 | --background-modifier-error-hover: #470000; 288 | --background-modifier-cover: rgba(0, 0, 0, 0.8); 289 | --text-accent: var(--primary); 290 | --text-accent-hover: var(--primary-container); 291 | --text-normal: var(--on-background); 292 | --text-muted: var(--on-surface-variant); 293 | --text-muted-rgb: 153, 153, 153; 294 | --text-faint: #666; 295 | --text-error: #cf6679; 296 | --text-error-hover: #990000; 297 | --text-highlight-bg: var(--surface-variant); 298 | --text-highlight-bg-active: rgba(255, 128, 0, 0.4); 299 | --text-selection: rgba(23, 48, 77, 0.99); 300 | --text-on-accent: #dcddde; 301 | --interactive-normal: #2a2a2a; 302 | --interactive-hover: #303030; 303 | --interactive-accent: var(--primary); 304 | --interactive-accent-rgb: var(--primary); 305 | --interactive-accent-hover: var(--primary); 306 | --interactive-success: #197300; 307 | --scrollbar-active-thumb-bg: rgba(255, 255, 255, 0.2); 308 | --scrollbar-bg: rgba(255, 255, 255, 0.05); 309 | --scrollbar-thumb-bg: rgba(255, 255, 255, 0.1); 310 | --highlight-mix-blend-mode: lighten; 311 | } -------------------------------------------------------------------------------- /scss/base.scss: -------------------------------------------------------------------------------- 1 | @use "vars"; 2 | @use "titlebar"; 3 | @use "body"; 4 | @use "floating-action-button"; 5 | @use "settingsmodals"; 6 | @use "sidebars"; 7 | @use "tags"; 8 | @use "embeds"; 9 | @use "scrollbar"; 10 | @use "plugins"; 11 | @use "hub"; 12 | @use "style-settings"; 13 | -------------------------------------------------------------------------------- /theme-picker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/selfire1/obsidian-you-theme/1e1c8b6ac23cdd9aa05841ea941bac63a68c77b2/theme-picker.png -------------------------------------------------------------------------------- /theme.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | body { 3 | /* ## Fonts */ 4 | --font-text-theme: Roboto, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", 5 | Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", 6 | "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif; 7 | --font-monospace-theme: "Roboto Mono", monospace, Menlo, SFMono-Regular, Consolas; 8 | --font-interface-theme: var(--font-text-theme); 9 | } 10 | 11 | :root { 12 | /* ------------- */ 13 | /* # TYPOGRAPHY */ 14 | /* ------------- */ 15 | /* ## Font Sizes */ 16 | --smallest: 0.75rem; 17 | /* Equal to px */ 18 | --smaller: 0.875rem; 19 | /* Equal to 14px */ 20 | --h1: 2.25rem; 21 | --h2: 2rem; 22 | --h3: 1.75rem; 23 | --h4: 1.5rem; 24 | --h5: 1.375rem; 25 | --h6: 1rem; 26 | /* Roundness */ 27 | --big-radius: 24px; 28 | --medium-radius: 16px; 29 | --small-radius: 8px; 30 | /* ## Font Weights */ 31 | --light: 350; 32 | --regular: 400; 33 | --medium: 500; 34 | --bold: 650; 35 | /* ------------- */ 36 | /* # COLOURS */ 37 | /* ------------- */ 38 | --elevation1: 0.05; 39 | --elevation2: 0.08; 40 | --elevation3: 0.11; 41 | --elevation4: 0.12; 42 | --elevation5: 0.14; 43 | } 44 | 45 | .theme-light { 46 | --primary: #5F4BBD; 47 | --primary-r: 95; 48 | --primary-g: 75; 49 | --primary-b: 189; 50 | --onPrimary: #FFFFFF; 51 | --primaryContainer: #E7DEFF; 52 | --onPrimaryContainer: #1A0064; 53 | --secondary: #605C71; 54 | --onSecondary: #FFFFFF; 55 | --secondaryContainer: #E6DFF9; 56 | --onSecondaryContainer: #1C192C; 57 | --tertiary: #7C5264; 58 | --onTertiary: #FFFFFF; 59 | --tertiaryContainer: #FFD9E8; 60 | --onTertiaryContainer: #301020; 61 | --error: #BA1B1B; 62 | --errorContainer: #FFDAD4; 63 | --onError: #FFFFFF; 64 | --onErrorContainer: #410001; 65 | --background: #FFFBFF; 66 | --onBackground: #1C1B1E; 67 | --surface: #FFFBFF; 68 | --surface-r: 255; 69 | --surface-g: 251; 70 | --surface-b: 255; 71 | --surface: #FFFBFF; 72 | --onSurface: #1C1B1E; 73 | --surfaceVariant: #E5E0EB; 74 | --onSurfaceVariant: #48454F; 75 | --outline: #79767F; 76 | --inverseOnSurface: #F4EFF4; 77 | --inverseSurface: #313033; 78 | --primaryInverse: #CABEFF; 79 | --on-primary: var(--onPrimary); 80 | --primary-container: var(--primaryContainer); 81 | --on-primary-container: var(--onPrimaryContainer); 82 | --on-secondary: var(--onSecondary); 83 | --secondary-container: var(--secondaryContainer); 84 | --on-secondary-container: var(--onSecondaryContainer); 85 | --on-tertiary: var(--onTertiary); 86 | --tertiary-container: var(--tertiaryContainer); 87 | --on-tertiary-container: var(--onTertiaryContainer); 88 | --error-container: var(--errorContainer); 89 | --on-error: var(--onError); 90 | --on-error-container: var(--onErrorContainer); 91 | --on-background: var(--onBackground); 92 | --on-surface: var(--onSurface); 93 | --surface-variant: var(--surfaceVariant); 94 | --on-surface-variant: var(--onSurfaceVariant); 95 | --inverse-on-surface: var(--inverseOnSurface); 96 | --inverse-surface: var(--inverseSurface); 97 | --primary-inverse: var(--primaryInverse); 98 | --surface1: rgb( 99 | calc(var(--primary-r) * var(--elevation1) + var(--surface-r) * (1 - var(--elevation1))), 100 | calc(var(--primary-g) * var(--elevation1) + var(--surface-g) * (1 - var(--elevation1))), 101 | calc(var(--primary-b) * var(--elevation1) + var(--surface-b) * (1 - var(--elevation1))) 102 | ); 103 | --surface2: rgb( 104 | calc(var(--primary-r) * var(--elevation2) + var(--surface-r) * (1 - var(--elevation2))), 105 | calc(var(--primary-g) * var(--elevation2) + var(--surface-g) * (1 - var(--elevation2))), 106 | calc(var(--primary-b) * var(--elevation2) + var(--surface-b) * (1 - var(--elevation2))) 107 | ); 108 | --surface3: rgb( 109 | calc(var(--primary-r) * var(--elevation3) + var(--surface-r) * (1 - var(--elevation3))), 110 | calc(var(--primary-g) * var(--elevation3) + var(--surface-g) * (1 - var(--elevation3))), 111 | calc(var(--primary-b) * var(--elevation3) + var(--surface-b) * (1 - var(--elevation3))) 112 | ); 113 | --surface4: rgb( 114 | calc(var(--primary-r) * var(--elevation4) + var(--surface-r) * (1 - var(--elevation4))), 115 | calc(var(--primary-g) * var(--elevation4) + var(--surface-g) * (1 - var(--elevation4))), 116 | calc(var(--primary-b) * var(--elevation4) + var(--surface-b) * (1 - var(--elevation4))) 117 | ); 118 | --surface5: rgb( 119 | calc(var(--primary-r) * var(--elevation5) + var(--surface-r) * (1 - var(--elevation5))), 120 | calc(var(--primary-g) * var(--elevation5) + var(--surface-g) * (1 - var(--elevation5))), 121 | calc(var(--primary-b) * var(--elevation5) + var(--surface-b) * (1 - var(--elevation5))) 122 | ); 123 | /* Standard colours */ 124 | --background-primary: var(--background); 125 | --background-primary-alt: var(--surface1); 126 | --background-secondary: var(--surface-variant); 127 | --background-secondary-alt: var(--surface3); 128 | --background-modifier-border: var(--surface-variant); 129 | --background-modifier-form-field: #fff; 130 | --background-modifier-form-field-highlighted: #fff; 131 | --background-modifier-box-shadow: rgba(0, 0, 0, 0.1); 132 | --background-modifier-success: #a4e7c3; 133 | --background-modifier-error: var(--error); 134 | --background-modifier-error-rgb: 230, 135, 135; 135 | --background-modifier-error-hover: #b00020; 136 | --background-modifier-cover: rgba(0, 0, 0, 0.8); 137 | --text-accent: var(--primary); 138 | --text-accent-hover: var(--primary-container); 139 | --text-normal: var(--on-background); 140 | --text-muted: var(--on-surface-variant); 141 | --text-muted-rgb: 136, 136, 136; 142 | --text-faint: var(--secondary); 143 | --text-error: #800000; 144 | --text-error-hover: #990000; 145 | --text-highlight-bg: var(--surface-variant); 146 | --text-highlight-bg-active: rgba(255, 128, 0, 0.4); 147 | --text-selection: rgba(204, 230, 255, 0.99); 148 | --text-on-accent: #f2f2f2; 149 | --interactive-normal: #f2f3f5; 150 | --interactive-hover: #fcb2b2; 151 | --interactive-accent: var(--primary); 152 | --interactive-accent-rgb: var(--primary); 153 | --interactive-accent-hover: var(--primary); 154 | --interactive-success: #197300; 155 | --scrollbar-active-thumb-bg: rgba(0, 0, 0, 0.2); 156 | --scrollbar-bg: rgba(0, 0, 0, 0.05); 157 | --scrollbar-thumb-bg: rgba(0, 0, 0, 0.1); 158 | --highlight-mix-blend-mode: darken; 159 | --focus: var(--surface4); 160 | --hover: var(--surface2); 161 | } 162 | 163 | .theme-dark { 164 | --primary: #CABEFF; 165 | --primary-r: 202; 166 | --primary-g: 190; 167 | --primary-b: 255; 168 | --onPrimary: #30128D; 169 | --primaryContainer: #4731A4; 170 | --onPrimaryContainer: #E7DEFF; 171 | --secondary: #C9C3DC; 172 | --onSecondary: #312E41; 173 | --secondaryContainer: #484459; 174 | --onSecondaryContainer: #E6DFF9; 175 | --tertiary: #EDB8CD; 176 | --onTertiary: #482535; 177 | --tertiaryContainer: #623B4C; 178 | --onTertiaryContainer: #FFD9E8; 179 | --error: #FFB4A9; 180 | --errorContainer: #930006; 181 | --onError: #680003; 182 | --onErrorContainer: #FFDAD4; 183 | --background: #1C1B1E; 184 | --onBackground: #E5E1E5; 185 | --surface: #1C1B1E; 186 | --surface-r: 28; 187 | --surface-g: 27; 188 | --surface-b: 30; 189 | --onSurface: #E5E1E5; 190 | --surfaceVariant: #48454F; 191 | --onSurfaceVariant: #C9C4D0; 192 | --outline: #938F99; 193 | --inverseOnSurface: #1C1B1E; 194 | --inverseSurface: #E5E1E5; 195 | --primaryInverse: #5F4BBD; 196 | --on-primary: var(--onPrimary); 197 | --primary-container: var(--primaryContainer); 198 | --on-primary-container: var(--onPrimaryContainer); 199 | --on-secondary: var(--onSecondary); 200 | --secondary-container: var(--secondaryContainer); 201 | --on-secondary-container: var(--onSecondaryContainer); 202 | --on-tertiary: var(--onTertiary); 203 | --tertiary-container: var(--tertiaryContainer); 204 | --on-tertiary-container: var(--onTertiaryContainer); 205 | --error-container: var(--errorContainer); 206 | --on-error: var(--onError); 207 | --on-error-container: var(--onErrorContainer); 208 | --on-background: var(--onBackground); 209 | --on-surface: var(--onSurface); 210 | --surface-variant: var(--surfaceVariant); 211 | --on-surface-variant: var(--onSurfaceVariant); 212 | --inverse-on-surface: var(--inverseOnSurface); 213 | --inverse-surface: var(--inverseSurface); 214 | --primary-inverse: var(--primaryInverse); 215 | --surface1: rgb( 216 | calc(var(--primary-r) * var(--elevation1) + var(--surface-r) * (1 - var(--elevation1))), 217 | calc(var(--primary-g) * var(--elevation1) + var(--surface-g) * (1 - var(--elevation1))), 218 | calc(var(--primary-b) * var(--elevation1) + var(--surface-b) * (1 - var(--elevation1))) 219 | ); 220 | --surface2: rgb( 221 | calc(var(--primary-r) * var(--elevation2) + var(--surface-r) * (1 - var(--elevation2))), 222 | calc(var(--primary-g) * var(--elevation2) + var(--surface-g) * (1 - var(--elevation2))), 223 | calc(var(--primary-b) * var(--elevation2) + var(--surface-b) * (1 - var(--elevation2))) 224 | ); 225 | --surface3: rgb( 226 | calc(var(--primary-r) * var(--elevation3) + var(--surface-r) * (1 - var(--elevation3))), 227 | calc(var(--primary-g) * var(--elevation3) + var(--surface-g) * (1 - var(--elevation3))), 228 | calc(var(--primary-b) * var(--elevation3) + var(--surface-b) * (1 - var(--elevation3))) 229 | ); 230 | --surface4: rgb( 231 | calc(var(--primary-r) * var(--elevation4) + var(--surface-r) * (1 - var(--elevation4))), 232 | calc(var(--primary-g) * var(--elevation4) + var(--surface-g) * (1 - var(--elevation4))), 233 | calc(var(--primary-b) * var(--elevation4) + var(--surface-b) * (1 - var(--elevation4))) 234 | ); 235 | --surface5: rgb( 236 | calc(var(--primary-r) * var(--elevation5) + var(--surface-r) * (1 - var(--elevation5))), 237 | calc(var(--primary-g) * var(--elevation5) + var(--surface-g) * (1 - var(--elevation5))), 238 | calc(var(--primary-b) * var(--elevation5) + var(--surface-b) * (1 - var(--elevation5))) 239 | ); 240 | --focus: var(--surface4); 241 | --hover: var(--surface2); 242 | /* Standard Colours */ 243 | --background-primary: var(--background); 244 | --background-primary-alt: var(--surface1); 245 | --background-secondary: var(--surface-variant); 246 | --background-secondary-alt: var(--surface3); 247 | --background-modifier-border: var(--surface-variant); 248 | --background-modifier-form-field: rgba(0, 0, 0, 0.3); 249 | --background-modifier-form-field-highlighted: rgba(0, 0, 0, 0.22); 250 | --background-modifier-box-shadow: rgba(0, 0, 0, 0.3); 251 | --background-modifier-success: #197300; 252 | --background-modifier-error: var(--error); 253 | --background-modifier-error-rgb: 61, 0, 0; 254 | --background-modifier-error-hover: #470000; 255 | --background-modifier-cover: rgba(0, 0, 0, 0.8); 256 | --text-accent: var(--primary); 257 | --text-accent-hover: var(--primary-container); 258 | --text-normal: var(--on-background); 259 | --text-muted: var(--on-surface-variant); 260 | --text-muted-rgb: 153, 153, 153; 261 | --text-faint: #666; 262 | --text-error: #cf6679; 263 | --text-error-hover: #990000; 264 | --text-highlight-bg: var(--surface-variant); 265 | --text-highlight-bg-active: rgba(255, 128, 0, 0.4); 266 | --text-selection: rgba(23, 48, 77, 0.99); 267 | --text-on-accent: #dcddde; 268 | --interactive-normal: #2a2a2a; 269 | --interactive-hover: #303030; 270 | --interactive-accent: var(--primary); 271 | --interactive-accent-rgb: var(--primary); 272 | --interactive-accent-hover: var(--primary); 273 | --interactive-success: #197300; 274 | --scrollbar-active-thumb-bg: rgba(255, 255, 255, 0.2); 275 | --scrollbar-bg: rgba(255, 255, 255, 0.05); 276 | --scrollbar-thumb-bg: rgba(255, 255, 255, 0.1); 277 | --highlight-mix-blend-mode: lighten; 278 | } 279 | 280 | .cm-formatting-header { 281 | color: var(--surface-variant) !important; 282 | } 283 | 284 | .markdown-reading-view h1, 285 | .cm-s-obsidian .cm-header-1, 286 | .mod-cm6 .cm-editor .HyperMD-header-1 { 287 | line-height: 2.75rem; 288 | font-size: var(--h1); 289 | font-weight: var(--regular); 290 | } 291 | 292 | .markdown-reading-view h2, 293 | .cm-s-obsidian .cm-header-2, 294 | .mod-cm6 .cm-editor .HyperMD-header-2 { 295 | line-height: 2.5rem; 296 | font-size: var(--h2); 297 | font-weight: var(--regular); 298 | } 299 | 300 | .markdown-reading-view h3, 301 | .cm-s-obsidian .cm-header-3, 302 | .mod-cm6 .cm-editor .HyperMD-header-3 { 303 | line-height: 2.25rem; 304 | font-size: var(--h3); 305 | font-weight: var(--regular); 306 | } 307 | 308 | .markdown-reading-view h4, 309 | .cm-s-obsidian .cm-header-4, 310 | .mod-cm6 .cm-editor .HyperMD-header-4 { 311 | line-height: 2rem; 312 | font-size: var(--h4); 313 | font-weight: var(--regular); 314 | } 315 | 316 | .markdown-reading-view h5, 317 | .cm-s-obsidian .cm-header-5, 318 | .mod-cm6 .cm-editor .HyperMD-header-5 { 319 | line-height: 1.75rem; 320 | font-size: var(--h5); 321 | font-weight: var(--regular); 322 | } 323 | 324 | .markdown-reading-view h6, 325 | .cm-s-obsidian .cm-header-6, 326 | .mod-cm6 .cm-editor .HyperMD-header-6 { 327 | line-height: 1.5rem; 328 | font-size: var(--h6); 329 | letter-spacing: 0.009375rem; 330 | font-weight: var(--medium); 331 | } 332 | 333 | /* ------------- */ 334 | /* # Body */ 335 | /* ------------- */ 336 | .markdown-preview-view, 337 | .markdown-source-view, 338 | .cm-line { 339 | line-height: 1.5rem; 340 | font-size: 1rem; 341 | letter-spacing: 0.009375rem; 342 | font-weight: var(--medium); 343 | } 344 | 345 | strong, 346 | .cm-s-obsidian .cm-strong { 347 | font-weight: var(--bold); 348 | } 349 | 350 | /* Checkboxes */ 351 | input[type=checkbox]:checked { 352 | filter: grayscale(100%); 353 | } 354 | 355 | .theme-dark .task-list-item-checkbox { 356 | filter: invert(1); 357 | } 358 | 359 | /* Images */ 360 | img { 361 | border-radius: var(--small-radius); 362 | } 363 | 364 | span.cm-formatting.cm-formatting-list.cm-formatting-list-ul.cm-list-1, 365 | span.cm-formatting.cm-formatting-list.cm-formatting-list-ol.cm-list-1 { 366 | color: var(--secondary); 367 | } 368 | 369 | /* Callout boxes from Vileplume: https://github.com/hungsu/vileplume-obsidian */ 370 | /* Blockquotes */ 371 | .markdown-preview-view blockquote, 372 | .markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote { 373 | line-height: 1.5rem; 374 | font-size: 1rem; 375 | letter-spacing: 0.009375rem; 376 | font-weight: var(--medium); 377 | border-left: 3px solid var(--tertiary); 378 | background-color: var(--surface); 379 | } 380 | 381 | .cm-s-obsidian span.cm-quote { 382 | color: var(--tertiary); 383 | } 384 | 385 | /* Lists */ 386 | ul > li::marker, 387 | ol > li::marker { 388 | color: var(--text-muted); 389 | } 390 | 391 | /* Internal links */ 392 | .markdown-preview-view .internal-link, 393 | .cm-s-obsidian .cm-formatting-link, 394 | .cm-s-obsidian span.cm-link, 395 | .cm-s-obsidian span.cm-hmd-internal-link, 396 | .markdown-source-view.mod-cm6 .cm-underline { 397 | text-decoration: none; 398 | font-weight: var(--medium); 399 | } 400 | 401 | /* Frontmatter Edit Mode */ 402 | .markdown-preview-section .frontmatter code, 403 | .frontmatter .token, 404 | .cm-s-obsidian .cm-hmd-frontmatter, 405 | pre.frontmatter[class*=language-yaml], 406 | span.cm-hmd-frontmatter, 407 | span.cm-def.cm-hmd-frontmatter { 408 | line-height: 1.25rem; 409 | font-size: 0.875rem; 410 | letter-spacing: 0.015625rem; 411 | font-weight: var(--medium); 412 | color: var(--secondary); 413 | font-family: var(--default-font); 414 | } 415 | 416 | /* Frontmatter / Metadata container */ 417 | .frontmatter-container { 418 | border: 1px solid var(--surface-variant); 419 | background-color: var(--surface); 420 | transition: border 250ms ease-in; 421 | } 422 | .frontmatter-container.is-collapsed { 423 | border: 0; 424 | color: var(--on-surface); 425 | background-color: var(--surface); 426 | transition: border 450ms ease-out; 427 | } 428 | .frontmatter-container .frontmatter-container-header { 429 | text-transform: none; 430 | line-height: 1.25rem; 431 | font-size: 0.875rem; 432 | letter-spacing: 0.00625rem; 433 | font-weight: var(--medium); 434 | color: var(--secondary); 435 | border: none; 436 | } 437 | .frontmatter-container .frontmatter-container-header:hover { 438 | color: var(--secondary); 439 | } 440 | .frontmatter-container .frontmatter-collapse-indicator { 441 | color: var(--secondary); 442 | } 443 | .frontmatter-container .frontmatter-collapse-indicator:hover { 444 | color: var(--secondary); 445 | } 446 | .frontmatter-container .tag { 447 | background-color: var(--secondary-container); 448 | color: var(--on-secondary-container); 449 | } 450 | .frontmatter-container .frontmatter-alias { 451 | background-color: var(--secondary-container); 452 | color: var(--on-secondary-container); 453 | } 454 | .frontmatter-container .frontmatter-alias-icon { 455 | color: var(--on-secondary-container); 456 | } 457 | 458 | .frontmatter-section { 459 | line-height: 1rem; 460 | font-size: 0.75rem; 461 | letter-spacing: 0.03125rem; 462 | font-weight: var(--medium); 463 | } 464 | 465 | /* Code blocks */ 466 | /* Inline */ 467 | .markdown-preview-view code, 468 | .cm-s-obsidian span.cm-inline-code, 469 | .cm-s-obsidian span.cm-inline-code:not(.cm-formatting):not(.cm-hmd-indented-code):not(.obsidian-search-match-highlight), 470 | .cm-s-obsidian .HyperMD-codeblock { 471 | line-height: 1.25rem; 472 | font-size: 0.875rem; 473 | letter-spacing: 0.015625rem; 474 | font-weight: var(--medium); 475 | background-color: var(--surface-variant); 476 | color: var(--on-surface-variant); 477 | font-family: var(--font-monospace); 478 | border-radius: 0; 479 | } 480 | 481 | .markdown-preview-view pre { 482 | border-radius: var(--small-radius); 483 | line-height: 1.25rem; 484 | font-size: 0.875rem; 485 | letter-spacing: 0.015625rem; 486 | font-weight: var(--medium); 487 | background-color: var(--surface-variant); 488 | color: var(--on-surface-variant); 489 | font-family: var(--font-monospace); 490 | } 491 | 492 | .cm-s-obsidian div.HyperMD-codeblock-begin-bg, 493 | .cm-s-obsidian div.HyperMD-codeblock-end-bg, 494 | .cm-s-obsidian div.HyperMD-codeblock-bg { 495 | background-color: var(--surface-variant); 496 | border: none; 497 | } 498 | 499 | /* Empty State screen */ 500 | .empty-state-title::before { 501 | content: " "; 502 | background-size: 45vw 45vw; 503 | height: 45vw; 504 | width: 45vw; 505 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' data-name='Layer 1' width='578.0013' height='621.92557' viewBox='0 0 578.0013 621.92557' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cpath d='M677.64241,491.89724l-249.84894,64.339a33.03735,33.03735,0,0,1-40.18683-23.728L312.04574,239.081a33.03734,33.03734,0,0,1,23.728-40.18683l232.44363-59.85691L627.712,165.67105l73.65843,286.03936A33.03734,33.03734,0,0,1,677.64241,491.89724Z' transform='translate(-310.99935 -139.03722)' fill='%23f2f2f2'/%3E%3Cpath d='M338.14273,208.094a23.52653,23.52653,0,0,0-16.89723,28.61789l75.5609,293.42725a23.52654,23.52654,0,0,0,28.6179,16.89723l249.84894-64.339a23.52654,23.52654,0,0,0,16.89723-28.61789l-72.51713-281.6073-52.285-23.40643Z' transform='translate(-310.99935 -139.03722)' fill='%23fff'/%3E%3Cpath d='M627.07719,167.18472l-38.66749,9.95733a10.99077,10.99077,0,0,1-13.38436-7.9027L567.671,140.68008a.68692.68692,0,0,1,.944-.7991l58.56966,26.01073A.68692.68692,0,0,1,627.07719,167.18472Z' transform='translate(-310.99935 -139.03722)' fill='%23f2f2f2'/%3E%3Cpath d='M606.73438,417.76533,492.98165,447.058a5.49538,5.49538,0,0,1-2.74083-10.64353L603.99355,407.1218a5.49538,5.49538,0,1,1,2.74083,10.64353Z' transform='translate(-310.99935 -139.03722)' fill='%23ccc'/%3E%3Cpath d='M633.31182,430.07333l-135.705,34.9456A5.49538,5.49538,0,0,1,494.866,454.3754l135.705-34.94561a5.49539,5.49539,0,0,1,2.74084,10.64354Z' transform='translate(-310.99935 -139.03722)' fill='%23ccc'/%3E%3Ccircle id='a597741b-ffcf-4aba-98b0-6652ef5d57c9' data-name='Ellipse 44' cx='135.55495' cy='323.87767' r='19.42315' fill='%23e6e6e6'/%3E%3Cpath d='M594.63919,366.93361,443.56425,405.8227A17.01917,17.01917,0,0,1,422.863,393.59731l-31.6597-122.9905a17.01916,17.01916,0,0,1,12.22538-20.7012l151.075-38.88909a17.01916,17.01916,0,0,1,20.7012,12.22539l31.65971,122.9905A17.01917,17.01917,0,0,1,594.63919,366.93361Z' transform='translate(-310.99935 -139.03722)' fill='%23fff'/%3E%3Cpath d='M594.63919,366.93361,443.56425,405.8227A17.01917,17.01917,0,0,1,422.863,393.59731l-31.6597-122.9905a17.01916,17.01916,0,0,1,12.22538-20.7012l151.075-38.88909a17.01916,17.01916,0,0,1,20.7012,12.22539l31.65971,122.9905A17.01917,17.01917,0,0,1,594.63919,366.93361ZM403.9273,251.84246a15.017,15.017,0,0,0-10.7871,18.26578l31.6597,122.9905a15.017,15.017,0,0,0,18.26577,10.7871l151.075-38.88908a15.017,15.017,0,0,0,10.7871-18.26578L573.268,223.74048a15.017,15.017,0,0,0-18.26578-10.7871Z' transform='translate(-310.99935 -139.03722)' fill='%23e6e6e6'/%3E%3Cpath id='b056fd3f-f1a0-44f0-b006-deff0bee637d-685' data-name='Path 411' d='M546.83934,252.37075l-76.24555,19.62681a2.73087,2.73087,0,0,1-3.30848-1.71854,2.63064,2.63064,0,0,1,1.85283-3.33925l77.61329-19.97889c3.13521,1.58858,2.31023,4.83781.087,5.41011Z' transform='translate(-310.99935 -139.03722)' fill='%23f2f2f2'/%3E%3Cpath id='f1ea6668-a825-428d-96fe-a2c4e1b5a672-686' data-name='Path 412' d='M550.282,265.74474l-76.24555,19.62681A2.73089,2.73089,0,0,1,470.728,283.653a2.63065,2.63065,0,0,1,1.85284-3.33925l77.61329-19.97889c3.13521,1.58858,2.31022,4.83781.087,5.41011Z' transform='translate(-310.99935 -139.03722)' fill='%23f2f2f2'/%3E%3Cpath id='ee9aa382-a9c9-40d0-8ed3-22ec2dd616d6-687' data-name='Path 413' d='M459.51412,297.22917l-23.2694,5.98992a2.962,2.962,0,0,1-3.60325-2.12795l-7.06858-27.45979a2.962,2.962,0,0,1,2.12794-3.60325l23.2694-5.98991a2.963,2.963,0,0,1,3.60325,2.12795l7.06859,27.45982a2.962,2.962,0,0,1-2.12795,3.60324Z' transform='translate(-310.99935 -139.03722)' fill='%23e6e6e6'/%3E%3Cpath id='be954d2b-d8b8-4d26-80a0-a319e99a4b10-688' data-name='Path 414' d='M557.10914,293.18514,440.74446,323.13925a2.73087,2.73087,0,0,1-3.30847-1.71854,2.63062,2.63062,0,0,1,1.85284-3.33925L557.02218,287.775c3.13521,1.58859,2.31022,4.83781.087,5.41012Z' transform='translate(-310.99935 -139.03722)' fill='%23f2f2f2'/%3E%3Cpath id='baaae9e4-1b4d-40c2-8a9d-f2abb078b489-689' data-name='Path 415' d='M560.55283,306.563,444.18814,336.51715a2.73086,2.73086,0,0,1-3.30846-1.71854,2.63061,2.63061,0,0,1,1.85283-3.33926l117.73335-30.30643c3.13521,1.58858,2.31022,4.83781.087,5.41011Z' transform='translate(-310.99935 -139.03722)' fill='%23f2f2f2'/%3E%3Cpath id='a91bf4c9-37f6-4391-92ed-1882bd0ce21c-690' data-name='Path 416' d='M563.99426,319.93218,447.62957,349.8863a2.73086,2.73086,0,0,1-3.30846-1.71854,2.63061,2.63061,0,0,1,1.85283-3.33926l117.73335-30.30643c3.13521,1.58858,2.31023,4.83781.087,5.41011Z' transform='translate(-310.99935 -139.03722)' fill='%23f2f2f2'/%3E%3Cpath id='efb98e07-468b-4c85-9a64-ee4cc5493d6f-691' data-name='Path 417' d='M567.43768,333.30908,451.073,363.2632a2.73087,2.73087,0,0,1-3.30847-1.71854,2.63063,2.63063,0,0,1,1.85284-3.33926L567.35072,327.899c3.13521,1.58858,2.31022,4.83781.087,5.41011Z' transform='translate(-310.99935 -139.03722)' fill='%23f2f2f2'/%3E%3Cpath id='aeb1db98-32e5-40b8-ab89-fdad6a3263dc-692' data-name='Path 418' d='M570.87937,346.67924,454.51469,376.63336a2.73088,2.73088,0,0,1-3.30847-1.71855,2.63062,2.63062,0,0,1,1.85284-3.33925l117.73335-30.30643c3.13521,1.58858,2.31022,4.83781.087,5.41011Z' transform='translate(-310.99935 -139.03722)' fill='%23f2f2f2'/%3E%3Cpath id='be265de5-288f-49a7-867d-c42e7cdbf4db-693' data-name='Path 395' d='M447.98728,469.72335a2.01449,2.01449,0,0,1-1.27407-.08782l-.02505-.01034L441.3969,467.382a2.02852,2.02852,0,1,1,1.58747-3.73356l3.42865,1.45835,4.49293-10.56929a2.02766,2.02766,0,0,1,2.65942-1.07259l.00068.00028-.027.06912.02812-.06941a2.03011,2.03011,0,0,1,1.0723,2.66008l-5.28586,12.42716a2.02886,2.02886,0,0,1-1.36522,1.16845Z' transform='translate(-310.99935 -139.03722)' fill='%23fff'/%3E%3Cpath d='M773.47457,603.71475h-258a33.03734,33.03734,0,0,1-33-33v-303a33.03734,33.03734,0,0,1,33-33H755.50142l50.97315,40.62891V570.71475A33.03734,33.03734,0,0,1,773.47457,603.71475Z' transform='translate(-310.99935 -139.03722)' fill='%23e6e6e6'/%3E%3Cpath d='M515.47446,244.21475a23.52654,23.52654,0,0,0-23.5,23.5v303a23.52653,23.52653,0,0,0,23.5,23.5h258a23.52653,23.52653,0,0,0,23.5-23.5V279.92032l-44.79614-35.70557Z' transform='translate(-310.99935 -139.03722)' fill='%23fff'/%3E%3Cpath d='M723.29356,332.319H605.82977a5.49538,5.49538,0,0,1,0-10.99076H723.29356a5.49538,5.49538,0,1,1,0,10.99076Z' transform='translate(-310.99935 -139.03722)' fill='%23878787'/%3E%3Cpath d='M745.962,350.86594H605.82977a5.49539,5.49539,0,0,1,0-10.99077H745.962a5.49539,5.49539,0,1,1,0,10.99077Z' transform='translate(-310.99935 -139.03722)' fill='%23878787'/%3E%3Cpath d='M723.29425,404.44277h-117.46a5.495,5.495,0,1,0,0,10.99h117.46a5.495,5.495,0,0,0,0-10.99Z' transform='translate(-310.99935 -139.03722)' fill='%23ccc'/%3E%3Cpath d='M745.96417,422.99281H605.83429a5.495,5.495,0,1,0,0,10.99H745.96417a5.495,5.495,0,0,0,0-10.99Z' transform='translate(-310.99935 -139.03722)' fill='%23ccc'/%3E%3Cpath d='M723.29356,498.55433H605.82977a5.49538,5.49538,0,0,1,0-10.99076H723.29356a5.49538,5.49538,0,1,1,0,10.99076Z' transform='translate(-310.99935 -139.03722)' fill='%23ccc'/%3E%3Cpath d='M745.962,517.10125H605.82977a5.49539,5.49539,0,0,1,0-10.99077H745.962a5.49539,5.49539,0,1,1,0,10.99077Z' transform='translate(-310.99935 -139.03722)' fill='%23ccc'/%3E%3Ccircle id='abdb8e2f-a218-463c-85f4-c869fef49971' data-name='Ellipse 44' cx='245.91553' cy='197.05988' r='19.42315' fill='%23878787'/%3E%3Cpath id='ba7dbbd6-0052-44b1-a552-47a8298b8d3e-694' data-name='Path 395' d='M554.99015,343.50645a2.0144,2.0144,0,0,1-1.21191-.40277l-.02168-.01626-4.5647-3.49185a2.02852,2.02852,0,1,1,2.46838-3.21972l2.95665,2.26729,6.98671-9.11494a2.02767,2.02767,0,0,1,2.84288-.3755l.00058.00044-.04336.06021.04454-.06021a2.03011,2.03011,0,0,1,.37507,2.84345l-8.2179,10.71637a2.02892,2.02892,0,0,1-1.61348.79109Z' transform='translate(-310.99935 -139.03722)' fill='%23fff'/%3E%3Cpath d='M578.33429,419.21278a19.42256,19.42256,0,0,1-19.41992,19.43,4.17626,4.17626,0,0,1-.5-.02,19.422,19.422,0,1,1,19.91992-19.41Z' transform='translate(-310.99935 -139.03722)' fill='%23ccc'/%3E%3Ccircle id='e4a71040-498e-4958-ad41-c2d79154b8f7' data-name='Ellipse 44' cx='245.91553' cy='363.29519' r='19.42315' fill='%23ccc'/%3E%3Cpath d='M805.48234,276.65121h-39.929a10.99077,10.99077,0,0,1-10.99076-10.99077v-29.491a.68692.68692,0,0,1,1.11347-.53844l50.23281,39.79483A.68692.68692,0,0,1,805.48234,276.65121Z' transform='translate(-310.99935 -139.03722)' fill='%23ccc'/%3E%3Cpath d='M578.33429,419.21278a19.42256,19.42256,0,0,1-19.41992,19.43,4.17626,4.17626,0,0,1-.5-.02,42.05076,42.05076,0,0,1,3.77-38.56A19.43323,19.43323,0,0,1,578.33429,419.21278Z' transform='translate(-310.99935 -139.03722)' fill='%23878787'/%3E%3Cpath d='M600.33429,409.94277a5.50988,5.50988,0,0,1,5.5-5.5h29.27a41.57257,41.57257,0,0,1,3.60986,10.99H605.83429A5.50129,5.50129,0,0,1,600.33429,409.94277Z' transform='translate(-310.99935 -139.03722)' fill='%23878787'/%3E%3Cpath d='M639.39435,422.99281a41.92449,41.92449,0,0,1-1.46,10.99h-32.1001a5.495,5.495,0,1,1,0-10.99Z' transform='translate(-310.99935 -139.03722)' fill='%23878787'/%3E%3Cpath d='M711.816,490.77021a6.00013,6.00013,0,0,1-8.24672,1.9979l-70.0049-42.70029a6,6,0,0,1,6.24883-10.24462l70.00489,42.70029A6.00014,6.00014,0,0,1,711.816,490.77021Z' transform='translate(-310.99935 -139.03722)' fill='%233f3d56'/%3E%3Cpath d='M641.8111,448.06992a48,48,0,1,1-15.98318-65.97376A48.05436,48.05436,0,0,1,641.8111,448.06992Zm-71.71233-43.74176a36,36,0,1,0,49.48033-11.98738A36.04071,36.04071,0,0,0,570.09877,404.32816Z' transform='translate(-310.99935 -139.03722)' fill='%233f3d56'/%3E%3Ccircle cx='484.60301' cy='267.17256' r='24.56103' fill='%23a0616a'/%3E%3Cpath d='M794.015,543.90119a11.002,11.002,0,0,1,8.32251-14.15136,10.46752,10.46752,0,0,1,1.45923-.17969l25.87158-41.52344L806.036,465.57991a9.43208,9.43208,0,1,1,13.1206-13.55274L851.786,484.201l.06567.08008a8.54468,8.54468,0,0,1-.59448,10.18457l-36.25,42.873a10.301,10.301,0,0,1,.27,1.0459,11.0026,11.0026,0,0,1-9.875,13.11621q-.46839.041-.93213.041A11.0367,11.0367,0,0,1,794.015,543.90119Z' transform='translate(-310.99935 -139.03722)' fill='%23a0616a'/%3E%3Cpolygon points='444.151 609.001 431.891 609 426.059 561.712 444.153 561.713 444.151 609.001' fill='%23a0616a'/%3E%3Cpath d='M758.2767,759.92208l-39.53051-.00146v-.5a15.38605,15.38605,0,0,1,15.38647-15.38623h.001l24.1438.001Z' transform='translate(-310.99935 -139.03722)' fill='%232f2e41'/%3E%3Cpolygon points='566.007 592.05 555.473 598.322 526.268 560.676 541.815 551.419 566.007 592.05' fill='%23a0616a'/%3E%3Cpath d='M885.77238,739.69878l-33.96586,20.2233-.25581-.4296a15.386,15.386,0,0,1,5.34836-21.09206l.00084-.0005,20.74515-12.35158Z' transform='translate(-310.99935 -139.03722)' fill='%232f2e41'/%3E%3Cpath d='M735.512,727.21272c-8.21289-96.70606-13.09863-186.54492,16.92408-223.19336l.23217-.28418,50.52564,20.21094.08325.18066c.17041.37109,16.97388,37.333,13.0542,62.19434L828.794,643.64924l40.63574,68.041A4.50136,4.50136,0,0,1,867.379,718.118l-17.65918,7.76953a4.52142,4.52142,0,0,1-5.64844-1.76562l-44.2041-72.08008-24.96778-55.28613a1.50028,1.50028,0,0,0-2.85888.459L758.20052,727.31135a4.4918,4.4918,0,0,1-4.47461,4.02441H739.99764A4.53045,4.53045,0,0,1,735.512,727.21272Z' transform='translate(-310.99935 -139.03722)' fill='%232f2e41'/%3E%3Cpath d='M752.60628,504.786l-.24072-.11523-.0376-.26465c-1.88745-13.21.34668-27.8877,6.63989-43.625a34.63634,34.63634,0,0,1,40.20191-20.74317h0a34.59441,34.59441,0,0,1,22.06055,16.96387,34.2209,34.2209,0,0,1,2.3728,27.4248c-7.93384,23.2002-18.22583,44.90723-18.32886,45.124l-.21558.45312Z' transform='translate(-310.99935 -139.03722)' fill='%23878787'/%3E%3Cpath d='M697.48021,471.88251A11.002,11.002,0,0,1,713.65,474.72233a10.46856,10.46856,0,0,1,.67932,1.3039l47.95411,9.69217,12.7683-30.00357a9.43208,9.43208,0,1,1,17.28928,7.54372l-18.71,41.83025-.052.08956a8.54469,8.54469,0,0,1-9.74785,3.00972L710.97846,489.2473a10.30273,10.30273,0,0,1-.88511.61918,11.00261,11.00261,0,0,1-15.74382-4.6565q-.20244-.42436-.36484-.85874A11.0367,11.0367,0,0,1,697.48021,471.88251Z' transform='translate(-310.99935 -139.03722)' fill='%23a0616a'/%3E%3Cpath d='M884.33087,432.51247c-2.36572-4.19178-5.8125-8.03119-10.36914-9.58069-5.88476-2.001-12.25683.12964-18.30713,1.55218-4.66162,1.09595-9.53173,1.76679-14.23046.84192-4.69825-.92492-9.23047-3.65924-11.36817-7.94409-3.145-6.30359-.4956-13.82062-.687-20.86255a25.33438,25.33438,0,0,0-31.92334-23.81061c-5.79346-1.67193-11.03906-1.82659-14.62256,2.62714a17.0001,17.0001,0,0,0-17,17h16.25537a16.1496,16.1496,0,0,0,2.4541,11.93109c2.86963,4.21582,7.85938,7.2655,8.81983,12.274.93115,4.85351-2.36817,9.45868-5.8291,12.98669-3.46045,3.528-7.4751,7.02381-8.55567,11.84626a14.68871,14.68871,0,0,0,2.10352,10.56475,34.40329,34.40329,0,0,0,7.38623,8.13575,108.40184,108.40184,0,0,0,45.0376,23.04034c11.7041,2.81781,24.50586,3.54822,35.37109-1.6355a35.12563,35.12563,0,0,0,15.46484-48.96667Z' transform='translate(-310.99935 -139.03722)' fill='%232f2e41'/%3E%3Cpath d='M888.00065,760.96278h-190a1,1,0,0,1,0-2h190a1,1,0,0,1,0,2Z' transform='translate(-310.99935 -139.03722)' fill='%23ccc'/%3E%3C/svg%3E"); 506 | display: block; 507 | margin: 10px; 508 | } 509 | 510 | .empty-state-title { 511 | transform: translateY(-25px); 512 | line-height: 1.5rem; 513 | font-size: 1rem; 514 | letter-spacing: 0.009375rem; 515 | font-weight: var(--medium); 516 | text-align: center; 517 | color: var(--on-surface); 518 | } 519 | 520 | .is-mobile .empty-state-action:nth-child(2) { 521 | transform: translate(0px, -60px); 522 | background-color: var(--primary); 523 | color: var(--on-primary); 524 | text-transform: none; 525 | line-height: 1.25rem; 526 | font-size: 0.875rem; 527 | letter-spacing: 0.00625rem; 528 | font-weight: var(--medium); 529 | height: 40px; 530 | border-radius: 1.25rem; 531 | padding-top: 10px; 532 | padding-left: 1.5rem; 533 | padding-right: 1.5rem; 534 | display: block; 535 | margin: auto; 536 | padding-left: 16px; 537 | padding-right: 24px; 538 | vertical-align: middle; 539 | } 540 | .is-mobile .empty-state-action:nth-child(2)::before { 541 | content: ""; 542 | height: 1.125rem; 543 | width: 1.125rem; 544 | background-size: 1.125rem 1.125rem; 545 | background-position: center; 546 | background-color: var(--on-primary); 547 | display: inline-block; 548 | margin-top: -4px; 549 | mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z' /%3E%3C/svg%3E"); 550 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z' /%3E%3C/svg%3E"); 551 | mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z' /%3E%3C/svg%3E"); 552 | -webkit-mask-size: cover; 553 | mask-size: cover; 554 | transform: translateY(4px); 555 | margin-right: 8px; 556 | } 557 | .is-mobile .empty-state-action:first-of-type { 558 | transform: translate(0px, 30px); 559 | background-color: inherit; 560 | color: var(--primary); 561 | text-transform: none; 562 | line-height: 1.25rem; 563 | font-size: 0.875rem; 564 | letter-spacing: 0.00625rem; 565 | font-weight: var(--medium); 566 | height: 40px; 567 | border-radius: 1.25rem; 568 | border-width: 0.0625rem; 569 | border-color: var(--outline); 570 | padding-top: 9px; 571 | padding-left: 1.5rem; 572 | padding-right: 1.5rem; 573 | display: block; 574 | margin: auto; 575 | padding-left: 16px; 576 | padding-right: 24px; 577 | vertical-align: middle; 578 | } 579 | .is-mobile .empty-state-action:first-of-type::before { 580 | content: ""; 581 | height: 1.125rem; 582 | width: 1.125rem; 583 | background-size: 1.125rem 1.125rem; 584 | background-position: center; 585 | background-color: var(--primary); 586 | display: inline-block; 587 | margin-top: -4px; 588 | mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z' /%3E%3C/svg%3E"); 589 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z' /%3E%3C/svg%3E"); 590 | mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z' /%3E%3C/svg%3E"); 591 | -webkit-mask-size: cover; 592 | mask-size: cover; 593 | transform: translateY(4px); 594 | margin-right: 8px; 595 | } 596 | .is-mobile .empty-state-action:nth-child(3) { 597 | background-color: inherit; 598 | color: var(--primary); 599 | text-transform: none; 600 | line-height: 1.25rem; 601 | font-size: 0.875rem; 602 | letter-spacing: 0.00625rem; 603 | font-weight: var(--medium); 604 | height: 40px; 605 | border-radius: 1.25rem; 606 | border-width: 0.0625rem; 607 | border-color: var(--outline); 608 | padding-top: 9px; 609 | padding-left: 1.5rem; 610 | padding-right: 1.5rem; 611 | display: block; 612 | margin: auto; 613 | padding-left: 16px; 614 | padding-right: 24px; 615 | vertical-align: middle; 616 | } 617 | .is-mobile .empty-state-action:nth-child(3)::before { 618 | content: ""; 619 | height: 1.125rem; 620 | width: 1.125rem; 621 | background-size: 1.125rem 1.125rem; 622 | background-position: center; 623 | background-color: var(--primary); 624 | display: inline-block; 625 | margin-top: -4px; 626 | mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3' /%3E%3C/svg%3E"); 627 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3' /%3E%3C/svg%3E"); 628 | mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3' /%3E%3C/svg%3E"); 629 | -webkit-mask-size: cover; 630 | mask-size: cover; 631 | transform: translateY(4px); 632 | margin-right: 8px; 633 | } 634 | 635 | progress { 636 | -webkit-appearance: none; 637 | appearance: none; 638 | } 639 | 640 | progress::-webkit-progress-bar { 641 | border-radius: var(--medium-radius); 642 | background: var(--primary-container); 643 | height: 0.6em; 644 | } 645 | 646 | progress::-webkit-progress-value { 647 | border-radius: var(--medium-radius); 648 | background: var(--on-primary-container); 649 | height: 0.6em; 650 | } 651 | 652 | /* Mobile Toolbar */ 653 | .is-mobile .mobile-toolbar { 654 | border-top: none; 655 | border-radius: 0; 656 | background-color: var(--surface1); 657 | } 658 | 659 | .is-mobile .mobile-toolbar-option { 660 | color: var(--on-surface-variant); 661 | } 662 | .is-mobile .mobile-toolbar-option:focus, .is-mobile .mobile-toolbar-option:active { 663 | color: var(--on-secondary-container); 664 | } 665 | 666 | /* Tags */ 667 | /* Adapted from https://github.com/kepano/obsidian-minimal/blob/master/obsidian.css */ 668 | /* Preview */ 669 | a.tag { 670 | line-height: 1.25rem; 671 | font-size: 0.875rem; 672 | letter-spacing: 0.015625rem; 673 | font-weight: var(--medium); 674 | background-color: var(--tertiary-container); 675 | color: var(--on-tertiary-container); 676 | padding: 3px 12px; 677 | text-align: center; 678 | text-decoration: none; 679 | display: inline-block; 680 | margin: 2px 0 0 0; 681 | border-radius: var(--medium-radius); 682 | } 683 | 684 | /* Editor */ 685 | .cm-s-obsidian span.cm-hashtag { 686 | line-height: 1.25rem; 687 | font-size: 0.875rem; 688 | letter-spacing: 0.015625rem; 689 | font-weight: var(--medium); 690 | background-color: var(--tertiary-container); 691 | color: var(--on-tertiary-container); 692 | text-align: center; 693 | text-decoration: none; 694 | display: inline-block; 695 | margin: 2px 0; 696 | vertical-align: middle; 697 | padding-top: 1px; 698 | border-left: none; 699 | border-right: none; 700 | padding-bottom: 2px; 701 | cursor: text; 702 | } 703 | .cm-s-obsidian span.cm-hashtag.cm-hashtag-begin { 704 | border-top-left-radius: var(--medium-radius); 705 | border-bottom-left-radius: var(--medium-radius); 706 | padding-left: 8px; 707 | border-right: none; 708 | } 709 | .cm-s-obsidian span.cm-hashtag.cm-hashtag-end { 710 | border-top-right-radius: var(--medium-radius); 711 | border-bottom-right-radius: var(--medium-radius); 712 | border-left: none; 713 | padding-right: 8px; 714 | } 715 | 716 | /* Hide the # character in front of a tag in Preview */ 717 | /* Thanks to `@Klaas`: https://discord.com/channels/686053708261228577/702656734631821413/890122749459197993 */ 718 | /* Currently not working, review later */ 719 | /* a.tag { 720 | position: relative; 721 | padding-left: 3px; 722 | } 723 | 724 | a.tag:after { 725 | background: var(--background-primary); 726 | position: absolute; 727 | content: " "; 728 | top: 0; 729 | bottom: 0; 730 | width: 0.66rem; 731 | left: 0px; 732 | border-radius: 4px; 733 | } */ 734 | /* ------------- */ 735 | /* # Title Bar */ 736 | /* ------------- */ 737 | .workspace-split.mod-root > .workspace-leaf:first-of-type:last-of-type .view-header, 738 | .workspace-leaf.mod-active .view-header { 739 | border-bottom: none; 740 | background-color: var(--surface2); 741 | height: 64px; 742 | align-items: center; 743 | display: flex; 744 | } 745 | 746 | /* Style hamburger menu */ 747 | /* Replace icon */ 748 | .three-horizontal-bars { 749 | background-color: currentColor; 750 | } 751 | 752 | svg.three-horizontal-bars { 753 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z' /%3E%3C/svg%3E"); 754 | mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:24px;height:24px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z' /%3E%3C/svg%3E"); 755 | } 756 | 757 | .view-header-title { 758 | line-height: 1.75rem; 759 | font-size: var(--h5); 760 | font-weight: var(--regular); 761 | color: var(--on-surface); 762 | } 763 | 764 | .is-mobile .view-header-title { 765 | -webkit-mask-image: none; 766 | mask-image: none; 767 | } 768 | 769 | .is-mobile .view-header-icon { 770 | color: var(--on-surface); 771 | padding-left: 16px; 772 | padding-right: 16px; 773 | } 774 | 775 | .view-action:not(.page-header-button) { 776 | display: none; 777 | } 778 | 779 | .view-action.page-header-button { 780 | color: var(--on-surface-variant); 781 | margin-left: 12px; 782 | margin-right: 12px; 783 | } 784 | 785 | .view-action:not(.page-header-button) { 786 | display: none; 787 | } 788 | 789 | /* Floating Action Button (FAB)*/ 790 | body:not(.custom-page-header) { 791 | /* Advanced Mobile Toolbar Mode */ 792 | /* Shrink FAB on small displays */ 793 | } 794 | body:not(.custom-page-header) .view-action:nth-last-of-type(4) { 795 | color: var(--on-tertiary-container); 796 | background-color: var(--tertiary-container); 797 | display: flex; 798 | padding: 0px; 799 | margin: 0; 800 | margin: 16px; 801 | position: absolute; 802 | transform: translate(-50%, -50%); 803 | left: calc(100% - 44px - 16px); 804 | justify-content: center; 805 | align-items: center; 806 | width: 56px; 807 | height: 56px; 808 | border-radius: var(--medium-radius); 809 | box-shadow: 0.8px 0.8px 4px rgba(0, 0, 0, 0.028), 2.7px 2.7px 13.4px rgba(0, 0, 0, 0.042), 12px 12px 60px rgba(0, 0, 0, 0.07); 810 | top: calc(100vh - 48px - 44px - 16px); 811 | } 812 | body:not(.custom-page-header) .view-action:nth-last-of-type(4) > *:first-child { 813 | width: 24px; 814 | height: 24px; 815 | } 816 | body:not(.custom-page-header) body:not(:not(.advanced-toolbar-mode)) .view-action:nth-of-type(4) { 817 | top: calc(90vh - var(--at-button-height) * var(--at-row-count)); 818 | } 819 | @media screen and (max-height: 400px) { 820 | body:not(.custom-page-header) .view-action:nth-of-type(4) { 821 | transform: scale(0.8) translate(-50%, -50%); 822 | } 823 | } 824 | 825 | body:not(:not(.custom-page-header)) { 826 | /* Advanced Mobile Toolbar Mode */ 827 | /* Shrink FAB on small displays */ 828 | } 829 | body:not(:not(.custom-page-header)) .view-action.page-header-button:first-of-type { 830 | color: var(--on-tertiary-container); 831 | background-color: var(--tertiary-container); 832 | display: flex; 833 | padding: 0px; 834 | margin: 0; 835 | margin: 16px; 836 | position: absolute; 837 | transform: translate(-50%, -50%); 838 | left: calc(100% - 44px - 16px); 839 | justify-content: center; 840 | align-items: center; 841 | width: 56px; 842 | height: 56px; 843 | border-radius: var(--medium-radius); 844 | box-shadow: 0.8px 0.8px 4px rgba(0, 0, 0, 0.028), 2.7px 2.7px 13.4px rgba(0, 0, 0, 0.042), 12px 12px 60px rgba(0, 0, 0, 0.07); 845 | top: calc(100vh - 48px - 44px - 16px); 846 | } 847 | body:not(:not(.custom-page-header)) .view-action.page-header-button:first-of-type > *:first-child { 848 | width: 24px; 849 | height: 24px; 850 | } 851 | body:not(:not(.custom-page-header)) body:not(:not(.advanced-toolbar-mode)) .view-action:nth-last-of-type(5) { 852 | top: calc(90vh - var(--at-button-height) * var(--at-row-count)); 853 | } 854 | @media screen and (max-height: 400px) { 855 | body:not(:not(.custom-page-header)) .view-action:nth-last-of-type(5) { 856 | transform: scale(0.8) translate(-50%, -50%); 857 | } 858 | } 859 | 860 | /* Pencil SVG */ 861 | svg.pencil > path { 862 | display: none; 863 | } 864 | 865 | svg.pencil { 866 | background-color: currentColor; 867 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:50px;height:50px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M14.06,9L15,9.94L5.92,19H5V18.08L14.06,9M17.66,3C17.41,3 17.15,3.1 16.96,3.29L15.13,5.12L18.88,8.87L20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18.17,3.09 17.92,3 17.66,3M14.06,6.19L3,17.25V21H6.75L17.81,9.94L14.06,6.19Z' /%3E%3C/svg%3E"); 868 | mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='width:50px;height:50px' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M14.06,9L15,9.94L5.92,19H5V18.08L14.06,9M17.66,3C17.41,3 17.15,3.1 16.96,3.29L15.13,5.12L18.88,8.87L20.71,7.04C21.1,6.65 21.1,6 20.71,5.63L18.37,3.29C18.17,3.09 17.92,3 17.66,3M14.06,6.19L3,17.25V21H6.75L17.81,9.94L14.06,6.19Z' /%3E%3C/svg%3E"); 869 | } 870 | 871 | /* -------------- */ 872 | /* Quick Action */ 873 | /* -------------- */ 874 | /* Text input */ 875 | .is-mobile input.prompt-input { 876 | background-color: var(--primary-container); 877 | border-radius: var(--big-radius); 878 | line-height: 1.5rem; 879 | font-size: 1rem; 880 | letter-spacing: 0.009375rem; 881 | font-weight: var(--medium); 882 | color: var(--on-primary-container); 883 | } 884 | .is-mobile input.prompt-input:active, .is-mobile input.prompt-input:focus { 885 | border: 0; 886 | } 887 | .is-mobile input.prompt-input::placeholder { 888 | color: var(--secondary); 889 | } 890 | 891 | /* Selection items */ 892 | .is-mobile .suggestion-item { 893 | border-bottom: 1px solid; 894 | padding-bottom: 10px; 895 | padding-top: 10px; 896 | border-color: var(--surface-variant); 897 | border-radius: 0; 898 | line-height: 1.5rem; 899 | font-size: 1rem; 900 | letter-spacing: 0.009375rem; 901 | font-weight: var(--medium); 902 | } 903 | .is-mobile .suggestion-item .suggestion-prefix { 904 | position: absolute; 905 | top: 0px; 906 | margin-top: 2px; 907 | margin-bottom: 2px; 908 | color: var(--secondary); 909 | line-height: 1rem; 910 | font-size: 0.75rem; 911 | letter-spacing: 0.025rem; 912 | font-weight: var(--medium); 913 | } 914 | .is-mobile .suggestion-item.is-selected { 915 | background-color: var(--surface); 916 | } 917 | 918 | .is-mobile .suggestion-hotkey { 919 | display: none; 920 | } 921 | 922 | .suggestion-highlight { 923 | color: var(--secondary); 924 | } 925 | 926 | /* Height */ 927 | .is-mobile .modal, 928 | .is-mobile .prompt, 929 | .is-mobile .suggestion-container { 930 | height: calc(100% - 100px); 931 | } 932 | 933 | .is-mobile .prompt { 934 | min-width: 100%; 935 | background-color: var(--surface); 936 | } 937 | 938 | .is-mobile .suggestion-container:not(.modal-container) { 939 | height: 200px; 940 | } 941 | 942 | /* Settings */ 943 | /* Back modal */ 944 | .is-mobile .modal-setting-back-button { 945 | background-color: var(--primary-faint); 946 | } 947 | 948 | /* Reduce space between settings */ 949 | .vertical-tab-nav-item { 950 | padding: 0px 6px 10px 24px; 951 | } 952 | 953 | /* Style back */ 954 | .is-mobile .modal-setting-back-button { 955 | border-top-left-radius: var(--big-radius); 956 | border-top-right-radius: var(--big-radius); 957 | } 958 | 959 | /* Style setting headers */ 960 | .vertical-tab-header-group-title { 961 | padding: 6px 6px 6px 26px; 962 | } 963 | 964 | /* Add divider line */ 965 | .vertical-tab-header-group { 966 | border-bottom: 1px solid var(--background-secondary-alt); 967 | } 968 | 969 | .vertical-tab-header-group:last-of-type { 970 | border-bottom: none; 971 | } 972 | 973 | /* Buttons */ 974 | /* Filled button */ 975 | button.mod-cta { 976 | background-color: var(--primary); 977 | color: var(--background-primary); 978 | } 979 | 980 | /* Outlined buttons */ 981 | .modal.mod-settings button:not(.mod-cta):not(.mod-warning), 982 | button:not(.mod-cta):not(.mod-warning), 983 | .is-mobile .empty-state-action:not(:nth-child(2)) { 984 | background-color: transparent; 985 | border: 1px solid var(--text-faint); 986 | color: var(--primary); 987 | } 988 | 989 | .is-mobile button, 990 | .is-mobile .empty-state-action { 991 | font-size: var(--smallest); 992 | border-radius: var(--big-radius); 993 | } 994 | 995 | /* Setting Headers */ 996 | .theme-light .vertical-tab-header-group-title { 997 | color: var(--primary-light); 998 | } 999 | 1000 | .theme-dark .vertical-tab-header-group-title { 1001 | color: var(--primary-dark); 1002 | } 1003 | 1004 | /* Prompts (Quick switcher) */ 1005 | .is-mobile .modal, 1006 | .is-mobile .prompt, 1007 | .is-mobile .suggestion-container { 1008 | border-radius: var(--medium-radius) var(--medium-radius) 0 0; 1009 | padding: 15px 20px; 1010 | } 1011 | 1012 | /* Pulling down */ 1013 | .pull-action.pull-down-action { 1014 | border-radius: 0 0 var(--medium-radius) var(--medium-radius); 1015 | background-color: var(--secondary-container); 1016 | color: var(--on-secondary-container); 1017 | text-transform: none; 1018 | line-height: 1.25rem; 1019 | font-size: 0.875rem; 1020 | letter-spacing: 0.00625rem; 1021 | font-weight: var(--medium); 1022 | } 1023 | 1024 | .pull-action.mod-activated { 1025 | background-color: var(--primary); 1026 | color: var(--on-primary); 1027 | text-transform: none; 1028 | line-height: 1.25rem; 1029 | font-size: 0.875rem; 1030 | letter-spacing: 0.00625rem; 1031 | font-weight: var(--medium); 1032 | } 1033 | 1034 | /* Pulling from the left (navigating back 1035 | Trying to target but it's not these: 1036 | */ 1037 | /* PLUGINS */ 1038 | /* Dataview Tables */ 1039 | .table-view-table > thead > tr > th { 1040 | border-bottom: none !important; 1041 | font-weight: var(--medium); 1042 | font-size: var(--editor-font-size); 1043 | padding: var(--editor-font-size); 1044 | } 1045 | 1046 | tr { 1047 | border-top: 1px solid var(--background-secondary-alt); 1048 | } 1049 | 1050 | /* ------------- */ 1051 | /* # Sidebars */ 1052 | /* ------------- */ 1053 | /* Branding "Obsidian You" */ 1054 | body:not(:not(.branding)) .workspace-drawer-header { 1055 | padding: 10px 20px 0 10px; 1056 | } 1057 | 1058 | body:not(:not(.branding)) .workspace-drawer-header::before { 1059 | content: "Obsidian "; 1060 | margin: 10px 12px 10px 12px; 1061 | font-size: var(--h4); 1062 | color: var(--primary-dark); 1063 | clear: right; 1064 | display: block; 1065 | } 1066 | 1067 | body:not(:not(.branding)) .workspace-drawer-header::after { 1068 | content: "You"; 1069 | margin: 10px; 1070 | font-weight: var(--bold); 1071 | font-size: var(--h4); 1072 | color: var(--secondary); 1073 | transform: translate(-15px, 0px); 1074 | clear: right; 1075 | display: block; 1076 | } 1077 | 1078 | body:not(:not(.branding)) .workspace-drawer-header { 1079 | border-bottom: 1px solid var(--background-secondary-alt); 1080 | } 1081 | 1082 | /* Title of 'File explorer' and the like */ 1083 | .workspace-drawer-active-tab-header { 1084 | margin: 20px -1px 20px 11px; 1085 | } 1086 | 1087 | .workspace-drawer-header-name-text { 1088 | color: var(--text-muted); 1089 | font-size: var(--smaller); 1090 | } 1091 | 1092 | /* Icons */ 1093 | .workspace-drawer-tab-option-item-icon, .workspace-drawer-active-tab-icon { 1094 | color: var(--primary-dark); 1095 | } 1096 | 1097 | /* Search */ 1098 | .workspace-leaf-content[data-type=search] .nav-action-button { 1099 | transform: scale(0.8); 1100 | margin: none; 1101 | padding: none; 1102 | } 1103 | 1104 | /* Suggestions */ 1105 | .is-mobile .suggestion-container.mod-search-suggestion { 1106 | max-height: 40%; 1107 | min-height: 30%; 1108 | min-width: 100%; 1109 | } 1110 | 1111 | /* Top buttons */ 1112 | .is-mobile .workspace-drawer-actions, 1113 | .is-mobile .nav-buttons-container { 1114 | background-color: var(--background-secondary); 1115 | border-radius: var(--big-radius); 1116 | margin: 0 11px 10px; 1117 | } 1118 | 1119 | .is-mobile .workspace-leaf-content[data-type=search] .nav-action-button { 1120 | margin: 0px 2px 2px 0; 1121 | text-align: center; 1122 | height: 36px; 1123 | cursor: var(--cursor); 1124 | } 1125 | 1126 | .nav-action-button { 1127 | color: var(--text-muted); 1128 | transform: scale(0.8); 1129 | padding: 5px 8px 0px 8px; 1130 | margin: 0px 6px 0px 6px; 1131 | } 1132 | 1133 | .workspace-drawer-tab-container > * { 1134 | border-top: none !important; 1135 | } 1136 | 1137 | /* Significantly simplify left and right bars */ 1138 | .nav-folder.mod-root > .nav-file-title, 1139 | .nav-folder.mod-root > .nav-folder-title, 1140 | .workspace-drawer-header-name, 1141 | .workspace-drawer-header-icon, 1142 | .workspace-drawer-header-left { 1143 | display: none; 1144 | } 1145 | 1146 | /* Right sidebar */ 1147 | .workspace-drawer.mod-right { 1148 | border: none; 1149 | } 1150 | 1151 | .backlink-pane, 1152 | .outgoing-link-pane { 1153 | padding: 0 11px; 1154 | } 1155 | 1156 | /* Backlink counts */ 1157 | .tree-item-flair-outer { 1158 | display: flex; 1159 | justify-content: center; 1160 | align-items: center; 1161 | } 1162 | 1163 | /* Left sidebar */ 1164 | .workspace-drawer.mod-left { 1165 | border-right: 1px var(--background-primary) solid !important; 1166 | } 1167 | 1168 | /* Ribbon */ 1169 | .workspace-drawer-ribbon { 1170 | background-color: var(--background-primary); 1171 | } 1172 | 1173 | .workspace-drawer-tab-option-item { 1174 | margin-left: 12px; 1175 | margin-right: 12px; 1176 | } 1177 | 1178 | .workspace-drawer-tab-option-item-title, 1179 | .workspace-drawer-active-tab-title { 1180 | color: var(--text-normal); 1181 | font-size: var(--regular); 1182 | } 1183 | 1184 | .workspace-drawer-tab-container > * { 1185 | border-top: 1px solid var(--background-secondary-alt); 1186 | } 1187 | 1188 | /* ------------- */ 1189 | /* # File explorer */ 1190 | /* ------------- */ 1191 | /* Folder */ 1192 | .nav-folder-title-content { 1193 | padding-left: 0px; 1194 | } 1195 | 1196 | .nav-file-title-content, 1197 | .nav-folder-title-content { 1198 | font-size: var(--smaller); 1199 | padding: 0px 0px; 1200 | font-weight: var(--medium); 1201 | } 1202 | 1203 | /* Files */ 1204 | .is-mobile .nav-file-title, 1205 | .is-mobile .tag-container { 1206 | padding: 1px 11px 0 11px; 1207 | color: var(--text-muted); 1208 | font-size: var(--smaller); 1209 | font-weight: var(--light); 1210 | } 1211 | 1212 | /* Highlighted file or backlink */ 1213 | .nav-file-title.is-active, 1214 | .tree-item-self.is-clickable:hover, 1215 | .nav-folder-title.is-active, 1216 | body:not(.is-grabbing) .nav-file-title:hover, 1217 | body:not(.is-grabbing) .nav-folder-title:hover { 1218 | background-color: var(--primary-faint); 1219 | color: var(--primary-dark); 1220 | border-radius: var(--small-radius); 1221 | } 1222 | 1223 | .markdown-source-view .markdown-embed, .markdown-source-view .file-embed { 1224 | border: 2px solid var(--surface-variant); 1225 | border-radius: var(--small-radius); 1226 | } 1227 | 1228 | /* Embeds */ 1229 | /* Naked Embeds (modified from death_au (https://forum.obsidian.md/t/naked-embeds-css-tweak/72) */ 1230 | .markdown-embed-title { 1231 | display: none; 1232 | } 1233 | 1234 | .markdown-preview-view .markdown-embed-content > :first-child { 1235 | margin-top: 0; 1236 | } 1237 | 1238 | .markdown-preview-view .markdown-embed-content > :last-child { 1239 | margin-bottom: 0; 1240 | } 1241 | 1242 | .markdown-preview-view .markdown-embed { 1243 | border: none; 1244 | padding: 0; 1245 | margin: 0; 1246 | } 1247 | 1248 | /* the link on the top right corner*/ 1249 | .markdown-embed-link { 1250 | color: var(--secondary) !important; 1251 | top: 15px; 1252 | } 1253 | 1254 | .markdown-embed-link:hover { 1255 | color: var(--text-accent) !important; 1256 | } 1257 | 1258 | /* Scroll bars */ 1259 | .is-mobile ::-webkit-scrollbar { 1260 | display: none; 1261 | } 1262 | 1263 | /* Inspired by Minimal by kepano: https://github.com/kepano/obsidian-minimal/blob/master/obsidian.css */ 1264 | .BC-trail { 1265 | margin-top: 5px !important; 1266 | line-height: 1rem; 1267 | font-size: 0.75rem; 1268 | letter-spacing: 0.03125rem; 1269 | font-weight: var(--medium); 1270 | color: var(--secondary); 1271 | } 1272 | 1273 | .timer { 1274 | font-style: italic; 1275 | } 1276 | 1277 | .timer::before { 1278 | content: "⏱ "; 1279 | font-style: normal; 1280 | } 1281 | 1282 | .cm-metadata, 1283 | .cm-metadata-key { 1284 | line-height: 1.25rem; 1285 | font-size: 0.875rem; 1286 | letter-spacing: 0.015625rem; 1287 | font-weight: var(--medium); 1288 | color: var(--secondary); 1289 | font-family: var(--font-monospace); 1290 | } 1291 | 1292 | .workspace-leaf-content[data-type=cook] .cm-formatting { 1293 | color: var(--surface-variant) !important; 1294 | } 1295 | 1296 | /* @plugins 1297 | core: 1298 | - backlink 1299 | - command-palette 1300 | - file-explorer 1301 | - global-search 1302 | - graph 1303 | - outgoing-link 1304 | - outline 1305 | - page-preview 1306 | - starred 1307 | - switcher 1308 | - tag-pane 1309 | 1310 | community: 1311 | - obsidian-system-dark-mode 1312 | - obsidian-style-settings 1313 | - cooklang-obsidian 1314 | - breadcrumbs 1315 | */ 1316 | /* Style Settings */ 1317 | /* @settings 1318 | 1319 | name: Obsidian You 1320 | id: title 1321 | settings: 1322 | - 1323 | id: font-header 1324 | title: Fonts 1325 | type: heading 1326 | level: 2 1327 | collapsed: true 1328 | - 1329 | id: font-preview 1330 | title: Preview Font 1331 | description: Used in preview mode 1332 | type: variable-text 1333 | default: Roboto, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif; 1334 | - 1335 | id: font-editor 1336 | title: Editor Font 1337 | description: Used in editor mode 1338 | type: variable-text 1339 | default: Roboto,"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Microsoft YaHei Light",sans-serif; 1340 | - 1341 | id: font-monospace 1342 | title: Monospace Font 1343 | description: Used in code 1344 | type: variable-text 1345 | default: Menlo,"Roboto Mono",monospace,SFMono-Regular,Consolas; 1346 | - 1347 | id: plugin-header 1348 | title: Plugin settings 1349 | type: heading 1350 | level: 2 1351 | collapsed: true 1352 | - 1353 | id: custom-page-header 1354 | title: Customizable Page Header 1355 | description: Uses the first Customizable Page Header icon for the FAB 1356 | type: class-toggle 1357 | - 1358 | id: advanced-toolbar-mode 1359 | title: Advanced toolbar mode 1360 | description: Adapts automatically to avanced mobile toolbar 1361 | type: class-toggle 1362 | - 1363 | id: other-header 1364 | title: Misc settings 1365 | type: heading 1366 | level: 2 1367 | collapsed: true 1368 | - 1369 | id: branding 1370 | title: Obsidian You branding 1371 | description: Toggles contrasting branding in the sidebars 1372 | type: class-toggle 1373 | default: true 1374 | */ 1375 | 1376 | /*# sourceMappingURL=theme.css.map */ 1377 | -------------------------------------------------------------------------------- /theme.css.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sourceRoot":"","sources":["scss/_vars.scss","scss/_body.scss","scss/_titlebar.scss","scss/_floating-action-button.scss","scss/_settingsmodals.scss","scss/_sidebars.scss","scss/_embeds.scss","scss/_scrollbar.scss","scss/_plugins.scss","scss/_hub.scss","scss/_style-settings.scss"],"names":[],"mappings":";AAAA;AACE;EACA;AAAA;AAAA;EAGA;EACA;;;AAGF;AACE;AACA;AACA;AAGA;EACA;AAAqB;EACrB;AAAqB;EAGrB;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;AAEA;AACA;AACA;EAGF;EACA;EACA;EACA;EACA;;;AAGA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAGA;AAAA;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;AAAA;AAME;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;;;AAIF;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;EACA;EAEA;EACA;EACA;EAGA;AAAA;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;AAAA;EAKA;AAAA;AAAA;AAAA;AAAA;EAOE;EACA;AAEE;EACF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACjJF;EACE;;;AAGF;AAAA;AAAA;EAtKE;EACA;EACA;;;AA0KF;AAAA;AAAA;EAtKE;EACA;EACA;;;AA0KF;AAAA;AAAA;EAtKE;EACA;EACA;;;AA0KF;AAAA;AAAA;EAtKE;EACA;EACA;;;AA0KF;AAAA;AAAA;EAtKE;EACA;EACA;;;AA0KF;AAAA;AAAA;EAtKE;EACA;EACA;EACA;;;AAyKF;AACA;AACA;AAIA;AAAA;AAAA;EA3KE;EACA;EACA;EACA;;;AA+KF;AAAA;EAEE;;;AAGF;AACA;EACE;;;AAGF;EACE;;;AAGF;AACA;EACE;;;AAIF;AAAA;EAGE;;;AAGF;AAgBA;AACA;AAAA;EA7NE;EACA;EACA;EACA;EA6NA;EACA;;;AAEF;EACE;;;AAEF;AACA;AAAA;EAEE;;;AAGF;AACA;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;;;AAGF;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;EAhPE;EACA;EACA;EACA;EAoPA;EACA;;;AAIF;AAEA;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EA5PA;EACA;EACA;EACA;EACA;EA0PA;EACA;;AAEA;EACE;;AAIJ;EAIE;;AAHA;EACE;;AAKJ;EACE;EACA;;AAEF;EACE;EACA;;AAEA;EACE;;;AAMJ;EApRE;EACA;EACA;EACA;;;AAsRF;AACA;AACA;AAAA;AAAA;AAAA;EAjTE;EACA;EACA;EACA;EAmTA;EACA;EACA;EACA;;;AAGF;EACE;EA7TA;EACA;EACA;EACA;EA4TA;EACA;EACA;;;AAIF;AAAA;AAAA;EAGE;EACA;;;AAGF;AAEA;EAEI;EACA;EACA,QAHO;EAIP,OAJO;EAKP;EACA;EACA;;;AAGJ;EACE;EAjWA;EACA;EACA;EACA;EAgWA;EACA;;;AAKE;EACA;EA9TF;EACA;EAxBA;EACA;EACA;EACA;EACA;EAsBA;EACA;EACA;EACA;EACA;EACA;EACA;EAuBA;EACA;EACA;;AAtBE;EAEA;EACA,QAFO;EAGP,OAHO;EAIP;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;AAsSF;EACE;EA5RF;EACA;EAhEA;EACA;EACA;EACA;EACA;EA8DA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAsBA;EACA;EACA;;AArBE;EAEA;EACA,QAFO;EAGP,OAHO;EAIP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAmQF;EAjSA;EACA;EAhEA;EACA;EACA;EACA;EACA;EA8DA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAsBA;EACA;EACA;;AArBE;EAEA;EACA,QAFO;EAGP,OAHO;EAIP;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAyQJ;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACE;EACA;;;AAGJ;AACA;EACE;EACA;EACA;;;AAGF;EACE;;AAEA;EACE;;;AAIJ;AACA;AAEA;AACA;EAtZE;EACA;EACA;EACA;EAqZA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EAnaE;EACA;EACA;EACA;EAkaA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACA;EACA;EACA;EACA;;AAGA;EACA;EACA;EACA;EACA;;;AAIF;AACA;AACA;AAEA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACjfA;AACA;AACA;AAEE;AAAA;EAIE;EAIA;EACA;EACA;EACA;;;AAGF;AACA;AACA;EACE;;;AAGF;EACE;EACA;;;AAGF;EDLA;EACA;EACA;ECKE;;;AAEF;EACA;EACA;;;AAGA;EACE;EACA;EACA;;;AAGJ;EACE;;;AAGF;EACE;EACA;EACA;;;AClBF;EACE;;;AAIF;AAEA;AAKE;AAIA;;AARA;EAzCA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;;AAKA;EACE;EACA;;AAkBF;EACE;;AAGF;EACE;IACE;;;;AAMN;AAIE;AAIA;;AAPA;EA3DA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EACA;EACA;EACA;EAGA;;AAKA;EACE;EACA;;AAmCF;EACE;;AAGF;EACE;IACE;;;;AAKN;AACA;EACE;;;AAGF;EACE;EACA;EACA;;;AClFF;AACA;AACA;AAEA;AACA;EACE;EACA;EH8BA;EACA;EACA;EACA;EG/BA;;AAEA;EACE;;AAGF;EACE;;;AAIJ;AACA;EACE;EACA;EACA;EACA;EACA;EHWA;EACA;EACA;EACA;;AGVF;EAEI;EACA;EACA;EACA;EACA;EHeF;EACA;EACA;EACA;;AGXA;EACA;;;AAIF;EACE;;;AAGF;EACE;;;AAGF;AACA;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;;;AAIF;EACA;;;AAGA;AACA;AACA;EACE;;;AAIF;AACA;EACE;;;AAGF;AACA;EACE;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;;;AAEF;EACE;;;AAGF;AAEA;AACA;EACE;EACA;;;AAGF;AACA;AAAA;AAAA;EAGI;EACA;EACA;;;AAGJ;AAAA;EAEE;EACA;;;AAGF;AACA;EACE;;;AAEF;EACE;;;AAGF;AACA;AAAA;AAAA;EAGE;EACA;;;AAGF;AAEE;EACE;EACA;EACA;EH1FF;EACA;EACA;EACA;EACA;;;AG0FF;EACE;EACA;EHhGA;EACA;EACA;EACA;EACA;;;AGgGF;AAAA;AAAA;AAIA;AACA;AACA;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AC7KF;AACA;AACA;AAEA;AACA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AACA;EACE;;;AAGF;EACE;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;AACA;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AACA;AAAA;AAAA;AAAA;AAAA;EAKE;;;AAGF;AACA;EACE;;;AAGF;AAAA;EAEE;;;AAGF;AACA;EACE;EACA;EACA;;;AAGF;AACA;EACE;;;AAGF;AACA;EACE;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;;;AAGF;AACA;AACA;AACA;AACA;EACE;;;AAGF;AAAA;EAEE;EACA;EACA;;;AAGF;AACA;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;AACA;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;EACA;;;AC3KF;EACE;EACA;;;AAGF;AACA;AACA;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;AACA;EACE;EACA;;;AAGF;EACE;;;AC/BF;AAEA;EACI;;;AAGJ;ACAA;EACI;EP6DF;EACA;EACA;EACA;EO9DE;;;AAqBJ;EACI;;;AAGJ;EACI;EACA;;;AAGJ;AAAA;EPOE;EACA;EACA;EACA;EOPE;EACA;;;AAGJ;EACI;;;AC/CJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","file":"theme.css"} --------------------------------------------------------------------------------