add option to delete files

res/include/style/file_manager.css

@@ -123,11 +123,15 @@
 
 	/* padding-top: 6px; */
 }
-.node:hover, .node_selected {
+.node:hover:not(.node_selected) {
 	background-color: var(--input_color_dark);
 	color: var(--input_text_color);
 	text-decoration: none;
 }
+.node_selected {
+	background-color: var(--highlight_color);
+	color: var(--highlight_text_color);
+}
 .node > div {
 	height: 100%;
 	overflow: hidden;

res/include/style/layout.css

@@ -17,7 +17,35 @@
 		local('Cantarell Light'),
 		local('Cantarell, Light'),
 		local('Cantarell-Light'),
-		url("/res/misc/Cantarell-Light.otf") format("opentype");
+		url(/res/misc/Cantarell-Light.otf) format("opentype");
+}
+
+@font-face {
+	font-family: 'Material Icons';
+	font-style: normal;
+	font-weight: 400;
+	src: local('Material Icons'),
+		local('MaterialIcons-Regular'),
+		url(/res/misc/MaterialIcons-Regular.woff2) format('woff2'),
+		url(/res/misc/MaterialIcons-Regular.woff) format('woff'),
+		url(/res/misc/MaterialIcons-Regular.ttf) format('truetype');
+}
+.icon {
+	font-family: 'Material Icons';
+	font-weight: normal;
+	font-style: normal;
+	font-size: 24px;  /* Preferred icon size */
+	display: inline-block;
+	line-height: 1;
+	text-transform: none;
+	letter-spacing: normal;
+	word-wrap: normal;
+	white-space: nowrap;
+	direction: ltr;
+	text-rendering: optimizeLegibility;
+}
+.icon.small {
+	font-size: 16px;
 }
 
 /* Page rendering configuration */

res/include/style/modal.css

@@ -0,0 +1,58 @@
+.modal_background {
+	position: absolute;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background-color: rgba(0, 0, 0, 0.6);
+	opacity: 0;
+	transition: opacity .4s;
+}
+
+.modal_window {
+	position: absolute;
+	z-index: inherit;
+	display: flex;
+	flex-direction: column;
+	background-color: var(--layer_2_color);
+	max-height: 100%;
+	max-width: 100%;
+	top: 20%;
+	left: 50%;
+	transform: translate(-50%, -20%);
+	padding: 0;
+	box-sizing: border-box;
+	text-align: left;
+	box-shadow: var(--shadow_color) 0px 0px 50px;
+}
+
+.modal_header {
+	flex-grow: 0;
+	flex-shrink: 0;
+	display: flex;
+	flex-direction: row;
+	padding: 4px;
+}
+
+.modal_title {
+	flex-grow: 1;
+	flex-shrink: 0;
+
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+	font-size: 1.2em;
+}
+
+.modal_btn_close {
+	flex-grow: 0;
+	flex-shrink: 0;
+}
+
+.modal_body {
+	flex-grow: 1;
+	flex-shrink: 1;
+	overflow: auto;
+	padding: 10px;
+}

res/include/style/viewer.css

@@ -253,45 +253,7 @@
    || MISC COMPONENTS ||
    ===================== */
 
-.popup {
-	position: absolute;
-	visibility: hidden;
-	display: flex;
-	flex-direction: column;
-	opacity: 0;
-	transition: visibility .5s, opacity .5s;
-	background-color: var(--layer_2_color);
-	border-color: var(--layer_2_color_border);
-	max-height: 100%;
-	max-width: 100%;
-	top: 20%;
-	left: 50%;
-	transform: translate(-50%, -20%);
-	padding: 0;
-	box-sizing: border-box;
-	text-align: left;
-	box-shadow: var(--shadow_color) 0px 0px 50px;
-}
-.popup > .highlight_1 {
-	font-size: 1.2em;
-}
-.popup > .content_area {
-	flex: 1;
-	overflow: auto;
-	padding: 10px;
-}
-
-.details_popup{
-	width: 1500px;
-	height: 800px;
-	z-index: 200;
-}
-.captcha_popup{
-	height: auto;
-	width: 450px;
-	z-index: 201;
-}
-#captcha_popup_captcha > div {
+.captcha_popup_captcha > div {
 	display: inline-block;
 }