diff options
Diffstat (limited to 'web_src/css')
39 files changed, 630 insertions, 703 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/base.css b/web_src/css/base.css index 47b4f44a66..529ddd5386 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.25rem; /* gap for element blocks, for example: spaces between buttons, menu image & title, header icon & title etc */ } @media (min-width: 768px) and (max-width: 1200px) { @@ -224,6 +237,7 @@ progress::-moz-progress-bar { } .unselectable, +.btn, .button, .lines-num, .lines-commit, @@ -313,6 +327,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; @@ -347,6 +371,7 @@ a.label, .ui.dropdown .menu > .item { color: var(--color-text); + line-height: var(--line-height-default); } .ui.dropdown .menu > .item:hover { @@ -474,7 +499,7 @@ img.ui.avatar, .full.height { flex-grow: 1; - padding-bottom: 80px; + padding-bottom: var(--page-space-bottom); } .status-page-error { @@ -646,10 +671,11 @@ img.ui.avatar, border: 1px solid; } -.ui.floating.dropdown .overflow.menu .scrolling.menu.items { +.ui.dropdown .menu.context-user-switch .scrolling.menu { border-radius: 0 !important; box-shadow: none !important; border-bottom: 1px solid var(--color-secondary); + max-width: 80vw; } .user-menu > .item { @@ -745,6 +771,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); } @@ -800,10 +834,6 @@ overflow-menu .ui.label { display: block; } -.code-view .lines-num span::after { - cursor: pointer; -} - .lines-type-marker { vertical-align: top; white-space: nowrap; @@ -840,43 +870,16 @@ 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; - word-break: break-all; overflow-wrap: anywhere; line-height: inherit; /* needed for inline code preview in markup */ } @@ -924,12 +927,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, @@ -937,15 +940,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); } @@ -989,14 +983,7 @@ table th[data-sortt-desc] .svg { box-shadow: 0 0 0 1px var(--color-secondary) inset; } -.emoji { - font-size: 1.25em; - line-height: var(--line-height-default); - font-style: normal !important; - font-weight: var(--font-weight-normal) !important; - vertical-align: -0.075em; -} - +/* for "image" emojis like ":git:" ":gitea:" and ":github:" (see CUSTOM_EMOJIS config option) */ .emoji img { border-width: 0 !important; margin: 0 !important; @@ -1035,26 +1022,13 @@ table th[data-sortt-desc] .svg { text-align: left; } -.truncated-item-container { - display: flex !important; - align-items: center; -} - -.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; -} - -.truncated-item-name { - line-height: 2; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - margin-top: -0.5em; - margin-bottom: -0.5em; +.ui.button.ellipsis-button { + padding: 0 5px 8px; + display: inline-block; + font-weight: var(--font-weight-semibold); + line-height: 8px; + vertical-align: middle; + min-height: 0; } .precolors { @@ -1124,7 +1098,7 @@ table th[data-sortt-desc] .svg { .flex-text-inline { display: inline-flex; align-items: center; - gap: .25rem; + gap: var(--gap-inline); vertical-align: middle; min-width: 0; /* make ellipsis work */ } @@ -1147,20 +1121,27 @@ 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 */ +} + /* to override Fomantic's default display: block for ".menu .item", and use a slightly larger gap for menu item content the "!important" is necessary to override Fomantic UI menu item styles, meanwhile we should keep the "hidden" items still hidden */ .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, @@ -1168,25 +1149,33 @@ the "!important" is necessary to override Fomantic UI menu item styles, meanwhil margin: 0; /* use gap, but not margin */ } -.ui.dropdown.ellipsis-items-nowrap > .text { +.ui.dropdown.ellipsis-text-items { + /* reset y padding and use the line-height below instead, to avoid the "overflow: hidden" clips the larger image in the "text" element */ + padding-top: 0; + padding-bottom: 0; +} + +.ui.dropdown.ellipsis-text-items > .text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; + line-height: 2.71; /* matches fomantic dropdown's default min-height */ } -.ellipsis-items-nowrap > .item, -.ui.dropdown.ellipsis-items-nowrap .menu > .item { +.ui.dropdown.ellipsis-text-items .menu > .item { white-space: nowrap !important; overflow: hidden !important; 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/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 8763d3684e..7fd5150970 100644 --- a/web_src/css/features/projects.css +++ b/web_src/css/features/projects.css @@ -1,43 +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-toolbar-right .filter.menu { - flex-direction: row; +.project-header { + padding: 0.5em 0; flex-wrap: wrap; } -@media (max-width: 767.98px) { - .project-toolbar-right .dropdown .menu { - left: auto !important; - right: auto !important; - } +.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 { @@ -51,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 { @@ -110,3 +101,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 865ac0536a..c6a89edf25 100644 --- a/web_src/css/markup/content.css +++ b/web_src/css/markup/content.css @@ -5,10 +5,6 @@ overflow-wrap: break-word; } -.conversation-holder .markup { - overflow-wrap: anywhere; /* prevent overflow in code comments. TODO: properly restrict .conversation-holder width and remove this */ -} - .markup > *:first-child { margin-top: 0 !important; } @@ -138,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; @@ -313,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 */ @@ -336,11 +347,6 @@ padding-right: 28px; } -.markup .emoji { - max-width: none; - vertical-align: text-top; -} - .markup span.frame { display: block; overflow: hidden; @@ -452,14 +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; - word-break: break-all; - overflow-wrap: break-word; - 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 { @@ -480,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; } @@ -520,18 +532,16 @@ padding-left: 2em; } -.file-revisions-btn { - display: block; - float: left; - margin-bottom: 2px !important; - padding: 11px !important; - margin-right: 10px !important; +.markup details.frontmatter-content summary { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + margin-bottom: 0.25em; } -.file-revisions-btn i { - -webkit-touch-callout: none; - -webkit-user-select: none; - user-select: none; +.markup details.frontmatter-content svg { + vertical-align: middle; + margin: 0 0.25em; } .markup-content-iframe { 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..b105bb5de2 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,6 +352,14 @@ 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 */ @@ -379,12 +373,12 @@ It needs some tricks to tweak the left/right borders with active state */ .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/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..f5d0decdf6 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,10 +89,6 @@ 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); @@ -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/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 87af299dad..a72709c382 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 { @@ -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%; } @@ -476,14 +452,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 +489,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 { @@ -575,6 +543,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; @@ -599,10 +572,6 @@ 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; @@ -1224,33 +1193,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; @@ -1573,43 +1515,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 +1528,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 { @@ -1724,8 +1625,7 @@ tbody.commit-list { line-height: 18px; margin: 1em; white-space: pre-wrap; - word-break: break-all; - overflow-wrap: break-word; + overflow-wrap: anywhere; } .content-history-detail-dialog .header .avatar { @@ -1783,12 +1683,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 { @@ -1862,6 +1762,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 */ @@ -2051,10 +1952,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; @@ -2216,10 +2113,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..f2ab052a54 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; } 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..24abe8fd9d 100644 --- a/web_src/css/shared/flex-list.css +++ b/web_src/css/shared/flex-list.css @@ -33,14 +33,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 +46,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; |