Init from Manwell

css/index.css

@@ -0,0 +1,145 @@
+svg{
+	max-width:100%;
+	max-height:100%;
+}
+
+body.drag-over{
+	background-color: var(--light); 
+}
+
+header{
+	width:100%;
+	height:50px;
+	display: flex;
+	align-items:center;
+	padding:0px 20px;
+	background-color: var(--top);
+	color:white;
+	fill:white;
+	font-size:30px;
+}
+header img{
+	width:36px;
+	margin-right:10px;
+}
+header img + span{
+	margin-right:auto;
+}
+
+header #new-file {
+	display: flex;
+	justify-content: flex-end;
+	width: 40px;
+	height: 40px;
+	border-radius: 40px;
+	overflow: hidden;
+	align-items: center;
+
+	transition: width 100ms ease-in-out;
+}
+header #new-file:hover {
+	width: 175px;
+	background-color: var(--light);
+}
+
+header #new-file span.btn {
+	display:flex;
+	align-items:center;
+	justify-content:center;
+	flex-grow: 1;
+	flex-shrink: 1;
+	min-width: 30px;
+	height: 100%;
+	opacity:0.5;
+
+	text-align: center;
+	font-size: 14px;
+	cursor: pointer;
+	user-select: none;
+}
+header #new-file span.btn:hover {
+	opacity:1;
+	text-shadow: 0 0 0 rgba(255, 255, 255, 0.5);
+}
+
+header #new-file .btn-svg {
+	flex-shrink: 0;
+	width: 40px;
+	height: 40px;
+	padding: 5px;
+}
+
+header #new-file .btn-svg svg {
+	display: block;
+	width: 100%;
+	height: 100%;
+	fill: white;
+}
+
+#files{
+	padding:10px 20px;
+}
+.file{
+	position:relative;
+	color:white;
+	height:45px;
+	padding:10px 15px;
+	display:grid;
+	grid-template-columns: 60px auto 50px 125px;
+	align-items:center;
+	font-size:16px;
+	border-radius:45px;
+	cursor:pointer;
+}
+.file:hover{
+	background: var(--lighter);
+}
+.file .file-type{
+	justify-self: center;
+}
+.file .file-name,
+.file .file-type{
+	pointer-events:none;
+}
+.file .file-icons{
+	display:flex;
+	pointer-events:none;
+}
+.file .file-icons .file-icon{
+	display:flex;
+	align-items:center;
+	border-radius:20px;
+	padding:2px 0px;
+	transition: all 100ms ease-in-out;
+	cursor:pointer;
+	pointer-events:all;
+}
+.file .file-icons .file-icon svg{
+	width: 20px;
+	height: 20px;
+	fill: white;
+	opacity:0.7;
+}
+.file .file-icons .file-icon.icon-confirm svg,
+.file .file-icons .file-icon svg:hover{
+	opacity:1;
+}
+.file .file-icons .file-icon.icon-confirm{
+	background:#C00;
+	padding:2px 5px;
+}
+.file .file-icons .file-icon::before{
+	content:"DELETE";
+    font-size: 12px;
+    width: 0px;
+	overflow:hidden;
+	text-align:center;
+	transition: width 100ms ease-in-out;
+}
+.file .file-icons .file-icon.icon-confirm::before{
+	width:50px;
+}
+.file .file-icons .file-edit{
+	margin-left:auto;
+	margin-right:5px;
+}