harness-drone/cmd/drone-server/static/styles/drone.css

1717 lines
36 KiB
CSS
Raw Normal View History

@import url(//fonts.googleapis.com/css?family=Roboto:300,400,600,900);
@import url(//fonts.googleapis.com/css?family=Droid+Sans+Mono);
2015-05-21 02:23:55 +00:00
/* RESETS */
html, body { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; }
table { border-collapse: collapse; border-spacing: 0; }
ol, ul { list-style: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; }
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* TRANSITIONS & ANIMATIONS */
.transition-fade {
-webkit-transition: all 0s ease-out;
-moz-transition: all 0s ease-out;
-o-transition: all 0s ease-out;
-ms-transition: all 0s ease-out;
transition: all 0s ease-out;
}
.show .transition-fade {
-webkit-transition: all 0s ease-in;
-moz-transition: all 0s ease-in;
-o-transition: all 0s ease-in;
-ms-transition: all 0s ease-in;
transition: all 0s ease-in;
}
/* FLEXBOX */
.flex-parent {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.flex-center {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
}
.flex-item {
-webkit-flex: 1 1 auto;
-moz-flex: 1 1 auto;
-o-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
/* TABLE MAGIC */
table {
padding: 0;
border-collapse: collapse;
width: auto;
min-height: 100%;
}
tbody {
width: 100%;
}
th, td, tr {
border: 0;
margin: 0;
padding-top: 0;
padding-bottom: 16px;
}
tr {
border-bottom: solid 1px rgba(0,0,0,0.025);
cursor: pointer;
}
tr:first-of-type {
cursor: default;
}
tr:not(:first-of-type):hover {
background-color: rgba(228,241,254,0.2);
}
th {
text-align: left;
font-weight: 400;
font-size: 12px;
color: rgba(0,0,0,0.54);
text-transform: uppercase;
letter-spacing: 0.8px;
padding: 16px 24px;
height: 59px;
}
td {
height: 72px;
vertical-align: middle;
font-weight: 400;
font-size: 14px;
color: rgba(0,0,0,0.87);
line-height: 150%;
padding: 16px 24px;
}
td.type-icon:first-of-type {
vertical-align: middle;
text-align: center;
}
th:first-of-type, td:first-of-type {
padding-left: 32px;
}
th:last-of-type, td:last-of-type {
padding-right: 32px;
}
.status {
position: relative;
}
.status:before {
cursor: pointer;
width: 20px;
height: 20px;
color: #fff;
font-size: 14px;
font-family: "Material-Design-Iconic-Font";
opacity: 1;
}
.status.success:before {
font-size: 20px;
content: '\f084';
color: #26A65B;
}
.status.failure:before,
.status.killed:before,
.status.error:before {
font-size: 20px;
content: '\f082';
color: #EF5350;
2015-05-21 02:23:55 +00:00
opacity: 0.85;
}
/* CARD STUFF */
ul.cardset {
background-color: transparent;
width: 100%;
height: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
padding: 28px;
padding-top: 0;
margin-top: -8px;
}
.cardset li {
-webkit-flex: 1 1 auto;
-moz-flex: 1 1 auto;
-o-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
width: 25%;
padding: 0 4px;
outline: none;
-webkit-appearance: none;
}
.cardset.list li {
-webkit-flex: 1 1 100%;
-moz-flex: 1 1 100%;
-o-flex: 1 1 100%;
-ms-flex: 1 1 100%;
flex: 1 1 100%;
padding: 4px;
}
.cardset li.dummy {
}
.card {
width: 100%;
height: 260px;
background-color: #fff;
border-radius: 0;
box-shadow: 0 0 1px rgba(0,0,0,0.125);
cursor: pointer;
overflow: hidden;
position: relative;
outline: none;
-webkit-appearance: none;
}
.card a {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 1;
-webkit-transition: all 0.15s ease;
-moz-transition: all 0.15s ease;
-o-transition: all 0.15s ease;
-ms-transition: all 0.15s ease;
transition: all 0.15s ease;
}
.card a:hover {
background-color: rgba(52,152,219,0.1);
}
.card .top {
padding: 16px;
background-color: transparent;
}
.card .bottom {
padding: 16px;
padding-top: 64px;
height: 220px;
background-color: transparent;
}
.card .time-ran {
font-size: 12px;
line-height: 135%;
font-weight: 400;
color: #9a9a9a;
float: left;
}
.card.success .time-ran {
color: #26A65B
}
.card.killed .time-ran,
.card.error .time-ran,
.card.failure .time-ran {
color: #EF5350
2015-05-21 02:23:55 +00:00
}
.card .time-duration {
font-size: 12px;
line-height: 135%;
font-weight: 300;
color: #7c7c7c;
float: left;
clear: left;
}
.card .status {
float: right;
}
.card .title {
font-size: 16px;
line-height: 135%;
font-weight: 400;
color: #cfcfcf;
margin-bottom: 16px;
}
.card .title.upper {
font-size: 13px;
color: #9a9a9a;
margin-bottom: 2px;
}
.card .title.lower {
color: dfdfdf;
}
.card .author {
font-size: 12px;
line-height: 135%;
font-weight: 400;
margin-bottom: 16px;
color: #afafaf;
position: absolute;
bottom: 0;
}
.card .branch {
position: absolute;
bottom: 33px;
left: auto;
display: inline-block;
font-size: 12px;
line-height: 135%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
color: #eee;
padding: 1px 4px;
background-color: #7a7a7a
}
.card .sha {
font-size: 11px;
line-height: 135%;
font-weight: 300;
text-transform: uppercase;
margin-bottom: 16px;
color: #8a8a8a;
}
/* LIST */
.cardset.list {
margin-top: -8px;
}
.cardset.list li {
padding: 0 4px;
}
.list .card {
background-color: #fff;
}
.list .card a:hover {
background-color: rgba(255,255,255,0.05);
}
.list .card .meta {
width: 120px;
margin-right: 32px;
float: left;
}
.list .card .build-details {
width: 120px;
margin-right: 32px;
float: left;
}
.list .card .details {
width: auto;
padding-right: 50px;
overflow: hidden;
}
.list .card .push-details {
font-size: 13px;
line-height: 135%;
font-weight: 300;
color: #7a7a7a;
margin-bottom: 0;
}
.list .card p span {
background-color: #8a8a8a;
padding: 1px 4px;
margin: 0 4px;
color: #000;
font-weight: 400;
letter-spacing: 0.5px;
font-size: 10px;
}
.list .card {
height: auto;
padding-bottom: 0;
min-height: 70px;
}
.list .card p {
margin-bottom: 2px;
font-size: 13px;
font-weight: 300;
}
.list .card .build-number {
display: block;
width: 50px;
margin-right: 32px;
float: left;
}
.list .card .build-number p {
display: inline-block;
font-size: 16px;
line-height: 135%;
font-weight: 300;
margin-bottom: 0;
color: #fff;
padding: 1px 6px;
border-radius: 5px;
min-width: 20px;
}
.success .build-number p {
background-color: #26A65B;
}
.killed .build-number p,
.error .build-number p,
.failed .build-number p {
background-color: #EF5350;
2015-05-21 02:23:55 +00:00
}
.list .card .message {
font-size: 14px;
line-height: 135%;
font-weight: 300;
color: #cfcfcf;
margin-bottom: 8px;
letter-spacing: 0.35px;
}
.list .card .author {
position: static;
font-size: 20px;
line-height: 135%;
font-weight: 400;
clear: left;
color: #3f3f3f;
margin-bottom: 8px;
}
.list .card .time-ran {
font-size: 13px;
line-height: 140%;
font-weight: 300;
color: #7a7a7a;
margin-bottom: 0;
}
/* HALF LIST */
.cardset.list.commit-header {
padding-bottom: 0;
margin-bottom: 0;
}
.cardset.list.commit-header .card {
min-height: 200px;
background-color: #282828;
margin-bottom: 0;
cursor: default;
border-bottom: none;
}
.cardset.list.half-list {
margin-top: 4px;
}
.cardset.list.half-list li {
-webkit-flex: 1 1 50%;
-moz-flex: 1 1 50%;
-o-flex: 1 1 50%;
-ms-flex: 1 1 50%;
flex: 1 1 50%;
padding: 4px;
margin-bottom: 0;
}
.cardset.list.half-list .card {
height: 80px;
}
.cardset.list.half-list .status {
float: left;
width: 50px;
}
.cardset.list.half-list .details {
padding-left: 0;
}
.dummy .card {
background-color: rgba(255,255,255,0.05);
box-shadow: none;
cursor: default;
}
.dummy:nth-last-child(1) .card, .dummy:nth-last-child(1) .card, .dummy:nth-last-child(1) .card, .dummy:nth-last-child(1) .card {
display: none;
}
.half-list .dummy .card {
display: none !important;
}
/* OUTPUT */
.card.output {
background-color: rgba(0,0,0,0.5);
padding: 16px;
margin-top: 4px;
}
/* DATASET */
.card .dataset {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow:row wrap;
flex-flow:row wrap;
padding: 16px 0;
position: relative;
}
.card .dataset a {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
border-radius: 0;
}
.card .dataset a:hover {
background-color: rgba(52,152,219,0.05);
}
.card .dataset > div {
padding: 0 16px;
padding-bottom: 0;
-webkit-box-flex: 1 1 auto;
-moz-box-flex: 1 1 auto;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.card .dataset p {
font-size: 16px;
font-weight: 400;
line-height: 135%;
}
.card .dataset > div:nth-of-type(1) {
-webkit-box-flex: 0 0 128px;
-moz-box-flex: 0 0 128px;
-webkit-flex: 0 0 128px;
-ms-flex: 0 0 128px;
flex: 0 0 128px;
}
.card .dataset > div:nth-of-type(2) {
}
.card .dataset > div:nth-of-type(3) {
text-align: left;
-webkit-box-flex: 1 1 300px;
-moz-box-flex: 1 1 300px;
-webkit-flex: 1 1 300px;
-ms-flex: 1 1 300px;
flex: 1 1 300px;
margin-left: 128px;
}
.card .dataset .number {
padding: 5px;
display: inline-block;
width: 60px;
border-radius: 5px;
color: #fafafa;
font-size: 16px;
text-align: center;
}
.card.success .dataset .number {
background-color: #26A65B;
}
.card.error .dataset .number,
.card.killed .dataset .number,
.card.failure .dataset .number {
background-color: #EF5350;
2015-05-21 02:23:55 +00:00
}
.card .dataset .branch-sha {
font-size: 17px
}
.card .dataset .author-time {
font-size: 14px;
font-weight: 400;
color: #bababa;
}
.card .dataset .commit-message {
font-size: 14px;
font-weight: 400;
color: #7f7f7f;
}
/* STRUCTURE */
html {
margin: 0;
padding: 0;
font-family: "Roboto", "Arial";
font-weight: 300;
font-size: 16px;
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
background: #fafafa;
padding-bottom: 72px;
}
.truncate {
text-overflow: ellipsis;
white-space: nowrap;
overflow-y: hidden;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
#container {
display: inline;
}
footer {
display: none;
min-height: 128px;
background-color: #5f5f5f;
}
section {
display: block;
width: 100%;
padding: 16px 74px;
}
section.central-container {
height: auto;
min-height: 100%;
margin-top: -72px;
/*margin-bottom: 72px;*/
position: relative;
padding-top: 0;
}
section:nth-of-type(even) {
}
2015-05-21 02:23:55 +00:00
.show section:first-of-type {
margin-top: 0px;
}
.pane {
background-color: transparent;
margin: 12px;
/*box-shadow: 0 0 1px rgba(0,0,0,0.05);*/
/*border-radius: 3px;*/
overflow: hidden;
height: auto;
min-height: 100%;
/*padding-bottom: 88px;*/
box-sizing: content-box;
}
.pane.contains-cardset {
background-color: #fafafa;
}
.pane.fixed {
-webkit-flex: 0 0 400px;
-moz-flex: 0 0 400px;
-o-flex: 0 0 400px;
-ms-flex: 0 0 400px;
flex: 0 0 400px;
}
.pane.restrict-center {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
/*
2015-05-21 02:23:55 +00:00
header {
height: 64px;
width: 100%;
background: #fafafa;
padding: 6px 24px;
line-height: 72px;
overflow: hidden;
}
*/
2015-05-21 02:23:55 +00:00
.dockable {
background-color: #fafafa;
}
.show .dockable {
position: fixed;
z-index: 100;
top: 0;
left: 0;
right: 0;
width: 100%;
margin-top: 0;
background-color: rgba(0,0,0,0.65);
/*box-shadow: 0 1px 0 0 rgba(0,0,0,0.025);*/
}
nav {
width: 100%;
height: 60px;
background-color: transparent;
/*box-shadow: 0 1px 0 0 rgba(0,0,0,0.075); */
/*border-bottom: solid 1px rgba(0,0,0,0.065);*/
padding: 0 32px;
overflow: hidden;
}
.nav-item {
margin-right: 0;
margin-left: 16px;
height: auto;
opacity: 0.65;
cursor: pointer;
}
.nav-item.float-left {
margin-left: 0;
margin-right: 10px;
}
.nav-item:hover {
opacity: 1;
}
.nav-item:after,
.nav-item:before {
font-family: "Material-Design-Iconic-Font";
color: rgba(255,255,255,0.749);
2015-05-21 02:23:55 +00:00
}
.nav-item {
font-size: 20px;
line-height: 20px;
padding: 19px 0;
text-decoration:none;
}
.nav-item.settings:before {
font-size: 22px;
2015-05-21 02:23:55 +00:00
content: '\f060';
}
.nav-item.unstar,
.nav-item.star {
font-size:14px;
background:transparent;
line-height:20px;
}
.nav-item.star:after {
font-size: 24px;
2015-05-21 02:23:55 +00:00
content: "\f2e7";
}
.nav-item.unstar:after {
font-size: 24px;
2015-05-21 02:23:55 +00:00
content: "\f2e5";
}
2015-05-22 00:00:31 +00:00
.nav-item.add:after {
font-size: 24px;
2015-05-22 00:00:31 +00:00
content: "\f0fd";
}
2015-05-21 02:23:55 +00:00
input.nav-item {
position: relative;
height: 59px;
width: 170px;
display: block;
background-color: transparent;
border: none;
font-weight: 400;
font-size: 15px;
color: #1c1c1c;
letter-spacing: 0.2px;
font-family: "Roboto", Arial;
outline: none;
-webkit-appearance: none;
opacity: 1;
padding-top: 20px;
cursor: text;
}
.nav-item.search:before {
font-size: 22px;
content: '\f05f';
opacity: 1 !important;
color: #2f2f2f;
}
.nav-item.search {
color: #2f2f2f;
opacity: 1 !important;
cursor: default;
}
.title {
font-weight: 400;
font-size: 16px;
color: rgba(0,0,0,0.65);
letter-spacing: 0.2px;
line-height: 60px;
}
header .title {
flex: 1 1 auto;
}
header .user {
text-align: right;
line-height: 70px;
}
header .user img {
border-radius: 50%;
width: 34px;
height: 34px;
display: inline-block;
vertical-align: middle;
margin-right: 22px;
margin-left: 15px;
}
header .user span {
font-size: 16px;
color: rgba(255, 255, 255, 0.8);
display: inline-block;
vertical-align: middle;
}
.menu-item {
2015-05-21 02:23:55 +00:00
height: 40px;
width: auto;
margin: 7px 16px;
opacity: 0.8;
display: block;
cursor: pointer;
position: relative;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
-o-transition: all 0.25s ease;
-ms-transition: all 0.25s ease;
transition: all 0.25s ease;
text-decoration:none;
}
.logo {
margin-left: 0;
}
/*
2015-05-21 02:23:55 +00:00
.logo:hover {
opacity: 1;
}
.logo:before {
content: '';
display: block;
height: 100%;
width: 50px;
background: url("/static/images/logo.svg") no-repeat left center;
background-size: 60%;
-webkit-filter: contrast(150%);
filter: contrast(100%);
}
.logo:after {
display: none;
position: absolute;
top: 50%;
margin-top: -10px;
left: 43px;
content: 'Drone';
height: 100%;
line-height: 100%;
font-size: 20px;
letter-spacing: 0.5px;
color: #fff;
opacity: 1;
font-weight: 400;
}
*/
2015-05-21 02:23:55 +00:00
.menu-item {
margin-right: 0;
height: auto;
opacity: 0.65;
}
.menu-item:hover {
opacity: 1;
}
.menu-item:before {
font-family: "Material-Design-Iconic-Font";
color: #2f2f2f;
}
img.menu-item {
border-radius: 50%;
height: 28px;
width: 28px;
margin: 18px 0 18px 7px;
display: block;
}
.menu-item {
font-size: 20px;
line-height: 20px;
padding: 10px 0;
}
.menu-item.settings:before {
font-size: 20px;
content: "\f060";
}
.menu-item.users:before {
font-size: 20px;
content: "\f006";
}
.menu-item.help:before {
font-size: 20px;
content: '\f033';
}
.menu-item.plugins:before {
font-size: 23px;
content: '\f292';
}
.menu-item.user-name {
height: 50px;
font-size: 14px;
line-height: 14px;
letter-spacing: 0.5px;
color: #3c3c3c;
font-weight: 400;
margin: 0;
padding: 20px 0 18px 0;
}
.subnav {
background:rgba(255,255,255,0.8);
padding:0px 25px;
height:70px;
position:relative;
}
.subnav .icon {
display:inline-block;
display: block;
line-height:70px;
text-decoration:none;
font-size:22px;
color:#999;
margin-left:10px;
}
.subnav .icon.icon-settings:before {
content: "\f060";
font-family: "Material-Design-Iconic-Font";
}
.subnav .menu {
position: absolute;
top: 0px;
right: 25px;
}
/*
2015-05-21 02:23:55 +00:00
.breadcrumb {
padding: 0;
height: 60px;
line-height: 60px;
color: #2f2f2f;
position: absolute;
top: -64px;
left: auto;
}
.show .breadcrumb {
position: fixed;
top: 3px;
z-index: 200;
}
.breadcrumb a,
.breadcrumb span {
height: 60px;
line-height: 60px;
position: relative;
padding-right: 4px;
padding-left: 4px;
text-decoration:none;
}
.breadcrumb .level {
cursor: pointer;
letter-spacing: 0.35px;
color: #2a2a2a;
font-size: 18px;
font-weight: 400;
}
.breadcrumb :before {
position: absolute;
top: -21px;
left: 0;
cursor: pointer;
width: 20px;
height: 20px;
color: #3a3a3a;
font-size: 14px;
font-family: "Material-Design-Iconic-Font";
opacity: 0.75;
}
.breadcrumb .backarrow {
margin-right: 18px;
margin-top: -1px;
}
.breadcrumb .backarrow:before {
content: "\f297";
font-size: 20px;
}
.breadcrumb .spacer {
padding-right: 10px;
margin-right: 5px;
}
.breadcrumb .spacer:before {
content: "\f29c";
font-size: 20px;
}
.show .breadcrumb *, .show .breadcrumb *:before, .show .lower-items *, .show .lower-items *:before {
font-weight: 400;
color: #fafafa !important;
}
*/
2015-05-21 02:23:55 +00:00
.test {
position: absolute;
top: -72px;
height: 72px;
line-height: 72px;
}
.test span {
display: block;
color: #efefef;
font-weight: 400;
font-size: 1.1rem;
margin-top: 2px;
letter-spacing: 0.025rem;
}
/*.breadcrumb span {
display:inline-block;
font-size: 20px;
vertical-align: middle;
color: #efefef;
font-weight: 300;
}
.breadcrumb a {
display:inline-block;
vertical-align:middle;
text-decoration:none;
font-size: 18px;
color: #cfcfcf;
font-weight: 300;
line-height: 70px;
}
.breadcrumb span.spacer:after {
font-family: "Material-Design-Iconic-Font";
content: "\f29c";
display:inline-block;
vertical-align:middle;
opacity:0.3;
line-height:70px;
}
.breadcrumb a.icon-home {
display:inline-block;
margin-left:0px;
margin-right:10px;
margin-left:-2px;
}
.breadcrumb a.icon-home:after {
font-family: "Material-Design-Iconic-Font";
display:inline-block;
vertical-align:middle;
opacity:0.3;
line-height:70px;
content: "\f297";
font-size:26px;
}
*/
/* INFO PANE */
.banner {
height: 73px;
width: 100%;
background-color: #89C4F4;
position: relative;
}
.banner .badge {
position: absolute;
bottom: 0;
left: 50%;
margin-left: -30px;
margin-bottom: -30px;
border-radius: 50%;
width: 60px;
height: 60px;
background-color: #fafafa;
border: solid 3px #fff;
}
.badge .status:before {
position: absolute;
left: 50%;
margin-left: -20px;
top: 50%;
margin-top: -20px;
font-size: 40px;
}
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
body {
background:#f5f5f5;
}
header {
background:#FFF;
}
header[show-nav] {
display:none;
}
section.central-container {
margin-top:50px;
}
header {
height: 60px;
background: #FFF;
line-height: 60px;
overflow: hidden;
padding-left:15px;
padding-right:25px;
}
header .logo {
content: '';
display: block;
height: 60px;
width: 33px;
background: url("/static/images/logo.svg") no-repeat center center;
background-size: 33px;
float:left;
}
.toolbar {
background:#424242;
position:relative;
height:56px;
position: sticky;
top: 0px;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
box-shadow: none;
}
.toolbar .breadcrumb {
max-width:900px;
margin:0px auto;
line-height:56px;
height:56px;
}
.breadcrumb a {
color:#FFF;
font-size:20px;
line-height:56px;
height:56px;
text-decoration:none;
display:inline-block;
}
.breadcrumb span {
color: rgba(255,255,255,0.749);
line-height:56px;
height:56px;
}
.breadcrumb span:before {
font-family: "Material-Design-Iconic-Font";
color: rgba(255,255,255,0.749);
line-height:56px;
content: "\f29c";
}
.breadcrumb a.icon-home {
position: absolute;
left: -50px;
}
.breadcrumb a.icon-home:after {
font-family: "Material-Design-Iconic-Font";
line-height:56px;
color: rgba(255,255,255,0.749);
content: "\f297";
font-size:24px;
vertical-align: middle;
}
.menu {
position:absolute;
right:25px;
top:0px;
}
pre.success {
border-left:10px solid #81C784;
background: #424242;
}
pre.error,
pre.killed,
pre.failure {
border-left:10px solid #E57373;
background: #424242;
}
article > pre {
font-family: "Droid Sans Mono","Roboto","Arial";
font-size: 13px;
color:#fff;
background: #424242;
line-height: 18px;
white-space: pre-wrap;
word-wrap: break-word;
padding: 30px;
margin-top:30px;
border-radius:2px;
}
article {
padding:0px 20px;
max-width:900px;
margin:0px auto;
box-sizing: content-box;
margin-bottom:30px;
padding-top:15px;
}
section {
background:#FFF;
padding:0px;
margin-top:30px;
border-radius:2px;
border:1px solid #EEE;
border:none;
}
section h2 {
margin: 0px;
padding: 30px 30px;
padding-bottom: 10px;
font-size: 18px;
color: #424242;
font-weight: normal;
}
section .row {
padding: 0px 30px;
text-decoration: none;
display: block;
display: flex;
text-decoration: none;
}
section .row:hover {
background:#FAFAFA;
}
section .row > div:first-child {
padding: 30px 0px;
border-bottom: 1px solid #EEE;
width: 200px;
min-width: 200px;
font-size:14px;
color: #757575;
}
section .row > div:last-child {
color: #9E9E9E;
flex: 1 1 auto;
padding: 30px 30px;
border-bottom: 1px solid #EEE;
font-size:14px;
}
section .row:last-child > div {
border-bottom:none;
}
section .build-row .build-num {
display: inline-block;
2015-05-22 00:00:31 +00:00
width: 40px;
height:40px;
line-height:40px;
border-radius: 50%;
color: rgba(255,255,255,0.9);
font-size: 16px;
text-align: center;
2015-05-21 07:09:15 +00:00
}
section .build-row > div:last-child {
2015-05-22 00:00:31 +00:00
padding-left:0px;
}
2015-05-21 07:09:15 +00:00
.pending,
.running {
background: #FFD740;
}
2015-05-21 07:09:15 +00:00
.success {
background:#66BB6A;
}
.error,
.killed,
.failure {
background: #EF5350;
}
.build-last.success:after {
font-size: 18px;
content: '\f084';
color: rgba(255, 255, 255, 0.701961);
width: 24px;
font-family: Material-Design-Iconic-Font;
}
section .icon {
background:#BDBDBD;
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
color: rgba(255,255,255,0.9);
font-size: 16px;
text-align: center;
}
section .icon-repo:after {
font-size: 18px;
content: '\f001';
color: rgba(255, 255, 255, 0.701961);
width: 24px;
font-family: "octicons";
}
section .build-row > div:first-child {
2015-05-22 00:00:31 +00:00
width:70px;
min-width: 70px;
}
section .build-row h3 {
color:#212121;
font-size:18px;
margin-bottom:10px;
margin-top: 4px;
}
section .build-row strong {
color:#616161;
font-weight:normal;
}
section > .search {
padding:30px;
padding: 20px;
padding-bottom: 5px;
}
section > .search a {
text-decoration: none;
background: #00BCD4;
background: #9E9E9E;
padding: 12px 20px;
color: rgba(255,255,255,0.8);
float:right;
transition: all .5s;
border-radius:2px;
text-transform:uppercase;
2015-05-21 08:29:09 +00:00
font-size:14px;
}
section > .search a:hover {
background: #00ACC1;
}
pre.snippet {
white-space: pre-wrap;
word-wrap: break-word;
2015-05-22 00:00:31 +00:00
font-size:13px;
line-height:18px;
2015-05-22 00:00:31 +00:00
color:#9E9E9E;
font-family: "Droid Sans Mono","Roboto","Arial";
}
pre.snippet-padding {
padding:30px;
}
textarea:focus, input:focus{
outline: 0;
}
2015-05-22 00:00:31 +00:00
.alert {
padding: 20px;
text-align: center;
margin-top:20px;
margin-bottom:20px;
}
.alert-success {
background: #DCEDC8;
color: #33691E;
}
.alert-error {
background: #F44336;
color: #FFCDD2;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
@media (max-width: 990px) {
.breadcrumb a.icon-home {
position: static;
padding-right:20px;
padding-left:20px;
}
article {
padding-top:0px;
margin-top:-5px;
}
}
2015-05-22 00:00:31 +00:00
2015-05-22 18:37:40 +00:00
/*
http://codepen.io/batazor/pen/KwKryj
*/
2015-05-22 00:00:31 +00:00
.switch {
display: inline-block;
position: relative;
width: 50px;
height: 20.833333333333336px;
border-radius: 10.416666666666668px;
background: #E0E0E0;
2015-05-22 00:00:31 +00:00
-webkit-transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
transition: background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
vertical-align: middle;
cursor: pointer;
}
.switch::before {
content: '';
position: absolute;
top: -2.604166666666667px;
left: -2.604166666666667px;
width: 26.04166666666667px;
height: 26.04166666666667px;
background: #bdbdbd;
2015-05-22 00:00:31 +00:00
border-radius: 50%;
-webkit-transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
transition: left 0.28s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.switch:active::before {
box-shadow: 0 2px 10.416666666666668px rgba(0,0,0,0.28), 0 0 0 25px rgba(0,0,0,0.1);
}
input:checked + .switch {
background: rgba(0,150,136,0.5);
}
input:checked + .switch::before {
left: 26.562499999999996px;
background: #009688;
}
input:checked + .switch:active::before {
box-shadow: 0 2px 10.416666666666668px rgba(0,0,0,0.28), 0 0 0 25px rgba(0,150,136,0.2);
}
2015-05-22 18:37:40 +00:00
/*
header {
background:transparent;
}
.toolbar {
position:static;
background:transparent;
}
.breadcrumb {
position:absolute !important;
background:transparent;
top:2px !important;
left:100px;
}
.breadcrumb a {
color:#424242;
}
.breadcrumb a.icon-home {
left:-35px;
}
.breadcrumb a:after {
color:rgba(0,0,0,0.5) !important;
}
article {
margin-top:-50px;
}
.menu {
max-width:900px;
margin:0 auto;
position: static !important;
top:auto;
right:auto;
height: 56px;
}
.menu .nav-item:before,
.menu .nav-item:after {
color: #2f2f2f !important;
}
*/
.slider-label {
display:none;
margin-left:10px;
}
input[type="range"]:focus ~ .slider-label {
display:inline-block;
}
input[type=range] {
-webkit-appearance: none;
margin: 6px 0;
width: 200px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 8px;
cursor: pointer;
animate: 0.2s;
box-shadow: none;
background: rgba(0,150,136,0.5);
border-radius: 5px;
border: none;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: none;
border: none;
height: 26px;
width: 26px;
border-radius: 50px;
background: #009688;
cursor: pointer;
-webkit-appearance: none;
margin-top: -10px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: rgba(0,150,136,0.5);
}
input[type=range]::-moz-range-track {
width: 100%;
height: 8px;
cursor: pointer;
animate: 0.2s;
box-shadow: none;
background: rgba(0,150,136,0.5);
border-radius: 5px;
border: none;
}
input[type=range]::-moz-range-thumb {
box-shadow: none;
border: none;
height: 26px;
width: 26px;
border-radius: 50px;
background: #009688;
cursor: pointer;
}
input[type=range]::-ms-track {
width: 100%;
height: 8.4px;
cursor: pointer;
animate: 0.2s;
background: transparent;
border-color: transparent;
border-width: 16px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #2a6495;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
background: #3071a9;
border: 0.2px solid #010101;
border-radius: 2.6px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
background: #367ebd;
}