8cfccfd837
Co-authored-by: rubyowo <perhaps-you-know@what-is.ml> Co-authored-by: Andreas Grafen <andreas@grafen.info> Co-authored-by: winston <hey@winston.sh> Co-authored-by: Carsten Kragelund <carsten@kragelund.me> Co-authored-by: Andreas Grafen <andreas@grafen.info> Co-authored-by: Alaina <68250402+alaidriel@users.noreply.github.com> Co-authored-by: jolheiser <john.olheiser@gmail.com>
1061 lines
41 KiB
CSS
1061 lines
41 KiB
CSS
/* ==UserStyle==
|
|
@name Github Catppuccin
|
|
@namespace github.com/catppuccin/userstyles/styles/github
|
|
@version 1.1.14
|
|
@description Soothing pastel theme for GitHub
|
|
@author Catppuccin
|
|
@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/github/catppuccin.user.css
|
|
@preprocessor stylus
|
|
@var select theme "Theme" ["Latte", "Frappe", "Macchiato", "Mocha*"]
|
|
@var select accent-color "Accent" ["Rosewater*", "Flamingo", "Pink", "Mauve", "Red", "Maroon", "Peach", "Yellow", "Green", "Teal", "Blue", "Sapphire", "Sky", "Lavender", "Gray"]
|
|
@var checkbox topbar "Topbar colors" 1
|
|
@var checkbox usefont "Use Inter font" 0
|
|
==/UserStyle== */
|
|
@-moz-document regexp("https:\/\/*github\.com") {
|
|
|
|
if (theme=="Latte") {
|
|
$type = light
|
|
$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
|
|
$shadow = $crust
|
|
}
|
|
|
|
else if (theme=="Frappe") {
|
|
$type = dark
|
|
$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
|
|
$shadow = $crust
|
|
}
|
|
|
|
else if (theme=="Macchiato") {
|
|
$type = dark
|
|
$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
|
|
$shadow = $crust
|
|
}
|
|
|
|
else if (theme=="Mocha") {
|
|
$type = dark
|
|
$rosewater = #f5e0dc
|
|
$flamingo = #f2cdcd
|
|
$pink = #f5c2e7
|
|
$mauve = #cba6f7
|
|
$red = #f38ba8
|
|
$maroon = #eba0ac
|
|
$peach = #fab387
|
|
$yellow = #f9e2af
|
|
$green = #a6e3a1
|
|
$teal = #94e2d5
|
|
$sky = #89dceb
|
|
$sapphire = #74c7ec
|
|
$lavender = #b4befe
|
|
$blue = #89b4fa
|
|
$text = #cdd6f4
|
|
$subtext1 = #bac2de
|
|
$subtext0 = #a6adc8
|
|
$overlay2 = #9399b2
|
|
$overlay1 = #7f849c
|
|
$overlay0 = #6c7086
|
|
$surface2 = #585b70
|
|
$surface1 = #45475a
|
|
$surface0 = #313244
|
|
$base = #1e1e2e
|
|
$mantle = #181825
|
|
$crust = #11111b
|
|
$shadow = $crust
|
|
}
|
|
|
|
if (accent-color=="Rosewater") {
|
|
$accent-color = $rosewater;
|
|
} else if (accent-color=="Flamingo") {
|
|
$accent-color = $flamingo
|
|
} else if (accent-color=="Pink") {
|
|
$accent-color = $pink
|
|
} else if (accent-color=="Mauve") {
|
|
$accent-color = $mauve
|
|
} else if (accent-color=="Red") {
|
|
$accent-color = $red
|
|
} else if (accent-color=="Maroon") {
|
|
$accent-color = $maroon
|
|
} else if (accent-color=="Peach") {
|
|
$accent-color = $peach
|
|
} else if (accent-color=="Yellow") {
|
|
$accent-color = $yellow
|
|
} else if (accent-color=="Green") {
|
|
$accent-color = $green
|
|
} else if (accent-color=="Teal") {
|
|
$accent-color = $teal
|
|
} else if (accent-color=="Blue") {
|
|
$accent-color = $blue
|
|
} else if (accent-color=="Sapphire") {
|
|
$accent-color = $sapphire
|
|
} else if (accent-color=="Sky") {
|
|
$accent-color = $sky
|
|
} else if (accent-color=="Lavender") {
|
|
$accent-color = $lavender
|
|
} else if (accent-color=="Gray") {
|
|
$accent-color = $subtext0
|
|
}
|
|
/* Functions */
|
|
hoverColor(col) {
|
|
return blend(alpha(col, 0.7), $text)
|
|
}
|
|
|
|
activeColor(col) {
|
|
return blend(alpha(col, 0.5), $text)
|
|
}
|
|
|
|
disabledColor(col) {
|
|
return blend(alpha(col, 0.4), $base)
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@-moz-document regexp("https:\/\/(gist\.)*github\.com(?!\/(marketplace|organizations\/plan)).*") {
|
|
|
|
[data-color-mode="light"][data-light-theme*="dark"],
|
|
[data-color-mode="light"][data-light-theme*="light"],
|
|
[data-color-mode="dark"][data-dark-theme*="dark"],
|
|
[data-color-mode="dark"][data-dark-theme*="light"],
|
|
[data-color-mode="auto"][data-dark-theme*="dark"],
|
|
[data-color-mode="auto"][data-dark-theme*="light"] {
|
|
|
|
&, & body {
|
|
color-scheme: $type;
|
|
|
|
--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: alpha($green, 0.3);
|
|
--color-diff-blob-addition-line-bg: alpha($green, 0.15);
|
|
--color-diff-blob-addition-word-bg: alpha($green, 0.3);
|
|
--color-diff-blob-deletion-num-text: $text;
|
|
--color-diff-blob-deletion-fg: $text;
|
|
--color-diff-blob-deletion-num-bg: alpha($red, 0.3);
|
|
--color-diff-blob-deletion-line-bg: alpha($red, 0.15);
|
|
--color-diff-blob-deletion-word-bg: alpha($red, 0.3);
|
|
--color-diff-blob-hunk-num-bg: alpha($blue, 0.4);
|
|
--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: alpha($red, 0.15);
|
|
--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: alpha($red, 0.4);
|
|
--color-prettylights-syntax-markup-inserted-text: $text;
|
|
--color-prettylights-syntax-markup-inserted-bg: alpha($green, 0.4);
|
|
--color-prettylights-syntax-markup-changed-text: $text;
|
|
--color-prettylights-syntax-markup-changed-bg: alpha($yellow, 0.4);
|
|
--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: $accent-color;
|
|
--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: $shadow;
|
|
--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: alpha($maroon, 0.15);
|
|
--color-checks-logline-warning-text: $subtext1;
|
|
--color-checks-logline-warning-num-text: $peach;
|
|
--color-checks-logline-warning-bg: alpha($peach, 0.15);
|
|
--color-checks-logline-command-text: $blue;
|
|
--color-checks-logline-section-text: $green;
|
|
if ($type == "dark") {
|
|
--color-checks-ansi-black: $surface1;
|
|
--color-checks-ansi-black-bright: $surface2;
|
|
--color-checks-ansi-white: $subtext1;
|
|
--color-checks-ansi-white-bright: $subtext0;
|
|
} else {
|
|
--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);
|
|
if (topbar) {
|
|
--color-header-bg: $mantle;
|
|
} else {
|
|
--color-header-bg: $base;
|
|
}
|
|
--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;
|
|
--color-btn-primary-text: $base;
|
|
--color-btn-primary-bg: $green;
|
|
--color-btn-primary-border: transparent;
|
|
--color-btn-primary-shadow: 0 0 transparent;
|
|
--color-btn-primary-inset-shadow: 0 0 transparent;
|
|
--color-btn-primary-hover-bg: hoverColor($green);
|
|
--color-btn-primary-hover-border: rgba(240, 246, 252, 0.1);
|
|
--color-btn-primary-selected-bg: activeColor($green);
|
|
--color-btn-primary-selected-shadow: 0 0 transparent;
|
|
--color-btn-primary-disabled-text: $crust;
|
|
--color-btn-primary-disabled-bg: disabledColor($green);
|
|
--color-btn-primary-disabled-border: transparent;
|
|
--color-btn-primary-focus-bg: #238636;
|
|
--color-btn-primary-focus-border: rgba(240, 246, 252, 0.1);
|
|
--color-btn-primary-focus-shadow: 0 0 0 3px rgba(46, 164, 79, 0.4);
|
|
--color-btn-primary-icon: $base;
|
|
--color-btn-primary-counter-bg: rgba(255, 255, 255, 0.2);
|
|
--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);
|
|
--color-btn-danger-text: $base;
|
|
--color-btn-danger-bg: $red;
|
|
--color-btn-danger-hover-text: $base;
|
|
--color-btn-danger-hover-bg: hoverColor($red);
|
|
--color-btn-danger-hover-border: transparent;
|
|
--color-btn-danger-hover-shadow: 0 0 transparent;
|
|
--color-btn-danger-hover-inset-shadow: 0 0 transparent;
|
|
--color-btn-danger-hover-icon: $base;
|
|
--color-btn-danger-hover-counter-bg: rgba(255, 255, 255, 0.2);
|
|
--color-btn-danger-selected-text: $base;
|
|
--color-btn-danger-selected-bg: activeColor($red);
|
|
--color-btn-danger-selected-border: transparent;
|
|
--color-btn-danger-selected-shadow: 0 0 transparent;
|
|
--color-btn-danger-disabled-text: $crust;
|
|
--color-btn-danger-disabled-bg: disabledColor($red);
|
|
--color-btn-danger-disabled-counter-bg: rgba(218, 54, 51, 0.05);
|
|
--color-btn-danger-focus-border: #f85149;
|
|
--color-btn-danger-focus-shadow: 0 0 0 3px rgba(248, 81, 73, 0.4);
|
|
--color-btn-danger-counter-bg: rgba(218, 54, 51, 0.1);
|
|
--color-btn-danger-icon: #f85149;
|
|
--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 $shadow;
|
|
--color-shadow-large: 0 8px 24px $shadow;
|
|
--color-shadow-extra-large: 0 12px 48px $shadow;
|
|
--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: alpha($accent-color, 0.4);
|
|
--color-accent-subtle: alpha($accent-color, 0.15);
|
|
--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: alpha($accent-color, .5);
|
|
--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;
|
|
}
|
|
}
|
|
|
|
|
|
[data-color-mode="light"][data-light-theme*="dark"],
|
|
[data-color-mode="light"][data-light-theme*="light"],
|
|
[data-color-mode="dark"][data-dark-theme*="dark"],
|
|
[data-color-mode="dark"][data-dark-theme*="light"],
|
|
[data-color-mode="auto"][data-dark-theme*="dark"],
|
|
[data-color-mode="auto"][data-dark-theme*="light"] {
|
|
--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: alpha($blue, 0.15);
|
|
--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(rgba($green, 40%), 15deg);
|
|
--color-calendar-graph-day-L2-bg: spin(rgba($green, 60%), 10deg);
|
|
--color-calendar-graph-day-L3-bg: spin(rgba($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)
|
|
}
|
|
|
|
/* Issue tags */
|
|
.hx_IssueLabel {
|
|
--text: $text;
|
|
}
|
|
if ($type == light) { /* Maybe we could make a custom algorithm that converts the colors to be more catppuccin like? */
|
|
@css {
|
|
.hx_IssueLabel {
|
|
--lightness-threshold: 0.453;
|
|
--border-threshold: 0.96;
|
|
--border-alpha: 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-alpha)) !important;
|
|
}
|
|
}
|
|
} else {
|
|
@css {
|
|
.hx_IssueLabel {
|
|
--lightness-threshold: 0.6;
|
|
--background-alpha: 0.18;
|
|
--border-alpha: 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-alpha)) !important;
|
|
border-color: hsla(var(--label-h), calc(var(--label-s) * 1%), calc((var(--label-l) + var(--lighten-by)) * 1%), var(--border-alpha)) !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: alpha($blue, 0.4);
|
|
--color-accent-subtle: alpha($blue, 0.15);
|
|
}
|
|
|
|
/* Misc */
|
|
.col-md-8 {
|
|
background-color: $base;
|
|
}
|
|
|
|
/* 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
|
|
}
|
|
|
|
if (usefont) {
|
|
body,
|
|
.markdown-body {
|
|
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;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
@-moz-document regexp("https:\/\/notebooks\.githubusercontent\.com\/view\/ipynb.*") {
|
|
|
|
:root {
|
|
/* 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: alpha($text, 0.87);
|
|
--jp-ui-font-color2: alpha($text, 0.54);
|
|
--jp-ui-font-color3: alpha($text, 0.38);
|
|
--jp-ui-inverse-font-color0: $crust;
|
|
--jp-ui-inverse-font-color1: alpha($crust, 0.80);
|
|
--jp-ui-inverse-font-color2: alpha($crust, 0.50);
|
|
--jp-ui-inverse-font-color3: alpha($crust, 0.30);
|
|
--jp-content-font-color0: $text;
|
|
--jp-content-font-color1: $text;
|
|
--jp-content-font-color2: alpha($text, 0.70);
|
|
--jp-content-font-color3: alpha($text, 0.50);
|
|
--jp-content-link-color: var(--color-scale-blue-3);
|
|
--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: alpha($text, 0.5);
|
|
--jp-cell-inprompt-font-color: var(--color-scale-blue-6);
|
|
--jp-cell-outprompt-font-color: var(--color-scale-coral-6);
|
|
--jp-notebook-multiselected-color: alpha($overlay2, 0.24);
|
|
--jp-rendermime-error-background: alpha($red, 0.28);
|
|
--jp-rendermime-table-row-background: var(--color-scale-gray-9);
|
|
--jp-rendermime-table-row-hover-background: alpha($surface2, 0.24);
|
|
--jp-dialog-background: alpha($crust, 0.6);
|
|
--jp-toolbar-box-shadow: 0px 0px 2px 0px alpha($crust, 0.8);
|
|
--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: alpha($blue, 0.3);
|
|
--jp-editor-selected-focused-background: alpha($blue, 0.24);
|
|
--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);
|
|
}
|
|
|
|
} |