Skip to content

Instantly share code, notes, and snippets.

@bryanstedman
Last active January 15, 2024 07:04
Show Gist options
  • Save bryanstedman/93edcb18a1eae169a522848ce6f4c434 to your computer and use it in GitHub Desktop.
Save bryanstedman/93edcb18a1eae169a522848ce6f4c434 to your computer and use it in GitHub Desktop.
My modified Minimal Obsidian.md theme - credit @kepano
/*
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