mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-12-30 12:21:06 +00:00
984c264e19
(cherry picked from commitfaab0c670e) (cherry picked from commitb6d59493c7) (cherry picked from commit837da0c1f4) (cherry picked from commit71ad245e1d) (cherry picked from commit85a7032f1b) 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 commit0c2c131bb0) [BRANDING] Add Forgejo light, dark, and auto themes: fix import Closes: https://codeberg.org/forgejo/forgejo/issues/562 (cherry picked from commit2b0dc1f80f) (cherry picked from commit494ad6a3b7) (cherry picked from commit6940fc22c4) (cherry picked from commitbd6f00656c) (cherry picked from commitebb506a124) (cherry picked from commit43d72d3781) (cherry picked from commit1a87adca01) (cherry picked from commit0704c410b4) (cherry picked from commit9039b47c16) (cherry picked from commite32bb78924) (cherry picked from commit053ad84f91) (cherry picked from commita35f1b6da7) (cherry picked from commit8cb94c01d5) [BRANDING] fix invisible label in branch protection settings (cherry picked from commit23e5d45721) (cherry picked from commitf02e4582e5) [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 <postmaster@gusted.xyz> Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/843 (cherry picked from commit74c186a380) (cherry picked from commit7e185c5ca5) [BRANDING] Add Forgejo light, dark, and auto themes (squash) variables Adapt tob6bcb79987Improve 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 inb6bcb7998These are the same changes as made in 2574dbcff to the dark theme Refs: forgejo/forgejo#893 (cherry picked from commit9e99fe4f9e) (cherry picked from commitacbb98bd91) (cherry picked from commitc80245ed87) [BRANDING] fix code highlight color in Forgejo themes (cherry picked from commitffc49a4e99) (cherry picked from commitc5f45a941e) (cherry picked from commiteee5427c9d) (cherry picked from commit89be50ca27) (cherry picked from commit74e4776ef5) (cherry picked from commit6c4e07a6a7) [BRANDING] more accessible text selection color in Forgejo themes (cherry picked from commit 7407605ffdedef8fa320477a3bd7efa06df263e2) (cherry picked from commit5aab3872cc) (cherry picked from commit1ec77d8bd0) (cherry picked from commit964c89fce7) (cherry picked from commit8a8023a441) (cherry picked from commit1c9ffeadf5) [BRANDING] Fix navigation hover color (squash) - For items in the navigation bar, use different background colours for hover. - Regression since https://github.com/go-gitea/gitea/pull/25343 (cherry picked from commit8f3f4b219c) (cherry picked from commitedfb0eef06) (cherry picked from commita6367fa48a) (cherry picked from commitd5697abe42) (cherry picked from commiteaf5370919) (cherry picked from commit58f11e7310) (cherry picked from commit732e1b35d5) (cherry picked from commit0d794ae1c9) (cherry picked from commitccc8aed308) Conflicts: modules/setting/ui.go https://codeberg.org/forgejo/forgejo/pulls/1582 (cherry picked from commit209059fbaf) (cherry picked from commit80ba2df4a7) (cherry picked from commit17b325da23) (cherry picked from commit3518b87c8d) (cherry picked from commit4042143f96) (cherry picked from commit07f976f9d7) (cherry picked from commit1bbc6b93e9) (cherry picked from commit8aa0bba307) (cherry picked from commit94c4a14ac3) Update Forgejo theme (squash) - Incorporate changes from79a4c80f8dinto the Forgejo themes. - Fix that there's no focus or active coloring on primary and secondary buttons for Forgejo themes caused by023e937141that moved variablse from base.css (shared) to the themes. - Extend hack to make red buttons darker on dark Forgejo theme to include active styling and remove the unnecessary `!important`. (cherry picked from commit2e32da4419) (cherry picked from commita4eca09543) (cherry picked from commite6e452811d) (cherry picked from commite9a5addf3d) (cherry picked from commita1b8b5fa0d) [BRANDING] Update forgejo theme - Inlcudea103b79f60and1b2cd4c4e1and376c0e25f7and023e937141into the Forgejo theme. - Fix tooltips not being visual, due to missing background color. - Fix labels not having a background color. - Fix modals not having a dimmed background. - Fix no syntax highlighting on Forgejo light due to missing imports. - Incorporate feedback from https://codeberg.org/forgejo/forgejo/issues/1117 to make the labels stand out less. (cherry picked from commitbc21dc21e1) (cherry picked from commit82323c09cc) (cherry picked from commit2da09af28d) (cherry picked from commit978aeb7cde)
323 lines
11 KiB
CSS
323 lines
11 KiB
CSS
@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-primary-hover: var(--color-primary-light-1);
|
|
--color-primary-active: var(--color-primary-light-2);
|
|
--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;
|
|
--color-secondary-hover: var(--color-secondary-light-1);
|
|
--color-secondary-active: var(--color-secondary-light-2);
|
|
/* 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;
|
|
/* dark 1 variants produced via Sass scale-color(color, $lightness: -10%) */
|
|
--color-red-dark-1: #a71919;
|
|
--color-orange-dark-1: #d34f0b;
|
|
--color-yellow-dark-1: #b67c04;
|
|
--color-olive-dark-1: #839311;
|
|
--color-green-dark-1: #137337;
|
|
--color-teal-dark-1: #0c857a;
|
|
--color-blue-dark-1: #1554e0;
|
|
--color-violet-dark-1: #6a1feb;
|
|
--color-purple-dark-1: #8519e7;
|
|
--color-pink-dark-1: #c7216b;
|
|
--color-brown-dark-1: #94674a;
|
|
--color-black-dark-1: #0f1623;
|
|
/* dark 2 variants produced via Sass scale-color(color, $lightness: -20%) */
|
|
--color-red-dark-2: #941616;
|
|
--color-orange-dark-2: #bb460a;
|
|
--color-yellow-dark-2: #ca8a04;
|
|
--color-olive-dark-2: #91a313;
|
|
--color-green-dark-2: #15803d;
|
|
--color-teal-dark-2: #0a766d;
|
|
--color-blue-dark-2: #2563eb;
|
|
--color-violet-dark-2: #5c14d8;
|
|
--color-purple-dark-2: #7c3aed;
|
|
--color-pink-dark-2: #b11d5f;
|
|
--color-brown-dark-2: #a47252;
|
|
--color-black-dark-2: #111827;
|
|
/* 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-tooltip-text: #ffffff;
|
|
--color-tooltip-bg: #000000f0;
|
|
--color-nav-bg: var(--steel-900);
|
|
--color-nav-hover-bg: var(--steel-600);
|
|
--color-label-text: #fff;
|
|
--color-label-bg: #393939;
|
|
--color-label-hover-bg: #5f5f5f;
|
|
--color-label-active-bg: #4c4c4c;
|
|
--color-accent: var(--color-primary-light-1);
|
|
--color-small-accent: var(--color-primary-light-5);
|
|
--color-active-line: var(--color-primary-alpha-20);
|
|
--color-overlay-backdrop: #080808c0;
|
|
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;
|
|
}
|
|
.ui.red.button:hover,
|
|
.ui.negative.button:hover {
|
|
background-color: #991b1b;
|
|
}
|
|
.ui.red.button:active,
|
|
.ui.negative.button:active {
|
|
background-color: #aa1919;
|
|
}
|
|
.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;
|
|
}
|
|
::selection {
|
|
background: var(--steel-100) !important;
|
|
color: #000 !important;
|
|
}
|