stdf/docs/site/src/app.css

@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));
@plugin "@tailwindcss/typography";
@theme {
	--color-primary-50: oklch(0.979 0.01 267.36);
	--color-primary-100: oklch(0.95 0.024 270.343);
	--color-primary-200: oklch(0.847 0.074 271.188);
	--color-primary-300: oklch(0.741 0.13 272.232);
	--color-primary-400: oklch(0.634 0.193 271.595);
	--color-primary-500: oklch(0.536 0.252 268.66);
	--color-primary: oklch(0.467 0.296 264.886);
	--color-primary-700: oklch(0.397 0.26 264.877);
	--color-primary-800: oklch(0.331 0.221 264.833);
	--color-primary-900: oklch(0.26 0.178 264.428);
	--color-primary-950: oklch(0.192 0.13 266.64);

	--color-dark-50: oklch(0.995 0.012 101.474);
	--color-dark-100: oklch(0.986 0.025 97.107);
	--color-dark-200: oklch(0.965 0.059 95.884);
	--color-dark-300: oklch(0.938 0.089 92.952);
	--color-dark-400: oklch(0.91 0.114 89.711);
	--color-dark-500: oklch(0.88 0.136 86.375);
	--color-dark: oklch(0.845 0.153 80.597);
	--color-dark-700: oklch(0.71 0.137 75.734);
	--color-dark-800: oklch(0.58 0.118 70.166);
	--color-dark-900: oklch(0.449 0.097 65.209);
	--color-dark-950: oklch(0.321 0.074 62.379);

	--color-primaryBlack: oklch(0.116 0.054 267.087);
	--color-primaryWhite: oklch(0.961 0.001 286.375);
	--color-darkBlack: oklch(0.183 0.035 86.634);
	--color-darkWhite: oklch(0.962 0.001 17.178);

	--color-success: oklch(0.704 0.142 167.084);
	--color-warning: oklch(0.558 0.154 47.186);
	--color-error: oklch(0.564 0.223 28.46);
	--color-info: oklch(0.482 0.14 261.518);

	--color-extend0: oklch(0.703 0.149 235.059);
	--color-Twitter: oklch(0.703 0.149 235.059);
	--color-extend1: oklch(0.702 0.194 38.137);
	--color-Svelte: oklch(0.702 0.194 38.137);
	--color-extend2: oklch(0.482 0.107 161.212);
	--color-Starbucks: oklch(0.482 0.107 161.212);

	--color-black: oklch(0 0 0);
	--color-white: oklch(1 0 0);
	--color-gray-50: oklch(0.961 0 0);
	--color-gray-100: oklch(0.925 0 0);
	--color-gray-200: oklch(0.845 0 0);
	--color-gray-300: oklch(0.767 0 0);
	--color-gray-400: oklch(0.683 0 0);
	--color-gray-500: oklch(0.6 0 0);
	--color-gray-600: oklch(0.51 0 0);
	--color-gray-700: oklch(0.42 0 0);
	--color-gray-800: oklch(0.321 0 0);
	--color-gray-900: oklch(0.218 0 0);
	--color-gray-950: oklch(0.159 0 0);
	--color-transparent: transparent;

	--color-bug1: oklch(0.579 0.214 27.172);
	--color-bug2: oklch(0.749 0.162 66.986);
	--color-bug3: oklch(0.912 0.192 103.116);
	--color-bug4: oklch(0.779 0.141 229.596);
	--color-tailwind: oklch(0.746 0.16 232.661);
	--color-svelte: oklch(0.702 0.194 38.137);

	/* 抖动动效 */
	--animate-shake: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
	@keyframes shake {
		10%,
		90% {
			transform: translate3d(-1px, 0, 0);
		}
		20%,
		80% {
			transform: translate3d(2px, 0, 0);
		}
		30%,
		50%,
		70% {
			transform: translate3d(-4px, 0, 0);
		}
		40%,
		60% {
			transform: translate3d(4px, 0, 0);
		}
	}

	/* 闪电动效 */
	--animate-lightning: lightning 3s linear infinite;
	@keyframes lightning {
		0% {
			opacity: 0;
		}
		10% {
			opacity: 1;
		}
		20% {
			opacity: 0;
		}
		30% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}

	/* 路径动效 */
	--animate-path: path 3s linear infinite;
	@keyframes path {
		0% {
			stroke-dashoffset: 400;
			fill: transparent;
		}
		31% {
			stroke-dashoffset: 0;
			fill: transparent;
		}
		32% {
			stroke-dashoffset: 0;
			fill: currentColor;
			opacity: 1;
		}
		33% {
			opacity: 0;
		}
		35% {
			opacity: 1;
		}
		37% {
			opacity: 0;
		}
		39% {
			opacity: 1;
		}
		41% {
			opacity: 0;
		}
		43% {
			opacity: 1;
		}
		44% {
			stroke-dashoffset: 0;
			fill: currentColor;
		}
		99% {
			stroke-dashoffset: 0;
			fill: currentColor;
		}
		100% {
			stroke-dashoffset: 400;
			fill: transparent;
		}
	}

	/* 动态背景动效 */
	--animate-dynamicsBg: dynamicsBg 8s linear infinite;
	@keyframes dynamicsBg {
		0% {
			transform: rotate(360deg);
			height: 14rem;
			width: 14rem;
		}
		50% {
			height: 7rem;
			width: 7rem;
		}
		100% {
			transform: rotate(0deg);
			height: 14rem;
			width: 14rem;
		}
	}

	/* 云朵移动动效 */
	--animate-cloudMove: cloudMove 40s linear infinite;
	@keyframes cloudMove {
		0% {
			transform: translateX(20%) translateY(-20%);
		}
		50% {
			transform: translateX(-100%) translateY(-20%);
		}
		100% {
			transform: translateX(20%) translateY(-20%);
		}
	}

	/* 星星闪烁动效 */
	--animate-starTwinkle: starTwinkle 8s linear infinite;
	--animate-starTwinkle2: starTwinkle 3s linear infinite;
	--animate-starTwinkle3: starTwinkle 6s linear infinite;
	--animate-starTwinkle4: starTwinkle 4s linear infinite;
	@keyframes starTwinkle {
		0% {
			opacity: 1;
		}
		40% {
			opacity: 1;
		}
		50% {
			opacity: 0;
		}
		60% {
			opacity: 1;
		}
		100% {
			opacity: 1;
		}
	}

	/* 元素上下慢慢循环移动动效 */
	--animate-elementUpDownMove1: elementUpDownMove 12s linear infinite;
	--animate-elementUpDownMove2: elementUpDownMove 10s linear infinite -12s;
	--animate-elementUpDownMove3: elementUpDownMove 12s linear infinite -14s;
	--animate-elementUpDownMove4: elementUpDownMove 8s linear infinite -10s;
	--animate-elementUpDownMove5: elementUpDownMove 10s linear infinite -8s;
	--animate-elementUpDownMove6: elementUpDownMove 12s linear infinite -6s;
	@keyframes elementUpDownMove {
		0% {
			transform: translateY(-20px);
		}
		50% {
			transform: translateY(20px);
		}
		100% {
			transform: translateY(-20px);
		}
	}
}
@source "../../../packages/stdf/dist/**/*.svelte";

