From e42b21162fda1b6280521cde8fcb35754ba5f565 Mon Sep 17 00:00:00 2001 From: Sangelo Date: Thu, 17 Oct 2024 17:42:26 +0200 Subject: [PATCH] [a] add new gitpot homepage variables to css themes --- theme-catppuccin-auto.css | 4 + theme-catppuccin-frappe-peach.css | 667 +++++++++++++++--------------- theme-catppuccin-latte-peach.css | 653 ++++++++++++++--------------- theme-gitea-auto.css | 4 + theme-gitea-dark.css | 482 ++++++++++----------- theme-gitea-light.css | 478 ++++++++++----------- theme-gitpot-auto.css | 6 +- theme-gitpot-dark.css | 72 ++-- theme-gitpot-light.css | 98 +++-- 9 files changed, 1264 insertions(+), 1200 deletions(-) diff --git a/theme-catppuccin-auto.css b/theme-catppuccin-auto.css index 3457e65..fb19c16 100644 --- a/theme-catppuccin-auto.css +++ b/theme-catppuccin-auto.css @@ -1,2 +1,6 @@ @import "theme-catppuccin-latte-peach.css"; @import "theme-catppuccin-frappe-peach.css" (prefers-color-scheme: dark); + +/* gitpot homepage */ +@import "vars-light.css"; +@import "vars-dark.css" (prefers-color-scheme: dark); diff --git a/theme-catppuccin-frappe-peach.css b/theme-catppuccin-frappe-peach.css index ae1016f..3f46a16 100644 --- a/theme-catppuccin-frappe-peach.css +++ b/theme-catppuccin-frappe-peach.css @@ -1,186 +1,186 @@ :root { - color-scheme: dark; - --is-dark-theme: true; - accent-color: #ef9f76; - --color-primary: #ef9f76; - --color-primary-contrast: #232634; - --color-primary-dark-1: #ed9568; - --color-primary-dark-2: #ec8c5b; - --color-primary-dark-3: #ea824d; - --color-primary-dark-4: #e9793f; - --color-primary-dark-5: #e76f32; - --color-primary-dark-6: #e56524; - --color-primary-dark-7: #e05d1a; - --color-primary-light-1: #f1a984; - --color-primary-light-2: #f2b291; - --color-primary-light-3: #f4bc9f; - --color-primary-light-4: #f5c5ad; - --color-primary-light-5: #f7cfbb; - --color-primary-light-6: #f9d9c8; - --color-primary-light-7: #fae2d6; - --color-primary-alpha-10: rgba(239, 159, 118, 0.1); - --color-primary-alpha-20: rgba(239, 159, 118, 0.2); - --color-primary-alpha-30: rgba(239, 159, 118, 0.3); - --color-primary-alpha-40: rgba(239, 159, 118, 0.4); - --color-primary-alpha-50: rgba(239, 159, 118, 0.5); - --color-primary-alpha-60: rgba(239, 159, 118, 0.6); - --color-primary-alpha-70: rgba(239, 159, 118, 0.7); - --color-primary-alpha-80: rgba(239, 159, 118, 0.8); - --color-primary-alpha-90: rgba(239, 159, 118, 0.9); - --color-secondary: #51576d; - --color-secondary-dark-1: #474c62; - --color-secondary-dark-2: #4e536b; - --color-secondary-dark-3: #545a74; - --color-secondary-dark-4: #5b607c; - --color-secondary-dark-5: #616785; - --color-secondary-dark-6: #686e8e; - --color-secondary-dark-7: #6f7696; - --color-secondary-dark-8: #787e9c; - --color-secondary-dark-9: #8187a3; - --color-secondary-dark-10: #8a8fa9; - --color-secondary-dark-11: #9397b0; - --color-secondary-dark-12: #9ba0b6; - --color-secondary-dark-13: #a4a8bd; - --color-secondary-light-1: #3b3e50; - --color-secondary-light-2: #343747; - --color-secondary-light-3: #2e303e; - --color-secondary-light-4: #272a36; - --color-secondary-alpha-10: rgba(65, 69, 89, 0.1); - --color-secondary-alpha-20: rgba(65, 69, 89, 0.2); - --color-secondary-alpha-30: rgba(65, 69, 89, 0.3); - --color-secondary-alpha-40: rgba(65, 69, 89, 0.4); - --color-secondary-alpha-50: rgba(65, 69, 89, 0.5); - --color-secondary-alpha-60: rgba(65, 69, 89, 0.6); - --color-secondary-alpha-70: rgba(65, 69, 89, 0.7); - --color-secondary-alpha-80: rgba(65, 69, 89, 0.8); - --color-secondary-alpha-90: rgba(65, 69, 89, 0.9); - /* colors */ - --color-red: #e78284; - --color-orange: #ef9f76; - --color-yellow: #e5c890; - --color-olive: #a6d189; - --color-green: #a6d189; - --color-teal: #81c8be; - --color-blue: #8caaee; - --color-violet: #babbf1; - --color-purple: #ca9ee6; - --color-pink: #f4b8e4; - --color-brown: #eebebe; - --color-grey: #949cbb; - --color-black: #292c3c; - /* light variants - produced via Sass scale-color(color, $lightness: -10%) */ - --color-red-light: #df575a; - --color-orange-light: #ea7f48; - --color-yellow-light: #dbb467; - --color-olive-light: #8ac364; - --color-green-light: #8ac364; - --color-teal-light: #5db9ac; - --color-blue-light: #6089e7; - --color-violet-light: #9091e8; - --color-purple-light: #b475dc; - --color-pink-light: #ed8cd3; - --color-brown-light: #e39696; - --color-grey-light: #757fa7; - --color-black-light: #14161e; - /* other colors */ - --color-gold: #f2d5cf; - --color-white: #c6d0f5; - --color-diff-removed-word-bg: rgba(231, 130, 132, 0.15); - --color-diff-added-word-bg: rgba(166, 209, 137, 0.15); - --color-diff-removed-row-bg: rgba(231, 130, 132, 0.07); - --color-diff-moved-row-bg: rgba(229, 200, 144, 0.07); - --color-diff-added-row-bg: rgba(166, 209, 137, 0.07); - --color-diff-removed-row-border: rgba(231, 130, 132, 0.07); - --color-diff-moved-row-border: rgba(229, 200, 144, 0.07); - --color-diff-added-row-border: rgba(166, 209, 137, 0.07); - --color-diff-inactive: #949cbb; - --color-error-border: #e78284; - --color-error-bg: #e78284; - --color-error-bg-active: #e36d6f; - --color-error-bg-hover: #df575a; - --color-error-text: #232634; - --color-success-border: #8ac364; - --color-success-bg: #a6d189; - --color-success-text: #232634; - --color-warning-border: #dbb467; - --color-warning-bg: #e5c890; - --color-warning-text: #232634; - --color-info-border: #6089e7; - --color-info-bg: #232634; - --color-info-text: #c6d0f5; - --color-red-badge: #df575a; - --color-red-badge-bg: #232634; - --color-red-badge-hover-bg: #e36d6f; - --color-green-badge: #a6d189; - --color-green-badge-bg: #a6d189; - --color-green-badge-hover-bg: #98ca77; - --color-yellow-badge: #e5c890; - --color-yellow-badge-bg: #232634; - --color-yellow-badge-hover-bg: #e0be7b; - --color-orange-badge: #ef9f76; - --color-orange-badge-bg: #232634; - --color-orange-badge-hover-bg: #ec8f5f; - --color-git: #ef9f76; - /* target-based colors */ - --color-body: #232634; - --color-box-header: #292c3c; - --color-box-body: #292c3c; - --color-box-body-highlight: #414559; - --color-text-dark: #a5adce; - --color-text: #c6d0f5; - --color-text-light: #b5bfe2; - --color-text-light-1: #b5bfe2; - --color-text-light-2: #b5bfe2; - --color-text-light-3: #b5bfe2; - --color-footer: #292c3c; - --color-timeline: #414559; - --color-input-text: #c6d0f5; - --color-input-background: #414559; - --color-input-toggle-background: #414559; - --color-input-border: #51576d; - --color-input-border-hover: #626880; - --color-nav-bg: #292c3c; - --color-nav-hover-bg: #414559; - --color-navbar: #292c3c; - --color-navbar-transparent: rgba(35, 38, 52, 0); - --color-light: rgba(98, 104, 128, 0.3); - --color-light-mimic-enabled: rgba( - 0, - 0, - 0, - calc(40 / 255 * 222 / 255 / var(--opacity-disabled)) - ); - --color-light-border: #626880; - --color-hover: rgba(115, 121, 148, 0.1); - --color-active: rgba(198, 208, 245, 0.1); - --color-menu: #414559; - --color-card: #414559; - --color-markup-table-row: rgba(198, 208, 245, 0.02); - --color-markup-code-block: rgba(198, 208, 245, 0.05); - --color-button: #414559; - --color-code-bg: #303446; - --color-code-sidebar-bg: #414559; - --color-shadow: rgba(35, 38, 52, 0.1); - --color-secondary-bg: #414559; - --color-text-focus: #c6d0f5; - --color-expand-button: #626880; - --color-placeholder-text: #626880; - --color-editor-line-highlight: var(--color-primary-light-5); - --color-project-board-bg: var(--color-secondary-light-2); - /* gitea source code: */ - /* should ideally be --color-text-dark, see go-gitea/gitea#15651 */ - --color-caret: var(--color-text); - --color-reaction-bg: rgba(198, 208, 245, 0.07); - --color-reaction-active-bg: var(--color-primary-alpha-40); - --color-header-wrapper: #292c3c; - --color-header-wrapper-transparent: rgba(41, 44, 60, 0); - --color-label-text: #232634; - --color-label-bg: #ef9f76; - --color-label-hover-bg: #ec8c5b; - --color-label-active-bg: #ed9568; - --color-accent: var(--color-primary-light-1); - --color-small-accent: var(--color-primary-light-5); - --color-active-line: #51576d; + color-scheme: dark; + --is-dark-theme: true; + accent-color: #ef9f76; + --color-primary: #ef9f76; + --color-primary-contrast: #232634; + --color-primary-dark-1: #ed9568; + --color-primary-dark-2: #ec8c5b; + --color-primary-dark-3: #ea824d; + --color-primary-dark-4: #e9793f; + --color-primary-dark-5: #e76f32; + --color-primary-dark-6: #e56524; + --color-primary-dark-7: #e05d1a; + --color-primary-light-1: #f1a984; + --color-primary-light-2: #f2b291; + --color-primary-light-3: #f4bc9f; + --color-primary-light-4: #f5c5ad; + --color-primary-light-5: #f7cfbb; + --color-primary-light-6: #f9d9c8; + --color-primary-light-7: #fae2d6; + --color-primary-alpha-10: rgba(239, 159, 118, 0.1); + --color-primary-alpha-20: rgba(239, 159, 118, 0.2); + --color-primary-alpha-30: rgba(239, 159, 118, 0.3); + --color-primary-alpha-40: rgba(239, 159, 118, 0.4); + --color-primary-alpha-50: rgba(239, 159, 118, 0.5); + --color-primary-alpha-60: rgba(239, 159, 118, 0.6); + --color-primary-alpha-70: rgba(239, 159, 118, 0.7); + --color-primary-alpha-80: rgba(239, 159, 118, 0.8); + --color-primary-alpha-90: rgba(239, 159, 118, 0.9); + --color-secondary: #51576d; + --color-secondary-dark-1: #474c62; + --color-secondary-dark-2: #4e536b; + --color-secondary-dark-3: #545a74; + --color-secondary-dark-4: #5b607c; + --color-secondary-dark-5: #616785; + --color-secondary-dark-6: #686e8e; + --color-secondary-dark-7: #6f7696; + --color-secondary-dark-8: #787e9c; + --color-secondary-dark-9: #8187a3; + --color-secondary-dark-10: #8a8fa9; + --color-secondary-dark-11: #9397b0; + --color-secondary-dark-12: #9ba0b6; + --color-secondary-dark-13: #a4a8bd; + --color-secondary-light-1: #3b3e50; + --color-secondary-light-2: #343747; + --color-secondary-light-3: #2e303e; + --color-secondary-light-4: #272a36; + --color-secondary-alpha-10: rgba(65, 69, 89, 0.1); + --color-secondary-alpha-20: rgba(65, 69, 89, 0.2); + --color-secondary-alpha-30: rgba(65, 69, 89, 0.3); + --color-secondary-alpha-40: rgba(65, 69, 89, 0.4); + --color-secondary-alpha-50: rgba(65, 69, 89, 0.5); + --color-secondary-alpha-60: rgba(65, 69, 89, 0.6); + --color-secondary-alpha-70: rgba(65, 69, 89, 0.7); + --color-secondary-alpha-80: rgba(65, 69, 89, 0.8); + --color-secondary-alpha-90: rgba(65, 69, 89, 0.9); + /* colors */ + --color-red: #e78284; + --color-orange: #ef9f76; + --color-yellow: #e5c890; + --color-olive: #a6d189; + --color-green: #a6d189; + --color-teal: #81c8be; + --color-blue: #8caaee; + --color-violet: #babbf1; + --color-purple: #ca9ee6; + --color-pink: #f4b8e4; + --color-brown: #eebebe; + --color-grey: #949cbb; + --color-black: #292c3c; + /* light variants - produced via Sass scale-color(color, $lightness: -10%) */ + --color-red-light: #df575a; + --color-orange-light: #ea7f48; + --color-yellow-light: #dbb467; + --color-olive-light: #8ac364; + --color-green-light: #8ac364; + --color-teal-light: #5db9ac; + --color-blue-light: #6089e7; + --color-violet-light: #9091e8; + --color-purple-light: #b475dc; + --color-pink-light: #ed8cd3; + --color-brown-light: #e39696; + --color-grey-light: #757fa7; + --color-black-light: #14161e; + /* other colors */ + --color-gold: #f2d5cf; + --color-white: #c6d0f5; + --color-diff-removed-word-bg: rgba(231, 130, 132, 0.15); + --color-diff-added-word-bg: rgba(166, 209, 137, 0.15); + --color-diff-removed-row-bg: rgba(231, 130, 132, 0.07); + --color-diff-moved-row-bg: rgba(229, 200, 144, 0.07); + --color-diff-added-row-bg: rgba(166, 209, 137, 0.07); + --color-diff-removed-row-border: rgba(231, 130, 132, 0.07); + --color-diff-moved-row-border: rgba(229, 200, 144, 0.07); + --color-diff-added-row-border: rgba(166, 209, 137, 0.07); + --color-diff-inactive: #949cbb; + --color-error-border: #e78284; + --color-error-bg: #e78284; + --color-error-bg-active: #e36d6f; + --color-error-bg-hover: #df575a; + --color-error-text: #232634; + --color-success-border: #8ac364; + --color-success-bg: #a6d189; + --color-success-text: #232634; + --color-warning-border: #dbb467; + --color-warning-bg: #e5c890; + --color-warning-text: #232634; + --color-info-border: #6089e7; + --color-info-bg: #232634; + --color-info-text: #c6d0f5; + --color-red-badge: #df575a; + --color-red-badge-bg: #232634; + --color-red-badge-hover-bg: #e36d6f; + --color-green-badge: #a6d189; + --color-green-badge-bg: #a6d189; + --color-green-badge-hover-bg: #98ca77; + --color-yellow-badge: #e5c890; + --color-yellow-badge-bg: #232634; + --color-yellow-badge-hover-bg: #e0be7b; + --color-orange-badge: #ef9f76; + --color-orange-badge-bg: #232634; + --color-orange-badge-hover-bg: #ec8f5f; + --color-git: #ef9f76; + /* target-based colors */ + --color-body: #232634; + --color-box-header: #292c3c; + --color-box-body: #292c3c; + --color-box-body-highlight: #414559; + --color-text-dark: #a5adce; + --color-text: #c6d0f5; + --color-text-light: #b5bfe2; + --color-text-light-1: #b5bfe2; + --color-text-light-2: #b5bfe2; + --color-text-light-3: #b5bfe2; + --color-footer: #292c3c; + --color-timeline: #414559; + --color-input-text: #c6d0f5; + --color-input-background: #414559; + --color-input-toggle-background: #414559; + --color-input-border: #51576d; + --color-input-border-hover: #626880; + --color-nav-bg: #292c3c; + --color-nav-hover-bg: #414559; + --color-navbar: #292c3c; + --color-navbar-transparent: rgba(35, 38, 52, 0); + --color-light: rgba(98, 104, 128, 0.3); + --color-light-mimic-enabled: rgba( + 0, + 0, + 0, + calc(40 / 255 * 222 / 255 / var(--opacity-disabled)) + ); + --color-light-border: #626880; + --color-hover: rgba(115, 121, 148, 0.1); + --color-active: rgba(198, 208, 245, 0.1); + --color-menu: #414559; + --color-card: #414559; + --color-markup-table-row: rgba(198, 208, 245, 0.02); + --color-markup-code-block: rgba(198, 208, 245, 0.05); + --color-button: #414559; + --color-code-bg: #303446; + --color-code-sidebar-bg: #414559; + --color-shadow: rgba(35, 38, 52, 0.1); + --color-secondary-bg: #414559; + --color-text-focus: #c6d0f5; + --color-expand-button: #626880; + --color-placeholder-text: #626880; + --color-editor-line-highlight: var(--color-primary-light-5); + --color-project-board-bg: var(--color-secondary-light-2); + /* gitea source code: */ + /* should ideally be --color-text-dark, see go-gitea/gitea#15651 */ + --color-caret: var(--color-text); + --color-reaction-bg: rgba(198, 208, 245, 0.07); + --color-reaction-active-bg: var(--color-primary-alpha-40); + --color-header-wrapper: #292c3c; + --color-header-wrapper-transparent: rgba(41, 44, 60, 0); + --color-label-text: #232634; + --color-label-bg: #ef9f76; + --color-label-hover-bg: #ec8c5b; + --color-label-active-bg: #ed9568; + --color-accent: var(--color-primary-light-1); + --color-small-accent: var(--color-primary-light-5); + --color-active-line: #51576d; } /* invert emojis that are hard to read otherwise */ @@ -191,623 +191,632 @@ .emoji[aria-label="ON! arrow"], .emoji[aria-label="SOON arrow"], .emoji[aria-label="heavy dollar sign"], -.emoji[aria-label=copyright], -.emoji[aria-label=registered], +.emoji[aria-label="copyright"], +.emoji[aria-label="registered"], .emoji[aria-label="trade mark"], -.emoji[aria-label=multiply], -.emoji[aria-label=plus], -.emoji[aria-label=minus], -.emoji[aria-label=divide], +.emoji[aria-label="multiply"], +.emoji[aria-label="plus"], +.emoji[aria-label="minus"], +.emoji[aria-label="divide"], .emoji[aria-label="curly loop"], .emoji[aria-label="double curly loop"], .emoji[aria-label="wavy dash"], .emoji[aria-label="paw prints"], .emoji[aria-label="musical note"], .emoji[aria-label="musical notes"] { - filter: invert(100%) hue-rotate(180deg); + filter: invert(100%) hue-rotate(180deg); } -.ui.ui.ui.button:not(.inverted, .basic).primary, .ui.ui.ui.button:not(.inverted, .basic).green, .ui.ui.ui.button:not(.inverted, .basic).red, .ui.ui.ui.button:not(.inverted, .basic).teal, +.ui.ui.ui.button:not(.inverted, .basic).primary, +.ui.ui.ui.button:not(.inverted, .basic).green, +.ui.ui.ui.button:not(.inverted, .basic).red, +.ui.ui.ui.button:not(.inverted, .basic).teal, .ui.ui.ui.label:not(.inverted, .basic).primary, .ui.ui.ui.label:not(.inverted, .basic).green, .ui.ui.ui.label:not(.inverted, .basic).red, .ui.ui.ui.label:not(.inverted, .basic).teal { - color: #232634; + color: #232634; } -.ui.ui.ui.button:not(.inverted, .basic).primary:hover, .ui.ui.ui.button:not(.inverted, .basic).green:hover, .ui.ui.ui.button:not(.inverted, .basic).red:hover, .ui.ui.ui.button:not(.inverted, .basic).teal:hover, +.ui.ui.ui.button:not(.inverted, .basic).primary:hover, +.ui.ui.ui.button:not(.inverted, .basic).green:hover, +.ui.ui.ui.button:not(.inverted, .basic).red:hover, +.ui.ui.ui.button:not(.inverted, .basic).teal:hover, .ui.ui.ui.label:not(.inverted, .basic).primary:hover, .ui.ui.ui.label:not(.inverted, .basic).green:hover, .ui.ui.ui.label:not(.inverted, .basic).red:hover, .ui.ui.ui.label:not(.inverted, .basic).teal:hover { - color: #303446; + color: #303446; } .ui.basic.modal { - background-color: #303446; + background-color: #303446; } .ui.commit-header-row .svg.gitea-lock ~ a { - color: #232634; + color: #232634; } .ui.sha.isSigned.isVerified .shortsha { - color: #232634; + color: #232634; } .ui.sha.isSigned.isVerified svg.gitea-lock { - fill: #232634; + fill: #232634; } .ui.basic.modal, .ui.basic.modal > .header, .ui.inverted.button { - color: #c6d0f5 !important; + color: #c6d0f5 !important; } ::selection { - background: rgba(242, 213, 207, 0.3) !important; + background: rgba(242, 213, 207, 0.3) !important; } /* NameBuiltinPseudo */ .chroma .bp { - color: #ef9f76; + color: #ef9f76; } /* Comment */ .chroma .c { - color: #737994; + color: #737994; } /* CommentSingle */ .chroma .c1 { - color: #737994; + color: #737994; } /* CommentHashbang */ .chroma .ch { - color: #737994; + color: #737994; } /* CommentMultiline */ .chroma .cm { - color: #737994; + color: #737994; } /* CommentPreproc */ .chroma .cp { - color: #8caaee; + color: #8caaee; } /* CommentPreprocFile */ .chroma .cpf { - color: #8caaee; + color: #8caaee; } /* CommentSpecial */ .chroma .cs { - color: #737994; + color: #737994; } /* LiteralStringDelimiter */ .chroma .dl { - color: #8caaee; + color: #8caaee; } /* NameFunctionMagic */ /* Generic */ /* GenericDeleted */ .chroma .gd { - color: #c6d0f5; - background-color: rgba(231, 130, 132, 0.15); + color: #c6d0f5; + background-color: rgba(231, 130, 132, 0.15); } /* GenericEmph */ .chroma .ge { - font-style: italic; + font-style: italic; } /* GenericHeading */ .chroma .gh { - color: #99d1db; + color: #99d1db; } /* GenericInserted */ .chroma .gi { - color: #c6d0f5; - background-color: rgba(166, 209, 137, 0.15); + color: #c6d0f5; + background-color: rgba(166, 209, 137, 0.15); } /* GenericUnderline */ /* GenericOutput */ .chroma .go { - color: #ef9f76; + color: #ef9f76; } /* GenericPrompt */ .chroma .gp { - color: #737994; - font-weight: bold; + color: #737994; + font-weight: bold; } /* GenericError */ .chroma .gr { - color: #ea999c; + color: #ea999c; } /* GenericStrong */ .chroma .gs { - font-weight: bold; + font-weight: bold; } /* GenericTraceback */ .chroma .gt { - color: #ea999c; + color: #ea999c; } /* GenericSubheading */ .chroma .gu { - color: #99d1db; + color: #99d1db; } /* LiteralNumberIntegerLong */ .chroma .il { - color: #ef9f76; + color: #ef9f76; } /* Keyword */ .chroma .k { - color: #ca9ee6; + color: #ca9ee6; } /* KeywordConstant */ .chroma .kc { - color: #e5c890; + color: #e5c890; } /* KeywordDeclaration */ .chroma .kd { - color: #ca9ee6; + color: #ca9ee6; } /* KeywordNamespace */ .chroma .kn { - color: #e5c890; + color: #e5c890; } /* KeywordPseudo */ .chroma .kp { - color: #ca9ee6; - font-weight: bold; + color: #ca9ee6; + font-weight: bold; } /* KeywordReserved */ .chroma .kr { - color: #ca9ee6; + color: #ca9ee6; } /* KeywordType */ .chroma .kt { - color: #e5c890; + color: #e5c890; } /* Literal */ /* LiteralDate */ /* LiteralNumber */ .chroma .m { - color: #ef9f76; + color: #ef9f76; } /* LiteralNumberBin */ .chroma .mb { - color: #ef9f76; + color: #ef9f76; } /* LiteralNumberFloat */ .chroma .mf { - color: #ef9f76; + color: #ef9f76; } /* LiteralNumberHex */ .chroma .mh { - color: #ef9f76; + color: #ef9f76; } /* LiteralNumberInteger */ .chroma .mi { - color: #ef9f76; + color: #ef9f76; } /* LiteralNumberOct */ .chroma .mo { - color: #ef9f76; + color: #ef9f76; } /* Name */ .chroma .n { - color: #babbf1; + color: #babbf1; } /* NameAttribute */ .chroma .na { - color: #e5c890; + color: #e5c890; } /* NameBuiltin */ .chroma .nb { - color: #ef9f76; + color: #ef9f76; } /* NameClass */ .chroma .nc { - color: #e5c890; + color: #e5c890; } /* NameDecorator */ .chroma .nd { - color: #f4b8e4; + color: #f4b8e4; } /* NameException */ .chroma .ne { - color: #ea999c; + color: #ea999c; } /* NameFunction */ .chroma .nf { - color: #8caaee; + color: #8caaee; } /* NameEntity */ .chroma .ni { - color: #f4b8e4; + color: #f4b8e4; } /* NameLabel */ .chroma .nl { - color: #e5c890; + color: #e5c890; } /* NameNamespace */ .chroma .nn { - color: #e5c890; + color: #e5c890; } /* NameConstant */ .chroma .no { - color: #e5c890; + color: #e5c890; } /* NameTag */ .chroma .nt { - color: #ca9ee6; + color: #ca9ee6; } /* NameVariable */ .chroma .nv { - color: #ef9f76; + color: #ef9f76; } /* NameOther */ .chroma .nx { - color: #ef9f76; + color: #ef9f76; } /* Operator */ .chroma .o { - color: #99d1db; + color: #99d1db; } /* OperatorWord */ .chroma .ow { - color: #99d1db; - font-weight: bold; + color: #99d1db; + font-weight: bold; } /* Punctuation */ .chroma .p { - color: #949cbb; + color: #949cbb; } /* NameProperty */ /* LiteralString */ .chroma .s { - color: #a6d189; + color: #a6d189; } /* LiteralStringSingle */ .chroma .s1 { - color: #a6d189; + color: #a6d189; } /* LiteralStringDouble */ .chroma .s2 { - color: #a6d189; + color: #a6d189; } /* LiteralStringAffix */ .chroma .sa { - color: #a6d189; + color: #a6d189; } /* LiteralStringBacktick */ .chroma .sb { - color: #a6d189; + color: #a6d189; } /* LiteralStringChar */ .chroma .sc { - color: #a6d189; + color: #a6d189; } /* LiteralStringDoc */ .chroma .sd { - color: #a6d189; + color: #a6d189; } /* LiteralStringEscape */ .chroma .se { - color: #8caaee; + color: #8caaee; } /* LiteralStringHeredoc */ .chroma .sh { - color: #a6d189; + color: #a6d189; } /* LiteralStringInterpol */ .chroma .si { - color: #a6d189; + color: #a6d189; } /* LiteralStringRegex */ .chroma .sr { - color: #8caaee; + color: #8caaee; } /* LiteralStringSymbol */ .chroma .ss { - color: #a6d189; + color: #a6d189; } /* LiteralStringOther */ .chroma .sx { - color: #a6d189; + color: #a6d189; } /* NameVariableClass */ .chroma .vc { - color: #e5c890; + color: #e5c890; } /* NameVariableGlobal */ .chroma .vg { - color: #ef9f76; + color: #ef9f76; } /* NameVariableInstance */ .chroma .vi { - color: #e5c890; + color: #e5c890; } /* NameVariableMagic */ /* TextWhitespace */ .chroma .w { - color: #414559; + color: #414559; } .CodeMirror .cm-property, .CodeMirror.cm-s-default .cm-property, .CodeMirror.cm-s-paper .cm-property { - color: #c6d0f5; + color: #c6d0f5; } .CodeMirror .cm-header, .CodeMirror.cm-s-default .cm-header, .CodeMirror.cm-s-paper .cm-header { - color: #c6d0f5; + color: #c6d0f5; } .CodeMirror .cm-quote, .CodeMirror.cm-s-default .cm-quote, .CodeMirror.cm-s-paper .cm-quote { - color: #a6d189; + color: #a6d189; } .CodeMirror .cm-keyword, .CodeMirror.cm-s-default .cm-keyword, .CodeMirror.cm-s-paper .cm-keyword { - color: #ca9ee6; + color: #ca9ee6; } .CodeMirror .cm-atom, .CodeMirror.cm-s-default .cm-atom, .CodeMirror.cm-s-paper .cm-atom { - color: #e78284; + color: #e78284; } .CodeMirror .cm-number, .CodeMirror.cm-s-default .cm-number, .CodeMirror.cm-s-paper .cm-number { - color: #ef9f76; + color: #ef9f76; } .CodeMirror .cm-def, .CodeMirror.cm-s-default .cm-def, .CodeMirror.cm-s-paper .cm-def { - color: #c6d0f5; + color: #c6d0f5; } .CodeMirror .cm-variable-2, .CodeMirror.cm-s-default .cm-variable-2, .CodeMirror.cm-s-paper .cm-variable-2 { - color: #99d1db; + color: #99d1db; } .CodeMirror .cm-variable-3, .CodeMirror.cm-s-default .cm-variable-3, .CodeMirror.cm-s-paper .cm-variable-3 { - color: #81c8be; + color: #81c8be; } .CodeMirror .cm-comment, .CodeMirror.cm-s-default .cm-comment, .CodeMirror.cm-s-paper .cm-comment { - color: #626880; + color: #626880; } .CodeMirror .cm-string, .CodeMirror.cm-s-default .cm-string, .CodeMirror.cm-s-paper .cm-string { - color: #a6d189; + color: #a6d189; } .CodeMirror .cm-string-2, .CodeMirror.cm-s-default .cm-string-2, .CodeMirror.cm-s-paper .cm-string-2 { - color: #a6d189; + color: #a6d189; } .CodeMirror .cm-meta, .CodeMirror.cm-s-default .cm-meta, .CodeMirror.cm-s-paper .cm-meta { - color: #ef9f76; + color: #ef9f76; } .CodeMirror .cm-qualifier, .CodeMirror.cm-s-default .cm-qualifier, .CodeMirror.cm-s-paper .cm-qualifier { - color: #ef9f76; + color: #ef9f76; } .CodeMirror .cm-builtin, .CodeMirror.cm-s-default .cm-builtin, .CodeMirror.cm-s-paper .cm-builtin { - color: #ef9f76; + color: #ef9f76; } .CodeMirror .cm-bracket, .CodeMirror.cm-s-default .cm-bracket, .CodeMirror.cm-s-paper .cm-bracket { - color: #c6d0f5; + color: #c6d0f5; } .CodeMirror .cm-tag, .CodeMirror.cm-s-default .cm-tag, .CodeMirror.cm-s-paper .cm-tag { - color: #e5c890; + color: #e5c890; } .CodeMirror .cm-attribute, .CodeMirror.cm-s-default .cm-attribute, .CodeMirror.cm-s-paper .cm-attribute { - color: #e5c890; + color: #e5c890; } .CodeMirror .cm-hr, .CodeMirror.cm-s-default .cm-hr, .CodeMirror.cm-s-paper .cm-hr { - color: #949cbb; + color: #949cbb; } .CodeMirror .cm-url, .CodeMirror.cm-s-default .cm-url, .CodeMirror.cm-s-paper .cm-url { - color: #8caaee; + color: #8caaee; } .CodeMirror .cm-link, .CodeMirror.cm-s-default .cm-link, .CodeMirror.cm-s-paper .cm-link { - color: #8caaee; + color: #8caaee; } .CodeMirror .cm-error, .CodeMirror.cm-s-default .cm-error, .CodeMirror.cm-s-paper .cm-error { - color: #e78284; + color: #e78284; } .monaco-editor .selected-text { - background-color: #414559 !important; + background-color: #414559 !important; } .monaco-editor .margin-view-overlays .line-numbers { - color: #a5adce !important; + color: #a5adce !important; } .monaco-editor .line-numbers.active-line-number { - color: #ef9f76 !important; + color: #ef9f76 !important; } .monaco-editor .view-overlays .current-line, .monaco-editor .margin-view-overlays .current-line-margin { - background-color: #3b3f52 !important; + background-color: #3b3f52 !important; } .monaco-editor .mtk1 { - color: #c6d0f5 !important; + color: #c6d0f5 !important; } .monaco-editor .mtk2 { - color: #ff69b4 !important; + color: #ff69b4 !important; } .monaco-editor .mtk3 { - color: #ef9f76 !important; + color: #ef9f76 !important; } .monaco-editor .mtk4 { - color: #81c8be !important; + color: #81c8be !important; } .monaco-editor .mtk5 { - color: #c6d0f5 !important; + color: #c6d0f5 !important; } .monaco-editor .mtk6 { - color: #ca9ee6 !important; + color: #ca9ee6 !important; } .monaco-editor .mtk7 { - color: #ef9f76 !important; + color: #ef9f76 !important; } .monaco-editor .mtk8 { - color: #949cbb !important; + color: #949cbb !important; } .monaco-editor .mtk9 { - color: #ca9ee6 !important; + color: #ca9ee6 !important; } .monaco-editor .mtk10 { - color: #a5adce !important; + color: #a5adce !important; } .monaco-editor .mtk11 { - color: #81c8be !important; + color: #81c8be !important; } .monaco-editor .mtk12 { - color: #81c8be !important; + color: #81c8be !important; } .monaco-editor .mtk13 { - color: #ff69b4 !important; + color: #ff69b4 !important; } .monaco-editor .mtk14 { - color: #ff69b4 !important; + color: #ff69b4 !important; } .monaco-editor .mtk15 { - color: #ca9ee6 !important; + color: #ca9ee6 !important; } .monaco-editor .mtk16 { - color: #949cbb !important; + color: #949cbb !important; } .monaco-editor .mtk17 { - color: #ff69b4 !important; + color: #ff69b4 !important; } .monaco-editor .mtk18 { - color: #ff69b4 !important; + color: #ff69b4 !important; } .monaco-editor .mtk19 { - color: #81c8be !important; + color: #81c8be !important; } .monaco-editor .mtk20 { - color: #ff69b4 !important; + color: #ff69b4 !important; } .monaco-editor .mtk21 { - color: #a6d189 !important; + color: #a6d189 !important; } .monaco-editor .mtk22 { - color: #ff69b4 !important; + color: #ff69b4 !important; } .monaco-editor .mtk23 { - color: #8caaee !important; + color: #8caaee !important; } .monaco-editor .mtk24 { - color: #ef9f76 !important; + color: #ef9f76 !important; } .monaco-editor .mtk25 { - color: #f4b8e4 !important; + color: #f4b8e4 !important; } .monaco-editor .bracket-highlighting-0 { - color: #daa1b1 !important; + color: #daa1b1 !important; } .monaco-editor .bracket-highlighting-1 { - color: #dfb3a9 !important; + color: #dfb3a9 !important; } .monaco-editor .bracket-highlighting-2 { - color: #d9cbb8 !important; + color: #d9cbb8 !important; } .monaco-editor .bracket-highlighting-3 { - color: #b3d1b4 !important; + color: #b3d1b4 !important; } .monaco-editor .bracket-highlighting-4 { - color: #a3b9f1 !important; + color: #a3b9f1 !important; } .monaco-editor .bracket-highlighting-5 { - color: #c8b2ec !important; -} \ No newline at end of file + color: #c8b2ec !important; +} + +/* gitpot homepage */ +@import "vars-dark.css"; diff --git a/theme-catppuccin-latte-peach.css b/theme-catppuccin-latte-peach.css index 94a128a..a56e64c 100644 --- a/theme-catppuccin-latte-peach.css +++ b/theme-catppuccin-latte-peach.css @@ -1,789 +1,798 @@ :root { - color-scheme: light; - --is-dark-theme: false; - accent-color: #fe640b; - --color-primary: #fe640b; - --color-primary-contrast: #eff1f5; - --color-primary-dark-1: #fe6e1a; - --color-primary-dark-2: #fe7729; - --color-primary-dark-3: #fe8139; - --color-primary-dark-4: #fe8b48; - --color-primary-dark-5: #fe9457; - --color-primary-dark-6: #fe9e66; - --color-primary-dark-7: #fea876; - --color-primary-light-1: #f95c01; - --color-primary-light-2: #e95601; - --color-primary-light-3: #da5001; - --color-primary-light-4: #cb4b01; - --color-primary-light-5: #bc4501; - --color-primary-light-6: #ac4001; - --color-primary-light-7: #9d3a01; - --color-primary-alpha-10: rgba(254, 100, 11, 0.1); - --color-primary-alpha-20: rgba(254, 100, 11, 0.2); - --color-primary-alpha-30: rgba(254, 100, 11, 0.3); - --color-primary-alpha-40: rgba(254, 100, 11, 0.4); - --color-primary-alpha-50: rgba(254, 100, 11, 0.5); - --color-primary-alpha-60: rgba(254, 100, 11, 0.6); - --color-primary-alpha-70: rgba(254, 100, 11, 0.7); - --color-primary-alpha-80: rgba(254, 100, 11, 0.8); - --color-primary-alpha-90: rgba(254, 100, 11, 0.9); - --color-secondary: #bcc0cc; - --color-secondary-dark-1: #c3c8d4; - --color-secondary-dark-2: #bac0cd; - --color-secondary-dark-3: #b1b7c7; - --color-secondary-dark-4: #a9afc0; - --color-secondary-dark-5: #a0a7ba; - --color-secondary-dark-6: #979fb3; - --color-secondary-dark-7: #8e97ad; - --color-secondary-dark-8: #858fa7; - --color-secondary-dark-9: #7c86a0; - --color-secondary-dark-10: #737e9a; - --color-secondary-dark-11: #6b7693; - --color-secondary-dark-12: #646f8a; - --color-secondary-dark-13: #5e6881; - --color-secondary-light-1: #d5d8e0; - --color-secondary-light-2: #dee0e7; - --color-secondary-light-3: #e7e9ed; - --color-secondary-light-4: #eff1f4; - --color-secondary-alpha-10: rgba(204, 208, 218, 0.1); - --color-secondary-alpha-20: rgba(204, 208, 218, 0.2); - --color-secondary-alpha-30: rgba(204, 208, 218, 0.3); - --color-secondary-alpha-40: rgba(204, 208, 218, 0.4); - --color-secondary-alpha-50: rgba(204, 208, 218, 0.5); - --color-secondary-alpha-60: rgba(204, 208, 218, 0.6); - --color-secondary-alpha-70: rgba(204, 208, 218, 0.7); - --color-secondary-alpha-80: rgba(204, 208, 218, 0.8); - --color-secondary-alpha-90: rgba(204, 208, 218, 0.9); - /* colors */ - --color-red: #d20f39; - --color-orange: #fe640b; - --color-yellow: #df8e1d; - --color-olive: #40a02b; - --color-green: #40a02b; - --color-teal: #179299; - --color-blue: #1e66f5; - --color-violet: #7287fd; - --color-purple: #8839ef; - --color-pink: #ea76cb; - --color-brown: #dd7878; - --color-grey: #7c7f93; - --color-black: #e6e9ef; - /* light variants - produced via Sass scale-color(color, $lightness: -10%) */ - --color-red-light: #ef2550; - --color-orange-light: #fe843e; - --color-yellow-light: #e7a548; - --color-olive-light: #50c836; - --color-green-light: #50c836; - --color-teal-light: #1ebcc5; - --color-blue-light: #4f87f7; - --color-violet-light: #a4b2fe; - --color-purple-light: #a468f3; - --color-pink-light: #f1a2dc; - --color-brown-light: #e7a1a1; - --color-grey-light: #989aaa; - --color-black-light: white; - /* other colors */ - --color-gold: #dc8a78; - --color-white: #4c4f69; - --color-diff-removed-word-bg: rgba(210, 15, 57, 0.15); - --color-diff-added-word-bg: rgba(64, 160, 43, 0.15); - --color-diff-removed-row-bg: rgba(210, 15, 57, 0.07); - --color-diff-moved-row-bg: rgba(223, 142, 29, 0.07); - --color-diff-added-row-bg: rgba(64, 160, 43, 0.07); - --color-diff-removed-row-border: rgba(210, 15, 57, 0.07); - --color-diff-moved-row-border: rgba(223, 142, 29, 0.07); - --color-diff-added-row-border: rgba(64, 160, 43, 0.07); - --color-diff-inactive: #7c7f93; - --color-error-border: #d20f39; - --color-error-bg: #d20f39; - --color-error-bg-active: #ea113f; - --color-error-bg-hover: #ef2550; - --color-error-text: #eff1f5; - --color-success-border: #50c836; - --color-success-bg: #40a02b; - --color-success-text: #eff1f5; - --color-warning-border: #e7a548; - --color-warning-bg: #df8e1d; - --color-warning-text: #eff1f5; - --color-info-border: #4f87f7; - --color-info-bg: #eff1f5; - --color-info-text: #4c4f69; - --color-red-badge: #ef2550; - --color-red-badge-bg: #eff1f5; - --color-red-badge-hover-bg: #ea113f; - --color-green-badge: #40a02b; - --color-green-badge-bg: #40a02b; - --color-green-badge-hover-bg: #48b430; - --color-yellow-badge: #df8e1d; - --color-yellow-badge-bg: #eff1f5; - --color-yellow-badge-hover-bg: #e49a31; - --color-orange-badge: #fe640b; - --color-orange-badge-bg: #eff1f5; - --color-orange-badge-hover-bg: #fe7424; - --color-git: #fe640b; - /* target-based colors */ - --color-body: #eff1f5; - --color-box-header: #e6e9ef; - --color-box-body: #e6e9ef; - --color-box-body-highlight: #ccd0da; - --color-text-dark: #6c6f85; - --color-text: #4c4f69; - --color-text-light: #5c5f77; - --color-text-light-1: #5c5f77; - --color-text-light-2: #5c5f77; - --color-text-light-3: #5c5f77; - --color-footer: #e6e9ef; - --color-timeline: #ccd0da; - --color-input-text: #4c4f69; - --color-input-background: #ccd0da; - --color-input-toggle-background: #ccd0da; - --color-input-border: #bcc0cc; - --color-input-border-hover: #acb0be; - --color-nav-bg: #e6e9ef; - --color-nav-hover-bg: #ccd0da; - --color-navbar: #e6e9ef; - --color-navbar-transparent: rgba(239, 241, 245, 0); - --color-light: rgba(172, 176, 190, 0.3); - --color-light-mimic-enabled: rgba( - 0, - 0, - 0, - calc(40 / 255 * 222 / 255 / var(--opacity-disabled)) - ); - --color-light-border: #acb0be; - --color-hover: rgba(156, 160, 176, 0.1); - --color-active: rgba(76, 79, 105, 0.1); - --color-menu: #ccd0da; - --color-card: #ccd0da; - --color-markup-table-row: rgba(76, 79, 105, 0.02); - --color-markup-code-block: rgba(76, 79, 105, 0.05); - --color-button: #ccd0da; - --color-code-bg: #eff1f5; - --color-code-sidebar-bg: #ccd0da; - --color-shadow: rgba(239, 241, 245, 0.1); - --color-secondary-bg: #ccd0da; - --color-text-focus: #4c4f69; - --color-expand-button: #acb0be; - --color-placeholder-text: #acb0be; - --color-editor-line-highlight: var(--color-primary-light-5); - --color-project-board-bg: var(--color-secondary-light-2); - /* gitea source code: */ - /* should ideally be --color-text-dark, see go-gitea/gitea#15651 */ - --color-caret: var(--color-text); - --color-reaction-bg: rgba(76, 79, 105, 0.07); - --color-reaction-active-bg: var(--color-primary-alpha-40); - --color-header-wrapper: #e6e9ef; - --color-header-wrapper-transparent: rgba(230, 233, 239, 0); - --color-label-text: #dce0e8; - --color-label-bg: #fe640b; - --color-label-hover-bg: #fe7729; - --color-label-active-bg: #fe6e1a; - --color-accent: var(--color-primary-light-1); - --color-small-accent: var(--color-primary-light-5); - --color-active-line: #bcc0cc; + color-scheme: light; + --is-dark-theme: false; + accent-color: #fe640b; + --color-primary: #fe640b; + --color-primary-contrast: #eff1f5; + --color-primary-dark-1: #fe6e1a; + --color-primary-dark-2: #fe7729; + --color-primary-dark-3: #fe8139; + --color-primary-dark-4: #fe8b48; + --color-primary-dark-5: #fe9457; + --color-primary-dark-6: #fe9e66; + --color-primary-dark-7: #fea876; + --color-primary-light-1: #f95c01; + --color-primary-light-2: #e95601; + --color-primary-light-3: #da5001; + --color-primary-light-4: #cb4b01; + --color-primary-light-5: #bc4501; + --color-primary-light-6: #ac4001; + --color-primary-light-7: #9d3a01; + --color-primary-alpha-10: rgba(254, 100, 11, 0.1); + --color-primary-alpha-20: rgba(254, 100, 11, 0.2); + --color-primary-alpha-30: rgba(254, 100, 11, 0.3); + --color-primary-alpha-40: rgba(254, 100, 11, 0.4); + --color-primary-alpha-50: rgba(254, 100, 11, 0.5); + --color-primary-alpha-60: rgba(254, 100, 11, 0.6); + --color-primary-alpha-70: rgba(254, 100, 11, 0.7); + --color-primary-alpha-80: rgba(254, 100, 11, 0.8); + --color-primary-alpha-90: rgba(254, 100, 11, 0.9); + --color-secondary: #bcc0cc; + --color-secondary-dark-1: #c3c8d4; + --color-secondary-dark-2: #bac0cd; + --color-secondary-dark-3: #b1b7c7; + --color-secondary-dark-4: #a9afc0; + --color-secondary-dark-5: #a0a7ba; + --color-secondary-dark-6: #979fb3; + --color-secondary-dark-7: #8e97ad; + --color-secondary-dark-8: #858fa7; + --color-secondary-dark-9: #7c86a0; + --color-secondary-dark-10: #737e9a; + --color-secondary-dark-11: #6b7693; + --color-secondary-dark-12: #646f8a; + --color-secondary-dark-13: #5e6881; + --color-secondary-light-1: #d5d8e0; + --color-secondary-light-2: #dee0e7; + --color-secondary-light-3: #e7e9ed; + --color-secondary-light-4: #eff1f4; + --color-secondary-alpha-10: rgba(204, 208, 218, 0.1); + --color-secondary-alpha-20: rgba(204, 208, 218, 0.2); + --color-secondary-alpha-30: rgba(204, 208, 218, 0.3); + --color-secondary-alpha-40: rgba(204, 208, 218, 0.4); + --color-secondary-alpha-50: rgba(204, 208, 218, 0.5); + --color-secondary-alpha-60: rgba(204, 208, 218, 0.6); + --color-secondary-alpha-70: rgba(204, 208, 218, 0.7); + --color-secondary-alpha-80: rgba(204, 208, 218, 0.8); + --color-secondary-alpha-90: rgba(204, 208, 218, 0.9); + /* colors */ + --color-red: #d20f39; + --color-orange: #fe640b; + --color-yellow: #df8e1d; + --color-olive: #40a02b; + --color-green: #40a02b; + --color-teal: #179299; + --color-blue: #1e66f5; + --color-violet: #7287fd; + --color-purple: #8839ef; + --color-pink: #ea76cb; + --color-brown: #dd7878; + --color-grey: #7c7f93; + --color-black: #e6e9ef; + /* light variants - produced via Sass scale-color(color, $lightness: -10%) */ + --color-red-light: #ef2550; + --color-orange-light: #fe843e; + --color-yellow-light: #e7a548; + --color-olive-light: #50c836; + --color-green-light: #50c836; + --color-teal-light: #1ebcc5; + --color-blue-light: #4f87f7; + --color-violet-light: #a4b2fe; + --color-purple-light: #a468f3; + --color-pink-light: #f1a2dc; + --color-brown-light: #e7a1a1; + --color-grey-light: #989aaa; + --color-black-light: white; + /* other colors */ + --color-gold: #dc8a78; + --color-white: #4c4f69; + --color-diff-removed-word-bg: rgba(210, 15, 57, 0.15); + --color-diff-added-word-bg: rgba(64, 160, 43, 0.15); + --color-diff-removed-row-bg: rgba(210, 15, 57, 0.07); + --color-diff-moved-row-bg: rgba(223, 142, 29, 0.07); + --color-diff-added-row-bg: rgba(64, 160, 43, 0.07); + --color-diff-removed-row-border: rgba(210, 15, 57, 0.07); + --color-diff-moved-row-border: rgba(223, 142, 29, 0.07); + --color-diff-added-row-border: rgba(64, 160, 43, 0.07); + --color-diff-inactive: #7c7f93; + --color-error-border: #d20f39; + --color-error-bg: #d20f39; + --color-error-bg-active: #ea113f; + --color-error-bg-hover: #ef2550; + --color-error-text: #eff1f5; + --color-success-border: #50c836; + --color-success-bg: #40a02b; + --color-success-text: #eff1f5; + --color-warning-border: #e7a548; + --color-warning-bg: #df8e1d; + --color-warning-text: #eff1f5; + --color-info-border: #4f87f7; + --color-info-bg: #eff1f5; + --color-info-text: #4c4f69; + --color-red-badge: #ef2550; + --color-red-badge-bg: #eff1f5; + --color-red-badge-hover-bg: #ea113f; + --color-green-badge: #40a02b; + --color-green-badge-bg: #40a02b; + --color-green-badge-hover-bg: #48b430; + --color-yellow-badge: #df8e1d; + --color-yellow-badge-bg: #eff1f5; + --color-yellow-badge-hover-bg: #e49a31; + --color-orange-badge: #fe640b; + --color-orange-badge-bg: #eff1f5; + --color-orange-badge-hover-bg: #fe7424; + --color-git: #fe640b; + /* target-based colors */ + --color-body: #eff1f5; + --color-box-header: #e6e9ef; + --color-box-body: #e6e9ef; + --color-box-body-highlight: #ccd0da; + --color-text-dark: #6c6f85; + --color-text: #4c4f69; + --color-text-light: #5c5f77; + --color-text-light-1: #5c5f77; + --color-text-light-2: #5c5f77; + --color-text-light-3: #5c5f77; + --color-footer: #e6e9ef; + --color-timeline: #ccd0da; + --color-input-text: #4c4f69; + --color-input-background: #ccd0da; + --color-input-toggle-background: #ccd0da; + --color-input-border: #bcc0cc; + --color-input-border-hover: #acb0be; + --color-nav-bg: #e6e9ef; + --color-nav-hover-bg: #ccd0da; + --color-navbar: #e6e9ef; + --color-navbar-transparent: rgba(239, 241, 245, 0); + --color-light: rgba(172, 176, 190, 0.3); + --color-light-mimic-enabled: rgba( + 0, + 0, + 0, + calc(40 / 255 * 222 / 255 / var(--opacity-disabled)) + ); + --color-light-border: #acb0be; + --color-hover: rgba(156, 160, 176, 0.1); + --color-active: rgba(76, 79, 105, 0.1); + --color-menu: #ccd0da; + --color-card: #ccd0da; + --color-markup-table-row: rgba(76, 79, 105, 0.02); + --color-markup-code-block: rgba(76, 79, 105, 0.05); + --color-button: #ccd0da; + --color-code-bg: #eff1f5; + --color-code-sidebar-bg: #ccd0da; + --color-shadow: rgba(239, 241, 245, 0.1); + --color-secondary-bg: #ccd0da; + --color-text-focus: #4c4f69; + --color-expand-button: #acb0be; + --color-placeholder-text: #acb0be; + --color-editor-line-highlight: var(--color-primary-light-5); + --color-project-board-bg: var(--color-secondary-light-2); + /* gitea source code: */ + /* should ideally be --color-text-dark, see go-gitea/gitea#15651 */ + --color-caret: var(--color-text); + --color-reaction-bg: rgba(76, 79, 105, 0.07); + --color-reaction-active-bg: var(--color-primary-alpha-40); + --color-header-wrapper: #e6e9ef; + --color-header-wrapper-transparent: rgba(230, 233, 239, 0); + --color-label-text: #dce0e8; + --color-label-bg: #fe640b; + --color-label-hover-bg: #fe7729; + --color-label-active-bg: #fe6e1a; + --color-accent: var(--color-primary-light-1); + --color-small-accent: var(--color-primary-light-5); + --color-active-line: #bcc0cc; } -.ui.ui.ui.button:not(.inverted, .basic).primary, .ui.ui.ui.button:not(.inverted, .basic).green, .ui.ui.ui.button:not(.inverted, .basic).red, .ui.ui.ui.button:not(.inverted, .basic).teal, +.ui.ui.ui.button:not(.inverted, .basic).primary, +.ui.ui.ui.button:not(.inverted, .basic).green, +.ui.ui.ui.button:not(.inverted, .basic).red, +.ui.ui.ui.button:not(.inverted, .basic).teal, .ui.ui.ui.label:not(.inverted, .basic).primary, .ui.ui.ui.label:not(.inverted, .basic).green, .ui.ui.ui.label:not(.inverted, .basic).red, .ui.ui.ui.label:not(.inverted, .basic).teal { - color: #eff1f5; + color: #eff1f5; } -.ui.ui.ui.button:not(.inverted, .basic).primary:hover, .ui.ui.ui.button:not(.inverted, .basic).green:hover, .ui.ui.ui.button:not(.inverted, .basic).red:hover, .ui.ui.ui.button:not(.inverted, .basic).teal:hover, +.ui.ui.ui.button:not(.inverted, .basic).primary:hover, +.ui.ui.ui.button:not(.inverted, .basic).green:hover, +.ui.ui.ui.button:not(.inverted, .basic).red:hover, +.ui.ui.ui.button:not(.inverted, .basic).teal:hover, .ui.ui.ui.label:not(.inverted, .basic).primary:hover, .ui.ui.ui.label:not(.inverted, .basic).green:hover, .ui.ui.ui.label:not(.inverted, .basic).red:hover, .ui.ui.ui.label:not(.inverted, .basic).teal:hover { - color: #dce0e8; + color: #dce0e8; } .ui.basic.modal { - background-color: #dce0e8; + background-color: #dce0e8; } .ui.commit-header-row .svg.gitea-lock ~ a { - color: #eff1f5; + color: #eff1f5; } .ui.sha.isSigned.isVerified .shortsha { - color: #eff1f5; + color: #eff1f5; } .ui.sha.isSigned.isVerified svg.gitea-lock { - fill: #eff1f5; + fill: #eff1f5; } .ui.basic.modal, .ui.basic.modal > .header, .ui.inverted.button { - color: #4c4f69 !important; + color: #4c4f69 !important; } ::selection { - background: rgba(220, 138, 120, 0.3) !important; + background: rgba(220, 138, 120, 0.3) !important; } /* NameBuiltinPseudo */ .chroma .bp { - color: #fe640b; + color: #fe640b; } /* Comment */ .chroma .c { - color: #9ca0b0; + color: #9ca0b0; } /* CommentSingle */ .chroma .c1 { - color: #9ca0b0; + color: #9ca0b0; } /* CommentHashbang */ .chroma .ch { - color: #9ca0b0; + color: #9ca0b0; } /* CommentMultiline */ .chroma .cm { - color: #9ca0b0; + color: #9ca0b0; } /* CommentPreproc */ .chroma .cp { - color: #1e66f5; + color: #1e66f5; } /* CommentPreprocFile */ .chroma .cpf { - color: #1e66f5; + color: #1e66f5; } /* CommentSpecial */ .chroma .cs { - color: #9ca0b0; + color: #9ca0b0; } /* LiteralStringDelimiter */ .chroma .dl { - color: #1e66f5; + color: #1e66f5; } /* NameFunctionMagic */ /* Generic */ /* GenericDeleted */ .chroma .gd { - color: #4c4f69; - background-color: rgba(210, 15, 57, 0.15); + color: #4c4f69; + background-color: rgba(210, 15, 57, 0.15); } /* GenericEmph */ .chroma .ge { - font-style: italic; + font-style: italic; } /* GenericHeading */ .chroma .gh { - color: #04a5e5; + color: #04a5e5; } /* GenericInserted */ .chroma .gi { - color: #4c4f69; - background-color: rgba(64, 160, 43, 0.15); + color: #4c4f69; + background-color: rgba(64, 160, 43, 0.15); } /* GenericUnderline */ /* GenericOutput */ .chroma .go { - color: #fe640b; + color: #fe640b; } /* GenericPrompt */ .chroma .gp { - color: #9ca0b0; - font-weight: bold; + color: #9ca0b0; + font-weight: bold; } /* GenericError */ .chroma .gr { - color: #e64553; + color: #e64553; } /* GenericStrong */ .chroma .gs { - font-weight: bold; + font-weight: bold; } /* GenericTraceback */ .chroma .gt { - color: #e64553; + color: #e64553; } /* GenericSubheading */ .chroma .gu { - color: #04a5e5; + color: #04a5e5; } /* LiteralNumberIntegerLong */ .chroma .il { - color: #fe640b; + color: #fe640b; } /* Keyword */ .chroma .k { - color: #8839ef; + color: #8839ef; } /* KeywordConstant */ .chroma .kc { - color: #df8e1d; + color: #df8e1d; } /* KeywordDeclaration */ .chroma .kd { - color: #8839ef; + color: #8839ef; } /* KeywordNamespace */ .chroma .kn { - color: #df8e1d; + color: #df8e1d; } /* KeywordPseudo */ .chroma .kp { - color: #8839ef; - font-weight: bold; + color: #8839ef; + font-weight: bold; } /* KeywordReserved */ .chroma .kr { - color: #8839ef; + color: #8839ef; } /* KeywordType */ .chroma .kt { - color: #df8e1d; + color: #df8e1d; } /* Literal */ /* LiteralDate */ /* LiteralNumber */ .chroma .m { - color: #fe640b; + color: #fe640b; } /* LiteralNumberBin */ .chroma .mb { - color: #fe640b; + color: #fe640b; } /* LiteralNumberFloat */ .chroma .mf { - color: #fe640b; + color: #fe640b; } /* LiteralNumberHex */ .chroma .mh { - color: #fe640b; + color: #fe640b; } /* LiteralNumberInteger */ .chroma .mi { - color: #fe640b; + color: #fe640b; } /* LiteralNumberOct */ .chroma .mo { - color: #fe640b; + color: #fe640b; } /* Name */ .chroma .n { - color: #7287fd; + color: #7287fd; } /* NameAttribute */ .chroma .na { - color: #df8e1d; + color: #df8e1d; } /* NameBuiltin */ .chroma .nb { - color: #fe640b; + color: #fe640b; } /* NameClass */ .chroma .nc { - color: #df8e1d; + color: #df8e1d; } /* NameDecorator */ .chroma .nd { - color: #ea76cb; + color: #ea76cb; } /* NameException */ .chroma .ne { - color: #e64553; + color: #e64553; } /* NameFunction */ .chroma .nf { - color: #1e66f5; + color: #1e66f5; } /* NameEntity */ .chroma .ni { - color: #ea76cb; + color: #ea76cb; } /* NameLabel */ .chroma .nl { - color: #df8e1d; + color: #df8e1d; } /* NameNamespace */ .chroma .nn { - color: #df8e1d; + color: #df8e1d; } /* NameConstant */ .chroma .no { - color: #df8e1d; + color: #df8e1d; } /* NameTag */ .chroma .nt { - color: #8839ef; + color: #8839ef; } /* NameVariable */ .chroma .nv { - color: #fe640b; + color: #fe640b; } /* NameOther */ .chroma .nx { - color: #fe640b; + color: #fe640b; } /* Operator */ .chroma .o { - color: #04a5e5; + color: #04a5e5; } /* OperatorWord */ .chroma .ow { - color: #04a5e5; - font-weight: bold; + color: #04a5e5; + font-weight: bold; } /* Punctuation */ .chroma .p { - color: #7c7f93; + color: #7c7f93; } /* NameProperty */ /* LiteralString */ .chroma .s { - color: #40a02b; + color: #40a02b; } /* LiteralStringSingle */ .chroma .s1 { - color: #40a02b; + color: #40a02b; } /* LiteralStringDouble */ .chroma .s2 { - color: #40a02b; + color: #40a02b; } /* LiteralStringAffix */ .chroma .sa { - color: #40a02b; + color: #40a02b; } /* LiteralStringBacktick */ .chroma .sb { - color: #40a02b; + color: #40a02b; } /* LiteralStringChar */ .chroma .sc { - color: #40a02b; + color: #40a02b; } /* LiteralStringDoc */ .chroma .sd { - color: #40a02b; + color: #40a02b; } /* LiteralStringEscape */ .chroma .se { - color: #1e66f5; + color: #1e66f5; } /* LiteralStringHeredoc */ .chroma .sh { - color: #40a02b; + color: #40a02b; } /* LiteralStringInterpol */ .chroma .si { - color: #40a02b; + color: #40a02b; } /* LiteralStringRegex */ .chroma .sr { - color: #1e66f5; + color: #1e66f5; } /* LiteralStringSymbol */ .chroma .ss { - color: #40a02b; + color: #40a02b; } /* LiteralStringOther */ .chroma .sx { - color: #40a02b; + color: #40a02b; } /* NameVariableClass */ .chroma .vc { - color: #df8e1d; + color: #df8e1d; } /* NameVariableGlobal */ .chroma .vg { - color: #fe640b; + color: #fe640b; } /* NameVariableInstance */ .chroma .vi { - color: #df8e1d; + color: #df8e1d; } /* NameVariableMagic */ /* TextWhitespace */ .chroma .w { - color: #ccd0da; + color: #ccd0da; } .CodeMirror .cm-property, .CodeMirror.cm-s-default .cm-property, .CodeMirror.cm-s-paper .cm-property { - color: #4c4f69; + color: #4c4f69; } .CodeMirror .cm-header, .CodeMirror.cm-s-default .cm-header, .CodeMirror.cm-s-paper .cm-header { - color: #4c4f69; + color: #4c4f69; } .CodeMirror .cm-quote, .CodeMirror.cm-s-default .cm-quote, .CodeMirror.cm-s-paper .cm-quote { - color: #40a02b; + color: #40a02b; } .CodeMirror .cm-keyword, .CodeMirror.cm-s-default .cm-keyword, .CodeMirror.cm-s-paper .cm-keyword { - color: #8839ef; + color: #8839ef; } .CodeMirror .cm-atom, .CodeMirror.cm-s-default .cm-atom, .CodeMirror.cm-s-paper .cm-atom { - color: #d20f39; + color: #d20f39; } .CodeMirror .cm-number, .CodeMirror.cm-s-default .cm-number, .CodeMirror.cm-s-paper .cm-number { - color: #fe640b; + color: #fe640b; } .CodeMirror .cm-def, .CodeMirror.cm-s-default .cm-def, .CodeMirror.cm-s-paper .cm-def { - color: #4c4f69; + color: #4c4f69; } .CodeMirror .cm-variable-2, .CodeMirror.cm-s-default .cm-variable-2, .CodeMirror.cm-s-paper .cm-variable-2 { - color: #04a5e5; + color: #04a5e5; } .CodeMirror .cm-variable-3, .CodeMirror.cm-s-default .cm-variable-3, .CodeMirror.cm-s-paper .cm-variable-3 { - color: #179299; + color: #179299; } .CodeMirror .cm-comment, .CodeMirror.cm-s-default .cm-comment, .CodeMirror.cm-s-paper .cm-comment { - color: #acb0be; + color: #acb0be; } .CodeMirror .cm-string, .CodeMirror.cm-s-default .cm-string, .CodeMirror.cm-s-paper .cm-string { - color: #40a02b; + color: #40a02b; } .CodeMirror .cm-string-2, .CodeMirror.cm-s-default .cm-string-2, .CodeMirror.cm-s-paper .cm-string-2 { - color: #40a02b; + color: #40a02b; } .CodeMirror .cm-meta, .CodeMirror.cm-s-default .cm-meta, .CodeMirror.cm-s-paper .cm-meta { - color: #fe640b; + color: #fe640b; } .CodeMirror .cm-qualifier, .CodeMirror.cm-s-default .cm-qualifier, .CodeMirror.cm-s-paper .cm-qualifier { - color: #fe640b; + color: #fe640b; } .CodeMirror .cm-builtin, .CodeMirror.cm-s-default .cm-builtin, .CodeMirror.cm-s-paper .cm-builtin { - color: #fe640b; + color: #fe640b; } .CodeMirror .cm-bracket, .CodeMirror.cm-s-default .cm-bracket, .CodeMirror.cm-s-paper .cm-bracket { - color: #4c4f69; + color: #4c4f69; } .CodeMirror .cm-tag, .CodeMirror.cm-s-default .cm-tag, .CodeMirror.cm-s-paper .cm-tag { - color: #df8e1d; + color: #df8e1d; } .CodeMirror .cm-attribute, .CodeMirror.cm-s-default .cm-attribute, .CodeMirror.cm-s-paper .cm-attribute { - color: #df8e1d; + color: #df8e1d; } .CodeMirror .cm-hr, .CodeMirror.cm-s-default .cm-hr, .CodeMirror.cm-s-paper .cm-hr { - color: #7c7f93; + color: #7c7f93; } .CodeMirror .cm-url, .CodeMirror.cm-s-default .cm-url, .CodeMirror.cm-s-paper .cm-url { - color: #1e66f5; + color: #1e66f5; } .CodeMirror .cm-link, .CodeMirror.cm-s-default .cm-link, .CodeMirror.cm-s-paper .cm-link { - color: #1e66f5; + color: #1e66f5; } .CodeMirror .cm-error, .CodeMirror.cm-s-default .cm-error, .CodeMirror.cm-s-paper .cm-error { - color: #d20f39; + color: #d20f39; } .monaco-editor .selected-text { - background-color: #ccd0da !important; + background-color: #ccd0da !important; } .monaco-editor .margin-view-overlays .line-numbers { - color: #6c6f85 !important; + color: #6c6f85 !important; } .monaco-editor .line-numbers.active-line-number { - color: #fe640b !important; + color: #fe640b !important; } .monaco-editor .view-overlays .current-line, .monaco-editor .margin-view-overlays .current-line-margin { - background-color: #e9ebf1 !important; + background-color: #e9ebf1 !important; } .monaco-editor .mtk1 { - color: #4c4f69 !important; + color: #4c4f69 !important; } .monaco-editor .mtk2 { - color: #ff69b4 !important; + color: #ff69b4 !important; } .monaco-editor .mtk3 { - color: #fe640b !important; + color: #fe640b !important; } .monaco-editor .mtk4 { - color: #179299 !important; + color: #179299 !important; } .monaco-editor .mtk5 { - color: #4c4f69 !important; + color: #4c4f69 !important; } .monaco-editor .mtk6 { - color: #8839ef !important; + color: #8839ef !important; } .monaco-editor .mtk7 { - color: #fe640b !important; + color: #fe640b !important; } .monaco-editor .mtk8 { - color: #7c7f93 !important; + color: #7c7f93 !important; } .monaco-editor .mtk9 { - color: #8839ef !important; + color: #8839ef !important; } .monaco-editor .mtk10 { - color: #6c6f85 !important; + color: #6c6f85 !important; } .monaco-editor .mtk11 { - color: #179299 !important; + color: #179299 !important; } .monaco-editor .mtk12 { - color: #179299 !important; + color: #179299 !important; } .monaco-editor .mtk13 { - color: #ff69b4 !important; + color: #ff69b4 !important; } .monaco-editor .mtk14 { - color: #ff69b4 !important; + color: #ff69b4 !important; } .monaco-editor .mtk15 { - color: #8839ef !important; + color: #8839ef !important; } .monaco-editor .mtk16 { - color: #7c7f93 !important; + color: #7c7f93 !important; } .monaco-editor .mtk17 { - color: #ff69b4 !important; + color: #ff69b4 !important; } .monaco-editor .mtk18 { - color: #ff69b4 !important; + color: #ff69b4 !important; } .monaco-editor .mtk19 { - color: #179299 !important; + color: #179299 !important; } .monaco-editor .mtk20 { - color: #ff69b4 !important; + color: #ff69b4 !important; } .monaco-editor .mtk21 { - color: #40a02b !important; + color: #40a02b !important; } .monaco-editor .mtk22 { - color: #ff69b4 !important; + color: #ff69b4 !important; } .monaco-editor .mtk23 { - color: #1e66f5 !important; + color: #1e66f5 !important; } .monaco-editor .mtk24 { - color: #fe640b !important; + color: #fe640b !important; } .monaco-editor .mtk25 { - color: #ea76cb !important; + color: #ea76cb !important; } .monaco-editor .bracket-highlighting-0 { - color: #9c294c !important; + color: #9c294c !important; } .monaco-editor .bracket-highlighting-1 { - color: #b75c31 !important; + color: #b75c31 !important; } .monaco-editor .bracket-highlighting-2 { - color: #a4753b !important; + color: #a4753b !important; } .monaco-editor .bracket-highlighting-3 { - color: #458044 !important; + color: #458044 !important; } .monaco-editor .bracket-highlighting-4 { - color: #305dbd !important; + color: #305dbd !important; } .monaco-editor .bracket-highlighting-5 { - color: #7042b9 !important; -} \ No newline at end of file + color: #7042b9 !important; +} + +/* gitpot homepage */ +@import "vars-light.css"; diff --git a/theme-gitea-auto.css b/theme-gitea-auto.css index 509889e..725133d 100644 --- a/theme-gitea-auto.css +++ b/theme-gitea-auto.css @@ -1,2 +1,6 @@ @import "./theme-gitea-light.css" (prefers-color-scheme: light); @import "./theme-gitea-dark.css" (prefers-color-scheme: dark); + +/* gitpot homepage */ +@import "vars-light.css"; +@import "vars-dark.css" (prefers-color-scheme: dark); diff --git a/theme-gitea-dark.css b/theme-gitea-dark.css index c187888..d62530a 100644 --- a/theme-gitea-dark.css +++ b/theme-gitea-dark.css @@ -2,241 +2,248 @@ @import "../codemirror/dark.css"; :root { - --is-dark-theme: true; - --color-primary: #4183c4; - --color-primary-contrast: #ffffff; - --color-primary-dark-1: #548fca; - --color-primary-dark-2: #679cd0; - --color-primary-dark-3: #7aa8d6; - --color-primary-dark-4: #8db5dc; - --color-primary-dark-5: #b3cde7; - --color-primary-dark-6: #d9e6f3; - --color-primary-dark-7: #f4f8fb; - --color-primary-light-1: #3876b3; - --color-primary-light-2: #31699f; - --color-primary-light-3: #2b5c8b; - --color-primary-light-4: #254f77; - --color-primary-light-5: #193450; - --color-primary-light-6: #0c1a28; - --color-primary-light-7: #04080c; - --color-primary-alpha-10: #4183c419; - --color-primary-alpha-20: #4183c433; - --color-primary-alpha-30: #4183c44b; - --color-primary-alpha-40: #4183c466; - --color-primary-alpha-50: #4183c480; - --color-primary-alpha-60: #4183c499; - --color-primary-alpha-70: #4183c4b3; - --color-primary-alpha-80: #4183c4cc; - --color-primary-alpha-90: #4183c4e1; - --color-primary-hover: var(--color-primary-light-1); - --color-primary-active: var(--color-primary-light-2); - --color-secondary: #3f4346; - --color-secondary-dark-1: #464a4d; - --color-secondary-dark-2: #4f5356; - --color-secondary-dark-3: #5f6366; - --color-secondary-dark-4: #72767a; - --color-secondary-dark-5: #7f8488; - --color-secondary-dark-6: #8d9297; - --color-secondary-dark-7: #999ea3; - --color-secondary-dark-8: #a6abaf; - --color-secondary-dark-9: #aeb3b8; - --color-secondary-dark-10: #babfc4; - --color-secondary-dark-11: #c5cbd0; - --color-secondary-dark-12: #ced4da; - --color-secondary-dark-13: #d1d7dd; - --color-secondary-light-1: #313538; - --color-secondary-light-2: #272b2e; - --color-secondary-light-3: #1e2225; - --color-secondary-light-4: #171b1e; - --color-secondary-alpha-10: #3f434619; - --color-secondary-alpha-20: #3f434633; - --color-secondary-alpha-30: #3f43464b; - --color-secondary-alpha-40: #3f434666; - --color-secondary-alpha-50: #3f434680; - --color-secondary-alpha-60: #3f434699; - --color-secondary-alpha-70: #3f4346b3; - --color-secondary-alpha-80: #3f4346cc; - --color-secondary-alpha-90: #3f4346e1; - --color-secondary-button: var(--color-secondary-dark-4); - --color-secondary-hover: var(--color-secondary-dark-3); - --color-secondary-active: var(--color-secondary-dark-2); - /* console colors - used for actions console and console files */ - --color-console-fg: #f8f8f9; - --color-console-fg-subtle: #bec4c8; - --color-console-bg: #181b1d; - --color-console-border: #313538; - --color-console-hover-bg: #ffffff16; - --color-console-active-bg: #313538; - --color-console-menu-bg: #272b2e; - --color-console-menu-border: #464a4d; - /* named colors */ - --color-red: #cc4848; - --color-orange: #cc580c; - --color-yellow: #cc9903; - --color-olive: #91a313; - --color-green: #87ab63; - --color-teal: #00918a; - --color-blue: #3a8ac6; - --color-violet: #906ae1; - --color-purple: #b259d0; - --color-pink: #d22e8b; - --color-brown: #a47252; - --color-black: #1f2326; - /* light variants - produced via Sass scale-color(color, $lightness: +10%) */ - --color-red-light: #d15a5a; - --color-orange-light: #f6a066; - --color-yellow-light: #eaaf03; - --color-olive-light: #abc016; - --color-green-light: #93b373; - --color-teal-light: #00b6ad; - --color-blue-light: #4e96cc; - --color-violet-light: #9b79e4; - --color-purple-light: #ba6ad5; - --color-pink-light: #d74397; - --color-brown-light: #b08061; - --color-black-light: #46494d; - /* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */ - --color-red-dark-1: #c23636; - --color-orange-dark-1: #f38236; - --color-yellow-dark-1: #b88a03; - --color-olive-dark-1: #839311; - --color-green-dark-1: #7a9e55; - --color-teal-dark-1: #00837c; - --color-blue-dark-1: #347cb3; - --color-violet-dark-1: #7b4edb; - --color-purple-dark-1: #a742c9; - --color-pink-dark-1: #be297d; - --color-brown-dark-1: #94674a; - --color-black-dark-1: #2c2f35; - /* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */ - --color-red-dark-2: #ad3030; - --color-orange-dark-2: #f16e17; - --color-yellow-dark-2: #a37a02; - --color-olive-dark-2: #74820f; - --color-green-dark-2: #6c8c4c; - --color-teal-dark-2: #00746e; - --color-blue-dark-2: #2e6e9f; - --color-violet-dark-2: #6733d6; - --color-purple-dark-2: #9834b9; - --color-pink-dark-2: #a9246f; - --color-brown-dark-2: #835b42; - --color-black-dark-2: #292a2e; - /* ansi colors used for actions console and console files */ - --color-ansi-black: #1f2326; - --color-ansi-red: #cc4848; - --color-ansi-green: #87ab63; - --color-ansi-yellow: #cc9903; - --color-ansi-blue: #3a8ac6; - --color-ansi-magenta: #d22e8b; - --color-ansi-cyan: #00918a; - --color-ansi-white: var(--color-console-fg-subtle); - --color-ansi-bright-black: #46494d; - --color-ansi-bright-red: #d15a5a; - --color-ansi-bright-green: #93b373; - --color-ansi-bright-yellow: #eaaf03; - --color-ansi-bright-blue: #4e96cc; - --color-ansi-bright-magenta: #d74397; - --color-ansi-bright-cyan: #00b6ad; - --color-ansi-bright-white: var(--color-console-fg); - /* other colors */ - --color-grey: #3c4043; - --color-grey-light: #898e92; - --color-gold: #b1983b; - --color-white: #ffffff; - --color-diff-removed-word-bg: #6f3333; - --color-diff-added-word-bg: #3c653c; - --color-diff-removed-row-bg: #3c2626; - --color-diff-moved-row-bg: #818044; - --color-diff-added-row-bg: #283e2d; - --color-diff-removed-row-border: #634343; - --color-diff-moved-row-border: #bcca6f; - --color-diff-added-row-border: #314a37; - --color-diff-inactive: #24282b; - --color-error-border: #a04141; - --color-error-bg: #522; - --color-error-bg-active: #744; - --color-error-bg-hover: #633; - --color-error-text: #f9cbcb; - --color-success-border: #458a57; - --color-success-bg: #284034; - --color-success-text: #6cc664; - --color-warning-border: #bb9d00; - --color-warning-bg: #3a3a30; - --color-warning-text: #fbbd08; - --color-info-border: #306090; - --color-info-bg: #26354c; - --color-info-text: #38a8e8; - --color-red-badge: #db2828; - --color-red-badge-bg: #db28281a; - --color-red-badge-hover-bg: #db28284d; - --color-green-badge: #21ba45; - --color-green-badge-bg: #21ba451a; - --color-green-badge-hover-bg: #21ba454d; - --color-yellow-badge: #fbbd08; - --color-yellow-badge-bg: #fbbd081a; - --color-yellow-badge-hover-bg: #fbbd084d; - --color-orange-badge: #f2711c; - --color-orange-badge-bg: #f2711c1a; - --color-orange-badge-hover-bg: #f2711c4d; - --color-git: #f05133; - /* target-based colors */ - --color-body: #1f2326; - --color-box-header: #202427; - --color-box-body: #191d20; - --color-box-body-highlight: #1d2124; - --color-text-dark: #f8f8f9; - --color-text: #ced2d5; - --color-text-light: #bec4c8; - --color-text-light-1: #acb3b8; - --color-text-light-2: #8d969c; - --color-text-light-3: #747f87; - --color-footer: var(--color-nav-bg); - --color-timeline: #383c3f; - --color-input-text: var(--color-text-dark); - --color-input-background: #161a1d; - --color-input-toggle-background: #313538; - --color-input-border: var(--color-secondary); - --color-input-border-hover: var(--color-secondary-dark-1); - --color-header-wrapper: #191d20; - --color-light: #00000028; - --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); - --color-light-border: #ffffff28; - --color-hover: #ffffff19; - --color-active: #ffffff24; - --color-menu: #161a1d; - --color-card: #161a1d; - --color-markup-table-row: #ffffff06; - --color-markup-code-block: #ffffff16; - --color-button: #161a1d; - --color-code-bg: #191d20; - --color-code-sidebar-bg: #1b1f22; - --color-shadow: #00000058; - --color-secondary-bg: #2f3135; - --color-expand-button: #414348; - --color-placeholder-text: var(--color-text-light-3); - --color-editor-line-highlight: var(--color-primary-light-5); - --color-project-board-bg: var(--color-secondary-light-2); - --color-project-board-dark-label: #111111; - --color-project-board-light-label: #eeeeee; - --color-caret: var(--color-text); /* should ideally be --color-text-dark, see #15651 */ - --color-reaction-bg: #ffffff12; - --color-reaction-hover-bg: var(--color-primary-light-4); - --color-reaction-active-bg: var(--color-primary-light-5); - --color-tooltip-text: #ffffff; - --color-tooltip-bg: #000000f0; - --color-nav-bg: #1b1f22; - --color-nav-hover-bg: #272b2e; - --color-nav-text: var(--color-text); - --color-label-text: var(--color-text); - --color-label-bg: #7a7f834b; - --color-label-hover-bg: #7a7f83a0; - --color-label-active-bg: #7a7f83ff; - --color-accent: var(--color-primary-light-1); - --color-small-accent: var(--color-primary-light-5); - --color-active-line: #534d1b; - --color-overlay-backdrop: #080808c0; - accent-color: var(--color-accent); - color-scheme: dark; + --is-dark-theme: true; + --color-primary: #4183c4; + --color-primary-contrast: #ffffff; + --color-primary-dark-1: #548fca; + --color-primary-dark-2: #679cd0; + --color-primary-dark-3: #7aa8d6; + --color-primary-dark-4: #8db5dc; + --color-primary-dark-5: #b3cde7; + --color-primary-dark-6: #d9e6f3; + --color-primary-dark-7: #f4f8fb; + --color-primary-light-1: #3876b3; + --color-primary-light-2: #31699f; + --color-primary-light-3: #2b5c8b; + --color-primary-light-4: #254f77; + --color-primary-light-5: #193450; + --color-primary-light-6: #0c1a28; + --color-primary-light-7: #04080c; + --color-primary-alpha-10: #4183c419; + --color-primary-alpha-20: #4183c433; + --color-primary-alpha-30: #4183c44b; + --color-primary-alpha-40: #4183c466; + --color-primary-alpha-50: #4183c480; + --color-primary-alpha-60: #4183c499; + --color-primary-alpha-70: #4183c4b3; + --color-primary-alpha-80: #4183c4cc; + --color-primary-alpha-90: #4183c4e1; + --color-primary-hover: var(--color-primary-light-1); + --color-primary-active: var(--color-primary-light-2); + --color-secondary: #3f4346; + --color-secondary-dark-1: #464a4d; + --color-secondary-dark-2: #4f5356; + --color-secondary-dark-3: #5f6366; + --color-secondary-dark-4: #72767a; + --color-secondary-dark-5: #7f8488; + --color-secondary-dark-6: #8d9297; + --color-secondary-dark-7: #999ea3; + --color-secondary-dark-8: #a6abaf; + --color-secondary-dark-9: #aeb3b8; + --color-secondary-dark-10: #babfc4; + --color-secondary-dark-11: #c5cbd0; + --color-secondary-dark-12: #ced4da; + --color-secondary-dark-13: #d1d7dd; + --color-secondary-light-1: #313538; + --color-secondary-light-2: #272b2e; + --color-secondary-light-3: #1e2225; + --color-secondary-light-4: #171b1e; + --color-secondary-alpha-10: #3f434619; + --color-secondary-alpha-20: #3f434633; + --color-secondary-alpha-30: #3f43464b; + --color-secondary-alpha-40: #3f434666; + --color-secondary-alpha-50: #3f434680; + --color-secondary-alpha-60: #3f434699; + --color-secondary-alpha-70: #3f4346b3; + --color-secondary-alpha-80: #3f4346cc; + --color-secondary-alpha-90: #3f4346e1; + --color-secondary-button: var(--color-secondary-dark-4); + --color-secondary-hover: var(--color-secondary-dark-3); + --color-secondary-active: var(--color-secondary-dark-2); + /* console colors - used for actions console and console files */ + --color-console-fg: #f8f8f9; + --color-console-fg-subtle: #bec4c8; + --color-console-bg: #181b1d; + --color-console-border: #313538; + --color-console-hover-bg: #ffffff16; + --color-console-active-bg: #313538; + --color-console-menu-bg: #272b2e; + --color-console-menu-border: #464a4d; + /* named colors */ + --color-red: #cc4848; + --color-orange: #cc580c; + --color-yellow: #cc9903; + --color-olive: #91a313; + --color-green: #87ab63; + --color-teal: #00918a; + --color-blue: #3a8ac6; + --color-violet: #906ae1; + --color-purple: #b259d0; + --color-pink: #d22e8b; + --color-brown: #a47252; + --color-black: #1f2326; + /* light variants - produced via Sass scale-color(color, $lightness: +10%) */ + --color-red-light: #d15a5a; + --color-orange-light: #f6a066; + --color-yellow-light: #eaaf03; + --color-olive-light: #abc016; + --color-green-light: #93b373; + --color-teal-light: #00b6ad; + --color-blue-light: #4e96cc; + --color-violet-light: #9b79e4; + --color-purple-light: #ba6ad5; + --color-pink-light: #d74397; + --color-brown-light: #b08061; + --color-black-light: #46494d; + /* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */ + --color-red-dark-1: #c23636; + --color-orange-dark-1: #f38236; + --color-yellow-dark-1: #b88a03; + --color-olive-dark-1: #839311; + --color-green-dark-1: #7a9e55; + --color-teal-dark-1: #00837c; + --color-blue-dark-1: #347cb3; + --color-violet-dark-1: #7b4edb; + --color-purple-dark-1: #a742c9; + --color-pink-dark-1: #be297d; + --color-brown-dark-1: #94674a; + --color-black-dark-1: #2c2f35; + /* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */ + --color-red-dark-2: #ad3030; + --color-orange-dark-2: #f16e17; + --color-yellow-dark-2: #a37a02; + --color-olive-dark-2: #74820f; + --color-green-dark-2: #6c8c4c; + --color-teal-dark-2: #00746e; + --color-blue-dark-2: #2e6e9f; + --color-violet-dark-2: #6733d6; + --color-purple-dark-2: #9834b9; + --color-pink-dark-2: #a9246f; + --color-brown-dark-2: #835b42; + --color-black-dark-2: #292a2e; + /* ansi colors used for actions console and console files */ + --color-ansi-black: #1f2326; + --color-ansi-red: #cc4848; + --color-ansi-green: #87ab63; + --color-ansi-yellow: #cc9903; + --color-ansi-blue: #3a8ac6; + --color-ansi-magenta: #d22e8b; + --color-ansi-cyan: #00918a; + --color-ansi-white: var(--color-console-fg-subtle); + --color-ansi-bright-black: #46494d; + --color-ansi-bright-red: #d15a5a; + --color-ansi-bright-green: #93b373; + --color-ansi-bright-yellow: #eaaf03; + --color-ansi-bright-blue: #4e96cc; + --color-ansi-bright-magenta: #d74397; + --color-ansi-bright-cyan: #00b6ad; + --color-ansi-bright-white: var(--color-console-fg); + /* other colors */ + --color-grey: #3c4043; + --color-grey-light: #898e92; + --color-gold: #b1983b; + --color-white: #ffffff; + --color-diff-removed-word-bg: #6f3333; + --color-diff-added-word-bg: #3c653c; + --color-diff-removed-row-bg: #3c2626; + --color-diff-moved-row-bg: #818044; + --color-diff-added-row-bg: #283e2d; + --color-diff-removed-row-border: #634343; + --color-diff-moved-row-border: #bcca6f; + --color-diff-added-row-border: #314a37; + --color-diff-inactive: #24282b; + --color-error-border: #a04141; + --color-error-bg: #522; + --color-error-bg-active: #744; + --color-error-bg-hover: #633; + --color-error-text: #f9cbcb; + --color-success-border: #458a57; + --color-success-bg: #284034; + --color-success-text: #6cc664; + --color-warning-border: #bb9d00; + --color-warning-bg: #3a3a30; + --color-warning-text: #fbbd08; + --color-info-border: #306090; + --color-info-bg: #26354c; + --color-info-text: #38a8e8; + --color-red-badge: #db2828; + --color-red-badge-bg: #db28281a; + --color-red-badge-hover-bg: #db28284d; + --color-green-badge: #21ba45; + --color-green-badge-bg: #21ba451a; + --color-green-badge-hover-bg: #21ba454d; + --color-yellow-badge: #fbbd08; + --color-yellow-badge-bg: #fbbd081a; + --color-yellow-badge-hover-bg: #fbbd084d; + --color-orange-badge: #f2711c; + --color-orange-badge-bg: #f2711c1a; + --color-orange-badge-hover-bg: #f2711c4d; + --color-git: #f05133; + /* target-based colors */ + --color-body: #1f2326; + --color-box-header: #202427; + --color-box-body: #191d20; + --color-box-body-highlight: #1d2124; + --color-text-dark: #f8f8f9; + --color-text: #ced2d5; + --color-text-light: #bec4c8; + --color-text-light-1: #acb3b8; + --color-text-light-2: #8d969c; + --color-text-light-3: #747f87; + --color-footer: var(--color-nav-bg); + --color-timeline: #383c3f; + --color-input-text: var(--color-text-dark); + --color-input-background: #161a1d; + --color-input-toggle-background: #313538; + --color-input-border: var(--color-secondary); + --color-input-border-hover: var(--color-secondary-dark-1); + --color-header-wrapper: #191d20; + --color-light: #00000028; + --color-light-mimic-enabled: rgba( + 0, + 0, + 0, + calc(40 / 255 * 222 / 255 / var(--opacity-disabled)) + ); + --color-light-border: #ffffff28; + --color-hover: #ffffff19; + --color-active: #ffffff24; + --color-menu: #161a1d; + --color-card: #161a1d; + --color-markup-table-row: #ffffff06; + --color-markup-code-block: #ffffff16; + --color-button: #161a1d; + --color-code-bg: #191d20; + --color-code-sidebar-bg: #1b1f22; + --color-shadow: #00000058; + --color-secondary-bg: #2f3135; + --color-expand-button: #414348; + --color-placeholder-text: var(--color-text-light-3); + --color-editor-line-highlight: var(--color-primary-light-5); + --color-project-board-bg: var(--color-secondary-light-2); + --color-project-board-dark-label: #111111; + --color-project-board-light-label: #eeeeee; + --color-caret: var( + --color-text + ); /* should ideally be --color-text-dark, see #15651 */ + --color-reaction-bg: #ffffff12; + --color-reaction-hover-bg: var(--color-primary-light-4); + --color-reaction-active-bg: var(--color-primary-light-5); + --color-tooltip-text: #ffffff; + --color-tooltip-bg: #000000f0; + --color-nav-bg: #1b1f22; + --color-nav-hover-bg: #272b2e; + --color-nav-text: var(--color-text); + --color-label-text: var(--color-text); + --color-label-bg: #7a7f834b; + --color-label-hover-bg: #7a7f83a0; + --color-label-active-bg: #7a7f83ff; + --color-accent: var(--color-primary-light-1); + --color-small-accent: var(--color-primary-light-5); + --color-active-line: #534d1b; + --color-overlay-backdrop: #080808c0; + accent-color: var(--color-accent); + color-scheme: dark; } /* invert emojis that are hard to read otherwise */ @@ -260,5 +267,8 @@ .emoji[aria-label="paw prints"], .emoji[aria-label="musical note"], .emoji[aria-label="musical notes"] { - filter: invert(100%) hue-rotate(180deg); + filter: invert(100%) hue-rotate(180deg); } + +/* gitpot homepage */ +@import "vars-dark.css"; diff --git a/theme-gitea-light.css b/theme-gitea-light.css index fbe2458..00c3abf 100644 --- a/theme-gitea-light.css +++ b/theme-gitea-light.css @@ -2,239 +2,247 @@ @import "../codemirror/light.css"; :root { - --is-dark-theme: false; - --color-primary: #4183c4; - --color-primary-contrast: #ffffff; - --color-primary-dark-1: #3876b3; - --color-primary-dark-2: #31699f; - --color-primary-dark-3: #2b5c8b; - --color-primary-dark-4: #254f77; - --color-primary-dark-5: #193450; - --color-primary-dark-6: #0c1a28; - --color-primary-dark-7: #04080c; - --color-primary-light-1: #548fca; - --color-primary-light-2: #679cd0; - --color-primary-light-3: #7aa8d6; - --color-primary-light-4: #8db5dc; - --color-primary-light-5: #b3cde7; - --color-primary-light-6: #d9e6f3; - --color-primary-light-7: #f4f8fb; - --color-primary-alpha-10: #4183c419; - --color-primary-alpha-20: #4183c433; - --color-primary-alpha-30: #4183c44b; - --color-primary-alpha-40: #4183c466; - --color-primary-alpha-50: #4183c480; - --color-primary-alpha-60: #4183c499; - --color-primary-alpha-70: #4183c4b3; - --color-primary-alpha-80: #4183c4cc; - --color-primary-alpha-90: #4183c4e1; - --color-primary-hover: var(--color-primary-dark-1); - --color-primary-active: var(--color-primary-dark-2); - --color-secondary: #dedede; - --color-secondary-dark-1: #cecece; - --color-secondary-dark-2: #bfbfbf; - --color-secondary-dark-3: #a0a0a0; - --color-secondary-dark-4: #909090; - --color-secondary-dark-5: #818181; - --color-secondary-dark-6: #717171; - --color-secondary-dark-7: #626262; - --color-secondary-dark-8: #525252; - --color-secondary-dark-9: #434343; - --color-secondary-dark-10: #333333; - --color-secondary-dark-11: #242424; - --color-secondary-dark-12: #141414; - --color-secondary-dark-13: #040404; - --color-secondary-light-1: #e5e5e5; - --color-secondary-light-2: #ebebeb; - --color-secondary-light-3: #f2f2f2; - --color-secondary-light-4: #f8f8f8; - --color-secondary-alpha-10: #dedede19; - --color-secondary-alpha-20: #dedede33; - --color-secondary-alpha-30: #dedede4b; - --color-secondary-alpha-40: #dedede66; - --color-secondary-alpha-50: #dedede80; - --color-secondary-alpha-60: #dedede99; - --color-secondary-alpha-70: #dededeb3; - --color-secondary-alpha-80: #dededecc; - --color-secondary-alpha-90: #dededee1; - --color-secondary-button: var(--color-secondary-dark-4); - --color-secondary-hover: var(--color-secondary-dark-5); - --color-secondary-active: var(--color-secondary-dark-6); - /* console colors - used for actions console and console files */ - --color-console-fg: #f8f8f9; - --color-console-fg-subtle: #bec4c8; - --color-console-bg: #181b1d; - --color-console-border: #313538; - --color-console-hover-bg: #ffffff16; - --color-console-active-bg: #313538; - --color-console-menu-bg: #272b2e; - --color-console-menu-border: #464a4d; - /* named colors */ - --color-red: #db2828; - --color-orange: #f2711c; - --color-yellow: #fbbd08; - --color-olive: #b5cc18; - --color-green: #21ba45; - --color-teal: #00b5ad; - --color-blue: #2185d0; - --color-violet: #6435c9; - --color-purple: #a333c8; - --color-pink: #e03997; - --color-brown: #a5673f; - --color-black: #1b1c1d; - /* light variants - produced via Sass scale-color(color, $lightness: +25%) */ - --color-red-light: #e45e5e; - --color-orange-light: #f59555; - --color-yellow-light: #fcce46; - --color-olive-light: #d3e942; - --color-green-light: #46de6a; - --color-teal-light: #08fff4; - --color-blue-light: #51a5e3; - --color-violet-light: #8b67d7; - --color-purple-light: #bb64d8; - --color-pink-light: #e86bb1; - --color-brown-light: #c58b66; - --color-black-light: #525558; - /* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */ - --color-red-dark-1: #c82121; - --color-orange-dark-1: #e6630d; - --color-yellow-dark-1: #e5ac04; - --color-olive-dark-1: #a3b816; - --color-green-dark-1: #1ea73e; - --color-teal-dark-1: #00a39c; - --color-blue-dark-1: #1e78bb; - --color-violet-dark-1: #5a30b5; - --color-purple-dark-1: #932eb4; - --color-pink-dark-1: #db228a; - --color-brown-dark-1: #955d39; - --color-black-dark-1: #18191a; - /* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */ - --color-red-dark-2: #b11e1e; - --color-orange-dark-2: #cc580c; - --color-yellow-dark-2: #cc9903; - --color-olive-dark-2: #91a313; - --color-green-dark-2: #1a9537; - --color-teal-dark-2: #00918a; - --color-blue-dark-2: #1a6aa6; - --color-violet-dark-2: #502aa1; - --color-purple-dark-2: #8229a0; - --color-pink-dark-2: #c21e7b; - --color-brown-dark-2: #845232; - --color-black-dark-2: #161617; - /* ansi colors used for actions console and console files */ - --color-ansi-black: #1f2326; - --color-ansi-red: #cc4848; - --color-ansi-green: #87ab63; - --color-ansi-yellow: #cc9903; - --color-ansi-blue: #3a8ac6; - --color-ansi-magenta: #d22e8b; - --color-ansi-cyan: #00918a; - --color-ansi-white: var(--color-console-fg-subtle); - --color-ansi-bright-black: #46494d; - --color-ansi-bright-red: #d15a5a; - --color-ansi-bright-green: #93b373; - --color-ansi-bright-yellow: #eaaf03; - --color-ansi-bright-blue: #4e96cc; - --color-ansi-bright-magenta: #d74397; - --color-ansi-bright-cyan: #00b6ad; - --color-ansi-bright-white: var(--color-console-fg); - /* other colors */ - --color-grey: #707070; - --color-grey-light: #838383; - --color-gold: #a1882b; - --color-white: #ffffff; - --color-diff-removed-word-bg: #fdb8c0; - --color-diff-added-word-bg: #acf2bd; - --color-diff-removed-row-bg: #ffeef0; - --color-diff-moved-row-bg: #f1f8d1; - --color-diff-added-row-bg: #e6ffed; - --color-diff-removed-row-border: #f1c0c0; - --color-diff-moved-row-border: #d0e27f; - --color-diff-added-row-border: #e6ffed; - --color-diff-inactive: #f2f2f2; - --color-error-border: #e0b4b4; - --color-error-bg: #fff6f6; - --color-error-bg-active: #fbb; - --color-error-bg-hover: #fdd; - --color-error-text: #9f3a38; - --color-success-border: #a3c293; - --color-success-bg: #fcfff5; - --color-success-text: #2c662d; - --color-warning-border: #c9ba9b; - --color-warning-bg: #fffaf3; - --color-warning-text: #573a08; - --color-info-border: #a9d5de; - --color-info-bg: #f8ffff; - --color-info-text: #276f86; - --color-red-badge: #db2828; - --color-red-badge-bg: #db28281a; - --color-red-badge-hover-bg: #db28284d; - --color-green-badge: #21ba45; - --color-green-badge-bg: #21ba451a; - --color-green-badge-hover-bg: #21ba454d; - --color-yellow-badge: #fbbd08; - --color-yellow-badge-bg: #fbbd081a; - --color-yellow-badge-hover-bg: #fbbd084d; - --color-orange-badge: #f2711c; - --color-orange-badge-bg: #f2711c1a; - --color-orange-badge-hover-bg: #f2711c4d; - --color-git: #f05133; - /* target-based colors */ - --color-body: #ffffff; - --color-box-header: #f7f7f7; - --color-box-body: #ffffff; - --color-box-body-highlight: #fafafa; - --color-text-dark: #080808; - --color-text: #212121; - --color-text-light: #555555; - --color-text-light-1: #6a6a6a; - --color-text-light-2: #808080; - --color-text-light-3: #a0a0a0; - --color-footer: var(--color-nav-bg); - --color-timeline: #ececec; - --color-input-text: var(--color-text-dark); - --color-input-background: #fafafa; - --color-input-toggle-background: #dedede; - --color-input-border: var(--color-secondary); - --color-input-border-hover: var(--color-secondary-dark-1); - --color-header-wrapper: transparent; - --color-light: #00000006; - --color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled))); - --color-light-border: #0000001d; - --color-hover: #00000014; - --color-active: #0000001b; - --color-menu: #fafafa; - --color-card: #fafafa; - --color-markup-table-row: #00000008; - --color-markup-code-block: #00000010; - --color-button: #fafafa; - --color-code-bg: #ffffff; - --color-code-sidebar-bg: #f5f5f5; - --color-shadow: #00000026; - --color-secondary-bg: #f4f4f4; - --color-expand-button: #d8efff; - --color-placeholder-text: var(--color-text-light-3); - --color-editor-line-highlight: var(--color-primary-light-6); - --color-project-board-bg: var(--color-secondary-light-4); - --color-project-board-dark-label: #111111; - --color-project-board-light-label: #eeeeee; - --color-caret: var(--color-text-dark); - --color-reaction-bg: #0000000a; - --color-reaction-hover-bg: var(--color-primary-light-5); - --color-reaction-active-bg: var(--color-primary-light-6); - --color-tooltip-text: #ffffff; - --color-tooltip-bg: #000000f0; - --color-nav-bg: #ffffff; - --color-nav-hover-bg: #ebebeb; - --color-nav-text: var(--color-text); - --color-label-text: var(--color-text); - --color-label-bg: #9d9d9d4b; - --color-label-hover-bg: #9d9d9da0; - --color-label-active-bg: #9d9d9dff; - --color-accent: var(--color-primary-light-1); - --color-small-accent: var(--color-primary-light-6); - --color-active-line: #fffbdd; - --color-overlay-backdrop: #080808c0; - accent-color: var(--color-accent); - color-scheme: light; + --is-dark-theme: false; + --color-primary: #4183c4; + --color-primary-contrast: #ffffff; + --color-primary-dark-1: #3876b3; + --color-primary-dark-2: #31699f; + --color-primary-dark-3: #2b5c8b; + --color-primary-dark-4: #254f77; + --color-primary-dark-5: #193450; + --color-primary-dark-6: #0c1a28; + --color-primary-dark-7: #04080c; + --color-primary-light-1: #548fca; + --color-primary-light-2: #679cd0; + --color-primary-light-3: #7aa8d6; + --color-primary-light-4: #8db5dc; + --color-primary-light-5: #b3cde7; + --color-primary-light-6: #d9e6f3; + --color-primary-light-7: #f4f8fb; + --color-primary-alpha-10: #4183c419; + --color-primary-alpha-20: #4183c433; + --color-primary-alpha-30: #4183c44b; + --color-primary-alpha-40: #4183c466; + --color-primary-alpha-50: #4183c480; + --color-primary-alpha-60: #4183c499; + --color-primary-alpha-70: #4183c4b3; + --color-primary-alpha-80: #4183c4cc; + --color-primary-alpha-90: #4183c4e1; + --color-primary-hover: var(--color-primary-dark-1); + --color-primary-active: var(--color-primary-dark-2); + --color-secondary: #dedede; + --color-secondary-dark-1: #cecece; + --color-secondary-dark-2: #bfbfbf; + --color-secondary-dark-3: #a0a0a0; + --color-secondary-dark-4: #909090; + --color-secondary-dark-5: #818181; + --color-secondary-dark-6: #717171; + --color-secondary-dark-7: #626262; + --color-secondary-dark-8: #525252; + --color-secondary-dark-9: #434343; + --color-secondary-dark-10: #333333; + --color-secondary-dark-11: #242424; + --color-secondary-dark-12: #141414; + --color-secondary-dark-13: #040404; + --color-secondary-light-1: #e5e5e5; + --color-secondary-light-2: #ebebeb; + --color-secondary-light-3: #f2f2f2; + --color-secondary-light-4: #f8f8f8; + --color-secondary-alpha-10: #dedede19; + --color-secondary-alpha-20: #dedede33; + --color-secondary-alpha-30: #dedede4b; + --color-secondary-alpha-40: #dedede66; + --color-secondary-alpha-50: #dedede80; + --color-secondary-alpha-60: #dedede99; + --color-secondary-alpha-70: #dededeb3; + --color-secondary-alpha-80: #dededecc; + --color-secondary-alpha-90: #dededee1; + --color-secondary-button: var(--color-secondary-dark-4); + --color-secondary-hover: var(--color-secondary-dark-5); + --color-secondary-active: var(--color-secondary-dark-6); + /* console colors - used for actions console and console files */ + --color-console-fg: #f8f8f9; + --color-console-fg-subtle: #bec4c8; + --color-console-bg: #181b1d; + --color-console-border: #313538; + --color-console-hover-bg: #ffffff16; + --color-console-active-bg: #313538; + --color-console-menu-bg: #272b2e; + --color-console-menu-border: #464a4d; + /* named colors */ + --color-red: #db2828; + --color-orange: #f2711c; + --color-yellow: #fbbd08; + --color-olive: #b5cc18; + --color-green: #21ba45; + --color-teal: #00b5ad; + --color-blue: #2185d0; + --color-violet: #6435c9; + --color-purple: #a333c8; + --color-pink: #e03997; + --color-brown: #a5673f; + --color-black: #1b1c1d; + /* light variants - produced via Sass scale-color(color, $lightness: +25%) */ + --color-red-light: #e45e5e; + --color-orange-light: #f59555; + --color-yellow-light: #fcce46; + --color-olive-light: #d3e942; + --color-green-light: #46de6a; + --color-teal-light: #08fff4; + --color-blue-light: #51a5e3; + --color-violet-light: #8b67d7; + --color-purple-light: #bb64d8; + --color-pink-light: #e86bb1; + --color-brown-light: #c58b66; + --color-black-light: #525558; + /* dark 1 variants - produced via Sass scale-color(color, $lightness: -10%) */ + --color-red-dark-1: #c82121; + --color-orange-dark-1: #e6630d; + --color-yellow-dark-1: #e5ac04; + --color-olive-dark-1: #a3b816; + --color-green-dark-1: #1ea73e; + --color-teal-dark-1: #00a39c; + --color-blue-dark-1: #1e78bb; + --color-violet-dark-1: #5a30b5; + --color-purple-dark-1: #932eb4; + --color-pink-dark-1: #db228a; + --color-brown-dark-1: #955d39; + --color-black-dark-1: #18191a; + /* dark 2 variants - produced via Sass scale-color(color, $lightness: -20%) */ + --color-red-dark-2: #b11e1e; + --color-orange-dark-2: #cc580c; + --color-yellow-dark-2: #cc9903; + --color-olive-dark-2: #91a313; + --color-green-dark-2: #1a9537; + --color-teal-dark-2: #00918a; + --color-blue-dark-2: #1a6aa6; + --color-violet-dark-2: #502aa1; + --color-purple-dark-2: #8229a0; + --color-pink-dark-2: #c21e7b; + --color-brown-dark-2: #845232; + --color-black-dark-2: #161617; + /* ansi colors used for actions console and console files */ + --color-ansi-black: #1f2326; + --color-ansi-red: #cc4848; + --color-ansi-green: #87ab63; + --color-ansi-yellow: #cc9903; + --color-ansi-blue: #3a8ac6; + --color-ansi-magenta: #d22e8b; + --color-ansi-cyan: #00918a; + --color-ansi-white: var(--color-console-fg-subtle); + --color-ansi-bright-black: #46494d; + --color-ansi-bright-red: #d15a5a; + --color-ansi-bright-green: #93b373; + --color-ansi-bright-yellow: #eaaf03; + --color-ansi-bright-blue: #4e96cc; + --color-ansi-bright-magenta: #d74397; + --color-ansi-bright-cyan: #00b6ad; + --color-ansi-bright-white: var(--color-console-fg); + /* other colors */ + --color-grey: #707070; + --color-grey-light: #838383; + --color-gold: #a1882b; + --color-white: #ffffff; + --color-diff-removed-word-bg: #fdb8c0; + --color-diff-added-word-bg: #acf2bd; + --color-diff-removed-row-bg: #ffeef0; + --color-diff-moved-row-bg: #f1f8d1; + --color-diff-added-row-bg: #e6ffed; + --color-diff-removed-row-border: #f1c0c0; + --color-diff-moved-row-border: #d0e27f; + --color-diff-added-row-border: #e6ffed; + --color-diff-inactive: #f2f2f2; + --color-error-border: #e0b4b4; + --color-error-bg: #fff6f6; + --color-error-bg-active: #fbb; + --color-error-bg-hover: #fdd; + --color-error-text: #9f3a38; + --color-success-border: #a3c293; + --color-success-bg: #fcfff5; + --color-success-text: #2c662d; + --color-warning-border: #c9ba9b; + --color-warning-bg: #fffaf3; + --color-warning-text: #573a08; + --color-info-border: #a9d5de; + --color-info-bg: #f8ffff; + --color-info-text: #276f86; + --color-red-badge: #db2828; + --color-red-badge-bg: #db28281a; + --color-red-badge-hover-bg: #db28284d; + --color-green-badge: #21ba45; + --color-green-badge-bg: #21ba451a; + --color-green-badge-hover-bg: #21ba454d; + --color-yellow-badge: #fbbd08; + --color-yellow-badge-bg: #fbbd081a; + --color-yellow-badge-hover-bg: #fbbd084d; + --color-orange-badge: #f2711c; + --color-orange-badge-bg: #f2711c1a; + --color-orange-badge-hover-bg: #f2711c4d; + --color-git: #f05133; + /* target-based colors */ + --color-body: #ffffff; + --color-box-header: #f7f7f7; + --color-box-body: #ffffff; + --color-box-body-highlight: #fafafa; + --color-text-dark: #080808; + --color-text: #212121; + --color-text-light: #555555; + --color-text-light-1: #6a6a6a; + --color-text-light-2: #808080; + --color-text-light-3: #a0a0a0; + --color-footer: var(--color-nav-bg); + --color-timeline: #ececec; + --color-input-text: var(--color-text-dark); + --color-input-background: #fafafa; + --color-input-toggle-background: #dedede; + --color-input-border: var(--color-secondary); + --color-input-border-hover: var(--color-secondary-dark-1); + --color-header-wrapper: transparent; + --color-light: #00000006; + --color-light-mimic-enabled: rgba( + 0, + 0, + 0, + calc(6 / 255 * 222 / 255 / var(--opacity-disabled)) + ); + --color-light-border: #0000001d; + --color-hover: #00000014; + --color-active: #0000001b; + --color-menu: #fafafa; + --color-card: #fafafa; + --color-markup-table-row: #00000008; + --color-markup-code-block: #00000010; + --color-button: #fafafa; + --color-code-bg: #ffffff; + --color-code-sidebar-bg: #f5f5f5; + --color-shadow: #00000026; + --color-secondary-bg: #f4f4f4; + --color-expand-button: #d8efff; + --color-placeholder-text: var(--color-text-light-3); + --color-editor-line-highlight: var(--color-primary-light-6); + --color-project-board-bg: var(--color-secondary-light-4); + --color-project-board-dark-label: #111111; + --color-project-board-light-label: #eeeeee; + --color-caret: var(--color-text-dark); + --color-reaction-bg: #0000000a; + --color-reaction-hover-bg: var(--color-primary-light-5); + --color-reaction-active-bg: var(--color-primary-light-6); + --color-tooltip-text: #ffffff; + --color-tooltip-bg: #000000f0; + --color-nav-bg: #ffffff; + --color-nav-hover-bg: #ebebeb; + --color-nav-text: var(--color-text); + --color-label-text: var(--color-text); + --color-label-bg: #9d9d9d4b; + --color-label-hover-bg: #9d9d9da0; + --color-label-active-bg: #9d9d9dff; + --color-accent: var(--color-primary-light-1); + --color-small-accent: var(--color-primary-light-6); + --color-active-line: #fffbdd; + --color-overlay-backdrop: #080808c0; + accent-color: var(--color-accent); + color-scheme: light; } + +/* gitpot homepage */ +@import "vars-light.css"; diff --git a/theme-gitpot-auto.css b/theme-gitpot-auto.css index 32136e1..840a661 100644 --- a/theme-gitpot-auto.css +++ b/theme-gitpot-auto.css @@ -1,2 +1,6 @@ @import "theme-gitpot-light.css"; -@import "theme-gitpot-dark.css" (prefers-color-scheme: dark); \ No newline at end of file +@import "theme-gitpot-dark.css" (prefers-color-scheme: dark); + +/* gitpot homepage */ +@import "vars-light.css"; +@import "vars-dark.css" (prefers-color-scheme: dark); diff --git a/theme-gitpot-dark.css b/theme-gitpot-dark.css index 665ded1..6369f7f 100644 --- a/theme-gitpot-dark.css +++ b/theme-gitpot-dark.css @@ -11,26 +11,26 @@ @import "../codemirror/dark.css"; :root { - --steel-900: #10161D; - --steel-850: #131A21; - --steel-800: #171E26; - --steel-750: #1D262F; - --steel-700: #242D38; - --steel-650: #2B3642; + --steel-900: #10161d; + --steel-850: #131a21; + --steel-800: #171e26; + --steel-750: #1d262f; + --steel-700: #242d38; + --steel-650: #2b3642; --steel-600: #374351; --steel-550: #445161; - --steel-500: #515F70; - --steel-450: #5F6E80; - --steel-400: #6D7D8F; - --steel-350: #7C8C9F; - --steel-300: #8C9CAF; - --steel-250: #9DADC0; - --steel-200: #AEBED0; - --steel-150: #C0CFE0; - --steel-100: #D2E0F0; + --steel-500: #515f70; + --steel-450: #5f6e80; + --steel-400: #6d7d8f; + --steel-350: #7c8c9f; + --steel-300: #8c9caf; + --steel-250: #9dadc0; + --steel-200: #aebed0; + --steel-150: #c0cfe0; + --steel-100: #d2e0f0; --is-dark-theme: true; - --color-primary: #F9774C; + --color-primary: #f9774c; --color-primary-contrast: #000; --color-primary-dark-1: #ff8e68; --color-primary-dark-2: #ff8e68; @@ -40,7 +40,7 @@ --color-primary-dark-6: #ffded2; --color-primary-dark-7: #f8e3dc; - --color-primary-light-1: #E84E1B; + --color-primary-light-1: #e84e1b; --color-primary-light-2: #cc4012; --color-primary-light-3: #aa340c; --color-primary-light-4: #963312; @@ -48,15 +48,15 @@ --color-primary-light-6: #77280e; --color-primary-light-7: #69240d; - --color-primary-alpha-10: #F9774C19; - --color-primary-alpha-20: #F9774C33; - --color-primary-alpha-30: #F9774C4b; - --color-primary-alpha-40: #F9774C66; - --color-primary-alpha-50: #F9774C80; - --color-primary-alpha-60: #F9774C99; - --color-primary-alpha-70: #F9774Cb3; - --color-primary-alpha-80: #F9774Ccc; - --color-primary-alpha-90: #F9774Ce1; + --color-primary-alpha-10: #f9774c19; + --color-primary-alpha-20: #f9774c33; + --color-primary-alpha-30: #f9774c4b; + --color-primary-alpha-40: #f9774c66; + --color-primary-alpha-50: #f9774c80; + --color-primary-alpha-60: #f9774c99; + --color-primary-alpha-70: #f9774cb3; + --color-primary-alpha-80: #f9774ccc; + --color-primary-alpha-90: #f9774ce1; --color-primary-hover: var(--color-primary-light-1); --color-primary-active: var(--color-primary-light-2); --color-secondary: var(--steel-700); @@ -99,7 +99,7 @@ --color-console-menu-border: #5c6374; /* colors */ --color-red: #b91c1c; - --color-orange: #F9774C; + --color-orange: #f9774c; --color-yellow: #ca8a04; --color-olive: #91a313; --color-green: #15803d; @@ -186,9 +186,9 @@ --color-yellow-badge: #ca8a04; --color-yellow-badge-bg: #ca8a0422; --color-yellow-badge-hover-bg: #ca8a0444; - --color-orange-badge: #F9774C; - --color-orange-badge-bg: #F9774C22; - --color-orange-badge-hover-bg: #F9774C44; + --color-orange-badge: #f9774c; + --color-orange-badge-bg: #f9774c22; + --color-orange-badge-hover-bg: #f9774c44; --color-git: #f05133; /* target-based colors */ --color-body: var(--steel-800); @@ -211,7 +211,12 @@ --color-header-wrapper: var(--steel-850); --color-header-wrapper-transparent: #242d3800; --color-light: #00000028; - --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); + --color-light-mimic-enabled: rgba( + 0, + 0, + 0, + calc(40 / 255 * 222 / 255 / var(--opacity-disabled)) + ); --color-light-border: #ffffff28; --color-hover: var(--steel-600); --color-active: var(--steel-650); @@ -328,4 +333,7 @@ i.grey.icon.icon.icon.icon { .ui.primary.label { color: var(--color-text-dark) !important; -} \ No newline at end of file +} + +/* gitpot homepage */ +@import "vars-dark.css"; diff --git a/theme-gitpot-light.css b/theme-gitpot-light.css index 32619da..9cc17f8 100644 --- a/theme-gitpot-light.css +++ b/theme-gitpot-light.css @@ -11,44 +11,44 @@ @import "../codemirror/light.css"; :root { - --steel-900: #10161D; - --steel-850: #131A21; - --steel-800: #171E26; - --steel-750: #1D262F; - --steel-700: #242D38; - --steel-650: #2B3642; + --steel-900: #10161d; + --steel-850: #131a21; + --steel-800: #171e26; + --steel-750: #1d262f; + --steel-700: #242d38; + --steel-650: #2b3642; --steel-600: #374351; --steel-550: #445161; - --steel-500: #515F70; - --steel-450: #5F6E80; - --steel-400: #6D7D8F; - --steel-350: #7C8C9F; - --steel-300: #8C9CAF; - --steel-250: #9DADC0; - --steel-200: #AEBED0; - --steel-150: #C0CFE0; - --steel-100: #D2E0F0; + --steel-500: #515f70; + --steel-450: #5f6e80; + --steel-400: #6d7d8f; + --steel-350: #7c8c9f; + --steel-300: #8c9caf; + --steel-250: #9dadc0; + --steel-200: #aebed0; + --steel-150: #c0cfe0; + --steel-100: #d2e0f0; - --zinc-50: #FAFAFA; - --zinc-100: #F4F4F5; - --zinc-150: #ECECEE; - --zinc-200: #E4E4E7; - --zinc-250: #DCDCE0; - --zinc-300: #D4D4D8; - --zinc-350: #BABAC1; - --zinc-400: #A1A1AA; + --zinc-50: #fafafa; + --zinc-100: #f4f4f5; + --zinc-150: #ececee; + --zinc-200: #e4e4e7; + --zinc-250: #dcdce0; + --zinc-300: #d4d4d8; + --zinc-350: #babac1; + --zinc-400: #a1a1aa; --zinc-450: #898992; - --zinc-500: #71717A; - --zinc-550: #61616A; - --zinc-600: #52525B; + --zinc-500: #71717a; + --zinc-550: #61616a; + --zinc-600: #52525b; --zinc-650: #484850; - --zinc-700: #3F3F46; + --zinc-700: #3f3f46; --zinc-750: #333338; - --zinc-800: #27272A; - --zinc-850: #1F1F23; - --zinc-900: #18181B; + --zinc-800: #27272a; + --zinc-850: #1f1f23; + --zinc-900: #18181b; - --color-primary: #D14415; + --color-primary: #d14415; --color-primary-contrast: #ffffff; /* --color-primary-dark-1: #E84E1B; @@ -59,7 +59,7 @@ --color-primary-dark-6: #77280e; --color-primary-dark-7: #69240d; */ - --color-primary-dark-1: #D14415; + --color-primary-dark-1: #d14415; --color-primary-dark-2: #aa340c; --color-primary-dark-3: #963312; --color-primary-dark-4: #812a0c; @@ -75,15 +75,15 @@ --color-primary-light-6: #ffded2; --color-primary-light-7: #f8e3dc; - --color-primary-alpha-10: #D1441519; - --color-primary-alpha-20: #D1441533; - --color-primary-alpha-30: #D144154b; - --color-primary-alpha-40: #D1441566; - --color-primary-alpha-50: #D1441580; - --color-primary-alpha-60: #D1441599; - --color-primary-alpha-70: #D14415b3; - --color-primary-alpha-80: #D14415cc; - --color-primary-alpha-90: #D14415e1; + --color-primary-alpha-10: #d1441519; + --color-primary-alpha-20: #d1441533; + --color-primary-alpha-30: #d144154b; + --color-primary-alpha-40: #d1441566; + --color-primary-alpha-50: #d1441580; + --color-primary-alpha-60: #d1441599; + --color-primary-alpha-70: #d14415b3; + --color-primary-alpha-80: #d14415cc; + --color-primary-alpha-90: #d14415e1; --color-primary-hover: var(--color-primary-dark-2); --color-primary-active: var(--color-primary-dark-4); @@ -214,9 +214,9 @@ --color-yellow-badge: #ca8a04; --color-yellow-badge-bg: #ca8a0422; --color-yellow-badge-hover-bg: #ca8a0444; - --color-orange-badge: #D14415; - --color-orange-badge-bg: #D1441522; - --color-orange-badge-hover-bg: #D1441544; + --color-orange-badge: #d14415; + --color-orange-badge-bg: #d1441522; + --color-orange-badge-hover-bg: #d1441544; --color-git: #f05133; /* target-based colors */ --color-body: #fff; @@ -239,7 +239,12 @@ --color-header-wrapper: var(--zinc-50); --color-header-wrapper-transparent: #d2e0f000; --color-light: #ffffffcc; - --color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled))); + --color-light-mimic-enabled: rgba( + 0, + 0, + 0, + calc(6 / 255 * 222 / 255 / var(--opacity-disabled)) + ); --color-light-border: #0000001d; --color-hover: #e4e4e4aa; --color-active: #d4d4d8aa; @@ -332,3 +337,6 @@ background: var(--steel-450) !important; color: var(--color-white) !important; } + +/* gitpot homepage */ +@import "vars-light.css";