forgejo-federation/web_src/less/shared/issuelist.less
silverwind 8e5aea88c7
Improve label and text wrapping (#14113)
* Improve label wrapping

- Adjust issue list styles so labels can wrap on the same line as the
  text. This relies on `display: inline` with the HTML whitespace being
  used as the separator.
- Add global word-break: break-word. This should generally avoid text
  overflows in various places.

* add whitespace to history labels

* use overflow-wrap

* restore word-break rules

* use correct pre

* use better selector for middle align

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
2020-12-29 18:48:28 -05:00

131 lines
2 KiB
Text

.issue.list {
list-style: none;
margin-top: 1rem;
a:not(.label):hover {
color: var(--color-primary) !important;
}
> .item {
.issue-checkbox {
margin-top: 1px;
}
.issue-item-icon svg {
margin-right: .75rem;
}
.issue-item-icons-right > * + * {
margin-left: .5rem;
}
.issue-item-main {
width: 100%;
}
.issue-item-top-row {
max-width: 100%;
color: var(--color-text);
font-size: 16px;
min-width: 0;
font-weight: 600;
> * {
vertical-align: middle;
}
}
.issue-item-bottom-row {
font-size: 13px;
}
.title {
color: var(--color-text);
word-break: break-word;
}
.issue-item-icon-right {
min-width: 2rem;
}
.assignee {
position: relative;
top: -2px;
}
.assignee img {
width: 20px;
height: 20px;
margin-right: 2px;
}
.desc {
color: #999999;
a {
color: inherit;
}
.time-since,
a {
margin-left: .25rem;
margin-right: .25rem;
}
.waiting,
.approvals,
.rejects {
padding-left: 5px;
}
.checklist {
padding-left: 5px;
.progress-bar {
margin-left: 2px;
width: 80px;
height: 6px;
display: inline-block;
background-color: #eeeeee;
overflow: hidden;
border-radius: 3px;
vertical-align: 2px !important;
.progress {
background-color: #cccccc;
display: block;
height: 100%;
}
}
}
.conflicting {
padding-left: 5px;
}
.due-date {
padding-left: 5px;
}
a.milestone {
margin-left: 5px;
}
a.ref {
margin-left: 8px;
span {
margin-right: -4px;
}
}
.overdue {
color: var(--color-red);
}
}
}
> .item + .item {
border-top: 1px solid var(--color-secondary);
}
}