Enhanced recurrence picker (fix for dark mode)

ransome1 · Jan 23, 2021 · 0655019 · 0655019
1 parent d484f37
commit 0655019
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 32 deletions.
diff --git a/src/css/dark.css b/src/css/dark.css
@@ -206,6 +206,18 @@ nav {
 #modalForm button:hover {
   color: #CCCDCF !important; }
 
+#modalForm .field input,
+#modalForm .field input::placeholder,
+#modalForm .field select,
+#modalForm .field select::placeholder {
+  color: white !important; }
+
+#modalForm .field select option {
+  background: #2c2d30; }
+
+#modalForm ::after {
+  border-color: white !important; }
+
 .modal .modal-content .card {
   background: #3B3B3B;
   color: #CCCDCF; }

diff --git a/src/css/style.css b/src/css/style.css
@@ -601,7 +601,7 @@ nav {
     #modalForm .field input::placeholder,
     #modalForm .field select,
     #modalForm .field select::placeholder {
-      background: none;
+      background: none !important;
       border: none;
       color: #3273dc !important; }
   #modalForm #btnItemStatus {

diff --git a/src/index.html b/src/index.html
@@ -107,37 +107,41 @@ <h1 id="noResultContainerHeadline" class="title is-1"></h1>
               <article class="message">
                 <div id="modalFormAlert" class="message-body"></div>
               </article>
-              <div class="select field">
-                  <select id="priorityPicker" tabindex="309">
-                    <option value="">-</option>
-                    <option value="A">A</option>
-                    <option value="B">B</option>
-                    <option value="C">C</option>
-                    <option value="D">D</option>
-                    <option value="E">E</option>
-                    <option value="F">F</option>
-                    <option value="G">G</option>
-                    <option value="H">H</option>
-                    <option value="I">I</option>
-                    <option value="J">J</option>
-                    <option value="K">K</option>
-                    <option value="L">L</option>
-                    <option value="M">M</option>
-                    <option value="N">N</option>
-                    <option value="O">O</option>
-                    <option value="P">P</option>
-                    <option value="Q">Q</option>
-                    <option value="R">R</option>
-                    <option value="S">S</option>
-                    <option value="T">T</option>
-                    <option value="U">U</option>
-                    <option value="V">V</option>
-                    <option value="W">W</option>
-                    <option value="X">X</option>
-                    <option value="Y">Y</option>
-                    <option value="Z">Z</option>
-                  </select>
+              <div class="field">
+                <div class="control">
+                  <div class="select">
+                    <select id="priorityPicker" tabindex="309">
+                      <option value="">-</option>
+                      <option value="A">A</option>
+                      <option value="B">B</option>
+                      <option value="C">C</option>
+                      <option value="D">D</option>
+                      <option value="E">E</option>
+                      <option value="F">F</option>
+                      <option value="G">G</option>
+                      <option value="H">H</option>
+                      <option value="I">I</option>
+                      <option value="J">J</option>
+                      <option value="K">K</option>
+                      <option value="L">L</option>
+                      <option value="M">M</option>
+                      <option value="N">N</option>
+                      <option value="O">O</option>
+                      <option value="P">P</option>
+                      <option value="Q">Q</option>
+                      <option value="R">R</option>
+                      <option value="S">S</option>
+                      <option value="T">T</option>
+                      <option value="U">U</option>
+                      <option value="V">V</option>
+                      <option value="W">W</option>
+                      <option value="X">X</option>
+                      <option value="Y">Y</option>
+                      <option value="Z">Z</option>
+                    </select>
+                  </div>
                 </div>
+              </div>
               <div class="field dueDate">
                 <div class="control has-icons-left">
                   <input id="dueDatePickerInput" class="input" tabindex="310" readonly>

diff --git a/src/scss/dark.scss b/src/scss/dark.scss
@@ -271,6 +271,20 @@ nav {
   button:hover {
     color: $grey-bright!important;
   }
+  .field {
+    input,
+    input::placeholder,
+    select,
+    select::placeholder {
+      color: white!important;
+    }
+    select option {
+      background: $grey-mid;
+    }
+  }
+  ::after {
+    border-color: white!important;
+  }
 }
 .modal {
   .modal-content {

diff --git a/src/scss/style.scss b/src/scss/style.scss
@@ -726,7 +726,7 @@ nav {
     input::placeholder,
     select,
     select::placeholder {
-      background: none;
+      background: none!important;
       border: none;
       color: $has-text-link!important;
     }