Mirrors/gitea
0
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-05-06 14:58:32 +02:00
Code Issues Activity

Fix color regressions, add priority color (#37417) (#37421)

Browse Source 
Backport #37417 by @silverwind

- fix markup attention block regressions on 2 colors
- added new color "priority" color for important severity in markup
- all message-box style, and error form elements use monochrome text
- tweaked and improved action logs colors

<img width="722" height="637" alt="Screenshot 2026-04-25 at 17 02 49"
src="https://github.com/user-attachments/assets/e8316fd8-3889-4f67-bdc5-39429b5a7eef"
/>
<img width="885" height="123" alt="image"
src="https://github.com/user-attachments/assets/4a761834-e69a-4f5e-a39d-8e49b75fc39d"
/>

<img width="608" height="554" alt="Screenshot 2026-04-25 at 17 03 16"
src="https://github.com/user-attachments/assets/86694726-817a-42b9-91dc-005bc03720cd"
/>

<img width="319" height="279" alt="image"
src="https://github.com/user-attachments/assets/db2801e9-8963-448c-b1b8-3029a69d5cf3"
/>

<img width="396" height="345" alt="image"
src="https://github.com/user-attachments/assets/8195c20d-e034-442c-b0db-4a8455792d0c"
/>


Fixes: #37416

---
This PR was written with the help of Claude Opus 4.7

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Claude (Opus 4.7) <noreply@anthropic.com>
This commit is contained in:
Giteabot 2026-04-26 03:26:25 +08:00 committed by GitHub
parent afdbd9b7c5
commit 11f77efea5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 78 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
routers/web/devtest/mock_actions.go
View File

@ -36,6 +36,10 @@ func generateMockStepsLog(logCur actions.LogCursor, opts generateMockStepsLogOpt
"##[group]test group for: step={step}, cursor={cursor}",
"in group msg for: step={step}, cursor={cursor}",
"##[endgroup]",
"::error::mock error for: step={step}, cursor={cursor}",
"::warning::mock warning for: step={step}, cursor={cursor}",
"::notice::mock notice for: step={step}, cursor={cursor}",
"::debug::mock debug for: step={step}, cursor={cursor}",
)
// usually the cursor is the "file offset", but here we abuse it as "line number" to make the mock easier, intentionally
cur := logCur.Cursor

35
templates/devtest/severity-colors.tmpl
View File

@ -20,6 +20,25 @@
<p>This is an info message using --color-info-* variables.</p>
</div>
<h2>Markdown Attention Blocks</h2>
<div class="markup render-content">
<blockquote class="attention-header attention-note"><p>{{svg "octicon-info" 16 "attention-icon attention-note"}}<strong class="attention-note">Note</strong></p>
<p>Useful information that users should know, even when skimming content.</p>
</blockquote>
<blockquote class="attention-header attention-tip"><p>{{svg "octicon-light-bulb" 16 "attention-icon attention-tip"}}<strong class="attention-tip">Tip</strong></p>
<p>Helpful advice for doing things better or more easily.</p>
</blockquote>
<blockquote class="attention-header attention-important"><p>{{svg "octicon-report" 16 "attention-icon attention-important"}}<strong class="attention-important">Important</strong></p>
<p>Key information users need to know to achieve their goal.</p>
</blockquote>
<blockquote class="attention-header attention-warning"><p>{{svg "octicon-alert" 16 "attention-icon attention-warning"}}<strong class="attention-warning">Warning</strong></p>
<p>Urgent info that needs immediate user attention to avoid problems.</p>
</blockquote>
<blockquote class="attention-header attention-caution"><p>{{svg "octicon-stop" 16 "attention-icon attention-caution"}}<strong class="attention-caution">Caution</strong></p>
<p>Advises about risks or negative outcomes of certain actions.</p>
</blockquote>
</div>
<h2>Form Fields</h2>
<div class="ui form">
<div class="field error">
@ -28,6 +47,22 @@
</div>
</div>
<h2>Error Input</h2>
<div class="ui input error">
<input type="text" value="Invalid input" readonly>
</div>
<h2>Attached Section Boxes</h2>
<h3 class="ui top attached error header">Error Header</h3>
<div class="ui attached error segment">Error section body content.</div>
<h3 class="ui top attached warning header tw-mt-3">Warning Header</h3>
<div class="ui attached warning segment">Warning section body content.</div>
<h2>Banner Preview (info-tinted)</h2>
<div class="web-banner-content-editor">
<div class="render-content render-preview">Banner preview content</div>
</div>
<h2>Labels</h2>
<div class="flex-text-block tw-gap-2">
<div class="ui red label">Red</div>

2
web_src/css/admin.css
View File

@ -55,5 +55,5 @@
padding: 1em 1.5em;
border: 1px solid var(--color-info-border);
background: var(--color-info-bg);
color: var(--color-info-text);
color: var(--color-text);
}

12
web_src/css/base.css
View File

