/* ==
@name             Minimal Dracula
@namespace        github.com/druxorey/minimal-dracula-for-obsidian
@version          1.8.3
@description      Are you tired of the same boring colors on Obsidian? Then try this modern color style based on the Dracula theme
@author           Druxorey
@license          GNU General Public License v3.0
== */



:root {
	background-color: #1E1F29;

	--drx-border-radius-outer: 16px;
	--drx-border-radius-inner: 10px;
}

body {
	--h1-weight: 700;
	--h2-weight: 700;
	--h3-weight: 600;
	--h4-weight: 500;
	--h5-weight: 500;
	--h6-weight: 500;

	--h1-size: 1.60em;
	--h2-size: 1.40em;
	--h3-size: 1.25em;
	--h4-size: 1.15em;
	--h5-size: 1.10em;
	--h6-size: 1.05em;

	--h1-line-height: 1.25em;
	--h2-line-height: 1.25em;
	--h3-line-height: 1.30em;
	--h4-line-height: 1.30em;
	--h5-line-height: 1.30em;
	--h6-line-height: 1.30em;

	--checklist-done-decoration: none;

	--link-unresolved-opacity: 0.5;
	--table-width: 88cqw;

	--drx-color-callout-comment:  98, 114, 164;
	--drx-color-callout-red:     255,  85,  85;
	--drx-color-callout-orange:  255, 184, 108;
	--drx-color-callout-yellow:  241, 250, 140;
	--drx-color-callout-green:    55, 235,  98;
	--drx-color-callout-blue:     84, 179, 255;
	--drx-color-callout-cyan:    114, 208, 228;
	--drx-color-callout-purple:  189, 147, 249;
	--drx-color-callout-pink:    255, 121, 198;

	--callout-default: var(--drx-color-callout-comment);
	--callout-info: var(--drx-color-callout-comment);
	--callout-todo: white;
	--callout-important: var(--drx-color-callout-purple);
	--callout-example: var(--drx-color-callout-pink);
	--callout-summary: var(--drx-color-callout-cyan);
	--callout-tip: var(--drx-color-callout-cyan);
	--callout-bug: var(--drx-color-callout-red);
	--callout-error: var(--drx-color-callout-red);
	--callout-fail: var(--drx-color-callout-red);
	--callout-quote: var(--drx-color-callout-purple);
	--callout-success: var(--drx-color-callout-green);
	--callout-question: var(--drx-color-callout-orange);
	--callout-warning: var(--drx-color-callout-orange);
}



