jojo/web_src/css/repo.css
Henry Catalini Smith cb1cb2c0af Improve repo file list table semantics for screen readers (second attempt) (#12232)
Unintentionally fixes forgejo/forgejo#11812 per tip https://codeberg.org/forgejo/forgejo/pulls/12232#issuecomment-13580345

---

This is a second attempt to fix https://codeberg.org/forgejo/forgejo/issues/11116. The [first attempt](https://codeberg.org/forgejo/forgejo/pulls/11846) introduced a [regression](https://codeberg.org/forgejo/forgejo/issues/12082) and needed to be [reverted](https://codeberg.org/forgejo/forgejo/pulls/12088).

What's different about this attempt is that several days of extra work have been invested in amending the CSS to ensure that no visual changes slip through as a side-effect of the structural changes to the HTML. This was surprisingly challenging, and I documented much of the journey in https://codeberg.org/henrycatalinismith/forgejo/issues/1.

In summary, the existing version of the "latest commit" row leans heavily on global styles that are universally applied to all `thead` elements inside `table` elements with the `ui` and `table` classes. The nature of the structural HTML changes necessary to fix the accessibility bug (this row can't be inside `thead`) is such that those universal styles no longer apply to this element and must be duplicated into new element-specific styles. Similarly, existing styles applying to non-`thead` table content has unwanted effects on this element once it moves into the `tbody` which needed to be counteracted.

The original PR already lays out the accessibility impact of this pull request in a good amount of details and so instead I'm going to use the space here to focus on comparing the visuals in the `forgejo` branch with those in this PR. There follow a few pretty boring identical before & after screenshots that are pixel-for-pixel identical with each other. I don't think you'll be able to spot any bugs by glancing at these and am more sharing them to provide an insight into where my attention has been during testing: the 380px wide mobile viewport, a larger desktop viewport, and the "commit message too long to fit in the available space" case. If you know of other troublesome cases for this code that aren't covered by what you see in these images then that could be a good thing to explore here.

Before | After
-|-
![](/attachments/a6f18efd-8b3b-426e-a0dc-70e9eda3fe73) | ![](/attachments/6297c663-cd5a-4849-a555-061257d59238)
![](/attachments/bbb90da2-afbf-4be5-9293-ec8b3a3dbb3a) | ![](/attachments/29103640-fce9-42c9-b91a-f9d6f9ba4db0)

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/12232
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
2026-04-25 20:47:11 +02:00

2762 lines
61 KiB
CSS

.repository .data-table .line-num,
.repository .diff-file-box .file-body.file-code .lines-num,
.repository .diff-file-box .code-diff tbody tr .lines-type-marker {
user-select: none;
}
.repository .unicode-escaped .escaped-code-point[data-escaped]::before {
visibility: visible;
content: attr(data-escaped);
font-family: var(--fonts-monospace);
color: var(--color-red);
}
.repository .unicode-escaped .escaped-code-point .char {
display: none;
}
.repository .broken-code-point {
font-family: var(--fonts-monospace);
color: var(--color-blue);
}
.repository .unicode-escaped .ambiguous-code-point {
border: 1px var(--color-yellow) solid;
}
.issue-content {
display: flex;
align-items: flex-start;
gap: 16px;
}
@media (max-width: 767.98px) {
.issue-content {
flex-direction: column;
}
}
.issue-content-left {
margin: 0 !important;
width: calc(100% - 316px);
}
.issue-content-right {
margin: 0 !important;
width: 300px;
}
.issue-content-right .dropdown > .menu {
max-width: 270px;
min-width: 0;
}
@media (max-width: 767.98px) {
.issue-content-left,
.issue-content-right {
width: 100%;
}
}
.repository .issue-content-right .ui.list .dependency {
padding: 0;
white-space: nowrap;
}
.repository .issue-content-right .ui.list .title {
overflow: hidden;
text-overflow: ellipsis;
}
.repository .issue-content-right #deadlineForm input {
width: 12.8rem;
border-radius: var(--border-radius) 0 0 var(--border-radius);
border-right: 0;
white-space: nowrap;
}
.repository .issue-content-right .filter.menu {
max-height: 500px;
overflow-x: auto;
}
.repository .filter.menu .label-filter .menu .info {
display: inline-block;
padding: 0.5rem 0;
font-size: 12px;
width: 100%;
white-space: nowrap;
margin-left: 10px;
margin-right: 8px;
text-align: left;
}
.repository .filter.menu .label-filter .menu .info code {
border: 1px solid var(--color-secondary);
border-radius: var(--border-radius);
padding: 1px 2px;
font-size: 11px;
}
/* make all issue filter dropdown menus popup leftward, to avoid go out the viewport (right side) */
.repository .filter.menu .ui.dropdown .menu {
max-height: 500px;
max-width: 300px;
overflow-x: hidden;
right: 0;
left: auto;
}
/* the label-filter is the first dropdown, it shouldn't be shown leftward, otherwise it may go out the viewport (left side) */
.repository .filter.menu .ui.dropdown.label-filter .menu {
min-width: max-content;
right: unset;
left: 0;
}
.repository .select-label .desc {
padding-left: 23px;
white-space: normal;
display: block;
margin-top: 2px;
}
/* For the secondary pointing menu, respect its own border-bottom */
/* style reference: https://semantic-ui.com/collections/menu.html#pointing */
.repository .ui.tabs.container .ui.menu:not(.secondary.pointing) {
border-bottom: 0;
}
.repository .ui.tabs.divider {
margin-top: -1px;
margin-bottom: 12px;
}
.repository .clone-panel #repo-clone-url {
width: 320px;
border-radius: 0;
}
@media (max-width: 991.98px) {
.repository .clone-panel #repo-clone-url {
width: 200px;
}
}
@media (max-width: 390px) {
.repository .clone-panel #repo-clone-url {
width: 0;
flex-grow: 1;
}
}
.repository .ui.action.input.clone-panel > button + button,
.repository .ui.action.input.clone-panel > button + input {
margin-left: -1px; /* make the borders overlap to avoid double borders */
}
.repository .clone-panel > button:first-of-type {
border-radius: var(--border-radius) 0 0 var(--border-radius) !important;
}
.repository .clone-panel > button:last-of-type {
border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;
}
/* Dropdown alignment */
.repository .clone-panel .dropdown .menu,
.repository .folder-actions .dropdown .menu {
right: 0 !important;
left: auto !important;
}
.repository.file.list .repo-description {
display: flex;
justify-content: space-between;
align-items: center;
gap: 5px;
margin-bottom: 5px;
}
@media (max-width: 767.98px) {
.repository.file.list .repo-description {
flex-direction: column;
align-items: stretch;
}
}
.commit-summary {
flex: 1;
overflow-wrap: anywhere;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.commit-header .commit-summary,
td .commit-summary {
white-space: normal;
}
.commit-list .js-toggle-commit-body {
margin: 0 0 0 0.25em;
}
.commit-list .commit-status {
margin: 0 0 0 0.25em;
}
.latest-commit {
display: flex;
flex: 1;
align-items: center;
overflow: hidden;
text-overflow: ellipsis;
}
.latest-commit .commit-status {
margin-right: 0.25em;
}
@media (max-width: 767.98px) {
.latest-commit .sha {
display: none;
}
.latest-commit .commit-summary {
margin-left: 8px;
}
}
.repo-path {
display: flex;
overflow-wrap: anywhere;
}
/* this is what limits the commit table width to a value that works on all viewport sizes */
.repo-files-table-latest-commit-left {
max-width: calc(calc(min(100vw, 1280px)) - 145px - calc(2 * var(--page-margin-x)));
}
.repo-files-table-latest-commit-cell {
font-weight: var(--font-weight-normal);
background: var(--color-box-header);
text-align: inherit;
color: var(--color-text);
vertical-align: inherit;
border-left: none;
padding: 6px 5px 6px 10px;
}
.latest-commit .commit-summary {
white-space: nowrap;
}
.repository.file.list #repo-files-table tbody .svg {
margin-left: 3px;
margin-right: 5px;
}
@media (min-width: 767.98px) {
#repo-files-table tbody > tr.commit-list td {
border-bottom: 1px solid var(--color-secondary);
}
#repo-files-table tbody > tr:is(.entry, .has-parent):nth-child(2) td {
border-top: none;
}
}
.repository.file.list #repo-files-table tbody .svg.octicon-reply {
margin-right: 10px;
}
.repository.file.list #repo-files-table tbody .svg.octicon-file-directory-fill,
.repository.file.list #repo-files-table tbody .svg.octicon-file-submodule {
color: var(--color-primary);
}
.repository.file.list #repo-files-table tbody .svg.octicon-cross-reference,
.repository.file.list #repo-files-table tbody .svg.octicon-file,
.repository.file.list #repo-files-table tbody .svg.octicon-file-symlink-file,
.repository.file.list #repo-files-table tbody .svg.octicon-file-directory-symlink {
color: var(--color-secondary-dark-7);
}
.repository.file.list #repo-files-table td:not(.repo-files-table-latest-commit-cell) {
padding-top: 0;
padding-bottom: 0;
overflow: initial;
}
.repository.file.list #repo-files-table td.name {
width: 33%;
max-width: calc(100vw - 140px);
}
@media (min-width: 1201px) {
.repository.file.list #repo-files-table td.name {
max-width: 150px;
}
}
@media (min-width: 992px) and (max-width: 1200px) {
.repository.file.list #repo-files-table td.name {
max-width: 200px;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
.repository.file.list #repo-files-table td.name {
max-width: 300px;
}
}
.repository.file.list #repo-files-table td.message {
color: var(--color-text-light-1);
width: 66%;
}
@media (min-width: 1201px) {
.repository.file.list #repo-files-table td.message {
max-width: 400px;
}
}
@media (min-width: 992px) and (max-width: 1200px) {
.repository.file.list #repo-files-table td.message {
max-width: 350px;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
.repository.file.list #repo-files-table td.message {
max-width: 250px;
}
}
.repository.file.list #repo-files-table td.age {
color: var(--color-text-light-1);
}
.repository.file.list #repo-files-table td .truncate {
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 100%;
padding-top: 8px;
padding-bottom: 8px;
}
.repository.file.list #repo-files-table td a:not(.sha, .author-wrapper) {
padding-top: 8px;
padding-bottom: 8px;
}
.repository.file.list #repo-files-table td .at {
margin-left: 3px;
margin-right: 3px;
}
.repository.file.list #repo-files-table td > * {
vertical-align: middle;
}
.repository.file.list #repo-files-table td.message .isSigned {
cursor: default;
}
.repository.file.list #repo-files-table tr:last-of-type td:first-child {
border-bottom-left-radius: var(--border-radius);
}
.repository.file.list #repo-files-table tr:last-of-type td:last-child {
border-bottom-right-radius: var(--border-radius);
}
.repository.file.list #repo-files-table tr:hover {
background-color: var(--color-hover);
}
.repository.file.list #repo-files-table tr.has-parent a {
display: inline-block;
padding-top: 8px;
padding-bottom: 8px;
width: calc(100% - 1.25rem);
}
.repository.file.list .non-diff-file-content .header .icon {
font-size: 1em;
}
.repository.file.list .non-diff-file-content .header .small.icon {
font-size: 0.75em;
}
.repository.file.list .non-diff-file-content .header .tiny.icon {
font-size: 0.5em;
}
.repository.file.list .non-diff-file-content .header .file-actions .btn-octicon {
line-height: var(--line-height-default);
padding: 8px;
vertical-align: middle;
color: var(--color-text);
}
.repository.file.list .non-diff-file-content .header .file-actions .btn-octicon:hover {
color: var(--color-primary);
}
.repository.file.list .non-diff-file-content .header .file-actions .btn-octicon-danger:hover {
color: var(--color-red);
}
.repository.file.list .non-diff-file-content .header .file-actions .btn-octicon.disabled {
color: inherit;
opacity: var(--opacity-disabled);
cursor: default;
}
.code-search + #repo-files-table {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.view-raw {
display: flex;
justify-content: center;
align-items: center;
}
.view-raw > * {
max-width: 100%;
}
.view-raw audio,
.view-raw video,
.view-raw img {
margin: 1rem 0;
border-radius: 0;
object-fit: contain;
}
.view-raw img[src$=".svg" i] {
max-height: 600px !important;
max-width: 600px !important;
}
lazy-webc[tag="model-viewer"],
model-viewer {
width: 100%;
height: 100vh;
}
lazy-webc[tag="pdf-object"],
pdf-object {
width: 100%;
height: 100vh;
border: none !important;
display: flex;
align-items: center;
justify-content: center;
}
citation-information .tab:not(.active) {
display: none;
}
.repository.file.list .non-diff-file-content .plain-text {
padding: 1em 2em;
}
.repository.file.list .non-diff-file-content .plain-text pre {
overflow-wrap: anywhere;
white-space: pre-wrap;
}
.repository.file.list .non-diff-file-content .csv {
overflow-x: auto;
padding: 0 !important;
}
.repository.file.list .non-diff-file-content pre {
overflow: auto;
}
.repository.file.list .non-diff-file-content .asciicast {
padding: 0 !important;
}
.non-diff-file-content .pdfobject {
border-radius: 0 0 var(--border-radius) var(--border-radius);
}
.repository.file.list .sidebar {
padding-left: 0;
}
.repository.file.list .sidebar .svg {
width: 16px;
}
.repo-editor-header {
width: 100%;
}
.repo-editor-header input {
vertical-align: middle !important;
width: auto !important;
padding: 7px 8px !important;
margin-right: 5px !important;
}
.repository.file.editor .tabular.menu .svg {
margin-right: 5px;
}
.repository.file.editor .commit-form-wrapper {
padding-left: 64px;
}
.repository.file.editor .commit-form-wrapper .commit-avatar {
float: left;
margin-left: -64px;
width: 3em;
height: auto;
}
.repository.file.editor .commit-form-wrapper .commit-form {
position: relative;
padding: 15px;
margin-bottom: 10px;
border: 1px solid var(--color-secondary);
background: var(--color-box-body);
border-radius: var(--border-radius);
}
.repository.file.editor .commit-form-wrapper .commit-form::before,
.repository.file.editor .commit-form-wrapper .commit-form::after {
right: 100%;
top: 20px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.repository.file.editor .commit-form-wrapper .commit-form::before {
border-right-color: var(--color-secondary);
border-width: 9px;
margin-top: -9px;
}
.repository.file.editor .commit-form-wrapper .commit-form::after {
border-right-color: var(--color-box-body);
border-width: 8px;
margin-top: -8px;
}
.repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .branch-name {
display: inline-block;
padding: 2px 4px;
font: 12px var(--fonts-monospace);
color: var(--color-text);
background: var(--color-secondary);
border-radius: var(--border-radius);
margin: 0 2px;
}
.repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .new-branch-name-input {
position: relative;
margin-left: 25px;
}
.repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .new-branch-name-input input {
width: 240px !important;
padding-left: 26px !important;
}
.repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .octicon-git-branch {
position: absolute;
top: 9px;
left: 10px;
color: var(--color-grey);
}
.repository.options #interval {
width: 100px !important;
min-width: 100px;
}
.repository.new.issue .comment.form .comment .avatar {
width: 3em;
}
.repository.new.issue .comment.form .content {
margin-left: 4em;
}
.repository.new.issue .comment.form .content::before,
.repository.new.issue .comment.form .content::after {
right: 100%;
top: 20px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.repository.new.issue .comment.form .content::before {
border-right-color: var(--color-secondary);
border-width: 9px;
margin-top: -9px;
}
.repository.new.issue .comment.form .content::after {
border-right-color: var(--color-box-body);
border-width: 8px;
margin-top: -8px;
}
.repository.new.issue .comment.form .content .markup {
font-size: 14px;
}
.repository.view.issue .instruct-toggle {
display: inline-block;
}
.issue-title-header {
width: 100%;
padding-bottom: 4px;
margin-bottom: 1rem;
}
.issue-title-meta {
display: flex;
align-items: center;
}
.issue-title .button-row,
.repository.releases .button-row {
display: flex;
}
@media (max-width: 767.98px) {
.repository.view.issue .issue-title {
flex-direction: column;
}
.issue-title .button-row {
width: 100%;
margin-top: .5rem;
justify-content: space-between;
}
.comment.form .issue-content-left .avatar {
display: none;
}
.comment.form .issue-content-left .content {
margin-left: 0 !important;
}
.comment.form .issue-content-left .content::before,
.comment.form .issue-content-left .content::after,
.comment.form .content .form::before,
.comment.form .content .form::after {
display: none;
}
.repository.view.issue .issue-title.edit-active h1 {
padding-right: 0;
}
}
.repository.view.issue .issue-title {
display: flex;
align-items: center;
gap: 0.5em;
margin-bottom: 8px;
min-height: var(--repo-header-issue-min-height);
}
.repository.view.issue .issue-title h1 {
flex: 1;
width: 100%;
font-weight: var(--font-weight-normal);
font-size: 32px;
line-height: 40px;
margin: 0;
padding-right: 0.5rem;
}
.repository.view.issue .issue-title .ui.input {
font-size: 16px;
}
.repository.view.issue .issue-title .ui.input input {
font-size: 1.5em;
padding: 2px .5rem;
}
.repository.view.issue .issue-title .index {
color: var(--color-text-light-2);
}
.repository.view.issue .issue-title .label {
margin-right: 10px;
}
.issue-state-label {
display: flex !important;
align-items: center !important;
font-size: 14px !important;
padding: 7px 10px !important;
border-radius: var(--border-radius-medium) !important;
flex-shrink: 0;
}
.issue-state-label .svg {
margin-right: 4px;
}
.repository.view.issue .pull-desc code {
color: var(--color-primary);
}
.repository.view.issue .pull-desc a[data-clipboard-text] {
cursor: pointer;
}
.repository.view.issue .pull-desc a[data-clipboard-text] svg {
vertical-align: middle;
position: relative;
top: -2px;
right: 1px;
}
.repository.view.issue .pull.tabs.container {
width: 100%;
max-width: 100%;
}
.repository.view.issue .pull.tabular.menu {
margin-bottom: 0;
overflow-x: auto;
overflow-y: hidden;
}
.repository.view.issue .pull.tabular.menu .svg {
margin-right: 5px;
}
.repository.view.issue .merge.box .branch-update.grid .row {
padding-bottom: 1rem;
}
.repository.view.issue .merge.box .branch-update.grid .row .icon {
margin-top: 1.1rem;
}
.repository.view.issue .comment-list:not(.prevent-before-timeline)::before {
display: block;
content: "";
position: absolute;
margin-top: 12px;
margin-bottom: 14px;
top: 0;
bottom: 0;
left: 96px;
width: 2px;
background-color: var(--color-timeline);
z-index: -1;
}
.repository.view.issue .comment-list .timeline {
position: relative;
display: block;
margin-left: 40px;
padding-left: 16px;
}
.repository.view.issue .comment-list .timeline::before { /* ciara */
display: block;
content: "";
position: absolute;
margin-top: 12px;
margin-bottom: 14px;
top: 0;
bottom: 0;
left: 30px;
width: 2px;
background-color: var(--color-timeline);
z-index: -1;
}
.repository.view.issue .comment-list .timeline-item,
.repository.view.issue .comment-list .timeline-item-group {
padding: 0.65rem 0;
}
.repository.view.issue .comment-list .timeline-item-group .timeline-item {
padding-top: 8px;
padding-bottom: 8px;
}
.repository.view.issue .comment-list .timeline-avatar-offset {
margin-top: 48px;
}
.repository.view.issue .comment-list .timeline-item {
margin-left: 16px;
position: relative;
}
.repository.view.issue .comment-list .timeline-item .timeline-avatar {
position: absolute;
left: -68px;
}
/* Don't show the mobile oriented avatar ".inline-timeline-avatar" on desktop. Desktop uses the avatar with class ".timeline-avatar" */
.repository.view.issue .comment-list .timeline-item .inline-timeline-avatar {
display: none;
}
.repository.view.issue .comment-list .timeline-item:first-child:not(.commit) {
padding-top: 0 !important;
}
.repository.view.issue .comment-list .timeline-item:last-child:not(.commit) {
padding-bottom: 0 !important;
}
.repository.view.issue .comment-list .timeline-item .badge.badge-commit {
border-color: transparent;
background: radial-gradient(var(--color-body) 40%, transparent 40%) no-repeat;
}
.repository.view.issue .comment-list .timeline-item .badge {
width: 34px;
height: 34px;
background-color: var(--color-timeline);
border-radius: var(--border-radius-full);
display: flex;
float: left;
margin-left: -33px;
margin-right: 8px;
color: var(--color-text);
align-items: center;
justify-content: center;
}
.repository.view.issue .comment-list .timeline-item .badge .svg {
width: 22px;
height: 22px;
padding: 3px;
}
.repository.view.issue .comment-list .timeline-item .badge .svg.octicon-comment {
margin-top: 2px;
}
.repository.view.issue .comment-list .timeline-item.comment > .content {
margin-left: -16px;
}
.repository.view.issue .comment-list .timeline-item.event > .text {
line-height: 32px;
vertical-align: middle;
}
.repository.view.issue .comment-list .timeline-item.commits-list {
padding-left: 15px;
padding-top: 0;
}
.repository.view.issue .comment-list .timeline-item.commits-list .ui.avatar,
.repository.view.issue .comment-list .timeline-item.event .ui.avatar {
margin-right: 0.25em;
}
.repository.view.issue .comment-list .timeline-item .aggregated-actions .badge {
width: 20px;
height: 20px;
margin-top: 5px;
padding: 12px;
}
.repository.view.issue .comment-list .timeline-item .aggregated-actions .badge .svg {
width: 20px;
height: 20px;
}
.singular-commit {
display: flex;
align-items: center;
}
.singular-commit .badge {
height: 30px !important;
}
.singular-commit .shabox .sha.label {
margin: 0;
}
@media (min-width: 768px) {
.repository.view.issue .comment-list .timeline-item .forced-push {
display: grid;
grid-template-columns: 1fr auto;
column-gap: 1rem;
span.compare {
/* Same height as .timeline-item .badge for alignment */
height: 34px;
}
}
}
@media (max-width: 767.98px) {
.repository.view.issue .comment-list .timeline-item .forced-push span.compare {
margin-inline-start: 1rem;
}
}
.repository.view.issue .comment-list .timeline-item .compare.label {
font-size: 1rem;
border: 1px solid var(--color-light-border);
height: fit-content;
}
@media (max-width: 767.98px) {
.repository.view.issue .comment-list .timeline-item .ui.segments {
margin-left: -2rem;
}
}
.repository.view.issue .comment-list .ui.comments {
max-width: 100%;
}
.repository.view.issue .comment-list .comment > .content > div:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.repository.view.issue .comment-list .comment > .content > div:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.repository.view.issue .comment-list .comment .comment-container {
border: 1px solid var(--color-secondary);
border-radius: var(--border-radius);
}
.repository.view.issue .comment-list .comment .merge-section {
background-color: var(--color-box-body);
}
.repository.view.issue .comment-list .comment .merge-section .item-section {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
padding: 0;
gap: 0.5em;
}
.repository.view.issue .comment-list .comment .merge-section .divider {
margin-left: -1rem;
width: calc(100% + 2rem);
}
.repository.view.issue .comment-list .comment .merge-section.no-header::before,
.repository.view.issue .comment-list .comment .merge-section.no-header::after {
right: 100%;
top: 20px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.repository.view.issue .comment-list .comment .merge-section.no-header::before {
border-right-color: var(--color-secondary);
border-width: 9px;
margin-top: -9px;
}
.repository.view.issue .comment-list .comment .merge-section.no-header::after {
border-right-color: var(--color-box-body);
border-width: 8px;
margin-top: -8px;
}
.merge-section-info code {
border: 1px solid var(--color-light-border);
border-radius: var(--border-radius);
padding: 2px 4px;
background: var(--color-light);
}
.repository.view.issue .comment-list .comment .markup {
font-size: 14px;
}
.repository.view.issue .comment-list .comment .no-content {
color: var(--color-text-light-2);
font-style: italic;
}
.repository.view.issue .comment-list .comment .ui.form .field:first-child {
clear: none;
}
.repository.view.issue .comment-list .comment .ui.form .field.footer {
overflow: hidden;
}
.repository.view.issue .comment-list .comment .ui.form .field .tab.markup {
min-height: 5rem;
}
.repository.view.issue .comment-list .comment .edit.buttons {
margin-top: 10px;
}
.repository.view.issue .comment-list .code-comment {
margin: 0;
/* top: around 5px of whitespace are added by reaction octicon. (0.5rem=7px)-5px=2px */
padding: 2px 0.5rem 1.5rem;
}
@media (max-width: 768px) {
.repository.view.issue .comment-list .code-comment {
padding: 0.33rem 0.33rem 1.33rem;
}
}
.repository.view.issue .comment-list .code-comment:target {
outline: 1px solid var(--color-primary);
}
.repository.view.issue .comment-list .code-comment .header {
display: flex;
margin-bottom: 0.25rem;
justify-content: space-between;
align-items: center;
}
.repository.view.issue .comment-list .code-comment .header .comment-header-left {
gap: 0.5rem;
}
.repository.view.issue .comment-list .code-comment .header .avatar {
margin: 0 !important;
}
.repository.view.issue .comment-list .code-comment .comment-content {
margin-left: calc(20px + 0.5rem);
}
.repository.view.issue .comment-list .code-comment .add-reaction {
padding: 0 0.5rem;
}
/* emulation of horizontal rule between comments originating from forgejo- themes, commit faab0c670e */
.repository.view.issue .comment-list .code-comment + .code-comment {
margin-top: 1rem !important;
padding-top: 1rem !important;
border-top: 1px solid var(--color-secondary) !important;
}
@media (max-width: 768px) {
.repository.view.issue .comment-list .code-comment + .code-comment {
margin-top: 0.5rem !important;
padding-top: 0.5rem !important;
}
}
.repository.view.issue .comment-list .comment > .avatar {
margin-top: 6px;
}
.repository.view.issue .comment-list .comment > .avatar ~ .content {
margin-left: 42px;
}
.repository.view.issue .comment-list .comment-code-cloud .segment.reactions {
gap: var(--button-spacing);
flex-wrap: wrap;
width: unset !important;
margin-left: calc(20px + 0.5rem) !important;
margin-top: 1rem !important;
margin-bottom: -1rem !important;
border-top: none !important;
background: transparent !important;
}
.repository.view.issue .comment-list .comment-code-cloud .segment.reactions .ui.label {
border: 1px solid;
padding: 5px 8px !important;
border-radius: var(--border-radius);
border-color: var(--color-secondary-dark-1) !important;
}
.repository.view.issue .comment-list .comment-code-cloud .segment.reactions .ui.label.basic.primary {
background-color: var(--color-reaction-active-bg) !important;
border-color: var(--color-primary-alpha-80) !important;
}
.repository.view.issue .comment-list .comment-code-cloud .segment.reactions .ui.label.basic.primary:hover {
background-color: var(--color-reaction-hover-bg) !important;
border-color: var(--color-primary-alpha-80) !important;
}
.repository.view.issue .comment-list .comment-code-cloud button.comment-form-reply {
margin: 0;
}
.repository.view.issue .comment-list .event {
padding-left: 15px;
}
.repository.view.issue .comment-list .event .detail {
margin-top: 4px;
margin-left: 15px;
}
.repository.view.issue .comment-list .event .detail .text {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.repository.view.issue .comment-list .event .segments {
box-shadow: none;
}
@media (max-width: 767.98px) {
.repository.view.issue .comment-list {
padding: 1rem 0 !important; /* Important is required here to override existing fomantic styles. */
}
}
.repository.view.issue .ui.depending .item.is-closed .title {
text-decoration: line-through;
}
.repository .comment.form .content .field:first-child {
clear: none;
}
.repository .comment.form .content .form::before,
.repository .comment.form .content .form::after {
right: 100%;
top: 20px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.repository .comment.form .content .form::before {
border-right-color: var(--color-secondary);
border-width: 9px;
margin-top: -9px;
}
.repository .comment.form .content .form::after {
border-right-color: var(--color-box-body);
border-width: 8px;
margin-top: -8px;
}
.repository.new.milestone textarea {
height: 200px;
}
.milestone-progress-big {
width: min(420px, 96vw);
height: 10px;
}
.repository.compare.pull .show-form-container {
text-align: left;
}
.repository .choose.branch {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.repository .choose .compare-separator {
width: 100%;
margin-top: -1rem;
text-align: center;
}
.branch-tag-tab {
padding: 0 10px 10px;
}
.branch-tag-item {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0 10px;
border: 1px solid transparent;
border-bottom: none;
}
.repository.compare.pull .comment.form .content::before,
.repository.compare.pull .comment.form .content::after {
right: 100%;
top: 20px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.repository.compare.pull .comment.form .content::before {
border-right-color: var(--color-secondary);
border-width: 9px;
margin-top: -9px;
}
.repository.compare.pull .comment.form .content::after {
border-right-color: var(--color-box-body);
border-width: 8px;
margin-top: -8px;
}
.repository.compare.pull .pullrequest-form {
margin-top: 16px;
margin-bottom: 16px;
}
.repository.compare.pull .markup {
font-size: 14px;
}
.repository.compare.pull .title .issue-title {
margin-bottom: 0.5rem;
}
.repository.compare.pull .title .issue-title .index {
color: var(--color-text-light-2);
}
.repository.branches .commit-divergence .bar-group {
position: relative;
float: left;
padding-bottom: 6px;
width: 50%;
max-width: 90px;
}
.repository.branches .commit-divergence .bar-group:last-child {
border-left: 1px solid var(--color-secondary-dark-2);
}
.repository.branches .commit-divergence .count {
margin: 0 3px;
}
.repository.branches .commit-divergence .count.count-ahead {
text-align: left;
}
.repository.branches .commit-divergence .count.count-behind {
text-align: right;
}
.repository.branches .commit-divergence .bar {
height: 4px;
position: absolute;
background-color: var(--color-secondary-dark-2);
}
.repository.branches .commit-divergence .bar.bar-behind {
right: 0;
}
.repository.branches .commit-divergence .bar.bar-ahead {
left: 0;
}
.repository.commits .header .search input {
font-weight: var(--font-weight-normal);
padding: 5px 10px;
}
.repository #commits-table td:not(.message) {
white-space: nowrap;
}
.repository #commits-table thead .sha {
width: 200px;
}
.repository #commits-table thead .shatd {
text-align: center;
}
.repository #commits-table td.sha .sha.label {
margin: 0;
}
.repository #commits-table.ui.basic.striped.table tbody tr:nth-child(2n) {
background-color: var(--color-light) !important;
}
.repository .data-table {
width: 100%;
}
.repository .data-table tr {
border-top: 0;
}
.repository .data-table td,
.repository .data-table th {
padding: 5px !important;
overflow: hidden;
font-size: 12px;
text-align: left;
white-space: nowrap;
border: 1px solid var(--color-secondary);
}
/* the border css competes with .markup where all tables have outer border which would add a double
border here, remove only the outer borders from this table */
.repository .data-table tr:first-child :is(td,th) {
border-top: none !important;
}
.repository .data-table tr:last-child :is(td,th) {
border-bottom: none !important;
}
.repository .data-table tr :is(td,th):first-child {
border-left: none !important;
}
.repository .data-table tr :is(td,th):last-child {
border-right: none !important;
}
.repository .data-table td {
white-space: pre-line;
}
.repository .data-table th {
font-weight: var(--font-weight-semibold);
background: var(--color-box-header);
border-top: 0;
}
.repository .data-table td.added,
.repository .data-table th.added,
.repository .data-table tr.added {
background-color: var(--color-diff-added-row-bg) !important;
}
.repository .data-table td.removed,
.repository .data-table th.removed,
.repository .data-table tr.removed {
background-color: var(--color-diff-removed-row-bg) !important;
}
.repository .data-table td.moved,
.repository .data-table th.moved,
.repository .data-table tr.moved {
background-color: var(--color-diff-moved-row-bg) !important;
}
.repository .data-table tbody.section {
border-top: 2px solid var(--color-secondary);
}
.repository .data-table .line-num {
width: 1%;
min-width: 50px;
font-family: monospace;
line-height: 20px;
color: var(--color-text-light-1);
white-space: nowrap;
vertical-align: top;
cursor: pointer;
text-align: right;
background: var(--color-body);
border: 0;
}
.repository .diff-detail-box {
display: flex;
justify-content: space-between;
align-items: center;
position: sticky;
top: 0;
z-index: 8;
padding: 7px 5px;
margin: 0 -5px; /* negative margin so it covers active file shadow */
height: 44px; /* this height should match sticky-2nd-row */
background: var(--color-body);
}
@media (max-width: 480px) {
.repository .diff-detail-box {
flex-wrap: wrap;
}
}
.repository .diff-detail-box .diff-detail-stats strong {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
/* Because the translations contain the <strong> we need to style with nth-of-type */
.repository .diff-detail-box .diff-detail-stats strong:nth-of-type(1) {
color: var(--color-yellow);
}
.repository .diff-detail-box .diff-detail-stats strong:nth-of-type(2) {
color: var(--color-green);
}
.repository .diff-detail-box .diff-detail-stats strong:nth-of-type(3) {
color: var(--color-red);
}
@media (max-width: 800px) {
.repository .diff-detail-box .diff-detail-stats {
display: none !important;
}
}
.diff-detail-actions {
display: flex;
align-items: center;
justify-content: end;
}
.diff-detail-actions > *,
.diff-detail-actions .button {
margin-left: 0 !important;
margin-right: 0 !important;
}
.repository .diff-detail-box span.status {
display: inline-block;
width: 12px;
height: 12px;
margin-right: 8px;
vertical-align: middle;
}
.repository .diff-detail-box span.status.modify {
background-color: var(--color-yellow);
}
.repository .diff-detail-box span.status.add {
background-color: var(--color-green);
}
.repository .diff-detail-box span.status.del {
background-color: var(--color-red);
}
.repository .diff-detail-box span.status.rename {
background-color: var(--color-teal);
}
.repository .diff-detail-box .ui.button {
padding: 0 1.125em;
height: 30px;
}
.repository .diff-box .header:not(.resolved-placeholder) .file {
min-width: 0;
}
.repository .diff-box .header:not(.resolved-placeholder) .file .file-link {
max-width: fit-content;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.repository .diff-box .header:not(.resolved-placeholder) .button {
padding: 0 1.125em;
flex: 0 0 auto;
margin-right: 0;
height: 30px;
}
.repository .diff-box .resolved-placeholder {
display: flex;
align-items: center;
font-size: 14px !important;
height: 36px;
padding-top: 0;
padding-bottom: 0;
}
.repository .diff-box .resolved-placeholder .button {
padding: 8px 12px;
}
.repository .diff-file-box .header {
background-color: var(--color-box-header);
}
.repository .diff-file-box .file-body.file-code {
background: var(--color-code-bg);
}
.repository .diff-file-box .file-body.file-code .lines-num {
text-align: right;
width: 1%;
min-width: 50px;
}
.repository .diff-file-box .file-body.file-code .lines-num span.fold {
display: block;
text-align: center;
}
.repository .diff-file-box .code-diff td {
padding: 0 0 0 10px !important;
border-top: 0;
}
.repository .diff-file-box .code-diff .lines-num {
padding: 0 5px !important;
}
.repository .diff-file-box .code-diff .tag-code .lines-num,
.repository .diff-file-box .code-diff .tag-code td {
padding: 0 !important;
}
.repository .diff-file-box .code-diff table {
table-layout: fixed;
}
.repository .diff-file-box .code-diff tbody tr td.lines-num,
.repository .diff-file-box .code-diff tbody tr td.lines-escape,
.repository .diff-file-box .code-diff tbody tr td.lines-type-marker {
white-space: nowrap;
}
.repository .diff-file-box .code-diff tbody tr td.center {
text-align: center;
}
.repository .diff-file-box .code-diff tbody tr [data-line-num]::before {
content: attr(data-line-num);
text-align: right;
}
.repository .diff-file-box .code-diff tbody tr .lines-type-marker {
width: 10px;
min-width: 10px;
}
.repository .diff-file-box .code-diff tbody tr [data-type-marker]::before {
content: attr(data-type-marker);
text-align: right;
display: inline-block;
}
.repository .diff-file-box .code-diff-split .tag-code .lines-code code.code-inner {
padding-left: 10px !important;
}
.repository .diff-file-box .code-diff-split table,
.repository .diff-file-box .code-diff-split tbody {
width: 100%;
}
.repository .diff-file-box.file-content {
clear: right;
}
.repository .diff-file-box.file-content .image-diff img {
max-width: 100%;
padding: 0;
border-radius: 0;
}
.repository .diff-file-box .ui.bottom.attached.table.segment {
padding-top: 5px;
padding-bottom: 5px;
}
.diff-file-box {
border: 1px solid transparent;
border-radius: var(--border-radius);
scroll-margin-top: 47px; /* match .repository .diff-detail-box */
}
.file.editor .diff-file-box {
border: none;
}
.file.editor .diff-file-box .ui.attached.table {
border: none;
}
/* TODO: this can potentially be made "global" by removing the class prefix */
.diff-file-box .ui.attached.header,
.diff-file-box .ui.attached.table {
margin: 0; /* remove fomantic negative margins */
width: initial; /* remove fomantic over 100% width */
max-width: initial; /* remove fomantic over 100% width */
}
.repository .repo-search-result {
padding-top: 10px;
padding-bottom: 10px;
}
.repository .repo-search-result .lines-num a {
color: inherit;
}
/* workaround for safari as it does not support 'display: list-item' for summary tags yet
** see https://codeberg.org/forgejo/forgejo/issues/5259 */
details.repo-search-result summary::-webkit-details-marker,
details.repo-search-result summary::marker {
display: none;
}
.search-highlight {
background: var(--color-primary-alpha-40);
}
.repository.quickstart .guide .item {
padding: 1em;
}
.repository.quickstart .guide .item small {
font-weight: var(--font-weight-normal);
}
.repository.quickstart .guide #repo-clone-url {
border-radius: 0;
padding: 5px 10px;
font-size: 1.2em;
line-height: 1.4;
flex: 1
}
.empty-placeholder {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 40px;
padding-bottom: 40px;
}
.repository.packages .file-size {
white-space: nowrap;
}
.repository .activity-header {
display: flex;
justify-content: space-between;
gap: 8px;
flex-wrap: wrap;
}
/* if the element is for a checkbox, then it should have a padding-left to align to the checkbox's text */
.repository.settings.branches .branch-protection .ui.checkbox .help,
.repository.settings.branches .branch-protection .checkbox-sub-item {
padding-left: 26px;
}
.repository.settings.branches .branch-protection .status-check-matched-mark {
font-weight: var(--font-weight-semibold);
font-style: italic;
}
.repository .ui.attached.isSigned.isWarning {
border-left: 1px solid var(--color-error-border);
border-right: 1px solid var(--color-error-border);
}
.repository .ui.attached.isSigned.isWarning.top,
.repository .ui.attached.isSigned.isWarning.message {
border-top: 1px solid var(--color-error-border);
}
.repository .ui.attached.isSigned.isWarning.message {
box-shadow: none;
background-color: var(--color-error-bg);
color: var(--color-error-text);
}
.repository .ui.attached.isSigned.isWarning.message .ui.text {
color: var(--color-error-text);
}
.repository .ui.attached.isSigned.isWarning:last-child,
.repository .ui.attached.isSigned.isWarning.bottom {
border-bottom: 1px solid var(--color-error-border);
}
.repository .ui.attached.isSigned.isVerified {
border-left: 1px solid var(--color-success-border);
border-right: 1px solid var(--color-success-border);
}
.repository .ui.attached.isSigned.isVerified.top,
.repository .ui.attached.isSigned.isVerified.message {
border-top: 1px solid var(--color-success-border);
}
.repository .ui.attached.isSigned.isVerified.message {
box-shadow: none;
background-color: var(--color-success-bg);
color: var(--color-success-text);
}
.repository .ui.attached.isSigned.isVerified.message .ui.text {
color: var(--color-success-text);
}
.repository .ui.attached.isSigned.isVerified:last-child,
.repository .ui.attached.isSigned.isVerified.bottom {
border-bottom: 1px solid var(--color-success-border);
}
.repository .ui.attached.isSigned.isVerifiedUntrusted,
.repository .ui.attached.isSigned.isVerifiedUnmatched {
border-left: 1px solid var(--color-warning-border);
border-right: 1px solid var(--color-warning-border);
}
.repository .ui.attached.isSigned.isVerifiedUntrusted.top,
.repository .ui.attached.isSigned.isVerifiedUnmatched.top,
.repository .ui.attached.isSigned.isVerifiedUntrusted.message,
.repository .ui.attached.isSigned.isVerifiedUnmatched.message {
border-top: 1px solid var(--color-warning-border);
}
.repository .ui.attached.isSigned.isVerifiedUntrusted.message,
.repository .ui.attached.isSigned.isVerifiedUnmatched.message {
box-shadow: none;
background-color: var(--color-warning-bg);
color: var(--color-warning-text);
}
.repository .ui.attached.isSigned.isVerifiedUntrusted.message .ui.text,
.repository .ui.attached.isSigned.isVerifiedUnmatched.message .ui.text {
color: var(--color-warning-text);
}
.repository .ui.attached.isSigned.isVerifiedUntrusted:last-child,
.repository .ui.attached.isSigned.isVerifiedUnmatched:last-child,
.repository .ui.attached.isSigned.isVerifiedUntrusted.bottom,
.repository .ui.attached.isSigned.isVerifiedUnmatched.bottom {
border-bottom: 1px solid var(--color-warning-border);
}
.repository .segment.reactions.dropdown .menu,
.repository .select-reaction.dropdown .menu {
right: 0 !important;
left: auto !important;
min-width: 170px;
}
.repository .segment.reactions.dropdown .menu > .header,
.repository .select-reaction.dropdown .menu > .header {
margin: 0.75rem 0 0.5rem;
}
.repository .segment.reactions.dropdown .menu > .item,
.repository .select-reaction.dropdown .menu > .item {
float: left;
margin: 4px;
font-size: 20px;
width: 34px;
height: 34px;
min-height: 0 !important;
border-radius: var(--border-radius);
display: flex !important;
align-items: center;
justify-content: center;
}
.repository .segment.reactions {
padding: 0;
display: flex;
border: none !important;
border-top: 1px solid var(--color-secondary) !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
border-radius: 0 0 var(--border-radius) var(--border-radius);
}
.repository .segment.reactions .ui.label {
max-height: 40px;
padding: 8px 16px !important;
display: flex !important;
align-items: center;
border: 0;
border-right: 1px solid;
border-radius: 0;
margin: 0;
font-size: 12px;
font-weight: var(--font-weight-normal);
border-color: var(--color-secondary) !important;
background: var(--color-reaction-bg);
}
.repository .segment.reactions .ui.label:first-of-type {
border-bottom-left-radius: 3px;
}
.repository .segment.reactions .ui.label.disabled {
cursor: default;
opacity: 1;
}
.repository .segment.reactions .ui.label.basic.primary {
color: var(--color-primary) !important;
background-color: var(--color-reaction-active-bg) !important;
border-color: var(--color-secondary-dark-1) !important;
}
.repository .segment.reactions .ui.label.basic:hover {
background-color: var(--color-reaction-hover-bg) !important;
}
.repository .segment.reactions .reaction-count {
margin-left: 0.5rem;
}
.repository .segment.reactions .select-reaction {
display: flex;
align-items: center;
}
.repository .segment.reactions .select-reaction a {
padding: 0 14px;
}
.repository .segment.reactions .select-reaction:not(.active) a {
display: none;
}
.repository .segment.reactions:hover .select-reaction a {
display: block;
}
.repository .ui.fluid.action.input .ui.search.action.input {
flex: auto;
}
.repository .repository-summary {
box-shadow: none;
}
.repository .repository-summary .repository-menu {
display: grid;
grid-template-columns: repeat(4, 1fr);
padding: 0;
}
@media (max-width: 767.98px) {
.repository .repository-summary .repository-menu {
grid-template-rows: repeat(2, 1fr);
grid-template-columns: repeat(2, 1fr);
}
}
.repository .repository-summary .segment.sub-menu {
border: none;
display: flex;
align-items: center;
padding: 0;
}
.repository .repository-summary .item {
flex: 1;
height: 30px;
line-height: var(--line-height-default);
display: flex;
align-items: center;
justify-content: center;
gap: 0.25em;
text-decoration: none;
border-radius: var(--border-radius);
}
.repository .repository-summary .item.active {
background: var(--color-secondary);
font-weight: var(--font-weight-medium);
}
#search-user-box .results .result .image {
order: 0;
margin-right: 12px;
width: 2em;
height: 2em;
min-width: 2em;
min-height: 2em;
}
#search-user-box .results .result .content {
margin: 0; /* remove margin reserved for avatar because we move it to left via `order: 0` */
}
.ui.menu .item > img:not(.ui) {
width: auto;
}
.page.buttons {
padding-top: 15px;
}
.commit-header-row {
min-height: 50px !important;
}
.signature-row {
display: flex;
flex-wrap: wrap;
padding: 0.75rem 1rem !important;
gap: 0.5rem 1rem;
justify-content: space-between;
}
.signature-row > div {
display: flex;
align-items: center;
}
.commit-header-buttons {
display: flex;
gap: 4px;
align-items: flex-start;
white-space: nowrap;
}
@media (max-width: 767.98px) {
.commit-header-buttons {
flex-direction: column;
align-items: stretch;
}
}
.settings.webhooks .list > .item:not(:first-child),
.settings.githooks .list > .item:not(:first-child),
.settings.actions .list > .item:not(:first-child) {
padding: 0.25rem 1rem;
margin: 12px -1rem -1rem;
}
.settings .list > .item:not(:first-child) {
border-top: 1px solid var(--color-secondary);
padding: 1rem;
margin: 16px -1rem -1rem;
}
.settings .list > .item > .svg {
display: table-cell;
}
.settings .list > .item > .svg + .content {
display: table-cell;
padding: 0 0 0 0.5em;
vertical-align: top;
}
.settings .list > .item .info {
margin-top: 10px;
}
.settings .list > .item .info .tab.segment {
border: 0;
padding: 10px 0 0;
}
.ui.vertical.menu .header.item {
font-size: 1.1em;
background: var(--color-box-header);
}
.comment:target .comment-container {
border-color: var(--color-primary) !important;
box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important;
}
.comment:target .header::before {
border-right-color: var(--color-primary) !important;
filter: drop-shadow(-3px 0 0 var(--color-primary-alpha-30)) !important;
}
.code-comment:target,
.diff-file-box:target {
border-color: var(--color-primary) !important;
border-radius: var(--border-radius) !important;
box-shadow: 0 0 0 3px var(--color-primary-alpha-30) !important;
}
.code-comment:target .content {
box-shadow: none !important;
}
.comment-header {
border: none !important;
background: var(--color-box-header);
border-bottom: 1px solid var(--color-secondary) !important;
font-weight: var(--font-weight-normal) !important;
margin: 0 !important;
position: relative;
color: var(--color-text);
min-height: 41px;
background-color: var(--color-box-header);
display: flex;
justify-content: space-between;
align-items: center;
}
.timeline .ui.comment-header {
padding: 0.25rem 0.75rem;
}
.comment-header::before,
.comment-header::after {
right: 100%;
top: 20px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.comment-header::before {
border-right-color: var(--color-secondary);
border-width: 9px;
margin-top: -9px;
}
.comment-header::after {
border-right-color: var(--color-box-header);
border-width: 8px;
margin-top: -8px;
}
.comment-header.arrow-top::before,
.comment-header.arrow-top::after {
transform: rotate(90deg);
}
.comment-header.arrow-top::before {
top: -9px;
left: 6px;
}
.comment-header.arrow-top::after {
top: -8px;
left: 7px;
}
.comment-header-right.actions a:not(.label) {
padding: 0.5rem;
}
.comment-header-right.actions .label {
margin: 0 !important;
}
.comment-header-left,
.comment-header-right {
gap: 4px;
}
.comment-header-left > .content-history-menu.active s {
text-decoration-thickness: 10%;
}
.comment-body {
background: var(--color-box-body);
border: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 1em;
}
.stats-table {
display: table;
width: 100%;
margin: 6px 0;
border-spacing: 2px;
}
.stats-table .table-cell {
display: table-cell;
}
.stats-table .table-cell.tiny {
height: 8px;
}
.stats-table .table-cell:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.stats-table .table-cell:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.labels-list {
display: inline-flex;
flex-wrap: wrap;
gap: 2.5px;
align-items: center;
}
.labels-list .label {
padding: 0 6px;
min-height: 20px;
line-height: 1.3; /* there is a `font-size: 1.25em` for inside emoji, so here the line-height needs to be larger slightly */
}
/* Scoped labels with different colors on left and right */
.ui.label.scope-parent {
background: none !important;
padding: 0 !important;
gap: 0 !important;
}
.ui.label.scope-left {
border-bottom-right-radius: 0;
border-top-right-radius: 0;
margin-right: 0;
}
.ui.label.scope-right {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
margin-left: 0;
}
.archived-label {
filter: grayscale(0.25) saturate(0.75);
}
.repo-button-row {
margin: 10px 0;
display: flex;
align-items: center;
gap: 0.5em;
flex-wrap: wrap;
justify-content: space-between;
}
.repo-button-row .button {
padding: 6px 10px !important;
height: 30px;
}
.repo-button-row .button.dropdown:not(.icon) {
padding-right: 22px !important; /* normal buttons have !important paddings, so we need to override it for dropdown (Add File) icons */
}
.repo-button-row .button strong {
/* Workaround where 'overflow: hidden' is clipping the y-axis, force a small amount of extra padding in the y-axis. */
padding: .1em 0;
}
.repo-button-row input {
height: 30px;
}
tbody.commit-list {
vertical-align: baseline;
}
.message-wrapper,
.author-wrapper {
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
display: inline-block;
vertical-align: middle;
}
.author-wrapper {
max-width: 180px;
align-self: center;
white-space: nowrap;
}
/* in the commit list, messages can wrap so we can use inline */
.commit-list .message-wrapper {
display: inline;
overflow-wrap: anywhere;
}
/* but in the repo-files-table we cannot */
#repo-files-table .commit-list .message-wrapper {
display: inline-block;
}
@media (max-width: 767.98px) {
tr.commit-list {
width: 100%;
}
.author-wrapper {
max-width: 80px;
}
}
@media (min-width: 768px) and (max-width: 991.98px) {
tr.commit-list {
width: 723px;
}
}
@media (min-width: 992px) and (max-width: 1200px) {
tr.commit-list {
width: 933px;
}
}
@media (min-width: 1201px) {
tr.commit-list {
width: 1127px;
}
}
.commit-body {
margin: 0.25em 0;
white-space: pre-wrap;
overflow-wrap: anywhere;
line-height: initial;
}
.git-notes.top {
text-align: left;
}
.comment-diff-data {
background: var(--color-code-bg);
min-height: 12em;
max-height: calc(100vh - 10.5rem);
overflow-y: auto;
tab-size: 4;
}
.comment-diff-data pre {
line-height: 18px;
margin: 1em;
white-space: pre-wrap;
word-break: break-all;
overflow-wrap: break-word;
}
.content-history-detail-dialog .header .avatar {
position: relative;
top: -2px;
}
.repo-topics {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem;
}
.repo-topics .repo-topic {
font-weight: var(--font-weight-normal);
cursor: pointer;
margin: 0;
}
.repo-topics .repo-topic:last-of-type {
margin-right: 0.5rem;
}
#new-dependency-drop-list.ui.selection.dropdown {
min-width: 0;
width: 100%;
border-radius: var(--border-radius) 0 0 var(--border-radius);
border-right: 0;
white-space: nowrap;
}
#new-dependency-drop-list .text {
width: 100%;
overflow: hidden;
}
.tag-code {
height: 28px;
}
.tag-code,
.tag-code td,
.tag-code .blob-excerpt {
background-color: var(--color-box-body-highlight);
vertical-align: middle;
}
.resolved-placeholder {
font-weight: var(--font-weight-normal) !important;
border: 1px solid var(--color-secondary) !important;
border-radius: var(--border-radius) !important;
margin: 4px !important;
}
.resolved-placeholder + .comment-code-cloud {
padding-top: 0 !important;
}
.blob-excerpt {
background-color: var(--color-secondary-alpha-30);
}
.issue-keyword {
border-bottom: 1px dotted var(--color-text-light-3) !important;
}
.issue-keyword:hover {
border-bottom: none !important;
}
.file-header {
align-items: center;
display: flex;
justify-content: space-between;
overflow-x: auto;
padding: 6px 12px !important;
font-size: 13px !important;
min-height: 46px;
}
.file-info {
display: flex;
align-items: center;
}
.file-info-entry {
display: flex;
align-items: center;
width: max-content;
}
.file-info-entry + .file-info-entry {
border-left: 1px solid currentcolor;
margin-left: 8px;
padding-left: 8px;
}
#diff-container {
display: flex;
}
#diff-content-container {
flex: 1;
}
#diff-commit-header {
/* Counteract the `+2px` for width in `.segment` */
padding: 0 2px;
}
#diff-commit-header + h4,
#diff-commit-header + #diff-file-boxes {
margin-top: 8px;
}
#diff-file-boxes {
max-width: 100%;
display: flex;
flex-direction: column;
gap: 8px;
}
#diff-file-tree {
flex: 0 0 20%;
max-width: 380px;
line-height: inherit;
position: sticky;
padding-top: 0;
top: 47px;
max-height: calc(100vh - 47px);
height: 100%;
overflow-y: auto;
}
.ui.message.unicode-escape-prompt {
margin-bottom: 0;
border-radius: 0;
display: flex;
flex-direction: column;
}
/* fomantic's last-child selector does not work with hidden last child */
.ui.buttons .unescape-button {
border-top-right-radius: 0.28571429rem;
border-bottom-right-radius: 0.28571429rem;
}
.webhook-info {
padding: 7px 12px;
margin: 10px 0;
background-color: var(--color-markup-code-block);
border: 1px solid var(--color-secondary);
border-radius: var(--border-radius);
font-size: 13px;
line-height: 1.5;
overflow: auto;
}
.title_wip_desc {
margin-top: 1em;
}
.sidebar-item-link {
display: inline-flex;
align-items: center;
overflow-wrap: anywhere;
}
.diff-file-header {
padding: 5px 8px !important;
}
.diff-file-box[data-folded="true"] .diff-file-body {
display: none;
}
.diff-file-box[data-folded="true"] .diff-file-header {
border-radius: var(--border-radius) !important;
}
.ui.attached.header.diff-file-header.sticky-2nd-row {
position: sticky;
top: 44px; /* match .repository .diff-detail-box */
z-index: 7;
}
.diff-file-name {
flex: auto;
min-width: 100px;
}
.diff-file-name .ui.label {
margin-left: 0 !important;
}
.diff-stats-bar {
display: inline-block;
background-color: var(--color-red);
height: 12px;
width: 44px;
}
.diff-stats-bar .diff-stats-add-bar {
background-color: var(--color-green);
height: 100%;
}
.ui.form .right .ui.button {
margin-left: 0.25em;
margin-right: 0;
}
.removed-code {
background: var(--color-diff-removed-word-bg);
}
.added-code {
background: var(--color-diff-added-word-bg);
}
.code-diff-unified .del-code,
.code-diff-unified .del-code td,
.code-diff-split .del-code .lines-num-old,
.code-diff-split .del-code .lines-escape-old,
.code-diff-split .del-code .lines-type-marker-old,
.code-diff-split .del-code .lines-code-old {
background: var(--color-diff-removed-row-bg);
border-color: var(--color-diff-removed-row-border);
}
.code-diff-unified .add-code,
.code-diff-unified .add-code td,
.code-diff-split .add-code .lines-num-new,
.code-diff-split .add-code .lines-type-marker-new,
.code-diff-split .add-code .lines-escape-new,
.code-diff-split .add-code .lines-code-new,
.code-diff-split .del-code .add-code.lines-num-new,
.code-diff-split .del-code .add-code.lines-type-marker-new,
.code-diff-split .del-code .add-code.lines-escape-new,
.code-diff-split .del-code .add-code.lines-code-new {
background: var(--color-diff-added-row-bg);
border-color: var(--color-diff-added-row-border);
}
.code-diff-split .del-code .lines-num-new,
.code-diff-split .del-code .lines-type-marker-new,
.code-diff-split .del-code .lines-code-new,
.code-diff-split .del-code .lines-escape-new,
.code-diff-split .add-code .lines-num-old,
.code-diff-split .add-code .lines-escape-old,
.code-diff-split .add-code .lines-type-marker-old,
.code-diff-split .add-code .lines-code-old {
background: var(--color-diff-inactive);
}
.code-diff-split tbody tr td:nth-child(5),
.code-diff-split tbody tr td.add-comment-right {
border-left: 1px solid var(--color-secondary);
}
.commits-table .commits-table-right form {
display: flex;
align-items: center;
gap: 0.75em;
justify-content: center;
flex-wrap: wrap;
}
@media (max-width: 767.98px) {
.repository.file.list #repo-files-table .entry,
.repository.file.list #repo-files-table .commit-list {
align-items: center;
display: flex !important;
padding-top: 4px;
padding-bottom: 4px;
}
.repository.file.list #repo-files-table .entry td.age,
.repository.file.list #repo-files-table .commit-list td.age,
.repository.file.list #repo-files-table .entry th.age,
.repository.file.list #repo-files-table .commit-list th.age {
margin-left: auto;
}
.repository.file.list #repo-files-table .entry td.message,
.repository.file.list #repo-files-table .commit-list td.message,
.repository.file.list #repo-files-table .entry span.commit-summary,
.repository.file.list #repo-files-table .commit-list tr span.commit-summary {
display: none !important;
}
.repository.view.issue .comment-list .timeline,
.repository.view.issue .comment-list .timeline-item {
margin-left: 0;
}
.repository.view.issue .comment-list .timeline::before {
left: 14px;
}
.repository.view.issue .comment-list .timeline .inline-timeline-avatar {
display: flex;
margin-bottom: auto;
margin-left: 6px;
margin-right: 2px;
}
.repository.view.issue .comment-list .timeline .comment-header {
padding-left: 4px;
}
.repository.view.issue .comment-list .timeline .comment-header::before,
.repository.view.issue .comment-list .timeline .comment-header::after {
content: unset;
}
/* Don't show the general avatar, we show the inline avatar on mobile.
* And don't show the role labels, there's no place for that. */
.repository.view.issue .comment-list .timeline .timeline-avatar,
.repository.view.issue .comment-list .timeline .comment-header-right .role-label {
display: none;
}
.commit-header-row .ui.horizontal.list {
width: 100%;
overflow-x: auto;
margin-top: 2px;
}
.commit-header-row .ui.horizontal.list .item {
align-items: center;
display: flex;
}
.commit-header-row .author {
padding: 3px 0;
}
.commit-header h3 {
flex-basis: auto !important;
margin-bottom: 0.5rem !important;
}
.commits-table {
flex-direction: column;
}
.commits-table .commits-table-left {
align-items: initial !important;
}
.commits-table .commits-table-right form > div:nth-child(1) {
order: 1; /* the "commit search" input */
}
.commits-table .commits-table-right form > div:nth-child(2) {
order: 3; /* the "search all" checkbox */
}
.commits-table .commits-table-right form > button:nth-child(3) {
order: 2; /* the "search" button */
}
.commit-table {
overflow-x: auto;
}
.commit-table td.sha,
.commit-table th.sha {
display: none !important;
}
.comment-header {
flex-wrap: wrap;
}
.comment-header .comment-header-left {
flex-wrap: wrap;
}
.comment-header .comment-header-right {
margin-left: auto;
}
}
.branch-dropdown-button {
max-width: 340px;
vertical-align: bottom !important;
}
@media (min-width: 768px) and (max-width: 991.98px) {
.branch-dropdown-button {
max-width: 185px;
}
}
@media (max-width: 767.98px) {
.branch-dropdown-button {
max-width: 165px;
}
}
.commit-status-header {
/* reset the default ".ui.attached.header" styles, to use the outer border */
border: none !important;
/* add a bottom border to make sure there is always a divider between the header and list when the list is scrolling */
border-bottom: 1px solid var(--color-secondary) !important;
/* use negative margin to avoid the newly added border conflict with the list's top border */
margin: 0 0 -1px !important;
}
.commit-status-list {
max-height: 240px; /* fit exactly 6 items, commit-status-item.height * 6 */
overflow-x: hidden;
transition: max-height .2s;
}
.commit-status-item {
height: 40px;
padding: 0 10px;
display: flex;
gap: 8px;
align-items: center;
}
.commit-status-item + .commit-status-item {
border-top: 1px solid var(--color-secondary);
}
.commit-status-item .commit-status {
flex-shrink: 0;
}
.commit-status-item .status-context {
color: var(--color-text);
flex: 1;
}
.commit-status-item .status-details {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
.commit-status-item .status-details > span {
padding-right: 0.5em; /* To avoid scrollbar occlusion */
}
.search-fullname {
color: var(--color-text-light-2);
}
#issue-pins {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 8px;
}
@media (max-width: 767.98px) {
#issue-pins {
grid-template-columns: repeat(1, 1fr);
}
}
#cherry-pick-modal .scrolling.menu {
max-height: 200px;
}
/* Branch tag selector - TODO: Merge this into the same selector on repo page */
.repository .issue-content .issue-content-right .ui.grid .column.row {
padding: 10px;
padding-bottom: 0;
}
.repository .issue-content .issue-content-right .ui.grid .column.muted {
padding: 0;
}
.repository .issue-content .issue-content-right .ui.grid .column.muted .text {
display: inline-block;
padding: 10px;
width: 100%;
text-align: center;
border: 1px solid transparent;
border-bottom: none;
}
.repository .issue-content .issue-content-right .ui.grid .column.muted .text.black {
border-color: var(--color-secondary);
background: var(--color-menu);
border-top-left-radius: var(--border-radius);
border-top-right-radius: var(--border-radius);
}
.repository .issue-content .issue-content-right .ui.dropdown .scrolling.menu {
border-top: none;
}
.repository .issue-content .issue-content-right .branch-tag-divider {
margin-top: -1px;
border-top: 1px solid var(--color-secondary);
}
#issue-info-popup .emoji {
font-size: inherit;
line-height: inherit;
}
#repo-activity-top-authors-chart {
height: 150px; /* Pre-allocate the height that will be taken up by the chart, to avoid the container 'jumping'. */
}