Make tabs smaller (#12003)
* Make tabs smaller Fomantic's tabs are excessively wide and with another tab added on the repo tabbar (https://github.com/go-gitea/gitea/pull/8346) it would break the layout on the english language. Globally reduce tab bar padding to around half of the previous values. * disable no-duplicate-selectors linter rule * more tab bar tweaks * more tweaks * merge rules and nesting * remove arc-green weird hover color * few more arc-green tweaks * restore to 12px * tweaks * use half width height padding * final tweak * 10px * remove min-height * 11px * remve new-menu background on light theme too * background fixes for new-menu Co-authored-by: Lauris BH <lauris@nix.lv> Co-authored-by: techknowlogick <techknowlogick@gitea.io>
This commit is contained in:
		
							parent
							
								
									4dee08a6b4
								
							
						
					
					
						commit
						b948ecb2d2
					
				
					 3 changed files with 42 additions and 26 deletions
				
			
		|  | @ -887,7 +887,7 @@ footer { | |||
|     padding-top: 15px !important; | ||||
|     margin-top: -15px !important; | ||||
|     margin-bottom: 15px !important; | ||||
|     background-color: #fafafa !important; | ||||
|     background: #fafafa; | ||||
|     border-width: 1px !important; | ||||
| } | ||||
| 
 | ||||
|  | @ -895,7 +895,7 @@ footer { | |||
|     .ui.menu.new-menu { | ||||
|         overflow-x: auto !important; | ||||
|         justify-content: left !important; | ||||
|         padding-bottom: 5px; | ||||
|         padding-bottom: 2px; | ||||
|     } | ||||
| 
 | ||||
|     .ui.menu.new-menu::-webkit-scrollbar { | ||||
|  | @ -1011,19 +1011,6 @@ footer { | |||
|     margin-top: 3em !important; | ||||
| } | ||||
| 
 | ||||
| /* Tab color tweaks */ | ||||
| .ui.tabular.menu .item { | ||||
|     color: rgba(0, 0, 0, .5); | ||||
| } | ||||
| 
 | ||||
| .ui.tabular.menu .item:hover { | ||||
|     color: rgba(0, 0, 0, .8); | ||||
| } | ||||
| 
 | ||||
| .ui.tabular.menu .item.active { | ||||
|     color: rgba(0, 0, 0, .9); | ||||
| } | ||||
| 
 | ||||
| /* multiple radio or checkboxes as inline element */ | ||||
| .inline-grouped-list { | ||||
|     display: inline-block; | ||||
|  | @ -1300,3 +1287,23 @@ i.icon.centerlock { | |||
| .ui.sub.header { | ||||
|     text-transform: none; | ||||
| } | ||||
| 
 | ||||
| .ui.tabular.menu { | ||||
|     .item { | ||||
|         padding: 11px 12px; | ||||
|         color: rgba(0, 0, 0, .5); | ||||
|     } | ||||
| 
 | ||||
|     .item:hover { | ||||
|         color: rgba(0, 0, 0, .8); | ||||
|     } | ||||
| 
 | ||||
|     .item.active { | ||||
|         color: rgba(0, 0, 0, .9); | ||||
|         margin-top: 1px; /* offset fomantic's margin-bottom: -1px */ | ||||
|     } | ||||
| } | ||||
| 
 | ||||
| .ui.secondary.pointing.menu .item { | ||||
|     padding: 12px; | ||||
| } | ||||
|  |  | |||
|  | @ -3037,3 +3037,13 @@ td.blob-excerpt { | |||
| .added-code { | ||||
|     background-color: #99ff99; | ||||
| } | ||||
| 
 | ||||
| .repository .ui.menu.new-menu { | ||||
|     background: none !important; | ||||
| 
 | ||||
|     @media only screen and (max-width: 1200px) { | ||||
|         &:after { | ||||
|             background: none !important; | ||||
|         } | ||||
|     } | ||||
| } | ||||
|  |  | |||
|  | @ -516,13 +516,13 @@ a.ui.basic.green.label:hover { | |||
| } | ||||
| 
 | ||||
| .ui.tabular.menu { | ||||
|     border-bottom-color: rgba(187, 187, 187, .24); | ||||
|     border-bottom-color: rgba(255, 255, 255, .1); | ||||
| 
 | ||||
|     .item.active { | ||||
|         border-top-color: transparent; | ||||
|         border-left-color: transparent; | ||||
|         border-right-color: transparent; | ||||
|         background: #404552; | ||||
|         background: #383c4a; | ||||
|         color: #dbdbdb; | ||||
|     } | ||||
| 
 | ||||
|  | @ -536,10 +536,8 @@ a.ui.basic.green.label:hover { | |||
| 
 | ||||
|     &.navbar { | ||||
|         .item.active { | ||||
|             background: #383c4a; | ||||
|             border-left-color: transparent; | ||||
|             border-right-color: transparent; | ||||
|             border-top: none; | ||||
|         } | ||||
|     } | ||||
| } | ||||
|  | @ -857,10 +855,12 @@ a.ui.basic.green.label:hover { | |||
|     background: #353945; | ||||
| } | ||||
| 
 | ||||
| .ui.secondary.pointing.menu { | ||||
|     border-bottom-color: rgba(255, 255, 255, .15); | ||||
| } | ||||
| 
 | ||||
| .ui.secondary.pointing.menu .active.item { | ||||
|     color: #dbdbdb; | ||||
|     border: 0; | ||||
|     background: #383c4a; | ||||
| } | ||||
| 
 | ||||
| .ui.user.list .item:not(:first-child) { | ||||
|  | @ -868,9 +868,7 @@ a.ui.basic.green.label:hover { | |||
| } | ||||
| 
 | ||||
| .ui.secondary.pointing.menu .active.item:hover { | ||||
|     border-color: #af8b4c; | ||||
|     color: #dbdbdb; | ||||
|     background: #4b5162; | ||||
| } | ||||
| 
 | ||||
| .ui.secondary.pointing.menu .dropdown.item:hover, | ||||
|  | @ -902,11 +900,12 @@ a.ui.basic.green.label:hover { | |||
| } | ||||
| 
 | ||||
| .ui.menu.new-menu { | ||||
|     background-color: #2a2e3a !important; | ||||
|     background: #2a2e3a; | ||||
|     border-color: transparent !important; | ||||
| 
 | ||||
|     @media only screen and (max-width: 1200px) { | ||||
|         &:after { | ||||
|             background-image: linear-gradient(to right, rgba(42, 46, 42, 0), rgba(42, 46, 42, 1) 100%); | ||||
|             background: linear-gradient(to right, transparent 0%, #2a2e3a 100%); | ||||
|         } | ||||
|     } | ||||
| } | ||||
|  | @ -1359,7 +1358,7 @@ a.ui.labels .label:hover { | |||
|             background: #404552; | ||||
|         } | ||||
| 
 | ||||
|         border-color: rgba(187, 187, 187, .24); | ||||
|         border-color: rgba(255, 255, 255, .15); | ||||
|     } | ||||
| 
 | ||||
|     .footer { | ||||
|  |  | |||
		Loading…
	
		Reference in a new issue