theme updates (#4099)

dashboard.css and bootstrap-select.css fix

misc/theme-cicada/Makefile

@@ -1,5 +1,5 @@
 PLUGIN_NAME=		theme-cicada
-PLUGIN_VERSION=		1.36
+PLUGIN_VERSION=		1.37
 PLUGIN_COMMENT=		The cicada theme - dark grey onyx
 PLUGIN_MAINTAINER=	rene@team-rebellion.net
 PLUGIN_NO_ABI=		yes

misc/theme-cicada/src/opnsense/www/themes/cicada/assets/stylesheets/bootstrap-select.scss

@@ -11,7 +11,9 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
 
 .bootstrap-select {
   width: 348px \0;
+
   /*IE9 and below*/
+
   > {
     .dropdown-toggle {
       position: relative;
@@ -19,16 +21,20 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
       z-index: 1;
       text-align: right;
       white-space: nowrap;
+
       &.bs-placeholder {
-        color: #fff;
+        color: #ccc;
+
         &:hover, &:focus, &:active {
-          color: #fff;
+          color: #ccc;
         }
+
         &.btn-primary, &.btn-secondary, &.btn-success, &.btn-danger, &.btn-info, &.btn-dark, &.btn-primary:hover, &.btn-secondary:hover, &.btn-success:hover, &.btn-danger:hover, &.btn-info:hover, &.btn-dark:hover, &.btn-primary:focus, &.btn-secondary:focus, &.btn-success:focus, &.btn-danger:focus, &.btn-info:focus, &.btn-dark:focus, &.btn-primary:active, &.btn-secondary:active, &.btn-success:active, &.btn-danger:active, &.btn-info:active, &.btn-dark:active {
-          color: #ffffff;
+          color: rgba(0, 0, 0, 0.5);
         }
       }
     }
+
     select {
       position: absolute !important;
       bottom: 0;
@@ -39,6 +45,7 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
       padding: 0 !important;
       opacity: 0 !important;
       border: none;
+
       &.mobile-device {
         top: 0;
         left: 0;
@@ -62,9 +69,15 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
   &.fit-width {
     width: auto !important;
   }
+
   &:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
     width: 348px;
   }
+
+  > select.mobile-device:focus + .dropdown-toggle, .dropdown-toggle:focus {
+    outline: none !important;
+  }
+
   &.form-control {
     margin-bottom: 0;
     padding: 0;
@@ -79,15 +92,18 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
 .bootstrap-select {
   &.form-control.input-group-btn {
     z-index: auto;
+
     &:not(:first-child):not(:last-child) > .btn {
       border-radius: 0;
     }
   }
+
   &:not(.input-group-btn), &[class*="col-"] {
     float: none;
     display: inline-block;
     margin-left: 0;
   }
+
   &.dropdown-menu-right, &[class*="col-"].dropdown-menu-right {
     float: right;
   }
@@ -118,9 +134,11 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
     line-height: inherit;
     border-radius: inherit;
   }
+
   &.form-control-sm .dropdown-toggle {
     padding: 0.25rem 0.5rem;
   }
+
   &.form-control-lg .dropdown-toggle {
     padding: 0.5rem 1rem;
   }
@@ -133,31 +151,38 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
 .bootstrap-select {
   &.disabled {
     cursor: not-allowed;
+
     &:focus {
       outline: none !important;
     }
   }
+
   > .disabled {
     cursor: not-allowed;
   }
+
   > .disabled:focus {
     outline: none !important;
   }
+
   &.bs-container {
     position: absolute;
     top: 0;
     left: 0;
     height: 0 !important;
     padding: 0 !important;
+
     .dropdown-menu {
-      z-index: 1060;
+      z-index: 9998;
     }
   }
+
   .dropdown-toggle {
     &:before {
       content: '';
       display: inline-block;
     }
+
     .filter-option {
       position: absolute;
       top: 0;
@@ -170,12 +195,15 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
       width: 100%;
       text-align: left;
     }
+
     .filter-option-inner {
       padding-right: inherit;
     }
+
     .filter-option-inner-inner {
       overflow: hidden;
     }
+
     .caret {
       position: absolute;
       top: 50%;
@@ -194,14 +222,17 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
   &[class*="col-"] .dropdown-toggle {
     width: 100%;
   }
+
   .dropdown-menu {
     min-width: 100%;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
+
     > .inner:focus {
       outline: none !important;
     }
+
     &.inner {
       position: static;
       float: none;
@@ -212,37 +243,46 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
       -webkit-box-shadow: none;
       box-shadow: none;
     }
+
     li {
       position: relative;
+
       &.active small {
         color: rgba(255, 255, 255, 0.5) !important;
       }
+
       &.disabled a {
         cursor: not-allowed;
       }
+
       a {
         cursor: pointer;
         -webkit-user-select: none;
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
+
         &.opt {
           position: relative;
           padding-left: 2.25em;
         }
+
         span {
           &.check-mark {
             display: none;
           }
+
           &.text {
             display: inline-block;
           }
         }
       }
+
       small {
         padding-left: 0.5em;
       }
     }
+
     .notify {
       position: absolute;
       bottom: 5px;
@@ -250,8 +290,8 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
       margin: 0 2%;
       min-height: 26px;
       padding: 3px 5px;
-      background: #f5f5f5;
-      border: 1px solid #e3e3e3;
+      background: #151515;
+      border: 1px solid #232323;
       -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
       box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
       pointer-events: none;
@@ -261,27 +301,32 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
       box-sizing: border-box;
     }
   }
+
   .no-results {
     padding: 3px;
-    background: #f5f5f5;
+    background: #151515;
     margin: 0 5px;
     white-space: nowrap;
   }
+
   &.fit-width .dropdown-toggle {
     .filter-option {
       position: static;
       display: inline;
       padding: 0;
     }
+
     .filter-option-inner, .filter-option-inner-inner {
       display: inline;
     }
+
     .caret {
       position: static;
       top: auto;
       margin-top: -1px;
     }
   }
+
   &.show-tick .dropdown-menu {
     .selected span.check-mark {
       position: absolute;
@@ -289,10 +334,12 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
       right: 15px;
       top: 5px;
     }
+
     li a span.text {
       margin-right: 34px;
     }
   }
+
   .bs-ok-default:after {
     content: '';
     display: block;
@@ -305,10 +352,12 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
     -o-transform: rotate(45deg);
     transform: rotate(45deg);
   }
+
   &.show-menu-arrow {
     &.open > .dropdown-toggle, &.show > .dropdown-toggle {
-      z-index: 1061;
+      z-index: 9999;
     }
+
     .dropdown-toggle .filter-option {
       &:before {
         content: '';
@@ -320,6 +369,7 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
         left: 9px;
         display: none;
       }
+
       &:after {
         content: '';
         border-left: 6px solid transparent;
@@ -331,13 +381,15 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
         display: none;
       }
     }
+
     &.dropup .dropdown-toggle .filter-option {
       &:before {
         bottom: auto;
         top: -4px;
-        border-top: 7px solid rgba(204, 204, 204, 0.2);
+        border-top: 7px solid rgba(50, 50, 50, 0.2);
         border-bottom: 0;
       }
+
       &:after {
         bottom: auto;
         top: -4px;
@@ -345,16 +397,19 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
         border-bottom: 0;
       }
     }
+
     &.pull-right .dropdown-toggle .filter-option {
       &:before {
         right: 12px;
         left: auto;
       }
+
       &:after {
         right: 13px;
         left: auto;
       }
     }
+
     &.open > .dropdown-toggle .filter-option:before, &.show > .dropdown-toggle .filter-option:before, &.open > .dropdown-toggle .filter-option:after, &.show > .dropdown-toggle .filter-option:after {
       display: block;
     }
@@ -370,6 +425,7 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
+
   .btn-group button {
     width: 50%;
   }
@@ -381,6 +437,7 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
+
   .btn-group button {
     width: 100%;
   }
@@ -390,6 +447,7 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
   + .bs-actionsbox {
     padding: 0 8px 4px;
   }
+
   .form-control {
     margin-bottom: 0;
     width: 100%;
@@ -405,6 +463,7 @@ select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.sel
   .dropdown-menu > li > a {
     padding: 3px 20px 3px 30px;
   }
+
   &.show-tick .dropdown-menu .selected span.check-mark {
     left: 10px;
   }

misc/theme-cicada/src/opnsense/www/themes/cicada/assets/stylesheets/dashboard.scss

@@ -16,6 +16,11 @@
   border-radius: 0.5em 0.5em 0.5em 0.5em;
 }
 
+.widget-error {
+    margin: 50px;
+    color: #721c24;
+}
+
 .widget-content {
   position: relative;
   width: 100%;

misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/bootstrap-select.css

@@ -165,7 +165,7 @@ select.selectpicker {
   padding: 0 !important;
 }
 .bootstrap-select.bs-container .dropdown-menu {
-  z-index: 1060;
+  z-index: 9998;
 }
 .bootstrap-select .dropdown-toggle:before {
   content: '';
@@ -310,7 +310,7 @@ select.selectpicker {
 }
 .bootstrap-select.show-menu-arrow.open > .dropdown-toggle,
 .bootstrap-select.show-menu-arrow.show > .dropdown-toggle {
-  z-index: 1061;
+  z-index: 9999;
 }
 .bootstrap-select.show-menu-arrow .dropdown-toggle .filter-option:before {
   content: '';

misc/theme-cicada/src/opnsense/www/themes/cicada/build/css/dashboard.css

@@ -16,6 +16,11 @@
   border-radius: 0.5em 0.5em 0.5em 0.5em;
 }
 
+.widget-error {
+    margin: 50px;
+    color: #721c24;
+}
+
 .widget-content {
     position: relative;
     width: 100%;

misc/theme-vicuna/Makefile

@@ -1,5 +1,5 @@
 PLUGIN_NAME=		theme-vicuna
-PLUGIN_VERSION=		1.46
+PLUGIN_VERSION=		1.47
 PLUGIN_COMMENT=		The vicuna theme - blue sapphire
 PLUGIN_MAINTAINER=	rene@team-rebellion.net
 PLUGIN_NO_ABI=		yes

misc/theme-vicuna/src/opnsense/www/themes/vicuna/assets/stylesheets/bootstrap-select.scss

@@ -0,0 +1,468 @@
+/*!
+ * Bootstrap-select v1.13.3 (https://developer.snapappointments.com/bootstrap-select)
+ *
+ * Copyright 2012-2018 SnapAppointments, LLC
+ * Licensed under MIT (https://github.com/snapappointments/bootstrap-select/blob/master/LICENSE)
+ */
+
+select.bs-select-hidden, .bootstrap-select > select.bs-select-hidden, select.selectpicker {
+  display: none !important;
+}
+
+.bootstrap-select {
+  width: 348px \0;
+
+  /*IE9 and below*/
+
+  > {
+    .dropdown-toggle {
+      position: relative;
+      width: 100%;
+      z-index: 1;
+      text-align: right;
+      white-space: nowrap;
+
+      &.bs-placeholder {
+        color: #fff;
+
+        &:hover, &:focus, &:active {
+          color: #fff;
+        }
+
+        &.btn-primary, &.btn-secondary, &.btn-success, &.btn-danger, &.btn-info, &.btn-dark, &.btn-primary:hover, &.btn-secondary:hover, &.btn-success:hover, &.btn-danger:hover, &.btn-info:hover, &.btn-dark:hover, &.btn-primary:focus, &.btn-secondary:focus, &.btn-success:focus, &.btn-danger:focus, &.btn-info:focus, &.btn-dark:focus, &.btn-primary:active, &.btn-secondary:active, &.btn-success:active, &.btn-danger:active, &.btn-info:active, &.btn-dark:active {
+          color: #ffffff;
+        }
+      }
+    }
+
+    select {
+      position: absolute !important;
+      bottom: 0;
+      left: 50%;
+      display: block !important;
+      width: 0.5px !important;
+      height: 100% !important;
+      padding: 0 !important;
+      opacity: 0 !important;
+      border: none;
+
+      &.mobile-device {
+        top: 0;
+        left: 0;
+        display: block !important;
+        width: 100% !important;
+        z-index: 2;
+      }
+    }
+  }
+}
+
+.has-error .bootstrap-select .dropdown-toggle, .error .bootstrap-select .dropdown-toggle, .bootstrap-select.is-invalid .dropdown-toggle, .was-validated .bootstrap-select .selectpicker:invalid + .dropdown-toggle {
+  border-color: #b94a48;
+}
+
+.bootstrap-select.is-valid .dropdown-toggle, .was-validated .bootstrap-select .selectpicker:valid + .dropdown-toggle {
+  border-color: #28a745;
+}
+
+.bootstrap-select {
+  &.fit-width {
+    width: auto !important;
+  }
+
+  &:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
+    width: 348px;
+  }
+
+  &.form-control {
+    margin-bottom: 0;
+    padding: 0;
+    border: none;
+  }
+}
+
+:not(.input-group) > .bootstrap-select.form-control:not([class*="col-"]) {
+  width: 100%;
+}
+
+.bootstrap-select {
+  &.form-control.input-group-btn {
+    z-index: auto;
+
+    &:not(:first-child):not(:last-child) > .btn {
+      border-radius: 0;
+    }
+  }
+
+  &:not(.input-group-btn), &[class*="col-"] {
+    float: none;
+    display: inline-block;
+    margin-left: 0;
+  }
+
+  &.dropdown-menu-right, &[class*="col-"].dropdown-menu-right {
+    float: right;
+  }
+}
+
+.row .bootstrap-select[class*="col-"].dropdown-menu-right {
+  float: right;
+}
+
+.form-inline .bootstrap-select, .form-horizontal .bootstrap-select, .form-group .bootstrap-select {
+  margin-bottom: 0;
+}
+
+.form-group-lg .bootstrap-select.form-control, .form-group-sm .bootstrap-select.form-control {
+  padding: 0;
+}
+
+.form-group-lg .bootstrap-select.form-control .dropdown-toggle, .form-group-sm .bootstrap-select.form-control .dropdown-toggle {
+  height: 100%;
+  font-size: inherit;
+  line-height: inherit;
+  border-radius: inherit;
+}
+
+.bootstrap-select {
+  &.form-control-sm .dropdown-toggle, &.form-control-lg .dropdown-toggle {
+    font-size: inherit;
+    line-height: inherit;
+    border-radius: inherit;
+  }
+
+  &.form-control-sm .dropdown-toggle {
+    padding: 0.25rem 0.5rem;
+  }
+
+  &.form-control-lg .dropdown-toggle {
+    padding: 0.5rem 1rem;
+  }
+}
+
+.form-inline .bootstrap-select .form-control {
+  width: 100%;
+}
+
+.bootstrap-select {
+  &.disabled {
+    cursor: not-allowed;
+
+    &:focus {
+      outline: none !important;
+    }
+  }
+
+  > .disabled {
+    cursor: not-allowed;
+  }
+
+  > .disabled:focus {
+    outline: none !important;
+  }
+
+  &.bs-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 0 !important;
+    padding: 0 !important;
+
+    .dropdown-menu {
+      z-index: 9998;
+    }
+  }
+
+  .dropdown-toggle {
+    &:before {
+      content: '';
+      display: inline-block;
+    }
+
+    .filter-option {
+      position: absolute;
+      top: 0;
+      left: 0;
+      padding-top: inherit;
+      padding-right: inherit;
+      padding-bottom: inherit;
+      padding-left: inherit;
+      height: 100%;
+      width: 100%;
+      text-align: left;
+    }
+
+    .filter-option-inner {
+      padding-right: inherit;
+    }
+
+    .filter-option-inner-inner {
+      overflow: hidden;
+    }
+
+    .caret {
+      position: absolute;
+      top: 50%;
+      right: 12px;
+      margin-top: -2px;
+      vertical-align: middle;
+    }
+  }
+}
+
+.input-group .bootstrap-select.form-control .dropdown-toggle {
+  border-radius: inherit;
+}
+
+.bootstrap-select {
+  &[class*="col-"] .dropdown-toggle {
+    width: 100%;
+  }
+
+  .dropdown-menu {
+    min-width: 100%;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+
+    > .inner:focus {
+      outline: none !important;
+    }
+
+    &.inner {
+      position: static;
+      float: none;
+      border: 0;
+      padding: 0;
+      margin: 0;
+      border-radius: 0;
+      -webkit-box-shadow: none;
+      box-shadow: none;
+    }
+
+    li {
+      position: relative;
+
+      &.active small {
+        color: rgba(255, 255, 255, 0.5) !important;
+      }
+
+      &.disabled a {
+        cursor: not-allowed;
+      }
+
+      a {
+        cursor: pointer;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+
+        &.opt {
+          position: relative;
+          padding-left: 2.25em;
+        }
+
+        span {
+          &.check-mark {
+            display: none;
+          }
+
+          &.text {
+            display: inline-block;
+          }
+        }
+      }
+
+      small {
+        padding-left: 0.5em;
+      }
+    }
+
+    .notify {
+      position: absolute;
+      bottom: 5px;
+      width: 96%;
+      margin: 0 2%;
+      min-height: 26px;
+      padding: 3px 5px;
+      background: #f5f5f5;
+      border: 1px solid #e3e3e3;
+      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
+      pointer-events: none;
+      opacity: 0.9;
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+    }
+  }
+
+  .no-results {
+    padding: 3px;
+    background: #f5f5f5;
+    margin: 0 5px;
+    white-space: nowrap;
+  }
+
+  &.fit-width .dropdown-toggle {
+    .filter-option {
+      position: static;
+      display: inline;
+      padding: 0;
+    }
+
+    .filter-option-inner, .filter-option-inner-inner {
+      display: inline;
+    }
+
+    .caret {
+      position: static;
+      top: auto;
+      margin-top: -1px;
+    }
+  }
+
+  &.show-tick .dropdown-menu {
+    .selected span.check-mark {
+      position: absolute;
+      display: inline-block;
+      right: 15px;
+      top: 5px;
+    }
+
+    li a span.text {
+      margin-right: 34px;
+    }
+  }
+
+  .bs-ok-default:after {
+    content: '';
+    display: block;
+    width: 0.5em;
+    height: 1em;
+    border-style: solid;
+    border-width: 0 0.26em 0.26em 0;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    -o-transform: rotate(45deg);
+    transform: rotate(45deg);
+  }
+
+  &.show-menu-arrow {
+    &.open > .dropdown-toggle, &.show > .dropdown-toggle {
+      z-index: 9999;
+    }
+
+    .dropdown-toggle .filter-option {
+      &:before {
+        content: '';
+        border-left: 7px solid transparent;
+        border-right: 7px solid transparent;
+        border-bottom: 7px solid rgba(204, 204, 204, 0.2);
+        position: absolute;
+        bottom: -4px;
+        left: 9px;
+        display: none;
+      }
+
+      &:after {
+        content: '';
+        border-left: 6px solid transparent;
+        border-right: 6px solid transparent;
+        border-bottom: 6px solid white;
+        position: absolute;
+        bottom: -4px;
+        left: 10px;
+        display: none;
+      }
+    }
+
+    &.dropup .dropdown-toggle .filter-option {
+      &:before {
+        bottom: auto;
+        top: -4px;
+        border-top: 7px solid rgba(204, 204, 204, 0.2);
+        border-bottom: 0;
+      }
+
+      &:after {
+        bottom: auto;
+        top: -4px;
+        border-top: 6px solid white;
+        border-bottom: 0;
+      }
+    }
+
+    &.pull-right .dropdown-toggle .filter-option {
+      &:before {
+        right: 12px;
+        left: auto;
+      }
+
+      &:after {
+        right: 13px;
+        left: auto;
+      }
+    }
+
+    &.open > .dropdown-toggle .filter-option:before, &.show > .dropdown-toggle .filter-option:before, &.open > .dropdown-toggle .filter-option:after, &.show > .dropdown-toggle .filter-option:after {
+      display: block;
+    }
+  }
+}
+
+.bs-searchbox, .bs-actionsbox, .bs-donebutton {
+  padding: 4px 8px;
+}
+
+.bs-actionsbox {
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+
+  .btn-group button {
+    width: 50%;
+  }
+}
+
+.bs-donebutton {
+  float: left;
+  width: 100%;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+
+  .btn-group button {
+    width: 100%;
+  }
+}
+
+.bs-searchbox {
+  + .bs-actionsbox {
+    padding: 0 8px 4px;
+  }
+
+  .form-control {
+    margin-bottom: 0;
+    width: 100%;
+    float: none;
+  }
+}
+
+/* OPNsense edit to fix https://github.com/opnsense/core/issues/2612 :
+ * Move checkmarks to left hand side of the dropdown.
+ */
+
+.bootstrap-select {
+  .dropdown-menu > li > a {
+    padding: 3px 20px 3px 30px;
+  }
+
+  &.show-tick .dropdown-menu .selected span.check-mark {
+    left: 10px;
+  }
+}
+
+/* End OPNsense edit to fix #2612. */

misc/theme-vicuna/src/opnsense/www/themes/vicuna/assets/stylesheets/dashboard.scss

@@ -16,6 +16,11 @@
   border-radius: 0.5em 0.5em 0.5em 0.5em;
 }
 
+.widget-error {
+    margin: 50px;
+    color: #721c24;
+}
+
 .widget-content {
   position: relative;
   width: 100%;

misc/theme-vicuna/src/opnsense/www/themes/vicuna/build/css/bootstrap-select.css

@@ -160,7 +160,7 @@ select.selectpicker {
   padding: 0 !important;
 }
 .bootstrap-select.bs-container .dropdown-menu {
-  z-index: 1060;
+  z-index: 9998;
 }
 .bootstrap-select .dropdown-toggle:before {
   content: '';
@@ -305,7 +305,7 @@ select.selectpicker {
 }
 .bootstrap-select.show-menu-arrow.open > .dropdown-toggle,
 .bootstrap-select.show-menu-arrow.show > .dropdown-toggle {
-  z-index: 1061;
+  z-index: 9999;
 }
 .bootstrap-select.show-menu-arrow .dropdown-toggle .filter-option:before {
   content: '';

misc/theme-vicuna/src/opnsense/www/themes/vicuna/build/css/dashboard.css

@@ -16,6 +16,11 @@
   border-radius: 0.5em 0.5em 0.5em 0.5em;
 }
 
+.widget-error {
+    margin: 50px;
+    color: #721c24;
+}
+
 .widget-content {
     position: relative;
     width: 100%;