/** * Theme: default */ :root { --text-font: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu", "Cantarell", "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --titles-font: var(--text-font); --code-font: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --line-height: 1.5; --text-weight: 400; --titles-weight: 700; --form-element-weight: var(--text-weight); --buttons-weight: var(--text-weight); --code-weight: var(--text-weight); --base-font-xs: 16px; --base-font-sm: 17px; --base-font-md: 18px; --base-font-lg: 19px; --base-font-xl: 20px; --h1-size: 2rem; --h2-size: 1.75rem; --h3-size: 1.5rem; --h4-size: 1.25rem; --h5-size: 1.125rem; --h6-size: 1rem; --block-round: .25rem; --form-element-border-width: 1px; --form-element-outline-width: 3px; --checkbox-radio-border-width: 2px; --switch-border-width: 3px; --form-element-spacing-vertical: .75rem; --form-element-spacing-horizontal: 1rem; --button-round: var(--block-round); --button-border-width: var(--form-element-border-width); --button-outline-width: var(--form-element-outline-width); --button-spacing-vertical: var(--form-element-spacing-vertical); --button-spacing-horizontal: var(--form-element-spacing-horizontal); --spacing-gutter: 1rem; --spacing-block: 2rem; --spacing-factor-xs: 1; --spacing-factor-sm: 1.25; --spacing-factor-md: 1.5; --spacing-factor-lg: 1.75; --spacing-factor-xl: 2; --spacing-typography: 1.5rem; --spacing-form-element: .25rem; --transition: .2s ease-in-out; } :root { --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); --icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); --icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(115, 130, 140, 0.999)' opacity='0.66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); --icon-checkbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --icon-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23FFF' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E"); --icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(40, 138, 106, 0.999)' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E"); --icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgba(185, 70, 70, 0.999)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E"); } [data-theme="light"], :root:not([data-theme="dark"]) { --background: #FFF; --text: #415462; --h1: #1b2832; --h2: #2c3d49; --h3: #415462; --h4: #596b78; --h5: #73828c; --h6: #8a99a3; --primary: #1095c1; --primary-border: var(--primary); --primary-hover: #08769b; --primary-hover-border: var(--primary-hover); --primary-focus: rgba(16, 149, 193, 0.125); --primary-inverse: #FFF; --secondary: #73828c; --secondary-border: var(--secondary); --secondary-hover: #415462; --secondary-hover-border: var(--secondary-hover); --secondary-focus: rgba(115, 130, 140, 0.125); --secondary-inverse: #FFF; --contrast: #2c3d49; --contrast-border: var(--contrast); --contrast-hover: #0d1419; --contrast-hover-border: var(--contrast-hover); --contrast-focus: rgba(115, 130, 140, 0.125); --contrast-inverse: #FFF; --input-background: #FFF; --input-border: #c8d1d8; --input-hover-background: var(--input-background); --input-hover-border: var(--primary); --input-focus: var(--primary-focus); --input-inverse: var(--primary-inverse); --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); --valid: #288a6a; --invalid: #b94646; --mark: rgba(255, 223, 128, 0.33); --mark-text: #2c3d49; --muted-text: #7e8d98; --muted-background: #edf0f3; --muted-border: #edf0f3; --card-background: #FFF; --card-sections: #f3f5f7; --card-shadow: 0 0.125rem 1rem rgba(27, 40, 50, 0.04), 0 0.125rem 2rem rgba(27, 40, 50, 0.08), 0 0 0 0.0625rem rgba(27, 40, 50, 0.024); --code-background: #f3f5f7; --code-inlined: #edf0f3; --code-color-1: #73828c; --code-color-2: #b34d80; --code-color-3: #3d888f; --code-color-4: #998866; --code-color-5: #96a4ae; --table-border: rgba(237, 240, 243, 0.75); --table-stripping: rgba(115, 130, 140, 0.075); } @media only screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --background: #10181e; --text: #a2afb9; --h1: #edf0f3; --h2: #d5dce2; --h3: #bbc6ce; --h4: #a2afb9; --h5: #8a99a3; --h6: #73828c; --primary: #1095c1; --primary-border: var(--primary); --primary-hover: #1ab3e6; --primary-hover-border: var(--primary-hover); --primary-focus: rgba(16, 149, 193, 0.25); --primary-inverse: #FFF; --secondary: #596b78; --secondary-border: var(--secondary); --secondary-hover: #73828c; --secondary-hover-border: var(--secondary-hover); --secondary-focus: rgba(89, 107, 120, 0.25); --secondary-inverse: #FFF; --contrast: #d5dce2; --contrast-border: var(--contrast); --contrast-hover: #FFF; --contrast-hover-border: var(--contrast-hover); --contrast-focus: rgba(89, 107, 120, 0.25); --contrast-inverse: #10181e; --input-background: #10181e; --input-border: #374956; --input-hover-background: var(--input-background); --input-hover-border: var(--primary); --input-focus: var(--primary-focus); --input-inverse: var(--primary-inverse); --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); --valid: #1f7a5c; --invalid: #943838; --mark: rgba(255, 223, 128, 0.1875); --mark-text: #FFF; --muted-text: #73828c; --muted-background: #23333e; --muted-border: #23333e; --card-background: #17232b; --card-sections: #141d24; --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1); --code-background: #141d24; --code-inlined: rgba(65, 84, 98, 0.25); --code-color-1: #73828c; --code-color-2: #a65980; --code-color-3: #599fa6; --code-color-4: #8c8473; --code-color-5: #4d606d; --table-border: rgba(115, 130, 140, 0.075); --table-stripping: rgba(115, 130, 140, 0.05); } } [data-theme="dark"] { --background: #10181e; --text: #a2afb9; --h1: #edf0f3; --h2: #d5dce2; --h3: #bbc6ce; --h4: #a2afb9; --h5: #8a99a3; --h6: #73828c; --primary: #1095c1; --primary-border: var(--primary); --primary-hover: #1ab3e6; --primary-hover-border: var(--primary-hover); --primary-focus: rgba(16, 149, 193, 0.25); --primary-inverse: #FFF; --secondary: #596b78; --secondary-border: var(--secondary); --secondary-hover: #73828c; --secondary-hover-border: var(--secondary-hover); --secondary-focus: rgba(89, 107, 120, 0.25); --secondary-inverse: #FFF; --contrast: #d5dce2; --contrast-border: var(--contrast); --contrast-hover: #FFF; --contrast-hover-border: var(--contrast-hover); --contrast-focus: rgba(89, 107, 120, 0.25); --contrast-inverse: #10181e; --input-background: #10181e; --input-border: #374956; --input-hover-background: var(--input-background); --input-hover-border: var(--primary); --input-focus: var(--primary-focus); --input-inverse: var(--primary-inverse); --button-shadow: 0 0 0 0 rgba(0, 0, 0, 0); --button-hover-shadow: 0 0 0 0 rgba(0, 0, 0, 0); --valid: #1f7a5c; --invalid: #943838; --mark: rgba(255, 223, 128, 0.1875); --mark-text: #FFF; --muted-text: #73828c; --muted-background: #23333e; --muted-border: #23333e; --card-background: #17232b; --card-sections: #141d24; --card-shadow: 0 0.125rem 1rem rgba(0, 0, 0, 0.08), 0 0.125rem 2rem rgba(0, 0, 0, 0.04), 0 0 0 0.0625rem rgba(0, 0, 0, 0.1); --code-background: #141d24; --code-inlined: rgba(65, 84, 98, 0.25); --code-color-1: #73828c; --code-color-2: #a65980; --code-color-3: #599fa6; --code-color-4: #8c8473; --code-color-5: #4d606d; --table-border: rgba(115, 130, 140, 0.075); --table-stripping: rgba(115, 130, 140, 0.05); }