style /file/ with .less

www/file/file.css

@@ -0,0 +1,70 @@
+html,
+body {
+  margin: 0px;
+}
+.cryptpad-toolbar {
+  margin-bottom: 1px;
+  padding: 0px;
+  display: inline-block;
+}
+#file {
+  display: block;
+  height: 300px;
+  width: 300px;
+  border: 2px solid black;
+  margin: 50px;
+}
+.inputfile {
+  width: 0.1px;
+  height: 0.1px;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  z-index: -1;
+}
+#upload-form {
+  padding: 0px;
+  margin: 0px;
+  position: relative;
+  width: 50vh;
+  height: 50vh;
+  display: block;
+  margin: auto;
+}
+#upload-form label {
+  position: relative;
+}
+.hovering {
+  background-color: rgba(255, 0, 115, 0.5) !important;
+}
+.block {
+  display: block;
+  height: 50vh;
+  width: 50vh;
+}
+.hidden {
+  display: none;
+}
+.inputfile + label {
+  border: 2px solid black;
+  background-color: rgba(50, 50, 50, 0.1);
+  margin: 50px;
+  display: block;
+}
+.inputfile:focus + label,
+.inputfile + label:hover {
+  background-color: rgba(50, 50, 50, 0.3);
+}
+#progress {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  height: 100%;
+  transition: width 500ms;
+  width: 0%;
+  max-width: 100%;
+  max-height: 100%;
+  background-color: rgba(255, 0, 115, 0.75);
+  z-index: 10000;
+  display: block;
+}

www/file/file.less

@@ -0,0 +1,82 @@
+@import "../../customize.dist/src/less/variables.less";
+@import "../../customize.dist/src/less/mixins.less";
+
+html, body {
+    margin: 0px;
+}
+.cryptpad-toolbar {
+    margin-bottom: 1px;
+    padding: 0px;
+    display: inline-block;
+}
+#file {
+    display: block;
+    height: 300px;
+    width: 300px;
+    border: 2px solid black;
+    margin: 50px;
+}
+
+.inputfile {
+    width: 0.1px;
+    height: 0.1px;
+    opacity: 0;
+    overflow: hidden;
+    position: absolute;
+    z-index: -1;
+}
+
+#upload-form {
+    padding: 0px;
+    margin: 0px;
+
+    position: relative;
+    width: 50vh;
+    height: 50vh;
+    display: block;
+    margin: auto;
+}
+#upload-form label{
+    position: relative;
+}
+
+.hovering {
+    background-color: rgba(255, 0, 115, 0.5) !important;
+}
+
+.block {
+    display: block;
+    height: 50vh;
+    width: 50vh;
+}
+.hidden {
+    display: none;
+}
+.inputfile + label {
+    border: 2px solid black;
+    background-color: rgba(50, 50, 50, .10);
+    margin: 50px;
+    display: block;
+}
+
+.inputfile:focus + label,
+.inputfile + label:hover {
+    background-color: rgba(50, 50, 50, 0.30);
+}
+
+#progress {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    height: 100%;
+
+
+    transition: width 500ms;
+    width: 0%;
+    max-width: 100%;
+    max-height: 100%;
+    background-color: rgba(255, 0, 115, 0.75);
+    z-index: 10000;
+    display: block;
+}
+

www/file/inner.html

@@ -5,84 +5,7 @@
     <link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
     <script src="/bower_components/jquery/dist/jquery.min.js"></script>
     <link rel="stylesheet" href="/bower_components/bootstrap/dist/css/bootstrap.min.css">
-    <style>
+    <link rel="stylesheet" href="/file/file.css">
-    html, body {
-        margin: 0px;
-    }
-    .cryptpad-toolbar {
-        margin-bottom: 1px;
-        padding: 0px;
-        display: inline-block;
-    }
-    #file {
-        display: block;
-        height: 300px;
-        width: 300px;
-        border: 2px solid black;
-        margin: 50px;
-    }
-
-    .inputfile {
-        width: 0.1px;
-        height: 0.1px;
-        opacity: 0;
-        overflow: hidden;
-        position: absolute;
-        z-index: -1;
-    }
-
-    #upload-form {
-        padding: 0px;
-        margin: 0px;
-
-        position: relative;
-        width: 50vh;
-        height: 50vh;
-        display: block;
-        margin: auto;
-    }
-    #upload-form label{
-        position: relative;
-    }
-
-    .hovering {
-        background-color: rgba(255, 0, 115, 0.5) !important;
-    }
-
-    .block {
-        display: block;
-        height: 50vh;
-        width: 50vh;
-    }
-    .hidden {
-        display: none;
-    }
-    .inputfile + label {
-        border: 2px solid black;
-        background-color: rgba(50, 50, 50, .10);
-        margin: 50px;
-        display: block;
-    }
-
-    .inputfile:focus + label,
-    .inputfile + label:hover {
-        background-color: rgba(50, 50, 50, 0.30);
-    }
-
-    #progress {
-        position: absolute;
-        top: 0px;
-        left: 0px;
-        height: 100%;
-        width: 0%;
-        max-width: 100%;
-        max-height: 100%;
-        background-color: rgba(255, 0, 115, 0.75);
-        z-index: 10000;
-        display: block;
-    }
-
-    </style>
 </head>
 <body>
     <div id="toolbar" class="toolbar-container"></div>