diff options
author | Jared Dillard <jdillard@netgate.com> | 2015-12-01 16:35:51 -0600 |
---|---|---|
committer | Jared Dillard <jdillard@netgate.com> | 2015-12-01 16:35:51 -0600 |
commit | 08165855c7baac4ff2d434257e7610ff51ef58a1 (patch) | |
tree | 272d2a244531e75ebe2169c0e9cdfad6c5ed534c /src/usr/local/www | |
parent | bfebdb5862165684902148a29c5f749f96347ff6 (diff) | |
download | pfsense-08165855c7baac4ff2d434257e7610ff51ef58a1.zip pfsense-08165855c7baac4ff2d434257e7610ff51ef58a1.tar.gz |
add some depth to panels and convert tabs to spaces
Diffstat (limited to 'src/usr/local/www')
-rw-r--r-- | src/usr/local/www/bootstrap/css/pfSense-dark.css | 109 | ||||
-rw-r--r-- | src/usr/local/www/bootstrap/css/pfSense.css | 297 |
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; } } |