theme.css

/* To navigate in the Style Settings part, search:
 * "user-" to find the main folders
 */

/* @settings
name: Power
id: user-power
settings:
	- 
        id: user-appearance
        title: Appearance
		description: |-
			Change how the native ObsidianMD looks
			(Plugins and Snippets dependant on the native colors will still be affected)
        type: heading
        level: 1
		collapsed: true
	-
		id: user-color
		title: Color
		type: heading
		level: 2
		collapsed: true
	-
		id: color-red
		title: Red
		type: variable-themed-color
		format: hex
		opacity: false
		default-light: "#"
		default-dark: "#"
		alt-format:
			-
				id: color-red-rgb
				format: rgb-values
	-
		id: color-orange
		title: Orange
		type: variable-themed-color
		format: hex
		opacity: false
		default-light: "#"
		default-dark: "#"
		alt-format:
			-
				id: color-orange-rgb
				format: rgb-values
	-
		id: color-yellow
		title: Yellow
		type: variable-themed-color
		format: hex
		opacity: false
		default-light: "#"
		default-dark: "#"
		alt-format:
			-
				id: color-yellow-rgb
				format: rgb-values
	-
		id: color-green
		title: Green
		type: variable-themed-color
		format: hex
		opacity: false
		default-light: "#"
		default-dark: "#"
		alt-format:
			-
				id: color-green-rgb
				format: rgb-values
	-
		id: color-cyan
		title: Cyan
		type: variable-themed-color
		format: hex
		opacity: false
		default-light: "#"
		default-dark: "#"
		alt-format:
			-
				id: color-cyan-rgb
				format: rgb-values
	-
		id: color-blue
		title: Blue
		type: variable-themed-color
		format: hex
		opacity: false
		default-light: "#"
		default-dark: "#"
		alt-format:
			-
				id: color-blue-rgb
				format: rgb-values
	-
		id: color-purple
		title: Purple
		type: variable-themed-color
		format: hex
		opacity: false
		default-light: "#"
		default-dark: "#"
		alt-format:
			-
				id: color-purple-rgb
				format: rgb-values
	-
		id: color-pink
		title: Pink
		type: variable-themed-color
		format: hex
		opacity: false
		default-light: "#"
		default-dark: "#"
		alt-format:
			-
				id: color-pink-rgb
				format: rgb-values
	-
		id: user-background
		title: Background
		type: heading
		level: 2
		collapsed: true
	-
		id: background-primary
		title: Primary Background
		type: variable-themed-color
		format: hex
		opacity: false
		default-light: "#"
		default-dark: "#"
	-
		id: background-primary-alt
		title: On Primary Background
		description: The background color for objects with a background different from and on top of the primary background
		type: variable-themed-color
		format: hex
		opacity: true
		default-light: "#"
		default-dark: "#"
	-
		id: background-secondary
		title: Secondary Background
		type: variable-themed-color
		format: hex
		opacity: false
		default-light: "#"
		default-dark: "#"
	-
		id: background-secondary-alt
		title: On Secondary Background
		description: The background color for objects with a background different from and on top of the secondary background
		type: variable-themed-color
		format: hex
		opacity: true
		default-light: "#"
		default-dark: "#"
	-
		id: background-modifier-hover
		title: Hover Background
		type: variable-themed-color
		format: hex
		default-light: "#"
		default-dark: "#"
	-
		id: background-modifier-active-hover
		title: Active Hover Background
		type: variable-themed-color
		format: hex
		default-light: "#"
		default-dark: "#"
	-
		id: background-modifier-border
		title: Border Color
		type: variable-themed-color
		format: hex
		opacity: true
		default-light: "#"
		default-dark: "#"
	-
		id: background-modifier-border-hover
		title: Border Hover Color
		type: variable-themed-color
		format: hex
		opacity: true
		default-light: "#"
		default-dark: "#"
	-
		id: background-modifier-border-focus
		title: Border Focus Color
		type: variable-themed-color
		format: hex
		opacity: true
		default-light: "#"
		default-dark: "#"
	-
		id: background-modifier-form-field
		title: Form Field Color
		type: variable-themed-color
		format: hex
		opacity: true
		default-light: "#"
		default-dark: "#"
	-
		id: user-codeblock
		title: Codeblocks
		type: heading
		level: 2
		collapsed: true
	-
		id: code-background
		title: Background color
		type: variable-themed-color
		format: hex
		opacity: true
		default-light: "#"
		default-dark: "#"
	-
		id: code-normal
		title: Text color
		type: variable-themed-color
		format: hex
		default-light: "#"
		default-dark: "#"
	-
		id: code-size
		title: Font size
		description: Accepts CSS length units
		type: variable-text
		default: ""
	-
		id: code-white-space
		title: Code white space
		type: variable-select
		default: normal
		options:
			-
				label: Collapsed whitepace, line wrapping and no newline
				value: normal
			-
				label: Collapsed whitespace, no line wrapping and no newline
				value: nowrap
			-
				label: Preserved whitespace, no line wrapping
				value: pre
			- 
				label: Collapsed whitespace, line wrapping
				value: pre-line
			-
				label: Preserved whitespace, line wrapping
				value: pre-wrap
	-
		id: code-syntax-colors
		title: Syntax Highlighting
		type: heading
		level: 3
		collapsed: true
	-
		id: code-comment
		title: Comments
		type: variable-themed-color
		format: hex
		default-light: "#"
		default-dark: "#"
	-
		id: code-function
		title: Functions
		type: variable-themed-color
		format: hex
		default-light: "#"
		default-dark: "#"
	-
		id: code-important
		title: Important
		type: variable-themed-color
		format: hex
		default-light: "#"
		default-dark: "#"
	-
		id: code-keyword
		title: Keywords
		type: variable-themed-color
		format: hex
		default-light: "#"
		default-dark: "#"
	-
		id: code-operator
		title: Operators
		type: variable-themed-color
		format: hex
		default-light: "#"
		default-dark: "#"
	-
		id: code-property
		title: Properties
		type: variable-themed-color
		format: hex
		default-light: "#"
		default-dark: "#"
	-
		id: code-punctuation
		title: Punctuations
		type: variable-themed-color
		format: hex
		default-light: "#"
		default-dark: "#"
	-
		id: code-string
		title: Strings
		type: variable-themed-color
		format: hex
		default-light: "#"
		default-dark: "#"
	-
		id: code-tag
		title: Tags
		type: variable-themed-color
		format: hex
		default-light: "#"
		default-dark: "#"
	-
		id: code-value
		title: Values
		type: variable-themed-color
		format: hex
		default-light: "#"
		default-dark: "#"
	-
		id: user-headings
		title: Headings
		type: heading
		level: 2
		collapsed: true
	-
		id: user-heading-1
		title: Heading 1
		type: heading
		level: 3
		collapsed: true
	-
		id: h1-basic-settings-info
		description: "Basic settings"
		description.vi: "Cài đặt cơ bản"
		type: info-text
		markdown: true
	-
		id: h1-font
		title: H1 Font
		title.vi: Phông chữ
		description: Font(s) to use which is on your system
		description.vi: (Những) phông chữ có trên máy để sử dụng
		type: variable-text
		default: ""
	-
		id: h1-size
		title: H1 Size
		title.vi: Kích thước phông
		description: Accepts CSS length units
		description.vi: Nhận các đơn vị độ dài của CSS
		type: variable-text
		default: 1.5em
	-
		id: h1-weight
		title: H1 Weight
		description: "100: Thin - 900: Black"
		type: variable-number-slider
		default: 600
		min: 100
		max: 900
		step: 100
	-
		id: h1-style
		title: H1 Style
		type: variable-select
		allowEmpty: false
		default: normal
		options:
			-
				label: Normal
				value: normal
			-
				label: Italic
				value: italic
	-
		id: h1-color
		title: H1 Color
		type: variable-themed-color
		format: hex
		default-light: "#"
		default-dark: "#"
		alt-format:
			-
				id: h1-color-rgb
				format: rgb-values
	-
		id: h1-variant
		title: H1 Variant
		type: variable-select
		allowEmpty: false
		default: normal
		options:
			-
				label: Normal
				value: normal
			-
				label: Small caps
				value: small-caps
			-
				label: All small caps
				value: all-small-caps
	-
		id: h1-advanced-settings-info
		description: "Advanced settings"
		type: info-text
		markdown: true
	-
		id: h1-alignment
		title: H1 Alignment
		type: variable-select
		allowEmpty: false
		default: left
		options:
			-
				label: Left
				value: left
			-
				label: Center
				value: center
			-
				label: Right
				value: right
			-
				label: Justify
				value: justiry
	-
		id: h1-format
		title: H1 Format
		type: class-select
		allowEmpty: false
		default: h1-default
		options:
			-
				label: Default
				value: h1-default
			-
				label: Background
				value: h1-background
			-
				label: Pill
				value: h1-pill
	-
		id: h1-background
		title: H1 Background
		type: heading
		level: 4
		collapsed: true
	-
		id: h1-background-info
		description: |-
			Any text input in here can accept up to 4 values that is separated by spaces
			Check [this](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#tricky_edge_cases) out to see how CSS properties deal with multiple values
		type: info-text
		markdown: true
	-
		id: h1-background-color
		title: H1 Background Color
		description: This automatically defaults to transparent if reset
		type: variable-themed-color
		format: hex
		opacity: true
		default-light: "#"
		default-dark: "#"
		alt-format:
			-
				id: h1-background-color-rgb
				format: rgb-values
	-
		id: h1-background-border-color
		title: H1 Background Border Color
		description: This automatically defaults to transparent if reset
		type: variable-themed-color
		format: hex
		opacity: true
		default-light: "#"
		default-dark: "#"
		alt-format:
			-
				id: h1-background-border-color-rgb
				format: rgb-values
	-
		id: h1-background-border-style
		title: H1 Background Border Style
		description: Accepts any CSS border-style values
		type: variable-text
		default: ""
	-
		id: h1-background-border-width
		title: H1 Background Border Width
		description: Accepts CSS length units as well as "thin", "medium", and "thick"
		type: variable-text
		default: ""
	-
		id: h1-background-border-radius
		title: H1 Background Border Radius
		type: variable-text
		default: 0.25em
	-
		id: h1-pill
		title: H1 Pill
		type: heading
		level: 4
		collapsed: true
	-
		id: h1-pill-color
		title: H1 Pill Color
		description: This automatically defaults to the color red if sets to none
		type: variable-themed-color
		format: hex
		opacity: true
		default-light: "#"
		default-dark: "#"
		alt-format:
			-
				id: h1-pill-color-rgb
				format: rgb-values
	-
		id: h1-pill-width
		title: H1 Pill Width
		type: variable-text
		default: 0.1rem
	-
		id: user-heading-2
		title: Heading 2
		type: heading
		level: 3
		collapsed: true
	-
		id: user-heading-3
		title: Heading 3
		type: heading
		level: 3
		collapsed: true
	-
		id: user-heading-4
		title: Heading 4
		type: heading
		level: 3
		collapsed: true
	-
		id: user-heading-5
		title: Heading 5
		type: heading
		level: 3
		collapsed: true
	-
		id: user-heading-6
		title: Heading 6
		type: heading
		level: 3
		collapsed: true
	-
		id: user-tag
		title: Tags
		type: heading
		level: 2
		collapsed: true
	-
		id: tag-normal-settings-info
		description: "Normal settings"
		description.vi: "Cài đặt bình thường"
		type: info-text
		markdown: true
	-
		id: tag-color
		title: Text color
		type: variable-themed-color
		format: hex
		default-light: "#"
		default-dark: "#"
	-
		id: user-text
		title: Text
		type: heading
		level: 2
		collapsed: true
*/

