修复配色
This commit is contained in:
parent
7bd3b27c5e
commit
78a8dbea6b
|
|
@ -1,37 +1,176 @@
|
|||
/* 重写样式表 */
|
||||
:root {
|
||||
--vp-home-hero-name-color: transparent;
|
||||
--vp-home-hero-name-background: -webkit-linear-gradient(120deg, #34c53b, #0c321a);
|
||||
}
|
||||
/**
|
||||
* Colors: Solid
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-badge-info-border: #10b981;
|
||||
--vp-badge-info-text: var(--vp-c-text-2);
|
||||
--vp-badge-info-bg: var(--vp-c-white-soft);
|
||||
:root {
|
||||
--vp-c-white: #ffffff;
|
||||
--vp-c-black: #000000;
|
||||
|
||||
--vp-badge-tip-border: var(--vp-c-green-dimm-1);
|
||||
--vp-badge-tip-text: var(--vp-c-green-darker);
|
||||
--vp-badge-tip-bg: var(--vp-c-green-dimm-3);
|
||||
|
||||
--vp-badge-warning-border: var(--vp-c-yellow-dimm-1);
|
||||
--vp-badge-warning-text: var(--vp-c-yellow-darker);
|
||||
--vp-badge-warning-bg: var(--vp-c-yellow-dimm-3);
|
||||
|
||||
--vp-badge-danger-border: var(--vp-c-red-dimm-1);
|
||||
--vp-badge-danger-text: var(--vp-c-red-darker);
|
||||
--vp-badge-danger-bg: var(--vp-c-red-dimm-3);
|
||||
--vp-c-neutral: var(--vp-c-black);
|
||||
--vp-c-neutral-inverse: var(--vp-c-white);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--vp-badge-info-border: var(--vp-c-divider-light);
|
||||
--vp-badge-info-bg: var(--vp-c-black-mute);
|
||||
--vp-c-neutral: var(--vp-c-white);
|
||||
--vp-c-neutral-inverse: var(--vp-c-black);
|
||||
}
|
||||
|
||||
--vp-badge-tip-border: var(--vp-c-green-dimm-2);
|
||||
--vp-badge-tip-text: var(--vp-c-green-light);
|
||||
/**
|
||||
* Colors: Palette
|
||||
*
|
||||
* The primitive colors used for accent colors. These colors are referenced
|
||||
* by functional colors such as "Text", "Background", or "Brand".
|
||||
*
|
||||
* Each colors have exact same color scale system with 3 levels of solid
|
||||
* colors with different brightness, and 1 soft color.
|
||||
*
|
||||
* - `XXX-1`: The most solid color used mainly for colored text. It must
|
||||
* satisfy the contrast ratio against when used on top of `XXX-soft`.
|
||||
*
|
||||
* - `XXX-2`: The color used mainly for hover state of the button.
|
||||
*
|
||||
* - `XXX-3`: The color for solid background, such as bg color of the button.
|
||||
* It must satisfy the contrast ratio with pure white (#ffffff) text on
|
||||
* top of it.
|
||||
*
|
||||
* - `XXX-soft`: The color used for subtle background such as custom container
|
||||
* or badges. It must satisfy the contrast ratio when putting `XXX-1` colors
|
||||
* on top of it.
|
||||
*
|
||||
* The soft color must be semi transparent alpha channel. This is crucial
|
||||
* because it allows adding multiple "soft" colors on top of each other
|
||||
* to create a accent, such as when having inline code block inside
|
||||
* custom containers.
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
--vp-badge-warning-border: var(--vp-c-yellow-dimm-2);
|
||||
--vp-badge-warning-text: var(--vp-c-yellow-light);
|
||||
:root {
|
||||
--vp-c-gray-1: #dddde3;
|
||||
--vp-c-gray-2: #e4e4e9;
|
||||
--vp-c-gray-3: #ebebef;
|
||||
--vp-c-gray-soft: rgba(142, 150, 170, 0.14);
|
||||
|
||||
--vp-badge-danger-border: var(--vp-c-red-dimm-2);
|
||||
--vp-badge-danger-text: var(--vp-c-red-light);
|
||||
--vp-c-indigo-1: #18794e;
|
||||
--vp-c-indigo-2: #299764;
|
||||
--vp-c-indigo-3: #30a46c;
|
||||
--vp-c-indigo-soft: rgba(16, 185, 129, 0.14);
|
||||
|
||||
--vp-c-green-1: #18794e;
|
||||
--vp-c-green-2: #299764;
|
||||
--vp-c-green-3: #30a46c;
|
||||
--vp-c-green-soft: rgba(16, 185, 129, 0.14);
|
||||
|
||||
--vp-c-yellow-1: #915930;
|
||||
--vp-c-yellow-2: #946300;
|
||||
--vp-c-yellow-3: #9f6a00;
|
||||
--vp-c-yellow-soft: rgba(234, 79, 8, 0.14);
|
||||
|
||||
--vp-c-red-1: #b8272c;
|
||||
--vp-c-red-2: #d5393e;
|
||||
--vp-c-red-3: #e0575b;
|
||||
--vp-c-red-soft: rgba(244, 63, 94, 0.14);
|
||||
|
||||
--vp-c-sponsor: #db2777;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--vp-c-gray-1: #515c67;
|
||||
--vp-c-gray-2: #414853;
|
||||
--vp-c-gray-3: #32363f;
|
||||
--vp-c-gray-soft: rgba(101, 117, 133, 0.16);
|
||||
|
||||
--vp-c-indigo-1: #3dd68c;
|
||||
--vp-c-indigo-2: #30a46c;
|
||||
--vp-c-indigo-3: #298459;
|
||||
--vp-c-indigo-soft: rgba(16, 185, 129, 0.16);
|
||||
|
||||
--vp-c-green-1: #3dd68c;
|
||||
--vp-c-green-2: #30a46c;
|
||||
--vp-c-green-3: #298459;
|
||||
--vp-c-green-soft: rgba(16, 185, 129, 0.16);
|
||||
|
||||
--vp-c-yellow-1: #f9b44e;
|
||||
--vp-c-yellow-2: #da8b17;
|
||||
--vp-c-yellow-3: #a46a0a;
|
||||
--vp-c-yellow-soft: rgba(234, 179, 8, 0.16);
|
||||
|
||||
--vp-c-red-1: #f66f81;
|
||||
--vp-c-red-2: #f14158;
|
||||
--vp-c-red-3: #b62a3c;
|
||||
--vp-c-red-soft: rgba(244, 63, 94, 0.16);
|
||||
}
|
||||
|
||||
/**
|
||||
* Colors: Background
|
||||
*
|
||||
* - `bg`: The bg color used for main screen.
|
||||
*
|
||||
* - `bg-alt`: The alternative bg color used in places such as "sidebar",
|
||||
* or "code block".
|
||||
*
|
||||
* - `bg-elv`: The elevated bg color. This is used at parts where it "floats",
|
||||
* such as "dialog".
|
||||
*
|
||||
* - `bg-soft`: The bg color to slightly ditinguish some components from
|
||||
* the page. Used for things like "carbon ads" or "table".
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-c-bg: #ffffff;
|
||||
--vp-c-bg-alt: #f6f6f7;
|
||||
--vp-c-bg-elv: #ffffff;
|
||||
--vp-c-bg-soft: #f6f6f7;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--vp-c-bg: #1b1b1f;
|
||||
--vp-c-bg-alt: #161618;
|
||||
--vp-c-bg-elv: #202127;
|
||||
--vp-c-bg-soft: #202127;
|
||||
}
|
||||
|
||||
/**
|
||||
* Colors: Borders
|
||||
*
|
||||
* - `divider`: This is used for separators. This is used to divide sections
|
||||
* within the same components, such as having separator on "h2" heading.
|
||||
*
|
||||
* - `border`: This is designed for borders on interactive components.
|
||||
* For example this should be used for a button outline.
|
||||
*
|
||||
* - `gutter`: This is used to divide components in the page. For example
|
||||
* the header and the lest of the page.
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-c-border: #c2c2c4;
|
||||
--vp-c-divider: #e2e2e3;
|
||||
--vp-c-gutter: #e2e2e3;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--vp-c-border: #3c3f44;
|
||||
--vp-c-divider: #2e2e32;
|
||||
--vp-c-gutter: #000000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Colors: Text
|
||||
*
|
||||
* - `text-1`: Used for primary text.
|
||||
*
|
||||
* - `text-2`: Used for muted texts, such as "inactive menu" or "info texts".
|
||||
*
|
||||
* - `text-3`: Used for subtle texts, such as "placeholders" or "caret icon".
|
||||
* -------------------------------------------------------------------------- */
|
||||
|
||||
:root {
|
||||
--vp-c-text-1: rgba(60, 60, 67);
|
||||
--vp-c-text-2: rgba(60, 60, 67, 0.78);
|
||||
--vp-c-text-3: rgba(60, 60, 67, 0.56);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--vp-c-text-1: rgba(255, 255, 245, 0.86);
|
||||
--vp-c-text-2: rgba(235, 235, 245, 0.6);
|
||||
--vp-c-text-3: rgba(235, 235, 245, 0.38);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user