From 3fee6589384d491b2f2a05d7f31ada79473424ca Mon Sep 17 00:00:00 2001 From: David Larlet Date: Fri, 23 Feb 2024 14:49:28 -0500 Subject: [PATCH] chore: Use CSS variables --- umap/static/umap/base.css | 12 ++++++------ umap/static/umap/content.css | 8 ++++---- umap/static/umap/map.css | 18 +++++++++--------- umap/static/umap/nav.css | 2 +- umap/static/umap/vars.css | 12 ++++++++---- 5 files changed, 28 insertions(+), 24 deletions(-) diff --git a/umap/static/umap/base.css b/umap/static/umap/base.css index bb86cc79..119ff4ba 100644 --- a/umap/static/umap/base.css +++ b/umap/static/umap/base.css @@ -31,7 +31,7 @@ hr { -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; - border-color: #ddd; + border-color: var(--color-lightGray); border-image: none; border-style: solid; border-width: 1px 0 0; @@ -223,7 +223,7 @@ button.flat, padding: 7px 7px; margin-bottom: 14px; background: #393F3F; - color: #ddd; + color: var(--color-lightGray); font-size: 10px; border-radius: 0 2px; } @@ -264,7 +264,7 @@ input + .error { padding: 7px 7px; margin-top: -14px; margin-bottom: 14px; - background: #ddd; + background: var(--color-lightGray); color: #fff; background-color: #cc0000; font-size: 11px; @@ -685,7 +685,7 @@ input[type=hidden].blur + [type="button"] { position: absolute; bottom: 0; padding: 0 10px; - border-left: 1px solid #ddd; + border-left: 1px solid var(--color-lightGray); overflow-x: auto; z-index: 1010; background-color: #fff; @@ -698,7 +698,7 @@ input[type=hidden].blur + [type="button"] { } #umap-ui-container.dark { border-left: 1px solid #222; - background-color: #323737; + background-color: var(--color-darkGray); color: #efefef; } #umap-ui-container.fullwidth { @@ -913,7 +913,7 @@ input:invalid { color: #eeeeec; padding: 0 7px; line-height: 32px; - background-color: #323737; + background-color: var(--color-darkGray); } .dark .umap-close-link:hover { background-color: #2e3436; diff --git a/umap/static/umap/content.css b/umap/static/umap/content.css index 4c4ff66f..f7b032e3 100644 --- a/umap/static/umap/content.css +++ b/umap/static/umap/content.css @@ -205,8 +205,8 @@ body.content #umap-ui-container { input[type="submit"], .button { - background-color: var(--color-waterMint); - color: var(--color-darkBlue); + background-color: var(--button-primary-background); + color: var(--button-primary-color); } .button-primary { font-weight: bold; @@ -215,8 +215,8 @@ input[type="submit"], background-color: #35537c; } .wrapper .neutral, .wrapper input[type="submit"].neutral { - background-color: var(--color-lightGray); - color: var(--color-darkGray); + background-color: var(--button-neutral-background); + color: var(--button-neutral-color); } .wrapper.somber { background-color: #2E3641; diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css index 86259db7..f6a643a6 100644 --- a/umap/static/umap/map.css +++ b/umap/static/umap/map.css @@ -13,7 +13,7 @@ * Same as leaflet background, to work around screen blincking * between DOM is loaded and JS is read to render the map. */ - background-color: #ddd; + background-color: var(--color-lightGray); } @@ -293,7 +293,7 @@ ul.photon-autocomplete { margin-top: 0; vertical-align: top; border-bottom: none; - background-color: #323737; + background-color: var(--color-darkGray); border-right: 1px solid #eee; background-repeat: no-repeat; background-image: url('./img/24.svg'); @@ -446,7 +446,7 @@ ul.photon-autocomplete { max-width: 100vw; padding: 40px 20px; border: 1px solid #222; - background-color: #323737; + background-color: var(--color-darkGray); color: #efefef; font-size: 0.8em; visibility: hidden; @@ -464,7 +464,7 @@ ul.photon-autocomplete { background-position: -4px -4px; background-repeat: no-repeat; background-image: url('./img/16.svg'); - background-color: #323737 !important; + background-color: var(--color-darkGray) !important; vertical-align: middle; text-indent: -9999px; min-height: inherit; @@ -518,7 +518,7 @@ ul.photon-autocomplete { color: #fff; font-size: 1.2em; border: none; - background-color: #323737; + background-color: var(--color-darkGray); width: auto; margin-bottom: 0; } @@ -625,7 +625,7 @@ ul.photon-autocomplete { left: 0; right: 0; height: 46px; - background-color: #323737; + background-color: var(--color-darkGray); padding: 0 10px; text-align: left; line-height: 36px; @@ -728,7 +728,7 @@ ul.photon-autocomplete { text-align: left; line-height: 46px; cursor: auto; - border-top: 1px solid #ddd; + border-top: 1px solid var(--color-lightGray); opacity: 0.93; z-index: 1000; } @@ -884,10 +884,10 @@ ul.photon-autocomplete { } .leaflet-inplace-toolbar a { background-image: url('./img/16-white.svg'); - background-color: #323737!important; + background-color: var(--color-darkGray)!important; } .leaflet-toolbar-tip { - background-color: #323737; + background-color: var(--color-darkGray); } .leaflet-inplace-toolbar a:hover { background-color: #353c3e!important; diff --git a/umap/static/umap/nav.css b/umap/static/umap/nav.css index 3c754d3f..d052e112 100644 --- a/umap/static/umap/nav.css +++ b/umap/static/umap/nav.css @@ -36,7 +36,7 @@ footer .i18n_switch { flex-direction: column; } .umap-nav a { - color: #263B58; + color: var(--color-darkBlue); padding: .4rem; } .umap-nav a:hover { diff --git a/umap/static/umap/vars.css b/umap/static/umap/vars.css index a4b4e783..c72a52ac 100644 --- a/umap/static/umap/vars.css +++ b/umap/static/umap/vars.css @@ -1,9 +1,13 @@ :root { - /* In use for primary buttons. */ - --color-darkBlue: #263B58; + /* Colors. */ --color-waterMint: #B9F5D2; - - /* In use for secondary buttons. */ + --color-darkBlue: #263B58; --color-lightGray: #ddd; --color-darkGray: #323737; + + /* Buttons. */ + --button-primary-background: var(--color-waterMint); + --button-primary-color: var(--color-darkBlue); + --button-neutral-background: var(--color-lightGray); + --button-neutral-color: var(--color-darkGray); }