1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2024-12-27 13:39:19 -05:00
forgejo/web_src/css/actions.css
Giteabot 3f6f134260
Action view mobile improvements and fixes (#30309) (#30320)
Backport #30309 by @silverwind

Fix the action issue in https://github.com/go-gitea/gitea/issues/30303,
specifically:

- Use opaque step header hover background to avoid transparency issue
- Un-sticky the `action-view-left` on mobile, it would otherwise overlap
into right view
- Improve commit summary, let it wrap
- Fix and comment z-indexes
- Tweak width for run-list-item-right so it wastes less space on desktop
- Synced latest changes to console colors from dark to light theme

<img width="467" alt="Screenshot 2024-04-06 at 18 58 15"
src="https://github.com/go-gitea/gitea/assets/115237/8ad26b72-6cd9-4522-8ad1-6fd86b2d0d53">

Co-authored-by: silverwind <me@silverwind.io>
(cherry picked from commit 10d83ae6435134177253569a2f244935c2bb708c)
2024-04-15 16:13:18 +02:00

59 lines
1.1 KiB
CSS

.runner-container {
padding-bottom: 30px;
}
.runner-container .ui.table.segment {
overflow-x: auto;
}
.runner-container .runner-ops > a {
margin-left: 0.5em;
}
.runner-container .runner-ops-delete {
color: var(--color-red-light);
}
.runner-container .runner-new-text {
color: var(--color-white);
}
.runner-container #runner-new:hover .runner-new-text {
color: var(--color-white) !important;
}
.runner-container .task-status-success {
background-color: var(--color-green);
color: var(--color-white);
}
.runner-container .task-status-failure {
background-color: var(--color-red-light);
color: var(--color-white);
}
.runner-container .task-status-running {
background-color: var(--color-blue);
color: var(--color-white);
}
.runner-container .task-status-cancelled,
.runner-container .task-status-blocked {
background-color: var(--color-yellow);
color: var(--color-white);
}
.run-list-item-right {
flex: 0 0 min(20%, 130px);
display: flex;
flex-direction: column;
gap: 3px;
color: var(--color-text-light);
}
.run-list-item-right .run-list-meta {
display: flex;
flex-wrap: nowrap;
gap: .25rem;
align-items: center;
}