diff --git a/umap/static/umap/base.css b/umap/static/umap/base.css
index 803c5068..7d55145e 100644
--- a/umap/static/umap/base.css
+++ b/umap/static/umap/base.css
@@ -3,9 +3,7 @@
*/
body, div, ul, ol, li, a, section, nav,
h1, h2, h3, h4, h5, h6, label,
-hr, input, textarea {
- -moz-box-sizing:border-box;
- -webkit-box-sizing:border-box;
+hr, input, textarea, select {
box-sizing: border-box;
margin: 0;
padding: 0;
diff --git a/umap/static/umap/content.css b/umap/static/umap/content.css
index 820b54c3..46867df2 100644
--- a/umap/static/umap/content.css
+++ b/umap/static/umap/content.css
@@ -19,7 +19,6 @@ input:-moz-placeholder, :-moz-placeholder {
.search-form {
display: flex;
align-items: baseline;
- gap: calc(var(--gutter) / 2);
max-width: 800px;
margin: 0 auto;
}
@@ -213,7 +212,6 @@ h2.tabs a:hover {
/* colors */
/* **************************** */
-input[type="submit"],
.button {
background-color: var(--button-primary-background);
color: var(--button-primary-color);
@@ -405,22 +403,9 @@ html[dir="rtl"] .content .icon-delete {
align-items: center;
}
}
-.table-header form input {
- border: 2px solid var(--color-darkBlue);
- border-radius: 0;
- padding: .5rem 1rem;
- margin-bottom: 0;
- line-height: inherit;
- height: 40px;
-}
.table-header form input[type="search"] {
width: 30ch;
}
-.table-header form input[type="submit"] {
- background-color: var(--color-darkBlue);
- color: white;
- font-weight: bold;
-}
.table-header .button-download {
width: inherit;
diff --git a/umap/static/umap/css/bar.css b/umap/static/umap/css/bar.css
index fe0410b6..f6bc7df0 100644
--- a/umap/static/umap/css/bar.css
+++ b/umap/static/umap/css/bar.css
@@ -4,6 +4,7 @@
background-color: var(--color-darkGray);
width: auto;
margin-bottom: 0;
+ min-height: initial;
}
.umap-main-edit-toolbox [type=button]:hover {
text-decoration: underline;
diff --git a/umap/static/umap/css/form.css b/umap/static/umap/css/form.css
index b68441e5..6e36e37b 100644
--- a/umap/static/umap/css/form.css
+++ b/umap/static/umap/css/form.css
@@ -7,16 +7,15 @@ input[type="datetime-local"], input[type="email"], input[type="number"],
input[type="search"], input[type="tel"], input[type="time"], input[type="file"],
input[type="url"], textarea {
background-color: white;
- border: 1px solid #CCCCCC;
- border-radius: 2px 2px 2px 2px;
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
- color: rgba(0, 0, 0, 0.75);
+ border: 2px solid var(--color-darkBlue);
+ color: var(--text-color);
display: block;
font-family: inherit;
margin: 0;
- margin-bottom: var(--box-margin);
- padding: 7px;
+ padding: .5rem 1rem;
width: 100%;
+ line-height: inherit;
+ min-height: 40px;
}
input[type="range"] {
margin-top: 10px;
@@ -47,11 +46,15 @@ input[type=checkbox]:checked:after {
content: '✓';
color: var(--color-darkGray);
}
-
input[data-modified=true] {
background-color: var(--color-lightCyan);
border: 1px solid var(--color-darkGray);
}
+input + select,
+select + input,
+input + input {
+ border-left: none;
+}
textarea {
height: inherit;
padding: 7px;
@@ -59,13 +62,18 @@ textarea {
min-height: 6rlh;
}
select {
- border: 1px solid #222;
+ border: 2px solid var(--color-darkBlue);
width: 100%;
padding: var(--button-padding);
+ background-color: var(--background-color);
+ color: var(--text-color);
+ min-height: 40px;
}
.dark select {
- color: #efefef;
- background-color: #393F3F;
+ color: var(--text-color);
+ background-color: var(--color-darkGray);
+ border-color: var(--color-dark);
+ border-width: 1px;
}
select[multiple="multiple"] {
height: auto;
@@ -75,16 +83,16 @@ select[multiple="multiple"] {
input[type="submit"] {
display: flex;
align-items: center;
- margin-bottom: 14px;
text-align: center;
- border-radius: 2px;
- font-weight: normal;
cursor: pointer;
padding: var(--button-padding);
border: none;
text-decoration: none;
- background-color: white;
justify-content: center;
+ background-color: var(--color-darkBlue);
+ color: white;
+ font-weight: normal;
+ min-height: 40px;
}
.dark .button,
.dark [type="button"] {
@@ -92,6 +100,9 @@ input[type="submit"] {
color: var(--text-color);
border: 1px solid #1b1f20;
}
+.button.primary {
+ font-weight: bold;
+}
.dark .button.primary:not([disabled]),
.dark [type="button"].primary:not([disabled]) {
background-color: var(--color-brightCyan);
@@ -160,6 +171,14 @@ input + .help-text {
.formbox.with-switch {
padding-top: 2px;
}
+.with-switch {
+ overflow: hidden;
+}
+.formbox select,
+.formbox textarea,
+.formbox input {
+ margin-bottom: var(--text-margin);
+}
fieldset.formbox {
border: none;
border-top: 1px solid var(--color-lightGray);
@@ -200,8 +219,9 @@ input[value]:invalid {
background-color: darkred;
}
.dark input, .dark textarea {
- background-color: #232729;
- border-color: #1b1f20;
+ background-color: var(--color-darkerGray);
+ border-color: var(--color-dark);
+ border-width: 1px;
color: #efefef;
}
details {
@@ -277,9 +297,6 @@ input.switch:empty ~ label {
text-indent: 6em;
margin: 0.2em 0;
cursor: pointer;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
user-select: none;
text-shadow: 0 1px rgba(0, 0, 0, 0.1);
width: 80px;
@@ -567,6 +584,7 @@ input.blur {
vertical-align: middle;
border-start-end-radius: 0;
border-end-end-radius: 0;
+ margin-bottom: 0;
}
.blur + .button,
.blur + [type="button"] {
diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css
index 6605fbac..71a5e83e 100644
--- a/umap/static/umap/map.css
+++ b/umap/static/umap/map.css
@@ -37,7 +37,6 @@ html[dir="rtl"] .leaflet-tooltip-pane > * {
background-color: var(--color-lightGray);
}
-
/* *********** */
/* Structure */
/* *********** */
@@ -94,6 +93,8 @@ html[dir="rtl"] .leaflet-tooltip-pane > * {
background-image: url('./img/24.svg');
text-indent: -9999px;
margin-bottom: 0;
+ background-color: white;
+ min-height: initial;
}
.leaflet-control.display-on-more,
.umap-control-less {
@@ -449,7 +450,7 @@ ul.photon-autocomplete {
display: inline-block;
width: 16px;
height: 16px;
- margin-inline-start: 5px;
+ margin-inline-start: 2px;
background-position: 2px -4px;
background-repeat: no-repeat;
background-image: url('./img/16.svg');
@@ -470,6 +471,7 @@ ul.photon-autocomplete {
}
.umap-getstarted button {
width: 100%;
+ margin-bottom: var(--text-margin);
}
.umap-help {
font-style: italic;
@@ -660,6 +662,10 @@ a.umap-control-caption,
.umap-caption .header i.icon {
flex-shrink: 0;
}
+.umap-caption button {
+ background-color: var(--background-color);
+ color: var(--text-color);
+}
.umap-browser .main-toolbox {
padding-left: 4px; /* Align with toolbox below */
border-top: 1px solid var(--color-mediumGray);
diff --git a/umap/static/umap/vars.css b/umap/static/umap/vars.css
index 68df8ee3..ee5e671a 100644
--- a/umap/static/umap/vars.css
+++ b/umap/static/umap/vars.css
@@ -1,6 +1,5 @@
:root {
/* Colors. */
- --color-waterMint: #B9F5D2;
--color-darkBlue: #263B58;
--color-lighterGray: #f6f6f6;
--color-lightGray: #ddd;
@@ -21,7 +20,7 @@
--text-color: var(--color-dark);
/* Buttons. */
- --button-primary-background: var(--color-waterMint);
+ --button-primary-background: var(--color-limeGreen);
--button-primary-color: var(--color-darkBlue);
--button-neutral-background: var(--color-lightGray);
--button-neutral-color: var(--color-darkGray);
diff --git a/umap/templates/umap/search_bar.html b/umap/templates/umap/search_bar.html
index 17588e70..481b8f72 100644
--- a/umap/templates/umap/search_bar.html
+++ b/umap/templates/umap/search_bar.html
@@ -16,7 +16,7 @@
{% endfor %}
-
+