mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2026-05-15 23:40:26 +00:00
76aec99cdd
(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 commit7709d6a67b)
279 lines
9.1 KiB
CSS
279 lines
9.1 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-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-navbar: var(--steel-850);
|
|
--color-navbar-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-header-bar: var(--steel-900);
|
|
--color-label-active-bg: #4c525e;
|
|
--color-accent: var(--color-primary-light-1);
|
|
--color-small-accent: var(--color-primary-light-5);
|
|
--color-active-line: #534d1b;
|
|
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;
|
|
}
|