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.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/dimmer.css2
-rw-r--r--web_src/css/modules/label.css80
-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/toast.css2
8 files changed, 70 insertions, 43 deletions
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/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/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/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;