Fix notification and stopwatch empty states (#22845)
Previous solution was relying on fomantic selector `.ui.label.hidden` to hide the elements in their empty state, but this doesn't work any more with the removal of the `label` class. Instead, introduce a standalone CSS rule for the `hidden` class, which is universally usable as a single class. We can unfortunately not use the existing `hide` class because without the `!important`, it does not have enough specificity to win against fomantic's `.ui.menu:not(.vertical) .item {display: flex}` rule. Followup and fixes regression from https://github.com/go-gitea/gitea/pull/22169. Before: <img width="98" alt="image" src="https://user-images.githubusercontent.com/115237/217959380-d3279ff3-526a-4ac4-9a18-3ab7c9ae91dd.png"> After: <img width="77" alt="image" src="https://user-images.githubusercontent.com/115237/217959463-44852716-cb25-4110-8481-668842ad4454.png">
This commit is contained in:
parent
2152c4e98f
commit
8fa54d0fda
|
@ -1803,6 +1803,7 @@ footer {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* TODO: remove in favor of .hidden helper */
|
||||||
.hide {
|
.hide {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
|
|
|
@ -22,6 +22,7 @@
|
||||||
/* below class names match Tailwind CSS */
|
/* below class names match Tailwind CSS */
|
||||||
.pointer-events-none { pointer-events: none !important; }
|
.pointer-events-none { pointer-events: none !important; }
|
||||||
.relative { position: relative !important; }
|
.relative { position: relative !important; }
|
||||||
|
.hidden { display: none !important; }
|
||||||
|
|
||||||
.mono {
|
.mono {
|
||||||
font-family: var(--fonts-monospace) !important;
|
font-family: var(--fonts-monospace) !important;
|
||||||
|
|
Loading…
Reference in New Issue