body {
	--line-height-normal: 2.1;
}

.theme-dark {
	--divider-width: 2px;
	--background-modifier-border: #313244;
	--interactive-normal: #181825;
	--interactive-hover: #1e1e2e;
	--bold-weight: 600;
	--h1-color: var(--color-red);
	--h1-size: 2em;
	--h1-line-height: 1.5em;
	--h2-color: var(--color-orange);
	--h2-size: 1.75em;
	--h2-line-height: 1.5em;
	--h3-color: var(--color-yellow);
	--h3-size: 1.5em;
	--h3-line-height: 1.5em;
	--h4-color: var(--color-green);
	--h4-size: 1.25em;
	--h4-line-height: 1.5em;
	--h5-color: var(--color-blue);
	--h5-size: 1em;
	--h5-line-height: 1.5em;
	--h6-color: var(--color-purple);
	--h6-size: 0.9em;
	--h6-line-height: 1.5em;
	--callout-border-width: 2px;
	--callout-border-opacity: 0.8;
	--callout-padding: 0;
	--callout-radius: 2px;
	--callout-title-padding: 1em 0 1em 1em;
	--callout-content-padding: 0 0 1em 1em;
	--link-color: var(--color-blue);
	--link-color-hover: var(--color-blue);
	--tag-weight: 600;
	--tag-padding-x: 0.65em;
	--tag-padding-y: 0;
	--bold-color: var(--color-red);
	--deleted-color: var(--text-faint);
	--blockquote-background-color: var(--background-primary-alt);
	--blockquote-border-thickness: 4px;
	--blockquote-border-color: var(--background-modifier-border);
}

