body {
margin: 0;
padding: 0;
width: 100%;
/* height: 100%; */
background: #000;
color: #efefef;
font: 16px/24px Helvetica, Arial, sans-serif;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
ul {
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
padding: 28px;
border-bottom: 1px solid #333;
text-shadow: 0 -1px 1px rgba(0,0,0,.5);
position: relative;
}
li h1, li time {
margin: 0;
padding: 0;
display: inline;
font-size: 28px;
}
li time {
margin: 0;
padding: 0;
float: right;
font-size: 22px;
}
li .bar { display: none; }
li.in-progress .bar {
display: block;
position: absolute;
top: 0;
left: 0;
background: hsl(195, 50%, 30%);
height: 85px;
z-index: -999;
transition: 1s width;
}
li.was-failed .bar {
background: hsl(33, 80%, 30%);
}
li.failed {
background: hsl(0, 100%, 30%);
}
li.not-building, li.no-change {
display: none;
}
.show-inactive li.not-building, .show-inactive .no-change {
display: inherit;
}
li .bar:after, li .bar:before {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
margin-top: -42px;
border-width: 42px;
}
.neon .aborted {
background: hsl(20, 1%, 30%);
}
.neon .failed {
background: hsl(316, 100%, 50%);
}
.neon .bar {
background: hsl(115, 100%, 30%);
}
.neon .bar:before, .neon .bar:after {
border-left-color: hsl(115, 100%, 30%);
}
.neon .was-aborted .bar {
background: hsl(20, 1%, 30%);
}
.neon .was-aborted .bar:before, .neon .was-aborted .bar:after {
border-left-color: hsl(20, 1%, 30%);
}
.neon .was-built .bar {
background: #00AC6B;
}
.neon .was-built .bar:before, .neon .was-built .bar:after {
border-left-color: #00AC6B;
}
.neon .was-failed .bar {
background: #FF8100;
}
.neon .was-failed .bar:before, .neon .was-failed .bar:after {
border-left-color: #FF8100;
}