Scheduler: Better dropdown styling

...

Author: helje5

WebUI/Templates/OGoScheduler/SkySchedulerSelectPanel.html

@@ -4,33 +4,45 @@
   position: relative;
   vertical-align: middle;
 }
+button.dropdown {
+  background: #fff;
+  border: 1px solid #767676;
+  border-radius: 2px;
+  padding: 1px 4px;
+  font: inherit;
+  cursor: pointer;
+}
 .apt-type-dropdown-menu {
   display: none;
   position: absolute;
   top: 100%;
   left: 0;
-  background: #fff;
-  border: 1px solid #ccc;
-  box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
+  background: #f6f6f6;
+  border: 1px solid #b0b0b0;
+  border-radius: 4px;
+  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
   z-index: 100;
-  min-width: 150px;
+  min-width: 120px;
   max-height: 300px;
   overflow-y: auto;
+  padding: 4px 0;
+  font-size: 13px;
 }
 .apt-type-dropdown-menu label {
   display: block;
-  padding: 4px 8px;
+  padding: 2px 8px;
   white-space: nowrap;
   cursor: pointer;
 }
 .apt-type-dropdown-menu label:hover {
-  background: #f0f0f0;
+  background: #0069d9;
+  color: #fff;
 }
 </style>
 <script>
 function toggleAptTypeDropdown(btn) {
   var menu = btn.nextElementSibling;
-  var isOpen = menu.style.display !== 'none';
+  var isOpen = menu.style.display === 'block';
   // Close any open dropdowns first
   document.querySelectorAll('.apt-type-dropdown-menu').forEach(function(m) {
     m.style.display = 'none';
@@ -68,7 +80,7 @@
         ><#IsMonthModeCond><#MonthPopUp/></#IsMonthModeCond
         ><#ShowAptTypesCond
           ><div class="apt-type-dropdown"
-            ><button type="button" class="button_narrow"
+            ><button type="button" class="dropdown"
                      onclick="toggleAptTypeDropdown(this)"
               ><#AptTypeDropdownLabel/> &#9662;</button
             ><div class="apt-type-dropdown-menu"