del {
	color: var(--deleted-color);
}

/* Callout */

.callout-content p {
	margin: -0.25em 0 0 0;
}

.callout[data-callout-metadata*="1/2"] {
	width: calc(50% - 4px);
	float: left;
	margin-right: 8px;
}

[data-callout-metadata*="1/2"]:has(+ [data-callout="danger"]) .callout {
	margin-right: 0;
}

.callout-content {
	margin-right: 1em;
	text-align: justify;
}

/* Canvas */

button:not(.clickable-icon) {
	box-shadow: 0 0 0 2px var(--background-primary-alt);
}

.canvas-node-group.is-themed .canvas-group-label:not([contenteditable="true"]) {
	font-weight: 800;
}

/* .canvas-group-label[contenteditable="true"] {
	box-shadow: 0 0 0 2px var(--canvas-color);
}

.canvas-node-group.is-themed .canvas-group-label:not([contenteditable="true"]) {
	background-color: var(--canvas-color);
}

.canvas-node-container {
	border: 2px solid var(--canvas-color);
	box-shadow: 0 0 0 2px var(--canvas-color);
}

.canvas-node {
	--shadow-border-themed: 0 0 0 2px var(--canvas-color);
	--shadow-border-themed-inset: 0 0 0 2px var(--canvas-color);
	& .canvas-node-content {
		background-color: color-mix(
			in srgb,
			var(--canvas-color),
			transparent 93%
		);
	}
	& .canvas-node-container {
		box-shadow: 0 0 0 2px var(--canvas-color);
	}
	&.is-selected .canva-node-container,
	&.is-focused .canva-node-container {
		box-shadow: 0 0 0 4px var(--canvas-color);
	}
}

.canvas-node.is-themed .canvas-node-container {
	border-color: color-mix(in srgb, var(--canvas-color) 70%, transparent);
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--canvas-color) 70%, transparent),
		var(--shadow-stationary);
}

.canvas-node.is-selected.is-themed .canvas-node-container,
.canvas-node.is-focused.is-themed .canvas-node-container {
	border-color: var(--canvas-color);
}

.canvas-edges path.canvas-display-path,
.canvas-edges polygon.canvas-path-end {
	stroke: var(--canvas-color);
	fill: var(--canvas-color);
} */

