vitepress-theme-async/styles/_variables/index.less

<h1 align="center">vitepress-theme-async</h1>

.var-primary(@primary: #afb42b; @primary-weak: #c0ca33) {
	--primary: @primary;
	--primary-70: fade(@primary, 70%);
	--primary-50: fade(@primary, 50%);
	--primary-30: fade(@primary, 30%);
	--primary-weak: @primary-weak;
	--primary-weak-50: fade(@primary-weak, 50%);
}

.var-theme(@body-color: #5d5d5e; @body-bg-color: #00151f; @theme-color: #00283a; @theme-bg-color: #fcfcfe; @theme-bg2-color: #f4f5f7) {
	--body-color: @body-color;
	--body-color-30: fade(@body-color, 30%);
	--body-color-5: fade(@body-color, 5%);
	--body-bg-color: @body-bg-color;
	--theme-color: @theme-color;
	--theme-bg-color: @theme-bg-color;
	--theme-bg-color-80: fade(@theme-bg-color, 80%);
	--theme-bg2-color: @theme-bg2-color;
}

:root {
	@body-color: #7b7b7d;
	@theme-bg-color: #fcfcfe;

	// base
	.var-primary();
	.var-theme();
	--top-bar-height: 80px;

	--box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.15);
	--box-shadow2: inset 0 0 4px -1px rgba(0, 0, 0, 0.15);
	--border-dotted: dotted 2px rgba(225, 225, 235, 0.9);

	// preloader
	--preloader-background: #00283a;

	// top-bar
	--top-bar-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15);

	// card
	--card-padding: 40px;
	--card-bottom-card: 40px;
	--card-border-radius: 10px;
	--card-top-color: #ffffff;
	--card-top-bg-color: #ff6a00;

	// cover
	--card-cover-bg-color: #e9e9e9;

	// table
	--tabele-thead-bg-color: rgba(153, 169, 191, 0.1);
	--tabele-thead-border-color: #eee;

	// tabs
	--tab-border-color: #f1f1f1;
	--tab-botton-bg-color: #f1f1f1;
	--tab-botton-color: #7b7b7d;
	--tab-button-hover-bg-color: #eeeeee;
	--tab-button-active-bg-color: #ffffff;

	// fixed btn
	--fixed-button-bg-color: #ffffff;
	--fixed-button-color: #7b7b7d;

	// code
	--code-bg-color: #f1f1f1;
	--code-color: #476582;

	// notice outdate
	--notice-outdate-bg: #ffe6e6;
	--notice-outdate-color: #ff6666;
	--notice-outdate-border: #ff8080;

	// scroll progress
	--scroll-progress-bg-color: linear-gradient(#ffdddd, #e9ddff);

	// note
	--note-info-bg-color: #65758529;
	--note-tip-bg-color: #646cff29;
	--note-warning-bg-color: #eab30829;
	--note-danger-bg-color: #f43f5e29;
	--note-details-bg-color: #eaeaea;

	// ::selection
	--selection-bg-color: #1f2d3d;
	--selection-color: #f1f1f1;

	// Code
	--code-line-height: 1.7;
	--code-font-size: 0.875em;
	--code-color: #3451b2;
	--code-link-color: #3451b2;
	--code-link-hover-color: #3a5ccc;
	--code-bg: rgba(142, 150, 170, 0.14);

	--code-block-color: rgba(60, 60, 67, 0.78);
	--code-block-bg: #f6f6f7;
	--code-block-divider-color: #e2e2e3;

	--code-lang-color: rgba(60, 60, 67, 0.56);

	--code-line-highlight-color: rgba(142, 150, 170, 0.14);
	--code-line-number-color: rgba(60, 60, 67, 0.56);

	--code-line-diff-add-color: rgba(16, 185, 129, 0.14);
	--code-line-diff-add-symbol-color: #18794e;

	--code-line-diff-remove-color: rgba(244, 63, 94, 0.14);
	--code-line-diff-remove-symbol-color: #b8272c;

	--code-line-warning-color: rgba(234, 179, 8, 0.14);
	--code-line-error-color: rgba(244, 63, 94, 0.14);

	--code-copy-code-border-color: #e2e2e3;
	--code-copy-code-bg: #f6f6f7;
	--code-copy-code-hover-border-color: #e2e2e3;
	--code-copy-code-hover-bg: #ffffff;
	--code-copy-code-active-text: rgba(60, 60, 67, 0.78);
	--code-copy-copied-text-content: "Copied";

	--code-tab-divider: #e2e2e3;
	--code-tab-text-color: rgba(60, 60, 67, 0.78);
	--code-tab-bg: #f6f6f7;
	--code-tab-hover-text-color: rgba(60, 60, 67);
	--code-tab-active-text-color: rgba(60, 60, 67);
	--code-tab-active-bar-color: #3451b2;

	--code-icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2'/%3E%3C/svg%3E");
	--code-icon-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' height='20' width='20' stroke='rgba(128,128,128,1)' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2M9 5a2 2 0 0 0 2 2h2a2 2 0 0 0 2-2M9 5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2m-6 9 2 2 4-4'/%3E%3C/svg%3E");
}

