2 lines
8.2 KiB
CSS
2 lines
8.2 KiB
CSS
@font-face{font-family:Sixtyfour;src:url(../../webfonts/Sixtyfour-Regular.ttf) format("truetype")}*{font-family:Work Sans,Roboto,Arial,"sans-serif";margin:0;padding:0;box-sizing:border-box}html{background-color:#111}body,html{height:100%;font-family:Arial,sans-serif}.container{display:flex;height:100vh}main{flex:1;display:flex;flex-direction:column}main .main-container{display:flex;flex-direction:column;flex:1;overflow:hidden;align-self:stretch}main .main-container .top-content{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch;padding:10px 20px}main .main-container .top-content h1{flex:1;color:#fff;font-weight:400}main .main-container .bottom-content{display:flex;flex-direction:row;align-self:stretch;justify-content:flex-start;align-items:flex-start;flex:1;overflow-y:auto;background:radial-gradient(circle at 0% 53%,rgba(239,14,93,.8) 10%,transparent 45%),radial-gradient(circle at 135% 53%,rgba(2,123,255,.8) 10%,transparent 95%),radial-gradient(circle at 50% 80%,rgba(14,239,95,.8) 40%,transparent 95%)}main .main-container .bottom-content .page-content{flex:2;overflow-y:auto;padding:20px;background:#111111e6;display:flex;flex-direction:column;align-self:stretch}main .main-container .bottom-content .page-panel{flex:1;overflow-y:auto;padding:20px;align-self:stretch;background:#111}main .main-container .bottom-content .page-panel.left-panel{border-right:1px solid #222}main .main-container .bottom-content .page-panel.right-panel{border-left:1px solid #222}menu{width:300px;background:#111;overflow-y:auto;overflow-x:visible;padding:20px;z-index:2000;display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;border-right:1px solid #222;min-width:64px}menu h1.logo{margin:40px 0 0 10px;align-self:stretch;display:flex}menu h1.logo a{text-align:center;text-shadow:0px 0 0 #fff,0px 2px 0 #444,0 0px 0 rgb(14,239,95),-0px 0 0 rgb(2,123,255),0 -0px 0 rgb(239,14,93);text-decoration:none;background:linear-gradient(90deg,#a0a0a0 0,#bebebe 46%,#dcdcdc);-webkit-background-clip:text;color:transparent;flex:1;font-family:Sixtyfour,Work Sans,Arial,"sans-serif";align-self:stretch;padding-right:3px;font-size:20px;text-transform:uppercase;transition:all .55s cubic-bezier(.19,1,.22,1);display:flex;flex-direction:row;justify-content:center;align-items:center;position:relative}menu h1.logo a img{flex-shrink:0;width:30px;margin-right:10px;position:absolute;left:5px;transition:all .55s cubic-bezier(.19,1,.22,1)}menu h1.logo a img.after{opacity:0}menu:hover h1.logo a{text-align:center;text-shadow:3px 0 0 #fff,3px 2px 0 #444,0 3px 0 rgb(14,239,95),-3px 0 0 rgb(2,123,255),0 -3px 0 rgb(239,14,93);text-decoration:none;background:linear-gradient(90deg,#a0a0a0 0,#bebebe 46%,#dcdcdc);-webkit-background-clip:text;color:transparent}menu:hover h1.logo a img.before{opacity:0}menu:hover h1.logo a img.after{animation-duration:.2s;animation-name:logotouch}menu nav{display:flex;align-self:stretch;flex:1}menu nav ul{margin:60px 0 20px;flex:1;align-self:flex-start;display:flex;flex-direction:column;list-style:none}menu nav ul li{align-self:stretch;overflow:hidden;position:relative;transition:all .55s cubic-bezier(.19,1,.22,1);margin:10px 0;border-radius:4px}menu nav ul li a{color:#ffffffe6;font-size:16px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch;flex:1;padding-top:5px;padding-bottom:5px;padding-left:10px}menu nav ul li a i{color:#fff;opacity:.2;background:transparent;display:flex;justify-content:center;align-items:center;align-self:stretch;padding:10px;width:40px;border-radius:4px;text-align:center;margin-right:20px}menu nav ul li:after{background:#fff;content:"";height:195px;left:-200px;opacity:.2;position:absolute;top:-50px;transform:rotate(35deg);transition:all .55s cubic-bezier(.19,1,.22,1);width:50px;z-index:-2;cursor:pointer}menu nav ul li.active a{color:#027bff;font-weight:700}menu nav ul li.active a i{opacity:1;background:#ffffffe6;background:#017bff}menu nav ul li:hover{background:#027bff}menu nav ul li:hover:after{z-index:2;left:120%;transition:all .55s cubic-bezier(.19,1,.22,1)}menu nav ul li:hover a{color:#fff;font-weight:700}menu nav ul li:hover a i{color:#fff;opacity:1}menu footer{background:#ffffff03;padding:20px 0;display:flex;flex-direction:row;align-self:stretch;text-align:center;justify-content:center}menu footer p{color:#444}menu footer p.version a{color:#777;font-weight:700}main .context-bar{padding:10px;position:sticky;top:0;z-index:1000;max-height:80px;border-bottom:1px solid #222;display:flex;flex-direction:row;align-items:center}main .context-bar .context-menu{flex:1}main .context-bar .context-menu .inner{display:flex}main .context-bar .context-menu .inner ul{background:#222;padding:6px 4px 5px;box-shadow:1px 1px .5px .5px inset #0003;border:1px solid #222;border-radius:4px;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;list-style:none;margin:0}main .context-bar .context-menu .inner ul li.divider{margin:0 20px;width:1px;height:100%;background:#333}main .context-bar .context-menu .inner ul li:hover a{opacity:.9}main .context-bar .context-menu .inner ul li a{border-radius:4px;display:flex;flex-direction:row;justify-content:center;align-items:center;color:#fff;overflow:hidden;padding-right:30px;text-align:center;background:#0003;margin-right:5px;transition:all .25s cubic-bezier(.19,1,.22,1)}main .context-bar .context-menu .inner ul li a span{display:flex;justify-content:center;align-items:center;margin-right:20px;height:42px;background:#0003;width:42px}main .context-bar .context-menu .inner ul li.active a{color:#333;background:#fff;font-weight:700}main .context-bar .context-menu .inner ul li.active a span{margin-right:30px}main .context-bar .context-menu .inner ul li:hover a{color:#fff;background:#027bff}main .context-bar .context-menu .inner ul li:last-child a{margin-right:0}main .context-bar .context-divider{width:1px;height:100%;background:#222;margin-left:20px;margin-right:20px}main .context-bar .context-user{display:flex;margin-right:20px}main .context-bar .context-user .trigger{color:#fff}main .context-bar .context-user .trigger .avatar{width:32px;height:32px;border-radius:4px;background:#027bff;margin-right:10px;display:flex;flex-direction:row;justify-content:center;align-items:center;text-align:center;font-weight:700;font-size:14px;border:1px solid #444}main .context-bar .context-user .trigger i{margin-top:-5px;margin-left:10px}.invisible{visibility:hidden!important}.hidden{display:none!important}.tac{text-align:center}.tar{text-align:right}a{text-decoration:none}.col{display:flex;flex:1;flex-direction:column;align-self:stretch}.dropdown{position:relative;display:flex;align-self:stretch}.dropdown.dropdown-show ul.dropdown-menu{display:flex;flex-direction:column}.dropdown .trigger{cursor:pointer;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch;flex:1}.dropdown ul.dropdown-menu{position:absolute;top:100%;left:0;display:none;background-color:#222;box-shadow:0 8px 16px #0003;z-index:1000;list-style-type:none;margin:0;overflow:hidden;border-radius:4px}.dropdown ul.dropdown-menu li{padding:8px 16px;cursor:pointer;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;transition:all .55s cubic-bezier(.19,1,.22,1)}.dropdown ul.dropdown-menu li.danger:hover{background-color:#ef0e5d}.dropdown ul.dropdown-menu li:hover{background-color:#027bff}.dropdown ul.dropdown-menu li a{padding:8px 16px 8px 8px;color:#fff;display:flex;flex-direction:row;justify-content:flex-start;align-items:center;align-self:stretch}.dropdown ul.dropdown-menu li a i{margin-right:15px}@keyframes logotouch{0%{opacity:0}50%{opacity:1}to{opacity:0;left:27px}}button,.button{position:relative;padding:15px 30px;font-size:16px;color:#fff;cursor:pointer;transition:background-position .3s ease;border:2px solid black;border-radius:4px}.alert{padding:20px;align-self:stretch;display:flex;flex-direction:row;justify-content:center;align-items:center;border-radius:4px}.alert-info{color:#027bff;background:#027bff33}.alert-success{color:#0eef5f;background:#0eef5f33}.alert-danger,.alert-error{color:#ef0e5d;background:#ef0e5d33}.alert i{margin-right:13px}.page-content main .main-container .left-panel{flex:.5;overflow-y:auto;padding:0;background:#eee;box-shadow:1px 1px .5px .5px inset #0003;border:1px solid #222}
|