Mirrors
/
gitea
mirror of https://github.com/go-gitea/gitea.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
gitea/web_src/css/themes/theme-gitea-light.css

240 lines
8.5 KiB
CSS
Raw Normal View History

Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 01:46:36 -06:00
@import "../chroma/light.css";
@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);
Light theme color enhancements (#29830) Same as https://github.com/go-gitea/gitea/pull/29822 but for light theme. Slight shift towards blue and made the themes match more, like on header and footer background. Before <img width="1342" alt="Screenshot 2024-03-16 at 00 43 03" src="https://github.com/go-gitea/gitea/assets/115237/b46021a1-241c-446a-b220-ca25cc90f3bf"> After <img width="1343" alt="Screenshot 2024-03-16 at 00 45 21" src="https://github.com/go-gitea/gitea/assets/115237/1c898875-a6bb-4bd3-b059-f82e1a145c99"> Before <img width="1018" alt="Screenshot 2024-03-16 at 00 43 13" src="https://github.com/go-gitea/gitea/assets/115237/d237ee7d-b4cc-4688-a074-1e96515ac475"> After <img width="1022" alt="Screenshot 2024-03-16 at 00 43 50" src="https://github.com/go-gitea/gitea/assets/115237/89b1da77-6bc9-4b38-9688-546e794aadfa">
2024-03-15 19:33:01 -06:00
--color-secondary: #d0d7de;
--color-secondary-dark-1: #c7ced5;
--color-secondary-dark-2: #b9c0c7;
--color-secondary-dark-3: #99a0a7;
--color-secondary-dark-4: #899097;
--color-secondary-dark-5: #7a8188;
--color-secondary-dark-6: #6a7178;
--color-secondary-dark-7: #5b6269;
--color-secondary-dark-8: #4b5259;
--color-secondary-dark-9: #3c434a;
--color-secondary-dark-10: #2c333a;
--color-secondary-dark-11: #1d242b;
--color-secondary-dark-12: #0d141b;
--color-secondary-dark-13: #00040b;
--color-secondary-light-1: #dee5ec;
--color-secondary-light-2: #e4ebf2;
--color-secondary-light-3: #ebf2f9;
--color-secondary-light-4: #f1f8ff;
--color-secondary-alpha-10: #d0d7de19;
--color-secondary-alpha-20: #d0d7de33;
--color-secondary-alpha-30: #d0d7de4b;
--color-secondary-alpha-40: #d0d7de66;
--color-secondary-alpha-50: #d0d7de80;
--color-secondary-alpha-60: #d0d7de99;
--color-secondary-alpha-70: #d0d7deb3;
--color-secondary-alpha-80: #d0d7decc;
--color-secondary-alpha-90: #d0d7dee1;
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 01:46:36 -06:00
--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 */
Minor color tweaks (#30397) New approach to color shades: Stem all colors off the body color `#1b1f23` using [this](https://pinetools.com/darken-color) and [this](https://pinetools.com/lighten-color) tool. The differences are very subtle, but it will give a more consistent color scheme until https://github.com/go-gitea/gitea/issues/30160. <img width="1342" alt="Screenshot 2024-04-10 at 20 44 16" src="https://github.com/go-gitea/gitea/assets/115237/75b65797-2521-46ea-91d8-d76f77b591b1">
2024-04-10 14:29:05 -06:00
--color-console-fg: #f7f8f9;
--color-console-fg-subtle: #bdc4cc;
Action view mobile improvements and fixes (#30309) Fix the action issue in https://github.com/go-gitea/gitea/issues/30303, specifically: - Use opaque step header hover background to avoid transparency issue - Un-sticky the `action-view-left` on mobile, it would otherwise overlap into right view - Improve commit summary, let it wrap - Fix and comment z-indexes - Tweak width for run-list-item-right so it wastes less space on desktop - Synced latest changes to console colors from dark to light theme <img width="467" alt="Screenshot 2024-04-06 at 18 58 15" src="https://github.com/go-gitea/gitea/assets/115237/8ad26b72-6cd9-4522-8ad1-6fd86b2d0d53">
2024-04-07 06:41:42 -06:00
--color-console-bg: #171b1e;
--color-console-border: #2e353b;
Minor color tweaks (#30397) New approach to color shades: Stem all colors off the body color `#1b1f23` using [this](https://pinetools.com/darken-color) and [this](https://pinetools.com/lighten-color) tool. The differences are very subtle, but it will give a more consistent color scheme until https://github.com/go-gitea/gitea/issues/30160. <img width="1342" alt="Screenshot 2024-04-10 at 20 44 16" src="https://github.com/go-gitea/gitea/assets/115237/75b65797-2521-46ea-91d8-d76f77b591b1">
2024-04-10 14:29:05 -06:00
--color-console-hover-bg: #272d33;
Action view mobile improvements and fixes (#30309) Fix the action issue in https://github.com/go-gitea/gitea/issues/30303, specifically: - Use opaque step header hover background to avoid transparency issue - Un-sticky the `action-view-left` on mobile, it would otherwise overlap into right view - Improve commit summary, let it wrap - Fix and comment z-indexes - Tweak width for run-list-item-right so it wastes less space on desktop - Synced latest changes to console colors from dark to light theme <img width="467" alt="Screenshot 2024-04-06 at 18 58 15" src="https://github.com/go-gitea/gitea/assets/115237/8ad26b72-6cd9-4522-8ad1-6fd86b2d0d53">
2024-04-07 06:41:42 -06:00
--color-console-active-bg: #2e353b;
Minor color tweaks (#30397) New approach to color shades: Stem all colors off the body color `#1b1f23` using [this](https://pinetools.com/darken-color) and [this](https://pinetools.com/lighten-color) tool. The differences are very subtle, but it will give a more consistent color scheme until https://github.com/go-gitea/gitea/issues/30160. <img width="1342" alt="Screenshot 2024-04-10 at 20 44 16" src="https://github.com/go-gitea/gitea/assets/115237/75b65797-2521-46ea-91d8-d76f77b591b1">
2024-04-10 14:29:05 -06:00
--color-console-menu-bg: #262b31;
--color-console-menu-border: #414b55;
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 01:46:36 -06:00
/* 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;
Minor color tweaks (#30397) New approach to color shades: Stem all colors off the body color `#1b1f23` using [this](https://pinetools.com/darken-color) and [this](https://pinetools.com/lighten-color) tool. The differences are very subtle, but it will give a more consistent color scheme until https://github.com/go-gitea/gitea/issues/30160. <img width="1342" alt="Screenshot 2024-04-10 at 20 44 16" src="https://github.com/go-gitea/gitea/assets/115237/75b65797-2521-46ea-91d8-d76f77b591b1">
2024-04-10 14:29:05 -06:00
--color-black: #1d2328;
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 01:46:36 -06:00
/* 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;
Minor color tweaks (#30397) New approach to color shades: Stem all colors off the body color `#1b1f23` using [this](https://pinetools.com/darken-color) and [this](https://pinetools.com/lighten-color) tool. The differences are very subtle, but it will give a more consistent color scheme until https://github.com/go-gitea/gitea/issues/30160. <img width="1342" alt="Screenshot 2024-04-10 at 20 44 16" src="https://github.com/go-gitea/gitea/assets/115237/75b65797-2521-46ea-91d8-d76f77b591b1">
2024-04-10 14:29:05 -06:00
--color-black-light: #4b5b68;
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 01:46:36 -06:00
/* 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;
Minor color tweaks (#30397) New approach to color shades: Stem all colors off the body color `#1b1f23` using [this](https://pinetools.com/darken-color) and [this](https://pinetools.com/lighten-color) tool. The differences are very subtle, but it will give a more consistent color scheme until https://github.com/go-gitea/gitea/issues/30160. <img width="1342" alt="Screenshot 2024-04-10 at 20 44 16" src="https://github.com/go-gitea/gitea/assets/115237/75b65797-2521-46ea-91d8-d76f77b591b1">
2024-04-10 14:29:05 -06:00
--color-black-dark-1: #2c3339;
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 01:46:36 -06:00
/* 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;
Light theme color enhancements (#29830) Same as https://github.com/go-gitea/gitea/pull/29822 but for light theme. Slight shift towards blue and made the themes match more, like on header and footer background. Before <img width="1342" alt="Screenshot 2024-03-16 at 00 43 03" src="https://github.com/go-gitea/gitea/assets/115237/b46021a1-241c-446a-b220-ca25cc90f3bf"> After <img width="1343" alt="Screenshot 2024-03-16 at 00 45 21" src="https://github.com/go-gitea/gitea/assets/115237/1c898875-a6bb-4bd3-b059-f82e1a145c99"> Before <img width="1018" alt="Screenshot 2024-03-16 at 00 43 13" src="https://github.com/go-gitea/gitea/assets/115237/d237ee7d-b4cc-4688-a074-1e96515ac475"> After <img width="1022" alt="Screenshot 2024-03-16 at 00 43 50" src="https://github.com/go-gitea/gitea/assets/115237/89b1da77-6bc9-4b38-9688-546e794aadfa">
2024-03-15 19:33:01 -06:00
--color-black-dark-2: #131619;
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 01:46:36 -06:00
/* ansi colors used for actions console and console files */
Minor color tweaks (#30397) New approach to color shades: Stem all colors off the body color `#1b1f23` using [this](https://pinetools.com/darken-color) and [this](https://pinetools.com/lighten-color) tool. The differences are very subtle, but it will give a more consistent color scheme until https://github.com/go-gitea/gitea/issues/30160. <img width="1342" alt="Screenshot 2024-04-10 at 20 44 16" src="https://github.com/go-gitea/gitea/assets/115237/75b65797-2521-46ea-91d8-d76f77b591b1">
2024-04-10 14:29:05 -06:00
--color-ansi-black: #1e2327;
Tweak actions color and borders (#29640) - Increase contrast overall - Unalias the ansi color in dark theme and copy them to light - Add outer border - Add border radius <img width="1337" alt="Screenshot 2024-03-06 at 22 30 03" src="https://github.com/go-gitea/gitea/assets/115237/11407c0f-0bb2-435e-a034-22b1f106d9b0"> <img width="1335" alt="Screenshot 2024-03-06 at 22 36 59" src="https://github.com/go-gitea/gitea/assets/115237/267db442-0979-4acc-a79e-8579b4cb0262">
2024-03-06 14:44:24 -07:00
--color-ansi-red: #cc4848;
--color-ansi-green: #87ab63;
--color-ansi-yellow: #cc9903;
--color-ansi-blue: #3a8ac6;
--color-ansi-magenta: #d22e8b;
--color-ansi-cyan: #00918a;
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 01:46:36 -06:00
--color-ansi-white: var(--color-console-fg-subtle);
Tweak actions color and borders (#29640) - Increase contrast overall - Unalias the ansi color in dark theme and copy them to light - Add outer border - Add border radius <img width="1337" alt="Screenshot 2024-03-06 at 22 30 03" src="https://github.com/go-gitea/gitea/assets/115237/11407c0f-0bb2-435e-a034-22b1f106d9b0"> <img width="1335" alt="Screenshot 2024-03-06 at 22 36 59" src="https://github.com/go-gitea/gitea/assets/115237/267db442-0979-4acc-a79e-8579b4cb0262">
2024-03-06 14:44:24 -07:00
--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;
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 01:46:36 -06:00
--color-ansi-bright-white: var(--color-console-fg);
/* other colors */
Light theme color enhancements (#29830) Same as https://github.com/go-gitea/gitea/pull/29822 but for light theme. Slight shift towards blue and made the themes match more, like on header and footer background. Before <img width="1342" alt="Screenshot 2024-03-16 at 00 43 03" src="https://github.com/go-gitea/gitea/assets/115237/b46021a1-241c-446a-b220-ca25cc90f3bf"> After <img width="1343" alt="Screenshot 2024-03-16 at 00 45 21" src="https://github.com/go-gitea/gitea/assets/115237/1c898875-a6bb-4bd3-b059-f82e1a145c99"> Before <img width="1018" alt="Screenshot 2024-03-16 at 00 43 13" src="https://github.com/go-gitea/gitea/assets/115237/d237ee7d-b4cc-4688-a074-1e96515ac475"> After <img width="1022" alt="Screenshot 2024-03-16 at 00 43 50" src="https://github.com/go-gitea/gitea/assets/115237/89b1da77-6bc9-4b38-9688-546e794aadfa">
2024-03-15 19:33:01 -06:00
--color-grey: #697077;
--color-grey-light: #7c838a;
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 01:46:36 -06:00
--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;
Light theme color enhancements (#29830) Same as https://github.com/go-gitea/gitea/pull/29822 but for light theme. Slight shift towards blue and made the themes match more, like on header and footer background. Before <img width="1342" alt="Screenshot 2024-03-16 at 00 43 03" src="https://github.com/go-gitea/gitea/assets/115237/b46021a1-241c-446a-b220-ca25cc90f3bf"> After <img width="1343" alt="Screenshot 2024-03-16 at 00 45 21" src="https://github.com/go-gitea/gitea/assets/115237/1c898875-a6bb-4bd3-b059-f82e1a145c99"> Before <img width="1018" alt="Screenshot 2024-03-16 at 00 43 13" src="https://github.com/go-gitea/gitea/assets/115237/d237ee7d-b4cc-4688-a074-1e96515ac475"> After <img width="1022" alt="Screenshot 2024-03-16 at 00 43 50" src="https://github.com/go-gitea/gitea/assets/115237/89b1da77-6bc9-4b38-9688-546e794aadfa">
2024-03-15 19:33:01 -06:00
--color-diff-inactive: #f0f2f4;
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 01:46:36 -06:00
--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;
Light theme color enhancements (#29830) Same as https://github.com/go-gitea/gitea/pull/29822 but for light theme. Slight shift towards blue and made the themes match more, like on header and footer background. Before <img width="1342" alt="Screenshot 2024-03-16 at 00 43 03" src="https://github.com/go-gitea/gitea/assets/115237/b46021a1-241c-446a-b220-ca25cc90f3bf"> After <img width="1343" alt="Screenshot 2024-03-16 at 00 45 21" src="https://github.com/go-gitea/gitea/assets/115237/1c898875-a6bb-4bd3-b059-f82e1a145c99"> Before <img width="1018" alt="Screenshot 2024-03-16 at 00 43 13" src="https://github.com/go-gitea/gitea/assets/115237/d237ee7d-b4cc-4688-a074-1e96515ac475"> After <img width="1022" alt="Screenshot 2024-03-16 at 00 43 50" src="https://github.com/go-gitea/gitea/assets/115237/89b1da77-6bc9-4b38-9688-546e794aadfa">
2024-03-15 19:33:01 -06:00
--color-box-header: #f1f3f5;
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 01:46:36 -06:00
--color-box-body: #ffffff;
Various code view improvements (#30014) 1. Restore missing styles for message close icon 2. Move `code-line-button` so that it does not go off-screen on small viewports 3. Make `code-line-button` look and behave like other buttons 4. Make `code-line-button` work in blame 5. Make the active selection span the whole line, not just the code part 6. Tweak colors, make dark theme code bg darker, make line numbers same color in diff and file view. 7. Move code background to parent, fixing border radius and other problems 8. Enable code wrap in blame 9. Improve blame responsiveness 10. Remove `--color-code-sidebar-bg` in blame, now it uses same background as code 11. Rename `--color-active-line` to `--color-highlight-bg` 12. Add `--color-highlight-bg` 13. Fix button group borders on hover and border-right on last button. <img width="1343" alt="Screenshot 2024-03-23 at 22 34 13" src="https://github.com/go-gitea/gitea/assets/115237/fcbb919f-5dc3-43f0-97f6-870d6f412554"> <img width="1334" alt="Screenshot 2024-03-23 at 22 34 26" src="https://github.com/go-gitea/gitea/assets/115237/ca44c3b7-4328-4645-ba49-b0dc6a5ac06d"> <img width="1338" alt="Screenshot 2024-03-23 at 22 34 57" src="https://github.com/go-gitea/gitea/assets/115237/00eb0b5a-1ec7-4669-a94a-4602b9d1c1ac"> <img width="1337" alt="Screenshot 2024-03-23 at 22 34 42" src="https://github.com/go-gitea/gitea/assets/115237/752edc4a-064f-413c-9dff-c086187fcd85"> Fixes: https://github.com/go-gitea/gitea/issues/18074
2024-03-24 06:14:03 -06:00
--color-box-body-highlight: #ecf5fd;
Misc color tweaks (#29943) Minor color tweaks: - Better text contrasts - Better distinguish nav and header wrapper in light theme - Input boxes are now white on light theme - Slightly darker dark theme background <img width="503" alt="Screenshot 2024-03-20 at 19 31 54" src="https://github.com/go-gitea/gitea/assets/115237/c7802a84-2386-4332-bd91-f419473ff644"> <img width="510" alt="Screenshot 2024-03-20 at 19 32 24" src="https://github.com/go-gitea/gitea/assets/115237/21d3529e-6e0a-413a-9e9e-a03bea2405eb">
2024-03-20 17:48:04 -06:00
--color-text-dark: #01050a;
--color-text: #181c21;
--color-text-light: #30363b;
--color-text-light-1: #40474d;
--color-text-light-2: #5b6167;
--color-text-light-3: #747c84;
Lighten text colors on dark theme for increased contrast (#29481) Improve contrast by lightening the text colors in dark theme by around 35%. Additionally, share some variables that had the same or similar color, which will ease future theme creation.
2024-02-28 22:11:11 -07:00
--color-footer: var(--color-nav-bg);
Light theme color enhancements (#29830) Same as https://github.com/go-gitea/gitea/pull/29822 but for light theme. Slight shift towards blue and made the themes match more, like on header and footer background. Before <img width="1342" alt="Screenshot 2024-03-16 at 00 43 03" src="https://github.com/go-gitea/gitea/assets/115237/b46021a1-241c-446a-b220-ca25cc90f3bf"> After <img width="1343" alt="Screenshot 2024-03-16 at 00 45 21" src="https://github.com/go-gitea/gitea/assets/115237/1c898875-a6bb-4bd3-b059-f82e1a145c99"> Before <img width="1018" alt="Screenshot 2024-03-16 at 00 43 13" src="https://github.com/go-gitea/gitea/assets/115237/d237ee7d-b4cc-4688-a074-1e96515ac475"> After <img width="1022" alt="Screenshot 2024-03-16 at 00 43 50" src="https://github.com/go-gitea/gitea/assets/115237/89b1da77-6bc9-4b38-9688-546e794aadfa">
2024-03-15 19:33:01 -06:00
--color-timeline: #d0d7de;
Lighten text colors on dark theme for increased contrast (#29481) Improve contrast by lightening the text colors in dark theme by around 35%. Additionally, share some variables that had the same or similar color, which will ease future theme creation.
2024-02-28 22:11:11 -07:00
--color-input-text: var(--color-text-dark);
Misc color tweaks (#29943) Minor color tweaks: - Better text contrasts - Better distinguish nav and header wrapper in light theme - Input boxes are now white on light theme - Slightly darker dark theme background <img width="503" alt="Screenshot 2024-03-20 at 19 31 54" src="https://github.com/go-gitea/gitea/assets/115237/c7802a84-2386-4332-bd91-f419473ff644"> <img width="510" alt="Screenshot 2024-03-20 at 19 32 24" src="https://github.com/go-gitea/gitea/assets/115237/21d3529e-6e0a-413a-9e9e-a03bea2405eb">
2024-03-20 17:48:04 -06:00
--color-input-background: #fff;
Light theme color enhancements (#29830) Same as https://github.com/go-gitea/gitea/pull/29822 but for light theme. Slight shift towards blue and made the themes match more, like on header and footer background. Before <img width="1342" alt="Screenshot 2024-03-16 at 00 43 03" src="https://github.com/go-gitea/gitea/assets/115237/b46021a1-241c-446a-b220-ca25cc90f3bf"> After <img width="1343" alt="Screenshot 2024-03-16 at 00 45 21" src="https://github.com/go-gitea/gitea/assets/115237/1c898875-a6bb-4bd3-b059-f82e1a145c99"> Before <img width="1018" alt="Screenshot 2024-03-16 at 00 43 13" src="https://github.com/go-gitea/gitea/assets/115237/d237ee7d-b4cc-4688-a074-1e96515ac475"> After <img width="1022" alt="Screenshot 2024-03-16 at 00 43 50" src="https://github.com/go-gitea/gitea/assets/115237/89b1da77-6bc9-4b38-9688-546e794aadfa">
2024-03-15 19:33:01 -06:00
--color-input-toggle-background: #d0d7de;
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 01:46:36 -06:00
--color-input-border: var(--color-secondary);
--color-input-border-hover: var(--color-secondary-dark-1);
Light theme color enhancements (#29830) Same as https://github.com/go-gitea/gitea/pull/29822 but for light theme. Slight shift towards blue and made the themes match more, like on header and footer background. Before <img width="1342" alt="Screenshot 2024-03-16 at 00 43 03" src="https://github.com/go-gitea/gitea/assets/115237/b46021a1-241c-446a-b220-ca25cc90f3bf"> After <img width="1343" alt="Screenshot 2024-03-16 at 00 45 21" src="https://github.com/go-gitea/gitea/assets/115237/1c898875-a6bb-4bd3-b059-f82e1a145c99"> Before <img width="1018" alt="Screenshot 2024-03-16 at 00 43 13" src="https://github.com/go-gitea/gitea/assets/115237/d237ee7d-b4cc-4688-a074-1e96515ac475"> After <img width="1022" alt="Screenshot 2024-03-16 at 00 43 50" src="https://github.com/go-gitea/gitea/assets/115237/89b1da77-6bc9-4b38-9688-546e794aadfa">
2024-03-15 19:33:01 -06:00
--color-light: #00001706;
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 01:46:36 -06:00
--color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled)));
Light theme color enhancements (#29830) Same as https://github.com/go-gitea/gitea/pull/29822 but for light theme. Slight shift towards blue and made the themes match more, like on header and footer background. Before <img width="1342" alt="Screenshot 2024-03-16 at 00 43 03" src="https://github.com/go-gitea/gitea/assets/115237/b46021a1-241c-446a-b220-ca25cc90f3bf"> After <img width="1343" alt="Screenshot 2024-03-16 at 00 45 21" src="https://github.com/go-gitea/gitea/assets/115237/1c898875-a6bb-4bd3-b059-f82e1a145c99"> Before <img width="1018" alt="Screenshot 2024-03-16 at 00 43 13" src="https://github.com/go-gitea/gitea/assets/115237/d237ee7d-b4cc-4688-a074-1e96515ac475"> After <img width="1022" alt="Screenshot 2024-03-16 at 00 43 50" src="https://github.com/go-gitea/gitea/assets/115237/89b1da77-6bc9-4b38-9688-546e794aadfa">
2024-03-15 19:33:01 -06:00
--color-light-border: #0000171d;
--color-hover: #00001708;
--color-active: #00001714;
--color-menu: #f8f9fb;
--color-card: #f8f9fb;
Markup color and font size fixes (#30282) 1. Distinguish inline an block code with new CSS variable `--color-markup-code-inline` 2. Various color tweaks, better contrast from background <img width="447" alt="Screenshot 2024-04-05 at 00 51 00" src="https://github.com/go-gitea/gitea/assets/115237/93e069f4-6807-4f2c-9331-2d69730919d4"> <img width="456" alt="Screenshot 2024-04-05 at 00 50 44" src="https://github.com/go-gitea/gitea/assets/115237/0dc9c745-c531-40fa-94ec-b0ba10bd7ccf">
2024-04-06 15:06:27 -06:00
--color-markup-table-row: #0030600a;
--color-markup-code-block: #00306010;
--color-markup-code-inline: #00306012;
Light theme color enhancements (#29830) Same as https://github.com/go-gitea/gitea/pull/29822 but for light theme. Slight shift towards blue and made the themes match more, like on header and footer background. Before <img width="1342" alt="Screenshot 2024-03-16 at 00 43 03" src="https://github.com/go-gitea/gitea/assets/115237/b46021a1-241c-446a-b220-ca25cc90f3bf"> After <img width="1343" alt="Screenshot 2024-03-16 at 00 45 21" src="https://github.com/go-gitea/gitea/assets/115237/1c898875-a6bb-4bd3-b059-f82e1a145c99"> Before <img width="1018" alt="Screenshot 2024-03-16 at 00 43 13" src="https://github.com/go-gitea/gitea/assets/115237/d237ee7d-b4cc-4688-a074-1e96515ac475"> After <img width="1022" alt="Screenshot 2024-03-16 at 00 43 50" src="https://github.com/go-gitea/gitea/assets/115237/89b1da77-6bc9-4b38-9688-546e794aadfa">
2024-03-15 19:33:01 -06:00
--color-button: #f8f9fb;
--color-code-bg: #fafdff;
--color-shadow: #00001726;
--color-secondary-bg: #f2f5f8;
Various code view improvements (#30014) 1. Restore missing styles for message close icon 2. Move `code-line-button` so that it does not go off-screen on small viewports 3. Make `code-line-button` look and behave like other buttons 4. Make `code-line-button` work in blame 5. Make the active selection span the whole line, not just the code part 6. Tweak colors, make dark theme code bg darker, make line numbers same color in diff and file view. 7. Move code background to parent, fixing border radius and other problems 8. Enable code wrap in blame 9. Improve blame responsiveness 10. Remove `--color-code-sidebar-bg` in blame, now it uses same background as code 11. Rename `--color-active-line` to `--color-highlight-bg` 12. Add `--color-highlight-bg` 13. Fix button group borders on hover and border-right on last button. <img width="1343" alt="Screenshot 2024-03-23 at 22 34 13" src="https://github.com/go-gitea/gitea/assets/115237/fcbb919f-5dc3-43f0-97f6-870d6f412554"> <img width="1334" alt="Screenshot 2024-03-23 at 22 34 26" src="https://github.com/go-gitea/gitea/assets/115237/ca44c3b7-4328-4645-ba49-b0dc6a5ac06d"> <img width="1338" alt="Screenshot 2024-03-23 at 22 34 57" src="https://github.com/go-gitea/gitea/assets/115237/00eb0b5a-1ec7-4669-a94a-4602b9d1c1ac"> <img width="1337" alt="Screenshot 2024-03-23 at 22 34 42" src="https://github.com/go-gitea/gitea/assets/115237/752edc4a-064f-413c-9dff-c086187fcd85"> Fixes: https://github.com/go-gitea/gitea/issues/18074
2024-03-24 06:14:03 -06:00
--color-expand-button: #cfe8fa;
Lighten text colors on dark theme for increased contrast (#29481) Improve contrast by lightening the text colors in dark theme by around 35%. Additionally, share some variables that had the same or similar color, which will ease future theme creation.
2024-02-28 22:11:11 -07:00
--color-placeholder-text: var(--color-text-light-3);
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 01:46:36 -06:00
--color-editor-line-highlight: var(--color-primary-light-6);
--color-project-board-bg: var(--color-secondary-light-4);
--color-caret: var(--color-text-dark);
Light theme color enhancements (#29830) Same as https://github.com/go-gitea/gitea/pull/29822 but for light theme. Slight shift towards blue and made the themes match more, like on header and footer background. Before <img width="1342" alt="Screenshot 2024-03-16 at 00 43 03" src="https://github.com/go-gitea/gitea/assets/115237/b46021a1-241c-446a-b220-ca25cc90f3bf"> After <img width="1343" alt="Screenshot 2024-03-16 at 00 45 21" src="https://github.com/go-gitea/gitea/assets/115237/1c898875-a6bb-4bd3-b059-f82e1a145c99"> Before <img width="1018" alt="Screenshot 2024-03-16 at 00 43 13" src="https://github.com/go-gitea/gitea/assets/115237/d237ee7d-b4cc-4688-a074-1e96515ac475"> After <img width="1022" alt="Screenshot 2024-03-16 at 00 43 50" src="https://github.com/go-gitea/gitea/assets/115237/89b1da77-6bc9-4b38-9688-546e794aadfa">
2024-03-15 19:33:01 -06:00
--color-reaction-bg: #0000170a;
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 01:46:36 -06:00
--color-reaction-hover-bg: var(--color-primary-light-5);
--color-reaction-active-bg: var(--color-primary-light-6);
Light theme color enhancements (#29830) Same as https://github.com/go-gitea/gitea/pull/29822 but for light theme. Slight shift towards blue and made the themes match more, like on header and footer background. Before <img width="1342" alt="Screenshot 2024-03-16 at 00 43 03" src="https://github.com/go-gitea/gitea/assets/115237/b46021a1-241c-446a-b220-ca25cc90f3bf"> After <img width="1343" alt="Screenshot 2024-03-16 at 00 45 21" src="https://github.com/go-gitea/gitea/assets/115237/1c898875-a6bb-4bd3-b059-f82e1a145c99"> Before <img width="1018" alt="Screenshot 2024-03-16 at 00 43 13" src="https://github.com/go-gitea/gitea/assets/115237/d237ee7d-b4cc-4688-a074-1e96515ac475"> After <img width="1022" alt="Screenshot 2024-03-16 at 00 43 50" src="https://github.com/go-gitea/gitea/assets/115237/89b1da77-6bc9-4b38-9688-546e794aadfa">
2024-03-15 19:33:01 -06:00
--color-tooltip-text: #fbfdff;
--color-tooltip-bg: #000017f0;
Misc color tweaks (#29943) Minor color tweaks: - Better text contrasts - Better distinguish nav and header wrapper in light theme - Input boxes are now white on light theme - Slightly darker dark theme background <img width="503" alt="Screenshot 2024-03-20 at 19 31 54" src="https://github.com/go-gitea/gitea/assets/115237/c7802a84-2386-4332-bd91-f419473ff644"> <img width="510" alt="Screenshot 2024-03-20 at 19 32 24" src="https://github.com/go-gitea/gitea/assets/115237/21d3529e-6e0a-413a-9e9e-a03bea2405eb">
2024-03-20 17:48:04 -06:00
--color-nav-bg: #f6f7fa;
Dark theme color enhancements (#29822) - Few very minor colors tweaks to dark theme. Slightly darker background, slightly bluer secondary colors. - Alias `--color-nav-hover-bg` in both themes. Before: <img width="1013" alt="Screenshot 2024-03-15 at 18 43 59" src="https://github.com/go-gitea/gitea/assets/115237/ce4bdb0d-6e25-4fd6-88f5-dc8f9e3093cd"> After: <img width="1016" alt="Screenshot 2024-03-15 at 19 02 04" src="https://github.com/go-gitea/gitea/assets/115237/4a6dd5a1-a5b4-4fc2-9835-05a0c2c58c42"> Before: <img width="1340" alt="Screenshot 2024-03-15 at 18 40 19" src="https://github.com/go-gitea/gitea/assets/115237/4465fa9c-d529-4a05-94d7-e21080e0a153"> After: <img width="1341" alt="Screenshot 2024-03-15 at 19 00 51" src="https://github.com/go-gitea/gitea/assets/115237/6595afef-592b-42c4-a6cd-196968ba5881">
2024-03-15 12:14:33 -06:00
--color-nav-hover-bg: var(--color-secondary-light-1);
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 01:46:36 -06:00
--color-nav-text: var(--color-text);
Introduce `.secondary-nav` and handle `.page-content` spacing universally (#29982) Fixes: https://github.com/go-gitea/gitea/issues/29981. Introduce `.secondary-nav` as a universal way for styling and margin adjustments inside `.page-content`. If the first child of `.page-content` is `.secondary-nav`, we add margin below it, otherwise we add padding to the first child. Notable changes: - `--color-header-wrapper` is replaced with `--color-secondary-nav-bg`. - `navbar` class is removed. --------- Co-authored-by: Giteabot <teabot@gitea.io> Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
2024-03-22 17:54:09 -06:00
--color-secondary-nav-bg: #f9fafb;
Lighten text colors on dark theme for increased contrast (#29481) Improve contrast by lightening the text colors in dark theme by around 35%. Additionally, share some variables that had the same or similar color, which will ease future theme creation.
2024-02-28 22:11:11 -07:00
--color-label-text: var(--color-text);
Light theme color enhancements (#29830) Same as https://github.com/go-gitea/gitea/pull/29822 but for light theme. Slight shift towards blue and made the themes match more, like on header and footer background. Before <img width="1342" alt="Screenshot 2024-03-16 at 00 43 03" src="https://github.com/go-gitea/gitea/assets/115237/b46021a1-241c-446a-b220-ca25cc90f3bf"> After <img width="1343" alt="Screenshot 2024-03-16 at 00 45 21" src="https://github.com/go-gitea/gitea/assets/115237/1c898875-a6bb-4bd3-b059-f82e1a145c99"> Before <img width="1018" alt="Screenshot 2024-03-16 at 00 43 13" src="https://github.com/go-gitea/gitea/assets/115237/d237ee7d-b4cc-4688-a074-1e96515ac475"> After <img width="1022" alt="Screenshot 2024-03-16 at 00 43 50" src="https://github.com/go-gitea/gitea/assets/115237/89b1da77-6bc9-4b38-9688-546e794aadfa">
2024-03-15 19:33:01 -06:00
--color-label-bg: #949da64b;
--color-label-hover-bg: #949da6a0;
--color-label-active-bg: #949da6ff;
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 01:46:36 -06:00
--color-accent: var(--color-primary-light-1);
--color-small-accent: var(--color-primary-light-6);
Various code view improvements (#30014) 1. Restore missing styles for message close icon 2. Move `code-line-button` so that it does not go off-screen on small viewports 3. Make `code-line-button` look and behave like other buttons 4. Make `code-line-button` work in blame 5. Make the active selection span the whole line, not just the code part 6. Tweak colors, make dark theme code bg darker, make line numbers same color in diff and file view. 7. Move code background to parent, fixing border radius and other problems 8. Enable code wrap in blame 9. Improve blame responsiveness 10. Remove `--color-code-sidebar-bg` in blame, now it uses same background as code 11. Rename `--color-active-line` to `--color-highlight-bg` 12. Add `--color-highlight-bg` 13. Fix button group borders on hover and border-right on last button. <img width="1343" alt="Screenshot 2024-03-23 at 22 34 13" src="https://github.com/go-gitea/gitea/assets/115237/fcbb919f-5dc3-43f0-97f6-870d6f412554"> <img width="1334" alt="Screenshot 2024-03-23 at 22 34 26" src="https://github.com/go-gitea/gitea/assets/115237/ca44c3b7-4328-4645-ba49-b0dc6a5ac06d"> <img width="1338" alt="Screenshot 2024-03-23 at 22 34 57" src="https://github.com/go-gitea/gitea/assets/115237/00eb0b5a-1ec7-4669-a94a-4602b9d1c1ac"> <img width="1337" alt="Screenshot 2024-03-23 at 22 34 42" src="https://github.com/go-gitea/gitea/assets/115237/752edc4a-064f-413c-9dff-c086187fcd85"> Fixes: https://github.com/go-gitea/gitea/issues/18074
2024-03-24 06:14:03 -06:00
--color-highlight-fg: #eed200;
--color-highlight-bg: #fffbdd;
Rename the default themes to gitea-light, gitea-dark, gitea-auto (#27419) Part of https://github.com/go-gitea/gitea/issues/27097: - `gitea` theme is renamed to `gitea-light` - `arc-green` theme is renamed to `gitea-dark` - `auto` theme is renamed to `gitea-auto` I put both themes in separate CSS files, removing all colors from the base CSS. Existing users will be migrated to the new theme names. The dark theme recolor will follow in a separate PR. ## :warning: BREAKING :warning: 1. If there are existing custom themes with the names `gitea-light` or `gitea-dark`, rename them before this upgrade and update the `theme` column in the `user` table for each affected user. 2. The theme in `<html>` has moved from `class="theme-name"` to `data-theme="name"`, existing customizations that depend on should be updated. --------- Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: Giteabot <teabot@gitea.io>
2023-10-06 01:46:36 -06:00
--color-overlay-backdrop: #080808c0;
accent-color: var(--color-accent);
color-scheme: light;
}