mirror of
https://github.com/woodpecker-ci/woodpecker.git
synced 2024-11-18 16:01:05 +00:00
1464 lines
31 KiB
CSS
1464 lines
31 KiB
CSS
@import url(//fonts.googleapis.com/css?family=Roboto:300,400,600,900);
|
|
@import url(//fonts.googleapis.com/css?family=Droid+Sans+Mono);
|
|
|
|
/* 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;
|
|
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
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.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) {
|
|
|
|
}
|
|
|
|
|
|
|
|
.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;
|
|
}
|
|
/*
|
|
header {
|
|
height: 64px;
|
|
width: 100%;
|
|
background: #fafafa;
|
|
padding: 6px 24px;
|
|
line-height: 72px;
|
|
overflow: hidden;
|
|
}
|
|
*/
|
|
.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);
|
|
}
|
|
|
|
.nav-item {
|
|
font-size: 20px;
|
|
line-height: 20px;
|
|
padding: 19px 0;
|
|
text-decoration:none;
|
|
}
|
|
|
|
.nav-item.settings:before {
|
|
font-size: 20px;
|
|
content: '\f060';
|
|
}
|
|
|
|
|
|
.nav-item.unstar,
|
|
.nav-item.star {
|
|
font-size:14px;
|
|
background:transparent;
|
|
line-height:20px;
|
|
}
|
|
|
|
.nav-item.star:after {
|
|
font-size: 20px;
|
|
content: "\f2e7";
|
|
}
|
|
.nav-item.unstar:after {
|
|
font-size: 20px;
|
|
content: "\f2e5";
|
|
}
|
|
|
|
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 {
|
|
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;
|
|
}
|
|
|
|
/*
|
|
.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;
|
|
}
|
|
*/
|
|
|
|
.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;
|
|
}
|
|
/*
|
|
.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;
|
|
}
|
|
*/
|
|
.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;
|
|
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 {
|
|
padding: 8px;
|
|
display: inline-block;
|
|
width: 75px;
|
|
border-radius: 2px;
|
|
color: rgba(255,255,255,0.9);
|
|
font-size: 16px;
|
|
text-align: center;
|
|
}
|
|
.pending,
|
|
.running {
|
|
background: #FFD740;
|
|
}
|
|
|
|
.success {
|
|
background:#66BB6A;
|
|
}
|
|
.error,
|
|
.killed,
|
|
.failure {
|
|
background: #EF5350;
|
|
}
|
|
|
|
section .build-row > div:first-child {
|
|
width:90px;
|
|
min-width: 90px;
|
|
}
|
|
|
|
section .build-row h3 {
|
|
color:#212121;
|
|
font-size:18px;
|
|
margin-bottom:10px;
|
|
}
|
|
|
|
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;
|
|
}
|
|
section > .search a:hover {
|
|
background: #00ACC1;
|
|
}
|
|
|
|
pre.key {
|
|
white-space: pre-wrap;
|
|
word-wrap: break-word;
|
|
padding:30px;
|
|
font-size:14px;
|
|
line-height:18px;
|
|
color:#424242;
|
|
font-family: "Droid Sans Mono","Roboto","Arial";
|
|
}
|
|
|
|
textarea:focus, input:focus{
|
|
outline: 0;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|