forked from mirrors/gecko-dev
		
	
		
			
				
	
	
		
			99 lines
		
	
	
	
		
			1.6 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
			
		
		
	
	
			99 lines
		
	
	
	
		
			1.6 KiB
		
	
	
	
		
			CSS
		
	
	
	
	
	
| /* This Source Code Form is subject to the terms of the Mozilla Public
 | |
|  * License, v. 2.0. If a copy of the MPL was not distributed with this
 | |
|  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 | |
| 
 | |
| [slot="main"] {
 | |
|   display: flex;
 | |
|   gap: 40px;
 | |
|   align-items: center;
 | |
|   padding: 36px;
 | |
| }
 | |
| 
 | |
| [slot="main"].selectedTab {
 | |
|   flex-direction: column;
 | |
|   text-align: center;
 | |
|   gap: 22px;
 | |
|   height: 264px;
 | |
| }
 | |
| 
 | |
| [slot="main"].selectedTab .header {
 | |
|   justify-content: center;
 | |
| }
 | |
| 
 | |
| [slot="main"].imageHidden .image-container {
 | |
|   display: none;
 | |
| }
 | |
| 
 | |
| [slot="main"].imageHidden .main {
 | |
|   display: flex;
 | |
|   flex: 1;
 | |
|   justify-content: center;
 | |
| }
 | |
| 
 | |
| .image-container {
 | |
|   min-width: 150px;
 | |
|   text-align: center;
 | |
| }
 | |
| 
 | |
| .image {
 | |
|   -moz-context-properties: fill, stroke, fill-opacity;
 | |
|   fill: var(--fxview-background-color-secondary);
 | |
|   stroke: var(--fxview-text-primary-color);
 | |
| }
 | |
| 
 | |
| .header {
 | |
|   margin-block: 0;
 | |
|   font-size: 1.46rem;
 | |
|   font-weight: 300;
 | |
|   align-items: center;
 | |
|   gap: 8px;
 | |
| 
 | |
|   :host(.search-results) & {
 | |
|     font-size: unset;
 | |
| 
 | |
|     & span {
 | |
|       overflow-wrap: anywhere;
 | |
|     }
 | |
|   }
 | |
| 
 | |
|   &:not([hidden]) {
 | |
|     display: flex;
 | |
|   }
 | |
| }
 | |
| 
 | |
| .icon {
 | |
|   background-position: center center;
 | |
|   background-repeat: no-repeat;
 | |
|   width: 20px;
 | |
|   height: 20px;
 | |
| 
 | |
|   &:not([hidden]) {
 | |
|     display: inline-block;
 | |
|   }
 | |
| }
 | |
| 
 | |
| 
 | |
| .info {
 | |
|   -moz-context-properties: fill;
 | |
|   fill: var(--in-content-primary-button-background);
 | |
| }
 | |
| 
 | |
| .description {
 | |
|   color: var(--text-color-deemphasized);
 | |
|   margin-block: 4px 15px;
 | |
| }
 | |
| 
 | |
| .description.secondary {
 | |
|   margin-block-start: 16px;
 | |
| }
 | |
| 
 | |
| .main a {
 | |
|   color: var(--fxview-primary-action-background);
 | |
| }
 | |
| 
 | |
| img.greyscale {
 | |
|   filter: grayscale(100%);
 | |
|   @media not (prefers-contrast) {
 | |
|     opacity: 0.5;
 | |
|   }
 | |
| }
 | 
