/* D6/wiki skin, loaded last in by the patched index.html * (roles/outline/files/patch/outline-patch.py) from /static/d6/d6.css?v=. * * Outline bakes its colours into styled-components classes with generated names * (the only thing that can be set from outside is the accent colour, a team * setting), so this file doesn't try to recolour the whole UI. It sticks to hooks * that are stable across Outline releases: element names, the #sidebar id, aria * attributes, the editor's own class names (.ProseMirror, .notice-block, ...) * and the page's colour scheme. README.md says what is and isn't covered. What * it does: * - load the brand fonts and use them: IBM Plex Sans for the UI and the * documents, JetBrains Mono for code, Saira (expanded) for page titles; * - brand colours for the editor's notices and plain links, in both modes; * - brand text selection and Flux focus rings, as in the D6/auth kit. * The greys (backgrounds, sidebar, borders, text, code blocks) are not here: * they are the Carbon palette patched into Outline's compiled theme by * files/patch/outline-patch.py. * The favicon stays Outline's, so the tab is easy to tell apart from the other * services. Asset URLs are relative to this file. */ @font-face { font-family: "Saira"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 50% 125%; src: url(fonts/saira-latin-wdth-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Saira"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 50% 125%; src: url(fonts/saira-latin-ext-wdth-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 100 700; font-stretch: 75% 100%; src: url(fonts/ibm-plex-sans-latin-wdth-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Sans"; font-style: normal; font-display: swap; font-weight: 100 700; font-stretch: 75% 100%; src: url(fonts/ibm-plex-sans-latin-ext-wdth-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 100 800; src: url(fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-display: swap; font-weight: 100 800; src: url(fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---- colours -------------------------------------------------------------- * light-dark() picks by the page's colour scheme. Outline has no dark-mode class, * but it keeps in step with the theme in use ("light" * or "dark", also for the "system" setting; "light dark", i.e. the OS setting, * until the app has started), and that is what the page's colour scheme follows. * Values are d6-brand's tokens: dark is the brand's own mode, light is Paper * with the darker shades that keep 4.5:1 text contrast. */ :root { --d6-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; --d6-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --d6-font-display: "Saira", "IBM Plex Sans", system-ui, sans-serif; --d6-focus: light-dark(#608000, #C4FF1F); /* Flux 700 / 400 */ --d6-link: light-dark(#AD4A07, #FF9133); /* Signal 700 / 400, as the other D6 apps */ --d6-selection: light-dark(rgb(245 119 15 / 28%), rgb(255 145 51 / 35%)); /* Signal 500 / 400 */ /* Notices. Info is Signal, as in Grafana and Forgejo; the rest are the brand's * status colours (Outline's "warning" is its red one, so it gets error). */ --d6-notice-info: light-dark(#AD4A07, #FF9133); /* Signal 700 / 400 */ --d6-notice-tip: light-dark(#A16207, #FACC15); /* warning */ --d6-notice-warning: light-dark(#B91C1C, #F87171); /* error */ --d6-notice-success: light-dark(#047857, #34D399); /* success */ } /* ---- type ---------------------------------------------------------------- * Everything but code takes the brand sans. Outline sets font-family on several * generated classes, so a plain body rule would not reach them: the universal * rule needs !important, and the :not() keeps code (and what is inside it, the * syntax-highlighting spans) out of it. Emoji fall through to the system's * emoji fonts, named at the end of the stack. */ body :not(:is(code, pre, kbd, samp), :is(code, pre, kbd, samp) *) { font-family: var(--d6-font-sans) !important; } code, pre, kbd, samp, code *, pre *, kbd *, samp * { font-family: var(--d6-font-mono) !important; } /* Page titles (settings pages and so on), h1 in documents, and the document * and collection titles. Those are a ContentEditable span that has * role="textbox" / contenteditable only while editing; data-placeholder is * set in read mode too, so it is the hook. */ html body h1, html body h1 *, html body span[data-placeholder], html body span[data-placeholder] * { font-family: var(--d6-font-display) !important; font-stretch: 125%; font-weight: 600; } /* Plain links. Outline gives them the accent colour (light) or a fixed blue * (dark); this is the brand's primary for text, which is darker than the accent in * light mode so it stays readable. Links styled by a generated class (sidebar * entries, buttons, links in documents) are unaffected. */ html body a { color: var(--d6-link); } /* ---- editor -------------------------------------------------------------- * Outline's own rules for these are nested in a generated class (three classes * deep for .notice-block.tip), so !important is the way to win. */ html body .notice-block { background: color-mix(in srgb, var(--d6-notice-info) 10%, transparent) !important; border-left-color: var(--d6-notice-info) !important; } html body .notice-block .icon { color: var(--d6-notice-info) !important; } html body .notice-block.tip { background: color-mix(in srgb, var(--d6-notice-tip) 10%, transparent) !important; border-left-color: var(--d6-notice-tip) !important; } html body .notice-block.tip .icon { color: var(--d6-notice-tip) !important; } html body .notice-block.warning { background: color-mix(in srgb, var(--d6-notice-warning) 10%, transparent) !important; border-left-color: var(--d6-notice-warning) !important; } html body .notice-block.warning .icon { color: var(--d6-notice-warning) !important; } html body .notice-block.success { background: color-mix(in srgb, var(--d6-notice-success) 10%, transparent) !important; border-left-color: var(--d6-notice-success) !important; } html body .notice-block.success .icon { color: var(--d6-notice-success) !important; } /* ---- selection, focus ------------------------------------------------------ */ ::selection { background: var(--d6-selection); } :focus-visible { outline-color: var(--d6-focus) !important; }