html: remove bulma

html/index.html

@@ -30,11 +30,11 @@
                 </div>
                 <div id="progress">
                     <p id="file-name"></p>
-                    <progress id="progress-bar" class="progress is-link" max="100"></progress>
+                    <progress id="progress-bar" class="progress" max="100"></progress>
                     <p id="progress-info">
                         <span id="bytes-received">-</span>/<span id="bytes-file">-</span> (<span id="percent-received"></span>)
                         transferred
-                        <a id="skip" class="button is-link is-small is-pulled-right">Skip</a>
+                        <a id="skip" class="button">Skip</a>
                     </p>
                 </div>
             </div>

html/package.json

@@ -14,7 +14,6 @@
         "start": "gulp clean && webpack-serve webpack.dev.js"
     },
     "dependencies": {
-        "bulma": "^0.6.1",
         "core-js": "^2.5.3",
         "fast-text-encoding": "^1.0.0",
         "xterm": "^3.12.2",

html/sass/app.scss

@@ -1,11 +1,5 @@
-@import "~bulma/sass/utilities/_all";
-@import "~bulma/sass/base/helpers";
-@import "~bulma/sass/elements/box";
-@import "~bulma/sass/elements/button";
-@import "~bulma/sass/elements/form";
-@import "~bulma/sass/elements/progress";
-@import "~bulma/sass/components/modal";
 @import "~xterm/src/xterm.css";
+@import "modal";
 
 html, body {
     height: 100%;
@@ -20,27 +14,36 @@ html, body {
     margin: 0 auto;
     padding: 0;
     background-color: #2b2b2b;
+    .terminal {
+        padding: 5px;
+    }
 }
 
-#terminal-container .terminal {
-    padding: 5px;
+#modal {
+    strong {
+        color: #268bd2;
+    }
+    span {
+        color: #2aa198;
+    }
+    header {
+        font-weight: bold;
+        text-align: center;
+        padding-bottom: 10px;
+        margin-bottom: 10px;
+        border-bottom: 1px solid #ddd;
+    }
 }
 
-#modal strong {
-    color: #268bd2;
-}
-
-#modal span {
-    color: #2aa198;
-}
-
-#modal header {
-    font-weight: bold;
-    text-align: center;
-    padding-bottom: 10px;
-    margin-bottom: 10px;
-    border-bottom: 1px solid #ddd;
-
+#progress {
+    padding-top: 10px;
+    progress {
+        margin: 10px 0;
+    }
+    color: #93a1a1;
+    span {
+        font-weight: bold;
+    }
 }
 
 #status {
@@ -50,29 +53,12 @@ html, body {
 
 #choose {
     padding-top: 10px;
-}
-
-#choose .file-name {
-    border-color: transparent;
-}
-
-#progress {
-    padding-top: 10px;
+    .file-name {
+        border-color: transparent;
+    }
 }
 
 #file-name {
     background-color: #fafffd;
     text-align: center;
-}
-
-#progress progress {
-    margin: 10px 0;
-}
-
-#progress {
-    color: #93a1a1;
-}
-
-#progress span {
-    font-weight: bold;
 }

html/sass/modal.scss

@@ -0,0 +1,149 @@
+.box {
+  background-color: #fff;
+  border-radius: 5px;
+  box-shadow: 0 2px 3px hsla(0, 0%, 4%, 0.1), 0 0 0 1px hsla(0, 0%, 4%, 0.1);
+  color: #4a4a4a;
+  display: block;
+  padding: 1.25rem;
+}
+
+.progress {
+  border: none;
+  border-radius: 290486px;
+  display: block;
+  height: 1rem;
+  overflow: hidden;
+  padding: 0;
+  width: 100%;
+  &:not(:last-child) {
+    margin-bottom: 1.5rem;
+  }
+  &::-webkit-progress-bar {
+    background-color: #dbdbdb;
+  }
+  &::-webkit-progress-value {
+    background-color: #3273dc;
+  }
+  &::-moz-progress-bar {
+    background-color: #3273dc;
+  }
+  &::-ms-fill {
+    background-color: #3273dc;
+    border: none;
+  }
+}
+
+.modal {
+  bottom: 0;
+  left: 0;
+  right: 0;
+  top: 0;
+  align-items: center;
+  display: none;
+  overflow: hidden;
+  position: fixed;
+  z-index: 40;
+  &.is-active {
+    display: flex;
+  }
+}
+
+.file-input {
+  height: .01em;
+  left: 0;
+  outline: none;
+  position: absolute;
+  top: 0;
+  width: .01em;
+}
+
+.file-cta, .file-name {
+  align-items: center;
+  box-shadow: none;
+  display: inline-flex;
+  height: 2.25em;
+  justify-content: flex-start;
+  line-height: 1.5;
+  position: relative;
+  vertical-align: top;
+  border-color: #dbdbdb;
+  border-radius: 3px;
+  font-size: 1em;
+  padding: calc(.375em - 1px) 1em;
+  white-space: nowrap;
+}
+
+.file-name {
+  border-color: #dbdbdb;
+  border-style: solid;
+  border-width: 1px 1px 1px 0;
+  display: block;
+  max-width: 16em;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  &:active, &:focus {
+    outline: none;
+  }
+}
+
+.file-cta {
+  background-color: #f5f5f5;
+  color: #4a4a4a;
+  &:active, &:focus {
+    outline: none;
+  }
+}
+
+.button {
+  float: right;
+  align-items: center;
+  border-radius: 2px;
+  display: inline-flex;
+  font-size: .75rem;
+  height: 2em;
+  line-height: 1.5;
+  position: relative;
+  vertical-align: top;
+  background-color: #3273dc;
+  border-color: transparent;
+  color: #fff;
+  cursor: pointer;
+  justify-content: center;
+  padding: calc(.375em - 1px) 0.75em;
+  text-align: center;
+  white-space: nowrap;
+  &:active, &:focus {
+    outline: none;
+  }
+  &:hover {
+    background-color: #276cda;
+    border-color: transparent;
+    color: #fff;
+  }
+}
+
+.modal-background {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  background-color: hsla(0, 0%, 4%, 0.86);
+}
+
+.modal-content {
+  margin: 0 20px;
+  max-height: calc(100vh - 160px);
+  overflow: auto;
+  position: relative;
+  width: 100%;
+}
+
+@media print, screen and (min-width: 769px) {
+  .modal-content {
+    margin: 0 auto;
+    max-height: calc(100vh - 40px);
+    width: 640px;
+  }
+}

html/yarn.lock

@@ -1419,11 +1419,6 @@ builtin-status-codes@^3.0.0:
   resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
   integrity sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=
 
-bulma@^0.6.1:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.6.2.tgz#f4b1d11d5acc51a79644eb0a2b0b10649d3d71f5"
-  integrity sha1-9LHRHVrMUaeWROsKKwsQZJ09cfU=
-
 cacache@^10.0.4:
   version "10.0.4"
   resolved "https://registry.yarnpkg.com/cacache/-/cacache-10.0.4.tgz#6452367999eff9d4188aefd9a14e9d7c6a263460"