Remove overlay dialog and replace it with a fresh start. oh no.

style.css

@@ -1536,135 +1536,51 @@ textarea {
 	image-rendering: pixelated;
 }
 
-.overlay {
+body > div.overlay {
 	position: fixed;
 	top: 0px; bottom: 0px; left: 0px; right: 0px;
 	z-index: 20;
-	background-color: #000a;
+	background-color: #0006;
 	width: 100%;
 	height: 100%;
-	display: flex;
-	align-items: center;
 }
 
-.overlay .box,
+body > div.overlay .dialog {
-.overlay .attachment {
+	background: linear-gradient(180deg, #ffffff 0%, #f3dca9 8px);
-	background: var(--main-background);
+	border: 1px outset #a48e65;
-	border: 2px inset gray;
+	max-height: 80%;
-	padding: 8px;
+	max-width: 400px;
-	
+	margin: auto;
-	margin-left: auto; margin-right: auto;
-}
-.overlay .box {
-	position: fixed;
-	left: 0; right: 0;
 }
 
-.overlay .popup {
+body > div.overlay .dialog table {
-	min-width: 128px;
+	width: 100%;
-	/*height: 80px;*/
+	max-width: unset;
+	margin: 0px;
+}
+
+body > div.overlay .dialog table th, body > div.overlay .dialog table td { padding: 4px; }
+
+body > div.overlay .dialog table.titlebox { font-family: var(--primary-font); }
+
+body > div.overlay .dialog table.titlebox img.close-button {
+	cursor: pointer;
+	user-select: none;
+}
+
+body > div.overlay .dialog table tr th:nth-of-type(1) {
+	text-align: left;
+}
+
+body > div.overlay .dialog table:not(.titlebox) {
+	background: #b3b3b3;
+	border: 1px outset #636363;
+	display: block;
+	height: 400px;
 	overflow: auto;
 }
 
-.overlay .popup.box .embedder .embed-item {
-	display: inline-block;
-	padding: 4px;
-	cursor: pointer;
-	border: 1px solid transparent;
-	height: 30px;
-	font-family: var(--primary-font);
-}
-
-.overlay .popup.box .embedder .embed-item img {
-	padding: 2px;
-	margin: 2px;
-	vertical-align: middle;
-}
-
-.overlay .popup.box .embedder .embed-item:hover {
-	border: var(--primary-container-border);
-	background: var(--primary-container-background);
-}
-
-.overlay .popup.box .embedder .embed-item.selected {
-	border: 1px outset #65aad2;
-	background: #b6dfe6;
-}
-
-.dragbox {
-	position: absolute;
-	z-index: 10;
-	background: var(--main-background);
-	border: var(--primary-container-border);
-	padding: 8px;
-	box-shadow: #0005 5px 5px 4px;
-	max-width: 100%;
-}
-
-.dragbox textarea {
-	resize: both;
-}
-
-.overlay .popup .titlebar,
-.overlay .attachment .titlebar,
-.dragbox .titlebar {
-	display: flex;
-	position: sticky;
-	top: -8px;
-	margin: -8px;
-	margin-bottom: 8px;
-	padding: 4px;
-	background: var(--popup-title-bg);
-	border-bottom: var(--popup-title-border);
-	font-family: var(--primary-font);
-}
-
-.overlay .popup .titlebar .title,
-.overlay .attachment .titlebar .title,
-.dragbox .titlebar .title {
-	flex-grow: 1;
-}
-
-.overlay .popup .titlebar .closebtn,
-.overlay .attachment .titlebar .closebtn,
-.dragbox .titlebar .closebtn {
-	cursor: pointer;
-}
-
-.dragbox .button-row {
-	display: flex;
-	border-top: var(--primary-container-border);
-	margin: -8px; margin-top: 0px;
-	padding: 4px;
-}
-
-.dragbox .content {display: flex;}
-.dragbox#rename .content,
-.dragbox#new-folder .content {
-	flex-direction: column;
-}
-
-@media only screen and (orientation: portrait) {
-	.overlay .box {
-		left: 4px;
-		right: 4px;
-	}
-	
-	.overlay .box, .overlay .attachment {
-		max-width: 100%;
-	}
-	
-	.overlay .popup, .overlay .attachment {
-		max-height: 90%;
-	}
-}
-
 @media only screen and (orientation: landscape) {
-	.overlay .popup {
-		max-width: 512px;
-		max-height:90%;
-	}
-	
 	.tabbed-container.vertical {
 		flex-direction: row;
 	}