@ -500,10 +500,10 @@ img.ui.avatar,
}
blockquote.attention-note {
border-left-color: var(--color-blue-dark-1);
border-left-color: var(--color-info-text);
}
strong.attention-note, svg.attention-note {
color: var(--color-blue-dark-1);
color: var(--color-info-text);
}
blockquote.attention-tip {
@ -514,10 +514,10 @@ strong.attention-tip, svg.attention-tip {
}
blockquote.attention-important {
border-left-color: var(--color-violet-dark-1);
border-left-color: var(--color-priority-text);
}
strong.attention-important, svg.attention-important {
color: var(--color-violet-dark-1);
color: var(--color-priority-text);
}
blockquote.attention-warning {
@ -528,10 +528,10 @@ strong.attention-warning, svg.attention-warning {
}
blockquote.attention-caution {
border-left-color: var(--color-red-dark-1);
border-left-color: var(--color-error-text);
}
strong.attention-caution, svg.attention-caution {
color: var(--color-red-dark-1);
color: var(--color-error-text);
}
/* FIXME: this is a longstanding dirty patch since 2015, it only makes the pages more messy and shouldn't be used */

4
web_src/css/modules/form.css
View File

@ -204,14 +204,14 @@ textarea:focus,
.ui.form .field.error input {
background-color: var(--color-error-bg);
border-color: var(--color-error-border);
color: var(--color-error-text);
color: var(--color-input-text);
}
.ui.form .field.error textarea:focus,
.ui.form .field.error select:focus,
.ui.form .field.error input:focus {
background-color: var(--color-error-bg);
border-color: var(--color-error-border);
color: var(--color-error-text);
color: var(--color-input-text);
}
.ui.form .field.error select {

2
web_src/css/modules/input.css
View File

@ -38,7 +38,7 @@
.ui.input.error > input {
background: var(--color-error-bg);
border-color: var(--color-error-border);
color: var(--color-error-text);
color: var(--color-input-text);
}
.ui.icon.input > i.icon {

4
web_src/css/modules/message.css
View File

@ -51,7 +51,6 @@
.ui.blue.message,
.ui.attached.blue.message {
background: var(--color-info-bg);
color: var(--color-info-text);
border-color: var(--color-info-border);
}
@ -60,7 +59,6 @@
.ui.positive.message,
.ui.attached.positive.message {
background: var(--color-success-bg);
color: var(--color-success-text);
border-color: var(--color-success-border);
}
@ -71,7 +69,6 @@
.ui.negative.message,
.ui.attached.negative.message {
background: var(--color-error-bg);
color: var(--color-error-text);
border-color: var(--color-error-border);
}
@ -80,7 +77,6 @@
.ui.yellow.message,
.ui.attached.yellow.message {
background: var(--color-warning-bg);
color: var(--color-warning-text);
border-color: var(--color-warning-border);
}

11
web_src/css/themes/theme-gitea-dark.css
View File

@ -163,16 +163,19 @@ gitea-theme-meta-info {
--color-error-bg: #322226;
--color-error-bg-active: #49262a;
--color-error-bg-hover: #3c2427;
--color-error-text: var(--color-text);
--color-error-text: #f85149;
--color-success-border: #225633;
--color-success-bg: #1c3329;
--color-success-text: var(--color-text);
--color-success-text: #3fb950;
--color-warning-border: #5f481a;
--color-warning-bg: #342e1f;
--color-warning-text: var(--color-text);
--color-warning-text: #d29922;
--color-info-border: #254a7e;
--color-info-bg: #1b283a;
--color-info-text: var(--color-text);
--color-info-text: #2f81f7;
--color-priority-border: #4a268d;
--color-priority-bg: #251c39;
--color-priority-text: #a371f7;
--color-red-badge: #db2828;
--color-red-badge-bg: #db28281a;
--color-red-badge-hover-bg: #db28284d;

11
web_src/css/themes/theme-gitea-light.css
View File

@ -163,16 +163,19 @@ gitea-theme-meta-info {
--color-error-bg: #ffebe9;
--color-error-bg-active: #ffcecb;
--color-error-bg-hover: #ffdcd7;
--color-error-text: var(--color-text);
--color-error-text: #d1242f;
--color-success-border: #4ac26b66;
--color-success-bg: #dafbe1;
--color-success-text: var(--color-text);
--color-success-text: #1a7f37;
--color-warning-border: #d4a72c66;
--color-warning-bg: #fff8c5;
--color-warning-text: var(--color-text);
--color-warning-text: #9a6700;
--color-info-border: #54aeff66;
--color-info-bg: #ddf4ff;
--color-info-text: var(--color-text);
--color-info-text: #0969da;
--color-priority-border: #b9a1ff66;
--color-priority-bg: #f3e7ff;
--color-priority-text: #8250df;
--color-red-badge: #db2828;
--color-red-badge-bg: #db28281a;
--color-red-badge-hover-bg: #db28284d;

14
web_src/js/components/ActionRunJobView.vue
View File

@ -663,6 +663,14 @@ async function hashChangeListener() {
background: var(--color-warning-bg);
}
.job-step-logs .log-line-notice {
background: var(--color-info-bg);
}
.job-step-logs .log-line-debug {
background: var(--color-secondary-alpha-30);
}
.job-step-logs .log-cmd-error > .log-msg-label {
color: var(--color-error-text);
}
@ -671,7 +679,11 @@ async function hashChangeListener() {
color: var(--color-warning-text);
}
.job-step-logs .log-cmd-debug {
.job-step-logs .log-cmd-notice > .log-msg-label {
color: var(--color-info-text);
}
.job-step-logs .log-cmd-debug > .log-msg-label {
color: var(--color-violet);
}

4
web_src/js/components/PullRequestMergeForm.vue
View File

@ -230,7 +230,7 @@ function clearMergeMessage() {
bottom: -1px;
position: absolute;
align-items: center;
color: var(--color-info-text);
color: var(--color-text);
background-color: var(--color-info-bg);
border: 1px solid var(--color-info-border);
border-left: none;
@ -238,7 +238,7 @@ function clearMergeMessage() {
}
.auto-merge-small:hover {
color: var(--color-info-text);
color: var(--color-text);
background-color: var(--color-info-bg);
border: 1px solid var(--color-info-border);
}