323 lines
11 KiB
CSS
323 lines
11 KiB
CSS
/* This Theme is called "Wasp" and Obsidian Theme created by Santi Younger */
|
|
|
|
:root
|
|
{
|
|
--font-monospace: "Source Code Pro", monospace;
|
|
}
|
|
|
|
.theme-dark
|
|
{
|
|
--button-hover-bg-color: #DAA520; /* Darker Yellow Background for Hover */
|
|
--button-hover-text-color: #ffffff; /* White Text for Hover */
|
|
--button-bg-color: #D49335; /* Gray-Black Background */
|
|
--button-text-color: #242424; /* Light Gray Text */
|
|
--background-primary: #242424;
|
|
--background-primary-alt: #242424;
|
|
--background-secondary: #191919;
|
|
--background-secondary-alt: #3D3D3D;
|
|
--text-normal: #faf2d6;
|
|
--text-faint: #bdae93;
|
|
--text-title-h1: #E0E0E0;
|
|
--text-title-h2: #E0E0E0;
|
|
--text-title-h3: #E0E0E0;
|
|
--text-title-h4: #E0E0E0;
|
|
--text-title-h5: #E0E0E0;
|
|
--text-title-h6: #E0E0E0;
|
|
--text-highlight-bg: #640211;
|
|
--text-link: #83a598;
|
|
--text-a-hover: #83a598;
|
|
--text-accent-hover: #D49335;
|
|
/* ^^^ added for hover over bracket internal links */
|
|
--inline-code: #83a598;
|
|
--code-block: #83a598;
|
|
--text-a: #f8c537;
|
|
--interactive-accent: #f8c537;
|
|
--text-accent: #f8c537;
|
|
--text-on-accent: #fff;
|
|
--interactive-accent-rgb: #f8c537;
|
|
--vim-cursor: #f8c537;
|
|
/* --text-mark: add text-mark if needed, this should work together with 'mark' */
|
|
--pre-code: #;
|
|
--interactive-before: #7c6f64;
|
|
--background-modifier-border: #f8c537;
|
|
--text-selection: #f8c537;
|
|
}
|
|
|
|
.theme-dark .cm-s-obsidian span.obsidian-search-match-highlight {
|
|
color: var(--text-normal);
|
|
background-color: #483699;
|
|
}
|
|
|
|
.theme-light
|
|
{
|
|
--background-primary: #EDEDED;
|
|
--background-secondary: #C4C4C4;
|
|
/* thick menu border */
|
|
--background-primary-alt: #;
|
|
--background-secondary-alt: #707070; /* ← ↓ corner */
|
|
--text-normal: #1A2023;
|
|
--text-faint: #DEDEDE;
|
|
--text-title-h1: #D49335;
|
|
--text-title-h2: #D49335;
|
|
--text-title-h3: #D49335;
|
|
--text-title-h4: #D49335;
|
|
--text-title-h5: #D49335;
|
|
--text-link: #D49335;
|
|
--text-a-hover: #D49335;
|
|
--text-accent-hover: #D49335;
|
|
/* ^^^ added for hover over bracket internal links */
|
|
--inline-code: #458588;
|
|
/* --text-mark: add if needed */
|
|
--pre-code: #bebebe;
|
|
/* --text-highlight-bg: add if needed */
|
|
--interactive-before: #a89984;
|
|
--background-modifier-border: #D49335;
|
|
--text-a: #961327;
|
|
--interactive-accent: #f8c537;
|
|
--text-accent: #961327;
|
|
--interactive-accent-rgb: #961327;
|
|
--vim-cursor: #961327;
|
|
--text-selection: #EDC180;
|
|
--text-white: #ffffff;
|
|
}
|
|
|
|
.nav-file-title, .nav-folder-title {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.nav-file-title.is-active, .nav-folder-title.is-active, body:not(.is-grabbing) .nav-file-title:hover, body:not(.is-grabbing) .nav-folder-title:hover {
|
|
background-color: var(--background-modifier-border);
|
|
color: white;
|
|
}
|
|
|
|
.cm-s-obsidian span.cm-formatting-link {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.CodeMirror-guttermarker-subtle {
|
|
color: var(--text-normal) !important;
|
|
}
|
|
|
|
button.mod-cta {
|
|
background-color: var(--interactive-accent);
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.vertical-tab-header-group-title {
|
|
color: var(--text-white);
|
|
}
|
|
|
|
.cm-header-1 {
|
|
font-size: 18px;
|
|
color: var(--text-title-h1) !important;
|
|
}
|
|
|
|
.cm-header-2 {
|
|
font-size: 18px;
|
|
color: var(--text-title-h2) !important;
|
|
}
|
|
|
|
.cm-header-3 {
|
|
font-size: 18px;
|
|
color: var(--text-title-h3) !important;
|
|
}
|
|
|
|
.cm-header-4 {
|
|
font-size: 18px;
|
|
color: var(--text-title-h4) !important;
|
|
}
|
|
|
|
.cm-header-5 {
|
|
font-size: 18px;
|
|
color: var(--text-title-h5) !important;
|
|
}
|
|
|
|
.cm-header-6 {
|
|
font-size: 18px;
|
|
color: --text-normal;
|
|
color: var(--text-title-h6) !important;
|
|
}
|
|
|
|
.markdown-preview-view h1 {
|
|
font-size: 20px;
|
|
line-height: 24px;
|
|
color: var(--text-title-h1) !important;
|
|
}
|
|
|
|
.markdown-preview-view h2 {
|
|
font-size: 20px;
|
|
line-height: 24px;
|
|
color: var(--text-title-h2) !important;
|
|
}
|
|
|
|
.markdown-preview-view h3 {
|
|
font-size: 20px;
|
|
line-height: 24px;
|
|
color: var(--text-title-h3) !important;
|
|
}
|
|
|
|
.markdown-preview-view h4 {
|
|
font-size: 20px;
|
|
line-height: 24px;
|
|
color: var(--text-title-h4) !important;
|
|
}
|
|
|
|
.markdown-preview-view h5 {
|
|
font-size: 20px;
|
|
line-height: 24px;
|
|
color: var(--text-title-h5) !important;
|
|
}
|
|
|
|
.markdown-preview-view h6 {
|
|
font-size: 20px;
|
|
line-height: 24px;
|
|
color: --text-normal;
|
|
color: var(--text-title-h6) !important;
|
|
}
|
|
|
|
/*-----------------------------------------*/
|
|
/* End of main theme, extra functionality can be added below */
|
|
|
|
.markdown-source-view { font-family: var(--font-monospace)
|
|
}
|
|
|
|
.cm-fat-cursor .CodeMirror-cursor {
|
|
background-color: #f8c537 !important;
|
|
opacity: 80% !important;
|
|
width: 9px !important;
|
|
visibility: visible !important
|
|
}
|
|
|
|
.plugin-tabs .stayopen .view-header {
|
|
border-bottom: 2px solid var(--interactive-accent)!important;
|
|
}
|
|
|
|
.plugin-tabs .mod-root.workspace-split.mod-vertical div.workspace-leaf:not(.stayopen) > .workspace-leaf-content > .view-header .view-header-title::before{
|
|
background-color:transparent!important
|
|
}
|
|
|
|
.plugin-tabs .mod-root.workspace-split.mod-vertical .workspace-split.mod-vertical > div.workspace-leaf:not(.stayopen),
|
|
.plugin-tabs .mod-root.workspace-split.mod-vertical > div.workspace-leaf:not(.stayopen){
|
|
border-radius: 5px 5px 0px 0px!important;
|
|
}
|
|
|
|
.plugin-tabs .mod-root.workspace-split.mod-vertical div.workspace-leaf{
|
|
border-color: var(--background-secondary-alt)!important;
|
|
border-bottom-width: 0px!important;
|
|
border-right-width: 0px!important
|
|
}
|
|
|
|
.theme-light.plugin-tabs .mod-root.workspace-split.mod-vertical div.workspace-leaf{
|
|
border-color: var(--background-secondary-alt)!important;
|
|
border-left-width:3px!important;
|
|
border-bottom-width: 0px!important;
|
|
border-right-width: 0px!important
|
|
}
|
|
|
|
.plugin-tabs .mod-root.workspace-split.mod-vertical > div.workspace-leaf hr.workspace-leaf-resize-handle,
|
|
.plugin-tabs .mod-root.workspace-split.mod-vertical > .mod-vertical hr.workspace-leaf-resize-handle{
|
|
display: none;
|
|
}
|
|
|
|
|
|
.plugin-tabs .mod-root.workspace-split.mod-vertical div.workspace-leaf .view-header{
|
|
border-left-color: transparent!important
|
|
}
|
|
|
|
.plugin-tabs .workspace-split.mod-root > .workspace-leaf:last-of-type .workspace-leaf-content,
|
|
.plugin-tabs .workspace-split.mod-root > .workspace-leaf:first-of-type .workspace-leaf-content {
|
|
border-radius: 0px!important;
|
|
}
|
|
|
|
.plugin-tabs .theme-dark .mod-root.workspace-split.mod-vertical .workspace-split.mod-vertical > div.workspace-leaf.mod-active,
|
|
.plugin-tabs .theme-dark .mod-root.workspace-split.mod-vertical > div.workspace-leaf.mod-active {
|
|
border: 0!important;
|
|
border-radius: 0px 0px 0px 0px!important;
|
|
}
|
|
|
|
button.mod-cta {
|
|
background-color: var(--button-bg-color); /* Uses variable for background color */
|
|
color: var(--button-text-color); /* Uses variable for text color */
|
|
font-weight: 600; /* Makes text bold but less than standard bold */
|
|
|
|
}
|
|
|
|
button.mod-cta:hover, button.mod-cta:focus {
|
|
background-color: var(--button-hover-bg-color); /* Darker Yellow Background for Hover */
|
|
color: var(--button-text-color); /* Keeps the default light gray text color on hover */
|
|
font-weight: 600; /* Makes text bold but less than standard bold */
|
|
}
|
|
|
|
.vertical-tab-nav-item.is-active {
|
|
background-color: var(--button-bg-color); /* Gray-Black Background */
|
|
color: var(--button-text-color); /* Light Gray Text */
|
|
font-weight: bold; /* Makes text bold */
|
|
font-weight: 600; /* Makes text bold but less than standard bold */
|
|
}
|
|
|
|
.vertical-tab-nav-item.is-active:hover, .vertical-tab-nav-item.is-active:focus {
|
|
background-color: var(--button-hover-bg-color); /* Darker Yellow Background for Hover */
|
|
color: var(--button-text-color); /* Keeps the default light gray text color on hover */
|
|
font-weight: 600; /* Makes text bold but less than standard bold */
|
|
}
|
|
|
|
body:not(.is-phone) .vertical-tab-nav-item.is-active {
|
|
--background-modifier-hover: var(--button-hover-bg-color); /* More specific variable for hover */
|
|
--icon-color: var(--button-text-color);
|
|
background-color: var(--button-bg-color);
|
|
color: var(--button-text-color);
|
|
font-weight: 600; /* Makes text bold but less than standard bold */
|
|
}
|
|
|
|
body:not(.is-phone) .vertical-tab-nav-item.is-active:hover,
|
|
body:not(.is-phone) .vertical-tab-nav-item.is-active:focus {
|
|
background-color: var(--button-hover-bg-color);
|
|
color: var(--button-text-color);
|
|
font-weight: 600; /* Makes text bold but less than standard bold */
|
|
}
|
|
.checkbox-container.is-enabled {
|
|
background-color: var(--button-bg-color); /* Gray-Black Background */
|
|
color: var(--button-text-color); /* Light Gray Text */
|
|
}
|
|
|
|
.checkbox-container.is-enabled:hover, .checkbox-container.is-enabled:focus {
|
|
background-color: var(--button-hover-bg-color); /* Darker Yellow Background for Hover */
|
|
color: var(--button-text-color); /* Keeps the default light gray text color on hover */
|
|
}
|
|
|
|
.flair.mod-pop {
|
|
background-color: var(--button-bg-color); /* Gray-Black Background */
|
|
color: var(--button-text-color); /* Light Gray Text */
|
|
}
|
|
|
|
.flair.mod-pop:hover, .flair.mod-pop:focus {
|
|
background-color: var(--button-hover-bg-color); /* Darker Yellow Background for Hover */
|
|
color: var(--button-text-color); /* Keeps the default light gray text color on hover */
|
|
}
|
|
|
|
/** hr styles -- PREVIEW MODE */
|
|
.cm-line hr,
|
|
.markdown-preview-view hr {
|
|
margin-block-start: 4em;
|
|
margin-block-end: 4em;
|
|
border: none;
|
|
height: 0;
|
|
border-bottom: 1px solid;
|
|
border-image-slice: 1;
|
|
border-width: 1px;
|
|
border-image-source: linear-gradient(to right, transparent, var(--text-accent), transparent);
|
|
}
|
|
|
|
.cm-line hr::after,
|
|
.markdown-preview-view hr::after {
|
|
/* content: '\1f41d'; */
|
|
display: inline-block;
|
|
position: absolute;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
transform-origin: 50% 50%;
|
|
padding: 0.5rem;
|
|
color: var(--text-sub-accent);
|
|
background-color: var(--background-primary);
|
|
}
|