body.theme-dark {
	color: var(--drx-color-text);
	background-color: var(--drx-color-base);

	--drx-color-base: #191A21;
	--drx-color-surface: #21222C;
	--drx-color-overlay: #282A36;
	--drx-color-highlight: #343746;

	--drx-color-text: #F8F8F2;
	--drx-color-subtext: #BABCC9;
	--drx-color-deactivate: #707487;
	--drx-color-comment: #6270A4;

	--drx-color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
	--drx-color-important: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) + 20%));

	--drx-color-red-1: #FF6E6E;
	--drx-color-red-2: #FF5555;
	--drx-color-red-3: #E63C3C;
	--drx-color-orange-1: #FFD185;
	--drx-color-orange-2: #FFB86C;
	--drx-color-orange-3: #E69F53;
	--drx-color-yellow-1: #FFFFA5;
	--drx-color-yellow-2: #F1FA8C;
	--drx-color-yellow-3: #D8E173;
	--drx-color-green-1: #69FF94;
	--drx-color-green-2: #50FA7B;
	--drx-color-green-3: #37EB62; 
	--drx-color-cyan-1: #A4FFFF;
	--drx-color-cyan-2: #8BE9FD;
	--drx-color-cyan-3: #72D0E4;
	--drx-color-blue-1: #6DCCFF;
	--drx-color-blue-2: #54B3FF;
	--drx-color-blue-3: #3B9AE6;
	--drx-color-purple-1: #D6ACFF;
	--drx-color-purple-2: #BD93F9;
	--drx-color-purple-3: #A47AE0;
	--drx-color-pink-1: #FF92DF;
	--drx-color-pink-2: #FF79C6;
	--drx-color-pink-3: #E660AD;

	--bold-color: var(--drx-color-accent);
	--text-selection: color-mix(in srgb, var(--drx-color-accent), transparent 70%);
	--mono-rgb-100: 127, 140, 187 !important;

	--color-base-00: var(--drx-color-base);
	--color-base-10: var(--drx-color-base);
	--color-base-20: var(--drx-color-base);
	--color-base-25: var(--drx-color-base);
	--color-base-30: var(--drx-color-base);
	--color-base-35: var(--drx-color-overlay);
	--color-base-40: var(--drx-color-overlay);
	--color-base-50: var(--drx-color-deactivate);
	--color-base-60: red;
	--color-base-70: var(--drx-color-subtext);
	--color-base-100: var(--drx-color-text);

	--tag-color: var(--drx-color-accent);

	--link-color: var(--drx-color-accent);
	--link-color-hover: var(--drx-color-important);
	--link-external-color: var(--drx-color-accent);
	--link-external-color-hover: var(--drx-color-important);
	--link-unresolved-color: var(--drx-color-green-2);
	--link-unresolved-decoration-color: var(--drx-color-red-2);

	--hr-color: var(--drx-color-deactivate);
	--nav-item-active: var(--drx-color-highlight);
	--ribbon-background: var(--drx-color-surface);
	--status-bar-background: var(--drx-color-surface);
	--table-header-background: var(--drx-color-overlay);
	--titlebar-background: var(--drx-color-base);

	--code-normal: var(--drx-color-subtext);
	--code-comment: var(--drx-color-comment);
	--code-function: var(--drx-color-green-2);
	--code-important: var(--drx-color-red-2);
	--code-keyword: var(--drx-color-pink-2);
	--code-operator: var(--drx-color-red-2);
	--code-property: var(--drx-color-orange-2);
	--code-string: var(--drx-color-yellow-2);
	--code-tag: var(--drx-color-red-2);
	--code-value: var(--drx-color-purple-2);

	
	.workspace-sidedock-vault-profile {
		background-color: var(--drx-color-surface) !important;
	}

	
	.workspace-leaf-content {
		background-color: var(--drx-color-surface);
	}

	
	.status-bar {
		background-color: var(--drx-color-surface);
	}

	
	.nav-header {
		background-color: var(--drx-color-base);
	}

	
	.workspace-split.mod-root .view-content {
		background-color: var(--drx-color-surface);
	}

	
	.markdown-rendered tbody tr {
		background: var(--drx-color-base);
	}

	
	.titlebar-button {
		background-color: var(--drx-color-base);
	}

	
	.markdown-source-view .cm-string.cm-url {
		color: var(--drx-color-cyan-2);
	}

	
	textarea,
	input.metadata-input-text,
	input[type='date'],
	input[type='datetime-local'],
	input[type='text'],
	input[type='search'],
	input[type='email'],
	input[type='password'],
	input[type='number'] {
		background-color: var(--drx-color-base);
	}

	
	.kanban-plugin__item {
		border: 1px solid var(--drx-color-highlight);
	}

	.kanban-plugin__lane {
		background-color: var(--drx-color-overlay);
	}

	
	button:not(.clickable-icon),
	.setting-item-control select {
		background-color: var(--drx-color-highlight);
	}

	.setting-item-control select:hover {
		background-color: var(--drx-color-accent);
	}

	
	.horizontal-tab-content,
	.vertical-tab-content {
		background-color: var(--drx-color-surface);
	}

	.workspace-tab-header-container .workspace-tab-header.is-active {
		background-color: var(--drx-color-surface) !important;
	}

	
	.cm-callout, .markdown-rendered .callout {
		border-radius: var(--drx-border-radius-inner) !important;
	}

	.callout-title {
		font-weight: 500;
	}

	.callout a {
		font-weight: 500;
	}

	.callout[data-callout="todo"] {
		--bold-color: var(--drx-color-text);
		background: var(--drx-color-red-2) !important;
		a { color: var(--drx-color-text) !important; }
	}

	.callout[data-callout="important"] {
		--bold-color: var(--drx-color-purple-2);
		a { color: var(--drx-color-purple-2) !important; }
	}

	.callout[data-callout="example"] {
		--bold-color: var(--drx-color-pink-2);
		a { color: var(--drx-color-pink-2) !important; }
	}

	.callout[data-callout="tldr"], .callout[data-callout="summary"], .callout[data-callout="tip"] {
		--bold-color: var(--drx-color-cyan-2);
		a { color: var(--drx-color-cyan-2) !important; }
	}

	.callout[data-callout="bug"], .callout[data-callout="error"], .callout[data-callout="fail"] {
		--bold-color: var(--drx-color-red-2);
		a { color: var(--drx-color-red-2) !important; }
	}

	.callout[data-callout="quote"] {
		--bold-color: var(--drx-color-purple-2);
		a { color: var(--drx-color-purple-2) !important; }
	}

	.callout[data-callout="success"] {
		--bold-color: var(--drx-color-green-2);
		a { color: var(--drx-color-green-2) !important; }
	}

	.callout[data-callout="question"], .callout[data-callout="warning"] {
		--bold-color: var(--drx-color-orange-2);
		a { color: var(--drx-color-orange-2) !important; }
	}
}



