150 lines
4.3 KiB
SCSS
150 lines
4.3 KiB
SCSS
/** Base Styles */
|
|
|
|
/**
|
|
* Base Color
|
|
* --------------------------------------------------------------------- */
|
|
@import './colors.scss';
|
|
|
|
:root {
|
|
|
|
/**
|
|
* Extends Vitepress
|
|
* --------------------------------------------------------------------- */
|
|
|
|
--vp-c-second: var(--vp-c-pink);
|
|
--vp-c-second-light: var(--vp-c-pink-light);
|
|
--vp-c-second-lighter: var(--vp-c-pink-lighter);
|
|
--vp-c-second-dark: var(--vp-c-pink-dark);
|
|
--vp-c-second-darker: var(--vp-c-pink-darker);
|
|
|
|
/**
|
|
* Typography
|
|
* --------------------------------------------------------------------- */
|
|
|
|
--font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
|
Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
|
sans-serif;
|
|
--font-family-mono: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
|
monospace;
|
|
|
|
/**
|
|
* Z Indexes
|
|
*
|
|
* Algolia SearchBox has a z-index of 200, so make sure not to go above
|
|
* that value.
|
|
* --------------------------------------------------------------------- */
|
|
|
|
--z-index-navbar: 10;
|
|
--z-index-sidebar: 6;
|
|
|
|
/**
|
|
* Shadows
|
|
* --------------------------------------------------------------------- */
|
|
|
|
--shadow-1: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
--shadow-2: 0 3px 12px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.07);
|
|
--shadow-3: 0 12px 32px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.08);
|
|
--shadow-4: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
|
|
--shadow-5: 0 18px 56px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(0, 0, 0, 0.16);
|
|
|
|
/**
|
|
* Sizes
|
|
* --------------------------------------------------------------------- */
|
|
|
|
--header-height: 3.6rem;
|
|
}
|
|
|
|
:root {
|
|
--c-brand: #1496ce;
|
|
--c-brand-light: #19aeee;
|
|
--c-sub-brand: #f197bd;
|
|
--c-sub-brand-light: #f7adcb;
|
|
--color-border: #ad295c8a;
|
|
--color-block: #2a7f8a;
|
|
--color-strong: #c13e74;
|
|
--color-code: #7ea1c5;
|
|
--color-border-left: #1d8ab9;
|
|
--color-code-bg: rgba(77,208,225,0.08);
|
|
--color-block-bg: rgba(77,208,225,0.15);
|
|
--linear-title: linear-gradient(to right, #32defd, rgb(247 69 152));
|
|
// vt 背景色
|
|
--vt-c-bg: var(--vt-c-white);
|
|
--vt-c-bg-soft: var(--vt-c-white-soft);
|
|
--vt-c-bg-mute: var(--vt-c-white-mute);
|
|
--vt-c-bg-rgb: var(--c-white-rgb);
|
|
|
|
--vt-shadow: 0 5px 6px -5px rgba(133,133,133,.6);
|
|
--vt-code-shadow: 5px 5px 1px rgba(255, 255, 255, 0.4);
|
|
--vt-code-shadow-h: 5px 5px 10px rgba(255, 255, 255, 0.4);
|
|
--vt-code-inline-color: #c13e74;
|
|
--vt-code-inline-bg: #c13e7408;
|
|
}
|
|
|
|
.dark {
|
|
--c-brand: #18baff;
|
|
--c-brand-light: #189bd3;
|
|
--color-border: #ff3a858a;
|
|
--color-block: #2a7f8a;
|
|
--color-strong: #e44a8a;
|
|
--color-code: #7ea1c5;
|
|
--color-border-left: #1d8ab9;
|
|
--color-code-bg: rgba(77,208,225,0.08);
|
|
--color-block-bg: rgba(77,208,225,0.15);
|
|
--linear-title: linear-gradient(to right, #32defd, rgb(247 69 152));
|
|
// vt 背景色
|
|
--vt-c-bg: var(--vt-c-black);
|
|
--vt-c-bg-soft: var(--vt-c-black-soft);
|
|
--vt-c-bg-mute: var(--vt-c-black-mute);
|
|
--vt-c-bg-rgb: var(--c-black-rgb);
|
|
|
|
--vt-shadow: 0 5px 6px -5px rgba(0, 0, 0, 0.6);
|
|
--vt-code-shadow: 5px 5px 1px rgba(0, 0, 0, 0.4);
|
|
--vt-code-shadow-h: 5px 5px 10px rgba(0, 0, 0, 0.4);
|
|
--vt-code-inline-color: #eee;
|
|
--vt-code-inline-bg: #c13e7450;
|
|
}
|
|
|
|
// breakpoints
|
|
$breakpoint-xxl: 1440px !default;
|
|
$breakpoint-xlg: 1280px !default;
|
|
$breakpoint-lg: 960px !default;
|
|
$breakpoint-md: 768px !default;
|
|
$breakpoint-sm: 480px !default;
|
|
|
|
/**
|
|
* Icons
|
|
* -------------------------------------------------------------------------- */
|
|
|
|
/**
|
|
* Layouts
|
|
* -------------------------------------------------------------------------- */
|
|
|
|
/**
|
|
* Component: Code
|
|
* -------------------------------------------------------------------------- */
|
|
|
|
/**
|
|
* Component: Button
|
|
* -------------------------------------------------------------------------- */
|
|
:root {
|
|
--vt-c-button-hover-bg: var(--vp-c-blue-dimm-4);
|
|
--vt-c-button-active-bg: var(--vp-c-blue-dimm-5);
|
|
}
|
|
|
|
|
|
/**
|
|
* Component: Custom Block
|
|
* -------------------------------------------------------------------------- */
|
|
|
|
/**
|
|
* Component: Nav
|
|
* -------------------------------------------------------------------------- */
|
|
|
|
/**
|
|
* Component: Sidebar
|
|
* -------------------------------------------------------------------------- */
|
|
|
|
/**
|
|
* Component: Home
|
|
* -------------------------------------------------------------------------- */
|