diff options
Diffstat (limited to 'web_src/css')
45 files changed, 704 insertions, 890 deletions
diff --git a/web_src/css/actions.css b/web_src/css/actions.css index 0ab09f537a..c43ebe21a0 100644 --- a/web_src/css/actions.css +++ b/web_src/css/actions.css @@ -6,14 +6,6 @@ overflow-x: auto; } -.runner-container .runner-ops > a { - margin-left: 0.5em; -} - -.runner-container .runner-ops-delete { - color: var(--color-red-light); -} - .runner-container .runner-new-text { color: var(--color-white); } @@ -67,6 +59,7 @@ .run-list-ref { display: inline-block !important; + max-width: 105px; } @media (max-width: 767.98px) { diff --git a/web_src/css/admin.css b/web_src/css/admin.css index e6866b27a6..cda38c6ddd 100644 --- a/web_src/css/admin.css +++ b/web_src/css/admin.css @@ -32,7 +32,7 @@ .admin code, .admin pre { white-space: pre-wrap; - word-wrap: break-word; + overflow-wrap: break-word; } .admin .ui.table.segment { diff --git a/web_src/css/base.css b/web_src/css/base.css index de656c0d95..3b819e91bc 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -2,7 +2,10 @@ /* fonts */ --fonts-proportional: -apple-system, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial; --fonts-monospace: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace, var(--fonts-emoji); - --fonts-emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla"; + /* GitHub explicitly sets font names like: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla"; + Actually "Twemoji Mozilla" emoji font is widely used by browsers like Firefox, Pale Moon, and it is more likely up-to-dated than the system emoji font. + So not setting emoji font seems to be the best choice, here we just use a non-existing dummy font name and let browsers choose. */ + --fonts-emoji: -emoji-fallback; /* font weights - use between 400 and 600 for general purposes. Avoid 700 as it is perceived too bold */ --font-weight-light: 300; --font-weight-normal: 400; @@ -26,6 +29,16 @@ --checkbox-size: 15px; /* height and width of checkbox and radio inputs */ --page-spacing: 16px; /* space between page elements */ --page-margin-x: 32px; /* minimum space on left and right side of page */ + --page-space-bottom: 64px; /* space between last page element and footer */ + + /* z-index */ + --z-index-modal: 1001; /* modal dialog, hard-coded from Fomantic modal.css */ + --z-index-toast: 1002; /* should be larger than modal */ + + --font-size-label: 12px; /* font size of individual labels */ + + --gap-inline: 0.25rem; /* gap for inline texts and elements, for example: the spaces for sentence with labels, button text, etc */ + --gap-block: 0.5rem; /* gap for element blocks, for example: spaces between buttons, menu image & title, header icon & title etc */ } @media (min-width: 768px) and (max-width: 1200px) { @@ -172,10 +185,6 @@ details summary { cursor: pointer; } -details summary > * { - display: inline; -} - progress { background: var(--color-secondary-dark-1); border-radius: var(--border-radius); @@ -224,6 +233,7 @@ progress::-moz-progress-bar { } .unselectable, +.btn, .button, .lines-num, .lines-commit, @@ -313,6 +323,16 @@ a.label, background: var(--color-hover); } +.empty-placeholder { + display: flex; + flex-direction: column; + align-items: center; + padding-top: 40px; + padding-bottom: 40px; + text-align: center; + text-wrap: balance; +} + .inline-code-block { padding: 2px 4px; border-radius: .24em; @@ -450,15 +470,6 @@ a.label, color: var(--color-text-light-2); } -.ui.comments .comment .actions a { - color: var(--color-text-light); -} - -.ui.comments .comment .actions a.active, -.ui.comments .comment .actions a:hover { - color: var(--color-primary); -} - img.ui.avatar, .ui.avatar img, .ui.avatar svg { @@ -475,7 +486,7 @@ img.ui.avatar, .full.height { flex-grow: 1; - padding-bottom: 80px; + padding-bottom: var(--page-space-bottom); } .status-page-error { @@ -747,6 +758,14 @@ overflow-menu .overflow-menu-button { padding: 0; } +/* match the styles of ".ui.secondary.pointing.menu .active.item" */ +overflow-menu.ui.secondary.pointing.menu .overflow-menu-button.active { + padding: 2px 0 0; + border-bottom: 2px solid currentcolor; + background-color: transparent; + font-weight: var(--font-weight-medium); +} + overflow-menu .overflow-menu-button:hover { color: var(--color-text-dark); } @@ -802,10 +821,6 @@ overflow-menu .ui.label { display: block; } -.code-view .lines-num span::after { - cursor: pointer; -} - .lines-type-marker { vertical-align: top; white-space: nowrap; @@ -842,39 +857,13 @@ overflow-menu .ui.label { .lines-escape { width: 0; white-space: nowrap; + padding: 0; } .lines-code { padding-left: 5px; } -.file-view tr.active { - color: inherit !important; - background: inherit !important; -} - -.file-view tr.active .lines-num, -.file-view tr.active .lines-code { - background: var(--color-highlight-bg) !important; -} - -.file-view tr.active:last-of-type .lines-code { - border-bottom-right-radius: var(--border-radius); -} - -.file-view tr.active .lines-num { - position: relative; -} - -.file-view tr.active .lines-num::before { - content: ""; - position: absolute; - left: 0; - width: 2px; - height: 100%; - background: var(--color-highlight-fg); -} - .code-inner { font: 12px var(--fonts-monospace); white-space: pre-wrap; @@ -925,12 +914,12 @@ overflow-menu .ui.label { margin-right: 4px; } -.top-line-blame { +tr.top-line-blame { border-top: 1px solid var(--color-secondary); } -.code-view tr.top-line-blame:first-of-type { - border-top: none; +tr.top-line-blame:first-of-type { + border-top: none; /* merge code lines belonging to the same commit into one block */ } .lines-code .bottom-line, @@ -938,15 +927,6 @@ overflow-menu .ui.label { border-bottom: 1px solid var(--color-secondary); } -.code-view { - background: var(--color-code-bg); - border-radius: var(--border-radius); -} - -.code-view table { - width: 100%; -} - .migrate .svg.gitea-git { color: var(--color-git); } @@ -1029,25 +1009,13 @@ table th[data-sortt-desc] .svg { text-align: left; } -.ellipsis-button { - padding: 0 5px 8px !important; - display: inline-block !important; - font-weight: var(--font-weight-semibold) !important; - line-height: 6px !important; - vertical-align: middle !important; -} - -.precolors { - display: flex; - flex-direction: column; - justify-content: center; - margin-left: 1em; -} - -.precolors .color { +.ui.button.ellipsis-button { + padding: 0 5px 8px; display: inline-block; - width: 15px; - height: 15px; + font-weight: var(--font-weight-semibold); + line-height: 8px; + vertical-align: middle; + min-height: 0; } .ui.dropdown:not(.button) { @@ -1101,10 +1069,12 @@ table th[data-sortt-desc] .svg { .btn, .ui.ui.button, .ui.ui.dropdown, -.flex-text-inline { +.flex-text-inline, +.flex-text-inline > a, +.flex-text-inline > span { display: inline-flex; align-items: center; - gap: .25rem; + gap: var(--gap-inline); vertical-align: middle; min-width: 0; /* make ellipsis work */ } @@ -1127,14 +1097,16 @@ table th[data-sortt-desc] .svg { } .ui.list.flex-items-block > .item, +.ui.form .field > label.flex-text-block, /* override fomantic "block" style */ .flex-items-block > .item, .flex-text-block { display: flex; align-items: center; - gap: .5rem; + gap: var(--gap-block); min-width: 0; } +.ui.dropdown > .ui.button, .flex-text-block > .ui.button, .flex-text-inline > .ui.button { margin: 0; /* fomantic buttons have default margin, when we use them in a flex container with gap, we do not need these margins */ @@ -1145,7 +1117,7 @@ the "!important" is necessary to override Fomantic UI menu item styles, meanwhil .ui.dropdown .menu.flex-items-menu > .item:not(.hidden, .filtered, .tw-hidden) { display: flex !important; align-items: center; - gap: .5rem; + gap: var(--gap-block); min-width: 0; } .ui.dropdown .menu.flex-items-menu > .item img, @@ -1172,12 +1144,14 @@ the "!important" is necessary to override Fomantic UI menu item styles, meanwhil text-overflow: ellipsis !important; } -.ui.dropdown.text-flex-grow { - display: flex; +.svg.octicon-file-directory-fill, +.svg.octicon-file-directory-open-fill, +.svg.octicon-file-submodule { + color: var(--color-primary); } -.ui.dropdown.text-flex-grow > .text { - display: flex; - flex-grow: 1; - justify-content: space-between; +.svg.octicon-file, +.svg.octicon-file-symlink-file, +.svg.octicon-file-directory-symlink { + color: var(--color-secondary-dark-7); } diff --git a/web_src/css/editor/combomarkdowneditor.css b/web_src/css/editor/combomarkdowneditor.css index 835286b795..046010c6c8 100644 --- a/web_src/css/editor/combomarkdowneditor.css +++ b/web_src/css/editor/combomarkdowneditor.css @@ -100,67 +100,3 @@ border-bottom: 1px solid var(--color-secondary); padding-bottom: 1rem; } - -text-expander { - display: block; - position: relative; -} - -text-expander .suggestions { - position: absolute; - min-width: 180px; - padding: 0; - margin-top: 24px; - list-style: none; - background: var(--color-box-body); - border-radius: var(--border-radius); - border: 1px solid var(--color-secondary); - box-shadow: 0 .5rem 1rem var(--color-shadow); - z-index: 100; /* needs to be > 20 to be on top of dropzone's .dz-details */ -} - -text-expander .suggestions li { - display: flex; - align-items: center; - cursor: pointer; - padding: 4px 8px; - font-weight: var(--font-weight-medium); -} - -text-expander .suggestions li + li { - border-top: 1px solid var(--color-secondary-alpha-40); -} - -text-expander .suggestions li:first-child { - border-radius: var(--border-radius) var(--border-radius) 0 0; -} - -text-expander .suggestions li:last-child { - border-radius: 0 0 var(--border-radius) var(--border-radius); -} - -text-expander .suggestions li:only-child { - border-radius: var(--border-radius); -} - -text-expander .suggestions li:hover { - background: var(--color-hover); -} - -text-expander .suggestions .fullname { - font-weight: var(--font-weight-normal); - margin-left: 4px; - color: var(--color-text-light-1); -} - -text-expander .suggestions li[aria-selected="true"], -text-expander .suggestions li[aria-selected="true"] span { - background: var(--color-primary); - color: var(--color-primary-contrast); -} - -text-expander .suggestions img { - width: 24px; - height: 24px; - margin-right: 8px; -} diff --git a/web_src/css/features/colorpicker.css b/web_src/css/features/colorpicker.css index b7436783df..a353532f4e 100644 --- a/web_src/css/features/colorpicker.css +++ b/web_src/css/features/colorpicker.css @@ -1,15 +1,13 @@ -.js-color-picker-input { +.color-picker-combo { display: flex; - position: relative; + position: relative; /* to position the preview square */ } -.js-color-picker-input input { - padding-top: 8px !important; - padding-bottom: 8px !important; +.color-picker-combo input { padding-left: 32px !important; } -.js-color-picker-input .preview-square { +.color-picker-combo .preview-square { position: absolute; aspect-ratio: 1; height: 16px; @@ -17,12 +15,12 @@ top: 50%; transform: translateY(-50%); border-radius: 2px; - background: repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa); /* stylelint-disable-line scale-unlimited/declaration-strict-value */ + background: repeating-linear-gradient(45deg, #aaa 25%, transparent 25%, transparent 75%, #aaa 75%, #aaa), repeating-linear-gradient(45deg, #aaa 25%, #fff 25%, #fff 75%, #aaa 75%, #aaa); background-position: 0 0, 4px 4px; background-size: 8px 8px; } -.js-color-picker-input .preview-square::after { +.color-picker-combo .preview-square::after { content: ""; position: absolute; width: 100%; @@ -31,6 +29,26 @@ background-color: currentcolor; } +.color-picker-combo .precolors { + display: flex; + margin-left: 1em; + align-items: center; + gap: 0.125em; +} + +.color-picker-combo .precolors .generate-random-color { + padding: 0; + width: 30px; + height: 30px; + min-height: 0; +} + +.color-picker-combo .precolors .color { + display: inline-block; + width: 15px; + height: 15px; +} + hex-color-picker { width: 180px; height: 120px; diff --git a/web_src/css/features/expander.css b/web_src/css/features/expander.css new file mode 100644 index 0000000000..f560b2a9fd --- /dev/null +++ b/web_src/css/features/expander.css @@ -0,0 +1,96 @@ +text-expander .suggestions, +.tribute-container { + position: absolute; + max-height: min(300px, 95vh); + max-width: min(500px, 95vw); + overflow-x: hidden; + overflow-y: auto; + white-space: nowrap; + background: var(--color-menu); + box-shadow: 0 6px 18px var(--color-shadow); + border-radius: var(--border-radius); + border: 1px solid var(--color-secondary); + z-index: 100; /* needs to be > 20 to be on top of dropzone's .dz-details */ +} + +text-expander { + display: block; + position: relative; +} + +text-expander .suggestions { + padding: 0; + margin-top: 24px; + list-style: none; +} + +text-expander .suggestions li, +.tribute-item { + display: flex; + align-items: center; + cursor: pointer; + gap: 6px; + font-weight: var(--font-weight-medium); +} + +text-expander .suggestions li, +.tribute-container li { + padding: 3px 6px; +} + +text-expander .suggestions li + li, +.tribute-container li + li { + border-top: 1px solid var(--color-secondary); +} + +text-expander .suggestions li:first-child { + border-radius: var(--border-radius) var(--border-radius) 0 0; +} + +text-expander .suggestions li:last-child { + border-radius: 0 0 var(--border-radius) var(--border-radius); +} + +text-expander .suggestions li:only-child { + border-radius: var(--border-radius); +} + +text-expander .suggestions .fullname, +.tribute-container li .fullname { + font-weight: var(--font-weight-normal); + color: var(--color-text-light-1); + overflow: hidden; + text-overflow: ellipsis; +} + +text-expander .suggestions li:hover, +text-expander .suggestions li:hover *, +text-expander .suggestions li[aria-selected="true"], +text-expander .suggestions li[aria-selected="true"] *, +.tribute-container li.highlight, +.tribute-container li.highlight * { + background: var(--color-primary); + color: var(--color-primary-contrast); +} + +text-expander .suggestions img, +.tribute-item img { + width: 21px; + height: 21px; + object-fit: contain; + aspect-ratio: 1; +} + +.tribute-container { + display: block; +} + +.tribute-container ul { + margin: 0; + padding: 0; + list-style: none; +} + +.tribute-container li.no-match { + cursor: default; +} diff --git a/web_src/css/features/gitgraph.css b/web_src/css/features/gitgraph.css index 1ed541a695..8bdafc3c99 100644 --- a/web_src/css/features/gitgraph.css +++ b/web_src/css/features/gitgraph.css @@ -10,14 +10,6 @@ align-items: center; } -#git-graph-container .color-buttons { - margin-right: 0; -} - -#git-graph-container .ui.header.dividing { - padding-bottom: 10px; -} - #git-graph-container #flow-select-refs-dropdown { border-top-right-radius: 0; border-bottom-right-radius: 0; @@ -31,25 +23,6 @@ align-items: center; } -#git-graph-container #flow-select-refs-dropdown .ui.label .truncate { - display: inline-block; - max-width: 140px; - overflow: hidden; - text-overflow: ellipsis; - vertical-align: top; - white-space: nowrap; -} - -#git-graph-container #flow-select-refs-dropdown .default.text { - padding-top: 4px; - padding-bottom: 4px; -} - -#git-graph-container #flow-select-refs-dropdown input.search { - position: relative; - top: 1px; -} - #git-graph-container li { list-style-type: none; height: 24px; @@ -57,16 +30,20 @@ white-space: nowrap; display: flex; align-items: center; - gap: 0.25em; + gap: 0.5em; } -#git-graph-container li .ui.label.commit-id-short { - padding-top: 2px; - padding-bottom: 2px; +#git-graph-container li > span { + flex-shrink: 0; } -#git-graph-container li .node-relation { - font-family: var(--fonts-monospace); +#git-graph-container li > span.message { + flex-shrink: 1; +} + +#git-graph-container li .ui.label.commit-id-short { + padding: 2px 4px; + height: 20px; } #git-graph-container li .author { @@ -78,17 +55,6 @@ font-size: 80%; } -#git-graph-container li a:not(.ui):hover { - text-decoration: underline; -} - -#git-graph-container li a em { - color: var(--color-red); - border-bottom: 1px dotted var(--color-secondary); - text-decoration: none; - font-style: normal; -} - #git-graph-container #rel-container { max-width: 30%; overflow-x: auto; @@ -105,21 +71,16 @@ width: 100%; } -#git-graph-container #rev-list li.highlight.hover { - background-color: var(--color-secondary-alpha-30); -} - -#git-graph-container #rev-list .commit-refs .button { +#git-graph-container li .commit-refs .ui.button, +#git-graph-container li .commit-refs .ui.label.tag-label { padding: 2px 4px; margin-right: 0.25em; display: inline-block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; -} - -#git-graph-container #graph-raw-list { - margin: 0; + line-height: var(--line-height-default); + min-height: 0; } #git-graph-container.monochrome #rel-container .flow-group { @@ -127,11 +88,6 @@ fill: var(--color-secondary-dark-5); } -#git-graph-container.monochrome #rel-container .flow-group.highlight { - stroke: var(--color-secondary-dark-12); - fill: var(--color-secondary-dark-12); -} - #git-graph-container:not(.monochrome) #rel-container .flow-group.flow-color-16-1 { stroke: #499a37; fill: #499a37; diff --git a/web_src/css/features/projects.css b/web_src/css/features/projects.css index 72ef523913..25cb530f85 100644 --- a/web_src/css/features/projects.css +++ b/web_src/css/features/projects.css @@ -1,31 +1,35 @@ -.board { +#project-board { display: flex; + align-items: stretch; flex-direction: row; flex-wrap: nowrap; - overflow-x: auto; - overflow-y: clip; - align-items: stretch; + overflow: auto; margin: 0 0.5em; + min-height: max(calc(100vh - 400px), 300px); + max-height: calc(100vh - 120px); +} + +.project-header { + padding: 0.5em 0; + flex-wrap: wrap; +} + +.project-header h2 { + white-space: nowrap; + margin: 0; } .project-column { - background-color: var(--color-project-column-bg) !important; - border: 1px solid var(--color-secondary) !important; - border-radius: var(--border-radius); - margin: 0 0.5rem !important; - padding: 0.5rem !important; - width: 320px; - height: initial; - min-height: max(calc(100vh - 400px), 300px); flex: 0 0 auto; - overflow: visible; display: flex; flex-direction: column; - cursor: default; -} - -.project-column .issue-card { - color: var(--color-text); + background-color: var(--color-project-column-bg); + border: 1px solid var(--color-secondary); + border-radius: var(--border-radius); + margin: 0 0.5rem; + padding: 0.5rem; + width: 320px; + overflow: visible; } .project-column-header { @@ -39,16 +43,15 @@ color: inherit; } -.project-column > .cards { +.project-column > .ui.cards { flex: 1; display: flex; - align-content: baseline; - margin: 0 !important; - padding: 0 !important; - flex-wrap: nowrap !important; + flex-wrap: nowrap; flex-direction: column; - overflow-x: clip; + overflow: clip auto; gap: .25rem; + margin: 0; + padding: 0; } .project-column > .divider { @@ -68,7 +71,7 @@ .card-attachment-images { display: inline-block; white-space: nowrap; - overflow: scroll; + overflow: auto; cursor: default; scroll-snap-type: x mandatory; text-align: center; @@ -82,6 +85,7 @@ scroll-snap-align: center; margin-right: 2px; aspect-ratio: 1; + object-fit: contain; } .card-attachment-images img:only-child { @@ -98,3 +102,21 @@ .card-ghost * { opacity: 0; } + +.fullscreen.projects-view { + position: absolute; + inset: 0; + display: flex; + flex-direction: column; +} + +/* Hide project-description in full-screen due to its variable height. No need to show it for better space use. */ +.fullscreen.projects-view .project-description { + display: none; +} + +.fullscreen.projects-view #project-board { + flex: 1; + max-height: unset; + padding-bottom: 0.5em; +} diff --git a/web_src/css/features/tribute.css b/web_src/css/features/tribute.css deleted file mode 100644 index 99a026b9bc..0000000000 --- a/web_src/css/features/tribute.css +++ /dev/null @@ -1,32 +0,0 @@ -@import "tributejs/dist/tribute.css"; - -.tribute-container { - box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25); - border-radius: var(--border-radius); -} - -.tribute-container ul { - margin-top: 0 !important; - background: var(--color-body) !important; -} - -.tribute-container li { - padding: 3px 0.5rem !important; -} - -.tribute-container li span.fullname { - font-weight: var(--font-weight-normal); - font-size: 0.8rem; -} - -.tribute-container li.highlight, -.tribute-container li:hover { - background: var(--color-primary) !important; - color: var(--color-primary-contrast) !important; -} - -.tribute-item { - display: flex; - align-items: center; - gap: 6px; -} diff --git a/web_src/css/form.css b/web_src/css/form.css index cf8fe96bea..c51eba1bc9 100644 --- a/web_src/css/form.css +++ b/web_src/css/form.css @@ -220,6 +220,7 @@ textarea:focus, color: var(--color-secondary-dark-5); padding-bottom: 0.6em; display: inline-block; + text-wrap: balance; } .m-captcha-style { diff --git a/web_src/css/home.css b/web_src/css/home.css index 77d2ecf92b..195d1f5d96 100644 --- a/web_src/css/home.css +++ b/web_src/css/home.css @@ -21,7 +21,7 @@ } .home .hero .svg { - color: var(--color-green); + color: var(--color-logo); height: 40px; width: 50px; vertical-align: bottom; @@ -40,7 +40,7 @@ } .home a { - color: var(--color-green); + color: var(--color-logo); } .page-footer { diff --git a/web_src/css/index.css b/web_src/css/index.css index 84795d6d27..291cd04b2b 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -39,7 +39,7 @@ @import "./features/imagediff.css"; @import "./features/codeeditor.css"; @import "./features/projects.css"; -@import "./features/tribute.css"; +@import "./features/expander.css"; @import "./features/cropper.css"; @import "./features/console.css"; @@ -62,7 +62,7 @@ @import "./repo/issue-label.css"; @import "./repo/issue-list.css"; @import "./repo/list-header.css"; -@import "./repo/linebutton.css"; +@import "./repo/file-view.css"; @import "./repo/wiki.css"; @import "./repo/header.css"; @import "./repo/home.css"; @@ -70,6 +70,7 @@ @import "./repo/reactions.css"; @import "./repo/clone.css"; @import "./repo/commit-sign.css"; +@import "./repo/packages.css"; @import "./editor/fileeditor.css"; @import "./editor/combomarkdowneditor.css"; diff --git a/web_src/css/markup/codecopy.css b/web_src/css/markup/codecopy.css index e3017ae962..5a7b9955e7 100644 --- a/web_src/css/markup/codecopy.css +++ b/web_src/css/markup/codecopy.css @@ -1,8 +1,3 @@ -.markup .code-block, -.markup .mermaid-block { - position: relative; -} - .markup .code-copy { position: absolute; top: 8px; @@ -28,8 +23,8 @@ background: var(--color-secondary-dark-1) !important; } -.markup .code-block:hover .code-copy, -.markup .mermaid-block:hover .code-copy { +.markup .code-block-container:hover .code-copy, +.markup .code-block:hover .code-copy { visibility: visible; animation: fadein 0.2s both; } diff --git a/web_src/css/markup/content.css b/web_src/css/markup/content.css index 937224a9d7..c6a89edf25 100644 --- a/web_src/css/markup/content.css +++ b/web_src/css/markup/content.css @@ -2,7 +2,7 @@ overflow: hidden; font-size: 16px; line-height: 1.5 !important; - overflow-wrap: anywhere; + overflow-wrap: break-word; } .markup > *:first-child { @@ -134,6 +134,13 @@ margin-bottom: 16px; } +/* override p:last-child from base.css. +Fomantic assumes that <p>/<hX> elements only have margins between elements, but not for the first's top or last's bottom. +In markup content, we always use bottom margin for all elements */ +.markup p:last-child { + margin-bottom: 16px; +} + .markup hr { height: 4px; padding: 0; @@ -309,10 +316,18 @@ box-sizing: initial; } +.file-view.markup { + padding: 1em 2em; +} + +.file-view.markup:has(.file-not-rendered-prompt) { + padding: 0; /* let the file-not-rendered-prompt layout itself */ +} + /* this background ensures images can break <hr>. We can only do this on cases where the background is known and not transparent. */ -.markup.file-view img, -.markup.file-view video, +.file-view.markup img, +.file-view.markup video, .comment-body .markup img, /* regular comment */ .comment-body .markup video, .comment-content .markup img, /* code comment */ @@ -443,13 +458,25 @@ } .markup pre > code { - padding: 0; - margin: 0; font-size: 100%; +} + +.markup .code-block, +.markup .code-block-container { + position: relative; +} + +.markup .code-block-container.code-overflow-wrap pre > code { white-space: pre-wrap; - overflow-wrap: anywhere; - background: transparent; - border: 0; +} + +.markup .code-block-container.code-overflow-scroll pre { + overflow-x: auto; +} + +.markup .code-block-container.code-overflow-scroll pre > code { + white-space: pre; + overflow-wrap: normal; } .markup .highlight { @@ -470,16 +497,11 @@ word-break: normal; } -.markup pre { - word-wrap: normal; -} - .markup pre code, .markup pre tt { display: inline; padding: 0; line-height: inherit; - word-wrap: normal; background-color: transparent; border: 0; } @@ -522,20 +544,6 @@ margin: 0 0.25em; } -.file-revisions-btn { - display: block; - float: left; - margin-bottom: 2px !important; - padding: 11px !important; - margin-right: 10px !important; -} - -.file-revisions-btn i { - -webkit-touch-callout: none; - -webkit-user-select: none; - user-select: none; -} - .markup-content-iframe { display: block; border: none; diff --git a/web_src/css/modules/animations.css b/web_src/css/modules/animations.css index 481e997d4f..deaaf83680 100644 --- a/web_src/css/modules/animations.css +++ b/web_src/css/modules/animations.css @@ -52,8 +52,7 @@ form.single-button-form.is-loading .button { } .markup pre.is-loading, -.editor-loading.is-loading, -.pdf-content.is-loading { +.editor-loading.is-loading { height: var(--height-loading); } @@ -116,3 +115,15 @@ code.language-math.is-loading::after { animation-duration: 100ms; animation-timing-function: ease-in-out; } + +/* FIXME: `octicon-sync` is counterclockwise, so this animation is also counterclockwise, it looks somewhat strange. +Ideally in the future we should use a better image for clockwise animation. */ +.circular-spin { + animation: circular-spin-keyframes 1s linear infinite; +} + +@keyframes circular-spin-keyframes { + 100% { + transform: rotate(-360deg); + } +} diff --git a/web_src/css/modules/breadcrumb.css b/web_src/css/modules/breadcrumb.css index ca488c2150..77e31ef627 100644 --- a/web_src/css/modules/breadcrumb.css +++ b/web_src/css/modules/breadcrumb.css @@ -1,14 +1,10 @@ .breadcrumb { display: flex; - flex-wrap: wrap; align-items: center; gap: 3px; + overflow-wrap: anywhere; } .breadcrumb .breadcrumb-divider { color: var(--color-text-light-2); } - -.breadcrumb > * { - display: inline; -} diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css index c4addd05f0..8e3309474b 100644 --- a/web_src/css/modules/button.css +++ b/web_src/css/modules/button.css @@ -1,20 +1,15 @@ -/* based on Fomantic UI checkbox module, with just the parts extracted that we use. If you find any - unused rules here after refactoring, please remove them. */ - .ui.button { cursor: pointer; - display: inline-block; - min-height: 1em; + display: inline-flex; outline: none; - vertical-align: baseline; font-family: var(--fonts-regular); margin: 0 0.25em 0 0; - padding: 0.78571429em 1.5em; font-weight: var(--font-weight-normal); + font-size: 1rem; text-align: center; text-decoration: none; line-height: 1; - border-radius: 0.28571429rem; + border-radius: var(--border-radius); user-select: none; -webkit-tap-highlight-color: transparent; justify-content: center; @@ -58,12 +53,13 @@ pointer-events: none !important; } +/* there is no "ui labeled icon button" support" because it is not used */ .ui.labeled.button:not(.icon) { - display: inline-flex; flex-direction: row; background: none; - padding: 0 !important; + padding: 0; border: none; + min-height: unset; } .ui.labeled.button > .button { margin: 0; @@ -102,47 +98,60 @@ margin: 0 -0.21428571em 0 0.42857143em; } +/* reference sizes (not exactly at the moment): normal: padding-x=21, height=38 ; compact: padding-x=15, height=32 */ +.ui.button { /* stylelint-disable-line no-duplicate-selectors */ + min-height: 38px; + padding: 0.57em /* around 8px */ 1.43em /* around 20px */; +} .ui.compact.buttons .button, .ui.compact.button { - padding: 0.58928571em 1.125em; + padding: 0.42em /* around 8px */ 1.07em /* around 15px */; + min-height: 32px; } .ui.compact.icon.buttons .button, .ui.compact.icon.button { - padding: 0.58928571em; -} -.ui.compact.labeled.icon.button { - padding: 0.58928571em 3.69642857em; -} -.ui.compact.labeled.icon.button > .icon { - padding: 0.58928571em 0; + padding: 0.57em /* around 8px */; } -.ui.buttons .button, -.ui.button { - font-size: 1rem; -} +/* reference size: mini: padding-x=16, height=30 ; compact: padding-x=12, height=26 */ .ui.mini.buttons .dropdown, .ui.mini.buttons .dropdown .menu > .item, .ui.mini.buttons .button, .ui.ui.ui.ui.mini.button { - font-size: 0.78571429rem; + font-size: 11px; + min-height: 30px; +} +.ui.ui.ui.ui.mini.button.compact { + min-height: 26px; } + +/* reference size: tiny: padding-x=18, height=32 ; compact: padding-x=13, height=28 */ .ui.tiny.buttons .dropdown, .ui.tiny.buttons .dropdown .menu > .item, .ui.tiny.buttons .button, .ui.ui.ui.ui.tiny.button { - font-size: 0.85714286rem; + font-size: 12px; + min-height: 32px; +} +.ui.ui.ui.ui.tiny.button.compact { + min-height: 28px; } + +/* reference size: small: padding-x=19, height=34 ; compact: padding-x=14, height=30 */ .ui.small.buttons .dropdown, .ui.small.buttons .dropdown .menu > .item, .ui.small.buttons .button, .ui.ui.ui.ui.small.button { - font-size: 0.92857143rem; + font-size: 13px; + min-height: 34px; +} +.ui.ui.ui.ui.small.button.compact { + min-height: 30px; } .ui.icon.buttons .button, .ui.icon.button:not(.compact) { - padding: 0.78571429em; + padding: 0.57em; } .ui.icon.buttons .button > .icon, .ui.icon.button > .icon { @@ -152,12 +161,12 @@ .ui.basic.buttons .button, .ui.basic.button { - border-radius: 0.28571429rem; + border-radius: var(--border-radius); background: none; } .ui.basic.buttons { border: 1px solid var(--color-secondary); - border-radius: 0.28571429rem; + border-radius: var(--border-radius); } .ui.basic.buttons .button { border-radius: 0; @@ -188,29 +197,6 @@ background: var(--color-active); } -.ui.labeled.icon.button { - position: relative; - padding-left: 4.07142857em !important; - padding-right: 1.5em !important; -} - -.ui.labeled.icon.button > .icon { - position: absolute; - top: 0; - left: 0; - height: 100%; - line-height: 1; - border-radius: 0; - border-top-left-radius: inherit; - border-bottom-left-radius: inherit; - text-align: center; - animation: none; - padding: 0.78571429em 0; - margin: 0; - width: 2.57142857em; - background: var(--color-hover); -} - .ui.button.toggle.active { background-color: var(--color-green); color: var(--color-white); @@ -366,25 +352,33 @@ a.btn:hover { color: inherit; } +.btn.tiny { + font-size: 12px; +} + +.btn.small { + font-size: 13px; +} + /* By default, Fomantic UI doesn't support "bordered" buttons group, but Gitea would like to use it. And the default buttons always have borders now (not the same as Fomantic UI's default buttons, see above). It needs some tricks to tweak the left/right borders with active state */ .ui.buttons .button { border-right: none; - flex: 1 0 auto; border-radius: 0; + flex-shrink: 0; margin: 0; } .ui.buttons .button:first-child { border-left: none; margin-left: 0; - border-top-left-radius: 0.28571429rem; - border-bottom-left-radius: 0.28571429rem; + border-top-left-radius: var(--border-radius); + border-bottom-left-radius: var(--border-radius); } .ui.buttons .button:last-child { - border-top-right-radius: 0.28571429rem; - border-bottom-right-radius: 0.28571429rem; + border-top-right-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); } .ui.buttons .button:hover { @@ -414,10 +408,3 @@ It needs some tricks to tweak the left/right borders with active state */ .ui.buttons .button.active + .button { border-left: none; } - -/* apply the vertical padding of .compact to non-compact buttons when they contain a svg as they - would otherwise appear too large. Seen on "RSS Feed" button on repo releases tab. */ -.ui.small.button:not(.compact):has(.svg) { - padding-top: 0.58928571em; - padding-bottom: 0.58928571em; -} diff --git a/web_src/css/modules/card.css b/web_src/css/modules/card.css index d5d5e757d6..c5ca6a1cc1 100644 --- a/web_src/css/modules/card.css +++ b/web_src/css/modules/card.css @@ -20,7 +20,7 @@ background: var(--color-card); border: 1px solid var(--color-secondary); box-shadow: none; - word-wrap: break-word; + overflow-wrap: break-word; border-radius: var(--border-radius); } diff --git a/web_src/css/modules/comment.css b/web_src/css/modules/comment.css index 9947b15b9a..f0c721eed2 100644 --- a/web_src/css/modules/comment.css +++ b/web_src/css/modules/comment.css @@ -56,10 +56,6 @@ min-width: 0; } -.ui.comments .comment > .avatar ~ .content { - margin-left: 12px; -} - .ui.comments .comment .author { font-size: 1em; font-weight: var(--font-weight-medium); @@ -87,6 +83,6 @@ .ui.comments .comment .text { margin: 0.25em 0 0.5em; font-size: 1em; - word-wrap: break-word; + overflow-wrap: break-word; line-height: 1.3; } diff --git a/web_src/css/modules/dimmer.css b/web_src/css/modules/dimmer.css index 8924821370..7d1ca6171a 100644 --- a/web_src/css/modules/dimmer.css +++ b/web_src/css/modules/dimmer.css @@ -20,7 +20,7 @@ opacity: 1; } -.ui.dimmer > * { +.ui.dimmer > .ui.modal { position: static; margin-top: auto !important; margin-bottom: auto !important; diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css index 1e42668aa1..cf850e4c5a 100644 --- a/web_src/css/modules/label.css +++ b/web_src/css/modules/label.css @@ -4,25 +4,20 @@ .ui.label { display: inline-flex; align-items: center; - gap: .25rem; - min-width: 0; vertical-align: middle; - line-height: 1; + gap: var(--gap-inline); + min-width: 0; + max-width: 100%; background: var(--color-label-bg); color: var(--color-label-text); - padding: 0.3em 0.5em; - font-size: 0.85714286rem; + padding: 2px 6px; + font-size: var(--font-size-label); font-weight: var(--font-weight-medium); border: 0 solid transparent; - border-radius: 0.28571429rem; + border-radius: var(--border-radius); white-space: nowrap; -} - -.ui.label:first-child { - margin-left: 0; -} -.ui.label:last-child { - margin-right: 0; + overflow: hidden; + text-overflow: ellipsis; } a.ui.label { @@ -94,15 +89,10 @@ a.ui.label:hover { color: var(--color-label-text); } -.ui.label.visible:not(.dropdown) { - display: inline-block !important; -} - .ui.basic.label { background: var(--color-button); border: 1px solid var(--color-light-border); color: var(--color-text-light); - padding: calc(0.5833em - 1px) calc(0.833em - 1px); } a.ui.basic.label:hover { text-decoration: none; @@ -263,6 +253,7 @@ a.ui.ui.ui.basic.grey.label:hover { color: var(--color-label-hover-bg); } +/* "horizontal label" is actually "fat label" which has enough padding spaces to be used standalone in headers */ .ui.horizontal.label { margin: 0 0.5em 0 0; padding: 0.4em 0.833em; @@ -292,3 +283,58 @@ a.ui.ui.ui.basic.grey.label:hover { .ui.large.label { font-size: 1rem; } + +/* To let labels break up and wrap across multiple lines (issue title, comment event), use "display: contents here" to apply parent layout. +If the labels-list itself needs some layouts, use extra classes or "tw" helpers. */ +.labels-list { + display: contents; + font-size: var(--font-size-label); /* it must match the label font size, otherwise the height mismatches */ +} + +.labels-list a { + max-width: 100%; /* for ellipsis */ +} + +.labels-list .ui.label { + min-height: 20px; + padding-top: 0; + padding-bottom: 0; +} + +.with-labels-list-inline .labels-list .ui.label + .ui.label { + margin-left: var(--gap-inline); +} + +.with-labels-list-inline .labels-list .ui.label { + line-height: var(--line-height-default); +} + +/* 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-parent > .ui.label { + margin: 0 !important; /* scoped label's margin is handled by the parent */ +} + +.ui.label.scope-left { + border-bottom-right-radius: 0; + border-top-right-radius: 0; +} + +.ui.label.scope-middle { + border-radius: 0; +} + +.ui.label.scope-right { + border-bottom-left-radius: 0; + border-top-left-radius: 0; +} + +.ui.label.archived-label { + filter: grayscale(0.5); + opacity: 0.5; +} diff --git a/web_src/css/modules/list.css b/web_src/css/modules/list.css index 73760390de..46422cb97d 100644 --- a/web_src/css/modules/list.css +++ b/web_src/css/modules/list.css @@ -5,7 +5,6 @@ list-style-type: none; margin: 1em 0; padding: 0; - font-size: 1em; } .ui.list:first-child { diff --git a/web_src/css/modules/menu.css b/web_src/css/modules/menu.css index a5efd23053..5072dcbd0e 100644 --- a/web_src/css/modules/menu.css +++ b/web_src/css/modules/menu.css @@ -1,5 +1,6 @@ .ui.menu { display: flex; + flex-shrink: 0; margin: 1rem 0; font-family: var(--fonts-regular); font-weight: var(--font-weight-normal); @@ -643,6 +644,7 @@ display: inline-flex; margin: 0; vertical-align: middle; + flex-shrink: 0; } .ui.compact.vertical.menu { display: inline-block; diff --git a/web_src/css/modules/navbar.css b/web_src/css/modules/navbar.css index b09b271ad4..149766a586 100644 --- a/web_src/css/modules/navbar.css +++ b/web_src/css/modules/navbar.css @@ -101,19 +101,6 @@ } } -#navbar .ui.dropdown .navbar-profile-admin { - display: block; - position: absolute; - font-size: 9px; - font-weight: var(--font-weight-bold); - color: var(--color-nav-bg); - background: var(--color-primary); - padding: 2px 3px; - border-radius: 10px; - top: -1px; - left: 18px; -} - #navbar a.item:hover .notification_count, #navbar a.item:hover .header-stopwatch-dot { border-color: var(--color-nav-hover-bg); @@ -129,8 +116,8 @@ background: var(--color-primary); border: 2px solid var(--color-nav-bg); position: absolute; - left: 6px; - top: -9px; + left: calc(100% - 9px); + bottom: calc(100% - 9px); min-width: 17px; height: 17px; border-radius: 11px; /* (height + 2 * borderThickness) / 2 */ diff --git a/web_src/css/modules/table.css b/web_src/css/modules/table.css index eabca31a17..6298471d47 100644 --- a/web_src/css/modules/table.css +++ b/web_src/css/modules/table.css @@ -167,6 +167,11 @@ text-overflow: ellipsis; } +.ui.selectable.table > tbody > tr:hover, +.ui.table tbody tr td.selectable:hover { + background: var(--color-hover); +} + .ui.attached.table { top: 0; bottom: 0; @@ -289,6 +294,9 @@ .ui.basic.striped.table > tbody > tr:nth-child(2n) { background: var(--color-light); } +.ui.basic.striped.selectable.table > tbody > tr:nth-child(2n):hover { + background: var(--color-hover); +} .ui[class*="very basic"].table { border: none; diff --git a/web_src/css/modules/tippy.css b/web_src/css/modules/tippy.css index 4438a31c9d..3c0d63f2fb 100644 --- a/web_src/css/modules/tippy.css +++ b/web_src/css/modules/tippy.css @@ -92,6 +92,10 @@ } .tippy-box[data-theme="menu"] .item:focus { + background: var(--color-hover); +} + +.tippy-box[data-theme="menu"] .item.active { background: var(--color-active); } diff --git a/web_src/css/modules/toast.css b/web_src/css/modules/toast.css index 1145f3b1b5..330d3b176e 100644 --- a/web_src/css/modules/toast.css +++ b/web_src/css/modules/toast.css @@ -3,7 +3,7 @@ position: fixed; opacity: 0; transition: all .2s ease; - z-index: 500; + z-index: var(--z-index-toast); border-radius: var(--border-radius); box-shadow: 0 8px 24px var(--color-shadow); display: flex; diff --git a/web_src/css/repo.css b/web_src/css/repo.css index db44e2a778..5238e3a2e5 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -50,23 +50,44 @@ width: 300px; } -.issue-sidebar-combo .ui.dropdown .item:not(.checked) .item-check-mark { - visibility: hidden; +.issue-content-right .ui.dropdown.full-width { + width: 100%; +} + +.issue-content-right .ui.dropdown.full-width > .fixed-text { + display: flex; + flex-grow: 1; + justify-content: space-between; } -.issue-content-right .dropdown > .menu { +.issue-content-right .ui.dropdown > .menu { max-width: 270px; min-width: 0; max-height: 500px; overflow-x: auto; } -.issue-content-right .dropdown > .menu .item-secondary-info small { +.issue-content-right .ui.dropdown > .menu .item-secondary-info small { display: block; text-overflow: ellipsis; 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 { @@ -120,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) { @@ -129,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; } @@ -167,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; } @@ -225,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%; } @@ -262,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; @@ -274,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; @@ -318,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; } @@ -350,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%; @@ -389,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 { @@ -400,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) { @@ -476,14 +419,6 @@ td .commit-summary { 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: ""; @@ -521,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 { @@ -567,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; @@ -575,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; @@ -589,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 { @@ -599,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) { @@ -681,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); @@ -748,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; } @@ -792,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; } @@ -838,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; } @@ -1224,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; @@ -1478,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, @@ -1526,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 { @@ -1573,43 +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-right { - border-bottom-left-radius: 0; - border-top-left-radius: 0; - margin-left: 0; -} - .repo-button-row { margin: 8px 0; display: flex; @@ -1623,21 +1397,17 @@ td .commit-summary { display: flex; align-items: center; gap: 0.5rem; + flex-wrap: wrap; } .repo-button-row-left { flex-grow: 1; } -.repo-button-row .button { - padding: 6px 10px !important; - height: 30px; +.repo-button-row .ui.button { flex-shrink: 0; margin: 0; -} - -.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 */ + min-height: 30px; } tbody.commit-list { @@ -1727,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; } @@ -1782,12 +1552,12 @@ tbody.commit-list { .resolved-placeholder { display: flex; align-items: center; - font-size: 14px !important; - padding: 8px !important; - font-weight: var(--font-weight-normal) !important; - border: 1px solid var(--color-secondary) !important; - border-radius: var(--border-radius) !important; - margin: 4px !important; + justify-content: space-between; + margin: 4px; + padding: 8px; + border: 1px solid var(--color-secondary); + border-radius: var(--border-radius); + background: var(--color-box-header); } .resolved-placeholder + .comment-code-cloud { @@ -1861,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 */ @@ -2050,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; @@ -2079,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, @@ -2116,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 { @@ -2215,10 +1969,11 @@ tbody.commit-list { max-width: min(400px, 90vw); } -.branch-selector-dropdown .branch-dropdown-button { +.branch-selector-dropdown .ui.button.branch-dropdown-button { margin: 0; max-width: 340px; line-height: var(--line-height-default); + padding: 0 0.5em 0 0.75em; } /* FIXME: These media selectors are not ideal (just keep them from old code). diff --git a/web_src/css/repo/clone.css b/web_src/css/repo/clone.css index c6887fbf16..53eb8b7b87 100644 --- a/web_src/css/repo/clone.css +++ b/web_src/css/repo/clone.css @@ -1,14 +1,16 @@ /* only used by "repo/empty.tmpl" */ .clone-buttons-combo { display: flex; - align-items: center; + align-items: stretch; flex: 1; } -.clone-buttons-combo input { - border-left: none !important; - border-radius: 0 !important; - height: 30px; +.clone-buttons-combo > .ui.button:not(:last-child) { + border-right: none; +} + +.ui.action.input.clone-buttons-combo input { + border-radius: 0; /* override fomantic border-radius for ".ui.input > input" */ } /* used by the clone-panel popup */ diff --git a/web_src/css/repo/file-view.css b/web_src/css/repo/file-view.css new file mode 100644 index 0000000000..907f136afe --- /dev/null +++ b/web_src/css/repo/file-view.css @@ -0,0 +1,92 @@ +.file-view tr.active .lines-num, +.file-view tr.active .lines-escape, +.file-view tr.active .lines-code { + background: var(--color-highlight-bg); +} + +/* set correct border radius on the last active lines, to avoid border overflow */ +.file-view tr.active:last-of-type .lines-code { + border-bottom-right-radius: var(--border-radius); +} + +.file-view tr.active .lines-num { + position: relative; +} + +/* add a darker "handler" at the beginning of the active line */ +.file-view tr.active .lines-num::before { + content: ""; + position: absolute; + left: 0; + width: 2px; + height: 100%; + background: var(--color-highlight-fg); +} + +.file-view .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 */ +} + +/* ".code-view" is always used with ".file-view", to show the code of a file */ +.file-view.code-view { + background: var(--color-code-bg); + border-radius: var(--border-radius); +} + +.file-view.code-view table { + width: 100%; +} + +.file-view.code-view .lines-num span::after { + cursor: pointer; +} + +.file-view.code-view .lines-num:hover { + color: var(--color-text-dark); +} + +.file-view.code-view .ui.button.code-line-button { + border: 1px solid var(--color-secondary); + padding: 1px 4px; + margin: 0; + min-height: 0; + position: absolute; + left: 6px; +} + +.file-view.code-view .ui.button.code-line-button:hover { + background: var(--color-secondary); +} + +.view-raw { + display: flex; + justify-content: center; +} + +.view-raw > * { + max-width: 100%; +} + +.view-raw audio, +.view-raw video, +.view-raw img { + margin: 1rem; + border-radius: 0; + object-fit: contain; +} + +.view-raw img[src$=".svg" i] { + max-height: 600px !important; + max-width: 600px !important; +} + +.file-view-render-container { + width: 100%; +} + +.file-view-render-container :last-child { + border-radius: 0 0 var(--border-radius) var(--border-radius); /* to match the "ui segment" bottom radius */ +} diff --git a/web_src/css/repo/header.css b/web_src/css/repo/header.css index b70691435f..910648ea32 100644 --- a/web_src/css/repo/header.css +++ b/web_src/css/repo/header.css @@ -27,47 +27,3 @@ .repo-header .flex-item-trailing { flex-wrap: nowrap; } - -.repo-buttons { - align-items: center; - display: flex; - flex-flow: row wrap; - word-break: keep-all; - gap: 0.25em; -} - -.repo-buttons button[disabled] ~ .label { - opacity: var(--opacity-disabled); - color: var(--color-text-dark); - background: var(--color-light-mimic-enabled) !important; -} - -.repo-buttons button[disabled] ~ .label:hover { - color: var(--color-primary-dark-1); -} - -.repo-buttons .ui.labeled.button.disabled { - pointer-events: inherit !important; -} - -.repo-buttons .ui.labeled.button.disabled > .label { - color: var(--color-text-dark); - background: var(--color-light-mimic-enabled) !important; -} - -.repo-buttons .ui.labeled.button.disabled > .label:hover { - color: var(--color-primary-dark-1); -} - -.repo-buttons .ui.labeled.button.disabled > .button { - pointer-events: none !important; -} - -@media (max-width: 767.98px) { - .repo-buttons .ui.button, - .repo-buttons .ui.label { - padding-left: 8px; - padding-right: 8px; - margin: 0; - } -} diff --git a/web_src/css/repo/home-file-list.css b/web_src/css/repo/home-file-list.css index 46128457ed..6aa9e4bca3 100644 --- a/web_src/css/repo/home-file-list.css +++ b/web_src/css/repo/home-file-list.css @@ -14,17 +14,6 @@ } } -#repo-files-table .svg.octicon-file-directory-fill, -#repo-files-table .svg.octicon-file-submodule { - color: var(--color-primary); -} - -#repo-files-table .svg.octicon-file, -#repo-files-table .svg.octicon-file-symlink-file, -#repo-files-table .svg.octicon-file-directory-symlink { - color: var(--color-secondary-dark-7); -} - #repo-files-table .repo-file-item { display: contents; } @@ -82,7 +71,7 @@ #repo-files-table .repo-file-cell.name .entry-name { flex-shrink: 1; - min-width: 3em; + min-width: 1ch; /* leave about one letter space when shrinking, need to fine tune the "shrinks" in this grid in the future */ } @media (max-width: 767.98px) { diff --git a/web_src/css/repo/home.css b/web_src/css/repo/home.css index 69c454d611..ee371f1b1c 100644 --- a/web_src/css/repo/home.css +++ b/web_src/css/repo/home.css @@ -58,10 +58,16 @@ flex: 0 0 15%; min-width: 0; max-height: 100vh; + position: sticky; + top: 0; + bottom: 0; + height: 100%; + overflow-y: hidden; } .repo-view-content { flex: 1; + min-width: 0; } .language-stats { diff --git a/web_src/css/repo/issue-card.css b/web_src/css/repo/issue-card.css index fb832bd05a..327919b1fe 100644 --- a/web_src/css/repo/issue-card.css +++ b/web_src/css/repo/issue-card.css @@ -7,6 +7,7 @@ padding: 8px 10px; border: 1px solid var(--color-secondary); background: var(--color-card); + color: var(--color-text); /* it can't inherit from parent because the card already has its own background */ } .issue-card-icon, @@ -28,13 +29,16 @@ display: flex; width: 100%; justify-content: space-between; - gap: 0.25em; + gap: 1em; } -.issue-card-assignees { +.issue-card-bottom-part { display: flex; + flex: 1; align-items: center; gap: 0.25em; - justify-content: end; flex-wrap: wrap; + overflow: hidden; + max-width: fit-content; + max-height: fit-content; } diff --git a/web_src/css/repo/issue-label.css b/web_src/css/repo/issue-label.css index 0a25d31da9..f75c73b50f 100644 --- a/web_src/css/repo/issue-label.css +++ b/web_src/css/repo/issue-label.css @@ -4,41 +4,46 @@ margin: 0; } -.issue-label-list .item { +.issue-label-list > .item { border-bottom: 1px solid var(--color-secondary); display: flex; padding: 1em 0; margin: 0; } -.issue-label-list .item:first-child { +.issue-label-list > .item:first-child { padding-top: 0; } -.issue-label-list .item:last-child { +.issue-label-list > .item:last-child { border-bottom: none; padding-bottom: 0; } -.issue-label-list .item .label-title { +.issue-label-list > .item .label-title { width: 33%; + padding-right: 1em; } -.issue-label-list .item .label-issues { +.issue-label-list > .item .label-issues { width: 33%; + padding-right: 1em; } -.issue-label-list .item .label-operation { +.issue-label-list > .item .label-operation { width: 33%; + display: flex; + flex-wrap: wrap; + gap: 0.5em; + justify-content: end; + align-items: center; } -.issue-label-list .item a { +.issue-label-list > .item .label-operation a { font-size: 12px; - padding-right: 10px; - color: var(--color-text-light); } -.issue-label-list .item.org-label { +.issue-label-list > .item.org-label { opacity: 0.7; } diff --git a/web_src/css/repo/linebutton.css b/web_src/css/repo/linebutton.css deleted file mode 100644 index e99d0399d1..0000000000 --- a/web_src/css/repo/linebutton.css +++ /dev/null @@ -1,18 +0,0 @@ -.code-view .lines-num:hover { - color: var(--color-text-dark) !important; -} - -.code-line-button { - border: 1px solid var(--color-secondary); - border-radius: var(--border-radius); - padding: 1px 4px !important; - position: absolute; - font-family: var(--fonts-regular); - left: 0; - transform: translateX(calc(-50% + 6px)); - cursor: pointer; -} - -.code-line-button:hover { - background: var(--color-secondary) !important; -} diff --git a/web_src/css/repo/list-header.css b/web_src/css/repo/list-header.css index e666e046d3..9d0b13933a 100644 --- a/web_src/css/repo/list-header.css +++ b/web_src/css/repo/list-header.css @@ -1,6 +1,6 @@ .list-header { display: flex; - align-items: center; + align-items: stretch; flex-wrap: wrap; gap: .5rem; } @@ -8,9 +8,8 @@ .list-header-search { display: flex; flex: 1; - align-items: center; + align-items: stretch; flex-wrap: wrap; - justify-content: center; min-width: 200px; /* to enable flexbox wrapping on mobile */ } diff --git a/web_src/css/repo/packages.css b/web_src/css/repo/packages.css new file mode 100644 index 0000000000..75675f5243 --- /dev/null +++ b/web_src/css/repo/packages.css @@ -0,0 +1,25 @@ +.packages-content { + display: flex; + align-items: flex-start; + gap: 16px; +} + +.packages-content-left { + margin: 0 !important; + width: calc(100% - 250px - 16px); +} + +.packages-content-right { + margin: 0 !important; + width: 250px; +} + +@media (max-width: 767.98px) { + .packages-content { + flex-direction: column; + } + .packages-content-left, + .packages-content-right { + width: 100%; + } +} diff --git a/web_src/css/repo/release-tag.css b/web_src/css/repo/release-tag.css index bf8c1312f1..4b42c992ef 100644 --- a/web_src/css/repo/release-tag.css +++ b/web_src/css/repo/release-tag.css @@ -31,6 +31,7 @@ #release-list .release-entry .detail { flex: 1; margin: 0; + min-width: 0; } @media (max-width: 767.98px) { @@ -58,17 +59,24 @@ margin-bottom: 2px; /* the legacy trick to align the avatar vertically, no better solution at the moment */ } -#release-list .release-entry .detail .download .list { - padding-left: 0; +#release-list .release-entry .attachment-list { border: 1px solid var(--color-secondary); border-radius: var(--border-radius); } -#release-list .release-entry .detail .download .list li { +#release-list .release-entry .attachment-list > .item { display: flex; - justify-content: space-between; padding: 8px; - border-bottom: 1px solid var(--color-secondary); + flex-wrap: wrap; +} + +#release-list .release-entry .attachment-list > .item a { + min-width: 300px; +} + +#release-list .release-entry .attachment-list .attachment-right-info { + flex-shrink: 0; + min-width: 300px; } #release-list .release-entry .detail .download[open] summary { @@ -76,7 +84,6 @@ } #release-list .download-icon { - margin-right: .25rem; color: var(--color-text-light-1); } @@ -84,10 +91,6 @@ border-bottom: none; } -#tags-table .tag-list-row { - padding: 8px 12px; -} - #tags-table .tag-list-row-title { font-size: 18px; font-weight: var(--font-weight-normal); diff --git a/web_src/css/repo/wiki.css b/web_src/css/repo/wiki.css index ca59dadb9c..144cb1206c 100644 --- a/web_src/css/repo/wiki.css +++ b/web_src/css/repo/wiki.css @@ -39,10 +39,6 @@ min-width: 150px; } -.repository.wiki .wiki-content-sidebar .ui.message.unicode-escape-prompt p { - display: none; -} - .repository.wiki .wiki-content-footer { margin-top: 1em; } diff --git a/web_src/css/review.css b/web_src/css/review.css index 036ad017f8..23383c051c 100644 --- a/web_src/css/review.css +++ b/web_src/css/review.css @@ -1,15 +1,8 @@ -.show-outdated, -.hide-outdated { - -webkit-touch-callout: none; - -webkit-user-select: none; - user-select: none; - margin-right: 0 !important; -} - .ui.button.add-code-comment { padding: 2px; position: absolute; margin-left: -22px; + min-height: 0; z-index: 5; opacity: 0; transition: transform 0.1s ease-in-out; @@ -58,11 +51,6 @@ margin-bottom: 0.5em; } -.show-outdated:hover, -.hide-outdated:hover { - text-decoration: underline; -} - .comment-code-cloud { padding: 0.5rem 1rem !important; position: relative; diff --git a/web_src/css/shared/flex-list.css b/web_src/css/shared/flex-list.css index 0f54779252..e94e9e9cc2 100644 --- a/web_src/css/shared/flex-list.css +++ b/web_src/css/shared/flex-list.css @@ -17,6 +17,7 @@ .flex-item .flex-item-main { display: flex; flex-direction: column; + gap: 0.25em; flex-grow: 1; flex-basis: 60%; /* avoid wrapping the "flex-item-trailing" too aggressively */ min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */ @@ -33,14 +34,6 @@ color: var(--color-primary) !important; } -.flex-item .flex-item-icon { - align-self: baseline; /* mainly used by the issue list, to align the leading icon with the title */ -} - -.flex-item .flex-item-icon + .flex-item-main { - align-self: baseline; -} - .flex-item .flex-item-trailing { display: flex; gap: 0.5rem; @@ -54,7 +47,9 @@ display: inline-flex; flex-wrap: wrap; align-items: center; - gap: .25rem; + /* labels are under effect of this gap here because they are display:contents. Ideally we should make wrapping + of labels work without display: contents and set this to a static value again. */ + gap: var(--gap-inline); max-width: 100%; color: var(--color-text); font-size: 16px; diff --git a/web_src/css/themes/theme-gitea-dark.css b/web_src/css/themes/theme-gitea-dark.css index 5ddee0a746..48fbd14dfb 100644 --- a/web_src/css/themes/theme-gitea-dark.css +++ b/web_src/css/themes/theme-gitea-dark.css @@ -185,6 +185,7 @@ gitea-theme-meta-info { --color-orange-badge-bg: #f2711c1a; --color-orange-badge-hover-bg: #f2711c4d; --color-git: #f05133; + --color-logo: #609926; /* target-based colors */ --color-body: #1b1f23; --color-box-header: #1a1d1f; diff --git a/web_src/css/themes/theme-gitea-light.css b/web_src/css/themes/theme-gitea-light.css index 1a4183c0d2..eaff717417 100644 --- a/web_src/css/themes/theme-gitea-light.css +++ b/web_src/css/themes/theme-gitea-light.css @@ -185,6 +185,7 @@ gitea-theme-meta-info { --color-orange-badge-bg: #f2711c1a; --color-orange-badge-hover-bg: #f2711c4d; --color-git: #f05133; + --color-logo: #609926; /* target-based colors */ --color-body: #ffffff; --color-box-header: #f1f3f5; diff --git a/web_src/css/user.css b/web_src/css/user.css index caabf1834c..d42e8688fb 100644 --- a/web_src/css/user.css +++ b/web_src/css/user.css @@ -114,6 +114,14 @@ border-radius: var(--border-radius); } +.notifications-item { + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 0.5em; + padding: 0.5em 1em; +} + .notifications-item:hover { background: var(--color-hover); } @@ -129,6 +137,9 @@ .notifications-item:hover .notifications-buttons { display: flex; + align-items: center; + justify-content: end; + gap: 0.25em; } .notifications-item:hover .notifications-updated { |