chore: refine main search form

Co-authored-by: David Larlet <david@larlet.fr>

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 {
+hr, input, textarea, select {
-    -moz-box-sizing:border-box;
-    -webkit-box-sizing:border-box;
     box-sizing: border-box;
     margin: 0;
     padding: 0;

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;

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;

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: 2px solid var(--color-darkBlue);
-    border-radius: 2px 2px 2px 2px;
+    color: var(--text-color);
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset;
-    color: rgba(0, 0, 0, 0.75);
     display: block;
     font-family: inherit;
     margin: 0;
-    margin-bottom: var(--box-margin);
+    padding: .5rem 1rem;
-    padding: 7px;
     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;
+    color: var(--text-color);
-    background-color: #393F3F;
+    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;
+    background-color: var(--color-darkerGray);
-    border-color: #1b1f20;
+    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"] {

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);

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);

umap/templates/umap/search_bar.html

@@ -16,7 +16,7 @@
         <option value="{{ value }}" {% if request.GET.tags == value %}selected{% endif %}>{{ label }}</option>
         {% endfor %}
       </select>
-      <input type="submit" value="{% trans "Search" %}" class="neutral" />
+      <input type="submit" value="{% trans "Search" %}" />
     </form>
   </div>
 </div>