Use a CSS var for 10% transparency and drop shadow.

This commit is contained in:
voussoir 2018-09-22 16:01:34 -07:00
parent 2c48b43b71
commit 3db5c77c2c
9 changed files with 15 additions and 13 deletions

View file

@ -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
{

View file

@ -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
{

View file

@ -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>

View file

@ -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);
}

View file

@ -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
{

View file

@ -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
{

View file

@ -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
{

View file

@ -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;
}

View file

@ -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)