├── .editorconfig ├── .github ├── base64font.sh ├── changelog.hbs ├── dependabot.yml ├── prerelease.mjs └── workflows │ ├── build.yml │ └── release.yml ├── .gitignore ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── admonitions.json ├── build-dev.mjs ├── build-push.mjs ├── colors.html ├── images ├── admonitions.png ├── create-a-custom-accent-color.png ├── ebullientworks-theme.jpg ├── table-styles.png ├── theme-colors.jpg ├── theme-dark-code.png ├── theme-light-code.png └── thumbnail.png ├── manifest.json ├── obsidian.css ├── package-lock.json ├── package.json ├── publish.css ├── src ├── fragments │ ├── _00-heading.scss │ ├── _00-stylesettings.scss │ ├── _01-color-palette.scss │ ├── _01a-color-accents.scss │ ├── _02-fonts.scss │ ├── _02a-font-faces.scss │ ├── _03-core-theme-dark.scss │ ├── _03-core-theme-light.scss │ ├── _03a-workspace-layout.scss │ ├── _03c-modal-input.scss │ ├── _03d-graph-view.scss │ ├── _03f-metadata-view.scss │ ├── _04-headings-hr-tags.scss │ ├── _05-text-links.scss │ ├── _06-lists-checkboxes.scss │ ├── _06a-checkbox-mixin.scss │ ├── _08-blockquote-callouts.scss │ ├── _09-codeblocks.scss │ ├── _10-images-embeds.scss │ ├── _12-calendar-day-planner-tracker.scss │ ├── _13-timelines.scss │ ├── _13-whitespace.scss │ ├── _14-frontmatter.scss │ ├── _15-table.scss │ ├── _16-mermaid.scss │ ├── _20-publish-variables.scss │ ├── _25-publish-typography.scss │ └── _29-publish-code.scss ├── publish.scss ├── tasks-snippet.scss └── theme.scss ├── tasks-snippet-0.15.css ├── tasks-snippet.css └── theme.css /.editorconfig: -------------------------------------------------------------------------------- 1 | # EditorConfig helps developers define and maintain consistent 2 | # coding styles between different editors and IDEs 3 | # editorconfig.org 4 | 5 | root = true 6 | 7 | [*] 8 | 9 | # Change these settings to your own preference 10 | indent_style = space 11 | indent_size = 4 12 | 13 | # We recommend you to keep these unchanged 14 | end_of_line = lf 15 | charset = utf-8 16 | trim_trailing_whitespace = true 17 | insert_final_newline = true 18 | 19 | [*.md] 20 | trim_trailing_whitespace = false 21 | 22 | [*.{yml,html,rb,css,xml,scss,json,mjs}] 23 | indent_size = 2 24 | -------------------------------------------------------------------------------- /.github/base64font.sh: -------------------------------------------------------------------------------- 1 | #!/bin/bash 2 | 3 | # Define the path to the input SCSS file and the output file 4 | INPUT_FILE="src/fragments/_02a-font-faces.scss" 5 | OUTPUT_FILE="src/fragments/_02a-font-faces.scss.next" 6 | 7 | # Create/clear the output file 8 | > $OUTPUT_FILE 9 | 10 | # Process each line 11 | while IFS= read -r line 12 | do 13 | # Check if the line contains a [BASE64_STRING_HERE:path_to_file] pattern 14 | if [[ $line =~ \[BASE64_STRING_HERE:(.+)\] ]]; then 15 | # Extract the path from the match 16 | font_path="${BASH_REMATCH[1]}" 17 | # Base64 encode the font file 18 | encoded=$(gbase64 "$font_path" | tr -d '\n') 19 | # Replace the placeholder with the Base64 encoded string 20 | line=${line/\[BASE64_STRING_HERE:$font_path\]/$encoded} 21 | fi 22 | 23 | # Append the processed line to the output file 24 | echo "$line" >> $OUTPUT_FILE 25 | done < "$INPUT_FILE" 26 | -------------------------------------------------------------------------------- /.github/changelog.hbs: -------------------------------------------------------------------------------- 1 | {{#each releases}} 2 | {{#if href}} 3 | ###{{#unless major}}#{{/unless}} [{{title}}]({{href}}) 4 | {{else}} 5 | #### {{title}} 6 | {{/if}} 7 | 8 | {{#if tag}} 9 | > {{niceDate}} 10 | {{/if}} 11 | 12 | {{#if summary}} 13 | {{summary}} 14 | {{/if}} 15 | 16 | {{#if fixes}} 17 | Fixes: 18 | {{#each fixes}} 19 | - {{#if commit.breaking}}**Breaking change:** {{/if}}{{commit.subject}} {{#each fixes}}#{{id}} {{/each}} 20 | {{/each}} 21 | {{/if}} 22 | 23 | {{#if commits}} 24 | Commits: 25 | {{#each commits}} 26 | - {{#if breaking}}**Breaking change:** {{/if}}{{subject}}{{#if href}} [`{{shorthash}}`]({{href}}){{/if}} 27 | {{/each}} 28 | {{/if}} 29 | 30 | {{#if merges}} 31 | PRs: 32 | {{#each merges}} 33 | - #{{id}} {{#if commit.breaking}}**Breaking change:** {{/if}}{{message}} 34 | {{/each}} 35 | {{/if}} 36 | 37 | {{/each}} 38 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | # To get started with Dependabot version updates, you'll need to specify which 2 | # package ecosystems to update and where the package manifests are located. 3 | # Please see the documentation for all configuration options: 4 | # https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates 5 | 6 | version: 2 7 | updates: 8 | - package-ecosystem: "npm" # See documentation for possible values 9 | directory: "/" # Location of package manifests 10 | schedule: 11 | interval: "weekly" 12 | - package-ecosystem: "github-actions" 13 | directory: "/" 14 | schedule: 15 | interval: "weekly" 16 | -------------------------------------------------------------------------------- /.github/prerelease.mjs: -------------------------------------------------------------------------------- 1 | import path from 'node:path'; 2 | import { readdirSync, readFile, readFileSync, writeFile } from 'fs'; 3 | 4 | const packageJson = path.resolve('./package.json'); 5 | const distDir = path.resolve('./dist'); 6 | 7 | try { 8 | const json = JSON.parse(readFileSync(packageJson)); 9 | readdirSync(distDir).forEach(file => { 10 | const fullName = path.resolve(distDir, file); 11 | console.log(fullName); 12 | readFile(fullName, 'utf8', function (err, data) { 13 | if (err) { 14 | return console.log(err); 15 | } 16 | data = data.replace(/\$version\$/g, json.version); 17 | 18 | writeFile(fullName, data, 'utf8', function (err) { 19 | if (err) return console.log(err); 20 | }); 21 | }); 22 | }); 23 | } catch (err) { 24 | console.error(err); 25 | process.exit(1); 26 | } 27 | -------------------------------------------------------------------------------- /.github/workflows/build.yml: -------------------------------------------------------------------------------- 1 | name: Build and Test Obsidian Plugin 2 | on: [push, pull_request] 3 | 4 | jobs: 5 | build: 6 | runs-on: ubuntu-latest 7 | 8 | steps: 9 | - uses: actions/checkout@v4 10 | 11 | - name: Use Node.js 12 | uses: actions/setup-node@v4 13 | with: 14 | node-version: '20.10' 15 | cache: 'npm' 16 | 17 | - name: Build and Test 18 | id: build 19 | run: | 20 | npm install 21 | npm run build 22 | -------------------------------------------------------------------------------- /.github/workflows/release.yml: -------------------------------------------------------------------------------- 1 | name: Release Obsidian Theme 2 | # Controls when the action will run. Workflow runs when manually triggered using the UI 3 | # or API. 4 | on: 5 | workflow_dispatch: 6 | inputs: 7 | version: 8 | description: 'New version or major, minor, patch' 9 | default: 'patch' 10 | required: true 11 | update-manifest: 12 | description: 'Update manifest.json' 13 | default: "true" 14 | required: true 15 | 16 | env: 17 | GH_BOT_EMAIL: "41898282+github-actions[bot]@users.noreply.github.com" 18 | GH_BOT_NAME: "GitHub Action" 19 | 20 | jobs: 21 | build: 22 | runs-on: ubuntu-latest 23 | outputs: 24 | version: ${{ steps.build.outputs.version }} 25 | steps: 26 | - uses: actions/checkout@v4 27 | with: 28 | fetch-depth: 0 # otherwise, you will failed to push refs to dest repo 29 | 30 | - name: Use Node.js 31 | uses: actions/setup-node@v4 32 | with: 33 | node-version: '20.10' 34 | cache: 'npm' 35 | 36 | # Create release notes 37 | - name: Build and Tag 38 | id: build 39 | env: 40 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 41 | run: | 42 | echo "${{ github.event.inputs.version }}" 43 | echo "${{ github.event.inputs.update-manifest }}" 44 | git config user.name ${{ env.GH_BOT_NAME }} 45 | git config user.email ${{ env.GH_BOT_EMAIL }} 46 | 47 | npm install 48 | npm version ${{ github.event.inputs.version }} --no-git-tag-version 49 | VERSION=$(grep '^ "version"' package.json | cut -d'"' -f4) 50 | echo $VERSION 51 | 52 | if [ "${{ github.event.inputs.update-manifest }}" = "true" ]; then 53 | sed -i 's|\(version":\) "[0-9\.]*"|\1 "'$VERSION'"|' manifest.json 54 | fi 55 | 56 | git add . 57 | git status 58 | git commit -m "🔖 $VERSION" 59 | git push 60 | 61 | git tag $VERSION 62 | git push --tags 63 | 64 | npm run release-notes -- ${VERSION} 65 | echo "version=${VERSION}" >> $GITHUB_OUTPUT 66 | 67 | # Create the release on github 68 | - name: Create Release 69 | id: create_release 70 | env: 71 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 72 | run: | 73 | gh release create "${{ steps.build.outputs.version }}" \ 74 | -F ./release-notes.md \ 75 | --title "Release ${{ steps.build.outputs.version }}" \ 76 | --discussion-category "Announcements" \ 77 | --verify-tag 78 | 79 | gh release upload "${{ steps.build.outputs.version }}" --clobber \ 80 | './manifest.json' \ 81 | './theme.css' \ 82 | './tasks-snippet.css' 83 | 84 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | .DS_Store 3 | .idea 4 | .dev-target.json 5 | app*.css 6 | 7 | dist 8 | linked 9 | src/fragments/_5* 10 | src/fragments/_6* 11 | src/dnd5e 12 | src/dnd5e-compendium.scss 13 | 14 | allthethings* 15 | campaign* 16 | statblock* 17 | compendium* 18 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # How Can I Contribute? 2 | 3 | ## Use discussions 4 | 5 | * 🙋 [Ask questions](/discussions/categories/q-a). 6 | * 💡 [Share ideas](/discussions/categories/ideas). 7 | * 🎉 [Show your stuff!](/discussions/categories/show-and-tell) 8 | * 💬 Engage with other community members in [General](/discussions/categories/general) 9 | 10 | ## Reporting a bug 11 | 12 | Bugs are tracked as [GitHub issues](https://guides.github.com/features/issues/). 13 | 14 | 1. Before opening an issue, please check to make sure you're using the latest version of the theme. 15 | ``` 16 | Settings -> Appearance -> find Themes, and click the "Manage" button. 17 | ``` 18 | Verify that `Ebullientworks` is the selected theme, and use the Update button to refresh it. 19 | 20 | 2. Toggle enabled snippets on and off to see if the intersection of those is causing the problem 21 | 22 | 3. Toggle plugins on and off to see if one of those is causing the problem (the fastest way is 23 | to temporarily enable safe-mode. If the issue does not occur when all plugins are off, use the 24 | "[binary search](https://en.wikipedia.org/wiki/Binary_search_algorithm) process of elimination" to 25 | figure out which plugin has conflicting styles. 26 | 27 | When you open the issue, include a screenshot or other short screen recording of what you see, 28 | and include any information you gathered from steps 2 and 3 so we can figure out how to get everything 29 | to play nicely. ;) 30 | 31 | ## Building the theme 32 | 33 | - Use `npm run build` to compile Sass in `src` into css in `dist`. 34 | - Use `npm run dev` to watch for changes in `src` and compile them into `dist`. 35 | 36 | `npm run dev` can also copy watched files into test vaults. 37 | Create a `.dev-target.json` that uses an output file in the dist directory as a key, and provides a string or array of desired targets as the value: 38 | 39 | ```json 40 | { 41 | "theme.css": [ 'test1/MyTheme.css', '...' ], 42 | "other.css": "thatOtherPlace/" 43 | } 44 | ``` 45 | Notes: 46 | - The source path should be relative to the `dist` directory. 47 | - Target paths should be relative to the project root. 48 | 49 | 50 | 51 | ## PRs 52 | 53 | Pull Requests are welcome! 54 | 55 | This theme uses Sass: 56 | 57 | - Keep changes as compact as you can. Do not use `!important`. 58 | - Release builds create the `*.css` files in the root directory. Do not edit them directly. 59 | 60 | Thank you! 🍻 61 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Creative Commons Legal Code 2 | 3 | CC0 1.0 Universal 4 | 5 | CREATIVE COMMONS CORPORATION IS NOT A LAW FIRM AND DOES NOT PROVIDE 6 | LEGAL SERVICES. DISTRIBUTION OF THIS DOCUMENT DOES NOT CREATE AN 7 | ATTORNEY-CLIENT RELATIONSHIP. CREATIVE COMMONS PROVIDES THIS 8 | INFORMATION ON AN "AS-IS" BASIS. CREATIVE COMMONS MAKES NO WARRANTIES 9 | REGARDING THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS 10 | PROVIDED HEREUNDER, AND DISCLAIMS LIABILITY FOR DAMAGES RESULTING FROM 11 | THE USE OF THIS DOCUMENT OR THE INFORMATION OR WORKS PROVIDED 12 | HEREUNDER. 13 | 14 | Statement of Purpose 15 | 16 | The laws of most jurisdictions throughout the world automatically confer 17 | exclusive Copyright and Related Rights (defined below) upon the creator 18 | and subsequent owner(s) (each and all, an "owner") of an original work of 19 | authorship and/or a database (each, a "Work"). 20 | 21 | Certain owners wish to permanently relinquish those rights to a Work for 22 | the purpose of contributing to a commons of creative, cultural and 23 | scientific works ("Commons") that the public can reliably and without fear 24 | of later claims of infringement build upon, modify, incorporate in other 25 | works, reuse and redistribute as freely as possible in any form whatsoever 26 | and for any purposes, including without limitation commercial purposes. 27 | These owners may contribute to the Commons to promote the ideal of a free 28 | culture and the further production of creative, cultural and scientific 29 | works, or to gain reputation or greater distribution for their Work in 30 | part through the use and efforts of others. 31 | 32 | For these and/or other purposes and motivations, and without any 33 | expectation of additional consideration or compensation, the person 34 | associating CC0 with a Work (the "Affirmer"), to the extent that he or she 35 | is an owner of Copyright and Related Rights in the Work, voluntarily 36 | elects to apply CC0 to the Work and publicly distribute the Work under its 37 | terms, with knowledge of his or her Copyright and Related Rights in the 38 | Work and the meaning and intended legal effect of CC0 on those rights. 39 | 40 | 1. Copyright and Related Rights. A Work made available under CC0 may be 41 | protected by copyright and related or neighboring rights ("Copyright and 42 | Related Rights"). Copyright and Related Rights include, but are not 43 | limited to, the following: 44 | 45 | i. the right to reproduce, adapt, distribute, perform, display, 46 | communicate, and translate a Work; 47 | ii. moral rights retained by the original author(s) and/or performer(s); 48 | iii. publicity and privacy rights pertaining to a person's image or 49 | likeness depicted in a Work; 50 | iv. rights protecting against unfair competition in regards to a Work, 51 | subject to the limitations in paragraph 4(a), below; 52 | v. rights protecting the extraction, dissemination, use and reuse of data 53 | in a Work; 54 | vi. database rights (such as those arising under Directive 96/9/EC of the 55 | European Parliament and of the Council of 11 March 1996 on the legal 56 | protection of databases, and under any national implementation 57 | thereof, including any amended or successor version of such 58 | directive); and 59 | vii. other similar, equivalent or corresponding rights throughout the 60 | world based on applicable law or treaty, and any national 61 | implementations thereof. 62 | 63 | 2. Waiver. To the greatest extent permitted by, but not in contravention 64 | of, applicable law, Affirmer hereby overtly, fully, permanently, 65 | irrevocably and unconditionally waives, abandons, and surrenders all of 66 | Affirmer's Copyright and Related Rights and associated claims and causes 67 | of action, whether now known or unknown (including existing as well as 68 | future claims and causes of action), in the Work (i) in all territories 69 | worldwide, (ii) for the maximum duration provided by applicable law or 70 | treaty (including future time extensions), (iii) in any current or future 71 | medium and for any number of copies, and (iv) for any purpose whatsoever, 72 | including without limitation commercial, advertising or promotional 73 | purposes (the "Waiver"). Affirmer makes the Waiver for the benefit of each 74 | member of the public at large and to the detriment of Affirmer's heirs and 75 | successors, fully intending that such Waiver shall not be subject to 76 | revocation, rescission, cancellation, termination, or any other legal or 77 | equitable action to disrupt the quiet enjoyment of the Work by the public 78 | as contemplated by Affirmer's express Statement of Purpose. 79 | 80 | 3. Public License Fallback. Should any part of the Waiver for any reason 81 | be judged legally invalid or ineffective under applicable law, then the 82 | Waiver shall be preserved to the maximum extent permitted taking into 83 | account Affirmer's express Statement of Purpose. In addition, to the 84 | extent the Waiver is so judged Affirmer hereby grants to each affected 85 | person a royalty-free, non transferable, non sublicensable, non exclusive, 86 | irrevocable and unconditional license to exercise Affirmer's Copyright and 87 | Related Rights in the Work (i) in all territories worldwide, (ii) for the 88 | maximum duration provided by applicable law or treaty (including future 89 | time extensions), (iii) in any current or future medium and for any number 90 | of copies, and (iv) for any purpose whatsoever, including without 91 | limitation commercial, advertising or promotional purposes (the 92 | "License"). The License shall be deemed effective as of the date CC0 was 93 | applied by Affirmer to the Work. Should any part of the License for any 94 | reason be judged legally invalid or ineffective under applicable law, such 95 | partial invalidity or ineffectiveness shall not invalidate the remainder 96 | of the License, and in such case Affirmer hereby affirms that he or she 97 | will not (i) exercise any of his or her remaining Copyright and Related 98 | Rights in the Work or (ii) assert any associated claims and causes of 99 | action with respect to the Work, in either case contrary to Affirmer's 100 | express Statement of Purpose. 101 | 102 | 4. Limitations and Disclaimers. 103 | 104 | a. No trademark or patent rights held by Affirmer are waived, abandoned, 105 | surrendered, licensed or otherwise affected by this document. 106 | b. Affirmer offers the Work as-is and makes no representations or 107 | warranties of any kind concerning the Work, express, implied, 108 | statutory or otherwise, including without limitation warranties of 109 | title, merchantability, fitness for a particular purpose, non 110 | infringement, or the absence of latent or other defects, accuracy, or 111 | the present or absence of errors, whether or not discoverable, all to 112 | the greatest extent permissible under applicable law. 113 | c. Affirmer disclaims responsibility for clearing rights of other persons 114 | that may apply to the Work or any use thereof, including without 115 | limitation any person's Copyright and Related Rights in the Work. 116 | Further, Affirmer disclaims responsibility for obtaining any necessary 117 | consents, permissions or other rights required for any use of the 118 | Work. 119 | d. Affirmer understands and acknowledges that Creative Commons is not a 120 | party to this document and has no duty or obligation with respect to 121 | this CC0 or use of the Work. 122 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Welcome to Ebullientworks Obsidian Theme 👋 [![GitHub tag (Latest by date)](https://img.shields.io/github/v/tag/ebullient/obsidian-theme-ebullientworks)](https://github.com/ebullient/obsidian-theme-ebullientworks/releases) ![GitHub all releases](https://img.shields.io/github/downloads/ebullient/obsidian-theme-ebullientworks/total?color=success) 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
Jump: SettingsAlt CheckboxesAdmonitionsTablesEmbedsColorsCustom accents
11 | 12 | ![Ebullient Works Theme](https://raw.githubusercontent.com/ebullient/obsidian-theme-ebullientworks/main/images/ebullientworks-theme.jpg) 13 | 14 | This is a dark and light theme for [Obsidian](https://obsidian.md), 15 | a note-taking application and Obsidian Publish, a static site generator. 16 | 17 | Headers are styled, sized, and responsive (meaning friendly for all screens) with and without stacked tabs enabled. 18 | Modals, tables, and other panels are also styled. 19 | 20 | Some light styling has also been applied for the following community plugins: 21 | 22 | - [Admonition](https://github.com/valentine195/obsidian-admonition) 23 | - [Calendar](https://github.com/liamcain/obsidian-calendar-plugin) 24 | - [Day Planner](https://github.com/lynchjames/obsidian-day-planner) 25 | - [Timelines](https://github.com/George-debug/obsidian-timeline) 26 | - [Tracker](https://github.com/pyrochlore/obsidian-tracker) 27 | 28 | This theme is compatible with custom task snippets from the [Snippetor](https://github.com/ebullient/obsidian-snippetor). 29 | 30 | ## Style Settings 31 | 32 | This theme does support style settings. Settable attributes: 33 | 34 | - (0.3.25) "Suppress/remove this theme's checkbox styles" 35 | Set this to true if you are going to use your own task snippet (💡 Check out [Snippetor](https://github.com/ebullient/obsidian-snippetor)!) 36 | 37 | - (0.6.1) "Suppress/remove this theme's tag styles" 38 | Set this to true if you are going to use your own tag snippet 39 | 40 | - (0.5.x) "View header actions to the left" 41 | Set this to true if the view header is visible, and you want the controls on the left side of the tab contents, rather than the right. 42 | 43 | - "Show external links in edit mode" 44 | If true, external links (or the content of Markdown links) will be shown in edit mode. 45 | External links are hidden by default. 46 | 47 | - (0.1.8) "Float front-matter in a box to the right" 48 | If true, front-matter in preview mode will be collapsed in a top-right container. 49 | 50 | - (0.5.x) "Hide the heading used to embed a document" 51 | If true, the heading used to embed a document will be hidden. 52 | 53 | - Custom Fonts 54 | 55 | - "Headings" 56 | Font for text headings (h1 to h6); empty will use default text font 57 | 58 | - (0.3.24) "Heading Font Caps Variant" 59 | Capitalization variant for h1 text headings 60 | 61 | - "Tags" 62 | Font for displaying inline tags; empty will use default text font 63 | 64 | - "Callout/admonition titles" 65 | Font for callout/admonition titles; empty will use default text font 66 | 67 | - Colors 68 | This allows you to select the primary or secondary color from the colors in the palette (purple, pink, green, teal, or blue). You can also select a "custom" accent color, in which case, you should define and enable your own snippet as described below. 69 | 70 | - "Primary accent color" 71 | Choose the primary accent color. You should define a snippet if you select primary-accent-custom. See the Theme's README. 72 | 73 | - "Secondary accent color" 74 | Choose the secondary accent color. You should define a snippet if you select secondary-accent-custom. See the Theme's README. 75 | 76 | ## Alternative Checkboxes 77 | 78 | This theme provides styles for the following checkbox values: 79 | 80 | | Syntax | Description | 81 | |----------|-------------| 82 | | `- [ ]` | Unchecked | 83 | | `- [x]` | Checked | 84 | | `- [-]` | Cancelled | 85 | | `- [/]` | In Progress | 86 | | `- [>]` | Deferred | 87 | | `- [!]` | Important | 88 | | `- [?]` | Question | 89 | | `- [r]` | Review | 90 | 91 | ## Admonitions and callouts 92 | 93 | As of Admonitions version 6.5.1, 94 | you can disable the color picker for admonitions (globally or per-admonition) 95 | to have colors picked up from CSS styles instead. 96 | 97 | All the default admonitions, in addition to two additional custom types, have been styled. 98 | 99 | Custom admonitions: 100 | 101 | - `chat` 102 | Styled with a speech bubble to represent a conversation of some kind 103 | 104 | - `excerpt` 105 | Styled similarly to quote, for a captured text snippet. 106 | 107 | - `reference` 108 | Styled for inline reference metadata. Compact, monospace font. 109 | 110 | - `toc` 111 | Styled to create a floating (hover:right) section for Table of Contents 112 | 113 | You can import these admonitions using [admonitions.json](https://raw.githubusercontent.com/ebullient/obsidian-theme-ebullientworks/main/admonitions.json) 114 | 115 | Here is what they look like (Callouts and Admonitions): 116 | 117 | ![Admonitions and Callouts](images/admonitions.png) 118 | 119 | ## Tables 120 | 121 | ![Table Styles](images/table-styles.png) 122 | 123 | To constrain the table content to the width of the pane, use: 124 | ```yaml 125 | --- 126 | cssclass: force-wrap 127 | --- 128 | ``` 129 | 130 | To prevent column headers from wrapping, use: 131 | ```yaml 132 | --- 133 | cssclass: word-wrap 134 | --- 135 | ``` 136 | 137 | ## Embeds 138 | 139 | To make embedded content "invisible" (same background color as the including page and much less padding), use the `invisible-embed` css class: 140 | 141 | ```yaml 142 | --- 143 | cssclass: invisible-embed 144 | --- 145 | ``` 146 | 147 | ## Colors 148 | 149 | All colors are sourced from [this palette](https://accessiblepalette.com/?lightness=98.2,93.9,87.5,82.5,74.8,66,48.4,30.6,19.4,10&C76E85=0,0&DD5755=0,0&d78e6e=0,-8&E1BA60=0,-10&5c7a62=0,0&3376AD=0,10&8E6787=0,0&808080=0,0&009698=0,-3) 150 | 151 | 152 | 157 |
153 | image 154 | 155 | image 156 |
158 | 159 | ### Creating your own accent colors 160 | 161 | A simple way to select colors that will work with this palette is by applying a grayscale filter to a selected hue. 162 | 163 | 1. Use the following URL to apply the grayscale filter to a color of your choice: 164 | https://grayscale.design/app?lums=71.05%2C60.94%2C48.16%2C35.39%2C17.24%2C6.39%2C2.80&palettes=%235c7a62%2C%238e6787&filters=0%7C0%2C0%7C0&names=green%2Cpurple&labels=%2C 165 | 166 | 2. Create a snippet that contains your customized colors. 167 | 168 | #### Example 169 | 170 | For example, let's use a REALLY BOLD RED: `#ae2012`. 171 | 172 | 1. If we visit the link above, we can scroll down a bit until we see a button "Add a color", and we paste this value (including the `#` in that field). This will show us something like this: 173 | 174 | ![](images/create-a-custom-accent-color.png) 175 | 176 | 2. Scroll down until you see `Step 3`, which is the step you need to export your colors. You'll want to use the CSS variables. 177 | 178 | If we want to use this red as the primary color: 179 | ``` 180 | .primary-accent-custom { 181 | --primary-accent-0: rgb(250, 210, 206); /* red-100 */ 182 | --primary-accent-1: rgb(248, 192, 187); /* red-200 */ 183 | --primary-accent-1-rgb: 248, 192, 187; /* Note removal of rgb() function */ 184 | --primary-accent-2: rgb(245, 163, 156); /* red-300 */ 185 | --primary-accent-3: rgb(241, 127, 117); /* red-400 */ 186 | --primary-accent-4: rgb(222, 40, 23); /* red-500 */ 187 | --primary-accent-4-rgb: 222, 40, 23; /* Note removal of rgb() function */ 188 | --primary-accent-5: rgb(142, 25, 15); /* red-600 */ 189 | --primary-accent-6: rgb(95, 17, 10); /* red-700 */ 190 | } 191 | ``` 192 | 193 | If we want to use this red as the secondary color: 194 | ``` 195 | .secondary-accent-custom { 196 | --secondary-accent-0: rgb(250, 210, 206); /* red-100 */ 197 | --secondary-accent-1: rgb(248, 192, 187); /* red-200 */ 198 | --secondary-accent-1-rgb: 248, 192, 187; /* Note removal of rgb() function */ 199 | --secondary-accent-2: rgb(245, 163, 156); /* red-300 */ 200 | --secondary-accent-3: rgb(241, 127, 117); /* red-400 */ 201 | --secondary-accent-4: rgb(222, 40, 23); /* red-500 */ 202 | --secondary-accent-4-rgb: 222, 40, 23; /* Note removal of rgb() function */ 203 | --secondary-accent-5: rgb(142, 25, 15); /* red-600 */ 204 | --secondary-accent-6: rgb(95, 17, 10); /* red-700 */ 205 | } 206 | ``` 207 | 208 | 3. Create a snippet (e.g. a file named`accent-colors.css`) containing this content in the `.obsidian/snippets` directory. Go to the Obsidian Appearance settings use the refresh button if necessary to find the snippet, and enable it. Provided you've selected the "custom" value in the primary/secondary style settings drop-down, you should be off to the races with this brilliant red. 209 | 210 | 211 | ### Changing tag colors 212 | 213 | As of 0.5.3 (Obsidian 0.16+ / 1.x), use the "accent color" setting on the appearance pane to set your tag color. Resetting the value will use the theme default. 214 | 215 | For 0.2.7 through 0.5.2, you can alter the color contrast (against the usual scale, 0-6) for tags in light or dark mode. 216 | 217 | ## Credits 218 | 219 | I've begged/borrowed/stolen CSS snippets from just about everywhere, but I started from vanilla and tried to be judicious about what to include to keep things lean. 220 | 221 | I frequently reference the following two themes, as they're often the quickest to consume a new CSS trick or snippet: 222 | 223 | - [Spectrum](https://github.com/Braweria/Spectrum) 224 | - [ITS Theme](https://github.com/SlRvb/Obsidian--ITS-Theme) 225 | 226 | If you have ideas or requests, please open an issue. ;) 227 | 228 | Buy Me A Coffee 229 | -------------------------------------------------------------------------------- /admonitions.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "type": "chat", 4 | "color": "171, 197, 176", 5 | "icon": { 6 | "name": "comment", 7 | "type": "font-awesome" 8 | }, 9 | "injectColor": false, 10 | "copy": false 11 | }, 12 | { 13 | "type": "excerpt", 14 | "color": "161, 126, 155", 15 | "icon": { 16 | "name": "quote-left", 17 | "type": "font-awesome" 18 | }, 19 | "injectColor": false, 20 | "copy": false 21 | }, 22 | { 23 | "type": "reference", 24 | "color": "183, 194, 204", 25 | "icon": { 26 | "name": "book", 27 | "type": "font-awesome" 28 | }, 29 | "injectColor": false, 30 | "copy": false 31 | }, 32 | { 33 | "type": "toc", 34 | "color": "#7d7d7d", 35 | "icon": { 36 | "type": "obsidian", 37 | "name": "lucide-list-ordered" 38 | }, 39 | "injectColor": false, 40 | "copy": false 41 | } 42 | ] 43 | -------------------------------------------------------------------------------- /build-dev.mjs: -------------------------------------------------------------------------------- 1 | import path from 'node:path'; 2 | import { copyFileSync, existsSync, readFileSync } from 'fs'; 3 | import chokidar from 'chokidar'; 4 | 5 | const devTargets = path.resolve('./.dev-target.json'); 6 | const distDir = path.resolve('./dist'); 7 | 8 | try { 9 | if (!existsSync(devTargets)) { 10 | console.log(`No ${devTargets} file found. Exiting.`); 11 | process.exit(0); 12 | } 13 | 14 | const data = JSON.parse(readFileSync(devTargets, 'utf-8')); 15 | 16 | // Initialize watcher. 17 | chokidar.watch(distDir, { 18 | awaitWriteFinish: { 19 | stabilityThreshold: 2000, 20 | pollInterval: 100 21 | } 22 | }).on('change', (f, stats) => { 23 | const key = path.basename(f); 24 | const targets = data[key]; 25 | if (stats) { 26 | console.log(`File ${f} changed size to ${stats.size}`); 27 | } 28 | if (targets === undefined) { 29 | return; 30 | } else if (Array.isArray(targets)) { 31 | targets.forEach((t) => { 32 | console.log(`copy ${key} to ${t}`); 33 | copyFileSync(f, path.resolve(t)); 34 | }) 35 | } else { 36 | console.log(`copy ${key} to ${targets}`); 37 | copyFileSync(f, path.resolve(targets)); 38 | } 39 | }); 40 | } catch (err) { 41 | console.error(err); 42 | process.exit(1); 43 | } 44 | -------------------------------------------------------------------------------- /build-push.mjs: -------------------------------------------------------------------------------- 1 | import path from 'node:path'; 2 | import { copyFileSync, existsSync, readFileSync } from 'fs'; 3 | 4 | const devTargets = path.resolve('./.dev-target.json'); 5 | const distDir = path.resolve('./dist'); 6 | 7 | try { 8 | if (!existsSync(devTargets)) { 9 | console.log(`No ${devTargets} file found. Exiting.`); 10 | process.exit(0); 11 | } 12 | 13 | const data = JSON.parse(readFileSync(devTargets, 'utf-8')); 14 | Object.keys(data).forEach((key) => { 15 | const srcFile = path.resolve(distDir, key); 16 | const targets = data[key]; 17 | if (targets === undefined) { 18 | return; 19 | } else if (Array.isArray(targets)) { 20 | targets.forEach((t) => { 21 | console.log(`copy ${key} to ${t}`); 22 | copyFileSync(srcFile, path.resolve(t)); 23 | }) 24 | } else { 25 | console.log(`copy ${key} to ${targets}`); 26 | copyFileSync(srcFile, path.resolve(targets)); 27 | } 28 | }); 29 | } catch (err) { 30 | console.error(err); 31 | process.exit(1); 32 | } 33 | -------------------------------------------------------------------------------- /colors.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | ebullientworks theme colors 4 | 5 | 6 |

Gray scale

7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 |
gray-light-7gray-light-7--gray-light-7: rgb(248, 248, 248)
gray-light-6gray-light-6--gray-light-6: rgb(245, 245, 245)
gray-light-5gray-light-5--gray-light-5: rgb(241, 241, 241)
gray-light-4gray-light-4--gray-light-4: rgb(235, 235, 235)
gray-light-3gray-light-3--gray-light-3: rgb(227, 227, 227)
gray-light-2gray-light-2--gray-light-2: rgb(217, 217, 217)
gray-light-1gray-light-1--gray-light-1: rgb(203, 203, 203)
graygray--gray: rgb(183, 183, 183)
gray-dark-1gray-dark-1--gray-dark-1: rgb(159, 159, 159)
gray-dark-2gray-dark-2--gray-dark-2: rgb(137, 137, 137)
gray-dark-3gray-dark-3--gray-dark-3: rgb(115, 115, 115)
gray-dark-4gray-dark-4--gray-dark-4: rgb(93, 93, 93)
gray-dark-5gray-dark-5--gray-dark-5: rgb(77, 77, 77)
gray-dark-6gray-dark-6--gray-dark-6: rgb(63, 63, 63)
gray-dark-7gray-dark-7--gray-dark-7: rgb(49, 49, 49)
gray-dark-8gray-dark-8--gray-dark-8: rgb(33, 33, 33)
gray-dark-9gray-dark-9--gray-dark-9: rgb(7, 7, 7)
77 | 78 |

Colors

79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | 208 | 209 | 210 | 211 | 212 | 213 | 214 | 215 | 216 | 217 | 218 | 219 | 220 | 221 | 222 | 223 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 232 | 233 | 234 | 235 | 236 | 237 | 238 | 239 | 240 | 241 |
yellow-brightyellow-bright--yellow-bright: 255, 232, 185
yellow-1yellow-1--yellow-1: rgb(255, 216, 99)
yellow-2yellow-2--yellow-2: rgb(255, 196, 19)
yellow-3yellow-3--yellow-3: rgb(234, 175, 0)
yellow-4yellow-4--yellow-4: rgb(204, 153, 0)
green-0green-0--green-0: rgb(211, 222, 214)
green-1green-1--green-1: rgb(194, 209, 198)
green-2green-2--green-2: rgb(169, 190, 174)
green-3green-3--green-3: rgb(139, 167, 145)
green-4green-4--green-4: rgb(92, 122, 99)
green-5green-5--green-5: rgb(57, 76, 62)
green-6green-6--green-6: rgb(38, 50, 41)
teal-0teal-0--teal-0: rgb(195, 226, 224)
teal-1teal-1--teal-1: rgb(169, 213, 211)
teal-2teal-2--teal-2: rgb(134, 196, 193)
teal-3teal-3--teal-3: rgb(89, 174, 170)
teal-4teal-4--teal-4: rgb(61, 126, 123)
teal-5teal-5--teal-5: rgb(38, 78, 76)
teal-6teal-6--teal-6: rgb(25, 51, 50)
blue-0blue-0--blue-0: rgb(202, 222, 239)
blue-1blue-1--blue-1: rgb(180, 209, 232)
blue-2blue-2--blue-2: rgb(148, 189, 223)
blue-3blue-3--blue-3: rgb(111, 166, 211)
blue-4blue-4--blue-4: rgb(53, 120, 175)
blue-5blue-5--blue-5: rgb(33, 75, 109)
blue-6blue-6--blue-6: rgb(22, 49, 72)
purple-0purple-0--purple-0: rgb(227, 216, 225)
purple-1purple-1--purple-1: rgb(216, 201, 213)
purple-2purple-2--purple-2: rgb(199, 178, 195)
purple-3purple-3--purple-3: rgb(180, 152, 175)
purple-4purple-4--purple-4: rgb(142, 103, 135)
purple-5purple-5--purple-5: rgb(88, 64, 84)
purple-6purple-6--purple-6: rgb(57, 42, 55)
pink-0pink-0--pink-0: rgb(239, 213, 220)
pink-1pink-1--pink-1: rgb(232, 196, 206)
pink-2pink-2--pink-2: rgb(223, 171, 185)
pink-3pink-3--pink-3: rgb(211, 141, 160)
pink-4pink-4--pink-4: rgb(187, 79, 108)
pink-5pink-5--pink-5: rgb(120, 46, 66)
pink-6pink-6--pink-6: rgb(79, 31, 44)
242 | 243 | 244 | 245 | -------------------------------------------------------------------------------- /images/admonitions.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebullient/obsidian-theme-ebullientworks/80b81fba75649cffa82a2029b235a24052db83f7/images/admonitions.png -------------------------------------------------------------------------------- /images/create-a-custom-accent-color.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebullient/obsidian-theme-ebullientworks/80b81fba75649cffa82a2029b235a24052db83f7/images/create-a-custom-accent-color.png -------------------------------------------------------------------------------- /images/ebullientworks-theme.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebullient/obsidian-theme-ebullientworks/80b81fba75649cffa82a2029b235a24052db83f7/images/ebullientworks-theme.jpg -------------------------------------------------------------------------------- /images/table-styles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebullient/obsidian-theme-ebullientworks/80b81fba75649cffa82a2029b235a24052db83f7/images/table-styles.png -------------------------------------------------------------------------------- /images/theme-colors.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebullient/obsidian-theme-ebullientworks/80b81fba75649cffa82a2029b235a24052db83f7/images/theme-colors.jpg -------------------------------------------------------------------------------- /images/theme-dark-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebullient/obsidian-theme-ebullientworks/80b81fba75649cffa82a2029b235a24052db83f7/images/theme-dark-code.png -------------------------------------------------------------------------------- /images/theme-light-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebullient/obsidian-theme-ebullientworks/80b81fba75649cffa82a2029b235a24052db83f7/images/theme-light-code.png -------------------------------------------------------------------------------- /images/thumbnail.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ebullient/obsidian-theme-ebullientworks/80b81fba75649cffa82a2029b235a24052db83f7/images/thumbnail.png -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Ebullientworks", 3 | "version": "1.0.2", 4 | "minAppVersion": "0.16.0", 5 | "author": "Ebullientworks", 6 | "authorUrl": "https://github.com/ebullient", 7 | "fundingUrl": "https://www.buymeacoffee.com/ebullient" 8 | } 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "obsidian-theme-ebullientworks", 3 | "version": "1.0.2", 4 | "private": true, 5 | "description": "An Obsidian Theme", 6 | "author": "Erin Schnabel", 7 | "license": "MIT", 8 | "homepage": "https://github.com/ebullient", 9 | "scripts": { 10 | "build": "npx sass --no-source-map --stop-on-error src:dist", 11 | "push": "node build-push.mjs", 12 | "dev": "npm-run-all --parallel watch:scss watch:css", 13 | "watch:scss": "npx sass --watch --embed-source-map src:dist", 14 | "watch:css": "node build-dev.mjs", 15 | "preversion": "npm run build", 16 | "version": "auto-changelog -p && node .github/prerelease.mjs && cp -v dist/*.css .", 17 | "release-notes": "run() { auto-changelog --stdout --hide-credit --hide-empty-releases --template .github/changelog.hbs -v $1 --starting-version $1 > release-notes.md; }; run", 18 | "test-version": "auto-changelog -p && node .github/prerelease.mjs" 19 | }, 20 | "repository": { 21 | "type": "git", 22 | "url": "git+https://github.com/ebullient/obsidian-theme-ebullientworks.git" 23 | }, 24 | "bugs": { 25 | "url": "https://github.com/ebullient/obsidian-theme-ebullientworks/issues" 26 | }, 27 | "devDependencies": { 28 | "auto-changelog": "^2.5.0", 29 | "chokidar": "^4.0.3", 30 | "npm-run-all": "^4.1.5", 31 | "sass": "^1.87.0" 32 | }, 33 | "auto-changelog": { 34 | "backfillLimit": false, 35 | "commitLimit": false, 36 | "ignoreCommitPattern": "(🔖|🔨|changelog|.* README\\.).*" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/fragments/_00-heading.scss: -------------------------------------------------------------------------------- 1 | /* 2 | Ebullientworks $version$. A dark and light theme for Obsidian. 3 | 4 | https://github.com/ebullient/obsidian-theme-ebullientworks 5 | */ 6 | -------------------------------------------------------------------------------- /src/fragments/_00-stylesettings.scss: -------------------------------------------------------------------------------- 1 | /* @settings 2 | 3 | name: Ebullientworks theme settings 4 | id: ebullientworks-theme-16 5 | settings: 6 | - 7 | id: ebullientworks-nix-checkbox 8 | title: Suppress/Remove this theme's checkbox styles 9 | description: Set this to true if you are going to use your own task snippet 10 | type: class-toggle 11 | default: false 12 | - 13 | id: ebullientworks-nix-tags 14 | title: Suppress/Remove this theme's tag styles 15 | description: Set this to true if you are going to use your own tag snippet 16 | type: class-toggle 17 | default: false 18 | - 19 | id: ebullientworks-nix-heading-marker 20 | title: Suppress/Remove leading § from headings 21 | description: Set this to true to remove the § from headings in reading mode 22 | type: class-toggle 23 | default: false 24 | - 25 | id: ebullientworks-reverse-view-header-actions 26 | title: View header actions to the left 27 | description: Set this to true if the view header is visible, and you want the controls on the left side 28 | type: class-toggle 29 | default: false 30 | - 31 | id: ebullientworks-show-edit-mode-external-links 32 | title: Show external links in edit mode 33 | description: If true, external links (or the content of markdown links) will be shown in edit mode. External links are hidden by default. 34 | type: class-toggle 35 | default: false 36 | - 37 | id: ebullientworks-floating-frontmatter 38 | title: Float front-matter in a box to the right 39 | description: If true, front-matter in preview mode will be collapsed in a top-right container. 40 | type: class-toggle 41 | default: false 42 | - 43 | id: ebullientworks-hide-embedded-heading 44 | title: Hide the heading used to embed a document 45 | description: If true, the heading used to embed a document will be hidden. 46 | type: class-toggle 47 | default: false 48 | - 49 | id: ebullientworks-fonts 50 | title: Fonts 51 | type: heading 52 | level: 3 53 | collapsed: true 54 | - 55 | title: Headings 56 | description: Font for text headings (h1 to h6); empty will use default text font 57 | id: ebw-header-font 58 | type: variable-text 59 | default: "'Architects Daughter'" 60 | - 61 | title: Heading Font Caps Variant 62 | description: Capitalization variant for h1 text headings 63 | id: ebw-header-font-caps-variant 64 | type: variable-select 65 | allowEmpty: false 66 | default: normal 67 | options: 68 | - value: normal 69 | label: normal 70 | - value: small-caps 71 | label: small-caps 72 | - value: all-small-caps 73 | label: all-small-caps 74 | - value: all-petite-caps 75 | label: all-petite-caps 76 | - value: petite-caps 77 | label: petite-caps 78 | - value: titling-caps 79 | label: titling-caps 80 | - value: unicase 81 | label: unicase 82 | - value: inherit 83 | label: inherit 84 | - value: initial 85 | label: initial 86 | - value: unset 87 | label: unset 88 | - 89 | title: Tags 90 | description: Font for tags; empty will use default text font 91 | id: ebw-font-tags 92 | type: variable-text 93 | default: "'Architects Daughter'" 94 | - 95 | id: ebw-font-callout-title 96 | title: Callout/admonition titles 97 | description: Font for callout/admonition titles; empty will use default text font 98 | type: variable-text 99 | default: "'Architects Daughter'" 100 | - 101 | id: ebw-p-modifier 102 | title: Paragraph spacing modifier 103 | description: Gap between paragraphs (line height * this modifier) 104 | type: variable-number-slider 105 | default: 1 106 | min: .4 107 | max: 3 108 | step: .1 109 | - 110 | id: ebw-header-modifier 111 | title: Header spacing modifier 112 | description: Gap before headings (paragraph spacing * this modifier) 113 | type: variable-number-slider 114 | default: 1.4 115 | min: .8 116 | max: 3 117 | step: .1 118 | - 119 | id: other-font-settings 120 | title: Use Appearance to customize text/monospace fonts 121 | description: (This has no effect. ;) ) 122 | type: class-toggle 123 | default: false 124 | - 125 | id: ebullientworks-colors 126 | title: Colors 127 | type: heading 128 | level: 3 129 | collapsed: true 130 | - 131 | title: Primary accent color 132 | id: ebullientworks-primary-accent 133 | description: Choose the primary accent color. You must define a snippet if you select primary-accent-custom. See the Theme's README. 134 | type: class-select 135 | allowEmpty: false 136 | default: primary-accent-purple 137 | options: 138 | - primary-accent-purple 139 | - primary-accent-pink 140 | - primary-accent-red 141 | - primary-accent-orange 142 | - primary-accent-green 143 | - primary-accent-cyan 144 | - primary-accent-blue 145 | - primary-accent-custom 146 | - 147 | title: Secondary accent color 148 | id: ebullientworks-secondary-accent 149 | description: Choose the secondary accent color. You must define a snippet if you select secondary-accent-custom. See the Theme's README. 150 | type: class-select 151 | allowEmpty: false 152 | default: secondary-accent-green 153 | options: 154 | - secondary-accent-purple 155 | - secondary-accent-pink 156 | - secondary-accent-red 157 | - secondary-accent-orange 158 | - secondary-accent-green 159 | - secondary-accent-cyan 160 | - secondary-accent-blue 161 | - secondary-accent-custom 162 | */ 163 | -------------------------------------------------------------------------------- /src/fragments/_01-color-palette.scss: -------------------------------------------------------------------------------- 1 | body { 2 | // https://accessiblepalette.com/?lightness=98.2,93.9,87.5,82.5,74.8,66,48.4,30.6,19.4,10&C76E85=0,0&DD5755=0,0&d78e6e=0,-8&E1BA60=0,-10&5c7a62=0,0&3376AD=0,10&8E6787=0,0&808080=0,0&009698=0,-3 3 | // Red 4 | --red-0: #f6d3d3; 5 | --red-1: #f3c2c1; 6 | --red-2: #eda6a5; 7 | --red-3: #e68584; 8 | --red-4: #c24c4a; 9 | --red-5: #7a302f; 10 | --red-6: #50201f; 11 | --red-1-rgb: 243,194,193; 12 | --red-2-rgb: 237,166,165; 13 | --red-3-rgb: 230,133,132; 14 | --red-4-rgb: 194,76,74; 15 | --red-5-rgb: 122,48,47; 16 | 17 | // Orange 18 | --orange-0: #f1d6cb; 19 | --orange-1: #ecc5b7; 20 | --orange-2: #e3ac97; 21 | --orange-3: #da8d73; 22 | --orange-4: #9d6553; 23 | --orange-5: #633f34; 24 | --orange-6: #412922; 25 | --orange-1-rgb: 236,197,183; 26 | --orange-2-rgb: 227,172,151; 27 | --orange-4-rgb: 157,101,83; 28 | --orange-5-rgb: 99,63,52; 29 | 30 | // Yellow 31 | --yellow-bright: #fdfaf3; 32 | --yellow-0: #f1d9a9; 33 | --yellow-1: #ecc986; 34 | --yellow-2: #e0b15e; 35 | --yellow-3: #c49a52; 36 | --yellow-4: #8d6e3b; 37 | --yellow-5: #594525; 38 | --yellow-1-rgb: 241,217,169; 39 | --yellow-2-rgb: 236,201,134; 40 | --yellow-3-rgb: 196,154,82; 41 | --yellow-4-rgb: 141,110,59; 42 | 43 | // Gray-Green 44 | --green-0: #d6ddd7; 45 | --green-1: #c5d0c8; 46 | --green-2: #adbcb0; 47 | --green-3: #91a695; 48 | --green-4: #5c7a62; 49 | --green-5: #3a4d3e; 50 | --green-6: #263228; 51 | --green-1-rgb: 197,208,200; 52 | --green-2-rgb: 173,188,176; 53 | --green-4-rgb: 92,122,98; 54 | --green-5-rgb: 58,77,62; 55 | 56 | // Cyan 57 | --cyan-0: #bbe3e3; 58 | --cyan-1: #9fd8d8; 59 | --cyan-2: #74c6c5; 60 | --cyan-3: #41b0b0; 61 | --cyan-4: #058080; 62 | --cyan-5: #03616E; 63 | --cyan-6: #024448; 64 | --cyan-1-rgb: 187,210,209; 65 | --cyan-2-rgb: 158,190,188; 66 | --cyan-4-rgb: 62,125,121; 67 | --cyan-5-rgb: 3, 97, 110; 68 | 69 | // Blue 70 | --blue-0: #ceddeb; 71 | --blue-1: #bbd0e4; 72 | --blue-2: #9fbbd8; 73 | --blue-3: #7fa4ca; 74 | --blue-4: #4575ae; 75 | --blue-5: #2c496e; 76 | --blue-6: #1d3048; 77 | --blue-1-rgb: 187,208,228; 78 | --blue-2-rgb: 159,187,216; 79 | --blue-4-rgb: 69,117,174; 80 | --blue-5-rgb: 44,73,110; 81 | 82 | // Purple 83 | --purple-0: #e2d9e1; 84 | --purple-1: #d7c9d5; 85 | --purple-2: #c6b2c3; 86 | --purple-3: #b399ae; 87 | --purple-4: #8e6787; 88 | --purple-5: #594054; 89 | --purple-6: #392a37; 90 | --purple-1-rgb: 215,201,213; 91 | --purple-2-rgb: 198,178,195; 92 | --purple-4-rgb: 142,103,135; 93 | --purple-5-rgb: 89,64,84; 94 | 95 | // Pink 96 | --pink-0: #efd5dc; 97 | --pink-1: #e8c4ce; 98 | --pink-2: #deaab8; 99 | --pink-3: #d38d9f; 100 | --pink-4: #a75c70; 101 | --pink-5: #693a46; 102 | --pink-6: #45262e; 103 | --pink-1-rgb: 232,196,206; 104 | --pink-2-rgb: 222,170,184; 105 | --pink-4-rgb: 167,92,112; 106 | --pink-5-rgb: 105,58,70; 107 | 108 | // Gray 109 | --gray-light-8:#fafafa; 110 | --gray-light-7:#f8f8f8; 111 | --gray-light-6:#f5f5f5; 112 | --gray-light-5:#f1f1f1; 113 | --gray-light-4:#ebebeb; 114 | --gray-light-3:#e3e3e3; 115 | --gray-light-2:#dbdbdb; // 0 116 | --gray-light-1:#cdcdcd; // 1 117 | --gray: #b8b8b8; // 2 118 | --gray-dark-1: #a0a0a0; // 3 119 | --gray-dark-2: #898989; 120 | --gray-dark-3: #737373; // 4 121 | --gray-dark-4: #5d5d5d; 122 | --gray-dark-5: #484848; // 5 123 | --gray-dark-6: #3f3f3f; 124 | --gray-dark-7: #2f2f2f; // 6 125 | --gray-dark-75:#272727; 126 | --gray-dark-8: #212121; 127 | --gray-dark-85:#1e1e1e; 128 | --gray-dark-9: #1b1b1b; 129 | --gray-dark-10:#070707; 130 | 131 | // Pink accent 132 | --accent-h: 344; 133 | --accent-s: 30%; 134 | --accent-l: 51%; 135 | 136 | // Default primary / secondary accent 137 | --primary-accent-0: var(--purple-0); 138 | --primary-accent-1: var(--purple-1); 139 | --primary-accent-2: var(--purple-2); 140 | --primary-accent-3: var(--purple-3); 141 | --primary-accent-4: var(--purple-4); 142 | --primary-accent-5: var(--purple-5); 143 | --primary-accent-6: var(--purple-6); 144 | --primary-accent-1-rgb: var(--purple-1-rgb); 145 | --primary-accent-4-rgb: var(--purple-4-rgb); 146 | 147 | --secondary-accent-0: var(--green-0); 148 | --secondary-accent-1: var(--green-1); 149 | --secondary-accent-2: var(--green-2); 150 | --secondary-accent-3: var(--green-3); 151 | --secondary-accent-4: var(--green-4); 152 | --secondary-accent-5: var(--green-5); 153 | --secondary-accent-6: var(--green-6); 154 | --secondary-accent-1-rgb: var(--green-1-rgb); 155 | --secondary-accent-4-rgb: var(--green-4-rgb); 156 | } 157 | -------------------------------------------------------------------------------- /src/fragments/_01a-color-accents.scss: -------------------------------------------------------------------------------- 1 | .primary-accent-red { 2 | --primary-accent-0: var(--red-0); 3 | --primary-accent-1: var(--red-1); 4 | --primary-accent-2: var(--red-2); 5 | --primary-accent-3: var(--red-3); 6 | --primary-accent-4: var(--red-4); 7 | --primary-accent-5: var(--red-5); 8 | --primary-accent-6: var(--red-6); 9 | --primary-accent-1-rgb: var(--red-1-rgb); 10 | --primary-accent-4-rgb: var(--red-4-rgb); 11 | } 12 | .primary-accent-orange { 13 | --primary-accent-0: var(--orange-0); 14 | --primary-accent-1: var(--orange-1); 15 | --primary-accent-2: var(--orange-2); 16 | --primary-accent-3: var(--orange-3); 17 | --primary-accent-4: var(--orange-4); 18 | --primary-accent-5: var(--orange-5); 19 | --primary-accent-6: var(--orange-6); 20 | --primary-accent-1-rgb: var(--orange-1-rgb); 21 | --primary-accent-4-rgb: var(--orange-4-rgb); 22 | } 23 | .primary-accent-green { 24 | --primary-accent-0: var(--green-0); 25 | --primary-accent-1: var(--green-1); 26 | --primary-accent-2: var(--green-2); 27 | --primary-accent-3: var(--green-3); 28 | --primary-accent-4: var(--green-4); 29 | --primary-accent-5: var(--green-5); 30 | --primary-accent-6: var(--green-6); 31 | --primary-accent-1-rgb: var(--green-1-rgb); 32 | --primary-accent-4-rgb: var(--green-4-rgb); 33 | } 34 | .primary-accent-cyan { 35 | --primary-accent-0: var(--cyan-0); 36 | --primary-accent-1: var(--cyan-1); 37 | --primary-accent-2: var(--cyan-2); 38 | --primary-accent-3: var(--cyan-3); 39 | --primary-accent-4: var(--cyan-4); 40 | --primary-accent-5: var(--cyan-5); 41 | --primary-accent-6: var(--cyan-6); 42 | --primary-accent-1-rgb: var(--cyan-1-rgb); 43 | --primary-accent-4-rgb: var(--cyan-4-rgb); 44 | } 45 | .primary-accent-blue { 46 | --primary-accent-0: var(--blue-0); 47 | --primary-accent-1: var(--blue-1); 48 | --primary-accent-2: var(--blue-2); 49 | --primary-accent-3: var(--blue-3); 50 | --primary-accent-4: var(--blue-4); 51 | --primary-accent-5: var(--blue-5); 52 | --primary-accent-6: var(--blue-6); 53 | --primary-accent-1-rgb: var(--blue-1-rgb); 54 | --primary-accent-4-rgb: var(--blue-4-rgb); 55 | } 56 | .primary-accent-purple { 57 | --primary-accent-0: var(--purple-0); 58 | --primary-accent-1: var(--purple-1); 59 | --primary-accent-2: var(--purple-2); 60 | --primary-accent-3: var(--purple-3); 61 | --primary-accent-4: var(--purple-4); 62 | --primary-accent-5: var(--purple-5); 63 | --primary-accent-6: var(--purple-6); 64 | --primary-accent-1-rgb: var(--purple-1-rgb); 65 | --primary-accent-4-rgb: var(--purple-4-rgb); 66 | } 67 | .primary-accent-pink { 68 | --primary-accent-0: var(--pink-0); 69 | --primary-accent-1: var(--pink-1); 70 | --primary-accent-2: var(--pink-2); 71 | --primary-accent-3: var(--pink-3); 72 | --primary-accent-4: var(--pink-4); 73 | --primary-accent-5: var(--pink-5); 74 | --primary-accent-6: var(--pink-6); 75 | --primary-accent-1-rgb: var(--pink-1-rgb); 76 | --primary-accent-4-rgb: var(--pink-4-rgb); 77 | } 78 | .secondary-accent-red { 79 | --secondary-accent-0: var(--red-0); 80 | --secondary-accent-1: var(--red-1); 81 | --secondary-accent-2: var(--red-2); 82 | --secondary-accent-3: var(--red-3); 83 | --secondary-accent-4: var(--red-4); 84 | --secondary-accent-5: var(--red-5); 85 | --secondary-accent-6: var(--red-6); 86 | --secondary-accent-1-rgb: var(--red-1-rgb); 87 | --secondary-accent-4-rgb: var(--red-4-rgb); 88 | } 89 | .secondary-accent-orange { 90 | --secondary-accent-0: var(--orange-0); 91 | --secondary-accent-1: var(--orange-1); 92 | --secondary-accent-2: var(--orange-2); 93 | --secondary-accent-3: var(--orange-3); 94 | --secondary-accent-4: var(--orange-4); 95 | --secondary-accent-5: var(--orange-5); 96 | --secondary-accent-6: var(--orange-6); 97 | --secondary-accent-1-rgb: var(--orange-1-rgb); 98 | --secondary-accent-4-rgb: var(--orange-4-rgb); 99 | } 100 | .secondary-accent-green { 101 | --secondary-accent-0: var(--green-0); 102 | --secondary-accent-1: var(--green-1); 103 | --secondary-accent-2: var(--green-2); 104 | --secondary-accent-3: var(--green-3); 105 | --secondary-accent-4: var(--green-4); 106 | --secondary-accent-5: var(--green-5); 107 | --secondary-accent-6: var(--green-6); 108 | --secondary-accent-1-rgb: var(--green-1-rgb); 109 | --secondary-accent-4-rgb: var(--green-4-rgb); 110 | } 111 | .secondary-accent-cyan { 112 | --secondary-accent-0: var(--cyan-0); 113 | --secondary-accent-1: var(--cyan-1); 114 | --secondary-accent-2: var(--cyan-2); 115 | --secondary-accent-3: var(--cyan-3); 116 | --secondary-accent-4: var(--cyan-4); 117 | --secondary-accent-5: var(--cyan-5); 118 | --secondary-accent-6: var(--cyan-6); 119 | --secondary-accent-1-rgb: var(--cyan-1-rgb); 120 | --secondary-accent-4-rgb: var(--cyan-4-rgb); 121 | } 122 | .secondary-accent-blue { 123 | --secondary-accent-0: var(--blue-0); 124 | --secondary-accent-1: var(--blue-1); 125 | --secondary-accent-2: var(--blue-2); 126 | --secondary-accent-3: var(--blue-3); 127 | --secondary-accent-4: var(--blue-4); 128 | --secondary-accent-5: var(--blue-5); 129 | --secondary-accent-6: var(--blue-6); 130 | --secondary-accent-1-rgb: var(--blue-1-rgb); 131 | --secondary-accent-4-rgb: var(--blue-4-rgb); 132 | } 133 | .secondary-accent-purple { 134 | --secondary-accent-0: var(--purple-0); 135 | --secondary-accent-1: var(--purple-1); 136 | --secondary-accent-2: var(--purple-2); 137 | --secondary-accent-3: var(--purple-3); 138 | --secondary-accent-4: var(--purple-4); 139 | --secondary-accent-5: var(--purple-5); 140 | --secondary-accent-6: var(--purple-6); 141 | --secondary-accent-1-rgb: var(--purple-1-rgb); 142 | --secondary-accent-4-rgb: var(--purple-4-rgb); 143 | } 144 | .secondary-accent-pink { 145 | --secondary-accent-0: var(--pink-0); 146 | --secondary-accent-1: var(--pink-1); 147 | --secondary-accent-2: var(--pink-2); 148 | --secondary-accent-3: var(--pink-3); 149 | --secondary-accent-4: var(--pink-4); 150 | --secondary-accent-5: var(--pink-5); 151 | --secondary-accent-6: var(--pink-6); 152 | --secondary-accent-1-rgb: var(--pink-1-rgb); 153 | --secondary-accent-4-rgb: var(--pink-4-rgb); 154 | } 155 | -------------------------------------------------------------------------------- /src/fragments/_02-fonts.scss: -------------------------------------------------------------------------------- 1 | // Want a different font? This is the file to change! (02-fonts.scss) 2 | body { 3 | // style settings baseline 4 | --ebw-font-text: 'IBM Plex Sans', Helvetica Neue; 5 | --ebw-font-monospace: 'Fira Code', 'Source Code Pro', Jetbrains Mono; 6 | --ebw-header-font: 'Architects Daughter'; 7 | --ebw-header-font-caps-variant: normal; 8 | --ebw-font-tags: var(--ebw-header-font); 9 | --ebw-font-callout-title: var(--ebw-header-font); 10 | 11 | --font-interface-theme: var(--ebw-font-text); 12 | --font-text-theme: var(--ebw-font-text); 13 | --font-monospace-theme: var(--ebw-font-monospace); 14 | --font-mermaid: var(--ebw-font-monospace); 15 | 16 | --ebw-p-modifier: 1; 17 | --ebw-header-modifier: 1.4; 18 | 19 | /* Calculates the spacings from the variables above */ 20 | --p-spacing: calc(var(--font-text-size) * var(--ebw-p-modifier)); 21 | --heading-spacing: calc(var(--p-spacing) * var(--ebw-header-modifier)); 22 | } 23 | -------------------------------------------------------------------------------- /src/fragments/_03-core-theme-dark.scss: -------------------------------------------------------------------------------- 1 | .theme-dark { 2 | --background-primary: var(--gray-dark-85); // Note background 3 | --background-primary-alt: var(--gray-dark-75); // Note title background 4 | 5 | --background-secondary: var(--gray-dark-7); // Sidebar/modal background, active/hover tab nav items, tab content, drag ghost, menu item hover 6 | --background-secondary-alt: var(--gray-dark-8); // muted button, checkbox container, kbd, modal border, modal button, tab nav items, vertical tab header, clickable tree item, card, drag ghost border 7 | 8 | --background-modifier-hover: rgba(var(--mono-rgb-100), 0.075); 9 | --background-modifier-active-hover: hsla(var(--interactive-accent-hsl), 0.15); 10 | 11 | --background-modifier-border: var(--gray-dark-9); // Border outline of quotes, tables, line breaks 12 | --background-modifier-border-hover: black; 13 | --background-modifier-border-focus: var(--gray-dark-10); 14 | 15 | --background-modifier-error-rgb: var(--red-5-rgb); // Ctrl F Search Background 16 | --background-modifier-error: var(--red-5); // with text-on-accent / Delete Screen Button 17 | --background-modifier-error-hover: var(--red-4); 18 | 19 | --background-modifier-success-rgb: var(--green-5-rgb); // Publish Upload Success Background 20 | --background-modifier-success: var(--green-5); // Publish Upload Success Background 21 | 22 | --background-modifier-warning: var(--yellow-4); // Warning Background 23 | --background-modifier-warning-hover: var(--yellow-3); 24 | --background-modifier-info: var(--blue-5); 25 | 26 | --modifier-text: var(--gray-light-8); 27 | --modifier-text-accent: var(--gray-light-7); 28 | 29 | // tooltip 30 | --background-modifier-message: var(--gray-dark-6); 31 | 32 | --background-modifier-form-field: var(--gray-dark-6); 33 | --background-modifier-form-field-highlighted: rgba(0, 0, 0, 0.22); // Search Bar Active Highlight 34 | 35 | --background-modifier-box-shadow: rgba(0, 0, 0, 0.3); 36 | --background-modifier-cover: rgba(0, 0, 0, 0.8); // Obsidian Title Bar 37 | 38 | --text-accent: var(--primary-accent-2); // Links 39 | --text-accent-hover: var(--primary-accent-1); 40 | 41 | --text-normal: var(--gray-light-1); // Text body of note 42 | --text-muted: var(--gray); // Text darker for sidebar, toggles, inactive, tags, etc 43 | --text-faint: var(--gray-dark-1); // Link brackets color 44 | 45 | --text-error: var(--red-3); 46 | --text-success: var(--green-3); 47 | 48 | --text-highlight-fg: var(--gray-dark-7); 49 | --text-highlight-bg: var(--primary-accent-2); 50 | --text-highlight-bg-rgb: var(--primary-accent-2-rgb); 51 | --text-selection: rgba(var(--primary-accent-4-rgb), 0.2); 52 | --text-selection-active: rgba(var(--primary-accent-4-rgb), 0.01); 53 | 54 | .is-flashing { 55 | --text-highlight-fg: var(--text-normal); 56 | --text-highlight-bg: rgba(var(--primary-accent-4-rgb), 0.15); 57 | --text-highlight-bg-rgb: var(--primary-accent-4-rgb); 58 | 59 | mark { 60 | --text-highlight-fg: var(--gray-dark-7); 61 | --text-highlight-bg: var(--primary-accent-2); 62 | --text-highlight-bg-rgb: var(--primary-accent-2-rgb); 63 | } 64 | } 65 | 66 | --indentation-guide: var(--gray-dark-7); 67 | --indentation-guide-active: var(--gray-dark-6); 68 | 69 | // Text on accent should work as foreground for all interactive elements 70 | --text-on-accent: var(--gray-light-8); // Program Title bar text 71 | --interactive-hover: var(--primary-accent-4); // Button hover text; pin 72 | --interactive-normal: var(--gray-dark-6); 73 | --interactive-accent: var(--primary-accent-5); // Workspace Note Title Underline 74 | --interactive-accent-hover: var(--primary-accent-4); // Menu Button Hover 75 | --interactive-toggle: var(--secondary-accent-4); 76 | --interactive-disabled: var(--background-modifier-form-field); 77 | 78 | --ebw-alpha2: rgba(0, 0, 0, 0.2); 79 | --ebw-alpha4: rgba(0, 0, 0, 0.4); 80 | 81 | // Color Spectrum 82 | --color-red-rgb: var(--red-2-rgb); 83 | --color-red: var(--red-2); 84 | --color-orange-rgb: var(--orange-2-rgb); 85 | --color-orange: var(--orange-2); 86 | --color-yellow-rgb: var(--yellow-2-rgb); 87 | --color-yellow: var(--yellow-2); 88 | --color-green-rgb: var(--green-2-rgb); 89 | --color-green: var(--green-2); 90 | --color-cyan-rgb: var(--cyan-2-rgb); 91 | --color-cyan: var(--cyan-2); 92 | --color-blue-rgb: var(--blue-2-rgb); 93 | --color-blue: var(--blue-2); 94 | --color-purple-rgb: var(--purple-2-rgb); 95 | --color-purple: var(--purple-2); 96 | --color-pink-rgb: var(--pink-2-rgb); 97 | --color-pink: var(--pink-2); 98 | 99 | --color-base-00: var(--gray-dark-10); 100 | --color-base-05: var(--gray-dark-9); 101 | --color-base-10: var(--gray-dark-85); 102 | --color-base-20: var(--gray-dark-8); 103 | --color-base-25: var(--gray-dark-75); 104 | --color-base-30: var(--gray-dark-7); 105 | --color-base-35: var(--gray-dark-6); 106 | --color-base-40: var(--gray-dark-5); 107 | --color-base-50: var(--gray-dark-3); 108 | --color-base-60: var(--gray-dark-1); 109 | --color-base-70: var(--gray); 110 | --color-base-100: var(--gray-light-1); 111 | 112 | .sync-status-icon { 113 | &.mod-working { 114 | color: var(--primary-accent-4); 115 | } 116 | &.mod-error { 117 | color: var(--red-4); 118 | } 119 | } 120 | 121 | &.is-tablet { 122 | --titlebar-background: var(--background-secondary); 123 | --titlebar-background-focused: var(--background-secondary); 124 | --interactive-normal: var(--background-primary-alt); 125 | } 126 | } 127 | -------------------------------------------------------------------------------- /src/fragments/_03-core-theme-light.scss: -------------------------------------------------------------------------------- 1 | .theme-light { 2 | --background-primary: var(--gray-light-7); // Note background 3 | --background-primary-alt: var(--gray-light-5); // Note title background 4 | 5 | --background-secondary: var(--gray-light-3); // Sidebar background 6 | --background-secondary-alt: var(--gray-light-4); // Sidebar title background 7 | 8 | --background-modifier-hover: rgba(0, 0, 0, 0.075); 9 | --background-modifier-active-hover: hsla(var(--interactive-accent-hsl), 0.15); 10 | 11 | --background-modifier-border: var(--gray-light-1); // Border outline of quotes, tables, line breaks 12 | --background-modifier-border-hover: var(--gray-light-2); 13 | --background-modifier-border-focus: var(--gray); 14 | 15 | --background-modifier-error-rgb: var(--red-4-rgb); // Ctrl F Search Background 16 | --background-modifier-error: var(--red-4); // with text-on-accent / Delete Screen Button 17 | --background-modifier-error-hover: var(--red-3); 18 | 19 | --background-modifier-success-rgb: var(--green-4-rgb); // Publish Upload Success Background 20 | --background-modifier-success: var(--green-4); // Publish Upload Success Background 21 | 22 | --background-modifier-warning: var(--yellow-3); // Warning Background 23 | --background-modifier-warning-hover: var(--yellow-4); 24 | 25 | --background-modifier-info: var(--blue-4); 26 | 27 | --modifier-text: white; 28 | --modifier-text-accent: var(--gray-light-7); 29 | 30 | // button.mod-warning, 31 | // .message.mod-warning { 32 | // --modifier-text: var(--gray-dark-6); 33 | // --modifier-text-accent: var(--gray-dark-5); 34 | // } 35 | 36 | // always light text (tooltip) 37 | --background-modifier-message: rgba(0, 0, 0, 0.9); 38 | 39 | --background-modifier-form-field: var(--background-primary); 40 | --background-modifier-form-field-highlighted: rgba(0, 0, 0, 0.22); // Search Bar Active Highlight 41 | 42 | --background-modifier-box-shadow: rgba(0, 0, 0, 0.1); 43 | --background-modifier-cover: rgba(220, 220, 220, 0.4); 44 | 45 | --text-normal: var(--gray-dark-5); // Text body of note 46 | --text-muted: var(--gray-dark-4); // Text darker for sidebar, toggles, inactive, tags, etc 47 | --text-faint: var(--gray-dark-1); // Link brackets color 48 | 49 | --text-accent: var(--primary-accent-4); // Links 50 | --text-accent-hover: var(--primary-accent-5); 51 | 52 | --text-success: var(--green-4); 53 | --text-error: var(--red-4); 54 | 55 | --text-highlight-fg: var(--gray-dark-7); 56 | --text-highlight-bg-rgb: var(--primary-accent-4-rgb); 57 | --text-highlight-bg: rgba(var(--text-highlight-bg-rgb), 0.2); 58 | --text-selection: rgba(var(--secondary-accent-4-rgb), 0.2); 59 | 60 | --interactive-hover: var(--primary-accent-1); // Button hover text; pin 61 | --interactive-normal: var(--background-primary-alt); 62 | 63 | // Text on accent should work as foreground for all interactive accent elements 64 | --text-on-accent: var(--gray-light-8); // Program Title bar text 65 | --interactive-accent: var(--primary-accent-4); // Workspace Note Title Underline 66 | --interactive-accent-hover: var(--primary-accent-3); // Menu Button Hover 67 | --interactive-toggle: var(--secondary-accent-3); 68 | --interactive-disabled: var(--gray-light-3); 69 | 70 | // Color Spectrum 71 | --color-red-rgb: var(--red-4-rgb); 72 | --color-red: var(--red-4); 73 | --color-orange-rgb: var(--orange-4-rgb); 74 | --color-orange: var(--orange-4); 75 | --color-yellow-rgb: var(--yellow-3-rgb); 76 | --color-yellow: var(--yellow-3); 77 | --color-green-rgb: var(--green-4-rgb); 78 | --color-green: var(--green-4); 79 | --color-cyan-rgb: var(--cyan-4-rgb); 80 | --color-cyan: var(--cyan-4); 81 | --color-blue-rgb: var(--blue-4-rgb); 82 | --color-blue: var(--blue-4); 83 | --color-purple-rgb: var(--purple-4-rgb); 84 | --color-purple: var(--purple-4); 85 | --color-pink-rgb: var(--pink-4-rgb); 86 | --color-pink: var(--pink-4); 87 | 88 | --color-base-00: var(--gray-light-8); 89 | --color-base-05: var(--gray-light-7); 90 | --color-base-10: var(--gray-light-6); 91 | --color-base-20: var(--gray-light-5); 92 | --color-base-25: var(--gray-light-3); 93 | --color-base-30: var(--gray-light-2); 94 | --color-base-35: var(--gray-light-1); 95 | --color-base-40: var(--gray); 96 | --color-base-50: var(--gray-dark-1); 97 | --color-base-60: var(--gray-dark-3); 98 | --color-base-70: var(--gray-dark-4); 99 | --color-base-100: var(--gray-dark-8); 100 | 101 | // Fixes weird notice that has a black background 102 | .notice { 103 | background-color: var(--background-modifier-form-field); 104 | color: var(--text-normal); 105 | } 106 | 107 | @media (hover: hover) { 108 | button.mod-cta:hover, 109 | button.mod-destructive:hover { 110 | --modifier-text: var(--gray-dark-8); 111 | color: var(--modifier-text); 112 | } 113 | } 114 | } 115 | -------------------------------------------------------------------------------- /src/fragments/_03a-workspace-layout.scss: -------------------------------------------------------------------------------- 1 | .theme-dark { 2 | --ebw-tab-title-active-fg: var(--text-normal); 3 | --ebw-tab-title-active-bg: var(--secondary-accent-5); 4 | --ebw-tab-title-inactive-bg: var(--gray-dark-4); 5 | --ebw-tab-title-inactive-focused-bg: var(--gray-dark-4); 6 | --ebw-tab-title-active-focused-bg: var(--primary-accent-5); 7 | 8 | // hover editor popover colors 9 | --ebw-he-title-border: var(--tab-outline-color); 10 | --he-title-bar-active-fg: var(--gray-light-6); 11 | --he-title-bar-active-bg: var(--secondary-accent-4); 12 | --he-title-bar-active-pinned-bg: var(--primary-accent-4); 13 | 14 | --he-title-bar-inactive-fg: var(--gray-light-3); 15 | --he-title-bar-inactive-bg: var(--gray-dark-3); 16 | --he-title-bar-inactive-pinned-bg: var(--gray-dark-3); 17 | 18 | --he-text-on-accent-inactive: var(--gray-dark-7); 19 | --he-text-on-accent-active: var(--gray-light-5); 20 | } 21 | .theme-light { 22 | --ebw-tab-title-active-fg: white; 23 | --ebw-tab-title-active-bg: var(--secondary-accent-4); 24 | --ebw-tab-title-inactive-bg: var(--gray-dark-3); 25 | --ebw-tab-title-active-focused-bg: var(--primary-accent-4); 26 | 27 | // hover editor popover colors 28 | --ebw-he-title-border: var(--gray-dark-3); 29 | --he-title-bar-active-fg: white; 30 | --he-title-bar-active-bg: var(--secondary-accent-3); 31 | --he-title-bar-active-pinned-bg: var(--primary-accent-3); 32 | --he-title-bar-inactive-fg: var(--gray-light-5); 33 | --he-title-bar-inactive-bg: var(--gray-dark-1); 34 | --he-title-bar-inactive-pinned-bg: var(--gray-dark-1); 35 | 36 | --he-text-on-accent-inactive: var(--gray-dark-5); 37 | --he-text-on-accent-active: var(--gray-light-5); 38 | } 39 | body { 40 | --divider-color: var(--background-modifier-border); 41 | --file-margins: var(--size-4-2) var(--size-4-8); 42 | --ribbon-background: var(--titlebar-background); 43 | --ribbon-background-collapsed: var(--titlebar-background); 44 | --status-bar-background: var(--titlebar-background); 45 | --tab-text-color: var(--icon-color); 46 | --tab-text-color-focused: var(--icon-color-focused); 47 | --tab-container-background: var(--background-secondary); 48 | --tab-outline-color: var(--background-modifier-border); 49 | 50 | --he-title-bar-height: calc(var(--icon-s) + var(--size-2-3)); 51 | --he-view-header-height: calc(var(--icon-s) + var(--size-2-3)); 52 | } 53 | :not(.is-focused) { 54 | .workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header { 55 | color: var(--tab-text-color); 56 | background-color: var(--background-secondary); 57 | 58 | .workspace-tab-header-inner-title { 59 | color: inherit; 60 | } 61 | 62 | &.is-active { 63 | color: var(--ebw-tab-title-active-fg); 64 | background-color: var(--ebw-tab-title-active-bg); 65 | } 66 | } 67 | } 68 | .is-mobile, 69 | .is-focused { 70 | --divider-color: var(--background-modifier-border-focus); 71 | --ribbon-background: var(--titlebar-background-focused); 72 | --ribbon-background-collapsed: var(--titlebar-background-focused); 73 | --status-bar-background: var(--titlebar-background-focused); 74 | --tab-outline-color: var(--background-modifier-border-focus); 75 | 76 | .workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header.is-active { 77 | color: var(--ebw-tab-title-active-fg); 78 | background-color: var(--ebw-tab-title-active-focused-bg); 79 | .workspace-tab-header-inner-title { 80 | color: inherit; 81 | } 82 | } 83 | } 84 | // left and right sidedock borders (Hidden and Native modes) 85 | body:not(.is-mobile):not(.is-frameless):not(.is-hidden-frameless), // native 86 | body:not(.is-mobile).is-hidden-frameless { 87 | // Border on the right side of the left-toggle button 88 | .workspace-ribbon .sidebar-toggle-button { 89 | border-right: var(--tab-outline-width) solid var(--tab-outline-color); 90 | } 91 | .workspace.is-left-sidedock-open .workspace-split.mod-left-split .workspace-tab-header-container { 92 | border-right: var(--tab-outline-width) solid var(--tab-outline-color); 93 | } 94 | div.workspace.is-right-sidedock-open .workspace-split.mod-right-split .workspace-tab-header-container { 95 | border-left: var(--tab-outline-width) solid var(--tab-outline-color); 96 | } 97 | } 98 | 99 | // Floating sidedock 100 | body:not(.is-mobile) .mod-left-split.is-floating { 101 | left: calc(var(--ribbon-width)); 102 | } 103 | body:not(.is-mobile) .mod-right-split.is-floating { 104 | right: 0; 105 | } 106 | body.is-mobile .workspace-drawer-header-icon.sync-status-icon { 107 | background-color: var(--background-primary); 108 | } 109 | 110 | // Put view actions on the left side of the view title 111 | .ebullientworks-reverse-view-header-actions { 112 | .popover.hover-editor .popover-content .workspace-leaf-content .view-header, 113 | .workspace-tabs .view-header { 114 | margin: 0; 115 | > .view-header-icon { 116 | order: 0; 117 | } 118 | > .view-actions { 119 | order: 0; 120 | flex-direction: row-reverse; 121 | padding: 0 var(--size-2-3); 122 | } 123 | > .view-header-nav-buttons { 124 | order: 1; 125 | } 126 | > .view-header-title-container { 127 | order: 1; 128 | justify-content: flex-start; 129 | } 130 | } 131 | } 132 | // For stacked tabs resize and align the icons with the view header 133 | // Hide the view header title 134 | body.is-focused, 135 | body:not(.is-focused) { 136 | .workspace .mod-root .workspace-tabs.mod-stacked { 137 | --tab-stacked-header-width: calc(var(--icon-s) + var(--size-2-3)); 138 | .workspace-tab-container { 139 | .workspace-tab-header-inner-icon, 140 | .workspace-tab-header-status-icon, 141 | .workspace-tab-header-inner-close-button { 142 | padding: var(--size-2-3) var(--size-2-2); 143 | color: inherit; 144 | } 145 | .workspace-tab-header-inner { 146 | padding: 0 var(--size-4-2); 147 | justify-content: flex-start; 148 | } 149 | .workspace-tab-header-inner { 150 | --tab-stacked-font-weight: var(--font-light); 151 | --tab-stacked-font-size: var(--font-ui-smaller); 152 | font-family: var(--font-monospace); 153 | } 154 | } 155 | .view-header { 156 | --text-normal: var(--text-faint); 157 | --header-height: calc(var(--icon-s) + var(--size-2-4)); 158 | align-items: center; 159 | gap: var(--size-2-4); 160 | } 161 | .view-header-title { 162 | line-height: var(--icon-s); 163 | visibility: hidden; 164 | } 165 | } 166 | 167 | &.is-tablet .workspace .mod-root .workspace-tabs.mod-stacked { 168 | .workspace-tab-container { 169 | .workspace-tab-header-inner-close-button { 170 | padding-top: var(--size-4-2); 171 | } 172 | .workspace-tab-header-status-container { 173 | padding-top: var(--size-2-2); 174 | } 175 | } 176 | } 177 | } 178 | 179 | .mobile-navbar-actions, 180 | .workspace-drawer .nav-buttons-container, 181 | body.is-tablet .sidebar-toggle-button, 182 | .is-mobile .view-header-nav-buttons, 183 | .is-mobile .view-header .view-action { 184 | --icon-color: var(--text-muted); 185 | --icon-color-hover: var(--text-muted); 186 | --icon-color-active: var(--text-accent); 187 | --icon-color-focused: var(--text-normal); 188 | } 189 | body.is-tablet { 190 | --header-height: calc(var(--icon-m) + var(--size-4-3)); 191 | .view-header { 192 | --icon-xs: 14px; 193 | --icon-s: 16px; 194 | --icon-m: 18px; 195 | --icon-l: 18px; 196 | } 197 | } 198 | body.is-tablet, 199 | .is-mobile { 200 | --view-header-height: var(--header-height); 201 | .view-header-title-container { 202 | height: unset; 203 | } 204 | } 205 | body.is-tablet .sidebar-toggle-button, 206 | body.is-tablet .view-header-nav-buttons, 207 | body.is-tablet .view-header .view-action, 208 | .is-mobile .view-header-nav-buttons, 209 | .is-mobile .view-header .view-action { 210 | --icon-size: var(--icon-m); 211 | --icon-stroke: var(--icon-m-stroke-width); 212 | } 213 | .workspace-drawer { 214 | .workspace-drawer-active-tab-icon, 215 | .workspace-drawer-tab-option-item-icon, 216 | .workspace-drawer-active-tab-back-icon, 217 | .workspace-drawer-header-icon, 218 | .clickable-icon.side-dock-ribbon-action .svg-icon, 219 | .workspace-tab-header-inner-icon .svg-icon, 220 | .workspace-tab-header-inner-icon .svg-icon, 221 | .nav-buttons-container { 222 | --icon-size: var(--icon-m); 223 | --icon-stroke: var(--icon-m-stroke-width); 224 | } 225 | } 226 | 227 | .workspace-drawer-header-icon, 228 | .workspace-drawer-active-tab-back-icon, 229 | .workspace-drawer-active-tab-icon:last-child { 230 | color: var(--icon-color); 231 | } 232 | 233 | // Popover 234 | .hover-editor { 235 | .popover-content { 236 | .popover-titlebar { 237 | border-top: 1px solid var(--ebw-he-title-border); 238 | } 239 | .view-header { 240 | --header-height: calc(var(--icon-s) + var(--size-2-4)); 241 | align-items: center; 242 | } 243 | .view-header-title { 244 | line-height: var(--icon-s); 245 | } 246 | .view-header-title-container::after { 247 | display: none; 248 | } 249 | } 250 | } 251 | 252 | 253 | // Sync status icon 254 | :is(.is-mobile, .is-phone) { 255 | .workspace:not(:has(.workspace-drawer-backdrop)) { 256 | .workspace-drawer.mod-right { 257 | display: flex !important; 258 | overflow: visible; 259 | left: 100%; 260 | 261 | .workspace-drawer-inner { 262 | overflow: visible; 263 | } 264 | } 265 | .view-actions { 266 | padding-right: 32px; 267 | 268 | &:is(.is-phone) { 269 | padding-right: 23px; 270 | } 271 | } 272 | } 273 | } 274 | 275 | .is-phone { 276 | .sync-status-icon { 277 | position: absolute; 278 | top: 0.5rem; 279 | left: calc(-1 * 3.25rem); 280 | } 281 | } 282 | 283 | .is-tablet { 284 | .sync-status-icon { 285 | position: absolute; 286 | top: 2.3rem; 287 | left: calc(-1 * 3.25rem); 288 | } 289 | } 290 | 291 | .message.mod-error, 292 | .message.mod-info, 293 | .message.mod-success, 294 | .message.mod-warning { 295 | color: var(--modifier-text); 296 | } 297 | .message.mod-error a, 298 | .message.mod-info a, 299 | .message.mod-success a, 300 | .message.mod-warning a { 301 | color: var(--modifier-text-accent); 302 | } 303 | .message.mod-info { 304 | background-color: var(--background-modifier-info); 305 | } 306 | button.mod-warning, 307 | .message.mod-warning { 308 | background-color: var(--background-modifier-warning); 309 | color: var(--modifier-text); 310 | } 311 | button.mod-destructive { 312 | background-color: var(--background-modifier-error); 313 | color: var(--modifier-text); 314 | } 315 | .checkbox-container { 316 | background-color: var(--interactive-disabled); 317 | &.is-enabled { 318 | background-color: var(--interactive-toggle); 319 | } 320 | } 321 | @media (hover: hover) { 322 | button.mod-warning:hover { 323 | background-color: var(--background-modifier-warning-hover); 324 | } 325 | button.mod-destructive:hover { 326 | background-color: var(--background-modifier-error-hover); 327 | } 328 | } 329 | -------------------------------------------------------------------------------- /src/fragments/_03c-modal-input.scss: -------------------------------------------------------------------------------- 1 | .modal-content .vertical-tab-header { 2 | --interactive-accent: var(--interactive-accent-hover); 3 | } 4 | 5 | -------------------------------------------------------------------------------- /src/fragments/_03d-graph-view.scss: -------------------------------------------------------------------------------- 1 | .theme-dark { 2 | --graph-line: var(--gray-dark-5); 3 | 4 | --graph-node: var(--primary-accent-4); 5 | --graph-node-focused: var(--yellow-1); 6 | --graph-node-tag: var(--secondary-accent-3); 7 | --graph-node-attachment: var(--secondary-accent-2); 8 | --graph-node-unresolved: var(--gray); 9 | } 10 | .theme-light { 11 | --graph-line: var(--gray-light-1); 12 | 13 | --graph-node: var(--primary-accent-2); 14 | --graph-node-focused: var(--yellow-1); 15 | --graph-node-tag: var(--secondary-accent-3); 16 | --graph-node-attachment: var(--secondary-accent-2); 17 | --graph-node-unresolved: var(--gray); 18 | } 19 | -------------------------------------------------------------------------------- /src/fragments/_03f-metadata-view.scss: -------------------------------------------------------------------------------- 1 | body { 2 | --metadata-background: transparent; // Default Transparent or none 3 | --metadata-padding: 0; 4 | --metadata-border-color: var(--background-modifier-border); 5 | --metadata-border-radius: 4px; 6 | --metadata-border-width: 1px; 7 | --metadata-divider-color: var(--background-secondary); 8 | --metadata-divider-width: 1px; 9 | --metadata-gap: 0; 10 | --metadata-property-padding: 0; 11 | --metadata-property-radius: var(--radius-s); 12 | --metadata-label-font-size: var(--font-smaller); 13 | --metadata-input-font-size: var(--font-smaller); 14 | } 15 | 16 | .markdown-source-view .metadata-container .metadata-add-button { 17 | margin-top: var(--size-2-1); 18 | padding-left: var(--size-2-2); 19 | position: absolute; 20 | font-size: var(--font-smaller); 21 | left: 0; 22 | top: 0; 23 | } 24 | 25 | .workspace > .workspace-split:not(.mod-root) { 26 | .workspace-leaf-content[data-type="file-properties"] .view-content { 27 | padding: 0; 28 | } 29 | .metadata-container { 30 | --metadata-background: transparent; 31 | --metadata-divider-color: var(--background-secondary); 32 | --metadata-border-color: transparent; 33 | 34 | .metadata-property { 35 | background-color: var(--background-primary-alt); 36 | } 37 | 38 | .metadata-add-button { 39 | margin-top: 0; 40 | } 41 | } 42 | } 43 | 44 | .workspace > .workspace-split.mod-root .metadata-container { 45 | --input-height: var(--line-height-normal); 46 | font-family: var(--font-monospace); 47 | margin-left: 25px; // gutter 48 | margin-block-end: 0; 49 | 50 | .metadata-property-icon, 51 | .metadata-property-key, 52 | .metadata-property-key-input, 53 | .metadata-property-value { 54 | border-bottom: none; 55 | } 56 | 57 | // .metadata-property-key-input { 58 | // padding: 0 var(--size-4-1); 59 | // } 60 | 61 | .metadata-property, 62 | .metadata-property[data-property-key="tags"] { 63 | --pill-remove-color: var(--text-faint); 64 | --pill-remove-color-hover: var(--text-accent); 65 | --pill-radius: var(--radius-s); 66 | --pill-border-width: 0; 67 | --pill-background: var(--background-primary-alt); 68 | --pill-padding-y: 0; 69 | --pill-padding-x: var(--size-2-1); 70 | 71 | .multi-select-pill { 72 | line-height: var(--line-height-normal); 73 | } 74 | } 75 | 76 | .metadata-property { 77 | border-bottom: var(--metadata-divider-width) solid var(--metadata-divider-color); 78 | 79 | .metadata-property-icon { 80 | --icon-size: var(--icon-xs); 81 | width: var(--icon-s); 82 | min-height: var(--line-height-normal); 83 | } 84 | .multi-select-container { 85 | padding: 0; 86 | } 87 | .metadata-input-longtext { 88 | padding: var(--pill-padding-x); 89 | } 90 | } 91 | .metadata-property:last-child { 92 | border-bottom: none; 93 | } 94 | } 95 | 96 | .metadata-property-key { 97 | align-items: center; 98 | border-right: var(--metadata-divider-width) solid var(--metadata-divider-color); 99 | } 100 | 101 | .metadata-properties-title { 102 | margin-bottom: var(--size-4-1); 103 | padding: var(--size-4-1); 104 | display: flex; 105 | justify-content: center; 106 | font-family: var(--ebw-header-font); 107 | background-color: rgba(var(--secondary-accent-4-rgb), 0.1); 108 | 109 | &:before { 110 | font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 111 | content: "✧ "; 112 | color: var(--secondary-accent-4); 113 | padding: 0 0.8em; 114 | position: relative; 115 | } 116 | &::after { 117 | font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 118 | content: " ✧"; 119 | padding: 0 0.8em; 120 | position: relative; 121 | color: var(--secondary-accent-4); 122 | } 123 | } 124 | 125 | .metadata-properties-heading { 126 | display: block; 127 | padding: 0; 128 | margin-bottom: 0; 129 | } 130 | 131 | @media screen and (max-width: 700px) { 132 | 133 | .metadata-properties-title { 134 | display: none; 135 | } 136 | 137 | .markdown-source-view .metadata-container .metadata-add-button { 138 | margin-top: revert; 139 | padding-left: revert; 140 | position: revert; 141 | font-size: revert; 142 | left: revert; 143 | top: revert; 144 | } 145 | } 146 | -------------------------------------------------------------------------------- /src/fragments/_04-headings-hr-tags.scss: -------------------------------------------------------------------------------- 1 | body { 2 | --h1-size: 2em; 3 | --h2-size: 1.8em; 4 | --h3-size: 1.6em; 5 | --h4-size: 1.4em; 6 | --h5-size: 1.2em; 7 | --h6-size: 1.2em; 8 | 9 | --h1-font: var(--ebw-header-font); 10 | --h2-font: var(--ebw-header-font); 11 | --h3-font: var(--ebw-header-font); 12 | --h4-font: var(--ebw-header-font); 13 | --h5-font: var(--ebw-header-font); 14 | --h6-font: var(--ebw-header-font); 15 | 16 | --h1-variant: common-ligatures; 17 | --h2-variant: common-ligatures; 18 | --h3-variant: common-ligatures; 19 | --h4-variant: common-ligatures; 20 | --h5-variant: common-ligatures; 21 | --h6-variant: common-ligatures; 22 | 23 | --h1-weight: 500; 24 | --h2-weight: 500; 25 | --h3-weight: 500; 26 | --h4-weight: 500; 27 | --h5-weight: 500; 28 | --h6-weight: 500; 29 | 30 | --h1-line-height: var(--line-height-normal); 31 | --h2-line-height: var(--line-height-normal); 32 | --h3-line-height: var(--line-height-normal); 33 | --h4-line-height: var(--line-height-normal); 34 | --h5-line-height: var(--line-height-normal); 35 | --h6-line-height: var(--line-height-normal); 36 | } 37 | 38 | .theme-dark { 39 | --h1-color: var(--yellow-2); 40 | --h2-color: var(--green-3); 41 | --h3-color: var(--cyan-3); 42 | --h4-color: var(--blue-3); 43 | --h5-color: var(--purple-3); 44 | --h6-color: var(--pink-3); 45 | } 46 | 47 | .theme-light { 48 | --h1-color: var(--yellow-3); 49 | --h2-color: var(--green-4); 50 | --h3-color: var(--cyan-3); 51 | --h4-color: var(--blue-4); 52 | --h5-color: var(--purple-4); 53 | --h6-color: var(--pink-4); 54 | } 55 | 56 | @mixin variants-caps-header-one { 57 | font-variant-caps: var(--ebw-header-font-caps-variant); 58 | } 59 | 60 | h1, 61 | .cm-line:not(.HyperMD-codeblock) .cm-header-1, 62 | .HyperMD-list-line .cm-header-1, 63 | .markdown-rendered h1 { 64 | @include variants-caps-header-one; 65 | } 66 | 67 | @mixin section-icon { 68 | content: "\00a0\00a7\00a0"; 69 | font-size: 0.5em; 70 | font-weight: 200; 71 | position: relative; 72 | vertical-align: middle; 73 | font-family: var(--font-default); 74 | visibility: visible; 75 | } 76 | 77 | @mixin before-header-one { 78 | &:not(:has(.collapse-indicator))::before { 79 | @include section-icon; 80 | } 81 | .collapse-indicator { 82 | opacity: 1; 83 | visibility: hidden; 84 | margin-left: var(--ebw-collapse-icon-width); 85 | &:hover { 86 | visibility: visible; 87 | } 88 | &:after { 89 | @include section-icon; 90 | } 91 | } 92 | } 93 | 94 | // Mark headers as sections § 95 | body:not(.ebullientworks-nix-heading-marker) { 96 | .markdown-rendered, 97 | .print { 98 | h1, 99 | h2, 100 | h3, 101 | h4, 102 | h5, 103 | h6 { 104 | --ebw-collapse-icon-width: -28px; 105 | @include before-header-one; 106 | } 107 | } 108 | 109 | .is-live-preview { 110 | .HyperMD-header { 111 | --ebw-collapse-icon-width: -26px; 112 | @include before-header-one; 113 | } 114 | } 115 | } 116 | 117 | .cm-s-obsidian { 118 | .cm-header.cm-inline-code { 119 | font-weight: var(--font-extralight); 120 | font-weight: normal; 121 | font-variant-caps: normal; 122 | } 123 | 124 | .cm-line:not(.HyperMD-codeblock) .cm-header.cm-inline-code { 125 | font-size: 65% !important; 126 | } 127 | 128 | .cm-header-1.cm-hmd-codeblock:not(.cm-inline-code) { 129 | color: var(--h1-color); 130 | } 131 | 132 | .cm-header-2.cm-hmd-codeblock:not(.cm-inline-code) { 133 | color: var(--h2-color); 134 | } 135 | 136 | .cm-header-3.cm-hmd-codeblock:not(.cm-inline-code) { 137 | color: var(--h3-color); 138 | } 139 | 140 | .cm-header-4.cm-hmd-codeblock:not(.cm-inline-code) { 141 | color: var(--h4-color); 142 | } 143 | 144 | .cm-header-5.cm-hmd-codeblock:not(.cm-inline-code) { 145 | color: var(--h5-color); 146 | } 147 | 148 | .cm-header-6.cm-hmd-codeblock:not(.cm-inline-code) { 149 | color: var(--h6-color); 150 | } 151 | } 152 | 153 | 154 | 155 | /* Tag formatting */ 156 | body:not(.ebullientworks-nix-tags) { 157 | --tag-background: transparent; 158 | --tag-background-hover: transparent; 159 | --tag-padding-x: 0; 160 | 161 | .theme-dark & { 162 | --tag-color: var(--color-accent-2); 163 | --tag-color-hover: var(--tag-3); 164 | } 165 | 166 | .theme-light & { 167 | --tag-color: var(--color-accent); 168 | --tag-color-hover: var(--tag-4); 169 | } 170 | } 171 | 172 | @mixin tags-reg { 173 | font-family: var(--ebw-font-tags); 174 | color: var(--tag-color); 175 | } 176 | 177 | .editor .cl-hashtag, 178 | .markdown-source-view.mod-cm6 .cm-hashtag, 179 | .cm-s-obsidian .cm-formatting.cm-hashtag, 180 | .cm-s-obsidian .cm-quote.cm-hashtag, 181 | .cm-s-obsidian .cm-hmd-codeblock.cm-hashtag, 182 | a.tag, 183 | .editor .cl-hashtag { 184 | @include tags-reg; 185 | } 186 | 187 | h1 a.tag, 188 | h2 a.tag, 189 | h3 a.tag, 190 | h4 a.tag, 191 | h5 a.tag, 192 | h6 a.tag { 193 | font-variant-caps: normal; 194 | font-weight: var(--font-extralight); 195 | font-size: 75% !important; 196 | padding: 0; 197 | background-color: transparent; 198 | border: none; 199 | border-radius: unset; 200 | } 201 | 202 | .cm-s-obsidian { 203 | .cm-header.cm-hashtag { 204 | font-weight: var(--font-extralight); 205 | font-variant-caps: normal; 206 | padding: 0; 207 | background-color: transparent; 208 | border: none; 209 | border-radius: unset; 210 | } 211 | 212 | .cm-line:not(.HyperMD-codeblock) .cm-header.cm-hashtag { 213 | font-size: 65% !important; 214 | } 215 | 216 | .cm-header-1.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code), 217 | .cm-header-2.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code), 218 | .cm-header-3.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code), 219 | .cm-header-4.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code), 220 | .cm-header-5.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code), 221 | .cm-header-6.cm-hmd-codeblock.cm-hashtag:not(.cm-inline-code) { 222 | color: var(--tag-color); 223 | } 224 | } 225 | 226 | /* HR tags */ 227 | .workspace > .workspace-split.mod-root { 228 | .markdown-rendered hr, 229 | hr:not(.workspace-leaf-resize-handle) { 230 | border: none; 231 | border-top: 1px dotted var(--interactive-accent); 232 | color: var(--interactive-hover); 233 | overflow: visible; 234 | text-align: center; 235 | height: 2px; 236 | margin: 0; 237 | margin-block: calc( 238 | (var(--font-text-size, 1rem) * var(--line-height-normal) - var(--hr-thickness)) / 2 + var(--p-spacing) 239 | ); 240 | 241 | &::after { 242 | background: var(--background-primary); 243 | font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 244 | content: " ✧ ✧ ✧ "; 245 | padding: 0 0.8em; 246 | position: relative; 247 | top: -12px; 248 | } 249 | } 250 | } 251 | -------------------------------------------------------------------------------- /src/fragments/_05-text-links.scss: -------------------------------------------------------------------------------- 1 | // This file is suitable for publish 2 | // Body + theme-dark 3 | body { 4 | --bold-color: var(--blue-3); 5 | --italic-color: var(--pink-2); 6 | --ebw-strong-em: var(--yellow-2); 7 | --ebw-link-underline: var(--cyan-4); 8 | --ebw-link-hidden: var(--cyan-4); 9 | 10 | // --link-color Resolved link text color 11 | --link-color: var(--gray-light-1); 12 | // --link-color-hover Resolved link text color (hover) 13 | --link-color-hover: var(--cyan-2); 14 | // --link-decoration Resolved link text decoration 15 | --link-decoration: underline; 16 | // --link-decoration-hover Resolved link text decoration (hover) 17 | --link-decoration-hover: underline; 18 | // --link-decoration-thickness Resolved link text decoration thickness 19 | // --link-unresolved-color Unresolved link text color 20 | --link-unresolved-color: var(--link-color); 21 | // --link-unresolved-opacity Unresolved link opacity 22 | --link-unresolved-opacity: 0.9; 23 | // --link-unresolved-filter Unresolved link filter, e.g. hue-rotate 24 | // --link-unresolved-decoration-style Unresolved link text decoration style 25 | --link-unresolved-decoration-style: dotted; 26 | // --link-unresolved-decoration-color Unresolved link text decoration color 27 | --link-unresolved-decoration-color: var(--ebw-link-underline); 28 | // --link-external-color External link text color 29 | --link-external-color: var(--link-color); 30 | // --link-external-color-hover External link text color (hover) 31 | --link-external-color-hover: var(--link-color-hover); 32 | // --link-external-decoration External link text decoration 33 | --link-external-decoration: underline; 34 | // --link-external-decoration-hover External link text decoration (hover) 35 | --link-external-decoration-hover: underline; 36 | } 37 | .theme-light { 38 | --bold-color: var(--blue-4); 39 | --italic-color: var(--pink-4); 40 | --ebw-strong-em: var(--yellow-3); 41 | --ebw-link-underline: var(--cyan-3); 42 | --ebw-link-hidden: var(--cyan-2); 43 | 44 | --link-color: var(--gray-dark-3); 45 | --link-color-hover: var(--cyan-4); 46 | } 47 | a { 48 | text-decoration-color: var(--ebw-link-underline); 49 | } 50 | // General Styling in Source 51 | 52 | .cm-s-obsidian { 53 | span.cm-quote.cm-em { 54 | color: var(--italic-color); 55 | } 56 | span.cm-quote.cm-strong { 57 | color: var(--bold-color); 58 | } 59 | span.cm-strong.cm-em, 60 | span.cm-quote.cm-strong.cm-em { 61 | color: var(--ebw-strong-em); 62 | } 63 | } 64 | .cm-s-obsidian, 65 | .markdown-source-view.mod-cm6 { 66 | // Readable strikethrough characters in source mode 67 | .cm-formatting-strikethrough { 68 | text-decoration: none; 69 | color: var(--text-faint); 70 | } 71 | .cm-strikethrough:not(.cm-formatting-strikethrough) { 72 | text-decoration-line: line-through; 73 | text-decoration-thickness: var(--link-decoration-thickness); 74 | } 75 | span.cm-hmd-internal-link, // wiki links 76 | span.cm-link { // markdown links 77 | .cm-underline { 78 | text-decoration: none; 79 | } 80 | // Strikethrough links in live preview 81 | &.cm-strikethrough .cm-underline { 82 | color: var(--text-muted); 83 | text-decoration-line: line-through; 84 | text-decoration-thickness: var(--link-decoration-thickness); 85 | } 86 | &.cm-strikethrough:has(.cm-underline):not(:has(.is-unresolved)):after { 87 | content: ' \27B9'; 88 | font-size: .8rem; 89 | opacity: .5; 90 | } 91 | // Strikethrough link text in source mode 92 | &.cm-strikethrough:not(.cm-formatting-strikethrough):not(:has(.cm-underline)) { 93 | color: var(--text-muted); 94 | text-decoration-line: line-through; 95 | text-decoration-thickness: var(--link-decoration-thickness); 96 | text-decoration-color: var(--text-normal); 97 | } 98 | // Readable strikethrough formatting characters in source mode 99 | &.cm-formatting-strikethrough { 100 | color: var(--text-faint); 101 | text-decoration: none; 102 | } 103 | // consistent link decorations 104 | &:not(:has(.is-unresolved)), 105 | &.cm-em:not(:has(.is-unresolved)), 106 | &.cm-strong:not(:has(.is-unresolved)), 107 | &.cm-em.cm-strong:not(:has(.is-unresolved)) { 108 | text-decoration-line: var(--link-decoration); 109 | text-decoration-color: var(--ebw-link-underline); 110 | } 111 | &:has(.is-unresolved), 112 | &.cm-em:has(.is-unresolved), 113 | &.cm-strong:has(.is-unresolved), 114 | &.cm-em.cm-strong:has(.is-unresolved) { 115 | text-decoration-line: var(--link-decoration); 116 | text-decoration-color: var(--ebw-link-underline); 117 | text-decoration-style: var(--link-unresolved-decoration-style); 118 | &:after { 119 | content: ' ✎'; 120 | color: var(--ebw-link-underline); 121 | } 122 | } 123 | } 124 | // Bare links 125 | .cm-line .cm-url.cm-link { 126 | color: var(--link-external-color); 127 | opacity: unset; 128 | } 129 | // Unmatched bare links are .. super strange for formatting in source mode/live preview. 130 | .cm-line:has(.cm-url):not(:has(.cm-link)) .cm-url:not(.cm-link) { 131 | color: var(--text-normal); 132 | font-weight: normal; 133 | font-style: normal; 134 | } 135 | span.cm-hmd-internal-link, // wiki links 136 | span.cm-link, // markdown links 137 | span.cm-url.cm-link { // bare links 138 | &.cm-em:hover, 139 | &.cm-strong:hover, 140 | &.cm-em.cm-strong:hover { 141 | color: var(--link-color-hover); 142 | text-decoration-line: var(--link-decoration-hover); 143 | } 144 | // Em A (wikilink & markdown link text) 145 | &.cm-em, 146 | &.cm-em .is-unresolved { 147 | color: var(--italic-color); 148 | } 149 | // Strong A (wikilink & markdown link text) 150 | &.cm-strong, 151 | &.cm-strong .is-unresolved { 152 | color: var(--bold-color); 153 | } 154 | // Em Strong A (wikilink & markdown link text) 155 | &.cm-em.cm-strong, 156 | &.cm-em.cm-strong .is-unresolved { 157 | color: var(--ebw-strong-em); 158 | } 159 | } 160 | span.cm-formatting-link:not(.cm-url.cm-link) { 161 | font-weight: normal; 162 | font-style: normal; 163 | opacity: .7; 164 | } 165 | // the URL portion of markdown URL 166 | span.cm-string.cm-url { 167 | color: var(--ebw-link-hidden); 168 | font-weight: normal; 169 | font-style: normal; 170 | } 171 | } 172 | 173 | // Styling in Markdown rendered 174 | 175 | .markdown-rendered { 176 | a del, 177 | del a, 178 | del a.internal-link { 179 | color: var(--text-muted); 180 | } 181 | em a, 182 | em a.internal-link, 183 | em a.internal-link.is-unresolved { 184 | color: var(--italic-color); 185 | } 186 | strong a, 187 | strong a.internal-link, 188 | strong a.internal-link.is-unresolved { 189 | color: var(--bold-color); 190 | } 191 | strong em, 192 | strong em a.external-link, 193 | strong em a.internal-link, 194 | strong em a.internal-link.is-unresolved { 195 | color: var(--ebw-strong-em); 196 | } 197 | .internal-link.is-unresolved { 198 | text-decoration-line: var(--link-decoration); 199 | text-decoration-color: var(--ebw-link-underline); 200 | } 201 | .internal-link.is-unresolved::after { 202 | content: ' ✎'; 203 | color: var(--ebw-link-underline); 204 | } 205 | } 206 | 207 | em a:hover, 208 | strong a:hover { 209 | color: var(--link-color-hover); 210 | text-decoration: var(--link-decoration-hover); 211 | } 212 | 213 | 214 | // Collapse external links / markdown links in edit mode 215 | body:not(.ebullientworks-show-edit-mode-links) .markdown-source-view.mod-cm6 { 216 | div.cm-line:not(.cm-active) { 217 | > .cm-string.cm-url { 218 | text-decoration: none; 219 | } 220 | > .cm-string.cm-url:not(.cm-formatting) { 221 | font-size: 0; 222 | } 223 | > .cm-string.cm-url:not(.cm-formatting)::after { 224 | content: '\27B9'; 225 | font-size: .8rem; 226 | } 227 | } 228 | } 229 | 230 | 231 | // Highlight, matched text 232 | .cm-s-obsidian span.obsidian-search-match-highlight, 233 | .cm-s-obsidian span.cm-highlight, 234 | .search-result-file-matched-text, 235 | .markdown-preview-view mark, 236 | .markdown-rendered mark { 237 | color: var(--text-highlight-fg); 238 | } 239 | 240 | div.CodeMirror.cm-s-obsidian span.cm-highlight.CodeMirror-selectedtext { 241 | --text-selection: var(--text-highlight-bg-active); 242 | } 243 | .ebw-test-select { 244 | background-color: var(--text-selection); 245 | } 246 | 247 | // DATAVIEW TASK Skip decorations on dataview task list item indicators 248 | .markdown-preview-view .task-list-item, 249 | .markdown-rendered .task-list-item { 250 | a[data-href][aria-label-position].internal-link { 251 | border-bottom: none; 252 | text-decoration: none; 253 | color: var(--ebw-link-underline); 254 | } 255 | } 256 | -------------------------------------------------------------------------------- /src/fragments/_06-lists-checkboxes.scss: -------------------------------------------------------------------------------- 1 | @use '06a-checkbox-mixin' as checkboxes; 2 | 3 | // Colors 4 | 5 | body { 6 | --checkbox-checked: var(--green-4); 7 | --checkbox-deferred: var(--blue-3); 8 | --checkbox-review: var(--green-3); 9 | --checkbox-important: var(--pink-4); 10 | --checkbox-in-progress: var(--cyan-4); 11 | --checkbox-question: var(--yellow-3); 12 | --checkbox-cancelled: var(--gray-dark-3); 13 | --checkbox-hover: var(--gray-dark-2); 14 | } 15 | .theme-light { 16 | --checkbox-checked: var(--green-3); 17 | --checkbox-deferred: var(--blue-3); 18 | --checkbox-review: var(--green-3); 19 | --checkbox-important: var(--red-4); 20 | --checkbox-in-progress: var(--cyan-3); 21 | --checkbox-question: var(--yellow-3); 22 | --checkbox-cancelled: var(--gray-dark-1); 23 | --checkbox-hover: var(--gray-light-2); 24 | } 25 | 26 | body:not(.ebullientworks-nix-checkbox) { 27 | /** Use style settings to disable custom checkboxes in the theme */ 28 | @include checkboxes.list; 29 | } 30 | 31 | .mobile { 32 | .markdown-preview-view { 33 | ol, 34 | ul { 35 | display: block; 36 | line-height: var(--line-height); 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/fragments/_06a-checkbox-mixin.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @mixin list() { 4 | div[data-task] > label.task-list-label, 5 | ul > li.task-list-item, 6 | ul > li.task-list-item > p { 7 | color: var(--text-normal); 8 | font-weight: unset; 9 | text-decoration: unset; 10 | 11 | > input.task-list-item-checkbox[type=checkbox]:not(:checked) { 12 | background-color: unset; 13 | background: unset; 14 | } 15 | } 16 | 17 | @include custom-task-text("x", var(--checkbox-checked), "✓", var(--font-normal), none, var(--text-normal), var(--font-text)); 18 | @include custom-task-text("-", var(--checkbox-cancelled), "-", var(--font-normal), line-through, var(--text-faint)); 19 | @include custom-task-text(">", var(--checkbox-deferred), ">", var(--font-normal), none); 20 | @include custom-task-text("b", var(--checkbox-deferred), "🧱", var(--font-normal), none); 21 | @include custom-task-text("R", var(--checkbox-review), "👀", var(--font-normal), none, var(--text-normal), var(--font-text)); 22 | @include custom-task-text("r", var(--checkbox-review), "👀", var(--font-normal), none, var(--text-normal), var(--font-text)); 23 | @include custom-task-text("?", var(--checkbox-question), "?", var(--font-normal), none); 24 | @include custom-task-text("!", var(--checkbox-important), "!", var(--font-extrabold), none); 25 | @include custom-task-background("/", var(--checkbox-in-progress), "linear-gradient(135deg, transparent 50%, var(--checkbox-in-progress) 50%)"); 26 | } 27 | 28 | @mixin custom-task-background( 29 | $character, 30 | $rgb-color, 31 | $background, 32 | $font-weight: var(--font-normal), 33 | $text-decoration: none, 34 | $li-fg: var(--text-normal) 35 | ) { 36 | div[data-task="#{$character}"], 37 | li.task-list-item[data-task="#{$character}"], 38 | li.task-list-item[data-task="#{$character}"] > p { 39 | color: $li-fg; 40 | font-weight: $font-weight; 41 | text-decoration: $text-decoration; 42 | } 43 | div[data-task="#{$character}"] > label.task-list-label, 44 | li.task-list-item[data-task="#{$character}"], 45 | li.task-list-item[data-task="#{$character}"] > p, 46 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="#{$character}"] { 47 | --checkbox-color: #{$rgb-color}; 48 | --checkbox-border-color: #{$rgb-color}; 49 | --checkbox-marker-color: transparent; 50 | --checklist-done-decoration: #{$text-decoration}; 51 | } 52 | 53 | input[data-task="#{$character}"]:checked, 54 | li[data-task="#{$character}"] > input[type=checkbox]:checked, 55 | li[data-task="#{$character}"] > p > input[type=checkbox]:checked { 56 | background: #{$background}; 57 | 58 | &:after { 59 | transform: none; 60 | -webkit-mask-image: none; 61 | background: unset; 62 | content: ' '; 63 | } 64 | } 65 | } 66 | 67 | @mixin custom-task-text( 68 | $character, 69 | $rgb-color, 70 | $emoji, 71 | $font-weight, 72 | $text-decoration, 73 | $li-fg: var(--text-normal), 74 | $font-family: var(--font-monospace) 75 | ) { 76 | div[data-task="#{$character}"], 77 | li.task-list-item[data-task="#{$character}"], 78 | li.task-list-item[data-task="#{$character}"] > p { 79 | color: $li-fg; 80 | font-weight: $font-weight; 81 | text-decoration: $text-decoration; 82 | } 83 | div[data-task="#{$character}"] > label.task-list-label, 84 | li.task-list-item[data-task="#{$character}"], 85 | li.task-list-item[data-task="#{$character}"] > p, 86 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="#{$character}"] { 87 | --checkbox-color: #{$rgb-color}; 88 | --checkbox-border-color: #{$rgb-color}; 89 | --checkbox-marker-color: transparent; 90 | --checklist-done-decoration: #{$text-decoration}; 91 | } 92 | 93 | input[type=checkbox][data-task="#{$character}"]:checked, 94 | li[data-task="#{$character}"] > input[type=checkbox]:checked, 95 | li[data-task="#{$character}"] > p > input[type=checkbox]:checked { 96 | background-color: unset; 97 | background: unset; 98 | 99 | &::after { 100 | transform: none; 101 | -webkit-mask-image: none; 102 | background: unset; 103 | position: absolute; 104 | text-align: center; 105 | font-weight: $font-weight; 106 | font-size: calc(var(--checkbox-size) - 2px); 107 | font-family: #{$font-family}; 108 | line-height: var(--checkbox-size); 109 | left: 50%; 110 | margin-left: calc(-1 * (var(--checkbox-size) / 2)); 111 | color: var(--checkbox-color); 112 | content: '#{$emoji}'; 113 | display: block; 114 | } 115 | } 116 | } 117 | -------------------------------------------------------------------------------- /src/fragments/_08-blockquote-callouts.scss: -------------------------------------------------------------------------------- 1 | // Declare mixins 2 | @mixin blockquote-styles { 3 | blockquote { 4 | overflow-x: auto; 5 | padding: var(--callout-content-padding); 6 | border-radius: var(--callout-radius); 7 | 8 | > :first-child { 9 | margin-top: 0.5em; 10 | } 11 | 12 | > :last-child { 13 | margin-bottom: 0.5em; 14 | } 15 | } 16 | } 17 | 18 | // General colors 19 | 20 | body { 21 | --callout-padding: 0; 22 | --callout-radius: var(--radius-m); 23 | --callout-content-padding: 0 var(--size-4-2); 24 | --callout-title-padding: var(--size-4-2); 25 | --callout-border-opacity: 0.4; 26 | --callout-border-width: 0 0.05rem 0 0.1rem; 27 | --blockquote-border-thickness: 0.05rem; 28 | 29 | --ebw-callout-warning: 234, 175, 0; // yellow-3 30 | --ebw-callout-success: 139, 167, 145; // green-3 31 | 32 | --ebw-callout-note: 148, 189, 223; // blue-2 33 | --ebw-callout-info: 111, 166, 211; // blue-3 34 | --ebw-callout-quote: 53, 120, 175; // blue-4 35 | 36 | --ebw-callout-tip: 134, 196, 193; // cyan-2 37 | --ebw-callout-question: 89, 174, 170; // cyan-3 38 | --ebw-callout-chat: 61, 126, 123; // cyan-4 39 | 40 | --ebw-callout-abstract: 199, 178, 195; // purple-2 41 | --ebw-callout-bug: 180, 152, 175; // purple-3 42 | --ebw-callout-example: 142, 103, 135; // purple-4 43 | 44 | --ebw-callout-danger: 230, 133, 132; // red-3 45 | --ebw-callout-failure: 211, 141, 159; // pink-3 46 | 47 | --ebw-callout-reference: 183, 183, 183; // gray 48 | --ebw-callout-toc: 235, 235, 235; // gray-light-4 49 | 50 | --blockquote-border-color: var(--secondary-accent-4); 51 | } 52 | 53 | .theme-light { 54 | --blockquote-border-color: var(--secondary-accent-2); 55 | --ebw-callout-toc: 159, 159, 159; // gray-dark-1 56 | --ebw-callout-reference: 137, 137, 137; // gray-dark-2 57 | --ebw-callout-success: 92, 122, 99; // green-4 58 | 59 | --ebw-callout-note: 33, 75, 109; // blue-5 60 | --ebw-callout-abstract: 88, 64, 84; // purple-5 61 | --ebw-callout-info: 53, 119, 174; // blue-4 62 | --ebw-callout-tip: 61, 126, 123; // cyan-4 63 | 64 | --ebw-callout-danger: 167, 92, 112; // pink-4 65 | } 66 | 67 | // Blockquote styling 68 | 69 | .rendered-widget, 70 | .markdown-preview-section, 71 | .markdown-rendered { 72 | @include blockquote-styles; 73 | } 74 | 75 | // Edit button tweaks 76 | 77 | .markdown-source-view.mod-cm6 .edit-block-button { 78 | right: calc(var(--size-4-2) + var(--icon-size) + 0.375rem); 79 | top: calc(var(--size-2-2) + 0.125rem); 80 | } 81 | 82 | // Build callouts 83 | 84 | // Callout Color Types 85 | 86 | $callout-types: ( 87 | "abstract": ebw-callout-abstract, 88 | "summary": ebw-callout-abstract, 89 | "tldr": ebw-callout-abstract, 90 | "note": ebw-callout-note, 91 | "info": ebw-callout-info, 92 | "todo": ebw-callout-info, 93 | "tip": ebw-callout-tip, 94 | "hint": ebw-callout-tip, 95 | "important": ebw-callout-tip, 96 | "success": ebw-callout-success, 97 | "check": ebw-callout-success, 98 | "done": ebw-callout-success, 99 | "question": ebw-callout-question, 100 | "help": ebw-callout-question, 101 | "faq": ebw-callout-question, 102 | "warning": ebw-callout-warning, 103 | "caution": ebw-callout-warning, 104 | "attention": ebw-callout-warning, 105 | "failure": ebw-callout-failure, 106 | "fail": ebw-callout-failure, 107 | "missing": ebw-callout-failure, 108 | "danger": ebw-callout-danger, 109 | "error": ebw-callout-danger, 110 | "bug": ebw-callout-bug, 111 | "example": ebw-callout-example, 112 | "excerpt": ebw-callout-quote, 113 | "quote": ebw-callout-quote, 114 | "cite": ebw-callout-quote, 115 | "chat": ebw-callout-chat, 116 | "reference": ebw-callout-reference, 117 | "toc": ebw-callout-toc 118 | ); 119 | 120 | .callout { 121 | @each $type, $color in $callout-types { 122 | &[data-callout="#{$type}"] { 123 | --callout-color: var(--#{$color}); 124 | } 125 | } 126 | } 127 | 128 | // Color Map 129 | 130 | $callout-title-types: ( 131 | "info": blue-5, 132 | "todo": blue-5, 133 | "note": blue-5, 134 | "excerpt": blue-5, 135 | "quote": blue-5, 136 | "cite": blue-5, 137 | "bug": purple-5, 138 | "example": purple-5, 139 | "abstract": purple-5, 140 | "summary": purple-5, 141 | "tldr": purple-5, 142 | "question": cyan-5, 143 | "help": cyan-5, 144 | "faq": cyan-5, 145 | "tip": cyan-5, 146 | "hint": cyan-5, 147 | "important": cyan-5, 148 | "success": green-5, 149 | "check": green-5, 150 | "done": green-5, 151 | "warning": yellow-5, 152 | "caution": yellow-5, 153 | "attention": yellow-5, 154 | "danger": red-5, 155 | "error": red-5, 156 | "failure": red-5, 157 | "fail": red-5, 158 | "missing": red-5, 159 | "toc": gray-dark-4, 160 | "reference": gray-dark-4 161 | ); 162 | 163 | .theme-light { 164 | @each $type, $color in $callout-title-types { 165 | .callout[data-callout="#{$type}"] { 166 | --callout-title-color: var(--#{$color}); 167 | } 168 | } 169 | } 170 | 171 | 172 | .callout-title { 173 | font-family: var(--ebw-font-callout-title); 174 | 175 | & .callout-title-inner { 176 | flex: 2; 177 | } 178 | } 179 | 180 | .callout-content { 181 | background-color: var(--background-primary); 182 | 183 | > :first-child { 184 | margin-top: 0.5em; 185 | } 186 | 187 | > :last-child { 188 | margin-bottom: 0.5em; 189 | } 190 | } 191 | 192 | // Add Admonition 193 | .admonition { 194 | margin: 1em 0; 195 | padding: var(--callout-padding); 196 | } 197 | .is-live-preview { 198 | .admonition { 199 | margin: 0; 200 | padding: var(--callout-padding); 201 | 202 | .admonition-content { 203 | > :first-child { 204 | margin-top: 0.5em; 205 | } 206 | > :last-child { 207 | margin-bottom: 0.5em; 208 | } 209 | > * { 210 | margin-top: initial; 211 | margin-bottom: initial; 212 | } 213 | > * br { 214 | display: none; 215 | } 216 | ul, 217 | ol { 218 | white-space: normal; 219 | } 220 | .math-block > mjx-container { 221 | padding: 0; 222 | } 223 | &:last-child { 224 | margin-bottom: 0; 225 | } 226 | } 227 | } 228 | } 229 | 230 | .markdown-source-view.mod-cm6 .edit-block-button { 231 | right: calc(var(--size-4-2) + var(--icon-size) + 0.375rem); 232 | top: calc(var(--size-2-2) + 0.125rem); 233 | } 234 | 235 | 236 | // ------------------------------------------------------ 237 | // Reference Admonition 238 | // Create admonition of type 'reference' (book icon suggested) 239 | // ```ad-reference 240 | // Title:: Title of referenced thing 241 | // Source:: https://.... 242 | // ``` 243 | // ------------------------------------------------------ 244 | 245 | .callout[data-callout="reference"] { 246 | .callout-content { 247 | white-space: pre-wrap; 248 | font-family: var(--font-monospace); 249 | font-size: var(--font-smallest); 250 | color: var(--text-muted); 251 | 252 | p { 253 | margin-block: 0; 254 | } 255 | 256 | p:not(:first-child) { 257 | margin-block-end: .5em; 258 | } 259 | } 260 | } 261 | 262 | // ------------------------------------------------------ 263 | // TOC Admonition 264 | // List with compressed padding that floats to the right 265 | // Create admonition of type 'toc' (outline icon suggested) 266 | // ```ad-toc 267 | // - List of links to document sections 268 | // ``` 269 | // ------------------------------------------------------ 270 | 271 | .callout[data-callout="toc"] { 272 | &.callout { 273 | float: right; 274 | margin-left: .5em; 275 | min-width: 9.375rem; 276 | } 277 | 278 | .callout-content { 279 | padding-right: .5em; 280 | 281 | ul { 282 | display: block; 283 | margin-block-start: .5em; 284 | margin-block-end: .5em; 285 | margin-inline-start: 0; 286 | margin-inline-end: 0; 287 | padding-inline-start: 1.875rem; 288 | } 289 | } 290 | } 291 | 292 | div.modal-content { 293 | .callout[data-callout="toc"] { 294 | float: unset; 295 | min-width: unset; 296 | margin-left: unset; 297 | } 298 | } 299 | 300 | div.popover { 301 | .callout[data-callout="toc"] { 302 | display: none; 303 | } 304 | } 305 | -------------------------------------------------------------------------------- /src/fragments/_09-codeblocks.scss: -------------------------------------------------------------------------------- 1 | .theme-dark { 2 | --code-normal: var(--blue-2); 3 | } 4 | .theme-light { 5 | --code-normal: var(--blue-4); 6 | } 7 | kbd { 8 | padding: 0.1em 0.25em; 9 | background-color: var(--background-secondary-alt); 10 | } 11 | 12 | .cm-s-obsidian .HyperMD-codeblock span.cm-inline-code { 13 | padding: unset; 14 | } 15 | -------------------------------------------------------------------------------- /src/fragments/_10-images-embeds.scss: -------------------------------------------------------------------------------- 1 | @mixin invisibleEmbed() { 2 | --embed-border-left: none; 3 | --embed-border-right: none; 4 | --embed-border-start: none; 5 | --embed-border-end: none; 6 | --embed-padding: 0; 7 | } 8 | 9 | @mixin visibleEmbed() { 10 | --embed-border-left: 0.0625rem solid var(--ebw-embed-border-color); 11 | --embed-border-right: 0.0625rem solid var(--ebw-embed-border-color); 12 | --embed-padding: var(--size-2-1) var(--size-4-2); 13 | } 14 | 15 | body { 16 | --ebw-embed-border-color: var(--gray-dark-7); 17 | @include visibleEmbed; 18 | } 19 | 20 | .theme-light { 21 | --ebw-embed-border-color: var(--primary-accent-1); 22 | } 23 | 24 | // Floating images 25 | img, 26 | div { 27 | &[alt~='float-right'] { 28 | float: right; 29 | margin-left: 1rem; 30 | margin-top: 1rem; 31 | } 32 | &[alt~='float-left'] { 33 | float: left; 34 | margin-right: 1rem; 35 | margin-top: 1rem; 36 | } 37 | // Use an anchor tag: ![Image](image.jpg#portrait) 38 | &[src$="#portrait"] { 39 | float: right; 40 | margin-left: 0.3125rem; 41 | width: 12.5rem; 42 | height: 12.5rem; 43 | } 44 | &[src$="#callout"] { 45 | float: right; 46 | margin-left: 0.3125rem; 47 | width: 50%; 48 | } 49 | &[src$="#small-right"] { 50 | float: right; 51 | margin-left: 0.3125rem; 52 | width: 4.6875rem; 53 | } 54 | } 55 | 56 | // Naked embeds 57 | .markdown-embed.internal-embed[alt="invisible-embed"] { 58 | @include invisibleEmbed; 59 | } 60 | 61 | .internal-embed[alt="visible-embed"] { 62 | @include visibleEmbed; 63 | } 64 | 65 | .markdown-embed { 66 | border-radius: var(--radius-l); 67 | position: relative; 68 | 69 | .markdown-embed-content { 70 | max-height: unset; 71 | overflow: unset; 72 | 73 | > .markdown-preview-view { 74 | // no scroll 75 | overflow-y: unset; 76 | } 77 | } 78 | } 79 | 80 | .internal-embed .markdown-embed-content { 81 | .markdown-rendered div > ul, 82 | .markdown-rendered div > ol { 83 | display: inline-block; 84 | margin-block-start: 0; 85 | } 86 | } 87 | 88 | li .internal-embed { 89 | blockquote { 90 | margin: 0; 91 | } 92 | p { 93 | margin-bottom: 0; 94 | } 95 | .markdown-embed-content { 96 | padding-right: 12px; 97 | } 98 | } 99 | 100 | // Hide the embedded header and use other styling to create uniform padding 101 | .ebullientworks-hide-embedded-heading { 102 | .markdown-embed { 103 | .markdown-embed-title, 104 | .mod-header { 105 | display: none; 106 | } 107 | div.markdown-preview-pusher + div, 108 | div.mod-header + div { 109 | > h1[data-heading], 110 | > h2[data-heading], 111 | > h3[data-heading], 112 | > h4[data-heading], 113 | > h5[data-heading], 114 | > h6[data-heading] { 115 | display: none; 116 | } 117 | } 118 | } 119 | } 120 | 121 | // EMBED LINK 122 | .markdown-embed-link svg { 123 | color: var(--ebw-link-underline); 124 | height: 0.875rem; 125 | width: 0.875rem; 126 | } 127 | 128 | .markdown-embed-link, 129 | .file-embed-link { 130 | top: 0; 131 | right: 0; 132 | height: 1.125rem; 133 | width: 1.125rem; 134 | text-align: center; 135 | vertical-align: middle; 136 | z-index: var(--layer-tooltip); 137 | } 138 | 139 | // Scaled iframes 140 | .embedframe iframe { 141 | width: 125%; 142 | height: 46.875rem; 143 | -webkit-transform: scale(.8); 144 | transform: scale(.8); 145 | -webkit-transform-origin: 0 0; 146 | transform-origin: 0 0; 147 | } 148 | 149 | .embedframe .scaled-iframe { 150 | width: 100%; 151 | height: 37.5rem; 152 | position: relative; 153 | } 154 | 155 | .markdown-source-view.invisible-embed, 156 | .markdown-rendered.invisible-embed { 157 | @include invisibleEmbed; 158 | } 159 | 160 | .markdown-source-view { 161 | .internal-embed { 162 | --list-indent: 1.6em; 163 | vertical-align: top; 164 | display: inline-block; 165 | width: calc(100% - 1.25rem); 166 | 167 | .markdown-embed-content { 168 | padding-right: 12px; 169 | 170 | li.task-list-item { 171 | position: relative; 172 | text-indent: -21px; 173 | margin-left: -0.25em; 174 | padding-left: 0; 175 | } 176 | } 177 | } 178 | 179 | .HyperMD-list-line > .internal-embed { 180 | .markdown-rendered ul, 181 | .markdown-rendered ol { 182 | display: inline-block; 183 | margin-block-start: 0; 184 | margin-block-end: 0; 185 | } 186 | .markdown-preview-section { 187 | display: inline-block; 188 | blockquote { 189 | margin: 0; 190 | } 191 | p { 192 | margin-bottom: 0; 193 | } 194 | } 195 | } 196 | } 197 | -------------------------------------------------------------------------------- /src/fragments/_12-calendar-day-planner-tracker.scss: -------------------------------------------------------------------------------- 1 | .theme-dark { 2 | --ebw-calendar-year: var(--primary-accent-3); 3 | --ebw-calendar-month: var(--secondary-accent-3); 4 | --ebw-today-hover: var(--gray-light-5); 5 | --ebw-today-text: var(--primary-accent-3); 6 | --day-planner-progress-fg: var(--secondary-accent-3); 7 | --day-planner-progress-bg: var(--secondary-accent-5); 8 | } 9 | .theme-light { 10 | --ebw-calendar-year: var(--primary-accent-4); 11 | --ebw-calendar-month: var(--secondary-accent-4); 12 | --ebw-today-hover: var(--gray-dark-5); 13 | --ebw-today-text: var(--primary-accent-4); 14 | --day-planner-progress-fg: var(--secondary-accent-1); 15 | --day-planner-progress-bg: var(--background-primary); 16 | } 17 | // ------------------------------------------------------ 18 | // Calendar, Fantasy Calendar 19 | // ------------------------------------------------------ 20 | #calendar-container, 21 | .calendarium { 22 | h3::before { 23 | display: none; 24 | } 25 | h3.calendar-name { 26 | font-size: 1.2em; 27 | font-family: var(--font-interface); 28 | font-variant-caps: var(--ebw-header-font-caps-variant); 29 | } 30 | .calendarium-title { 31 | font-size: 1em; 32 | font-family: var(--font-interface); 33 | } 34 | span.year { 35 | color: var(--ebw-calendar-year); 36 | } 37 | span.month { 38 | color: var(--ebw-calendar-month); 39 | } 40 | } 41 | .today, 42 | .day.today .day-number { 43 | --color-text-today: var(--ebw-today-text); 44 | color: var(--ebw-today-text); 45 | font-weight: bold; 46 | 47 | &:hover { 48 | color: var(--ebw-today-hover); 49 | } 50 | } 51 | // ------------------------------------------------------ 52 | // Day Planner 53 | // ------------------------------------------------------ 54 | .day-planner-progress-bar { 55 | background-color: var(--day-planner-progress-bg); 56 | border: 1px solid var(--tab-outline-color); 57 | } 58 | .day-planner-progress-value { 59 | height: 14px; 60 | background-color: var(--day-planner-progress-fg); 61 | } 62 | // --- 63 | // Folder note 64 | // --- 65 | .folder-note-underline-path .has-folder-note.view-header-breadcrumb, 66 | .folder-note-underline .has-folder-note .nav-folder-title-content { 67 | text-decoration-line: underline; 68 | text-decoration-style: dotted; 69 | text-decoration-color: var(--color-base-40); 70 | text-decoration-thickness: 1px; 71 | text-underline-offset: 2px; 72 | } 73 | // ------ 74 | // Fantasy Calendar 75 | // ------ 76 | .mod-cta { 77 | .setting-item-description, 78 | .setting-item-name { 79 | color: var(--text-on-accent); 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /src/fragments/_13-timelines.scss: -------------------------------------------------------------------------------- 1 | .theme-dark { 2 | .timeline-container h2 { 3 | color: var(--gray-dark-2); 4 | } 5 | .timeline-left::before { 6 | border: medium solid var(--gray-dark-2); 7 | border-width: 10px 0 10px 10px; 8 | border-color: transparent transparent transparent var(--gray-dark-2); 9 | } 10 | .timeline-right::before { 11 | border: medium solid var(--gray-dark-2); 12 | border-width: 10px 10px 10px 0; 13 | border-color: transparent var(--gray-dark-2) transparent transparent; 14 | } 15 | .timeline-container::after { 16 | border: 4px solid var(--primary-accent-4); 17 | } 18 | } 19 | .theme-light { 20 | .timeline-container h2 { 21 | color: var(--gray-light-1); 22 | } 23 | .timeline-left::before { 24 | border: medium solid var(--gray-light-1); 25 | border-width: 10px 0 10px 10px; 26 | border-color: transparent transparent transparent var(--gray-light-1); 27 | } 28 | .timeline-right::before { 29 | border: medium solid var(--gray-light-1); 30 | border-width: 10px 10px 10px 0; 31 | border-color: transparent var(--gray-light-1) transparent transparent; 32 | } 33 | .timeline-container::after { 34 | border: 4px solid var(--primary-accent-2); 35 | } 36 | .timeline::after { 37 | background-color: var(--blue-1); 38 | } 39 | } 40 | 41 | .timeline-container { 42 | page-break-inside: avoid; 43 | h1:before, 44 | h2:before, 45 | h3:before, 46 | h4:before, 47 | h5:before, 48 | h6:before { 49 | display: none; 50 | } 51 | } 52 | 53 | .timeline-card a.internal-link { 54 | text-decoration: none; 55 | } 56 | 57 | -------------------------------------------------------------------------------- /src/fragments/_13-whitespace.scss: -------------------------------------------------------------------------------- 1 | body.theme-light:not(.swcm6-nix-plugin-styles) { 2 | --show-whitespace-color: var(--color-base-30); 3 | } 4 | -------------------------------------------------------------------------------- /src/fragments/_14-frontmatter.scss: -------------------------------------------------------------------------------- 1 | .ebullientworks-floating-frontmatter, 2 | .ebullientworks-floating-frontmatter.is-mobile { 3 | .markdown-rendered { 4 | pre.frontmatter { 5 | float: right; 6 | position: absolute; 7 | right: .15em; 8 | top: .65rem; 9 | width: 2rem; 10 | height: 2rem; 11 | overflow: hidden; 12 | border: none !important; 13 | background-color: transparent; 14 | 15 | code { 16 | visibility: hidden; 17 | } 18 | 19 | .mod-failed { 20 | position: absolute; 21 | .mod-error { 22 | visibility: hidden; 23 | } 24 | &:hover .mod-error { 25 | visibility: visible; 26 | } 27 | } 28 | 29 | &::before { 30 | content: "✧"; 31 | font-size: 20px; 32 | color: var(--primary-accent-3); 33 | float: right; 34 | } 35 | &:not(:hover) > button.copy-code-button { 36 | display: none; 37 | } 38 | &:hover { 39 | border: 1px solid var(--background-modifier-border); 40 | background-color: var(--background-secondary); 41 | filter: drop-shadow(-.1rem .1rem .1rem var(--background-secondary-alt)); 42 | width: 60%; 43 | min-width: 200px; 44 | height: unset; 45 | z-index: 3; 46 | 47 | code { 48 | visibility: visible; 49 | background-color: var(---background-secondary); 50 | } 51 | } 52 | } 53 | 54 | .metadata-container, 55 | .frontmatter-container { 56 | float: right; 57 | position: absolute; 58 | right: .6rem; 59 | top: 0; 60 | width: 2rem; 61 | height: 2rem; 62 | overflow: hidden; 63 | border: none; 64 | background-color: transparent; 65 | 66 | .metadata-properties-heading, 67 | .metadata-content, 68 | .frontmatter-container-header, 69 | .frontmatter-section { 70 | visibility: hidden; 71 | } 72 | &::before { 73 | content: "✧"; 74 | font-size: 20px; 75 | color: var(--primary-accent-3); 76 | float: right; 77 | } 78 | &:hover { 79 | .metadata-properties-heading, 80 | .frontmatter-container-header, 81 | .metadata-content, 82 | .frontmatter-section { 83 | visibility: visible; 84 | } 85 | .frontmatter-collapse-indicator { 86 | display: none; 87 | } 88 | } 89 | } 90 | 91 | .frontmatter-container:hover { 92 | border: 1px solid var(--background-modifier-border); 93 | background-color: var(--background-primary-alt); 94 | filter: drop-shadow(-.1rem .1rem .1rem var(--background-modifier-border)); 95 | width: 50%; 96 | min-width: 200px; 97 | height: unset; 98 | z-index: 3; 99 | 100 | .frontmatter-container-header { 101 | padding: var(--size-4-2) var(--size-4-2) 0 var(--size-4-2); 102 | } 103 | .frontmatter-section { 104 | padding: 0 var(--size-4-2) var(--size-2-1) var(--size-4-2); 105 | } 106 | } 107 | .metadata-container:hover { 108 | border: 1px solid var(--background-modifier-border); 109 | background-color: var(--background-primary-alt); 110 | filter: drop-shadow(-.1rem .1rem .1rem var(--background-modifier-border)); 111 | width: 80%; 112 | min-width: 200px; 113 | height: unset; 114 | z-index: 3; 115 | .metadata-property, 116 | .metadata-property[data-property-key="tags"] { 117 | --pill-background: var(--background-primary); 118 | } 119 | } 120 | } 121 | } 122 | -------------------------------------------------------------------------------- /src/fragments/_15-table.scss: -------------------------------------------------------------------------------- 1 | body { 2 | --table-header-color: var(--text-on-accent); 3 | --table-header-background-hover: var(--ebw-table-header-alt); 4 | --table-row-background-hover: var(--ebw-row-alt-hover); 5 | --table-row-alt-background-hover: var(--ebw-row-alt-hover); 6 | --table-background: var(--ebw-row-alt); 7 | --table-row-alt-background: unset; 8 | --table-column-alt-background: unset; 9 | --table-header-size: var(--font-small); 10 | } 11 | .theme-dark { 12 | --table-header-color: var(--text-on-accent); 13 | --table-header-background: var(--primary-accent-5); 14 | --ebw-table-header-alt: var(--primary-accent-4); 15 | --ebw-row-alt: rgba(0, 0, 0, .2); 16 | --ebw-row-alt-hover: rgba(var(--primary-accent-4-rgb), .2); 17 | } 18 | .theme-light { 19 | --table-header-color: var(--gray-dark-7); 20 | --table-header-background: var(--primary-accent-1); 21 | --table-header-border-color: var(--primary-accent-3); 22 | --table-header-weight: var(--font-semibold); 23 | --ebw-table-header-alt: rgba(var(--primary-accent-4-rgb), .4); 24 | --ebw-row-alt: rgba(0, 0, 0, .05); 25 | --ebw-row-alt-hover: rgba(var(--primary-accent-4-rgb), .05); 26 | } 27 | .markdown-rendered table.table-view-table.dataview { 28 | > thead { 29 | > tr > th, 30 | > tr > th.table-view-th { 31 | border: var(--table-border-width) solid var(--table-border-color); 32 | border-width: var(--table-header-border-width); 33 | border-color: var(--table-header-border-color); 34 | 35 | font-size: var(--table-header-size); 36 | font-weight: var(--table-header-weight); 37 | 38 | max-width: var(--table-column-max-width); 39 | 40 | .dataview.small-text { 41 | color: var(--text-on-accent); 42 | font-weight: 200; 43 | } 44 | } 45 | > tr > th:first-child { 46 | border-left-width: var(--table-column-first-border-width); 47 | } 48 | > tr > th:last-child { 49 | border-right-width: var(--table-column-last-border-width); 50 | } 51 | } 52 | > tbody { 53 | > tr:hover { 54 | background-color: var(--table-row-background-hover); 55 | } 56 | } 57 | tr > td { 58 | border: var(--table-border-width) solid var(--table-border-color); 59 | max-width: var(--table-column-max-width); 60 | } 61 | tr:last-child > td { 62 | border-bottom-width: var(--table-row-last-border-width); 63 | } 64 | tr > td:first-child { 65 | border-left-width: var(--table-column-first-border-width); 66 | } 67 | tr > td:last-child { 68 | border-right-width: var(--table-column-last-border-width); 69 | } 70 | } 71 | 72 | .markdown-rendered.force-wrap { 73 | table, 74 | table.table-view-table, 75 | table.table-view-table.dataview { 76 | max-width: 100%; 77 | 78 | .table-view-table > thead, 79 | thead { 80 | max-width: 100%; 81 | } 82 | .table-view-table > tbody, 83 | tbody { 84 | max-width: 100%; 85 | 86 | > tr > td { 87 | word-break: break-all; 88 | } 89 | } 90 | } 91 | } 92 | 93 | .markdown-rendered.word-wrap { 94 | table, 95 | table.table-view-table, 96 | table.table-view-table.dataview { 97 | 98 | .table-view-table > thead > tr > th, 99 | thead > th { 100 | white-space: pre; 101 | } 102 | 103 | .table-view-table > tbody > tr > td , 104 | tbody > tr > td { 105 | word-wrap: normal; 106 | word-break: normal; 107 | } 108 | } 109 | } 110 | 111 | 112 | -------------------------------------------------------------------------------- /src/fragments/_16-mermaid.scss: -------------------------------------------------------------------------------- 1 | // Mermaid Core 2 | 3 | .mermaid { 4 | font-family: var(--font-mermaid); 5 | fill: red; 6 | 7 | & .actor { 8 | stroke: var(--background-modifier-border); 9 | fill: var(--background-secondary); 10 | } 11 | 12 | & text.actor>tspan { 13 | fill: var(--text-normal); 14 | stroke: none; 15 | } 16 | } 17 | .mermaid .statediagram { 18 | 19 | & .nodelabel { 20 | color: red; 21 | } 22 | 23 | & .edgeLabel { 24 | background-color: black; 25 | text-align: left; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/fragments/_20-publish-variables.scss: -------------------------------------------------------------------------------- 1 | .published-container { 2 | // These are the Default Ones that Come with App.css 3 | 4 | // Page width and padding 5 | --page-width: 100%; 6 | --page-side-padding: 3rem /* 48/16 */; 7 | 8 | // Page titles 9 | --page-title-color: var(--h1-color); 10 | --page-title-font: var(--h1-font); 11 | --page-title-line-height: var(--h1-line-height); 12 | --page-title-size: 2.6em; 13 | --page-title-style: var(--h1-style); 14 | --page-title-variant: var(--h1-variant); 15 | --page-title-weight: var(--h1-weight); 16 | 17 | // Component Titles 18 | --component-title-color: var(--text-normal); 19 | --component-title-font: inherit; 20 | --component-title-size: var(--font-ui-small); 21 | --component-title-style: inherit; 22 | --component-title-transform: uppercase; 23 | --component-title-variant: inherit; 24 | --component-title-weight: var(--font-semibold); 25 | 26 | // Inputs 27 | --input-height: 2rem /* 32/16 */; 28 | 29 | // Graph 30 | --graph-height: 16.25rem /* 260/16 */; 31 | 32 | // Sidebar 33 | --sidebar-font-size: 0.875rem /* 14/16 */; 34 | --sidebar-left-width: 17.5rem /* 280/16 */; 35 | --sidebar-left-background: var(--background-primary); 36 | --sidebar-left-border-width: 0.0625rem /* 1/16 */; 37 | --sidebar-left-border-color: var(--background-modifier-border); 38 | --sidebar-right-width: 18.75rem /* 300/16 */; 39 | --sidebar-right-background: transparent; 40 | --sidebar-right-border-width: 0px; 41 | --sidebar-right-border-color: var(--background-modifier-border); 42 | 43 | // Site Headers 44 | --logo-width: auto; 45 | --logo-height: auto; 46 | --logo-max-width: calc(100% - 18px); 47 | --logo-max-height: 12.5rem /* 200/16 */; 48 | --logo-radius: 0.5rem /* 8/16 */; 49 | --header-height: 3.125rem /* 50/16 */; 50 | --site-name-color: var(--text-normal); 51 | --site-name-color-hover: var(--text-muted); 52 | --site-name-font: var(--ebw-font-monospace); 53 | --site-name-size: 1.125rem; /* 18/16 */; 54 | --site-name-weight: var(--font-semibold); 55 | --site-menu-icon-color: var(--text-faint); 56 | --site-menu-icon-color-hover: var(--text-normal); 57 | --site-menu-icon-size: 1.5rem /* 24/16 */; 58 | 59 | // Site Navigation 60 | --nav-collapse-icon-color: var(--text-faint); 61 | --nav-collapse-icon-color-hover: var(--text-muted); 62 | --nav-parent-item-color: var(--text-normal); 63 | --nav-parent-item-color-active: var(--text-accent); 64 | --nav-parent-item-weight: var(--font-medium); 65 | --nav-item-color: var(--text-muted); 66 | --nav-item-color-hover: var(--text-normal); 67 | --nav-item-color-active: var(--text-accent); 68 | --nav-item-border-color: var(--background-modifier-border); 69 | --nav-item-border-color-active: var(--text-accent); 70 | --nav-item-weight-active: var(--font-medium); 71 | 72 | // Outline 73 | --outline-heading-color: var(--text-muted); 74 | --outline-heading-color-hover: var(--text-normal); 75 | --outline-heading-color-active: var(--text-accent); 76 | --outline-heading-weight-active: var(--font-semibold); 77 | 78 | // Footer 79 | --footer-display: block; 80 | 81 | // Fonts 82 | --font-text-size: 16px; 83 | --font-text-theme: var(--ebw-font-text); 84 | --font-monospace-theme: var(--ebw-font-monospace); 85 | --font-interface-theme: var(--ebw-font-text); 86 | --font-mermaid: var(--ebw-font-monospace); 87 | } 88 | 89 | body { 90 | /* Tooltips */ 91 | --tooltip-display: none; 92 | /* Popovers */ 93 | --popover-display: block; 94 | 95 | // Added to fix borders on callouts 96 | --callout-border-width: 0.05rem 0 0 0.05rem; 97 | } 98 | 99 | 100 | .theme-dark { 101 | --nav-item-border-color-hover: var(--yellow-2); 102 | } 103 | 104 | .theme-light { 105 | --nav-item-border-color-hover: var(--yellow-4); 106 | } 107 | 108 | 109 | 110 | /* Obsidian Publish mobile variables */ 111 | /* --------------------------------- */ 112 | @media screen and (max-width: 750px) { 113 | body { 114 | --popover-display: none; 115 | --input-height: 36px; 116 | } 117 | .published-container { 118 | --site-name-size: 1.125rem; 119 | --header-height: 3.125rem; 120 | --header-background: var(--background-primary); 121 | --page-title-size: 2em; 122 | --page-side-padding: 1.5rem; 123 | --footer-display: none; 124 | --list-spacing: 0.15em; 125 | } 126 | } 127 | 128 | 129 | @media screen and (max-width: 1000px) { 130 | body { 131 | font-size: var(--font-ui-medium); 132 | } 133 | 134 | .published-container { 135 | --footer-display: none; 136 | --outline-heading-weight-active: 600; 137 | --header-height: var(--h2-size); 138 | --logo-height: auto; 139 | --nav-item-weight-active: 500; 140 | --logo-max-height: 9.375rem; 141 | --logo-max-width: calc(100% - 1.125rem); 142 | --site-menu-icon-size: 1.375rem; 143 | /* Navigation */ 144 | --site-name-size: var(--h3-size); 145 | --nav-parent-item-weight: 500; 146 | /* Outline */ 147 | --logo-radius: 0.375rem; 148 | /* Footer */ 149 | --logo-width: auto; 150 | } 151 | } 152 | 153 | @media screen and (min-width: 1280px) { 154 | /* ... rules and variables for screens larger than a big tablet */ 155 | .published-container { 156 | --page-side-padding: 10rem; 157 | --sidebar-left-width: 14.375rem; 158 | --sidebar-right-width: 15.625rem; 159 | --graph-height: 12.5rem; 160 | } 161 | } 162 | 163 | 164 | @media screen and (min-width: 1440px) { 165 | /* ... rules and variables for screens larger than a small monitor */ 166 | .published-container { 167 | --page-side-padding: 12rem; 168 | } 169 | } 170 | 171 | @media screen and (min-width: 1600px) { 172 | /* ... rules and variables for screens larger than a medium monitor */ 173 | .published-container { 174 | --page-side-padding: 14rem; 175 | } 176 | } 177 | 178 | @media screen and (min-width: 1920px) { 179 | /* ... rules and variables for screens larger than a average monitor */ 180 | .published-container { 181 | --page-side-padding: 16rem; 182 | } 183 | } 184 | 185 | @media screen and (min-width: 2560px) { 186 | /* ... rules and variables for screens larger than a good monitor */ 187 | .published-container { 188 | --page-side-padding: 18rem; 189 | } 190 | } 191 | 192 | @media screen and (min-width: 3840px) { 193 | /* ... rules and variables for screens larger than a projector */ 194 | .published-container { 195 | --page-side-padding: 20rem; 196 | } 197 | } 198 | -------------------------------------------------------------------------------- /src/fragments/_25-publish-typography.scss: -------------------------------------------------------------------------------- 1 | .markdown-rendered .internal-link { 2 | font-weight: 600; 3 | font-style: italic; 4 | } 5 | -------------------------------------------------------------------------------- /src/fragments/_29-publish-code.scss: -------------------------------------------------------------------------------- 1 | // Code Variables 2 | 3 | pre[class*='language-'] { 4 | overflow: hidden; 5 | } 6 | 7 | :not(pre) > code[class*='language-'], pre[class*='language-'] { 8 | background: var(--background-secondary-alt); 9 | } 10 | 11 | code[class*='language-'], pre[class*='language-'] { 12 | color: var(--blue-3); 13 | background: none; 14 | word-wrap: break-word; 15 | white-space: break-spaces; 16 | word-break: normal; 17 | font-family: var(--font-monospace-theme); 18 | text-align: left; 19 | word-spacing: normal; 20 | line-height: 1.2; 21 | -webkit-hyphens: none; 22 | -moz-hyphens: none; 23 | -ms-hyphens: none; 24 | hyphens: none; 25 | } 26 | 27 | .markdown-rendered { 28 | pre { 29 | position: relative; 30 | padding: 0.5rem 1rem; 31 | min-height: 2rem; 32 | background-color: var(--background-primary-alt); 33 | border-radius: 4px; 34 | white-space: break-spaces; 35 | overflow-x: auto; 36 | } 37 | 38 | pre code { 39 | background-color: var(--background-primary-alt); 40 | } 41 | } 42 | 43 | .token { 44 | 45 | &.atrule { 46 | color: var(--pink-2); 47 | } 48 | 49 | &.attr-value { 50 | color: var(--green-3); 51 | font-weight: bold; 52 | } 53 | 54 | &.bold { 55 | color: var(--green-4); 56 | font-weight: bold; 57 | } 58 | 59 | 60 | &.boolean { 61 | color: var(--cyan-3); 62 | } 63 | 64 | &.builtin { 65 | color: var(--cyan-2); 66 | } 67 | 68 | &.comment { 69 | color: var(--purple-4); 70 | } 71 | 72 | &.function { 73 | color: var(--pink-3); 74 | } 75 | 76 | &.important { 77 | color: var(--red-3); 78 | font-weight: bold; 79 | } 80 | 81 | &.number { 82 | color: var(--yellow-3); 83 | } 84 | 85 | &.property-access { 86 | color: var(--yellow-2); 87 | } 88 | 89 | &.punctuation { 90 | color: var(--purple-3); 91 | } 92 | 93 | &.regex { 94 | color: var(--red-4); 95 | } 96 | 97 | &.variable { 98 | color: var(--blue-3); 99 | } 100 | &.unit { 101 | color: var(--gray-dark-4); 102 | } 103 | } 104 | 105 | 106 | .published-container .callout-content { 107 | background-color: var(--background-primary-alt); 108 | } 109 | -------------------------------------------------------------------------------- /src/publish.scss: -------------------------------------------------------------------------------- 1 | //@use 'fragments/00-heading' as *; 2 | //@use 'fragments/01-color-palette' as *; 3 | //@use 'fragments/02-fonts' as *; 4 | // 5 | //@use 'fragments/03-core-theme-dark' as *; 6 | //@use 'fragments/03-core-theme-light' as *; 7 | //@use 'fragments/03d-graph-view' as *; 8 | // 9 | //@use 'fragments/04-headings-hr-tags' as *; 10 | //@use 'fragments/05-text-links' as *; 11 | //@use 'fragments/06-lists-checkboxes' as *; 12 | // 13 | //@use 'fragments/08-blockquote-callouts' as *; 14 | //@use 'fragments/09-codeblocks' as *; 15 | //@use 'fragments/10-images-embeds' as *; 16 | //@use 'fragments/15-table' as *; 17 | //// @use 'fragments/16-mermaid' as *; 18 | 19 | //@use 'fragments/20-publish-variables' as *; 20 | //@use 'fragments/25-publish-typography' as *; 21 | //@use 'fragments/29-publish-code' as *; 22 | -------------------------------------------------------------------------------- /src/tasks-snippet.scss: -------------------------------------------------------------------------------- 1 | @use 'fragments/00-heading' as *; 2 | @use 'fragments/06a-checkbox-mixin' as checkboxes; 3 | body { 4 | --checkbox-checked: rgb(139, 167, 145); 5 | --checkbox-deferred: rgb(111, 166, 211); 6 | --checkbox-important: rgb(187, 79, 108); 7 | --checkbox-review: rgb(92, 122, 99); 8 | --checkbox-in-progress: rgb(89, 174, 170); 9 | --checkbox-question: rgb(234, 175, 0); 10 | 11 | --checkbox-cancelled: rgb(115, 115, 115); 12 | --checkbox-hover: rgb(137, 137, 137); 13 | } 14 | .theme-light { 15 | --checkbox-cancelled: rgb(159, 159, 159); 16 | --checkbox-hover: rgb(137, 137, 137); 17 | } 18 | 19 | /** Deal with Blue Topaz masks */ 20 | li[data-task] input[type=checkbox]::before { 21 | transform: none !important; 22 | -webkit-mask-image: none !important; 23 | } 24 | 25 | @include checkboxes.list; 26 | 27 | -------------------------------------------------------------------------------- /src/theme.scss: -------------------------------------------------------------------------------- 1 | @use 'fragments/00-heading' as *; 2 | @use 'fragments/00-stylesettings' as *; 3 | @use 'fragments/01-color-palette' as *; 4 | @use 'fragments/01a-color-accents' as *; 5 | 6 | @use 'fragments/02-fonts' as *; 7 | @use 'fragments/02a-font-faces' as *; 8 | 9 | @use 'fragments/03-core-theme-dark' as *; 10 | @use 'fragments/03-core-theme-light' as *; 11 | @use 'fragments/03a-workspace-layout' as *; 12 | @use 'fragments/03c-modal-input' as *; 13 | @use 'fragments/03d-graph-view' as *; 14 | @use 'fragments/03f-metadata-view' as *; 15 | 16 | @use 'fragments/04-headings-hr-tags' as *; 17 | @use 'fragments/05-text-links' as *; 18 | @use 'fragments/06-lists-checkboxes' as *; 19 | @use 'fragments/08-blockquote-callouts' as *; 20 | @use 'fragments/09-codeblocks' as *; 21 | @use 'fragments/10-images-embeds' as *; 22 | 23 | 24 | @use 'fragments/12-calendar-day-planner-tracker' as *; 25 | @use 'fragments/13-whitespace' as *; 26 | //@use 'fragments/13-timelines' as *; 27 | @use 'fragments/14-frontmatter' as *; 28 | @use 'fragments/15-table' as *; 29 | // @use 'fragments/16-mermaid' as *; 30 | -------------------------------------------------------------------------------- /tasks-snippet-0.15.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /* 3 | Ebullientworks tasks 0.4.0 by @ebullient 4 | */ 5 | :root { 6 | --checkbox-checked: rgb(139, 167, 145); 7 | --checkbox-deferred: rgb(111, 166, 211); 8 | --checkbox-important: rgb(187, 79, 108); 9 | --checkbox-review: rgb(92, 122, 99); 10 | --checkbox-in-progress: rgb(89, 174, 170); 11 | --checkbox-question: rgb(234, 175, 0); 12 | } 13 | 14 | .theme-dark { 15 | --checkbox-cancelled: rgb(115, 115, 115); 16 | --checkbox-hover: rgb(137, 137, 137); 17 | } 18 | 19 | .theme-dark .print, 20 | .theme-light { 21 | --checkbox-cancelled: rgb(159, 159, 159); 22 | --checkbox-hover: rgb(137, 137, 137); 23 | } 24 | 25 | /** Deal with Blue Topaz masks */ 26 | .markdown-preview-view ul.contains-task-list li.task-list-item.is-checked[data-task] input.task-list-item-checkbox::before, 27 | .markdown-preview-view ol.contains-task-list li.task-list-item.is-checked[data-task] input.task-list-item-checkbox::before, 28 | .markdown-source-view.is-live-preview input.task-list-item-checkbox[data-task]::before { 29 | transform: none !important; 30 | -webkit-mask-image: none !important; 31 | } 32 | 33 | body:not(.is-mobile) .markdown-preview-view .task-list-item-checkbox { 34 | margin-top: 2px; 35 | margin-bottom: 1px; 36 | } 37 | 38 | body.is-mobile .markdown-preview-view .task-list-item-checkbox { 39 | top: 6px; 40 | } 41 | 42 | .markdown-preview-view .task-list-item-checkbox, 43 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task] input[type=checkbox].task-list-item-checkbox { 44 | border-radius: 3px; 45 | } 46 | 47 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=" "] input[type=checkbox][data-task=" "].task-list-item-checkbox:not(:checked), 48 | .markdown-preview-view ul.contains-task-list > li.task-list-item input[type=checkbox].task-list-item-checkbox:not(:checked), 49 | .markdown-preview-view ul.contains-task-list > li[data-task=""].task-list-item input[type=checkbox].task-list-item-checkbox:not(:checked) { 50 | position: relative; 51 | -webkit-appearance: none; 52 | box-sizing: border-box; 53 | background-color: transparent !important; /* override theme */ 54 | filter: none; 55 | background: unset !important; 56 | color: var(--text-normal); 57 | border-width: 1px; 58 | border-style: solid; 59 | border-color: var(--text-normal) !important; 60 | } 61 | 62 | /* '✓' for completed task ('- [x]') */ 63 | /* '-' for cancelled task ('- [-]') */ 64 | /* '>' for deferred task ('- [>]') */ 65 | /* '?' for question/more info task ('- [?]') */ 66 | /* 'R' for PR info task ('- [R]') */ 67 | /* 'r' for PR info task ('- [r]') */ 68 | /* '!' for important task ('- [!]') */ 69 | /* "/" Half done */ 70 | /* text style tasks that should still have readable text */ 71 | /* text style for important task ('- [!]') */ 72 | /* '/' for task ('- [/]') */ 73 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="/"] input[type=checkbox][data-task="/"].task-list-item-checkbox:checked::before, 74 | .markdown-preview-view ul.contains-task-list li[data-task="/"].task-list-item input[type=checkbox].task-list-item-checkbox:checked::before { 75 | font-family: var(--font-monospace); 76 | background: none; 77 | position: absolute; 78 | text-align: center; 79 | font-weight: 500; 80 | font-size: 14px; 81 | line-height: 14px; 82 | top: 0; 83 | left: 1px; 84 | right: 1px; 85 | color: var(--checkbox-in-progress); 86 | content: " "; 87 | } 88 | 89 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="/"] input[type=checkbox][data-task="/"].task-list-item-checkbox:checked, 90 | .markdown-preview-view ul.contains-task-list li[data-task="/"].task-list-item input[type=checkbox].task-list-item-checkbox:checked { 91 | position: relative; 92 | -webkit-appearance: none; 93 | box-sizing: border-box; 94 | background: linear-gradient(135deg, transparent 50%, var(--checkbox-in-progress) 50%); 95 | filter: none; 96 | color: var(--checkbox-in-progress); 97 | font-family: var(--font-monospace); 98 | border-width: 1px; 99 | border-style: solid; 100 | border-color: var(--checkbox-in-progress) !important; 101 | } 102 | 103 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="/"], 104 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="/"] input[type=checkbox].task-list-item-checkbox[data-task="/"] + span, 105 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="/"] input[type=checkbox].task-list-item-checkbox[data-task="/"] + span + span, 106 | .markdown-preview-view ul.contains-task-list > li[data-task="/"].task-list-item.is-checked { 107 | text-decoration: none !important; /* override theme */ 108 | font-weight: 500; 109 | font-style: normal; 110 | } 111 | 112 | /* '>' for task ('- [>]') */ 113 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=">"] input[type=checkbox][data-task=">"].task-list-item-checkbox:checked::before, 114 | .markdown-preview-view ul.contains-task-list > li[data-task=">"].task-list-item input[type=checkbox].task-list-item-checkbox:checked::before { 115 | font-family: var(--font-monospace); 116 | background: none; 117 | position: absolute; 118 | text-align: center; 119 | font-weight: 500; 120 | font-size: 14px; 121 | line-height: 14px; 122 | top: 0; 123 | left: 1px; 124 | right: 1px; 125 | color: var(--checkbox-deferred); 126 | content: ">"; 127 | } 128 | 129 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=">"] input[type=checkbox][data-task=">"].task-list-item-checkbox:checked, 130 | .markdown-preview-view ul.contains-task-list > li[data-task=">"].task-list-item input[type=checkbox].task-list-item-checkbox:checked { 131 | position: relative; 132 | -webkit-appearance: none; 133 | box-sizing: border-box; 134 | background: unset !important; 135 | background-color: transparent !important; /* override theme */ 136 | filter: none; 137 | color: var(--checkbox-deferred); 138 | font-family: var(--font-monospace); 139 | border-width: 1px; 140 | border-style: solid; 141 | border-color: var(--checkbox-deferred) !important; 142 | } 143 | 144 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=">"], 145 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=">"] input[type=checkbox].task-list-item-checkbox[data-task=">"] + span, 146 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=">"] input[type=checkbox].task-list-item-checkbox[data-task=">"] + span + span, 147 | .markdown-preview-view ul.contains-task-list > li[data-task=">"].task-list-item.is-checked { 148 | text-decoration: none !important; /* override theme */ 149 | font-weight: 500; 150 | font-style: normal; 151 | } 152 | 153 | /* 'R' for task ('- [R]') */ 154 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=r] input[type=checkbox][data-task=r].task-list-item-checkbox:checked::before, 155 | .markdown-preview-view ul.contains-task-list > li[data-task=r].task-list-item input[type=checkbox].task-list-item-checkbox:checked::before, 156 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=R] input[type=checkbox][data-task=R].task-list-item-checkbox:checked::before, 157 | .markdown-preview-view ul.contains-task-list > li[data-task=R].task-list-item input[type=checkbox].task-list-item-checkbox:checked::before { 158 | font-family: var(--font-monospace); 159 | background: none; 160 | position: absolute; 161 | text-align: center; 162 | font-weight: 500; 163 | font-size: 14px; 164 | line-height: 14px; 165 | top: 0; 166 | left: 0px; 167 | right: 2px; 168 | color: var(--checkbox-review); 169 | content: "👀"; 170 | } 171 | 172 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=r] input[type=checkbox][data-task=r].task-list-item-checkbox:checked, 173 | .markdown-preview-view ul.contains-task-list > li[data-task=r].task-list-item input[type=checkbox].task-list-item-checkbox:checked, 174 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=R] input[type=checkbox][data-task=R].task-list-item-checkbox:checked, 175 | .markdown-preview-view ul.contains-task-list > li[data-task=R].task-list-item input[type=checkbox].task-list-item-checkbox:checked { 176 | position: relative; 177 | -webkit-appearance: none; 178 | box-sizing: border-box; 179 | background: unset !important; 180 | background-color: transparent !important; /* override theme */ 181 | filter: none; 182 | color: var(--checkbox-review); 183 | font-family: var(--font-monospace); 184 | border-width: 1px; 185 | border-style: solid; 186 | border-color: var(--checkbox-review) !important; 187 | } 188 | 189 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=r], 190 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=r] input[type=checkbox].task-list-item-checkbox[data-task=r] + span, 191 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=r] input[type=checkbox].task-list-item-checkbox[data-task=r] + span + span, 192 | .markdown-preview-view ul.contains-task-list > li[data-task=r].task-list-item.is-checked, 193 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=R], 194 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=R] input[type=checkbox].task-list-item-checkbox[data-task=R] + span, 195 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=R] input[type=checkbox].task-list-item-checkbox[data-task=R] + span + span, 196 | .markdown-preview-view ul.contains-task-list > li[data-task=R].task-list-item.is-checked { 197 | text-decoration: none !important; /* override theme */ 198 | font-weight: 500; 199 | font-style: normal; 200 | } 201 | 202 | /* '?' for task ('- [?]') */ 203 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="?"] input[type=checkbox][data-task="?"].task-list-item-checkbox:checked::before, 204 | .markdown-preview-view ul.contains-task-list > li[data-task="?"].task-list-item input[type=checkbox].task-list-item-checkbox:checked::before { 205 | font-family: var(--font-monospace); 206 | background: none; 207 | position: absolute; 208 | text-align: center; 209 | font-weight: 500; 210 | font-size: 14px; 211 | line-height: 14px; 212 | top: 0; 213 | left: 1px; 214 | right: 1px; 215 | color: var(--checkbox-question); 216 | content: "?"; 217 | } 218 | 219 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="?"] input[type=checkbox][data-task="?"].task-list-item-checkbox:checked, 220 | .markdown-preview-view ul.contains-task-list > li[data-task="?"].task-list-item input[type=checkbox].task-list-item-checkbox:checked { 221 | position: relative; 222 | -webkit-appearance: none; 223 | box-sizing: border-box; 224 | background: unset !important; 225 | background-color: transparent !important; /* override theme */ 226 | filter: none; 227 | color: var(--checkbox-question); 228 | font-family: var(--font-monospace); 229 | border-width: 1px; 230 | border-style: solid; 231 | border-color: var(--checkbox-question) !important; 232 | } 233 | 234 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="?"], 235 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="?"] input[type=checkbox].task-list-item-checkbox[data-task="?"] + span, 236 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="?"] input[type=checkbox].task-list-item-checkbox[data-task="?"] + span + span, 237 | .markdown-preview-view ul.contains-task-list > li[data-task="?"].task-list-item.is-checked { 238 | text-decoration: none !important; /* override theme */ 239 | font-weight: 500; 240 | font-style: normal; 241 | } 242 | 243 | /* '!' for task ('- [!]') */ 244 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="!"] input[type=checkbox][data-task="!"].task-list-item-checkbox:checked::before, 245 | .markdown-preview-view ul.contains-task-list > li[data-task="!"].task-list-item input[type=checkbox].task-list-item-checkbox:checked::before { 246 | font-family: var(--font-monospace); 247 | background: none; 248 | position: absolute; 249 | text-align: center; 250 | font-weight: 500; 251 | font-size: 14px; 252 | line-height: 14px; 253 | top: 0; 254 | left: 1px; 255 | right: 1px; 256 | color: var(--checkbox-important); 257 | content: "!"; 258 | } 259 | 260 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="!"] input[type=checkbox][data-task="!"].task-list-item-checkbox:checked, 261 | .markdown-preview-view ul.contains-task-list > li[data-task="!"].task-list-item input[type=checkbox].task-list-item-checkbox:checked { 262 | position: relative; 263 | -webkit-appearance: none; 264 | box-sizing: border-box; 265 | background: unset !important; 266 | background-color: transparent !important; /* override theme */ 267 | filter: none; 268 | color: var(--checkbox-important); 269 | font-family: var(--font-monospace); 270 | border-width: 1px; 271 | border-style: solid; 272 | border-color: var(--checkbox-important) !important; 273 | } 274 | 275 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="!"], 276 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="!"] input[type=checkbox].task-list-item-checkbox[data-task="!"] + span, 277 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="!"] input[type=checkbox].task-list-item-checkbox[data-task="!"] + span + span, 278 | .markdown-preview-view ul.contains-task-list > li[data-task="!"].task-list-item.is-checked { 279 | text-decoration: none !important; /* override theme */ 280 | font-weight: 700; 281 | font-style: normal; 282 | color: var(--checkbox-important); 283 | } 284 | 285 | /* '-' for task ('- [-]') */ 286 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="-"] input[type=checkbox][data-task="-"].task-list-item-checkbox:checked::before, 287 | .markdown-preview-view ul.contains-task-list > li[data-task="-"].task-list-item input[type=checkbox].task-list-item-checkbox:checked::before { 288 | font-family: var(--font-monospace); 289 | background: none; 290 | position: absolute; 291 | text-align: center; 292 | font-weight: 500; 293 | font-size: 14px; 294 | line-height: 14px; 295 | top: 0; 296 | left: 1px; 297 | right: 1px; 298 | color: var(--checkbox-cancelled); 299 | content: "-"; 300 | } 301 | 302 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="-"] input[type=checkbox][data-task="-"].task-list-item-checkbox:checked, 303 | .markdown-preview-view ul.contains-task-list > li[data-task="-"].task-list-item input[type=checkbox].task-list-item-checkbox:checked { 304 | position: relative; 305 | -webkit-appearance: none; 306 | box-sizing: border-box; 307 | background: unset !important; 308 | background-color: transparent !important; /* override theme */ 309 | filter: none; 310 | color: var(--checkbox-cancelled); 311 | font-family: var(--font-monospace); 312 | border-width: 1px; 313 | border-style: solid; 314 | border-color: var(--checkbox-cancelled) !important; 315 | } 316 | 317 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="-"], 318 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="-"] input[type=checkbox].task-list-item-checkbox[data-task="-"] + span, 319 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="-"] input[type=checkbox].task-list-item-checkbox[data-task="-"] + span + span, 320 | .markdown-preview-view ul.contains-task-list > li[data-task="-"].task-list-item.is-checked { 321 | text-decoration: line-through !important; /* override theme */ 322 | font-weight: 500; 323 | font-style: normal; 324 | color: var(--checkbox-cancelled); 325 | } 326 | 327 | /* 'x' for task ('- [x]') */ 328 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=x] input[type=checkbox][data-task=x].task-list-item-checkbox:checked::before, 329 | .markdown-preview-view ul.contains-task-list > li[data-task=x].task-list-item input[type=checkbox].task-list-item-checkbox:checked::before { 330 | font-family: var(--font-monospace); 331 | background: none; 332 | position: absolute; 333 | text-align: center; 334 | font-weight: 500; 335 | font-size: 14px; 336 | line-height: 14px; 337 | top: 0; 338 | left: 1px; 339 | right: 1px; 340 | color: var(--checkbox-checked); 341 | content: "✓"; 342 | } 343 | 344 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=x] input[type=checkbox][data-task=x].task-list-item-checkbox:checked, 345 | .markdown-preview-view ul.contains-task-list > li[data-task=x].task-list-item input[type=checkbox].task-list-item-checkbox:checked { 346 | position: relative; 347 | -webkit-appearance: none; 348 | box-sizing: border-box; 349 | background: unset !important; 350 | background-color: transparent !important; /* override theme */ 351 | filter: none; 352 | color: var(--checkbox-checked); 353 | font-family: var(--font-monospace); 354 | border-width: 1px; 355 | border-style: solid; 356 | border-color: var(--checkbox-checked) !important; 357 | } 358 | 359 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=x], 360 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=x] input[type=checkbox].task-list-item-checkbox[data-task=x] + span, 361 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=x] input[type=checkbox].task-list-item-checkbox[data-task=x] + span + span, 362 | .markdown-preview-view ul.contains-task-list > li[data-task=x].task-list-item.is-checked { 363 | text-decoration: none !important; /* override theme */ 364 | font-weight: 500; 365 | font-style: normal; 366 | color: var(--text-normal); 367 | } 368 | 369 | /* 'X' for task ('- [X]') */ 370 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=X] input[type=checkbox][data-task=X].task-list-item-checkbox:checked::before, 371 | .markdown-preview-view ul.contains-task-list > li[data-task=X].task-list-item input[type=checkbox].task-list-item-checkbox:checked::before { 372 | font-family: var(--font-monospace); 373 | background: none; 374 | position: absolute; 375 | text-align: center; 376 | font-weight: 500; 377 | font-size: 14px; 378 | line-height: 14px; 379 | top: 0; 380 | left: 1px; 381 | right: 1px; 382 | color: var(--checkbox-checked); 383 | content: "X"; 384 | } 385 | 386 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=X] input[type=checkbox][data-task=X].task-list-item-checkbox:checked, 387 | .markdown-preview-view ul.contains-task-list > li[data-task=X].task-list-item input[type=checkbox].task-list-item-checkbox:checked { 388 | position: relative; 389 | -webkit-appearance: none; 390 | box-sizing: border-box; 391 | background: unset !important; 392 | background-color: transparent !important; /* override theme */ 393 | filter: none; 394 | color: var(--checkbox-checked); 395 | font-family: var(--font-monospace); 396 | border-width: 1px; 397 | border-style: solid; 398 | border-color: var(--checkbox-checked) !important; 399 | } 400 | 401 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=X], 402 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=X] input[type=checkbox].task-list-item-checkbox[data-task=X] + span, 403 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=X] input[type=checkbox].task-list-item-checkbox[data-task=X] + span + span, 404 | .markdown-preview-view ul.contains-task-list > li[data-task=X].task-list-item.is-checked { 405 | text-decoration: none !important; /* override theme */ 406 | font-weight: 500; 407 | font-style: normal; 408 | color: var(--text-normal); 409 | } 410 | 411 | /* Consistent hover colors */ 412 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="/"] input[type=checkbox][data-task="/"].task-list-item-checkbox:checked:hover, .markdown-preview-view ul.contains-task-list > li[data-task="/"].task-list-item input[type=checkbox].task-list-item-checkbox:checked:hover, 413 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=">"] input[type=checkbox][data-task=">"].task-list-item-checkbox:checked:hover, .markdown-preview-view ul.contains-task-list > li[data-task=">"].task-list-item input[type=checkbox].task-list-item-checkbox:checked:hover, 414 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=R] input[type=checkbox][data-task=R].task-list-item-checkbox:checked:hover, .markdown-preview-view ul.contains-task-list > li[data-task=R].task-list-item input[type=checkbox].task-list-item-checkbox:checked:hover, 415 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="?"] input[type=checkbox][data-task="?"].task-list-item-checkbox:checked:hover, .markdown-preview-view ul.contains-task-list > li[data-task="?"].task-list-item input[type=checkbox].task-list-item-checkbox:checked:hover, 416 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="!"] input[type=checkbox][data-task="!"].task-list-item-checkbox:checked:hover, .markdown-preview-view ul.contains-task-list > li[data-task="!"].task-list-item input[type=checkbox].task-list-item-checkbox:checked:hover, 417 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="-"] input[type=checkbox][data-task="-"].task-list-item-checkbox:checked:hover, .markdown-preview-view ul.contains-task-list > li[data-task="-"].task-list-item input[type=checkbox].task-list-item-checkbox:checked:hover, 418 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=x] input[type=checkbox][data-task=x].task-list-item-checkbox:checked:hover, .markdown-preview-view ul.contains-task-list > li[data-task=x].task-list-item input[type=checkbox].task-list-item-checkbox:checked:hover, 419 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=X] input[type=checkbox][data-task=X].task-list-item-checkbox:checked:hover, .markdown-preview-view ul.contains-task-list > li[data-task=X].task-list-item input[type=checkbox].task-list-item-checkbox:checked:hover { 420 | color: var(--text-on-accent) !important; 421 | background-color: var(--interactive-accent-hover) !important; 422 | border-color: var(--text-on-accent) !important; 423 | } -------------------------------------------------------------------------------- /tasks-snippet.css: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | /* 3 | Ebullientworks 1.0.2. A dark and light theme for Obsidian. 4 | 5 | https://github.com/ebullient/obsidian-theme-ebullientworks 6 | */ 7 | body { 8 | --checkbox-checked: rgb(139, 167, 145); 9 | --checkbox-deferred: rgb(111, 166, 211); 10 | --checkbox-important: rgb(187, 79, 108); 11 | --checkbox-review: rgb(92, 122, 99); 12 | --checkbox-in-progress: rgb(89, 174, 170); 13 | --checkbox-question: rgb(234, 175, 0); 14 | --checkbox-cancelled: rgb(115, 115, 115); 15 | --checkbox-hover: rgb(137, 137, 137); 16 | } 17 | 18 | .theme-light { 19 | --checkbox-cancelled: rgb(159, 159, 159); 20 | --checkbox-hover: rgb(137, 137, 137); 21 | } 22 | 23 | /** Deal with Blue Topaz masks */ 24 | li[data-task] input[type=checkbox]::before { 25 | transform: none !important; 26 | -webkit-mask-image: none !important; 27 | } 28 | 29 | div[data-task] > label.task-list-label, 30 | ul > li.task-list-item, 31 | ul > li.task-list-item > p { 32 | color: var(--text-normal); 33 | font-weight: unset; 34 | text-decoration: unset; 35 | } 36 | div[data-task] > label.task-list-label > input.task-list-item-checkbox[type=checkbox]:not(:checked), 37 | ul > li.task-list-item > input.task-list-item-checkbox[type=checkbox]:not(:checked), 38 | ul > li.task-list-item > p > input.task-list-item-checkbox[type=checkbox]:not(:checked) { 39 | background-color: unset; 40 | background: unset; 41 | } 42 | 43 | div[data-task=x], 44 | li.task-list-item[data-task=x], 45 | li.task-list-item[data-task=x] > p { 46 | color: var(--text-normal); 47 | font-weight: var(--font-normal); 48 | text-decoration: none; 49 | } 50 | 51 | div[data-task=x] > label.task-list-label, 52 | li.task-list-item[data-task=x], 53 | li.task-list-item[data-task=x] > p, 54 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=x] { 55 | --checkbox-color: var(--checkbox-checked); 56 | --checkbox-border-color: var(--checkbox-checked); 57 | --checkbox-marker-color: transparent; 58 | --checklist-done-decoration: none; 59 | } 60 | 61 | input[type=checkbox][data-task=x]:checked, 62 | li[data-task=x] > input[type=checkbox]:checked, 63 | li[data-task=x] > p > input[type=checkbox]:checked { 64 | background-color: unset; 65 | background: unset; 66 | } 67 | input[type=checkbox][data-task=x]:checked::after, 68 | li[data-task=x] > input[type=checkbox]:checked::after, 69 | li[data-task=x] > p > input[type=checkbox]:checked::after { 70 | transform: none; 71 | -webkit-mask-image: none; 72 | background: unset; 73 | position: absolute; 74 | text-align: center; 75 | font-weight: var(--font-normal); 76 | font-size: calc(var(--checkbox-size) - 2px); 77 | font-family: var(--font-text); 78 | line-height: var(--checkbox-size); 79 | left: 50%; 80 | margin-left: calc(-1 * var(--checkbox-size) / 2); 81 | color: var(--checkbox-color); 82 | content: "✓"; 83 | display: block; 84 | } 85 | 86 | div[data-task="-"], 87 | li.task-list-item[data-task="-"], 88 | li.task-list-item[data-task="-"] > p { 89 | color: var(--text-faint); 90 | font-weight: var(--font-normal); 91 | text-decoration: line-through; 92 | } 93 | 94 | div[data-task="-"] > label.task-list-label, 95 | li.task-list-item[data-task="-"], 96 | li.task-list-item[data-task="-"] > p, 97 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="-"] { 98 | --checkbox-color: var(--checkbox-cancelled); 99 | --checkbox-border-color: var(--checkbox-cancelled); 100 | --checkbox-marker-color: transparent; 101 | --checklist-done-decoration: line-through; 102 | } 103 | 104 | input[type=checkbox][data-task="-"]:checked, 105 | li[data-task="-"] > input[type=checkbox]:checked, 106 | li[data-task="-"] > p > input[type=checkbox]:checked { 107 | background-color: unset; 108 | background: unset; 109 | } 110 | input[type=checkbox][data-task="-"]:checked::after, 111 | li[data-task="-"] > input[type=checkbox]:checked::after, 112 | li[data-task="-"] > p > input[type=checkbox]:checked::after { 113 | transform: none; 114 | -webkit-mask-image: none; 115 | background: unset; 116 | position: absolute; 117 | text-align: center; 118 | font-weight: var(--font-normal); 119 | font-size: calc(var(--checkbox-size) - 2px); 120 | font-family: var(--font-monospace); 121 | line-height: var(--checkbox-size); 122 | left: 50%; 123 | margin-left: calc(-1 * var(--checkbox-size) / 2); 124 | color: var(--checkbox-color); 125 | content: "-"; 126 | display: block; 127 | } 128 | 129 | div[data-task=">"], 130 | li.task-list-item[data-task=">"], 131 | li.task-list-item[data-task=">"] > p { 132 | color: var(--text-normal); 133 | font-weight: var(--font-normal); 134 | text-decoration: none; 135 | } 136 | 137 | div[data-task=">"] > label.task-list-label, 138 | li.task-list-item[data-task=">"], 139 | li.task-list-item[data-task=">"] > p, 140 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=">"] { 141 | --checkbox-color: var(--checkbox-deferred); 142 | --checkbox-border-color: var(--checkbox-deferred); 143 | --checkbox-marker-color: transparent; 144 | --checklist-done-decoration: none; 145 | } 146 | 147 | input[type=checkbox][data-task=">"]:checked, 148 | li[data-task=">"] > input[type=checkbox]:checked, 149 | li[data-task=">"] > p > input[type=checkbox]:checked { 150 | background-color: unset; 151 | background: unset; 152 | } 153 | input[type=checkbox][data-task=">"]:checked::after, 154 | li[data-task=">"] > input[type=checkbox]:checked::after, 155 | li[data-task=">"] > p > input[type=checkbox]:checked::after { 156 | transform: none; 157 | -webkit-mask-image: none; 158 | background: unset; 159 | position: absolute; 160 | text-align: center; 161 | font-weight: var(--font-normal); 162 | font-size: calc(var(--checkbox-size) - 2px); 163 | font-family: var(--font-monospace); 164 | line-height: var(--checkbox-size); 165 | left: 50%; 166 | margin-left: calc(-1 * var(--checkbox-size) / 2); 167 | color: var(--checkbox-color); 168 | content: ">"; 169 | display: block; 170 | } 171 | 172 | div[data-task=R], 173 | li.task-list-item[data-task=R], 174 | li.task-list-item[data-task=R] > p { 175 | color: var(--text-normal); 176 | font-weight: var(--font-normal); 177 | text-decoration: none; 178 | } 179 | 180 | div[data-task=R] > label.task-list-label, 181 | li.task-list-item[data-task=R], 182 | li.task-list-item[data-task=R] > p, 183 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=R] { 184 | --checkbox-color: var(--checkbox-review); 185 | --checkbox-border-color: var(--checkbox-review); 186 | --checkbox-marker-color: transparent; 187 | --checklist-done-decoration: none; 188 | } 189 | 190 | input[type=checkbox][data-task=R]:checked, 191 | li[data-task=R] > input[type=checkbox]:checked, 192 | li[data-task=R] > p > input[type=checkbox]:checked { 193 | background-color: unset; 194 | background: unset; 195 | } 196 | input[type=checkbox][data-task=R]:checked::after, 197 | li[data-task=R] > input[type=checkbox]:checked::after, 198 | li[data-task=R] > p > input[type=checkbox]:checked::after { 199 | transform: none; 200 | -webkit-mask-image: none; 201 | background: unset; 202 | position: absolute; 203 | text-align: center; 204 | font-weight: var(--font-normal); 205 | font-size: calc(var(--checkbox-size) - 2px); 206 | font-family: var(--font-text); 207 | line-height: var(--checkbox-size); 208 | left: 50%; 209 | margin-left: calc(-1 * var(--checkbox-size) / 2); 210 | color: var(--checkbox-color); 211 | content: "👀"; 212 | display: block; 213 | } 214 | 215 | div[data-task=r], 216 | li.task-list-item[data-task=r], 217 | li.task-list-item[data-task=r] > p { 218 | color: var(--text-normal); 219 | font-weight: var(--font-normal); 220 | text-decoration: none; 221 | } 222 | 223 | div[data-task=r] > label.task-list-label, 224 | li.task-list-item[data-task=r], 225 | li.task-list-item[data-task=r] > p, 226 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task=r] { 227 | --checkbox-color: var(--checkbox-review); 228 | --checkbox-border-color: var(--checkbox-review); 229 | --checkbox-marker-color: transparent; 230 | --checklist-done-decoration: none; 231 | } 232 | 233 | input[type=checkbox][data-task=r]:checked, 234 | li[data-task=r] > input[type=checkbox]:checked, 235 | li[data-task=r] > p > input[type=checkbox]:checked { 236 | background-color: unset; 237 | background: unset; 238 | } 239 | input[type=checkbox][data-task=r]:checked::after, 240 | li[data-task=r] > input[type=checkbox]:checked::after, 241 | li[data-task=r] > p > input[type=checkbox]:checked::after { 242 | transform: none; 243 | -webkit-mask-image: none; 244 | background: unset; 245 | position: absolute; 246 | text-align: center; 247 | font-weight: var(--font-normal); 248 | font-size: calc(var(--checkbox-size) - 2px); 249 | font-family: var(--font-text); 250 | line-height: var(--checkbox-size); 251 | left: 50%; 252 | margin-left: calc(-1 * var(--checkbox-size) / 2); 253 | color: var(--checkbox-color); 254 | content: "👀"; 255 | display: block; 256 | } 257 | 258 | div[data-task="?"], 259 | li.task-list-item[data-task="?"], 260 | li.task-list-item[data-task="?"] > p { 261 | color: var(--text-normal); 262 | font-weight: var(--font-bold); 263 | text-decoration: none; 264 | } 265 | 266 | div[data-task="?"] > label.task-list-label, 267 | li.task-list-item[data-task="?"], 268 | li.task-list-item[data-task="?"] > p, 269 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="?"] { 270 | --checkbox-color: var(--checkbox-question); 271 | --checkbox-border-color: var(--checkbox-question); 272 | --checkbox-marker-color: transparent; 273 | --checklist-done-decoration: none; 274 | } 275 | 276 | input[type=checkbox][data-task="?"]:checked, 277 | li[data-task="?"] > input[type=checkbox]:checked, 278 | li[data-task="?"] > p > input[type=checkbox]:checked { 279 | background-color: unset; 280 | background: unset; 281 | } 282 | input[type=checkbox][data-task="?"]:checked::after, 283 | li[data-task="?"] > input[type=checkbox]:checked::after, 284 | li[data-task="?"] > p > input[type=checkbox]:checked::after { 285 | transform: none; 286 | -webkit-mask-image: none; 287 | background: unset; 288 | position: absolute; 289 | text-align: center; 290 | font-weight: var(--font-bold); 291 | font-size: calc(var(--checkbox-size) - 2px); 292 | font-family: var(--font-monospace); 293 | line-height: var(--checkbox-size); 294 | left: 50%; 295 | margin-left: calc(-1 * var(--checkbox-size) / 2); 296 | color: var(--checkbox-color); 297 | content: "?"; 298 | display: block; 299 | } 300 | 301 | div[data-task="!"], 302 | li.task-list-item[data-task="!"], 303 | li.task-list-item[data-task="!"] > p { 304 | color: var(--text-normal); 305 | font-weight: var(--font-extrabold); 306 | text-decoration: none; 307 | } 308 | 309 | div[data-task="!"] > label.task-list-label, 310 | li.task-list-item[data-task="!"], 311 | li.task-list-item[data-task="!"] > p, 312 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="!"] { 313 | --checkbox-color: var(--checkbox-important); 314 | --checkbox-border-color: var(--checkbox-important); 315 | --checkbox-marker-color: transparent; 316 | --checklist-done-decoration: none; 317 | } 318 | 319 | input[type=checkbox][data-task="!"]:checked, 320 | li[data-task="!"] > input[type=checkbox]:checked, 321 | li[data-task="!"] > p > input[type=checkbox]:checked { 322 | background-color: unset; 323 | background: unset; 324 | } 325 | input[type=checkbox][data-task="!"]:checked::after, 326 | li[data-task="!"] > input[type=checkbox]:checked::after, 327 | li[data-task="!"] > p > input[type=checkbox]:checked::after { 328 | transform: none; 329 | -webkit-mask-image: none; 330 | background: unset; 331 | position: absolute; 332 | text-align: center; 333 | font-weight: var(--font-extrabold); 334 | font-size: calc(var(--checkbox-size) - 2px); 335 | font-family: var(--font-monospace); 336 | line-height: var(--checkbox-size); 337 | left: 50%; 338 | margin-left: calc(-1 * var(--checkbox-size) / 2); 339 | color: var(--checkbox-color); 340 | content: "!"; 341 | display: block; 342 | } 343 | 344 | div[data-task="/"], 345 | li.task-list-item[data-task="/"], 346 | li.task-list-item[data-task="/"] > p { 347 | color: var(--text-normal); 348 | font-weight: var(--font-normal); 349 | text-decoration: none; 350 | } 351 | 352 | div[data-task="/"] > label.task-list-label, 353 | li.task-list-item[data-task="/"], 354 | li.task-list-item[data-task="/"] > p, 355 | .markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="/"] { 356 | --checkbox-color: var(--checkbox-in-progress); 357 | --checkbox-border-color: var(--checkbox-in-progress); 358 | --checkbox-marker-color: transparent; 359 | --checklist-done-decoration: none; 360 | } 361 | 362 | input[data-task="/"]:checked, 363 | li[data-task="/"] > input[type=checkbox]:checked, 364 | li[data-task="/"] > p > input[type=checkbox]:checked { 365 | background: linear-gradient(135deg, transparent 50%, var(--checkbox-in-progress) 50%); 366 | } 367 | input[data-task="/"]:checked:after, 368 | li[data-task="/"] > input[type=checkbox]:checked:after, 369 | li[data-task="/"] > p > input[type=checkbox]:checked:after { 370 | transform: none; 371 | -webkit-mask-image: none; 372 | background: unset; 373 | content: " "; 374 | } 375 | --------------------------------------------------------------------------------