From 439b3f81a9a1e0527b81319a9026dcbab456a495 Mon Sep 17 00:00:00 2001 From: Carl Worth Date: Sun, 17 May 2020 08:43:19 -0700 Subject: [PATCH] Use CSS custom properties to define named colors Hurrah! I've only wanted this feature for decades. Thanks to Richard for pointing out that it's now been well-supported long enough that I can reliably use it. This will really help so that I can change colors in one place and have the entire style follow the scheme. --- style.css | 49 +++++++++++++++++++++++++++++++++++++------------ 1 file changed, 37 insertions(+), 12 deletions(-) diff --git a/style.css b/style.css index 2121937..a3219e2 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,28 @@ +/*\ +|*| +|*| Properties for the page: colors, etc. +|*| +|*| This is intended to be the easiest section to edit +|*| some easy custom theming, (a custom color scheme, etc.). +|*| +\*/ + +:root { + /* Standard colors for text. */ + --text-fg-color: #333738; + --text-bg-color: white; + --outside-page-bg-color: #333738; + + /* A little color to avoid a fully monochromatic theme. */ + --accent-color: #287789; + --accent-color-bright: #44c7ef; + + /* Some colors intended to convey semnatics. */ + --warning-color: #ffa92a; + --danger-color: #f56257; + --danger-color-dark: #bc2822; +} + /*\ |*| |*| Core elements: Sizing and padding @@ -31,11 +56,11 @@ h2 { * entire screen width for the page (so the background color of the * body is not visible anywhere). */ body { - background-color: #333738; + background-color: var(--outside-page-bg-color); } #page { - background-color: white; + background-color: var(--text-bg-color); } /* For a small screen (in either width or height) change the @@ -44,7 +69,7 @@ body { */ @media screen and (max-width: 500px) and (max-height: 860px) { body { - background-color: white; + background-color: var(--text-bg-color); } } @@ -180,18 +205,18 @@ input { font-size: 125%; padding: 0.5em; width: 100%; - border: 1px solid #287789; + border: 1px solid var(--accent-color); border-radius: 4px; } input:focus { - border: 2px solid #44c7ef; + border: 2px solid var(--accent-color-bright); } button { display: inline-block; border-radius: 4px; - background-color: #287789; + background-color: var(--accent-color); border: none; color: white; text-align: center; @@ -204,7 +229,7 @@ button { button:hover { transform: translateY(-1px); - background-color: #44c7ef; + background-color: var(--accent-color-bright); } :focus { @@ -224,7 +249,7 @@ button:hover { /* Default message severity is "info" but can be overriden. */ .message { padding: 1em; - background-color: #44c7ef; + background-color: var(--accent-color-bright); color: white; transition: 0.3s; margin-bottom: 0.5em; @@ -234,15 +259,15 @@ button:hover { } .success { - background-color: #44c7ef; + background-color: var(--accent-color-bright); } .warning { - background-color: #ffa92a; + background-color: var(--warning-color); } .danger { - background-color: #f56257 + background-color: var(--danger-color); } .hide-button { @@ -256,5 +281,5 @@ button:hover { } .hide-button:hover { - color: #bc2822; + color: var(--danger-color-dark); } -- 2.43.0