voussoir/etiquette
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

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

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontends/etiquette_flask/static/css/common.css
View file

@ -14,6 +14,8 @@ Organization:
{ {
--color_site_theme: #00d8f4; --color_site_theme: #00d8f4;
--color_site_secondary: #ffffd4; --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_shadow: rgba(0, 0, 0, 0.5);
--color_3d_highlight: rgba(255, 255, 255, 0.5); --color_3d_highlight: rgba(255, 255, 255, 0.5);
} }
@ -49,7 +51,7 @@ pre
flex: 1; flex: 1;
justify-content: center; justify-content: center;
background-color: rgba(0, 0, 0, 0.1); background-color: var(--color_site_transparency);
} }
.header_element:hover .header_element:hover
{ {
@ -153,7 +155,7 @@ is hovered over.
overflow-y: auto; overflow-y: auto;
background-color: rgba(0, 0, 0, 0.1); background-color: var(--color_site_transparency);
} }
.message_bubble .message_bubble
{ {

4
frontends/etiquette_flask/static/css/photo_card.css
View file

@ -16,7 +16,7 @@
} }
.photo_card_list:hover .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 .photo_card_list .photo_card_selector_checkbox
{ {
@ -40,7 +40,7 @@
margin: 8px; margin: 8px;
border-radius: 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 .photo_card_grid .photo_card_selector_checkbox
{ {

2
frontends/etiquette_flask/templates/album.html
View file

@ -34,7 +34,7 @@ p
{ {
font-family: initial; font-family: initial;
padding: 8px; padding: 8px;
background-color: rgba(0, 0, 0, 0.1); background-color: var(--color_site_transparency);
} }
</style> </style>
</head> </head>

2
frontends/etiquette_flask/templates/bookmarks.html
View file

@ -30,7 +30,7 @@
max-width: 500px; max-width: 500px;
border-radius: 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);
background-color: var(--color_site_secondary); background-color: var(--color_site_secondary);
} }

2
frontends/etiquette_flask/templates/clipboard.html
View file

@ -52,7 +52,7 @@ body
"download_zip_area" "download_zip_area"
"message_area"; "message_area";
background-color: rgba(0, 0, 0, 0.1); background-color: var(--color_site_transparency);
} }
#add_tag_area #add_tag_area
{ {

4
frontends/etiquette_flask/templates/photo.html
View file

@ -43,7 +43,7 @@
flex: 3; flex: 3;
padding: 8px; padding: 8px;
background-color: rgba(0, 0, 0, 0.1); background-color: var(--color_site_transparency);
word-wrap: break-word; word-wrap: break-word;
} }
@ -56,7 +56,7 @@
min-height: 30px; min-height: 30px;
padding: 8px; padding: 8px;
background-color: rgba(0, 0, 0, 0.1); background-color: var(--color_site_transparency);
} }
#message_area #message_area
{ {

2
frontends/etiquette_flask/templates/root.html
View file

@ -27,7 +27,7 @@ body, .nice_link
{ {
width: 50%; width: 50%;
height: 40px; height: 40px;
background-color: rgba(0, 0, 0, 0.1); background-color: var(--color_site_transparency);
} }
.nice_link:hover .nice_link:hover
{ {

2
frontends/etiquette_flask/templates/search.html
View file

@ -51,7 +51,7 @@ form
min-width: 300px; min-width: 300px;
width: 300px; width: 300px;
background-color: rgba(0, 0, 0, 0.1); background-color: var(--color_site_transparency);
word-wrap: break-word; word-wrap: break-word;
} }

4
frontends/etiquette_flask/templates/tags.html
View file

@ -52,7 +52,7 @@ body
"editor_area" "editor_area"
"message_area"; "message_area";
background-color: rgba(0, 0, 0, 0.1); background-color: var(--color_site_transparency);
} }
#editor_area #editor_area
{ {
@ -68,7 +68,7 @@ body
{ {
margin-right: 8px; margin-right: 8px;
padding: 8px; padding: 8px;
background-color: rgba(0, 0, 0, 0.1); background-color: var(--color_site_transparency);
font-family: initial; font-family: initial;
} }
@media screen and (max-width: 800px) @media screen and (max-width: 800px)