HTML/CSS for user's filesystem

1 files changed, 42 insertions, 2 deletions

diff --git a/css/style.css b/css/style.css
index 9296e87..060fdde 100644
--- a/css/style.css
+++ b/css/style.css
@@ -95,7 +95,6 @@ body {
 	font-weight: bold;
 }
 
-
 form {
 	background: white;
 	margin: 4.5rem;
@@ -165,7 +164,8 @@ form p {
 	from { opacity: 0; }
 	to   { opacity: 1; }
 }
-input {
+
+input:not([type=file]) {
 	min-width: 300px;
 	border: 1px solid #bbb;
 	padding: 0.5rem;
@@ -225,3 +225,43 @@ input[type=submit]:hover {
     display: none;
 }
 
+.filesystem {
+	background: #fafafa;
+	margin: 1rem;
+	padding: 1rem;
+	box-shadow: 0 0.8rem 1.3rem rgba(0,0,0,0.2);
+	border-radius: 0.5rem;
+	border-radius: 0.5rem;
+	border: 1px solid #b9b9b9;
+    display: grid;
+
+    grid-gap: 20px;
+    grid-auto-rows: 10rem;
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+}
+
+.file {
+    padding: 0.5rem;
+    cursor: pointer;
+    color: #333;
+    user-select: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border: 1px solid #fafafa;
+    border-radius: 0.3rem;
+}
+
+.file:hover {
+    padding: 0.5rem;
+    background: white;
+    color: black;
+    border-color: #ddd;
+}
+
+.file:hover > img {
+    filter: brightness(150%);
+}