From 01fc795f34dae4184de79a710105f00a69c90400 Mon Sep 17 00:00:00 2001 From: Ad Schellevis Date: Sun, 1 Dec 2024 20:10:57 +0100 Subject: [PATCH] themes/opnsense - update default brand style --- .../stylesheets/bootstrap/_list-group.scss | 2 +- .../stylesheets/bootstrap/_variables.scss | 12 +- .../assets/stylesheets/config/colors.scss | 12 +- .../opnsense/assets/stylesheets/main.scss | 25 +- .../opnsense/build/css/bootstrap-dialog.css | 2 +- .../themes/opnsense/build/css/dashboard.css | 18 +- .../www/themes/opnsense/build/css/main.css | 382 +++++++++--------- .../opnsense/build/images/default-logo.svg | 136 ++----- .../themes/opnsense/build/images/favicon.png | Bin 2938 -> 2100 bytes .../opnsense/build/images/icon-logo.svg | 84 +--- 10 files changed, 286 insertions(+), 387 deletions(-) diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_list-group.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_list-group.scss index 63027b880..17c9af957 100644 --- a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_list-group.scss +++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_list-group.scss @@ -21,7 +21,7 @@ .list-group-item { position: relative; display: block; - padding: 6px 8px; + padding: 6px 12px; // Place the border on the list items and negative margin up for better styling margin-bottom: -1px; background-color: $list-group-bg; diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_variables.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_variables.scss index 8ef453991..9a1e2bb0e 100644 --- a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_variables.scss +++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_variables.scss @@ -44,14 +44,12 @@ $link-hover-color: darken($link-color, 15%) !default; // //## Font, line-height, and color for body text, headings, and more. -$font-family-sans-serif: "SourceSansProRegular", "Helvetica Neue", Helvetica, Arial, sans-serif !default; -$font-family-serif: Georgia, "Times New Roman", Times, serif !default; //** Default monospace fonts for ``, ``, and `
`.
 $font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace !default;
-$font-family-base:        $font-family-sans-serif !default;
+$font-family-base:        "SourceSansProRegular", "Helvetica Neue", Helvetica, Arial, sans-serif !default;;
 
-$font-size-base:          14px !default;
-$font-weight-base:        100;
+$font-size-base:          15px !default;
+$font-weight-base:        400;
 $font-size-large:         ceil(($font-size-base * 1.25)) !default; // ~18px
 $font-size-small:         ceil(($font-size-base * 0.85)) !default; // ~12px
 
@@ -63,13 +61,13 @@ $font-size-h5:            $font-size-base !default;
 $font-size-h6:            ceil(($font-size-base * 0.85)) !default; // ~12px
 
 //** Unit-less `line-height` for use in components like buttons.
-$line-height-base:        1.428571429 !default; // 20/14
+$line-height-base:        1.2 !default; // 20/14
 //** Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
 $line-height-computed:    floor(($font-size-base * $line-height-base)) !default; // ~20px
 
 //** By default, this inherits from the ``.
 $headings-font-family:    "SourceSansProSemiBold" !default;
-$headings-font-weight:    100 !default;
+$headings-font-weight:    500 !default;
 $headings-line-height:    1.4 !default;
 $headings-color:          inherit !default;
 
diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/config/colors.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/config/colors.scss
index 84cb886ad..27437d6f3 100644
--- a/src/opnsense/www/themes/opnsense/assets/stylesheets/config/colors.scss
+++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/config/colors.scss
@@ -1,15 +1,15 @@
 $colors: (
-  brand-primary: #D94F00,
+  brand-primary: #C03E14,
   content-background: #F7F7F7,
   body-background: #fff,
-  navbar-default-color: #F7F7F7,
+  navbar-default-color: #373736,
   page-content-head-background: #FBFBFB,
   page-foot-background: #FBFBFB,
   table-bg-accent: #FBFBFB,
-  login-modal-head-background: #3C3C3B,
-  navbar-default-bg: #3C3C3B,
-  list-group-link-color: #3C3C3B,
-  text-color: #3C3C3B,
+  login-modal-head-background: #fff,
+  navbar-default-bg: #fff,
+  list-group-link-color: #373736,
+  text-color: #373736,
   border-default: #E5E5E5,
   dashboard-widget-error: #721c24
 );
diff --git a/src/opnsense/www/themes/opnsense/assets/stylesheets/main.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/main.scss
index 92715891e..32c6c8ed1 100644
--- a/src/opnsense/www/themes/opnsense/assets/stylesheets/main.scss
+++ b/src/opnsense/www/themes/opnsense/assets/stylesheets/main.scss
@@ -69,6 +69,8 @@
 @import "bootstrap/utilities";
 @import "bootstrap/responsive-utilities";
 
+
+
 *{
     -webkit-font-smoothing: antialiased;
 }
@@ -257,12 +259,18 @@ div.content-box.wizard {
 
     &-head{
         background: map-get($colors, login-modal-head-background);
-        height: 75px;
+        height: 70px !important;
         padding: 0 20px;
+        .navbar-brand {
+          padding: 5px 0px !important;
+          img {
+            height: 60px ;
+          }
+        }
     }
 
     &-content{
-        padding: 20px 20px 20px 20px;
+        padding: 0px 20px 20px 20px;
     }
 }
 
@@ -417,7 +425,7 @@ main.page-content.col-lg-12 {
 }
 
 button.toggle-sidebar {
-  color: #FFF;
+  color: map-get($colors, navbar-default-color);
   background-color: transparent;
   font-size: 14px;
   border: none;
@@ -639,8 +647,15 @@ hr {
     border-radius: 0 !important;
 }
 
-.navbar-brand{
-    padding: 10px 20px;
+.navbar-brand {
+    padding: 1px 11px;
+
+    img.brand-logo {
+      height: 48px;
+    }
+    img.brand-icon {
+      height: 48px;
+    }
 }
 
 .label-opnsense {
diff --git a/src/opnsense/www/themes/opnsense/build/css/bootstrap-dialog.css b/src/opnsense/www/themes/opnsense/build/css/bootstrap-dialog.css
index 280ad1827..4bf1c0d98 100644
--- a/src/opnsense/www/themes/opnsense/build/css/bootstrap-dialog.css
+++ b/src/opnsense/www/themes/opnsense/build/css/bootstrap-dialog.css
@@ -45,7 +45,7 @@
   background-color: #B0CDDB;
 }
 .bootstrap-dialog.type-primary .modal-header {
-  background-color: #D94F00;
+  background-color: #C03E14;
 }
 .bootstrap-dialog.type-success .modal-header {
   background-color: #9BD275;
diff --git a/src/opnsense/www/themes/opnsense/build/css/dashboard.css b/src/opnsense/www/themes/opnsense/build/css/dashboard.css
index eea3a1308..b8cdc491a 100644
--- a/src/opnsense/www/themes/opnsense/build/css/dashboard.css
+++ b/src/opnsense/www/themes/opnsense/build/css/dashboard.css
@@ -50,7 +50,7 @@
 .grid-stack-item-content {
   text-align: center;
   border-style: solid;
-  border-color: rgba(217, 79, 0, 0.15);
+  border-color: rgba(192, 62, 20, 0.15);
   border-width: 2px;
   background-color: #FBFBFB;
   border-radius: 0.5em 0.5em 0.5em 0.5em;
@@ -137,7 +137,7 @@ td {
   display: inline-block;
   height: 1px;
   width: 70%;
-  background: #D94F00;
+  background: #C03E14;
   margin: 5px;
 }
 
@@ -262,14 +262,14 @@ div {
   display: flex;
   flex-flow: row wrap;
   padding: 0.5em 0.5em;
-  border-top: solid 1px rgba(217, 79, 0, 0.15);
+  border-top: solid 1px rgba(192, 62, 20, 0.15);
 }
 
 .flextable-row {
   display: flex;
   flex-flow: row wrap;
   padding: 0.5em 0.5em;
-  border-top: solid 1px rgba(217, 79, 0, 0.15);
+  border-top: solid 1px rgba(192, 62, 20, 0.15);
   align-items: center;
 }
 
@@ -299,7 +299,7 @@ div {
   width: 100%;
   padding: 0;
   border: 0;
-  border-top: rgba(217, 79, 0, 0.15);
+  border-top: rgba(192, 62, 20, 0.15);
 }
 
 .column .flex-cell:hover {
@@ -312,7 +312,7 @@ div {
 }
 
 .column .flex-cell:not(:last-child) {
-  border-bottom: solid 1px rgba(217, 79, 0, 0.15);
+  border-bottom: solid 1px rgba(192, 62, 20, 0.15);
 }
 
 /* ----- */
@@ -325,7 +325,7 @@ div {
 .grid-row {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-  border-top: 1px solid rgba(217, 79, 0, 0.15);
+  border-top: 1px solid rgba(192, 62, 20, 0.15);
   opacity: 0.4;
 }
 
@@ -334,7 +334,7 @@ div {
 }
 
 .grid-header {
-  border-top: 1px solid rgba(217, 79, 0, 0.15);
+  border-top: 1px solid rgba(192, 62, 20, 0.15);
   font-weight: bold;
 }
 
@@ -349,3 +349,5 @@ div {
   align-items: center;
   justify-content: center;
 }
+
+/*# sourceMappingURL=dashboard.css.map */
diff --git a/src/opnsense/www/themes/opnsense/build/css/main.css b/src/opnsense/www/themes/opnsense/build/css/main.css
index e65a82afa..604224a03 100644
--- a/src/opnsense/www/themes/opnsense/build/css/main.css
+++ b/src/opnsense/www/themes/opnsense/build/css/main.css
@@ -1139,10 +1139,10 @@ html {
 
 body {
   font-family: "SourceSansProRegular", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  font-weight: 100;
-  line-height: 1.428571429;
-  color: #3C3C3B;
+  font-size: 15px;
+  font-weight: 400;
+  line-height: 1.2;
+  color: #373736;
   background-color: #fff;
 }
 
@@ -1156,11 +1156,11 @@ textarea {
 }
 
 a {
-  color: #D94F00;
+  color: #C03E14;
   text-decoration: none;
 }
 a:hover, a:focus {
-  color: #8d3300;
+  color: #7b280d;
   text-decoration: underline;
 }
 a:focus {
@@ -1190,7 +1190,7 @@ img {
 
 .img-thumbnail {
   padding: 4px;
-  line-height: 1.428571429;
+  line-height: 1.2;
   background-color: #fff;
   border: 1px solid #ddd;
   border-radius: 3px;
@@ -1208,8 +1208,8 @@ img {
 }
 
 hr {
-  margin-top: 20px;
-  margin-bottom: 20px;
+  margin-top: 18px;
+  margin-bottom: 18px;
   border: 0;
   border-top: 1px solid #eeeeee;
 }
@@ -1237,7 +1237,7 @@ hr {
 h1, h2, h3, h4, h5, h6,
 .h1, .h2, .h3, .h4, .h5, .h6 {
   font-family: "SourceSansProSemiBold";
-  font-weight: 100;
+  font-weight: 500;
   line-height: 1.4;
   color: inherit;
 }
@@ -1263,8 +1263,8 @@ h6 .small,
 h1, .h1,
 h2, .h2,
 h3, .h3 {
-  margin-top: 20px;
-  margin-bottom: 10px;
+  margin-top: 18px;
+  margin-bottom: 9px;
 }
 h1 small,
 h1 .small, .h1 small,
@@ -1281,8 +1281,8 @@ h3 .small, .h3 small,
 h4, .h4,
 h5, .h5,
 h6, .h6 {
-  margin-top: 10px;
-  margin-bottom: 10px;
+  margin-top: 9px;
+  margin-bottom: 9px;
 }
 h4 small,
 h4 .small, .h4 small,
@@ -1297,48 +1297,48 @@ h6 .small, .h6 small,
 }
 
 h1, .h1 {
-  font-size: 23px;
+  font-size: 25px;
 }
 
 h2, .h2 {
-  font-size: 16px;
+  font-size: 17px;
 }
 
 h3, .h3 {
-  font-size: 14px;
+  font-size: 15px;
 }
 
 h4, .h4 {
-  font-size: 18px;
+  font-size: 19px;
 }
 
 h5, .h5 {
-  font-size: 14px;
+  font-size: 15px;
 }
 
 h6, .h6 {
-  font-size: 12px;
+  font-size: 13px;
 }
 
 p {
-  margin: 0 0 10px;
+  margin: 0 0 9px;
 }
 
 .lead {
-  margin-bottom: 20px;
-  font-size: 16px;
+  margin-bottom: 18px;
+  font-size: 17px;
   font-weight: 300;
   line-height: 1.4;
 }
 @media (min-width: 768px) {
   .lead {
-    font-size: 21px;
+    font-size: 22.5px;
   }
 }
 
 small,
 .small {
-  font-size: 85%;
+  font-size: 86%;
 }
 
 cite {
@@ -1388,11 +1388,11 @@ mark,
 }
 
 .text-primary {
-  color: #D94F00;
+  color: #C03E14;
 }
 
 a.text-primary:hover {
-  color: #a63c00;
+  color: #922f0f;
 }
 
 .text-success {
@@ -1432,11 +1432,11 @@ a.text-danger:hover {
 }
 
 .bg-primary {
-  background-color: #D94F00;
+  background-color: #C03E14;
 }
 
 a.bg-primary:hover {
-  background-color: #a63c00;
+  background-color: #922f0f;
 }
 
 .bg-success {
@@ -1472,15 +1472,15 @@ a.bg-danger:hover {
 }
 
 .page-header {
-  padding-bottom: 9px;
-  margin: 40px 0 20px;
+  padding-bottom: 8px;
+  margin: 36px 0 18px;
   border-bottom: 1px solid #eeeeee;
 }
 
 ul,
 ol {
   margin-top: 0;
-  margin-bottom: 10px;
+  margin-bottom: 9px;
 }
 ul ul,
 ul ol,
@@ -1505,12 +1505,12 @@ ol ol {
 
 dl {
   margin-top: 0;
-  margin-bottom: 20px;
+  margin-bottom: 18px;
 }
 
 dt,
 dd {
-  line-height: 1.428571429;
+  line-height: 1.2;
 }
 
 dt {
@@ -1555,9 +1555,9 @@ abbr[data-original-title] {
 }
 
 blockquote {
-  padding: 10px 20px;
-  margin: 0 0 20px;
-  font-size: 17.5px;
+  padding: 9px 18px;
+  margin: 0 0 18px;
+  font-size: 18.75px;
   border-left: 5px solid #eeeeee;
 }
 blockquote p:last-child,
@@ -1570,7 +1570,7 @@ blockquote small,
 blockquote .small {
   display: block;
   font-size: 80%;
-  line-height: 1.428571429;
+  line-height: 1.2;
   color: #777777;
 }
 blockquote footer:before,
@@ -1610,9 +1610,9 @@ blockquote:after {
 }
 
 address {
-  margin-bottom: 20px;
+  margin-bottom: 18px;
   font-style: normal;
-  line-height: 1.428571429;
+  line-height: 1.2;
 }
 
 code,
@@ -1646,10 +1646,10 @@ kbd kbd {
 
 pre {
   display: block;
-  padding: calc((20px - 100%) / 2);
-  margin: 0 0 10px;
-  font-size: 13px;
-  line-height: 1.428571429;
+  padding: calc((18px - 100%) / 2);
+  margin: 0 0 9px;
+  font-size: 14px;
+  line-height: 1.2;
   word-break: break-all;
   word-wrap: break-word;
   color: #333333;
@@ -2427,7 +2427,7 @@ th {
 .table {
   width: 100%;
   max-width: 100%;
-  margin-bottom: 20px;
+  margin-bottom: 18px;
 }
 .table > thead > tr > th,
 .table > thead > tr > td,
@@ -2436,7 +2436,7 @@ th {
 .table > tfoot > tr > th,
 .table > tfoot > tr > td {
   padding: 10px 0px 10px 20px;
-  line-height: 1.428571429;
+  line-height: 1.2;
   vertical-align: top;
   border-top: 1px solid #eee;
 }
@@ -2602,7 +2602,7 @@ table th[class*=col-] {
 @media screen and (max-width: 767px) {
   .table-responsive {
     width: 100%;
-    margin-bottom: 15px;
+    margin-bottom: 13.5px;
     overflow-y: hidden;
     overflow-x: auto;
     -ms-overflow-style: -ms-autohiding-scrollbar;
@@ -2658,8 +2658,8 @@ legend {
   display: block;
   width: 100%;
   padding: 0;
-  margin-bottom: 20px;
-  font-size: 21px;
+  margin-bottom: 18px;
+  font-size: 22.5px;
   line-height: inherit;
   color: #333333;
   border: 0;
@@ -2711,8 +2711,8 @@ input[type=checkbox]:focus {
 output {
   display: block;
   padding-top: 7px;
-  font-size: 14px;
-  line-height: 1.428571429;
+  font-size: 15px;
+  line-height: 1.2;
   color: #555555;
 }
 
@@ -2734,10 +2734,10 @@ input[type=tel],
 input[type=color] {
   display: block;
   width: 100%;
-  height: 34px;
+  height: 32px;
   padding: 6px 12px;
-  font-size: 14px;
-  line-height: 1.428571429;
+  font-size: 15px;
+  line-height: 1.2;
   color: #555555;
   background-color: #fff;
   background-image: none;
@@ -2888,8 +2888,8 @@ input[type=date],
 input[type=time],
 input[type=datetime-local],
 input[type=month] {
-  line-height: 34px;
-  line-height: 1.428571429 \0 ;
+  line-height: 32px;
+  line-height: 1.2 \0 ;
 }
 input[type=date].input-sm, .input-group-sm > input[type=date].form-control,
 .input-group-sm > input[type=date].input-group-addon,
@@ -2909,7 +2909,7 @@ input[type=month].input-sm,
 .input-group-sm > input[type=month].input-group-addon,
 .input-group-sm > .input-group-btn > input[type=month].btn,
 .form-horizontal .form-group-sm input[type=month].form-control {
-  line-height: 30px;
+  line-height: 31px;
 }
 input[type=date].input-lg, .input-group-lg > input[type=date].form-control,
 .input-group-lg > input[type=date].input-group-addon,
@@ -2929,7 +2929,7 @@ input[type=month].input-lg,
 .input-group-lg > input[type=month].input-group-addon,
 .input-group-lg > .input-group-btn > input[type=month].btn,
 .form-horizontal .form-group-lg input[type=month].form-control {
-  line-height: 46px;
+  line-height: 48px;
 }
 
 .form-group {
@@ -2940,7 +2940,7 @@ input[type=month].input-lg,
 .checkbox {
   position: relative;
   display: block;
-  min-height: 20px;
+  min-height: 18px;
   margin-top: 10px;
   margin-bottom: 10px;
 }
@@ -3018,9 +3018,9 @@ fieldset[disabled] .checkbox label {
 .input-sm, .input-group-sm > .form-control,
 .input-group-sm > .input-group-addon,
 .input-group-sm > .input-group-btn > .btn, .form-horizontal .form-group-sm .form-control {
-  height: 30px;
+  height: 31px;
   padding: 5px 10px;
-  font-size: 12px;
+  font-size: 13px;
   line-height: 1.5;
   border-radius: 3px;
 }
@@ -3028,8 +3028,8 @@ fieldset[disabled] .checkbox label {
 select.input-sm, .input-group-sm > select.form-control,
 .input-group-sm > select.input-group-addon,
 .input-group-sm > .input-group-btn > select.btn, .form-horizontal .form-group-sm select.form-control {
-  height: 30px;
-  line-height: 30px;
+  height: 31px;
+  line-height: 31px;
 }
 
 textarea.input-sm, .input-group-sm > textarea.form-control,
@@ -3046,9 +3046,9 @@ select[multiple].input-sm,
 .input-lg, .input-group-lg > .form-control,
 .input-group-lg > .input-group-addon,
 .input-group-lg > .input-group-btn > .btn, .form-horizontal .form-group-lg .form-control {
-  height: 46px;
+  height: 48px;
   padding: 10px 16px;
-  font-size: 18px;
+  font-size: 19px;
   line-height: 1.33;
   border-radius: 6px;
 }
@@ -3056,8 +3056,8 @@ select[multiple].input-sm,
 select.input-lg, .input-group-lg > select.form-control,
 .input-group-lg > select.input-group-addon,
 .input-group-lg > .input-group-btn > select.btn, .form-horizontal .form-group-lg select.form-control {
-  height: 46px;
-  line-height: 46px;
+  height: 48px;
+  line-height: 48px;
 }
 
 textarea.input-lg, .input-group-lg > textarea.form-control,
@@ -3075,35 +3075,35 @@ select[multiple].input-lg,
   position: relative;
 }
 .has-feedback .form-control {
-  padding-right: 42.5px;
+  padding-right: 40px;
 }
 
 .form-control-feedback {
   position: absolute;
-  top: 25px;
+  top: 23px;
   right: 0;
   z-index: 2;
   display: block;
-  width: 34px;
-  height: 34px;
-  line-height: 34px;
+  width: 32px;
+  height: 32px;
+  line-height: 32px;
   text-align: center;
 }
 
 .input-lg + .form-control-feedback, .input-group-lg > .form-control + .form-control-feedback,
 .input-group-lg > .input-group-addon + .form-control-feedback,
 .input-group-lg > .input-group-btn > .btn + .form-control-feedback, .form-horizontal .form-group-lg .form-control + .form-control-feedback {
-  width: 46px;
-  height: 46px;
-  line-height: 46px;
+  width: 48px;
+  height: 48px;
+  line-height: 48px;
 }
 
 .input-sm + .form-control-feedback, .input-group-sm > .form-control + .form-control-feedback,
 .input-group-sm > .input-group-addon + .form-control-feedback,
 .input-group-sm > .input-group-btn > .btn + .form-control-feedback, .form-horizontal .form-group-sm .form-control + .form-control-feedback {
-  width: 30px;
-  height: 30px;
-  line-height: 30px;
+  width: 31px;
+  height: 31px;
+  line-height: 31px;
 }
 
 .has-success .help-block,
@@ -3195,7 +3195,7 @@ select[multiple].input-lg,
   display: block;
   margin-top: 5px;
   margin-bottom: 10px;
-  color: #7c7c7a;
+  color: #777775;
 }
 
 @media (min-width: 768px) {
@@ -3261,7 +3261,7 @@ select[multiple].input-lg,
 }
 .form-horizontal .radio,
 .form-horizontal .checkbox {
-  min-height: 27px;
+  min-height: 25px;
 }
 .form-horizontal .form-group {
   margin-left: -20px;
@@ -3306,8 +3306,8 @@ select[multiple].input-lg,
   border: 1px solid transparent;
   white-space: nowrap;
   padding: 6px 12px;
-  font-size: 14px;
-  line-height: 1.428571429;
+  font-size: 15px;
+  line-height: 1.2;
   border-radius: 3px;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -3381,23 +3381,23 @@ select[multiple].input-lg,
 
 .btn-primary {
   color: #fff;
-  background-color: #D94F00;
+  background-color: #C03E14;
   border-color: #D95100;
 }
 .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .btn-primary.dropdown-toggle {
   color: #fff;
-  background-color: #a63c00;
+  background-color: #922f0f;
   border-color: #9c3a00;
 }
 .btn-primary:active, .btn-primary.active, .open > .btn-primary.dropdown-toggle {
   background-image: none;
 }
 .btn-primary.disabled, .btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled:active, .btn-primary.disabled.active, .btn-primary[disabled], .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled]:active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary, fieldset[disabled] .btn-primary:hover, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary.active {
-  background-color: #D94F00;
+  background-color: #C03E14;
   border-color: #D95100;
 }
 .btn-primary .badge {
-  color: #D94F00;
+  color: #C03E14;
   background-color: #fff;
 }
 
@@ -3490,7 +3490,7 @@ select[multiple].input-lg,
 }
 
 .btn-link {
-  color: #D94F00;
+  color: #C03E14;
   font-weight: normal;
   cursor: pointer;
   border-radius: 0;
@@ -3504,7 +3504,7 @@ select[multiple].input-lg,
   border-color: transparent;
 }
 .btn-link:hover, .btn-link:focus {
-  color: #8d3300;
+  color: #7b280d;
   text-decoration: underline;
   background-color: transparent;
 }
@@ -3515,21 +3515,21 @@ select[multiple].input-lg,
 
 .btn-lg, .btn-group-lg > .btn {
   padding: 10px 16px;
-  font-size: 18px;
+  font-size: 19px;
   line-height: 1.33;
   border-radius: 6px;
 }
 
 .btn-sm, .btn-group-sm > .btn {
   padding: 5px 10px;
-  font-size: 12px;
+  font-size: 13px;
   line-height: 1.5;
   border-radius: 3px;
 }
 
 .btn-xs, .btn-group-xs > .btn {
   padding: 1px 5px;
-  font-size: 12px;
+  font-size: 13px;
   line-height: 1.5;
   border-radius: 3px;
 }
@@ -3613,7 +3613,7 @@ tbody.collapse.in {
   padding: 5px 0;
   margin: 2px 0 0;
   list-style: none;
-  font-size: 14px;
+  font-size: 15px;
   text-align: left;
   background-color: #fff;
   border: 1px solid #ccc;
@@ -3629,7 +3629,7 @@ tbody.collapse.in {
 }
 .dropdown-menu .divider {
   height: 1px;
-  margin: 9px 0;
+  margin: 8px 0;
   overflow: hidden;
   background-color: #e5e5e5;
 }
@@ -3638,7 +3638,7 @@ tbody.collapse.in {
   padding: 3px 20px;
   clear: both;
   font-weight: normal;
-  line-height: 1.428571429;
+  line-height: 1.2;
   color: #333333;
   white-space: nowrap;
 }
@@ -3653,7 +3653,7 @@ tbody.collapse.in {
   color: #fff;
   text-decoration: none;
   outline: 0;
-  background-color: #D94F00;
+  background-color: #C03E14;
 }
 
 .dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus {
@@ -3688,8 +3688,8 @@ tbody.collapse.in {
 .dropdown-header {
   display: block;
   padding: 3px 20px;
-  font-size: 12px;
-  line-height: 1.428571429;
+  font-size: 13px;
+  line-height: 1.2;
   color: #777777;
   white-space: nowrap;
 }
@@ -3975,7 +3975,7 @@ tbody.collapse.in {
 
 .input-group-addon {
   padding: 6px 12px;
-  font-size: 14px;
+  font-size: 15px;
   font-weight: normal;
   line-height: 1;
   color: #555555;
@@ -3988,14 +3988,14 @@ tbody.collapse.in {
 .input-group-sm > .input-group-addon,
 .input-group-sm > .input-group-btn > .input-group-addon.btn {
   padding: 5px 10px;
-  font-size: 12px;
+  font-size: 13px;
   border-radius: 3px;
 }
 .input-group-addon.input-lg, .form-horizontal .form-group-lg .input-group-addon.form-control,
 .input-group-lg > .input-group-addon,
 .input-group-lg > .input-group-btn > .input-group-addon.btn {
   padding: 10px 16px;
-  font-size: 18px;
+  font-size: 19px;
   border-radius: 6px;
 }
 .input-group-addon input[type=radio],
@@ -4092,11 +4092,11 @@ tbody.collapse.in {
 }
 .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
   background-color: #eeeeee;
-  border-color: #D94F00;
+  border-color: #C03E14;
 }
 .nav .nav-divider {
   height: 1px;
-  margin: 9px 0;
+  margin: 8px 0;
   overflow: hidden;
   background-color: #e5e5e5;
 }
@@ -4113,7 +4113,7 @@ tbody.collapse.in {
 }
 .nav-tabs > li > a {
   margin-right: 2px;
-  line-height: 1.428571429;
+  line-height: 1.2;
   border: 1px solid transparent;
   border-radius: 3px 3px 0 0;
 }
@@ -4135,7 +4135,7 @@ tbody.collapse.in {
 }
 .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
   color: #fff;
-  background-color: #D94F00;
+  background-color: #C03E14;
 }
 
 .nav-stacked > li {
@@ -4346,7 +4346,7 @@ tbody.collapse.in {
 .navbar-brand {
   float: left;
   padding: 15px 20px;
-  font-size: 18px;
+  font-size: 19px;
   height: 50px;
 }
 .navbar-brand:hover, .navbar-brand:focus {
@@ -4394,7 +4394,7 @@ tbody.collapse.in {
 .navbar-nav > li > a {
   padding-top: 10px;
   padding-bottom: 10px;
-  line-height: 20px;
+  line-height: 18px;
 }
 @media (max-width: 767px) {
   .navbar-nav .open .dropdown-menu {
@@ -4411,7 +4411,7 @@ tbody.collapse.in {
     padding: 5px 15px 5px 25px;
   }
   .navbar-nav .open .dropdown-menu > li > a {
-    line-height: 20px;
+    line-height: 18px;
   }
   .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-nav .open .dropdown-menu > li > a:focus {
     background-image: none;
@@ -4450,8 +4450,8 @@ tbody.collapse.in {
   border-bottom: 1px solid transparent;
   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
-  margin-top: 8px;
-  margin-bottom: 8px;
+  margin-top: 9px;
+  margin-bottom: 9px;
 }
 @media (max-width: 767px) {
   .navbar-form .form-group {
@@ -4486,12 +4486,12 @@ tbody.collapse.in {
 }
 
 .navbar-btn {
-  margin-top: 8px;
-  margin-bottom: 8px;
+  margin-top: 9px;
+  margin-bottom: 9px;
 }
 .navbar-btn.btn-sm, .btn-group-sm > .navbar-btn.btn {
-  margin-top: 10px;
-  margin-bottom: 10px;
+  margin-top: 9.5px;
+  margin-bottom: 9.5px;
 }
 .navbar-btn.btn-xs, .btn-group-xs > .navbar-btn.btn {
   margin-top: 14px;
@@ -4499,8 +4499,8 @@ tbody.collapse.in {
 }
 
 .navbar-text {
-  margin-top: 15px;
-  margin-bottom: 15px;
+  margin-top: 16px;
+  margin-bottom: 16px;
 }
 @media (min-width: 768px) {
   .navbar-text {
@@ -4514,29 +4514,29 @@ tbody.collapse.in {
 }
 
 .navbar-default {
-  background-color: #3C3C3B;
-  border-color: #2b2b2b;
+  background-color: #fff;
+  border-color: #eeeeee;
 }
 .navbar-default .navbar-brand {
-  color: #F7F7F7;
+  color: #373736;
 }
 .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
-  color: #dedede;
+  color: #1d1d1d;
   background-color: transparent;
 }
 .navbar-default .navbar-text {
-  color: #F7F7F7;
+  color: #373736;
 }
 .navbar-default .navbar-nav > li > a {
-  color: #F7F7F7;
+  color: #373736;
 }
 .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
-  color: #D94F00;
+  color: #C03E14;
   background-color: transparent;
 }
 .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
   color: #555;
-  background-color: #2b2b2b;
+  background-color: #eeeeee;
 }
 .navbar-default .navbar-nav > .disabled > a, .navbar-default .navbar-nav > .disabled > a:hover, .navbar-default .navbar-nav > .disabled > a:focus {
   color: #ccc;
@@ -4553,23 +4553,23 @@ tbody.collapse.in {
 }
 .navbar-default .navbar-collapse,
 .navbar-default .navbar-form {
-  border-color: #2b2b2b;
+  border-color: #eeeeee;
 }
 .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
-  background-color: #2b2b2b;
+  background-color: #eeeeee;
   color: #555;
 }
 @media (max-width: 767px) {
   .navbar-default .navbar-nav .open .dropdown-menu > li > a {
-    color: #F7F7F7;
+    color: #373736;
   }
   .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
-    color: #D94F00;
+    color: #C03E14;
     background-color: transparent;
   }
   .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
     color: #555;
-    background-color: #2b2b2b;
+    background-color: #eeeeee;
   }
   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
     color: #ccc;
@@ -4577,16 +4577,16 @@ tbody.collapse.in {
   }
 }
 .navbar-default .navbar-link {
-  color: #F7F7F7;
+  color: #373736;
 }
 .navbar-default .navbar-link:hover {
-  color: #D94F00;
+  color: #C03E14;
 }
 .navbar-default .btn-link {
-  color: #F7F7F7;
+  color: #373736;
 }
 .navbar-default .btn-link:hover, .navbar-default .btn-link:focus {
-  color: #D94F00;
+  color: #C03E14;
 }
 .navbar-default .btn-link[disabled]:hover, .navbar-default .btn-link[disabled]:focus, fieldset[disabled] .navbar-default .btn-link:hover, fieldset[disabled] .navbar-default .btn-link:focus {
   color: #ccc;
@@ -4679,7 +4679,7 @@ tbody.collapse.in {
 
 .breadcrumb {
   padding: 8px 15px;
-  margin-bottom: 20px;
+  margin-bottom: 18px;
   list-style: none;
   background-color: #f5f5f5;
   border-radius: 3px;
@@ -4699,7 +4699,7 @@ tbody.collapse.in {
 .pagination {
   display: inline-block;
   padding-left: 0;
-  margin: 20px 0;
+  margin: 18px 0;
   border-radius: 3px;
 }
 .pagination > li {
@@ -4710,9 +4710,9 @@ tbody.collapse.in {
   position: relative;
   float: left;
   padding: 6px 12px;
-  line-height: 1.428571429;
+  line-height: 1.2;
   text-decoration: none;
-  color: #D94F00;
+  color: #C03E14;
   background-color: #fff;
   border: 1px solid #ddd;
   margin-left: -1px;
@@ -4731,7 +4731,7 @@ tbody.collapse.in {
 .pagination > li > a:hover, .pagination > li > a:focus,
 .pagination > li > span:hover,
 .pagination > li > span:focus {
-  color: #8d3300;
+  color: #7b280d;
   background-color: #eeeeee;
   border-color: #ddd;
 }
@@ -4741,8 +4741,8 @@ tbody.collapse.in {
 .pagination > .active > span:focus {
   z-index: 2;
   color: #fff;
-  background-color: #D94F00;
-  border-color: #D94F00;
+  background-color: #C03E14;
+  border-color: #C03E14;
   cursor: default;
 }
 .pagination > .disabled > span,
@@ -4760,7 +4760,7 @@ tbody.collapse.in {
 .pagination-lg > li > a,
 .pagination-lg > li > span {
   padding: 10px 16px;
-  font-size: 18px;
+  font-size: 19px;
 }
 .pagination-lg > li:first-child > a,
 .pagination-lg > li:first-child > span {
@@ -4776,7 +4776,7 @@ tbody.collapse.in {
 .pagination-sm > li > a,
 .pagination-sm > li > span {
   padding: 5px 10px;
-  font-size: 12px;
+  font-size: 13px;
 }
 .pagination-sm > li:first-child > a,
 .pagination-sm > li:first-child > span {
@@ -4791,7 +4791,7 @@ tbody.collapse.in {
 
 .pager {
   padding-left: 0;
-  margin: 20px 0;
+  margin: 18px 0;
   list-style: none;
   text-align: center;
 }
@@ -4869,10 +4869,10 @@ a.label:hover, a.label:focus {
 }
 
 .label-primary {
-  background-color: #D94F00;
+  background-color: #C03E14;
 }
 .label-primary[href]:hover, .label-primary[href]:focus {
-  background-color: #a63c00;
+  background-color: #922f0f;
 }
 
 .label-success {
@@ -4907,7 +4907,7 @@ a.label:hover, a.label:focus {
   display: inline-block;
   min-width: 10px;
   padding: 3px 7px;
-  font-size: 12px;
+  font-size: 13px;
   font-weight: bold;
   color: #fff;
   line-height: 1;
@@ -4929,7 +4929,7 @@ a.label:hover, a.label:focus {
   padding: 1px 5px;
 }
 a.list-group-item.active > .badge, .nav-pills > .active > a > .badge {
-  color: #D94F00;
+  color: #C03E14;
   background-color: #fff;
 }
 .nav-pills > li > a > .badge {
@@ -4954,7 +4954,7 @@ a.badge:hover, a.badge:focus {
 }
 .jumbotron p {
   margin-bottom: 15px;
-  font-size: 21px;
+  font-size: 23px;
   font-weight: 200;
 }
 .jumbotron > hr {
@@ -4977,15 +4977,15 @@ a.badge:hover, a.badge:focus {
   }
   .jumbotron h1,
   .jumbotron .h1 {
-    font-size: 63px;
+    font-size: 67.5px;
   }
 }
 
 .thumbnail {
   display: block;
   padding: 4px;
-  margin-bottom: 20px;
-  line-height: 1.428571429;
+  margin-bottom: 18px;
+  line-height: 1.2;
   background-color: #fff;
   border: 1px solid #ddd;
   border-radius: 3px;
@@ -5004,18 +5004,18 @@ a.badge:hover, a.badge:focus {
 }
 .thumbnail .caption {
   padding: 9px;
-  color: #3C3C3B;
+  color: #373736;
 }
 
 a.thumbnail:hover,
 a.thumbnail:focus,
 a.thumbnail.active {
-  border-color: #D94F00;
+  border-color: #C03E14;
 }
 
 .alert {
   padding: 15px;
-  margin-bottom: 20px;
+  margin-bottom: 18px;
   border: 1px solid transparent;
   border-radius: 3px;
 }
@@ -5112,7 +5112,7 @@ a.thumbnail.active {
 }
 .progress {
   overflow: hidden;
-  height: 20px;
+  height: 18px;
   background-color: #f5f5f5;
   border-radius: 3px;
   position: relative;
@@ -5124,11 +5124,11 @@ a.thumbnail.active {
   float: left;
   width: 0%;
   height: 100%;
-  font-size: 12px;
-  line-height: 20px;
+  font-size: 13px;
+  line-height: 18px;
   color: #fff;
   text-align: center;
-  background-color: #D94F00;
+  background-color: #C03E14;
   position: relative;
   z-index: 2;
   -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
@@ -5243,7 +5243,7 @@ a.thumbnail.active {
 .list-group-item {
   position: relative;
   display: block;
-  padding: 6px 8px;
+  padding: 6px 12px;
   margin-bottom: -1px;
   background-color: #fff;
 }
@@ -5258,7 +5258,7 @@ a.thumbnail.active {
 }
 
 a.list-group-item {
-  color: #3C3C3B;
+  color: #373736;
   border-radius: 0;
 }
 a.list-group-item .list-group-item-heading {
@@ -5266,11 +5266,11 @@ a.list-group-item .list-group-item-heading {
 }
 a.list-group-item:hover, a.list-group-item:focus {
   text-decoration: none;
-  color: #D94F00;
+  color: #C03E14;
   background-color: #f5f5f5;
 }
 a.list-group-item:hover:before, a.list-group-item:focus:before {
-  background: #D94F00;
+  background: #C03E14;
   content: "";
   height: 42px;
   left: 0;
@@ -5293,7 +5293,7 @@ a.list-group-item:hover:before, a.list-group-item:focus:before {
   z-index: 2;
 }
 .list-group-item.active:before, .list-group-item.active:hover:before, .list-group-item.active:focus:before {
-  background: #D94F00;
+  background: #C03E14;
   content: "";
   height: 42px;
   left: 0;
@@ -5311,10 +5311,10 @@ a.list-group-item:hover:before, a.list-group-item:focus:before {
   color: inherit;
 }
 .list-group-item.active .list-group-item-text, .list-group-item.active:hover .list-group-item-text, .list-group-item.active:focus .list-group-item-text {
-  color: #ffc6a6;
+  color: #f6bcaa;
 }
 .list-group-item.active + .collapse > .list-group-item:before, .list-group-item.active:hover + .collapse > .list-group-item:before, .list-group-item.active:focus + .collapse > .list-group-item:before {
-  background: #D94F00;
+  background: #C03E14;
   content: "";
   height: 42px;
   left: 0;
@@ -5418,7 +5418,7 @@ a.list-group-item-danger.active, a.list-group-item-danger.active:hover, a.list-g
 }
 
 .panel {
-  margin-bottom: 20px;
+  margin-bottom: 18px;
   background-color: #fff;
   border: 1px solid transparent;
   border-radius: 3px;
@@ -5450,7 +5450,7 @@ a.list-group-item-danger.active, a.list-group-item-danger.active:hover, a.list-g
 .panel-title {
   margin-top: 0;
   margin-bottom: 0;
-  font-size: 16px;
+  font-size: 17px;
   color: inherit;
 }
 .panel-title > a {
@@ -5612,7 +5612,7 @@ a.list-group-item-danger.active, a.list-group-item-danger.active:hover, a.list-g
 }
 
 .panel-group {
-  margin-bottom: 20px;
+  margin-bottom: 18px;
 }
 .panel-group .panel {
   margin-bottom: 0;
@@ -5654,22 +5654,22 @@ a.list-group-item-danger.active, a.list-group-item-danger.active:hover, a.list-g
 }
 
 .panel-primary {
-  border-color: #D94F00;
+  border-color: #C03E14;
 }
 .panel-primary > .panel-heading {
   color: #fff;
-  background-color: #D94F00;
-  border-color: #D94F00;
+  background-color: #C03E14;
+  border-color: #C03E14;
 }
 .panel-primary > .panel-heading + .panel-collapse > .panel-body {
-  border-top-color: #D94F00;
+  border-top-color: #C03E14;
 }
 .panel-primary > .panel-heading .badge {
-  color: #D94F00;
+  color: #C03E14;
   background-color: #fff;
 }
 .panel-primary > .panel-footer + .panel-collapse > .panel-body {
-  border-bottom-color: #D94F00;
+  border-bottom-color: #C03E14;
 }
 
 .panel-success {
@@ -5801,7 +5801,7 @@ a.list-group-item-danger.active, a.list-group-item-danger.active:hover, a.list-g
 
 .close {
   float: right;
-  font-size: 21px;
+  font-size: 22.5px;
   font-weight: bold;
   line-height: 1;
   color: #000;
@@ -5898,7 +5898,7 @@ button.close {
 .modal-header {
   padding: 15px;
   border-bottom: 1px solid #e5e5e5;
-  min-height: 16.428571429px;
+  min-height: 16.2px;
 }
 
 .modal-header .close {
@@ -5907,7 +5907,7 @@ button.close {
 
 .modal-title {
   margin: 0;
-  line-height: 1.428571429;
+  line-height: 1.2;
 }
 
 .modal-body {
@@ -5969,7 +5969,7 @@ button.close {
   z-index: 1070;
   display: block;
   visibility: visible;
-  font-size: 12px;
+  font-size: 13px;
   line-height: 1.4;
   opacity: 0;
   filter: alpha(opacity=0);
@@ -6100,7 +6100,7 @@ button.close {
 .popover-title {
   margin: 0;
   padding: 8px 14px;
-  font-size: 14px;
+  font-size: 15px;
   font-weight: normal;
   line-height: 18px;
   background-color: #f7f7f7;
@@ -6838,12 +6838,18 @@ div.content-box.wizard div img {
   margin: 100px auto 15px auto;
 }
 .login-modal-head {
-  background: #3C3C3B;
-  height: 75px;
+  background: #fff;
+  height: 70px !important;
   padding: 0 20px;
 }
+.login-modal-head .navbar-brand {
+  padding: 5px 0px !important;
+}
+.login-modal-head .navbar-brand img {
+  height: 60px;
+}
 .login-modal-content {
-  padding: 20px 20px 20px 20px;
+  padding: 0px 20px 20px 20px;
 }
 
 @media (min-width: 768px) {
@@ -6975,7 +6981,7 @@ main.page-content.col-lg-12 {
 }
 
 button.toggle-sidebar {
-  color: #FFF;
+  color: #373736;
   background-color: transparent;
   font-size: 14px;
   border: none;
@@ -7142,7 +7148,7 @@ hr {
   padding-left: 44px;
 }
 .list-group-item:before {
-  background: #D94F00;
+  background: #C03E14;
   content: "";
   height: 42px;
   min-height: 100%;
@@ -7173,7 +7179,7 @@ hr {
 }
 
 .active-menu a:before {
-  background: #ffa673;
+  background: #f1987c;
 }
 
 .alert.alert-danger {
@@ -7185,7 +7191,13 @@ hr {
 }
 
 .navbar-brand {
-  padding: 10px 20px;
+  padding: 1px 11px;
+}
+.navbar-brand img.brand-logo {
+  height: 48px;
+}
+.navbar-brand img.brand-icon {
+  height: 48px;
 }
 
 .label-opnsense {
diff --git a/src/opnsense/www/themes/opnsense/build/images/default-logo.svg b/src/opnsense/www/themes/opnsense/build/images/default-logo.svg
index d5daaef39..688ba464e 100644
--- a/src/opnsense/www/themes/opnsense/build/images/default-logo.svg
+++ b/src/opnsense/www/themes/opnsense/build/images/default-logo.svg
@@ -1,95 +1,41 @@
-
-
-
-
- 
-  
-  
-   
-   
-   
-  
-  
-   
-   
-  
-  
-  
-  
-   
-   
-   
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
- 
- 
-  
-  
-   
-  
-  
-   
-   
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
- 
-
+
+
+
+    
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+        
+    
+
diff --git a/src/opnsense/www/themes/opnsense/build/images/favicon.png b/src/opnsense/www/themes/opnsense/build/images/favicon.png
index 3e6dde97264d7a9305e8efb15b48002d2bb63484..9a8472bc4faa57ecc19539c58f42b5fc61099cb1 100644
GIT binary patch
literal 2100
zcma)7c~BEq99|9uQIJ7Iv}m_WMGKQ`5(Lef7()Vta)=lt9HWF}lk7mUVY4v-k4meE
zg13xXDLU9Xr~?-2eWEg6R76J|K`mMxKnsXei>X@sl5i>2=^vZyd*AoFk6j%f7wPUc
z!3}~S_b7=t0sM2UkLz&oJ4sMb1wq5c5>gp0i;ck)q?RdHk{LMDtknY?f_MV6UarW*
zX*dH{6FNTf?8F%aCX{?6DI}H^s~6!KLXu12^K#>)irh>ESBVH_x$(>xP@u(WIc(Nu
z=?s{ekJ$8L;N5zSBCw4@XYvtQY&&kEH{`(DOFg4IHFe=ocM@_ru7(#
znoK69DVRx8YLw08a#0osop`z8Z_ibMEc<&g1DI&h~YgmR%8gBCR87x
zTah7jkn7mkPe-BEz88pr4qpTk(VNuw9O{ePAkER^Xaa5^jg$fpUxe#ue_JkqHB3a|
zavB$dhmUYroM{X;hrwb?*)uQ>2jj4VSZo%npBzgn302O2l7lf$C?I2l*`Pg?a$5d>
z`27jTtZchepfx|~(SVGI%pxh^9Ec&<=Ij6zB@)F`q>9J_m?0rD42}vHg|fM!p$ra_
zZR1+&hQ$+RJWD1fw7AXydW?^R*rOf*lRpC5Y|jIu1q|2~S}Ti1Y2|7>iBQs-eq96i
zF}P0sAz-afmeJbai8=yQlw)(wCLbf;lh;41UP_QYH-!G=5OXLEVD(dWTxay3aixIwSy|jWB2r06F^|*e_sFq5Yc*
z9Qt=1t^-{}flU^EvAG0-9P$Xz4@3F@f~IaXZmf$A6MC-_9BRX*-q*`kt~hjMs?*-s
z4PHKyg7Gh!+O9@EctjoWx)G`g@)m1z8Bfu2Z3E`I1}V5*S=c1KSAVOffOo#c(lWi(
zPgTD>q$J@+?tRve!Cc1U9?ZvQtDpPic3Io59eWDO_HRC$zWn>YmZ4P{N0`6N?>PER
z1s<{|D4p;wjh8Z}@ECrwYkLEpxthMZd}&|T_O4w4`Y+4gtMr=LEbYx?Q<{gE%P7@e&<#Cwx9rQjb9a@)YBJR_+;OM+=>3zO&%h^XgkF+tfFO@r
z>*G)y>)joO~->9Rb}
zRVdjZ2+*Es?w%Rp(e2Nz&d#r@3{0xoYFsjVW_s$)4)vuv%el=td)yo7M2k;%wU={g
zO}P;E-0hkN6$Lu0GPZoda@y_T;D5o%d6X~exvfU|cAfUguvfCIl*0=mOV^e{)s=yB
zE_}}SHfDyS2}#9^i+txq|8aN~-ZIwFsYva5Fa4xw*Tq`M;ZCh%_Pe!d(VmCA#1+nS
zgM>G~?t2Zq)Olt~m6-eUWXG7_7E;G9K8D!om7kw5#e^)W8aoN&{o>NYd
zbu})oF&Y0<8|NNbTvu~_Y3(D<>qVj$`Ic;T&x-B5GV|GO^(m8BEu!6+>h_bQ@xiZs
h53CvSx1g+m>lDw(Jl!a)_|E#Vj|z_ySB9m3`!C-M>Ky<8

literal 2938
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

diff --git a/src/opnsense/www/themes/opnsense/build/images/icon-logo.svg b/src/opnsense/www/themes/opnsense/build/images/icon-logo.svg
index 2e3ac8998..702d2a847 100644
--- a/src/opnsense/www/themes/opnsense/build/images/icon-logo.svg
+++ b/src/opnsense/www/themes/opnsense/build/images/icon-logo.svg
@@ -1,84 +1,10 @@
 
 
-
-    
-        
+
+    
+        
     
-    
-        
+    
+        
     
-    
-        
-    
-    
-        
-    
-    
-        
-    
-    
-        
-    
-    
-        
-    
-    
-        
-    
-    
-        
-    
-    
-        
-    
-    
-        
-    
-    
-        
-    
-    
-        
-    
-    
-        
-    
-    
-        
-    
-    
-        
-    
-    
-        
-    
-    
-        
-    
-    
-        
-    
-    
-        
-    
-    
-        
-    
-    
-        
-    
-    
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-        
-