/* ==UserStyle== @name Github Catppuccin @namespace github.com/catppuccin/userstyles/styles/github @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/github @version 1.2.0 @description Soothing pastel theme for GitHub @author Catppuccin @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/github/catppuccin.user.css @license MIT @preprocessor less @var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"] @var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"] @var select accentColor "Accent" ["rosewater:Rosewater*", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"] @var checkbox topbar "Topbar colors" 1 @var checkbox usefont "Use Inter font" 0 ==/UserStyle== */ // Include https://github.com // Include https://gist.github.com // Exclude /marketplace // Exclude /organizations/plan @catppuccin: { @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; }; }; @-moz-document regexp("https:\/\/(gist\.)*github\.com(?!\/(marketplace|organizations\/plan)).*") { [data-color-mode="auto"][data-dark-theme*="light"], [data-color-mode="light"][data-light-theme*="dark"], [data-color-mode="light"][data-light-theme*="light"] { #catppuccin(@lightFlavor, @accentColor); } [data-color-mode="dark"][data-dark-theme*="dark"], [data-color-mode="dark"][data-dark-theme*="light"], [data-color-mode="auto"][data-dark-theme*="dark"] { #catppuccin(@darkFlavor, @accentColor); } #coloredButton(@name, @color) { --color-btn-@{name}-text: @base; --color-btn-@{name}-bg: @color; --color-btn-@{name}-border: transparent; --color-btn-@{name}-shadow: 0 0 transparent; --color-btn-@{name}-inset-shadow: 0 0 transparent; --color-btn-@{name}-hover-bg: mix(@color, @text, 30%); --color-btn-@{name}-hover-border: rgba(240, 246, 252, 0.1); --color-btn-@{name}-selected-bg: mix(@color, @text, 50%); --color-btn-@{name}-selected-shadow: 0 0 transparent; --color-btn-@{name}-disabled-text: @crust; --color-btn-@{name}-disabled-bg: mix(@color, @base, 60%); --color-btn-@{name}-disabled-border: transparent; --color-btn-@{name}-focus-bg: #238636; --color-btn-@{name}-focus-border: rgba(240, 246, 252, 0.1); --color-btn-@{name}-focus-shadow: 0 0 0 3px rgba(46, 164, 79, 0.4); --color-btn-@{name}-icon: @base; --color-btn-@{name}-counter-bg: rgba(255, 255, 255, 0.2); } #catppuccin(@lookup, @accent) { @rosewater: @catppuccin[@@lookup][@rosewater]; @flamingo: @catppuccin[@@lookup][@flamingo]; @pink: @catppuccin[@@lookup][@pink]; @mauve: @catppuccin[@@lookup][@mauve]; @red: @catppuccin[@@lookup][@red]; @maroon: @catppuccin[@@lookup][@maroon]; @peach: @catppuccin[@@lookup][@peach]; @yellow: @catppuccin[@@lookup][@yellow]; @green: @catppuccin[@@lookup][@green]; @teal: @catppuccin[@@lookup][@teal]; @sky: @catppuccin[@@lookup][@sky]; @sapphire: @catppuccin[@@lookup][@sapphire]; @blue: @catppuccin[@@lookup][@blue]; @lavender: @catppuccin[@@lookup][@lavender]; @text: @catppuccin[@@lookup][@text]; @subtext1: @catppuccin[@@lookup][@subtext1]; @subtext0: @catppuccin[@@lookup][@subtext0]; @overlay2: @catppuccin[@@lookup][@overlay2]; @overlay1: @catppuccin[@@lookup][@overlay1]; @overlay0: @catppuccin[@@lookup][@overlay0]; @surface2: @catppuccin[@@lookup][@surface2]; @surface1: @catppuccin[@@lookup][@surface1]; @surface0: @catppuccin[@@lookup][@surface0]; @base: @catppuccin[@@lookup][@base]; @mantle: @catppuccin[@@lookup][@mantle]; @crust: @catppuccin[@@lookup][@crust]; @accent-color: @catppuccin[@@lookup][@@accent]; &, & body { accent-color: @accent-color; --color-canvas-default-transparent: rgba(13, 17, 23, 0); --color-page-header-bg: @base; --color-marketing-icon-primary: @sky; --color-marketing-icon-secondary: @blue; --color-diff-blob-addition-num-text: @text; --color-diff-blob-addition-fg: @text; --color-diff-blob-addition-num-bg: fadeout(@green, 70%); --color-diff-blob-addition-line-bg: fadeout(@green, 85%); --color-diff-blob-addition-word-bg: fadeout(@green, 70%); --color-diff-blob-deletion-num-text: @text; --color-diff-blob-deletion-fg: @text; --color-diff-blob-deletion-num-bg: fadeout(@red, 70%); --color-diff-blob-deletion-line-bg: fadeout(@red, 85%); --color-diff-blob-deletion-word-bg: fadeout(@red, 70%); --color-diff-blob-hunk-num-bg: fadeout(@blue, 60%); --color-diff-blob-expander-icon: #8b949e; --color-diff-blob-selected-line-highlight-mix-blend-mode: screen; --color-diffstat-deletion-border: rgba(240, 246, 252, 0.1); --color-diffstat-addition-border: rgba(240, 246, 252, 0.1); --color-diffstat-addition-bg: @green; --color-search-keyword-hl: rgba(210, 153, 34, 0.4); --color-prettylights-syntax-comment: @overlay1; --color-prettylights-syntax-constant: @blue; --color-prettylights-syntax-entity: @blue; --color-prettylights-syntax-storage-modifier-import: @peach; --color-prettylights-syntax-entity-tag: @teal; --color-prettylights-syntax-keyword: @pink; --color-prettylights-syntax-string: @green; --color-prettylights-syntax-variable: @peach; --color-prettylights-syntax-brackethighlighter-unmatched: #f0f; --color-prettylights-syntax-invalid-illegal-text: @red; --color-prettylights-syntax-invalid-illegal-bg: fadeout(@red, 85%); --color-prettylights-syntax-carriage-return-text: #f0f; --color-prettylights-syntax-carriage-return-bg: #f0f; --color-prettylights-syntax-string-regexp: #f0f; --color-prettylights-syntax-markup-list: #f0f; --color-prettylights-syntax-markup-heading: @teal; --color-prettylights-syntax-markup-italic: @yellow; --color-prettylights-syntax-markup-bold: @yellow; --color-prettylights-syntax-markup-deleted-text: @text; --color-prettylights-syntax-markup-deleted-bg: fadeout(@red, 60%); --color-prettylights-syntax-markup-inserted-text: @text; --color-prettylights-syntax-markup-inserted-bg: fadeout(@green, 60%); --color-prettylights-syntax-markup-changed-text: @text; --color-prettylights-syntax-markup-changed-bg: fadeout(@yellow, 60%); --color-prettylights-syntax-markup-ignored-text: @text; --color-prettylights-syntax-markup-ignored-bg: #f0f; --color-prettylights-syntax-meta-diff-range: @mauve; --color-prettylights-syntax-brackethighlighter-angle: #f0f; --color-prettylights-syntax-sublimelinter-gutter-mark: #f0f; --color-prettylights-syntax-constant-other-reference-link: #f0f; --color-codemirror-text: @text; --color-codemirror-bg: @base; --color-codemirror-gutters-bg: @base; --color-codemirror-guttermarker-text: @base; --color-codemirror-guttermarker-subtle-text: #6e7681; --color-codemirror-linenumber-text: #8b949e; --color-codemirror-cursor: #c9d1d9; --color-codemirror-selection-bg: rgba(56, 139, 253, 0.4); --color-codemirror-activeline-bg: rgba(110, 118, 129, 0.1); --color-codemirror-matchingbracket-text: #c9d1d9; --color-codemirror-lines-bg: @base; --color-codemirror-syntax-comment: #8b949e; --color-codemirror-syntax-constant: #79c0ff; --color-codemirror-syntax-entity: #d2a8ff; --color-codemirror-syntax-keyword: #ff7b72; --color-codemirror-syntax-storage: #ff7b72; --color-codemirror-syntax-string: #a5d6ff; --color-codemirror-syntax-support: #79c0ff; --color-codemirror-syntax-variable: #ffa657; --color-checks-bg: @mantle; --color-checks-run-border-width: 1px; --color-checks-container-border-width: 1px; --color-checks-text-primary: @text; --color-checks-text-secondary: @subtext1; --color-checks-text-link: @sapphire; --color-checks-btn-icon: @text; --color-checks-btn-hover-icon: @text; --color-checks-btn-hover-bg: @crust; --color-checks-input-text: @surface1; --color-checks-input-placeholder-text: @subtext1; --color-checks-input-focus-text: @text; --color-checks-input-bg: @surface0; --color-checks-input-shadow: 0 0 0 1px; --color-checks-donut-error: @red; --color-checks-donut-pending: @peach; --color-checks-donut-success: @green; --color-checks-donut-neutral: @overlay2; --color-checks-dropdown-text: @text; --color-checks-dropdown-bg: @surface0; --color-checks-dropdown-border: @surface1; --color-checks-dropdown-shadow: @crust; --color-checks-dropdown-hover-text: @subtext0; --color-checks-dropdown-hover-bg: @mantle; --color-checks-dropdown-btn-hover-text: @text; --color-checks-dropdown-btn-hover-bg: @mantle; --color-checks-scrollbar-thumb-bg: @mantle; --color-checks-header-label-text: @text; --color-checks-header-label-open-text: @accent-color; --color-checks-header-border: @surface0; --color-checks-header-icon: @text; --color-checks-line-text: @subtext1; --color-checks-line-num-text: @subtext1; --color-checks-line-timestamp-text: @subtext1; --color-checks-line-hover-bg: @surface0; --color-checks-line-selected-bg: #dc2286; --color-checks-line-selected-num-text: #dc2286; --color-checks-line-dt-fm-text: #dc2286; --color-checks-line-dt-fm-bg: #dc2286; --color-checks-gate-bg: rgba(187, 128, 9, 0.15); --color-checks-gate-text: @text; --color-checks-gate-waiting-text: @yellow; --color-checks-step-header-open-bg: @surface0; --color-checks-step-error-text: @maroon; --color-checks-step-warning-text: @peach; --color-checks-logline-text: @text; --color-checks-logline-num-text: @text; --color-checks-logline-debug-text: @mauve; --color-checks-logline-error-text: @text; --color-checks-logline-error-num-text: @maroon; --color-checks-logline-error-bg: fadeout(@maroon, 85%); --color-checks-logline-warning-text: @subtext1; --color-checks-logline-warning-num-text: @peach; --color-checks-logline-warning-bg: fadeout(@peach, 85%); --color-checks-logline-command-text: @blue; --color-checks-logline-section-text: @green; --color-checks-ansi-black: @surface1; --color-checks-ansi-black-bright: @surface2; --color-checks-ansi-white: @subtext1; --color-checks-ansi-white-bright: @subtext0; & when (@lookup =latte) { // When using a light theme use the light colors instead of the dark --color-checks-ansi-black: @subtext1; --color-checks-ansi-black-bright: @subtext0; --color-checks-ansi-white: @surface2; --color-checks-ansi-white-bright: @surface1; } --color-checks-ansi-gray: #f0f; --color-checks-ansi-red: @red; --color-checks-ansi-red-bright: @red; --color-checks-ansi-green: @green; --color-checks-ansi-green-bright: @green; --color-checks-ansi-yellow: @yellow; --color-checks-ansi-yellow-bright: @yellow; --color-checks-ansi-blue: @blue; --color-checks-ansi-blue-bright: @blue; --color-checks-ansi-magenta: @pink; --color-checks-ansi-magenta-bright: @pink; --color-checks-ansi-cyan: @teal; --color-checks-ansi-cyan-bright: @teal; --color-project-header-bg: #0d1117; --color-project-sidebar-bg: #161b22; --color-project-gradient-in: #161b22; --color-project-gradient-out: rgba(22, 27, 34, 0); --color-mktg-btn-bg: #f6f8fa; --color-mktg-btn-shadow-outline: rgb(255, 255, 255 / 25%) 0 0 0 1px inset; --color-mktg-btn-shadow-focus: rgb(255, 255, 255 / 25%) 0 0 0 4px; --color-mktg-btn-shadow-hover: 0 4px 7px rgba(0, 0, 0, 0.15), 0 100px 80px rgba(255, 255, 255, 0.02), 0 42px 33px rgba(255, 255, 255, 0.024), 0 22px 18px rgba(255, 255, 255, 0.028), 0 12px 10px rgba(255, 255, 255, 0.034), 0 7px 5px rgba(255, 255, 255, 0.04), 0 3px 2px rgba(255, 255, 255, 0.07); --color-mktg-btn-shadow-hover-muted: rgb(255, 255, 255) 0 0 0 2px inset; --color-avatar-bg: rgba(255, 255, 255, 0.1); --color-avatar-border: rgba(240, 246, 252, 0.1); --color-avatar-stack-fade: #30363d; --color-avatar-stack-fade-more: #21262d; --color-avatar-child-shadow: -2px -2px 0 #0d1117; --color-topic-tag-border: rgba(0, 0, 0, 0); --color-counter-border: rgba(0, 0, 0, 0); --color-select-menu-backdrop-border: #484f58; --color-select-menu-tap-highlight: rgba(48, 54, 61, 0.5); --color-select-menu-tap-focus-bg: #0c2d6b; --color-overlay-shadow: 0 0 0 1px #30363d, 0 16px 32px rgba(1, 4, 9, 0.85); --color-header-text: var(--subtext2); --color-header-bg: @base; & when (@topbar =1) { // If topbar is enabled then make the topbar color different --color-header-bg: @mantle; } --color-header-divider: #8b949e; --color-header-logo: @text; --color-header-search-bg: @surface0; --color-header-search-border: @surface1; --color-sidenav-selected-bg: @surface1; --color-menu-bg-active: @surface2; --color-input-disabled-bg: rgba(110, 118, 129, 0); --color-timeline-badge-bg: @surface0; --color-ansi-black: #484f58; --color-ansi-black-bright: #6e7681; --color-ansi-white: #b1bac4; --color-ansi-white-bright: #ffffff; --color-ansi-gray: #6e7681; --color-ansi-red: #ff7b72; --color-ansi-red-bright: #ffa198; --color-ansi-green: #3fb950; --color-ansi-green-bright: #56d364; --color-ansi-yellow: #d29922; --color-ansi-yellow-bright: #e3b341; --color-ansi-blue: #58a6ff; --color-ansi-blue-bright: #79c0ff; --color-ansi-magenta: #bc8cff; --color-ansi-magenta-bright: #d2a8ff; --color-ansi-cyan: #39c5cf; --color-ansi-cyan-bright: #56d4dd; --color-btn-text: @text; --color-btn-bg: @surface0; --color-btn-border: transparent; --color-btn-shadow: 0 0 transparent; --color-btn-inset-shadow: 0 0 transparent; --color-btn-hover-bg: @surface1; --color-btn-hover-border: transparent; --color-btn-active-bg: @surface2; --color-btn-active-border: transparent; --color-btn-selected-bg: @surface2; --color-btn-focus-bg: #21262d; --color-btn-focus-border: #8b949e; --color-btn-focus-shadow: 0 0 0 3px rgba(139, 148, 158, 0.3); --color-btn-shadow-active: inset 0 0.15em 0.3em rgba(1, 4, 9, 0.15); --color-btn-shadow-input-focus: 0 0 0 0.2em rgba(31, 111, 235, 0.3); --color-btn-counter-bg: @surface2; #coloredButton(primary, @green); --color-btn-outline-text: #58a6ff; --color-btn-outline-hover-text: #58a6ff; --color-btn-outline-hover-bg: #30363d; --color-btn-outline-hover-border: rgba(240, 246, 252, 0.1); --color-btn-outline-hover-shadow: 0 1px 0 rgba(1, 4, 9, 0.1); --color-btn-outline-hover-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03); --color-btn-outline-hover-counter-bg: rgba(255, 255, 255, 0.2); --color-btn-outline-selected-text: #ffffff; --color-btn-outline-selected-bg: #0d419d; --color-btn-outline-selected-border: rgba(240, 246, 252, 0.1); --color-btn-outline-selected-shadow: 0 0 transparent; --color-btn-outline-disabled-text: @subtext0; --color-btn-outline-disabled-bg: @surface2; --color-btn-outline-disabled-counter-bg: rgba(31, 111, 235, 0.05); --color-btn-outline-focus-border: rgba(240, 246, 252, 0.1); --color-btn-outline-focus-shadow: 0 0 0 3px rgba(17, 88, 199, 0.4); --color-btn-outline-counter-bg: rgba(31, 111, 235, 0.1); #coloredButton(danger, @red); --color-underlinenav-icon: #6e7681; --color-underlinenav-border-hover: rgba(110, 118, 129, 0.4); --color-action-list-item-inline-divider: @surface2; --color-action-list-item-default-hover-bg: @surface0; --color-action-list-item-default-hover-border: rgba(0, 0, 0, 0); --color-action-list-item-default-active-bg: rgba(177, 186, 196, 0.2); --color-action-list-item-default-active-border: rgba(0, 0, 0, 0); --color-action-list-item-default-selected-bg: @surface1; --color-action-list-item-danger-hover-bg: rgba(248, 81, 73, 0.16); --color-action-list-item-danger-active-bg: rgba(248, 81, 73, 0.24); --color-action-list-item-danger-hover-text: #ff7b72; --color-switch-track-bg: #010409; --color-switch-track-border: #6e7681; --color-switch-track-checked-bg: rgba(31, 111, 235, 0.35); --color-switch-track-checked-hover-bg: rgba(31, 111, 235, 0.5); --color-switch-track-checked-active-bg: rgba(31, 111, 235, 0.65); --color-switch-track-checked-border: #58a6ff; --color-switch-knob-checked-bg: #1f6feb; --color-switch-knob-checked-disabled-bg: #484f58; --color-fg-default: @text; --color-fg-muted: @subtext1; --color-fg-subtle: @subtext1; --color-fg-on-emphasis: @base; --color-canvas-default: @base; --color-canvas-overlay: @mantle; --color-canvas-inset: @surface0; --color-canvas-subtle: @mantle; --color-border-default: @surface1; --color-border-muted: @surface0; --color-border-subtle: rgba(240, 246, 252, 0.1); --color-shadow-small: 0 0 transparent; --color-shadow-medium: 0 3px 6px @crust; --color-shadow-large: 0 8px 24px @crust; --color-shadow-extra-large: 0 12px 48px @crust; --color-neutral-emphasis-plus: @overlay0; --color-neutral-emphasis: @overlay2; --color-neutral-muted: rgba(110, 118, 129, 0.4); --color-neutral-subtle: rgba(110, 118, 129, 0.1); --color-accent-fg: @accent-color; --color-accent-emphasis: @accent-color; --color-accent-muted: fadeout(@accent-color, 60%); --color-accent-subtle: fadeout(@accent-color, 85%); --color-success-fg: @green; --color-success-emphasis: @green; --color-success-muted: rgba(46, 160, 67, 0.4); --color-success-subtle: rgba(46, 160, 67, 0.15); --color-attention-fg: @peach; --color-attention-emphasis: @peach; --color-attention-muted: rgba(187, 128, 9, 0.4); --color-attention-subtle: rgba(187, 128, 9, 0.15); --color-severe-fg: @maroon; --color-severe-emphasis: @maroon; --color-severe-muted: rgba(219, 109, 40, 0.4); --color-severe-subtle: rgba(219, 109, 40, 0.15); --color-danger-fg: @red; --color-danger-emphasis: @red; --color-danger-muted: rgba(248, 81, 73, 0.4); --color-danger-subtle: rgba(248, 81, 73, 0.15); --color-open-fg: @green; --color-open-emphasis: @green; --color-open-muted: rgba(46, 160, 67, 0.4); --color-open-subtle: rgba(46, 160, 67, 0.15); --color-closed-fg: @red; --color-closed-emphasis: @red; --color-closed-muted: rgba(248, 81, 73, 0.4); --color-closed-subtle: rgba(248, 81, 73, 0.15); --color-done-fg: @mauve; --color-done-emphasis: @mauve; --color-done-muted: rgba(163, 113, 247, 0.4); --color-done-subtle: rgba(163, 113, 247, 0.15); --color-sponsors-fg: @mauve; --color-sponsors-emphasis: @mauve; --color-sponsors-muted: rgba(219, 97, 162, 0.4); --color-sponsors-subtle: rgba(219, 97, 162, 0.15); --color-primer-fg-disabled: fadeout(@accent-color, 50%); --color-primer-canvas-backdrop: rgba(1, 4, 9, 0.8); --color-primer-canvas-sticky: rgba(13, 17, 23, 0.95); --color-primer-border-active: @red; --color-primer-border-contrast: rgba(255, 255, 255, 0.2); --color-primer-shadow-highlight: 0 0 transparent; --color-primer-shadow-inset: 0 0 transparent; --color-primer-shadow-focus: 0 0 0 3px #0c2d6b; --color-scale-black: #010409; --color-scale-white: #ffffff; --color-scale-gray-0: #f0f6fc; --color-scale-gray-1: #c9d1d9; --color-scale-gray-2: #b1bac4; --color-scale-gray-3: #8b949e; --color-scale-gray-4: #6e7681; --color-scale-gray-5: #484f58; --color-scale-gray-6: #30363d; --color-scale-gray-7: #21262d; --color-scale-gray-8: #161b22; --color-scale-gray-9: #0d1117; --color-scale-blue-0: #cae8ff; --color-scale-blue-1: #a5d6ff; --color-scale-blue-2: #79c0ff; --color-scale-blue-3: #58a6ff; --color-scale-blue-4: #388bfd; --color-scale-blue-5: #1f6feb; --color-scale-blue-6: #1158c7; --color-scale-blue-7: #0d419d; --color-scale-blue-8: #0c2d6b; --color-scale-blue-9: #051d4d; --color-scale-green-0: #aff5b4; --color-scale-green-1: #7ee787; --color-scale-green-2: #56d364; --color-scale-green-3: #3fb950; --color-scale-green-4: #2ea043; --color-scale-green-5: #238636; --color-scale-green-6: #196c2e; --color-scale-green-7: #0f5323; --color-scale-green-8: #033a16; --color-scale-green-9: #04260f; --color-scale-yellow-0: #f8e3a1; --color-scale-yellow-1: #f2cc60; --color-scale-yellow-2: #e3b341; --color-scale-yellow-3: #d29922; --color-scale-yellow-4: #bb8009; --color-scale-yellow-5: #9e6a03; --color-scale-yellow-6: #845306; --color-scale-yellow-7: #693e00; --color-scale-yellow-8: #4b2900; --color-scale-yellow-9: #341a00; --color-scale-orange-0: #ffdfb6; --color-scale-orange-1: #ffc680; --color-scale-orange-2: #ffa657; --color-scale-orange-3: #f0883e; --color-scale-orange-4: #db6d28; --color-scale-orange-5: #bd561d; --color-scale-orange-6: #9b4215; --color-scale-orange-7: #762d0a; --color-scale-orange-8: #5a1e02; --color-scale-orange-9: #3d1300; --color-scale-red-0: #ffdcd7; --color-scale-red-1: #ffc1ba; --color-scale-red-2: #ffa198; --color-scale-red-3: #ff7b72; --color-scale-red-4: #f85149; --color-scale-red-5: #da3633; --color-scale-red-6: #b62324; --color-scale-red-7: #8e1519; --color-scale-red-8: #67060c; --color-scale-red-9: #490202; --color-scale-purple-0: #eddeff; --color-scale-purple-1: #e2c5ff; --color-scale-purple-2: #d2a8ff; --color-scale-purple-3: #bc8cff; --color-scale-purple-4: #a371f7; --color-scale-purple-5: #8957e5; --color-scale-purple-6: #6e40c9; --color-scale-purple-7: #553098; --color-scale-purple-8: #3c1e70; --color-scale-purple-9: #271052; --color-scale-pink-0: #ffdaec; --color-scale-pink-1: #ffbedd; --color-scale-pink-2: #ff9bce; --color-scale-pink-3: #f778ba; --color-scale-pink-4: #db61a2; --color-scale-pink-5: #bf4b8a; --color-scale-pink-6: #9e3670; --color-scale-pink-7: #7d2457; --color-scale-pink-8: #5e103e; --color-scale-pink-9: #42062a; --color-scale-coral-0: #ffddd2; --color-scale-coral-1: #ffc2b2; --color-scale-coral-2: #ffa28b; --color-scale-coral-3: #f78166; --color-scale-coral-4: #ea6045; --color-scale-coral-5: #cf462d; --color-scale-coral-6: #ac3220; --color-scale-coral-7: #872012; --color-scale-coral-8: #640d04; --color-scale-coral-9: #460701; } --color-workflow-card-connector: @overlay0; --color-workflow-card-connector-bg: @overlay0; --color-workflow-card-connector-inactive: @surface1; --color-workflow-card-connector-inactive-bg: @surface1; --color-workflow-card-connector-highlight: @accent-color; --color-workflow-card-connector-highlight-bg: @accent-color; --color-workflow-card-bg: @surface1; --color-workflow-card-inactive-bg: @surface0; --color-workflow-card-header-shadow: #dc2286; --color-workflow-card-progress-complete-bg: fadeout(@blue, 85%); --color-workflow-card-progress-incomplete-bg: @surface1; --color-discussions-state-answered-icon: var(--color-scale-green-3); --color-bg-discussions-row-emoji-box: var(--color-scale-gray-6); --color-notifications-button-text: var(--color-scale-white); --color-notifications-button-hover-text: var(--color-scale-white); --color-notifications-button-hover-bg: var(--color-scale-blue-4); --color-notifications-row-read-bg: var(--color-canvas-default); --color-notifications-row-bg: var(--color-canvas-subtle); --color-icon-directory: @text; --color-checks-step-error-icon: var(--color-scale-red-4); --color-calendar-halloween-graph-day-L1-bg: #631c03; --color-calendar-halloween-graph-day-L2-bg: #bd561d; --color-calendar-halloween-graph-day-L3-bg: #fa7a18; --color-calendar-halloween-graph-day-L4-bg: #fddf68; --color-calendar-graph-day-bg: @surface0; --color-calendar-graph-day-border: transparent; /* These could do with a bit of refining */ --color-calendar-graph-day-L1-bg: spin(fade(@green, 40%), 15deg); --color-calendar-graph-day-L2-bg: spin(fade(@green, 60%), 10deg); --color-calendar-graph-day-L3-bg: spin(fade(@green, 80%), 5deg); --color-calendar-graph-day-L4-bg: @green; --color-calendar-graph-day-L1-border: transparent; --color-calendar-graph-day-L2-border: transparent; --color-calendar-graph-day-L3-border: transparent; --color-calendar-graph-day-L4-border: transparent; --color-user-mention-fg: var(--color-scale-yellow-0); --color-user-mention-bg: var(--color-scale-yellow-8); --color-text-white: @text; /* Buttons */ .btn-danger, .Button--danger { background: var(--color-btn-danger-bg); } /* search btn */ .header-search-button.placeholder { color: @text; } /* Issue tags */ .hx_IssueLabel { --text: @text; } .hx_IssueLabel not when (@lookup =latte) { --lightness-threshold: 0.453; --border-threshold: 0.96; --border-fadeout: max( 0, min( calc((var(--perceived-lightness) - var(--border-threshold)) * 100), 1 ) ); //color: hsl(0deg, 0%, calc(var(--lightness-switch) * 100%)) !important; color: var(--text) !important; background: rgb( var(--label-r), var(--label-g), var(--label-b) ) !important; border-color: hsla( var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) - 25) * 1%), var(--border-fadeout) ) !important; } .hx_IssueLabel when (@lookup =latte) { --lightness-threshold: 0.6; --background-fadeout: 0.18; --border-fadeout: 0.3; --lighten-by: calc( ((var(--lightness-threshold) - var(--perceived-lightness)) * 100) * var(--lightness-switch) ); color: hsl( var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%) ) !important; background: rgba( var(--label-r), var(--label-g), var(--label-b), var(--background-fadeout) ) !important; border-color: hsla( var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%), var(--border-fadeout) ) !important; } /* Labels */ .Label { color: var(--color-accent-fg); background-color: @surface0; border-color: transparent; } .Label--secondary { background-color: @surface0; color: @text; } .Label--success { color: @base; background-color: @green; } .Label--danger { background-color: var(--color-danger-emphasis); color: var(--color-btn-danger-text); } .timeline-comment-header .Label, .timeline-comment .Label { color: var(--color-fg-muted); } /* Search */ .header-search-input { color: @text !important; } .header-search-input::placeholder { color: @subtext1 !important; } /* Tags */ .topic-tag { --color-accent-fg: @blue; --color-accent-emphasis: @blue; --color-accent-muted: fadeout(@blue, 60%); --color-accent-subtle: fadeout(@blue, 85%); } /* Misc */ .col-md-8 { background-color: @base; } .kSmUFR[data-size="small"][data-no-visuals="true"] svg { color: @green; } .starred .starred-button-icon { color: @yellow; } /* Large notification */ .flash { background: @mantle; border-color: transparent; } /* Button Fix */ .color-bg-subtle { background-color: transparent !important; } .command-palette-details-dialog .color-bg-subtle { background-color: @surface0 !important; } /* Button selection Fix */ .navigation-item[aria-selected="true"] .color-fg-muted { color: @base !important; } /* Darker bg for new AppHeader */ .AppHeader { background: var(--color-header-bg); } /* Headers */ h1, h2, h3, h4, h5, h6 { color: @subtext1; } body, .markdown-body { & when (@usefont=1) { font-family: inter, sans-serif; } } #check-step-header-title { color: var(--color-checks-text-link) !important; } ::selection { background: @surface2 !important; } /* New change visibility box star and watcher preview buttons Fix */ .btn.color-fg-danger.cursor-default { color: var(--color-btn-danger-text) !important; background-color: var(--color-btn-danger-bg); } .btn.color-fg-danger.cursor-default:hover { background-color: var(--color-btn-danger-hover-bg); } .btn.color-fg-danger.cursor-default > svg.octicon { color: var(--color-btn-danger-text) !important; } /* New change visibility box danger buttons Fix */ :where( #repo-visibility-proceed-button-public, #repo-visibility-proceed-button-private ):not([data-next-stage]) { color: var(--color-btn-danger-text); background-color: var(--color-btn-danger-bg); } /* 2FA authentication box header Fix */ body.session-authentication div.Box-header { background-color: inherit; } /* Footer Logo Fix */ .footer-octicon > svg:nth-child(1) > path:nth-child(1) { fill: @text; } /* Footer text hover fix */ .footer nav.col-12 * { color: @subtext1 !important; } /* Notifications */ .notification-indicator .mail-status { background-image: none; background-color: @accent-color; } /* Progress bar */ .turbo-progress-bar { background-color: @accent-color; } } } @-moz-document regexp("https:\/\/notebooks\.githubusercontent\.com\/view\/ipynb.*") { :root { #catppuccin(@darkFlavor, @accentColor); } #catppuccin(@lookup, @accent) { @rosewater: @catppuccin[@@lookup][@rosewater]; @flamingo: @catppuccin[@@lookup][@flamingo]; @pink: @catppuccin[@@lookup][@pink]; @mauve: @catppuccin[@@lookup][@mauve]; @red: @catppuccin[@@lookup][@red]; @maroon: @catppuccin[@@lookup][@maroon]; @peach: @catppuccin[@@lookup][@peach]; @yellow: @catppuccin[@@lookup][@yellow]; @green: @catppuccin[@@lookup][@green]; @teal: @catppuccin[@@lookup][@teal]; @sky: @catppuccin[@@lookup][@sky]; @sapphire: @catppuccin[@@lookup][@sapphire]; @blue: @catppuccin[@@lookup][@blue]; @lavender: @catppuccin[@@lookup][@lavender]; @text: @catppuccin[@@lookup][@text]; @subtext1: @catppuccin[@@lookup][@subtext1]; @subtext0: @catppuccin[@@lookup][@subtext0]; @overlay2: @catppuccin[@@lookup][@overlay2]; @overlay1: @catppuccin[@@lookup][@overlay1]; @overlay0: @catppuccin[@@lookup][@overlay0]; @surface2: @catppuccin[@@lookup][@surface2]; @surface1: @catppuccin[@@lookup][@surface1]; @surface0: @catppuccin[@@lookup][@surface0]; @base: @catppuccin[@@lookup][@base]; @mantle: @catppuccin[@@lookup][@mantle]; @crust: @catppuccin[@@lookup][@crust]; @accent-color: @catppuccin[@@lookup][@@accent]; /* Colors */ --color-scale-black: #010409; --color-scale-white: #ffffff; --color-scale-gray-0: #f0f6fc; --color-scale-gray-1: #c9d1d9; --color-scale-gray-2: #b1bac4; --color-scale-gray-3: #8b949e; --color-scale-gray-4: #6e7681; --color-scale-gray-5: #484f58; --color-scale-gray-6: #30363d; --color-scale-gray-7: #21262d; --color-scale-gray-8: #161b22; --color-scale-gray-9: #0d1117; --color-scale-blue-0: #cae8ff; --color-scale-blue-1: #a5d6ff; --color-scale-blue-2: #79c0ff; --color-scale-blue-3: #58a6ff; --color-scale-blue-4: #388bfd; --color-scale-blue-5: #1f6feb; --color-scale-blue-6: #1158c7; --color-scale-blue-7: #0d419d; --color-scale-blue-8: #0c2d6b; --color-scale-blue-9: #051d4d; --color-scale-green-0: #aff5b4; --color-scale-green-1: #7ee787; --color-scale-green-2: #56d364; --color-scale-green-3: #3fb950; --color-scale-green-4: #2ea043; --color-scale-green-5: #238636; --color-scale-green-6: #196c2e; --color-scale-green-7: #0f5323; --color-scale-green-8: #033a16; --color-scale-green-9: #04260f; --color-scale-yellow-0: #f8e3a1; --color-scale-yellow-1: #f2cc60; --color-scale-yellow-2: #e3b341; --color-scale-yellow-3: #d29922; --color-scale-yellow-4: #bb8009; --color-scale-yellow-5: #9e6a03; --color-scale-yellow-6: #845306; --color-scale-yellow-7: #693e00; --color-scale-yellow-8: #4b2900; --color-scale-yellow-9: #341a00; --color-scale-orange-0: #ffdfb6; --color-scale-orange-1: #ffc680; --color-scale-orange-2: #ffa657; --color-scale-orange-3: #f0883e; --color-scale-orange-4: #db6d28; --color-scale-orange-5: #bd561d; --color-scale-orange-6: #9b4215; --color-scale-orange-7: #762d0a; --color-scale-orange-8: #5a1e02; --color-scale-orange-9: #3d1300; --color-scale-red-0: #ffdcd7; --color-scale-red-1: #ffc1ba; --color-scale-red-2: #ffa198; --color-scale-red-3: #ff7b72; --color-scale-red-4: #f85149; --color-scale-red-5: #da3633; --color-scale-red-6: #b62324; --color-scale-red-7: #8e1519; --color-scale-red-8: #67060c; --color-scale-red-9: #490202; --color-scale-purple-0: #eddeff; --color-scale-purple-1: #e2c5ff; --color-scale-purple-2: #d2a8ff; --color-scale-purple-3: #bc8cff; --color-scale-purple-4: #a371f7; --color-scale-purple-5: #8957e5; --color-scale-purple-6: #6e40c9; --color-scale-purple-7: #553098; --color-scale-purple-8: #3c1e70; --color-scale-purple-9: #271052; --color-scale-pink-0: #ffdaec; --color-scale-pink-1: #ffbedd; --color-scale-pink-2: #ff9bce; --color-scale-pink-3: #f778ba; --color-scale-pink-4: #db61a2; --color-scale-pink-5: #bf4b8a; --color-scale-pink-6: #9e3670; --color-scale-pink-7: #7d2457; --color-scale-pink-8: #5e103e; --color-scale-pink-9: #42062a; --color-scale-coral-0: #ffddd2; --color-scale-coral-1: #ffc2b2; --color-scale-coral-2: #ffa28b; --color-scale-coral-3: #f78166; --color-scale-coral-4: #ea6045; --color-scale-coral-5: #cf462d; --color-scale-coral-6: #ac3220; --color-scale-coral-7: #872012; --color-scale-coral-8: #640d04; --color-scale-coral-9: #460701; --jp-border-color0: var(--color-scale-gray-7); --jp-border-color1: var(--color-scale-gray-7); --jp-border-color2: var(--color-scale-gray-8); --jp-border-color3: var(--color-scale-gray-9); --jp-ui-font-color0: @text; --jp-ui-font-color1: fadeout(@text, 13%); --jp-ui-font-color2: fadeout(@text, 46%); --jp-ui-font-color3: fadeout(@text, 72%); --jp-ui-inverse-font-color0: @crust; --jp-ui-inverse-font-color1: fadeout(@crust, 20%); --jp-ui-inverse-font-color2: fadeout(@crust, 50%); --jp-ui-inverse-font-color3: fadeout(@crust, 70%); --jp-content-font-color0: @text; --jp-content-font-color1: @text; --jp-content-font-color2: fadeout(@text, 30%); --jp-content-font-color3: fadeout(@text, 50%); --jp-content-link-color: @sapphire; --jp-layout-color0: @base !important; --jp-layout-color1: var(--color-scale-gray-9); --jp-layout-color2: var(--color-scale-gray-8); --jp-layout-color3: var(--color-scale-gray-7); --jp-layout-color4: var(--color-scale-gray-6); --jp-inverse-layout-color0: var(--color-scale-white); --jp-inverse-layout-color1: var(--color-scale-white); --jp-inverse-layout-color2: var(--color-scale-gray-2); --jp-inverse-layout-color3: var(--color-scale-gray-4); --jp-inverse-layout-color4: var(--color-scale-gray-6); --jp-brand-color0: var(--color-scale-blue-7); --jp-brand-color1: var(--color-scale-blue-5); --jp-brand-color2: var(--color-scale-blue-3); --jp-brand-color3: var(--color-scale-blue-1); --jp-brand-color4: var(--color-scale-blue-0); --jp-accent-color0: var(--color-scale-green-7); --jp-accent-color1: var(--color-scale-green-5); --jp-accent-color2: var(--color-scale-green-3); --jp-accent-color3: var(--color-scale-green-1); --jp-warn-color0: var(--color-scale-orange-7); --jp-warn-color1: var(--color-scale-orange-5); --jp-warn-color2: var(--color-scale-orange-3); --jp-warn-color3: var(--color-scale-orange-1); --jp-error-color0: var(--color-scale-red-7); --jp-error-color1: var(--color-scale-red-5); --jp-error-color2: var(--color-scale-red-3); --jp-error-color3: var(--color-scale-red-1); --jp-success-color0: var(--color-scale-green-7); --jp-success-color1: var(--color-scale-green-5); --jp-success-color2: var(--color-scale-green-3); --jp-success-color3: var(--color-scale-green-1); --jp-info-color0: var(--color-scale-blue-7); --jp-info-color1: var(--color-scale-blue-5); --jp-info-color2: var(--color-scale-blue-3); --jp-info-color3: var(--color-scale-blue-1); --jp-cell-editor-border-color: var(--color-scale-gray-7); --jp-cell-editor-box-shadow: inset 0 0 2px var(--color-scale-blue-3); --jp-cell-prompt-not-active-font-color: fadeout(@text, 50%); --jp-cell-inprompt-font-color: var(--color-scale-blue-6); --jp-cell-outprompt-font-color: var(--color-scale-coral-6); --jp-notebook-multiselected-color: fadeout(@overlay2, 86%); --jp-rendermime-error-background: fadeout(@red, 82%); --jp-rendermime-table-row-background: var(--color-scale-gray-9); --jp-rendermime-table-row-hover-background: fadeout(@surface2, 86%); --jp-dialog-background: fadeout(@crust, 40%); --jp-toolbar-box-shadow: 0px 0px 2px 0px fadeout(@crust, 20%); --jp-input-box-shadow: inset 0 0 2px var(--color-scale-blue-3); --jp-input-background: var(--color-scale-gray-8); --jp-input-active-box-shadow-color: fadeout(@blue, 70%); --jp-editor-selected-focused-background: fadeout(@blue, 86%); --jp-mirror-editor-keyword-color: var(--color-scale-green-5); --jp-mirror-editor-atom-color: var(--color-scale-blue-3); --jp-mirror-editor-number-color: var(--color-scale-green-4); --jp-mirror-editor-def-color: var(--color-scale-blue-6); --jp-mirror-editor-variable-color: var(--color-scale-gray-3); --jp-mirror-editor-variable-2-color: var(--color-scale-blue-4); --jp-mirror-editor-variable-3-color: var(--color-scale-green-6); --jp-mirror-editor-punctuation-color: var(--color-scale-blue-4); --jp-mirror-editor-property-color: var(--color-scale-blue-4); --jp-mirror-editor-operator-color: @mauve; --jp-mirror-editor-comment-color: @subtext0; --jp-mirror-editor-string-color: @peach; --jp-mirror-editor-string-2-color: var(--color-scale-purple-3); --jp-mirror-editor-meta-color: @mauve; --jp-mirror-editor-qualifier-color: var(--color-scale-gray-5); --jp-mirror-editor-builtin-color: var(--color-scale-green-6); --jp-mirror-editor-bracket-color: var(--color-scale-gray-2); --jp-mirror-editor-tag-color: var(--color-scale-blue-7); --jp-mirror-editor-attribute-color: var(--color-scale-blue-7); --jp-mirror-editor-header-color: var(--color-scale-blue-5); --jp-mirror-editor-quote-color: var(--color-scale-green-3); --jp-mirror-editor-link-color: var(--color-scale-blue-7); --jp-mirror-editor-error-color: @red; --jp-mirror-editor-hr-color: var(--color-scale-gray-8); --jp-vega-background: var(--color-scale-gray-4); --jp-search-selected-match-background-color: @yellow; --jp-search-selected-match-color: @crust; --jp-icon-contrast-color0: var(--color-scale-purple-6); --jp-icon-contrast-color1: var(--color-scale-green-6); --jp-icon-contrast-color2: var(--color-scale-pink-6); --jp-icon-contrast-color3: var(--color-scale-blue-6); } }