forgejo/web_src/css/repo.css
Henry Catalini Smith dd968f147d Improve repo file list table semantics for screen readers (#11846)
https://codeberg.org/forgejo/forgejo/issues/11116

To understand the impact of this you really need to listen to the before and after screen recordings attached. https://codeberg.org/forgejo/forgejo/issues/11116 is a really great bug report, and I was surprised by how disorienting this actually was when testing manually compared to my expectation after reading the issue. This is an impactful improvement!

This is my first time adding new translation strings. Excited to learn more about that if I've guessed wrong about how to do it.

To summarise, what we're doing here is as follows.

1. Address the core issue by changing the existing `<th>` elements to `<td>` so that screen readers stop semantically associating them with each row and reading them out for every table cell.
2. Replace them with real `<th>` elements that communicate the true semantic role of each column.
3. Add a `<caption>`. This serves a dual purpose: it gives the table an accessible name which improves the navigability of the page, and it gives us a place to explain to the user that the first row of the table is a little bit different because it's the latest commit rather than a file in the repo.
4. Visually hide the new caption and headings so that only screen reader users get them.

## Checklist

The [contributor guide](https://forgejo.org/docs/next/contributor/) contains information that will be helpful to first time contributors. All work and communication must conform to Forgejo's [AI Agreement](https://codeberg.org/forgejo/governance/src/branch/main/AIAgreement.md). There also are a few [conditions for merging Pull Requests in Forgejo repositories](https://codeberg.org/forgejo/governance/src/branch/main/PullRequestsAgreement.md). You are also welcome to join the [Forgejo development chatroom](https://matrix.to/#/#forgejo-development:matrix.org).

### Tests for JavaScript changes

- I added test coverage for JavaScript changes...
  - [ ] in `web_src/js/*.test.js` if it can be unit tested.
  - [ ] in `tests/e2e/*.test.e2e.js` if it requires interactions with a live Forgejo server (see also the [developer guide for JavaScript testing](https://codeberg.org/forgejo/forgejo/src/branch/forgejo/tests/e2e/README.md#end-to-end-tests)).

### Documentation

- [ ] I created a pull request [to the documentation](https://codeberg.org/forgejo/docs) to explain to Forgejo users how to use this change.
- [ ] I did not document these changes and I do not expect someone else to do it.

### Release notes

- [x] This change will be noticed by a Forgejo user or admin (feature, bug fix, performance, etc.). I suggest to include a release note for this change.
- [ ] This change is not visible to a Forgejo user or admin (refactor, dependency upgrade, etc.). I think there is no need to add a release note for this change.

*The decision if the pull request will be shown in the release notes is up to the mergers / release team.*

The content of the `release-notes/<pull request number>.md` file will serve as the basis for the release notes. If the file does not exist, the title of the pull request will be used instead.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/11846
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Reviewed-by: Andreas Ahlenstorf <aahlenst@noreply.codeberg.org>
Co-authored-by: Henry Catalini Smith <henry@catalinismith.se>
Co-committed-by: Henry Catalini Smith <henry@catalinismith.se>
2026-04-08 02:20:35 +02:00

2742 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 th:first-of-type {
max-width: calc(calc(min(100vw, 1280px)) - 145px - calc(2 * var(--page-margin-x)));
}
.repo-files-table-latest-commit-row td {
font-weight: var(--font-weight-normal);
}
.repository.file.list #repo-files-table tbody .svg {
margin-left: 3px;
margin-right: 5px;
}
.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 {
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 {
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'. */
}