theme.css

:root {
	--main-bg: #ffffff;
	--beige: #f0eae2;
	--dark-beige: #e6dbcc;
	--light-beige: #f8f5f1;
	--red: #c95454;
	--red-rgb: 201, 84, 84;
	--red-hsl: 0, 52, 55.9;
	--red-deep: #c43131;
	--text: #2d2c2c;
	--heading-text: #000000;
	--light-text: #949494;

	--highlight: #f3e118;
	--highlight-dark: #756b13;

	--green: #06b43c;

	--foldgutter-width: 1.8rem;

	--border-width: 1px; /* default */

	/* #988982 */

	/* Dark Mode */
	--dark-bg: #2f2a27;
	--dark-secondary: #38312e;
	--dark-alternate: #988982;
	--dark-light-text: #473e3a;
	--dark-lightness: #bbb1ac;

	/* Headings */
	--h1: 2.5em;
	--h2: 2em;

	/* Shared */

	--text-on-accent: var(--red); /* text on dark */
	--text-on-accent-inverted: var(--red); /* text on light */
}

.theme-dark {
	--background-primary: var(--dark-bg);
	--background-primary-alt: var(--dark-secondary);
	--background-secondary: var(--dark-bg);
	--background-secondary-alt: var(--dark-secondary);

	--darky-dark: var(--dark-bg);

	--background-modifier-hover: var(--dark-bg);
	--background-modifier-active-hover: var(--dark-secondary);

	--background-modifier-border: var(--dark-secondary);
	--background-modifier-border-hover: var(--red-deep);
	--background-modifier-border-focus: var(--red-deep);

	--background-modifier-message: var(--red); /* messages background */

	--background-modifier-error: var(--red);
	--background-modifier-error-rgb: var(--red-rgb);
	--background-modifier-error-hover: var(--red-deep);

	--background-modifier-success: var(--red);
	--background-modifier-success-rgb: var(--red-rgb);

	--background-modifier-form-field: var(--dark-bg);

	--callout-blend-mode: normal;

	--interactive-normal: var(--dark-light-text);
	--interactive-hover: var(--dark-secondary);
	--interactive-accent: var(--red);
	--interactive-accent-hsl: var(--red-hsl);
	--interactive-accent-hover: var(--red);

	--text-normal: var(--main-bg);
	--text-muted: var(--beige);
	--text-faint: var(--light-text);

	--text-error: var(--red);
	--text-success: #ccff00;
	--text-accent: var(--red);
	--text-accent-hover: var(--red-deep);

	--text-highlight-bg: var(--highlight-dark);
	--text-selection: #171413;

	--nav-item-color: var(--text-muted);
	--nav-item-color-hover: var(--main-bg);
	--nav-item-color-active: var(--main-bg);
	--nav-item-color-selected: var(--main-bg);
	--nav-item-color-highlighted: var(--main-bg);
	--nav-item-background-hover: var(--dark-bg);
	--nav-item-background-active: var(--red);
	--nav-item-background-selected: var(--red);

	--scrollbar-active-thumb-bg: rgba(0, 0, 0, 0.2);
	--scrollbar-bg: rgba(0, 0, 0, 0.05);
	--scrollbar-thumb-bg: rgba(0, 0, 0, 0.1);

	--highlight-mix-blend-mode: darken;
	--alternate-lights: var(--dark-alternate);
	--modal-buttons: var(--main-bg);
	--pre-bg: var(--background-primary-alt);
	--handle-icon: var(--main-bg);
}

.theme-light {
	--background-primary: var(--main-bg);
	--background-primary-alt: var(--beige);
	--background-secondary: var(--main-bg);
	--background-secondary-alt: var(--beige);

	--darky-dark: var(--dark-beige);

	--background-modifier-hover: var(--beige);
	--background-modifier-active-hover: var(--dark-beige);

	--background-modifier-border: var(--beige);
	--background-modifier-border-hover: var(--red-deep);
	--background-modifier-border-focus: var(--red-deep);

	--background-modifier-error: var(--red);
	--background-modifier-error-rgb: var(--red-rgb);
	--background-modifier-error-hover: var(--red-deep);

	--background-modifier-success: var(--red);
	--background-modifier-success-rgb: var(--red-rgb);

	--background-modifier-message: var(--red); /* messages background */

	--background-modifier-form-field: var(--main-bg);

	--code-background: var(--light-beige);

	--interactive-normal: var(--beige);
	--interactive-hover: var(--light-beige);
	--interactive-accent: var(--red);
	--interactive-accent-hsl: var(--red-hsl);
	--interactive-accent-hover: var(--red);

	--text-normal: var(--text);
	--text-muted: var(--light-text);
	--text-faint: var(--light-text);

	--text-error: var(--red);
	--text-success: var(--green);
	--text-accent: var(--red);
	--text-accent-hover: var(--red-deep);

	--text-highlight-bg: var(--highlight);
	--text-selection: var(--dark-beige);

	--nav-item-color: var(--text-muted);
	--nav-item-color-hover: var(--text);
	--nav-item-color-active: var(--main-bg);
	--nav-item-color-selected: var(--main-bg);
	--nav-item-color-highlighted: var(--main-bg);
	--nav-item-background-hover: var(--dark-beige);
	--nav-item-background-active: var(--red);
	--nav-item-background-selected: var(--red);

	--scrollbar-active-thumb-bg: rgba(0, 0, 0, 0.2);
	--scrollbar-bg: rgba(0, 0, 0, 0.05);
	--scrollbar-thumb-bg: rgba(0, 0, 0, 0.1);
	--highlight-mix-blend-mode: darken;
	--alternate-lights: var(--light-beige);
	--modal-buttons: var(--text-faint);
	--pre-bg: var(--light-beige);
	--handle-icon: #000000;
}

