mirror of
https://codeberg.org/forgejo/forgejo
synced 2024-09-12 18:03:57 +02:00
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"> (cherry picked from commit 16f13265143ff08cb6c33e976998b262e94fe569)
This commit is contained in:
parent
a7830e8d87
commit
87e7a83edf
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -631,6 +631,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 */
|
||||
|
@ -690,7 +692,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;
|
||||
|
@ -714,6 +715,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;
|
||||
}
|
||||
|
||||
|
@ -799,7 +801,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;
|
||||
}
|
||||
|
@ -815,7 +817,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;
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue