From 092b3b3e9202539fd2565992217dbe4d3916329f Mon Sep 17 00:00:00 2001 From: Jack Foltz Date: Tue, 1 Jan 2019 18:09:16 -0500 Subject: [PATCH] Add css back to git --- .gitignore | 1 - public/css/form.css | 119 +++++++++++++++++++++++++++++++++ public/css/form.min.css | 1 + public/css/home.css | 155 +++++++++++++++++++++++++++++++++++++++++++ public/css/home.min.css | 1 + public/css/index.css | 45 +++++++++++++ public/css/index.min.css | 1 + public/css/navbar.css | 67 +++++++++++++++++++ public/css/panel.css | 148 +++++++++++++++++++++++++++++++++++++++++ public/css/panel.min.css | 1 + public/css/subpanel/dash.css | 47 +++++++++++++ public/css/subpanel/keys.css | 105 +++++++++++++++++++++++++++++ 12 files changed, 690 insertions(+), 1 deletion(-) create mode 100644 public/css/form.css create mode 100644 public/css/form.min.css create mode 100644 public/css/home.css create mode 100644 public/css/home.min.css create mode 100644 public/css/index.css create mode 100644 public/css/index.min.css create mode 100644 public/css/navbar.css create mode 100644 public/css/panel.css create mode 100644 public/css/panel.min.css create mode 100644 public/css/subpanel/dash.css create mode 100644 public/css/subpanel/keys.css diff --git a/.gitignore b/.gitignore index b5f69dc..a8bd59f 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,6 @@ node_modules/ public/js -public/css .idea/ .awcache/ diff --git a/public/css/form.css b/public/css/form.css new file mode 100644 index 0000000..1e87944 --- /dev/null +++ b/public/css/form.css @@ -0,0 +1,119 @@ +body { + background-color: #000000; + margin: 0; + color: #d3d3d3; + font-family: 'Roboto', sans-serif; +} + +::-moz-focus-inner { + border: 0; +} + +.form { + margin: 50px auto; + width: 300px; +} + +.form h3 { + background-color: #000; + border: 2px solid #2a9fd6; + border-radius: 5px 5px 0 0; + color: #eee; + font-size: 18px; + padding: 20px; + margin: 0; + text-align: center; + text-transform: uppercase; +} + +fieldset { + border: 2px solid #2a9fd6; + border-top: none; + margin: 0; + background: #000; + border-radius: 0 0 5px 5px; + padding: 20px; + position: relative; +} + +fieldset:before { + border-bottom: 2px solid #2a9fd6; + border-right: 2px solid #2a9fd6; + background-color: #000; + content: ""; + width: 8px; + height: 8px; + left: 50%; + margin: -4px 0 0 -4px; + position: absolute; + top: 0; + transform: rotate(45deg) translateY(-2px); +} + +.form input { + display: block; + font-size: 14px; + background: #000; + color: #d3d3d3; + border: 1px solid #999; + width: 226px; + padding: 12px 12px; + margin: auto auto 5px; +} + +button { + background: #000; + border: 2px solid #2a9fd6; + border-radius: 4px; + color: #d3d3d3; + cursor: pointer; + display: block; + padding: 10px 30px; + margin: 20px auto auto; + transition: background 0.25s, border-color 0.25s; +} + +button:hover { + background: #2a9fd6; + color: #fff; + text-decoration: none; + outline: none; +} + +button.error { + background: #ff6666; + border-color: #ff6666; + color: #fff; + animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; + transform: translate3d(0, 0, 0); + backface-visibility: hidden; + perspective: 1000px; +} + +button.warn { + background: #ffa500; + border-color: #ffa500; + color: #fff; + animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; + transform: translate3d(0, 0, 0); + backface-visibility: hidden; + perspective: 1000px; +} + +@keyframes shake { + 10%, 90% { + transform: translate3d(-1px, 0, 0); + } + + 20%, 80% { + transform: translate3d(2px, 0, 0); + } + + 30%, 50%, 70% { + transform: translate3d(-4px, 0, 0); + } + + 40%, 60% { + transform: translate3d(4px, 0, 0); + } +} diff --git a/public/css/form.min.css b/public/css/form.min.css new file mode 100644 index 0000000..dd12058 --- /dev/null +++ b/public/css/form.min.css @@ -0,0 +1 @@ +body{background-color:#000;margin:0;color:#d3d3d3;font-family:Roboto,sans-serif}::-moz-focus-inner{border:0}.form{margin:50px auto;width:300px}.form h3{background-color:#000;border:2px solid #2a9fd6;border-radius:5px 5px 0 0;color:#eee;font-size:18px;padding:20px;margin:0;text-align:center;text-transform:uppercase}fieldset{border:2px solid #2a9fd6;border-top:none;margin:0;background:#000;border-radius:0 0 5px 5px;padding:20px;position:relative}fieldset:before{border-bottom:2px solid #2a9fd6;border-right:2px solid #2a9fd6;background-color:#000;content:"";width:8px;height:8px;left:50%;margin:-4px 0 0 -4px;position:absolute;top:0;transform:rotate(45deg) translateY(-2px)}.form input{display:block;font-size:14px;background:#000;color:#d3d3d3;border:1px solid #999;width:226px;padding:12px 12px;margin:auto;margin-bottom:5px}button{background:#000;border:2px solid #2a9fd6;border-radius:4px;color:#d3d3d3;cursor:pointer;display:block;padding:10px 30px;margin:auto;margin-top:20px;transition:background .25s}button:hover{background:#2a9fd6;color:#fff;text-decoration:none;outline:0} \ No newline at end of file diff --git a/public/css/home.css b/public/css/home.css new file mode 100644 index 0000000..794211a --- /dev/null +++ b/public/css/home.css @@ -0,0 +1,155 @@ +body { + background-color: #060606; + color: #D3D3D3; + font-family: 'Roboto', sans-serif; + font-size: 14px; + height: 100%; + line-height: 20px; + margin: 0; + padding-top: 20px; + padding-bottom: 40px; +} + +#container { + max-width: 700px; + text-align: center; + display: flex; + flex-direction: column; + margin: auto; +} + +a { + color: #0078B4; + text-decoration: none; + transition: color 0.25s; +} + +a:hover, +a:focus, +a:active { + color: #005580; +} + + +h1 { + font-size: 72px; + font-weight: bold; +} +.upload { + margin: 60px 0; +} +.btn { + font-family: 'Roboto', sans-serif; + background: #000000; + border: 2px solid #2A9FD6; + border-radius: 4px; + color: #D3D3D3; + cursor: pointer; + display: inline-block; + font-size: 24px; + padding: 28px 48px; + transition: background-color 0.25s, width 0.5s, height 0.5s; +} +.btn:hover { + background-color: #2A9FD6; + color: #FFFFFF; + text-decoration: none; + outline: none; +} + +:focus { + outline: none; +} +::-moz-focus-inner {border: 0;} + +#upload-filelist { + list-style-type: none; + margin: 20px 50px; + padding: 0; + text-align: left; +} + + + +#upload-filelist > li { + margin-top: 5px; + overflow: hidden; + display: flex; +} + +.list-name { + margin-top: 6px; + overflow: hidden; + max-width: 70%; + text-overflow: ellipsis; + white-space: nowrap; +} + +.list-url { + font-family: 'Roboto Mono', monospace; + margin-left: auto; +} + +.list-progress { + margin: 10px 30px 10px 30px; + flex-grow: 2; +} + + +.list-url a { + vertical-align: super; + color: #5C5C5C; +} +.list-url a:hover { + color: #D3D3D3; +} + +.list-url-clipboard-btn { + border: 2px solid #222222; + height: 32px; + margin-left: 5px; + border-radius: 3px; + cursor: pointer; + background-color: #5C5C5C; + transition: background-color 0.25s; +} +.list-url-clipboard-btn:hover, +.list-url-clipboard-btn:focus { + background-color: #ABABAB; + outline: none; +} + +.list-err { + font-family: 'Roboto Mono', monospace; + margin-left: auto; + color: #ff6666; + vertical-align: super; +} + + + +nav > ul, +nav a { + color: #32809F; + list-style: none; + margin: 0; + padding: 0; + text-align: center; +} + +nav > ul > li { + display: inline-block; + margin: 0; + padding: 0; + cursor: default; +} + +nav > ul > li:after { + content: "|"; + margin: 0 8px; + opacity: 0.3; +} +nav > ul > li:last-child:after { + content: ""; + margin: 0; +} \ No newline at end of file diff --git a/public/css/home.min.css b/public/css/home.min.css new file mode 100644 index 0000000..6d3536a --- /dev/null +++ b/public/css/home.min.css @@ -0,0 +1 @@ +body{background-color:#060606;color:#d3d3d3;font-family:Roboto,sans-serif;font-size:14px;height:100%;line-height:20px;margin:0;padding-top:20px;padding-bottom:40px}#container{max-width:700px;text-align:center;display:flex;flex-direction:column;margin:auto}a{color:#0078b4;text-decoration:none;transition:color .25s}a:active,a:focus,a:hover{color:#005580}h1{font-size:72px;font-weight:700}.upload{margin:60px 0}.btn{font-family:Roboto,sans-serif;background:#000;border:2px solid #2a9fd6;border-radius:4px;color:#d3d3d3;cursor:pointer;display:inline-block;font-size:24px;padding:28px 48px;transition:background-color .25s,width .5s,height .5s}.btn:hover{background-color:#2a9fd6;color:#fff;text-decoration:none;outline:0}:focus{outline:0}::-moz-focus-inner{border:0}#upload-filelist{list-style-type:none;margin:20px 50px;padding:0;text-align:left}#upload-filelist>li{margin-top:5px;overflow:hidden;display:flex}.list-name{margin-top:6px;overflow:hidden;max-width:70%;text-overflow:ellipsis;white-space:nowrap}.list-url{font-family:'Roboto Mono',monospace;margin-left:auto}.list-progress{margin:10px 30px 10px 30px;flex-grow:2}.list-url a{vertical-align:super;color:#5c5c5c}.list-url a:hover{color:#d3d3d3}.list-url-clipboard-btn{border:2px solid #222;height:32px;margin-left:5px;border-radius:3px;cursor:pointer;background-color:#5c5c5c;transition:background-color .25s}.list-url-clipboard-btn:focus,.list-url-clipboard-btn:hover{background-color:#ababab;outline:0}.list-err{font-family:'Roboto Mono',monospace;margin-left:auto;color:#f66;vertical-align:super}nav a,nav>ul{color:#32809f;list-style:none;margin:0;padding:0;text-align:center}nav>ul>li{display:inline-block;margin:0;padding:0;cursor:default}nav>ul>li:after{content:"|";margin:0 8px;opacity:.3}nav>ul>li:last-child:after{content:"";margin:0} \ No newline at end of file diff --git a/public/css/index.css b/public/css/index.css new file mode 100644 index 0000000..2bcbff1 --- /dev/null +++ b/public/css/index.css @@ -0,0 +1,45 @@ +* { + margin: 0; +} + +body { + background: #000; +} + +a { + position: absolute; + top: 40px; + left: 48%; + opacity: 0.1; + height: 30px; + width: 30px; + z-index: 100; + cursor: default; +} + +a img { + width: 30px; + height: 30px; +} + +canvas { + position: absolute; + top: 0; + left: 0; +} + +video { + position: fixed; + top: 50%; + left: 50%; + min-width: 100%; + min-height: 100%; + z-index: -100; + transform: translateX(-50%) translateY(-50%); + background-size: cover; + transition: 1s opacity; +} + +#buffer { + display: none; +} \ No newline at end of file diff --git a/public/css/index.min.css b/public/css/index.min.css new file mode 100644 index 0000000..36dc467 --- /dev/null +++ b/public/css/index.min.css @@ -0,0 +1 @@ +*{margin:0}body{background:#000}a{position:absolute;top:5px;left:48%;opacity:.1;height:30px;width:30px;z-index:100;cursor:default}a img{width:30px;height:30px}canvas{position:absolute;top:0;left:0}video{position:fixed;top:50%;left:50%;min-width:100%;min-height:100%;width:1920px;height:760px;z-index:-100;transform:translateX(-50%) translateY(-50%);background-size:cover;transition:1s opacity}#buffer{display:none} \ No newline at end of file diff --git a/public/css/navbar.css b/public/css/navbar.css new file mode 100644 index 0000000..6cffe94 --- /dev/null +++ b/public/css/navbar.css @@ -0,0 +1,67 @@ +/* SHIMAPAN title */ +.sidebar-title { + grid-row-start: 1; + grid-row-end: 1; + place-self: center; + + cursor: pointer; + + display: flex; + justify-content: center; + align-items: center; + + width: 200px; + height: 60px; + /*border-bottom: 1px solid #999;*/ +} +.sidebar-title span { + color: #2a9fd6; + font-size: 20px; + text-transform: uppercase; + letter-spacing: 6px; +} + +/* Nav Container */ +.sidebar { + grid-row-start: 2; + grid-row-end: 2; +} + +/* Nav Elements */ +.nav li { + cursor: pointer; + display: flex; + align-items: center; +} +.nav li a { + flex: 1; + outline: none; + padding: 20px 0 20px; + margin-left: 20px; + font-size: 14px; + color: #666; + text-decoration: none; +} +.nav li span { + background: #0d0d0d; + width: 35px; + height: 35px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + margin-left: 20px; +} +.nav-icon { + font: 14px fontawesome; + color: #fff; +} +.nav li a:hover { + color: #fff; +} +.nav li a.active { + color: #fff; +} + +/* Prevent annoying outline on firefox */ +::-moz-focus-inner {border: 0;} diff --git a/public/css/panel.css b/public/css/panel.css new file mode 100644 index 0000000..334606a --- /dev/null +++ b/public/css/panel.css @@ -0,0 +1,148 @@ +@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); +@import url('https://fonts.googleapis.com/css?family=Roboto'); +@import url('https://fonts.googleapis.com/css?family=Roboto+Mono'); + +@import "navbar.css"; + +/* Subpanels */ +@import "subpanel/dash.css"; +@import "subpanel/keys.css"; + +*, *:before, *:after { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font: 12px 'Roboto', sans-serif; + color: #eeeeee; + background: #020202; +} + +.container { + display: grid; + grid-template-columns: 240px auto; + grid-template-rows: 60px auto; + width: 100vw; + height: 100vh; +} + +.view { + grid-row-start: 2; + grid-column-start: 2; + background: #121212; + padding: 20px; + border-left: 1px solid #2a9fd6; + border-top: 1px solid #2a9fd6; +} + + +.inner { + display: flex; + flex-direction: column; +} + +.modal, +.modal-box { + z-index: 900; +} + +.modal-sandbox { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + background: transparent; +} + +.modal { + display: none; + position: fixed; + width: 100%; + height: 100%; + left: 0; + top: 0; + background: rgb(0,0,0); + background: rgba(0,0,0,.8); + overflow: auto; +} + +.modal-box { + position: relative; + width: 80%; + max-width: 700px; + margin: 60px auto; + animation-name: modalbox; + animation-duration: .3s; + animation-timing-function: ease; +} + +.modal-header { + border: 1px solid #2a9fd6; + border-radius: 8px 8px 0 0; + display: flex; + flex-direction: row; + justify-content: space-between; + padding: 20px 40px; + background: #000; + color: #ffffff; + overflow: hidden; +} + +.modal-body { + border: 1px solid #2a9fd6; + border-top: none; + background: #000; + padding: 30px; +} + +.modal-footer { + display: flex; + justify-content: flex-end; + border: 1px solid #2a9fd6; + border-radius: 0 0 8px 8px; + border-top: none; + background: #000; + padding: 20px; +} + +.close-modal { + text-align: right; + font-size: 24px; + cursor: pointer; +} + +@keyframes modalbox { + 0% { + top: -250px; + opacity: 0; + } + 100% { + top: 0; + opacity: 1; + } +} + +button { + margin-left: 20px; + color: #d3d3d3; + background: #000; + border: 2px solid #2a9fd6; + border-radius: 5px; + padding: 10px; + cursor: pointer; + transition: background-color 0.25s; +} + +button:hover { + color: #fff; + background-color: #2a9fd6; + text-decoration: none; + outline: none; +} + +::-moz-focus-inner { + outline: none; +} diff --git a/public/css/panel.min.css b/public/css/panel.min.css new file mode 100644 index 0000000..9c6728c --- /dev/null +++ b/public/css/panel.min.css @@ -0,0 +1 @@ +@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);@import url(https://fonts.googleapis.com/css?family=Roboto);@import url(https://fonts.googleapis.com/css?family=Roboto+Mono);*,:after,:before{margin:0;padding:0;box-sizing:border-box}body,html{height:100vh}body{font:600 14px Roboto,sans-serif;color:#000;background:#000;overflow-x:hidden}.container{display:flex;min-height:100%}.sidebar{position:absolute;width:220px}.content{flex:1;padding:30px;background:#444;box-shadow:0 0 5px rgba(0,0,0,1);transform:translate3d(0,0,0);transition:transform .3s;color:#ccc}.content.isOpen{transform:translate3d(220px,0,0)}.button{position:relative;width:120px;height:40px;cursor:pointer;margin:10px 0 40px 0;padding:15px;transition-property:opacity,filter;transition-duration:.15s;text-transform:none}.button-inner{left:0;top:50%;display:inline-block;margin-top:-2px}.button-inner,.button-inner::after,.button-inner::before{background-color:#fff;position:absolute;width:40px;height:4px;transition:transform .15s ease;border-radius:4px}.button-inner::after,.button-inner::before{content:"";display:block}.button-inner::before{top:-10px}.button-inner::after{bottom:-10px}.button.isOpen .button-inner::before{transform:translate3d(-8px,0,0) rotate(-45deg) scale(.7,1)}.button.isOpen .button-inner::after{transform:translate3d(-8px,0,0) rotate(45deg) scale(.7,1)}.button-label{position:absolute;top:6px;left:50px;font-size:24px;color:#fff}.sidebar-title{color:#2a9fd6;cursor:pointer;font-size:16px;line-height:50px;text-align:center;text-transform:uppercase;letter-spacing:7px;border-bottom:1px solid #222;background:#2a2a2a}.nav li a{outline:0;position:relative;display:block;padding:20px 0 20px 50px;font-size:14px;color:#eee;background:#333;border-bottom:1px solid #222;text-decoration:none}.nav li a:before{font:14px fontawesome;position:absolute;top:19px;left:20px}.nav li:nth-child(1) a:before{content:'\f00a'}.nav li:nth-child(2) a:before{content:'\f002'}.nav li:nth-child(3) a:before{content:'\f084'}.nav li:nth-child(4) a:before{content:'\f0e0'}.nav li:nth-child(5) a:before{content:'\f0c0'}.nav li:nth-child(6) a:before{content:'\f233'}.nav li:nth-child(7) a:before{content:'\f023';left:23px}.nav li a:hover{background:#444}::-moz-focus-inner{border:0}.nav li a.active{box-shadow:inset 5px 0 0 #2a9fd6,inset 6px 0 0 #222;background:#444}.inner{display:flex;flex-direction:column}.keys{display:flex;flex-direction:row;flex-wrap:wrap}.key{background:#555;border:3px solid #2a9fd6;border-radius:5px;box-shadow:5px 5px 10px #000;margin:20px;width:300px;height:100px;cursor:pointer;display:flex;justify-content:flex-start;flex-direction:row;transition:box-shadow .2s}.key:hover{box-shadow:0 0 10px #eee}.key i{font-size:48px;margin:auto 0 auto 20px}.key span{font-size:16px;vertical-align:center;margin:auto;-moz-user-select:none;user-select:none}.modal{display:block;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,.4)}.modal-header{margin:15% auto;padding:20px;border:1px solid #888;width:80%}.modal-body{margin:auto;padding:20px;border:1px solid #888;width:80%}.modal-footer{margin:auto;padding:20px;border:1px solid #888;width:80%} \ No newline at end of file diff --git a/public/css/subpanel/dash.css b/public/css/subpanel/dash.css new file mode 100644 index 0000000..53d5432 --- /dev/null +++ b/public/css/subpanel/dash.css @@ -0,0 +1,47 @@ +.dash-row { + display: flex; + flex-wrap: nowrap; + align-items: center; +} + +.dash-card { + background: #020202; + border-radius: 4px; + padding: 30px; + margin: 5px; + flex-grow: 1; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid #2a9fd6; +} + +#dash-singlestats { + flex-grow: 1; +} +.dash-card.dash-card-singlestat { + justify-content: space-between; +} +.dash-stat { + align-self: flex-start; + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; +} +.dash-stat-title { + font-size: 18px; +} +.dash-stat-value { + font-size: 48px; +} +.dash-stat-icon { + color: #2a9fd6; +} + +#dash-historical { + +} +.dash-card.dash-card-graph { + width: 100px; +} \ No newline at end of file diff --git a/public/css/subpanel/keys.css b/public/css/subpanel/keys.css new file mode 100644 index 0000000..eef03d2 --- /dev/null +++ b/public/css/subpanel/keys.css @@ -0,0 +1,105 @@ +.keys { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} + +.key { + background: #000; + border: 1px solid #2a9fd6; + border-radius: 4px; + box-shadow: 5px 5px 10px #000; + margin: 20px; + width: 300px; + height: 100px; + cursor: pointer; + display: flex; + justify-content: flex-start; + flex-direction: row; + transition: box-shadow 0.2s; + overflow: hidden; +} + +.key:hover { + box-shadow: 0 0 5px #eee; +} + +.key i { + font-size: 48px; + margin: auto 0 auto 20px; +} + +.key span { + font-size: 16px; + vertical-align: center; + margin: auto; + -moz-user-select: none; + user-select: none; +} + +.key-name { + color: #2a9fd6; + font-family: 'Roboto Mono', monospace; +} + +pre { + overflow: auto; + line-height: 1.7em; + font-family: 'Roboto Mono', monospace; + border: 1px solid #666; + border-radius: 4px; + display: block; + padding: 10px; + font-size: 14px; + margin: 10px 0; + background: #222; + color: #2a9fd6; +} + +#createKey { + max-width: 920px; +} + +.btn-del { + text-transform: uppercase; + border: 2px solid #ff6666; + color: #ccc; +} + +.btn-del:hover { + background-color: #ff6666; +} + +#identifier { + font-size: 14px; + background: #222; + color: #d3d3d3; + border: 1px solid #666; + border-radius: 4px; + padding: 10px; + margin: 10px 0; +} + +th { + text-transform: uppercase; + font-weight: bold; + padding: 10px; +} + +td { + padding: 10px; +} + +td input { + vertical-align: middle; +} + +td label { + margin-bottom: 2px; + padding-left: 3px; +} + +em { + text-transform: uppercase; + font-weight: bold; +} \ No newline at end of file