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