XeNote/posts/.obsidian/themes/Red Graphite.css

673 lines
20 KiB
CSS
Raw Normal View History

2021-03-03 21:33:38 +00:00
.theme-light
{
--background-inline-code: rgb(240, 240, 240);
--background-nav-alt: rgb(58, 62, 63);
--background-nav-file-tag: rgb(203, 77, 73);
--background-nav-selected: rgb(203, 77, 73);
--background-nav: rgb(41, 44, 46);
--background-primary: rgb(250, 250, 250);
--background-tag: #b5b5b5;
--border-inline-code: rgb(215, 215, 215);
--code-block-background: #ffffff;
--code-block-border: #92a1a17a;
--font-family-editor: Avenir, "Avenir Next", "Avenir Next Cyr", 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif;
--font-family-preview: Avenir, "Avenir Next", "Avenir Next Cyr", 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Microsoft YaHei Light", sans-serif;
--interactive-accent: rgb(203, 77, 73);
--text-accent: rgb(203, 77, 73);
--text-faint: rgb(150, 150, 150);
--text-header: rgb(44, 44, 44);
--text-highlight-bg: #b4ff0066;
--text-inline-code: rgb(45, 45, 45);
--text-nav-selected: rgb(255, 255, 255);
--text-nav: rgb(190, 190, 190);
--text-normal: rgb(44, 44, 44);
}
.theme-dark {
--background-inline-code: rgb(41, 44, 46);
--background-nav-alt: rgb(58, 62, 63);
--background-nav-file-tag: rgb(116, 190, 247);
--background-nav-selected: rgb(73, 73, 73);
--background-nav: rgb(41, 44, 46);
--background-primary: rgb(28, 30, 32);
--background-tag: rgb(111, 112, 116);
--border-inline-code: rgb(76, 76, 76);
--code-block-background: rgb(32, 32, 32);
--code-block-border: rgb(77, 77, 77);
--font-family-editor: Avenir, "Avenir Next";
--font-family-preview: Avenir, "Avenir Next";
--interactive-accent: rgb(116, 190, 247);
--text-accent: rgb(116, 190, 247);
--text-faint: rgb(150, 150, 150);
--text-header: rgb(198, 213, 224);
--text-highlight-bg: rgb(64, 73, 181);
--text-inline-code: rgb(230, 230, 230);
--text-nav-selected: rgb(255, 255, 255);
--text-nav: rgb(190, 190, 190);
--text-normal: rgb(216, 216, 216);
}
/* header colors */
.cm-header,
.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6 {
color: var(--text-header);
}
/* Changing size/color of the header hashtags ## */
.cm-formatting-header {
color: var(--text-faint);
font-size: 0.6em;
}
/* Backlinks header colors - thanks @a-star-wave! */
.side-dock-collapsible-section-header {
color: var(--text-nav);
}
/* Headers in editor - hide the #'s */
/* .cm-formatting-header-1, .cm-formatting-header-2, .cm-formatting-header-3, .cm-formatting-header-4, .cm-formatting-header-5, .cm-formatting-header-6, .cm-formatting-header-7 {
visibility: hidden;
position: relative;
width: 20px;
display: inline-block;
} */
/* Headers in editor - show custom content - common */
/* .cm-formatting-header-1:after, .cm-formatting-header-2:after, .cm-formatting-header-3:after, .cm-formatting-header-4:after, .cm-formatting-header-5:after, .cm-formatting-header-6:after, .cm-formatting-header-7:after {
visibility: visible;
position: absolute;
left: 0;
font-size: 12px;
} */
/* Headers in editor - show custom content - specifics */
/* .cm-formatting-header-1:after { bottom: 2px; content: "H1"; }
.cm-formatting-header-2:after { bottom: 0px; content: "H2"; }
.cm-formatting-header-3:after { bottom: 0px; content: "H3"; }
.cm-formatting-header-4:after { bottom: -1px; content: "H4"; }
.cm-formatting-header-5:after { bottom: -1px; content: "H5"; }
.cm-formatting-header-6:after { bottom: -1px; content: "H6"; }
.cm-formatting-header-7:after { bottom: -1px; content: "H7"; } */
.cm-s-obsidian span.cm-url {
color: var(--text-accent);
}
.markdown-preview-view mark {
color: var(--text-normal);
padding: 0px 4px;
}
.cm-formatting-em.cm-em {
color: var(--text-faint);
font-weight: 100;
font-size: 0.6em;
}
.cm-formatting-strong.cm-strong {
color: var(--text-faint);
font-weight: 100;
font-size: 0.6em;
}
/* 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);
}
/* The name of the vault */
.nav-folder.mod-root > .nav-file-title, .nav-folder.mod-root > .nav-folder-title {
color: var(--text-nav);
}
/* Color of left nav tree text */
.nav-file-title, .nav-folder-title {
color: var(--text-nav);
}
/* New top tabs */
.workspace-tabs {
background-color: var(--background-nav-alt);
}
.workspace-tab-header-container {
background-color: var(--background-nav-alt);
}
/* Color of the curve of the top tabs */
.workspace-tab-container-before.is-before-active,
.workspace-tab-container-after.is-after-active,
.workspace-tab-header.is-before-active,
.workspace-tab-header.is-after-active {
background-color: var(--background-nav);
}
/* Background color of unselected tabs */
.workspace-tab-container-before.is-before-active .workspace-tab-header-inner,
.workspace-tab-container-after.is-after-active .workspace-tab-header-inner,
.workspace-tab-header.is-before-active .workspace-tab-header-inner,
.workspace-tab-header.is-after-active .workspace-tab-header-inner {
background-color: var(--background-nav-alt);
}
/* Background color of selected tab */
.workspace-tab-header.is-active {
background-color: var(--background-nav);
}
/* resize handle coloring */
.workspace-leaf-resize-handle {
background-color: transparent;
}
/* Set the left nav background to same color as ribbon so we can make a curved corner that matches */
.workspace-tabs .workspace-leaf {
background-color: var(--background-nav-alt);
}
/* Set the left nav background to different color from ribbon, and give a curved corner with statusbar */
.mod-left-split .workspace-tabs .workspace-leaf .workspace-leaf-content {
background-color: var(--background-nav);
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
}
/* Set the right nav background to different color from ribbon, and give a curved corner with statusbar */
.mod-right-split .workspace-tabs .workspace-leaf .workspace-leaf-content {
background-color: var(--background-nav);
border-bottom-right-radius: 10px;
border-top-right-radius: 10px;
}
.side-dock.mod-right {
border-left: 0px;
}
/* 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(--text-accent);
}
/* Left nav ribbon inactive hover text color (icon color) */
.side-dock-ribbon-tab:hover,
.side-dock-ribbon-action:hover {
color: var(--text-accent);
}
/* 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(--background-nav-selected);
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(--text-accent);
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(--text-nav-selected);
}
/* 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);
}
/* Testing a gradient design for statusbar */
/* .status-bar {
border-top: 0px;
background-color: var(--background-nav-alt);
background: linear-gradient(90deg, rgba(255,0,0,0) 5%, var(--background-nav-alt) 20%);
position: absolute;
right: 0;
bottom: 0;
width: 500px;
color: var(--text-nav);
} */
/* Context menu hover item */
.menu-item:hover {
background-color: var(--background-secondary-alt);
color: var(--text-accent);
}
/* 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);
}
/* Coloring the list bullets/numbers */
.cm-s-obsidian span.cm-formatting-list {
color: var(--text-accent);
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: var(--text-accent);
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; */
}
/* Resetting the default hue-rotate(42deg) */
.markdown-preview-view .task-list-item-checkbox {
/* filter: hue-rotate(42deg); -- DEFAULT */
filter: none;
}
.CodeMirror .cm-math {
color: var(--text-inline-code);
}
/* color of inline code ticks */
.cm-s-obsidian span.cm-inline-code.cm-formatting-code {
color: var(--text-faint);
}
/* color of inline code */
.cm-s-obsidian span.cm-inline-code {
color: var(--text-inline-code);
}
/* color and border of inline code (between the ticks) */
.cm-s-obsidian span.cm-inline-code:not(.cm-formatting):not(.cm-hmd-indented-code),
.markdown-preview-section code {
background-color: var(--background-inline-code);
border: 0px solid var(--border-inline-code);
padding: 4px 4px;
font-weight: 600;
color: var(--text-inline-code);
}
/* 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;
line-height: 1.0em;
}
/* Unset the background and font weight from where we set it for inline code */
.markdown-preview-view pre code {
background-color: transparent;
font-weight: normal;
}
/* 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;
color: var(--text-inline-code);
}
/* 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);
}
/* Enable wrapping of code blocks in the preview panel */
.theme-light code[class*="language-"], .theme-light pre[class*="language-"],
.theme-dark code[class*="language-"], .theme-dark pre[class*="language-"] {
white-space: pre-wrap;
background-color: var(--code-block-background);
}
/* Add some spacing when a #hashtag is used */
/* .cm-hashtag, .markdown-preview-section .tag {
line-height: 1.9em;
} */
/* Tag pillbox - common settings for editor left, editor right and preview */
.cm-s-obsidian span.cm-hashtag-begin,
.cm-s-obsidian span.cm-hashtag-end,
a.tag {
background-color: var(--background-tag);
color: var(--text-nav-selected);
padding-bottom: 2px;
padding-top: 2px;
text-decoration: none;
font-family: var(--font-family-editor);
font-size: 0.9em;
}
/* Tag editor left side pillbox */
.cm-s-obsidian span.cm-hashtag-begin {
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
padding-left: 8px;
}
/* Tag editor right side pillbox */
.cm-s-obsidian span.cm-hashtag-end {
border-top-right-radius: 25px;
border-bottom-right-radius: 25px;
padding-right: 10px;
}
/* Tag preview pillbox */
a.tag {
border-top-left-radius: 250px;
border-top-right-radius: 250px;
border-bottom-left-radius: 250px;
border-bottom-right-radius: 250px;
padding-left: 10px;
padding-right: 12px;
}
/* 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; */
}
/* 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(--text-accent);
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(--text-accent);
padding: 2px;
border-radius: 4px;
}
/* Add button hovers to the the Update internal links modal (and possibly others) */
.modal-button-container button:not(.mod-cta):not(.mod-warning):hover {
background-color: var(--text-accent);
color: var(--text-nav-selected);
}
/* Background color of rename inputs */
.nav-file-title-content.is-being-renamed,
.nav-folder-title-content.is-being-renamed {
cursor: text;
border-color: var(--interactive-accent);
background-color: var(--background-nav);
padding-left: 15px;
}
/* Background color of file tags, like "png" */
.nav-file-tag {
background-color: var(--background-nav-file-tag);
color: var(--text-nav-selected);
}
/* Remove the border, padding, and margin for the transcludes/embeds */
.markdown-preview-view .markdown-embed, .markdown-preview-view .file-embed {
border: 0px;
padding: 0;
margin: 0;
}
/* Hide the title of the embeds */
.markdown-embed-title {
display: none;
}
/* Allow a full embed, not a partial, scrolling embed */
.markdown-preview-view .markdown-embed-content {
max-height: unset;
overflow-y: unset;
padding-right: unset;
}
.markdown-preview-view .markdown-embed-content > .markdown-preview-view {
max-height: unset;
}
/* Add support for [Calendar plugin](https://github.com/liamcain/obsidian-calendar-plugin) */
#calendar-container {
--color-background-heading: transparent;
--color-background-day: transparent;
--color-background-day-empty: transparent;
--color-background-day-active: var(--background-nav-selected);
--color-background-day-hover: var(--background-nav-alt);
--color-dot: var(--text-nav);
--color-arrow: var(--text-nav);
--color-text-title: var(--text-faint);
--color-text-heading: var(--text-faint);
--color-text-day: var(--text-nav);
--color-text-today: var(--text-nav-selected);
}
/*
Try to support content in the navs... this is difficult because this theme is a
split of dark and light. So content in the main pane should be light mode, while content
in the left pane should be dark mode
*/
/* .workspace-tabs .view-content {
color: var(--text-nav);
} */
/* input[type=checkbox] {
-webkit-appearance: none;
appearance: none;
border-radius: 50%;
border: 1px solid var(--text-faint);
padding: 0;
}
input[type=checkbox]:focus{
outline:0;
}
input[type=checkbox]:checked {
background-color: var(--text-accent-hover);
border: 1px solid var(--text-accent-hover);
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>');
} */
/* ======================================================== */
/* Checkbox stuff, */
/* ======================================================== */
/* .markdown-preview-view .task-list-item-checkbox { height: 19px; } */
/* .task-list-item input { visibility: hidden; } */
/*
Potential emoji:
🗹🗸🗆🔵🟢🔴🔘🔳🔲🆗🟩🟧🟨🟪🟥🟦🟫
*/
/* Unchecked, set the emoji icon to light grayscale */
/* .task-list-item input:not([checked=true])::after {
content: "✅";
opacity: 0.25;
visibility: visible;
cursor: pointer;
filter: grayscale(1);
} */
/*
Checked, set emoji icon to red to match red graphite accent
Note:
hue-rotate makes a red checkbox, but depends on source color,
so you can't just swap in another emojie icon and have it be red
*/
/* .task-list-item input[checked=true]::after {
content: "✅";
visibility: visible;
cursor: pointer;
filter: hue-rotate(250deg);
} */