woodpecker/static/styles_gen/style.css

.navbar { background-color: #FFF; border-radius: 0px; height: 53px; z-index: 2; margin-top: 10px; }

.navbar-brand { background-image: url(/static/images/logo_dark.svg); width: 30px; height: 30px; margin-top: 3px; background-size: 30px; background-repeat: no-repeat; background-position: center center; }

.navbar img { width: 32px; height: 32px; border-radius: 50%; }

.navbar .dropdown { display: inline-block; }

.navbar .dropdown button { background: none; border: none; color: #2b303b; min-wdith: 24px; max-width: 24px; }

.navbar .dropdown button .material-icons { line-height: 32px; min-wdith: 24px; max-width: 24px; }

.navbar-nav.navbar-right { display: inline-block; float: right; }

.navbar-nav.navbar-right li { display: inline-block; vertical-align: middle; }

.navbar-form { margin-right: 20px; width: 350px; }

.navbar-form .twitter-typeahead { width: 100%; }

.navbar-form .form-control { color: #747C84; border: none; background-color: #eff1f5; border-radius: 0px; padding: 0.3rem 0.75rem; width: 100%; }

.subnav { background: #FFF; border-bottom: 1px solid #EEE; height: 75px; min-height: 75px; max-height: 75px; margin-bottom: 40px; position: relative; }

.subnav ol { float: left; margin: 0px; margin-left: 20px; padding: 0px; }

.subnav ol li { line-height: 75px; display: inline-block; vertical-align: middle; font-size: 21px; }

.subnav ol li .btn { background: transparent; outline: none; }

.subnav ol li .btn:focus { outline: none; }

.subnav ol li .btn-info { cursor: pointer; width: auto; text-transform: uppercase; padding: 0px 10px; border-radius: 2px; font-size: 11px; line-height: 30px; height: auto; margin-left: 10px; border-color: #95AEC7; color: #95AEC7; }

.subnav ol li.separator i { vertical-align: middle; }

.subnav ol li a { color: #2B303B; line-height: 75px; text-decoration: none; }

.subnav ol li a:hover { text-decoration: none; }

.subnav .nav-tabs { position: absolute; bottom: -1px; right: 30px; border-bottom: 1px solid #eee; }

.subnav .nav-tabs .nav-link { border: none; color: #C7CCD1; font-size: 13px; padding: 10px 20px; text-transform: uppercase; }

.subnav .nav-tabs .nav-link.active { border: 1px solid #eee; border-bottom: 1px solid #fff; color: #2b303b; }

.switch { display: inline-block; position: relative; width: 40px; height: 8px; border-radius: 10.416666666666668px; background: #E0E0E0; -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: -8.604166666666667px; left: -2.604166666666667px; width: 26.04166666666667px; height: 26.04166666666667px; background: #bdbdbd; 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.41667px rgba(0, 0, 0, 0.28), 0 0 0 25px rgba(0, 0, 0, 0.1); }

switch:active::before { box-shadow: 0 2px 10.41667px 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); background: rgba(102, 187, 106, 0.5); }

input:checked + .switch::before { left: 20.562499999999996px; background: #009688; background: #66bb6a; }

input:checked + .switch:active::before { box-shadow: 0 2px 10.41667px rgba(0, 0, 0, 0.28), 0 0 0 25px rgba(0, 150, 136, 0.2); }

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); background: rgba(102, 187, 106, 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; background: #66bb6a; cursor: pointer; -webkit-appearance: none; margin-top: -10px; }

input[type=range]:focus::-webkit-slider-runnable-track { background: rgba(0, 150, 136, 0.5); background: rgba(102, 187, 106, 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); background: rgba(102, 187, 106, 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; background: #66bb6a; 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; }

.timeline { padding-left: 50px; position: relative; margin-top: 10px; margin-bottom: 40px; }

.timeline .card { display: flex; border: none; border-radius: 0px; border-top: 1px solid #eceeef; text-decoration: none; color: #2b303b; }

.timeline .card .card-header { background: #FFF; border: none; padding: 0px; width: 50px; min-width: 50px; max-width: 50px; padding-top: 30px; }

.timeline .card .card-block { flex: 1 1 auto; padding: 30px 12px 12px 12px; }

.timeline .card .card-block p { color: #ADB3BA; margin-top: 2px; font-size: 0px; }

.timeline .card .card-block p em { text-decoration: none; color: #747C84; font-style: normal; font-size: 0.9rem; }

.timeline .card .card-block p span { margin: 0px 5px; font-size: 0.9rem; }

.timeline .card .card-block h3 { display: inline-block; line-height: 22px; font-size: 18px; }

.timeline .card:nth-child(2) { border-top: 0px; }

.timeline:before { position: absolute; top: 0; bottom: 0; left: 14px; z-index: -1; display: block; width: 1px; content: ""; background-color: #DFE2E5; }

.group { padding-bottom: 16px; }

.group-title { font-size: 13px; text-transform: uppercase; color: #ADB3BA; margin-bottom: 30px; margin-top: 30px; position: relative; line-height: 20px; }

.group-title:before { content: '\f01f'; font-family: "octicons"; position: absolute; left: -48px; font-size: 20px; background: #FFF; width: 24px; vertical-align: middle; text-align: center; color: #ADB3BA; }

.group:first-child .group-title { margin-top: 0px; }

.group:last-child { padding-bottom: 0px; }

.success, .failure, .killed, .error, .running, .pending { padding: 0px 15px; color: #FFF; width: 100px; text-align: center; border-radius: 2px; text-transform: uppercase; font-size: 11px; line-height: 22px; display: inline-block; margin-right: 10px; }

.error, .killed, .failure { background: #bf616a; }

.success { background: #a3be8c; }

.pending, .running { background: #ebcb8b; animation: horizontal 2s ease infinite; }

@keyframes horizontal { 0% { transform: translate(0, 0); }
  6% { transform: translate(5px, 0); }
  12% { transform: translate(0, 0); }
  18% { transform: translate(5px, 0); }
  24% { transform: translate(0, 0); }
  30% { transform: translate(5px, 0); }
  36%, 100% { transform: translate(0, 0); } }

#output { background: #0d1926; color: #d9e6f2; margin-right: 15px; font-size: 13px; color: #eff1f5; border-radius: 2px; background: #2b303b; white-space: pre-wrap; word-wrap: break-word; box-sizing: border-box; padding: 35px 40px; font-family: "Roboto Mono"; min-height: calc(100vh - 205px); }

#follow { position: absolute; }

.build-summary { padding-left: 20px; }

.build-summary p { color: #ADB3BA; margin-top: 4px; font-size: 0.9rem; }

.build-summary em { color: #747C84; text-decoration: none; font-style: normal; }

.job-summary { padding-left: 20px; font-size: 0.9rem; }

.job-summary dt { color: #ADB3BA; font-weight: normal; }

.job-summary dd { color: #747C84; text-decoration: none; font-style: normal; }

.build-summary > div h3 { display: inline; line-height: 28px; font-size: 18px; }

.job-list { padding-left: 20px; margin-bottom: 20px; }

.job-list a { text-decoration: none; color: #747C84; font-size: 15px; display: block; border-top: 1px solid #eee; padding-top: 20px; padding-bottom: 20px; position: relative; }

.job-list a h3 { margin-bottom: 10px; color: #2b303b; font-size: 14px; margin-top: 14px; }

.job-list a h3 .env { font-family: "Roboto Mono"; }

.job-list a:not(.active) > div:nth-child(2) > div { display: none; }

.job-list a:last-child { border-bottom: 1px solid #eee; }

.job-list a > div:first-child { margin-bottom: 10px; position: relative; }

.build-btn-group { margin-left: 20px; }

.build-btn-group .btn { background: #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-right: 10px; }

.build-btn-group .btn .btn-danger { border: 1px solid #bf616a; color: #bf616a; }

.build-btn-group .btn.btn-info { border-color: #95AEC7; color: #95AEC7; }

.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; border: none; outline: none; display: none; }

.tail i { color: rgba(255, 255, 255, 0.5); line-height: 38px; display: inline-block; }

.user-row .col-sm-4 { width: 100%; }

.user-row .col-sm-4:last-child .card { border-bottom: none; }

.user-row .card { border: none; border-bottom: 1px solid #EEE; border-radius: 0px; position: relative; display: flex; }

.user-row .card-block h3 { font-size: 1.1rem; }

.user-row .card-block .card-text { color: rgba(0, 0, 0, 0.5); font-size: 0.95rem; margin: 0px; }

.user-row .card-block .btn-group { position: absolute; top: 15px; right: 0px; }

.user-row .card-block .btn-group .btn { background: #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; }

.user-row .card-block .btn-group .btn-danger { border: 1px solid #bf616a; color: #bf616a; }

.user-row .card-block .btn-group .btn-info { border-color: #95AEC7; color: #95AEC7; }

.user-row .card-header { background: #FFF; border-bottom: none; padding-right: 0px; padding-left: 0px; width: 45px; }

.card-header img { vertical-align: middle; width: 32px; height: 32px; border-radius: 3px; }

[data-admin="true"] h3:after { content: "admin"; text-transform: uppercase; color: #fff; display: inline-block; font-size: 12px; margin-left: 15px; background: #a3be8c; border-radius: 3px; padding: 2px 5px; }

.container.profile { max-width: 800px !important; margin-bottom: 40px; }

.container.profile .row { border-bottom: 1px solid #f0f4f7; }

.container.profile .row:last-child { border-bottom: none; }

.container.profile .col-md-3 { padding: 30px; padding-left: 0px; max-width: 200px; font-size: 15px; color: #2b303b; }

.container.profile .col-md-9 { padding: 30px; color: #65737e; font-size: 15px; }

.container.profile .btn.btn-info { border-color: #95AEC7; color: #95AEC7; background: #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; }

.container.profile pre { white-space: pre-wrap; word-wrap: break-word; box-sizing: border-box; font-family: "Roboto Mono"; color: #2b303b; }

.container.repo_config, .container.repo_secrets { max-width: 800px !important; }

.container.repo_config .row, .container.repo_secrets .row { border-bottom: 1px solid #f0f4f7; }

.container.repo_config .row:last-child, .container.repo_secrets .row:last-child { border: none; margin-bottom: 30px; }

.container.repo_config .row:last-child .col-md-12, .container.repo_secrets .row:last-child .col-md-12 { padding: 0px; }

.container.repo_config .row:nth-last-child(2), .container.repo_secrets .row:nth-last-child(2) { border: none; }

.container.repo_config .col-md-3, .container.repo_secrets .col-md-3 { padding: 30px; padding-left: 0px; max-width: 200px; font-size: 15px; color: #2b303b; }

.container.repo_config .col-md-9, .container.repo_secrets .col-md-9 { padding: 30px; color: #65737e; font-size: 15px; }

.container.repo_config .btn.btn-info, .container.repo_secrets .btn.btn-info { border-color: #95AEC7; color: #95AEC7; background: #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; }

.container.repo_config pre, .container.repo_secrets pre { white-space: pre-wrap; word-wrap: break-word; box-sizing: border-box; font-family: "Roboto Mono"; color: #2b303b; }

.container.repo_config input[type="range"] + span, .container.repo_secrets input[type="range"] + span { margin-left: 15px; }

.container.repo_config .alert.alert-danger, .container.repo_secrets .alert.alert-danger { background: #FFF; border: 1px solid #bf616a; border-radius: 2px; margin-top: 40px; color: #bf616a; }

.container.repo_config .alert.alert-danger .btn.btn-danger, .container.repo_secrets .alert.alert-danger .btn.btn-danger { margin-right: 15px; border: 1px solid #bf616a; color: #bf616a; background: #FFF; border-radius: 2px; font-size: 13px; text-transform: uppercase; }

.container.repo_secrets textarea { border: none; background: #eff1f5; width: 100%; border-radius: 3px; margin-bottom: 10px; height: 150px; padding: 10px 15px; }

.container.repo_secrets .btn.btn-info { margin-left: 0px; }

.container.repo_secrets .result { margin-top: 20px; white-space: pre; }

.container.repo_activate { max-width: 800px !important; }

.container.repo_activate .alert.alert-info { color: #3498DB; background: rgba(52, 152, 219, 0.12); border-radius: 2px; border: none; margin-top: 20px; padding: 30px; }

.container.repo_activate .btn.btn-info { color: #3498DB; background: #3498DB; border: 1px solid #3498DB; background: #FFF; border-radius: 2px; text-transform: uppercase; font-size: 13px; }

body.login { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%; overflow: hidden; }

body.login div { position: relative; width: 220px; height: 30px; }

body.login div div.logo { background-image: url(/static/images/logo_dark.svg); background-size: 35px; background-repeat: no-repeat; background-position: center center; position: absolute; top: 0px; left: 0px; height: 30px; width: 35px; animation-name: fadein; animation-duration: 1.5s; animation-timing-function: ease-in; }

body.login div a { background: #2b303b; color: #FFF; text-decoration: none; position: absolute; top: 0px; right: 0px; text-transform: uppercase; font-size: 13px; min-width: 150px; text-align: center; padding: 5px; animation-name: fadein; animation-duration: 1.5s; animation-timing-function: ease-in; }

body.login div.alert { position: fixed; top: 0px; left: 0px; right: 0px; line-height: 25px; padding: 20px; width: 100%; border: none; text-align: center; vertical-align: middle; height: auto; border-radius: 0px; }

@keyframes flyin { 0% { left: -3000px; }
  100% { left: 0px; } }

@keyframes flyin_right { 0% { right: -3000px; }
  100% { right: 0px; } }

@keyframes fadein { 0% { opacity: 0; }
  100% { opacity: 1; } }

.tt-open { position: absolute; top: 34px; left: 0px; z-index: 100; display: none; background: #FFF; min-width: 100%; border: 1px solid #eee; border-radius: 0px; }

.tt-selectable:hover, .tt-cursor { background: #f4f4f4; }

.tt-selectable { padding: 1rem 0.75rem; cursor: pointer; display: flex; }

.tt-selectable div:first-child { width: 75px; max-width: 75px; min-width: 75px; }

.tt-selectable div:first-child img { width: 32px; max-width: 32px; min-width: 32px; border-radius: 50%; text-align: left; margin-left: 1rem; }

.tt-selectable div:last-child { flex: 1 1 auto; line-height: 32px; }

.hidden { display: none; }

:focus { outline: none; }

::-moz-focus-inner { border: 0; }

.container { max-width: 980px !important; }

.modal-content { padding: 20px; }

.modal-content .form-control { border-radius: 2px; }

.modal-content .btn { margin-top: 20px; }

.node-row .col-sm-4 { width: 100%; }

.node-row .col-sm-4:last-child .card { border-bottom: none; }

.node-row .card { border: none; border-bottom: 1px solid #EEE; border-radius: 0px; position: relative; display: flex; }

.node-row .card-block h3 { font-size: 1.1rem; }

.node-row .card-block .card-text { color: rgba(0, 0, 0, 0.5); font-size: 0.95rem; margin: 0px; }

.node-row .card-block .btn-group { position: absolute; top: 15px; right: 0px; }

.node-row .card-block .btn-group .btn-danger { color: #bf616a; background: #FFF; border: 1px solid #bf616a; 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; }

.node-row .card-header { background: #FFF; border-bottom: none; padding-right: 0px; padding-left: 0px; width: 45px; }

i.linux_amd64 { width: 32px; height: 32px; display: inline-block; background: url(/static/images/ubuntu.svg); background-size: 32px; background-repeat: no-repeat; }