114 lines
3.4 KiB
SCSS
114 lines
3.4 KiB
SCSS
// === colors ===
|
|
@import '~prismjs/themes/prism-dark.css';
|
|
|
|
:root {
|
|
// accent colors
|
|
--vp-c-accent: #E13F65;
|
|
--vp-c-accent-bg: #F5556B;
|
|
--vp-c-accent-hover: #FF867B;
|
|
--vp-c-accent-text: var(--vp-c-white);
|
|
--vp-c-accent-soft: rgba(185, 16, 67, 0.14);
|
|
|
|
// background colors
|
|
--vp-c-bg: #fff;
|
|
--vp-c-bg-alt: #f6f6f7;
|
|
--vp-c-bg-elv: #fff;
|
|
|
|
// text colors
|
|
--vp-c-text: rgb(60 60 67);
|
|
--vp-c-text-mute: rgb(60 60 67 / 78%);
|
|
--vp-c-text-subtle: rgb(60 60 67 / 56%);
|
|
|
|
// border colors
|
|
--vp-c-gutter: #e2e2e3;
|
|
--vp-c-border: #c2c2c4;
|
|
--vp-c-border-hard: #b8b8ba;
|
|
|
|
// shadow colors
|
|
--vp-c-shadow: rgb(0 0 0 / 15%);
|
|
|
|
// control colors
|
|
--vp-c-control: rgb(142 150 170 / 10%);
|
|
--vp-c-control-hover: rgb(142 150 170 / 16%);
|
|
--vp-c-control-disabled: #eaeaea;
|
|
|
|
// layout colors
|
|
--vp-navbar-c-bg: var(--vp-c-bg);
|
|
--vp-sidebar-c-bg: var(--vp-c-bg);
|
|
|
|
// code group colors
|
|
--vp-c-code-tab-title: var(--code-c-text, rgb(255 255 255 / 90%));
|
|
--vp-c-code-tab-bg: var(--code-bg-color, var(--code-c-bg));
|
|
--vp-c-code-tab-active: var(--vp-c-accent);
|
|
|
|
// badge colors
|
|
--badge-c-tip-text: var(--vp-c-green-text);
|
|
--badge-c-tip-bg: var(--vp-c-green-soft);
|
|
--badge-c-warning-text: var(--vp-c-yellow-text);
|
|
--badge-c-warning-bg: var(--vp-c-yellow-soft);
|
|
--badge-c-danger-text: var(--vp-c-red-text);
|
|
--badge-c-danger-bg: var(--vp-c-red-soft);
|
|
--badge-c-important-text: var(--vp-c-purple-text);
|
|
--badge-c-important-bg: var(--vp-c-purple-soft);
|
|
--badge-c-info-text: var(--vp-c-indigo-text);
|
|
--badge-c-info-bg: var(--vp-c-indigo-soft);
|
|
--badge-c-note-text: var(--vp-c-grey-text);
|
|
--badge-c-note-bg: var(--vp-c-grey-soft);
|
|
|
|
// font vars
|
|
--font-family: -apple-system, 'BlinkMacSystemFont', 'Segoe UI', roboto, oxygen,
|
|
ubuntu, cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
|
|
|
// layout vars
|
|
--navbar-height: 3.6rem;
|
|
--navbar-padding-v: 0.7rem;
|
|
--navbar-padding-h: 1.5rem;
|
|
--sidebar-width: 20rem;
|
|
--sidebar-width-mobile: calc(var(--sidebar-width) * 0.82);
|
|
--content-width: 740px;
|
|
--homepage-width: 960px;
|
|
|
|
// header offset
|
|
--header-offset: var(--navbar-height);
|
|
|
|
// transition vars
|
|
--vp-t-color: 0.3s ease;
|
|
--vp-t-transform: 0.3s ease;
|
|
|
|
// external-link-icon
|
|
--external-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z'/%3E%3C/svg%3E");
|
|
--external-link-c-icon: var(--vp-c-text-mute);
|
|
}
|
|
|
|
|
|
[data-theme='dark'] {
|
|
// brand colors
|
|
--vp-c-accent: #FF772F;
|
|
--vp-c-accent-bg: #FF4700;
|
|
--vp-c-accent-hover: #ff783a;
|
|
--vp-c-accent-soft: rgba(185, 64, 16, 0.16);
|
|
|
|
// background colors
|
|
--vp-c-bg: #181818;
|
|
--vp-c-bg-alt: #161618;
|
|
--vp-c-bg-elv: #202127;
|
|
|
|
// text colors
|
|
--vp-c-text: rgb(235 235 245 / 86%);
|
|
--vp-c-text-mute: rgb(235 235 245 / 60%);
|
|
--vp-c-text-subtle: rgb(235 235 245 / 38%);
|
|
|
|
// border colors
|
|
--vp-c-gutter: #000;
|
|
--vp-c-border: #3c3f44;
|
|
--vp-c-border-hard: #45484e;
|
|
|
|
// shadow color
|
|
--vp-c-shadow: rgb(0 0 0 / 30%);
|
|
|
|
// control colors
|
|
--vp-c-control: rgb(101 117 133 / 12%);
|
|
--vp-c-control-hover: rgb(101 117 133 / 18%);
|
|
--vp-c-control-disabled: #363636;
|
|
}
|
|
|