html,
body {
	font-size: 20px !important;
	color: var(--text-normal);
	--font-headings: "Source Serif Pro", "Source Serif 4", "Source Serif",
		"Rockwell", "New York", serif;
	--font-text: "DM Sans", "Avenir Next", "Avenir", sans-serif;
	--font-monospace: MonoLisa, "Source Code Pro", monospace;

	--inline-title-size: 0.8rem;
	--inline-title-color: var(--text-muted);
	--inline-title-weight: 700;

	--titlebar-background: var(--darky-dark);
	--titlebar-background-focused: var(--darky-dark);

	--ribbon-background-collapsed: var(--background-primary-alt);

	--tab-background-active: transparent;
	--tab-container-background: var(--background-secondary);
	--tab-divider-color: var(--background-secondary-alt);
	--tab-outline-color: var(--background-secondary-alt);
	--tab-outline-width: 1px;
	--tab-curve: 10px;
	--tab-radius: 10px;
	--tab-radius-active: 10px 10px 0 0;
	--tab-max-width: 350px;

	--scrollbar-active-thumb-bg: var(--background-secondary);
	--scrollbar-bg: var(--darky-dark);
	--scrollbar-thumb-bg: var(--darky-dark);

	--divider-vertical-height: calc(100% - 90px) !important;

	--tag-background: rgba(var(--red-rgb), 0.1);

	/* --callout-title-color: white; */
}

.inline-title {
	position: relative;
	left: -20px;
	text-transform: uppercase;
}

.inline-title::before {
	position: relative;
	width: 20px;
	display: inline-block;
	content: ">";
	color: var(--red);
}

.cm-hashtag {
	font-family: var(--font-monospace) !important;
	font-size: 0.65rem;
}

.workspace-leaf-content {
	background-color: var(--background-primary-alt);
}

.workspace-split.mod-root .view-content {
	border-radius: 10px !important;
}

.cm-header-1,
.cm-header-2,
.cm-header-3,
.cm-header-4,
.cm-header-5,
.cm-header-6 {
	font-family: var(--font-headings);
	line-height: 1;
}

.HyperMD-header {
	line-height: 1;
}

.workspace-leaf-resize-handle:hover {
	background-color: var(--dark-beige);
	opacity: 0.5;
}

.workspace-ribbon.mod-right.is-collapsed {
	border-left: 0;
}

.workspace-tab-header,
.workspace-tab-header-container-inner {
	cursor: pointer;
}

.workspace-ribbon,
.workspace-tabs,
.workspace-tab-container-before.is-before-active,
.workspace-tab-header.is-after-active,
.workspace-tabs .workspace-leaf,
.workspace-tab-header.is-active,
.workspace-ribbon.is-collapsed,
.status-bar {
	background: var(--background-primary-alt);
}

.mod-root .workspace-tab-header:not(.is-active) .workspace-tab-header-inner {
	position: relative;
	top: 5px;
	background: var(--background-primary-alt);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	box-sizing: border-box;
	opacity: 0.8;
	transition: top 200ms ease-in-out, opacity 200ms ease-in-out;
}

.mod-root
	.workspace-tab-header:not(.is-active):hover
	.workspace-tab-header-inner {
	top: 3px;
	background: var(--background-primary-alt);
	opacity: 1;
}

.workspace-tab-header.is-active,
.mod-active .view-header-icon {
	color: var(--handle-icon);
}

.view-header {
	background: var(--background-primary-alt);
}

.is-focused .workspace-leaf.mod-active .view-header {
	background: var(--background-primary-alt);
}

.is-focused .workspace-leaf.mod-active .view-header .clickable-icon {
	color: var(--red);
}

.is-focused
	.workspace-leaf.mod-active
	.view-header
	.clickable-icon:hover[aria-disabled="false"] {
	background: var(--beige);
	cursor: pointer;
}

.is-focused
	.workspace-leaf.mod-active
	.view-header
	.clickable-icon[aria-disabled="true"] {
	color: var(--text-muted);
	cursor: not-allowed;
}

.workspace-split.mod-root .workspace-tab-header.is-active::before,
.workspace-split.mod-root .workspace-tab-header.is-active::after {
	box-shadow: inset 0 0 0 var(--tab-outline-width) transparent,
		0 0 0 calc(var(--tab-curve) * 4) var(--background-primary-alt);
}

.view-header-title-container:not(.mod-at-end):after {
	background: transparent;
}

