Last active
August 20, 2024 14:48
-
-
Save bryanstedman/93edcb18a1eae169a522848ce6f4c434 to your computer and use it in GitHub Desktop.
My modified Minimal Obsidian.md theme - credit @kepano
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
/* | |
Minimal Obsidian by @kepano | |
This theme is provided "as is", and is focused on my personal use | |
of Obsidian. As such I have neither optimized nor tested it with | |
all the features of Obsidian that I don't frequently use. | |
Since this theme modifies significant parts of the Obsidian interface, | |
it might break with future updates. | |
It also may be incompatible with other bits of custom CSS you have. | |
The file is organized in such a way that you can remove or comment | |
out sections that may be causing conflicts. | |
OPTIONS | |
---------------------------------------------------------------- | |
DISABLED FEATURES | |
These features are hidden in pursuit of a more focused editing | |
experience. Remove each line if you want to re-activate the feature */ | |
.status-bar, /* Status bar */ | |
::-webkit-scrollbar, /* Scroll bars */ | |
.tooltip, /* Tooltips */ | |
.titlebar-button-container, | |
.pane-list-item-ending-flair:not(.tag-pane-tag-count), /* Search counts */ | |
.workspace-ribbon-collapse-btn { /* Sidebar collapse */ | |
display:none !important; | |
} | |
/* Hides the name of the root folder */ | |
.nav-folder.mod-root > .nav-folder-title .nav-folder-title-content { | |
display:none; | |
} | |
/* Remove this if you re-enable status bar */ | |
.workspace-split.mod-left-split > .workspace-leaf-resize-handle, | |
.workspace-split.mod-right-split > .workspace-leaf-resize-handle { | |
height:100%; | |
} | |
.search-result-file-matches, /* File matches in search */ | |
.backlink-pane .search-result-file-matches, /* File matches in backlinks */ | |
.workspace-leaf-content[data-type=starred] .nav-header { /* Starred section header */ | |
} | |
:root { | |
/*---------------------------------------------------------------- | |
COLORS | |
Most colors in this theme are driven from the following values, | |
meaning that the backgrounds, borders, and various shades are | |
automatically generated for you. | |
- Base color is used for the backgrounds, text and borders. | |
- Accent color is used for links and some interactive elements. | |
The colors use HSL (hue, saturation, lightness) | |
- Hue (0-360 degrees):0 is red, 120 is green, and 240 is blue | |
- Saturation (0-100%):0% is desaturated, 100% is full saturation | |
- Lightness (0-100%):0% is black, 100% is white | |
*/ | |
--base-h:0; /* Base hue */ | |
--base-s:0%; /* Base saturation */ | |
--base-d:15%; /* Base lightness Dark Mode - 0 is black */ | |
--base-l:96%; /* Base lightness Light Mode - 100 is white */ | |
--accent-h:201; /* Accent hue */ | |
--accent-s:17%; /* Accent saturation */ | |
--accent-d:70%; /* Accent lightness Dark Mode */ | |
--accent-l:50%; /* Accent lightness Light Mode */ | |
/*---------------------------------------------------------------- | |
FONTS */ | |
/* Preview mode and UI */ | |
--text:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; | |
/* Editor mode */ | |
--text-editor:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif; | |
/* Code */ | |
--font-monospace:Menlo,Monaco,Consolas,"Courier New",monospace; | |
--font-normal:16px; | |
--font-small:13px; | |
--font-smaller:11px; | |
--normal-weight:400; /* Switch to 300 if you want thinner default text */ | |
--bold-weight:600; /* Switch to 600 or 700 if you want thicker bold text */ | |
--line-width:40rem; /* I recommend turning off "Readable line length" in Obsidian Settings */ | |
--max-width:80%; /* Maximum width inside file panels */ | |
/*---------------------------------------------------------------- | |
CURSOR | |
Change this to "pointer" if you like the normal style better */ | |
--cursor:default; | |
/*----------------------------------------------------------------*/ | |
} | |
.theme-dark { | |
--background-primary:hsl(var(--base-h),var(--base-s),var(--base-d)); | |
--background-primary-alt:hsl(var(--base-h),var(--base-s),calc(var(--base-d) - 3%)); | |
--background-secondary:hsl(var(--base-h),var(--base-s),var(--base-d)); | |
--background-secondary-alt:hsl(var(--base-h),var(--base-s),var(--base-d)); | |
--background-tertiary:hsl(var(--base-h),var(--base-s),calc(var(--base-d) + 4%)); | |
--background-modifier-border:hsl(var(--base-h),var(--base-s),calc(var(--base-d) + 5%)); | |
--background-modifier-border-hover:hsl(var(--base-h),var(--base-s),calc(var(--base-d) + 10%)); | |
--background-modifier-border-focus:hsl(var(--base-h),var(--base-s),calc(var(--base-d) + 20%)); | |
--background-modifier-box-shadow:rgba(0, 0, 0, 0.3); | |
--text-normal:hsl(var(--base-h),var(--base-s),calc(var(--base-d) + 70%)); | |
--text-muted:hsl(var(--base-h),var(--base-s),calc(var(--base-d) + 45%)); | |
--text-faint:hsl(var(--base-h),var(--base-s),calc(var(--base-d) + 20%)); | |
--text-selection:rgba(50, 50, 50, 1); | |
--background-transparent:hsla(var(--base-h),var(--base-s),var(--base-d),0); | |
--background-translucent:hsla(var(--base-h),var(--base-s),var(--base-d),0.85); | |
--background-match-highlight:hsla(var(--accent-h), 40%, 62%, 0.2); | |
--background-modifier-accent:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-d) - 10%)); | |
--text-accent:hsl(var(--accent-h),var(--accent-s),var(--accent-d)); | |
--text-accent-hover:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-d) + 10%)); | |
--interactive-accent:hsl(var(--accent-h),var(--accent-s),var(--accent-d)); | |
--interactive-accent-hover:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-d) + 10%)); | |
--quote-opening-modifier:hsl(var(--base-h),var(--base-s),calc(var(--base-d) + 15%)); | |
--interactive-accent-rgb:66, 66, 66; | |
--text-highlight-bg:rgba(168, 220, 250, 0.33); | |
} | |
.theme-light { | |
--background-primary:hsl(var(--base-h),var(--base-s),var(--base-l)); | |
--background-primary-alt:hsl(var(--base-h),var(--base-s),calc(var(--base-l) - 2%)); | |
--background-secondary:hsl(var(--base-h),var(--base-s),var(--base-l)); | |
--background-secondary-alt:hsl(var(--base-h),var(--base-s),var(--base-l)); | |
--background-tertiary:hsl(var(--base-h),var(--base-s),calc(var(--base-l) - 5%)); | |
--background-modifier-border:hsl(var(--base-h),var(--base-s),calc(var(--base-l) - 8%)); | |
--background-modifier-border-hover:hsl(var(--base-h),var(--base-s),calc(var(--base-l) - 12%)); | |
--background-modifier-border-focus:hsl(var(--base-h),var(--base-s),calc(var(--base-l) - 20%)); | |
--text-normal:hsl(var(--base-h),var(--base-s),calc(var(--base-l) - 80%)); | |
--text-muted:hsl(var(--base-h),var(--base-s),calc(var(--base-l) - 45%)); | |
--text-faint:hsl(var(--base-h),var(--base-s),calc(var(--base-l) - 25%)); | |
--background-transparent:hsla(var(--base-h),var(--base-s),var(--base-l),0); | |
--background-translucent:hsla(var(--base-h),var(--base-s),var(--base-l),0.85); | |
--background-match-highlight:hsla(var(--accent-h), 40%, 62%, 0.2); | |
--background-modifier-accent:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l) + 10%)); | |
--text-accent:hsl(var(--accent-h),var(--accent-s),var(--accent-l)); | |
--text-accent-hover:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l) - 10%)); | |
--interactive-accent:hsl(var(--accent-h),var(--accent-s),var(--accent-l)); | |
--interactive-accent-hover:hsl(var(--accent-h),var(--accent-s),calc(var(--accent-l) - 10%)); | |
--quote-opening-modifier:hsl(var(--base-h),var(--base-s),calc(var(--base-l) - 15%)); | |
--interactive-accent-rgb:220, 220, 220; | |
--text-selection:rgba(237, 237, 237, 1); | |
} | |
/* --------------- */ | |
/* Frameless mode */ | |
.titlebar, .titlebar-inner { | |
position:fixed; | |
top:0; | |
height:12px; | |
} | |
.titlebar, | |
.titlebar-inner { | |
background:transparent; | |
} | |
.titlebar-text { | |
display:none; | |
} | |
.is-frameless { | |
padding-top:0px !important; | |
} | |
.workspace-split.mod-right-split > .workspace-tabs, | |
.workspace-split.mod-root .view-header { | |
padding-top:4px; | |
} | |
.workspace-split.mod-left-split > .workspace-tabs { | |
padding-top:18px; | |
} | |
.workspace-split.mod-right-split > .workspace-tabs ~ .workspace-tabs, | |
.workspace-split.mod-left-split > .workspace-tabs ~ .workspace-tabs { | |
padding-top:0px; | |
} | |
.is-fullscreen .workspace-split.mod-left-split > .workspace-tabs, | |
.is-fullscreen .workspace-split.mod-root .view-header { | |
padding-top:0px; | |
} | |
/* --------------- */ | |
/* App Menu ribbon moved to the bottom edge */ | |
.workspace-ribbon.mod-left { | |
position:fixed; | |
border-right:0px; | |
margin:0; | |
height:40px; | |
bottom:0; | |
top:auto; | |
display:flex; | |
flex-direction:row; | |
background:var(--background-primary); | |
z-index:17; | |
opacity:0; | |
transition:opacity 0.25s ease-in-out; | |
} | |
.side-dock-actions, | |
.side-dock-settings { | |
display:flex; | |
border-top:1px solid var(--background-modifier-border); | |
background:var(--background-primary); | |
margin:0; | |
} | |
.workspace-ribbon.mod-left:after { | |
border-top:1px solid var(--background-modifier-border); | |
background:var(--background-primary); | |
padding-right:100vw; | |
content:" "; | |
pointer-events: none; | |
} | |
.workspace-ribbon.mod-left .side-dock-ribbon-action { | |
display:inline-block; | |
padding:9px 5px 0 12px; | |
} | |
.workspace-ribbon.mod-left:hover { | |
opacity:1; | |
transition:opacity 0.25s ease-in-out; | |
} | |
.workspace-ribbon.mod-left .workspace-ribbon-collapse-btn { | |
border-top:1px solid var(--background-modifier-border); | |
} | |
.workspace-split.mod-left-split { | |
margin:0; | |
} | |
.workspace-ribbon.mod-right { | |
opacity:1; | |
height:40px; | |
position:fixed; | |
top:auto; | |
right:5px; | |
bottom:0; | |
z-index:999; | |
} | |
.workspace-ribbon-collapse-btn { | |
margin:0; | |
padding-top:8px; | |
} | |
/* --------------- */ | |
/* Fonts */ | |
::selection { background:var(--text-selection); } | |
h1,h2,h3,h4,h5,strong {font-weight:var(--bold-weight);} | |
h1,h2,h3,h4 {letter-spacing:-0.02em;} | |
body, input, button, | |
.cm-s-obsidian .cm-formatting-hashtag, | |
.cm-s-obsidian { | |
font-family:var(--text) !important; | |
font-size:var(--font-normal); | |
font-weight:var(--normal-weight); | |
-webkit-font-smoothing:subpixel-antialiased; | |
} | |
.CodeMirror.cm-s-obsidian.CodeMirror-wrap { | |
max-width: 100%; | |
} | |
.markdown-source-view, | |
.cm-s-obsidian .cm-formatting-hashtag, | |
.cm-s-obsidian { | |
max-width: 100%; | |
line-height:1.7; | |
font-family:var(--text-editor) !important; | |
} | |
.cm-s-obsidian .cm-header, .cm-s-obsidian .cm-strong { | |
font-weight:var(--bold-weight); | |
} | |
.cm-formatting-header { | |
color:var(--text-faint) !important; | |
font-weight:var(--normal-weight) !important; | |
} | |
.view-header-title, | |
.file-embed-title, | |
.markdown-embed-title { | |
letter-spacing:-0.02em; | |
text-align:left; | |
font-size:18px; | |
font-weight:var(--bold-weight); | |
} | |
.empty-state-title, | |
.markdown-preview-view h1, | |
.HyperMD-header-1, | |
.cm-header-1 { | |
letter-spacing:-0.02em; | |
font-size:24px !important; | |
font-weight:var(--bold-weight) !important; | |
} | |
.markdown-preview-view h2, | |
.HyperMD-header-2, | |
.cm-header-2 { | |
letter-spacing:-0.02em; | |
font-size:18px !important; | |
font-weight:var(--bold-weight) !important; | |
} | |
.markdown-preview-view h3, | |
.HyperMD-header-3, | |
.cm-header-3 { | |
letter-spacing:-0em; | |
font-weight:var(--bold-weight) !important; | |
font-size:16px !important; | |
} | |
.markdown-preview-view h4, | |
.HyperMD-header-4, | |
.cm-header-4 { | |
font-variant:small-caps; | |
text-transform:lowercase; | |
letter-spacing:0.05em; | |
color:var(--text-normal); | |
font-weight:var(--normal-weight) !important; | |
font-size:18px !important; | |
} | |
.markdown-preview-view h5, | |
.HyperMD-header-5, | |
.cm-header-5 { | |
font-variant:small-caps; | |
text-transform:lowercase; | |
letter-spacing:0.05em; | |
color:var(--text-normal); | |
font-weight:300 !important; | |
font-size:16px !important; | |
} | |
.markdown-preview-view h6, | |
.HyperMD-header-6, | |
.cm-header-6 { | |
font-variant:small-caps; | |
text-transform:lowercase; | |
letter-spacing:0.1em; | |
color:var(--text-muted); | |
font-weight:300 !important; | |
font-size:14px !important; | |
} | |
/* --------------- */ | |
/* Icons */ | |
.nav-action-button svg { | |
width:15px; | |
} | |
.workspace-ribbon-collapse-btn svg path { | |
stroke-width:3px; | |
} | |
.nav-action-button svg path { | |
stroke-width:2px; | |
} | |
.view-header-icon, | |
.workspace-tab-header, | |
.nav-action-button, | |
.side-dock-ribbon-tab, | |
.view-action { | |
background:transparent; | |
color:var(--text-muted); | |
opacity:0.4; | |
transition:opacity 0.1s ease-in-out; | |
cursor:var(--cursor); | |
} | |
.view-header-icon { | |
opacity:0; | |
} | |
.workspace-leaf-content[data-type='search'] .nav-action-button.is-active, | |
.workspace-leaf-content[data-type='backlink'] .nav-action-button.is-active, | |
.workspace-tab-header.is-active, | |
.workspace-leaf-content[data-type='search'] .nav-action-button.is-active { | |
background:transparent; | |
color:var(--text-muted); | |
opacity:1; | |
transition:opacity 0.1s ease-in-out; | |
} | |
.view-action:hover, | |
.view-header-icon:hover, | |
.nav-action-button:hover, | |
.workspace-tab-header:hover, | |
.side-dock-ribbon-tab:hover, | |
.side-dock-ribbon-action:hover { | |
background:transparent; | |
color:var(--text-muted); | |
opacity:1; | |
transition:opacity 0 ease-in-out; | |
} | |
.workspace-leaf-content[data-type='search'] .nav-action-button.is-active { | |
background:transparent; | |
} | |
.nav-action-button, | |
.workspace-leaf-content[data-type='search'] .nav-action-button, | |
.workspace-leaf-content[data-type='backlink'] .nav-action-button { | |
padding:0 4px 0 8px; | |
margin:0; | |
} | |
.workspace-tab-header-inner { | |
padding:3px 3px 3px 10px; | |
} | |
/* --------------- */ | |
/* Focus mode */ | |
/* When the left sidebar is collapsed */ | |
.workspace-split.is-collapsed ~ .mod-root .view-header-icon { | |
opacity:0; | |
} | |
.workspace-ribbon.mod-left { | |
transition:border-color 0 ease-in-out; | |
} | |
.workspace-ribbon.mod-left.is-collapsed { | |
border-color:transparent; | |
transition:border-color 0.25s ease-in-out; | |
} | |
.workspace-ribbon.mod-left.is-collapsed .side-dock-actions, | |
.workspace-ribbon.mod-left.is-collapsed .side-dock-settings { | |
opacity:0; | |
transition:opacity 0.25s ease-in-out; | |
} | |
.workspace-ribbon.mod-left.is-collapsed:hover .side-dock-actions, | |
.workspace-ribbon.mod-left.is-collapsed:hover .side-dock-settings { | |
opacity:1; | |
transition:opacity 0s ease-in-out; | |
} | |
.is-right-sidedock-collapsed .workspace-split.mod-right-split { | |
margin-right:0px; | |
} | |
.view-actions { | |
opacity:0; | |
margin-right:0px; | |
margin-left:auto; | |
transition:opacity 0.25s ease-in-out; | |
} | |
.view-actions .view-action { | |
margin-right:4px; | |
} | |
.view-actions .view-action:last-child { | |
margin-left:2px; | |
} | |
.workspace-ribbon:not(.is-collapsed) ~ .mod-root .view-actions { | |
opacity:1; | |
transition:opacity 0.25s ease-in-out; | |
} | |
.mod-right.is-collapsed ~ .mod-root .view-header:hover .view-actions { | |
opacity:1; | |
transition:opacity 0.25s ease-in-out; | |
} | |
/* --------------- */ | |
/* Tags */ | |
.tag { | |
background-color:var(--background-tertiary); | |
border:none; | |
color:var(--text-muted); | |
font-size:var(--font-small); | |
padding:1px 8px; | |
text-align:center; | |
text-decoration:none; | |
display:inline-block; | |
margin:5px 0px 0px; | |
cursor:pointer; | |
border-radius:14px; | |
} | |
.tag:hover { | |
color:var(--text-muted); | |
background-color:var(--background-modifier-border); | |
} | |
.cm-s-obsidian span.cm-hashtag { | |
background-color:var(--background-tertiary); | |
border:none; | |
color:var(--text-muted); | |
font-size:var(--font-small); | |
text-align:center; | |
text-decoration:none; | |
display:inline-block; | |
margin:0; | |
vertical-align:middle; | |
padding-top:3px; | |
padding-bottom:4px; | |
cursor:text; | |
} | |
.cm-hashtag-begin { | |
border-top-left-radius:14px; | |
border-bottom-left-radius:14px; | |
padding-left:8px; | |
} | |
.cm-hashtag-end { | |
border-top-right-radius:14px; | |
border-bottom-right-radius:14px; | |
padding-right:8px; | |
} | |
/* --------------- */ | |
/* Modals */ | |
.modal.mod-settings .vertical-tab-content-container { | |
border:1px solid var(--background-modifier-border); | |
padding-bottom:0; | |
padding-right:0; | |
} | |
input.prompt-input, input.prompt-input:hover { | |
border:0; | |
background:var(--background-primary); | |
} | |
.modal-container .suggestion-item.is-selected { | |
border-radius:6px; | |
background:var(--background-tertiary); | |
} | |
.suggestion-item.is-selected, | |
.menu-item:hover { | |
background:var(--background-tertiary); | |
} | |
/* --------------- */ | |
/* Drag ghost */ | |
.workspace-drop-overlay:before, | |
.mod-drag, | |
.drag-ghost { | |
opacity:0.8; | |
border-radius:0 !important;} | |
/* --------------- */ | |
/* Workspace */ | |
.workspace > .workspace-split:not(.mod-root) .workspace-leaf-content { | |
height:calc(100% - 6px); | |
} | |
.workspace-split.mod-root .workspace-leaf-content { | |
} | |
.workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle { | |
height:0px; | |
background:transparent; | |
border-bottom:1px solid var(--background-modifier-border); | |
} | |
.workspace-split.mod-right-split > .workspace-leaf-resize-handle { | |
background:transparent; | |
border-left:1px solid var(--background-modifier-border); | |
width:0px !important; | |
} | |
.workspace-split.mod-vertical > * > .workspace-leaf-resize-handle, | |
.workspace-split.mod-left-split > .workspace-leaf-resize-handle { | |
background:transparent; | |
border-right:1px solid var(--background-modifier-border); | |
width:0px !important; | |
} | |
.workspace-split.mod-right-split > .workspace-leaf-resize-handle:active, | |
.workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle:active, | |
.workspace-split.mod-vertical > * > .workspace-leaf-resize-handle:active, | |
.workspace-split.mod-left-split > .workspace-leaf-resize-handle:active { | |
border-color:var(--background-modifier-border-hover); | |
} | |
.workspace-tab-container-before, .workspace-tab-container-after{ | |
width:0; | |
} | |
.workspace-leaf { | |
border-left:0px; | |
} | |
.mod-horizontal .workspace-leaf { | |
border-bottom:0px; | |
background-color:transparent; | |
} | |
.workspace-leaf:not(.mod-active) {} /* Effects on non-active panels */ | |
.workspace-tab-container-inner { | |
background:transparent; | |
border-bottom:1px solid var(--background-modifier-border); | |
border-radius:0; | |
width:100%; | |
max-width:100%; | |
margin:0 auto; | |
padding-left:5px; | |
} | |
.workspace-tab-header.is-before-active .workspace-tab-header-inner, | |
.workspace-tab-header.is-active, | |
.workspace-tab-header.is-after-active, | |
.workspace-tab-header.is-after-active .workspace-tab-header-inner, | |
.workspace-tab-header.is-before-active, | |
.workspace-tab-header.is-after-active { | |
background:transparent; | |
} | |
.workspace-tabs { | |
border:0; | |
padding-right:0; | |
font-size:100%; | |
} | |
.workspace-tab-header-container { | |
border:0 !important; | |
height:36px; | |
background-color:transparent; | |
} | |
/* --------------- */ | |
/* Title Bar */ | |
.view-actions { | |
z-index:15; | |
background:var(--background-primary); | |
} | |
.view-header { | |
margin:10px 0; | |
height:40px; | |
} | |
.view-header-title { | |
padding-right:60px; | |
} | |
.view-header-title:before { | |
background:linear-gradient(90deg, var(--background-transparent) 0%, var(--background-primary) 80%); | |
width:60px; | |
content:" "; | |
height:30px; | |
display:inline-block; | |
vertical-align:bottom; | |
position:absolute; | |
right:0; | |
pointer-events:none; | |
} | |
.workspace-leaf-header, .view-header { | |
background-color:var(--background-primary) !important; | |
border:none !important; | |
} | |
.view-header-title-container { | |
padding-left:0; | |
padding-right:0px; | |
position:absolute; | |
width:var(--line-width); | |
max-width:var(--max-width); | |
margin:0 auto; | |
left:0; | |
right:0; | |
} | |
.view-header-title-container:after { | |
display:none; | |
} | |
/* --------------- */ | |
/* Editor */ | |
/* Moving hash marks into gutter | |
.cm-formatting-header { | |
left:calc(-60px + 0.2em); | |
position:absolute; | |
text-align:right; | |
width:60px; | |
} | |
.CodeMirror-gutter-elt { | |
top:15px; | |
} | |
.cm-s-obsidian .CodeMirror-gutters { | |
left:0px !important; | |
} | |
.CodeMirror-scroll { | |
padding-left:48px; | |
padding-right:48px; | |
} */ | |
.markdown-source-view { | |
padding:0; | |
} | |
.cm-s-obsidian .CodeMirror-code { | |
padding-right:0; | |
} | |
.CodeMirror-lines { | |
padding:15px; | |
padding-bottom:170px; | |
} | |
.CodeMirror pre.CodeMirror-line, | |
.CodeMirror pre.CodeMirror-line-like { | |
padding-left:0; | |
padding-right:0; | |
} | |
.markdown-preview-view { | |
padding:0; | |
} | |
.markdown-preview-view .markdown-embed { | |
margin:0; | |
} | |
.markdown-preview-view { | |
padding-bottom:5px; | |
} | |
.markdown-preview-view .markdown-embed-content { | |
max-height:none; | |
} | |
.CodeMirror, | |
.markdown-preview-section { | |
padding-left:0; | |
padding-right:0; | |
margin:0 auto 0 auto; | |
width:var(--line-width); | |
max-width:var(--max-width); | |
} | |
.markdown-preview-view .markdown-embed { | |
padding:2% 4%; | |
} | |
.markdown-embed-title, | |
.internal-embed .markdown-preview-section { | |
max-width:100%; | |
} | |
.cm-s-obsidian pre.HyperMD-header, | |
.CodeMirror-line { | |
} | |
.CodeMirror-linenumber { | |
font-size:var(--font-small) !important; | |
font-feature-settings:'tnum'; | |
padding-top:6px; | |
} | |
.cm-s-obsidian span.cm-url { | |
color:var(--text-accent); | |
} | |
.cm-s-obsidian span.cm-link { | |
color:var(--text-muted); | |
} | |
.cm-s-obsidian span.cm-hmd-internal-link { | |
color:var(--text-accent); | |
} | |
/* Editor Mode Footnotes */ | |
.cm-s-obsidian span.cm-footref { | |
font-size:var(--font-normal); | |
} | |
.cm-s-obsidian pre.HyperMD-footnote { | |
font-size:var(--font-small); | |
padding-left:20px; | |
} | |
/* Editor Mode Lists */ | |
.cm-formatting-list { | |
color:var(--text-faint) !important; | |
} | |
/* Editor Mode Quotes */ | |
.cm-formatting-quote { | |
color:var(--text-faint) !important; | |
} | |
/* --------------- */ | |
/* Image zoom */ | |
.view-content img { | |
cursor:zoom-in;} | |
.view-content img:active { | |
cursor:zoom-out; | |
display:block; | |
z-index:100; | |
position:fixed; | |
max-height:calc(100% + 1px); | |
max-width:calc(100% - 20px); | |
height:calc(100% + 1px); | |
width:100%; | |
object-fit:contain; | |
margin:-0.5px auto 0; | |
text-align:center; | |
top:50%; | |
transform:translateY(-50%); | |
padding:0; | |
left:0; | |
right:0; | |
bottom:0; | |
background:var(--background-translucent); | |
} | |
/* --------------- */ | |
/* Internal search */ | |
.document-search-container.mod-replace-mode { | |
height:90px; | |
} | |
.document-search-container { | |
padding-top:10px; | |
height:50px; | |
background-color:var(--background-primary); | |
border-top:1px solid var(--background-modifier-border); | |
} | |
input.document-search-input, input.document-replace-input { | |
font-size:var(--font-small) !important; | |
border:1px solid var(--background-modifier-border); | |
border-radius:14px; | |
background:var(--background-primary); | |
transition:border-color 0.1s ease-in-out; | |
} | |
input.document-search-input:hover, | |
input.document-replace-input:hover { | |
border:1px solid var(--background-modifier-border-hover); | |
background:var(--background-primary); | |
transition:border-color 0.1s ease-in-out; | |
} | |
input.document-search-input:focus, | |
input.document-replace-input:focus { | |
border:1px solid var(--background-modifier-border-focus); | |
background:var(--background-primary); | |
transition:all 0.1s ease-in-out; | |
} | |
.document-search-button { | |
font-size:var(--font-small); | |
} | |
/* --------------- */ | |
/* Sidebar documents */ | |
.workspace > .workspace-split:not(.mod-root) .CodeMirror, | |
.workspace > .workspace-split:not(.mod-root) .markdown-preview-view { | |
font-size:var(--font-small); | |
line-height:1.2; | |
} | |
.workspace > .workspace-split:not(.mod-root) .CodeMirror, | |
.workspace > .workspace-split:not(.mod-root) .markdown-preview-section { | |
max-width:100%; | |
padding:0 15px; | |
} | |
/* --------------- */ | |
/* Inputs */ | |
button { | |
background-color:transparent; | |
} | |
button:hover { | |
background-color:var(--background-tertiary); | |
} | |
/* --------------- */ | |
/* Checkboxes */ | |
input[type=checkbox] { | |
-webkit-appearance:none; | |
appearance:none; | |
border-radius:50%; | |
border:1px solid var(--background-modifier-border-hover); | |
padding:0; | |
} | |
input[type=checkbox]:focus,input[type=checkbox]:hover { | |
outline:0; | |
border-color:var(--text-faint); | |
} | |
input[type=checkbox]:checked { | |
background-color:var(--background-modifier-accent); | |
border:1px solid var(--background-modifier-accent); | |
background-position:center; | |
background-size:70%; | |
background-repeat:no-repeat; | |
background-image:url('data:image/svg+xml; utf8, <svg width="12px" height="10px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-4.000000, -6.000000)" fill="%23ffffff"><path d="M8.1043257,14.0367999 L4.52468714,10.5420499 C4.32525014,10.3497722 4.32525014,10.0368095 4.52468714,9.8424863 L5.24777413,9.1439454 C5.44721114,8.95166768 5.77142411,8.95166768 5.97086112,9.1439454 L8.46638057,11.5903727 L14.0291389,6.1442083 C14.2285759,5.95193057 14.5527889,5.95193057 14.7522259,6.1442083 L15.4753129,6.84377194 C15.6747499,7.03604967 15.6747499,7.35003511 15.4753129,7.54129009 L8.82741268,14.0367999 C8.62797568,14.2290777 8.3037627,14.2290777 8.1043257,14.0367999"></path></g></g></svg>'); | |
} | |
.markdown-preview-view ul > li.task-list-item.is-checked { | |
text-decoration:none; | |
color:var(--text-normal); | |
} | |
.markdown-preview-view .task-list-item-checkbox { | |
width:18px; | |
height:18px; | |
position:relative; | |
top:6px; | |
line-height:0; | |
margin-left:-1.5em; | |
margin-right:6px; | |
filter:none; | |
} | |
.markdown-preview-view .task-list-item { | |
padding-inline-start:1.5em; | |
} | |
.side-dock-plugin-panel-inner { | |
padding-right:6px; | |
padding-left:6px; | |
} | |
/* --------------- */ | |
/* Toggle switches */ | |
.checkbox-container { | |
background-color:var(--background-modifier-border); | |
border:1px solid var(--background-modifier-border); | |
} | |
.checkbox-container.is-enabled { | |
border-color:var(--interactive-accent); | |
} | |
/* --------------- */ | |
/* Files */ | |
.nav-header { | |
padding:0; | |
} | |
.nav-buttons-container { | |
padding:10px 5px 0px 5px; | |
margin-bottom:0px !important; | |
justify-content:flex-start; | |
border:0; | |
} | |
.nav-folder.mod-root { | |
padding-top:2px; | |
padding-bottom:30px; | |
} | |
.nav-files-container { | |
overflow-x:hidden; | |
} | |
.nav-folder-title { | |
margin:0px; | |
padding:0 10px 0 24px; | |
cursor:var(--cursor); | |
} | |
.nav-folder-title.is-being-dragged-over { | |
background-color:var(--background-modifier-accent); | |
border-color:var(--background-modifier-accent); | |
border-radius:0; | |
border-left:1px solid transparent; | |
border-right:1px solid transparent; | |
} | |
.nav-folder-title-content { | |
padding:1px 4px; | |
} | |
.nav-folder-collapse-indicator { | |
top:1px; | |
} | |
.nav-file { | |
margin-left:12px; | |
padding-right:4px; | |
} | |
.nav-file-title { | |
width:calc(100% - 30px); | |
margin:0 8px 0 -4px; | |
padding:2px 2px; | |
border-width:0; | |
border-color:var(--background-secondary); | |
border-radius:6px; | |
cursor:var(--cursor); | |
} | |
.nav-file-title-content { | |
width:100%; | |
white-space:nowrap; | |
overflow:hidden; | |
text-overflow:ellipsis; | |
padding:0 5px; | |
vertical-align:middle; | |
cursor:var(--cursor); | |
} | |
.workspace-leaf-content[data-type=starred] .nav-file-title-content { | |
width:calc(100% - 15px); | |
} | |
.nav-file-title, .nav-folder-title, | |
.is-collapsed .search-result-file-title, | |
.tag-pane-tag { | |
font-size:var(--font-small) !important; | |
color:var(--text-muted); | |
} | |
.search-result-file-title { | |
font-size:var(--font-small) !important; | |
color:var(--text-normal); | |
font-weight:var(--font-normal); | |
} | |
.side-dock-collapsible-section-header { | |
font-size:var(--font-small); | |
color:var(--text-muted); | |
cursor:var(--cursor); | |
margin-right:0; | |
} | |
.tree-view-item-self:hover .tree-view-item-collapse, | |
.side-dock-collapsible-section-header:hover, | |
.side-dock-collapsible-section-header:not(.is-collapsed) { | |
color:var(--text-normal); | |
} | |
.search-result-collapse-indicator, | |
.search-result-file-title:hover .search-result-collapse-indicator, | |
.side-dock-collapsible-section-header-indicator:hover, | |
.side-dock-collapsible-section-header:hover .side-dock-collapsible-section-header-indicator { | |
color:var(--background-modifier-border-hover); | |
} | |
.tree-view-item-collapse, | |
.is-collapsed .search-result-collapse-indicator, | |
.nav-folder-collapse-indicator, | |
.side-dock-collapsible-section-header-indicator, | |
.is-collapsed .side-dock-collapsible-section-header-indicator { | |
color:var(--background-modifier-border-hover); | |
} | |
/* --------------- */ | |
/* Outline */ | |
.outline { | |
padding-top:10px; | |
padding-bottom:20px; | |
font-size:var(--font-small); | |
} | |
.outline .pane-empty { | |
font-size:var(--font-small); | |
color:var(--text-faint); | |
margin:0 0 0 15px; | |
} | |
.outline .collapsible-item-self { | |
cursor:var(--cursor); | |
line-height:1.4; | |
margin-bottom:4px; | |
font-size:var(--font-small); | |
} | |
.collapsible-item-collapse { | |
opacity:1; | |
} | |
.outline > .collapsible-item > .collapsible-item-self .right-triangle { | |
opacity:0; | |
} | |
/* --------------- */ | |
/* Search */ | |
.search-result-file-match { | |
cursor:var(--cursor) !important; | |
} | |
.search-result-file-match:hover { | |
color:var(--text-normal); | |
} | |
.search-result-container:before { | |
height:1px; | |
} | |
.search-result-container.is-loading:before { | |
background-color:var(--background-modifier-accent); | |
} | |
.search-result { | |
margin-bottom:0; | |
} | |
.search-result-count { | |
opacity:1; | |
color:var(--text-faint); | |
padding:0 0 0 5px; | |
} | |
.search-result-file-match:before { | |
top:0; | |
} | |
.search-result-file-match:not(:first-child) { | |
margin-top:0px;} | |
.search-result-file-match { | |
margin-top:0; | |
margin-bottom:0; | |
padding-top:6px; | |
padding-bottom:5px; | |
} | |
.search-result-file-matched-text { | |
background-color:var(--background-match-highlight); | |
} | |
.search-input { | |
max-width:calc(100% - 20px); | |
margin-left:10px; | |
width:500px; | |
} | |
input.search-input:focus { | |
border-color:var(--background-modifier-border); | |
} | |
.workspace-leaf-content[data-type='search'] .search-result-file-matches { | |
border-left:0; | |
padding-left:0; | |
} | |
.search-empty-state { | |
font-size:var(--font-small); | |
color:var(--text-faint); | |
padding-left:10px; | |
margin:0; | |
} | |
.search-result-container { | |
padding:0 10px 5px 5px; | |
} | |
.search-result-file-title { | |
line-height:1.3; | |
padding:4px 4px 4px 24px; | |
vertical-align:middle; | |
cursor:var(--cursor)!important; | |
overflow:hidden; | |
text-overflow:ellipsis; | |
} | |
.search-result-file-title > span:not(.search-result-collapse-indicator):not(.search-result-count) { | |
white-space:nowrap; | |
overflow:hidden; | |
text-overflow:ellipsis; | |
} | |
.search-result-collapse-indicator { | |
left:5px; | |
} | |
.search-result-file-match:before { | |
height:0.5px; | |
} | |
.search-result-file-matches { | |
font-size:var(--font-smaller); | |
line-height:1.3; | |
margin-bottom:8px; | |
padding:0 0 6px 0; | |
color:var(--text-muted); | |
border-bottom:1px solid var(--background-modifier-border-focus); | |
} | |
.search-info-more-matches { | |
font-size:var(--font-smaller); | |
padding-top:4px; | |
padding-bottom:4px; | |
color:var(--text-normal); | |
} | |
.side-dock-collapsible-section-header-indicator { | |
display:none; | |
} | |
.side-dock-collapsible-section-header { | |
padding-left:15px; | |
} | |
.backlink-pane { | |
padding-bottom:30px; | |
} | |
.backlink-pane .search-result-container { | |
padding:5px 0px 5px 10px; | |
margin-left:0; | |
} | |
.backlink-pane .search-result-file-title { | |
padding-left:25px; | |
} | |
.list-item-ending-flair { | |
right:0; | |
background:transparent; | |
} | |
.backlink-pane .list-item-ending-flair { | |
right:12px; | |
} | |
.tag-pane-tag .list-item-ending-flair { | |
right:5px; | |
} | |
.list-item:hover .list-item-ending-flair { | |
background:transparent; | |
color:var(--text-faint); | |
} | |
.search-result-file-title:hover { | |
color:var(--text-normal); | |
} | |
.workspace-leaf-content .search-input, | |
.workspace-leaf-content .search-input:hover, | |
.workspace-leaf-content .search-input:focus { | |
font-size:var(--font-small); | |
padding:7px 10px; | |
border-radius:20px; | |
background:var(--background-primary); | |
border:1px solid var(--background-modifier-border); | |
transition:border-color 0.1s ease-in-out; | |
} | |
.workspace-leaf-content .search-input:hover { | |
border-color:var(--background-modifier-border-hover); | |
transition:border-color 0.1s ease-in-out; | |
} | |
.workspace-leaf-content .search-input:focus { | |
background:var(--background-primary); | |
border-color:var(--background-modifier-border-focus); | |
transition:all 0.1s ease-in-out; | |
} | |
.workspace-leaf-content .search-input::placeholder { | |
color:var(--text-faint); | |
font-size:var(--font-small); | |
} | |
.workspace-split.mod-root .workspace-split.mod-vertical .workspace-leaf-content { | |
padding-right:0; | |
} | |
.workspace-split.mod-horizontal.mod-right-split { | |
width:0; | |
} | |
.workspace-split.mod-vertical > .workspace-leaf { | |
padding-right:1px; | |
} | |
.workspace-leaf-content[data-type=starred] .item-list { | |
padding-top:5px; | |
} | |
.workspace-split.mod-right-split .view-content { | |
padding:0 0 0 0; | |
} | |
/* --------------- */ | |
/* Tags */ | |
.tag-pane-tag-count { | |
padding:0; | |
color:var(--text-faint); | |
} | |
.tag-pane-tag { | |
padding:2px 10px; | |
cursor:var(--cursor); | |
} | |
.workspace-leaf-content[data-type='tag'] { | |
padding-top:10px; | |
} | |
.nav-file.is-active .nav-file-title:hover { | |
background:var(--background-tertiary) !important; | |
} | |
.nav-file.is-active > .nav-file-title { | |
background:var(--background-tertiary); | |
} | |
/* --------------- */ | |
/* Status bar */ | |
.status-bar { | |
background-color:var(--background-primary); | |
color:var(--text-faint); | |
font-size:var(--font-smaller); | |
padding:0; | |
} | |
.status-bar-item { | |
padding:0 5px; | |
} | |
.status-bar-item-segment { | |
margin-right:10px; | |
} | |
/* --------------- */ | |
/* Sidedock icons */ | |
.workspace-ribbon-collapse-btn, | |
.view-action, | |
.side-dock-ribbon-tab, .side-dock-ribbon-action { | |
cursor:var(--cursor); | |
} | |
.workspace-ribbon { | |
border-color:var(--background-modifier-border); | |
background:var(--background-secondary); | |
} | |
.workspace-ribbon.mod-right { | |
right:0; | |
position:absolute; | |
background:transparent; | |
border-right:0; | |
} | |
.mod-right:not(.is-collapsed) ~ .workspace-split.mod-right-split { | |
margin-right:0; | |
} | |
.side-dock-ribbon-action { | |
padding:6px 0; | |
} | |
.side-dock-settings { | |
padding-bottom:5px; | |
} | |
.side-dock-ribbon { | |
border-left:0; | |
} | |
/* --------------- */ | |
/* iframes */ | |
iframe { | |
border:0; | |
} | |
/* --------------- */ | |
/* Preview Mode */ | |
.markdown-preview-view hr { | |
height:1px; | |
border-width:2px 0 0 0; | |
} | |
.external-link { | |
text-decoration:underline; | |
} | |
.footnotes-list { | |
margin-block-start:-10px; | |
padding-inline-start:20px; | |
font-size:var(--font-small); | |
} | |
.footnotes-list p { | |
display:inline; | |
margin-block-end:0; | |
margin-block-start:0; | |
} | |
.footnote-ref a { | |
text-decoration:none; | |
} | |
.footnote-backref { | |
color:var(--text-faint); | |
} | |
/* Markdown preview styling */ | |
/* Blockquotes */ | |
.markdown-preview-view blockquote { | |
border-radius:0; | |
border:solid var(--quote-opening-modifier); | |
border-width:0px 0px 0px 1px; | |
background-color:transparent; | |
color:var(--text-muted); | |
padding:0 0 0 10px; | |
} | |
/* --------------- */ | |
/* Tables */ | |
.markdown-preview-view th { | |
font-weight:var(--bold-weight); | |
text-align: left; | |
border-top:none; | |
} | |
.markdown-preview-view th:last-child, | |
.markdown-preview-view td:last-child { | |
border-right:none; | |
} | |
.markdown-preview-view th:first-child, | |
.markdown-preview-view td:first-child { | |
border-left:none; | |
padding-left:0; | |
} | |
.markdown-preview-view tr:last-child td { | |
border-bottom:none; | |
} | |
/* --------------- */ | |
/* Preview Mode Lists */ | |
ul { | |
padding-inline-start:2em; | |
list-style:none; | |
} | |
ul ul, ol ul, ol ol ul, ol ul ul, ul ol ul, ul ul ul { | |
list-style:none; | |
} | |
ul > li:not(.task-list-item)::before { | |
content:"\2022"; | |
color:var(--text-faint); | |
font-weight:600; | |
display:inline-block; | |
width:1em; | |
margin-left:-1em; | |
} | |
ul li p, ol li p { | |
display:inline; | |
} | |
ol { | |
padding-inline-start:1em; | |
margin-left:1em; | |
list-style:none; | |
counter-reset:counter; | |
position:relative; | |
} | |
ol > li { | |
margin-left:0em; | |
counter-increment:counter;} | |
ol > li::before { | |
content:counter(counter) ". "; | |
color:var(--text-faint); | |
position:absolute; | |
left:-1.25em; | |
text-align:right; | |
width:2em; | |
} | |
/* --------------- */ | |
/* Code */ | |
.theme-light :not(pre) > code[class*="language-"], | |
.theme-light pre[class*="language-"] { | |
background-color:var(--background-primary-alt); | |
} | |
.theme-light code[class*="language-"], .theme-light pre[class*="language-"] { | |
text-shadow:none; | |
} | |
.cm-s-obsidian .hmd-fold-html-stub, | |
.cm-s-obsidian .hmd-fold-code-stub, | |
.cm-s-obsidian.CodeMirror .HyperMD-hover > .HyperMD-hover-content code, | |
.cm-s-obsidian .cm-formatting-hashtag, | |
.cm-s-obsidian .cm-inline-code, | |
.cm-s-obsidian .HyperMD-codeblock, | |
.cm-s-obsidian .HyperMD-hr, | |
.cm-s-obsidian .cm-hmd-frontmatter, | |
.cm-s-obsidian .cm-hmd-orgmode-markup, | |
.cm-s-obsidian .cm-formatting-code, | |
.cm-s-obsidian .cm-math, .cm-s-obsidian span.hmd-fold-math-placeholder, | |
.cm-s-obsidian .CodeMirror-linewidget kbd, | |
.cm-s-obsidian .hmd-fold-html kbd | |
.CodeMirror-code { | |
font-family:var(--font-monospace); | |
} | |
/* --------------- */ | |
/* Popover */ | |
.popover { | |
box-shadow:0 20px 40px var(--background-modifier-box-shadow); | |
pointer-events:auto !important; | |
margin-left:30px; | |
} | |
.popover.hover-popover { | |
max-height:40vh;} | |
.popover .markdown-embed-link { | |
display:none; | |
} | |
/* --------------- */ | |
/* Graphs */ | |
.graph-control-section { | |
} | |
.graph-controls { | |
background:var(--background-primary); | |
border:none; | |
left:0; | |
top:0; | |
margin-bottom:0; | |
padding:0 20px 10px 10px; | |
border-radius:0; | |
} | |
input[type=range] { | |
background-color:rgba(0,0,0,0.15); | |
height:16px; | |
padding:9px 7px 0 7px; | |
-webkit-appearance:none; | |
cursor:default; | |
margin:0; | |
border-radius:50px; | |
} | |
input[type=range]:focus { | |
} | |
input[type=range]::-webkit-slider-runnable-track { | |
background:var(--text-muted); | |
height:1px; | |
margin-top:-9px; | |
} | |
input[type=range]::-webkit-slider-thumb { | |
background:var(--text-muted); | |
height:7px; | |
width:20px; | |
margin-top:0px; | |
cursor:default; | |
} | |
input[type=range]::-webkit-slider-thumb:hover, | |
input[type=range]::-webkit-slider-thumb:active { | |
background:var(--text-normal); | |
} | |
.local-graph-jumps-slider-container, | |
.workspace-split.mod-left-split .local-graph-jumps-slider-container, | |
.workspace-split.mod-right-split .local-graph-jumps-slider-container, | |
.workspace-fake-target-overlay .local-graph-jumps-slider-container { | |
background:transparent; | |
opacity:0.6; | |
padding:0; | |
left:12px; | |
transition:opacity 0.2s linear; | |
height:auto; | |
} | |
.mod-root .local-graph-jumps-slider-container { | |
right:0; | |
left:0; | |
width:var(--line-width); | |
max-width:var(--max-width); | |
margin:0 auto; | |
top:30px; | |
} | |
.workspace-split.mod-left-split .local-graph-jumps-slider-container:hover, | |
.workspace-split.mod-right-split .local-graph-jumps-slider-container:hover, | |
.workspace-fake-target-overlay .local-graph-jumps-slider-container:hover, | |
.local-graph-jumps-slider-container:hover { | |
opacity:0.8; | |
transition:opacity 0.2s linear; | |
} | |
/*.graph-view.color-fill { | |
color:var(--background-secondary); | |
} | |
.graph-view.color-circle { | |
color:var(--text-normal); | |
} | |
.graph-view.color-line { | |
color:var(--background-modifier-border); | |
} | |
.graph-view.color-text { | |
color:var(--text-normal); | |
} | |
.graph-view.color-fill-highlight { | |
color:var(--interactive-accent); | |
}*/ | |
.graph-view.color-line-highlight { | |
color:var(--interactive-accent); | |
} | |
/* --------------- */ | |
/* Scroll bars */ | |
::-webkit-scrollbar { | |
width:7px; | |
} | |
::-webkit-scrollbar-track { | |
background-color:var(--background-primary); | |
} | |
::-webkit-scrollbar-thumb { | |
border-width:0px 4px 6px 0px; | |
border-style:solid; | |
border-radius:0 !important; | |
border-color:var(--background-primary); | |
min-height:40px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment