forgejo/web_src/css/actions.css
Giteabot c044cb2de3
Fix various overflows on actions view (#30344) (#30505)
Backport #30344 by @silverwind

Fix a number of text overflow issues in actions view and run list. Also
improve mobile view of run list.

Fixes: https://github.com/go-gitea/gitea/issues/30328

<img width="782" alt="Screenshot 2024-04-08 at 23 10 16"
src="https://github.com/go-gitea/gitea/assets/115237/3d9f9f88-3eab-44a0-8144-30c2b58b24cb">
<img width="935" alt="Screenshot 2024-04-08 at 23 17 46"
src="https://github.com/go-gitea/gitea/assets/115237/581d73ea-a31d-416b-be3a-47313b879b12">
<img width="1008" alt="Screenshot 2024-04-08 at 23 49 05"
src="https://github.com/go-gitea/gitea/assets/115237/c5d10565-f285-477f-8659-1caf94797647">
<img width="397" alt="Screenshot 2024-04-08 at 23 55 30"
src="https://github.com/go-gitea/gitea/assets/115237/368aaa75-1903-4058-9d75-d1fe91c564d6">

Co-authored-by: silverwind <me@silverwind.io>
(cherry picked from commit 00179f637d9add4e42edf6185cd641eb98115970)
2024-04-21 18:07:00 +02:00

83 lines
1.5 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 {
width: 130px;
display: flex;
flex-direction: column;
flex-shrink: 0;
gap: 3px;
color: var(--color-text-light);
}
.run-list-item-right .run-list-meta {
display: flex;
flex-wrap: nowrap;
gap: .25rem;
align-items: center;
}
.run-list .flex-item-trailing {
flex-wrap: nowrap;
width: 280px;
flex: 0 0 280px;
}
.run-list-ref {
display: inline-block !important;
}
@media (max-width: 767.98px) {
.run-list .flex-item-trailing {
flex-direction: column;
align-items: flex-end;
width: auto;
flex-basis: auto;
}
.run-list-item-right,
.run-list-ref {
max-width: 110px;
}
}