body.theme-light {
	color: var(--drx-color-text);
	background-color: var(--drx-color-base);

	--drx-color-base: #EDE9DA;
	--drx-color-surface: #FFFBEB;
	--drx-color-overlay: #DEDBCC;
	--drx-color-highlight: #CECCC0;

	--drx-color-text: #1F1F1F;
	--drx-color-subtext: #6C664B;
	--drx-color-deactivate: #BCBAB3;
	--drx-color-comment: #6C664B;

	--drx-color-accent: hsl(var(--accent-h), var(--accent-s), var(--accent-l));
	--drx-color-important: hsl(var(--accent-h), var(--accent-s), calc(var(--accent-l) - 20%));

	--drx-color-red-1: #D74C3D;
	--drx-color-red-2: #CB3A2A;
	--drx-color-red-3: #9B2D21;
	--drx-color-orange-1: #D16319;
	--drx-color-orange-2: #AF3A03;
	--drx-color-orange-3: #8C2E02;
	--drx-color-yellow-1: #9E841A;
	--drx-color-yellow-2: #846E15;
	--drx-color-yellow-3: #6A5811;
	--drx-color-green-1: #198D0C;
	--drx-color-green-2: #14710A;
	--drx-color-green-3: #105908;
	--drx-color-cyan-1: #2AA198;
	--drx-color-cyan-2: #179299;
	--drx-color-cyan-3: #12747A;
	--drx-color-blue-1: #047FB4;
	--drx-color-blue-2: #036A96;
	--drx-color-blue-3: #025578;
	--drx-color-purple-1: #7862D0;
	--drx-color-purple-2: #644AC9;
	--drx-color-purple-3: #4F3AA1;
	--drx-color-pink-1: #BF185A;
	--drx-color-pink-2: #A3144D;
	--drx-color-pink-3: #82103E;

	--bold-color: var(--drx-color-accent);
	--text-selection: color-mix(in srgb, var(--drx-color-accent), transparent 70%);

	--color-base-00: var(--drx-color-base);
	--color-base-10: var(--drx-color-base);
	--color-base-20: var(--drx-color-base);
	--color-base-25: var(--drx-color-base);
	--color-base-30: var(--drx-color-base);
	--color-base-35: var(--drx-color-overlay);
	--color-base-40: var(--drx-color-overlay);
	--color-base-50: var(--drx-color-deactivate);
	--color-base-60: red;
	--color-base-70: var(--drx-color-subtext);
	--color-base-100: var(--drx-color-text);

	--tag-color: var(--drx-color-accent);

	--link-color: var(--drx-color-accent);
	--link-color-hover: var(--drx-color-important);
	--link-external-color: var(--drx-color-accent);
	--link-external-color-hover: var(--drx-color-important);
	--link-unresolved-color: var(--drx-color-green-2);
	--link-unresolved-decoration-color: var(--drx-color-red-2);

	--hr-color: var(--drx-color-deactivate);
	--nav-item-active: var(--drx-color-highlight);
	--ribbon-background: var(--drx-color-surface);
	--status-bar-background: var(--drx-color-surface);
	--table-header-background: var(--drx-color-overlay);
	--titlebar-background: var(--drx-color-base);

	--code-normal: var(--drx-color-subtext);
	--code-comment: var(--drx-color-comment);
	--code-function: var(--drx-color-green-2);
	--code-important: var(--drx-color-red-2);
	--code-keyword: var(--drx-color-pink-2);
	--code-operator: var(--drx-color-red-2);
	--code-property: var(--drx-color-orange-2);
	--code-string: var(--drx-color-yellow-2);
	--code-tag: var(--drx-color-red-2);
	--code-value: var(--drx-color-purple-2);

	
	.workspace-sidedock-vault-profile {
		background-color: var(--drx-color-surface) !important;
	}

	
	.workspace-leaf-content {
		background-color: var(--drx-color-surface);
	}

	
	.status-bar {
		background-color: var(--drx-color-surface);
	}

	
	.nav-header {
		background-color: var(--drx-color-base);
	}

	
	.workspace-split.mod-root .view-content {
		background-color: var(--drx-color-surface);
	}

	
	.markdown-rendered thead tr {
		background-color: var(--drx-color-surface);
	}

	
	.workspace-tab-header-container, 
	.titlebar-button {
		background-color: var(--drx-color-base);
	}

	
	.markdown-source-view .cm-string.cm-url {
		color: var(--drx-color-blue-2);
		background-color: var(--drx-color-highlight);
	}

	
	textarea,
	input.metadata-input-text,
	input[type='date'],
	input[type='datetime-local'],
	input[type='text'],
	input[type='search'],
	input[type='email'],
	input[type='password'],
	input[type='number'] {
		background-color: var(--drx-color-overlay);
	}

	
	.kanban-plugin__item {
		border: 1px solid var(--drx-color-overlay);
	}

	.kanban-plugin__lane {
		background-color: var(--drx-color-base);
	}

	
	button:not(.clickable-icon),
	.setting-item-control select {
		background-color: var(--drx-color-overlay);
	}

	
	.horizontal-tab-content,
	.vertical-tab-content {
		background-color: var(--drx-color-surface);
	}

	.workspace-tab-header-container .workspace-tab-header.is-active {
		background-color: var(--drx-color-surface) !important;
	}

	
	.cm-callout, .markdown-rendered .callout {
		border-radius: var(--drx-border-radius-inner) !important;
		border: solid 1px var(--drx-color-highlight);
		box-shadow: 0 0.25rem 0.5rem #CECCC0B6;
	}

	.cm-callout:hover, .markdown-rendered .callout:hover {
		border-radius: var(--drx-border-radius-inner) !important;
		box-shadow: 0 0.25rem 0.5rem var(--drx-color-base) !important;
	}

	.callout {
		padding: 0px;
		background: #6272A43F !important;
	}

	.callout-title {
		gap: 10px;
		padding: 1rem;
		font-weight: 500;
	}

	.callout-content {
		background: var(--drx-color-base) !important;
		padding: 1rem;
		box-shadow: inset 0 -0.25rem 0.25rem #CECCC066;
	}

	.callout a {
		font-weight: 500;
	}

	.callout[data-callout="todo"] {
		background: var(--drx-color-red-2) !important;
		color: white !important;
		.callout-content { color: var(--drx-color-text) !important; }
		--bold-color: var(--drx-color-text);
		a { color: white !important; }
	}

	.callout[data-callout="important"], .callout[data-callout="example"] {
		background: #A3144D4F !important;
		.callout-title, .callout-icon .svg-icon { color: var(--drx-color-pink-2); }
		--bold-color: var(--drx-color-pink-2);
		a { color: var(--drx-color-pink-2) !important; }
	}

	.callout[data-callout="summary"], .callout[data-callout="tldr"], .callout[data-callout="tip"] {
		background: #036A964F !important;
		.callout-title, .callout-icon .svg-icon { color: var(--drx-color-blue-2); }
		--bold-color: var(--drx-color-blue-2);
		a { color: var(--drx-color-blue-2) !important; }
	}

	.callout[data-callout="bug"], .callout[data-callout="error"], .callout[data-callout="fail"] {
		background: #A3144D4F !important;
		.callout-title, .callout-icon .svg-icon { color: var(--drx-color-red-2); }
		--bold-color: var(--drx-color-red-2);
		a { color: var(--drx-color-red-2) !important; }
	}

	.callout[data-callout="quote"] {
		background: #644AC94F !important;
		.callout-title, .callout-icon .svg-icon { color: var(--drx-color-purple-2); }
		--bold-color: var(--drx-color-purple-2);
		a { color: var(--drx-color-purple-2) !important; }
	}

	.callout[data-callout="success"] {
		background: #14710A4F !important;
		.callout-title, .callout-icon .svg-icon { color: var(--drx-color-green-2); }
		--bold-color: var(--drx-color-green-2);
		a { color: var(--drx-color-green-2) !important; }
	}

	.callout[data-callout="question"], .callout[data-callout="warning"] {
		background: #AF3A034F !important;
		.callout-title, .callout-icon .svg-icon { color: var(--drx-color-orange-2); }
		--bold-color: var(--drx-color-orange-2);
		a { color: var(--drx-color-orange-2) !important; }
	}
}




