cockpit.css

#hl,body{background-color:#2E8B57}#hl,#hlb{top:7%;font-size:24pt;transform:translateX(-50%);left:50%;color:#fff}#hlb,#msg{opacity:0}#hl,#hlb{left:50%}#inbox[data-notf]>.line:before,.mitem>div:after{display:block;position:absolute;content:''}#hl,#hlb,.mitem,.mitem>div,.mitem>div:after,.mitem>img{position:absolute}#hl,#hlb,.empty{color:#fff}#inbox[data-notf]>.line:before,#msg:before,.mitem>div:after{content:''}.answer>.keys,.answer>.widget,.ritem{box-sizing:border-box}@keyframes fadeout{0%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}@keyframes a{0%{width:0}100%{width:100%}}@keyframes b{0%{height:0%}100%{height:100%}}@keyframes c{to{transform:translateX(-70%)}}@keyframes d{to{opacity:1;transform:translateX(160%)}}body{overflow:hidden;font-family:sans-serif;transition:opacity 1s;opacity:1}#hl{animation:c 1.5s forwards ease-in-out}#hlb{animation:d 1s .5s forwards ease-in-out;z-index:-1}.mitem{transform-origin:center center;transform:rotate(45deg);width:5.5em;height:5.5em;transition:background-color .5s}.mitem>img{top:50%;left:50%;transform:translate(-50%,-50%) rotate(-45deg);z-index:5;height:68%;width:68%}#answer,#inbox{top:20%}.mitem>div{background-color:#53c685;z-index:-1}.mitem>div:after{background-color:#e60026}.mitem>.line{left:5.5em;transform-origin:top left;transform:rotate(-45deg);background-color:transparent;width:0;transition:width .5s;border-bottom:3px dotted #e60026}#inbox[data-notf]>.line:before{transform:translate(-50%,-50%);background-color:#e60026;width:1em;height:1em;border-radius:50%}#msg,.mitem>.line:after{display:none}.mitem[data-frame=true]>.line{width:50px}.top{width:100%;height:3px}.top:after{right:0;height:100%;width:0;transition:width .5s linear}.left{width:3px;height:100%}.left:after{width:100%;height:0;transition:height .5s linear}.bottom{bottom:0;width:100%;height:3px}.bottom:after{left:0;height:100%;width:0;transition:width .5s linear}.right{right:0;width:3px;height:100%}#msg:before,.mitem:hover>div:after,.mitem[data-frame=true]>div:after{width:100%;height:100%}.right:after{bottom:0;width:100%;height:0;transition:height .5s linear}.mitem[data-frame=true]{background-color:rgba(255,255,255,.2)}#done,#inbox,#user{left:18%}#done{top:45%}#user{top:70%}#answer{right:18%}#answer .line,#help .line{left:auto;right:5.5em;top:5.5em;transform-origin:bottom right}#scorecnt,.empty{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#help{top:45%;right:18%}#logout{top:70%;right:18%}#left,#right{background-color:#58a279;border:3px solid #53c685;position:absolute;top:20%;width:22%;height:62%;overflow-x:hidden;overflow-y:auto;z-index:0}.empty{opacity:.2;font-size:42pt;z-index:1}#left{left:27%}#right{right:27%}#scoreimg{position:absolute;left:20%;width:6%;height:6%;bottom:4%}#scorewrap{border-radius:4px;border:3px solid #53c685;position:absolute;bottom:5%;left:25%;width:50%;height:1.5em}#msg,#scorecnt{background-color:#fff;text-align:center;border-radius:4px;color:#000}#score{background-color:#e60026;height:100%;width:0;transition:width .5s}#scorecnt{height:1.1em;width:2.6em}#msg:before{z-index:-1;display:block;position:fixed;top:0;left:0;background-color:#fff;opacity:.5}#msg{position:fixed;left:15%;top:15%;width:70%;height:70%;z-index:10;padding:1em;transition:opacity .3s}.msg,.ritem{position:relative;margin:8pt 8pt 0;background-color:#58a279;border:3px solid #fff;transition:border-color .5s,visibility .5s,opacity .5s;color:#000;padding:5px;z-index:2;visibility:hidden;opacity:0}.answer>.keys,.answer>.widget,.lcont,.reply,.ritem{position:absolute}.msg:hover,.msg[data-frame=true],.ritem{border-color:#53c685}.msg>h3,.ritem h3{margin:0}.msg>h3:before{content:'Betreff: '}.msg:last-child{margin-bottom:8pt}.ritem{height:calc(100% - 16pt);width:calc(100% - 16pt);padding:5px}.help{overflow-y:scroll}.answer>.message{height:25%;overflow-y:auto;overflow-x:hidden}.answer>.widget{top:25%;left:0;width:100%;border-top:3px solid #53c685;height:55%;padding:5px}.answer>.widget>input[type=text]{background:0 0;border:none;border-bottom:1px solid #fff;width:100%}.answer>.widget>input[type=text]:after{display:block;content:'';position:absolute;bottom:-3px;left:0;background-color:#fff;height:3px;width:0;transition:width .5s}.answer>.widget>input[type=text]:active:after,.lcont{width:100%}.answer>.keys{bottom:0;left:0;width:100%;height:20%;padding:5px;font-family:monospace;border-top:3px solid #53c685;background-color:#fff;font-size:10pt;line-height:17pt;overflow:hidden}.lcont{top:0}#endlogo{width:45%;height:45%;margin:10px 5px 5px}.reply{background-color:red;left:0;border-top-left-radius:4px;border-bottom-left-radius:4px}.ans{border-color:#ff8095}.ans:hover,.ans[data-frame=true]{border-color:#e60026}.ans>h3:before{content:'Aw: '}