From d55e2c55ef8b80b2e554ac5f52fc36b2e04068ea Mon Sep 17 00:00:00 2001
From: Ad Schellevis <ad@opnsense.org>
Date: Wed, 4 Dec 2024 08:55:16 +0100
Subject: [PATCH] ui: official OPNsense dark theme, minor spacing changes (top
 heading / login)

---
 .../stylesheets/bootstrap/_variables.scss     |  2 +-
 .../assets/stylesheets/main.scss              | 14 +++---
 .../themes/opnsense-dark/build/css/main.css   | 46 +++++++++----------
 3 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/src/opnsense/www/themes/opnsense-dark/assets/stylesheets/bootstrap/_variables.scss b/src/opnsense/www/themes/opnsense-dark/assets/stylesheets/bootstrap/_variables.scss
index b4d22e64d..a67c1fa4a 100644
--- a/src/opnsense/www/themes/opnsense-dark/assets/stylesheets/bootstrap/_variables.scss
+++ b/src/opnsense/www/themes/opnsense-dark/assets/stylesheets/bootstrap/_variables.scss
@@ -342,7 +342,7 @@ $container-lg:                 $container-large-desktop !default;
 //##
 
 // Basics of a navbar
-$navbar-height:                    50px !default;
+$navbar-height:                    60px !default;
 $navbar-margin-bottom:             0;
 $navbar-border-radius:             0;
 $navbar-padding-horizontal:        floor((calc($grid-gutter-width / 2))) !default;
diff --git a/src/opnsense/www/themes/opnsense-dark/assets/stylesheets/main.scss b/src/opnsense/www/themes/opnsense-dark/assets/stylesheets/main.scss
index 205efa943..10eac2ba2 100644
--- a/src/opnsense/www/themes/opnsense-dark/assets/stylesheets/main.scss
+++ b/src/opnsense/www/themes/opnsense-dark/assets/stylesheets/main.scss
@@ -97,8 +97,8 @@ body{
 }
 
 .page-content{
-  height: calc(100% - 52px);
-  padding-top: 52px;
+  height: calc(100% - 62px);
+  padding-top: 62px;
   position: relative;
   z-index: 1;
 
@@ -133,10 +133,10 @@ body{
 .page-side{
   border-right: 1px solid lighten(map-get($colors, content-background), 10%);
   height: 100% !important;
-  height: calc(100% - 52px) !important;
+  height: calc(100% - 62px) !important;
   left: 0;
   overflow: auto;
-  margin-top: 52px;
+  margin-top: 62px;
   position: fixed;
   top: 0;
   z-index: 3;
@@ -261,7 +261,7 @@ div.content-box.wizard {
         height: 75px !important;
         padding: 0 20px;
         .navbar-brand {
-          padding: 10px 0px !important;
+          padding: 7px 0px !important;
           img {
             height: 60px ;
           }
@@ -430,7 +430,7 @@ button.toggle-sidebar {
   background-color: transparent;
   font-size: 14px;
   border: none;
-  margin-top: 18px;
+  margin-top: 23px;
   float: left;
   outline: none;
 }
@@ -649,7 +649,7 @@ hr {
 }
 
 .navbar-brand {
-    padding: 1px 11px;
+    padding: 6px 11px;
 
     img.brand-logo {
       height: 48px;
diff --git a/src/opnsense/www/themes/opnsense-dark/build/css/main.css b/src/opnsense/www/themes/opnsense-dark/build/css/main.css
index 9c86f6eb5..9d2dfd7f0 100644
--- a/src/opnsense/www/themes/opnsense-dark/build/css/main.css
+++ b/src/opnsense/www/themes/opnsense-dark/build/css/main.css
@@ -4210,7 +4210,7 @@ tbody.collapse.in {
 
 .navbar {
   position: relative;
-  min-height: 50px;
+  min-height: 60px;
   margin-bottom: 0;
   border: 1px solid transparent;
 }
@@ -4348,7 +4348,7 @@ tbody.collapse.in {
   float: left;
   padding: 15px 20px;
   font-size: 19px;
-  height: 50px;
+  height: 60px;
 }
 .navbar-brand:hover, .navbar-brand:focus {
   text-decoration: none;
@@ -4364,8 +4364,8 @@ tbody.collapse.in {
   float: left;
   margin-right: 20px;
   padding: 9px 10px;
-  margin-top: 8px;
-  margin-bottom: 8px;
+  margin-top: 13px;
+  margin-bottom: 13px;
   background-color: transparent;
   background-image: none;
   border: 1px solid transparent;
@@ -4451,8 +4451,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: 9px;
-  margin-bottom: 9px;
+  margin-top: 14px;
+  margin-bottom: 14px;
 }
 @media (max-width: 767px) {
   .navbar-form .form-group {
@@ -4487,21 +4487,21 @@ tbody.collapse.in {
 }
 
 .navbar-btn {
-  margin-top: 9px;
-  margin-bottom: 9px;
-}
-.navbar-btn.btn-sm, .btn-group-sm > .navbar-btn.btn {
-  margin-top: 9.5px;
-  margin-bottom: 9.5px;
-}
-.navbar-btn.btn-xs, .btn-group-xs > .navbar-btn.btn {
   margin-top: 14px;
   margin-bottom: 14px;
 }
+.navbar-btn.btn-sm, .btn-group-sm > .navbar-btn.btn {
+  margin-top: 14.5px;
+  margin-bottom: 14.5px;
+}
+.navbar-btn.btn-xs, .btn-group-xs > .navbar-btn.btn {
+  margin-top: 19px;
+  margin-bottom: 19px;
+}
 
 .navbar-text {
-  margin-top: 16px;
-  margin-bottom: 16px;
+  margin-top: 21px;
+  margin-bottom: 21px;
 }
 @media (min-width: 768px) {
   .navbar-text {
@@ -6699,8 +6699,8 @@ body {
 }
 
 .page-content {
-  height: calc(100% - 52px);
-  padding-top: 52px;
+  height: calc(100% - 62px);
+  padding-top: 62px;
   position: relative;
   z-index: 1;
 }
@@ -6732,10 +6732,10 @@ body {
 .page-side {
   border-right: 1px solid #2f3446;
   height: 100% !important;
-  height: calc(100% - 52px) !important;
+  height: calc(100% - 62px) !important;
   left: 0;
   overflow: auto;
-  margin-top: 52px;
+  margin-top: 62px;
   position: fixed;
   top: 0;
   z-index: 3;
@@ -6843,7 +6843,7 @@ div.content-box.wizard div img {
   padding: 0 20px;
 }
 .login-modal-head .navbar-brand {
-  padding: 10px 0px !important;
+  padding: 7px 0px !important;
 }
 .login-modal-head .navbar-brand img {
   height: 60px;
@@ -6987,7 +6987,7 @@ button.toggle-sidebar {
   background-color: transparent;
   font-size: 14px;
   border: none;
-  margin-top: 18px;
+  margin-top: 23px;
   float: left;
   outline: none;
 }
@@ -7192,7 +7192,7 @@ hr {
 }
 
 .navbar-brand {
-  padding: 1px 11px;
+  padding: 6px 11px;
 }
 .navbar-brand img.brand-logo {
   height: 48px;