Skip to content

Instantly share code, notes, and snippets.

@Aetherinox
Last active November 20, 2023 23:48
Show Gist options
  • Save Aetherinox/e3b2b174584d4c7eb683347741889138 to your computer and use it in GitHub Desktop.
Save Aetherinox/e3b2b174584d4c7eb683347741889138 to your computer and use it in GitHub Desktop.
Obsidian: CSS Override
/* @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