diff options
Diffstat (limited to 'web_src/css/repo.css')
-rw-r--r-- | web_src/css/repo.css | 364 |
1 files changed, 57 insertions, 307 deletions
diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 306db34300..5238e3a2e5 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -73,10 +73,21 @@ overflow: hidden; } +.issue-content-right .ui.list { + margin: 0.5em 0; + max-width: 100%; +} + .issue-sidebar-combo > .ui.dropdown .item:not(.checked) .item-check-mark { visibility: hidden; } +.issue-content-right .ui.list.labels-list { + display: flex; + gap: var(--gap-inline); + flex-wrap: wrap; +} + @media (max-width: 767.98px) { .issue-content-left, .issue-content-right { @@ -130,7 +141,7 @@ td .commit-summary { align-items: center; overflow: hidden; text-overflow: ellipsis; - gap: 0.25em; + gap: 0.5em; } @media (max-width: 767.98px) { @@ -139,11 +150,6 @@ td .commit-summary { } } -.repo-path { - display: flex; - overflow-wrap: anywhere; -} - .repository.file.list .non-diff-file-content .header .icon { font-size: 1em; } @@ -177,42 +183,6 @@ td .commit-summary { cursor: default; } -.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; -} - -.pdf-content { - width: 100%; - height: 600px; - border: none !important; - display: flex; - align-items: center; - justify-content: center; -} - -.pdf-content .pdf-fallback-button { - margin: 50px auto; -} - .repository.file.list .non-diff-file-content .plain-text { padding: 1em 2em; } @@ -235,10 +205,6 @@ td .commit-summary { padding: 0 !important; } -.non-diff-file-content .pdfobject { - border-radius: 0 0 var(--border-radius) var(--border-radius); -} - .repo-editor-header { width: 100%; } @@ -272,8 +238,8 @@ td .commit-summary { border-radius: var(--border-radius); } -.repository.file.editor .commit-form-wrapper .commit-form::before, -.repository.file.editor .commit-form-wrapper .commit-form::after { +.avatar-content-left-arrow::before, +.avatar-content-left-arrow::after { right: 100%; top: 20px; border: solid transparent; @@ -284,18 +250,24 @@ td .commit-summary { pointer-events: none; } -.repository.file.editor .commit-form-wrapper .commit-form::before { +.avatar-content-left-arrow::before { border-right-color: var(--color-secondary); border-width: 9px; margin-top: -9px; } -.repository.file.editor .commit-form-wrapper .commit-form::after { +.avatar-content-left-arrow::after { border-right-color: var(--color-box-body); border-width: 8px; margin-top: -8px; } +@media (max-width: 767.98px) { + .avatar-content-left-arrow::before, + .avatar-content-left-arrow::after { + display: none; + } +} .repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .branch-name { display: inline-block; padding: 2px 4px; @@ -328,30 +300,6 @@ td .commit-summary { min-width: 100px; } -.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; } @@ -360,21 +308,6 @@ td .commit-summary { display: inline-block; } -@media (max-width: 767.98px) { - .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; - } -} - /* issue title & meta & edit */ .issue-title-header { width: 100%; @@ -399,10 +332,9 @@ td .commit-summary { .repository.view.issue .issue-title { display: flex; - align-items: center; gap: 0.5em; margin-bottom: 8px; - min-height: 40px; /* avoid layout shift on edit */ + min-height: 36px; /* avoid layout shift on edit */ } .repository.view.issue .issue-title h1 { @@ -410,9 +342,10 @@ td .commit-summary { width: 100%; font-weight: var(--font-weight-normal); font-size: 32px; - line-height: 40px; + line-height: 36px; /* vertically center single-line text with .issue-title-buttons */ margin: 0; padding-right: 0.25rem; + overflow-wrap: anywhere; } @media (max-width: 767.98px) { @@ -523,7 +456,7 @@ td .commit-summary { .repository.view.issue .comment-list .timeline-item, .repository.view.issue .comment-list .timeline-item-group { - padding: 16px 0; + padding: 8px 0; } .repository.view.issue .comment-list .timeline-item-group .timeline-item { @@ -569,6 +502,7 @@ td .commit-summary { background-color: var(--color-timeline); border-radius: var(--border-radius-full); display: flex; + flex-shrink: 0; float: left; margin-left: -33px; margin-right: 8px; @@ -577,6 +511,11 @@ td .commit-summary { justify-content: center; } +.repository.view.issue .comment-list .timeline-item.commits-list .badge { + margin-right: 0; + height: 28px; +} + .repository.view.issue .comment-list .timeline-item .badge .svg { width: 22px; height: 22px; @@ -591,9 +530,18 @@ td .commit-summary { margin-left: -16px; } -.repository.view.issue .comment-list .timeline-item.event > .text { +.repository.view.issue .comment-list .timeline-item .comment-text-line { line-height: 32px; vertical-align: middle; + color: var(--color-text-light); +} + +.repository.view.issue .comment-list .timeline-item .comment-text-line a { + color: inherit; +} + +.repository.view.issue .comment-list .timeline-item .avatar-with-link + .comment-text-line { + margin-left: 0.25em; } .repository.view.issue .comment-list .timeline-item.commits-list { @@ -601,25 +549,17 @@ td .commit-summary { padding-top: 0; } -.repository.view.issue .comment-list .timeline-item.commits-list .ui.avatar { - margin-right: 0.25em; -} - .repository.view.issue .comment-list .timeline-item.event > .commit-status-link { float: right; margin-right: 8px; margin-top: 4px; } -.repository.view.issue .comment-list .timeline-item .comparebox { - line-height: 32px; +.repository.view.issue .comment-list .timeline-item .comment-text-label { vertical-align: middle; -} - -.repository.view.issue .comment-list .timeline-item .comparebox .compare.label { - font-size: 1rem; - margin: 0; border: 1px solid var(--color-light-border); + height: 26px; + margin: 4px 0; /* because this label is beside the comment line, which has "line-height: 34px" */ } @media (max-width: 767.98px) { @@ -683,30 +623,6 @@ td .commit-summary { 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); @@ -750,19 +666,10 @@ td .commit-summary { padding: 0 !important; } -.repository.view.issue .comment-list .code-comment .comment-header::after, -.repository.view.issue .comment-list .code-comment .comment-header::before { - display: none; -} - .repository.view.issue .comment-list .code-comment .comment-content { margin-left: 24px; } -.repository.view.issue .comment-list .comment > .avatar { - margin-top: 6px; -} - .repository.view.issue .comment-list .comment-code-cloud button.comment-form-reply { margin: 0; } @@ -794,30 +701,6 @@ td .commit-summary { clear: none; } -.repository .comment.form .content .segment::before, -.repository .comment.form .content .segment::after { - right: 100%; - top: 20px; - border: solid transparent; - content: " "; - height: 0; - width: 0; - position: absolute; - pointer-events: none; -} - -.repository .comment.form .content .segment::before { - border-right-color: var(--color-secondary); - border-width: 9px; - margin-top: -9px; -} - -.repository .comment.form .content .segment::after { - border-right-color: var(--color-box-body); - border-width: 8px; - margin-top: -8px; -} - .repository.new.milestone textarea { height: 200px; } @@ -840,30 +723,6 @@ td .commit-summary { text-align: center; } -.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 .markup { font-size: 14px; } @@ -1226,33 +1085,6 @@ td .commit-summary { font-weight: var(--font-weight-normal); } -.empty-placeholder { - display: flex; - flex-direction: column; - align-items: center; - padding-top: 40px; - padding-bottom: 40px; -} - -.repository.packages .file-size { - white-space: nowrap; -} - -.file-view.markup { - padding: 1em 2em; -} - -.file-view.markup:has(.file-not-rendered-prompt) { - padding: 0; /* let the file-not-rendered-prompt layout itself */ -} - -.file-not-rendered-prompt { - padding: 1rem; - text-align: center; - font-size: 1rem !important; /* use consistent styles for various containers (code, markup, etc) */ - line-height: var(--line-height-default) !important; /* same as above */ -} - .repository .activity-header { display: flex; justify-content: space-between; @@ -1480,37 +1312,15 @@ td .commit-summary { .comment-header { background: var(--color-box-header); border-bottom: 1px solid var(--color-secondary); - padding: 0 1rem; + padding: 0.5em 1rem; position: relative; color: var(--color-text); min-height: 41px; display: flex; justify-content: space-between; align-items: center; -} - -.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; + flex-wrap: wrap; + gap: 0.25em; } .comment-header.arrow-top::before, @@ -1528,17 +1338,16 @@ td .commit-summary { left: 7px; } -.comment-header .actions a:not(.label) { - padding: 0.5rem !important; -} - -.comment-header .actions .label { - margin: 0 !important; +.comment-header-left, +.comment-header-right { + display: flex; + align-items: center; + gap: 0.5em; } -.comment-header-left, .comment-header-right { - gap: 4px; + flex: 1; + justify-content: end; } .comment-body { @@ -1575,49 +1384,6 @@ td .commit-summary { border-bottom-right-radius: 4px; } -.labels-list { - display: inline-flex; - flex-wrap: wrap; - gap: 2.5px; - align-items: center; -} - -.labels-list .label, .scope-parent > .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; -} - -.archived-label { - filter: grayscale(0.5); - opacity: 0.5; -} - -.ui.label.scope-left { - border-bottom-right-radius: 0; - border-top-right-radius: 0; - margin-right: 0; -} - -.ui.label.scope-middle { - border-radius: 0; - margin-left: 0; - margin-right: 0; -} - -.ui.label.scope-right { - border-bottom-left-radius: 0; - border-top-left-radius: 0; - margin-left: 0; -} - .repo-button-row { margin: 8px 0; display: flex; @@ -1731,7 +1497,7 @@ tbody.commit-list { overflow-wrap: anywhere; } -.content-history-detail-dialog .header .avatar { +.content-history-detail-dialog .header .ui.avatar { position: relative; top: -2px; } @@ -1865,6 +1631,7 @@ tbody.commit-list { border-radius: 0; display: flex; flex-direction: column; + gap: 0.5em; } /* fomantic's last-child selector does not work with hidden last child */ @@ -2054,10 +1821,6 @@ tbody.commit-list { box-shadow: 0 0.5rem 1rem var(--color-shadow) !important; } -.migrate-entry .description { - text-wrap: balance; -} - .commits-table .commits-table-right form { display: flex; align-items: center; @@ -2083,10 +1846,6 @@ tbody.commit-list { .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, @@ -2120,15 +1879,6 @@ tbody.commit-list { .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; - } } .commit-status-header { |