194 lines
5.7 KiB
SCSS
194 lines
5.7 KiB
SCSS
:root {
|
|
// brand colors
|
|
--c-brand: #3eaf7c;
|
|
--c-brand-light: #4abf8a;
|
|
|
|
// background colors
|
|
--c-bg: #fff;
|
|
--c-bg-light: #f3f4f5;
|
|
--c-bg-lighter: #eee;
|
|
--c-bg-dark: #ebebec;
|
|
--c-bg-darker: #e6e6e6;
|
|
--c-bg-navbar: var(--c-bg);
|
|
--c-bg-sidebar: var(--c-bg);
|
|
--c-bg-arrow: #ccc;
|
|
|
|
// text colors
|
|
--c-text: #2c3e50;
|
|
--c-text-accent: var(--c-brand);
|
|
--c-text-light: #3a5169;
|
|
--c-text-lighter: #4e6e8e;
|
|
--c-text-lightest: #6a8bad;
|
|
--c-text-quote: #999;
|
|
|
|
// border colors
|
|
--c-border: #eaecef;
|
|
--c-border-dark: #dfe2e5;
|
|
|
|
// custom container colors
|
|
--c-tip: #42b983;
|
|
--c-tip-bg: var(--c-bg-light);
|
|
--c-tip-title: var(--c-text);
|
|
--c-tip-text: var(--c-text);
|
|
--c-tip-text-accent: var(--c-text-accent);
|
|
--c-warning: #ffc310;
|
|
--c-warning-bg: #fffae3;
|
|
--c-warning-bg-light: #fff3ba;
|
|
--c-warning-bg-lighter: #fff0b0;
|
|
--c-warning-border-dark: #f7dc91;
|
|
--c-warning-details-bg: #fff5ca;
|
|
--c-warning-title: #f1b300;
|
|
--c-warning-text: #746000;
|
|
--c-warning-text-accent: #edb100;
|
|
--c-warning-text-light: #c1971c;
|
|
--c-warning-text-quote: #ccab49;
|
|
--c-danger: #f11e37;
|
|
--c-danger-bg: #ffe0e0;
|
|
--c-danger-bg-light: #ffcfde;
|
|
--c-danger-bg-lighter: #ffc9c9;
|
|
--c-danger-border-dark: #f1abab;
|
|
--c-danger-details-bg: #ffd4d4;
|
|
--c-danger-title: #ed1e2c;
|
|
--c-danger-text: #600;
|
|
--c-danger-text-accent: #bd1a1a;
|
|
--c-danger-text-light: #b5474d;
|
|
--c-danger-text-quote: #c15b5b;
|
|
--c-details-bg: #eee;
|
|
|
|
// badge component colors
|
|
--c-badge-tip: var(--c-tip);
|
|
--c-badge-warning: #ecc808;
|
|
--c-badge-warning-text: var(--c-bg);
|
|
--c-badge-danger: #dc2626;
|
|
--c-badge-danger-text: var(--c-bg);
|
|
|
|
// code group colors
|
|
--c-code-group-tab-title: rgb(255 255 255 / 90%);
|
|
--c-code-group-tab-bg: var(--code-bg-color);
|
|
--c-code-group-tab-outline: var(var(--c-code-group-tab-title));
|
|
--c-code-group-tab-active-border: var(--c-brand);
|
|
|
|
// transition vars
|
|
--t-color: 0.3s ease;
|
|
--t-transform: 0.3s ease;
|
|
|
|
// 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;
|
|
|
|
// 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-icon-color: var(--c-text-quote);
|
|
}
|
|
|
|
// plugin-back-to-top
|
|
.vp-back-to-top-button {
|
|
--back-to-top-color: var(--c-brand);
|
|
--back-to-top-color-hover: var(--c-brand-light);
|
|
--back-to-top-bg-color: var(--c-bg);
|
|
}
|
|
|
|
// plugin-catalog
|
|
.vp-catalog-wrapper {
|
|
--catalog-bg-color: var(--c-bg);
|
|
--catalog-bg-secondary-color: var(--c-bg-dark);
|
|
--catalog-border-color: var(--c-border);
|
|
--catalog-active-color: var(--c-brand);
|
|
--catalog-hover-color: var(--c-brand-light);
|
|
}
|
|
|
|
// plugin-comment
|
|
.waline-wrapper {
|
|
--waline-bg-color: var(--c-bg);
|
|
--waline-bg-color-light: var(--c-bg-light);
|
|
--waline-text-color: var(--c-color);
|
|
--waline-border: 1px solid var(--c-border);
|
|
--waline-border-color: var(--c-border);
|
|
--waline-theme-color: var(--c-brand);
|
|
--waline-active-color: var(--c-brand-light);
|
|
}
|
|
|
|
// plugin-docsearch
|
|
/* stylelint-disable-next-line selector-class-pattern */
|
|
.DocSearch {
|
|
--docsearch-primary-color: var(--c-brand);
|
|
--docsearch-text-color: var(--c-text);
|
|
--docsearch-highlight-color: var(--c-brand);
|
|
--docsearch-muted-color: var(--c-text-quote);
|
|
--docsearch-container-background: rgb(9 10 17 / 80%);
|
|
--docsearch-modal-background: var(--c-bg-light);
|
|
--docsearch-searchbox-background: var(--c-bg-lighter);
|
|
--docsearch-searchbox-focus-background: var(--c-bg);
|
|
--docsearch-searchbox-shadow: inset 0 0 0 2px var(--c-brand);
|
|
--docsearch-hit-color: var(--c-text-light);
|
|
--docsearch-hit-active-color: var(--c-bg);
|
|
--docsearch-hit-background: var(--c-bg);
|
|
--docsearch-hit-shadow: 0 1px 3px 0 var(--c-border-dark);
|
|
--docsearch-footer-background: var(--c-bg);
|
|
}
|
|
|
|
// plugin-medium-zoom
|
|
.medium-zoom-overlay {
|
|
--medium-zoom-bg-color: var(--c-bg);
|
|
}
|
|
|
|
// plugin-notice
|
|
.vp-notice-wrapper {
|
|
--notice-color: var(--c-text);
|
|
--notice-bg-color: var(--c-bg);
|
|
--notice-primary-color: var(--c-brand);
|
|
--notice-primary-text-color: var(--c-bg);
|
|
--notice-primary-hover-color: var(--c-brand-light);
|
|
--notice-button-color: var(--c-bg-light);
|
|
--notice-button-hover-color: var(--c-bg-lighter);
|
|
}
|
|
|
|
// plugin-nprogress
|
|
#nprogress {
|
|
--nprogress-color: var(--c-brand);
|
|
}
|
|
|
|
body {
|
|
// plugin-photo-swipe
|
|
--photo-swipe-bullet: var(--c-bg);
|
|
--photo-swipe-bullet-active: var(--c-brand);
|
|
|
|
// plugin-pwa-popup
|
|
--pwa-text-color: var(--c-text);
|
|
--pwa-bg-color: var(--c-bg);
|
|
--pwa-border-color: var(--c-brand);
|
|
--pwa-btn-text-color: var(--c-bg);
|
|
--pwa-btn-bg-color: var(--c-brand);
|
|
--pwa-btn-hover-bg-color: var(--c-brand-light);
|
|
}
|
|
|
|
// plugin-redirect
|
|
.redirect-modal-mask {
|
|
--redirect-bg-color: var(--c-bg);
|
|
--redirect-bg-color-light: var(--c-bg-light);
|
|
--redirect-bg-color-lighter: var(--c-bg-lighter);
|
|
--redirect-text-color: var(--c-text);
|
|
--redirect-primary-color: var(--c-brand);
|
|
--redirect-primary-hover-color: var(--c-brand-light);
|
|
--redirect-primary-text-color: var(--c-bg);
|
|
}
|
|
|
|
// plugin-search
|
|
.search-box {
|
|
--search-bg-color: var(--c-bg);
|
|
--search-accent-color: var(--c-brand);
|
|
--search-text-color: var(--c-text);
|
|
--search-border-color: var(--c-border);
|
|
--search-item-text-color: var(--c-text-lighter);
|
|
--search-item-focus-bg-color: var(--c-bg-light);
|
|
}
|