From c7d0d664e7631e08184cebf5ebb5ae786b47eec5 Mon Sep 17 00:00:00 2001 From: autinerd <27780930+autinerd@users.noreply.github.com> Date: Sun, 8 Dec 2024 10:43:26 +0100 Subject: [PATCH] Adjust shadow colors --- app.css | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/app.css b/app.css index 2c28310..f31bb02 100644 --- a/app.css +++ b/app.css @@ -4,13 +4,15 @@ --background-color: white; --text-color: #333; + --shadow-color: #ccc; --table-alternate-color: #f9f9f9; --background-color-attribution: rgba(255, 255, 255, 0.8); } @media (prefers-color-scheme: dark) { * { - --background-color: #333333; + --background-color: #333; + --shadow-color: #222; --text-color: #cccccc; --table-alternate-color: #444; --background-color-attribution: rgba(51, 51, 51, 0.8); @@ -158,7 +160,7 @@ h1, h2, h3, h4, h5, h6 { } #wizard .pane-wrapper { - box-shadow: 0 0.15em 0.5em #ccc; + box-shadow: 0 0.15em 0.5em var(--shadow-color); margin: 1em 0 3em 0; } @@ -191,6 +193,7 @@ h1, h2, h3, h4, h5, h6 { #wizard #type-pane .radiogroup label { background-color: #ffb400; + color: #333333; } #wizard #type-pane .radiogroup input[type="radio"]:checked + label { @@ -215,11 +218,11 @@ h1, h2, h3, h4, h5, h6 { } #wizard #branch-pane.show-experimental-warning button.dl-experimental { - box-shadow: 0 0 0.5em #005ea0 inset; + box-shadow: 0 0 0.5em var(--shadow-color) inset; } #wizard #type-pane.show-deviceinfo-warning button.deviceinfo { - box-shadow: 0 0 0.5em #005ea0 inset; + box-shadow: 0 0 0.5em var(--shadow-color) inset; } #wizard #branch-pane .warning-experimental, @@ -228,7 +231,7 @@ h1, h2, h3, h4, h5, h6 { display: none; margin: 1em 0; padding: 1em; - box-shadow: 0.125em 0.125em 0.5em #ccc; + box-shadow: 0.125em 0.125em 0.5em var(--shadow-color); border: .5em solid #009ee0; } @@ -249,7 +252,7 @@ h1, h2, h3, h4, h5, h6 { background: var(--background-color); border: none; border: 1px solid #ddd; - box-shadow: 1px 2px 2px 0 #ccc; + box-shadow: 1px 2px 2px 0 var(--shadow-color); padding: 0.75em 0.75em; margin-right: 0.5em; margin-bottom: 1em; @@ -257,7 +260,7 @@ h1, h2, h3, h4, h5, h6 { } #wizard select:focus, #wizard input:focus { - box-shadow: 1px 2px 2px 0 #ccc, 2px 2px 6px #ccc; + box-shadow: 1px 2px 2px 0 var(--shadow-color), 2px 2px 6px var(--shadow-color); } #wizard option { @@ -282,7 +285,7 @@ h1, h2, h3, h4, h5, h6 { margin: .5em; padding: .5em 1em; border: none; - box-shadow: 0.125em 0.125em 0.5em #ccc; + box-shadow: 0.125em 0.125em 0.5em var(--shadow-color); font-weight: normal; cursor: pointer; } @@ -330,14 +333,14 @@ h1, h2, h3, h4, h5, h6 { } #wizard .imagePreview .preview:hover { - border: 1px solid #ccc; + border: 1px solid var(--shadow-color); cursor: pointer; } #wizard .imagePreview .preview.selected { - border: 1px solid #ccc; + border: 1px solid var(--shadow-color); cursor: default; - box-shadow: 0 0 0.5em #ccc inset; + box-shadow: 0 0 0.5em var(--shadow-color) inset; } #wizard .imagePreview .preview img { -- GitLab