pre {
	background-color: transparent;
	padding: 0;
}

*::-webkit-scrollbar {
	width: 4px;
}

*::-webkit-scrollbar-thumb {
	border-radius: 2px;
	background-color: rgba(133, 133, 133, 0.5);
}

*::-webkit-scrollbar-track {
	background-color: rgba(133, 133, 133, 0.2);
}

html {
	overflow-x: hidden;
	overflow-y: overlay;
	/*scrollbar-gutter: stable;*/
	/* scrollbar-gutter: stable both-edges; */
	-webkit-tap-highlight-color: transparent;
}
* {
	scrollbar-width: thin;
}

.prose :where(code):not(:where([class~='not-prose'] *))::before {
	content: '' !important;
}

.prose :where(code):not(:where([class~='not-prose'] *))::after {
	content: '' !important;
}

.prose :where(code):not(:where([class~='not-prose'] *)) {
	padding-left: 4px;
	padding-right: 4px;
	border-radius: 2px;
	background: #e4e4e4 !important;
}

.dark .dark\:prose-invert :where(code):not(:where([class~='not-prose'] *)) {
	background: #202020 !important;
}

/*!
  Theme: GitHub Light
*/
.prose pre code.hljs {
	background: #e4e4e4 !important;
}

.prose pre code.hljs {
	display: block;
	overflow-x: auto;
	padding: 1em;
}

.prose code.hljs {
	padding: 3px 5px;
}

.prose .hljs {
	/* background: #ebebeb !important; */
	color: #434f54;
}

.prose .hljs-subst {
	color: #434f54;
}

.prose .hljs-attribute,
.prose .hljs-doctag,
.prose .hljs-keyword,
.prose .hljs-name,
.prose .hljs-selector-tag {
	/* color: #00979d; */
	/* color: #0B24FB; */
	/* color: #ff3e00; */
	color: #af10a7;
}

.prose .hljs-addition,
.prose .hljs-built_in,
.prose .hljs-bullet,
.prose .hljs-code,
.prose .hljs-literal {
	color: #d35400;
}

.prose .hljs-link,
.prose .hljs-regexp,
.prose .hljs-selector-attr,
.prose .hljs-selector-pseudo,
.prose .hljs-symbol,
.prose .hljs-template-variable,
.prose .hljs-variable {
	/* color: #00979d; */
	color: #0b24fb;
	/* font-weight: bold; */
	/* color: #8a3ce2; */
}

.prose .hljs-deletion,
.prose .hljs-quote,
.prose .hljs-selector-class,
.prose .hljs-selector-id,
.prose .hljs-string,
.prose .hljs-template-tag,
.prose .hljs-type {
	/* color: #005c5f; */
	color: rgb(56, 189, 248);
}

