diff options
| author | silverwind <me@silverwind.io> | 2023-02-11 22:45:58 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-02-11 21:45:58 +0000 |
| commit | 8fa54d0fda4ee5175619bed8fd959b590ef1e5c7 (patch) | |
| tree | 2538e29cb70354334449a08177632d7a17e37510 /web_src | |
| parent | 2152c4e98f3ea2b17dc8cdd549612b5abed6cc9f (diff) | |
| download | gitea-8fa54d0fda4ee5175619bed8fd959b590ef1e5c7.tar.gz gitea-8fa54d0fda4ee5175619bed8fd959b590ef1e5c7.zip | |
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">
Diffstat (limited to 'web_src')
| -rw-r--r-- | web_src/less/_base.less | 1 | ||||
| -rw-r--r-- | web_src/less/helpers.less | 1 |
2 files changed, 2 insertions, 0 deletions
diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 4a22b8af4b..279a23ba65 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -1803,6 +1803,7 @@ footer { } } +/* TODO: remove in favor of .hidden helper */ .hide { display: none; diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less index 20670a3786..06f2f8a347 100644 --- a/web_src/less/helpers.less +++ b/web_src/less/helpers.less @@ -22,6 +22,7 @@ /* below class names match Tailwind CSS */ .pointer-events-none { pointer-events: none !important; } .relative { position: relative !important; } +.hidden { display: none !important; } .mono { font-family: var(--fonts-monospace) !important; |