img,
.cards table.dataview tbody > tr > td img {
	background-color: var(--background-primary) !important;
}

/* Headings */

h2,
h3,
h4,
h5,
h6 {
	border-radius: 0.25em;
	text-align: center;
}

h1 {
	text-align: var(--h1-alignment);

	.el-h1:has(&) + .el-hr > hr {
		--hr-thickness: 4px;
		border-color: var(--h1-color);
		margin: -0.75em 0 0;
	}

	.h1-background & {
		background: var(--h1-background-color, rgb(var(--h1-color-rgb), 20%));
		border-color: var(--h1-background-border-color);
		border-width: var(--h1-background-border-width);
		border-style: var(--h1-background-border-style);
		border-radius: var(--h1-background-border-radius);
	}
}

.h2-background h2 {
	background: rgb(var(--color-orange-rgb), 20%);
}

.h3-background h3 {
	background: rgb(var(--color-yellow-rgb), 20%);
}

.h4-background h4 {
	background: rgb(var(--color-green-rgb), 20%);
}

.h5-background h5 {
	background: rgb(var(--color-blue-rgb), 20%);
}

.h6-background h6 {
	background: rgb(var(--color-purple-rgb), 20%);
}

/* Range Slider */
.style-settings-container input[type="range"] {
	width: 12rem;
}