.prose .hljs-comment {
	color: rgba(149, 165, 166, 0.8);
}

.prose .hljs-meta .hljs-keyword {
	color: #728e00;
}

.prose .hljs-meta {
	color: #434f54;
}

.prose .hljs-emphasis {
	font-style: italic;
}

.prose .hljs-strong {
	font-weight: 700;
}

.prose .hljs-function {
	color: #728e00;
}

.prose .hljs-section,
.prose .hljs-title {
	/* color: #800; */
	color: #0b24fb;
	font-weight: 700;
}

.prose .hljs-number {
	color: #8a7b52;
}

.dark .dark\:prose-invert pre code.hljs {
	background: #202020 !important;
}

.dark .dark\:prose-invert pre code.hljs {
	display: block;
	overflow-x: auto;
	padding: 1em;
}

.dark .dark\:prose-invert code.hljs {
	padding: 3px 5px;
}

/*!
  Theme: GitHub Dark
*/
.dark .dark\:prose-invert .hljs {
	color: #c9d1d9;
	/* background: #0d1117; */
}

.dark .dark\:prose-invert .hljs-doctag,
.dark .dark\:prose-invert .hljs-keyword,
.dark .dark\:prose-invert .hljs-meta .hljs-keyword,
.dark .dark\:prose-invert .hljs-template-tag,
.dark .dark\:prose-invert .hljs-template-variable,
.dark .dark\:prose-invert .hljs-type,
.dark .dark\:prose-invert .hljs-variable.language_ {
	/* color: #ff7b72; */
	color: #ffc043;
}

.dark .dark\:prose-invert .hljs-title,
.dark .dark\:prose-invert .hljs-title.class_,
.dark .dark\:prose-invert .hljs-title.class_.inherited__,
.dark .dark\:prose-invert .hljs-title.function_ {
	color: #d2a8ff;
}

.dark .dark\:prose-invert .hljs-attr,
.dark .dark\:prose-invert .hljs-attribute,
.dark .dark\:prose-invert .hljs-literal,
.dark .dark\:prose-invert .hljs-meta,
.dark .dark\:prose-invert .hljs-number,
.dark .dark\:prose-invert .hljs-operator,
.dark .dark\:prose-invert .hljs-selector-attr,
.dark .dark\:prose-invert .hljs-selector-class,
.dark .dark\:prose-invert .hljs-selector-id,
.dark .dark\:prose-invert .hljs-variable {
	color: #79c0ff;
}

.dark .dark\:prose-invert .hljs-meta .hljs-string,
.dark .dark\:prose-invert .hljs-regexp,
.dark .dark\:prose-invert .hljs-string {
	color: #a5d6ff;
}

.dark .dark\:prose-invert .hljs-built_in,
.dark .dark\:prose-invert .hljs-symbol {
	color: #ffa657;
}

.dark .dark\:prose-invert .hljs-code,
.dark .dark\:prose-invert .hljs-comment,
.dark .dark\:prose-invert .hljs-formula {
	color: #8b949e;
}

.dark .dark\:prose-invert .hljs-name,
.dark .dark\:prose-invert .hljs-quote,
.dark .dark\:prose-invert .hljs-selector-pseudo,
.dark .dark\:prose-invert .hljs-selector-tag {
	color: #7ee787;
}

.dark .dark\:prose-invert .hljs-subst {
	color: #c9d1d9;
}

.dark .dark\:prose-invert .hljs-section {
	color: #1f6feb;
	font-weight: 700;
}

.dark .dark\:prose-invert .hljs-bullet {
	color: #f2cc60;
}

.dark .dark\:prose-invert .hljs-emphasis {
	color: #c9d1d9;
	font-style: italic;
}

.dark .dark\:prose-invert .hljs-strong {
	color: #c9d1d9;
	font-weight: 700;
}

.dark .dark\:prose-invert .hljs-addition {
	color: #aff5b4;
	background-color: #033a16;
}

.dark .dark\:prose-invert .hljs-deletion {
	color: #ffdcd7;
	background-color: #67060c;
}

@font-face {
	font-family: 'JetBrainsMono';
	src: url('/assets/fonts/JetBrainsMono-Regular.woff2');
}

code {
	font-family: 'JetBrainsMono' !important;
}

/* 模拟设计软件的透明层 */
.transparent-background {
	background-image: linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #666 75%),
		linear-gradient(45deg, #666 25%, transparent 25%, transparent 75%, #666 75%);
	background-position:
		0 0,
		10px 10px;
	background-size: 20px 20px;
}

@keyframes clip {
	from {
		clip-path: circle(0% at var(--x) var(--y));
	}
	to {
		clip-path: circle(100% at var(--x) var(--y));
	}
}

::view-transition-old(root) {
	animation: none;
}
::view-transition-new(root) {
	mix-blend-mode: normal;
	animation: clip 0.6s ease-in;
}