From 3db5c77c2c994a9855cc2bda85d93bbba0de6b3c Mon Sep 17 00:00:00 2001 From: Ethan Dalool Date: Sat, 22 Sep 2018 16:01:34 -0700 Subject: [PATCH] Use a CSS var for 10% transparency and drop shadow. --- frontends/etiquette_flask/static/css/common.css | 6 ++++-- frontends/etiquette_flask/static/css/photo_card.css | 4 ++-- frontends/etiquette_flask/templates/album.html | 2 +- frontends/etiquette_flask/templates/bookmarks.html | 2 +- frontends/etiquette_flask/templates/clipboard.html | 2 +- frontends/etiquette_flask/templates/photo.html | 4 ++-- frontends/etiquette_flask/templates/root.html | 2 +- frontends/etiquette_flask/templates/search.html | 2 +- frontends/etiquette_flask/templates/tags.html | 4 ++-- 9 files changed, 15 insertions(+), 13 deletions(-) diff --git a/frontends/etiquette_flask/static/css/common.css b/frontends/etiquette_flask/static/css/common.css index 4068a13..a626891 100644 --- a/frontends/etiquette_flask/static/css/common.css +++ b/frontends/etiquette_flask/static/css/common.css @@ -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 { diff --git a/frontends/etiquette_flask/static/css/photo_card.css b/frontends/etiquette_flask/static/css/photo_card.css index 838236e..95b52d6 100644 --- a/frontends/etiquette_flask/static/css/photo_card.css +++ b/frontends/etiquette_flask/static/css/photo_card.css @@ -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 { diff --git a/frontends/etiquette_flask/templates/album.html b/frontends/etiquette_flask/templates/album.html index a301122..4c7a6bd 100644 --- a/frontends/etiquette_flask/templates/album.html +++ b/frontends/etiquette_flask/templates/album.html @@ -34,7 +34,7 @@ p { font-family: initial; padding: 8px; - background-color: rgba(0, 0, 0, 0.1); + background-color: var(--color_site_transparency); } diff --git a/frontends/etiquette_flask/templates/bookmarks.html b/frontends/etiquette_flask/templates/bookmarks.html index a3526a8..e8f2615 100644 --- a/frontends/etiquette_flask/templates/bookmarks.html +++ b/frontends/etiquette_flask/templates/bookmarks.html @@ -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); } diff --git a/frontends/etiquette_flask/templates/clipboard.html b/frontends/etiquette_flask/templates/clipboard.html index 1c7a319..d17f2a2 100644 --- a/frontends/etiquette_flask/templates/clipboard.html +++ b/frontends/etiquette_flask/templates/clipboard.html @@ -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 { diff --git a/frontends/etiquette_flask/templates/photo.html b/frontends/etiquette_flask/templates/photo.html index 23acb73..86d73af 100644 --- a/frontends/etiquette_flask/templates/photo.html +++ b/frontends/etiquette_flask/templates/photo.html @@ -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 { diff --git a/frontends/etiquette_flask/templates/root.html b/frontends/etiquette_flask/templates/root.html index 815c9bb..d18e6e6 100644 --- a/frontends/etiquette_flask/templates/root.html +++ b/frontends/etiquette_flask/templates/root.html @@ -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 { diff --git a/frontends/etiquette_flask/templates/search.html b/frontends/etiquette_flask/templates/search.html index 425acd6..86e767d 100644 --- a/frontends/etiquette_flask/templates/search.html +++ b/frontends/etiquette_flask/templates/search.html @@ -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; } diff --git a/frontends/etiquette_flask/templates/tags.html b/frontends/etiquette_flask/templates/tags.html index 7d7b8c4..e9c6966 100644 --- a/frontends/etiquette_flask/templates/tags.html +++ b/frontends/etiquette_flask/templates/tags.html @@ -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)