add some depth to panels and convert tabs to spaces

2 files changed, 204 insertions, 202 deletions

diff --git a/src/usr/local/www/bootstrap/css/pfSense-dark.css b/src/usr/local/www/bootstrap/css/pfSense-dark.css
index f7ac626..a8d2bac 100644
--- a/src/usr/local/www/bootstrap/css/pfSense-dark.css
+++ b/src/usr/local/www/bootstrap/css/pfSense-dark.css
@@ -1,8 +1,8 @@
 @import url("/bootstrap/css/pfSense.css");
 
 body {
-	background-color: #212121;
-	color: #e0e0e0;
+    background-color: #212121;
+    color: #e0e0e0;
 }
 
 a {
@@ -26,11 +26,11 @@ h1 a:hover, h1 a:active {
 /** Content structure */
 
 .contains-table table {
-	border: 1px solid #ddd;
+    border: 1px solid #ddd;
 }
 
 .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
-	border-color: #303030;
+    border-color: #303030;
 }
 
 .table-hover>tbody>tr:hover, .table-striped>tbody>tr:nth-of-type(odd):hover {
@@ -38,33 +38,33 @@ h1 a:hover, h1 a:active {
 }
 
 table.sortable-theme-bootstrap {
-	color: #e0e0e0 !important;
-	background-color: #212121 !important;
+    color: #e0e0e0 !important;
+    background-color: #212121 !important;
 }
 
 .dropdown-menu {
-	background-color: #000;
-	opacity: .93;
-	border-radius: 10px;
+    background-color: #000;
+    opacity: .93;
+    border-radius: 10px;
 }
 
 .dropdown-menu>li>a {
-	color: #e0e0e0;
+    color: #e0e0e0;
 }
 
 .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
-	background-color: #303030;
-	color: #e0e0e0;
+    background-color: #303030;
+    color: #e0e0e0;
 }
 
 .page-header {
-	border: 0;
+    border: 0;
 }
 
 .breadcrumb {
-	background-color: #303030;
-	box-shadow: 1px 1px 3px #151515;
-	font-size: 22px;
+    background-color: #303030;
+    box-shadow: 1px 1px 3px #151515;
+    font-size: 22px;
 }
 
 .breadcrumb>li+li:before {
@@ -94,20 +94,20 @@ ul.context-links li a {
 }
 
 .navbar-nav >li>a {
-	border-bottom: 5px solid #000000;
+    border-bottom: 5px solid #000000;
 }
 
 .nav-tabs>li>a {
-	border-bottom: 5px solid #212121;
+    border-bottom: 5px solid #212121;
 }
 
 .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover, .nav-tabs>li>a:hover {
-	border-left: 1px solid #212121;
-	border-right: 1px solid #212121;
-	border-top: 1px solid #212121;
-	border-bottom: 5px solid #009688;
-	background-color: #212121;
-	color: #009688;
+    border-left: 1px solid #212121;
+    border-right: 1px solid #212121;
+    border-top: 1px solid #212121;
+    border-bottom: 5px solid #009688;
+    background-color: #212121;
+    color: #009688;
 }
 
 .nav-tabs {
@@ -168,14 +168,15 @@ caption {
 }
 
 .panel-default>.panel-heading {
-	color: #fff;
-	background-color: #303030;
-	border-color: #212121;
+    color: #fff;
+    background-color: #303030;
+    border-color: #212121;
 }
 
 .panel {
-	background-color: #424242;
-	border-color: #424242;
+    background-color: #424242;
+    border-color: #424242;
+    box-shadow: 0px 3px 7px rgba(0,0,0,.3);
 }
 
 .panel-footer {
@@ -183,17 +184,17 @@ caption {
 }
 
 .alert-warning {
-	color: #6D4C41;
+    color: #6D4C41;
     background-color: #FFF9C4;
     border-color: #FFEB3B;
 }
 
 .help-block {
-	color: #eeeeee;
+    color: #eeeeee;
 }
 
 .checkbox label, .radio label {
-	color: #eeeeee;
+    color: #eeeeee;
 }
 
 .table-striped>thead {
@@ -235,11 +236,11 @@ caption {
 
 /** Page footer */
 .footer {
-	background-color: #000;
+    background-color: #000;
 }
 
 .footer a {
-	color: #fff;
+    color: #fff;
 }
 
 /** Homepage / dashboard */
@@ -248,7 +249,7 @@ caption {
 }
 
 #widgetSequence {
-	border-top: 1px solid #ddd;
+    border-top: 1px solid #ddd;
 }
 
 a.list-group-item, .list-group-item {
@@ -267,72 +268,72 @@ a.list-group-item .list-group-item-heading, .list-group-item .list-group-item-he
 }
 
 .progress {
-	background-color: #e0e0e0;
+    background-color: #e0e0e0;
 }
 
 .progress-bar {
-	background-color: #009688;
+    background-color: #009688;
 }
 
 /** create icon colors */
 .icon-black
 {
-	color: #000000;
+    color: #000000;
 }
 
 .icon-danger
 {
-	color: #F44336;
+    color: #F44336;
 }
 
 .icon-success
 {
-	color: #5CB85C;
+    color: #5CB85C;
 }
 
 .icon-primary
 {
-	color: #009688;
+    color: #009688;
 }
 
 .bg-primary {
-	color: #000;
-	background-color: #009688;
+    color: #000;
+    background-color: #009688;
 }
 
 .bg-info {
-	color: #000;
-	background-color: #B0BEC5;
+    color: #000;
+    background-color: #B0BEC5;
 }
 
 .bg-danger {
-	color: #000;
-	background-color: #EF9A9A;
+    color: #000;
+    background-color: #EF9A9A;
 }
 
 .bg-warning {
-	color: #000;
-	background-color: #FFF9C4;
+    color: #000;
+    background-color: #FFF9C4;
 }
 
 .bg-success {
-	color: #000;
-	background-color: #80CBC4;
+    color: #000;
+    background-color: #80CBC4;
 }
 
 .icon-embed-btn
 {
-	color: white;
+    color: white;
 }
 
 /* Used when you need an icon to act as a submit button **/
 .button-icon
 {
-	color: #337AB7;
+    color: #337AB7;
 }
 
 button.close {
-	padding: 0 4px 1px 4px;
+    padding: 0 4px 1px 4px;
     border: 1px solid #6D4C41;
     border-radius: 5px;
     box-shadow: 1px 1px 1px #6D4C41;
diff --git a/src/usr/local/www/bootstrap/css/pfSense.css b/src/usr/local/www/bootstrap/css/pfSense.css
index 99f367e..eb6f54f 100644
--- a/src/usr/local/www/bootstrap/css/pfSense.css
+++ b/src/usr/local/www/bootstrap/css/pfSense.css
@@ -2,96 +2,96 @@
 @import url("/bootstrap/glyphicons/glyphicons-halflings.css");
 
 html {
-	position: relative;
-	min-height: 100%;
+    position: relative;
+    min-height: 100%;
 }
 
 body {
-	margin-bottom: 80px;
-	background-color: #FAFAFA;
+    margin-bottom: 80px;
+    background-color: #FAFAFA;
 }
 
 body.no-menu #jumbotron {
-	padding: 100px 0;
-	background-image: linear-gradient(to bottom,#3c3c3c 0,#222 100%)
+    padding: 100px 0;
+    background-image: linear-gradient(to bottom,#3c3c3c 0,#222 100%)
 }
 
 body.no-menu {
-	background: url("/logo-black.png") no-repeat center 30px;
-	padding-top: 70px;
+    background: url("/logo-black.png") no-repeat center 30px;
+    padding-top: 70px;
 }
 
 body.no-menu #jumbotron {
-	margin-top: 75px;
+    margin-top: 75px;
 }
 
 body#index .icons {
-	float: right;
+    float: right;
 }
 
 a:hover {
-	text-decoration: none;
+    text-decoration: none;
 }
 
 a.fa, i.fa {
-	font-size: 18px;
+    font-size: 18px;
 }
 
 h1 a:link, h1 a:visited {
-	color: #000000;
-	text-decoration: none !important;
+    color: #000000;
+    text-decoration: none !important;
 }
 
 h1.page-header {
-	display: none;
+    display: none;
 }
 
 h1 a:hover, h1 a:active { 
-	color: #000000; 
-	text-decoration: none !important; 
+    color: #000000; 
+    text-decoration: none !important; 
 }
 
 .container.fixed {
-	padding-top: 60px;
+    padding-top: 60px;
 }
 
 .breadcrumb {
-	font-size: 22px;
-	background-color: #E0E0E0;
-	margin-bottom: 10px;
-	border-radius: 0; 
+    font-size: 22px;
+    background-color: #E0E0E0;
+    margin-bottom: 10px;
+    border-radius: 0; 
 }
 
 .breadcrumb>li+li:before {
-	color: #B71C1C;
+    color: #B71C1C;
 }
 
 ul.context-links li a {
-	color: #B71C1C;
+    color: #B71C1C;
 }
 
 .ui-sortable-handle {
-	cursor: move;
+    cursor: move;
 }
 
 tr.disabled td,
 tr.disabled th {
-	opacity: .5;
+    opacity: .5;
 }
 
 .contains-table table {
-	border: 1px solid #ddd;
+    border: 1px solid #ddd;
 }
 
 /** Content structure */
 .table-responsive {
-	clear: both;
-	margin-bottom: 0px;
+    clear: both;
+    margin-bottom: 0px;
 }
 
 .page-header {
-	padding-bottom: 4px;
-	margin-bottom: 10px;
+    padding-bottom: 4px;
+    margin-bottom: 10px;
 }
 
 ul.context-links li a {
@@ -100,15 +100,15 @@ ul.context-links li a {
 
 /* navigation */
 .navbar {
-	margin-bottom: 10px;
+    margin-bottom: 10px;
 }
 
 .navbar-inverse {
-	background-color: #000000;
+    background-color: #000000;
 }
 
 .navbar-brand {
-	padding-top: 3px;
+    padding-top: 3px;
 }
 
 .nav>li>a {
@@ -130,22 +130,22 @@ ul.context-links li a {
 }
 
 .navbar-nav >li>a {
-	border-bottom: 5px solid #000000;
+    border-bottom: 5px solid #000000;
 }
 
 .nav-tabs>li>a {
-	border-bottom: 5px solid #ffffff;
-	margin-bottom: 1px;
+    border-bottom: 5px solid #ffffff;
+    margin-bottom: 1px;
 }
 
 .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover, .nav-tabs>li>a:hover {
-	border-left: 1px solid #ffffff;
-	border-right: 1px solid #ffffff;
-	border-top: 1px solid #ffffff;
-	border-bottom: 5px solid #B71C1C;
-	margin-bottom: 0;
-	color: #B71C1C;
-	box-shadow: none;
+    border-left: 1px solid #ffffff;
+    border-right: 1px solid #ffffff;
+    border-top: 1px solid #ffffff;
+    border-bottom: 5px solid #B71C1C;
+    margin-bottom: 0;
+    color: #B71C1C;
+    box-shadow: none;
 }
 
 .nav-tabs {
@@ -154,53 +154,54 @@ ul.context-links li a {
 }
 
 .nav-pills {
-	margin-bottom: 20px;
+    margin-bottom: 20px;
 }
 /* end navigation */
 
 .alert {
-	border-radius: 0;
+    border-radius: 0;
 }
 
 .panel {
-	margin-bottom: 10px;
-	border-radius: 0; 
+    margin-bottom: 10px;
+    border-radius: 0; 
+    box-shadow: 0px 3px 7px rgba(0,0,0,.1);
 }
 
 .panel-default>.panel-heading {
-	color: #fff;
-	background-color: #424242;
-	letter-spacing: 1px;
+    color: #fff;
+    background-color: #424242;
+    letter-spacing: 1px;
 }
 
 .panel-heading {
-	padding: 5px 15px;
-	border-radius: 0; 
+    padding: 5px 15px;
+    border-radius: 0; 
 }
 
 .panel-title {
-	font-size: 20px;
+    font-size: 20px;
 }
 
 .panel-body {
-	padding: 0px;
+    padding: 0px;
 }
 
 #login .panel-heading {
-	padding: 10px 15px
+    padding: 10px 15px
 }
 
 .content {
-	padding: 10px;
+    padding: 10px;
 }
 
 .form-horizontal {
-	margin-bottom: 10px;
-	overflow: hidden;
+    margin-bottom: 10px;
+    overflow: hidden;
 }
 
 .form-horizontal .checkbox {
-	padding: 3px 16px;
+    padding: 3px 16px;
 }
 
 .form-control {
@@ -210,15 +211,15 @@ ul.context-links li a {
 }
 
 .form-control option {
-	padding: inherit;
+    padding: inherit;
 }
 
 #login .form-control {
-	height: 34px;
+    height: 34px;
 }
 
 #login .form-group {
-	border: none;
+    border: none;
 }
 
 .form-group {
@@ -228,19 +229,19 @@ ul.context-links li a {
 }
 
 .form-group:last-child {
-	border-bottom: none;
+    border-bottom: none;
 }
 
 .input-group-addon {
-	padding: 0 12px;
+    padding: 0 12px;
 }
 
 .table {
-	margin-bottom: 0;
+    margin-bottom: 0;
 }
 
 .table>tbody>tr>td {
-	padding: 4px 4px 4px 10px;
+    padding: 4px 4px 4px 10px;
 }
 
 /* active table row */
@@ -254,82 +255,82 @@ ul.context-links li a {
 }
 
 .help-block {
-	margin-bottom: 0;
+    margin-bottom: 0;
 }
 
 .action-buttons {
-	text-align: right;
-	margin-top: 10px;
-	margin-bottom: 20px;
+    text-align: right;
+    margin-top: 10px;
+    margin-bottom: 20px;
 }
 
 /** Form validation */
 .input-errors ul {
-	margin-top: 20px;
+    margin-top: 20px;
 }
 
 /** Page header with title and breadcrumb */
 .header {
-	position: relative;
+    position: relative;
 }
 
 .header .page-header {
-	margin-top: 0;
+    margin-top: 0;
 }
 
 .header .context-links {
-	position: absolute;
-	right: 15px;
-	top: 15px;
+    position: absolute;
+    right: 15px;
+    top: 15px;
 }
 
 .header .context-links li {
-	float: left;
-	display: inline;
-	margin-left: 10px;
+    float: left;
+    display: inline;
+    margin-left: 10px;
 }
 
 /** Form tweaks */
 form .btn + .btn {
-	margin-left: 5px;
+    margin-left: 5px;
 }
 
 .input-group-inbetween {
-	border-left: 0;
+    border-left: 0;
 }
 
 .user-duplication .controls {
-	margin-top: 10px;
+    margin-top: 10px;
 }
 
 .checkbox.multi label {
-	display: block;
+    display: block;
 }
 
 .checkbox.multi .btn {
-	margin-top: 5px;
+    margin-top: 5px;
 }
 
 .col-sm-10 .form-control {
-	width: calc(50% - 15px); /* substract 15px to match a .col-sm-5; which satisfies my OCD */
+    width: calc(50% - 15px); /* substract 15px to match a .col-sm-5; which satisfies my OCD */
 }
 
 @media (max-width: 991px) {
-	.col-sm-10 .form-control {
-		width: 100%;
-	}
+    .col-sm-10 .form-control {
+        width: 100%;
+    }
 }
 
 /** Page footer */
 .footer {
-	position: absolute;
-	bottom: 0;
-	left: 0;
-	width: 100%;
-	height: 60px;
-	background-color: #212121;
-	padding-top: 10px;
-	text-align: center;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 60px;
+    background-color: #212121;
+    padding-top: 10px;
+    text-align: center;
 }
 
 footer a {
@@ -347,15 +348,15 @@ footer a {
 }
 
 #widgetSequence {
-	position: fixed;
-	left: 0;
-	bottom: 0;
-	padding: 20px 0;
-	width: 100%;
-	z-index: 100;
-	text-align: center;
-	background: rgba(255, 255, 255, 0.6);
-	border-top: 1px solid #ddd;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    padding: 20px 0;
+    width: 100%;
+    z-index: 100;
+    text-align: center;
+    background: rgba(255, 255, 255, 0.6);
+    border-top: 1px solid #ddd;
 }
 
 /** Styling for jQuery autocomplete widget */
@@ -402,105 +403,105 @@ footer a {
 
 /** Override the bootstrap progress bar margins */
 .progress {
-	margin-bottom: 0px;
-	height: 14px;
+    margin-bottom: 0px;
+    height: 14px;
 }
 
 #wizard .progress {
-	margin-bottom: 10px;
+    margin-bottom: 10px;
 }
 
 .progress-bar {
-	background-color: #B71C1C;
+    background-color: #B71C1C;
 }
 
 .panel-body.collapse.in {
-	overflow-x: auto;
+    overflow-x: auto;
 }
 
 /** create icon colors */
 .icon-black
 {
-	color: #000000;
+    color: #000000;
 }
 
 .icon-danger
 {
-	color: #D9534F;
+    color: #D9534F;
 }
 
 .icon-success
 {
-	color: #5CB85C;
+    color: #5CB85C;
 }
 
 .icon-primary
 {
-	color: #337AB7;
+    color: #337AB7;
 }
 
 .btn-success {
-	background-color: #43A047;
+    background-color: #43A047;
 }
 
 .btn-danger {
-	background-color: #B71C1C;
+    background-color: #B71C1C;
 }
 
 .btn-primary {
-	background-color: #1976D2;
+    background-color: #1976D2;
 }
 
 .bg-primary {
-	color: #000;
-	background-color: #009688;
+    color: #000;
+    background-color: #009688;
 }
 
 .bg-info {
-	color: #000;
-	background-color: #80DEEA;
+    color: #000;
+    background-color: #80DEEA;
 }
 
 .bg-danger {
-	color: #000;
-	background-color: #EF9A9A;
+    color: #000;
+    background-color: #EF9A9A;
 }
 
 .bg-warning {
-	color: #000;
-	background-color: #FFF9C4;
+    color: #000;
+    background-color: #FFF9C4;
 }
 
 .bg-success {
-	color: #000;
-	background-color: #A5D6A7;
+    color: #000;
+    background-color: #A5D6A7;
 }
 
 /** icons are often used with onclick actions, so we need the cursor to change to a pointer */
 .icon-pointer
 {
-	cursor: pointer;
+    cursor: pointer;
 }
 
 .icon-embed-btn
 {
-	font-size: 15px;
-	vertical-align: middle;
-	color: white;
+    font-size: 15px;
+    vertical-align: middle;
+    color: white;
 }
 
 /* Used when you need an icon to act as a submit button **/
 .button-icon
 {
-	color: #337AB7;
-	background: none;
-	border: 0px;
+    color: #337AB7;
+    background: none;
+    border: 0px;
 }
 
 .btn
 {
-	padding-right: 4px;
-	padding-left: 4px;
+    padding-right: 4px;
+    padding-left: 4px;
 }
 
 .list-group {
@@ -510,8 +511,8 @@ footer a {
 /* icons in the dashboard panel headings should pull-right **/
 .widget-heading-icon
 {
-	display: block;
-	float:	right;	
+    display: block;
+    float:  right;  
 }
 
 .widget-heading-icon .fa {
@@ -530,20 +531,20 @@ footer a {
 /* All pfSense textareas benefit from using a fixed width font **/
 textarea
 {
-	font-family: monospace;
-	font-size: 12px;
-	-moz-tab-size: 4;
-	-o-tab-size: 4;
+    font-family: monospace;
+    font-size: 12px;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
 }
 
 @media (max-width: 1200px) {
-	.nav>li>a {
-    	padding: 14px 9px 10px 9px;
- 	}
+    .nav>li>a {
+        padding: 14px 9px 10px 9px;
+    }
  }
 
  @media (max-width: 991px) {
-	/* change top navbar from horizontal to vertical */
+    /* change top navbar from horizontal to vertical */
     .navbar-header {
         float: none;
     }
@@ -580,6 +581,6 @@ textarea
         overflow: hidden!important;
     }
     .navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
-    	max-height: none !important;
+        max-height: none !important;
     }
 }