admin-ui: Black approach of details page

snf-admin-app/synnefo_admin/admin/static/sass/_bars-btns.scss

@@ -211,7 +211,6 @@
 .sidebar, .custom-buttons {
 	a {
 		border: 1px solid;
-
 		width: 100%;
 		font-size: 14px;
 		background-color: transparent;
@@ -226,10 +225,10 @@
 		}
 		&.disabled {
 			border-color: $gray-light-extra;
-			color: $gray-light;
+			color: $gray-light-extra;
 			.badge.num {
 				border-color: $gray-light-extra;
-				color: $gray-light;
+				color: $gray-light-extra;
 			}
 		}
 		&:not(.disabled) {
@@ -263,11 +262,11 @@
 .custom-btn.expand-btn {
 	width: 110px;
 	line-height: 30px;
-	border-color: $green-intense;
-	color:$green-intense-extra;
+	color: white;
+	background: $green-intense;
+	border-color: transparent;
+	opacity:0.8;
 	&:hover {
-		&>span {
-			border-color: $green-intense;
-		}
+		opacity: 1;
 	}
-}
\ No newline at end of file
+}

snf-admin-app/synnefo_admin/admin/static/sass/_details.scss

 @import "settings";
 
 body {
-	color: #3D3D3D;
+	color: white;
 	a {
-		color: #13499B
+		color: white;
 	}
 }
 
@@ -58,6 +58,13 @@ body .object-details {
 
 	.length {
 		margin-left: 6px;
+		border: 0 none;
+		&::before {
+		    content: '( ';
+		}
+		&::after {
+		    content: ' )';
+		}
 	}
 	&>.object-details {
 		margin-left: -20px;
@@ -66,16 +73,33 @@ body .object-details {
 	}
 }
 
+.part-two {
+	.object-details {
+		padding: 20px;
+		.object-details {
+			padding: 0 20px;
+		}
+	}
+}
+
+
 .object-details-content .nav-tabs>li {
+	a {
+		opacity: 0.7;
+		color: white;
+	}
 	&.active>a {
-		color: $gray-dark;
-		border-color: $blue-light;
-		border-bottom-color: transparent;
+		opacity: 1;
+		border-color: transparent;
+		background: $gray-light;
+		color: white;
+		border-radius: 0;
 	}
 	&:not(.active)>a:hover {
+		opacity: 1;
+		color: white;
 		border-color: transparent;
 		background: transparent;
-		color: $blue-intense;
 	}
 }
 

snf-admin-app/synnefo_admin/admin/static/sass/_filters.scss

@@ -23,6 +23,7 @@
 		background: white;
 		padding: 0 10px;
 		font-weight: normal;
+		color: $gray-dark;
 		input {
 			border: 0 none;
 			background: transparent;

snf-admin-app/synnefo_admin/admin/static/sass/_settings.scss

@@ -13,7 +13,7 @@ $blue-light-extra: #AFC6D6;
 $blue-intense: #3C96E0;
 
 $gray-dark: #404041;
-$gray-light: #857B7B;
+$gray-light: #5A5959;
 $gray-light-extra: lighten($gray-light, 20%);
 
 $green-intense: #00a551;

snf-admin-app/synnefo_admin/admin/static/sass/extra.scss

+
+// Part B
+@import "settings";
+@import "bars-btns";
+@import "details";
+@import "filters";
 // Part A
 
 /*body { background: url(../img/roughcloth.png);}*/
@@ -105,7 +111,7 @@ h1 { margin-bottom: 20px; }
 .subnav-fixed h2 { display: block }
 
 .account-form { float: right; margin-top: 2px; margin-bottom: 0}
-.info-block { /*margin-top: 30px;*/ background-color: #fff; padding:0;}
+.info-block { /*margin-top: 30px;*/ padding:0;}
 
 .info-block h3 .badge {   font-size: 0.8em; padding: 5px 8px; background-color:#659CEF;}
 .info-block table { margin-bottom: 0 }
@@ -206,11 +212,6 @@ h3.info             { cursor:default; color:#2956B2; text-align:center; font-siz
 .table-sorted th.headerSortUp:hover span    { background:url(../img/arrow-down.png) no-repeat right center; }
 
 
-// Part B
-@import "settings";
-@import "bars-btns";
-@import "details";
-@import "filters";
 
 
 /* All checkboxes */
@@ -410,19 +411,19 @@ a:not([disabled]):hover {
 
 .positive {
 	&.area {
-		background-color: #dff0d8;
+		background-color: $green-intense;
 	}
 	&.elem {
-		color: #3c763d;
+		color: $green-intense;
 	}
 }
 
 .dangerous {
 	&.area {
-		background-color: red;
+		background-color: $red-intense;
 	}
 	&.elem {
-		color: red;
+		color: $red-intense;
 	}
 }
 
@@ -723,8 +724,10 @@ table.dataTable tbody tr td:last-child, table.dataTable tbody tr th:last-child {
 
 body .well {
 	border-radius: 0;
-	border: 1px solid $gray-dark; 
+	border-color: inherit; 
 	background: inherit;
+	-webkit-box-shadow: none;
+	box-shadow: none;
 }
 
 table.table {
@@ -737,6 +740,12 @@ table.table {
 		}	
 		a {
 			color: white;
+			.snf-search {
+				opacity: 0.7;
+				&:hover {
+					opacity: 1;
+				}
+			}
 		}
 	}
 }
@@ -791,7 +800,6 @@ body table > tbody > tr.selected > td {
 .dataTables_wrapper .dataTables_length,
 .dataTables_wrapper .dataTables_filter,
 .dataTables_wrapper .dataTables_info,
-.dataTables_wrapper .dataTables_processing,
 .dataTables_wrapper .dataTables_paginate {
   color: white;
 }
@@ -826,4 +834,100 @@ table.dataTable.no-footer {
 
 .badge {
 	border-radius:0;
+}
+
+
+.dataTables_wrapper .dataTables_processing {
+	background: $gray-light;
+	color: white;
+	padding: 10px;
+	-moz-box-shadow: inset 0 0 5px #888;
+	-webkit-box-shadow: inset 0 0 5px#888;
+	box-shadow: inner 0 0 5px #888;
+}
+
+
+
+.label {
+	border-radius: 0;
+	padding: 5px 10px;
+	border: 1px solid white;
+	background: inherit;
+	color: white;
+}
+
+.object-details-content {
+	color: white;
+}
+
+.tab-content {
+	background: $gray-light;
+	padding: 20px;
+	.well {
+		border-color: $gray-light;
+	}
+}
+
+.info-block.main {
+	margin-bottom: 5em;
+}
+
+.content-seperator {
+	display: none;
+}
+
+.actions-per-item {
+	color: white;
+	a {
+		color: white;
+	}
+	.custom-btn {
+		margin: 10px 10px 10px 0;
+		span {
+			padding: 5px 10px;
+			border: 1px solid inherit;
+		}
+		&:hover {
+			span {
+				border-color:white;
+			}
+		}
+	}
+}
+
+.content  {
+	h3, h4 {
+		color: white;		
+	}
+}
+
+.part-two {
+	&>.object-details {
+	border: 1px solid $gray-light-extra;		
+	}
+
+}
+
+.object-details,
+.object-details:hover, {
+  background-color: inherit;
+}
+
+.title {
+	a {
+		color: white;
+		opacity: 0.7;
+		&:hover {
+			opacity: 1;
+		}
+	}
+}
+
+.modal-content {
+	border-radius: 0;
+	color: $gray-dark;
+	.badge {
+		background-color: transparent;
+		border: 1px solid $gray-dark;
+	}
 }
\ No newline at end of file