add dark theme (work in progress)

1 files changed, 247 insertions, 0 deletions

diff --git a/src/usr/local/www/bootstrap/css/pfSense-dark.css b/src/usr/local/www/bootstrap/css/pfSense-dark.css
new file mode 100644
index 0000000..1256584
--- /dev/null
+++ b/src/usr/local/www/bootstrap/css/pfSense-dark.css
@@ -0,0 +1,247 @@
+@import url("/bootstrap/css/bootstrap.min.css");
+@import url("/bootstrap/css/pfSense.css");
+
+a {
+	color: #90A4AE;
+}
+
+a:hover {
+	color: #78909C;
+	text-decoration: none;
+}
+
+h1.page-header {
+	display: none;
+}
+
+h1 a:link{
+	color: #fff;
+}
+
+
+h1 a:visited { color: #fff; }
+h1 a:hover, h1 a:active { color: #fff; text-decoration: none !important; }
+
+body {
+	background-color: #212121;
+	color: #e0e0e0;
+}
+
+/** Content structure */
+
+.contains-table table {
+	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;
+}
+
+.table-hover>tbody>tr:hover {
+    background-color: #303030;
+}
+
+table.sortable-theme-bootstrap {
+	color: #e0e0e0 !important;
+	background-color: #212121 !important;
+}
+
+.navbar {
+	background-color: #000;
+}
+
+.dropdown-menu {
+	background-color: #000;
+	opacity: .93;
+	border-radius: 10px;
+}
+
+.dropdown-menu>li>a {
+	color: #e0e0e0;
+}
+
+.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
+	background-color: #303030;
+	color: #e0e0e0;
+}
+
+.page-header {
+	border: 0;
+}
+
+.breadcrumb {
+	background-color: #303030;
+	box-shadow: 1px 1px 3px #151515;
+	font-size: 22px;
+}
+
+.nav>li>a:focus, .nav>li>a:hover {
+	background-color: #424242;
+	box-shadow: 2px 2px 8px #151515;
+}
+
+.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
+	color: #90A4AE;
+    background-color: #424242;
+    box-shadow: 2px 2px 8px #151515;
+}
+
+.btn-primary {
+    color: #212121;
+    background-color: #607D8B;
+    border-color: #37474F;
+}
+
+.btn-success {
+    background-color: #009688;
+    border-color: #009688;
+}
+
+.btn-success.active, .btn-success.focus, .btn-success:active, .btn-success:focus, .btn-success:hover, .open>.dropdown-toggle.btn-success {
+    background-color: #00796B;
+    border-color: #00796B;
+}
+
+.btn-danger {
+    background-color: #D32F2F;
+    border-color: #D32F2F;
+}
+
+.btn-primary:hover {
+    color: #212121;
+    background-color: #455A64;
+    border-color: #37474F;
+}
+
+caption {
+    color: #E0E0E0;
+    background-color: #303030;
+}
+
+.form-control {
+    background-color: #e0e0e0;
+}
+
+.form-group {
+    border-bottom: 1px solid #212121;
+}
+
+.panel-default>.panel-heading {
+	color: #fff;
+	background-color: #303030;
+	border-color: #212121;
+}
+
+.panel {
+	background-color: #424242;
+	border-color: #424242;
+}
+
+.alert-warning {
+	color: #6D4C41;
+    background-color: #FFF9C4;
+    border-color: #FFEB3B;
+}
+
+.help-block {
+	color: #eeeeee;
+}
+
+.checkbox label, .radio label {
+	color: #eeeeee;
+}
+
+.table-striped>thead {
+    background-color: #000;
+}
+
+.table-striped>tbody>tr:nth-of-type(odd) {
+    background-color: #303030;
+}
+
+.table .table {
+    background-color: #424242;
+}
+
+/** Page footer */
+.footer {
+	background-color: #000;
+}
+
+.footer a {
+	color: #fff;
+}
+
+/** Homepage / dashboard */
+.widget .panel-heading {
+    background-color: #757575;
+}
+
+#widgetSequence {
+	border-top: 1px solid #ddd;
+}
+
+.progress {
+	background-color: #e0e0e0;
+}
+
+.progress-bar {
+	background-color: #009688;
+}
+
+/** create icon colors */
+.icon-black
+{
+	color: #000000;
+}
+
+.icon-danger
+{
+	color: #D9534F;
+}
+
+.icon-success
+{
+	color: #5CB85C;
+}
+
+.icon-primary
+{
+	color: #337AB7;
+}
+
+a.fa {
+	font-size: 20px;
+}
+
+.fa-trash
+{
+	color: #90A4AE;
+}
+
+.fa-trash:hover
+{
+	color: #D50000;
+}
+
+.icon-embed-btn
+{
+	color: white;
+}
+
+/* Used when you need an icon to act as a submit button **/
+.button-icon
+{
+	color: #337AB7;
+}
+
+button.close {
+	padding: 0 4px 1px 4px;
+    border: 1px solid #6D4C41;
+    border-radius: 5px;
+    box-shadow: 1px 1px 1px #6D4C41;
+}
+
+@media (max-width: 991px) {
+
+}
\ No newline at end of file