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
					
				
			
		
					 2 changed files with 2 additions and 0 deletions
				
			
		| 
						 | 
				
			
			@ -1803,6 +1803,7 @@ footer {
 | 
			
		|||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
/* TODO: remove in favor of .hidden helper */
 | 
			
		||||
.hide {
 | 
			
		||||
  display: none;
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue