egtyl/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
forgejo/web_src/css/themes/theme-forgejo-dark.css
Caesar Schinas 76aec99cdd
[BRANDING] Add Forgejo light, dark, and auto themes 
(cherry picked from commit faab0c670e)
(cherry picked from commit b6d59493c7)
(cherry picked from commit 837da0c1f4)
(cherry picked from commit 71ad245e1d)
(cherry picked from commit 85a7032f1b)

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 0c2c131bb0)

[BRANDING] Add Forgejo light, dark, and auto themes: fix import

Closes: https://codeberg.org/forgejo/forgejo/issues/562
(cherry picked from commit 2b0dc1f80f)
(cherry picked from commit 494ad6a3b7)
(cherry picked from commit 6940fc22c4)
(cherry picked from commit bd6f00656c)
(cherry picked from commit ebb506a124)
(cherry picked from commit 43d72d3781)
(cherry picked from commit 1a87adca01)
(cherry picked from commit 0704c410b4)
(cherry picked from commit 9039b47c16)
(cherry picked from commit e32bb78924)
(cherry picked from commit 053ad84f91)
(cherry picked from commit a35f1b6da7)
(cherry picked from commit 7709d6a67b)
2023-06-20 15:19:50 +02:00

279 lines
9.1 KiB
CSS
Raw Blame History

@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;
}
Reference in a new issue View git blame Copy permalink