├── .github ├── FUNDING.yml ├── ISSUE_TEMPLATE │ ├── bug-report.md │ ├── documentation-request---issue.md │ └── feature-request.md └── workflows │ └── buildTheme&Snippets.yml ├── .gitignore ├── .stylelintignore ├── .stylelintrc.json ├── .vscode └── settings.json ├── LICENSE ├── Prism.code-workspace ├── README.md ├── assets ├── docs │ ├── Mark Highlights for Text Format - All.json │ └── Mark Highlights for Text Format - Basic.json └── screenshots │ ├── Accent Styles and Colours.png │ ├── Colour Scheme Styles.png │ ├── Community Themes Screenshot.png │ ├── Dark Colour Schemes.png │ ├── Hero Image.png │ ├── Light Colour Schemes.png │ ├── Mark Highlight Styles and Colours.png │ ├── Platforms.png │ ├── Social Preview.png │ └── Style Settings.png ├── build ├── buildSnipC.config.mjs ├── buildSnipMHS.config.mjs └── buildTheme.config.mjs ├── manifest.json ├── package.json ├── pnpm-lock.yaml ├── src ├── scss │ ├── Color Schemes │ │ ├── colorSchemeBird.scss │ │ ├── colorSchemeCoffee.scss │ │ ├── colorSchemeFlower.scss │ │ ├── colorSchemeFruit.scss │ │ └── colorSchemeTree.scss │ ├── Editor │ │ ├── callouts.scss │ │ ├── editorStyling.scss │ │ ├── progressBar.scss │ │ ├── properties.scss │ │ └── vim.scss │ ├── Fonts │ │ ├── License for JetBrains Mono.md │ │ ├── License for Source Sans.md │ │ └── fontFamilyImports.scss │ ├── Info │ │ ├── licence.scss │ │ ├── pluginCompatibility.scss │ │ └── styleSettingsConfig.scss │ ├── Plugins │ │ ├── Community │ │ │ ├── advancedTables.scss │ │ │ ├── cMenu.scss │ │ │ ├── calendar.scss │ │ │ ├── danglingLinks.scss │ │ │ ├── dataLoom.scss │ │ │ ├── dictionary.scss │ │ │ ├── emojiToolbar.scss │ │ │ ├── fileTreeAlternative.scss │ │ │ ├── hoverEditor.scss │ │ │ ├── iconFolder.scss │ │ │ ├── icons.scss │ │ │ ├── jumpToDate.scss │ │ │ ├── kanban.scss │ │ │ ├── mapView.scss │ │ │ ├── noteToolbar.scss │ │ │ ├── quickExplorer.scss │ │ │ ├── quietOutline.scss │ │ │ ├── recentFiles.scss │ │ │ ├── settingsSearch.scss │ │ │ ├── styleSettings.scss │ │ │ └── tagFolder.scss │ │ ├── Core │ │ │ ├── PDFViewer.scss │ │ │ ├── audio.scss │ │ │ ├── bookmarks.scss │ │ │ ├── canvas.scss │ │ │ ├── commandPalette.scss │ │ │ ├── fileExplorer.scss │ │ │ ├── graph.scss │ │ │ ├── outgoingLinkBacklinks.scss │ │ │ ├── outline.scss │ │ │ ├── search.scss │ │ │ ├── slashCommands.scss │ │ │ └── tags.scss │ │ └── Theme │ │ │ ├── coloredFolders.scss │ │ │ ├── customIcons.scss │ │ │ ├── customVaultBanner.scss │ │ │ ├── focusedMode.scss │ │ │ ├── fontFeatures.scss │ │ │ └── markHighlightSystem.scss │ ├── User Interface │ │ ├── Accent Color │ │ │ ├── accentStyleBase.scss │ │ │ ├── accentStyleBorder.scss │ │ │ ├── accentStyleBorderAndFilled.scss │ │ │ ├── accentStyleFilled.scss │ │ │ ├── accentStyleMinimal.scss │ │ │ └── accentStylePlain.scss │ │ ├── Bars │ │ │ ├── statusBar.scss │ │ │ └── titleBar.scss │ │ ├── Sidebar │ │ │ ├── navHeader.scss │ │ │ ├── tabHeader.scss │ │ │ └── tabLabel.scss │ │ ├── animations.scss │ │ ├── documentSearch.scss │ │ ├── mobileAdjustments.scss │ │ ├── popups.scss │ │ ├── scrollBar.scss │ │ ├── settings.scss │ │ ├── startup.scss │ │ └── workspace.scss │ ├── Variables │ │ └── coreVariables.scss │ └── index.scss └── snippets │ ├── Prism Callouts.css │ ├── Prism Callouts │ ├── C_code.scss │ ├── C_index.scss │ ├── C_license.scss │ ├── C_styleSettings.scss │ └── C_variables.scss │ ├── Prism Custom Ported Color Schemes │ └── Prism Custom Color Scheme - Solarized.css │ ├── Prism Mark Highlight System.css │ └── Prism Mark Highlight System │ ├── MHS_code.scss │ ├── MHS_index.scss │ ├── MHS_license.scss │ ├── MHS_styleSettings.scss │ └── MHS_variables.scss ├── theme.css └── versions.json /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | custom: ['https://www.buymeacoffee.com/DamianKorcz'] 3 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug-report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug Report 3 | about: Create a report to help diagnose an issue and resolve it 4 | title: '' 5 | labels: Bug 6 | assignees: damiankorcz 7 | 8 | --- 9 | 10 | [Please fill out the following sections as best you can to help diagnose the issue. Remove all `[ ]` bracket enclosed description/example elements including this one before submitting the bug.] 11 | 12 | **Describe the bug** 13 | [A clear and concise description of what the bug is.] 14 | 15 | **To Reproduce** 16 | [ Steps to reproduce the behavior: 17 | 1. Go to '...' 18 | 2. Click on '....' 19 | 3. Scroll down to '....' 20 | 4. See error ] 21 | 22 | **Expected behavior** 23 | [A clear and concise description of what you expected to happen] 24 | 25 | **Screenshots** 26 | [If applicable, add screenshots/GIFs/Videos to help explain your problem] 27 | 28 | **Setup Information** 29 | - Device Type: [e.g. Phone/iPhone, Tablet/iPad, PC/Mac] 30 | - Operating System: [e.g. Windows 10/11, MacOS Big Sur, Fedora/Arch, Android/iOS, etc.] 31 | - Prism version: [Found in Settings -> Top Left Corner] 32 | - Color Schemes Used: [Found in Settings -> Style Settings tab -> Prism Theme -> Appearance -> Accent, Color Schemes and Style -> Light/Dark Theme -> Color Scheme] 33 | - Obsidian Version: [Found in Settings -> About tab] 34 | - Obsidian Installer Version: [Found in Settings -> About tab] 35 | - Related Community plugins: [If any list the plugins you think might be related to your issue. Found in Settings -> Community Plugins -> Installed plugins (Ones that are enabled when the bug occurs)] 36 | 37 | **Additional context** 38 | [Add any other context about the problem here] 39 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/documentation-request---issue.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Documentation Request / Issue 3 | about: Suggest improvements for the documentation and/or describe issues found 4 | title: '' 5 | labels: Documentation 6 | assignees: damiankorcz 7 | 8 | --- 9 | 10 | [Please fill out the following sections as best you can to help describe the request/issue. Remove all `[ ]` bracket enclosed description/example elements including this one before submitting the bug.] 11 | 12 | **What is your request / issue?** 13 | [A clear and concise description of what the problem is.] 14 | 15 | **Describe the solution you'd like** 16 | [A clear and concise description of what you want to happen] 17 | 18 | **Describe alternatives you've considered** 19 | [A clear and concise description of any alternative solutions or features you've considered.] 20 | 21 | **Additional context** 22 | Add any other context or screenshots about the feature request here. 23 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/feature-request.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Feature Request 3 | about: Suggest an idea for this project 4 | title: '' 5 | labels: Feature Request 6 | assignees: damiankorcz 7 | 8 | --- 9 | 10 | [Please fill out the following sections as best you can to help describe the feature. Remove all `[ ]` bracket enclosed description/example elements including this one before submitting the request.] 11 | 12 | **Is your feature request related to a problem? Please describe.** 13 | [A clear and concise description of what the problem is. Ex. I'm always frustrated when...] 14 | 15 | **Describe the solution you'd like** 16 | [A clear and concise description of what you want to happen] 17 | 18 | **Describe alternatives you've considered** 19 | [A clear and concise description of any alternative solutions or features you've considered.] 20 | 21 | **Additional context** 22 | [Add any other context or screenshots about the feature request here.] 23 | -------------------------------------------------------------------------------- /.github/workflows/buildTheme&Snippets.yml: -------------------------------------------------------------------------------- 1 | name: Build Prism Theme and Snippets 2 | 3 | on: 4 | push: 5 | branches: [ "development" ] 6 | pull_request: 7 | branches: [ "development" ] 8 | 9 | jobs: 10 | build: 11 | 12 | runs-on: ubuntu-latest 13 | 14 | steps: 15 | - name: Checkout 16 | uses: actions/checkout@v3 17 | 18 | - name: Install Node.js 19 | uses: actions/setup-node@v4 20 | with: 21 | node-version: 20 22 | 23 | - name: Install pnpm 24 | uses: pnpm/action-setup@v2 25 | with: 26 | version: 8 27 | run_install: false 28 | 29 | - name: Get pnpm store directory 30 | shell: bash 31 | run: | 32 | echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV 33 | 34 | - name: Setup pnpm cache 35 | uses: actions/cache@v3 36 | with: 37 | path: ${{ env.STORE_PATH }} 38 | key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }} 39 | restore-keys: | 40 | ${{ runner.os }}-pnpm-store- 41 | 42 | - name: Install dependencies 43 | run: pnpm install 44 | 45 | - name: Run Theme Build script 46 | run: pnpm run buildTheme --if-present 47 | 48 | - name: Run Mark Highlight System Snippet Build script 49 | run: pnpm run buildSnipMHS --if-present 50 | 51 | - name: Run Callout Snippet Build script 52 | run: pnpm run buildSnipC --if-present 53 | 54 | - name: Pushing the Built Files 55 | uses: stefanzweifel/git-auto-commit-action@v4 56 | with: 57 | commit_message: Automated Build of Theme and Snippet files 58 | branch: development 59 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | /node_modules 3 | .sass-cache/* 4 | .env 5 | app.css 6 | appnew.css -------------------------------------------------------------------------------- /.stylelintignore: -------------------------------------------------------------------------------- 1 | *.css 2 | -------------------------------------------------------------------------------- /.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": ["stylelint-config-recommended","stylelint-config-recess-order"], 3 | 4 | "plugins": [ 5 | "stylelint-declaration-block-no-ignored-properties", 6 | "stylelint-no-unsupported-browser-features" 7 | ], 8 | 9 | "rules": { 10 | "plugin/declaration-block-no-ignored-properties": true, 11 | 12 | "plugin/no-unsupported-browser-features": [true, { 13 | "browsers": ["Chrome > 88"], 14 | "ignore": ["css-masks"], 15 | "ignorePartialSupport": true 16 | }], 17 | 18 | "indentation": ["tab", {"severity": "warning"}], 19 | 20 | "no-irregular-whitespace": true, 21 | "no-eol-whitespace": [true, {"severity": "warning"}], 22 | "block-no-empty": [true, {"ignore": ["comments"], "severity": "warning"}], 23 | "no-empty-first-line": [true, {"severity": "warning"}], 24 | "max-empty-lines": [1, {"severity": "warning"} ], 25 | "rule-empty-line-before": ["always-multi-line", { 26 | "ignore": ["after-comment", "inside-block"], 27 | "severity": "warning" 28 | }], 29 | "comment-empty-line-before": ["always",{ 30 | "except": ["first-nested"], 31 | "ignore": ["after-comment", "stylelint-commands"], 32 | "ignoreComments": ["/: .*;/", "/^#endregion/"], 33 | "severity": "warning" 34 | }], 35 | 36 | "length-zero-no-unit": [true, {"severity": "warning", "ignore": ["custom-properties"]} ], 37 | "number-leading-zero": ["always", {"severity": "warning"} ], 38 | "number-max-precision": 3, 39 | "time-min-milliseconds": [150, {"severity": "warning"}], 40 | 41 | "shorthand-property-no-redundant-values": [true, {"severity": "warning"} ], 42 | "declaration-block-no-redundant-longhand-properties": true, 43 | "declaration-block-no-shorthand-property-overrides": true, 44 | 45 | "color-hex-case": ["upper", {"severity": "warning"} ], 46 | "property-case": ["lower", {"severity": "warning"} ], 47 | "function-name-case": ["lower", {"severity": "warning"} ], 48 | "selector-pseudo-class-case": ["lower", {"severity": "warning"} ], 49 | "selector-pseudo-element-case": ["lower", {"severity": "warning"} ], 50 | "selector-type-case": ["lower", {"severity": "warning"} ], 51 | "unit-case": ["lower", {"severity": "warning"} ], 52 | "value-keyword-case": ["lower", {"severity": "warning"} ], 53 | 54 | "hue-degree-notation": ["number", {"severity": "warning"} ], 55 | "alpha-value-notation": ["percentage", {"exceptProperties": ["opacity"], "severity": "warning" } ], 56 | 57 | "string-quotes": ["double", {"severity": "warning"} ], 58 | "font-family-name-quotes": "always-unless-keyword", 59 | "function-url-quotes": "always", 60 | "no-extra-semicolons": [true, {"severity": "warning"} ], 61 | 62 | "at-rule-name-space-after": "always-single-line", 63 | "at-rule-semicolon-newline-after": "always", 64 | "at-rule-no-unknown": null, 65 | 66 | "block-closing-brace-empty-line-before": ["never", {"severity": "warning"} ], 67 | "block-closing-brace-newline-after": ["always", {"severity": "warning"} ], 68 | "block-closing-brace-newline-before": ["always-multi-line", {"severity": "warning"} ], 69 | "block-closing-brace-space-before": ["always-single-line", {"severity": "warning"} ], 70 | "block-opening-brace-newline-after": ["always-multi-line", {"severity": "warning"} ], 71 | "block-opening-brace-space-after": ["always-single-line", {"severity": "warning"} ], 72 | "block-opening-brace-space-before": ["always", {"severity": "warning"} ], 73 | 74 | "custom-property-pattern": ["^([a-z][a-z0-9]*)(-[a-z0-9]+)*$", {"message": "Expected custom property name to be kebab-case"} ], 75 | 76 | "declaration-bang-space-after": "never", 77 | "declaration-bang-space-before": "always", 78 | "declaration-block-semicolon-newline-after": "always-multi-line", 79 | "declaration-block-semicolon-space-after": "always-single-line", 80 | "declaration-block-semicolon-space-before": ["never", {"severity": "warning"} ], 81 | "declaration-block-single-line-max-declarations": 1, 82 | "declaration-block-trailing-semicolon": ["always",{"severity": "warning"} ], 83 | "declaration-colon-newline-after": "always-multi-line", 84 | "declaration-colon-space-after": ["always-single-line", {"severity": "warning"} ], 85 | "declaration-colon-space-before": "never", 86 | 87 | "function-comma-newline-after": "always-multi-line", 88 | "function-comma-space-after": "always-single-line", 89 | "function-comma-space-before": "never", 90 | "function-max-empty-lines": 0, 91 | "function-parentheses-newline-inside": "always-multi-line", 92 | "function-parentheses-space-inside": "never-single-line", 93 | "function-whitespace-after": "always", 94 | 95 | "selector-max-id": 1, 96 | "selector-attribute-brackets-space-inside": "never", 97 | "selector-attribute-operator-space-after": "never", 98 | "selector-attribute-operator-space-before": "never", 99 | "selector-combinator-space-after": "always", 100 | "selector-combinator-space-before": "always", 101 | "selector-descendant-combinator-no-non-space": [true, {"severity": "warning"} ], 102 | "selector-list-comma-newline-after": "always", 103 | "selector-list-comma-space-before": "never", 104 | "selector-max-empty-lines": 0, 105 | "selector-pseudo-class-parentheses-space-inside": "never", 106 | "selector-pseudo-element-colon-notation": "double", 107 | 108 | "value-list-comma-newline-after": "never-multi-line", 109 | "value-list-comma-space-after": "always-single-line", 110 | "value-list-comma-space-before": "never", 111 | "value-list-max-empty-lines": 0, 112 | 113 | "selector-no-qualifying-type": null, 114 | "max-nesting-depth": null, 115 | "selector-class-pattern": null, 116 | "selector-max-compound-selectors": null, 117 | "value-no-vendor-prefix": null, 118 | "no-invalid-double-slash-comments": null, 119 | "no-descending-specificity": null 120 | } 121 | } -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021-2024 Damian Korcz 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /Prism.code-workspace: -------------------------------------------------------------------------------- 1 | { 2 | "folders": [ 3 | { 4 | "path": "./" 5 | } 6 | ], 7 | "settings": { 8 | "[Log]": { 9 | "editor.fontSize": 14 10 | }, 11 | "files.exclude": { 12 | ".git": true, 13 | ".github": true, 14 | ".vscode": true, 15 | "node_modules": true 16 | }, 17 | "search.exclude": { 18 | ".git": true 19 | }, 20 | "editor.wordWrap": "on", 21 | "files.autoSaveDelay": 500, 22 | "task.allowAutomaticTasks": "on", 23 | "files.associations": { 24 | "styleSettingsConfig.scss": "yaml", 25 | "MHS_styleSettings.scss": "yaml" 26 | } 27 | }, 28 | "tasks": { 29 | "version": "2.0.0", 30 | "tasks": [ 31 | { 32 | "label": "Prism - Dev Theme", 33 | "type": "shell", 34 | "windows": { 35 | "command": "pnpm run devTheme:windows", 36 | }, 37 | "linux": { 38 | "command": "pnpm run devTheme:linux", 39 | }, 40 | "group": { 41 | "kind": "build", 42 | "isDefault": true 43 | }, 44 | "runOptions": { 45 | "runOn": "folderOpen" 46 | } 47 | }, 48 | { 49 | "label": "Prism - Build Theme", 50 | "type": "shell", 51 | "command": "pnpm run buildTheme", 52 | "group": { 53 | "kind": "build", 54 | "isDefault": true 55 | } 56 | }, 57 | { 58 | "label": "Prism - Dev MHS Snippet", 59 | "type": "shell", 60 | "windows": { 61 | "command": "pnpm run devSnipMHS:windows", 62 | }, 63 | "linux": { 64 | "command": "pnpm run devSnipMHS:linux", 65 | }, 66 | "group": { 67 | "kind": "build", 68 | "isDefault": true 69 | } 70 | }, 71 | { 72 | "label": "Prism - Build MHS Snippet", 73 | "type": "shell", 74 | "command": "pnpm run buildSnipMHS", 75 | "group": { 76 | "kind": "build", 77 | "isDefault": true 78 | } 79 | }, 80 | { 81 | "label": "Prism - Dev C Snippet", 82 | "type": "shell", 83 | "windows": { 84 | "command": "pnpm run devSnipC:windows", 85 | }, 86 | "linux": { 87 | "command": "pnpm run devSnipC:linux", 88 | }, 89 | "group": { 90 | "kind": "build", 91 | "isDefault": true 92 | } 93 | }, 94 | { 95 | "label": "Prism - Build C Snippet", 96 | "type": "shell", 97 | "command": "pnpm run buildSnipC", 98 | "group": { 99 | "kind": "build", 100 | "isDefault": true 101 | } 102 | } 103 | ] 104 | } 105 | } -------------------------------------------------------------------------------- /assets/docs/Mark Highlights for Text Format - Basic.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Mark: Accent", 3 | "prefix": "", 4 | "suffix": "" 5 | }, 6 | { 7 | "name": "Mark: Red", 8 | "prefix": "", 9 | "suffix": "" 10 | }, 11 | { 12 | "name": "Mark: Orange", 13 | "prefix": "", 14 | "suffix": "" 15 | }, 16 | { 17 | "name": "Mark: Yellow", 18 | "prefix": "", 19 | "suffix": "" 20 | }, 21 | { 22 | "name": "Mark: Green", 23 | "prefix": "", 24 | "suffix": "" 25 | }, 26 | { 27 | "name": "Mark: Mint", 28 | "prefix": "", 29 | "suffix": "" 30 | }, 31 | { 32 | "name": "Mark: Cyan", 33 | "prefix": "", 34 | "suffix": "" 35 | }, 36 | { 37 | "name": "Mark: Blue", 38 | "prefix": "", 39 | "suffix": "" 40 | }, 41 | { 42 | "name": "Mark: Purple", 43 | "prefix": "", 44 | "suffix": "" 45 | }, 46 | { 47 | "name": "Mark: Pink", 48 | "prefix": "", 49 | "suffix": "" 50 | }, 51 | { 52 | "name": "Mark: Gray", 53 | "prefix": "", 54 | "suffix": "" 55 | } 56 | -------------------------------------------------------------------------------- /assets/screenshots/Accent Styles and Colours.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/damiankorcz/Prism-Theme/fd9e280d4be198d60358af766458f7eb561359fa/assets/screenshots/Accent Styles and Colours.png -------------------------------------------------------------------------------- /assets/screenshots/Colour Scheme Styles.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/damiankorcz/Prism-Theme/fd9e280d4be198d60358af766458f7eb561359fa/assets/screenshots/Colour Scheme Styles.png -------------------------------------------------------------------------------- /assets/screenshots/Community Themes Screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/damiankorcz/Prism-Theme/fd9e280d4be198d60358af766458f7eb561359fa/assets/screenshots/Community Themes Screenshot.png -------------------------------------------------------------------------------- /assets/screenshots/Dark Colour Schemes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/damiankorcz/Prism-Theme/fd9e280d4be198d60358af766458f7eb561359fa/assets/screenshots/Dark Colour Schemes.png -------------------------------------------------------------------------------- /assets/screenshots/Hero Image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/damiankorcz/Prism-Theme/fd9e280d4be198d60358af766458f7eb561359fa/assets/screenshots/Hero Image.png -------------------------------------------------------------------------------- /assets/screenshots/Light Colour Schemes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/damiankorcz/Prism-Theme/fd9e280d4be198d60358af766458f7eb561359fa/assets/screenshots/Light Colour Schemes.png -------------------------------------------------------------------------------- /assets/screenshots/Mark Highlight Styles and Colours.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/damiankorcz/Prism-Theme/fd9e280d4be198d60358af766458f7eb561359fa/assets/screenshots/Mark Highlight Styles and Colours.png -------------------------------------------------------------------------------- /assets/screenshots/Platforms.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/damiankorcz/Prism-Theme/fd9e280d4be198d60358af766458f7eb561359fa/assets/screenshots/Platforms.png -------------------------------------------------------------------------------- /assets/screenshots/Social Preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/damiankorcz/Prism-Theme/fd9e280d4be198d60358af766458f7eb561359fa/assets/screenshots/Social Preview.png -------------------------------------------------------------------------------- /assets/screenshots/Style Settings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/damiankorcz/Prism-Theme/fd9e280d4be198d60358af766458f7eb561359fa/assets/screenshots/Style Settings.png -------------------------------------------------------------------------------- /build/buildSnipC.config.mjs: -------------------------------------------------------------------------------- 1 | import fs from "fs"; 2 | import sass from "sass"; 3 | 4 | const inputPath = `./src/snippets/Prism Callouts/C_index.scss`; 5 | const outputPath = `./src/snippets/Prism Callouts.css`; 6 | 7 | const result = sass.compile(inputPath, { 8 | charset: false, 9 | sourceMap: false 10 | }); 11 | 12 | fs.writeFile(outputPath, result.css, () => true); 13 | -------------------------------------------------------------------------------- /build/buildSnipMHS.config.mjs: -------------------------------------------------------------------------------- 1 | import fs from "fs"; 2 | import sass from "sass"; 3 | 4 | const inputPath = `./src/snippets/Prism Mark Highlight System/MHS_index.scss`; 5 | const outputPath = `./src/snippets/Prism Mark Highlight System.css`; 6 | 7 | const result = sass.compile(inputPath, { 8 | charset: false, 9 | sourceMap: false 10 | }); 11 | 12 | fs.writeFile(outputPath, result.css, () => true); 13 | -------------------------------------------------------------------------------- /build/buildTheme.config.mjs: -------------------------------------------------------------------------------- 1 | import fs from "fs"; 2 | import * as sass from 'sass'; 3 | 4 | const inputPath = "./src/scss/index.scss"; 5 | const outputPath = "theme.css"; 6 | 7 | const result = sass.compile(inputPath, { 8 | charset: false, 9 | sourceMap: false 10 | }); 11 | 12 | fs.writeFile(outputPath, result.css, () => true); -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Prism", 3 | "version": "3.6.0", 4 | "minAppVersion": "1.6.0", 5 | "author": "Damian Korcz", 6 | "authorUrl": "https://github.com/damiankorcz", 7 | "fundingUrl": "https://www.buymeacoffee.com/DamianKorcz" 8 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "obsidian-prism", 3 | "version": "3.6.0", 4 | "description": "A Highly-Customisable & Elegant Light/Dark Theme for Obsidian.md", 5 | "author": "Damian Korcz", 6 | "license": "MIT", 7 | "homepage": "https://github.com/damiankorcz/Obsidian-Prism", 8 | "scripts": { 9 | "devTheme:windows": "sass --watch --no-charset --no-source-map --color \"src/scss/index.scss\" \"D:/Syncthing/Obsidian/Theme Test/.obsidian/themes/PrismDev.css\"", 10 | "devSnipMHS:windows": "sass --watch --no-charset --no-source-map --color \"src/snippets/Prism Mark Highlight System/MHS_index.scss\" \"D:/Syncthing/Obsidian/Theme Test/.obsidian/snippets/Prism Mark Highlight System.css\"", 11 | "devSnipC:windows": "sass --watch --no-charset --no-source-map --color \"src/snippets/Prism Callouts/C_index.scss\" \"D:/Syncthing/Obsidian/Theme Test/.obsidian/snippets/Prism Callouts.css\"", 12 | "devTheme:linux": "sass --watch --no-charset --no-source-map --color \"src/scss/index.scss\" \"/home/damian/Syncthing/Obsidian/Theme Test/.obsidian/themes/PrismDev.css\"", 13 | "devSnipMHS:linux": "sass --watch --no-charset --no-source-map --color \"src/snippets/Prism Mark Highlight System/MHS_index.scss\" \"/home/damian/Syncthing/Obsidian/Theme Test/.obsidian/snippets/Prism Mark Highlight System.css\"", 14 | "devSnipC:linux": "sass --watch --no-charset --no-source-map --color \"src/snippets/Prism Callouts/C_index.scss\" \"/home/damian/Syncthing/Obsidian/Theme Test/.obsidian/snippets/Prism Callouts.css\"", 15 | "buildTheme": "node ./build/buildTheme.config.mjs", 16 | "buildSnipMHS": "node ./build/buildSnipMHS.config.mjs", 17 | "buildSnipC": "node ./build/buildSnipC.config.mjs" 18 | }, 19 | "devDependencies": { 20 | "cross-env": "^7.0.3", 21 | "sass": "^1.80.4", 22 | "stylelint": "^15.11.0", 23 | "stylelint-config-recess-order": "^4.6.0", 24 | "stylelint-config-recommended": "^11.0.0", 25 | "stylelint-declaration-block-no-ignored-properties": "^2.8.0", 26 | "stylelint-no-unsupported-browser-features": "^6.1.0" 27 | } 28 | } -------------------------------------------------------------------------------- /src/scss/Color Schemes/colorSchemeBird.scss: -------------------------------------------------------------------------------- 1 | // [Color Scheme - Bird] Light Theme 2 | .theme-light, 3 | .theme-light.pt-color-scheme-custom-lt, 4 | .theme-light:not(.css-settings-manager) { // Fills in enough colours to see the theme when Style Settings isn't enabled 5 | // The color variables below are comma separated HSL values. This format is necessary for using these 6 | // variables down the line in the theme and being able to create variants with varying alpha values (HSLA). 7 | 8 | // Base colours are used for the backgrounds in the accented color areas. 9 | --color-grey-base-hsl: 0, 0%, 90%; 10 | --color-red-base-hsl: 7, 90%, 92%; 11 | --color-orange-base-hsl: 26, 85%, 89%; 12 | --color-yellow-base-hsl: 42, 88%, 83%; 13 | --color-green-base-hsl: 101, 49%, 85%; 14 | --color-mint-base-hsl: 152, 62%, 85%; 15 | --color-cyan-base-hsl: 184, 60%, 85%; 16 | --color-blue-base-hsl: 217, 76%, 92%; 17 | --color-purple-base-hsl: 251, 87%, 94%; 18 | --color-pink-base-hsl: 328, 79%, 93%; 19 | 20 | // Tint colours are used for the borders in the accented color areas. 21 | --color-grey-tint-hsl: 0, 0%, 73%; 22 | --color-red-tint-hsl: 7, 82%, 78%; 23 | --color-orange-tint-hsl: 27, 80%, 69%; 24 | --color-yellow-tint-hsl: 44, 67%, 58%; 25 | --color-green-tint-hsl: 99, 50%, 59%; 26 | --color-mint-tint-hsl: 158, 59%, 55%; 27 | --color-cyan-tint-hsl: 184, 61%, 56%; 28 | --color-blue-tint-hsl: 219, 73%, 78%; 29 | --color-purple-tint-hsl: 252, 84%, 83%; 30 | --color-pink-tint-hsl: 327, 72%, 79%; 31 | 32 | // Text colours are used for the Text in the accented color areas and other Text areas which use the theme colours. 33 | // e.g. Syntax Highlighting, Mark Highlight System, etc. 34 | --color-grey-text-hsl: 0, 0%, 47%; 35 | --color-red-text-hsl: 3, 68%, 52%; 36 | --color-orange-text-hsl: 31, 100%, 36%; 37 | --color-yellow-text-hsl: 38, 62%, 37%; 38 | --color-green-text-hsl: 93, 100%, 27%; 39 | --color-mint-text-hsl: 161, 100%, 26%; 40 | --color-cyan-text-hsl: 184, 100%, 28%; 41 | --color-blue-text-hsl: 221, 67%, 56%; 42 | --color-purple-text-hsl: 258, 75%, 63%; 43 | --color-pink-text-hsl: 320, 60%, 50%; 44 | 45 | // Default theme variable overwrites for different shades of text used in the editor and around the UI. 46 | --text-normal-hsl: 0, 0%, 15%; 47 | --text-muted-hsl: 0, 0%, 20%; 48 | --text-faint-hsl: 0, 0%, 35%; 49 | 50 | // Default theme variable overwrites for the UI background colours. 51 | --background-primary-hsl: 0, 0%, 100%; 52 | --background-primary-alt-hsl: 0, 0%, 96%; 53 | --background-secondary-hsl: 0, 0%, 93%; 54 | --background-secondary-blur-hsl: 0, 0%, 92%; 55 | --background-secondary-alt-hsl: 0, 0%, 69%; 56 | 57 | // Default theme variable overwrites for shadows used on modals and popups. 58 | --shadow-color-hsl: 0, 0%, 0%; 59 | --shadow-s: hsla(var(--shadow-color-hsl), 10%) 0 1px 2px 0; 60 | --shadow-l: hsla(var(--shadow-color-hsl), 3%) 0 1px 2px, hsla(var(--shadow-color-hsl), 3%) 0 2px 4px, hsla(var(--shadow-color-hsl), 3%) 0 4px 8px, hsla(var(--shadow-color-hsl), 3%) 0 6px 12px; 61 | } 62 | 63 | // [Color Scheme - Default] Dark Theme 64 | .theme-dark, 65 | .theme-dark.pt-color-scheme-custom-dt, 66 | .theme-dark:not(.css-settings-manager) { // Fills in enough colours to see the theme when Style Settings isn't enabled 67 | // The color variables below are comma separated HSL values. This format is necessary for using these 68 | // variables down the line in the theme and being able to create variants with varying alpha values (HSLA). 69 | 70 | // Base colours are used for the backgrounds in the accented color areas. 71 | --color-grey-base-hsl: 0, 0%, 16%; 72 | --color-red-base-hsl: 2, 55%, 19%; 73 | --color-orange-base-hsl: 26, 65%, 15%; 74 | --color-yellow-base-hsl: 43, 73%, 12%; 75 | --color-green-base-hsl: 124, 54%, 12%; 76 | --color-mint-base-hsl: 165, 88%, 10%; 77 | --color-cyan-base-hsl: 195, 65%, 13%; 78 | --color-blue-base-hsl: 225, 50%, 20%; 79 | --color-purple-base-hsl: 271, 48%, 21%; 80 | --color-pink-base-hsl: 325, 55%, 18%; 81 | 82 | // Tint colours are used for the borders in the accented color areas. 83 | --color-grey-tint-hsl: 0, 0%, 40%; 84 | --color-red-tint-hsl: 3, 49%, 46%; 85 | --color-orange-tint-hsl: 27, 53%, 37%; 86 | --color-yellow-tint-hsl: 44, 59%, 31%; 87 | --color-green-tint-hsl: 123, 43%, 32%; 88 | --color-mint-tint-hsl: 166, 73%, 26%; 89 | --color-cyan-tint-hsl: 195, 52%, 34%; 90 | --color-blue-tint-hsl: 224, 44%, 49%; 91 | --color-purple-tint-hsl: 271, 43%, 51%; 92 | --color-pink-tint-hsl: 325, 47%, 45%; 93 | 94 | // Text colours are used for the Text in the accented color areas and other Text areas which use the theme colours. 95 | // e.g. Syntax Highlighting, Mark Highlight System, etc. 96 | --color-grey-text-hsl: 0, 0%, 67%; 97 | --color-red-text-hsl: 4, 74%, 74%; 98 | --color-orange-text-hsl: 26, 85%, 63%; 99 | --color-yellow-text-hsl: 44, 60%, 53%; 100 | --color-green-text-hsl: 124, 48%, 54%; 101 | --color-mint-text-hsl: 166, 67%, 45%; 102 | --color-cyan-text-hsl: 195, 69%, 58%; 103 | --color-blue-text-hsl: 225, 61%, 75%; 104 | --color-purple-text-hsl: 267, 52%, 75%; 105 | --color-pink-text-hsl: 330, 64%, 74%; 106 | 107 | // Default theme variable overwrites for different shades of text used in the editor and around the UI. 108 | --text-normal-hsl: 0, 0%, 91%; 109 | --text-muted-hsl: 0, 0%, 86%; 110 | --text-faint-hsl: 0, 0%, 81%; 111 | 112 | // Default theme variable overwrites for the UI background colours. 113 | --background-primary-hsl: 0, 0%, 18%; 114 | --background-primary-alt-hsl: 0, 0%, 30%; 115 | --background-secondary-hsl: 0, 0%, 12%; 116 | --background-secondary-blur-hsl: 0, 0%, 13%; 117 | --background-secondary-alt-hsl: 0, 0%, 8%; 118 | 119 | // Default theme variable overwrites for shadows used on modals and popups. 120 | --shadow-color-hsl: 0, 0%, 0%; 121 | --shadow-s: hsla(var(--shadow-color-hsl), 10%) 0 1px 2px 0; 122 | --shadow-l: hsla(var(--shadow-color-hsl), 5%) 0 1px 2px, hsla(var(--shadow-color-hsl), 5%) 0 2px 4px, hsla(var(--shadow-color-hsl), 5%) 0 4px 8px, hsla(var(--shadow-color-hsl), 5%) 0 6px 12px; 123 | } -------------------------------------------------------------------------------- /src/scss/Color Schemes/colorSchemeCoffee.scss: -------------------------------------------------------------------------------- 1 | // [Color Scheme - Coffee] Light Theme 2 | .theme-light.pt-color-scheme-latte-lt { 3 | // The color variables below are comma separated HSL values. This format is necessary for using these 4 | // variables down the line in the theme and being able to create variants with varying alpha values (HSLA). 5 | 6 | // Base colours are used for the backgrounds in the accented color areas. 7 | --color-grey-base-hsl: 0, 0%, 90%; 8 | --color-red-base-hsl: 11, 100%, 92%; 9 | --color-orange-base-hsl: 30, 90%, 88%; 10 | --color-yellow-base-hsl: 41, 88%, 84%; 11 | --color-green-base-hsl: 101, 47%, 86%; 12 | --color-mint-base-hsl: 153, 61%, 85%; 13 | --color-cyan-base-hsl: 184, 58%, 86%; 14 | --color-blue-base-hsl: 220, 75%, 92%; 15 | --color-purple-base-hsl: 252, 81%, 94%; 16 | --color-pink-base-hsl: 329, 73%, 93%; 17 | 18 | // Tint colours are used for the borders in the accented color areas. 19 | --color-grey-tint-hsl: 0, 0%, 73%; 20 | --color-red-tint-hsl: 10, 91%, 78%; 21 | --color-orange-tint-hsl: 30, 79%, 68%; 22 | --color-yellow-tint-hsl: 43, 65%, 59%; 23 | --color-green-tint-hsl: 99, 48%, 60%; 24 | --color-mint-tint-hsl: 158, 56%, 56%; 25 | --color-cyan-tint-hsl: 184, 58%, 58%; 26 | --color-blue-tint-hsl: 220, 70%, 78%; 27 | --color-purple-tint-hsl: 253, 75%, 83%; 28 | --color-pink-tint-hsl: 327, 67%, 79%; 29 | 30 | // Text colours are used for the Text in the accented color areas and other Text areas which use the theme colours 31 | // e.g. Syntax Highlighting, Mark Highlight System, etc. 32 | --color-grey-text-hsl: 0, 0%, 47%; 33 | --color-red-text-hsl: 3, 64%, 53%; 34 | --color-orange-text-hsl: 33, 100%, 35%; 35 | --color-yellow-text-hsl: 37, 55%, 39%; 36 | --color-green-text-hsl: 91, 93%, 27%; 37 | --color-mint-text-hsl: 162, 100%, 27%; 38 | --color-cyan-text-hsl: 184, 100%, 28%; 39 | --color-blue-text-hsl: 221, 64%, 56%; 40 | --color-purple-text-hsl: 257, 69%, 63%; 41 | --color-pink-text-hsl: 321, 57%, 51%; 42 | 43 | // Default theme variable overwrites for different shades of text used in the editor and around the UI. 44 | --text-normal-hsl: 28, 42%, 15%; 45 | --text-muted-hsl: 28, 42%, 20%; 46 | --text-faint-hsl: 28, 42%, 35%; 47 | 48 | // Default theme variable overwrites for the UI background colours. 49 | --background-primary-hsl: 28, 42%, 98%; 50 | --background-primary-alt-hsl: 28, 42%, 94%; 51 | --background-secondary-hsl: 28, 42%, 90%; 52 | --background-secondary-blur-hsl: 28, 42%, 88%; 53 | --background-secondary-alt-hsl: 28, 42%, 66%; 54 | 55 | // Default theme variable overwrites for shadows used on modals and popups. 56 | --shadow-color-hsl: 28, 42%, 7%; 57 | --shadow-s: hsla(var(--shadow-color-hsl), 10%) 0 1px 2px 0; 58 | --shadow-l: hsla(var(--shadow-color-hsl), 4%) 0 1px 2px, hsla(var(--shadow-color-hsl), 4%) 0 2px 4px, hsla(var(--shadow-color-hsl), 4%) 0 4px 8px, hsla(var(--shadow-color-hsl), 4%) 0 6px 12px; 59 | } 60 | 61 | // [Color Scheme - Coffee] Dark Theme 62 | .theme-dark.pt-color-scheme-mocha-dt { 63 | // The color variables below are comma separated HSL values. This format is necessary for using these 64 | // variables down the line in the theme and being able to create variants with varying alpha values (HSLA). 65 | 66 | // Base colours are used for the backgrounds in the accented color areas. 67 | --color-grey-base-hsl: 0, 0%, 17%; 68 | --color-red-base-hsl: 2, 50%, 20%; 69 | --color-orange-base-hsl: 26, 58%, 16%; 70 | --color-yellow-base-hsl: 43, 64%, 13%; 71 | --color-green-base-hsl: 122, 47%, 13%; 72 | --color-mint-base-hsl: 165, 75%, 11%; 73 | --color-cyan-base-hsl: 196, 57%, 15%; 74 | --color-blue-base-hsl: 225, 47%, 21%; 75 | --color-purple-base-hsl: 271, 45%, 22%; 76 | --color-pink-base-hsl: 326, 50%, 20%; 77 | 78 | // Tint colours are used for the borders in the accented color areas. 79 | --color-grey-tint-hsl: 0, 0%, 41%; 80 | --color-red-tint-hsl: 4, 46%, 47%; 81 | --color-orange-tint-hsl: 26, 49%, 38%; 82 | --color-yellow-tint-hsl: 43, 53%, 32%; 83 | --color-green-tint-hsl: 123, 39%, 33%; 84 | --color-mint-tint-hsl: 164, 61%, 29%; 85 | --color-cyan-tint-hsl: 195, 47%, 36%; 86 | --color-blue-tint-hsl: 225, 42%, 50%; 87 | --color-purple-tint-hsl: 271, 41%, 51%; 88 | --color-pink-tint-hsl: 326, 44%, 46%; 89 | 90 | // Text colours are used for the Text in the accented color areas and other Text areas which use the theme colours 91 | // e.g. Syntax Highlighting, Mark Highlight System, etc. 92 | --color-grey-text-hsl: 0, 0%, 65%; 93 | --color-red-text-hsl: 4, 69%, 72%; 94 | --color-orange-text-hsl: 26, 74%, 61%; 95 | --color-yellow-text-hsl: 43, 53%, 52%; 96 | --color-green-text-hsl: 123, 43%, 54%; 97 | --color-mint-text-hsl: 165, 56%, 46%; 98 | --color-cyan-text-hsl: 196, 60%, 57%; 99 | --color-blue-text-hsl: 226, 56%, 72%; 100 | --color-purple-text-hsl: 267, 48%, 73%; 101 | --color-pink-text-hsl: 329, 60%, 71%; 102 | 103 | // Default theme variable overwrites for different shades of text used in the editor and around the UI. 104 | --text-normal-hsl: 25, 40%, 91%; 105 | --text-muted-hsl: 25, 40%, 86%; 106 | --text-faint-hsl: 25, 40%, 81%; 107 | 108 | // Default theme variable overwrites for the UI background colours. 109 | --background-primary-hsl: 25, 40%, 18%; 110 | --background-primary-alt-hsl: 25, 40%, 28%; 111 | --background-secondary-hsl: 25, 40%, 12%; 112 | --background-secondary-blur-hsl: 25, 40%, 13%; 113 | --background-secondary-alt-hsl: 25, 40%, 8%; 114 | 115 | // Default theme variable overwrites for shadows used on modals and popups. 116 | --shadow-color-hsl: 25, 40%, 7%; 117 | --shadow-s: hsla(var(--shadow-color-hsl), 50%) 0 1px 2px 0; 118 | --shadow-l: hsla(var(--shadow-color-hsl), 50%) 0 1px 2px, hsla(var(--shadow-color-hsl), 50%) 0 2px 4px, hsla(var(--shadow-color-hsl), 50%) 0 4px 8px, hsla(var(--shadow-color-hsl), 50%) 0 6px 12px; 119 | } -------------------------------------------------------------------------------- /src/scss/Color Schemes/colorSchemeFlower.scss: -------------------------------------------------------------------------------- 1 | // [Color Scheme - Flower] Light Theme 2 | .theme-light.pt-color-scheme-periwinkle-lt { 3 | // The color variables below are comma separated HSL values. This format is necessary for using these 4 | // variables down the line in the theme and being able to create variants with varying alpha values (HSLA). 5 | 6 | // Base colours are used for the backgrounds in the accented color areas. 7 | --color-grey-base-hsl: 0, 0%, 92%; 8 | --color-red-base-hsl: 6, 100%, 94%; 9 | --color-orange-base-hsl: 30, 100%, 91%; 10 | --color-yellow-base-hsl: 42, 80%, 88%; 11 | --color-green-base-hsl: 100, 52%, 89%; 12 | --color-mint-base-hsl: 153, 65%, 88%; 13 | --color-cyan-base-hsl: 185, 63%, 88%; 14 | --color-blue-base-hsl: 220, 100%, 94%; 15 | --color-purple-base-hsl: 250, 100%, 95%; 16 | --color-pink-base-hsl: 329, 86%, 94%; 17 | 18 | // Tint colours are used for the borders in the accented color areas. 19 | --color-grey-tint-hsl: 0, 0%, 75%; 20 | --color-red-tint-hsl: 8, 88%, 81%; 21 | --color-orange-tint-hsl: 31, 90%, 69%; 22 | --color-yellow-tint-hsl: 45, 60%, 64%; 23 | --color-green-tint-hsl: 99, 52%, 62%; 24 | --color-mint-tint-hsl: 159, 64%, 55%; 25 | --color-cyan-tint-hsl: 184, 67%, 58%; 26 | --color-blue-tint-hsl: 219, 96%, 81%; 27 | --color-purple-tint-hsl: 252, 100%, 86%; 28 | --color-pink-tint-hsl: 327, 77%, 81%; 29 | 30 | // Text colours are used for the Text in the accented color areas and other Text areas which use the theme colours 31 | // e.g. Syntax Highlighting, Mark Highlight System, etc. 32 | --color-grey-text-hsl: 0, 0%, 50%; 33 | --color-red-text-hsl: 3, 73%, 55%; 34 | --color-orange-text-hsl: 31, 100%, 38%; 35 | --color-yellow-text-hsl: 39, 78%, 37%; 36 | --color-green-text-hsl: 93, 100%, 28%; 37 | --color-mint-text-hsl: 161, 100%, 28%; 38 | --color-cyan-text-hsl: 184, 100%, 29%; 39 | --color-blue-text-hsl: 221, 87%, 60%; 40 | --color-purple-text-hsl: 257, 92%, 68%; 41 | --color-pink-text-hsl: 321, 67%, 54%; 42 | 43 | // Default theme variable overwrites for different shades of text used in the editor and around the UI. 44 | --text-normal-hsl: 221, 55%, 15%; 45 | --text-muted-hsl: 221, 55%, 20%; 46 | --text-faint-hsl: 221, 55%, 35%; 47 | 48 | // Default theme variable overwrites for the UI background colours. 49 | --background-primary-hsl: 221, 55%, 98%; 50 | --background-primary-alt-hsl: 221, 55%, 95%; 51 | --background-secondary-hsl: 221, 55%, 92%; 52 | --background-secondary-blur-hsl: 221, 55%, 91%; 53 | --background-secondary-alt-hsl: 221, 55%, 72%; 54 | 55 | // Default theme variable overwrites for shadows used on modals and popups. 56 | --shadow-color-hsl: 221, 55%, 7%; 57 | --shadow-s: hsla(var(--shadow-color-hsl), 10%) 0 1px 2px 0; 58 | --shadow-l: hsla(var(--shadow-color-hsl), 4%) 0 1px 2px, hsla(var(--shadow-color-hsl), 4%) 0 2px 4px, hsla(var(--shadow-color-hsl), 4%) 0 4px 8px, hsla(var(--shadow-color-hsl), 4%) 0 6px 12px; 59 | } 60 | 61 | // [Color Scheme - Flower] Dark Theme 62 | .theme-dark.pt-color-scheme-indigo-dt { 63 | // The color variables below are comma separated HSL values. This format is necessary for using these 64 | // variables down the line in the theme and being able to create variants with varying alpha values (HSLA). 65 | 66 | // Base colours are used for the backgrounds in the accented color areas. 67 | --color-grey-base-hsl: 0, 0%, 17%; 68 | --color-red-base-hsl: 2, 50%, 20%; 69 | --color-orange-base-hsl: 26, 58%, 16%; 70 | --color-yellow-base-hsl: 43, 64%, 13%; 71 | --color-green-base-hsl: 124, 48%, 14%; 72 | --color-mint-base-hsl: 165, 75%, 11%; 73 | --color-cyan-base-hsl: 196, 57%, 15%; 74 | --color-blue-base-hsl: 225, 47%, 21%; 75 | --color-purple-base-hsl: 271, 45%, 22%; 76 | --color-pink-base-hsl: 326, 50%, 20%; 77 | 78 | // Tint colours are used for the borders in the accented color areas. 79 | --color-grey-tint-hsl: 0, 0%, 41%; 80 | --color-red-tint-hsl: 4, 46%, 47%; 81 | --color-orange-tint-hsl: 26, 49%, 38%; 82 | --color-yellow-tint-hsl: 43, 53%, 32%; 83 | --color-green-tint-hsl: 123, 39%, 33%; 84 | --color-mint-tint-hsl: 164, 61%, 29%; 85 | --color-cyan-tint-hsl: 196, 48%, 36%; 86 | --color-blue-tint-hsl: 225, 42%, 50%; 87 | --color-purple-tint-hsl: 271, 41%, 51%; 88 | --color-pink-tint-hsl: 326, 44%, 46%; 89 | 90 | // Text colours are used for the Text in the accented color areas and other Text areas which use the theme colours 91 | // e.g. Syntax Highlighting, Mark Highlight System, etc. 92 | --color-grey-text-hsl: 0, 0%, 65%; 93 | --color-red-text-hsl: 4, 69%, 72%; 94 | --color-orange-text-hsl: 26, 74%, 61%; 95 | --color-yellow-text-hsl: 43, 53%, 52%; 96 | --color-green-text-hsl: 123, 43%, 54%; 97 | --color-mint-text-hsl: 165, 56%, 46%; 98 | --color-cyan-text-hsl: 196, 60%, 57%; 99 | --color-blue-text-hsl: 226, 56%, 72%; 100 | --color-purple-text-hsl: 267, 48%, 73%; 101 | --color-pink-text-hsl: 329, 60%, 71%; 102 | 103 | // Default theme variable overwrites for different shades of text used in the editor and around the UI. 104 | --text-normal-hsl: 225, 40%, 91%; 105 | --text-muted-hsl: 225, 40%, 86%; 106 | --text-faint-hsl: 225, 40%, 81%; 107 | 108 | // Default theme variable overwrites for the UI background colours. 109 | --background-primary-hsl: 225, 40%, 20%; 110 | --background-primary-alt-hsl: 225, 40%, 33%; 111 | --background-secondary-hsl: 225, 40%, 13%; 112 | --background-secondary-blur-hsl: 225, 40%, 14%; 113 | --background-secondary-alt-hsl: 225, 40%, 9%; 114 | 115 | // Default theme variable overwrites for shadows used on modals and popups. 116 | --shadow-color-hsl: 225, 40%, 7%; 117 | --shadow-s: hsla(var(--shadow-color-hsl), 10%) 0 1px 2px 0; 118 | --shadow-l: hsla(var(--shadow-color-hsl), 10%) 0 1px 2px, hsla(var(--shadow-color-hsl), 10%) 0 2px 4px, hsla(var(--shadow-color-hsl), 10%) 0 4px 8px, hsla(var(--shadow-color-hsl), 10%) 0 6px 12px; 119 | } -------------------------------------------------------------------------------- /src/scss/Color Schemes/colorSchemeFruit.scss: -------------------------------------------------------------------------------- 1 | // [Color Scheme - Fruit] Light Theme 2 | .theme-light.pt-color-scheme-peach-lt { 3 | // The color variables below are comma separated HSL values. This format is necessary for using these 4 | // variables down the line in the theme and being able to create variants with varying alpha values (HSLA). 5 | 6 | // Base colours are used for the backgrounds in the accented color areas. 7 | --color-grey-base-hsl: 0, 0%, 90%; 8 | --color-red-base-hsl: 9, 90%, 92%; 9 | --color-orange-base-hsl: 25, 96%, 89%; 10 | --color-yellow-base-hsl: 41, 91%, 83%; 11 | --color-green-base-hsl: 101, 53%, 85%; 12 | --color-mint-base-hsl: 153, 64%, 84%; 13 | --color-cyan-base-hsl: 184, 63%, 85%; 14 | --color-blue-base-hsl: 221, 85%, 92%; 15 | --color-purple-base-hsl: 250, 100%, 94%; 16 | --color-pink-base-hsl: 328, 84%, 93%; 17 | 18 | // Tint colours are used for the borders in the accented color areas. 19 | --color-grey-tint-hsl: 0, 0%, 73%; 20 | --color-red-tint-hsl: 7, 79%, 78%; 21 | --color-orange-tint-hsl: 26, 89%, 69%; 22 | --color-yellow-tint-hsl: 44, 70%, 56%; 23 | --color-green-tint-hsl: 98, 52%, 58%; 24 | --color-mint-tint-hsl: 160, 61%, 52%; 25 | --color-cyan-tint-hsl: 184, 63%, 54%; 26 | --color-blue-tint-hsl: 219, 78%, 78%; 27 | --color-purple-tint-hsl: 252, 90%, 84%; 28 | --color-pink-tint-hsl: 326, 76%, 79%; 29 | 30 | // Text colours are used for the Text in the accented color areas and other Text areas which use the theme colours 31 | // e.g. Syntax Highlighting, Mark Highlight System, etc. 32 | --color-grey-text-hsl: 0, 0%, 47%; 33 | --color-red-text-hsl: 4, 67%, 51%; 34 | --color-orange-text-hsl: 29, 100%, 37%; 35 | --color-yellow-text-hsl: 39, 70%, 36%; 36 | --color-green-text-hsl: 95, 100%, 26%; 37 | --color-mint-text-hsl: 160, 100%, 26%; 38 | --color-cyan-text-hsl: 185, 100%, 28%; 39 | --color-blue-text-hsl: 221, 72%, 56%; 40 | --color-purple-text-hsl: 259, 81%, 64%; 41 | --color-pink-text-hsl: 319, 66%, 49%; 42 | 43 | // Default theme variable overwrites for different shades of text used in the editor and around the UI. 44 | --text-normal-hsl: 3, 55%, 15%; 45 | --text-muted-hsl: 3, 55%, 20%; 46 | --text-faint-hsl: 3, 55%, 35%; 47 | 48 | // Default theme variable overwrites for the UI background colours. 49 | --background-primary-hsl: 3, 55%, 98%; 50 | --background-primary-alt-hsl: 3, 55%, 95%; 51 | --background-secondary-hsl: 3, 55%, 93%; 52 | --background-secondary-blur-hsl: 3, 55%, 92%; 53 | --background-secondary-alt-hsl: 3, 55%, 74%; 54 | 55 | // Default theme variable overwrites for shadows used on modals and popups. 56 | --shadow-color-hsl: 3, 55%, 7%; 57 | --shadow-s: hsla(var(--shadow-color-hsl), 10%) 0 1px 2px 0; 58 | --shadow-l: hsla(var(--shadow-color-hsl), 4%) 0 1px 2px, hsla(var(--shadow-color-hsl), 4%) 0 2px 4px, hsla(var(--shadow-color-hsl), 4%) 0 4px 8px, hsla(var(--shadow-color-hsl), 4%) 0 6px 12px; 59 | } 60 | 61 | // [Color Scheme - Fruit] Dark Theme 62 | .theme-dark.pt-color-scheme-cherry-dt { 63 | // The color variables below are comma separated HSL values. This format is necessary for using these 64 | // variables down the line in the theme and being able to create variants with varying alpha values (HSLA). 65 | 66 | // Base colours are used for the backgrounds in the accented color areas. 67 | --color-grey-base-hsl: 0, 0%, 17%; 68 | --color-red-base-hsl: 2, 50%, 20%; 69 | --color-orange-base-hsl: 26, 59%, 16%; 70 | --color-yellow-base-hsl: 43, 64%, 13%; 71 | --color-green-base-hsl: 124, 48%, 14%; 72 | --color-mint-base-hsl: 165, 75%, 11%; 73 | --color-cyan-base-hsl: 196, 57%, 15%; 74 | --color-blue-base-hsl: 225, 47%, 21%; 75 | --color-purple-base-hsl: 272, 45%, 22%; 76 | --color-pink-base-hsl: 326, 50%, 20%; 77 | 78 | // Tint colours are used for the borders in the accented color areas. 79 | --color-grey-tint-hsl: 0, 0%, 41%; 80 | --color-red-tint-hsl: 4, 46%, 47%; 81 | --color-orange-tint-hsl: 26, 49%, 38%; 82 | --color-yellow-tint-hsl: 43, 53%, 32%; 83 | --color-green-tint-hsl: 123, 39%, 33%; 84 | --color-mint-tint-hsl: 164, 61%, 29%; 85 | --color-cyan-tint-hsl: 196, 48%, 36%; 86 | --color-blue-tint-hsl: 225, 42%, 50%; 87 | --color-purple-tint-hsl: 272, 42%, 51%; 88 | --color-pink-tint-hsl: 326, 44%, 46%; 89 | 90 | // Text colours are used for the Text in the accented color areas and other Text areas which use the theme colours 91 | // e.g. Syntax Highlighting, Mark Highlight System, etc. 92 | --color-grey-text-hsl: 0, 0%, 67%; 93 | --color-red-text-hsl: 4, 70%, 74%; 94 | --color-orange-text-hsl: 26, 80%, 63%; 95 | --color-yellow-text-hsl: 43, 57%, 54%; 96 | --color-green-text-hsl: 123, 45%, 55%; 97 | --color-mint-text-hsl: 165, 56%, 48%; 98 | --color-cyan-text-hsl: 195, 64%, 59%; 99 | --color-blue-text-hsl: 226, 56%, 74%; 100 | --color-purple-text-hsl: 268, 48%, 75%; 101 | --color-pink-text-hsl: 330, 60%, 74%; 102 | 103 | // Default theme variable overwrites for different shades of text used in the editor and around the UI. 104 | --text-normal-hsl: 2, 48%, 93%; 105 | --text-muted-hsl: 2, 48%, 88%; 106 | --text-faint-hsl: 2, 48%, 83%; 107 | 108 | // Default theme variable overwrites for the UI background colours. 109 | --background-primary-hsl: 2, 48%, 19%; 110 | --background-primary-alt-hsl: 2, 48%, 29%; 111 | --background-secondary-hsl: 2, 48%, 12%; 112 | --background-secondary-blur-hsl: 2, 48%, 13%; 113 | --background-secondary-alt-hsl: 2, 48%, 8%; 114 | 115 | // Default theme variable overwrites for shadows used on modals and popups. 116 | --shadow-color-hsl: 2, 48%, 7%; 117 | --shadow-s: hsla(var(--shadow-color-hsl), 10%) 0 1px 2px 0; 118 | --shadow-l: hsla(var(--shadow-color-hsl), 10%) 0 1px 2px, hsla(var(--shadow-color-hsl), 10%) 0 2px 4px, hsla(var(--shadow-color-hsl), 10%) 0 4px 8px, hsla(var(--shadow-color-hsl), 10%) 0 6px 12px; 119 | } -------------------------------------------------------------------------------- /src/scss/Color Schemes/colorSchemeTree.scss: -------------------------------------------------------------------------------- 1 | // [Color Scheme - Forest] Light Theme 2 | .theme-light.pt-color-scheme-pistachio-lt { 3 | // The color variables below are comma separated HSL values. This format is necessary for using these 4 | // variables down the line in the theme and being able to create variants with varying alpha values (HSLA). 5 | 6 | // Base colours are used for the backgrounds in the accented color areas. 7 | --color-grey-base-hsl: 0, 0%, 90%; 8 | --color-red-base-hsl: 8, 100%, 93%; 9 | --color-orange-base-hsl: 26, 89%, 89%; 10 | --color-yellow-base-hsl: 41, 90%, 84%; 11 | --color-green-base-hsl: 109, 52%, 86%; 12 | --color-mint-base-hsl: 152, 65%, 85%; 13 | --color-cyan-base-hsl: 184, 63%, 85%; 14 | --color-blue-base-hsl: 220, 85%, 92%; 15 | --color-purple-base-hsl: 250, 100%, 94%; 16 | --color-pink-base-hsl: 327, 84%, 93%; 17 | 18 | // Tint colours are used for the borders in the accented color areas. 19 | --color-grey-tint-hsl: 0, 0%, 73%; 20 | --color-red-tint-hsl: 7, 85%, 79%; 21 | --color-orange-tint-hsl: 27, 83%, 69%; 22 | --color-yellow-tint-hsl: 44, 70%, 56%; 23 | --color-green-tint-hsl: 108, 52%, 60%; 24 | --color-mint-tint-hsl: 160, 61%, 52%; 25 | --color-cyan-tint-hsl: 184, 64%, 55%; 26 | --color-blue-tint-hsl: 220, 78%, 78%; 27 | --color-purple-tint-hsl: 252, 90%, 84%; 28 | --color-pink-tint-hsl: 326, 76%, 79%; 29 | 30 | // Text colours are used for the Text in the accented color areas and other Text areas which use the theme colours 31 | // e.g. Syntax Highlighting, Mark Highlight System, etc. 32 | --color-grey-text-hsl: 0, 0%, 47%; 33 | --color-red-text-hsl: 2, 71%, 52%; 34 | --color-orange-text-hsl: 30, 100%, 36%; 35 | --color-yellow-text-hsl: 39, 71%, 36%; 36 | --color-green-text-hsl: 116, 42%, 37%; 37 | --color-mint-text-hsl: 160, 100%, 27%; 38 | --color-cyan-text-hsl: 185, 100%, 28%; 39 | --color-blue-text-hsl: 221, 72%, 56%; 40 | --color-purple-text-hsl: 259, 80%, 64%; 41 | --color-pink-text-hsl: 319, 65%, 50%; 42 | 43 | // Default theme variable overwrites for different shades of text used in the editor and around the UI. 44 | --text-normal-hsl: 101, 35%, 15%; 45 | --text-muted-hsl: 101, 35%, 20%; 46 | --text-faint-hsl: 101, 35%, 35%; 47 | 48 | // Default theme variable overwrites for the UI background colours. 49 | --background-primary-hsl: 101, 35%, 99%; 50 | --background-primary-alt-hsl: 101, 35%, 95%; 51 | --background-secondary-hsl: 101, 35%, 91%; 52 | --background-secondary-blur-hsl: 101, 35%, 90%; 53 | --background-secondary-alt-hsl: 101, 35%, 62%; 54 | 55 | // Default theme variable overwrites for shadows used on modals and popups. 56 | --shadow-color-hsl: 101, 35%, 7%; 57 | --shadow-s: hsla(var(--shadow-color-hsl), 10%) 0 1px 2px 0; 58 | --shadow-l: hsla(var(--shadow-color-hsl), 4%) 0 1px 2px, hsla(var(--shadow-color-hsl), 4%) 0 2px 4px, hsla(var(--shadow-color-hsl), 4%) 0 4px 8px, hsla(var(--shadow-color-hsl), 4%) 0 6px 12px; 59 | } 60 | 61 | // [Color Scheme - Forest] Dark Theme 62 | .theme-dark.pt-color-scheme-pine-dt { 63 | // The color variables below are comma separated HSL values. This format is necessary for using these 64 | // variables down the line in the theme and being able to create variants with varying alpha values (HSLA). 65 | 66 | // Base colours are used for the backgrounds in the accented color areas. 67 | --color-grey-base-hsl: 0, 0%, 17%; 68 | --color-red-base-hsl: 2, 50%, 20%; 69 | --color-orange-base-hsl: 26, 59%, 15%; 70 | --color-yellow-base-hsl: 43, 66%, 13%; 71 | --color-green-base-hsl: 122, 48%, 13%; 72 | --color-mint-base-hsl: 164, 75%, 11%; 73 | --color-cyan-base-hsl: 196, 56%, 14%; 74 | --color-blue-base-hsl: 225, 48%, 21%; 75 | --color-purple-base-hsl: 272, 45%, 21%; 76 | --color-pink-base-hsl: 326, 52%, 19%; 77 | 78 | // Tint colours are used for the borders in the accented color areas. 79 | --color-grey-tint-hsl: 0, 0%, 40%; 80 | --color-red-tint-hsl: 3, 46%, 47%; 81 | --color-orange-tint-hsl: 26, 49%, 38%; 82 | --color-yellow-tint-hsl: 43, 52%, 32%; 83 | --color-green-tint-hsl: 123, 39%, 33%; 84 | --color-mint-tint-hsl: 165, 60%, 28%; 85 | --color-cyan-tint-hsl: 195, 48%, 35%; 86 | --color-blue-tint-hsl: 225, 42%, 49%; 87 | --color-purple-tint-hsl: 271, 41%, 51%; 88 | --color-pink-tint-hsl: 327, 44%, 46%; 89 | 90 | // Text colours are used for the Text in the accented color areas and other Text areas which use the theme colours 91 | // e.g. Syntax Highlighting, Mark Highlight System, etc. 92 | --color-grey-text-hsl: 0, 0%, 66%; 93 | --color-red-text-hsl: 5, 70%, 73%; 94 | --color-orange-text-hsl: 26, 78%, 63%; 95 | --color-yellow-text-hsl: 43, 56%, 53%; 96 | --color-green-text-hsl: 123, 44%, 55%; 97 | --color-mint-text-hsl: 165, 56%, 48%; 98 | --color-cyan-text-hsl: 196, 63%, 58%; 99 | --color-blue-text-hsl: 226, 56%, 74%; 100 | --color-purple-text-hsl: 268, 48%, 74%; 101 | --color-pink-text-hsl: 330, 59%, 73%; 102 | 103 | // Default theme variable overwrites for different shades of text used in the editor and around the UI. 104 | --text-normal-hsl: 123, 39%, 93%; 105 | --text-muted-hsl: 123, 39%, 88%; 106 | --text-faint-hsl: 123, 39%, 83%; 107 | 108 | // Default theme variable overwrites for the UI background colours. 109 | --background-primary-hsl: 123, 39%, 15%; 110 | --background-primary-alt-hsl: 123, 39%, 23%; 111 | --background-secondary-hsl: 123, 39%, 9%; 112 | --background-secondary-blur-hsl: 123, 39%, 10%; 113 | --background-secondary-alt-hsl: 123, 39%, 6%; 114 | 115 | // Default theme variable overwrites for shadows used on modals and popups. 116 | --shadow-color-hsl: 123, 39%, 7%; 117 | --shadow-s: hsla(var(--shadow-color-hsl), 10%) 0 1px 2px 0; 118 | --shadow-l: hsla(var(--shadow-color-hsl), 10%) 0 1px 2px, hsla(var(--shadow-color-hsl), 10%) 0 2px 4px, hsla(var(--shadow-color-hsl), 10%) 0 4px 8px, hsla(var(--shadow-color-hsl), 10%) 0 6px 12px; 119 | } -------------------------------------------------------------------------------- /src/scss/Editor/progressBar.scss: -------------------------------------------------------------------------------- 1 | // [Editor] - Progress Bar 2 | .markdown-preview-view progress, 3 | .markdown-rendered progress, 4 | .markdown-source-view.is-live-preview progress { 5 | height: 15px; 6 | vertical-align: middle; 7 | 8 | &::before { 9 | position: absolute; 10 | width: inherit; 11 | height: inherit; 12 | font-family: var(--font-editor); 13 | font-family: var(--font-text); 14 | font-size: 10px; 15 | font-weight: 700; 16 | text-align: center; 17 | content: attr(value) " %"; 18 | 19 | .theme-light & { 20 | text-shadow: -1px -1px 0 hsla(0, 0%, 100%, 50%), 1px -1px 0 hsla(0, 0%, 100%, 50%), -1px 1px 0 hsla(0, 0%, 100%, 50%), 1px 1px 0 hsla(0, 0%, 100%, 50%); 21 | } 22 | 23 | .theme-dark & { 24 | text-shadow: -1px -1px 0 hsla(0, 0%, 0%, 50%), 1px -1px 0 hsla(0, 0%, 0%, 50%), -1px 1px 0 hsla(0, 0%, 0%, 50%), 1px 1px 0 hsla(0, 0%, 0%, 50%); 25 | } 26 | } 27 | 28 | &::-webkit-progress-bar { 29 | border: var(--window-border); 30 | border-radius: var(--radius-s); 31 | 32 | .theme-light & { 33 | background-color: var(--background-secondary); 34 | } 35 | 36 | .theme-dark & { 37 | background-color: var(--background-secondary-alt); 38 | } 39 | } 40 | 41 | &::-webkit-progress-value { 42 | border: 1px solid; 43 | border-color: transparent; 44 | border-radius: var(--radius-s); 45 | } 46 | 47 | &[value="0"]::-webkit-progress-value { 48 | border: unset; 49 | } 50 | :is(&[value="0"], &[value="1"], &[value="2"], &[value="3"], &[value="4"], &[value="5"], &[value="6"], &[value="7"], &[value="8"], &[value="9"], &[value="10"], &[value="11"], &[value="12"], &[value="13"], &[value="14"], &[value="15"], &[value="16"], &[value="17"], &[value="18"], &[value="19"], &[value="20"], &[value="21"], &[value="22"], &[value="23"], &[value="24"]) { 51 | &::-webkit-progress-value { 52 | background-color: var(--color-red-base); 53 | border-color: var(--color-red-tint); 54 | } 55 | } 56 | 57 | :is(&[value="25"], &[value="26"], &[value="27"], &[value="28"], &[value="29"], &[value="30"], &[value="31"], &[value="32"], &[value="33"], &[value="34"], &[value="35"], &[value="36"], &[value="37"], &[value="38"], &[value="39"], &[value="40"], &[value="41"], &[value="42"], &[value="43"], &[value="44"], &[value="45"], &[value="46"], &[value="47"], &[value="48"], &[value="49"]) { 58 | &::-webkit-progress-value { 59 | background-color: var(--color-orange-base); 60 | border-color: var(--color-orange-tint); 61 | } 62 | } 63 | 64 | :is(&[value="50"], &[value="51"], &[value="52"], &[value="53"], &[value="54"], &[value="55"], &[value="56"], &[value="57"], &[value="58"], &[value="59"], &[value="60"], &[value="61"], &[value="62"], &[value="63"], &[value="64"], &[value="65"], &[value="66"], &[value="67"], &[value="68"], &[value="69"], &[value="70"], &[value="71"], &[value="72"], &[value="73"], &[value="74"]) { 65 | &::-webkit-progress-value { 66 | background-color: var(--color-yellow-base); 67 | border-color: var(--color-yellow-tint); 68 | } 69 | } 70 | 71 | :is(&[value="75"], &[value="76"], &[value="77"], &[value="78"], &[value="79"], &[value="80"], &[value="81"], &[value="82"], &[value="83"], &[value="84"], &[value="85"], &[value="86"], &[value="87"], &[value="88"], &[value="89"], &[value="90"], &[value="91"], &[value="92"], &[value="93"], &[value="94"], &[value="95"], &[value="96"], &[value="97"], &[value="98"], &[value="99"]) { 72 | &::-webkit-progress-value { 73 | background-color: var(--color-green-base); 74 | border-color: var(--color-green-tint); 75 | } 76 | } 77 | 78 | &[value="100"]::-webkit-progress-value { 79 | background-color: var(--color-blue-base); 80 | border-color: var(--color-blue-tint); 81 | } 82 | } -------------------------------------------------------------------------------- /src/scss/Editor/properties.scss: -------------------------------------------------------------------------------- 1 | // Source Mode (YAML) Metadata Properties 2 | .cm-s-obsidian { 3 | .cm-hmd-frontmatter { 4 | color: var(--color-blue); 5 | 6 | &.cm-atom, 7 | &.cm-meta { 8 | color: var(--text-faint); 9 | } 10 | 11 | &.cm-keyword { 12 | color: var(--color-red); 13 | } 14 | 15 | &.cm-number { 16 | color: var(--color-green); 17 | } 18 | 19 | &.cm-def { 20 | color: var(--text-faint); 21 | } 22 | } 23 | } 24 | 25 | // Live Preview / Reading Metadata GUI 26 | .metadata-properties-heading { 27 | display: inline-flex; 28 | width: 100%; 29 | padding: var(--size-4-2); 30 | margin-bottom: unset; 31 | background-color: var(--background-secondary); 32 | border: var(--window-border); 33 | 34 | .collapse-indicator { 35 | position: relative; 36 | inset-inline-start: unset; 37 | left: unset; 38 | order: 2; 39 | opacity: 1; 40 | 41 | .collapse-icon svg.svg-icon { 42 | width: 18px; 43 | } 44 | } 45 | } 46 | 47 | .metadata-properties-title { 48 | display: flex; 49 | align-items: center; 50 | width: 100%; 51 | margin-bottom: unset; 52 | font-weight: var(--bold-weight); 53 | 54 | // Icon before title 55 | &::before { 56 | align-items: center; 57 | width: var(--icon-size); 58 | height: var(--icon-size); 59 | margin-inline-end: var(--size-4-2); 60 | content: ""; 61 | background-color: var(--text-muted); 62 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-archive'%3E%3Crect width='20' height='5' x='2' y='4' rx='2'/%3E%3Cpath d='M4 9v9a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9'/%3E%3Cpath d='M10 13h4'/%3E%3C/svg%3E"); 63 | -webkit-mask-repeat: no-repeat; 64 | -webkit-mask-position: center; 65 | -webkit-mask-size: 18px; 66 | } 67 | } 68 | 69 | .cm-editor, 70 | .markdown-preview-view { 71 | .metadata-content { 72 | padding: var(--size-4-3) var(--size-4-2); 73 | border: var(--window-border); 74 | border-top: unset; 75 | } 76 | } 77 | 78 | .metadata-property-key { 79 | align-items: center; 80 | } 81 | 82 | .metadata-property-icon { 83 | height: fit-content; 84 | padding: var(--size-2-1); 85 | margin-left: var(--size-4-1); 86 | 87 | &:hover { 88 | background-color: var(--interactive-accent-base); 89 | border-radius: var(--radius-s); 90 | } 91 | 92 | &::before { 93 | display: none; 94 | } 95 | } 96 | 97 | .metadata-container { 98 | transform: unset; 99 | 100 | .metadata-add-button { 101 | margin-top: var(--size-4-2); 102 | margin-left: var(--size-4-1); 103 | border: var(--window-border); 104 | } 105 | } 106 | 107 | .multi-select-container { 108 | gap: var(--size-4-2); 109 | } 110 | 111 | .metadata-property:not([data-property-key="tags"]) .multi-select-pill { 112 | line-height: unset; 113 | } 114 | 115 | .metadata-property[data-property-key="tags"] { 116 | --pill-radius: var(--radius-s); 117 | } 118 | 119 | .workspace-leaf-content[data-type=all-properties] .view-content, 120 | .workspace-leaf-content[data-type=file-properties] .view-content, 121 | .workspace-leaf-content[data-type=properties] .view-content { 122 | padding: var(--size-4-1); 123 | } 124 | 125 | .metadata-property:focus-within { 126 | box-shadow: 0 0 0 1px var(--window-border-color); 127 | } -------------------------------------------------------------------------------- /src/scss/Editor/vim.scss: -------------------------------------------------------------------------------- 1 | // [Editor] - Vim 2 | .cm-vimCursorLayer .cm-fat-cursor { 3 | outline: solid 1px var(--color-red-text); 4 | 5 | div.cm-focused & { 6 | color: var(--highlight-text-normal); 7 | outline: solid 1px var(--interactive-accent-tint); 8 | } 9 | } 10 | 11 | .ͼo:not(.cm-focused) .cm-fat-cursor { 12 | outline: solid 1px var(--color-red-tint); 13 | } -------------------------------------------------------------------------------- /src/scss/Fonts/License for JetBrains Mono.md: -------------------------------------------------------------------------------- 1 | Copyright 2020 The JetBrains Mono Project Authors (https://github.com/JetBrains/JetBrainsMono) 2 | 3 | This Font Software is licensed under the SIL Open Font License, Version 1.1. 4 | This license is copied below, and is also available with a FAQ at: 5 | https://scripts.sil.org/OFL 6 | 7 | 8 | ----------------------------------------------------------- 9 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 10 | ----------------------------------------------------------- 11 | 12 | PREAMBLE 13 | The goals of the Open Font License (OFL) are to stimulate worldwide 14 | development of collaborative font projects, to support the font creation 15 | efforts of academic and linguistic communities, and to provide a free and 16 | open framework in which fonts may be shared and improved in partnership 17 | with others. 18 | 19 | The OFL allows the licensed fonts to be used, studied, modified and 20 | redistributed freely as long as they are not sold by themselves. The 21 | fonts, including any derivative works, can be bundled, embedded, 22 | redistributed and/or sold with any software provided that any reserved 23 | names are not used by derivative works. The fonts and derivatives, 24 | however, cannot be released under any other type of license. The 25 | requirement for fonts to remain under this license does not apply 26 | to any document created using the fonts or their derivatives. 27 | 28 | DEFINITIONS 29 | "Font Software" refers to the set of files released by the Copyright 30 | Holder(s) under this license and clearly marked as such. This may 31 | include source files, build scripts and documentation. 32 | 33 | "Reserved Font Name" refers to any names specified as such after the 34 | copyright statement(s). 35 | 36 | "Original Version" refers to the collection of Font Software components as 37 | distributed by the Copyright Holder(s). 38 | 39 | "Modified Version" refers to any derivative made by adding to, deleting, 40 | or substituting -- in part or in whole -- any of the components of the 41 | Original Version, by changing formats or by porting the Font Software to a 42 | new environment. 43 | 44 | "Author" refers to any designer, engineer, programmer, technical 45 | writer or other person who contributed to the Font Software. 46 | 47 | PERMISSION & CONDITIONS 48 | Permission is hereby granted, free of charge, to any person obtaining 49 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 50 | redistribute, and sell modified and unmodified copies of the Font 51 | Software, subject to the following conditions: 52 | 53 | 1) Neither the Font Software nor any of its individual components, 54 | in Original or Modified Versions, may be sold by itself. 55 | 56 | 2) Original or Modified Versions of the Font Software may be bundled, 57 | redistributed and/or sold with any software, provided that each copy 58 | contains the above copyright notice and this license. These can be 59 | included either as stand-alone text files, human-readable headers or 60 | in the appropriate machine-readable metadata fields within text or 61 | binary files as long as those fields can be easily viewed by the user. 62 | 63 | 3) No Modified Version of the Font Software may use the Reserved Font 64 | Name(s) unless explicit written permission is granted by the corresponding 65 | Copyright Holder. This restriction only applies to the primary font name as 66 | presented to the users. 67 | 68 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 69 | Software shall not be used to promote, endorse or advertise any 70 | Modified Version, except to acknowledge the contribution(s) of the 71 | Copyright Holder(s) and the Author(s) or with their explicit written 72 | permission. 73 | 74 | 5) The Font Software, modified or unmodified, in part or in whole, 75 | must be distributed entirely under this license, and must not be 76 | distributed under any other license. The requirement for fonts to 77 | remain under this license does not apply to any document created 78 | using the Font Software. 79 | 80 | TERMINATION 81 | This license becomes null and void if any of the above conditions are 82 | not met. 83 | 84 | DISCLAIMER 85 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 86 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 87 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 88 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 89 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 90 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 91 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 92 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 93 | OTHER DEALINGS IN THE FONT SOFTWARE. 94 | -------------------------------------------------------------------------------- /src/scss/Fonts/License for Source Sans.md: -------------------------------------------------------------------------------- 1 | Copyright 2010-2020 Adobe (http://www.adobe.com/), with Reserved Font Name 'Source'. All Rights Reserved. Source is a trademark of Adobe in the United States and/or other countries. 2 | 3 | This Font Software is licensed under the SIL Open Font License, Version 1.1. 4 | 5 | This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL 6 | 7 | 8 | ----------------------------------------------------------- 9 | SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007 10 | ----------------------------------------------------------- 11 | 12 | PREAMBLE 13 | The goals of the Open Font License (OFL) are to stimulate worldwide 14 | development of collaborative font projects, to support the font creation 15 | efforts of academic and linguistic communities, and to provide a free and 16 | open framework in which fonts may be shared and improved in partnership 17 | with others. 18 | 19 | The OFL allows the licensed fonts to be used, studied, modified and 20 | redistributed freely as long as they are not sold by themselves. The 21 | fonts, including any derivative works, can be bundled, embedded, 22 | redistributed and/or sold with any software provided that any reserved 23 | names are not used by derivative works. The fonts and derivatives, 24 | however, cannot be released under any other type of license. The 25 | requirement for fonts to remain under this license does not apply 26 | to any document created using the fonts or their derivatives. 27 | 28 | DEFINITIONS 29 | "Font Software" refers to the set of files released by the Copyright 30 | Holder(s) under this license and clearly marked as such. This may 31 | include source files, build scripts and documentation. 32 | 33 | "Reserved Font Name" refers to any names specified as such after the 34 | copyright statement(s). 35 | 36 | "Original Version" refers to the collection of Font Software components as 37 | distributed by the Copyright Holder(s). 38 | 39 | "Modified Version" refers to any derivative made by adding to, deleting, 40 | or substituting -- in part or in whole -- any of the components of the 41 | Original Version, by changing formats or by porting the Font Software to a 42 | new environment. 43 | 44 | "Author" refers to any designer, engineer, programmer, technical 45 | writer or other person who contributed to the Font Software. 46 | 47 | PERMISSION & CONDITIONS 48 | Permission is hereby granted, free of charge, to any person obtaining 49 | a copy of the Font Software, to use, study, copy, merge, embed, modify, 50 | redistribute, and sell modified and unmodified copies of the Font 51 | Software, subject to the following conditions: 52 | 53 | 1) Neither the Font Software nor any of its individual components, 54 | in Original or Modified Versions, may be sold by itself. 55 | 56 | 2) Original or Modified Versions of the Font Software may be bundled, 57 | redistributed and/or sold with any software, provided that each copy 58 | contains the above copyright notice and this license. These can be 59 | included either as stand-alone text files, human-readable headers or 60 | in the appropriate machine-readable metadata fields within text or 61 | binary files as long as those fields can be easily viewed by the user. 62 | 63 | 3) No Modified Version of the Font Software may use the Reserved Font 64 | Name(s) unless explicit written permission is granted by the corresponding 65 | Copyright Holder. This restriction only applies to the primary font name as 66 | presented to the users. 67 | 68 | 4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font 69 | Software shall not be used to promote, endorse or advertise any 70 | Modified Version, except to acknowledge the contribution(s) of the 71 | Copyright Holder(s) and the Author(s) or with their explicit written 72 | permission. 73 | 74 | 5) The Font Software, modified or unmodified, in part or in whole, 75 | must be distributed entirely under this license, and must not be 76 | distributed under any other license. The requirement for fonts to 77 | remain under this license does not apply to any document created 78 | using the Font Software. 79 | 80 | TERMINATION 81 | This license becomes null and void if any of the above conditions are 82 | not met. 83 | 84 | DISCLAIMER 85 | THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 86 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF 87 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT 88 | OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE 89 | COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, 90 | INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL 91 | DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 92 | FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM 93 | OTHER DEALINGS IN THE FONT SOFTWARE. 94 | -------------------------------------------------------------------------------- /src/scss/Info/licence.scss: -------------------------------------------------------------------------------- 1 | /* 2 | Prism Theme for Obsidian.md (Version: 3.6.0) 3 | > A Comprehensive, Highly-Customisable and Elegant Light/Dark Theme for Obsidian.md 4 | 5 | Source: https://github.com/damiankorcz/Obsidian-Prism 6 | Documentation: https://github.com/damiankorcz/Prism-Theme/wiki 7 | Support the development: https://www.buymeacoffee.com/DamianKorcz 8 | Forum Thread: https://forum.obsidian.md/t/theme-prism/36493 9 | 10 | Licences 11 | The Theme contains Base64 embedded versions of the following fonts: 12 | - Source Sans - Distributed under the SIL Open Font License 1.1 13 | (https://github.com/adobe-fonts/source-sans/blob/release/LICENSE.md) 14 | 15 | - JetBrains Mono - Distributed under the SIL Open Font License 1.1 16 | (https://github.com/JetBrains/JetBrainsMono/blob/master/OFL.txt) 17 | 18 | Theme Code is distributed under the MIT License. 19 | See https://github.com/damiankorcz/Obsidian-Prism/blob/main/LICENSE for more information. 20 | 21 | Copyright (c) 2021-2024 Damian Korcz 22 | */ -------------------------------------------------------------------------------- /src/scss/Info/pluginCompatibility.scss: -------------------------------------------------------------------------------- 1 | /* @plugins 2 | core: 3 | - audio-recorder 4 | - backlink 5 | - canvas 6 | - command-palette 7 | - daily-notes 8 | - file-explorer 9 | - file-recovery 10 | - global-search 11 | - graph 12 | - markdown-importer 13 | - note-composer 14 | - open-with-default-app 15 | - outgoing-link 16 | - outline 17 | - page-preview 18 | - publish 19 | - random-note 20 | - slash-commands 21 | - slides 22 | - starred 23 | - sync 24 | - switcher 25 | - tag-pane 26 | - templates 27 | - word-count 28 | - workspaces 29 | - zk-prefixer 30 | 31 | community: 32 | - table-editor-obsidian 33 | - obsidian-kanban 34 | - quick-explorer 35 | - calendar 36 | - cmenu-plugin 37 | - obsidian-dangling-links 38 | - pane-relief 39 | - obsidian-icon-folder 40 | - obsidian-map-view 41 | - obsidian-emoji-toolbar 42 | - obsidian-tagfolder 43 | - obsidian-dictionary-plugin 44 | - obsidian-icons-plugin 45 | - obsidian-jump-to-date-plugin 46 | - obsidian-hover-editor 47 | - obsidian-quiet-outline 48 | - recent-files-obsidian 49 | - file-tree-alternative 50 | - settings-search 51 | */ -------------------------------------------------------------------------------- /src/scss/Plugins/Community/advancedTables.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Community] Advanced Tables 2 | :is(.workspace-split.mod-left-split, .workspace-split.mod-right-split, .workspace-drawer.mod-right) { 3 | .workspace-leaf-content[data-type="advanced-tables-toolbar"] { 4 | .nav-header { 5 | bottom: unset; 6 | flex-wrap: wrap; 7 | gap: var(--size-4-1); 8 | justify-content: flex-start; 9 | height: unset; 10 | padding: var(--size-4-1); 11 | 12 | .is-phone & { 13 | gap: var(--size-4-4); 14 | } 15 | } 16 | 17 | .advanced-tables-buttons > div:first-child { 18 | display: none; 19 | } 20 | 21 | .advanced-tables-row-label { 22 | width: fit-content; 23 | } 24 | 25 | .view-content { 26 | height: fit-content; 27 | padding: unset; 28 | 29 | > div { 30 | min-height: -webkit-fill-available; 31 | } 32 | } 33 | 34 | .nav-buttons-container { 35 | margin: unset; 36 | background: unset; 37 | backdrop-filter: unset; 38 | border: unset; 39 | box-shadow: unset; 40 | } 41 | 42 | .widget-icon { 43 | width: var(--icon-size); 44 | height: var(--icon-size); 45 | } 46 | 47 | .nav-action-button:hover { 48 | background-color: var(--background-modifier-hover); 49 | 50 | .widget-icon { 51 | fill: var(--highlight-text-normal); 52 | } 53 | } 54 | } 55 | } -------------------------------------------------------------------------------- /src/scss/Plugins/Community/cMenu.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Community] cMenu 2 | div#cMenuModalBar { 3 | background-color: var(--background-secondary); 4 | border: 1px solid var(--window-border-color); 5 | border-radius: var(--radius-m); 6 | box-shadow: var(--shadow-l); 7 | 8 | .cMenuCommandItem { 9 | color: var(--text-muted); 10 | background-color: transparent; 11 | } 12 | 13 | button.cMenuCommandItem:hover { 14 | color: var(--highlight-text-normal); 15 | background-color: var(--background-modifier-hover); 16 | } 17 | 18 | &.cMenuGlassAesthetic { 19 | background: var(--background-secondary-blur); 20 | -webkit-backdrop-filter: blur(var(--blur-intensity)); 21 | backdrop-filter: blur(var(--blur-intensity)); 22 | } 23 | 24 | .pt-status-bar-position-floating & { 25 | bottom: calc(var(--size-4-3) + 33px + var(--scroll-bar-size)) !important; 26 | } 27 | 28 | .pt-status-bar-position-fixed & { 29 | bottom: calc(var(--size-2-3) + 26px + var(--scroll-bar-size)) !important; 30 | } 31 | } -------------------------------------------------------------------------------- /src/scss/Plugins/Community/calendar.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Community] Calendar 2 | .workspace-leaf-content[data-type="calendar"] { 3 | .view-content { 4 | padding: unset; 5 | } 6 | 7 | #calendar-container { 8 | padding: unset; 9 | border-bottom: var(--window-border); 10 | 11 | .nav { 12 | height: var(--header-height); 13 | padding: var(--size-4-3); 14 | margin: unset; 15 | background: var(--background-secondary); 16 | border-bottom: var(--window-border); 17 | } 18 | 19 | td.svelte-egt0yd { 20 | background-color: var(--background-secondary); 21 | } 22 | 23 | th.svelte-pcimu8 { 24 | background-color: var(--background-secondary); 25 | border-bottom: var(--window-border); 26 | } 27 | 28 | div.today { 29 | font-size: 1em; 30 | font-weight: 600; 31 | color: var(--interactive-accent-text); 32 | } 33 | 34 | .day.svelte-q3wqg9:active, 35 | .active.svelte-q3wqg9, 36 | .active.today.svelte-q3wqg9 { 37 | background-color: var(--interactive-accent-base); 38 | } 39 | 40 | .week-num { 41 | font-size: 0.7em; 42 | } 43 | 44 | .year { 45 | color: var(--interactive-accent-text); 46 | } 47 | 48 | .dot.filled { 49 | fill: var(--interactive-accent-text); 50 | } 51 | 52 | .hollow.task { 53 | stroke: var(--interactive-accent-text); 54 | } 55 | 56 | .arrow:hover svg, 57 | .reset-button:hover { 58 | color: var(--highlight-text-normal); 59 | background-color: var(--background-modifier-hover); 60 | border-radius: var(--radius-s); 61 | } 62 | } 63 | } -------------------------------------------------------------------------------- /src/scss/Plugins/Community/danglingLinks.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Community] Dangling Links 2 | .workspace-leaf-content[data-type="dangling-links"] .view-content { 3 | padding: unset; 4 | 5 | .container { 6 | h3:first-of-type { 7 | display: none; 8 | } 9 | 10 | details { 11 | &:first-of-type summary { 12 | border-bottom: var(--window-border); 13 | } 14 | 15 | &:not(:first-of-type) summary { 16 | border-top: var(--window-border); 17 | border-bottom: var(--window-border); 18 | } 19 | 20 | // Rotates the image to match 21 | &[open] summary::before { 22 | -webkit-transform: rotate(90deg); 23 | transform: rotate(90deg); 24 | } 25 | 26 | &:not([open]) { 27 | color: var(--text-faint); 28 | } 29 | 30 | &:hover summary { 31 | color: var(--nav-item-color-hover); 32 | background-color: var(--nav-item-background-hover); 33 | font-weight: var(--nav-item-weight-hover); 34 | 35 | &::before { 36 | background-color: var(--nav-item-color-hover); 37 | } 38 | } 39 | 40 | summary { 41 | position: relative; 42 | display: flex; 43 | padding: var(--size-4-1) var(--size-4-2); 44 | margin-bottom: -1px; 45 | font-size: var(--font-ui-small); 46 | background-color: var(--background-secondary); 47 | // Disables the default marker which was used as a dropdown icon 48 | list-style-type: none; 49 | 50 | // Replaces the dropdown icon with one that matches others in Obsidian 51 | &::before { 52 | content: ''; 53 | display: inline-block; 54 | width: 15px; 55 | height: 15px; 56 | background-color: var(--text-muted); 57 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-right'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E"); 58 | mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-right'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E"); 59 | -webkit-mask-size: 15px; 60 | -webkit-mask-position: center; 61 | -webkit-mask-repeat: no-repeat; 62 | margin-right: var(--size-4-1); 63 | } 64 | } 65 | 66 | ul { 67 | padding-inline-start: 0; 68 | margin: 8px; 69 | font-family: var(--font-text); 70 | font-size: 14px; 71 | border: 1px solid var(--window-border-color); 72 | border-radius: var(--radius-m); 73 | 74 | li { 75 | width: 100%; 76 | padding: var(--size-4-2) var(--size-4-5) var(--size-4-2) var(--size-4-3); 77 | color: var(--text-normal); 78 | color: var(--text-muted); 79 | box-shadow: var(--shadow-s); 80 | 81 | &:not(:last-of-type) { 82 | border-bottom: 1px solid var(--window-border-color); 83 | } 84 | 85 | &:hover { 86 | color: var(--text-normal); 87 | background-color: var(--text-selection); 88 | } 89 | 90 | ::marker { 91 | display: none; 92 | } 93 | } 94 | } 95 | } 96 | } 97 | 98 | .nav-header { 99 | gap: var(--size-4-1); 100 | color: var(--icon-color); 101 | 102 | :is(.pt-nav-header-left-sidebar-position-top .workspace-split.mod-left-split &, .pt-nav-header-right-sidebar-position-top .workspace-split.mod-right-split &) { 103 | position: sticky; 104 | top: 0; 105 | z-index: var(--layer-popover); 106 | } 107 | } 108 | 109 | .nav-action-button { 110 | &:hover { 111 | color: var(--icon-color-hover); 112 | background-color: var(--background-modifier-hover); 113 | opacity: var(--icon-opacity-hover); 114 | } 115 | 116 | svg { 117 | width: var(--icon-size); 118 | height: var(--icon-size); 119 | } 120 | 121 | // Might be able to address the border and background in the future for consistency 122 | path[stroke-width] { 123 | color: var(--interactive-accent-text); 124 | } 125 | } 126 | } -------------------------------------------------------------------------------- /src/scss/Plugins/Community/dataLoom.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Community] DataLoom 2 | .workspace-leaf-content[data-type="dataloom"] { 3 | .view-content { 4 | padding: unset; 5 | } 6 | 7 | .dataloom-option-bar .dataloom-padding { 8 | height: var(--header-height); 9 | padding: var(--size-4-1) var(--size-4-2) !important; 10 | } 11 | 12 | .dataloom-app { 13 | border-top: unset; 14 | } 15 | 16 | .dataloom-bubble { 17 | color: var(--interactive-accent-text); 18 | background-color: var(--interactive-accent-base); 19 | border: 1px solid var(--interactive-accent-tint); 20 | } 21 | 22 | .dataloom-cell.dataloom-cell--freeze { 23 | background-color: var(--background-secondary); 24 | } 25 | 26 | .dataloom-flex { 27 | padding: 0 var(--size-4-2); 28 | } 29 | } 30 | 31 | .dataloom-button { 32 | &:hover { 33 | color: var(--interactive-accent-text); 34 | } 35 | 36 | &[aria-label="Delete filter"]:hover { 37 | color: var(--color-red-text); 38 | background-color: var(--color-red-base) !important; 39 | } 40 | } 41 | 42 | .dataloom-select { 43 | background-color: var(--background-secondary-alt); 44 | border: var(--window-border); 45 | } 46 | 47 | .dataloom-focusable:focus-visible, 48 | .dataloom-focusable--focused { 49 | outline-color: var(--interactive-accent-tint); 50 | } 51 | 52 | .dataloom-menu { 53 | padding: var(--size-4-1); 54 | border: 1px solid var(--window-border-color) !important; 55 | border-radius: var(--radius-m); 56 | box-shadow: var(--shadow-l) !important; 57 | 58 | .theme-dark & { 59 | background-color: var(--background-secondary-alt); 60 | } 61 | 62 | .theme-light & { 63 | background-color: var(--background-primary); 64 | } 65 | 66 | .dataloom-padding { 67 | padding: unset !important; 68 | } 69 | 70 | .dataloom-menu-item:hover { 71 | color: var(--interactive-accent-text); 72 | background-color: var(--interactive-accent-base); 73 | border-radius: var(--radius-s); 74 | } 75 | 76 | .dataloom-switch { 77 | width: var(--toggle-width); 78 | 79 | &::after { 80 | width: var(--toggle-thumb-width); 81 | height: var(--toggle-thumb-height); 82 | } 83 | } 84 | 85 | .dataloom-stack { 86 | padding: var(--size-2-1) var(--size-4-1); 87 | } 88 | } -------------------------------------------------------------------------------- /src/scss/Plugins/Community/dictionary.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Community] Dictionary 2 | .workspace-leaf-content[data-type="dictionary-view"] { 3 | .view-content { 4 | display: flex; 5 | flex-flow: column; 6 | padding: unset; 7 | background-color: var(--background-secondary); 8 | } 9 | 10 | .search-input-container { 11 | display: flex; 12 | align-items: center; 13 | justify-content: center; 14 | height: var(--header-height); 15 | padding: var(--size-4-1); 16 | background-color: var(--background-secondary); 17 | border-bottom: var(--window-border); 18 | 19 | .pt-nav-header-left-sidebar-position-top &, 20 | .pt-nav-header-right-sidebar-position-top & { 21 | border-top: var(--window-border); 22 | } 23 | } 24 | 25 | .nav-buttons-container { 26 | min-height: var(--header-height); 27 | padding: var(--size-4-2); 28 | } 29 | 30 | .nav-action-button:not(.is-active) { 31 | color: var(--text-muted); 32 | 33 | &:hover { 34 | color: var(--highlight-text-normal); 35 | background-color: var(--background-modifier-hover); 36 | } 37 | } 38 | 39 | .container.svelte-17ilbu5 { 40 | padding: unset; 41 | margin-top: unset; 42 | background-color: unset; 43 | border-radius: unset; 44 | 45 | h3 { 46 | padding: var(--size-4-1) var(--size-4-2); 47 | margin: -1px 0 0; 48 | font-size: var(--font-ui-small); 49 | font-weight: var(--font-medium); 50 | background-color: var(--background-secondary); 51 | border-top: var(--window-border); 52 | border-bottom: var(--window-border); 53 | } 54 | } 55 | 56 | .contents.svelte-17ilbu5 { 57 | height: 100%; 58 | 59 | .theme-light & { 60 | background-color: var(--background-primary); 61 | } 62 | 63 | .theme-dark & { 64 | background-color: var(--background-secondary-alt); 65 | } 66 | } 67 | 68 | .main.svelte-1ufvm6z.svelte-1ufvm6z, 69 | .main.svelte-5jhpts.svelte-5jhpts { 70 | padding: unset; 71 | margin-bottom: unset; 72 | border-radius: unset; 73 | 74 | audio { 75 | padding: 0 var(--size-4-2); 76 | margin: (--size-4-2) 0; 77 | } 78 | 79 | .theme-light & { 80 | background-color: var(--background-primary); 81 | } 82 | 83 | .theme-dark & { 84 | background-color: var(--background-secondary-alt); 85 | } 86 | } 87 | 88 | .container.svelte-17ilbu5:nth-child(2) .main.svelte-5jhpts > div:nth-child(2) { 89 | margin: var(--size-4-2); 90 | border: 1px solid var(--window-border-color); 91 | border-radius: var(--radius-m); 92 | } 93 | 94 | .main.svelte-5jhpts { 95 | padding: unset; 96 | 97 | .mark { 98 | box-shadow: inset 0 -2px var(--interactive-accent-text); 99 | } 100 | } 101 | 102 | // Overlaps the borders when collapsed 103 | .main:first-of-type .opener { 104 | margin-top: -1px; 105 | } 106 | 107 | .opener { 108 | display: flex; 109 | align-items: center; 110 | padding: var(--size-4-1) var(--size-4-2); 111 | font-size: var(--font-ui-small); 112 | background-color: var(--background-secondary); 113 | border-top: var(--window-border); 114 | border-bottom: var(--window-border); 115 | 116 | &:not([open]) { 117 | margin-bottom: -1px; 118 | } 119 | 120 | &:hover { 121 | font-weight: var(--nav-item-weight-hover); 122 | color: var(--nav-item-color-hover); 123 | background-color: var(--nav-item-background-hover); 124 | 125 | .tree-item-icon svg { 126 | background-color: var(--nav-item-color-hover); 127 | } 128 | } 129 | 130 | // Replaces the dropdown icon with one that matches others in Obsidian 131 | .tree-item-icon { 132 | svg { 133 | display: inline-block; 134 | width: 15px; 135 | height: 15px; 136 | margin-right: var(--size-4-1); 137 | content: ""; 138 | background-color: var(--text-muted); 139 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); 140 | mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); 141 | -webkit-mask-size: 15px; 142 | -webkit-mask-position: center; 143 | -webkit-mask-repeat: no-repeat; 144 | } 145 | 146 | &::after, 147 | &::before, 148 | svg path { 149 | display: none; 150 | } 151 | } 152 | } 153 | 154 | .definition.svelte-5jhpts.svelte-5jhpts { 155 | padding: var(--size-4-2) var(--size-4-4); 156 | } 157 | 158 | .search-input-container::before { 159 | top: unset; 160 | } 161 | } -------------------------------------------------------------------------------- /src/scss/Plugins/Community/emojiToolbar.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Community] Emoji Toolbar 2 | .emoji-mart-bar { 3 | background-color: var(--background-secondary); 4 | border-bottom-color: var(--window-border-color); 5 | 6 | &:last-child { 7 | border-top-color: var(--window-border-color); 8 | } 9 | } 10 | 11 | .emoji-mart-dark { 12 | background-color: var(--background-secondary); 13 | 14 | .emoji-mart-category-label span { 15 | background-color: var(--background-secondary); 16 | } 17 | } 18 | 19 | .emoji-mart-search { 20 | display: flex; 21 | padding: var(--size-4-1); 22 | margin-top: unset; 23 | background-color: var(--background-secondary); 24 | border-bottom: var(--window-border); 25 | } 26 | 27 | .emoji-mart-search-icon { 28 | top: unset; 29 | } 30 | 31 | .emoji-mart-scroll { 32 | padding: unset; 33 | } 34 | 35 | .emoji-mart-category-label { 36 | background-color: var(--background-secondary-blur); 37 | border-bottom: var(--window-border); 38 | -webkit-backdrop-filter: blur(var(--blur-intensity)); 39 | backdrop-filter: blur(var(--blur-intensity)); 40 | 41 | span { 42 | background-color: unset; 43 | } 44 | } 45 | 46 | .modal#emoji-modal .emoji-mart-emoji { 47 | display: unset; 48 | } 49 | 50 | .emoji-mart-anchor svg { 51 | color: var(--text-muted); 52 | } 53 | 54 | .emoji-mart-anchor-selected svg { 55 | color: var(--interactive-accent-text); 56 | } 57 | 58 | .emoji-mart-anchor-bar { 59 | background-color: var(--interactive-accent-tint) !important; 60 | } 61 | 62 | .emoji-mart-category .emoji-mart-emoji:hover::before, 63 | .emoji-mart-category .emoji-mart-emoji:focus::before { 64 | background-color: var(--background-modifier-hover); 65 | } -------------------------------------------------------------------------------- /src/scss/Plugins/Community/fileTreeAlternative.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Community] File Tree Alternative Plugin 2 | .workspace-leaf div.workspace-leaf-content[data-type="file-tree-view"] { 3 | > div.view-content { 4 | padding: 0; 5 | } 6 | 7 | .oz-folder-pane { 8 | resize: unset; 9 | } 10 | 11 | .oz-folders-tree-wrapper { 12 | padding: unset; 13 | 14 | > .oz-folder-contents { 15 | margin-right: var(--size-4-1); 16 | margin-bottom: var(--size-4-1); 17 | margin-left: 14px !important; 18 | } 19 | 20 | > .treeview { 21 | padding: 0 var(--size-4-1) 0 0; 22 | } 23 | } 24 | 25 | .oz-folder-contents { 26 | padding-left: 0; 27 | margin-left: 15px !important; 28 | border-left: var(--window-border); 29 | } 30 | 31 | .oz-folder-element { 32 | margin-left: var(--size-4-1); 33 | } 34 | 35 | .oz-icon-div { 36 | padding-left: var(--size-4-1); 37 | } 38 | 39 | .oz-folders-action-items, 40 | .oz-flex-container, { 41 | height: var(--header-height); 42 | margin-bottom: unset; 43 | background-color: var(--background-secondary-blur); 44 | border: unset; 45 | border-bottom: var(--window-border); 46 | border-radius: unset; 47 | -webkit-backdrop-filter: blur(var(--blur-intensity)); 48 | backdrop-filter: blur(var(--blur-intensity)); 49 | } 50 | 51 | .oz-folders-action-items { 52 | display: flex; 53 | gap: var(--size-4-2); 54 | align-items: center; 55 | justify-content: center; 56 | padding: unset; 57 | margin-bottom: var(--size-4-1); 58 | } 59 | 60 | .oz-nav-action-button { 61 | display: flex; 62 | align-items: center; 63 | justify-content: center; 64 | width: 26px; 65 | height: 26px; 66 | margin-left: unset; 67 | color: var(--text-faint); 68 | 69 | &:hover { 70 | color: var(--highlight-text-normal); 71 | background-color: var(--background-modifier-hover); 72 | } 73 | } 74 | 75 | .oz-file-tree-header { 76 | margin-top: unset; 77 | font-weight: var(--font-medium); 78 | background-color: var(--background-secondary-blur); 79 | border-bottom: var(--window-border); 80 | border-radius: unset; 81 | -webkit-backdrop-filter: blur(var(--blur-intensity)); 82 | backdrop-filter: blur(var(--blur-intensity)); 83 | } 84 | 85 | .oz-file-tree-header-wrapper .oz-flex-container { 86 | display: flex; 87 | gap: var(--size-4-2); 88 | align-items: center; 89 | justify-content: center; 90 | 91 | .oz-nav-action-button { 92 | display: inline-flex; 93 | order: 2; 94 | } 95 | 96 | .oz-nav-buttons-right-block { 97 | gap: var(--size-4-2); 98 | } 99 | } 100 | 101 | .file-tree-header-fixed { 102 | padding-right: unset; 103 | padding-left: unset; 104 | } 105 | 106 | #file-tree-divider { 107 | height: 1px; 108 | margin-bottom: unset; 109 | background-color: var(--window-border-color); 110 | border-bottom: unset; 111 | opacity: 1; 112 | 113 | .pt-color-scheme-style-minimal-lt &, 114 | .pt-color-scheme-style-minimal-dt & { 115 | background-color: transparent; 116 | } 117 | 118 | &:hover { 119 | height: 3px; 120 | background-color: var(--divider-color-hover); 121 | } 122 | } 123 | 124 | #file-tree-divider-horizontal { 125 | width: 1px; 126 | margin-right: unset; 127 | margin-left: unset; 128 | border-right: 1px solid var(--window-border-color); 129 | opacity: unset; 130 | 131 | &:hover { 132 | width: 3px; 133 | background-color: var(--divider-color-hover); 134 | } 135 | } 136 | 137 | .oz-file-tree-files { 138 | padding: var(--size-4-1) !important; 139 | } 140 | 141 | .oz-nav-file { 142 | margin-bottom: var(--size-2-1); 143 | margin-left: unset; 144 | border: 2px solid transparent; 145 | border-radius: var(--radius-s); 146 | } 147 | 148 | .oz-nav-file-title { 149 | font-size: var(--font-ui-small); 150 | } 151 | 152 | div.oz-nav-file.is-active div.oz-nav-file-title, 153 | div.oz-nav-file.is-active div.oz-nav-file-title-content { 154 | font-weight: var(--font-normal); 155 | color: unset; 156 | background-color: unset; 157 | 158 | .oz-nav-file-tag { 159 | color: var(--highlight-text-normal); 160 | } 161 | } 162 | 163 | .oz-nav-file-tag { 164 | background-color: unset; 165 | } 166 | 167 | .oz-folder-block { 168 | padding-top: unset; 169 | } 170 | 171 | .treeview { 172 | padding: 1px; 173 | margin-bottom: var(--size-2-1); 174 | } 175 | 176 | .oz-explorer-container { 177 | padding-right: unset !important; 178 | padding-left: unset !important; 179 | } 180 | 181 | .is-folder-active { 182 | color: var(--interactive-accent-text); 183 | } 184 | 185 | .drag-entered, 186 | .oz-folder-element:hover, 187 | .oz-nav-file:hover { 188 | background-color: var(--background-modifier-hover); 189 | border-radius: var(--radius-s); 190 | 191 | .oz-folder-name, 192 | .oz-nav-file-title, 193 | .oz-nav-file-tag { 194 | color: var(--highlight-text-normal); 195 | } 196 | } 197 | } 198 | 199 | .is-mobile .workspace-leaf div.workspace-leaf-content[data-type="file-tree-view"] { 200 | .oz-folders-action-items { 201 | gap: var(--size-4-4); 202 | } 203 | 204 | .oz-file-tree-header-wrapper .oz-flex-container { 205 | gap: var(--size-4-4); 206 | 207 | .oz-nav-buttons-right-block { 208 | gap: var(--size-4-4); 209 | } 210 | } 211 | } -------------------------------------------------------------------------------- /src/scss/Plugins/Community/hoverEditor.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Community] Hover Editor 2 | .hover-editor { 3 | --he-title-bar-active-fg: var(--interactive-accent-text); 4 | --he-title-bar-active-pinned-bg: var(--background-secondary); 5 | --he-title-bar-inactive-bg: var(--background-secondary); 6 | --he-title-bar-inactive-pinned-bg: var(--background-secondary); 7 | --he-title-bar-height: 32px; 8 | 9 | &.show-navbar .view-header { 10 | border-bottom: var(--window-border); 11 | } 12 | 13 | &.is-pinned { 14 | border-color: var(--interactive-accent-tint); 15 | } 16 | 17 | .view-header .view-header-icon { 18 | margin-right: unset; 19 | } 20 | 21 | .view-content { 22 | height: 100%; 23 | } 24 | 25 | .popover-titlebar { 26 | padding: var(--size-4-1) 0; 27 | border-bottom: var(--window-border); 28 | } 29 | 30 | :is(.popover-action, .mod-pin-popover) { 31 | padding: 0 var(--size-2-1); 32 | } 33 | } -------------------------------------------------------------------------------- /src/scss/Plugins/Community/iconFolder.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Community] Icon Folder 2 | .pt-icon-folder-accent { 3 | .obsidian-icon-folder-icon { 4 | color: var(--interactive-accent-text); 5 | } 6 | } -------------------------------------------------------------------------------- /src/scss/Plugins/Community/icons.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Community] Icons 2 | .pt-icons-accent { 3 | .obsidian-icon { 4 | color: var(--interactive-accent-text); 5 | } 6 | } -------------------------------------------------------------------------------- /src/scss/Plugins/Community/jumpToDate.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Community] Jump To Date 2 | .flatpickr-calendar { 3 | background-color: var(--background-secondary); 4 | border: 1px solid var(--window-border-color); 5 | border-radius: var(--radius-m); 6 | box-shadow: var(--shadow-l); 7 | 8 | &.arrowTop::before { 9 | border-bottom-color: var(--window-border-color); 10 | } 11 | 12 | .flatpickr-innerContainer { 13 | border-radius: var(--radius-m); 14 | } 15 | 16 | .flatpickr-months { 17 | background: var(--background-secondary); 18 | border-bottom: var(--window-border); 19 | border-top-left-radius: var(--radius-m); 20 | border-top-right-radius: var(--radius-m); 21 | 22 | .flatpickr-prev-month, 23 | .flatpickr-next-month { 24 | display: flex; 25 | align-items: center; 26 | justify-content: center; 27 | height: unset; 28 | padding: var(--size-2-3) var(--size-4-1); 29 | margin: var(--size-4-1); 30 | border-radius: var(--radius-s); 31 | fill: var(--text-muted); 32 | 33 | &:hover { 34 | background-color: var(--background-modifier-hover); 35 | 36 | svg { 37 | fill: var(--highlight-text-normal); 38 | } 39 | } 40 | } 41 | } 42 | 43 | .flatpickr-current-month { 44 | display: flex; 45 | align-items: center; 46 | justify-content: center; 47 | padding-top: unset; 48 | 49 | input.cur-year { 50 | padding-left: unset; 51 | } 52 | } 53 | 54 | .flatpickr-monthDropdown-months { 55 | font-weight: 600; 56 | color: var(--text-normal); 57 | text-align: center; 58 | background-color: var(--background-secondary); 59 | border: var(--window-border); 60 | border-radius: var(--radius-s); 61 | } 62 | 63 | .numInputWrapper { 64 | width: 7ch; 65 | padding-left: var(--size-4-2); 66 | } 67 | 68 | .numInput.cur-year { 69 | font-weight: 800; 70 | color: var(--interactive-accent-text); 71 | box-shadow: unset; 72 | } 73 | 74 | .flatpickr-days { 75 | .theme-light & { 76 | background-color: var(--background-primary); 77 | } 78 | 79 | .theme-dark & { 80 | background-color: var(--background-secondary-alt); 81 | } 82 | } 83 | 84 | .dayContainer { 85 | span.flatpickr-day, 86 | span.flatpickr-day.prevMonthDay, 87 | span.flatpickr-day.nextMonthDay { 88 | border: unset; 89 | border-radius: var(--radius-s) !important; 90 | } 91 | } 92 | 93 | span.flatpickr-day { 94 | font-weight: 600; 95 | color: var(--text-normal); 96 | 97 | &:hover { 98 | font-weight: 600; 99 | background-color: var(--background-primary); 100 | border-radius: var(--radius-s); 101 | transition: unset; 102 | } 103 | 104 | &.today { 105 | font-weight: 800; 106 | color: var(--interactive-accent-text); 107 | } 108 | } 109 | 110 | span.flatpickr-day.prevMonthDay, 111 | span.flatpickr-day.nextMonthDay { 112 | opacity: 0.2; 113 | } 114 | 115 | span.flatpickr-day.selected { 116 | background: var(--interactive-accent-base); 117 | box-shadow: var(--shadow-s); 118 | 119 | &:hover { 120 | font-weight: 600; 121 | background-color: var(--background-primary); 122 | border-radius: var(--radius-s); 123 | transition: unset; 124 | } 125 | } 126 | 127 | .flatpickr-weekdays { 128 | border-bottom: var(--window-border); 129 | 130 | span.flatpickr-weekday { 131 | font-size: 10px; 132 | font-weight: bold; 133 | color: var(--text-muted); 134 | text-transform: uppercase; 135 | letter-spacing: 1px; 136 | } 137 | } 138 | } -------------------------------------------------------------------------------- /src/scss/Plugins/Community/kanban.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Community] Kanban Base 2 | .kanban-plugin { 3 | background-color: unset; 4 | } 5 | 6 | .kanban-plugin__lane-header-wrapper { 7 | gap: var(--size-4-1); 8 | padding: var(--size-4-1) var(--size-4-2); 9 | } 10 | 11 | .kanban-plugin__lane-wrapper { 12 | margin-right: var(--size-4-4); 13 | } 14 | 15 | .kanban-plugin__item-title-wrapper { 16 | .theme-dark & { 17 | background: var(--background-secondary-alt); 18 | } 19 | } 20 | 21 | button.kanban-plugin__new-item-button { 22 | border: var(--window-border); 23 | 24 | &:hover { 25 | background-color: var(--background-modifier-hover); 26 | } 27 | } 28 | 29 | .kanban-plugin__item-form .kanban-plugin__item-input-wrapper { 30 | .theme-dark & { 31 | background-color: var(--background-secondary-alt); 32 | } 33 | } 34 | 35 | .kanban-plugin__lane-items { 36 | gap: var(--size-4-1); 37 | padding: var(--size-4-2); 38 | margin: unset; 39 | 40 | > div { 41 | margin-top: unset; 42 | } 43 | } 44 | 45 | .kanban-plugin__scroll-container.kanban-plugin__vertical { 46 | .theme-light & { 47 | background-color: var(--background-primary); 48 | } 49 | 50 | .theme-dark & { 51 | background-color: var(--background-secondary-alt); 52 | } 53 | } 54 | 55 | :is(.kanban-plugin__lane-grip, div.kanban-plugin__lane-title-count, .kanban-plugin__lane button.kanban-plugin__lane-settings-button) { 56 | margin: unset; 57 | } 58 | 59 | .kanban-plugin__lane button.kanban-plugin__lane-settings-button { 60 | height: unset; 61 | box-shadow: unset; 62 | } 63 | 64 | .modal.kanban-plugin__board-settings-modal { 65 | width: var(--modal-width); 66 | max-width: var(--modal-max-width); 67 | height: var(--modal-height); 68 | max-height: var(--modal-max-height); 69 | 70 | .modal-title:empty { 71 | display: block; 72 | width: -webkit-fill-available; 73 | width: fill-available; 74 | height: 42px; 75 | margin-bottom: unset; 76 | content: ""; 77 | border-bottom: var(--window-border); 78 | } 79 | 80 | .modal-content { 81 | padding: var(--size-4-8); 82 | } 83 | 84 | :is(h3, h4) { 85 | margin: var(--size-4-2) 0; 86 | border-bottom: var(--window-border); 87 | } 88 | } 89 | 90 | .kanban-plugin__board > div { 91 | padding: var(--size-4-4); 92 | } 93 | 94 | .kanban-plugin__markdown-preview-view > div > * { 95 | overflow-x: unset; 96 | } 97 | 98 | // [Plugins - Community] Kanban Item Counter 99 | div.kanban-plugin__lane-title-count { 100 | display: block; 101 | height: fit-content; 102 | padding: 0 4px; 103 | font-size: 0.75em; 104 | font-weight: 600; 105 | line-height: 1.5em; 106 | color: var(--text-normal); 107 | background-color: unset; 108 | border-radius: var(--radius-s); 109 | } 110 | 111 | .kanban-plugin__lane-grip, 112 | .kanban-plugin__lane-settings-button-wrapper { 113 | border-radius: var(--radius-s); 114 | 115 | &:hover { 116 | color: var(--interactive-accent-hover); 117 | background-color: var(--interactive-accent-base); 118 | } 119 | } 120 | 121 | .kanban-plugin__lane-grip { 122 | padding: var(--size-4-1) 0; 123 | } 124 | 125 | .pt-center-kanban-title-text { 126 | .kanban-plugin__lane-title { 127 | align-items: center; 128 | } 129 | 130 | .kanban-plugin__lane-input { 131 | width: -webkit-fill-available; 132 | width: fill-available; 133 | } 134 | } 135 | 136 | .pt-disable-kanban-title-count div.kanban-plugin__lane-title-count { 137 | display: none; 138 | } 139 | 140 | // [Plugins - Community] Kanban Background Styles 141 | .theme-light.pt-kanban-background-dots-lt { 142 | .kanban-plugin__board { 143 | background-image: radial-gradient(circle, hsla(var(--background-secondary-hsl), 90%) 1px, rgba(0, 0, 0, 0%) 1px); 144 | background-attachment: local; 145 | background-size: 8px 8px; 146 | } 147 | } 148 | 149 | .theme-dark.pt-kanban-background-dots-dt { 150 | .kanban-plugin__board { 151 | background-image: radial-gradient(circle, hsla(var(--background-secondary-hsl), 90%) 1px, rgba(0, 0, 0, 0%) 1px); 152 | background-attachment: local; 153 | background-size: 8px 8px; 154 | } 155 | } 156 | 157 | .theme-light.pt-kanban-background-grid-lt { 158 | .kanban-plugin__board { 159 | background-image: linear-gradient(to right, hsla(var(--background-secondary-hsl), 90%) 1px, transparent 1px), linear-gradient(to bottom, hsla(var(--background-secondary-hsl), 90%) 1px, transparent 1px); 160 | background-attachment: local; 161 | background-size: 8px 8px; 162 | } 163 | } 164 | 165 | .theme-dark.pt-kanban-background-grid-dt { 166 | .kanban-plugin__board { 167 | background-image: linear-gradient(to right, hsla(var(--background-secondary-hsl), 90%) 1px, transparent 1px), linear-gradient(to bottom, hsla(var(--background-secondary-hsl), 90%) 1px, transparent 1px); 168 | background-attachment: local; 169 | background-size: 8px 8px; 170 | } 171 | } -------------------------------------------------------------------------------- /src/scss/Plugins/Community/mapView.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Community] Map View 2 | .workspace-leaf-content[data-type="map"] { 3 | .leaflet-container, 4 | .map-view-graph-controls { 5 | .theme-light & { 6 | background-color: var(--background-primary) !important; 7 | } 8 | 9 | .theme-dark & { 10 | background-color: var(--background-secondary-alt) !important; 11 | } 12 | } 13 | 14 | .leaflet-control:not(.leaflet-control-attribution) { 15 | padding: var(--size-4-1); 16 | background: var(--background-secondary-blur); 17 | -webkit-backdrop-filter: blur(var(--blur-intensity)); 18 | backdrop-filter: blur(var(--blur-intensity)); 19 | border: 1px solid var(--window-border-color); 20 | border-radius: var(--radius-m); 21 | } 22 | 23 | .leaflet-control-zoom, 24 | .leaflet-bar.leaflet-control { 25 | a:hover { 26 | color: var(--highlight-text-normal); 27 | background-color: var(--background-modifier-hover); 28 | border-radius: var(--radius-s); 29 | } 30 | } 31 | 32 | .leaflet-bar a { 33 | color: var(--text-muted); 34 | background-color: unset; 35 | border-bottom: unset; 36 | } 37 | 38 | .leaflet-control-attribution { 39 | padding: var(--size-2-1) var(--size-4-1); 40 | color: var(--text-muted); 41 | background: var(--background-secondary-blur); 42 | border-top: var(--window-border); 43 | border-left: var(--window-border); 44 | -webkit-backdrop-filter: blur(var(--blur-intensity)); 45 | backdrop-filter: blur(var(--blur-intensity)); 46 | 47 | a { 48 | color: var(--interactive-accent-text); 49 | 50 | &:hover { 51 | color: var(--text-accent-hover); 52 | } 53 | } 54 | } 55 | 56 | .map-view-graph-controls { 57 | padding: unset; 58 | border: 1px solid var(--window-border-color); 59 | border-radius: var(--radius-m); 60 | overflow-y: hidden; 61 | } 62 | 63 | .graph-control-div { 64 | // display: flex; 65 | // flex-direction: column; 66 | // white-space: nowrap; 67 | position: relative; 68 | padding-bottom: unset; 69 | margin-bottom: -1px; 70 | 71 | &:first-of-type .graph-control-content { 72 | padding: var(--size-4-1); 73 | } 74 | 75 | &:not(:first-of-type) .graph-control-content { 76 | padding: var(--size-4-2); 77 | 78 | > *:not(:last-child) { 79 | display: inline-block; 80 | margin-right: 8px; 81 | margin-bottom: 8px; 82 | } 83 | } 84 | } 85 | 86 | // Replaces the dropdown icon with one that matches others in Obsidian. Overlaps the toggle and isn't clickable anymore since the toggle spans the whole width and the click function does the same thing. 87 | .lbl-triangle { 88 | position: absolute; 89 | content: ''; 90 | width: 15px; 91 | height: 15px; 92 | top: var(--size-2-3); 93 | left: var(--size-2-3); 94 | background-color: var(--text-muted); 95 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-right'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E"); 96 | mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-right'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E"); 97 | -webkit-mask-size: 15px; 98 | -webkit-mask-position: center; 99 | -webkit-mask-repeat: no-repeat; 100 | margin-right: var(--size-4-1); 101 | pointer-events: none; 102 | } 103 | 104 | .lbl-toggle { 105 | padding: var(--size-4-1) var(--size-4-2) var(--size-4-1) var(--size-4-6); 106 | display: inline-block; 107 | width: 100%; 108 | border-bottom: var(--window-border); 109 | background-color: var(--background-secondary); 110 | 111 | &:hover { 112 | color: var(--nav-item-color-hover); 113 | background-color: var(--nav-item-background-hover); 114 | font-weight: var(--nav-item-weight-hover); 115 | 116 | &::before { 117 | background-color: var(--nav-item-color-hover); 118 | } 119 | 120 | } 121 | } 122 | 123 | .graph-control-div:not(:first-of-type) .lbl-toggle { 124 | border-top: var(--window-border); 125 | } 126 | 127 | .controls-toggle:checked + .lbl-toggle::before { 128 | transform: rotate(90deg); 129 | top: 0px; 130 | } 131 | 132 | .search-input-container { 133 | display: flex; 134 | } 135 | 136 | .graph-control-follow-div { 137 | display: flex; 138 | align-items: center; 139 | } 140 | 141 | 142 | .leaflet-popup-content-wrapper, 143 | .leaflet-popup-tip { 144 | color: var(--text-normal); 145 | background-color: var(--background-secondary); 146 | border-radius: var(--radius-m); 147 | box-shadow: var(--shadow-s); 148 | } 149 | } -------------------------------------------------------------------------------- /src/scss/Plugins/Community/noteToolbar.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Community] Note Toolbar 2 | body { 3 | --cg-nt-tbar-top-sticky-pos-desktop: calc(calc(var(--header-height) - 8px) * -1); 4 | 5 | &.theme-dark { 6 | --cg-nt-tbar-bg-color: var(--background-secondary); 7 | } 8 | } 9 | 10 | .callout[data-callout="note-toolbar"] { 11 | &[data-callout-metadata*="button"] ul { 12 | &a, 13 | span.external-link { 14 | border: var(--window-border); 15 | } 16 | } 17 | } -------------------------------------------------------------------------------- /src/scss/Plugins/Community/quickExplorer.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Community] Quick Explorer 2 | .status-bar-item.left-region { 3 | padding: unset; 4 | } 5 | 6 | #quick-explorer { 7 | padding: 0 var(--size-4-2); 8 | } 9 | 10 | body.is-frameless.is-hidden-frameless:not(.qe-hide-breadcrumbs) .status-bar, 11 | body:not(.is-frameless):not(.qe-hide-breadcrumbs) .status-bar { 12 | position: var(--status-bar-position); 13 | } 14 | 15 | #quick-explorer .explorable.selected, 16 | #quick-explorer .explorable:hover, 17 | .qe-popup-menu .menu-item:not(.is-disabled):not(.is-label).selected { 18 | background-color: var(--background-modifier-hover); 19 | } 20 | 21 | .view-header-breadcrumb.is-exploring, 22 | .view-header-title-parent.is-exploring::before { 23 | color: var(--highlight-accent-text); 24 | } 25 | 26 | .view-header-title-parent::before { 27 | display: none; 28 | } -------------------------------------------------------------------------------- /src/scss/Plugins/Community/quietOutline.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Community] Quiet Outline 2 | .workspace-leaf-content[data-type="quiet-outline"] { 3 | .view-content { 4 | padding: unset; 5 | } 6 | 7 | .function-bar { 8 | height: var(--header-height); 9 | padding: var(--size-4-1) var(--size-4-2); 10 | margin-bottom: unset; 11 | background-color: var(--background-secondary); 12 | } 13 | 14 | .n-button { 15 | width: 32px; 16 | height: 32px; 17 | background-color: unset; 18 | border-radius: var(--radius-m); 19 | 20 | &:hover { 21 | background-color: var(--interactive-accent-base); 22 | 23 | .n-button__icon svg { 24 | color: var(--interactive-accent-text) !important; 25 | } 26 | } 27 | 28 | .n-button__icon { 29 | svg { 30 | display: flex; 31 | align-items: center; 32 | justify-content: center; 33 | color: var(--text-muted) !important; 34 | } 35 | } 36 | 37 | .n-button__border, 38 | .n-button__state-border { 39 | display: none; 40 | } 41 | } 42 | 43 | .n-input { 44 | height: 32px; 45 | border-radius: var(--radius-s); 46 | 47 | .theme-light & { 48 | background: var(--background-primary); 49 | } 50 | 51 | .theme-dark & { 52 | background: var(--background-secondary-alt); 53 | } 54 | 55 | .n-input__border { 56 | border: 1px solid var(--window-border-color); 57 | } 58 | 59 | &:not(.n-input--disabled):hover .n-input__state-border, 60 | &:not(.n-input--disabled).n-input--focus .n-input__state-border { 61 | border: 1px solid var(--interactive-accent-tint); 62 | box-shadow: unset; 63 | } 64 | 65 | .n-input__placeholder { 66 | display: none; 67 | } 68 | 69 | .n-input__input input { 70 | caret-color: var(--interactive-accent-text); 71 | 72 | &::placeholder { 73 | color: var(--text-faint); 74 | } 75 | } 76 | 77 | .n-input__input-el { 78 | height: 32px; 79 | } 80 | } 81 | 82 | .n-slider { 83 | padding: var(--size-4-4); 84 | margin: unset !important; 85 | background-color: var(--background-secondary); 86 | border-bottom: var(--window-border); 87 | 88 | .n-slider-rail { 89 | background-color: var(--background-secondary); 90 | border: 1px solid var(--window-border-color); 91 | 92 | .n-slider-rail__fill { 93 | background-color: var(--interactive-accent-tint); 94 | } 95 | } 96 | 97 | .n-slider-dots .n-slider-dot { 98 | background-color: var(--background-primary); 99 | border: 2px solid var(--window-border-color); 100 | 101 | &:hover { 102 | background-color: var(--interactive-accent-base); 103 | border-color: var(--interactive-accent-text); 104 | } 105 | 106 | &.n-slider-dot--active { 107 | border: 2px solid var(--interactive-accent-text); 108 | } 109 | } 110 | 111 | .n-slider-handles .n-slider-handle { 112 | background-color: var(--background-primary); 113 | border: 2px solid var(--interactive-accent-tint); 114 | } 115 | } 116 | } 117 | 118 | .n-slider-handle-indicator { 119 | border: var(--window-border); 120 | border-radius: var(--radius-m); 121 | 122 | .theme-light & { 123 | background: var(--background-primary); 124 | } 125 | 126 | .theme-dark & { 127 | background: var(--background-secondary-alt); 128 | } 129 | } 130 | 131 | .quiet-outline { 132 | padding-bottom: unset; 133 | 134 | .n-tree-node-indent { 135 | flex: 0 0 12px !important; 136 | } 137 | 138 | .n-tree.n-tree--block-line .n-tree-node:not(.n-tree-node--disabled):hover { 139 | background-color: var(--background-modifier-hover); 140 | 141 | p { 142 | color: var(--highlight-text-normal); 143 | } 144 | } 145 | 146 | .n-tree { 147 | padding: var(--size-4-1); 148 | 149 | .n-tree-node.n-tree-node--highlight .n-tree-node-content .n-tree-node-content__text { 150 | border-bottom: unset; 151 | } 152 | } 153 | 154 | .level-2 .n-tree-node-indent, 155 | .level-3 .n-tree-node-indent:first-child, 156 | .level-4 .n-tree-node-indent:first-child, 157 | .level-5 .n-tree-node-indent:first-child, 158 | .level-6 .n-tree-node-indent:first-child { 159 | border-right: 1px solid var(--color-orange-tint); 160 | } 161 | 162 | .level-3 .n-tree-node-indent, 163 | .level-4 .n-tree-node-indent:nth-child(2), 164 | .level-5 .n-tree-node-indent:nth-child(2), 165 | .level-6 .n-tree-node-indent:nth-child(2) { 166 | border-right: 1px solid var(--color-yellow-tint); 167 | } 168 | 169 | .level-4 .n-tree-node-indent, 170 | .level-5 .n-tree-node-indent:nth-child(3), 171 | .level-6 .n-tree-node-indent:nth-child(3) { 172 | border-right: 1px solid var(--color-green-tint); 173 | } 174 | 175 | .level-5 .n-tree-node-indent, 176 | .level-6 .n-tree-node-indent:nth-child(4) { 177 | border-right: 1px solid var(--color-blue-tint); 178 | } 179 | 180 | .level-6 .n-tree-node-indent { 181 | border-right: 1px solid var(--color-purple-tint); 182 | } 183 | 184 | code { 185 | padding: 0 var(--size-4-1); 186 | border: 1px solid var(--window-border-color); 187 | border-radius: var(--radius-s); 188 | } 189 | } 190 | -------------------------------------------------------------------------------- /src/scss/Plugins/Community/recentFiles.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Community] Recent Files 2 | .workspace-leaf-content[data-type="recent-files"] { 3 | .view-content { 4 | padding: unset; 5 | } 6 | 7 | .nav-folder.mod-root { 8 | padding: var(--size-4-1); 9 | 10 | .theme-light & { 11 | background-color: var(--background-primary); 12 | } 13 | 14 | .theme-dark & { 15 | background-color: var(--background-secondary-alt); 16 | } 17 | } 18 | } -------------------------------------------------------------------------------- /src/scss/Plugins/Community/settingsSearch.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Community] Settings Search 2 | .settings-search-container { 3 | .vertical-tab-header-group-items { 4 | padding: unset; 5 | background-color: var(--background-secondary); 6 | } 7 | 8 | .settings-search-input { 9 | padding: unset; 10 | margin: var(--size-4-1); 11 | 12 | .is-mobile.is-phone & { 13 | padding: unset; 14 | margin: var(--size-4-1) 0; 15 | } 16 | } 17 | 18 | .search-input-container::before { 19 | top: calc((var(--input-height) - var(--search-icon-size))/2); 20 | left: var(--size-4-3); 21 | } 22 | 23 | .vertical-tab-nav-item { 24 | border: unset; 25 | } 26 | } 27 | 28 | body.is-mobile.is-phone .search-input-container::before { 29 | top: calc((var(--input-height) - var(--search-icon-size))/2); 30 | left: var(--size-4-3); 31 | } -------------------------------------------------------------------------------- /src/scss/Plugins/Community/styleSettings.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Community] Style Settings Base 2 | div.workspace-leaf-content[data-type="style-settings"] { 3 | div.view-content { 4 | padding: var(--file-margins); 5 | padding-bottom: calc(48px + var(--scroll-bar-size)); 6 | } 7 | 8 | .view-content .style-settings-container .setting-item:not(.setting-item-heading) { 9 | body:not(.is-phone) & { 10 | flex-direction: row; 11 | } 12 | } 13 | } 14 | 15 | .setting-item.setting-item-heading.style-settings-heading { 16 | padding: var(--size-4-2); 17 | 18 | &:hover { 19 | background-color: var(--interactive-accent-base); 20 | border-radius: var(--radius-m); 21 | 22 | .setting-item-name { 23 | color: var(--interactive-accent-text) !important; 24 | } 25 | } 26 | } 27 | 28 | .style-settings-container { 29 | padding-bottom: unset; 30 | 31 | .setting-item { 32 | padding: var(--size-4-2) var(--size-4-2) var(--size-4-2) var(--size-4-4); 33 | 34 | .is-phone & { 35 | margin-top: unset; 36 | } 37 | } 38 | } 39 | 40 | .style-settings-heading[data-level="0"] + .style-settings-container .style-settings-collapse-indicator { 41 | margin-left: unset; 42 | } 43 | 44 | :is(.setting-item.setting-item-heading.style-settings-heading, .style-settings-container .style-settings-heading) { 45 | border-bottom: unset; 46 | } 47 | 48 | .setting-item-heading .setting-item-description { 49 | padding-left: var(--size-4-4); 50 | } 51 | 52 | .setting-item.setting-item-heading.is-collapsed { 53 | margin-bottom: unset; 54 | } 55 | 56 | .style-settings-container > .setting-item:last-of-type { 57 | padding-bottom: unset; 58 | margin-bottom: var(--size-4-2); 59 | } 60 | 61 | // Vertical lines 62 | :is(.style-settings-heading[data-level="0"] + .style-settings-container, .style-settings-container) { 63 | padding-left: var(--size-4-1); 64 | margin-left: var(--size-4-3); 65 | border-left: 1px solid var(--window-border-color); 66 | } 67 | 68 | // [Plugins - Community] Style Settings Header Icons 69 | .setting-item[data-id="prism-theme"] { 70 | display: none; 71 | } 72 | 73 | .setting-item.style-settings-heading[data-id="appearance"] .style-settings-collapse-indicator::after { 74 | margin-left: var(--size-4-2); 75 | content: "🎨"; 76 | } 77 | 78 | .setting-item.style-settings-heading[data-id="editor"] .style-settings-collapse-indicator::after { 79 | margin-left: var(--size-4-2); 80 | content: "📝"; 81 | } 82 | 83 | .setting-item.style-settings-heading[data-id="user-interface"] .style-settings-collapse-indicator::after { 84 | margin-left: var(--size-4-2); 85 | content: "👆"; 86 | } 87 | 88 | .setting-item.style-settings-heading[data-id="plugins"] .style-settings-collapse-indicator::after { 89 | margin-left: var(--size-4-2); 90 | content: "🧩"; 91 | } 92 | 93 | .setting-item.style-settings-heading[data-id="feature-toggles"] { 94 | margin-bottom: var(--size-4-2); 95 | 96 | .style-settings-collapse-indicator::after { 97 | margin-left: var(--size-4-2); 98 | content: "🪠"; 99 | } 100 | } 101 | 102 | .setting-item.style-settings-heading[data-id="theme-info"], 103 | .style-settings-heading[data-id="support"] { 104 | margin-bottom: 0; 105 | pointer-events: none; 106 | 107 | :is(.setting-item-control, .style-settings-collapse-indicator) { 108 | display: none; 109 | } 110 | 111 | .setting-item-name::before { 112 | display: inline-block; 113 | width: 20px; 114 | height: fit-content; 115 | padding-right: 8px; 116 | font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "EmojiOne Color", "Android Emoji", sans-serif; 117 | font-weight: initial; 118 | color: unset; 119 | } 120 | 121 | .setting-item-description { 122 | padding-left: var(--size-4-1); 123 | } 124 | } 125 | 126 | .setting-item.style-settings-heading[data-id="theme-info"] { 127 | padding-top: var(--size-4-4); 128 | border-top: 2px solid var(--window-border-color); 129 | 130 | .setting-item-name::before { 131 | content: "📖"; 132 | } 133 | } 134 | 135 | .style-settings-heading[data-id="support"] .setting-item-name::before { 136 | content: "❤️"; 137 | } 138 | 139 | .setting-item.style-settings-info-text[data-id="theme-info-buttons"], 140 | .setting-item.style-settings-info-text[data-id="support-buttons"] { 141 | padding: 0 var(--size-4-2) var(--size-4-2) var(--size-4-4); 142 | 143 | .setting-item-name, 144 | .setting-item-control { 145 | display: none; 146 | } 147 | 148 | .setting-item-description.style-settings-markdown { 149 | display: flex; 150 | flex-wrap: wrap; 151 | gap: var(--size-4-2); 152 | } 153 | 154 | .styleSettingsButtonEmoji { 155 | margin-right: var(--size-4-1); 156 | font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "EmojiOne Color", "Android Emoji", sans-serif; 157 | } 158 | } 159 | 160 | .styleSettingsButton { 161 | display: flex; 162 | align-items: center; 163 | justify-content: center; 164 | width: fit-content; 165 | font-size: var(--font-ui-medium); 166 | font-weight: var(--input-font-weight); 167 | border: var(--accent-border-width) solid; 168 | border-radius: var(--radius-s); 169 | 170 | a { 171 | width: 100%; 172 | height: 100%; 173 | padding: var(--size-4-1) var(--size-4-3) var(--size-4-1) var(--size-4-2); 174 | text-decoration-line: unset; 175 | vertical-align: baseline; 176 | } 177 | 178 | &.prism-wiki { 179 | background-color: var(--color-blue-base); 180 | border-color: var(--color-blue-tint); 181 | 182 | a { 183 | color: var(--color-blue-text); 184 | 185 | &:hover { 186 | color: var(--color-blue-tint); 187 | } 188 | } 189 | } 190 | 191 | &.prism-releases { 192 | background-color: var(--color-orange-base); 193 | border-color: var(--color-orange-tint); 194 | 195 | a { 196 | color: var(--color-orange-text); 197 | 198 | &:hover { 199 | color: var(--color-orange-tint); 200 | } 201 | } 202 | } 203 | 204 | &.prism-star { 205 | background-color: var(--color-grey-base); 206 | border-color: var(--color-grey-tint); 207 | 208 | a { 209 | color: var(--color-grey-text); 210 | 211 | &:hover { 212 | color: var(--color-grey-tint); 213 | } 214 | } 215 | } 216 | 217 | &.prism-issue { 218 | background-color: var(--color-red-base); 219 | border-color: var(--color-red-tint); 220 | 221 | a { 222 | color: var(--color-red-text); 223 | 224 | &:hover { 225 | color: var(--color-red-tint); 226 | } 227 | } 228 | } 229 | 230 | &.prism-coffee { 231 | background-color: var(--color-yellow-base); 232 | border-color: var(--color-yellow-tint); 233 | 234 | a { 235 | color: var(--color-yellow-text); 236 | 237 | &:hover { 238 | color: var(--color-yellow-tint); 239 | } 240 | } 241 | } 242 | } 243 | -------------------------------------------------------------------------------- /src/scss/Plugins/Community/tagFolder.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Community] Tag Folder 2 | .workspace-leaf-content[data-type="tagfolder-view"] { 3 | .nav-files-container { 4 | padding: unset; 5 | } 6 | 7 | .nav-folder.mod-root { 8 | > .nav-folder-title { 9 | align-items: center; 10 | justify-content: center; 11 | height: var(--header-height); 12 | padding: 0 var(--size-4-2); 13 | background-color: var(--background-secondary); 14 | border-bottom: var(--window-border); 15 | border-radius: unset; 16 | } 17 | 18 | > .tree-item-children { 19 | padding: var(--size-4-1); 20 | } 21 | } 22 | 23 | .tagfolder-quantity .itemscount, 24 | .nav-folder-title.svelte-m9l3qf:hover .tagfolder-quantity span.svelte-m9l3qf, 25 | .nav-file-title.svelte-m9l3qf:hover .taglist .tags.svelte-m9l3qf { 26 | font-size: var(--font-ui-smaller); 27 | color: var(--text-faint); 28 | background-color: unset; 29 | } 30 | 31 | .search-input-container { 32 | position: sticky; 33 | top: 0; 34 | z-index: var(--layer-popover); 35 | display: flex; 36 | background-color: var(--background-secondary); 37 | border-bottom: var(--window-border); 38 | } 39 | 40 | .nav-folder-title-content:hover div.tagfolder-quantity span { 41 | background-color: unset; 42 | } 43 | } -------------------------------------------------------------------------------- /src/scss/Plugins/Core/PDFViewer.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Core] PDF Viewer 2 | .pdf-toolbar { 3 | padding: var(--size-4-1) var(--size-4-2); 4 | background-color: var(--background-secondary); 5 | border-bottom: var(--window-border); 6 | } 7 | 8 | .pdf-viewer { 9 | display: flex; 10 | flex-direction: column; 11 | gap: var(--size-4-4); 12 | margin-top: var(--size-4-4); 13 | margin-bottom: var(--size-4-4); 14 | 15 | .page { 16 | overflow: hidden; 17 | border: 1px solid var(--window-border-color); 18 | border-radius: var(--radius-m); 19 | } 20 | } 21 | 22 | .pdf-sidebar-container { 23 | border-right: var(--window-border); 24 | 25 | .pdf-thumbnail-view { 26 | gap: var(--size-4-2); 27 | padding: var(--size-4-2); 28 | } 29 | 30 | .thumbnailSelectionRing { 31 | display: flex; 32 | padding: unset; 33 | border: var(--window-border); 34 | } 35 | 36 | .thumbnail { 37 | padding: var(--size-4-1); 38 | border: 2px solid transparent; 39 | border-radius: var(--radius-s); 40 | 41 | // Page counter 42 | &::after { 43 | right: var(--size-4-3); 44 | bottom: var(--size-4-3); 45 | z-index: 99; 46 | border: 1px solid var(--window-border-color); 47 | } 48 | 49 | // Cutout around the page to prevent issues when using the filter 50 | &::before { 51 | position: absolute; 52 | inset: 0; 53 | z-index: -1; 54 | padding: 5px; 55 | content: ""; 56 | background: transparent; 57 | -webkit-mask: linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0); 58 | mask: linear-gradient(#FFF 0 0) content-box, linear-gradient(#FFF 0 0); 59 | -webkit-mask-composite: xor; 60 | mask-composite: exclude; 61 | } 62 | 63 | &:hover { 64 | border-color: var(--interactive-accent-base); 65 | 66 | &::before { 67 | background: var(--interactive-accent-base); 68 | } 69 | 70 | &::after { 71 | color: var(--highlight-text-normal); 72 | } 73 | 74 | > .thumbnailSelectionRing { 75 | background-color: unset; 76 | } 77 | } 78 | 79 | &.selected { 80 | border-color: var(--interactive-accent-tint); 81 | 82 | &::before { 83 | background: var(--interactive-accent-base); 84 | } 85 | 86 | &::after { 87 | color: var(--interactive-accent-text); 88 | } 89 | 90 | &:hover { 91 | &::before { 92 | background: var(--background-modifier-hover); 93 | } 94 | } 95 | 96 | > .thumbnailSelectionRing { 97 | background-color: unset; 98 | } 99 | } 100 | } 101 | } 102 | 103 | .pdf-toolbar-left .clickable-icon[aria-label="Toggle sidebar"] { 104 | border: 2px solid transparent; 105 | } 106 | 107 | .pdf-outline-view .tree-item-self:not(.mod-collapsible) { 108 | padding-left: var(--size-4-1); 109 | } 110 | 111 | .pdf-findbar-settings { 112 | background-color: var(--background-secondary); 113 | } 114 | 115 | .annotationLayer .linkAnnotation > a:hover, 116 | .annotationLayer .buttonWidgetAnnotation.pushButton > a:hover { 117 | background: var(--interactive-accent-tint); 118 | box-shadow: unset; 119 | opacity: 0.4; 120 | } 121 | 122 | // https://mwichary.medium.com/dark-theme-in-a-day-3518dde2955a 123 | .pt-pdf-dark-theme.theme-dark { 124 | .pdf-viewer .canvasWrapper, 125 | .pdf-sidebar-container img.thumbnailImage { 126 | filter: invert(1) hue-rotate(180deg) saturate(100%); 127 | mix-blend-mode: screen; 128 | } 129 | } -------------------------------------------------------------------------------- /src/scss/Plugins/Core/audio.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Core] Audio 2 | audio::-webkit-media-controls-panel { 3 | background-color: var(--background-secondary); 4 | border-radius: var(--radius-s); 5 | } 6 | 7 | audio::-webkit-media-controls-mute-button:hover, 8 | audio::-webkit-media-controls-play-button:hover { 9 | background-color: var(--interactive-accent-base); 10 | border-radius: var(--radius-s); 11 | opacity: 1; 12 | } 13 | 14 | audio::-webkit-media-controls-volume-slider { 15 | padding-right: var(--size-4-2); 16 | } 17 | 18 | audio::-webkit-media-controls-current-time-display { 19 | margin-left: var(--size-4-3); 20 | font-family: var(--font-interface); 21 | color: var(--text-normal); 22 | } 23 | 24 | audio::-webkit-media-controls-time-remaining-display { 25 | font-family: var(--font-interface); 26 | color: var(--text-normal); 27 | } -------------------------------------------------------------------------------- /src/scss/Plugins/Core/bookmarks.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Core] Bookmarks 2 | .workspace-leaf-content[data-type="bookmarks"] { 3 | .tree-item-icon { 4 | width: 20px; 5 | padding-right: var(--size-4-1); 6 | } 7 | 8 | .view-content { 9 | padding: var(--size-4-1); 10 | } 11 | } 12 | 13 | body:not(.is-grabbing) .workspace-leaf-content[data-type="bookmarks"] .tree-item-self.is-active { 14 | .tree-item-icon { 15 | color: var(--interactive-accent-text); 16 | } 17 | 18 | &:hover { 19 | color: var(--interactive-accent-hover); 20 | } 21 | 22 | &.is-clickable:hover svg { 23 | color: var(--interactive-accent-hover); 24 | } 25 | } -------------------------------------------------------------------------------- /src/scss/Plugins/Core/commandPalette.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Core] Command Palette 2 | .modal-container .prompt { 3 | border: 1px solid var(--window-border-color); 4 | 5 | .prompt-results { 6 | padding: var(--size-4-2); 7 | 8 | .theme-light & { 9 | background-color: var(--background-primary); 10 | } 11 | 12 | .theme-dark & { 13 | background-color: var(--background-secondary-alt); 14 | } 15 | 16 | &::-webkit-scrollbar-track { 17 | margin-left: var(--window-border); 18 | border-radius: unset; 19 | 20 | .theme-light & { 21 | background-color: var(--background-primary); 22 | } 23 | 24 | .theme-dark & { 25 | background-color: var(--background-secondary-alt); 26 | } 27 | } 28 | } 29 | 30 | .prompt-instructions { 31 | background-color: var(--background-secondary); 32 | border-top: var(--window-border); 33 | } 34 | } 35 | 36 | .suggestion-item.mod-complex .suggestion-hotkey { 37 | margin-left: var(--size-4-2); 38 | font-weight: 600; 39 | border-radius: var(--radius-s); 40 | } 41 | 42 | .prompt-input-container { 43 | padding: var(--size-4-2); 44 | margin: unset; 45 | background-color: var(--background-secondary); 46 | border-bottom: var(--window-border); 47 | } 48 | 49 | input.prompt-input { 50 | height: 40px; 51 | padding: 0 var(--size-4-4); 52 | border: 1px solid var(--window-border-color); 53 | border-radius: var(--radius-s); 54 | 55 | .theme-light & { 56 | background-color: var(--background-primary); 57 | } 58 | 59 | .theme-dark & { 60 | background-color: var(--background-secondary-alt); 61 | } 62 | 63 | &:hover, 64 | &:focus, 65 | &:focus-visible { 66 | border: 1px solid var(--window-border-color); 67 | } 68 | } -------------------------------------------------------------------------------- /src/scss/Plugins/Core/fileExplorer.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Core] File Explorer 2 | .workspace-leaf-content[data-type="file-explorer"] { 3 | .nav-files-container { 4 | padding-top: var(--size-4-1); 5 | padding-right: var(--size-4-1); 6 | padding-bottom: unset; 7 | padding-left: var(--size-4-1); 8 | margin-left: var(--size-4-1); 9 | } 10 | 11 | .nav-folder.mod-root > .nav-folder-children { 12 | padding: var(--size-4-1); 13 | } 14 | } 15 | 16 | .tree-item-children:empty { 17 | display: none; 18 | } 19 | 20 | .tree-item-self { 21 | padding-inline-start: none !important; 22 | margin-inline-start: none !important; 23 | border: 2px solid transparent; 24 | } 25 | 26 | .nav-file-tag { 27 | height: 15px; 28 | background-color: var(--background-secondary); 29 | border: 1px solid var(--window-border-color); 30 | } 31 | 32 | .nav-folder:not(.is-collapsed) > .nav-folder-title { 33 | color: var(--text-normal); 34 | } 35 | 36 | body:not(.is-grabbing) { 37 | .nav-folder-title:hover .collapse-icon svg.svg-icon { 38 | color: var(--nav-item-color-hover); 39 | } 40 | 41 | .item-list .nav-file-title:hover .nav-file-icon { 42 | color: var(--interactive-accent-text); 43 | } 44 | 45 | .nav-file-title.is-active:hover, 46 | .nav-folder-title.is-active:hover { 47 | color: var(--interactive-accent-hover); 48 | } 49 | } 50 | 51 | .mod-active .workspace-tab-header.is-active:hover { 52 | .workspace-tab-header-inner-icon, 53 | .workspace-tab-header-inner-title { 54 | color: var(--interactive-accent-hover); 55 | } 56 | } 57 | 58 | .workspace-leaf.mod-active { 59 | .nav-folder.has-focus > .nav-folder-title { 60 | background-color: var(--interactive-accent-base); 61 | border: var(--accent-border-width) solid transparent; 62 | border-radius: var(--radius-s); 63 | } 64 | 65 | .nav-file.has-focus { 66 | background-color: var(--interactive-accent-base); 67 | border: unset; 68 | border-radius: var(--radius-s); 69 | } 70 | } 71 | 72 | body:not(.is-grabbing) .nav-file-title.is-being-dragged, 73 | body:not(.is-grabbing) .nav-folder-title.is-being-dragged, 74 | .nav-file-title.is-being-dragged, 75 | .nav-folder-title.is-being-dragged { 76 | color: var(--highlight-text-normal); 77 | background-color: var(--interactive-accent-base); 78 | } 79 | 80 | // Style Setting for Folder Icons instead of dropdown icon 81 | .pt-file-explorer-folder-icon { 82 | .nav-folder:not(.is-collapsed) .collapse-icon svg.svg-icon { 83 | display: inline-flex; 84 | width: 17px; 85 | height: -webkit-fill-available; 86 | height: fill-available; 87 | content: " "; 88 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 14 1.45-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.55 6a2 2 0 0 1-1.94 1.5H4a2 2 0 0 1-2-2V5c0-1.1.9-2 2-2h3.93a2 2 0 0 1 1.66.9l.82 1.2a2 2 0 0 0 1.66.9H18a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3C/svg%3E"); 89 | -webkit-mask-repeat: no-repeat; 90 | -webkit-mask-position: center; 91 | -webkit-mask-size: 17px; 92 | stroke-width: unset; 93 | } 94 | 95 | &.pt-file-explorer-folder-icon-default .nav-folder:not(.is-collapsed) .collapse-icon svg.svg-icon { 96 | background-color: var(--text-muted); 97 | } 98 | 99 | &.pt-file-explorer-folder-icon-active .nav-folder:not(.is-collapsed) .collapse-icon svg.svg-icon, 100 | &.pt-file-explorer-folder-icon-accent .nav-folder:not(.is-collapsed) .collapse-icon svg.svg-icon { 101 | background-color: var(--interactive-accent-text); 102 | } 103 | 104 | .nav-folder.is-collapsed .collapse-icon svg.svg-icon { 105 | display: inline-flex; 106 | width: 17px; 107 | height: -webkit-fill-available; 108 | height: fill-available; 109 | content: " "; 110 | -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2Z'%3E%3C/path%3E%3C/svg%3E"); 111 | -webkit-mask-repeat: no-repeat; 112 | -webkit-mask-position: center; 113 | -webkit-mask-size: 17px; 114 | stroke-width: unset; 115 | transform: rotate(0); 116 | } 117 | 118 | &.pt-file-explorer-folder-icon-active, 119 | &.pt-file-explorer-folder-icon-default { 120 | .nav-folder.is-collapsed { 121 | .collapse-icon svg.svg-icon { 122 | background-color: var(--text-muted); 123 | } 124 | 125 | &:hover .collapse-icon svg.svg-icon { 126 | background-color: var(--interactive-accent-text); 127 | } 128 | } 129 | } 130 | 131 | &.pt-file-explorer-folder-icon-accent .nav-folder.is-collapsed .collapse-icon svg.svg-icon { 132 | background-color: var(--interactive-accent-text); 133 | } 134 | } -------------------------------------------------------------------------------- /src/scss/Plugins/Core/graph.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Core] Graph Base 2 | .graph-controls-button.mod-close { 3 | top: 0; 4 | right: var(--size-4-1); 5 | padding: var(--size-2-1); 6 | } 7 | 8 | .graph-controls-button.mod-reset { 9 | top: 0; 10 | right: var(--size-4-8); 11 | padding: var(--size-2-1); 12 | } 13 | 14 | .workspace-leaf-content[data-type="graph"] .view-content, 15 | .workspace-leaf-content[data-type="localgraph"] .view-content, 16 | .graph-controls { 17 | .theme-light & { 18 | background-color: var(--background-primary); 19 | } 20 | 21 | .theme-dark & { 22 | background-color: var(--background-secondary-alt); 23 | } 24 | } 25 | 26 | .graph-controls { 27 | // Replaces set width with min width so that when everything is collapsed it can take less space 28 | width: unset; 29 | min-width: var(--graph-controls-width); 30 | 31 | &.is-close { 32 | padding: var(--size-4-1); 33 | background: var(--background-secondary-blur); 34 | -webkit-backdrop-filter: blur(var(--blur-intensity)); 35 | backdrop-filter: blur(var(--blur-intensity)); 36 | border: 1px solid var(--window-border-color); 37 | } 38 | 39 | .tree-item-self { 40 | padding-left: var(--size-4-6); 41 | margin-bottom: -1px; 42 | background-color: var(--background-secondary); 43 | border-bottom: 1px solid var(--window-border-color); 44 | border-radius: unset; 45 | } 46 | } 47 | 48 | .graph-control-section { 49 | padding: unset; 50 | 51 | &:last-child .tree-item-children { 52 | padding-bottom: var(--size-4-2); 53 | } 54 | 55 | > .tree-item-self:hover { 56 | background-color: var(--background-modifier-hover); 57 | * { 58 | color: var(--highlight-text-normal); 59 | } 60 | } 61 | 62 | .tree-item-children { 63 | padding: var(--size-4-2); 64 | } 65 | 66 | .setting-item:not(.mod-search-setting) { 67 | padding: var(--size-2-3) var(--size-4-2); 68 | } 69 | } 70 | 71 | :is(.graph-view.color-fill-unresolved, .graph-view.color-arrow) { 72 | opacity: 1; 73 | } 74 | 75 | // [Plugins - Core] Graph LT 76 | .theme-light { 77 | .graph-view.color-line { 78 | opacity: var(--graph-line-opacity-lt); 79 | } 80 | 81 | .graph-view.color-fill { 82 | opacity: var(--graph-fill-opacity-lt); 83 | } 84 | 85 | .graph-view.color-fill-focused { 86 | opacity: var(--graph-fill-focused-opacity-lt); 87 | } 88 | 89 | .graph-view.color-fill-tag { 90 | opacity: var(--graph-tag-opacity-lt); 91 | } 92 | 93 | .graph-view.color-fill-attachment { 94 | opacity: var(--graph-attachment-opacity-lt); 95 | } 96 | 97 | .graph-view.color-fill-unresolved { 98 | opacity: var(--graph-unresolved-opacity-lt); 99 | } 100 | 101 | .graph-view.color-fill-highlight { 102 | color: var(--graph-highlight-color-lt); 103 | opacity: var(--graph-highlight-opacity-lt); 104 | } 105 | 106 | .graph-view.color-line-highlight { 107 | color: var(--graph-highlight-line-color-lt); 108 | opacity: var(--graph-highlight-line-opacity-lt); 109 | } 110 | } 111 | 112 | // [Plugins - Core] Graph DT 113 | .theme-dark { 114 | .graph-view.color-line { 115 | opacity: var(--graph-line-opacity-dt); 116 | } 117 | 118 | .graph-view.color-fill { 119 | opacity: var(--graph-fill-opacity-dt); 120 | } 121 | 122 | .graph-view.color-fill-focused { 123 | opacity: var(--graph-fill-focused-opacity-dt); 124 | } 125 | 126 | .graph-view.color-fill-tag { 127 | opacity: var(--graph-tag-opacity-dt); 128 | } 129 | 130 | .graph-view.color-fill-attachment { 131 | opacity: var(--graph-attachment-opacity-dt); 132 | } 133 | 134 | .graph-view.color-fill-unresolved { 135 | opacity: var(--graph-unresolved-opacity-dt); 136 | } 137 | 138 | .graph-view.color-fill-highlight { 139 | color: var(--graph-highlight-color-dt); 140 | opacity: var(--graph-highlight-opacity-dt); 141 | } 142 | 143 | .graph-view.color-line-highlight { 144 | color: var(--graph-highlight-line-color-dt); 145 | opacity: var(--graph-highlight-line-opacity-dt); 146 | } 147 | } -------------------------------------------------------------------------------- /src/scss/Plugins/Core/outgoingLinkBacklinks.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Core] Outgoing Links 2 | :is(.backlink-pane, .outgoing-link-pane) { 3 | padding: 0; 4 | 5 | .embedded-backlinks & { 6 | overflow-y: unset; 7 | } 8 | 9 | > .search-result-container { 10 | padding: var(--size-4-1); 11 | } 12 | 13 | .search-result-container .search-result-container { 14 | padding: unset; 15 | margin: var(--size-4-1) var(--size-4-1) var(--size-4-2) var(--size-4-5); 16 | } 17 | 18 | > .tree-item-self { 19 | padding-inline: var(--size-4-6) var(--size-4-2); 20 | padding-top: var(--size-4-1); 21 | padding-bottom: var(--size-4-1); 22 | margin-bottom: -1px; 23 | background-color: var(--background-secondary); 24 | border-radius: unset; 25 | 26 | &:first-child { 27 | border-bottom: var(--window-border); 28 | } 29 | 30 | &:nth-last-child(2) { 31 | border-top: var(--window-border); 32 | border-bottom: var(--window-border); 33 | } 34 | 35 | .collapse-icon { 36 | display: flex; 37 | } 38 | 39 | &.is-collapsed:hover, 40 | &:hover .collapse-icon svg.svg-icon { 41 | color: var(--highlight-text-normal); 42 | } 43 | } 44 | } 45 | 46 | .tree-item-self.is-clickable:hover svg { 47 | color: var(--nav-item-color-hover); 48 | } 49 | 50 | .pt-nav-header-left-sidebar-align-center .workspace-split.mod-left-split, 51 | .pt-nav-header-right-sidebar-align-center .workspace-split.mod-right-split, 52 | .pt-nav-header-left-sidebar-align-left .workspace-split.mod-left-split, 53 | .pt-nav-header-left-sidebar-align-right .workspace-split.mod-left-split, 54 | .pt-nav-header-right-sidebar-align-left .workspace-split.mod-right-split, 55 | .pt-nav-header-right-sidebar-align-right .workspace-split.mod-right-split { 56 | .embedded-backlinks .nav-header { 57 | position: sticky; 58 | top: 0; 59 | padding: 0 var(--size-2-2); 60 | } 61 | } 62 | 63 | .embedded-backlinks { 64 | .nav-header { 65 | position: sticky; 66 | top: 0; 67 | z-index: var(--layer-cover); 68 | justify-content: center; 69 | height: unset; 70 | margin: var(--size-4-2) 0; 71 | background-color: unset; 72 | border-bottom: unset; 73 | } 74 | 75 | .backlink-pane { 76 | padding: unset; 77 | border: var(--window-border); 78 | 79 | > .tree-item-self { 80 | width: unset; 81 | font-size: var(--font-ui-small); 82 | } 83 | } 84 | 85 | .tree-item-self { 86 | border: unset; 87 | } 88 | 89 | .nav-buttons-container { 90 | position: relative; 91 | top: unset; 92 | padding: var(--size-4-1); 93 | pointer-events: auto; 94 | background: var(--background-secondary-blur); 95 | -webkit-backdrop-filter: blur(var(--blur-intensity)); 96 | backdrop-filter: blur(var(--blur-intensity)); 97 | border: var(--window-border); 98 | border-radius: var(--radius-m); 99 | box-shadow: var(--shadow-l); 100 | } 101 | } 102 | 103 | .outgoing-link-pane .tree-item-self .tree-item-icon { 104 | margin-right: var(--size-4-2); 105 | } -------------------------------------------------------------------------------- /src/scss/Plugins/Core/outline.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Core] Outline 2 | .outline { 3 | // Removes the dot that appears when the heading has no children. Same in Tags. 4 | .tree-item-children > div:first-child { 5 | display: none; 6 | } 7 | } 8 | 9 | .workspace-leaf-content[data-type="outline"] .view-content { 10 | padding: var(--size-4-1); 11 | } -------------------------------------------------------------------------------- /src/scss/Plugins/Core/search.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Core] Search 2 | .search-result-container { 3 | padding: var(--size-4-1); 4 | } 5 | 6 | .search-row { 7 | padding: var(--size-4-1); 8 | margin: unset; 9 | background-color: var(--background-secondary); 10 | border-bottom: var(--window-border); 11 | } 12 | 13 | .search-info-container { 14 | background-color: var(--background-secondary); 15 | } 16 | 17 | .search-params { 18 | padding: var(--size-4-1) var(--size-4-4); 19 | margin: unset; 20 | margin-top: -1px; 21 | background-color: var(--background-secondary); 22 | border-bottom: var(--window-border); 23 | } 24 | 25 | .search-results-info { 26 | padding: var(--size-4-1) var(--size-4-2) var(--size-4-2) var(--size-4-2); 27 | margin: unset; 28 | margin-top: -1px; 29 | background-color: var(--background-secondary); 30 | border-bottom: var(--window-border); 31 | } 32 | 33 | .search-result-file-matched-text { 34 | padding: 0 4px; 35 | font-weight: 600; 36 | color: var(--interactive-accent-text); 37 | background-color: var(--interactive-accent-base); 38 | } 39 | 40 | .search-result { 41 | margin-bottom: var(--size-4-1); 42 | } 43 | 44 | .search-result-file-matches { 45 | margin: var(--size-4-2); 46 | 47 | .theme-dark & { 48 | background-color: var(--background-secondary-alt); 49 | } 50 | } 51 | 52 | .internal-query .search-result-container { 53 | padding: var(--size-4-2) var(--size-4-1); 54 | background-color: unset; 55 | border-radius: unset; 56 | } 57 | 58 | .suggestion-container.mod-search-suggestion { 59 | background-color: unset; 60 | border-radius: unset; 61 | 62 | .suggestion { 63 | padding: unset; 64 | border-radius: unset; 65 | 66 | .theme-light & { 67 | background-color: var(--background-primary); 68 | } 69 | 70 | .theme-dark & { 71 | background-color: var(--background-secondary-alt); 72 | } 73 | 74 | .suggestion-item:not(.mod-group) { 75 | margin: 0 var(--size-4-1) var(--size-2-1); 76 | 77 | &:last-of-type { 78 | margin-bottom: var(--size-4-1); 79 | } 80 | } 81 | 82 | .suggestion-item.mod-group { 83 | padding: var(--size-4-1) var(--size-4-1) var(--size-4-1) var(--size-4-2); 84 | margin-bottom: var(--size-4-1); 85 | background-color: var(--background-secondary); 86 | border-bottom: var(--window-border); 87 | } 88 | 89 | .search-suggest-item.mod-group:not(:first-child) { 90 | margin: var(--size-4-1) 0; 91 | } 92 | } 93 | } 94 | 95 | .input-right-decorator.clickable-icon { 96 | border-color: transparent; 97 | } -------------------------------------------------------------------------------- /src/scss/Plugins/Core/slashCommands.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Core] Slash Commands 2 | .suggestion-container { 3 | max-width: 700px; 4 | border: 1px solid var(--window-border-color); 5 | box-shadow: var(--shadow-l); 6 | 7 | .suggestion { 8 | padding: var(--size-4-2); 9 | 10 | &::-webkit-scrollbar-track { 11 | border-radius: var(--radius-s); 12 | box-shadow: var(--shadow-s); 13 | } 14 | } 15 | 16 | .theme-light & { 17 | background-color: var(--background-primary); 18 | } 19 | 20 | .theme-dark & { 21 | background-color: var(--background-secondary-alt); 22 | } 23 | 24 | .suggestion-item { 25 | padding: var(--size-4-2); 26 | } 27 | } 28 | 29 | .suggestion-item.mod-complex { 30 | align-items: center; 31 | 32 | .suggestion-content { 33 | overflow: visible; 34 | } 35 | } 36 | 37 | .suggestion-item.is-selected { 38 | color: var(--highlight-text-normal); 39 | } 40 | 41 | .suggestion-prefix { 42 | padding: 0 var(--size-4-1); 43 | margin-right: var(--size-4-2); 44 | font-size: 0.9em; 45 | font-weight: 600; 46 | color: var(--interactive-accent-text); 47 | background-color: var(--background-secondary); 48 | border: 1px solid var(--window-border-color); 49 | border-radius: var(--radius-s); 50 | 51 | &::after { 52 | display: none; 53 | } 54 | } -------------------------------------------------------------------------------- /src/scss/Plugins/Core/tags.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Core] Tags 2 | .tag-container { 3 | padding: var(--size-4-1); 4 | 5 | // Removes the dot that appears when the heading has no children. Same in Outline. 6 | .tree-item-children > div:first-child { 7 | display: none; 8 | } 9 | } -------------------------------------------------------------------------------- /src/scss/Plugins/Theme/coloredFolders.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Theme] Coloured Folders 2 | .pt-colored-folders { 3 | &.pt-colored-folders-style-accent { 4 | &.pt-colored-folders-files-match .workspace-leaf-content[data-type="file-explorer"] .nav-folder .nav-file-title:not(.is-active,:hover) { 5 | color: var(--interactive-accent-text); 6 | } 7 | 8 | .workspace-leaf-content[data-type="file-explorer"] .nav-files-container > div > .nav-folder { 9 | --nav-indentation-guide-color: var(--interactive-accent-tint); 10 | 11 | .nav-folder-title { 12 | color: var(--interactive-accent-text); 13 | } 14 | 15 | .nav-file-title:hover, 16 | .nav-folder-title:hover { 17 | color: var(--interactive-accent-text); 18 | background-color: var(--interactive-accent-base); 19 | } 20 | } 21 | 22 | .nav-folder.is-collapsed, 23 | .nav-folder.is-collapsed:hover, 24 | .nav-folder:not(.is-collapsed), 25 | .nav-folder:not(.is-collapsed):hover { 26 | .collapse-icon svg.svg-icon { 27 | color: var(--interactive-accent-text); 28 | } 29 | } 30 | 31 | &.pt-file-explorer-folder-icon.pt-file-explorer-folder-icon-active, 32 | &.pt-file-explorer-folder-icon.pt-file-explorer-folder-icon-default, 33 | &.pt-file-explorer-folder-icon.pt-file-explorer-folder-icon-accent { 34 | .nav-folder.is-collapsed, 35 | .nav-folder.is-collapsed:hover, 36 | .nav-folder:not(.is-collapsed), 37 | .nav-folder:not(.is-collapsed):hover { 38 | .collapse-icon svg.svg-icon { 39 | background-color: var(--interactive-accent-text); 40 | } 41 | } 42 | } 43 | } 44 | 45 | &.pt-colored-folders-style-rainbow { 46 | &.pt-colored-folders-files-match .workspace-leaf-content[data-type="file-explorer"] .nav-files-container > div > .nav-folder .nav-file-title:not(.is-active,:hover) { 47 | color: var(--rainbow-text-color); 48 | } 49 | 50 | .workspace-leaf-content[data-type="file-explorer"] .nav-files-container > div > .nav-folder { 51 | --nav-indentation-guide-color: var(--rainbow-indent-color); 52 | 53 | .nav-folder-title { 54 | color: var(--rainbow-text-color); 55 | } 56 | 57 | .nav-file-title:hover, 58 | .nav-folder-title:hover { 59 | color: var(--rainbow-text-color); 60 | background-color: var(--rainbow-background-color); 61 | } 62 | 63 | &:nth-child(10n + 2) { 64 | --rainbow-text-color: var(--color-red-text); 65 | --rainbow-background-color: var(--color-red-base); 66 | --rainbow-indent-color: var(--color-red-tint); 67 | } 68 | 69 | &:nth-child(10n + 3) { 70 | --rainbow-text-color: var(--color-orange-text); 71 | --rainbow-background-color: var(--color-orange-base); 72 | --rainbow-indent-color: var(--color-orange-tint); 73 | } 74 | 75 | &:nth-child(10n + 4) { 76 | --rainbow-text-color: var(--color-yellow-text); 77 | --rainbow-background-color: var(--color-yellow-base); 78 | --rainbow-indent-color: var(--color-yellow-tint); 79 | } 80 | 81 | &:nth-child(10n + 5) { 82 | --rainbow-text-color: var(--color-green-text); 83 | --rainbow-background-color: var(--color-green-base); 84 | --rainbow-indent-color: var(--color-green-tint); 85 | } 86 | 87 | &:nth-child(10n + 6) { 88 | --rainbow-text-color: var(--color-mint-text); 89 | --rainbow-background-color: var(--color-mint-base); 90 | --rainbow-indent-color: var(--color-mint-tint); 91 | } 92 | 93 | &:nth-child(10n + 7) { 94 | --rainbow-text-color: var(--color-cyan-text); 95 | --rainbow-background-color: var(--color-cyan-base); 96 | --rainbow-indent-color: var(--color-cyan-tint); 97 | } 98 | 99 | &:nth-child(10n + 8) { 100 | --rainbow-text-color: var(--color-blue-text); 101 | --rainbow-background-color: var(--color-blue-base); 102 | --rainbow-indent-color: var(--color-blue-tint); 103 | } 104 | 105 | &:nth-child(10n + 9) { 106 | --rainbow-text-color: var(--color-purple-text); 107 | --rainbow-background-color: var(--color-purple-base); 108 | --rainbow-indent-color: var(--color-purple-tint); 109 | } 110 | 111 | &:nth-child(10n + 10) { 112 | --rainbow-text-color: var(--color-pink-text); 113 | --rainbow-background-color: var(--color-pink-base); 114 | --rainbow-indent-color: var(--color-pink-tint); 115 | } 116 | 117 | &:nth-child(10n + 11) { 118 | --rainbow-text-color: var(--color-grey-text); 119 | --rainbow-background-color: var(--color-grey-base); 120 | --rainbow-indent-color: var(--color-grey-tint); 121 | } 122 | } 123 | 124 | .nav-folder.is-collapsed, 125 | .nav-folder.is-collapsed:hover, 126 | .nav-folder:not(.is-collapsed), 127 | .nav-folder:not(.is-collapsed):hover { 128 | .collapse-icon svg.svg-icon { 129 | color: var(--rainbow-text-color); 130 | } 131 | } 132 | 133 | &.pt-file-explorer-folder-icon.pt-file-explorer-folder-icon-active, 134 | &.pt-file-explorer-folder-icon.pt-file-explorer-folder-icon-default, 135 | &.pt-file-explorer-folder-icon.pt-file-explorer-folder-icon-accent { 136 | .nav-folder.is-collapsed, 137 | .nav-folder.is-collapsed:hover, 138 | .nav-folder:not(.is-collapsed), 139 | .nav-folder:not(.is-collapsed):hover { 140 | .collapse-icon svg.svg-icon { 141 | background-color: var(--rainbow-text-color); 142 | } 143 | } 144 | } 145 | } 146 | } 147 | -------------------------------------------------------------------------------- /src/scss/Plugins/Theme/customVaultBanner.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Theme] Custom Vault Banner 2 | .pt-custom-vault-banner { 3 | .workspace-drawer-vault-name { 4 | display: flex; 5 | align-items: center; 6 | 7 | &::before { 8 | display: inline-flex; 9 | min-width: 24px; 10 | height: 24px; 11 | margin-right: var(--size-4-2); 12 | content: ""; 13 | background-image: var(--custom-vault-banner-icon-url); 14 | background-repeat: no-repeat; 15 | background-position: center; 16 | background-size: contain; 17 | } 18 | } 19 | 20 | &.is-mobile .mod-left .workspace-drawer-header::before { 21 | display: block; 22 | width: 32px; 23 | height: 48px; 24 | margin-right: var(--size-4-4); 25 | content: ""; 26 | background-image: var(--custom-vault-banner-icon-url); 27 | background-repeat: no-repeat; 28 | background-position: center; 29 | background-size: contain; 30 | border-radius: unset; 31 | } 32 | } 33 | 34 | body:not(.is-mobile) .workspace-split.mod-left-split .workspace-sidedock-vault-profile { 35 | padding: var(--size-4-1) var(--size-4-2); 36 | border-top: var(--window-border); 37 | } -------------------------------------------------------------------------------- /src/scss/Plugins/Theme/focusedMode.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Theme] Focused Mode 2 | body.pt-focused-mode { 3 | &.pt-focused-style-main-only:not(.is-popout-window), 4 | &.pt-focused-style-main-and-popout-only:not(.is-popout-window), 5 | &.is-popout-window.pt-focused-style-popout-only, 6 | &.is-popout-window.pt-focused-style-main-and-popout-only { 7 | .status-bar, 8 | .workspace-ribbon, 9 | .view-header, 10 | .workspace-split.mod-root .workspace-tab-header-container, 11 | .workspace-split.mod-horizontal.mod-left-split, 12 | .workspace-split.mod-horizontal.mod-right-split, 13 | .workspace-ribbon.mod-left.is-collapsed, 14 | .workspace-ribbon.mod-right.is-collapsed, 15 | .mobile-navbar { 16 | opacity: var(--fade-away-opacity); 17 | transition: opacity 250ms; 18 | transition-delay: var(--fade-away-delay); 19 | 20 | &:hover { 21 | opacity: unset; 22 | transition: opacity 50ms; 23 | } 24 | } 25 | } 26 | } -------------------------------------------------------------------------------- /src/scss/Plugins/Theme/fontFeatures.scss: -------------------------------------------------------------------------------- 1 | // [Plugins - Theme] Font Features 2 | .pt-font-alt-a * { 3 | font-feature-settings: "ss03"; 4 | } 5 | 6 | .pt-font-alt-g * { 7 | font-feature-settings: "ss04"; 8 | } 9 | 10 | .pt-font-alt-a.pt-font-alt-g * { 11 | font-feature-settings: "ss03", "ss04"; 12 | } 13 | 14 | .pt-font-slashed-zero * { 15 | font-variant: slashed-zero; 16 | } 17 | 18 | .pt-font-disable-ligatures * { 19 | font-variant-ligatures: none; 20 | } -------------------------------------------------------------------------------- /src/scss/User Interface/Accent Color/accentStyleBase.scss: -------------------------------------------------------------------------------- 1 | // [Accent Style] Base 2 | .modal button:not(.mod-cta):not(.mod-warning) { 3 | display: inline-flex; 4 | flex-direction: column; 5 | align-items: center; 6 | justify-content: center; 7 | } 8 | 9 | .workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header.is-active, 10 | .workspace-tab-header.is-active, 11 | .nav-action-button.is-active, 12 | .vertical-tab-nav-item.is-active, 13 | .nav-file-title.is-active, 14 | .tree-item-self.is-active, 15 | .suggestion-hotkey, 16 | .workspace-leaf div.workspace-leaf-content[data-type=file-tree-view] div.oz-nav-file.is-active, 17 | .workspace-drawer.is-pinned .workspace-drawer-header-icon.mod-pin, 18 | .pdf-outline-view .tree-item-self.mod-active { 19 | color: var(--highlight-text-normal); 20 | border: var(--accent-border-width) solid; 21 | box-shadow: unset; 22 | } 23 | 24 | .is-mobile.is-phone .modal.mod-settings .vertical-tab-nav-item:last-child { 25 | border-bottom: var(--accent-border-width) solid; 26 | } 27 | 28 | .nav-action-button.is-active:hover { 29 | color: var(--interactive-accent-hover); 30 | } 31 | 32 | :is(.search-result-file-match-destination-file, .search-result-file-match-replace-button) { 33 | color: var(--text-normal); 34 | border: var(--accent-border-width) solid; 35 | border-radius: var(--radius-s); 36 | } 37 | 38 | button.mod-cta { 39 | color: var(--highlight-text-normal); 40 | } 41 | 42 | :is(.pcr-button, button.mod-cta, button.mod-warning, .modal button:not(.mod-cta):not(.mod-warning), .graph-control-content button, .setting-hotkey, .flair.mod-pop, .community-item .flair, button.copy-code-button, .modal-setting-nav-bar .clickable-icon, .document-search-button, .side-dock-ribbon-action.is-active[aria-label="Start/stop recording"]), 43 | .clickable-icon[aria-label="Search settings"], 44 | .pdf-toolbar-button, 45 | .input-right-decorator.clickable-icon { 46 | border: var(--accent-border-width) solid; 47 | border-radius: var(--radius-s); 48 | } 49 | 50 | .side-dock-ribbon-action.is-active[aria-label="Start/stop recording"] { 51 | padding: var(--size-2-1) var(--size-2-2); 52 | } 53 | 54 | :is(.workspace.is-right-sidedock-open .sidebar-toggle-button.mod-right, .workspace.is-left-sidedock-open .sidebar-toggle-button.mod-left, .popover-action.is-active, .mod-pin-popover.is-active), 55 | .pdf-toolbar-left .clickable-icon[aria-label="Toggle sidebar"].is-active { 56 | color: var(--highlight-text-normal); 57 | border: var(--accent-border-width) solid; 58 | border-radius: var(--radius-m); 59 | 60 | svg.svg-icon { 61 | color: var(--highlight-text-normal); 62 | } 63 | 64 | .clickable-icon:hover { 65 | background-color: unset; 66 | } 67 | 68 | &:hover { 69 | svg.svg-icon { 70 | color: var(--interactive-accent-hover); 71 | } 72 | } 73 | } 74 | 75 | .clickable-icon[aria-label="Search settings"], 76 | .pdf-toolbar-left .clickable-icon[aria-label="Toggle sidebar"] { 77 | border-color: transparent; 78 | } -------------------------------------------------------------------------------- /src/scss/User Interface/Accent Color/accentStyleBorder.scss: -------------------------------------------------------------------------------- 1 | // [Accent Style] Border 2 | :is(.theme-dark.pt-accent-style-border-dt, .theme-light.pt-accent-style-border-lt) { 3 | .workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header.is-active, 4 | .workspace-tab-header.is-active, 5 | .nav-action-button.is-active, 6 | .vertical-tab-nav-item.is-active, 7 | .nav-file-title.is-active, 8 | .tree-item-self.is-active, 9 | .suggestion-hotkey, 10 | .workspace-leaf div.workspace-leaf-content[data-type=file-tree-view] div.oz-nav-file.is-active, 11 | .workspace-drawer.is-pinned .workspace-drawer-header-icon.mod-pin, 12 | .canvas-help .setting-hotkey, 13 | .clickable-icon[aria-label="Search settings"].is-active, 14 | .pdf-outline-view .tree-item-self.mod-active { 15 | background-color: var(--background-primary); 16 | border-color: var(--interactive-accent-tint); 17 | } 18 | 19 | &:not(.is-phone) { 20 | .vertical-tab-nav-item.is-active, 21 | .horizontal-tab-nav-item.is-active, { 22 | --icon-color: var(--highlight-text-normal); 23 | color: var(--highlight-text-normal); 24 | } 25 | } 26 | 27 | .search-result-file-match-destination-file { 28 | color: var(--text-normal); 29 | background-color: var(--background-secondary); 30 | border-color: var(--color-grey-tint); 31 | 32 | &:hover { 33 | color: var(--interactive-accent-hover); 34 | background-color: var(--background-secondary); 35 | border-color: var(--interactive-accent-tint); 36 | } 37 | } 38 | 39 | .search-result-file-match-replace-button { 40 | background-color: var(--background-primary); 41 | border-color: var(--color-grey-tint); 42 | 43 | &:hover { 44 | border-color: var(--interactive-accent-tint); 45 | } 46 | } 47 | 48 | button.mod-cta { 49 | background-color: var(--background-primary); 50 | border-color: var(--interactive-accent-tint); 51 | 52 | &:hover { 53 | color: var(--interactive-accent-tint); 54 | } 55 | } 56 | 57 | :is(button.mod-warning, .side-dock-ribbon-action.is-active[aria-label="Start/stop recording"]) { 58 | color: var(--text-normal); 59 | background-color: var(--background-primary); 60 | border-color: var(--color-red-tint); 61 | 62 | &:hover { 63 | color: var(--color-red-tint); 64 | } 65 | } 66 | 67 | :is(.pcr-button, .modal button:not(.mod-cta):not(.mod-warning), .graph-control-content button, .modal-setting-nav-bar .clickable-icon, .document-search-button, .pdf-toolbar-button) { 68 | color: var(--text-normal); 69 | background-color: var(--background-primary); 70 | border-color: var(--color-grey-tint); 71 | 72 | &:hover { 73 | color: var(--color-grey-tint); 74 | } 75 | } 76 | 77 | .setting-command-hotkeys .setting-hotkey { 78 | color: var(--text-normal); 79 | background-color: var(--background-primary); 80 | border-color: var(--color-blue-tint); 81 | 82 | &.mod-empty { 83 | border-color: var(--color-grey-tint); 84 | } 85 | 86 | &.has-conflict { 87 | border-color: var(--color-red-tint); 88 | } 89 | } 90 | 91 | :is(.flair.mod-pop, .community-item .flair) { 92 | color: var(--text-normal); 93 | background-color: var(--background-secondary); 94 | border-color: var(--color-green-tint); 95 | } 96 | 97 | button.copy-code-button { 98 | color: var(--text-normal); 99 | border-color: var(--color-grey-tint); 100 | 101 | &:hover { 102 | color: var(--color-grey-tint); 103 | } 104 | } 105 | 106 | :is(.workspace.is-right-sidedock-open .sidebar-toggle-button.mod-right, .workspace.is-left-sidedock-open .sidebar-toggle-button.mod-left, .popover-action.is-active, .mod-pin-popover.is-active), 107 | .pdf-toolbar-left .clickable-icon[aria-label="Toggle sidebar"].is-active { 108 | background-color: var(--background-primary); 109 | border-color: var(--interactive-accent-tint); 110 | 111 | .clickable-icon:hover { 112 | background-color: unset; 113 | } 114 | 115 | &:hover { 116 | color: var(--interactive-accent-hover); 117 | } 118 | } 119 | } 120 | 121 | :is(.theme-dark.pt-accent-style-border-dt.is-mobile, .theme-light.pt-accent-style-border-lt.is-mobile) { 122 | .modal.mod-settings .vertical-tab-nav-item { 123 | border-color: transparent; 124 | 125 | &.is-active { 126 | background-color: var(--background-primary); 127 | border-color: var(--interactive-accent-tint); 128 | } 129 | } 130 | } -------------------------------------------------------------------------------- /src/scss/User Interface/Accent Color/accentStyleBorderAndFilled.scss: -------------------------------------------------------------------------------- 1 | // [Accent Style] Border and Filled 2 | :is(.theme-dark.pt-accent-style-borderandfilled-dt, .theme-light.pt-accent-style-borderandfilled-lt) { 3 | .workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header.is-active, 4 | .workspace-tab-header.is-active, 5 | .nav-action-button.is-active, 6 | .vertical-tab-nav-item.is-active, 7 | .nav-file-title.is-active, 8 | .tree-item-self.is-active, 9 | .suggestion-hotkey, 10 | .workspace-leaf div.workspace-leaf-content[data-type=file-tree-view] div.oz-nav-file.is-active, 11 | .workspace-drawer.is-pinned .workspace-drawer-header-icon.mod-pin, 12 | .canvas-help .setting-hotkey, 13 | .clickable-icon[aria-label="Search settings"].is-active, 14 | .pdf-outline-view .tree-item-self.mod-active, 15 | .input-right-decorator.clickable-icon.is-active { 16 | background-color: var(--interactive-accent-base); 17 | border-color: var(--interactive-accent-tint); 18 | } 19 | 20 | &:not(.is-phone) { 21 | .vertical-tab-nav-item.is-active, 22 | .horizontal-tab-nav-item.is-active, { 23 | --icon-color: var(--highlight-text-normal); 24 | color: var(--highlight-text-normal); 25 | } 26 | } 27 | 28 | .search-result-file-match-destination-file { 29 | color: var(--text-normal); 30 | background-color: var(--color-grey-base); 31 | border-color: var(--color-grey-tint); 32 | 33 | &:hover { 34 | color: var(--interactive-accent-hover); 35 | background-color: var(--interactive-accent-base); 36 | border-color: var(--interactive-accent-tint); 37 | } 38 | } 39 | 40 | .search-result-file-match-replace-button { 41 | background-color: var(--color-grey-base); 42 | border-color: var(--color-grey-tint); 43 | 44 | &:hover { 45 | background-color: var(--interactive-accent-base); 46 | border-color: var(--interactive-accent-tint); 47 | } 48 | } 49 | 50 | button.mod-cta { 51 | background-color: var(--interactive-accent-base); 52 | border-color: var(--interactive-accent-tint); 53 | 54 | &:hover { 55 | color: var(--interactive-accent-tint); 56 | } 57 | } 58 | 59 | :is(button.mod-warning, .side-dock-ribbon-action.is-active[aria-label="Start/stop recording"]) { 60 | color: var(--text-normal); 61 | background-color: var(--color-red-base); 62 | border-color: var(--color-red-tint); 63 | 64 | &:hover { 65 | color: var(--color-red-tint); 66 | } 67 | } 68 | 69 | :is(.pcr-button, .modal button:not(.mod-cta):not(.mod-warning), .graph-control-content button, .modal-setting-nav-bar .clickable-icon, .document-search-button, .pdf-toolbar-button) { 70 | color: var(--text-normal); 71 | background-color: var(--color-grey-base); 72 | border-color: var(--color-grey-tint); 73 | 74 | &:hover { 75 | color: var(--color-grey-tint); 76 | } 77 | } 78 | 79 | .setting-command-hotkeys .setting-hotkey { 80 | color: var(--text-normal); 81 | background-color: var(--color-blue-base); 82 | border-color: var(--color-blue-tint); 83 | 84 | &.mod-empty { 85 | background-color: var(--color-grey-base); 86 | border-color: var(--color-grey-tint); 87 | } 88 | 89 | &.has-conflict { 90 | background-color: var(--color-red-base); 91 | border-color: var(--color-red-tint); 92 | } 93 | } 94 | 95 | :is(.flair.mod-pop, .community-item .flair) { 96 | color: var(--text-normal); 97 | background-color: var(--color-green-base); 98 | border-color: var(--color-green-tint); 99 | } 100 | 101 | button.copy-code-button { 102 | color: var(--text-normal); 103 | background-color: var(--color-grey-base); 104 | border-color: var(--color-grey-tint); 105 | 106 | &:hover { 107 | color: var(--color-grey-tint); 108 | } 109 | } 110 | 111 | :is(.workspace.is-right-sidedock-open .sidebar-toggle-button.mod-right, .workspace.is-left-sidedock-open .sidebar-toggle-button.mod-left, .popover-action.is-active, .mod-pin-popover.is-active), 112 | .pdf-toolbar-left .clickable-icon[aria-label="Toggle sidebar"].is-active { 113 | background-color: var(--interactive-accent-base); 114 | border-color: var(--interactive-accent-tint); 115 | 116 | &:hover { 117 | color: var(--interactive-accent-hover); 118 | } 119 | } 120 | } 121 | 122 | :is(.theme-dark.pt-accent-style-borderandfilled-dt.is-mobile, .theme-light.pt-accent-style-borderandfilled-lt.is-mobile) { 123 | .modal.mod-settings .vertical-tab-nav-item { 124 | border-color: transparent; 125 | 126 | &.is-active { 127 | background-color: var(--interactive-accent-base); 128 | border-color: var(--interactive-accent-tint); 129 | } 130 | } 131 | } -------------------------------------------------------------------------------- /src/scss/User Interface/Accent Color/accentStyleFilled.scss: -------------------------------------------------------------------------------- 1 | // [Accent Style] Filled 2 | :is(.theme-dark.pt-accent-style-filled-dt, .theme-light.pt-accent-style-filled-lt) { 3 | .workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header.is-active, 4 | .workspace-tab-header.is-active, 5 | .nav-action-button.is-active, 6 | .vertical-tab-nav-item.is-active, 7 | .nav-file-title.is-active, 8 | .tree-item-self.is-active, 9 | .suggestion-hotkey, 10 | .workspace-leaf div.workspace-leaf-content[data-type=file-tree-view] div.oz-nav-file.is-active, 11 | .workspace-drawer.is-pinned .workspace-drawer-header-icon.mod-pin, 12 | .canvas-help .setting-hotkey, 13 | .clickable-icon[aria-label="Search settings"].is-active, 14 | .pdf-outline-view .tree-item-self.mod-active { 15 | background-color: var(--interactive-accent-base); 16 | border-color: transparent; 17 | } 18 | 19 | &:not(.is-phone) { 20 | .vertical-tab-nav-item.is-active, 21 | .horizontal-tab-nav-item.is-active, { 22 | --icon-color: var(--highlight-text-normal); 23 | color: var(--highlight-text-normal); 24 | } 25 | } 26 | 27 | .search-result-file-match-destination-file { 28 | color: var(--text-normal); 29 | background-color: var(--color-grey-base); 30 | border-color: transparent; 31 | 32 | &:hover { 33 | color: var(--interactive-accent-hover); 34 | background-color: var(--interactive-accent-base); 35 | } 36 | } 37 | 38 | .search-result-file-match-replace-button { 39 | background-color: var(--color-grey-base); 40 | border-color: var(--color-grey-base); 41 | 42 | &:hover { 43 | background-color: var(--interactive-accent-base); 44 | border-color: var(--interactive-accent-base); 45 | } 46 | } 47 | 48 | button.mod-cta { 49 | background-color: var(--interactive-accent-base); 50 | border-color: transparent; 51 | 52 | &:hover { 53 | color: var(--interactive-accent-tint); 54 | } 55 | } 56 | 57 | :is(button.mod-warning, .side-dock-ribbon-action.is-active[aria-label="Start/stop recording"]) { 58 | color: var(--text-normal); 59 | background-color: var(--color-red-base); 60 | border-color: transparent; 61 | 62 | &:hover { 63 | color: var(--color-red-tint); 64 | } 65 | } 66 | 67 | :is(.pcr-button, .modal button:not(.mod-cta):not(.mod-warning), .graph-control-content button, .modal-setting-nav-bar .clickable-icon, .document-search-button, .pdf-toolbar-button) { 68 | color: var(--text-normal); 69 | background-color: var(--color-grey-base); 70 | border-color: var(--color-grey-base); 71 | 72 | &:hover { 73 | color: var(--color-grey-tint); 74 | } 75 | } 76 | 77 | .setting-command-hotkeys .setting-hotkey { 78 | color: var(--text-normal); 79 | background-color: var(--color-blue-base); 80 | border-color: var(--color-blue-base); 81 | 82 | &.mod-empty { 83 | background-color: var(--color-grey-base); 84 | border-color: var(--color-grey-base); 85 | } 86 | 87 | &.has-conflict { 88 | background-color: var(--color-red-base); 89 | border-color: var(--color-red-base); 90 | } 91 | } 92 | 93 | :is(.flair.mod-pop, .community-item .flair) { 94 | color: var(--highlight-text-normal); 95 | background-color: var(--color-green-base); 96 | border-color: transparent; 97 | } 98 | 99 | button.copy-code-button { 100 | color: var(--text-normal); 101 | background-color: var(--color-grey-base); 102 | border-color: transparent; 103 | 104 | &:hover { 105 | color: var(--color-grey-tint); 106 | } 107 | } 108 | 109 | :is(.workspace.is-right-sidedock-open .sidebar-toggle-button.mod-right, .workspace.is-left-sidedock-open .sidebar-toggle-button.mod-left, .popover-action.is-active, .mod-pin-popover.is-active), 110 | .pdf-toolbar-left .clickable-icon[aria-label="Toggle sidebar"].is-active { 111 | background-color: var(--interactive-accent-base); 112 | border-color: transparent; 113 | 114 | &:hover { 115 | color: var(--interactive-accent-hover); 116 | } 117 | } 118 | } 119 | 120 | :is(.theme-dark.pt-accent-style-filled-dt.is-mobile, .theme-light.pt-accent-style-filled-lt.is-mobile) { 121 | .modal.mod-settings .vertical-tab-nav-item { 122 | border-color: transparent; 123 | 124 | &.is-active { 125 | background-color: var(--interactive-accent-base); 126 | } 127 | } 128 | } -------------------------------------------------------------------------------- /src/scss/User Interface/Accent Color/accentStyleMinimal.scss: -------------------------------------------------------------------------------- 1 | // [Accent Style] Minimal 2 | :is(.theme-dark.pt-accent-style-minimal-dt, .theme-light.pt-accent-style-minimal-lt) { 3 | .workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header.is-active, 4 | .workspace-tab-header.is-active, 5 | .nav-action-button.is-active, 6 | .vertical-tab-nav-item.is-active, 7 | .nav-file-title.is-active, 8 | .tree-item-self.is-active, 9 | .suggestion-hotkey, 10 | .workspace-leaf div.workspace-leaf-content[data-type=file-tree-view] div.oz-nav-file.is-active, 11 | .workspace-drawer.is-pinned .workspace-drawer-header-icon.mod-pin, 12 | .canvas-help .setting-hotkey, 13 | .clickable-icon[aria-label="Search settings"].is-active, 14 | .pdf-outline-view .tree-item-self.mod-active { 15 | background-color: transparent; 16 | border-color: transparent; 17 | } 18 | 19 | .vertical-tab-nav-item.is-active:hover, 20 | .workspace-tab-header.is-active:hover { 21 | color: var(--interactive-accent-hover); 22 | } 23 | 24 | .search-result-file-match-destination-file { 25 | color: var(--text-normal); 26 | background-color: transparent; 27 | border-color: transparent; 28 | 29 | &:hover { 30 | color: var(--interactive-accent-hover); 31 | background-color: transparent; 32 | } 33 | } 34 | 35 | .search-result-file-match-replace-button { 36 | background-color: transparent; 37 | border-color: transparent; 38 | 39 | &:hover { 40 | color: var(--interactive-accent-text); 41 | } 42 | } 43 | 44 | button.mod-cta { 45 | background-color: transparent; 46 | border-color: var(--window-border-color); 47 | border-width: 1px; 48 | 49 | &:hover { 50 | color: var(--interactive-accent-hover); 51 | } 52 | } 53 | 54 | :is(button.mod-warning, .side-dock-ribbon-action.is-active[aria-label="Start/stop recording"]) { 55 | color: var(--color-red-text); 56 | background-color: transparent; 57 | border-color: var(--window-border-color); 58 | 59 | &:hover { 60 | color: var(--color-red-tint); 61 | } 62 | } 63 | 64 | :is(.pcr-button, .modal button:not(.mod-cta):not(.mod-warning), .graph-control-content button, .modal-setting-nav-bar .clickable-icon, .document-search-button, .pdf-toolbar-button) { 65 | color: var(--color-grey-text); 66 | background-color: transparent; 67 | border-color: var(--window-border-color); 68 | border-width: 1px; 69 | 70 | &:hover { 71 | color: var(--color-grey-tint); 72 | } 73 | } 74 | 75 | .setting-command-hotkeys .setting-hotkey { 76 | color: var(--color-blue-text); 77 | background-color: transparent; 78 | border-color: var(--window-border-color); 79 | border-width: 1px; 80 | 81 | &.mod-empty { 82 | color: var(--text-normal); 83 | } 84 | 85 | &.has-conflict { 86 | color: var(--color-red-text); 87 | } 88 | } 89 | 90 | :is(.flair.mod-pop, .community-item .flair) { 91 | color: var(--color-green-text); 92 | background-color: transparent; 93 | border-color: var(--window-border-color); 94 | border-width: 1px; 95 | } 96 | 97 | button.copy-code-button { 98 | border-color: var(--window-border-color); 99 | border-width: 1px; 100 | 101 | &:hover { 102 | color: var(--interactive-accent-hover); 103 | } 104 | } 105 | 106 | :is(.workspace.is-right-sidedock-open .sidebar-toggle-button.mod-right, .workspace.is-left-sidedock-open .sidebar-toggle-button.mod-left, .popover-action.is-active, .mod-pin-popover.is-active), 107 | .pdf-toolbar-left .clickable-icon[aria-label="Toggle sidebar"].is-active { 108 | background-color: transparent; 109 | border-color: transparent; 110 | 111 | &:hover { 112 | color: var(--interactive-accent-hover); 113 | } 114 | } 115 | 116 | &.is-focused .mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-icon, 117 | &.is-focused .mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-title { 118 | color: var(--interactive-accent-text); 119 | } 120 | } 121 | 122 | :is(.theme-dark.pt-accent-style-minimal-dt.is-mobile, .theme-light.pt-accent-style-minimal-lt.is-mobile) { 123 | .modal.mod-settings .vertical-tab-nav-item { 124 | border-color: transparent; 125 | 126 | &.is-active { 127 | border-color: transparent; 128 | } 129 | } 130 | } 131 | -------------------------------------------------------------------------------- /src/scss/User Interface/Accent Color/accentStylePlain.scss: -------------------------------------------------------------------------------- 1 | // [Accent Style] Text Only 2 | :is(.theme-dark.pt-accent-style-plain-dt, .theme-light.pt-accent-style-plain-lt) { 3 | .workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header.is-active, 4 | .workspace-tab-header.is-active, 5 | .nav-action-button.is-active, 6 | .vertical-tab-nav-item.is-active, 7 | .nav-file-title.is-active, 8 | .tree-item-self.is-active, 9 | .suggestion-hotkey, 10 | .workspace-leaf div.workspace-leaf-content[data-type=file-tree-view] div.oz-nav-file.is-active, 11 | .workspace-drawer.is-pinned .workspace-drawer-header-icon.mod-pin, 12 | .canvas-help .setting-hotkey, 13 | .clickable-icon[aria-label="Search settings"].is-active, 14 | .pdf-outline-view .tree-item-self.mod-active { 15 | background-color: var(--background-primary); 16 | border-color: var(--window-border-color); 17 | } 18 | 19 | &:not(.is-phone) { 20 | .vertical-tab-nav-item.is-active, 21 | .horizontal-tab-nav-item.is-active, { 22 | --icon-color: var(--highlight-text-normal); 23 | color: var(--highlight-text-normal); 24 | } 25 | } 26 | 27 | .search-result-file-match-destination-file { 28 | color: var(--text-normal); 29 | background-color: var(--background-secondary); 30 | border-color: var(--background-secondary); 31 | 32 | &:hover { 33 | color: var(--interactive-accent-hover); 34 | background-color: var(--background-secondary); 35 | } 36 | } 37 | 38 | .search-result-file-match-replace-button { 39 | background-color: var(--background-secondary); 40 | border-color: var(--background-secondary); 41 | 42 | &:hover { 43 | color: var(--interactive-accent-text); 44 | } 45 | } 46 | 47 | button.mod-cta { 48 | background-color: var(--background-primary); 49 | border-color: var(--window-border-color); 50 | 51 | &:hover { 52 | color: var(--interactive-accent-hover); 53 | } 54 | } 55 | 56 | :is(button.mod-warning, .side-dock-ribbon-action.is-active[aria-label="Start/stop recording"]) { 57 | color: var(--color-red-text); 58 | background-color: var(--background-primary); 59 | border-color: var(--window-border-color); 60 | 61 | &:hover { 62 | color: var(--color-red-tint); 63 | } 64 | } 65 | 66 | :is(.pcr-button, .modal button:not(.mod-cta):not(.mod-warning), .graph-control-content button, .modal-setting-nav-bar .clickable-icon, .document-search-button, .pdf-toolbar-button) { 67 | color: var(--color-grey-text); 68 | background-color: var(--background-primary); 69 | border-color: var(--window-border-color); 70 | 71 | &:hover { 72 | color: var(--color-grey-tint); 73 | } 74 | } 75 | 76 | .setting-command-hotkeys .setting-hotkey { 77 | color: var(--color-blue-text); 78 | background-color: var(--background-primary); 79 | border-color: var(--window-border-color); 80 | 81 | &.mod-empty { 82 | color: var(--text-normal); 83 | } 84 | 85 | &.has-conflict { 86 | color: var(--color-red-text); 87 | } 88 | } 89 | 90 | :is(.flair.mod-pop, .community-item .flair) { 91 | color: var(--color-green-text); 92 | background-color: var(--background-secondary); 93 | border-color: var(--window-border-color); 94 | } 95 | 96 | button.copy-code-button { 97 | border-color: var(--window-border-color); 98 | 99 | &:hover { 100 | color: var(--interactive-accent-hover); 101 | } 102 | } 103 | 104 | :is(.workspace.is-right-sidedock-open .sidebar-toggle-button.mod-right, .workspace.is-left-sidedock-open .sidebar-toggle-button.mod-left, .popover-action.is-active, .mod-pin-popover.is-active), 105 | .pdf-toolbar-left .clickable-icon[aria-label="Toggle sidebar"].is-active { 106 | background-color: var(--background-primary); 107 | border-color: var(--window-border-color); 108 | 109 | &:hover { 110 | color: var(--interactive-accent-hover); 111 | } 112 | } 113 | } 114 | 115 | :is(.theme-dark.pt-accent-style-plain-dt.is-mobile, .theme-light.pt-accent-style-plain-lt.is-mobile) { 116 | .modal.mod-settings .vertical-tab-nav-item { 117 | border-color: transparent; 118 | 119 | &.is-active { 120 | border-color: var(--window-border-color); 121 | } 122 | } 123 | } -------------------------------------------------------------------------------- /src/scss/User Interface/Bars/statusBar.scss: -------------------------------------------------------------------------------- 1 | // [Status Bar] Base 2 | .status-bar { 3 | // Hides the Status Bar when there is nothing displayed in it or the Style Settings option is set to Hidden. 4 | &:empty, 5 | .pt-status-bar-position-hidden & { 6 | display: none; 7 | } 8 | 9 | .pt-status-bar-position-floating & { 10 | --status-bar-position: absolute; 11 | right: 0; 12 | left: 0; 13 | width: fit-content; 14 | margin: 0 auto calc(var(--size-2-3) + var(--scroll-bar-size)); 15 | background: var(--background-secondary-blur); 16 | -webkit-backdrop-filter: blur(var(--blur-intensity)); 17 | backdrop-filter: blur(var(--blur-intensity)); 18 | border: 1px solid var(--window-border-color); 19 | border-radius: var(--radius-s); 20 | box-shadow: var(--shadow-l); 21 | } 22 | 23 | .pt-status-bar-position-fixed & { 24 | --status-bar-position: relative; 25 | padding: 1px var(--size-4-2); 26 | border: unset; 27 | border-top: var(--window-border); 28 | border-radius: unset; 29 | } 30 | 31 | .pt-fixed-status-bar-align-left & { 32 | justify-content: flex-start; 33 | } 34 | 35 | .pt-fixed-status-bar-align-center & { 36 | justify-content: center; 37 | } 38 | 39 | .pt-fixed-status-bar-align-right & { 40 | justify-content: flex-end; 41 | } 42 | 43 | .theme-light.pt-status-bar-custom-lt & { 44 | background: var(--status-bar-background-color-lt); 45 | } 46 | 47 | .theme-dark.pt-status-bar-custom-dt & { 48 | background: var(--status-bar-background-color-dt); 49 | } 50 | 51 | :is(.theme-light.pt-status-bar-text-light-lt, .theme-dark.pt-status-bar-text-dark-dt) & { 52 | color: var(--background-primary); 53 | } 54 | 55 | :is(.theme-light.pt-status-bar-text-dark-lt, .theme-dark.pt-status-bar-text-light-dt) & { 56 | color: var(--text-muted); 57 | } 58 | 59 | :is(.theme-light.pt-status-bar-text-accent-lt, .theme-dark.pt-status-bar-text-accent-dt) & { 60 | color: var(--interactive-accent-text); 61 | } 62 | } 63 | 64 | .status-bar-item.mod-clickable:hover { 65 | color: var(--interactive-accent-text); 66 | } 67 | -------------------------------------------------------------------------------- /src/scss/User Interface/Bars/titleBar.scss: -------------------------------------------------------------------------------- 1 | // [Titlebar] Base 2 | body.pt-titlebar-hide-text .titlebar .titlebar-text { 3 | display: none; 4 | } 5 | 6 | .mod-windows .titlebar-button.mod-close:hover { 7 | color: hsl(0 100% 100%); 8 | background-color: #C42B1C; 9 | } 10 | 11 | .is-hidden-frameless:not(.is-fullscreen) .titlebar-button-container.mod-right { 12 | background-color: unset; 13 | } 14 | 15 | .mod-windows.is-hidden-frameless:not(.is-fullscreen) .workspace-tabs.mod-top-left-space .workspace-tab-header-container, 16 | .mod-linux.is-hidden-frameless:not(.is-fullscreen) .workspace-tabs.mod-top-left-space .workspace-tab-header-container { 17 | padding-left: var(--frame-left-space); 18 | } -------------------------------------------------------------------------------- /src/scss/User Interface/Sidebar/navHeader.scss: -------------------------------------------------------------------------------- 1 | // [Nav Header] Base 2 | .nav-header { 3 | display: flex; 4 | height: var(--header-height); 5 | background-color: var(--background-secondary); 6 | border-bottom: var(--window-border); 7 | 8 | .workspace-drawer & { 9 | order: unset; 10 | } 11 | } 12 | 13 | .nav-buttons-container { 14 | gap: var(--size-4-1); 15 | align-items: center; 16 | width: fit-content; 17 | } 18 | 19 | .nav-action-button { 20 | display: flex; 21 | align-items: center; 22 | justify-content: center; 23 | width: 26px; 24 | height: 26px; 25 | padding: 2px; 26 | border-radius: var(--radius-m); 27 | } 28 | 29 | // Align Left 30 | :is(.pt-nav-header-left-sidebar-align-left .workspace-split.mod-left-split, .pt-nav-header-right-sidebar-align-left .workspace-split.mod-right-split, .pt-nav-header-left-sidebar-align-left .workspace-drawer.mod-left, .pt-nav-header-right-sidebar-align-left .workspace-drawer.mod-right) { 31 | .workspace-leaf-content .nav-header { 32 | justify-content: flex-start; 33 | } 34 | 35 | .workspace-leaf-content[data-type="dangling-links"] .nav-header, 36 | .workspace-leaf-content[data-type="dictionary-view"] .nav-buttons-container { 37 | right: calc(var(--size-2-3) + var(--scroll-bar-size)); 38 | left: var(--size-2-3); 39 | margin-right: auto; 40 | } 41 | } 42 | 43 | // Align Center 44 | :is(.pt-nav-header-left-sidebar-align-center .workspace-split.mod-left-split , .pt-nav-header-right-sidebar-align-center .workspace-split.mod-right-split, .pt-nav-header-left-sidebar-align-center .workspace-drawer.mod-left, .pt-nav-header-right-sidebar-align-center .workspace-drawer.mod-right) { 45 | .workspace-leaf-content .nav-header { 46 | justify-content: center; 47 | } 48 | 49 | .workspace-leaf-content[data-type="dangling-links"] .nav-header, 50 | .workspace-leaf-content[data-type="dictionary-view"] .nav-buttons-container { 51 | right: calc(var(--size-2-3) + var(--scroll-bar-size)); 52 | left: var(--size-2-3); 53 | margin-right: auto; 54 | margin-left: auto; 55 | } 56 | } 57 | 58 | // Align Right 59 | :is(.pt-nav-header-left-sidebar-align-right .workspace-split.mod-left-split, .pt-nav-header-right-sidebar-align-right .workspace-split.mod-right-split, .pt-nav-header-left-sidebar-align-right .workspace-drawer.mod-left, .pt-nav-header-right-sidebar-align-right .workspace-drawer.mod-right) { 60 | .workspace-leaf-content .nav-header { 61 | justify-content: flex-end; 62 | } 63 | 64 | .workspace-leaf-content[data-type="dangling-links"] .nav-header, 65 | .workspace-leaf-content[data-type="dictionary-view"] .nav-buttons-container { 66 | right: calc(var(--size-2-3) + var(--scroll-bar-size)); 67 | left: var(--size-2-3); 68 | margin-left: auto; 69 | } 70 | } 71 | 72 | // Position Top 73 | :is(.pt-nav-header-left-sidebar-position-bottom .workspace-drawer.mod-left, .pt-nav-header-right-sidebar-position-bottom .workspace-drawer.mod-right) { 74 | order: unset; 75 | } 76 | 77 | // Position Bottom 78 | .pt-nav-header-left-sidebar-position-bottom .workspace-drawer.mod-left, 79 | .pt-nav-header-left-sidebar-position-bottom .workspace-split.mod-left-split, 80 | .pt-nav-header-right-sidebar-position-bottom .workspace-drawer.mod-right, 81 | .pt-nav-header-right-sidebar-position-bottom .workspace-split.mod-right-split { 82 | .nav-header { 83 | position: absolute; 84 | bottom: calc(var(--size-2-2) + var(--scroll-bar-size)); 85 | z-index: var(--layer-popover); 86 | order: 10; 87 | width: -webkit-fill-available; 88 | width: fill-available; 89 | height: unset; 90 | padding: 0 calc(var(--size-2-2) + var(--scroll-bar-size)) 0 var(--size-2-2); 91 | pointer-events: none; 92 | background-color: unset; 93 | border-bottom: unset; 94 | } 95 | 96 | .nav-buttons-container, 97 | .workspace-leaf-content[data-type="dangling-links"] .nav-header { 98 | padding: var(--size-4-1); 99 | pointer-events: auto; 100 | background: var(--background-secondary-blur); 101 | -webkit-backdrop-filter: blur(var(--blur-intensity)); 102 | backdrop-filter: blur(var(--blur-intensity)); 103 | border: 1px solid var(--window-border-color); 104 | border-radius: var(--radius-m); 105 | box-shadow: var(--shadow-l); 106 | } 107 | 108 | .workspace-leaf-content[data-type="dangling-links"] .nav-header { 109 | width: fit-content; 110 | } 111 | 112 | .workspace-leaf-content[data-type="dictionary-view"] .nav-buttons-container { 113 | position: fixed; 114 | bottom: calc(var(--size-2-3) + var(--scroll-bar-size)); 115 | z-index: var(--layer-popover); 116 | min-height: unset; 117 | } 118 | 119 | :is(.nav-files-container, .workspace-leaf-content[data-type="tag"] .tag-container, .workspace-leaf-content[data-type="backlink"] .backlink-pane, .workspace-leaf-content[data-type="starred"] .item-list, .workspace-leaf-content[data-type="dictionary-view"] .contents, .workspace-leaf-content[data-type="dangling-links"] .view-content .container, .workspace-leaf-content[data-type="bookmarks"] .view-content > div, .workspace-leaf-content[data-type="all-properties"] .view-content, .workspace-leaf-content[data-type="properties"] .view-content, .workspace-leaf-content[data-type="outline"] .view-content) { 120 | padding-bottom: calc(38px + 2 * var(--scroll-bar-size)); 121 | } 122 | } 123 | 124 | .pt-nav-header-left-sidebar-position-bottom.is-mobile .workspace-drawer.mod-left .nav-buttons-container, 125 | .pt-nav-header-right-sidebar-position-bottom.is-mobile .workspace-drawer.mod-right .nav-buttons-container, 126 | .pt-nav-header-left-sidebar-position-bottom.is-mobile .workspace-drawer.mod-left .workspace-leaf-content[data-type="dangling-links"] .nav-header, 127 | .pt-nav-header-right-sidebar-position-bottom.is-mobile .workspace-drawer.mod-right .workspace-leaf-content[data-type="dangling-links"] .nav-header { 128 | padding: var(--size-4-2); 129 | } -------------------------------------------------------------------------------- /src/scss/User Interface/Sidebar/tabHeader.scss: -------------------------------------------------------------------------------- 1 | // [Sidebar] Tab Header - Base 2 | .workspace-tab-header { 3 | padding: 0 var(--size-4-2); 4 | border: var(--accent-border-width) solid transparent; 5 | border-radius: var(--radius-m); 6 | 7 | .workspace-tab-header-inner-close-button:hover svg { 8 | color: var(--interactive-accent-hover); 9 | } 10 | 11 | &.is-active { 12 | border-radius: var(--radius-m); 13 | 14 | &:hover .workspace-tab-header-inner-icon svg { 15 | color: var(--interactive-accent-hover); 16 | } 17 | 18 | .workspace-tab-header-inner-icon { 19 | color: var(--icon-color-focused); 20 | } 21 | } 22 | 23 | &::before, 24 | &::after { 25 | display: none; 26 | } 27 | } 28 | 29 | .mod-root .workspace-tab-header-status-icon, 30 | .mod-root .workspace-tab-header-inner-icon { 31 | --icon-size: var(--icon-s); 32 | --icon-stroke: var(--icon-s-stroke-width); 33 | } 34 | 35 | .workspace-tab-header-container { 36 | padding-right: unset; 37 | padding-left: 1px; 38 | border-bottom: var(--window-border); 39 | } 40 | 41 | .workspace .mod-root .workspace-tab-header { 42 | padding: unset; 43 | } 44 | 45 | .mod-root .workspace-tab-header-inner { 46 | gap: var(--size-4-1); 47 | padding: 0 var(--size-4-1) 0 var(--size-4-2); 48 | } 49 | 50 | .workspace .mod-root .workspace-tab-header-inner::after, 51 | .workspace-tab-header-inner-close-button::after { 52 | display: none; 53 | } 54 | 55 | .workspace-tab-header:not(.is-active):hover .workspace-tab-header-inner-title { 56 | color: var(--highlight-text-normal); 57 | } 58 | 59 | .workspace-tabs .workspace-tab-header-container-inner { 60 | gap: var(--size-4-1); 61 | padding: unset; 62 | margin: var(--size-4-1); 63 | } 64 | 65 | :is(.workspace-tab-header-tab-list, .workspace-tab-header-new-tab) { 66 | margin-left: unset; 67 | 68 | .clickable-icon { 69 | padding: var(--size-4-1); 70 | } 71 | } 72 | 73 | .workspace-tab-header-new-tab { 74 | padding: var(--size-4-1) 0; 75 | } 76 | 77 | .workspace-tab-header-tab-list { 78 | padding: var(--size-4-1); 79 | margin-right: unset; 80 | } 81 | 82 | // [Sidebar] Tab Header - Fade Inactive Tabs 83 | .pt-fade-inactive-tabs :not(.mod-active) .workspace-tab-header.is-active:not(.mod-active) { 84 | opacity: 0.55; 85 | } 86 | 87 | // [Sidebar] Tab Header - Stacked Tabs 88 | .workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container { 89 | .workspace-tab-header { 90 | background-color: var(--background-secondary); 91 | border: unset; 92 | border-right: var(--window-border); 93 | 94 | &:not(.is-active) .workspace-tab-header-inner { 95 | padding-top: 10px; 96 | margin-left: -1px; 97 | border-left: var(--window-border); 98 | } 99 | } 100 | } 101 | 102 | // [Main Workspace] Tab Header - Tab Alignment 103 | .workspace-tab-header-spacer { 104 | display: none; 105 | } 106 | 107 | // Left 108 | .mod-root { 109 | .workspace-tab-header-container-inner { 110 | margin-left: var(--size-4-1); 111 | } 112 | 113 | .workspace-tab-header-new-tab { 114 | margin-right: auto; 115 | } 116 | } 117 | 118 | // Center 119 | .pt-tab-header-center .mod-root { 120 | .workspace-tab-header-container-inner { 121 | margin-left: auto; 122 | } 123 | 124 | .workspace-tab-header-new-tab { 125 | margin-right: auto; 126 | } 127 | } 128 | 129 | // Right 130 | .pt-tab-header-right .mod-root { 131 | .workspace-tab-header-container-inner { 132 | margin-left: auto; 133 | } 134 | 135 | .workspace-tab-header-new-tab { 136 | margin-right: var(--size-4-1); 137 | } 138 | } -------------------------------------------------------------------------------- /src/scss/User Interface/Sidebar/tabLabel.scss: -------------------------------------------------------------------------------- 1 | // [Sidebar] Tab Label 2 | .workspace-split.mod-left-split { 3 | .workspace-tab-header-container { 4 | // Moves the Tab Label to the left on the left sidebar 5 | .pt-tab-label-left-sidebar-left & { 6 | justify-content: flex-start; 7 | } 8 | 9 | // Moves the Tab Label to the center on the left sidebar 10 | .pt-tab-label-left-sidebar-center & { 11 | justify-content: center; 12 | } 13 | 14 | // Moves the Tab Label to the right on the left sidebar 15 | .pt-tab-label-left-sidebar-right & { 16 | justify-content: flex-end; 17 | } 18 | } 19 | } 20 | 21 | .workspace-split.mod-right-split { 22 | .workspace-tab-header-container { 23 | // Moves the Tab Label to the left on the right sidebar 24 | .pt-tab-label-right-sidebar-left & { 25 | justify-content: flex-start; 26 | } 27 | 28 | // Moves the Tab Label to the center on the right sidebar 29 | .pt-tab-label-right-sidebar-center & { 30 | justify-content: center; 31 | } 32 | 33 | // Moves the Tab Label to the right on the right sidebar 34 | .pt-tab-label-right-sidebar-right & { 35 | justify-content: flex-end; 36 | } 37 | } 38 | } -------------------------------------------------------------------------------- /src/scss/User Interface/documentSearch.scss: -------------------------------------------------------------------------------- 1 | // [User Interface] Document Search 2 | :is(.mod-active .document-search-container, .document-search-container) { 3 | height: var(--header-height); 4 | padding: var(--size-4-1) 0; 5 | margin: unset; 6 | background: var(--background-secondary-blur); 7 | -webkit-backdrop-filter: blur(var(--blur-intensity)); 8 | backdrop-filter: blur(var(--blur-intensity)); 9 | border-bottom: var(--window-border); 10 | 11 | .document-search-input.mod-no-match { 12 | background-color: var(--color-red-base); 13 | border: 2px solid var(--color-red-tint); 14 | } 15 | } 16 | 17 | .document-search { 18 | align-items: center; 19 | } -------------------------------------------------------------------------------- /src/scss/User Interface/popups.scss: -------------------------------------------------------------------------------- 1 | // [UI] File Preview Popover 2 | .popover { 3 | box-shadow: var(--shadow-l); 4 | 5 | .theme-light & { 6 | background-color: var(--background-primary); 7 | } 8 | 9 | .theme-dark & { 10 | background-color: var(--background-secondary-alt); 11 | } 12 | 13 | &.hover-popover { 14 | border: var(--window-border); 15 | } 16 | } 17 | 18 | // [UI] Menu Popup 19 | .menu { 20 | padding: var(--size-4-1); 21 | border-color: var(--window-border-color); 22 | box-shadow: var(--shadow-l); 23 | 24 | .theme-light & { 25 | background-color: var(--background-primary); 26 | } 27 | 28 | .theme-dark & { 29 | background-color: var(--background-secondary-alt); 30 | } 31 | } 32 | 33 | .menu-item.selected:not(.is-disabled):not(.is-label):not(.is-warning) { 34 | color: var(--highlight-text-normal); 35 | 36 | .menu-item-icon { 37 | color: var(--highlight-text-normal); 38 | } 39 | } 40 | 41 | body.is-mobile.is-tablet .suggestion-container, 42 | body.is-mobile.is-tablet .menu { 43 | width: fit-content; 44 | } 45 | 46 | body.is-mobile.theme-dark .menu, 47 | .is-tablet.theme-dark .suggestion-container { 48 | background-color: var(--background-secondary-alt); 49 | } 50 | 51 | // [UI] Notification Popup 52 | div.notice-container div.notice { 53 | font-weight: 600; 54 | color: var(--text-normal); 55 | background: var(--interactive-accent-base); 56 | border: 2px solid var(--interactive-accent-tint); 57 | border-radius: var(--radius-m); 58 | box-shadow: var(--shadow-s); 59 | } 60 | 61 | // [UI] Suggestion Popup 62 | .prompt-instructions { 63 | padding: var(--size-2-1) var(--size-4-2); 64 | } 65 | 66 | // [UI] Tooltip Popup 67 | .tooltip { 68 | display: flex; 69 | font-weight: 600; 70 | color: var(--text-normal); 71 | background: var(--background-secondary-alt); 72 | border: 1px solid var(--window-border-color); 73 | border-radius: var(--radius-m); 74 | box-shadow: var(--shadow-l); 75 | 76 | .theme-light & { 77 | background: var(--background-primary); 78 | } 79 | 80 | .theme-dark & { 81 | background: var(--background-secondary-alt); 82 | } 83 | 84 | .tooltip-arrow { 85 | margin-top: -1px; 86 | border-bottom-color: var(--window-border-color); 87 | } 88 | 89 | &.mod-top .tooltip-arrow { 90 | margin-top: unset; 91 | margin-top: 1px; 92 | border-top-color: var(--window-border-color); 93 | } 94 | 95 | &.mod-right .tooltip-arrow { 96 | margin-top: unset; 97 | margin-left: -6px; 98 | border-right-color: var(--window-border-color); 99 | } 100 | 101 | &.mod-left .tooltip-arrow { 102 | margin-top: unset; 103 | margin-left: -2px; 104 | border-left-color: var(--window-border-color); 105 | } 106 | 107 | &.mod-error { 108 | color: var(--highlight-text-normal); 109 | background-color: var(--color-red-base); 110 | border-color: var(--color-red-tint); 111 | } 112 | } 113 | 114 | // [UI] Drag Ghost 115 | .drag-ghost { 116 | background: var(--background-secondary); 117 | border: 2px solid var(--window-border-color); 118 | box-shadow: var(--shadow-l); 119 | animation: pop-down 200ms forwards ease-in-out; 120 | } -------------------------------------------------------------------------------- /src/scss/User Interface/scrollBar.scss: -------------------------------------------------------------------------------- 1 | // [UI] Scrollbar Base 2 | body:not(.native-scrollbars) { 3 | .kanban-plugin__scroll-container::-webkit-scrollbar, 4 | .prompt-results::-webkit-scrollbar, 5 | ::-webkit-scrollbar { 6 | width: var(--scroll-bar-size); 7 | height: var(--scroll-bar-size); 8 | border-radius: unset; 9 | padding: unset; 10 | margin: unset; 11 | 12 | /* stylelint-disable-next-line selector-pseudo-class-no-unknown */ 13 | &:vertical { 14 | border-inline-start: var(--window-border); 15 | } 16 | 17 | /* stylelint-disable-next-line selector-pseudo-class-no-unknown */ 18 | &:horizontal { 19 | border-top: var(--window-border); 20 | } 21 | } 22 | 23 | .kanban-plugin__scroll-container::-webkit-scrollbar-thumb, 24 | ::-webkit-scrollbar-thumb { 25 | border: var(--window-border); 26 | border-radius: unset; 27 | } 28 | 29 | &.theme-light { 30 | .kanban-plugin__scroll-container::-webkit-scrollbar-thumb, 31 | ::-webkit-scrollbar-thumb { 32 | background-color: var(--background-primary-alt); 33 | 34 | &:hover { 35 | background-color: var(--interactive-accent-base); 36 | } 37 | } 38 | } 39 | 40 | &.theme-dark { 41 | .kanban-plugin__scroll-container::-webkit-scrollbar-thumb, 42 | ::-webkit-scrollbar-thumb { 43 | background-color: var(--background-primary); 44 | 45 | &:hover { 46 | background-color: var(--interactive-accent-base); 47 | } 48 | } 49 | } 50 | 51 | .kanban-plugin__scroll-container::-webkit-scrollbar-thumb:active, 52 | .kanban-plugin__scroll-container::-webkit-scrollbar-thumb:hover, 53 | ::-webkit-scrollbar-thumb:active, 54 | ::-webkit-scrollbar-thumb:hover { 55 | border-radius: unset; 56 | } 57 | 58 | ::-webkit-scrollbar-corner { 59 | background-color: var(--window-border-color); 60 | } 61 | } 62 | 63 | ::-webkit-scrollbar-track { 64 | margin-top: -1px; 65 | margin-bottom: -1px; 66 | box-shadow: unset; 67 | } 68 | 69 | .theme-light, 70 | .theme-dark { 71 | div.suggestion-container .suggestion::-webkit-scrollbar-track { 72 | background-color: unset; 73 | } 74 | } -------------------------------------------------------------------------------- /src/scss/User Interface/startup.scss: -------------------------------------------------------------------------------- 1 | // [UI] Startup 2 | .progress-bar { 3 | background-color: var(--background-secondary); 4 | } 5 | 6 | .progress-bar-line { 7 | background-color: var(--interactive-accent-base); 8 | } 9 | 10 | .progress-bar-subline { 11 | background-color: var(--interactive-accent-base); 12 | border: 2px solid var(--interactive-accent-tint); 13 | border-radius: var(--radius-s); 14 | } 15 | 16 | .progress-bar-container { 17 | background-color: var(--background-secondary); 18 | } -------------------------------------------------------------------------------- /src/scss/User Interface/workspace.scss: -------------------------------------------------------------------------------- 1 | // [UI] Workspace 2 | // Warning prompt to install Style Settings 3 | body:not(.css-settings-manager) .workspace-split.mod-left-split::before { 4 | display: block; 5 | width: -webkit-fill-avaliable; 6 | height: fit-content; 7 | padding: 10px; 8 | font-weight: 600; 9 | text-align: center; 10 | content: "Style Settings Plugin is required for Prism to function correctly!"; 11 | background-color: var(--color-red-base); 12 | border: var(--accent-border-width) solid var(--color-red-tint); 13 | border-radius: var(--radius-m); 14 | } 15 | 16 | .workspace, 17 | .workspace-split.mod-root, 18 | .workspace-tabs .workspace-leaf { 19 | .theme-light & { 20 | background-color: var(--background-primary); 21 | } 22 | 23 | .theme-dark & { 24 | background-color: var(--background-secondary-alt); 25 | } 26 | } 27 | 28 | // Vertical and Horizontal Resize Handles 29 | .workspace-split.mod-right-split > .workspace-leaf-resize-handle { 30 | left: -1px; 31 | } 32 | 33 | // Changes the resize handles to not overlap the tab area 34 | .workspace-split.mod-vertical > * >, 35 | .workspace-split.mod-left-split >, 36 | .workspace-split.mod-right-split > { 37 | .workspace-leaf-resize-handle { 38 | height: calc(var(--divider-vertical-height) - var(--header-height)); 39 | 40 | body.is-frameless:not(.is-hidden-frameless) &, 41 | body:not(.is-frameless, .is-hidden-frameless) & { 42 | height: var(--divider-vertical-height); 43 | } 44 | } 45 | } 46 | 47 | .workspace-split.mod-left-split > .workspace-leaf-resize-handle, 48 | .workspace-split.mod-right-split > .workspace-leaf-resize-handle, 49 | .workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle:not(:hover) { 50 | border-bottom: var(--window-border); 51 | } 52 | 53 | .workspace-split.mod-vertical > * >, 54 | .workspace-split.mod-left-split > { 55 | .workspace-leaf-resize-handle:not(:hover) { 56 | border-right: var(--window-border); 57 | } 58 | } 59 | 60 | .workspace-split.mod-right-split > .workspace-leaf-resize-handle:not(:hover) { 61 | border-left: var(--window-border); 62 | } 63 | 64 | // [UI] View Header 65 | :is(.is-focused .workspace-leaf.mod-active .view-header, .view-header) { 66 | width: 100%; 67 | padding: 0 var(--size-4-2); 68 | background: var(--background-secondary); 69 | } 70 | 71 | .workspace-tabs .view-header { 72 | margin: unset; 73 | border-bottom: var(--window-border); 74 | } 75 | 76 | .view-header-title-container { 77 | height: var(--header-height); 78 | 79 | &::after { 80 | display: none; 81 | } 82 | } 83 | 84 | .is-focused .workspace-leaf.mod-active .view-header-title, 85 | .view-header-title { 86 | color: var(--interactive-accent-text); 87 | 88 | &:hover { 89 | color: var(--text-accent-hover); 90 | } 91 | } 92 | 93 | .view-header-title-parent .view-header-breadcrumb:hover { 94 | color: var(--highlight-text-normal); 95 | } 96 | 97 | // [UI] Workspace Ribbon 98 | :is(.workspace-ribbon.mod-left, .workspace-split.mod-left-split, .workspace-split.mod-right-split, .workspace-split.mod-vertical.mod-root) { 99 | .sidebar-toggle-button { 100 | width: fit-content; 101 | height: calc(var(--header-height) - 9px); 102 | padding: 2px; 103 | margin: 4px; 104 | border: 2px solid transparent; 105 | border-radius: var(--radius-m); 106 | } 107 | } 108 | 109 | .workspace-ribbon.mod-left::before { 110 | border-bottom: var(--window-border); 111 | } 112 | 113 | .pt-color-scheme-style-minimal-dt .workspace-ribbon.mod-left.is-collapsed { 114 | border-right-color: transparent; 115 | } 116 | 117 | .workspace-ribbon { 118 | border-right: var(--window-border); 119 | } 120 | 121 | // [UI] macOS Sidebar Toggle Button fix 122 | .mod-macos.is-hidden-frameless:not(.is-popout-window) .sidebar-toggle-button.mod-right { 123 | padding-right: 2px; 124 | } 125 | 126 | // [UI] Collapsed Pinned Tabs 127 | .pt-collapsed-pinned-tab { 128 | .workspace .mod-root .workspace-tab-header[data-type="markdown"], 129 | .workspace .mod-root .workspace-tab-header[data-type="empty"] { 130 | &:has(.mod-pinned) .workspace-tab-header-inner-icon { 131 | display: flex; 132 | } 133 | } 134 | 135 | .workspace-tab-header:has(.mod-pinned) .workspace-tab-header-inner-title { 136 | display: none; 137 | } 138 | 139 | .workspace .mod-root .workspace-tab-header:has(.mod-pinned), 140 | .workspace-tab-header:has(.mod-pinned) .workspace-tab-header-inner { 141 | flex: unset; 142 | width: fit-content; 143 | min-width: unset; 144 | } 145 | } -------------------------------------------------------------------------------- /src/scss/index.scss: -------------------------------------------------------------------------------- 1 | @use "Info/licence.scss"; 2 | 3 | // Color Schemes 4 | @use "Color Schemes/colorSchemeBird.scss"; 5 | @use "Color Schemes/colorSchemeCoffee.scss"; 6 | @use "Color Schemes/colorSchemeFlower.scss"; 7 | @use "Color Schemes/colorSchemeTree.scss"; 8 | @use "Color Schemes/colorSchemeFruit.scss"; 9 | 10 | // Setup 11 | @use "Fonts/fontFamilyImports.scss"; 12 | @use "Variables/coreVariables.scss"; 13 | 14 | // Title Bar/Status Bar 15 | @use "User Interface/Bars/titleBar.scss"; 16 | @use "User Interface/Bars/statusBar.scss"; 17 | 18 | // Sidebar 19 | @use "User Interface/Sidebar/tabHeader.scss"; 20 | @use "User Interface/Sidebar/tabLabel.scss"; 21 | @use "User Interface/Sidebar/navHeader.scss"; 22 | 23 | // Other User Interface Elements 24 | @use "User Interface/mobileAdjustments.scss"; 25 | @use "User Interface/settings.scss"; 26 | @use "User Interface/scrollBar.scss"; 27 | @use "User Interface/startup.scss"; 28 | @use "User Interface/workspace.scss"; 29 | @use "User Interface/documentSearch.scss"; 30 | @use "User Interface/popups.scss"; 31 | 32 | // Accent Colors 33 | @use "User Interface/Accent Color/accentStyleBase.scss"; 34 | @use "User Interface/Accent Color/accentStyleMinimal.scss"; 35 | @use "User Interface/Accent Color/accentStylePlain.scss"; 36 | @use "User Interface/Accent Color/accentStyleBorder.scss"; 37 | @use "User Interface/Accent Color/accentStyleFilled.scss"; 38 | @use "User Interface/Accent Color/accentStyleBorderAndFilled.scss"; 39 | 40 | // Editor 41 | @use "Editor/editorStyling.scss"; 42 | @use "Editor/callouts.scss"; 43 | @use "Editor/progressBar.scss"; 44 | @use "Editor/vim.scss"; 45 | @use "Editor/properties.scss"; 46 | 47 | // Core Plugins 48 | @use "Plugins/Core/audio.scss"; 49 | @use "Plugins/Core/commandPalette.scss"; 50 | @use "Plugins/Core/slashCommands.scss"; 51 | @use "Plugins/Core/fileExplorer.scss"; 52 | @use "Plugins/Core/graph.scss"; 53 | @use "Plugins/Core/outline.scss"; 54 | @use "Plugins/Core/search.scss"; 55 | @use "Plugins/Core/tags.scss"; 56 | @use "Plugins/Core/outgoingLinkBacklinks.scss"; 57 | @use "Plugins/Core/canvas.scss"; 58 | @use "Plugins/Core/bookmarks.scss"; 59 | @use "Plugins/Core/PDFViewer.scss"; 60 | 61 | // Theme Plugins 62 | @use "Plugins/Theme/customVaultBanner.scss"; 63 | @use "Plugins/Theme/markHighlightSystem.scss"; 64 | @use "Plugins/Theme/fontFeatures.scss"; 65 | @use "Plugins/Theme/focusedMode.scss"; 66 | @use "Plugins/Theme/coloredFolders.scss"; 67 | 68 | // Community Plugins 69 | @use "Plugins/Community/styleSettings.scss"; 70 | @use "Plugins/Community/kanban.scss"; 71 | @use "Plugins/Community/iconFolder.scss"; 72 | @use "Plugins/Community/icons.scss"; 73 | @use "Plugins/Community/cMenu.scss"; 74 | @use "Plugins/Community/calendar.scss"; 75 | @use "Plugins/Community/recentFiles.scss"; 76 | @use "Plugins/Community/danglingLinks.scss"; 77 | @use "Plugins/Community/advancedTables.scss"; 78 | @use "Plugins/Community/fileTreeAlternative.scss"; 79 | @use "Plugins/Community/quietOutline.scss"; 80 | @use "Plugins/Community/quickExplorer.scss"; 81 | @use "Plugins/Community/tagFolder.scss"; 82 | @use "Plugins/Community/mapView.scss"; 83 | @use "Plugins/Community/dictionary.scss"; 84 | @use "Plugins/Community/hoverEditor.scss"; 85 | @use "Plugins/Community/emojiToolbar.scss"; 86 | @use "Plugins/Community/jumpToDate.scss"; 87 | @use "Plugins/Community/settingsSearch.scss"; 88 | @use "Plugins/Community/dataLoom.scss"; 89 | @use "Plugins/Community/noteToolbar.scss"; 90 | 91 | // Config Files 92 | @use "Info/styleSettingsConfig.scss"; 93 | @use "Info/pluginCompatibility.scss"; 94 | 95 | // @use "Plugins/Theme/customIcons.scss"; ❌ Won't reimplement. Left for reference. 96 | // @use "User Interface/animations.scss"; ❌ Won't reimplement. Left for reference. -------------------------------------------------------------------------------- /src/snippets/Prism Callouts/C_index.scss: -------------------------------------------------------------------------------- 1 | @use "./C_license.scss"; 2 | @use "./C_styleSettings.scss"; 3 | @use "./C_variables.scss"; 4 | @use "./C_code.scss"; 5 | -------------------------------------------------------------------------------- /src/snippets/Prism Callouts/C_license.scss: -------------------------------------------------------------------------------- 1 | /* 2 | Prism Callouts for Obsidian.md 3 | > Snippet of an feature extracted from the Prism Theme for Obsidian.md 4 | 5 | Version: 1.0.0 6 | 7 | Documentation: https://github.com/damiankorcz/Prism-Theme/wiki/Callout-Customisation 8 | 9 | Source: https://github.com/damiankorcz/Obsidian-Prism 10 | Distributed under the MIT License. See https://github.com/damiankorcz/Obsidian-Prism/blob/main/LICENSE for more information. 11 | Copyright (c) 2022-2024 Damian Korcz 12 | */ 13 | -------------------------------------------------------------------------------- /src/snippets/Prism Callouts/C_styleSettings.scss: -------------------------------------------------------------------------------- 1 | /* @settings 2 | name: Prism Callouts 1.0.0 3 | id: obsidian-prism-callouts 4 | settings: 5 | - 6 | id: prism-callout 7 | title: Prism Callout Class 8 | type: class-toggle 9 | default: true 10 | */ 11 | -------------------------------------------------------------------------------- /src/snippets/Prism Callouts/C_variables.scss: -------------------------------------------------------------------------------- 1 | body:not(.prism-theme) { 2 | &.theme-light { 3 | --color-grey-base-hsl: 0, 0%, 90%; 4 | --color-red-base-hsl: 7, 90%, 92%; 5 | --color-orange-base-hsl: 26, 85%, 89%; 6 | --color-yellow-base-hsl: 42, 88%, 83%; 7 | --color-green-base-hsl: 101, 49%, 85%; 8 | --color-mint-base-hsl: 152, 62%, 85%; 9 | --color-cyan-base-hsl: 184, 60%, 85%; 10 | --color-blue-base-hsl: 217, 76%, 92%; 11 | --color-purple-base-hsl: 251, 87%, 94%; 12 | --color-pink-base-hsl: 328, 79%, 93%; 13 | 14 | --color-grey-tint-hsl: 0, 0%, 73%; 15 | --color-red-tint-hsl: 7, 82%, 78%; 16 | --color-orange-tint-hsl: 27, 80%, 69%; 17 | --color-yellow-tint-hsl: 44, 67%, 58%; 18 | --color-green-tint-hsl: 99, 50%, 59%; 19 | --color-mint-tint-hsl: 158, 59%, 55%; 20 | --color-cyan-tint-hsl: 184, 61%, 56%; 21 | --color-blue-tint-hsl: 219, 73%, 78%; 22 | --color-purple-tint-hsl: 252, 84%, 83%; 23 | --color-pink-tint-hsl: 327, 72%, 79%; 24 | 25 | --color-grey-text-hsl: 0, 0%, 47%; 26 | --color-red-text-hsl: 3, 68%, 52%; 27 | --color-orange-text-hsl: 31, 100%, 36%; 28 | --color-yellow-text-hsl: 38, 62%, 37%; 29 | --color-green-text-hsl: 93, 100%, 27%; 30 | --color-mint-text-hsl: 161, 100%, 26%; 31 | --color-cyan-text-hsl: 184, 100%, 28%; 32 | --color-blue-text-hsl: 221, 67%, 56%; 33 | --color-purple-text-hsl: 258, 75%, 63%; 34 | --color-pink-text-hsl: 320, 60%, 50%; 35 | } 36 | 37 | &.theme-dark { 38 | --color-grey-base-hsl: 0, 0%, 16%; 39 | --color-red-base-hsl: 2, 55%, 19%; 40 | --color-orange-base-hsl: 26, 65%, 15%; 41 | --color-yellow-base-hsl: 43, 73%, 12%; 42 | --color-green-base-hsl: 124, 54%, 12%; 43 | --color-mint-base-hsl: 165, 88%, 10%; 44 | --color-cyan-base-hsl: 195, 65%, 13%; 45 | --color-blue-base-hsl: 225, 50%, 20%; 46 | --color-purple-base-hsl: 271, 48%, 21%; 47 | --color-pink-base-hsl: 325, 55%, 18%; 48 | 49 | --color-grey-tint-hsl: 0, 0%, 40%; 50 | --color-red-tint-hsl: 3, 49%, 46%; 51 | --color-orange-tint-hsl: 27, 53%, 37%; 52 | --color-yellow-tint-hsl: 44, 59%, 31%; 53 | --color-green-tint-hsl: 123, 43%, 32%; 54 | --color-mint-tint-hsl: 166, 73%, 26%; 55 | --color-cyan-tint-hsl: 195, 52%, 34%; 56 | --color-blue-tint-hsl: 224, 44%, 49%; 57 | --color-purple-tint-hsl: 271, 43%, 51%; 58 | --color-pink-tint-hsl: 325, 47%, 45%; 59 | 60 | --color-grey-text-hsl: 0, 0%, 67%; 61 | --color-red-text-hsl: 4, 74%, 74%; 62 | --color-orange-text-hsl: 26, 85%, 63%; 63 | --color-yellow-text-hsl: 44, 60%, 53%; 64 | --color-green-text-hsl: 124, 48%, 54%; 65 | --color-mint-text-hsl: 166, 67%, 45%; 66 | --color-cyan-text-hsl: 195, 69%, 58%; 67 | --color-blue-text-hsl: 225, 61%, 75%; 68 | --color-purple-text-hsl: 267, 52%, 75%; 69 | --color-pink-text-hsl: 330, 64%, 74%; 70 | } 71 | 72 | &.theme-light, 73 | &.theme-dark { 74 | --color-grey-base: hsl(var(--color-grey-base-hsl)); 75 | --color-red-base: hsl(var(--color-red-base-hsl)); 76 | --color-orange-base: hsl(var(--color-orange-base-hsl)); 77 | --color-yellow-base: hsl(var(--color-yellow-base-hsl)); 78 | --color-green-base: hsl(var(--color-green-base-hsl)); 79 | --color-mint-base: hsl(var(--color-mint-base-hsl)); 80 | --color-cyan-base: hsl(var(--color-cyan-base-hsl)); 81 | --color-blue-base: hsl(var(--color-blue-base-hsl)); 82 | --color-purple-base: hsl(var(--color-purple-base-hsl)); 83 | --color-pink-base: hsl(var(--color-pink-base-hsl)); 84 | 85 | --color-grey-tint: hsl(var(--color-grey-tint-hsl)); 86 | --color-red-tint: hsl(var(--color-red-tint-hsl)); 87 | --color-orange-tint: hsl(var(--color-orange-tint-hsl)); 88 | --color-yellow-tint: hsl(var(--color-yellow-tint-hsl)); 89 | --color-green-tint: hsl(var(--color-green-tint-hsl)); 90 | --color-mint-tint: hsl(var(--color-mint-tint-hsl)); 91 | --color-cyan-tint: hsl(var(--color-cyan-tint-hsl)); 92 | --color-blue-tint: hsl(var(--color-blue-tint-hsl)); 93 | --color-purple-tint: hsl(var(--color-purple-tint-hsl)); 94 | --color-pink-tint: hsl(var(--color-pink-tint-hsl)); 95 | 96 | --color-grey-text: hsl(var(--color-grey-text-hsl)); 97 | --color-red-text: hsl(var(--color-red-text-hsl)); 98 | --color-orange-text: hsl(var(--color-orange-text-hsl)); 99 | --color-yellow-text: hsl(var(--color-yellow-text-hsl)); 100 | --color-green-text: hsl(var(--color-green-text-hsl)); 101 | --color-mint-text: hsl(var(--color-mint-text-hsl)); 102 | --color-cyan-text: hsl(var(--color-cyan-text-hsl)); 103 | --color-blue-text: hsl(var(--color-blue-text-hsl)); 104 | --color-purple-text: hsl(var(--color-purple-text-hsl)); 105 | --color-pink-text: hsl(var(--color-pink-text-hsl)); 106 | } 107 | 108 | .callout { 109 | --callout-padding: 4px; 110 | --callout-radius: 8px; 111 | --callout-background-alpha: 20%; 112 | } 113 | } 114 | 115 | /* Hides the Style Settings options for this snippet since there currently aren't any beside the dummy class. */ 116 | .setting-item[data-id="obsidian-prism-callouts"] { 117 | display: none; 118 | } -------------------------------------------------------------------------------- /src/snippets/Prism Mark Highlight System/MHS_index.scss: -------------------------------------------------------------------------------- 1 | @use "./MHS_license.scss"; 2 | @use "./MHS_styleSettings.scss"; 3 | @use "./MHS_variables.scss"; 4 | @use "./MHS_code.scss"; 5 | -------------------------------------------------------------------------------- /src/snippets/Prism Mark Highlight System/MHS_license.scss: -------------------------------------------------------------------------------- 1 | /* 2 | Prism Mark Highlight System for Obsidian.md 3 | > Snippet of an feature extracted from the Prism Theme for Obsidian.md 4 | 5 | Version: 2.1.1 6 | 7 | Documentation: https://github.com/damiankorcz/Prism-Theme/wiki/Mark-Highlight-System-Guide 8 | 9 | Source: https://github.com/damiankorcz/Obsidian-Prism 10 | Distributed under the MIT License. See https://github.com/damiankorcz/Obsidian-Prism/blob/main/LICENSE for more information. 11 | Copyright (c) 2022-2024 Damian Korcz 12 | */ 13 | -------------------------------------------------------------------------------- /src/snippets/Prism Mark Highlight System/MHS_styleSettings.scss: -------------------------------------------------------------------------------- 1 | /* @settings 2 | name: Prism Mark Highlight System 2.1.1 3 | id: obsidian-prism-mark-highlight-system 4 | settings: 5 | - 6 | id: mark-highlight-styles 7 | title: Mark Highlight 8 | description: Adjusts the style used by the tag highlight system. Colors available = red, orange, yellow, green, mint, cyan, blue, purple, pink and grey. e.g. Your Red text 9 | type: heading 10 | level: 1 11 | collapsed: false 12 | - 13 | id: mark-highlight-light-theme 14 | title: Light Theme 15 | type: heading 16 | level: 2 17 | collapsed: true 18 | - 19 | id: light-mark-highlight-style 20 | title: Mark Highlight Style 21 | type: class-select 22 | allowEmpty: false 23 | default: pt-highlight-style-borderandfilled-lt 24 | options: 25 | - 26 | label: Default 27 | value: pt-highlight-style-default-lt 28 | - 29 | label: Border 30 | value: pt-highlight-style-border-lt 31 | - 32 | label: Filled 33 | value: pt-highlight-style-filled-lt 34 | - 35 | label: Border & Filled 36 | value: pt-highlight-style-borderandfilled-lt 37 | - 38 | id: light-mark-highlight-text-color-preset 39 | title: Mark Highlight Text Color Preset 40 | type: class-select 41 | allowEmpty: false 42 | default: pt-highlight-text-color-lt 43 | options: 44 | - 45 | label: Default 46 | value: pt-highlight-text-default-lt 47 | - 48 | label: Color 49 | value: pt-highlight-text-color-lt 50 | - 51 | id: mark-highlight-dark-theme 52 | title: Dark Theme 53 | type: heading 54 | level: 2 55 | collapsed: true 56 | - 57 | id: dark-mark-highlight-style 58 | title: Mark Highlight Style 59 | type: class-select 60 | allowEmpty: false 61 | default: pt-highlight-style-borderandfilled-dt 62 | options: 63 | - 64 | label: Default 65 | value: pt-highlight-style-default-dt 66 | - 67 | label: Border 68 | value: pt-highlight-style-border-dt 69 | - 70 | label: Filled 71 | value: pt-highlight-style-filled-dt 72 | - 73 | label: Border & Filled 74 | value: pt-highlight-style-borderandfilled-dt 75 | - 76 | id: dark-mark-highlight-text-color-preset 77 | title: Mark Highlight Text Color Preset 78 | type: class-select 79 | allowEmpty: false 80 | default: pt-highlight-text-color-dt 81 | options: 82 | - 83 | label: Default 84 | value: pt-highlight-text-default-dt 85 | - 86 | label: Color 87 | value: pt-highlight-text-color-dt 88 | */ 89 | -------------------------------------------------------------------------------- /src/snippets/Prism Mark Highlight System/MHS_variables.scss: -------------------------------------------------------------------------------- 1 | body { 2 | --accent-border-width: 2px; 3 | 4 | &.theme-light { 5 | --color-grey-base-hsl: 0, 0%, 90%; 6 | --color-red-base-hsl: 7, 90%, 92%; 7 | --color-orange-base-hsl: 26, 85%, 89%; 8 | --color-yellow-base-hsl: 42, 88%, 83%; 9 | --color-green-base-hsl: 101, 49%, 85%; 10 | --color-mint-base-hsl: 152, 62%, 85%; 11 | --color-cyan-base-hsl: 184, 60%, 85%; 12 | --color-blue-base-hsl: 217, 76%, 92%; 13 | --color-purple-base-hsl: 251, 87%, 94%; 14 | --color-pink-base-hsl: 328, 79%, 93%; 15 | 16 | --color-grey-tint-hsl: 0, 0%, 73%; 17 | --color-red-tint-hsl: 7, 82%, 78%; 18 | --color-orange-tint-hsl: 27, 80%, 69%; 19 | --color-yellow-tint-hsl: 44, 67%, 58%; 20 | --color-green-tint-hsl: 99, 50%, 59%; 21 | --color-mint-tint-hsl: 158, 59%, 55%; 22 | --color-cyan-tint-hsl: 184, 61%, 56%; 23 | --color-blue-tint-hsl: 219, 73%, 78%; 24 | --color-purple-tint-hsl: 252, 84%, 83%; 25 | --color-pink-tint-hsl: 327, 72%, 79%; 26 | 27 | --color-grey-text-hsl: 0, 0%, 47%; 28 | --color-red-text-hsl: 3, 68%, 52%; 29 | --color-orange-text-hsl: 31, 100%, 36%; 30 | --color-yellow-text-hsl: 38, 62%, 37%; 31 | --color-green-text-hsl: 93, 100%, 27%; 32 | --color-mint-text-hsl: 161, 100%, 26%; 33 | --color-cyan-text-hsl: 184, 100%, 28%; 34 | --color-blue-text-hsl: 221, 67%, 56%; 35 | --color-purple-text-hsl: 258, 75%, 63%; 36 | --color-pink-text-hsl: 320, 60%, 50%; 37 | } 38 | 39 | &.theme-dark { 40 | --color-grey-base-hsl: 0, 0%, 16%; 41 | --color-red-base-hsl: 2, 55%, 19%; 42 | --color-orange-base-hsl: 26, 65%, 15%; 43 | --color-yellow-base-hsl: 43, 73%, 12%; 44 | --color-green-base-hsl: 124, 54%, 12%; 45 | --color-mint-base-hsl: 165, 88%, 10%; 46 | --color-cyan-base-hsl: 195, 65%, 13%; 47 | --color-blue-base-hsl: 225, 50%, 20%; 48 | --color-purple-base-hsl: 271, 48%, 21%; 49 | --color-pink-base-hsl: 325, 55%, 18%; 50 | 51 | --color-grey-tint-hsl: 0, 0%, 40%; 52 | --color-red-tint-hsl: 3, 49%, 46%; 53 | --color-orange-tint-hsl: 27, 53%, 37%; 54 | --color-yellow-tint-hsl: 44, 59%, 31%; 55 | --color-green-tint-hsl: 123, 43%, 32%; 56 | --color-mint-tint-hsl: 166, 73%, 26%; 57 | --color-cyan-tint-hsl: 195, 52%, 34%; 58 | --color-blue-tint-hsl: 224, 44%, 49%; 59 | --color-purple-tint-hsl: 271, 43%, 51%; 60 | --color-pink-tint-hsl: 325, 47%, 45%; 61 | 62 | --color-grey-text-hsl: 0, 0%, 67%; 63 | --color-red-text-hsl: 4, 74%, 74%; 64 | --color-orange-text-hsl: 26, 85%, 63%; 65 | --color-yellow-text-hsl: 44, 60%, 53%; 66 | --color-green-text-hsl: 124, 48%, 54%; 67 | --color-mint-text-hsl: 166, 67%, 45%; 68 | --color-cyan-text-hsl: 195, 69%, 58%; 69 | --color-blue-text-hsl: 225, 61%, 75%; 70 | --color-purple-text-hsl: 267, 52%, 75%; 71 | --color-pink-text-hsl: 330, 64%, 74%; 72 | } 73 | 74 | &.theme-light, 75 | &.theme-dark { 76 | --color-grey-base: hsl(var(--color-grey-base-hsl)); 77 | --color-red-base: hsl(var(--color-red-base-hsl)); 78 | --color-orange-base: hsl(var(--color-orange-base-hsl)); 79 | --color-yellow-base: hsl(var(--color-yellow-base-hsl)); 80 | --color-green-base: hsl(var(--color-green-base-hsl)); 81 | --color-mint-base: hsl(var(--color-mint-base-hsl)); 82 | --color-cyan-base: hsl(var(--color-cyan-base-hsl)); 83 | --color-blue-base: hsl(var(--color-blue-base-hsl)); 84 | --color-purple-base: hsl(var(--color-purple-base-hsl)); 85 | --color-pink-base: hsl(var(--color-pink-base-hsl)); 86 | 87 | --color-grey-tint: hsl(var(--color-grey-tint-hsl)); 88 | --color-red-tint: hsl(var(--color-red-tint-hsl)); 89 | --color-orange-tint: hsl(var(--color-orange-tint-hsl)); 90 | --color-yellow-tint: hsl(var(--color-yellow-tint-hsl)); 91 | --color-green-tint: hsl(var(--color-green-tint-hsl)); 92 | --color-mint-tint: hsl(var(--color-mint-tint-hsl)); 93 | --color-cyan-tint: hsl(var(--color-cyan-tint-hsl)); 94 | --color-blue-tint: hsl(var(--color-blue-tint-hsl)); 95 | --color-purple-tint: hsl(var(--color-purple-tint-hsl)); 96 | --color-pink-tint: hsl(var(--color-pink-tint-hsl)); 97 | 98 | --color-grey-text: hsl(var(--color-grey-text-hsl)); 99 | --color-red-text: hsl(var(--color-red-text-hsl)); 100 | --color-orange-text: hsl(var(--color-orange-text-hsl)); 101 | --color-yellow-text: hsl(var(--color-yellow-text-hsl)); 102 | --color-green-text: hsl(var(--color-green-text-hsl)); 103 | --color-mint-text: hsl(var(--color-mint-text-hsl)); 104 | --color-cyan-text: hsl(var(--color-cyan-text-hsl)); 105 | --color-blue-text: hsl(var(--color-blue-text-hsl)); 106 | --color-purple-text: hsl(var(--color-purple-text-hsl)); 107 | --color-pink-text: hsl(var(--color-pink-text-hsl)); 108 | } 109 | } 110 | -------------------------------------------------------------------------------- /versions.json: -------------------------------------------------------------------------------- 1 | { 2 | "3.0.0": "1.0.0", 3 | "3.0.1": "1.0.0", 4 | "3.0.2": "1.0.0", 5 | "3.0.3": "1.0.0", 6 | "3.0.4": "1.0.0", 7 | "3.1.0": "1.0.0", 8 | "3.1.1": "1.1.8", 9 | "3.2.0": "1.1.9", 10 | "3.2.1": "1.1.9", 11 | "3.2.2": "1.2.0", 12 | "3.2.3": "1.2.0", 13 | "3.2.4": "1.2.0", 14 | "3.2.5": "1.3.0", 15 | "3.2.6": "1.3.1", 16 | "3.3.0": "1.3.1", 17 | "3.4.0": "1.4.3", 18 | "3.4.1": "1.4.3", 19 | "3.4.2": "1.4.3", 20 | "3.4.3": "1.4.3", 21 | "3.4.4": "1.4.3", 22 | "3.5.0": "1.4.3", 23 | "3.5.1": "1.6.0", 24 | "3.5.2": "1.6.0", 25 | "3.5.3": "1.6.0", 26 | "3.5.4": "1.6.0", 27 | "3.6.0": "1.6.0" 28 | } --------------------------------------------------------------------------------