aboutsummaryrefslogtreecommitdiffstats
path: root/web_src/css
diff options
context:
space:
mode:
Diffstat (limited to 'web_src/css')
-rw-r--r--web_src/css/actions.css1
-rw-r--r--web_src/css/base.css102
-rw-r--r--web_src/css/features/colorpicker.css32
-rw-r--r--web_src/css/features/gitgraph.css71
-rw-r--r--web_src/css/features/projects.css4
-rw-r--r--web_src/css/form.css1
-rw-r--r--web_src/css/home.css4
-rw-r--r--web_src/css/index.css3
-rw-r--r--web_src/css/markup/content.css21
-rw-r--r--web_src/css/modules/animations.css3
-rw-r--r--web_src/css/modules/breadcrumb.css6
-rw-r--r--web_src/css/modules/button.css2
-rw-r--r--web_src/css/modules/comment.css4
-rw-r--r--web_src/css/modules/dimmer.css2
-rw-r--r--web_src/css/modules/label.css82
-rw-r--r--web_src/css/modules/list.css1
-rw-r--r--web_src/css/modules/navbar.css17
-rw-r--r--web_src/css/modules/table.css8
-rw-r--r--web_src/css/modules/toast.css2
-rw-r--r--web_src/css/repo.css364
-rw-r--r--web_src/css/repo/file-view.css92
-rw-r--r--web_src/css/repo/home-file-list.css2
-rw-r--r--web_src/css/repo/home.css1
-rw-r--r--web_src/css/repo/issue-card.css10
-rw-r--r--web_src/css/repo/issue-label.css25
-rw-r--r--web_src/css/repo/linebutton.css16
-rw-r--r--web_src/css/repo/packages.css25
-rw-r--r--web_src/css/repo/release-tag.css10
-rw-r--r--web_src/css/repo/wiki.css4
-rw-r--r--web_src/css/shared/flex-list.css13
-rw-r--r--web_src/css/themes/theme-gitea-dark.css1
-rw-r--r--web_src/css/themes/theme-gitea-light.css1
-rw-r--r--web_src/css/user.css11
33 files changed, 393 insertions, 548 deletions
diff --git a/web_src/css/actions.css b/web_src/css/actions.css
index 665893a287..c43ebe21a0 100644
--- a/web_src/css/actions.css
+++ b/web_src/css/actions.css
@@ -59,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 a28fb7b92a..3b819e91bc 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -30,6 +30,15 @@
--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) {
@@ -176,10 +185,6 @@ details summary {
cursor: pointer;
}
-details summary > * {
- display: inline;
-}
-
progress {
background: var(--color-secondary-dark-1);
border-radius: var(--border-radius);
@@ -318,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;
@@ -455,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 {
@@ -815,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;
@@ -855,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;
@@ -938,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,
@@ -951,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);
}
@@ -1051,19 +1018,6 @@ table th[data-sortt-desc] .svg {
min-height: 0;
}
-.precolors {
- display: flex;
- flex-direction: column;
- justify-content: center;
- margin-left: 1em;
-}
-
-.precolors .color {
- display: inline-block;
- width: 15px;
- height: 15px;
-}
-
.ui.dropdown:not(.button) {
line-height: var(--line-height-default); /* the dropdown doesn't have default line-height, use this to make the dropdown icon align with plain dropdown */
}
@@ -1115,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 */
}
@@ -1146,7 +1102,7 @@ table th[data-sortt-desc] .svg {
.flex-text-block {
display: flex;
align-items: center;
- gap: .5rem;
+ gap: var(--gap-block);
min-width: 0;
}
@@ -1161,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,
diff --git a/web_src/css/features/colorpicker.css b/web_src/css/features/colorpicker.css
index b7436783df..4c517e6348 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;
@@ -22,7 +20,7 @@
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/gitgraph.css b/web_src/css/features/gitgraph.css
index 865c82e003..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,34 +71,23 @@
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;
+ line-height: var(--line-height-default);
min-height: 0;
}
-#git-graph-container #graph-raw-list {
- margin: 0;
-}
-
#git-graph-container.monochrome #rel-container .flow-group {
stroke: var(--color-secondary-dark-5);
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 1d09e9c7ea..25cb530f85 100644
--- a/web_src/css/features/projects.css
+++ b/web_src/css/features/projects.css
@@ -5,6 +5,7 @@
flex-wrap: nowrap;
overflow: auto;
margin: 0 0.5em;
+ min-height: max(calc(100vh - 400px), 300px);
max-height: calc(100vh - 120px);
}
@@ -70,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;
@@ -84,6 +85,7 @@
scroll-snap-align: center;
margin-right: 2px;
aspect-ratio: 1;
+ object-fit: contain;
}
.card-attachment-images img:only-child {
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 c20aa028e4..291cd04b2b 100644
--- a/web_src/css/index.css
+++ b/web_src/css/index.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/content.css b/web_src/css/markup/content.css
index ace028b4d0..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 */
diff --git a/web_src/css/modules/animations.css b/web_src/css/modules/animations.css
index 8edf31ddbd..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);
}
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 b105bb5de2..8e3309474b 100644
--- a/web_src/css/modules/button.css
+++ b/web_src/css/modules/button.css
@@ -366,8 +366,8 @@ 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 {
diff --git a/web_src/css/modules/comment.css b/web_src/css/modules/comment.css
index 9947b15b9a..1e235a248f 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);
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/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/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 306db34300..5238e3a2e5 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -73,10 +73,21 @@
overflow: hidden;
}
+.issue-content-right .ui.list {
+ margin: 0.5em 0;
+ max-width: 100%;
+}
+
.issue-sidebar-combo > .ui.dropdown .item:not(.checked) .item-check-mark {
visibility: hidden;
}
+.issue-content-right .ui.list.labels-list {
+ display: flex;
+ gap: var(--gap-inline);
+ flex-wrap: wrap;
+}
+
@media (max-width: 767.98px) {
.issue-content-left,
.issue-content-right {
@@ -130,7 +141,7 @@ td .commit-summary {
align-items: center;
overflow: hidden;
text-overflow: ellipsis;
- gap: 0.25em;
+ gap: 0.5em;
}
@media (max-width: 767.98px) {
@@ -139,11 +150,6 @@ td .commit-summary {
}
}
-.repo-path {
- display: flex;
- overflow-wrap: anywhere;
-}
-
.repository.file.list .non-diff-file-content .header .icon {
font-size: 1em;
}
@@ -177,42 +183,6 @@ td .commit-summary {
cursor: default;
}
-.view-raw {
- display: flex;
- justify-content: center;
- align-items: center;
-}
-
-.view-raw > * {
- max-width: 100%;
-}
-
-.view-raw audio,
-.view-raw video,
-.view-raw img {
- margin: 1rem 0;
- border-radius: 0;
- object-fit: contain;
-}
-
-.view-raw img[src$=".svg" i] {
- max-height: 600px !important;
- max-width: 600px !important;
-}
-
-.pdf-content {
- width: 100%;
- height: 600px;
- border: none !important;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-.pdf-content .pdf-fallback-button {
- margin: 50px auto;
-}
-
.repository.file.list .non-diff-file-content .plain-text {
padding: 1em 2em;
}
@@ -235,10 +205,6 @@ td .commit-summary {
padding: 0 !important;
}
-.non-diff-file-content .pdfobject {
- border-radius: 0 0 var(--border-radius) var(--border-radius);
-}
-
.repo-editor-header {
width: 100%;
}
@@ -272,8 +238,8 @@ td .commit-summary {
border-radius: var(--border-radius);
}
-.repository.file.editor .commit-form-wrapper .commit-form::before,
-.repository.file.editor .commit-form-wrapper .commit-form::after {
+.avatar-content-left-arrow::before,
+.avatar-content-left-arrow::after {
right: 100%;
top: 20px;
border: solid transparent;
@@ -284,18 +250,24 @@ td .commit-summary {
pointer-events: none;
}
-.repository.file.editor .commit-form-wrapper .commit-form::before {
+.avatar-content-left-arrow::before {
border-right-color: var(--color-secondary);
border-width: 9px;
margin-top: -9px;
}
-.repository.file.editor .commit-form-wrapper .commit-form::after {
+.avatar-content-left-arrow::after {
border-right-color: var(--color-box-body);
border-width: 8px;
margin-top: -8px;
}
+@media (max-width: 767.98px) {
+ .avatar-content-left-arrow::before,
+ .avatar-content-left-arrow::after {
+ display: none;
+ }
+}
.repository.file.editor .commit-form-wrapper .commit-form .quick-pull-choice .branch-name {
display: inline-block;
padding: 2px 4px;
@@ -328,30 +300,6 @@ td .commit-summary {
min-width: 100px;
}
-.repository.new.issue .comment.form .content::before,
-.repository.new.issue .comment.form .content::after {
- right: 100%;
- top: 20px;
- border: solid transparent;
- content: " ";
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
-}
-
-.repository.new.issue .comment.form .content::before {
- border-right-color: var(--color-secondary);
- border-width: 9px;
- margin-top: -9px;
-}
-
-.repository.new.issue .comment.form .content::after {
- border-right-color: var(--color-box-body);
- border-width: 8px;
- margin-top: -8px;
-}
-
.repository.new.issue .comment.form .content .markup {
font-size: 14px;
}
@@ -360,21 +308,6 @@ td .commit-summary {
display: inline-block;
}
-@media (max-width: 767.98px) {
- .comment.form .issue-content-left .avatar {
- display: none;
- }
- .comment.form .issue-content-left .content {
- margin-left: 0 !important;
- }
- .comment.form .issue-content-left .content::before,
- .comment.form .issue-content-left .content::after,
- .comment.form .content .form::before,
- .comment.form .content .form::after {
- display: none;
- }
-}
-
/* issue title & meta & edit */
.issue-title-header {
width: 100%;
@@ -399,10 +332,9 @@ td .commit-summary {
.repository.view.issue .issue-title {
display: flex;
- align-items: center;
gap: 0.5em;
margin-bottom: 8px;
- min-height: 40px; /* avoid layout shift on edit */
+ min-height: 36px; /* avoid layout shift on edit */
}
.repository.view.issue .issue-title h1 {
@@ -410,9 +342,10 @@ td .commit-summary {
width: 100%;
font-weight: var(--font-weight-normal);
font-size: 32px;
- line-height: 40px;
+ line-height: 36px; /* vertically center single-line text with .issue-title-buttons */
margin: 0;
padding-right: 0.25rem;
+ overflow-wrap: anywhere;
}
@media (max-width: 767.98px) {
@@ -523,7 +456,7 @@ td .commit-summary {
.repository.view.issue .comment-list .timeline-item,
.repository.view.issue .comment-list .timeline-item-group {
- padding: 16px 0;
+ padding: 8px 0;
}
.repository.view.issue .comment-list .timeline-item-group .timeline-item {
@@ -569,6 +502,7 @@ td .commit-summary {
background-color: var(--color-timeline);
border-radius: var(--border-radius-full);
display: flex;
+ flex-shrink: 0;
float: left;
margin-left: -33px;
margin-right: 8px;
@@ -577,6 +511,11 @@ td .commit-summary {
justify-content: center;
}
+.repository.view.issue .comment-list .timeline-item.commits-list .badge {
+ margin-right: 0;
+ height: 28px;
+}
+
.repository.view.issue .comment-list .timeline-item .badge .svg {
width: 22px;
height: 22px;
@@ -591,9 +530,18 @@ td .commit-summary {
margin-left: -16px;
}
-.repository.view.issue .comment-list .timeline-item.event > .text {
+.repository.view.issue .comment-list .timeline-item .comment-text-line {
line-height: 32px;
vertical-align: middle;
+ color: var(--color-text-light);
+}
+
+.repository.view.issue .comment-list .timeline-item .comment-text-line a {
+ color: inherit;
+}
+
+.repository.view.issue .comment-list .timeline-item .avatar-with-link + .comment-text-line {
+ margin-left: 0.25em;
}
.repository.view.issue .comment-list .timeline-item.commits-list {
@@ -601,25 +549,17 @@ td .commit-summary {
padding-top: 0;
}
-.repository.view.issue .comment-list .timeline-item.commits-list .ui.avatar {
- margin-right: 0.25em;
-}
-
.repository.view.issue .comment-list .timeline-item.event > .commit-status-link {
float: right;
margin-right: 8px;
margin-top: 4px;
}
-.repository.view.issue .comment-list .timeline-item .comparebox {
- line-height: 32px;
+.repository.view.issue .comment-list .timeline-item .comment-text-label {
vertical-align: middle;
-}
-
-.repository.view.issue .comment-list .timeline-item .comparebox .compare.label {
- font-size: 1rem;
- margin: 0;
border: 1px solid var(--color-light-border);
+ height: 26px;
+ margin: 4px 0; /* because this label is beside the comment line, which has "line-height: 34px" */
}
@media (max-width: 767.98px) {
@@ -683,30 +623,6 @@ td .commit-summary {
width: calc(100% + 2rem);
}
-.repository.view.issue .comment-list .comment .merge-section.no-header::before,
-.repository.view.issue .comment-list .comment .merge-section.no-header::after {
- right: 100%;
- top: 20px;
- border: solid transparent;
- content: " ";
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
-}
-
-.repository.view.issue .comment-list .comment .merge-section.no-header::before {
- border-right-color: var(--color-secondary);
- border-width: 9px;
- margin-top: -9px;
-}
-
-.repository.view.issue .comment-list .comment .merge-section.no-header::after {
- border-right-color: var(--color-box-body);
- border-width: 8px;
- margin-top: -8px;
-}
-
.merge-section-info code {
border: 1px solid var(--color-light-border);
border-radius: var(--border-radius);
@@ -750,19 +666,10 @@ td .commit-summary {
padding: 0 !important;
}
-.repository.view.issue .comment-list .code-comment .comment-header::after,
-.repository.view.issue .comment-list .code-comment .comment-header::before {
- display: none;
-}
-
.repository.view.issue .comment-list .code-comment .comment-content {
margin-left: 24px;
}
-.repository.view.issue .comment-list .comment > .avatar {
- margin-top: 6px;
-}
-
.repository.view.issue .comment-list .comment-code-cloud button.comment-form-reply {
margin: 0;
}
@@ -794,30 +701,6 @@ td .commit-summary {
clear: none;
}
-.repository .comment.form .content .segment::before,
-.repository .comment.form .content .segment::after {
- right: 100%;
- top: 20px;
- border: solid transparent;
- content: " ";
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
-}
-
-.repository .comment.form .content .segment::before {
- border-right-color: var(--color-secondary);
- border-width: 9px;
- margin-top: -9px;
-}
-
-.repository .comment.form .content .segment::after {
- border-right-color: var(--color-box-body);
- border-width: 8px;
- margin-top: -8px;
-}
-
.repository.new.milestone textarea {
height: 200px;
}
@@ -840,30 +723,6 @@ td .commit-summary {
text-align: center;
}
-.repository.compare.pull .comment.form .content::before,
-.repository.compare.pull .comment.form .content::after {
- right: 100%;
- top: 20px;
- border: solid transparent;
- content: " ";
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
-}
-
-.repository.compare.pull .comment.form .content::before {
- border-right-color: var(--color-secondary);
- border-width: 9px;
- margin-top: -9px;
-}
-
-.repository.compare.pull .comment.form .content::after {
- border-right-color: var(--color-box-body);
- border-width: 8px;
- margin-top: -8px;
-}
-
.repository.compare.pull .markup {
font-size: 14px;
}
@@ -1226,33 +1085,6 @@ td .commit-summary {
font-weight: var(--font-weight-normal);
}
-.empty-placeholder {
- display: flex;
- flex-direction: column;
- align-items: center;
- padding-top: 40px;
- padding-bottom: 40px;
-}
-
-.repository.packages .file-size {
- white-space: nowrap;
-}
-
-.file-view.markup {
- padding: 1em 2em;
-}
-
-.file-view.markup:has(.file-not-rendered-prompt) {
- padding: 0; /* let the file-not-rendered-prompt layout itself */
-}
-
-.file-not-rendered-prompt {
- padding: 1rem;
- text-align: center;
- font-size: 1rem !important; /* use consistent styles for various containers (code, markup, etc) */
- line-height: var(--line-height-default) !important; /* same as above */
-}
-
.repository .activity-header {
display: flex;
justify-content: space-between;
@@ -1480,37 +1312,15 @@ td .commit-summary {
.comment-header {
background: var(--color-box-header);
border-bottom: 1px solid var(--color-secondary);
- padding: 0 1rem;
+ padding: 0.5em 1rem;
position: relative;
color: var(--color-text);
min-height: 41px;
display: flex;
justify-content: space-between;
align-items: center;
-}
-
-.comment-header::before,
-.comment-header::after {
- right: 100%;
- top: 20px;
- border: solid transparent;
- content: " ";
- height: 0;
- width: 0;
- position: absolute;
- pointer-events: none;
-}
-
-.comment-header::before {
- border-right-color: var(--color-secondary);
- border-width: 9px;
- margin-top: -9px;
-}
-
-.comment-header::after {
- border-right-color: var(--color-box-header);
- border-width: 8px;
- margin-top: -8px;
+ flex-wrap: wrap;
+ gap: 0.25em;
}
.comment-header.arrow-top::before,
@@ -1528,17 +1338,16 @@ td .commit-summary {
left: 7px;
}
-.comment-header .actions a:not(.label) {
- padding: 0.5rem !important;
-}
-
-.comment-header .actions .label {
- margin: 0 !important;
+.comment-header-left,
+.comment-header-right {
+ display: flex;
+ align-items: center;
+ gap: 0.5em;
}
-.comment-header-left,
.comment-header-right {
- gap: 4px;
+ flex: 1;
+ justify-content: end;
}
.comment-body {
@@ -1575,49 +1384,6 @@ td .commit-summary {
border-bottom-right-radius: 4px;
}
-.labels-list {
- display: inline-flex;
- flex-wrap: wrap;
- gap: 2.5px;
- align-items: center;
-}
-
-.labels-list .label, .scope-parent > .label {
- padding: 0 6px;
- min-height: 20px;
- line-height: 1.3; /* there is a `font-size: 1.25em` for inside emoji, so here the line-height needs to be larger slightly */
-}
-
-/* Scoped labels with different colors on left and right */
-.ui.label.scope-parent {
- background: none !important;
- padding: 0 !important;
- gap: 0 !important;
-}
-
-.archived-label {
- filter: grayscale(0.5);
- opacity: 0.5;
-}
-
-.ui.label.scope-left {
- border-bottom-right-radius: 0;
- border-top-right-radius: 0;
- margin-right: 0;
-}
-
-.ui.label.scope-middle {
- border-radius: 0;
- margin-left: 0;
- margin-right: 0;
-}
-
-.ui.label.scope-right {
- border-bottom-left-radius: 0;
- border-top-left-radius: 0;
- margin-left: 0;
-}
-
.repo-button-row {
margin: 8px 0;
display: flex;
@@ -1731,7 +1497,7 @@ tbody.commit-list {
overflow-wrap: anywhere;
}
-.content-history-detail-dialog .header .avatar {
+.content-history-detail-dialog .header .ui.avatar {
position: relative;
top: -2px;
}
@@ -1865,6 +1631,7 @@ tbody.commit-list {
border-radius: 0;
display: flex;
flex-direction: column;
+ gap: 0.5em;
}
/* fomantic's last-child selector does not work with hidden last child */
@@ -2054,10 +1821,6 @@ tbody.commit-list {
box-shadow: 0 0.5rem 1rem var(--color-shadow) !important;
}
-.migrate-entry .description {
- text-wrap: balance;
-}
-
.commits-table .commits-table-right form {
display: flex;
align-items: center;
@@ -2083,10 +1846,6 @@ tbody.commit-list {
.repository.view.issue .comment-list .timeline .comment-header {
padding-left: 4px;
}
- .repository.view.issue .comment-list .timeline .comment-header::before,
- .repository.view.issue .comment-list .timeline .comment-header::after {
- content: unset;
- }
/* Don't show the general avatar, we show the inline avatar on mobile.
* And don't show the role labels, there's no place for that. */
.repository.view.issue .comment-list .timeline .timeline-avatar,
@@ -2120,15 +1879,6 @@ tbody.commit-list {
.commit-table th.sha {
display: none !important;
}
- .comment-header {
- flex-wrap: wrap;
- }
- .comment-header .comment-header-left {
- flex-wrap: wrap;
- }
- .comment-header .comment-header-right {
- margin-left: auto;
- }
}
.commit-status-header {
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/home-file-list.css b/web_src/css/repo/home-file-list.css
index f2ab052a54..6aa9e4bca3 100644
--- a/web_src/css/repo/home-file-list.css
+++ b/web_src/css/repo/home-file-list.css
@@ -71,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 61b0a1f962..ee371f1b1c 100644
--- a/web_src/css/repo/home.css
+++ b/web_src/css/repo/home.css
@@ -67,6 +67,7 @@
.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 f7e3d48b48..0000000000
--- a/web_src/css/repo/linebutton.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.code-view .lines-num:hover {
- color: var(--color-text-dark) !important;
-}
-
-.ui.button.code-line-button {
- border: 1px solid var(--color-secondary);
- padding: 1px 4px;
- margin: 0;
- min-height: 0;
- position: absolute;
- left: 6px;
-}
-
-.ui.button.code-line-button:hover {
- background: var(--color-secondary);
-}
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 a37f46b14c..4b42c992ef 100644
--- a/web_src/css/repo/release-tag.css
+++ b/web_src/css/repo/release-tag.css
@@ -70,8 +70,12 @@
flex-wrap: wrap;
}
+#release-list .release-entry .attachment-list > .item a {
+ min-width: 300px;
+}
+
#release-list .release-entry .attachment-list .attachment-right-info {
- flex-grow: 1;
+ flex-shrink: 0;
min-width: 300px;
}
@@ -87,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/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 {