docsify
Version:
A magical documentation generator.
219 lines (204 loc) • 12.7 kB
CSS
/* Variables: Basic */
/* ========================================================================== */
:root {
/* Color */
--color-bg : #fff;
--color-text : #333;
--theme-color: #0b85d7;
/* Color: Monochromatic */
--color-mono-min: var(--color-bg);
--color-mono-1 : color-mix(in srgb, var(--color-mono-min), var(--color-mono-max) 5%);
--color-mono-2 : color-mix(in srgb, var(--color-mono-min), var(--color-mono-max) 10%);
--color-mono-3 : color-mix(in srgb, var(--color-mono-min), var(--color-mono-max) 20%);
--color-mono-4 : color-mix(in srgb, var(--color-mono-min), var(--color-mono-max) 32%);
--color-mono-5 : color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 50%);
--color-mono-6 : color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 32%);
--color-mono-7 : color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 20%);
--color-mono-8 : color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 10%);
--color-mono-9 : color-mix(in srgb, var(--color-mono-max), var(--color-mono-min) 5%);
--color-mono-max: var(--color-text);
/* Color: Theme Shades (darker) & Tints (lighter)*/
/* NOTE: Values derived from --theme-color */
--theme-color-1: color-mix(in srgb, var(--theme-color), var(--color-mono-min) 90%);
--theme-color-2: color-mix(in srgb, var(--theme-color), var(--color-mono-min) 75%);
--theme-color-3: color-mix(in srgb, var(--theme-color), var(--color-mono-min) 55%);
--theme-color-4: color-mix(in srgb, var(--theme-color), var(--color-mono-min) 30%);
--theme-color-5: color-mix(in srgb, var(--theme-color), var(--color-mono-max) 30%);
--theme-color-6: color-mix(in srgb, var(--theme-color), var(--color-mono-max) 55%);
--theme-color-7: color-mix(in srgb, var(--theme-color), var(--color-mono-max) 75%);
--theme-color-8: color-mix(in srgb, var(--theme-color), var(--color-mono-max) 90%);
/* Typography */
--font-family : system-ui, sans-serif;
--font-family-emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
--font-family-mono : ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
--font-size : 16px; /* px */
--font-size-xxxl : calc(var(--font-size-xxl) * var(--modular-scale));
--font-size-xxl : calc(var(--font-size-xl) * var(--modular-scale));
--font-size-xl : calc(var(--font-size-l) * var(--modular-scale));
--font-size-l : calc(1rem * var(--modular-scale));
--font-size-m : var(--font-size);
--font-size-s : max(13px, calc(var(--font-size-m) / var(--modular-scale)));
--font-size-xs : max(11px, calc(var(--font-size-s) / var(--modular-scale)));
--font-size-emoji : 1.2em;
--font-size-mono : 0.875rem;
--font-weight : 350;
--font-weight-mono : var(--font-weight);
--line-height : 1.6;
--modular-scale : 1.250; /* 1.067, 1.125, 1.200, 1.250, 1.333, 1.414, 1.500, 1.618 */
/* Common */
--border-color : var(--color-mono-2);
--border-radius : 3px; /* Single value */
--duration-slow : 500ms;
--duration-medium : 250ms;
--duration-fast : 150ms;
--margin-block : 1rem; /* Single value */
--scroll-padding-top: var(--margin-block);
/* Content */
--content-margin-inline: 45px; /* Single value */
--content-max-width : 72ch;
/* Cover */
--cover-bg : unset;
--cover-bg-brightness: 1;
--cover-bg-overlay : radial-gradient(transparent 60%, rgba(0, 0, 0, 0.1));
--cover-color : ;
--cover-title-color : var(--strong-color);
--cover-title-font : var(--font-size-xxxl) var(--font-family);
/* Elements */
--blockquote-bg : ;
--blockquote-border-color : var(--theme-color);
--blockquote-border-radius : 0;
--blockquote-border-width : 0 0 0 4px;
--blockquote-color : var(--color-mono-6);
--blockquote-padding : 0 0 0 1.5em;
--button-bg : var(--theme-color);
--button-border-radius : 100vh;
--button-color : #fff;
--button-padding : 0.3em 1.25em 0.315em 1.25em;
--callout-bg : var(--color-mono-1);
--callout-border-color : ;
--callout-border-radius : var(--border-radius);
--callout-border-width : 1px;
--callout-charm-bg : ;
--callout-charm-border-radius : 100vh;
--callout-charm-color : #fff;
--callout-charm-content : '';
--callout-charm-font-size : 16px;
--callout-charm-inset : 1em auto auto 15px;
--callout-charm-size : 26px;
--callout-charm-translate : 0;
--callout-color : ;
--callout-padding : 1em 1em 1em calc(25px + var(--callout-charm-size));
--code-bg : var(--color-mono-1);
--code-color : ;
--codeblock-bg : var(--code-bg);
--codeblock-color : var(--code-color);
--codeblock-comment : #6e8090;
--codeblock-function : #dd4a68;
--codeblock-important : #c94922;
--codeblock-keyword : #07a;
--codeblock-operator : #a67f59;
--codeblock-property : #c08b30;
--codeblock-punctuation : #999;
--codeblock-selector : #690;
--codeblock-tag : #905;
--codeblock-variable : #e90;
--form-element-bg : var(--color-mono-1);
--form-element-border-color : var(--color-mono-3);
--form-element-border-radius : var(--border-radius);
--form-element-color : ;
--heading-color : var(--strong-color);
--heading-font-weight : 600;
--heading-line-height : calc(2ex + 5px); /* Unit required */
--kbd-bg : var(--color-mono-1);
--kbd-border : 1px solid var(--color-mono-3);
--kbd-border-radius : 4px;
--kbd-color : var(--color-mono-5);
--kbd-alt-bg : var(--color-mono-1);
--kbd-alt-border : none;
--kbd-alt-border-radius : var(--kbd-border-radius);
--kbd-alt-box-shadow : 0 2px 0 1px var(--color-mono-3);
--kbd-alt-color : var(--kbd-color);
--link-color : ;
--link-color-hover : var(--theme-color);
--link-underline-color : var(--theme-color);
--link-underline-color-hover : var(--link-underline-color);
--link-underline-thickness : 2px;
--link-underline-thickness-hover: var(--link-underline-thickness);
--mark-bg : #fef08a;
--mark-color : ;
--strong-color : color-mix(in srgb, var(--color-text), black 35%);
--strong-font-weight : 600;
--table-row-alt-bg : var(--color-mono-1);
/* Navbar */
--navbar-font-size : var(--font-size);
--navbar-height : 4em;
--navbar-link-color : ;
--navbar-link-color-active: var(--theme-color);
--navbar-drop-link-spacing: 0.5em;
/* Sidebar */
--sidebar-bg : var(--color-bg);
--sidebar-border-color : var(--border-color);
--sidebar-color : ;
--sidebar-font-size : var(--font-size);
--sidebar-group-border : ;
--sidebar-group-spacing : ;
--sidebar-group-title-border : ;
--sidebar-group-title-color : var(--strong-color);
--sidebar-group-title-font-size : ;
--sidebar-group-title-font-weight : var(--strong-font-weight);
--sidebar-group-title-spacing : ;
--sidebar-link-color : var(--color-text);
--sidebar-link-color-active : var(--theme-color);
--sidebar-link-spacing : 0.75em;
--sidebar-name-color : var(--strong-color);
--sidebar-name-font-family : var(--font-family);
--sidebar-name-font-size : var(--font-size-xl);
--sidebar-name-font-weight : var(--strong-font-weight);
--sidebar-name-margin : 1.5rem 20px;
--sidebar-pagelink-bg : ;
--sidebar-pagelink-bg-collapsed : ;
--sidebar-pagelink-bg-empty : ;
--sidebar-pagelink-bg-expanded : ;
--sidebar-toggle-alignment : center; /* start center end */
--sidebar-toggle-bg : var(--color-mono-2);
--sidebar-toggle-bg-hover : var(--button-bg);
--sidebar-toggle-color : var(--color-mono-4);
--sidebar-toggle-color-hover : var(--button-color);
--sidebar-toggle-height : 80px;
--sidebar-toggle-margin-block : 20px;
--sidebar-toggle-width : 22px;
--sidebar-width : 280px;
}
/* Scoped Variables */
/* ========================================================================== */
.callout {
&.caution {
/* Tailwind: red 50/200/500 */
--callout-bg : #fef2f2;
--callout-border-color: #fecaca;
--callout-charm-bg : #ef4444 center no-repeat url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="13" height="13" fill="white"><path d="M10 14C10 15.1 9.1 16 8 16 6.9 16 6 15.1 6 14 6 12.9 6.9 12 8 12 9.1 12 10 12.9 10 14Z"/><path d="M10 1.6C10 1.2 9.8 0.9 9.6 0.7 9.2 0.3 8.6 0 8 0 7.4 0 6.8 0.2 6.5 0.6 6.2 0.9 6 1.2 6 1.6 6 1.7 6 1.8 6 1.9L6.8 9.6C6.9 9.9 7 10.1 7.2 10.2 7.4 10.4 7.7 10.5 8 10.5 8.3 10.5 8.6 10.4 8.8 10.3 9 10.1 9.1 9.9 9.2 9.6L10 1.9C10 1.8 10 1.7 10 1.6Z"/></svg>');
}
&.important {
/* Tailwind: violet 50/200/500 */
--callout-bg : #f5f3ff;
--callout-border-color: #ddd6fe;
--callout-charm-bg : #8b5cf6 center no-repeat url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="white"><path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z"></path></svg>');
}
&.note {
--callout-bg : var(--theme-color-1);
--callout-border-color: var(--theme-color-2);
--callout-charm-bg : var(--theme-color) center no-repeat url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="14" height="14" fill="white"><path d="M9.1 0C10.2 0 10.7 0.7 10.7 1.6 10.7 2.6 9.8 3.6 8.6 3.6 7.6 3.6 7 3 7 2 7 1.1 7.7 0 9.1 0Z"/><path d="M5.8 16C5 16 4.4 15.5 5 13.2L5.9 9.1C6.1 8.5 6.1 8.2 5.9 8.2 5.7 8.2 4.6 8.6 3.9 9.1L3.5 8.4C5.6 6.6 7.9 5.6 8.9 5.6 9.8 5.6 9.9 6.6 9.5 8.2L8.4 12.5C8.2 13.2 8.3 13.5 8.5 13.5 8.7 13.5 9.6 13.2 10.4 12.5L10.9 13.2C8.9 15.2 6.7 16 5.8 16Z"/></svg>');
}
&.tip {
/* Tailwind: teal 50/200/500 */
--callout-bg : #f0fdfa;
--callout-border-color: #99f6e4;
--callout-charm-bg : #14b8a6 center no-repeat url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="14" height="14" fill="white"><path d="M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z"></path></svg>');
}
&.warning {
/* Tailwind: amber 50/200/300 */
--callout-bg : #fffbeb;
--callout-border-color: #fde68a;
--callout-charm-bg : #fcd34d center no-repeat url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="13" height="13" fill="#a16207"><path d="M10 14C10 15.1 9.1 16 8 16 6.9 16 6 15.1 6 14 6 12.9 6.9 12 8 12 9.1 12 10 12.9 10 14Z"/><path d="M10 1.6C10 1.2 9.8 0.9 9.6 0.7 9.2 0.3 8.6 0 8 0 7.4 0 6.8 0.2 6.5 0.6 6.2 0.9 6 1.2 6 1.6 6 1.7 6 1.8 6 1.9L6.8 9.6C6.9 9.9 7 10.1 7.2 10.2 7.4 10.4 7.7 10.5 8 10.5 8.3 10.5 8.6 10.4 8.8 10.3 9 10.1 9.1 9.9 9.2 9.6L10 1.9C10 1.8 10 1.7 10 1.6Z"/></svg>');
}
}