Files
gitea/web_src/css/modules/message.css
Giteabot 11f77efea5
release-nightly / nightly-binary (push) Has been cancelled
release-nightly / nightly-container (push) Has been cancelled
Fix color regressions, add priority color (#37417) (#37421)
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>
2026-04-25 19:26:25 +00:00

94 lines
1.9 KiB
CSS

/* based on Fomantic UI message module, with just the parts extracted that we use. If you find any
unused rules here after refactoring, please remove them. */
.ui.message {
background: var(--color-box-body);
color: var(--color-text);
border: 1px solid var(--color-secondary);
position: relative;
min-height: 1em;
margin: 1em 0;
padding: 1em 1.5em;
border-radius: var(--border-radius);
}
.ui.message:first-child {
margin-top: 0;
}
.ui.message:last-child {
margin-bottom: 0;
}
.ui.attached.message {
margin-bottom: -1px;
border-radius: var(--border-radius) var(--border-radius) 0 0;
margin-left: -1px;
margin-right: -1px;
}
.ui.attached + .ui.attached.message:not(.top):not(.bottom) {
margin-top: -1px;
border-radius: 0;
}
.ui.bottom.attached.message {
margin-top: -1px;
border-radius: 0 0 var(--border-radius) var(--border-radius);
}
.ui.bottom.attached.message:not(:last-child) {
margin-bottom: 1em;
}
.ui.message .header {
color: inherit;
font-weight: var(--font-weight-semibold);
}
.ui.info.message,
.ui.attached.info.message,
.ui.blue.message,
.ui.attached.blue.message {
background: var(--color-info-bg);
border-color: var(--color-info-border);
}
.ui.success.message,
.ui.attached.success.message,
.ui.positive.message,
.ui.attached.positive.message {
background: var(--color-success-bg);
border-color: var(--color-success-border);
}
.ui.error.message,
.ui.attached.error.message,
.ui.red.message,
.ui.attached.red.message,
.ui.negative.message,
.ui.attached.negative.message {
background: var(--color-error-bg);
border-color: var(--color-error-border);
}
.ui.warning.message,
.ui.attached.warning.message,
.ui.yellow.message,
.ui.attached.yellow.message {
background: var(--color-warning-bg);
border-color: var(--color-warning-border);
}
.ui.message > .close.icon {
cursor: pointer;
position: absolute;
top: 9px;
right: 9px;
opacity: .7;
}
.ui.message > .close.icon:hover {
opacity: 1;
}