Use a CSS var for 10% transparency and drop shadow.
This commit is contained in:
		
							parent
							
								
									2c48b43b71
								
							
						
					
					
						commit
						3db5c77c2c
					
				
					 9 changed files with 15 additions and 13 deletions
				
			
		|  | @ -14,6 +14,8 @@ Organization: | |||
| { | ||||
|     --color_site_theme: #00d8f4; | ||||
|     --color_site_secondary: #ffffd4; | ||||
|     --color_site_transparency: rgba(0, 0, 0, 0.1); | ||||
|     --color_site_dropshadow: rgba(0, 0, 0, 0.25); | ||||
|     --color_3d_shadow: rgba(0, 0, 0, 0.5); | ||||
|     --color_3d_highlight: rgba(255, 255, 255, 0.5); | ||||
| } | ||||
|  | @ -49,7 +51,7 @@ pre | |||
|     flex: 1; | ||||
|     justify-content: center; | ||||
| 
 | ||||
|     background-color: rgba(0, 0, 0, 0.1);    | ||||
|     background-color: var(--color_site_transparency); | ||||
| } | ||||
| .header_element:hover | ||||
| { | ||||
|  | @ -153,7 +155,7 @@ is hovered over. | |||
| 
 | ||||
|     overflow-y: auto; | ||||
| 
 | ||||
|     background-color: rgba(0, 0, 0, 0.1); | ||||
|     background-color: var(--color_site_transparency); | ||||
| } | ||||
| .message_bubble | ||||
| { | ||||
|  |  | |||
|  | @ -16,7 +16,7 @@ | |||
| } | ||||
| .photo_card_list:hover | ||||
| { | ||||
|     box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25); | ||||
|     box-shadow: 2px 2px 5px 0px var(--color_site_dropshadow); | ||||
| } | ||||
| .photo_card_list .photo_card_selector_checkbox | ||||
| { | ||||
|  | @ -40,7 +40,7 @@ | |||
|     margin: 8px; | ||||
| 
 | ||||
|     border-radius: 8px; | ||||
|     box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25); | ||||
|     box-shadow: 2px 2px 5px 0px var(--color_site_dropshadow); | ||||
| } | ||||
| .photo_card_grid .photo_card_selector_checkbox | ||||
| { | ||||
|  |  | |||
|  | @ -34,7 +34,7 @@ p | |||
| { | ||||
|     font-family: initial; | ||||
|     padding: 8px; | ||||
|     background-color: rgba(0, 0, 0, 0.1); | ||||
|     background-color: var(--color_site_transparency); | ||||
| } | ||||
| </style> | ||||
| </head> | ||||
|  |  | |||
|  | @ -30,7 +30,7 @@ | |||
|     max-width: 500px; | ||||
| 
 | ||||
|     border-radius: 8px; | ||||
|     box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.25); | ||||
|     box-shadow: 2px 2px 5px 0px var(--color_site_dropshadow); | ||||
| 
 | ||||
|     background-color: var(--color_site_secondary); | ||||
| } | ||||
|  |  | |||
|  | @ -52,7 +52,7 @@ body | |||
|         "download_zip_area" | ||||
|         "message_area"; | ||||
| 
 | ||||
|     background-color: rgba(0, 0, 0, 0.1); | ||||
|     background-color: var(--color_site_transparency); | ||||
| } | ||||
| #add_tag_area | ||||
| { | ||||
|  |  | |||
|  | @ -43,7 +43,7 @@ | |||
|     flex: 3; | ||||
|     padding: 8px; | ||||
| 
 | ||||
|     background-color: rgba(0, 0, 0, 0.1); | ||||
|     background-color: var(--color_site_transparency); | ||||
| 
 | ||||
|     word-wrap: break-word; | ||||
| } | ||||
|  | @ -56,7 +56,7 @@ | |||
|     min-height: 30px; | ||||
|     padding: 8px; | ||||
| 
 | ||||
|     background-color: rgba(0, 0, 0, 0.1); | ||||
|     background-color: var(--color_site_transparency); | ||||
| } | ||||
| #message_area | ||||
| { | ||||
|  |  | |||
|  | @ -27,7 +27,7 @@ body, .nice_link | |||
| { | ||||
|     width: 50%; | ||||
|     height: 40px; | ||||
|     background-color: rgba(0, 0, 0, 0.1); | ||||
|     background-color: var(--color_site_transparency); | ||||
| } | ||||
| .nice_link:hover | ||||
| { | ||||
|  |  | |||
|  | @ -51,7 +51,7 @@ form | |||
|     min-width: 300px; | ||||
|     width: 300px; | ||||
| 
 | ||||
|     background-color: rgba(0, 0, 0, 0.1); | ||||
|     background-color: var(--color_site_transparency); | ||||
| 
 | ||||
|     word-wrap: break-word; | ||||
| } | ||||
|  |  | |||
|  | @ -52,7 +52,7 @@ body | |||
|         "editor_area" | ||||
|         "message_area"; | ||||
| 
 | ||||
|     background-color: rgba(0, 0, 0, 0.1); | ||||
|     background-color: var(--color_site_transparency); | ||||
| } | ||||
| #editor_area | ||||
| { | ||||
|  | @ -68,7 +68,7 @@ body | |||
| { | ||||
|     margin-right: 8px; | ||||
|     padding: 8px; | ||||
|     background-color: rgba(0, 0, 0, 0.1); | ||||
|     background-color: var(--color_site_transparency); | ||||
|     font-family: initial; | ||||
| } | ||||
| @media screen and (max-width: 800px) | ||||
|  |  | |||
		Loading…
	
		Reference in a new issue