@layer scalar-base, scalar-theme; /* Import core stylesheets */ /* Custom reset (loosely) based on Tailwind Preflight @see https://github.com/tailwindlabs/tailwindcss/blob/3.3/src/css/preflight.css */ /* Reset in a layer */ @layer scalar-base { body { margin: 0; line-height: inherit; } } /* Use :where to lower specificity */ :where(.scalar-app) { /* Apply styles that are normally applied to `html`. */ font-family: var(--scalar-font); line-height: 1.15; color: var(--scalar-color-1); -webkit-text-size-adjust: 100%; -moz-tab-size: 4; tab-size: 4; *, *:before, *:after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: var(--scalar-border-color); outline-width: 1px; outline-style: none; outline-color: var(--scalar-color-accent); font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: inherit; font-weight: inherit; font-style: inherit; text-decoration: inherit; line-height: inherit; color: inherit; margin: unset; padding: unset; /** Smooth text rendering */ text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::before, ::after { --tw-content: ""; } /** Remove the default background color. */ button, input, optgroup, select, textarea, ::file-selector-button { background: transparent; } /** Remove the default list style */ ol, ul, menu { list-style: none; } /** Bring back a basic border style and focus outline for form controls */ input:where(:not([type="button"], [type="reset"], [type="submit"])), select, textarea { border-radius: var(--scalar-radius); border-width: 1px; } /** Style placeholder text */ input::placeholder { color: var(--scalar-color-3); font-family: var(--scalar-font); } /** Remove chrome search input decorations */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { appearance: none; } /* Fix for Safari displaying default caret next to `

` */ summary::-webkit-details-marker { display: none; } /** Remove yellow/blue autofill indicator */ input:-webkit-autofill { background-clip: text !important; } /** Add outline for focus visible */ :focus-visible { outline-style: solid; border-radius: var(--scalar-radius); } /** Set outline offset for buttons */ button:focus-visible, [role="button"]:focus-visible { outline-offset: -1px; } /** Set the default cursor for buttons. */ button, [role="button"] { cursor: pointer; } /** Make sure disabled buttons don't get the pointer cursor. */ :disabled { cursor: default; } /** 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) */ img, svg, video, canvas, audio, iframe, embed, object { display: block; /* 1 */ vertical-align: middle; /* 2 */ } /** Make elements with the HTML hidden attribute stay hidden by default */ [hidden] { display: none; } } .scalar-app { .cm-scroller, .custom-scroll { overflow-y: auto; scrollbar-color: transparent transparent; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .custom-scroll-self-contain-overflow { overscroll-behavior: contain; } .cm-scroller:hover, .custom-scroll:hover { scrollbar-color: var(--scalar-scrollbar-color, transparent) transparent; } /* Force Obtrusive Scrollbars */ &.scalar-scrollbars-obtrusive { .cm-scroller, .custom-scroll { scrollbar-color: var(--scalar-scrollbar-color, transparent) transparent; } } .cm-scroller:hover::-webkit-scrollbar-thumb, .custom-scroll:hover::-webkit-scrollbar-thumb { background: var(--scalar-scrollbar-color); background-clip: content-box; border: 3px solid transparent; } .cm-scroller::-webkit-scrollbar-thumb:active, .custom-scroll::-webkit-scrollbar-thumb:active { background: var(--scalar-scrollbar-color-active); background-clip: content-box; border: 3px solid transparent; } .cm-scroller::-webkit-scrollbar-corner, .custom-scroll::-webkit-scrollbar-corner { background: transparent; } .cm-scroller::-webkit-scrollbar, .custom-scroll::-webkit-scrollbar { height: 12px; width: 12px; } .cm-scroller::-webkit-scrollbar-track, .custom-scroll::-webkit-scrollbar-track { background: transparent; } .cm-scroller::-webkit-scrollbar-thumb, .custom-scroll::-webkit-scrollbar-thumb { border-radius: 20px; background: transparent; background-clip: content-box; border: 3px solid transparent; } @media (pointer: coarse) { .cm-scroller, .custom-scroll { padding-right: 12px; } } } /* Import a copy of the base variables and default theme */ @layer scalar-base{ :root { --scalar-border-width: 0.5px; --scalar-radius: 3px; --scalar-radius-lg: 6px; --scalar-radius-xl: 8px; /* TYPOGRAPHY ------------------------------------ */ --scalar-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; --scalar-font-code: "JetBrains Mono", ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace; /** Font sizes for rendered text content (editor styles or static content) */ --scalar-heading-1: 24px; /* Editor Page heading */ --scalar-page-description: 16px; --scalar-heading-2: 20px; /* Editor section headings */ --scalar-heading-3: 20px; --scalar-heading-4: 16px; --scalar-heading-5: 16px; --scalar-heading-6: 16px; --scalar-paragraph: 16px; --scalar-small: 14px; --scalar-mini: 13px; --scalar-micro: 12px; --scalar-bold: 600; --scalar-semibold: 500; --scalar-regular: 400; /* Font sizes for interactive applications (not rendered text content) */ --scalar-font-size-1: 21px; --scalar-font-size-2: 16px; --scalar-font-size-3: 14px; --scalar-font-size-4: 13px; --scalar-font-size-5: 12px; --scalar-font-size-6: 12px; --scalar-font-size-7: 10px; --scalar-line-height-1: 32px; --scalar-line-height-2: 24px; --scalar-line-height-3: 20px; --scalar-line-height-4: 18px; --scalar-line-height-5: 16px; --scalar-font-normal: 400; --scalar-font-medium: 500; --scalar-font-bold: 700; --scalar-text-decoration: none; --scalar-text-decoration-hover: underline; --scalar-link-font-weight: inherit; --scalar-sidebar-indent: 20px; } .dark-mode { color-scheme: dark; --scalar-scrollbar-color: rgba(255, 255, 255, 0.18); --scalar-scrollbar-color-active: rgba(255, 255, 255, 0.36); --scalar-button-1: rgba(255, 255, 255, 1); --scalar-button-1-hover: rgba(255, 255, 255, 0.9); --scalar-button-1-color: black; --scalar-shadow-1: 0 1px 3px 0 rgb(0, 0, 0, 0.1); --scalar-shadow-2: 0 0 0 0.5px var(--scalar-border-color), rgba(15, 15, 15, 0.2) 0px 3px 6px, rgba(15, 15, 15, 0.4) 0px 9px 24px; --scalar-lifted-brightness: 1.45; --scalar-backdrop-brightness: 0.5; --scalar-text-decoration-color: currentColor; --scalar-text-decoration-color-hover: currentColor; } .light-mode { color-scheme: light; --scalar-scrollbar-color-active: rgba(0, 0, 0, 0.36); --scalar-scrollbar-color: rgba(0, 0, 0, 0.18); --scalar-button-1: rgba(0, 0, 0, 1); --scalar-button-1-hover: rgba(0, 0, 0, 0.8); --scalar-button-1-color: rgba(255, 255, 255, 0.9); --scalar-shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.11); --scalar-shadow-2: rgba(0, 0, 0, 0.08) 0px 13px 20px 0px, rgba(0, 0, 0, 0.08) 0px 3px 8px 0px, #eeeeed 0px 0 0 0.5px; --scalar-lifted-brightness: 1; --scalar-backdrop-brightness: 1; --scalar-text-decoration-color: currentColor; --scalar-text-decoration-color-hover: currentColor; } /* On some browsers, the light color scheme takes precedence when the light mode is active */ .light-mode .dark-mode { color-scheme: dark !important; } @media (max-width: 460px) { :root { --scalar-font-size-1: 22px; --scalar-font-size-2: 14px; --scalar-font-size-3: 12px; } } @media (max-width: 720px) { :root { --scalar-heading-1: 24px; --scalar-page-description: 20px; } } } @layer scalar-base{ /* basic theme */ :root { --scalar-text-decoration: underline; --scalar-text-decoration-hover: underline; } .light-mode { --scalar-background-1: #fff; --scalar-background-2: #f6f6f6; --scalar-background-3: #e7e7e7; --scalar-background-accent: #8ab4f81f; --scalar-color-1: #2a2f45; --scalar-color-2: #757575; --scalar-color-3: #8e8e8e; --scalar-color-accent: #0099ff; --scalar-border-color: #dfdfdf; } .dark-mode { --scalar-background-1: #0f0f0f; --scalar-background-2: #1a1a1a; --scalar-background-3: #272727; --scalar-color-1: #e7e7e7; --scalar-color-2: #a4a4a4; --scalar-color-3: #797979; --scalar-color-accent: #00aeff; --scalar-background-accent: #3ea6ff1f; --scalar-border-color: #2d2d2d; } /* Document Sidebar */ .light-mode .t-doc__sidebar, .dark-mode .t-doc__sidebar { --scalar-sidebar-background-1: var(--scalar-background-1); --scalar-sidebar-color-1: var(--scalar-color-1); --scalar-sidebar-color-2: var(--scalar-color-2); --scalar-sidebar-border-color: var(--scalar-border-color); --scalar-sidebar-item-hover-background: var(--scalar-background-2); --scalar-sidebar-item-hover-color: currentColor; --scalar-sidebar-item-active-background: var(--scalar-background-2); --scalar-sidebar-color-active: var(--scalar-color-1); --scalar-sidebar-indent-border: var(--scalar-sidebar-border-color); --scalar-sidebar-indent-border-hover: var(--scalar-sidebar-border-color); --scalar-sidebar-indent-border-active: var(--scalar-sidebar-border-color); --scalar-sidebar-search-background: transparent; --scalar-sidebar-search-color: var(--scalar-color-3); --scalar-sidebar-search-border-color: var(--scalar-border-color); } /* advanced */ .light-mode { --scalar-color-green: #069061; --scalar-color-red: #ef0006; --scalar-color-yellow: #edbe20; --scalar-color-blue: #0082d0; --scalar-color-orange: #ff5800; --scalar-color-purple: #5203d1; --scalar-link-color: var(--scalar-color-1); --scalar-link-color-hover: var(--scalar-link-color); --scalar-button-1: rgba(0, 0, 0, 1); --scalar-button-1-hover: rgba(0, 0, 0, 0.8); --scalar-button-1-color: rgba(255, 255, 255, 0.9); --scalar-tooltip-background: color-mix(in srgb, #1a1a1a, transparent 10%); --scalar-tooltip-color: color-mix(in srgb, #fff, transparent 15%); --scalar-color-alert: color-mix(in srgb, var(--scalar-color-orange), var(--scalar-color-1) 20%); --scalar-color-danger: color-mix(in srgb, var(--scalar-color-red), var(--scalar-color-1) 20%); --scalar-background-alert: color-mix(in srgb, var(--scalar-color-orange), var(--scalar-background-1) 95%); --scalar-background-danger: color-mix(in srgb, var(--scalar-color-red), var(--scalar-background-1) 95%); } .dark-mode { --scalar-color-green: #00b648; --scalar-color-red: #dc1b19; --scalar-color-yellow: #ffc90d; --scalar-color-blue: #4eb3ec; --scalar-color-orange: #ff8d4d; --scalar-color-purple: #b191f9; --scalar-link-color: var(--scalar-color-1); --scalar-link-color-hover: var(--scalar-link-color); --scalar-button-1: rgba(255, 255, 255, 1); --scalar-button-1-hover: rgba(255, 255, 255, 0.9); --scalar-button-1-color: black; --scalar-tooltip-background: color-mix(in srgb, var(--scalar-background-1), #fff 10%); --scalar-tooltip-color: color-mix(in srgb, #fff, transparent 5%); --scalar-color-danger: color-mix(in srgb, var(--scalar-color-red), var(--scalar-background-1) 20%); --scalar-background-alert: color-mix(in srgb, var(--scalar-color-orange), var(--scalar-background-1) 95%); --scalar-background-danger: color-mix(in srgb, var(--scalar-color-red), var(--scalar-background-1) 95%); } @supports (color: color(display-p3 1 1 1)) { .light-mode { --scalar-color-accent: color(display-p3 0.0 0.6 1.0 / 1.0); --scalar-color-green: color(display-p3 0.023529 0.564706 0.380392 / 1.0); --scalar-color-red: color(display-p3 0.937255 0.0 0.023529 / 1.0); --scalar-color-yellow: color(display-p3 0.929412 0.745098 0.12549 / 1.0); --scalar-color-blue: color(display-p3 0.0 0.509804 0.815686 / 1.0); --scalar-color-orange: color(display-p3 1.0 0.4 0.02); --scalar-color-purple: color(display-p3 0.321569 0.011765 0.819608 / 1.0); } .dark-mode { --scalar-color-accent: color(display-p3 0.07 0.67 1); --scalar-color-green: color(display-p3 0.0 0.713725 0.282353 / 1.0); --scalar-color-red: color(display-p3 0.862745 0.105882 0.098039 / 1.0); --scalar-color-yellow: color(display-p3 1.0 0.788235 0.05098 / 1.0); --scalar-color-blue: color(display-p3 0.305882 0.701961 0.92549 / 1.0); --scalar-color-orange: color(display-p3 1.0 0.552941 0.301961 / 1.0); --scalar-color-purple: color(display-p3 0.694118 0.568627 0.976471 / 1.0); } } }