From 16f13265143ff08cb6c33e976998b262e94fe569 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 6 Mar 2024 22:44:24 +0100 Subject: [PATCH] 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 Screenshot 2024-03-06 at 22 30 03 Screenshot 2024-03-06 at 22 36 59 --- web_src/css/themes/theme-gitea-dark.css | 36 ++++++++++---------- web_src/css/themes/theme-gitea-light.css | 42 ++++++++++++------------ web_src/js/components/RepoActionView.vue | 8 +++-- 3 files changed, 44 insertions(+), 42 deletions(-) diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css index ac77b7bbd9..c187888a38 100644 --- a/web_src/css/themes/theme-gitea-dark.css +++ b/web_src/css/themes/theme-gitea-dark.css @@ -61,10 +61,10 @@ --color-secondary-hover: var(--color-secondary-dark-3); --color-secondary-active: var(--color-secondary-dark-2); /* console colors - used for actions console and console files */ - --color-console-fg: #d9dde2; - --color-console-fg-subtle: #95989c; - --color-console-bg: #1c2023; - --color-console-border: #272b2e; + --color-console-fg: #f8f8f9; + --color-console-fg-subtle: #bec4c8; + --color-console-bg: #181b1d; + --color-console-border: #313538; --color-console-hover-bg: #ffffff16; --color-console-active-bg: #313538; --color-console-menu-bg: #272b2e; @@ -122,21 +122,21 @@ --color-brown-dark-2: #835b42; --color-black-dark-2: #292a2e; /* ansi colors used for actions console and console files */ - --color-ansi-black: var(--color-black); - --color-ansi-red: var(--color-red); - --color-ansi-green: var(--color-green); - --color-ansi-yellow: var(--color-yellow); - --color-ansi-blue: var(--color-blue); - --color-ansi-magenta: var(--color-pink); - --color-ansi-cyan: var(--color-teal); + --color-ansi-black: #1f2326; + --color-ansi-red: #cc4848; + --color-ansi-green: #87ab63; + --color-ansi-yellow: #cc9903; + --color-ansi-blue: #3a8ac6; + --color-ansi-magenta: #d22e8b; + --color-ansi-cyan: #00918a; --color-ansi-white: var(--color-console-fg-subtle); - --color-ansi-bright-black: var(--color-black-light); - --color-ansi-bright-red: var(--color-red-light); - --color-ansi-bright-green: var(--color-green-light); - --color-ansi-bright-yellow: var(--color-yellow-light); - --color-ansi-bright-blue: var(--color-blue-light); - --color-ansi-bright-magenta: var(--color-pink-light); - --color-ansi-bright-cyan: var(--color-teal-light); + --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; --color-ansi-bright-white: var(--color-console-fg); /* other colors */ --color-grey: #3c4043; diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css index 5c375712d8..5137e0774c 100644 --- a/web_src/css/themes/theme-gitea-light.css +++ b/web_src/css/themes/theme-gitea-light.css @@ -61,14 +61,14 @@ --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 */ - --color-console-fg: #eeeff2; - --color-console-fg-subtle: #959cab; - --color-console-bg: #262936; - --color-console-border: #383c47; + --color-console-fg: #f8f8f9; + --color-console-fg-subtle: #bec4c8; + --color-console-bg: #181b1d; + --color-console-border: #313538; --color-console-hover-bg: #ffffff16; - --color-console-active-bg: #454a57; - --color-console-menu-bg: #383c47; - --color-console-menu-border: #5c6374; + --color-console-active-bg: #313538; + --color-console-menu-bg: #272b2e; + --color-console-menu-border: #464a4d; /* named colors */ --color-red: #db2828; --color-orange: #f2711c; @@ -122,21 +122,21 @@ --color-brown-dark-2: #845232; --color-black-dark-2: #161617; /* ansi colors used for actions console and console files */ - --color-ansi-black: var(--color-black); - --color-ansi-red: var(--color-red); - --color-ansi-green: var(--color-green); - --color-ansi-yellow: var(--color-yellow); - --color-ansi-blue: var(--color-blue); - --color-ansi-magenta: var(--color-pink); - --color-ansi-cyan: var(--color-teal); + --color-ansi-black: #1f2326; + --color-ansi-red: #cc4848; + --color-ansi-green: #87ab63; + --color-ansi-yellow: #cc9903; + --color-ansi-blue: #3a8ac6; + --color-ansi-magenta: #d22e8b; + --color-ansi-cyan: #00918a; --color-ansi-white: var(--color-console-fg-subtle); - --color-ansi-bright-black: var(--color-black-light); - --color-ansi-bright-red: var(--color-red-light); - --color-ansi-bright-green: var(--color-green-light); - --color-ansi-bright-yellow: var(--color-yellow-light); - --color-ansi-bright-blue: var(--color-blue-light); - --color-ansi-bright-magenta: var(--color-pink-light); - --color-ansi-bright-cyan: var(--color-teal-light); + --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; --color-ansi-bright-white: var(--color-console-fg); /* other colors */ --color-grey: #707070; diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue index 3801848519..97cd05b45b 100644 --- a/web_src/js/components/RepoActionView.vue +++ b/web_src/js/components/RepoActionView.vue @@ -622,6 +622,8 @@ export function initRepositoryActionView() { width: 70%; display: flex; flex-direction: column; + border: 1px solid var(--color-console-border); + border-radius: var(--border-radius); } /* begin fomantic button overrides */ @@ -681,7 +683,6 @@ export function initRepositoryActionView() { justify-content: space-between; align-items: center; padding: 0 12px; - border-bottom: 1px solid var(--color-console-border); background-color: var(--color-console-bg); position: sticky; top: 0; @@ -705,6 +706,7 @@ export function initRepositoryActionView() { background-color: var(--color-console-bg); max-height: 100%; border-radius: 0 0 var(--border-radius) var(--border-radius); + border-top: 1px solid var(--color-console-border); z-index: 0; } @@ -790,7 +792,7 @@ export function initRepositoryActionView() { /* class names 'log-time-seconds' and 'log-time-stamp' are used in the method toggleTimeDisplay */ .job-log-line .line-num, .log-time-seconds { width: 48px; - color: var(--color-grey-light); + color: var(--color-text-light-3); text-align: right; user-select: none; } @@ -806,7 +808,7 @@ export function initRepositoryActionView() { .job-log-line .log-time, .log-time-stamp { - color: var(--color-grey-light); + color: var(--color-text-light-3); margin-left: 10px; white-space: nowrap; }