From 49f7da283eed55f829fbbc51665f112a34c1b6d8 Mon Sep 17 00:00:00 2001
From: Ad Schellevis <ad@opnsense.org>
Date: Fri, 31 Jan 2025 18:35:25 +0100
Subject: [PATCH] ui: theme - default (light) theme header fixes, closes
 https://github.com/opnsense/core/issues/8269

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

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 f8f984772..e03e76b7a 100644
--- a/src/opnsense/www/themes/opnsense/assets/stylesheets/bootstrap/_variables.scss
+++ b/src/opnsense/www/themes/opnsense/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/assets/stylesheets/main.scss b/src/opnsense/www/themes/opnsense/assets/stylesheets/main.scss
index b1f9f7fcc..527ab67af 100644
--- a/src/opnsense/www/themes/opnsense/assets/stylesheets/main.scss
+++ b/src/opnsense/www/themes/opnsense/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{
   background: #FFF;
   border-right: 1px solid rgba(0,0,0,.15);
   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;
@@ -254,7 +254,7 @@ body{
         height: 75px !important;
         padding: 0 20px;
         .navbar-brand {
-          padding: 10px 0px !important;
+          padding: 7px 0px !important;
           img {
             height: 60px ;
           }
@@ -424,7 +424,7 @@ button.toggle-sidebar {
   background-color: transparent;
   font-size: 14px;
   border: none;
-  margin-top: 18px;
+  margin-top: 23px;
   float: left;
   outline: none;
 }
@@ -643,7 +643,7 @@ hr {
 }
 
 .navbar-brand {
-    padding: 1px 11px;
+    padding: 6px 11px;
 
     img.brand-logo {
       height: 48px;
diff --git a/src/opnsense/www/themes/opnsense/build/css/main.css b/src/opnsense/www/themes/opnsense/build/css/main.css
index 54f624db5..32384c0b9 100644
--- a/src/opnsense/www/themes/opnsense/build/css/main.css
+++ b/src/opnsense/www/themes/opnsense/build/css/main.css
@@ -4209,7 +4209,7 @@ tbody.collapse.in {
 
 .navbar {
   position: relative;
-  min-height: 50px;
+  min-height: 60px;
   margin-bottom: 0;
   border: 1px solid transparent;
 }
@@ -4347,7 +4347,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;
@@ -4363,8 +4363,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;
@@ -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: 9px;
-  margin-bottom: 9px;
+  margin-top: 14px;
+  margin-bottom: 14px;
 }
 @media (max-width: 767px) {
   .navbar-form .form-group {
@@ -4486,21 +4486,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 {
@@ -6698,8 +6698,8 @@ body {
 }
 
 .page-content {
-  height: calc(100% - 52px);
-  padding-top: 52px;
+  height: calc(100% - 62px);
+  padding-top: 62px;
   position: relative;
   z-index: 1;
 }
@@ -6731,10 +6731,10 @@ body {
   background: #FFF;
   border-right: 1px solid rgba(0, 0, 0, 0.15);
   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;
@@ -6839,7 +6839,7 @@ body {
   padding: 0 20px;
 }
 .login-modal-head .navbar-brand {
-  padding: 10px 0px !important;
+  padding: 7px 0px !important;
 }
 .login-modal-head .navbar-brand img {
   height: 60px;
@@ -6984,7 +6984,7 @@ button.toggle-sidebar {
   background-color: transparent;
   font-size: 14px;
   border: none;
-  margin-top: 18px;
+  margin-top: 23px;
   float: left;
   outline: none;
 }
@@ -7190,7 +7190,7 @@ hr {
 }
 
 .navbar-brand {
-  padding: 1px 11px;
+  padding: 6px 11px;
 }
 .navbar-brand img.brand-logo {
   height: 48px;