webroot.style.css Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of hyperfoil-clustering Show documentation
There is a newer version: 0.27.1
body {
   margin: 0;
   padding: 0;
   background: black;
   font-size: 16px;
   font-family: "Courier New", monospace;
}

#logo {
   max-width: 100%;
   height: 150px;
   display: block;
   margin: 10px auto;
   animation: slide-from-left 0.6s cubic-bezier(0.230, 1.000, 0.320, 1.000) 0.3s both;
   transition: height 0.5s ease-in-out 0.6s, margin 0.5s ease-in-out 0.6s;
}

#logo.logo-exit {
   animation: slide-to-right 0.6s cubic-bezier(0.770, 0.050, 0.860, 0.050) both;
   height: 0px;
   margin: 0px auto;
}

@keyframes slide-from-left {
   0% {
       transform: translateX(-1000px) scaleX(2.5) scaleY(0.2);
       transform-origin: 100% 50%;
       filter: blur(40px);
       opacity: 0;
   }
   50% {
       transform: translateX(0) scaleY(1) scaleX(1);
       transform-origin: 50% 50%;
       filter: blur(0);
       opacity: 1;
   }
}

@keyframes slide-to-right {
   0% {
       transform: translateX(0) scaleY(1) scaleX(1);
       transform-origin: 50% 50%;
       filter: blur(0);
       opacity: 1;
   }
   100% {
       transform: translateX(1000px) scaleX(2.5) scaleY(0.2);
       transform-origin: 0% 50%;
       filter: blur(40px);
       opacity: 0;
   }
}

#result {
   text-align: left;
   padding: 1em;
   color: #ccc;
   white-space: pre-wrap;
}

.line {
   display: flex;
   position: relative;
}

#command {
   font-size: 16px;
   border: 0;
   color: #ccc;
   background-color: transparent;
   padding-bottom: 10px;
   max-height: 28px;
   font-family: "Courier New", monospace;
   outline: none;
   flex-grow: 100;
}

#warning {
   height: 0;
   background: #f80;
   width: 100%;
   position: relative;
   top: -20px;
   transition: height 0.5s ease-out;
}

.ctrl-c {
   color: #888;
}

#upload {
   white-space: normal;
   margin-top: 10px;
}
.hfbutton {
   white-space: normal;
   background: linear-gradient(to bottom, #eee, #ccc);
   border-width: 2px;
   border-style: solid;
   border-color: #ddd #888 #888 #ddd;
   border-radius:10px;
   color: black;
   font-size: 16px;
   font-family: "Courier New", monospace;
   padding: 4px;
   cursor: pointer;
   display: inline-block;
}
.hfbutton:hover {
   background: linear-gradient(to bottom, #ccc, #eee);
}
.hfbutton:active {
   position: relative;
   top: 1px;
}

.hidden-upload {
   display: none;
}

#pager, #editor {
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: auto;
   background: black;
}
#pager-close {
   position: fixed;
   margin: 16px;
   right: 0;
   top: 0;
}
#pager-content {
   color: #ccc;
   margin: 0;
   padding: 16px;
}
#editor-content {
   margin: 0;
   padding-top: 16px;
   background: black;
   width: 100%;
   height: calc(100% - 80px);
}
.editor-button {
   width: 160px;
   margin: 16px 0px 16px 16px;
}

#token-frame {
   position: absolute;
   visibility: hidden;
   width: 1px;
   height: 1px;
}

#reconnecting {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   background: #BBB8;
   visibility: hidden;
}

#reconnecting > div {
    width: 300px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: black;
    color: white;
    text-align: center;
    padding: 1.2em;
}

#reconnecting > div > div {
    width: 10px;
    height: 10px;
    background: lime;
    position: absolute;
    left: 0;
    bottom: 0;
    animation: move-left-right 1s linear infinite alternate-reverse;
}

@keyframes move-left-right {
   0%   { left: 0; width: 10px; }
   50%  { width: 30px;}
   100% { left: calc(100% - 10px); width: 10px; }
}

.plot {
   width: 100%;
   margin: 8px 0;
   border: 0;
}

.plottoggle {
   position: absolute;
   right: 0;
   top: 8px;
}

#notifications {
   position: fixed;
   right: 0;
   top: 0;
   z-index: 1000;
   filter: invert(50%);
   cursor: pointer;
   animation: pulse-filter 1s linear infinite alternate-reverse;
}

@keyframes pulse-filter {
   0%   { filter: invert(50%); }
   100% { filter: invert(80%); }
}