[IMAGES][CSS] Dropdown image added for use in select boxes background. Fixed select box background color from being the one used by the system, dark theme inconsistencies found.

public/assets/css/base.css

@@ -351,6 +351,9 @@ summary:focus {
 .section-form {
     padding: var(--unit-size);
 }
+.form-group {
+    margin-bottom: var(--unit-size);
+}
 
 .help-text {
     font-style: italic;
@@ -387,34 +390,24 @@ label {
     font-weight: bold;
 }
 
-button {
+select,
-    font-size: var(--small-size) !important;
+button,
-    font-family: var(--main-font) !important;
-    font-weight: bold !important;
-    background-image: linear-gradient(180deg, var(--bg2), transparent) !important;
-    color: var(--white) !important;
-
-    border: solid 2px var(--bg2) !important;
-    border-radius: var(--unit-size);
-}
-
 textarea,
-input[type=text],
+input {
-input[type=password],
-input[type=email] {
     font-size: inherit !important;
     display: block;
     position: relative;
     color: var(--white);
-    padding: 5px 10px 5px 10px;
+    padding: 5px 10px;
     border: 2px solid var(--bg2);
     border-radius: var(--unit-size);
     background-color: var(--translucent);
 }
 
-textarea:hover,
+button {
-textarea:focus {
+    font-weight: bold !important;
-    border-color: var(--bg3) !important;
+    background-image: linear-gradient(180deg, var(--bg2), transparent) !important;
+    color: var(--white) !important;
 }
 
 input[type=radio] {
@@ -422,11 +415,6 @@ input[type=radio] {
     background-color: var(--bg1) !important;
 }
 
-input:hover,
-input:focus {
-    border-color: var(--bg3) !important;
-}
-
 input[type=radio]:checked {
     background-color: var(--white) !important;
 }
@@ -442,11 +430,6 @@ input[type=checkbox] {
     mask-image: url("../icons/check-off.svg") !important;
 }
 
-input[type=checkbox]:hover,
-input[type=checkbox]:focus {
-    background-color: var(--bg3) !important;
-}
-
 input[type=checkbox]:checked {
     background-color: var(--bg3) !important;
     -webkit-mask-image: url("../icons/check-on.svg") !important;
@@ -455,14 +438,19 @@ input[type=checkbox]:checked {
     mask-image: url("../icons/check-on.svg") !important;
 }
 
+textarea:hover,
+textarea:focus,
 button:hover,
 button:focus,
 input:hover,
 input:focus {
-    border-color: var(--bg3) !important;
+    border: solid 2px var(--bg3) !important;
     color: var(--white) !important;
 }
-
+input[type=checkbox]:hover,
+input[type=checkbox]:focus {
+    background-color: var(--bg3) !important;
+}
 :is(:disabled, :disabled:active)::file-selector-button,
 button:is(:disabled, :disabled:active),
 input:is([type=reset], [type=button], [type=submit]):is(:disabled, :disabled:active),
@@ -479,11 +467,6 @@ input[type=file] {
     border-radius: var(--unit-size);
 }
 
-input[type=file]:focus,
-input[type=file]:hover {
-    border: solid 2px var(--bg3) !important;
-}
-
 /* button part of file selector */
 ::file-selector-button {
     font-family: var(--main-font) !important;
@@ -492,11 +475,16 @@ input[type=file]:hover {
 }
 
 select {
-    font-family: var(--main-font) !important;
+    -webkit-appearance: none !important;
-    font-size: var(--small-size);
+    -moz-appearance: none !important;
-    font-weight: normal !important;
+
-    background: linear-gradient(180deg, var(--bg2), transparent) !important;
+    background-image: url("../images/drop.png") !important;
-    color: var(--white);
+    background-repeat: no-repeat;
+    background-size: 16px;
+    background-color: var(--bg1) !important;
+    background-position: center right 5px;
+
+    color: var(--white) !important;
     border: 2px solid var(--bg2);
     border-radius: var(--unit-size);
 }

public/assets/css/reset.css

@@ -138,6 +138,14 @@ input {
     all: unset;
     padding: 5px 10px;
 }
+button,
+select,
+input:not([type=text]) {
+    cursor: pointer !important;
+}
+input:not([type=button], [type=color], [type=checkbox], [type=radio]) {
+    cursor: auto !important;
+}
 
 /*noinspection CssInvalidPseudoSelector*/
 *|*::-moz-button-content {
@@ -146,7 +154,6 @@ input {
 
 input[type=checkbox] {
     all: unset;
-    cursor: pointer !important;
 
     display: inline-block;
     width: 1em;

public/assets/icons/drop.svg

@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
-   class="{{ iconClass|default('') }}"
    xmlns:dc="http://purl.org/dc/elements/1.1/"
    xmlns:cc="http://creativecommons.org/ns#"
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
@@ -12,8 +11,6 @@
    sodipodi:docname="drop.svg"
    id="svg6"
    viewBox="0 0 32 32"
-   height="32"
-   width="32"
    version="1.1">
   <metadata
      id="metadata12">
@@ -51,7 +48,7 @@
   <title
      id="title2">drop</title>
   <path
-     style="fill:#f6f6f6;fill-opacity:1"
+     style="fill-opacity:1"
      id="path4"
      d="M16 25.173c-0.823 0-10.695-17.1-10.284-17.813s20.157-0.713 20.568 0c0.411 0.713-9.461 17.813-10.284 17.813z" />
 </svg>