woodpecker/cmd/drone-server/static/styles/main.css
Brad Rydzewski 18d7f7b241 more styling
2015-07-29 23:45:06 -07:00

671 lines
15 KiB
CSS

html, body {
background:#fff;
color:#4c555a;
font-size:14px;
font-family:"Roboto";
min-height:100vh;
}
body > div {
display: flex;
flex-direction: column;
min-height: 100vh;
}
/*
* Header and Logo
*/
.logo {
float: left;
height: 36px;
width: 36px;
opacity: 1;
margin: 14px 0px 0px 14px;
margin: 14px 0px 0px 18px;
background: url(data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+DQo8IS0tIENyZWF0ZWQgd2l0aCBJbmtzY2FwZSAoaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvKSAtLT4NCg0KPHN2Zw0KICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIg0KICAgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyINCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyINCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciDQogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciDQogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiDQogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSINCiAgIHdpZHRoPSIzMiINCiAgIGhlaWdodD0iMzIiDQogICBpZD0ic3ZnMiINCiAgIHZlcnNpb249IjEuMSINCiAgIGlua3NjYXBlOnZlcnNpb249IjAuNDguMy4xIHI5ODg2Ig0KICAgc29kaXBvZGk6ZG9jbmFtZT0iZHJvbmVfMzIucG5nIj4NCiAgPGRlZnMNCiAgICAgaWQ9ImRlZnM0IiAvPg0KICA8c29kaXBvZGk6bmFtZWR2aWV3DQogICAgIGlkPSJiYXNlIg0KICAgICBwYWdlY29sb3I9IiNmZmZmZmYiDQogICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2Ig0KICAgICBib3JkZXJvcGFjaXR5PSIxLjAiDQogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwLjAiDQogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiDQogICAgIGlua3NjYXBlOnpvb209IjcuOTE5NTk1OSINCiAgICAgaW5rc2NhcGU6Y3g9IjkuNjYyNzY2NCINCiAgICAgaW5rc2NhcGU6Y3k9IjYuMzk3Njg2NCINCiAgICAgaW5rc2NhcGU6ZG9jdW1lbnQtdW5pdHM9InB4Ig0KICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJsYXllcjEiDQogICAgIHNob3dncmlkPSJ0cnVlIg0KICAgICBpbmtzY2FwZTpzbmFwLWdsb2JhbD0iZmFsc2UiDQogICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTI5NSINCiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iNzQ0Ig0KICAgICBpbmtzY2FwZTp3aW5kb3cteD0iNjUiDQogICAgIGlua3NjYXBlOndpbmRvdy15PSIyNCINCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMSINCiAgICAgZml0LW1hcmdpbi10b3A9IjAiDQogICAgIGZpdC1tYXJnaW4tbGVmdD0iMCINCiAgICAgZml0LW1hcmdpbi1yaWdodD0iMCINCiAgICAgZml0LW1hcmdpbi1ib3R0b209IjAiPg0KICAgIDxpbmtzY2FwZTpncmlkDQogICAgICAgdHlwZT0ieHlncmlkIg0KICAgICAgIGlkPSJncmlkMjk5NiINCiAgICAgICBlbXBzcGFjaW5nPSI1Ig0KICAgICAgIHZpc2libGU9InRydWUiDQogICAgICAgZW5hYmxlZD0idHJ1ZSINCiAgICAgICBzbmFwdmlzaWJsZWdyaWRsaW5lc29ubHk9InRydWUiDQogICAgICAgb3JpZ2lueD0iLTIxLjcyMDc3OXB4Ig0KICAgICAgIG9yaWdpbnk9Ii05OTAuMzcxODhweCIgLz4NCiAgPC9zb2RpcG9kaTpuYW1lZHZpZXc+DQogIDxtZXRhZGF0YQ0KICAgICBpZD0ibWV0YWRhdGE3Ij4NCiAgICA8cmRmOlJERj4NCiAgICAgIDxjYzpXb3JrDQogICAgICAgICByZGY6YWJvdXQ9IiI+DQogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0Pg0KICAgICAgICA8ZGM6dHlwZQ0KICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPg0KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4NCiAgICAgIDwvY2M6V29yaz4NCiAgICA8L3JkZjpSREY+DQogIDwvbWV0YWRhdGE+DQogIDxnDQogICAgIGlua3NjYXBlOmxhYmVsPSJMYXllciAxIg0KICAgICBpbmtzY2FwZTpncm91cG1vZGU9ImxheWVyIg0KICAgICBpZD0ibGF5ZXIxIg0KICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjEuNzIwNzc5LC0yOS45OTAyODcpIj4NCiAgICA8cGF0aA0KICAgICAgIHNvZGlwb2RpOnR5cGU9ImFyYyINCiAgICAgICBzdHlsZT0iZmlsbDojMjQyNzI5O2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpldmVub2RkO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDowO3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1taXRlcmxpbWl0OjQ7c3Ryb2tlLW9wYWNpdHk6MTtzdHJva2UtZGFzaGFycmF5Om5vbmUiDQogICAgICAgaWQ9InBhdGgyOTk4Ig0KICAgICAgIHNvZGlwb2RpOmN4PSIxNzIuMTA0NzQiDQogICAgICAgc29kaXBvZGk6Y3k9IjQ1OC4zOTI0OSINCiAgICAgICBzb2RpcG9kaTpyeD0iNS40Mjk1Njk3Ig0KICAgICAgIHNvZGlwb2RpOnJ5PSI1LjA1MDc2MjciDQogICAgICAgZD0ibSAxNzcuNTM0MzEsNDU4LjM5MjQ5IGEgNS40Mjk1Njk3LDUuMDUwNzYyNyAwIDEgMSAtMTAuODU5MTQsMCA1LjQyOTU2OTcsNS4wNTA3NjI3IDAgMSAxIDEwLjg1OTE0LDAgeiINCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgwLjc1NDE4MzA2LDAsMCwwLjgxMDc0NjgxLC05Mi4wNzA0MDEsLTMyMy4wMDQpIiAvPg0KICAgIDxwYXRoDQogICAgICAgc3R5bGU9ImZpbGw6IzI0MjcyOTtmaWxsLW9wYWNpdHk6MTtzdHJva2Utd2lkdGg6MDtzdHJva2UtbWl0ZXJsaW1pdDo0Ig0KICAgICAgIGQ9Im0gMzcuNzI4MDc1LDMyLjkyNjc2MiBjIDcuMTQ4NjU3LDAuMDU1OTkgMTUuMjc2MDY3LDUuMDk1MzgzIDE2LjAwNzI5NSwxNC41OTI2OTggbCAtOS42Nzg4MywwIGMgMCwwIC0xLjI0Njg3MSwtNS4yNDY5MTYgLTYuMzI4NDY1LC01LjIxMTY3OCAtNS4wODE1OTUsMC4wMzUyMiAtNi4zMjg0NjYsNS4yMTE2NzggLTYuMzI4NDY2LDUuMjExNjc4IGwgLTkuNjc4ODMsMCBjIDAuNDcwMjUsLTkuMzI5NDQ3IDguNDYyMDk3LC0xNC42NTE3NzYgMTYuMDA3Mjk2LC0xNC41OTI2OTggeiINCiAgICAgICBpZD0icmVjdDM4MTAiDQogICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCINCiAgICAgICBzb2RpcG9kaTpub2RldHlwZXM9InNjY3pjY3MiIC8+DQogICAgPHBhdGgNCiAgICAgICBzdHlsZT0iZmlsbDojMjQyNzI5O2ZpbGwtb3BhY2l0eToxO3N0cm9rZS13aWR0aDowO3N0cm9rZS1taXRlcmxpbWl0OjQiDQogICAgICAgZD0iTSAzNy43OTQ1NTMsNTkuOTkwMjYgQyAzMi40NjQyMDIsNjAuMDA0NDQgMjcuNDg0NjczLDU1Ljk4MjIyMSAyNS40NDM0MDYsNDkuNzUzMDM2IGwgNS45NTYyMDMsMCBjIDAsMCAxLjI4NDg2NSw1LjE4NzcxOSA2LjM2NjQ1OSw1LjE1MjQ4IDUuMDgxNTk0LC0wLjAzNTIyIDYuMjkwNDcyLC01LjE1MjQ4IDYuMjkwNDcyLC01LjE1MjQ4IGwgNS45NTYyMDMsMCBjIC0xLjMyNzc1LDYuNTg5Nzc0IC02Ljg4NzgzOCwxMC4yMjMwMzggLTEyLjIxODE5LDEwLjIzNzIyNCB6Ig0KICAgICAgIGlkPSJyZWN0MzgxMC0xIg0KICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiDQogICAgICAgc29kaXBvZGk6bm9kZXR5cGVzPSJzY2N6Y2NzIiAvPg0KICA8L2c+DQo8L3N2Zz4=) no-repeat center center;
}
header {
height:60px;
min-height:60px;
max-height:60px;
/*border-bottom:1px solid #f2f2f2;*/
box-sizing: border-box;
}
header ul {
float:right;
margin-right:20px;
}
header ul li span {
margin-right:7px;
margin-right:3px;
}
header li {
display:inline-block;
}
header li a {
line-height:60px;
display:inline-block;
vertical-align: middle;
padding:0px 10px;
text-transform: lowercase;
color:#4c555a;
text-decoration: none;
font-size:15px;
}
header li i {
vertical-align: middle;
}
header li.active a {
color:#0099e5;
}
header li img {
border-radius:50%;
width:32px;
height:32px;
vertical-align: middle;
margin-right:3px;
}
header ol {
float:left;
margin-left:15px;
}
header ol li {
line-height:60px;
display:inline-block;
vertical-align: middle;
font-size:21px;
}
header ol li:first-child {
font-size:0px;
}
header ol li i {
vertical-align: middle;
font-size:28px;
}
header ol li a {
line-height:inherit;
vertical-align: middle;
font-size:0px;
}
header ol li a i.material-icons {
vertical-align: middle;
font-size:25px;
}
header .private {
color: #ebcb8b;
opacity: 0.8;
/*color: #000;
opacity:0.25;*/
padding-left:15px;
margin-top:-5px;
display:none;
}
header .private i {
font-size:27px;
}
input[type="search"] {
font-family:Roboto;
}
/*
* Main Seciton / Layout
*/
.flex {
display:flex;
flex:1 1 auto;
margin-top:0px;
}
main article {
margin:0px auto;
max-width:900px;
padding:30px 40px;
}
.flex article {
padding-bottom:0px;
}
.flex article pre {
min-height: calc(100vh - 120px);
margin-bottom:20px;
}
main aside {
min-width:500px;
width:500px;
box-sizing: border-box;
padding:40px 50px;
}
main aside > div {
position: sticky;
top:0px;
}
/*
* Build Console
*/
.console {
margin:0px;
flex: 1 1 auto;
/*margin-top: -1px;*/
max-width:auto;
padding:30px 40px 20px 0px;
}
.console pre {
color:#eff1f5;
border-radius:2px;
background:#2b303b;
white-space: pre-wrap;
word-wrap: break-word;
box-sizing: border-box;
padding:35px 40px;
line-height:18px;
font-family: "RobotoMono", Roboto+Mono, Roboto;
font-size:12px;
font-weight:300;
}
/*
* Repo List
*/
/*
* Build List
*/
.repo-list { }
.repo-list li {
display:flex;
padding:30px 0px;
border-top:1px solid #f0f4f7;
position:relative;
}
.repo-list img {
width:32px;
height:32px;
border-radius:50%;
margin-left:5px;
}
.repo-list li:first-child {
border-top:none;
}
.repo-list li > div:first-child {
width:60px;
min-width:60px;
}
.repo-list li > div:nth-child(2) {
flex:1 1 auto;
}
.repo-list h2 {
line-height:32px;
font-size:18px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom:1px;
}
.repo-list p {
color:#a7adba;
margin-top:3px;
font-size:14px;
line-height:20px;
display:none;
}
/*
* Build List
*/
.build-list { }
.build-list li {
display:flex;
/*padding:30px 0px 30px 35px;*/
padding:30px 0px;
border-top:1px solid #f0f4f7;
position:relative;
}
/*.build-list li:nth-child(even) {
background:#FAFBFC;
}*/
.build-list li:first-child {
border-top:none;
}
.build-list li > div:first-child {
width:60px;
min-width:60px;
}
.build-list li > div:nth-child(2) {
flex:1 1 auto;
}
.build-list h2 {
line-height:32px;
font-size:18px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom:1px;
}
.build-section p,
.build-list p {
color:#a7adba;
margin-top:3px;
font-size:14px;
line-height:20px;
}
.build-section em,
.build-list em {
color:#65737e;
}
.build-list h2 small:before {
content:"#";
margin-right:3px;
}
.build-list h2 small:after {
content:" ";
margin-right:10px;
}
/*
* Build Details
*/
.build-section {
margin-bottom:40px;
display:flex;
}
.build-section > div:first-child {
min-width:60px;
width:60px;
display:none;
}
.build-section > div:last-child {
flex: 1 1 auto;
padding-top:4px;
font-size:17px;
line-height:22px;
}
.build-detail {
padding-left:50px;
box-sizing: border-box;
}
.build-summary h2 {
line-height:25px;
}
.build-summary p {
margin-top:15px;
}
/*
* Job List
*/
.job-list { }
.job-list li {
display:flex;
padding:20px 0px;
border-top:1px solid #f0f4f7;
}
.job-list li > div:first-child {
width:50px;
min-width:50px;
}
.job-list li > div:nth-child(2) { /** TEMPORARILY HIDDEN. MAY DECIDE TO REMOVE */
min-width:25px;
font-size:13px;
text-align:right;
padding: 10px 20px 0px 10px;
font-weight:bold;
font-size:15px;
display:none;
}
.job-list li > div:nth-child(3) {
flex:1 1 auto;
font-size:13px;
}
.job-list li div.param {
margin-top:5px;
}
.job-list li div.param:first-child {
margin-top:10px;
}
li menu {
position:absolute;
top:15px;
right:0px;
display:none;
}
li:hover menu {
display:inline-block;
}
li menu .button {
border-radius:50%;
width:36px;
height:36px;
line-height:36px;
padding:0px;
color:#dfe1e8;
background: #fff;
border:1px solid #FFF;
outline:none;
cursor:pointer;
width: auto;
text-transform: uppercase;
padding: 0px 10px;
border-radius: 2px;
font-size: 11px;
line-height: 30px;
height: auto;
margin-left: 10px;
}
li menu .button:hover {
border:1px solid #a7adba;
background:#FFF;
color:#a7adba;
}
li menu .button i {
font-size:22px;
}
li menu .button.success {
color: #FFF;
border:1px solid #a3be8c;
background: #a3be8c;
color: #a3be8c;
background:#FFF;
}
li menu .button.danger {
color: #FFF;
background: #bf616a;
color:#bf616a;
background:#FFF;
border:1px solid #bf616a;
}
/*
* Tail button to follow a build
*/
.button-tail {
position: fixed;
bottom: 50px;
right: 80px;
width: 38px;
height: 38px;
background: rgba(255,255,255,0.2);
border-radius: 50%;
box-shadow: 1px 2px 2px rgba(0,0,0,0.2);
cursor: pointer;
bottom: 15px;
right: 60px;
}
.button-tail i {
text-align:center;
color:rgba(255,255,255,0.5);
width:38px;
line-height:38px;
display:inline-block;
}
/*
* Random buttons used throughtout
*/
/*
menu {
display:block;
text-align:right;
margin-bottom:20px;
}
menu .button {
margin-left:5px;
border:1px solid #f0f0f0;
}
menu .button span {
margin:0px 10px;
text-transform: uppercase;
}*/
.button {
border-radius:2px;
line-height:32px;
display:inline-block;
vertical-align: middle;
padding:4px 15px 4px 15px;
text-decoration: none;
font-size:13px;
background:#eff1f5;
color: rgba(0,0,0,0.5);
}
.button:hover {
background:#dfe1e8;
}
/*
.button-watch {
background: #a7adba;
}
.button-settings {
background:#d08770;
}
*/
.button i {
vertical-align: middle;
/*margin-right:5px;*/
line-height:17px;
font-size:18px;
}
/*
* Status Indicator
*/
.status {
width: 36px;
height: 36px;
border-radius: 50%;
display: inline-block;
}
.status i {
line-height: 36px;
width: 36px;
vertical-align: middle;
text-align: center;
font-size:32px;
}
.status-small {
}
.status.error,
.status.killed,
.status.failure {
color: #bf616a;
}
.status.success {
color:#a3be8c;
}
/* Search Form */
.search {
display:block;
width:100%;
margin:0px 0px 37px 0px;
}
input[type="search"] {
background: #eff1f5;
line-height: 50px;
border:none;
border-radius:3px;
display:block;
width:100%;
font-size:14px;
padding:0px 15px;
font-family:"Roboto";
}
/* SETTINGS SECTION */
section .row {
display: flex;
position: relative;
text-decoration: none;
}
section .row a {
text-decoration: none;
}
section .row > div:first-child {
padding: 30px 0px;
border-bottom: 1px solid #f0f4f7;
width: 200px;
min-width: 200px;
font-size:15px;
color: #343d46;
}
section .row > div:last-child {
flex: 1 1 auto;
padding: 30px;
border-bottom: 1px solid #f0f4f7;
overflow:hidden;
color: #65737e;
}
section .row:last-child > div {
border-bottom: none;
}
pre.snippet-padding {
padding: 30px 0px;
}
pre.snippet {
white-space: pre-wrap;
word-wrap: break-word;
font-size: 13px;
line-height: 18px;
font-family: "Roboto Mono";
}
.slider-label {
display: inline-block;
margin-left: 10px;
}
::-webkit-input-placeholder { /* WebKit browsers */
color: #a7adba;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #a7adba;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #a7adba;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
color: #a7adba;
}
/* ROUND INDICATORS */
.status {
width:12px;
height:12px;
border-radius:50px;
margin-top:10px;
}
.status i {
font-size:0px;
}
.status.error,
.status.killed,
.status.failure {
background: #bf616a;
}
.status.success {
background:#a3be8c;
}
.build-list li > div:first-child,
.job-list li > div:first-child {
width: 45px;
min-width: 45px;
}
/*
* Search Menu
*/
section.search {
background: #eff1f5;
margin: 0px 0px 37px 0px;
border-radius: 3px;
display:flex;
flex-shrink: 0;
}
section.search input[type="search"] {
line-height: 50px;
border: none;
border-radius: 3px;
display: block;
width: 100%;
font-size: 16px;
padding: 0px 15px;
flex:1 1 auto;
font-family:"Roboto";
}
section.search menu {
display:flex;
flex-shrink: 0;
}
section.search menu button,
section.search menu a {
line-height: 50px;
vertical-align: middle;
display: inline-block;
padding: 0px 15px;
color: rgba(0,0,0,0.3);
background:transparent;
border:none;
border-left: 1px solid #FFF;
cursor:pointer;
outline:none;
}
section.search menu i {
vertical-align: middle;
}
/*
* Lists
*/