a { color: var(--drx-color-accent) !important; }

a:hover { color: var(--drx-color-important) !important; }


.markdown-rendered h1[align="center"], h1 {
	font-size: 2em;
}


.workspace-tab-container, .prompt {
	margin: 10px;
	border-radius: var(--drx-border-radius-outer);
}


.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3 {
    margin-top: 2em !important;
    margin-bottom: 0.5em !important;
}


.HyperMD-header-1,
.markdown-rendered h1:not([align="center"]) {
	border-bottom: 3px solid;
	border-color: var(--drx-color-accent);
	padding-bottom: 0.3em !important;
}


.cm-s-obsidian span.cm-inline-code  {
	color: var(--drx-color-subtext);
}


.workspace-sidedock-vault-profile {
	width: 94% !important;
	margin: 10px;
	border: none;
	border-radius: var(--drx-border-radius-outer);
}


.status-bar {
	border-radius: var(--drx-border-radius-inner) 0px 0px 0px;
	border-top: 3px solid;
	border-left: 3px solid;
	border-color: var(--drx-color-base);
	background-color: var(--drx-color-base) !important;
}


.workspace-split.mod-root .view-content {
	overflow-y: scroll;
}


.nav-header {
	margin: 10px;
	border-radius: var(--drx-border-radius-outer);
}


