* Refactoring scss introduce scss variables for the media modal fix css block structure corresponding to react components fix flex layouts remove background image of the loaded image on the media modal * Fix typo
		
			
				
	
	
		
			38 lines
		
	
	
		
			1.5 KiB
		
	
	
	
		
			SCSS
		
	
	
	
	
	
			
		
		
	
	
			38 lines
		
	
	
		
			1.5 KiB
		
	
	
	
		
			SCSS
		
	
	
	
	
	
| // Commonly used web colors
 | |
| $black: #000000;            // Black
 | |
| $white: #ffffff;            // White
 | |
| $success-green: #79bd9a;    // Padua
 | |
| $error-red: #df405a;        // Cerise
 | |
| $warning-red: #ff5050;      // Sunset Orange
 | |
| $gold-star: #ca8f04;        // Dark Goldenrod
 | |
| 
 | |
| // Values from the classic Mastodon UI
 | |
| $classic-base-color: #282c37;         // Midnight Express
 | |
| $classic-primary-color: #9baec8;      // Echo Blue
 | |
| $classic-secondary-color: #d9e1e8;    // Pattens Blue
 | |
| $classic-highlight-color: #2b90d9;    // Summer Sky
 | |
| 
 | |
| // Variables for defaults in UI
 | |
| $base-shadow-color: $black !default;
 | |
| $base-overlay-background: $black !default;
 | |
| $base-border-color: $white !default;
 | |
| $simple-background-color: $white !default;
 | |
| $primary-text-color: $white !default;
 | |
| $valid-value-color: $success-green !default;
 | |
| $error-value-color: $error-red !default;
 | |
| 
 | |
| // Tell UI to use selected colors
 | |
| $ui-base-color: $classic-base-color !default;                  // Darkest
 | |
| $ui-base-lighter-color: lighten($ui-base-color, 26%) !default; // Lighter darkest
 | |
| $ui-primary-color: $classic-primary-color !default;            // Lighter
 | |
| $ui-secondary-color: $classic-secondary-color !default;        // Lightest
 | |
| $ui-highlight-color: $classic-highlight-color !default;        // Vibrant
 | |
| 
 | |
| // Language codes that uses CJK fonts
 | |
| $cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
 | |
| 
 | |
| // Variables for components
 | |
| $media-modal-media-max-width: 100%;
 | |
| // put margins on top and bottom of image to avoid the screen covered by image.
 | |
| $media-modal-media-max-height: 80%;
 |