/* Text Input */
.style-settings-container input[type="text"] {
	width: 12rem;
}

/* Color Selector */
/*
.pickr .pcr-button {
	width: 12rem;
	&::before {
		background: var(--background-primary-alt);
		box-shadow: unset;
		content: "Color Unset";
		color: var(--text-normal);
		font-family: var(--font-monospace);
		font-weight: 800;
		height: 1.6em;
		padding-top: 6px;
	}
	&::after {
		box-shadow: 0 0 0 2px var(--pcr-color);
	}
}
*/

/* Metadata */
.metadata-property:not([data-property-key="tags"]) {
	--pill-padding-x: inherit;
	--pill-padding-y: inherit;
}

.metadata-input-longtext {
	line-clamp: unset;
	-webkit-line-clamp: unset;
	max-height: none;
}

/* Multi-select */
body {
	--pill-background: var(--background-primary-alt);
	--pill-background-hover: var(--background-primary-alt);
	--pill-padding-x: 8px !important;
	--pill-padding-y: 0px !important;
}

/* Progress Bar */
.markdown-rendered div:has(+ div progress) p {
	margin-bottom: 0;
}

.markdown-preview-view progress[value]::-webkit-progress-bar,
.markdown-rendered progress[value]::-webkit-progress-bar,
.markdown-source-view.is-live-preview progress[value]::-webkit-progress-bar {
	background-color: #fff2;
	box-shadow: none;
	border-radius: 2em;
}
.markdown-preview-view progress[value]::-webkit-progress-value,
.markdown-rendered progress[value]::-webkit-progress-value,
.markdown-source-view.is-live-preview progress[value]::-webkit-progress-value {
	background-color: var(--progress-color, var(--interactive-accent));
}

/* Plugins */
/* Dataview */
.dataview.inline-field {
	white-space: nowrap;
}

.dataview.inline-field-standalone-value {
	padding: var(--pill-padding-y) var(--pill-padding-x);
	background-color: var(--pill-background);
	border-radius: 2em;
	font-family: var(--font-text);
	font-weight: var(--font-black);
}

.dataview.task-list-item:hover,
.dataview.task-list-basic-item:hover {
	background-color: initial;
	box-shadow: initial;
}

.table-view-table > thead > tr > th {
	border-bottom: 2px solid;
}

.markdown-preview-view th,
.table-view-table > thead > tr > th,
.markdown-source-view.mod-cm6
	.dataview.table-view-table
	thead.table-view-thead
	tr
	th {
	padding-left: 0.45em;
	padding-right: 0.45em;
}

