Added better drag & drop support

Petschko · Petschko · commit b310e6e0068a · 2022-07-03T15:28:50.000+02:00
diff --git a/index.html b/index.html
@@ -22,7 +22,7 @@
 		<!-- https://getbootstrap.com/docs/3.4/getting-started/ -->
 		<link rel="stylesheet" href="styles/bootstrap.min.css">
 		<link rel="stylesheet" href="styles/bootstrap-theme.min.css">
-		<link rel="stylesheet" href="styles/style.css?ver=1.2">
+		<link rel="stylesheet" href="styles/style.css?ver=2.0.1">
 	</head>
 	<body>
 		<noscript>
@@ -133,8 +133,8 @@ <h2>Select Files &amp; Infos</h2>
 								<label for="encryptedFiles">
 									En/Decrypt-File(s):
 								</label>
-								<div class="bottom-space">
-									<input type="file" accept=".png,.ogg,.m4a,.rpgmvp,.rpgmvm,.rpgmvo,.png_,.ogg_,.m4a_" name="encryptedFiles" id="encryptedFiles" multiple required>
+								<div class="bottom-space drag-drop-file">
+									<input type="file" accept=".png,.ogg,.m4a,.rpgmvp,.rpgmvm,.rpgmvo,.png_,.ogg_,.m4a_" name="encryptedFiles" id="encryptedFiles" title="Drag and drop files here or select them" multiple required>
 								</div>
 							</div>
 							</fieldset>
@@ -314,8 +314,8 @@ <h2>Select RPGMVP / PNG_ Files</h2>
 								<label for="encryptedImg">
 									Select File/s to restore:
 								</label>
-								<div class="bottom-space">
-									<input id="encryptedImg" type="file" accept=".rpgmvp,.png_" name="encryptedImg" multiple required>
+								<div class="bottom-space drag-drop-file">
+									<input id="encryptedImg" type="file" accept=".rpgmvp,.png_" name="encryptedImg" title="Drag and drop files here or select them" multiple required>
 								</div>
 							</fieldset>
 
diff --git a/styles/style.css b/styles/style.css
@@ -348,6 +348,29 @@ button#encrypt > span {
 	margin: 0;
 }
 
+/* Drag & Drop Styles */
+.drag-drop-file {
+	position: relative;
+}
+
+.drag-drop-file input[type="file"] {
+	outline: 2px dashed #92b0b3;
+	outline-offset: -10px;
+	padding: 60px 0;
+	background-color: #efefef;
+	text-align: center;
+	width: 100%;
+}
+
+.drag-drop-file:before {
+	content: "(or) Drag and Drop files here.";
+	color: #92b0b3;
+	position: absolute;
+	bottom: 30px;
+	left: 50%;
+	transform: translate(-50%);
+}
+
 /* Media-Queries */
 @media all and (min-width: 801px) and (max-width: 1080px) {
 	#home a.menu-link,
@@ -372,6 +395,11 @@ button#encrypt > span {
 	.button-grid-wrapper .box2 button {
 		width: 100%;
 	}
+
+	/* Drag & Drop Styles */
+	.drag-drop-file input[type="file"] {
+		padding-bottom: 90px;
+	}
 }
 
 @media all and (max-width: 800px) {
@@ -431,4 +459,9 @@ button#encrypt > span {
 	.button-grid-wrapper .box2 button {
 		width: 100%;
 	}
+
+	/* Drag & Drop Styles */
+	.drag-drop-file input[type="file"] {
+		padding-bottom: 90px;
+	}
 }
