381 lines
10 KiB
CSS
381 lines
10 KiB
CSS
.theme-dark {
|
|
--background-primary: #202020;
|
|
--background-primary-alt: #1a1a1a;
|
|
--background-secondary: #161616;
|
|
--background-nav-alt: #1f201f;
|
|
--background-nav: #151615;
|
|
--golden-brown: #d6ba7c;
|
|
--text-accent: #d6ba7c;
|
|
--text-accent-hover: #d6ba7c;
|
|
--text-normal: #dcddde;
|
|
--text-muted: #888;
|
|
--text-faint: #555;
|
|
--text-error: #ff3333;
|
|
--text-error-hover: #990000;
|
|
--text-highlight-bg: #dbaa205e;
|
|
--text-on-accent: #dcddde;
|
|
--interactive-normal: #2a2a2a;
|
|
--interactive-hover: #303030;
|
|
--interactive-accent: #d6ba7c;
|
|
--interactive-accent-hover: #d6ba7c;
|
|
--scrollbar-active-thumb-bg: rgba(255, 255, 255, 0.2);
|
|
--scrollbar-bg: rgba(255, 255, 255, 0.05);
|
|
--scrollbar-thumb-bg: rgba(255, 255, 255, 0.1);
|
|
--text-nav-selected: #000000;
|
|
--interactive-accent-rgb: #d6ba7c;
|
|
}
|
|
|
|
.theme-light {
|
|
--interactive-accent-rgb: #d6ba7c;
|
|
--background-nav-alt: rgba(58, 62, 63, 255);
|
|
--background-nav: rgba(41, 44, 46, 255);
|
|
--background-primary: rgba(250, 250, 250);
|
|
--golden-brown: #d6ba7c;
|
|
--code-block-background: #ffff;
|
|
--code-block-border: #92a1a17a;
|
|
--interactive-accent: #d6ba7c;
|
|
--list-color: #d6ba7c;
|
|
--text-accent: #d6ba7c;
|
|
--text-faint: rgba(150, 150, 150, 255);
|
|
--text-highlight-bg: #dbaa205e;
|
|
--text-nav-selected: rgba(255, 255, 255, 255);
|
|
--text-nav: rgba(190, 190, 190, 255);
|
|
--text-normal: rgba(44, 44, 44, 255);
|
|
--text-accent-hover: #d6ba7c;
|
|
--interactive-accent-hover: #d6ba7c;
|
|
}
|
|
|
|
.side-dock-ribbon-tab.is-active {
|
|
background-color: var(--background-secondary);
|
|
color: var(--golden-brown);
|
|
}
|
|
|
|
/* Top left "File explorer" text */
|
|
.side-dock-title {
|
|
color: var(--text-nav);
|
|
}
|
|
|
|
/* Wrap long nav text */
|
|
.nav-file-title,
|
|
.nav-folder-title {
|
|
white-space: normal;
|
|
}
|
|
|
|
/* Indent wrapped nav text */
|
|
.nav-file-title-content {
|
|
margin-left: 10px;
|
|
text-indent: -10px;
|
|
}
|
|
|
|
/* Horizontal rule between Icons and vault in left nav */
|
|
.nav-buttons-container {
|
|
border-bottom: 1px solid var(--background-nav-alt);
|
|
}
|
|
|
|
/* Just above the folder tree, the name of the vault */
|
|
.nav-folder.mod-root > .nav-file-title,
|
|
.nav-folder.mod-root > .nav-folder-title {
|
|
color: var(--text-nav);
|
|
}
|
|
|
|
/* Padding on left side of nav items so that hover doesn't butt up against ribbon */
|
|
.nav-folder.mod-root > .nav-folder-children {
|
|
padding-left: 5px;
|
|
}
|
|
|
|
/* Color of left nav tree text */
|
|
.nav-file-title,
|
|
.nav-folder-title {
|
|
color: var(--text-nav);
|
|
}
|
|
|
|
/* Set the left nav background to same color as ribbon so we can make a curved corner that matches */
|
|
.side-dock-panels-container {
|
|
background-color: var(--background-nav-alt);
|
|
}
|
|
|
|
/* Set the left nav background to different color from ribbon, and give a curved corner with statusbar */
|
|
.side-dock.mod-left .side-dock-plugin-panel {
|
|
background-color: var(--background-nav);
|
|
border-bottom-left-radius: 10px;
|
|
}
|
|
|
|
/* Set the right nav background to different color from ribbon, and give a curved corner with statusbar */
|
|
.side-dock.mod-right .side-dock-plugin-panel {
|
|
background-color: var(--background-nav);
|
|
border-bottom-right-radius: 10px;
|
|
}
|
|
|
|
/* Left nav ribbon background color */
|
|
.side-dock-ribbon {
|
|
background-color: var(--background-nav-alt);
|
|
}
|
|
|
|
/* Left nav ribbon background-color */
|
|
.side-dock-ribbon-before.is-before-active,
|
|
.side-dock-ribbon-after.is-after-active,
|
|
.side-dock-ribbon-tab.is-before-active,
|
|
.side-dock-ribbon-tab.is-after-active {
|
|
background-color: var(--background-nav);
|
|
}
|
|
|
|
/* Left nav ribbon background-color */
|
|
.side-dock-ribbon-before.is-before-active .side-dock-ribbon-tab-inner,
|
|
.side-dock-ribbon-after.is-after-active .side-dock-ribbon-tab-inner,
|
|
.side-dock-ribbon-tab.is-before-active .side-dock-ribbon-tab-inner,
|
|
.side-dock-ribbon-tab.is-after-active .side-dock-ribbon-tab-inner {
|
|
background-color: var(--background-nav-alt);
|
|
}
|
|
|
|
/* Left nav ribbon active background-color */
|
|
.side-dock-ribbon-tab.is-active {
|
|
background-color: var(--background-nav);
|
|
}
|
|
|
|
/* Left nav ribbon active hover text color (icon color) */
|
|
.side-dock-ribbon-tab.is-active:hover {
|
|
color: var(--golden-brown);
|
|
}
|
|
|
|
/* Left nav ribbon inactive hover text color (icon color) */
|
|
.side-dock-ribbon-tab:hover,
|
|
.side-dock-ribbon-action:hover {
|
|
color: var(--golden-brown);
|
|
}
|
|
|
|
/* Background and text color of selected item in left nav tree */
|
|
.nav-file.is-active > .nav-file-title,
|
|
.nav-file.is-active > .nav-folder-title,
|
|
.nav-file.is-active > .nav-folder-collapse-indicator,
|
|
.nav-folder.is-active > .nav-file-title,
|
|
.nav-folder.is-active > .nav-folder-title,
|
|
.nav-folder.is-active > .nav-folder-collapse-indicator {
|
|
background-color: var(--golden-brown);
|
|
color: var(--text-nav-selected);
|
|
}
|
|
|
|
/* Background and text color of selected item in left nav tree - when hovering */
|
|
.nav-file.is-active > .nav-file-title:hover,
|
|
.nav-file.is-active > .nav-folder-title:hover,
|
|
.nav-file.is-active > .nav-folder-collapse-indicator:hover,
|
|
.nav-folder.is-active > .nav-file-title:hover,
|
|
.nav-folder.is-active > .nav-folder-title:hover,
|
|
.nav-folder.is-active > .nav-folder-collapse-indicator:hover {
|
|
background-color: var(--golden-brown);
|
|
color: var(--text-nav-selected);
|
|
}
|
|
|
|
/* Background and text color of hovered item in left nav tree */
|
|
body:not(.is-grabbing) .nav-file-title:hover,
|
|
body:not(.is-grabbing) .nav-folder-title:hover {
|
|
background-color: var(--background-secondary-alt);
|
|
color: var(--golden-brown);
|
|
}
|
|
|
|
/* Background and text color of hovered collapse indicator in left nav tree */
|
|
body:not(.is-grabbing) .nav-file-title:hover .nav-folder-collapse-indicator,
|
|
body:not(.is-grabbing) .nav-folder-title:hover .nav-folder-collapse-indicator {
|
|
background-color: var(--background-secondary-alt);
|
|
color: var(--text-nav-selected);
|
|
}
|
|
|
|
/* Left Nav menu item - hover background color */
|
|
body:not(.is-grabbing) .nav-file-title:hover,
|
|
body:not(.is-grabbing) .nav-folder-title:hover {
|
|
background-color: var(--background-nav-alt);
|
|
}
|
|
|
|
/* Left Nav menu item - hover background color of the collapse/expand arrow */
|
|
body:not(.is-grabbing) .nav-file-title:hover .nav-folder-collapse-indicator,
|
|
body:not(.is-grabbing) .nav-folder-title:hover .nav-folder-collapse-indicator {
|
|
background-color: var(--background-nav-alt);
|
|
}
|
|
|
|
/* Left side dock */
|
|
.side-dock.mod-left {
|
|
border-right: 1px solid var(--background-secondary-border);
|
|
}
|
|
|
|
/* Font adjustments for pane headers */
|
|
.view-header-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Status bar ... duh? :) */
|
|
.status-bar {
|
|
background-color: var(--background-nav-alt);
|
|
border-top: 0px solid var(--background-nav-alt);
|
|
color: var(--text-nav);
|
|
}
|
|
|
|
/* Context menu hover item */
|
|
.menu-item:hover {
|
|
background-color: var(--background-secondary-alt);
|
|
color: var(--golden-brown);
|
|
}
|
|
|
|
/* Font for the markdown source panel */
|
|
div.markdown-source-view {
|
|
font-family: var(--font-family-editor);
|
|
}
|
|
|
|
/* Font for the markdown preview panel */
|
|
div.markdown-preview-view {
|
|
font-family: var(--font-family-preview);
|
|
}
|
|
|
|
/* Enable wrapping of code blocks in the preview panel */
|
|
.theme-light code[class*="language-"],
|
|
.theme-light pre[class*="language-"] {
|
|
white-space: pre-wrap;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
/* Changing size/color of the header hashtags ## */
|
|
.cm-formatting-header {
|
|
color: var(--text-faint);
|
|
font-size: 0.6em;
|
|
}
|
|
|
|
/* Coloring the list bullets/numbers */
|
|
.cm-s-obsidian span.cm-formatting-list {
|
|
color: #d6ba7c;
|
|
font-size: 0.85em;
|
|
font-weight: 500;
|
|
font-family: var(--font-monospace);
|
|
}
|
|
|
|
/* Editor view - task list, color and veritcal align */
|
|
.cm-s-obsidian span.cm-formatting-task {
|
|
color: #d6ba7c;
|
|
font-size: 0.85em;
|
|
font-weight: 500;
|
|
position: relative;
|
|
top: -0.12em;
|
|
}
|
|
|
|
/* Preview Checkboxes don't seem to align correctly */
|
|
.markdown-preview-view .task-list-item-checkbox {
|
|
width: 15px;
|
|
height: 15px;
|
|
/* position: relative; */
|
|
/* top: 3px; */
|
|
}
|
|
|
|
/* Preview code block background */
|
|
.markdown-preview-view pre {
|
|
padding: 1em;
|
|
background-color: var(--code-block-background);
|
|
border-radius: 4px;
|
|
border: 1px solid var(--code-block-border);
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
/* Code block border color */
|
|
.cm-s-obsidian div.HyperMD-codeblock-begin-bg {
|
|
border-top: 1px solid var(--code-block-border);
|
|
border-top-left-radius: 4px;
|
|
border-top-right-radius: 4px;
|
|
}
|
|
|
|
/* Code block border color */
|
|
.cm-s-obsidian div.HyperMD-codeblock-end-bg {
|
|
border-bottom: 1px solid var(--code-block-border);
|
|
border-bottom-left-radius: 4px;
|
|
border-bottom-right-radius: 4px;
|
|
}
|
|
|
|
/* Code block background color */
|
|
.cm-s-obsidian div.HyperMD-codeblock-bg {
|
|
background-color: var(--code-block-background);
|
|
}
|
|
|
|
/* Code block left and right padding */
|
|
.cm-s-obsidian pre.HyperMD-codeblock {
|
|
padding: 0px 10px 0px 10px;
|
|
}
|
|
|
|
/* Code block top padding */
|
|
.cm-s-obsidian pre.HyperMD-codeblock-begin {
|
|
padding-top: 10px;
|
|
}
|
|
|
|
/* Code block bottom padding */
|
|
.cm-s-obsidian pre.HyperMD-codeblock-end {
|
|
padding-top: 10px;
|
|
}
|
|
|
|
/* Code block left and right border colors */
|
|
.cm-s-obsidian div.HyperMD-codeblock-bg {
|
|
border-left: 1px solid var(--code-block-border);
|
|
border-right: 1px solid var(--code-block-border);
|
|
}
|
|
|
|
/* Add a tiny bit of padding to the link brackets and parenthesis */
|
|
.cm-s-obsidian span.cm-formatting-link,
|
|
.cm-s-obsidian span.cm-formatting-link-string {
|
|
padding: 0 1px 0 1px;
|
|
/* font-weight: 500; */
|
|
}
|
|
|
|
/* Set background of code panes to pure white since main background is off-white */
|
|
.markdown-preview-view code {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
bottom: 0px;
|
|
}
|
|
|
|
/* Additional left/right padding for tag pane so hover background has some room */
|
|
.tag-pane-tags {
|
|
padding-left: 10px;
|
|
padding-right: 5px;
|
|
}
|
|
|
|
/* Color the hover background like we do the selected left nav */
|
|
.tag-pane-tag:hover {
|
|
background-color: var(--background-nav-alt);
|
|
color: var(--text-nav-selected);
|
|
}
|
|
|
|
/* Style the tag pane tag count with the bear red coloring used in selected item from left nav */
|
|
.tag-pane-tag-count {
|
|
background-color: var(--golden-brown);
|
|
color: var(--text-nav-selected);
|
|
}
|
|
|
|
/* Backlinks title match hover */
|
|
.search-result-file-title:hover {
|
|
background-color: var(--background-nav-alt);
|
|
}
|
|
|
|
/* Backlinks content match hover */
|
|
.search-result-file-match:hover {
|
|
background-color: var(--background-nav-alt);
|
|
}
|
|
|
|
/* Backlink titles for matches */
|
|
.search-result-file-title {
|
|
color: var(--text-nav);
|
|
}
|
|
|
|
/* Backlink highlighted [[links]] */
|
|
.search-result-file-matched-text {
|
|
color: var(--text-nav-selected);
|
|
background-color: var(--golden-brown);
|
|
padding: 2px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Check for update button */
|
|
button.mod-cta {
|
|
color: var(--interactive-normal);
|
|
background-color: (--interactive-accent)
|
|
}
|
|
|
|
/* Notice when fetching community themes */
|
|
div.notice {
|
|
color: var(--interactive-normal) !important;
|
|
background-color: (--interactive-accent)
|
|
}
|
|
|