Settings, directory browser

couchpotato/static/style/page/settings.css

@@ -1,7 +1,15 @@
-/* @override http://localhost:5000/static/style/page/settings.css */
+/* @override 
+	http://localhost:5000/static/style/page/settings.css
+	http://192.168.1.20:5000/static/style/page/settings.css
+*/
 
-.page.settings {
-	overflow: hidden;
+.page.settings:after {
+	content: ".";
+	display: block;
+	clear: both;
+	visibility: hidden;
+	line-height: 0;
+	height: 0;
 }
 
 	.page.settings .tabs {
@@ -165,39 +173,104 @@
 	
 	.page.settings .directory {
 		display: inline-block;
-		padding: 0 4px;
+		padding: 0 4% 0 4px;
 		font-size: 13px;
-		width: 29.7%;
-	}	
-	.page.settings .directory_list {
-		position: absolute;
-		width: 300px;
-		margin: 0 0 0 16.5%;
-	  	background: #282d34;
-	  	border: 1px solid #1f242b;
-		position: absolute;
-		box-shadow: 0 1px 2px rgba(0,0,0,0.4);
-		-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.4);
-		-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.4);
-		border-radius:3px;
-		-moz-border-radius: 3px;
-		-webkit-border-radius: 3px;
+		width: 26.3%;
+		background-image: url('../../images/icon.folder.gif');
+		background-repeat: no-repeat;
+		background-position: 97% center;
+		overflow: hidden;
 	}
+		.page.settings .directory > span {
+			height: 25px;
+			display: inline-block;
+			float: right;
+			text-align: right;
+			white-space: nowrap;
+			cursor: pointer;
+		}
+	
+	.page.settings .directory_list {
+		z-index: 2;
+		position: absolute;
+		width: 360px;
+		margin: -2px 0 20px 60px;
+		background: #5c697b;
+		border-radius: 3px;
+		-webkit-border-radius: 3px;
+		-moz-border-radius: 3px;
+		box-shadow: 0 0 50px rgba(0,0,0,0.55);
+		-moz-box-shadow: 0 0 50px rgba(0,0,0,0.55);
+		-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.55);
+	}
+	
+		.page.settings .directory_list .pointer {
+			border-right: 10px solid transparent;
+			border-left: 10px solid transparent;
+			border-bottom: 10px solid #5c697b;
+			display: block;
+			position: absolute;
+			width: 0px;
+			margin: -9px 0 0 48.5%;
+		}
 	
 	.page.settings .directory_list ul {
 		width: 100%;
-		max-height: 200px;
+		height: 200px;
 		overflow: auto;
 	}
 	
-	.page.settings .directory_list li {
-		padding: 2px 10px;
-	}
+		.page.settings .directory_list li {
+			padding: 0 10px;
+			cursor: pointer;
+			margin: 0;
+			border-top: 1px solid rgba(255,255,255,0.1);
+			background: url('../../images/right.arrow.png') no-repeat 98% center;
+		}
+		.page.settings .directory_list li:last-child {
+			border-bottom: 1px solid rgba(255,255,255,0.1);
+		}
+		
+			.page.settings .directory_list li:hover {
+				background-color: #515c68;
+			}
 	
 	.page.settings .directory_list .actions {
 		clear: both;
 		padding: 10px;
-		background: #414953;
 	}
-		.page.settings .directory_list .actions:first-child { border-bottom: 1px solid #1f242b; }
-		.page.settings .directory_list .actions:last-child { border-top: 1px solid #1f242b; }
+	
+	.page.settings .directory_list .actions {}
+		
+		.page.settings .directory_list .actions label {
+			float: right;
+			width: auto;
+			padding: 5px 3px;
+		}
+			.page.settings .directory_list .actions .inlay {
+				margin: -2px 0 0 7px;
+			}
+			
+		.page.settings .directory_list .actions .back {
+			font-weight: bold;
+			width: 160px;
+			display: inline-block;
+		}
+	
+	.page.settings .directory_list .actions:last-child {
+		float: right;
+	}
+
+		.page.settings .directory_list .actions:last-child > span {
+			padding: 0 5px;
+			text-shadow: none;
+		}
+		
+		.page.settings .directory_list .actions:last-child > .cancel {
+			font-weight: bold;
+			color: #ddd;
+		}
+		
+		.page.settings .directory_list .actions:last-child > .save {
+			background: #9dc156;
+		}