Files
journal/.obsidian/themes/Kanagawa.css
Thaddeus Hughes 608c43a71f init
2025-10-09 20:43:40 -05:00

610 lines
13 KiB
CSS

:root
{
/* Kanagawa from https://github.com/rebelot/kanagawa.nvim */
/* Bg Shades*/
--sumiInk0 : #16161D;
--sumiInk1b : #181820;
--sumiInk1 : #1F1F28;
--sumiInk2 : #2A2A37;
--sumiInk3 : #363646;
--sumiInk4 : #54546D;
/* Popup and Floats*/
--waveBlue1 : #223249;
--waveBlue2 : #2D4F67;
/* Diff and Git*/
--winterGreen : #2B3328;
--winterYellow : #49443C;
--winterRed : #43242B;
--winterBlue : #252535;
--autumnGreen : #76946A;
--autumnRed : #C34043;
--autumnYellow : #DCA561;
/* Diag*/
--samuraiRed : #E82424;
--roninYellow : #FF9E3B;
--waveAqua1 : #6A9589;
--dragonBlue : #658594;
/* Fg and Comments*/
--oldWhite : #C8C093;
--fujiWhite : #DCD7BA;
--fujiGray : #727169;
--springViolet1 : #938AA9;
--oniViolet : #957FB8;
--crystalBlue : #7E9CD8;
--springViolet2 : #9CABCA;
--springBlue : #7FB4CA;
--lightBlue : #A3D4D5; /* unused yet*/
--waveAqua2 : #7AA89F; /* improve lightness: desaturated greenish Aqua*/
--springGreen : #98BB6C;
--boatYellow1 : #938056;
--boatYellow2 : #C0A36E;
--carpYellow : #E6C384;
--sakuraPink : #D27E99;
--waveRed : #E46876;
--peachRed : #FF5D62;
--surimiOrange : #FFA066;
--katanaGray : #717C7C;
/* Gruvbox from https://github.com/insanum/obsidian_gruvbox */
--dark0-hard: #1d2021;
--dark0: #282828;
--dark0-soft: #32302f;
--dark1: #3c3836;
--dark2: #504945;
--dark3: #665c54;
--dark4: #7c6f64;
--gray: #928374;
--light0-hard: #f9f5d7;
--light0: #fbf1c7;
--light0-soft: #f2e5bc;
--light1: #ebdbb2;
--light2: #d5c4a1;
--light3: #bdae93;
--light4: #a89984;
--bright-red: #fb4934;
--bright-green: #b8bb26;
--bright-yellow: #fabd2f;
--bright-blue: #83a598;
--bright-purple: #d3869b;
--bright-aqua: #8ec07c;
--bright-orange: #fe8019;
--neutral-red: #cc241d;
--neutral-green: #98971a;
--neutral-yellow: #d79921;
--neutral-blue: #458588;
--neutral-purple: #b16286;
--neutral-aqua: #689d6a;
--neutral-orange: #d65d0e;
--faded-red: #9d0006;
--faded-green: #79740e;
--faded-yellow: #b57614;
--faded-blue: #076678;
--faded-purple: #8f3f71;
--faded-aqua: #427b58;
--faded-orange: #af3a03;
}
.theme-dark
{
--background-primary: var(--sumiInk1);
--background-primary-alt: var(--sumiInk1);
--background-secondary: var(--sumiInk1b);
--background-secondary-alt: var(--sumiInk2);
--text-normal: var(--fujiWhite);
--text-faint: var(--fujiGray);
--text-title-h1: var(--neutral-red);
--text-title-h2: var(--neutral-orange);
--text-title-h3: var(--neutral-yellow);
--text-title-h4: var(--neutral-green);
--text-title-h5: var(--neutral-aqua);
--text-title-h6: var(--neutral-blue);
--text-link: var(--springBlue);
--text-a: var(--dragonBlue);
--text-a-hover: var(--peachRed);
--text-a-url: var(--dragonBlue); /*hover internal link, graph view link and standalone links*. External Links no*/
--text-mark: rgba(34, 50, 73, 0.4); /* waveBlue1 */
--pre-code: var(--sumiInk0);
--text-highlight-bg: var(--waveBlue1);
--interactive-accent: var(--dragonBlue); /* vim cursor background AND highilight on right*/
--interactive-before: var(--sumiInk4);
--background-modifier-border: var(--dragonBlue);
--text-accent: var(--autumnGreen);
--interactive-accent-rgb: var(--springGreen);
--inline-code: var(--springGreen);
--code-block: var(--fujiGray);
--vim-cursor-backgroung: var(--fujiWhite);
--vim-cursor-color: var(--sumiInk1);
--text-selection: rgba(34, 50, 73, 0.5); /* waveBlue1 */
--text-tag: var(--springViolet1);
--task-checkbox: var(--sumiInk4);
--table-header: hsl(0, 0%, 14%);
--table-row-even: hsl(0, 0%, 17%);
--table-row-odd: hsl(0, 0%, 20%);
--table-hover: var(--sumiInk2);
}
.theme-light,
body {
--font-text-theme: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
--font-monospace-theme: 'Hack Nerd Font', 'Source Code Pro', ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
}
.theme-dark code[class*="language-"],
.theme-dark pre[class*="language-"],
.theme-light code[class*="language-"],
.theme-light pre[class*="language-"]
{
text-shadow: none !important;
background-color: var(--pre-code) !important;
}
.graph-view.color-circle,
.graph-view.color-fill-highlight,
.graph-view.color-line-highlight
{
color: var(--interactive-accent-rgb) !important;
}
.graph-view.color-text
{
color: var(--text-a-url) !important;
}
/*
.graph-view.color-fill
{
color: var(--background-secondary);
}
.graph-view.color-line
{
color: var(--background-modifier-border);
}
*/
html,
body
{
/* font-size: 16px !important; */
}
strong
{
font-weight: 600 !important;
}
a,
.cm-hmd-internal-link
{
color: var(--text-a) !important;
text-decoration: none !important;
}
a:hover,
.cm-hmd-internal-link:hover,
.cm-url
{
color: var(--text-a-url) !important;
text-decoration: none !important;
}
a.tag, a.tag:hover {
color: var(--text-tag) !important;
background-color: var(--background-secondary-alt);
padding: 2px 4px;
border-radius: 4px;
}
a.tag:hover {
text-decoration: underline !important;
}
mark
{
background-color: var(--text-mark);
}
.titlebar {
background-color: var(--background-secondary-alt);
}
.titlebar-inner {
color: var(--text-normal);
}
.view-actions a
{
color: var(--text-normal) !important;
}
.view-actions a:hover
{
color: var(--text-a) !important;
}
.HyperMD-codeblock-bg
{
background-color: var(--pre-code) !important;
}
.HyperMD-codeblock
{
line-height: 1.4em !important;
color: var(--code-block) !important;
}
.HyperMD-codeblock-begin
{
border-top-left-radius: 4px !important;
border-top-right-radius: 4px !important;
}
.HyperMD-codeblock-end
{
border-bottom-left-radius: 4px !important;
border-bottom-right-radius: 4px !important;
}
table {
border: 1px solid var(--background-secondary) !important;
border-collapse: collapse;
}
th {
font-weight: 600 !important;
border: 0px !important;
text-align: left;
background-color: var(--table-header);
color: var(--neutral-green);
}
td {
border-left: 0px !important;
border-right: 0px !important;
border-bottom: 1px solid var(--background-secondary) !important;
}
tr:nth-child(even){ background-color: var(--table-row-even) }
tr:nth-child(odd){ background-color: var(--table-row-odd) }
tr:hover { background-color: var(--table-hover); }
thead
{
border-bottom: 2px solid var(--background-modifier-border) !important;
}
.HyperMD-table-row
{
line-height: normal !important;
padding-left: 4px !important;
padding-right: 4px !important;
/* background-color: var(--pre-code) !important; */
}
.HyperMD-table-row-0
{
/* padding-top: 4px !important; */
}
.CodeMirror-foldgutter-folded,
.is-collapsed .nav-folder-collapse-indicator
{
color: var(--text-a) !important;
}
.nav-file-tag
{
color: var(--text-a) !important;
}
.is-active .nav-file-title
{
color: var(--text-a) !important;
background-color: var(--background-primary-alt) !important;
}
.nav-file-title
{
border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important;
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}
.HyperMD-list-line
{
padding-top: 0 !important;
}
.cm-hashtag-begin
{
color: var(--text-tag) !important;
background-color: var(--background-secondary-alt);
padding: 2px 0 2px 4px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
text-decoration: none !important;
}
.cm-hashtag-end
{
color: var(--text-tag) !important;
background-color: var(--background-secondary-alt);
padding: 2px 4px 2px 0;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
text-decoration: none !important;
}
.cm-hashtag-begin:hover, .cm-hashtag-end:hover
{
text-decoration: underline !important;
}
.markdown-preview-section pre code,
.markdown-preview-section code
{
font-size: 0.9em !important;
background-color: var(--pre-code) !important;
}
.markdown-preview-section pre code
{
padding: 4px !important;
line-height: 1.4em !important;
display: block !important;
color: var(--code-block) !important;
}
.markdown-preview-section code
{
color: var(--inline-code) !important;
}
.cm-s-obsidian,
.cm-inline-code
{
-webkit-font-smoothing: auto !important;
}
.cm-inline-code
{
color: var(--inline-code) !important;
background-color: var(--pre-code) !important;
padding: 1px !important;
}
.workspace-leaf-header-title
{
font-weight: 600 !important;
}
.side-dock-title
{
padding-top: 15px !important;
font-size: 20px !important;
}
.side-dock-ribbon-tab:hover,
.side-dock-ribbon-action:hover,
.side-dock-ribbon-action.is-active:hover,
.nav-action-button:hover,
.side-dock-collapse-btn:hover
{
color: var(--text-a);
}
.side-dock
{
border-right: 0 !important;
}
/* vertical resize-handle */
.workspace-split.mod-vertical > * > .workspace-leaf-resize-handle,
.workspace-split.mod-left-split > .workspace-leaf-resize-handle,
.workspace-split.mod-right-split > .workspace-leaf-resize-handle
{
width: 1px !important;
background-color: var(--background-secondary-alt);
}
/* horizontal resize-handle */
.workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle
{
height: 1px !important;
background-color: var(--background-secondary-alt);
}
/* Remove vertical split padding */
.workspace-split.mod-root .workspace-split.mod-vertical .workspace-leaf-content,
.workspace-split.mod-vertical > .workspace-split,
.workspace-split.mod-vertical > .workspace-leaf,
.workspace-tabs
{
padding-right: 0px;
}
.markdown-embed-title
{
font-weight: 600 !important;
}
.markdown-embed
{
padding-left: 10px !important;
padding-right: 10px !important;
margin-left: 10px !important;
margin-right: 10px !important;
}
.cm-header-1.cm-link,
h1 a
{
color: var(--text-title-h1) !important;
}
.cm-header-2.cm-link,
h2 a
{
color: var(--text-title-h2) !important;
}
.cm-header-3.cm-link,
h3 a
{
color: var(--text-title-h3) !important;
}
.cm-header-4.cm-link,
h4 a
{
color: var(--text-title-h4) !important;
}
.cm-header-5.cm-link,
h5 a
{
color: var(--text-title-h5) !important;
}
.cm-header-6.cm-link,
h6 a
{
color: var(--text-title-h6) !important;
}
.cm-header {
font-weight: 500 !important;
}
.HyperMD-header-1,
.markdown-preview-section h1
{
font-weight: 500 !important;
font-size: 2.2em !important;
color: var(--text-title-h1) !important;
}
.HyperMD-header-2,
.markdown-preview-section h2
{
font-weight: 500 !important;
font-size: 2.0em !important;
color: var(--text-title-h2) !important;
}
.HyperMD-header-3,
.markdown-preview-section h3
{
font-weight: 500 !important;
font-size: 1.8em !important;
color: var(--text-title-h3) !important;
}
.HyperMD-header-4,
.markdown-preview-section h4
{
font-weight: 500 !important;
font-size: 1.6em !important;
color: var(--text-title-h4) !important;
}
.HyperMD-header-5,
.markdown-preview-section h5
{
font-weight: 500 !important;
font-size: 1.4em !important;
color: var(--text-title-h5) !important;
}
.HyperMD-header-6,
.markdown-preview-section h6
{
font-weight: 500 !important;
font-size: 1.2em !important;
color: var(--text-title-h6) !important;
}
.suggestion-item.is-selected
{
background-color: var(--background-secondary);
}
.empty-state-action:hover
{
color: var(--interactive-accent);
}
.empty-state-action:hover
{
color: var(--interactive-accent);
}
.checkbox-container
{
background-color: var(--interactive-before);
}
.checkbox-container:after
{
background-color: var(--background-secondary-alt);
}
.mod-cta
{
color: var(--background-secondary-alt) !important;
font-weight: 600 !important;
}
.mod-cta a
{
color: var(--background-secondary-alt) !important;
font-weight: 600 !important;
}
.mod-cta:hover
{
background-color: var(--interactive-before) !important;
font-weight: 600 !important;
}
.CodeMirror-cursor
{
background-color: var(--vim-cursor-background) !important;
color: var(--vim-cursor-color) !important;
opacity: 60% !important;
}
input.task-list-item-checkbox {
border: 1px solid var(--task-checkbox);
appearance: none;
-webkit-appearance: none;
}
input.task-list-item-checkbox:checked
{
background-color: var(--task-checkbox);
box-shadow: inset 0 0 0 2px var(--background-primary);
}
::selection
{
background-color: var(--text-selection) !important;
}
.mermaid .note
{
fill: var(--dark3) !important;
}