aboutsummaryrefslogtreecommitdiffstats
path: root/web_src/css/modules
diff options
context:
space:
mode:
Diffstat (limited to 'web_src/css/modules')
-rw-r--r--web_src/css/modules/animations.css15
-rw-r--r--web_src/css/modules/breadcrumb.css6
-rw-r--r--web_src/css/modules/button.css111
-rw-r--r--web_src/css/modules/checkbox.css10
-rw-r--r--web_src/css/modules/container.css4
-rw-r--r--web_src/css/modules/dimmer.css2
-rw-r--r--web_src/css/modules/grid.css52
-rw-r--r--web_src/css/modules/label.css75
-rw-r--r--web_src/css/modules/list.css1
-rw-r--r--web_src/css/modules/menu.css2
-rw-r--r--web_src/css/modules/modal.css1
-rw-r--r--web_src/css/modules/navbar.css4
-rw-r--r--web_src/css/modules/segment.css7
-rw-r--r--web_src/css/modules/select.css25
-rw-r--r--web_src/css/modules/svg.css4
-rw-r--r--web_src/css/modules/tab.css7
-rw-r--r--web_src/css/modules/table.css25
-rw-r--r--web_src/css/modules/tippy.css8
-rw-r--r--web_src/css/modules/toast.css2
19 files changed, 161 insertions, 200 deletions
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/checkbox.css b/web_src/css/modules/checkbox.css
index 0a3a71acaa..f7e61ba360 100644
--- a/web_src/css/modules/checkbox.css
+++ b/web_src/css/modules/checkbox.css
@@ -119,3 +119,13 @@ input[type="radio"] {
.ui.toggle.checkbox input:focus:checked ~ label::before {
background: var(--color-primary) !important;
}
+
+label.gt-checkbox {
+ display: inline-flex;
+ align-items: center;
+ gap: 0.25em;
+}
+
+.ui.form .field > label.gt-checkbox {
+ display: flex;
+}
diff --git a/web_src/css/modules/container.css b/web_src/css/modules/container.css
index 69eab17cfd..236cb986fd 100644
--- a/web_src/css/modules/container.css
+++ b/web_src/css/modules/container.css
@@ -14,7 +14,3 @@
.ui.container.medium-width {
width: 800px;
}
-
-.ui[class*="center aligned"].container {
- text-align: center;
-}
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/grid.css b/web_src/css/modules/grid.css
index a2c558047d..b4f4e16105 100644
--- a/web_src/css/modules/grid.css
+++ b/web_src/css/modules/grid.css
@@ -393,58 +393,6 @@
margin-right: 2.5rem;
}
-.ui[class*="middle aligned"].grid > .column:not(.row),
-.ui[class*="middle aligned"].grid > .row > .column,
-.ui.grid > [class*="middle aligned"].row > .column,
-.ui.grid > [class*="middle aligned"].column:not(.row),
-.ui.grid > .row > [class*="middle aligned"].column {
- flex-direction: column;
- vertical-align: middle;
- align-self: center !important;
-}
-
-.ui[class*="left aligned"].grid > .column,
-.ui[class*="left aligned"].grid > .row > .column,
-.ui.grid > [class*="left aligned"].row > .column,
-.ui.grid > [class*="left aligned"].column.column,
-.ui.grid > .row > [class*="left aligned"].column.column {
- text-align: left;
- align-self: inherit;
-}
-
-.ui[class*="center aligned"].grid > .column,
-.ui[class*="center aligned"].grid > .row > .column,
-.ui.grid > [class*="center aligned"].row > .column,
-.ui.grid > [class*="center aligned"].column.column,
-.ui.grid > .row > [class*="center aligned"].column.column {
- text-align: center;
- align-self: inherit;
-}
-.ui[class*="center aligned"].grid {
- justify-content: center;
-}
-
-.ui[class*="right aligned"].grid > .column,
-.ui[class*="right aligned"].grid > .row > .column,
-.ui.grid > [class*="right aligned"].row > .column,
-.ui.grid > [class*="right aligned"].column.column,
-.ui.grid > .row > [class*="right aligned"].column.column {
- text-align: right;
- align-self: inherit;
-}
-
-.ui[class*="equal width"].grid > .column:not(.row),
-.ui[class*="equal width"].grid > .row > .column,
-.ui.grid > [class*="equal width"].row > .column {
- display: inline-block;
- flex-grow: 1;
-}
-.ui[class*="equal width"].grid > .wide.column,
-.ui[class*="equal width"].grid > .row > .wide.column,
-.ui.grid > [class*="equal width"].row > .wide.column {
- flex-grow: 0;
-}
-
@media only screen and (max-width: 767.98px) {
.ui[class*="mobile reversed"].grid,
.ui[class*="mobile reversed"].grid > .row,
diff --git a/web_src/css/modules/label.css b/web_src/css/modules/label.css
index 1e42668aa1..bb6f1b512f 100644
--- a/web_src/css/modules/label.css
+++ b/web_src/css/modules/label.css
@@ -4,25 +4,19 @@
.ui.label {
display: inline-flex;
align-items: center;
- gap: .25rem;
+ gap: var(--gap-inline);
min-width: 0;
- vertical-align: middle;
- line-height: 1;
+ 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 {
@@ -292,3 +286,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/modal.css b/web_src/css/modules/modal.css
index 427d2529c8..fd6dacc30c 100644
--- a/web_src/css/modules/modal.css
+++ b/web_src/css/modules/modal.css
@@ -67,6 +67,7 @@ These inconsistent layouts should be refactored to simple ones.
border-radius: 0 0 var(--border-radius) var(--border-radius);
}
+.ui.modal .content > form > .actions,
.ui.modal .content > .actions {
padding-top: 1em; /* if the "actions" is in the "content", some paddings are already added by the "content" */
text-align: right;
diff --git a/web_src/css/modules/navbar.css b/web_src/css/modules/navbar.css
index b09b271ad4..ab431e3675 100644
--- a/web_src/css/modules/navbar.css
+++ b/web_src/css/modules/navbar.css
@@ -129,8 +129,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/segment.css b/web_src/css/modules/segment.css
index 0f555cea93..adb514be59 100644
--- a/web_src/css/modules/segment.css
+++ b/web_src/css/modules/segment.css
@@ -123,13 +123,6 @@
clear: both;
}
-.ui[class*="left aligned"].segment {
- text-align: left;
-}
-.ui[class*="center aligned"].segment {
- text-align: center;
-}
-
.ui.secondary.segment {
background: var(--color-secondary-bg);
color: var(--color-text-light);
diff --git a/web_src/css/modules/select.css b/web_src/css/modules/select.css
deleted file mode 100644
index 1d7d749d4a..0000000000
--- a/web_src/css/modules/select.css
+++ /dev/null
@@ -1,25 +0,0 @@
-.gitea-select {
- position: relative;
-}
-
-.gitea-select select {
- appearance: none; /* hide default triangle */
-}
-
-/* ::before and ::after pseudo elements don't work on select elements,
- so we need to put it on the parent. */
-.gitea-select::after {
- position: absolute;
- top: 12px;
- right: 8px;
- pointer-events: none;
- content: "";
- width: 14px;
- height: 14px;
- mask-size: cover;
- -webkit-mask-size: cover;
- mask-image: var(--octicon-chevron-right);
- -webkit-mask-image: var(--octicon-chevron-right);
- transform: rotate(90deg); /* point the chevron down */
- background: currentcolor;
-}
diff --git a/web_src/css/modules/svg.css b/web_src/css/modules/svg.css
index b3060bddd6..738ec22cd3 100644
--- a/web_src/css/modules/svg.css
+++ b/web_src/css/modules/svg.css
@@ -4,6 +4,10 @@
fill: currentcolor;
}
+.svg.git-entry-icon {
+ fill: transparent; /* some material icons have dark background fill, so need to reset */
+}
+
.middle .svg {
vertical-align: middle;
}
diff --git a/web_src/css/modules/tab.css b/web_src/css/modules/tab.css
new file mode 100644
index 0000000000..63c83179b2
--- /dev/null
+++ b/web_src/css/modules/tab.css
@@ -0,0 +1,7 @@
+.ui.tab {
+ display: none;
+}
+
+.ui.tab.active {
+ display: block;
+}
diff --git a/web_src/css/modules/table.css b/web_src/css/modules/table.css
index 4fb9d4214e..eabca31a17 100644
--- a/web_src/css/modules/table.css
+++ b/web_src/css/modules/table.css
@@ -152,31 +152,6 @@
}
}
-.ui.table[class*="left aligned"],
-.ui.table [class*="left aligned"] {
- text-align: left;
-}
-
-.ui.table[class*="center aligned"],
-.ui.table [class*="center aligned"] {
- text-align: center;
-}
-
-.ui.table[class*="right aligned"],
-.ui.table [class*="right aligned"] {
- text-align: right;
-}
-
-.ui.table[class*="top aligned"],
-.ui.table [class*="top aligned"] {
- vertical-align: top;
-}
-
-.ui.table[class*="middle aligned"],
-.ui.table [class*="middle aligned"] {
- vertical-align: middle;
-}
-
.ui.table th.collapsing,
.ui.table td.collapsing {
width: 1px;
diff --git a/web_src/css/modules/tippy.css b/web_src/css/modules/tippy.css
index 55b9751cc6..3c0d63f2fb 100644
--- a/web_src/css/modules/tippy.css
+++ b/web_src/css/modules/tippy.css
@@ -28,6 +28,10 @@
z-index: 1;
}
+.tippy-box[data-theme="default"] {
+ box-shadow: 0 6px 18px var(--color-shadow);
+}
+
/* bare theme, no styling at all, except box-shadow */
.tippy-box[data-theme="bare"] {
border: none;
@@ -88,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;