mirror of
https://github.com/Foltik/Shimapan
synced 2024-11-30 06:21:46 -05:00
Add css back to git
This commit is contained in:
parent
776d5a2e78
commit
092b3b3e92
GPG Key ID:
D1F0331758D1F29A
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,7 +1,6 @@
|
||||
node_modules/
|
||||
|
||||
public/js
|
||||
public/css
|
||||
|
||||
.idea/
|
||||
.awcache/
|
||||
|
||||
119
public/css/form.css
Normal file
119
public/css/form.css
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
1
public/css/form.min.css
vendored
Normal file
1
public/css/form.min.css
vendored
Normal file
@ -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}
|
||||
155
public/css/home.css
Normal file
155
public/css/home.css
Normal file
@ -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;
|
||||
}
|
||||
1
public/css/home.min.css
vendored
Normal file
1
public/css/home.min.css
vendored
Normal file
@ -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}
|
||||
45
public/css/index.css
Normal file
45
public/css/index.css
Normal file
@ -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;
|
||||
}
|
||||
1
public/css/index.min.css
vendored
Normal file
1
public/css/index.min.css
vendored
Normal file
@ -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}
|
||||
67
public/css/navbar.css
Normal file
67
public/css/navbar.css
Normal file
@ -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;}
|
||||
148
public/css/panel.css
Normal file
148
public/css/panel.css
Normal file
@ -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;
|
||||
}
|
||||
1
public/css/panel.min.css
vendored
Normal file
1
public/css/panel.min.css
vendored
Normal file
@ -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%}
|
||||
47
public/css/subpanel/dash.css
Normal file
47
public/css/subpanel/dash.css
Normal file
@ -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;
|
||||
}
|
||||
105
public/css/subpanel/keys.css
Normal file
105
public/css/subpanel/keys.css
Normal file
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user