mirror
/
gitea
mirror of https://github.com/go-gitea/gitea
2
0
Fork 0
Code Issues Releases Wiki Activity

Tweak actions color and borders (#29640)

Browse Source 
- 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">
pull/29637/head^2
silverwind 8 months ago committed by GitHub
parent f6d01ac2d8
commit 16f1326514
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 44 additions and 42 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 36
      web_src/css/themes/theme-gitea-dark.css
  2. 42
      web_src/css/themes/theme-gitea-light.css
  3. 8
      web_src/js/components/RepoActionView.vue

36
web_src/css/themes/theme-gitea-dark.css
Unescape View File

@ -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;

42
web_src/css/themes/theme-gitea-light.css
Unescape View File

@ -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;

8
web_src/js/components/RepoActionView.vue
Unescape View File

@ -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;
}

Write Preview
Loading…
Cancel
Save