From 89be50ca27a7ad33f109bbc3549220b37875206a Mon Sep 17 00:00:00 2001 From: Caesar Schinas Date: Sun, 25 Dec 2022 01:44:04 -1000 Subject: [PATCH] [BRANDING] Add Forgejo light, dark, and auto themes (cherry picked from commit faab0c670e22588bc643d71b650560c2ccca2c8e) (cherry picked from commit b6d59493c7fa0bfa62095abb99c5c5a29bcf1659) (cherry picked from commit 837da0c1f41b40853eb4aebc40af16433cf7a9c2) (cherry picked from commit 71ad245e1d6f7f5b002c1c5e9831e872d157f906) (cherry picked from commit 85a7032f1b1c0d80e3d3960e9d902e9e66e687a5) Conflicts: web_src/css/themes/theme-forgejo-auto.less web_src/css/themes/theme-forgejo-dark.less web_src/css/themes/theme-forgejo-light.less web_src/less/_home.less see https://codeberg.org/forgejo/forgejo/pulls/552 (cherry picked from commit 0c2c131bb06024fca7d5c8ef6a2696d5f6aa4a1b) [BRANDING] Add Forgejo light, dark, and auto themes: fix import Closes: https://codeberg.org/forgejo/forgejo/issues/562 (cherry picked from commit 2b0dc1f80ff18d1c94df74c77a80e3651e7cb2ed) (cherry picked from commit 494ad6a3b7cd3328c835e6c7c76a55a77d47a60d) (cherry picked from commit 6940fc22c4917e86b25cf3c6c2ead9057ae726d4) (cherry picked from commit bd6f00656c457339ef3d08612911594358a15f14) (cherry picked from commit ebb506a1247751b1182348b281089dc00a65c741) (cherry picked from commit 43d72d37811c8b9d00b1d046341401643f66b289) (cherry picked from commit 1a87adca018545f6d2db0dad9e5d7cb59f6a97b8) (cherry picked from commit 0704c410b4e8a0b610e82f6ebe9209fb485ee722) (cherry picked from commit 9039b47c160e7fce2bd75167a0358eb7e7458e2d) (cherry picked from commit e32bb7892481a80156163dbf5063da0c8ead27d4) (cherry picked from commit 053ad84f91f994f96f4d9d037ff37e25b468c424) (cherry picked from commit a35f1b6da7a061a3d0717548d8f4e0972e7bb0ec) (cherry picked from commit 8cb94c01d5bcd453938924ce6c6a6804ce9ec255) [BRANDING] fix invisible label in branch protection settings (cherry picked from commit 23e5d457219a68f49938395b5532231ce4ac0022) (cherry picked from commit f02e4582e51a6a2eba93ddd599b7ea3679388e55) [BRANDING] Fix commit label for Forgejo Dark theme (#843) - Define the `--color-label-text` variable with a light color, which is currently used for commit's SHA Co-authored-by: Gusted Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/843 (cherry picked from commit 74c186a3806e37fcca8087ad79ba7c1f8e0d559e) (cherry picked from commit 7e185c5ca5298fad12fcc78b504d96163e71ad71) [BRANDING] Add Forgejo light, dark, and auto themes (squash) variables Adapt to b6bcb79987ae3c9095fe2b2c7c0a3e4b42cdebba Improve notification icon and navbar Refs: https://codeberg.org/forgejo/forgejo/issues/893 [BRANDING] Add Forgejo light variables Updates the Forgejo light theme with the changes in b6bcb7998 These are the same changes as made in 2574dbcff to the dark theme Refs: forgejo/forgejo#893 (cherry picked from commit 9e99fe4f9ec79aebbf34490e12b0acf3097dd5c7) (cherry picked from commit acbb98bd912fc3a28d464eaef1d756f54fd87e8e) (cherry picked from commit c80245ed87d09067d880d6f91c3edaa35e4346de) [BRANDING] fix code highlight color in Forgejo themes (cherry picked from commit ffc49a4e992162a480d5056e1211fc7496e4aa06) (cherry picked from commit c5f45a941e3dd8882164a88b2653407fedf6dea0) (cherry picked from commit eee5427c9d581b8e2cd254d4a15508200622aef0) --- modules/setting/ui.go | 4 +- web_src/css/home.css | 4 +- web_src/css/themes/theme-forgejo-auto.css | 2 + web_src/css/themes/theme-forgejo-dark.css | 281 +++++++++++++++++++++ web_src/css/themes/theme-forgejo-light.css | 251 ++++++++++++++++++ 5 files changed, 538 insertions(+), 4 deletions(-) create mode 100644 web_src/css/themes/theme-forgejo-auto.css create mode 100644 web_src/css/themes/theme-forgejo-dark.css create mode 100644 web_src/css/themes/theme-forgejo-light.css diff --git a/modules/setting/ui.go b/modules/setting/ui.go index 4116da1166..c095606f3a 100644 --- a/modules/setting/ui.go +++ b/modules/setting/ui.go @@ -76,8 +76,8 @@ var UI = struct { CodeCommentLines: 4, ReactionMaxUserNum: 10, MaxDisplayFileSize: 8388608, - DefaultTheme: `auto`, - Themes: []string{`auto`, `gitea`, `arc-green`}, + DefaultTheme: `forgejo-auto`, + Themes: []string{`forgejo-auto`, `forgejo-light`, `forgejo-dark`, `auto`, `gitea`, `arc-green`}, Reactions: []string{`+1`, `-1`, `laugh`, `hooray`, `confused`, `heart`, `rocket`, `eyes`}, CustomEmojis: []string{`git`, `gitea`, `codeberg`, `gitlab`, `github`, `gogs`, `forgejo`}, CustomEmojisMap: map[string]string{"git": ":git:", "gitea": ":gitea:", "codeberg": ":codeberg:", "gitlab": ":gitlab:", "github": ":github:", "gogs": ":gogs:", "forgejo": ":forgejo:"}, diff --git a/web_src/css/home.css b/web_src/css/home.css index 28992ef31f..22f1a2dc98 100644 --- a/web_src/css/home.css +++ b/web_src/css/home.css @@ -21,7 +21,7 @@ } .home .hero .svg { - color: var(--color-green); + color: var(--color-primary); height: 40px; width: 50px; vertical-align: bottom; @@ -40,7 +40,7 @@ } .home a { - color: var(--color-green); + color: var(--color-primary); } .page-footer { diff --git a/web_src/css/themes/theme-forgejo-auto.css b/web_src/css/themes/theme-forgejo-auto.css new file mode 100644 index 0000000000..ebf59942ea --- /dev/null +++ b/web_src/css/themes/theme-forgejo-auto.css @@ -0,0 +1,2 @@ +@import "theme-forgejo-light.css"; +@import "theme-forgejo-dark.css" (prefers-color-scheme: dark); diff --git a/web_src/css/themes/theme-forgejo-dark.css b/web_src/css/themes/theme-forgejo-dark.css new file mode 100644 index 0000000000..092ef45f64 --- /dev/null +++ b/web_src/css/themes/theme-forgejo-dark.css @@ -0,0 +1,281 @@ +@import "../chroma/dark.css"; +@import "../codemirror/dark.css"; +:root { + --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; + --is-dark-theme: true; + --color-primary: #fb923c; + --color-primary-contrast: #000; + --color-primary-dark-1: #fdba74; + --color-primary-dark-2: #fdba74; + --color-primary-dark-3: #fed7aa; + --color-primary-dark-4: #fed7aa; + --color-primary-dark-5: #ffedd5; + --color-primary-dark-6: #ffedd5; + --color-primary-dark-7: #fff7ed; + --color-primary-light-1: #f97316; + --color-primary-light-2: #ea580c; + --color-primary-light-3: #c2410c; + --color-primary-light-4: #9a3412; + --color-primary-light-5: #9a3412; + --color-primary-light-6: #7c2d12; + --color-primary-light-7: #7c2d12; + --color-primary-alpha-10: #ea580c19; + --color-primary-alpha-20: #ea580c33; + --color-primary-alpha-30: #ea580c4b; + --color-primary-alpha-40: #ea580c66; + --color-primary-alpha-50: #ea580c80; + --color-primary-alpha-60: #ea580c99; + --color-primary-alpha-70: #ea580cb3; + --color-primary-alpha-80: #ea580ccc; + --color-primary-alpha-90: #ea580ce1; + --color-secondary: var(--steel-700); + --color-secondary-dark-1: var(--steel-550); + --color-secondary-dark-2: var(--steel-500); + --color-secondary-dark-3: var(--steel-450); + --color-secondary-dark-4: var(--steel-400); + --color-secondary-dark-5: var(--steel-350); + --color-secondary-dark-6: var(--steel-300); + --color-secondary-dark-7: var(--steel-250); + --color-secondary-dark-8: var(--steel-200); + --color-secondary-dark-9: var(--steel-150); + --color-secondary-dark-10: var(--steel-100); + --color-secondary-dark-11: var(--steel-100); + --color-secondary-dark-12: var(--steel-100); + --color-secondary-dark-13: var(--steel-100); + --color-secondary-light-1: var(--steel-650); + --color-secondary-light-2: var(--steel-700); + --color-secondary-light-3: var(--steel-750); + --color-secondary-light-4: var(--steel-800); + --color-secondary-alpha-10: #2B364219; + --color-secondary-alpha-20: #2B364233; + --color-secondary-alpha-30: #2B36424b; + --color-secondary-alpha-40: #2B364266; + --color-secondary-alpha-50: #2B364280; + --color-secondary-alpha-60: #2B364299; + --color-secondary-alpha-70: #2B3642b3; + --color-secondary-alpha-80: #2B3642cc; + --color-secondary-alpha-90: #2B3642e1; + /* colors */ + --color-red: #b91c1c; + --color-orange: #ea580c; + --color-yellow: #ca8a04; + --color-olive: #91a313; + --color-green: #15803d; + --color-teal: #0d9488; + --color-blue: #2563eb; + --color-violet: #7c3aed; + --color-purple: #9333ea; + --color-pink: #db2777; + --color-brown: #a47252; + --color-grey: var(--steel-500); + --color-black: #111827; + /* light variants */ + --color-red-light: #dc2626; + --color-orange-light: #f97316; + --color-yellow-light: #eab308; + --color-olive-light: #839311; + --color-green-light: #16a34a; + --color-teal-light: #14b8a6; + --color-blue-light: #3b82f6; + --color-violet-light: #8b5cf6; + --color-purple-light: #a855f7; + --color-pink-light: #ec4899; + --color-brown-light: #94674a; + --color-grey-light: var(--steel-300); + --color-black-light: #1f2937; + /* other colors */ + --color-gold: #b1983b; + --color-white: #ffffff; + --color-diff-removed-word-bg: #783030; + --color-diff-added-word-bg: #255C39; + --color-diff-removed-row-bg: #432121; + --color-diff-moved-row-bg: #825718; + --color-diff-added-row-bg: #1B3625; + --color-diff-removed-row-border: #783030; + --color-diff-moved-row-border: #A67A1D; + --color-diff-added-row-border: #255C39; + --color-diff-inactive: var(--steel-650); + --color-error-border: #783030; + --color-error-bg: #5F2525; + --color-error-bg-active: #783030; + --color-error-bg-hover: #783030; + --color-error-text: #fef2f2; + --color-success-border: #1F6E3C; + --color-success-bg: #1D462C; + --color-success-text: #f0fdf4; + --color-warning-border: #A67A1D; + --color-warning-bg: #644821; + --color-warning-text: #fefce8; + --color-info-border: #2E50B0; + --color-info-bg: #2A396B; + --color-info-text: var(--steel-100); + --color-red-badge: #B91C1C; + --color-red-badge-bg: #B91C1C22; + --color-red-badge-hover-bg: #B91C1C44; + --color-green-badge: #16a34a; + --color-green-badge-bg: #16a34a22; + --color-green-badge-hover-bg: #16a34a44; + --color-yellow-badge: #ca8a04; + --color-yellow-badge-bg: #ca8a0422; + --color-yellow-badge-hover-bg: #ca8a0444; + --color-orange-badge: #ea580c; + --color-orange-badge-bg: #ea580c22; + --color-orange-badge-hover-bg: #ea580c44; + --color-git: #f05133; + /* target-based colors */ + --color-body: var(--steel-800); + --color-box-header: var(--steel-700); + --color-box-body: var(--steel-750); + --color-box-body-highlight: var(--steel-650); + --color-text-dark: #fff; + --color-text: var(--steel-100); + --color-text-light: var(--steel-150); + --color-text-light-1: var(--steel-150); + --color-text-light-2: var(--steel-200); + --color-text-light-3: var(--steel-200); + --color-footer: var(--steel-900); + --color-timeline: var(--steel-650); + --color-input-text: var(--steel-100); + --color-input-background: var(--steel-650); + --color-input-toggle-background: var(--steel-650); + --color-input-border: var(--steel-550); + --color-input-border-hover: var(--steel-450); + --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-border: #ffffff28; + --color-hover: var(--steel-600); + --color-active: var(--steel-650); + --color-menu: var(--steel-700); + --color-card: var(--steel-700); + --color-markup-table-row: #ffffff06; + --color-markup-code-block: var(--steel-800); + --color-button: var(--steel-600); + --color-code-bg: var(--steel-750); + --color-code-sidebar-bg: var(--steel-600); + --color-shadow: #00000060; + --color-secondary-bg: var(--steel-700); + --color-text-focus: #fff; + --color-expand-button: #3c404d; + --color-placeholder-text: var(--steel-450); + --color-editor-line-highlight: var(--steel-700); + --color-project-board-bg: var(--color-secondary-light-3); + --color-project-board-dark-label: var(--color-text-light-3); + --color-caret: var(--color-text); + /* should ideally be --color-text-dark, see #15651 */ + --color-reaction-bg: #ffffff12; + --color-reaction-active-bg: var(--color-primary-alpha-30); + --color-nav-bg: var(--steel-900); + --color-nav-hover-bg: var(--steel-900); + --color-label-active-bg: #4c525e; + --color-label-text: #fff; + --color-accent: var(--color-primary-light-1); + --color-small-accent: var(--color-primary-light-5); + --color-active-line: var(--color-primary-alpha-20); + accent-color: var(--color-accent); + color-scheme: dark; +} +/* invert emojis that are hard to read otherwise */ +.emoji[aria-label="check mark"], +.emoji[aria-label="currency exchange"], +.emoji[aria-label="TOP arrow"], +.emoji[aria-label="END arrow"], +.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="trade mark"], +.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); +} +.following.bar.light { + border-bottom-color: #ffffff11 !important; +} +.text.green.svg { + color: #16a34a !important; +} +i.grey.icon.icon.icon.icon { + color: var(--steel-350) !important; +} +.ui.red.button, +.ui.negative.button { + background-color: #7f1d1d !important; + color: #fff !important; + border-color: var(--color-light-border) !important; +} +.ui.red.button:hover, +.ui.negative.button:hover { + background-color: #991b1b !important; +} +.ui.secondary.vertical.menu { + border-radius: 0.28571429rem !important; + overflow: hidden; +} +.ui.secondary.vertical.menu > .item { + border-radius: 0 !important; +} +.ui.basic.primary.button.item { + background-color: var(--color-active) !important; + color: var(--color-text) !important; + box-shadow: none !important; +} +.ui.red.label.notification_count, +.ui.primary.label, +.ui.primary.labels .label { + background-color: var(--color-primary-light-3) !important; +} +.repository.view.issue .comment-list .code-comment + .code-comment { + margin: 1.25rem 0 !important; + padding-top: 1.25rem !important; + border-top-color: var(--steel-650) !important; +} +.ui.labeled.icon.buttons > .button > .icon, +.ui.labeled.icon.button > .icon { + background-color: rgba(0, 0, 0, 0.05) !important; +} +#review-box .review-comments-counter { + background-color: #00000088 !important; + color: #fff !important; + margin-left: 0.5em; +} +.ui.tabs .ui.primary.label, +.ui.menu .ui.primary.label { + background-color: rgba(192, 192, 255, 0.2) !important; + color: var(--color-text-dark) !important; +} +.ui.basic.yellow.label.pending-label { + background: var(--color-light) !important; +} +.ui.tertiary.button { + color: #fff9; +} +.ui.tertiary.button:hover { + color: #ccc; +} diff --git a/web_src/css/themes/theme-forgejo-light.css b/web_src/css/themes/theme-forgejo-light.css new file mode 100644 index 0000000000..85d0060652 --- /dev/null +++ b/web_src/css/themes/theme-forgejo-light.css @@ -0,0 +1,251 @@ +:root { + --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; + --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-650: #484850; + --zinc-700: #3F3F46; + --zinc-750: #333338; + --zinc-800: #27272A; + --zinc-850: #1F1F23; + --zinc-900: #18181B; + --color-primary: #c2410c; + --color-primary-contrast: #ffffff; + --color-primary-dark-1: #c2410c; + --color-primary-dark-2: #9a3412; + --color-primary-dark-3: #9a3412; + --color-primary-dark-4: #7c2d12; + --color-primary-dark-5: #7c2d12; + --color-primary-dark-6: #7c2d12; + --color-primary-dark-7: #7c2d12; + --color-primary-light-1: #ea580c; + --color-primary-light-2: #f97316; + --color-primary-light-3: #fb923c; + --color-primary-light-4: #fdba74; + --color-primary-light-5: #fed7aa; + --color-primary-light-6: #ffedd5; + --color-primary-light-7: #fff7ed; + --color-primary-alpha-10: #c2410c19; + --color-primary-alpha-20: #c2410c33; + --color-primary-alpha-30: #c2410c4b; + --color-primary-alpha-40: #c2410c66; + --color-primary-alpha-50: #c2410c80; + --color-primary-alpha-60: #c2410c99; + --color-primary-alpha-70: #c2410cb3; + --color-primary-alpha-80: #c2410ccc; + --color-primary-alpha-90: #c2410ce1; + --color-secondary: var(--zinc-200); + --color-secondary-dark-1: var(--zinc-200); + --color-secondary-dark-2: var(--zinc-300); + --color-secondary-dark-3: var(--zinc-300); + --color-secondary-dark-4: var(--zinc-400); + --color-secondary-dark-5: var(--zinc-400); + --color-secondary-dark-6: var(--zinc-500); + --color-secondary-dark-7: var(--zinc-500); + --color-secondary-dark-8: var(--zinc-600); + --color-secondary-dark-9: var(--zinc-600); + --color-secondary-dark-10: var(--zinc-700); + --color-secondary-dark-11: var(--zinc-700); + --color-secondary-dark-12: var(--zinc-800); + --color-secondary-dark-13: var(--zinc-800); + --color-secondary-light-1: var(--zinc-200); + --color-secondary-light-2: var(--zinc-100); + --color-secondary-light-3: var(--zinc-100); + --color-secondary-light-4: var(--zinc-50); + --color-secondary-alpha-10: #d4d4d819; + --color-secondary-alpha-20: #d4d4d833; + --color-secondary-alpha-30: #d4d4d84b; + --color-secondary-alpha-40: #d4d4d866; + --color-secondary-alpha-50: #d4d4d880; + --color-secondary-alpha-60: #d4d4d899; + --color-secondary-alpha-70: #d4d4d8b3; + --color-secondary-alpha-80: #d4d4d8cc; + --color-secondary-alpha-90: #d4d4d8e1; + /* colors */ + --color-red: #dc2626; + --color-orange: #ea580c; + --color-yellow: #ca8a04; + --color-olive: #91a313; + --color-green: #15803d; + --color-teal: #0d9488; + --color-blue: #2563eb; + --color-violet: #7c3aed; + --color-purple: #9333ea; + --color-pink: #db2777; + --color-brown: #a47252; + --color-grey: #4b5563; + --color-black: #000000; + /* light variants */ + --color-red-light: #ef4444; + --color-orange-light: #f97316; + --color-yellow-light: #eab308; + --color-olive-light: #839311; + --color-green-light: #16a34a; + --color-teal-light: #14b8a6; + --color-blue-light: #3b82f6; + --color-violet-light: #8b5cf6; + --color-purple-light: #a855f7; + --color-pink-light: #ec4899; + --color-brown-light: #94674a; + --color-grey-light: #6b7280; + --color-black-light: #181818; + /* other colors */ + --color-gold: #b1983b; + --color-white: #ffffff; + --color-diff-removed-word-bg: #fca5a5; + --color-diff-added-word-bg: #86efac; + --color-diff-removed-row-bg: #fee2e2; + --color-diff-moved-row-bg: #fef9c3; + --color-diff-added-row-bg: #dcfce7; + --color-diff-removed-row-border: #fca5a5; + --color-diff-moved-row-border: #fde047; + --color-diff-added-row-border: #86efac; + --color-diff-inactive: var(--zinc-100); + --color-error-border: #fecaca; + --color-error-bg: #fee2e2; + --color-error-bg-active: #fca5a5; + --color-error-bg-hover: #fecaca; + --color-error-text: #7f1d1d; + --color-success-border: #bbf7d0; + --color-success-bg: #dcfce7; + --color-success-text: #14532d; + --color-warning-border: #fde047; + --color-warning-bg: #fef3c7; + --color-warning-text: #78350f; + --color-info-border: #bae6fd; + --color-info-bg: #e0f2fe; + --color-info-text: #0c4a6e; + --color-red-badge: #B91C1C; + --color-red-badge-bg: #B91C1C22; + --color-red-badge-hover-bg: #B91C1C44; + --color-green-badge: #16a34a; + --color-green-badge-bg: #16a34a22; + --color-green-badge-hover-bg: #16a34a44; + --color-yellow-badge: #ca8a04; + --color-yellow-badge-bg: #ca8a0422; + --color-yellow-badge-hover-bg: #ca8a0444; + --color-orange-badge: #ea580c; + --color-orange-badge-bg: #ea580c22; + --color-orange-badge-hover-bg: #ea580c44; + --color-git: #f05133; + /* target-based colors */ + --color-body: #fff; + --color-box-header: var(--zinc-100); + --color-box-body: var(--zinc-50); + --color-box-body-highlight: var(--zinc-200); + --color-text-dark: #000; + --color-text: var(--zinc-900); + --color-text-light: var(--zinc-700); + --color-text-light-1: var(--zinc-650); + --color-text-light-2: var(--zinc-600); + --color-text-light-3: var(--zinc-550); + --color-footer: var(--zinc-100); + --color-timeline: var(--zinc-200); + --color-input-text: var(--zinc-800); + --color-input-background: #fff; + --color-input-toggle-background: #fff; + --color-input-border: var(--zinc-300); + --color-input-border-hover: var(--zinc-400); + --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-border: #0000001d; + --color-hover: #e4e4e4aa; + --color-active: #d4d4d8aa; + --color-menu: var(--zinc-100); + --color-card: var(--zinc-50); + --color-markup-table-row: #ffffff06; + --color-markup-code-block: var(--zinc-150); + --color-button: var(--zinc-150); + --color-code-bg: var(--zinc-50); + --color-code-sidebar-bg: var(--zinc-100); + --color-shadow: #00000060; + --color-secondary-bg: var(--zinc-100); + --color-text-focus: #fff; + --color-expand-button: var(--zinc-200); + --color-placeholder-text: var(--zinc-400); + --color-editor-line-highlight: var(--zinc-100); + --color-project-board-bg: var(--color-secondary-light-2); + --color-project-board-dark-label: var(--color-text-light-3); + --color-caret: var(--color-text); + /* should ideally be --color-text-dark, see #15651 */ + --color-reaction-bg: #0000000a; + --color-reaction-active-bg: var(--color-primary-alpha-20); + --color-nav-bg: var(--zinc-100); + --color-nav-hover-bg: var(--zinc-100); + --color-label-active-bg: #4c525e; + --color-accent: var(--color-primary-light-1); + --color-small-accent: var(--color-primary-light-5); + --color-active-line: var(--color-primary-light-6); + accent-color: var(--color-accent); + color-scheme: light; +} +.text.green.svg { + color: #16a34a !important; +} +.ui.secondary.vertical.menu { + border-radius: 0.28571429rem !important; + overflow: hidden; +} +.ui.secondary.vertical.menu > .item { + border-radius: 0 !important; +} +.ui.basic.primary.button.item { + background-color: var(--color-active) !important; + color: var(--color-text) !important; + box-shadow: none !important; +} +.ui.red.label.notification_count, +.ui.primary.labels .label { + background-color: var(--color-primary-dark-1) !important; +} +.repository.view.issue .comment-list .code-comment + .code-comment { + margin: 1.25rem 0 !important; + padding-top: 1.25rem !important; + border-top-color: var(--zinc-250) !important; +} +.ui.labeled.icon.buttons > .button > .icon, +.ui.labeled.icon.button > .icon { + background-color: rgba(0, 0, 0, 0.05) !important; +} +#review-box .review-comments-counter { + background-color: #ffffffaa !important; + color: #000 !important; + margin-left: 0.5em; +} +.ui.tabs .ui.primary.label, +.ui.menu .ui.primary.label { + background-color: rgba(0, 0, 0, 0.15) !important; + color: var(--color-text-dark) !important; +} +.ui.basic.yellow.label.pending-label { + background: var(--color-warning-bg) !important; + color: var(--color-warning-text) !important; + border-color: #eab308 !important; +}