From d8f289b83af7bf0f5575ac91ca55e0fe643ef4f1 Mon Sep 17 00:00:00 2001 From: Anthony Di Iorio Date: Wed, 23 Dec 2020 02:22:27 -0500 Subject: [PATCH 1/3] Dark theme overrides Adjusted overrides to complete the dark themes. Now much easier on the eyes with dark inputs, navigation, and maps when loading. --- assets/css/cyborg/overrides.css | 47 ++++++++++++++++++++++++++++++ assets/css/darkly/overrides.css | 45 ++++++++++++++++++++++++++++ assets/css/superhero/overrides.css | 45 ++++++++++++++++++++++++++++ 3 files changed, 137 insertions(+) diff --git a/assets/css/cyborg/overrides.css b/assets/css/cyborg/overrides.css index 58c9875c..9038a22c 100644 --- a/assets/css/cyborg/overrides.css +++ b/assets/css/cyborg/overrides.css @@ -2,6 +2,10 @@ * No overrides for the default theme as it aligns with general.css */ +/* +* Dark Maps +*/ + .leaflet-tile { filter: invert() hue-rotate(180deg) grayscale(0.8) !important; } @@ -24,3 +28,46 @@ path.grid-worked { fill: rgba(220, 50, 50, 0.25) !important; stroke: rgba(220, 50, 50, 0.25) !important; } + +#map, +#qsomap{ + background-color: #000; +} + + +/* +* Dark Navigation +*/ + +/* Navigation background */ +.navbar.bg-light { + background-color: #000 !important; +} + +/* Inactive Links */ +.navbar-light .navbar-nav .nav-link { + color: rgba(255,255,255,.6); +} + +/* Active Links and Logo */ +.navbar-light .navbar-brand, +.navbar-light .navbar-brand:focus, +.navbar-light .navbar-brand:hover, +.navbar-light .navbar-nav .active>.nav-link, +.navbar-light .navbar-nav .nav-link:focus, +.navbar-light .navbar-nav .nav-link:hover { + color: #fff; +} + +/* +* Dark inputs +*/ + +.form-control, +.form-control:focus, +.form-control:disabled, +.custom-select { + background-color: #151515; + color: #eeeeee; + border: 1px solid #333; +} \ No newline at end of file diff --git a/assets/css/darkly/overrides.css b/assets/css/darkly/overrides.css index 08446ba2..e06eb887 100644 --- a/assets/css/darkly/overrides.css +++ b/assets/css/darkly/overrides.css @@ -2,6 +2,10 @@ * No overrides for the default theme as it aligns with general.css */ +/* +* Dark Maps +*/ + .leaflet-tile { filter: invert() hue-rotate(180deg) grayscale(0.8) brightness(1.2) !important; } @@ -24,3 +28,44 @@ path.grid-worked { fill: rgba(220, 50, 50, 0.25) !important; stroke: rgba(220, 50, 50, 0.25) !important; } + +#map, +#qsomap{ + background-color: #222; +} + +/* +* Dark Navigation +*/ + +/* Navigation background */ +.bg-light { + background-color: #303030!important; +} + +/* Inactive Links */ +.navbar-light .navbar-nav .nav-link { + color: rgba(255,255,255,.6); +} + +/* Active Links and Logo */ +.navbar-light .navbar-brand, +.navbar-light .navbar-brand:focus, +.navbar-light .navbar-brand:hover, +.navbar-light .navbar-nav .active>.nav-link, +.navbar-light .navbar-nav .nav-link:focus, +.navbar-light .navbar-nav .nav-link:hover { + color: #fff; +} + +/* +* Dark inputs +*/ + +.form-control, +.form-control:focus, +.form-control:disabled, +.custom-select { + background-color: rgba(20,20,20,.5); + color: #eee; +} diff --git a/assets/css/superhero/overrides.css b/assets/css/superhero/overrides.css index fb252342..36b8b8bc 100644 --- a/assets/css/superhero/overrides.css +++ b/assets/css/superhero/overrides.css @@ -2,6 +2,10 @@ * No overrides for the default theme as it aligns with general.css */ +/* +* Maps +*/ + .leaflet-tile { filter: brightness(0.7) grayscale(0.6) !important; } @@ -24,3 +28,44 @@ path.grid-worked { stroke: rgba(220, 50, 50, 0.4) !important; } +#map, +#qsomap{ + background-color: #2E3E50; +} + +/* +* Dark Navigation +*/ + +/* Navigation background */ +.bg-light { + background-color: #4e5d6c !important; +} + +/* Inactive Links */ +.navbar-light .navbar-nav .nav-link { + color: rgba(255,255,255,.6); +} + +/* Active Links and Logo */ +.navbar-light .navbar-brand, +.navbar-light .navbar-brand:focus, +.navbar-light .navbar-brand:hover, +.navbar-light .navbar-nav .active>.nav-link, +.navbar-light .navbar-nav .nav-link:focus, +.navbar-light .navbar-nav .nav-link:hover { + color: #fff; +} + + +/* +* Dark inputs +*/ + +.form-control, +.form-control:focus, +.form-control:disabled, +.custom-select { + background-color: rgba(20,20,20,.25); + color: #fff; +} \ No newline at end of file From 8df6587cda7091d3afef78c94b80cd447aa92d65 Mon Sep 17 00:00:00 2001 From: Anthony Di Iorio Date: Wed, 23 Dec 2020 02:31:53 -0500 Subject: [PATCH 2/3] Superhero blue inputs --- assets/css/superhero/overrides.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/css/superhero/overrides.css b/assets/css/superhero/overrides.css index 36b8b8bc..169a89ac 100644 --- a/assets/css/superhero/overrides.css +++ b/assets/css/superhero/overrides.css @@ -66,6 +66,6 @@ path.grid-worked { .form-control:focus, .form-control:disabled, .custom-select { - background-color: rgba(20,20,20,.25); + background-color: rgba(20, 41, 62, 0.6); color: #fff; } \ No newline at end of file From 98f50948eef1a4cdef7a6485aff6d5c163270f44 Mon Sep 17 00:00:00 2001 From: Anthony Di Iorio Date: Wed, 23 Dec 2020 04:36:22 -0500 Subject: [PATCH 3/3] Fix dark hamburger menu --- assets/css/cyborg/overrides.css | 5 +++++ assets/css/darkly/overrides.css | 5 +++++ assets/css/superhero/overrides.css | 4 ++++ 3 files changed, 14 insertions(+) diff --git a/assets/css/cyborg/overrides.css b/assets/css/cyborg/overrides.css index 9038a22c..37e4ce2c 100644 --- a/assets/css/cyborg/overrides.css +++ b/assets/css/cyborg/overrides.css @@ -59,6 +59,11 @@ path.grid-worked { color: #fff; } +/* Hamburger Menu */ +.navbar-light .navbar-toggler-icon { + background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.6%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") +} + /* * Dark inputs */ diff --git a/assets/css/darkly/overrides.css b/assets/css/darkly/overrides.css index e06eb887..d14689b3 100644 --- a/assets/css/darkly/overrides.css +++ b/assets/css/darkly/overrides.css @@ -58,6 +58,11 @@ path.grid-worked { color: #fff; } +/* Hamburger Menu */ +.navbar-light .navbar-toggler-icon { + background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.6%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") +} + /* * Dark inputs */ diff --git a/assets/css/superhero/overrides.css b/assets/css/superhero/overrides.css index 169a89ac..fc379c8a 100644 --- a/assets/css/superhero/overrides.css +++ b/assets/css/superhero/overrides.css @@ -57,6 +57,10 @@ path.grid-worked { color: #fff; } +/* Hamburger Menu */ +.navbar-light .navbar-toggler-icon { + background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.6%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") +} /* * Dark inputs