table.dataview > tbody > tr > td {
	text-align: center;
}

.cards
	table.dataview.table-view-table
	tbody
	> tr
	> td:not(:last-child):not(:first-child) {
	border-bottom: none;
}

.cards table.dataview.table-view-table tbody > tr > td:first-child img {
	padding-top: 16px;
}

/* Style Settings */
.theme-light {
	--background-primary: var(--background-primary);
}

.themed-color-wrapper > div {
	background: var(--background-primary);
	padding: 10px;
}

/* .style-settings-container .setting-item-description > div {
	display: none;
} */

.style-settings-container > *,
.style-settings-heading > * {
	padding-bottom: 5px;
}

.style-settings-heading[data-level="0"] + .style-settings-container {
	padding-left: 40px;
	border-left: 1px solid var(--background-modifier-border);
}

.style-settings-heading:not([data-level="0"]) + .style-settings-container {
	padding-left: 40px;
	margin-left: -15px;
	border-left: 1px solid var(--background-modifier-border);
}

.workspace-tabs:not(.mod-top) .workspace-tab-header-container,
.workspace-tabs:not(.mod-top) .workspace-tab-header-container * {
	box-shadow: none !important;
	outline: none !important;
}

.workspace-tabs:not(.mod-top) .workspace-tab-header-container * {
	background-color: transparent !important;
}

.workspace-tabs:not(.mod-top)
	.workspace-tab-header-container
	.workspace-tab-header-inner-icon,
.workspace-tabs:not(.mod-top)
	.workspace-tab-header.is-active
	.workspace-tab-header-inner,
.workspace-tabs:not(.mod-top)
	.workspace-tab-header-container
	.workspace-tab-header-inner::before {
	opacity: 0;
	transform: translateY(-10px);
	transition:
		opacity 200ms ease-in,
		transform 200ms ease-in;
}

.workspace-tabs:not(.mod-top)
	.workspace-tab-header-container:hover
	.workspace-tab-header-inner-icon,
.workspace-tabs:not(.mod-top)
	.workspace-tab-header.is-active
	.workspace-tab-header-inner,
.workspace-tabs:not(.mod-top)
	.workspace-tab-header-container:hover
	.workspace-tab-header-inner::before {
	opacity: 1;
	transform: translateY(0);
}

.workspace-tabs:not(.mod-top) .workspace-tab-header-container {
	height: 10px;
	transition: height 200ms ease-in;
	position: relative;
}

.workspace-tabs:not(.mod-top) .workspace-tab-header-container:hover {
	height: var(--header-height);
	background-color: var(--background) !important;
}

.workspace-tabs:not(.mod-top) .workspace-tab-header-container::after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	top: 100%;
	position: absolute;
	z-index: 1;
}

/* Working on */
/* body .markdowwn-preview-view .heading-collapse-indicator,
body .is-live-preview .HyperMD-header .collapse-indicator.collapse-icon {
	transform: translateX(-8px);
}

.markdown-rendered > :is(h1, h2, h3, h4, h5, h6),
.markdown-preview-sizer > div > :is(h1, h2, h3, h4, h5, h6) {
	text-indent: 9px;
}

body .is-live-preview .HyperMD-header-1::before {
	margin-right: 6px;
	content: " ";
	display: inline-block;
	width: 3px;
	height: calc(1.2em - 8px);
	border-radius: var(--radius-m);
	background-color: var(--h1-color);
	transform: translateY(4px);
}

body .markdown-rendered > h1::before,
body .markdown-preview-sizer > div > h1::before {
	margin-right: 6px;
	content: " ";
	display: inline-block;
	width: 4px;
	height: 0.85em;
	border-radius: var(--radius-m);
	background-color: var(--h1-color);
	position: relative;
	vertical-align: -7%;
} */

.markdown-rendered table {
	width: 100%;
}

.footnotes > ol {
	columns: 2;
}