Last active
September 16, 2024 00:25
-
-
Save Aetherinox/e3b2b174584d4c7eb683347741889138 to your computer and use it in GitHub Desktop.
Obsidian: CSS Override
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* @settings | |
name: ⚙️ Blue Topaz (Aetherx Extras) | |
id: blue-topaz-theme-aetherx | |
settings: | |
- | |
id: atx-general | |
title: 1. General | |
description: General appearance settings | |
type: heading | |
level: 1 | |
collapsed: true | |
- | |
id: plugin-iconize-icon-clr | |
title: Icon Color | |
description: Color for icons | |
type: variable-themed-color | |
opacity: true | |
format: hex | |
default-light: '#' | |
default-dark: '#' | |
- | |
id: file-explorer | |
title: 1. File Explorer (Left) | |
description: Left side file Explorer and folder listings | |
type: heading | |
level: 1 | |
collapsed: true | |
- | |
id: file-explorer-tag-accent | |
title: Accent Color | |
description: Accent color for File Preview file type tags | |
type: variable-themed-color | |
opacity: true | |
format: hex | |
default-light: '#' | |
default-dark: '#' | |
- | |
id: file-explorer-file-indent-left | |
title: File Listing Left Gap | |
description: Indents each file in the File explorer list | |
type: variable-number-slider | |
default: 20 | |
format: px | |
min: 0 | |
max: 40 | |
step: 1 | |
- | |
id: file-explorer-rename-bg | |
title: Rename File Background Color | |
description: Background color for box when renaming file | |
type: variable-themed-color | |
opacity: true | |
format: hex | |
default-light: '#' | |
default-dark: '#' | |
- | |
id: file-explorer-rename-text | |
title: Rename File Text Color | |
description: Text color for box when renaming file | |
type: variable-themed-color | |
opacity: true | |
format: hex | |
default-light: '#' | |
default-dark: '#' | |
- | |
id: file-explorer-rename-padding-left | |
title: Rename File Left Gap | |
description: Spacing on left side of rename box | |
type: variable-number-slider | |
default: 5 | |
format: px | |
min: 0 | |
max: 40 | |
step: 1 | |
- | |
id: file-explorer-rename-font-weight | |
title: Rename File Font Weight | |
description: Font weight for renaming files | |
type: variable-text | |
default: normal | |
- | |
id: reading-mode | |
title: 2. Reading Mode | |
description: Reading Mode settings | |
type: heading | |
level: 1 | |
collapsed: true | |
- | |
id: read-hr-padding-top | |
title: Horizontal Ruler Padding (Top) | |
description: Spacing above each horizontal ruler | |
type: variable-number-slider | |
default: 4.5 | |
format: em | |
min: 0 | |
max: 40 | |
step: 1 | |
- | |
id: read-hr-padding-bottom | |
title: Horizontal Ruler Padding (Bottom) | |
description: Spacing below each horizontal ruler | |
type: variable-number-slider | |
default: 4.5 | |
format: em | |
min: 0 | |
max: 40 | |
step: 1 | |
- | |
id: edit-mode | |
title: 3. Edit Mode | |
description: Settings specifically for Edit Mode | |
type: heading | |
level: 1 | |
collapsed: true | |
- | |
id: edit-header-padding-top | |
title: Heading Padding (Top) | |
description: Spacing above each #heading | |
type: variable-number-slider | |
default: 0 | |
format: px | |
min: 0 | |
max: 40 | |
step: 1 | |
- | |
id: edit-header-padding-bottom | |
title: Heading Padding (Bottom) | |
description: Spacing below each #heading | |
type: variable-number-slider | |
default: 0 | |
format: px | |
min: 0 | |
max: 40 | |
step: 1 | |
- | |
id: edit-link-codeblock-color-text | |
title: Link Codeblock Text Color | |
description: Text color for link codeblocks using [[Page^Block]] | |
type: variable-themed-color | |
opacity: true | |
format: hex | |
default-light: '#' | |
default-dark: '#' | |
- | |
id: edit-link-codeblock-color-icon | |
title: Link Codeblock Icon Color | |
description: Icon color for link codeblocks using [[Page^Block]] | |
type: variable-themed-color | |
opacity: true | |
format: hex | |
default-light: '#' | |
default-dark: '#' | |
- | |
id: edit-button-icon-padding-1 | |
title: | |
description: "<br />" | |
type: info-text | |
markdown: true | |
- | |
id: edit-button-icon-help | |
title: Generating SVG URLs | |
description: "For the icon settings below; SVG URLs can be generated with: <br />[https://yoksel.github.io/url-encoder](https://yoksel.github.io/url-encoder)<br /><br />Paste SVG path in left <b>Insert SVG</b> box, copy contents of <b>Take Encoded</b> box.<br /><br />" | |
type: info-text | |
markdown: true | |
- | |
id: edit-button-icon | |
title: Edit Button Icon | |
description: "SVG icon for edit button for codeblocks, etc." | |
type: variable-text | |
default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M8.707 19.707 18 10.414 13.586 6l-9.293 9.293a1.003 1.003 0 0 0-.263.464L3 21l5.242-1.03c.176-.044.337-.135.465-.263zM21 7.414a2 2 0 0 0 0-2.828L19.414 3a2 2 0 0 0-2.828 0L15 4.586 19.414 9 21 7.414z'%3E%3C/path%3E%3C/svg%3E") | |
- | |
id: edit-button-icon-padding-2 | |
title: | |
description: "<br />" | |
type: info-text | |
markdown: true | |
- | |
id: main-themescfg-list | |
title: 4. Theme Settings Interface | |
description: Theme settings interface (this panel). | |
type: heading | |
level: 1 | |
collapsed: true | |
- | |
id: main-themescfg-cat-bg-clr | |
title: Category Color | |
description: Background color for each | |
type: variable-themed-color | |
opacity: true | |
format: hex | |
default-light: '#' | |
default-dark: '#' | |
- | |
id: main-plugins | |
title: A. Plugins | |
description: Settings specifically for individual plugins | |
type: heading | |
level: 1 | |
collapsed: true | |
- | |
id: plugin-metabind | |
title: A.1 Meta Bind | |
type: heading | |
level: 2 | |
collapsed: true | |
- | |
id: plugin-metabind-pbar-text-offset-top | |
title: Progressbar Text Offset (Top) | |
description: Moves the text inside a progress bar horizontally | |
type: variable-number-slider | |
default: 43 | |
min: 0 | |
max: 100 | |
step: 1 | |
format: "%" | |
- | |
id: plugin-metabind-pbar-height | |
title: Progress Bar Height | |
description: Height of progress bar | |
type: variable-number-slider | |
default: 24 | |
format: px | |
min: 5 | |
max: 40 | |
step: 1 | |
- | |
id: plugin-metabind-pbar-color | |
title: Progress Bar Color | |
description: Primary progress bar color | |
type: variable-themed-color | |
opacity: true | |
format: hex | |
default-light: '#' | |
default-dark: '#' | |
- | |
id: plugin-short-links | |
title: A.1 Short Links | |
type: heading | |
level: 2 | |
collapsed: true | |
- | |
id: plugin-iconize | |
title: A.2 Iconize | |
type: heading | |
level: 2 | |
collapsed: true | |
- | |
id: plugin-iconize-icon-clr | |
title: Icon Color | |
description: Color for icons | |
type: variable-themed-color | |
opacity: true | |
format: hex | |
default-light: '#' | |
default-dark: '#' | |
- | |
id: plugin-linkembed | |
title: A.3 Link Embed | |
type: heading | |
level: 2 | |
collapsed: true | |
- | |
id: plugin-linkembed-box-padding | |
title: Box Padding | |
description: Padding of embed box | |
type: variable-number-slider | |
default: 10 | |
format: px | |
min: 5 | |
max: 40 | |
step: 1 | |
- | |
id: plugin-linkembed-box-right-bg-clr | |
title: Right Side Background Color | |
description: Color for box on right side surrounding website logo/icon | |
type: variable-themed-color | |
opacity: true | |
format: hex | |
default-light: '#' | |
default-dark: '#' | |
- | |
id: plugin-linkembed-box-left-bg-clr | |
title: Left Side Background Color | |
description: Color for box on left side surrounding website logo/icon | |
type: variable-themed-color | |
opacity: true | |
format: hex | |
default-light: '#' | |
default-dark: '#' | |
- | |
id: plugin-linkembed-description-text-clr | |
title: Description Text Color | |
description: Text color for website description | |
type: variable-themed-color | |
opacity: true | |
format: hex | |
default-light: '#' | |
default-dark: '#' | |
- | |
id: plugin-linkembed-description-text-size | |
title: Description Text Size | |
description: Text size for website description | |
type: variable-number-slider | |
default: 10 | |
format: px | |
min: 5 | |
max: 40 | |
step: 1 | |
- | |
id: plugin-favicon | |
title: A.4 Link Favicons | |
type: heading | |
level: 2 | |
collapsed: true | |
- | |
id: plugin-favicon-link | |
title: About Plugin | |
description: "See the favicon for a linked website.<br />[https://github.com/joethei/obsidian-link-favicon](https://github.com/joethei/obsidian-link-favicon)" | |
type: info-text | |
markdown: true | |
- | |
id: plugin-favicon-icon-height | |
title: Icon Height | |
description: Favicon height | |
type: variable-number-slider | |
default: 20 | |
format: px | |
min: 5 | |
max: 40 | |
step: 1 | |
- | |
id: plugin-favicon-icon-padding-left | |
title: Icon Margin (Left) | |
description: Favicon left margin | |
type: variable-number-slider | |
default: 5 | |
format: px | |
min: 0 | |
max: 20 | |
step: 1 | |
- | |
id: plugin-favicon-icon-padding-right | |
title: Icon Margin (Right) | |
description: Favicon right margin | |
type: variable-number-slider | |
default: 4 | |
format: px | |
min: 0 | |
max: 20 | |
step: 1 | |
- | |
id: plugin-consolemd | |
title: A.5 Console Markdown | |
type: heading | |
level: 2 | |
collapsed: true | |
- | |
id: plugin-consolemd-link | |
title: About Plugin | |
description: "Renders console commands and output. <br />[https://github.com/dellermann/obsidian-console](https://github.com/dellermann/obsidian-console)" | |
type: info-text | |
markdown: true | |
- | |
id: plugin-consolemd-box-bg-clr | |
title: Box Background Color | |
description: Console box background color | |
type: variable-themed-color | |
opacity: true | |
format: hex | |
default-light: '#' | |
default-dark: '#' | |
- | |
id: plugin-consolemd-txt-font-face | |
title: Font Face | |
description: Font used for console markdown boxes | |
type: variable-text | |
default: "Office Code Pro D Light" | |
- | |
id: plugin-consolemd-txt-font-size | |
title: Font Size | |
description: Text size for text inside console markdown block | |
type: variable-number-slider | |
default: 10 | |
format: px | |
min: 0 | |
max: 20 | |
step: 1 | |
- | |
id: plugin-callout | |
title: A.5 Callout / Admonition | |
type: heading | |
level: 2 | |
collapsed: true | |
- | |
id: plugin-callout-link | |
title: About Plugin | |
description: "Admonition blocks<br />[https://github.com/javalent/admonitions](https://github.com/javalent/admonitions)" | |
type: info-text | |
markdown: true | |
- | |
id: plugin-callout-box-bg-clr | |
title: Box Background Color | |
description: Callout background color | |
type: variable-themed-color | |
opacity: true | |
format: hex | |
default-light: '#' | |
default-dark: '#' | |
*/ | |
/* | |
global variables | |
*/ | |
body | |
{ | |
--line-number-height-correction: 0.3px; | |
--file-explorer-tag-accent: var(--background-modifier-hover); | |
--file-explorer-file-indent-left: 20px; | |
--file-explorer-rename-bg: #61162f; | |
--file-explorer-rename-text: #FFFFFF; | |
--file-explorer-rename-padding-left: 5px; | |
--file-explorer-rename-font-weight: normal; | |
--read-hr-padding-top: 4.5em; | |
--read-hr-padding-bottom: 4.5em; | |
--edit-header-padding-top: 0px; | |
--edit-header-padding-bottom: 0px; | |
--edit-link-codeblock-color-text: #818181; | |
--edit-link-codeblock-color-icon: #c72060; | |
--edit-button-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M8.707 19.707 18 10.414 13.586 6l-9.293 9.293a1.003 1.003 0 0 0-.263.464L3 21l5.242-1.03c.176-.044.337-.135.465-.263zM21 7.414a2 2 0 0 0 0-2.828L19.414 3a2 2 0 0 0-2.828 0L15 4.586 19.414 9 21 7.414z'%3E%3C/path%3E%3C/svg%3E"); | |
--main-themescfg-cat-bg-collapsed-clr: #202020; | |
--main-themescfg-cat-bg-activated-clr: #970b41; | |
--plugin-metabind-pbar-text-offset-top: 43%; | |
--plugin-metabind-pbar-height: 24px; | |
--plugin-metabind-pbar-color: #C01E50; | |
--plugin-iconize-icon-clr: #FFFFFF; | |
--plugin-linkembed-box-padding: 10px; | |
--plugin-linkembed-box-left-bg-clr: #353333; | |
--plugin-linkembed-box-right-bg-clr: #1f1f1f; | |
--plugin-linkembed-txt-desc-clr: #fa306d; | |
--plugin-linkembed-txt-desc-size: 9pt; | |
--plugin-favicon-icon-height: 20px; | |
--plugin-favicon-icon-margin-bottom: 5px; | |
--plugin-favicon-icon-padding-left: 5px; | |
--plugin-favicon-icon-padding-right: 4px; | |
--plugin-consolemd-box-bg-clr: #0c3317cc; | |
--plugin-consolemd-txt-font-face: "Office Code Pro D Light"; | |
--plugin-consolemd-txt-font-size: 10px; | |
--plugin-callout-box-bg-clr: #0e0e0eb3; | |
} | |
/* | |
animation: pulse | |
*/ | |
.anim_pulse | |
{ | |
animation: pulse 2s infinite; | |
cursor: pointer; | |
} | |
@keyframes pulse | |
{ | |
0% | |
{ | |
transform: scale(0.95); | |
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7); | |
} | |
70% | |
{ | |
transform: scale(1); | |
box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); | |
} | |
100% | |
{ | |
transform: scale(0.95); | |
box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); | |
} | |
} | |
/* | |
General > Animation: Blink | |
*/ | |
.anim_blink | |
{ | |
animation: blinker 1s linear infinite; | |
} | |
@keyframes blinker | |
{ | |
50% | |
{ | |
opacity: 0; | |
} | |
} | |
/* | |
General > Animation: Glow | |
*/ | |
.glow | |
{ | |
font-size: 13px; | |
color: #fff; | |
text-align: center; | |
-webkit-animation: glow 1s ease-in-out infinite alternate; | |
-moz-animation: glow 1s ease-in-out infinite alternate; | |
animation: glow 1s ease-in-out infinite alternate; | |
} | |
@keyframes glow | |
{ | |
from | |
{ | |
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073; | |
} | |
to | |
{ | |
text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6; | |
} | |
} | |
/* | |
Callout Boxes | |
fix code block background color inside callout box. | |
*/ | |
.callout-content > .code-styler.code-styler-style-inline .cm-s-obsidian span.cm-inline-code, .code-styler.code-styler-style-inline .markdown-rendered :not(pre) > code:not([class*=blur]), .code-styler.code-styler-style-inline code.code-styler-settings-inline-code | |
{ | |
background-color: var(--plugin-callout-box-bg-clr); | |
} | |
.callout-content > pre[class*="language-"] | |
{ | |
background-color: var(--plugin-callout-box-bg-clr); | |
} | |
/* | |
@plugin : Console Markdown Plugin | |
@url : https://github.com/dellermann/obsidian-console | |
Requires the console markdown plugin | |
*/ | |
.callout-content pre[class*='language-console'], .language-console | |
{ | |
background-color: var(--plugin-consolemd-box-bg-clr) !important; | |
font-family: var(--plugin-consolemd-txt-font-face) !important; | |
font-size: var(--plugin-consolemd-txt-font-size); | |
} | |
/* | |
@plugin : Console Markdown Plugin | |
@url : https://github.com/dellermann/obsidian-console | |
Add spacing between the > character and the code | |
*/ | |
.console-command | |
{ | |
color: var(--code-function); | |
padding-left: 7px; | |
} | |
/* | |
Obsidian Settings > Plugin List | |
Expanded Category | |
*/ | |
div.style-settings-heading[data-level="0"] | |
{ | |
height: 33px; | |
background-color: var(--main-themescfg-cat-bg-activated-clr); | |
} | |
/* | |
Obsidian Settings > Plugin List | |
Collapse Category | |
*/ | |
div.style-settings-heading[data-level="0"].is-collapsed | |
{ | |
box-shadow: none; | |
background-color: var(--main-themescfg-cat-bg-collapsed-clr); | |
} | |
/* | |
Obsidian Settings > Plugin List | |
Aetherx Category | |
*/ | |
div.style-settings-heading[data-id="blue-topaz-theme-aetherx"] | |
{ | |
background: #5e0b24 !important; | |
} | |
/* | |
Obsidian Settings > Plugin List | |
Level 0 > Plugin Name | |
*/ | |
.setting-item.setting-item-heading.style-settings-heading[data-level="0"] .setting-item-name | |
{ | |
font-size: 10pt; | |
} | |
/* | |
Obsidian Settings > Plugin List | |
Level 1 > Plugin Name | |
*/ | |
.setting-item.setting-item-heading.style-settings-heading[data-level="1"] .setting-item-name | |
{ | |
font-size: 9pt; | |
} | |
/* | |
Plugin List > Arrow | |
*/ | |
.setting-item.setting-item-heading.style-settings-heading.is-collapsed .style-settings-collapse-indicator | |
{ | |
opacity: 1; | |
} | |
/* | |
Plugin List > Gap to left | |
*/ | |
.style-settings-container | |
{ | |
padding-bottom: 30px !important; | |
} | |
div.style-settings-heading[data-level="0"] + .style-settings-container | |
{ | |
padding: 20px 0px; | |
} | |
/* | |
Obsidian Settings > Plugin List | |
Setting Name | |
*/ | |
.setting-item-name | |
{ | |
padding-left: 25px; | |
} | |
/* | |
Obsidian Settings > Plugin List | |
Setting Description | |
*/ | |
.setting-item-description | |
{ | |
color: #797979; | |
padding-left: 25px; | |
} | |
/* | |
Obsidian Settings > Plugin List | |
Add gap to last setting of each category | |
*/ | |
.setting-item-description > div | |
{ | |
padding-top: 13px; | |
} | |
/* | |
Control Element > Range Slider | |
*/ | |
input[type="range"] | |
{ | |
/* removing default */ | |
-webkit-appearance: none; | |
appearance: none; | |
width: 50%; | |
cursor: pointer; | |
outline: none; | |
height: 3px; | |
background: #424142; | |
border-radius: 16px; | |
} | |
/* Track: Webkit */ | |
input[type="range"]::-webkit-slider-runnable-track | |
{ | |
padding-top: 2px; | |
background: #424142; | |
border-radius: 16px; | |
} | |
/* Track: Mozilla Firefox */ | |
input[type="range"]::-moz-range-track | |
{ | |
padding-top: 2px; | |
background: #ac0f50; | |
border-radius: 16px; | |
} | |
input[type="range"]::-webkit-slider-thumb | |
{ | |
/* removing default */ | |
-webkit-appearance: none; | |
appearance: none; | |
cursor: pointer; | |
height: 15px; | |
width: 15px; | |
background-color: #eb1e6c; | |
border-radius: 50%; | |
border: 1px solid #e71163; | |
animation: pulse 2s infinite; | |
} | |
input[type="range"]::-moz-range-thumb | |
{ | |
cursor: pointer; | |
height: 15px; | |
width: 15px; | |
background-color: #eb1e6c; | |
border-radius: 50%; | |
border: 1px solid #e71163; | |
animation: pulse 2s infinite; | |
} | |
/* | |
@plugin : Link Facicons | |
@url : https://github.com/joethei/obsidian-link-favicon | |
adds more padding between favicon and text | |
*/ | |
img.link-favicon | |
{ | |
height: var(--plugin-favicon-icon-height) !important; | |
display: inline-block; | |
vertical-align: middle; | |
padding-right: var(--plugin-favicon-icon-padding-right); | |
padding-left: var(--plugin-favicon-icon-padding-right); | |
border: none; | |
} | |
/* | |
@plugin : Link Facicons | |
@url : https://github.com/joethei/obsidian-link-favicon | |
remove giant gap to the right of favicons | |
*/ | |
.external-link | |
{ | |
padding-right: 3px; | |
} | |
/* | |
@plugin : Link Embed | |
@url : https://github.com/Seraphli/obsidian-link-embed | |
Adds padding between outter edge and icon | |
*/ | |
._lc._sm:not(.xd) .wc | |
{ | |
padding: var(--plugin-linkembed-box-padding); | |
background: var(--plugin-linkembed-box-left-bg-clr); | |
} | |
/* | |
@plugin : Link Embed | |
@url : https://github.com/Seraphli/obsidian-link-embed | |
right side background | |
*/ | |
._lc._sm:not(.xd) .wt | |
{ | |
background: var(--plugin-linkembed-box-right-bg-clr); | |
} | |
/* | |
@plugin : Link Embed | |
@url : https://github.com/Seraphli/obsidian-link-embed | |
Description + title text color | |
*/ | |
.em > a, .tc > a, .th > a | |
{ | |
color: var(--plugin-linkembed-txt-desc-clr); | |
} | |
/* | |
@plugin : Link Embed | |
@url : https://github.com/Seraphli/obsidian-link-embed | |
smaller description | |
*/ | |
._lc > .wf > .wt > ._f0 > .td | |
{ | |
font-size: var(--plugin-linkembed-txt-desc-size); | |
} | |
/* | |
@plugin : Iconize | |
@url : https://github.com/FlorianWoelki/obsidian-iconize | |
*/ | |
.iconize-icon svg | |
{ | |
color: var(--plugin-iconize-icon-clr) !important; | |
fill: var(--plugin-iconize-icon-clr) !important; | |
} | |
/* | |
Font Awesome Icons | |
*/ | |
.isc-icon > *:first-child | |
{ | |
color: var(--plugin-iconize-icon-clr); | |
} | |
.isc-icon.icon-emoji-icon > *:first-child | |
{ | |
color: var(--plugin-iconize-icon-clr); | |
} | |
.isc-icon.isc-fas > *:first-child | |
{ | |
color: var(--plugin-iconize-icon-clr); | |
} | |
.isc-icon:not(.isc-char-icon) | |
{ | |
display: inline-flex; | |
vertical-align: text-top; | |
padding-top: calc(var(--font-text-size) / 8); | |
} | |
.isc-icon > img, | |
.isc-icon > svg | |
{ | |
cursor: default !important; | |
height: 1em; | |
width: 1em; | |
} | |
.view-content .mod-cm6 .cm-isc > .isc-icon > img, | |
.view-content .mod-cm6 .cm-isc > .isc-icon > svg | |
{ | |
cursor: pointer; | |
color: var(--plugin-iconize-icon-clr); | |
} | |
.markdown-source-view .isc-icon > img, | |
.markdown-source-view .isc-icon > svg, | |
.markdown-preview-view .isc-icon > img, | |
.markdown-preview-view .isc-icon > svg | |
{ | |
color: var(--plugin-iconize-icon-clr); | |
height: var(--font-text-size, var(--editor-font-size, 1em)); | |
width: var(--font-text-size, var(--editor-font-size, 1em)); | |
} | |
.markdown-source-view .HyperMD-header-1 .isc-icon > img, | |
.markdown-source-view .HyperMD-header-1 .isc-icon > svg, | |
.markdown-preview-view h1 .isc-icon > img, | |
.markdown-preview-view h1 .isc-icon > svg | |
{ | |
color: var(--plugin-iconize-icon-clr); | |
height: var(--h1-size); | |
width: var(--h1-size); | |
} | |
.markdown-source-view .HyperMD-header-2 .isc-icon > img, | |
.markdown-source-view .HyperMD-header-2 .isc-icon > svg, | |
.markdown-preview-view h2 .isc-icon > img, | |
.markdown-preview-view h2 .isc-icon > svg | |
{ | |
color: var(--plugin-iconize-icon-clr); | |
height: var(--h2-size); | |
width: var(--h2-size); | |
} | |
.markdown-source-view .HyperMD-header-3 .isc-icon > img, | |
.markdown-source-view .HyperMD-header-3 .isc-icon > svg, | |
.markdown-preview-view h3 .isc-icon > img, | |
.markdown-preview-view h3 .isc-icon > svg | |
{ | |
color: var(--plugin-iconize-icon-clr); | |
height: var(--h3-size); | |
width: var(--h3-size); | |
} | |
.markdown-source-view .HyperMD-header-4 .isc-icon > img, | |
.markdown-source-view .HyperMD-header-4 .isc-icon > svg, | |
.markdown-preview-view h4 .isc-icon > img, | |
.markdown-preview-view h4 .isc-icon > svg | |
{ | |
color: var(--plugin-iconize-icon-clr); | |
height: var(--h4-size); | |
width: var(--h4-size); | |
} | |
.markdown-source-view .HyperMD-header-5 .isc-icon > img, | |
.markdown-source-view .HyperMD-header-5 .isc-icon > svg, | |
.markdown-preview-view h5 .isc-icon > img, | |
.markdown-preview-view h5 .isc-icon > svg | |
{ | |
color: var(--plugin-iconize-icon-clr); | |
height: var(--h5-size); | |
width: var(--h5-size); | |
} | |
.markdown-source-view .HyperMD-header-6 .isc-icon > img, | |
.markdown-source-view .HyperMD-header-6 .isc-icon > svg, | |
.markdown-preview-view h6 .isc-icon > img, | |
.markdown-preview-view h6 .isc-icon > svg | |
{ | |
color: var(--plugin-iconize-icon-clr); | |
height: var(--h6-size); | |
width: var(--h6-size); | |
} | |
.suggestion-container svg | |
{ | |
color: var(--plugin-iconize-icon-clr); | |
} | |
.cm-iconize-icon | |
{ | |
color: var(--plugin-iconize-icon-clr); | |
} | |
.callout .callout-icon.isc-icon > img, | |
.callout .callout-icon.isc-icon > svg | |
{ | |
color: var(--plugin-iconize-icon-clr); | |
height: 16px; | |
width: 16px; | |
} | |
.suggestion-container.isc .suggestion-flair | |
{ | |
color: var(--plugin-iconize-icon-clr); | |
opacity: 1; | |
} | |
.suggestion-container.isc .suggestion-flair > .isc-icon | |
{ | |
color: var(--plugin-iconize-icon-clr); | |
} | |
/* | |
File Explorer | |
*/ | |
/* | |
Right-side tags for file types | |
*/ | |
.nav-file-tag | |
{ | |
background-color: var(--file-explorer-tag-accent); | |
} | |
/* | |
add spacing to left of each file | |
*/ | |
.nav-file | |
{ | |
padding-left: var(--file-explorer-file-indent-left); | |
} | |
/* | |
@plugin : Metabind Plugin | |
@url : https://github.com/mProjectsCode/obsidian-meta-bind-plugin | |
*/ | |
/* | |
Progress Bar | |
*/ | |
.mb-progress-bar-label-left, .mb-progress-bar-value, .mb-progress-bar-label-right | |
{ | |
top: var(--plugin-metabind-pbar-text-offset-top); | |
} | |
.mb-progress-bar-progress | |
{ | |
height: var(--plugin-metabind-pbar-height); | |
background: var(--plugin-metabind-pbar-color); | |
} | |
/* | |
rename folder / file | |
@NOTE : must use !important for font color. Somewhere else also using the same flag. | |
*/ | |
.nav-file-title-content.is-being-renamed, .nav-folder-title-content.is-being-renamed | |
{ | |
background-color: var(--file-explorer-rename-bg); | |
color: var(--file-explorer-rename-text) !important; | |
padding-left: var(--file-explorer-rename-padding-left); | |
font-weight: var(--file-explorer-rename-font-weight); | |
} | |
/* | |
Remove padding from headers | |
Edit Mode Only | |
padding-bottom requires !important | |
@TODO: check where primary value comes from | |
*/ | |
.cm-s-obsidian .cm-line.HyperMD-header | |
{ | |
padding-top: var(--edit-header-padding-top); | |
padding-bottom: var(--edit-header-padding-bottom) !important; | |
} | |
/* | |
bigger gap between header lines | |
Reading mode only | |
--- | |
*/ | |
body.fancy-hr-no-icon .markdown-rendered hr | |
{ | |
margin-block-start: var(--read-hr-padding-top); | |
margin-block-end: var(--read-hr-padding-bottom); | |
} | |
/* | |
@plugin : Short Links Plugin | |
@url : https://github.com/scottwillmoore/obsidian-short-links | |
This removes the icons for certain types because we dont really need them. | |
*/ | |
.lucide-hash, .lucide-external-link, .lucide-file | |
{ | |
display: none; | |
margin: 0px; | |
} | |
/* | |
Codeblock > Text | |
*/ | |
.cm-s-obsidian span.cm-footref, .cm-s-obsidian span.cm-blockid | |
{ | |
color: var(--edit-link-codeblock-color-text); | |
} | |
/* | |
Codeblock > Add icon | |
A block is an internal link with the ^ appended to the end | |
![[MyPage^Block]] | |
*/ | |
.cm-blockid::before | |
{ | |
color: var(--edit-link-codeblock-color-icon); | |
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 24 24' fill='%23c72060'%3E%3Cpath d='m21.406 6.086-9-4a1.001 1.001 0 0 0-.813 0l-9 4c-.02.009-.034.024-.054.035-.028.014-.058.023-.084.04-.022.015-.039.034-.06.05a.87.87 0 0 0-.19.194c-.02.028-.041.053-.059.081a1.119 1.119 0 0 0-.076.165c-.009.027-.023.052-.031.079A1.013 1.013 0 0 0 2 7v10c0 .396.232.753.594.914l9 4c.13.058.268.086.406.086a.997.997 0 0 0 .402-.096l.004.01 9-4A.999.999 0 0 0 22 17V7a.999.999 0 0 0-.594-.914zM12 4.095 18.538 7 12 9.905l-1.308-.581L5.463 7 12 4.095zm1 15.366V11.65l7-3.111v7.812l-7 3.11z'%3E%3C/path%3E%3C/svg%3E"); | |
position: relative; | |
top: 2px; | |
margin-left: 0px; | |
padding-right: 5px; | |
background-size: 10px 20px; | |
font-size: 7px; | |
} | |
/* | |
reverse text | |
*/ | |
.txt-reverse | |
{ | |
unicode-bidi: bidi-override; | |
direction: rtl; | |
} | |
/* | |
dim | |
*/ | |
.txt-dim | |
{ | |
filter: brightness(50%); | |
} | |
/* | |
standout - white background, dark text | |
*/ | |
.txt-highlight | |
{ | |
background-color: #FFF; | |
color: #000; | |
padding-left: 4px; | |
padding-right: 4px; | |
font-weight: bold; | |
} | |
/* | |
run code text output | |
*/ | |
.stdout | |
{ | |
font-size: 9pt !important; | |
} | |
/* | |
Stops plugin from pushing folder arrows down | |
@plugin : folder-notes | |
@ref : .obsidian\plugins\folder-notes\styles.css | |
*/ | |
.fn-whitespace-stop-collapsing .nav-folder-collapse-indicator | |
{ | |
margin-top: 0px !important; | |
} | |
/* | |
Add separators to file preview list | |
*/ | |
/* | |
@replete Folder Separators v2 tested with Obsidian 1.1.9 | |
*/ | |
/* | |
Separator below nav item | |
*/ | |
.nav-folder-children > [class*=nav-]:has([data-path="Backups"])::after, | |
.nav-folder-children > [class*=nav-]:has([data-path="WSL"])::before, | |
.nav-folder-children > [class*=nav-]:has([data-path="C#"])::after | |
{ | |
content:''; | |
display:block; | |
height:1px; | |
width:100%; | |
background:linear-gradient(to right, var(--divider-color), transparent); | |
margin:6px 0 6px -8px; | |
} | |
/* | |
separator above Attachments Menu Item | |
*/ | |
.nav-folder-children > [class*=nav-]:has([data-path="Software"])::before | |
{ | |
content:''; | |
display:block; | |
height:2px; | |
width:100%; | |
background:linear-gradient(to right, #a30245, transparent); | |
margin:16px 0px 16px -8px; | |
} | |
/* | |
separator above Attachments Menu Item | |
*/ | |
.nav-folder-children > [class*=nav-]:has([data-path="Attachments"])::before | |
{ | |
content:''; | |
display:block; | |
height:2px; | |
width:100%; | |
background:linear-gradient(to right, #a30245, transparent); | |
margin:16px 0px 16px -8px; | |
} | |
/* | |
separator above Attachments Menu Item | |
*/ | |
.nav-folder-children > [class*=nav-]:has([data-path="Users"])::before | |
{ | |
content:''; | |
display:block; | |
height:2px; | |
width:100%; | |
background:linear-gradient(to right, #a30245, transparent); | |
margin:16px 0px 16px -8px; | |
} | |
/* | |
separator above Attachments Menu Item | |
*/ | |
.nav-folder-children > [class*=nav-]:has([data-path="Projects"])::before | |
{ | |
content:''; | |
display:block; | |
height:2px; | |
width:100%; | |
background:linear-gradient(to right, #a30245, transparent); | |
margin:16px 0px 16px -8px; | |
} | |
/* | |
separator above Attachments Menu Item | |
*/ | |
.nav-folder-children > [class*=nav-]:has([data-path="User Configs"])::before | |
{ | |
content:''; | |
display:block; | |
height:2px; | |
width:100%; | |
background:linear-gradient(to right, #a30245, transparent); | |
margin:16px 0px 16px -8px; | |
} | |
/* | |
separator above Windows Menu Item | |
*/ | |
.nav-folder-children > [class*=nav-]:has([data-path="Windows"])::before | |
{ | |
content:''; | |
display:block; | |
height:2px; | |
width:100%; | |
background:linear-gradient(to right, #a30245, transparent); | |
margin:16px 0px 16px -8px; | |
} | |
/* | |
Dark grey box shadow for objects like Dataview (table of contents) | |
and embed blocks | |
*/ | |
.markdown-source-view.mod-cm6 .cm-embed-block:hover | |
{ | |
box-shadow: none !important; | |
} | |
/* | |
table header colors | |
*/ | |
.markdown-rendered thead tr | |
{ | |
background-color: #df0257 !important; | |
height: 35px !important; | |
} | |
body.table-style-two :is(.markdown-preview-view,.markdown-rendered) th | |
{ | |
border-bottom: 2px solid #ff006a !important; | |
} | |
/* | |
queries | |
*/ | |
:not(pre)>code:not([class*='language-']):not([class*="blur-"]) | |
{ | |
color: var(--code-styler-inline-colour) !important; | |
} | |
.code-styler-header-language-tag-query | |
{ | |
display: none !important; | |
} | |
.internal-query | |
{ | |
margin: 0; | |
border: 0px !important; | |
border-top: 0px !important; | |
} | |
.search-result:not(.is-collapsed) .search-result-file-title | |
{ | |
font-size: 11pt !important; | |
background-color: #2a2a2a; | |
border-radius: 2px !important; | |
height: 28px !important; | |
vertical-align: middle; | |
} | |
.search-results-children .search-result-file-title .tree-item-inner | |
{ | |
line-height: unset !important; | |
} | |
.search-result > .tree-item-self.is-clickable:hover | |
{ | |
background-color: #A30245 !important; | |
cursor: pointer !important; | |
} | |
span.search-result-file-matched-text | |
{ | |
background: none !important; | |
} | |
.search-result-file-matches | |
{ | |
box-shadow: none !important; | |
} | |
.language-query .code-styler-header-text | |
{ | |
padding-left: 15px !important; | |
} | |
[class^=code-styler-header-container].language-query::after | |
{ | |
display: none !important; | |
} | |
/* Hide the query header text */ | |
.internal-query-header { | |
display: none !important; | |
} | |
.internal-query .search-result-container | |
{ | |
padding: 2px 0px 0px 0px !important; | |
} | |
/* | |
Button Plugin | |
*/ | |
.theme-dark button.button-default | |
{ | |
border: 0.5px solid #cb2160; | |
background-color: #262626; | |
padding: 5px 15px; | |
margin: 0px; | |
font-size: 10pt; | |
margin-bottom: 10px; | |
} | |
.theme-dark button.button-default:hover | |
{ | |
animation: pulse 2s infinite; | |
cursor: pointer; | |
} | |
/* | |
Tab Button (Active) | |
*/ | |
.workspace-tab-header.mod-active .workspace-tab-header-inner-title | |
{ | |
font-weight: normal; | |
} | |
body.transparent-tab-style.theme-dark .workspace-split.mod-root .workspace-tab-header.is-active.mod-active | |
{ | |
background-color: #a30245; | |
font-weight: normal; | |
} | |
/* | |
Vault Statistics Plugin | |
Show all | |
*/ | |
.obsidian-vault-statistics--item | |
{ | |
display: initial !important; | |
} | |
/* | |
file tree view > hover selected | |
*/ | |
body:not(.is-grabbing) .tree-item-self.is-clickable.nav-file-title.is-active:hover, body:not(.is-grabbing) .tree-item-self.is-clickable.nav-file-title:hover, .nav-file:not(.is-active):hover .nav-file-title, .nav-folder:hover .nav-folder-content | |
{ | |
opacity: 1 !important; | |
background-color: var(--nav-item-background-active) !important; | |
} | |
/* | |
footnote | |
*/ | |
a.footnote-link | |
{ | |
color: #ff3e0e; | |
font-weight: bold; | |
} | |
/* | |
footnote > back arrow | |
*/ | |
a.footnote-backref | |
{ | |
color: #4531ff !important; | |
} | |
/* | |
footnote > front number | |
*/ | |
body.colorful-ordered-list ol li::marker, body.colorful-ordered-list ol li::before, body.colorful-ordered-list .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-1.cm-line div.cm-fold-indicator ~ span.cm-formatting.cm-formatting-list-ol, body.colorful-ordered-list .cm-formatting.cm-formatting-list.cm-formatting-list-ol, body.colorful-ordered-list .markdown-source-view.mod-cm6 .HyperMD-list-line.HyperMD-list-line-1.cm-line span.cm-hmd-list-indent ~ span.cm-formatting.cm-formatting-list-ol { | |
color: #ff3e0e; | |
font-weight: bold; | |
} | |
/* | |
document property tag pills | |
*/ | |
.multi-select-pill | |
{ | |
padding-left: 2px; | |
padding-right: 2px; | |
padding-top: 6px; | |
font-size:9pt; | |
} | |
/* | |
document property that show at the top of each page. | |
Adjusts the line height of each item | |
*/ | |
.metadata-property | |
{ | |
line-height: 20px; | |
} | |
/* | |
Frontmatter | |
Moves the "Add Property" button to far left of frontmatter values overlapping useless "Property" label. | |
*/ | |
.workspace-split.mod-root .metadata-container .metadata-add-button | |
{ | |
left: 0; | |
background-color: #a9043d; | |
cursor: pointer; | |
color: #FFF !important; | |
} | |
/* | |
document property that show at the top of each page. | |
Add Property button text pushed down some | |
*/ | |
.metadata-add-button > .text-button-label | |
{ | |
padding-top: 4px !important; | |
} | |
.metadata-property-key | |
{ | |
background-color: #CCC; | |
} | |
/* | |
document property that show at the top of each page. | |
add slight bg color to left side values | |
*/ | |
.metadata-property-key | |
{ | |
background-color: #202020; | |
} | |
.metadata-property-key-input | |
{ | |
color: #f8146c !important; | |
font-weight: bold !important; | |
} | |
/* | |
@plugin : github embed plugin | |
@url : https://github.com/MrGVSV/obsidian-github-embeds | |
removes <p></p> gap between a link and the bottom of a table | |
*/ | |
._embed-container_tpqtd_1 | |
{ | |
margin: auto !important; | |
} | |
/* | |
Remove bold from strong words that are bold | |
*/ | |
*:not(font)>em>strong, | |
*:not(font)>strong>em, | |
.cm-strong.cm-em { | |
font-weight: normal !important; | |
font-family: var(--font-text) !important; | |
} | |
span.cm-strong, | |
:not(font)>strong, | |
.cm-s-obsidian .cm-highlight.cm-strong { | |
font-weight: normal !important; | |
font-family: var(--font-text) !important; | |
} | |
span.cm-strong, :not(font)>strong, .cm-s-obsidian .cm-highlight.cm-strong | |
{ | |
color: var(--accent-strong) !important; | |
font-family: var(--font-text) !important; | |
font-weight: normal; | |
} | |
/* | |
highlights done with | |
== Text == | |
*== Text == * | |
*/ | |
body:not(.no-rounded-corners-highlight):not(.all-rounded-corners-highlight) .cm-s-obsidian .cm-widgetBuffer[aria-hidden="true"]+span.cm-highlight:has(+ .cm-widgetBuffer[aria-hidden="true"]) | |
{ | |
padding-left: 5px; | |
padding-right: 5px; | |
} | |
body:not(.no-rounded-corners-highlight):not(.all-rounded-corners-highlight) .cm-s-obsidian .cm-widgetBuffer[aria-hidden="true"]+span.cm-highlight:has(+ .cm-widgetBuffer[aria-hidden="true"]) | |
{ | |
padding-top: 0px; | |
padding-bottom: 0px; | |
font-size: 10pt; | |
} | |
/* | |
border shadow for images | |
exclude favicon images | |
*/ | |
body.image-border img:not([class*='link-favicon']) | |
{2023-11-01 22:18:10 | |
filter: none; | |
border: 3px solid #424242; | |
padding: 8px !important; | |
} | |
.block-language-gist { | |
margin-bottom: -50px; | |
} | |
/* | |
Background color for content when clicking a header and going to that section | |
*/ | |
.is-flashing | |
{ | |
background-color: #303030 !important; | |
} | |
.is-flashing > .cm-header | |
{ | |
padding-left: 15px; | |
padding-right: 15px; | |
} | |
/* | |
trying to straighten out lists • | |
*/ | |
ol | |
{ | |
margin-left: -20px; | |
} | |
li | |
{ | |
list-style: none; | |
} | |
:not([class*='dataview']) > li::before | |
{ | |
position: relative; | |
top: -2px; | |
color: #ffb2c5 !important; | |
content: "●"; | |
margin-left: -15px; | |
padding-right: 13px; | |
background-size: 10px 20px; | |
font-size: 7px; | |
} | |
/* | |
change dataview tables | |
*/ | |
ul.dataview.list-view-ul>li:not(.task-list-item) | |
{ | |
font-size: 14px; | |
margin-left: 15px; | |
} | |
ol.dataview.list-view-ol>li:not(.task-list-item) | |
{ | |
font-size: 14px; | |
margin-left: 15px; | |
} | |
/* | |
change dataview tables font color for links | |
color: #ffb2c5 !important; | |
*/ | |
ul.dataview.list-view-ul>li:not(.task-list-item) a | |
{ | |
color: #a5a3ff !important; | |
} | |
ol.dataview.list-view-ol>li:not(.task-list-item) a | |
{ | |
color: #a5a3ff !important; | |
} | |
:not(.default-ol-list-marker) .cm-formatting.cm-formatting-list.cm-formatting-list-ol | |
{ | |
margin-left: 0px; | |
padding-right: 9px; | |
} | |
/* | |
requires columns plugin | |
creates a column / box with background color | |
*/ | |
.wiki_col_right | |
{ | |
border: 1px solid #494949; | |
padding: 14px; | |
background-color:#2a2a2a; | |
} | |
/* | |
table styles | |
*/ | |
.left | |
{ | |
float: left; | |
} | |
.right | |
{ | |
float: right; | |
} | |
.clear | |
{ | |
clear:both; | |
} | |
.t_w_30 | |
{ | |
width: 30%; | |
} | |
.t_w_40 | |
{ | |
width: 40%; | |
} | |
.t_w_50 | |
{ | |
width: 50%; | |
} | |
/* | |
remove padding from columns plugin | |
*/ | |
.columnParent, div[data-callout="col"].callout > div.callout-content | |
{ | |
padding: 0px; | |
} | |
/* | |
add more padding to the right of a list item | |
*/ | |
.list-bullet | |
{ | |
padding-right: 10px; | |
} | |
/* | |
table > change header link font-size | |
*/ | |
.dataview.table-view-table span a.internal-link | |
{ | |
font-size: 8pt; | |
} | |
/* | |
table > change top category column font size | |
*/ | |
.dataview.table-view-table .table-view-th | |
{ | |
font-size: 8pt; | |
} | |
.markdown-rendered.show-indentation-guide | |
{ | |
font-size: 11pt; | |
} | |
/* | |
Code styler plugin | |
add padding between the gutter (line numbers) and the actual code for that line. | |
*/ | |
.cm-atom.cm-hmd-codeblock | |
{ | |
padding-left: 10px; | |
} | |
/* | |
Code styler plugin | |
add padding between the gutter (line numbers) and the actual code for that line. | |
original: calc(12px + var | |
*/ | |
.code-styler .markdown-source-view .HyperMD-codeblock:has(.code-styler-line-number) { | |
padding-left: calc(20px + var(--language-border-width) + var(--line-number-gutter-width) + var(--line-number-gutter-padding)) !important; | |
} | |
/* | |
Code Block and Admonition | |
Edit Code Block Icon | |
*/ | |
.markdown-source-view.mod-cm6 .edit-block-button | |
{ | |
padding: 0; | |
top: 5px; | |
border-radius: var(--radius-s); | |
right: 10px; | |
opacity: 0.3; | |
} | |
/* | |
Code Blocks | |
Icon to the far right </> which represents "Edit". | |
Can be used with FontAwesome SVG files. | |
Apply the desired FontAwesome icon to a random folder, inspect element to grab the svg path. | |
Paste that svg path inside: | |
https://yoksel.github.io/url-encoder/ | |
Copy the output in the "Take Encoded" box and paste into the CSS below between %3C and svg%3E | |
*/ | |
.markdown-source-view.mod-cm6 .edit-block-button::before | |
{ | |
width: 24px; | |
font-size: 10px; | |
text-align: center; | |
content: var(--edit-button-icon); | |
margin-left: 0em; | |
padding: 4px; | |
padding-top: 8px; | |
} | |
/* | |
Code Blocks | |
Icon to the far right </> which represents "Edit". | |
same as above, but adjusts opacity. | |
*/ | |
.markdown-source-view.mod-cm6 .edit-block-button | |
{ | |
padding: 0; | |
top: 0px; | |
border-radius: var(--radius-s); | |
right: 10px; | |
opacity: 0.7; | |
} | |
/* | |
Admonition > Warning | |
*/ | |
.callout[data-callout="warning"] | |
{ | |
--callout-title-color: var(--callout-type-basic-darkcolor); | |
--callout-color: var(--callout-type-basic-lightcolor); | |
--callout-icon: <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 612 612" enable-background="new 0 0 612 612" xml:space="preserve" fill="#ffffff"><g transform="matrix(15 0 0 15 -5924 -6649.4327)"></g><g transform="matrix(-3.75 0 0 3.75 2295.9997 -3330.35765)"><path stroke="#000000" stroke-miterlimit="10" d="M492.417,955.35h38.25v-62.156l38.25,90.844h-38.25v62.156L492.417,955.35z"></path></g></svg> !important; | |
} | |
/* | |
Opengate background color | |
*/ | |
.open-gate-view .open-gate-iframe, .open-gate-view .open-gate-webview | |
{ | |
background-color: transparent; | |
} | |
/* | |
code block header text color | |
*/ | |
.code-styler-header-text | |
{ | |
color: #777777; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment