forked from MapComplete/MapComplete
		
	Small CSS cleanup
This commit is contained in:
		
							parent
							
								
									4a19be48b2
								
							
						
					
					
						commit
						716f5fc9e0
					
				
					 4 changed files with 44 additions and 10 deletions
				
			
		|  | @ -2420,6 +2420,28 @@ button.small, | ||||||
|   color: var(--low-interaction-foreground); |   color: var(--low-interaction-foreground); | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
|  | .button.theme-button { | ||||||
|  |   margin: 0; | ||||||
|  |   margin-top: 0.25rem; | ||||||
|  |   margin-bottom: 0.25rem; | ||||||
|  |   /* Margin should be removed on larger screens */ | ||||||
|  |   @media (min-width: 768px) { | ||||||
|  |     margin: 0; | ||||||
|  | 
 | ||||||
|  |     margin-top: 0; | ||||||
|  | 
 | ||||||
|  |     margin-bottom: 0; | ||||||
|  |   } | ||||||
|  |   /* Experimental support for foldable devices */ | ||||||
|  |   @media (horizontal-viewport-segments: 2) { | ||||||
|  |     margin: 0; | ||||||
|  | 
 | ||||||
|  |     margin-top: 0; | ||||||
|  | 
 | ||||||
|  |     margin-bottom: 0; | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | 
 | ||||||
| button, | button, | ||||||
| .button { | .button { | ||||||
|   align-items: center; |   align-items: center; | ||||||
|  | @ -2440,10 +2462,6 @@ button, | ||||||
|   color: var(--low-interaction-foreground); |   color: var(--low-interaction-foreground); | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| .theme-button { |  | ||||||
|   margin: 0 !important; |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| .button-shadow { | .button-shadow { | ||||||
|   box-shadow: 0 5px 10px #88888888; |   box-shadow: 0 5px 10px #88888888; | ||||||
| } | } | ||||||
|  |  | ||||||
|  | @ -136,7 +136,7 @@ | ||||||
|     <UnofficialThemeList search={themeSearchText} {state} /> |     <UnofficialThemeList search={themeSearchText} {state} /> | ||||||
| 
 | 
 | ||||||
|     <div slot="not-logged-in"> |     <div slot="not-logged-in"> | ||||||
|       <button class="w-full" on:click={() => osmConnection.AttemptLogin()}> |       <button class="m-0 my-2 w-full" on:click={() => osmConnection.AttemptLogin()}> | ||||||
|         <Login class="mr-2 h-6 w-6 " /> |         <Login class="mr-2 h-6 w-6 " /> | ||||||
|         <Tr t={Translations.t.index.logIn} /> |         <Tr t={Translations.t.index.logIn} /> | ||||||
|       </button> |       </button> | ||||||
|  |  | ||||||
|  | @ -24,7 +24,7 @@ | ||||||
| 
 | 
 | ||||||
| <section class="w-full"> | <section class="w-full"> | ||||||
|   <slot name="title" /> |   <slot name="title" /> | ||||||
|   <div class="theme-list gap-4 md:grid md:grid-flow-row md:grid-cols-2 lg:grid-cols-3"> |   <div class="theme-list my-2 gap-4 md:grid md:grid-flow-row md:grid-cols-2 lg:grid-cols-3"> | ||||||
|     {#each filteredThemes as theme (theme.id)} |     {#each filteredThemes as theme (theme.id)} | ||||||
|       {#if theme !== undefined && !(hideThemes && theme?.hideFromOverview)} |       {#if theme !== undefined && !(hideThemes && theme?.hideFromOverview)} | ||||||
|         <!-- TODO: doesn't work if first theme is hidden --> |         <!-- TODO: doesn't work if first theme is hidden --> | ||||||
|  |  | ||||||
|  | @ -184,6 +184,26 @@ button.small, | ||||||
|   color: var(--low-interaction-foreground); |   color: var(--low-interaction-foreground); | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
|  | .button.theme-button { | ||||||
|  |   margin: 0; | ||||||
|  |   margin-top: 0.25rem; | ||||||
|  |   margin-bottom: 0.25rem; | ||||||
|  | 
 | ||||||
|  |   /* Margin should be removed on larger screens */ | ||||||
|  |   @media (min-width: 768px) { | ||||||
|  |     margin: 0; | ||||||
|  |     margin-top: 0; | ||||||
|  |     margin-bottom: 0; | ||||||
|  |   } | ||||||
|  | 
 | ||||||
|  |   /* Experimental support for foldable devices */ | ||||||
|  |   @media (horizontal-viewport-segments: 2) { | ||||||
|  |     margin: 0; | ||||||
|  |     margin-top: 0; | ||||||
|  |     margin-bottom: 0; | ||||||
|  |   } | ||||||
|  | } | ||||||
|  | 
 | ||||||
| button, | button, | ||||||
| .button { | .button { | ||||||
|   align-items: center; |   align-items: center; | ||||||
|  | @ -204,10 +224,6 @@ button, | ||||||
|   color: var(--low-interaction-foreground); |   color: var(--low-interaction-foreground); | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
| .theme-button { |  | ||||||
|   margin: 0 !important; |  | ||||||
| } |  | ||||||
| 
 |  | ||||||
| .button-shadow { | .button-shadow { | ||||||
|   box-shadow: 0 5px 10px #88888888; |   box-shadow: 0 5px 10px #88888888; | ||||||
| } | } | ||||||
|  |  | ||||||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue