coder · nol166 · Apr 29, 2019 · Apr 30, 2019 · May 1, 2019 · May 1, 2019
diff --git a/packages/ide/src/fill/dialog.scss b/packages/ide/src/fill/dialog.scss
@@ -1,69 +1,72 @@
 .msgbox {
+	-webkit-box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.75);
+	-moz-box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.75);
+	box-shadow: 0 12px 16px 0 rgba(29, 64, 126, 0.07);
 	padding-top: 25px;
 	padding-left: 40px;
 	padding-right: 40px;
 	padding-bottom: 25px;
-	background: #242424;
-	-webkit-box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.75);
-	-moz-box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.75);
-	box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.75);
-	border-radius: 3px;
+	border-radius: 8px;
+	text-align: center;
+	background-color: var(--primary);
 }
 
 .msgbox.input {
 	max-width: 500px;
 	width: 100%;
 }
 
-.msgbox > .input {
-	background: #141414;
+.msgbox>.input {
+	background: var(--list-active-selection-foreground);
 	border: none;
 	box-sizing: border-box;
 	padding: 10px;
 	width: 100%;
 }
 
-.msgbox > .msg {
+.msgbox>.msg {
+	color: var(--header-foreground);
 	font-size: 16px;
 	font-weight: bold;
 }
 
-.msgbox > .detail {
+.msgbox>.detail {
 	font-size: 14px;
 	margin: 5px 0;
 }
 
-.msgbox > .errors {
+.msgbox>.errors {
 	margin-top: 20px;
 }
 
-.msgbox > .errors {
+.msgbox>.errors {
 	color: #f44747;
 }
 
-.msgbox > .button-wrapper {
+.msgbox>.button-wrapper {
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
 	margin-top: 20px;
 }
 
-.msgbox > .button-wrapper > button {
+.msgbox>.button-wrapper>button {
 	flex: 1;
-	border-radius: 2px;
+	border-radius: px;
 	padding: 10px;
 	color: white;
-	background: #3d3d3d;
+	background: var(--list-active-selection-background);
 	border: 0px;
 	cursor: pointer;
 	opacity: 0.8;
+	outline: none;
 }
 
-.msgbox > .button-wrapper > button:hover {
+.msgbox>.button-wrapper>button:hover {
 	opacity: 1;
 }
 
-.msgbox > .button-wrapper > button:not(:last-child) {
+.msgbox>.button-wrapper>button:not(:last-child) {
 	margin-right: 8px;
 }
 
@@ -80,4 +83,4 @@
 	top: 0;
 	transition: 300ms opacity ease;
 	z-index: 15;
-}
+}
diff --git a/packages/vscode/src/dialog.scss b/packages/vscode/src/dialog.scss
@@ -1,21 +1,12 @@
 .dialog {
-	--primary: #2A2E37;
-	--border: black;
-	--faded: #a0a1a5;
-	--disabled: #888;
-	--header-background: #161616;
-	--header-foreground: white;
-	--list-active-selection-background: rgb(0, 120, 160);
-	--list-active-selection-foreground: white;
-	--list-hover-background: rgb(36, 39, 46);
 	font-family: inherit;
-	box-shadow: 0 18px 80px 10px rgba(0, 0, 0, 0.1);
+	box-shadow: 0 12px 16px 0 rgba(29, 64, 126, 0.07);
 	background-color: var(--primary);
 	display: flex;
 	flex-direction: column;
 	user-select: none;
 	overflow: hidden;
-	border-radius: 5px;
+	border-radius: 8px;
 
 	.monaco-tl-twistie {
 		display: none;
@@ -24,28 +15,57 @@
 	.title {
 		background-color: var(--header-background);
 		color: var(--header-foreground);
-		padding: 1px;
-		font-size: 11px;
-		font-weight: normal;
-		text-transform: uppercase;
+		line-height: initial;
+		font-size: 1.5em;
+		font-weight: 200;
+		margin-bottom: 5px;
+		text-transform: unset;
 		white-space: nowrap;
 		padding: 5px 10px;
 	}
 
 	.nav {
 		display: flex;
+		// flex: 1;
 		flex-direction: row;
 		padding: 4px;
+		cursor: pointer;
 		border-bottom: 1px solid var(--border);
 	}
 
+	.path-editor {
+		display: block;
+		flex-direction: row;
+		margin-top: 12px;
+		margin-bottom: 12px;
+		font-size: 1.02em;
+		border: 1px solid var(--border);
+		color: var(--header-foreground);
+		background-color: var(--header-background);
+		border-radius: 4px;
+	}
+
+	.path-div {
+		display: block;
+		flex-direction: row;
+		padding: 4px;
+		border: 1px solid var(--header-background);
+	}
+
+	.hidden {
+		display: none;
+	}
+
 	.path {
 		display: flex;
 		flex-direction: row;
 
 		.path-part {
 			padding: 5px;
+			list-style-type: none;
+			border: 1px solid var(--border);
 			border-radius: 3px;
+			margin-bottom: 5px;
 			font-size: 1.02em;
 			cursor: pointer;
 
@@ -58,11 +78,17 @@
 				color: var(--list-active-selection-foreground);
 			}
 		}
+
+		.path-btn {
+			align-content: right;
+			font-size: 1.02em;
+			border: 1px solid var(--border);
+		}
 	}
 
 	.dialog-grid {
 		display: grid;
-		grid-template-columns: 2fr 0.2fr 0.8fr;
+		grid-template-columns: 2fr 0.3fr 0.8fr;
 	}
 
 	.headings {
@@ -71,14 +97,14 @@
 	}
 
 	.file-area {
-		flex: 1;
+		flex: auto;
 		display: flex;
 		flex-direction: column;
 		overflow: hidden;
 
 		.dialog-entry {
 			cursor: pointer;
-			font-size: 1.02em;
+			font-size: 12px;
 			padding: 0px 8px;
 
 			.dialog-entry-info {
@@ -93,11 +119,11 @@
 			}
 
 			.dialog-entry-size {
-				text-align: right;
+				text-align: left;
 			}
 
 			.dialog-entry-mtime {
-				padding-left: 8px;
+				padding-left: 0px;
 			}
 
 			&:hover {
@@ -109,7 +135,8 @@
 				color: var(--list-active-selection-foreground);
 			}
 
-			&.disabled, &.disabled:hover {
+			&.disabled,
+			&.disabled:hover {
 				background-color: var(--primary);
 				color: var(--disabled);
 				cursor: initial;
@@ -132,29 +159,42 @@
 
 		button {
 			background: transparent;
+			font-size: 1.02em;
 			outline: none;
-			border: 0;
-			color: var(--faded);
-			padding: 10px;
+			color: var(--titlebar);
+			padding: 6px;
 			padding-left: 18px;
 			padding-right: 18px;
 			transition: 150ms background ease, 150ms color ease;
 			cursor: pointer;
-			border-radius: 5px;
+			border: 1px solid var(--border);
+			border-radius: 3px;
 
 			&:hover {
 				background: var(--titlebar);
 				color: white;
 			}
 		}
 
-		button[disabled], button[disabled]:hover {
+		button[disabled],
+		button[disabled]:hover {
 			color: var(--disabled);
 			cursor: initial;
 		}
+
+		button[active],
+		button[disabled]:hover {
+			color: var(--list-active-selection-foreground);
+			cursor: initial;
+		}
 	}
 }
 
-.monaco-shell .monaco-tree.focused.no-focused-item:focus:before, .monaco-shell .monaco-list:not(.element-focused):focus:before {
+.monaco-shell .monaco-tree.focused.no-focused-item:focus:before,
+.monaco-shell .monaco-list:not(.element-focused):focus:before {
 	display: none;
 }
+
+.folder-icon-dialog {
+	background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggZmlsbD0iI0U4RThFOCIgZD0iTTYgNHY4bDQtNC00LTR6bTEgMi40MTRMOC41ODYgOCA3IDkuNTg2VjYuNDE0eiIvPjwvc3ZnPg==);
+}