.nav-buttons-container {
	padding: 4px;
}

.suggestion-item.is-selected {
	background-color: var(--background-primary-alt);
	border-radius: 5px;
}

body:not(.is-mobile) .modal-container .modal-bg {
	background-color: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(2px);
}

.setting-add-hotkey-button,
.setting-restore-hotkey-button {
	color: var(--modal-buttons);
}

.CodeMirror-linenumber,
.cm-formatting {
	font-family: var(--font-monospace) !important;
	color: var(--text-muted);
	opacity: 0.8;
}

.markdown-preview-section,
.markdown-source-view {
	line-height: 1.5;
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
}

.markdown-preview-section h1 {
	font-family: var(--font-headings);
	font-size: var(--h1);
}

.HyperMD-codeblock {
	line-height: 1.5 !important;
	color: var(--red) !important;
}

.nav-file-title,
.nav-folder-title {
	margin-bottom: 5px;
}

.markdown-preview-view pre {
	border: 2px solid var(--background-primary-alt);
	border-radius: 10px;
}

.markdown-preview-view ul {
	padding-left: 30px;
}

.markdown-preview-view ol {
	padding-left: 25px;
}

.markdown-preview-view ul li {
	padding-bottom: 5px;
}

.markdown-preview-view li ul {
	padding-top: 5px;
}

.cm-s-obsidian span.cm-inline-code,
.markdown-rendered code {
	color: var(--red);
}

.cm-s-obsidian div.HyperMD-codeblock-begin-bg,
.cm-s-obsidian div.HyperMD-codeblock-end-bg,
.cm-s-obsidian div.HyperMD-codeblock-bg {
	background: var(--pre-bg);
}

/*/ var(--background-primary-alt);  for pre*/

.document-search-button {
	background: var(--background-primary);
}

.document-search-button:hover {
	background: var(--red);
	color: var(--main-bg);
}

.markdown-rendered button.copy-code-button {
	color: var(--text-muted);
}

.markdown-rendered button.copy-code-button:hover {
	cursor: pointer;
}

thead,
.frontmatter-container {
	background: var(--alternate-lights);
}

.markdown-preview-view blockquote {
	border: 0px solid;
	border-color: var(--red) !important;
	border-left-width: 2px !important;
	line-height: 1.5;
	margin: 0;
	padding-top: 10px;
	padding-bottom: 10px;
}

blockquote {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.CodeMirror-foldgutter {
	width: var(--foldgutter-width);
}

.CodeMirror-guttermarker-subtle {
	font-size: 0.8em;
	text-align: center;
	opacity: 0.5;
	line-height: var(--foldgutter-width);
	height: var(--foldgutter-width);
	border-radius: 3px;
}

.CodeMirror-guttermarker-subtle:hover {
	opacity: 1;
	background-color: var(--background-primary-alt);
}

.CodeMirror-foldgutter-open::after {
	content: "\25BC";
}

.CodeMirror-foldgutter-folded::after {
	content: "\25BA";
}

.markdown-preview-view .internal-link.is-unresolved {
	color: var(--text-muted);
	opacity: 1;
}

.nav-buttons-container {
	border-radius: 5px;
}

.theme-dark .nav-buttons-container {
	background: var(--background-primary);
}

.theme-light .nav-buttons-container {
	background: var(--alternate-lights);
}

.nav-action-button {
	margin: 0 3px;
	transition: background-image 300ms linear;
}

.side-dock-ribbon-action:hover {
	color: var(--text-normal);
}

.markdown-preview-view .task-list-item {
	padding-inline-start: 25px;
}

.graph-control-section input[type="range"] {
	background: var(--background-primary);
}

.popover.hover-popover {
	font-family: var(--font-headings);
	overflow: hidden;
	border: 1px solid var(--background-primary-alt);
}

.popover.hover-popover:hover {
	background: var(--background-primary);
	border: 1px solid var(--red);
	transition: border 300ms linear;
}

.tooltip {
	background-color: var(--red);
	color: var(--background-primary);
	word-wrap: break-word;
}

.tooltip .tooltip-arrow {
	border-bottom: 5px solid var(--red);
}

.tooltip.mod-right .tooltip-arrow {
	border-right: 5px solid var(--red);
}

.tooltip.mod-left .tooltip-arrow {
	border-left: 5px solid var(--red);
}

.tooltip.mod-top .tooltip-arrow {
	border-top: 5px solid var(--red);
}

.titlebar-text {
	top: -2px;
}

.titlebar-button {
	opacity: 1;
}

.titlebar-button:hover {
	color: var(--red);
	cursor: pointer;
}

.titlebar-button.mod-close:hover {
	color: var(--main-bg);
}

.titlebar-button svg {
	vertical-align: baseline;
}

h1::selection,
h2::selection,
h3::selection,
h4::selection {
	background: var(--red);
	color: var(--main-bg);
}

/* Needed for legacy editor */
pre.HyperMD-header.HyperMD-header-1.CodeMirror-line {
	font-size: var(--h1);
}

pre.HyperMD-header.HyperMD-header-2.CodeMirror-line {
	font-size: var(--h2);
}