.modal-container.mod-dim .modal {
	border-radius: var(--drx-border-radius-outer);
	box-shadow: none;
}


.markdown-preview-view p {
	text-align: justify;
	text-justify: inter-word;
	hyphens: auto;
	-webkit-hyphens: auto;
}


body .workspace {
	position: relative;
	overflow: visible;
	padding: 8px;
}


.markdown-source-view,
.markdown-reading-view {
	container-type: inline-size;
}


body:not(.table-width-obsidian-default) .markdown-source-view.mod-cm6 .cm-table-widget .table-wrapper,
body:not(.table-width-obsidian-default) :is(.markdown-rendered, .markdown-source-view.mod-cm6.is-live-preview) table {
	width: 100% !important;
}


.table-width-customized .markdown-source-view.mod-cm6.is-live-preview .cm-content>.cm-table-widget,
.table-width-customized .markdown-rendered .markdown-preview-sizer>div:has(>table) {
	overflow: auto;
	width: 200rem !important;
	margin-left: (calc(200rem - 100%) / -2) !important;
}


button:not(.clickable-icon),
select, .combobox-button, .dropdown {
	box-shadow: none;
	border-radius: var(--drx-border-radius-inner);
}

button:not(.clickable-icon):hover {
	background: var(--drx-color-accent);
	cursor: pointer;
}

button.mod-cta {
	color: var(--drx-color-text) !important; 
}


.kanban-plugin__lane-header-wrapper, 
.kanban-plugin__scroll-container.kanban-plugin__vertical, 
.kanban-plugin__item-button-wrapper {
	border: none;
}

.kanban-plugin__lane {
	border: none;
	border-radius: var(--drx-border-radius-outer);
}

.kanban-plugin__item-content-wrapper,
.kanban-plugin__item-title-wrapper {
	background: transparent;
}

.kanban-plugin__item {
	margin-top: 0.25rem;
}


.workspace-leaf.mod-active .view-header,
.is-focused .workspace-leaf.mod-active .view-header{
	background: transparent;
}


.workspace-tab-header-container .workspace-tab-header.is-active {
	border-radius: var(--drx-border-radius-inner);
}

.workspace-tab-header-container .workspace-tab-header {
	position: unset;
}



@media print {

	.internal-embed{
		margin-left:-30px;
	}

	h2, h3, h4, h5, h6 {
		page-break-after: avoid;
	}

	pre, blockquote {
		page-break-inside: avoid;
	}

	
	.theme-light .callout {
		page-break-inside: avoid;
		border-radius: 10px !important;
		box-shadow: 0 0.25rem 0.5rem #CFCFCF66 !important;
		border: solid 1px var(--drx-color-highlight) !important;
	}

	.theme-light .callout-content {
		background: #FFFBEB !important;
		box-shadow: inset 0 -0.25rem 0.25rem #CFCFCF66;
	}
}




img[alt*="left"] {
	float:left;
	clear:left;
	margin-right: 2rem;
	margin-bottom: 4px;
	margin-top: 4px;
}


img[alt*="right"] {
	float:right;
	clear:right;
	margin-left: 1rem;
	margin-bottom: 4px;
	margin-top: 4px;
}


img[alt*="center"],img[alt*="centre"] {
	display:block;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 4px;
	margin-top: 4px;
	max-height: 400px;
}