diff --git a/html/index.html b/html/index.html index b6a5c7b0..e9cbd9a2 100644 --- a/html/index.html +++ b/html/index.html @@ -30,11 +30,11 @@

- +

-/- () transferred - +

diff --git a/html/package.json b/html/package.json index 94c10b33..b872750e 100644 --- a/html/package.json +++ b/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", diff --git a/html/sass/app.scss b/html/sass/app.scss index 712fead4..7fdb5105 100644 --- a/html/sass/app.scss +++ b/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; } \ No newline at end of file diff --git a/html/sass/modal.scss b/html/sass/modal.scss new file mode 100644 index 00000000..86750e89 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/html/yarn.lock b/html/yarn.lock index a242bffc..18d0c43a 100644 --- a/html/yarn.lock +++ b/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" diff --git a/src/index.html b/src/index.html index 3be49c19..9aceb81e 100644 --- a/src/index.html +++ b/src/index.html @@ -1 +1 @@ -ttyd - Terminal
\ No newline at end of file +ttyd - Terminal
\ No newline at end of file