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:450px; width:450px; 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: "Roboto Mono"; font-size:12px; font-weight:300; } @media (-webkit-max-device-pixel-ratio: 1) { .console pre { font-weight:400; line-height:20px; font-size:13px; } } /* * 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:23px; } .build-summary h2 small { font-size: 11px; text-transform: uppercase; padding: 3px 10px; border-radius: 2px; margin-right: 5px; vertical-align: top; color:#FFF; width:auto; height:auto; display:inline; } .build-summary p { margin-top:10px; } /* * Job List */ .job-list { } .job-list > a, .job-list > li { display:flex; padding:20px 0px; border-top:1px solid #f0f4f7; } .job-list > a > div:first-child, .job-list > li > div:first-child { width:50px; min-width:50px; } .job-list > a > div:nth-child(2), .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 > a > div:nth-child(3), .job-list > li > div:nth-child(3) { flex:1 1 auto; font-size:13px; } .job-list > a div.param, .job-list > li div.param { margin-top:5px; } .job-list > a div.param:first-child, .job-list > li div.param:first-child { margin-top:9px; } .job-list > a div.meta, .job-list > li div.meta { margin-top: 5px; color: #a7adba; } .job-list > a div.meta-group { padding-top:10px; display:none; } .job-list > a.active div.meta-group { display:block; } .job-list:not(.matrix-list) > a div.meta:first-child { color: #4c555a; margin-top: -2px; padding-bottom: 5px; font-size: 14px; } 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; } .button-restart { background: #FFF; border: 1px solid #8fa1b3; color: #8fa1b3; font-size: 13px; text-transform: uppercase; margin-top: 20px; padding: 0px 15px; } /* * Status Indicator */ .status { width: 32px; height: 32px; border-radius: 50%; display: inline-block; } .status i { line-height: 32px; width: 32px; vertical-align: middle; text-align: center; font-size:24px; color:rgba(255,255,255,0.7); } .status-small { width: 28px; height: 28px; } .status-small i { line-height: 28px; width: 28px; height: 28px; } /* 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 { border-radius:50%; } .status.error, .status.killed, .status.failure { background: #bf616a; } .status.success { background:#a3be8c; } .status.running, .status.pending { background:#ebcb8b; } .status.running i, .status.pending i { -webkit-animation-name: delayed-rotate; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-name: delayed-rotate; -moz-animation-duration: 1s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: ease-in-out; animation-name: delayed-rotate; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } .build-list li > div:first-child, .job-list li > div:first-child { width: 55px; min-width: 55px; } /* * 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 */