.dark() {
	// base
	.var-primary();
	.var-theme(#d1d9e9b3, #00151f, #dedee0, #00283a, #02162b);

	--box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.6);
	--box-shadow2: inset 0 0 4px -1px rgba(0, 0, 0, 0.6);
	--border-dotted: dotted 2px rgba(225, 225, 235, 0.15);

	// preloader
	--preloader-background: #dedee0;

	// top-bar
	--top-bar-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.6);

	// cover
	--card-cover-bg-color: #162e38;

	// table
	--tabele-thead-bg-color: #525f663d;
	--tabele-thead-border-color: #ffffff1c;

	// tabs
	--tab-border-color: #063c54;
	--tab-botton-bg-color: #063c54;
	--tab-botton-color: #dedee0;
	--tab-button-hover-bg-color: #003146;
	--tab-button-active-bg-color: #042838;

	// fixed btn
	--fixed-button-bg-color: #063c54;
	--fixed-button-color: #dedee0;

	// code
	--code-bg-color: #3a3a3a;
	--code-color: #c9def1;

	// notice outdate
	--notice-outdate-bg: #403131;
	--notice-outdate-color: #ff6565;
	--notice-outdate-border: #bb1e1e;

	// scroll progress
	--scroll-progress-bg-color: linear-gradient(#82df7a80, #82df7a80);

	// note
	--note-details-bg-color: #272a2f;

	// ::selection
	--selection-bg-color: #f1f1f1;
	--selection-color: #1f2d3d;

	// code
	--code-color: #a8b1ff;
	--code-link-color: #a8b1ff;
	--code-link-hover-color: #5c73e7;
	--code-bg: rgba(101, 117, 133, 0.16);

	--code-block-color: rgba(235, 235, 245, 0.6);
	--code-block-bg: #161618;
	--code-block-divider-color: #000000;

	--code-lang-color: rgba(235, 235, 245, 0.38);

	--code-line-highlight-color: rgba(101, 117, 133, 0.16);
	--code-line-number-color: rgba(235, 235, 245, 0.38);

	--code-line-diff-add-color: rgba(16, 185, 129, 0.16);
	--code-line-diff-add-symbol-color: #3dd68c;

	--code-line-diff-remove-color: rgba(244, 63, 94, 0.16);
	--code-line-diff-remove-symbol-color: #f66f81;

	--code-line-warning-color: rgba(234, 179, 8, 0.16);
	--code-line-error-color: rgba(244, 63, 94, 0.16);

	--code-copy-code-border-color: #2e2e32;
	--code-copy-code-bg: #202127;
	--code-copy-code-hover-border-color: #2e2e32;
	--code-copy-code-hover-bg: #1b1b1f;
	--code-copy-code-active-text: rgba(235, 235, 245, 0.6);
	--code-copy-copied-text-content: "Copied";

	--code-tab-divider: #000000;
	--code-tab-text-color: rgba(235, 235, 245, 0.6);
	--code-tab-bg: #161618;
	--code-tab-hover-text-color: rgba(255, 255, 245, 0.86);
	--code-tab-active-text-color: rgba(255, 255, 245, 0.86);
	--code-tab-active-bar-color: #a8b1ff;
}

:root.dark {
	.dark();
}

@media (max-width: 768px) {
	:root {
		--card-padding: 20px;
		--card-bottom-card: 10px;
		--card-border-radius: 6px;

		blockquote:before {
			top: 0;
		}
	}
}

// transition mixin
.transition-mixin(@type: all; @time: 0.4s) {
	transition: @type @time ease-in-out;
}

//
.ellipsis() {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

//
.line-ellipsis(@line: 2) {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: @line;
}

.dark .vp-code-light {
	display: none;
}

html:not(.dark) .vp-code-dark {
	display: none;
}

.shadow {
	transition:
		all 0.4s ease-in-out,
		box-shadow 0.3s ease;
	box-shadow: var(--box-shadow);

	&:hover {
		box-shadow: var(--box-shadow-hover);
	}
}