From c2280a20097b938315b7f00b1aa18a9f5891ef45 Mon Sep 17 00:00:00 2001 From: Gusted Date: Sun, 25 Feb 2024 23:44:00 +0100 Subject: [PATCH] Fix CSS linting errors - Trivial auto-fix applied. - Removed CSS that was no longer needed (either was removed or upstream already improved the CSS). - Used existing variables for colors. - Fix CSS selectors to match existing ones. --- web_src/css/base.css | 5 +- ...e-forgejo-dark-deuteranopia-protanopia.css | 14 +-- .../themes/theme-forgejo-dark-tritanopia.css | 14 +-- web_src/css/themes/theme-forgejo-dark.css | 116 +++++++----------- ...-forgejo-light-deuteranopia-protanopia.css | 14 +-- .../themes/theme-forgejo-light-tritanopia.css | 14 +-- web_src/css/themes/theme-forgejo-light.css | 86 +++++++------ 7 files changed, 120 insertions(+), 143 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index 2620a41a34..6f51ad57ab 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -98,11 +98,12 @@ progress::-moz-progress-bar { h1.error-code { font-size: 15em; - font-weight: 800; + font-weight: var(--font-weight-bold); color: transparent; --error-code-color-1: #a2a2a2; --error-code-color-2: #797979; - background: repeating-linear-gradient(45deg, var(--error-code-color-1), var(--error-code-color-1) 10px, var(--error-code-color-2) 10px, var(--error-code-color-2) 20px); + --gradient: repeating-linear-gradient(45deg, var(--error-code-color-1), var(--error-code-color-1) 10px, var(--error-code-color-2) 10px, var(--error-code-color-2) 20px); + background: var(--gradient); background-clip: text; } diff --git a/web_src/css/themes/theme-forgejo-dark-deuteranopia-protanopia.css b/web_src/css/themes/theme-forgejo-dark-deuteranopia-protanopia.css index 95601bf12d..b30cfd6b23 100644 --- a/web_src/css/themes/theme-forgejo-dark-deuteranopia-protanopia.css +++ b/web_src/css/themes/theme-forgejo-dark-deuteranopia-protanopia.css @@ -1,11 +1,11 @@ @import "./theme-forgejo-dark.css"; :root { - --color-diff-removed-word-bg: #693F17; - --color-diff-removed-row-border: #693F17; - --color-diff-removed-row-bg: #221B17; - --color-diff-added-word-bg: #214D88; - --color-diff-added-row-border: #214D88; - --color-diff-added-row-bg: #13233A; - --color-code-bg: #0D1117; + --color-diff-removed-word-bg: #693f17; + --color-diff-removed-row-border: #693f17; + --color-diff-removed-row-bg: #221b17; + --color-diff-added-word-bg: #214d88; + --color-diff-added-row-border: #214d88; + --color-diff-added-row-bg: #13233a; + --color-code-bg: #0d1117; } diff --git a/web_src/css/themes/theme-forgejo-dark-tritanopia.css b/web_src/css/themes/theme-forgejo-dark-tritanopia.css index adafbee0af..aefdaa1bf7 100644 --- a/web_src/css/themes/theme-forgejo-dark-tritanopia.css +++ b/web_src/css/themes/theme-forgejo-dark-tritanopia.css @@ -1,11 +1,11 @@ @import "./theme-forgejo-dark.css"; :root { - --color-diff-removed-word-bg: #792E2E; - --color-diff-removed-row-border: #792E2E; - --color-diff-removed-row-bg: #25171C; - --color-diff-added-word-bg: #214D88; - --color-diff-added-row-border: #214D88; - --color-diff-added-row-bg: #13233A; - --color-code-bg: #0D1117; + --color-diff-removed-word-bg: #792e2e; + --color-diff-removed-row-border: #792e2e; + --color-diff-removed-row-bg: #25171c; + --color-diff-added-word-bg: #214d88; + --color-diff-added-row-border: #214d88; + --color-diff-added-row-bg: #13233a; + --color-code-bg: #0d1117; } diff --git a/web_src/css/themes/theme-forgejo-dark.css b/web_src/css/themes/theme-forgejo-dark.css index d09e9e3a63..f27db7ac3b 100644 --- a/web_src/css/themes/theme-forgejo-dark.css +++ b/web_src/css/themes/theme-forgejo-dark.css @@ -1,23 +1,23 @@ @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-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; + --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; @@ -64,18 +64,18 @@ --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-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); - /* console colors - used for actions console and console files */ + /* console colors - used for actions console and console files */ --color-console-fg: #eeeff2; --color-console-fg-subtle: #959cab; --color-console-bg: #1f212b; @@ -125,7 +125,7 @@ --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%) */ + /* 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; @@ -142,31 +142,31 @@ --color-gold: #b1983b; --color-white: #ffffff; --color-diff-removed-word-bg: #783030; - --color-diff-added-word-bg: #255C39; + --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-added-row-bg: #1b3625; --color-diff-removed-row-border: #783030; - --color-diff-moved-row-border: #A67A1D; - --color-diff-added-row-border: #255C39; + --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: #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-border: #1f6e3c; + --color-success-bg: #1d462c; --color-success-text: #f0fdf4; - --color-warning-border: #A67A1D; + --color-warning-border: #a67a1d; --color-warning-bg: #644821; --color-warning-text: #fefce8; - --color-info-border: #2E50B0; - --color-info-bg: #2A396B; + --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-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; @@ -196,7 +196,7 @@ --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-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; @@ -259,27 +259,12 @@ .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; + color: var(--color-green-light) !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; @@ -304,28 +289,21 @@ i.grey.icon.icon.icon.icon { } .ui.labeled.icon.buttons > .button > .icon, .ui.labeled.icon.button > .icon { - background-color: rgba(0, 0, 0, 0.05) !important; + background-color: var(--color-light) !important; } #review-box .review-comments-counter { - background-color: #00000088 !important; - color: #fff !important; + background-color: var(--color-shadow) !important; + color: var(--color-white) !important; margin-left: 0.5em; } -.ui.tabs .ui.primary.label, -.ui.menu .ui.primary.label { - background-color: rgba(192, 192, 255, 0.2) !important; +.ui.basic.labels .primary.label, +.ui.ui.ui.basic.primary.label { 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; + color: var(--color-white) !important; } diff --git a/web_src/css/themes/theme-forgejo-light-deuteranopia-protanopia.css b/web_src/css/themes/theme-forgejo-light-deuteranopia-protanopia.css index 918a143ad7..eb48b7598d 100644 --- a/web_src/css/themes/theme-forgejo-light-deuteranopia-protanopia.css +++ b/web_src/css/themes/theme-forgejo-light-deuteranopia-protanopia.css @@ -1,11 +1,11 @@ @import "./theme-forgejo-light.css"; :root { - --color-diff-removed-word-bg: #FFDBB0; - --color-diff-removed-row-border: #FFDBB0; - --color-diff-removed-row-bg: #FFFAF3; - --color-diff-added-word-bg: #B1DBFF; - --color-diff-added-row-border: #B1DBFF; - --color-diff-added-row-bg: #EEF9FF; - --color-code-bg: #FFFFFF; + --color-diff-removed-word-bg: #ffdbb0; + --color-diff-removed-row-border: #ffdbb0; + --color-diff-removed-row-bg: #fffaf3; + --color-diff-added-word-bg: #b1dbff; + --color-diff-added-row-border: #b1dbff; + --color-diff-added-row-bg: #eef9ff; + --color-code-bg: #ffffff; } diff --git a/web_src/css/themes/theme-forgejo-light-tritanopia.css b/web_src/css/themes/theme-forgejo-light-tritanopia.css index 3bf7694a06..208da5597f 100644 --- a/web_src/css/themes/theme-forgejo-light-tritanopia.css +++ b/web_src/css/themes/theme-forgejo-light-tritanopia.css @@ -1,11 +1,11 @@ @import "./theme-forgejo-light.css"; :root { - --color-diff-removed-word-bg: #FFD0CE; - --color-diff-removed-row-border: #FFD0CE; - --color-diff-removed-row-bg: #FFF5F4; - --color-diff-added-word-bg: #B1DBFF; - --color-diff-added-row-border: #EEF9FF; - --color-diff-added-row-bg: #EEF9FF; - --color-code-bg: #FFFFFF; + --color-diff-removed-word-bg: #ffd0ce; + --color-diff-removed-row-border: #ffd0ce; + --color-diff-removed-row-bg: #fff5f4; + --color-diff-added-word-bg: #b1dbff; + --color-diff-added-row-border: #eef9ff; + --color-diff-added-row-bg: #eef9ff; + --color-code-bg: #ffffff; } diff --git a/web_src/css/themes/theme-forgejo-light.css b/web_src/css/themes/theme-forgejo-light.css index 4182e9d719..e26ba2552c 100644 --- a/web_src/css/themes/theme-forgejo-light.css +++ b/web_src/css/themes/theme-forgejo-light.css @@ -2,41 +2,41 @@ @import "../codemirror/light.css"; :root { - --steel-900: #10161D; - --steel-850: #131A21; - --steel-800: #171E26; - --steel-750: #1D262F; - --steel-700: #242D38; - --steel-650: #2B3642; + --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; + --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-500: #71717a; + --zinc-550: #61616a; + --zinc-600: #52525b; --zinc-650: #484850; - --zinc-700: #3F3F46; + --zinc-700: #3f3f46; --zinc-750: #333338; - --zinc-800: #27272A; - --zinc-850: #1F1F23; - --zinc-900: #18181B; + --zinc-800: #27272a; + --zinc-850: #1f1f23; + --zinc-900: #18181b; --color-primary: #c2410c; --color-primary-contrast: #ffffff; --color-primary-dark-1: #c2410c; @@ -93,7 +93,7 @@ --color-secondary-alpha-90: #d4d4d8e1; --color-secondary-hover: var(--color-secondary-dark-2); --color-secondary-active: var(--color-secondary-dark-4); - /* console colors - used for actions console and console files */ + /* console colors - used for actions console and console files */ --color-console-fg: #eeeff2; --color-console-fg-subtle: #959cab; --color-console-bg: #1f212b; @@ -182,9 +182,9 @@ --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-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; @@ -214,7 +214,7 @@ --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-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; @@ -254,7 +254,7 @@ color-scheme: light; } .text.green.svg { - color: #16a34a !important; + color: var(--color-green-light) !important; } .ui.secondary.vertical.menu { border-radius: 0.28571429rem !important; @@ -279,24 +279,22 @@ } .ui.labeled.icon.buttons > .button > .icon, .ui.labeled.icon.button > .icon { - background-color: rgba(0, 0, 0, 0.05) !important; + background-color: var(--color-shadow) !important; } #review-box .review-comments-counter { - background-color: #ffffffaa !important; - color: #000 !important; + background-color: var(--color-label-bg) !important; margin-left: 0.5em; } -.ui.tabs .ui.primary.label, -.ui.menu .ui.primary.label { - background-color: rgba(0, 0, 0, 0.15) !important; +.ui.basic.labels .primary.label, +.ui.ui.ui.basic.primary.label { 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; + border-color: var(--color-yellow-light) !important; } ::selection { background: var(--steel-450) !important; - color: #fff !important; + color: var(--color-white) !important; }