430 lines
8.4 KiB
CSS
430 lines
8.4 KiB
CSS
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.pf-c-title {
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
a.refresh {
|
|
cursor: pointer;
|
|
border-bottom-style: none;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.time {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* Navigation bar */
|
|
.zuul-brand {
|
|
/* TODO (felix): If we can define a size in the logo.svg itself, this
|
|
shouldn't be necessary. */
|
|
height: 40px;
|
|
}
|
|
|
|
.zuul-select-tz {
|
|
/* That's the color PF4 uses for the dropdown items in the navbar */
|
|
color: var(--pf-global--Color--dark-100);
|
|
}
|
|
|
|
/* Config error modal */
|
|
.zuul-config-errors-title {
|
|
font-size: var(--pf-global--FontSize--xl);
|
|
}
|
|
|
|
.zuul-config-errors-count {
|
|
margin-left: var(--pf-global--spacer--md);
|
|
}
|
|
|
|
/*
|
|
* Build Lists and Tables
|
|
*/
|
|
|
|
/* Improve the hover effect of selected lines in the selectable data list*/
|
|
.pf-c-data-list__item.pf-m-selectable:hover:not(.pf-m-selected),
|
|
.pf-c-data-list__item.pf-m-selectable:focus:not(.pf-m-selected) {
|
|
--pf-c-data-list__item--before--BackgroundColor: var(
|
|
--pf-c-data-list__item--m-selected--before--BackgroundColor
|
|
);
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Keep the normal font-size for compact tables */
|
|
.zuul-build-table td {
|
|
font-size: var(--pf-global--FontSize--md);
|
|
}
|
|
|
|
/* Use the same hover effect on table rows like for the selectable data list */
|
|
.zuul-build-table tbody tr:hover {
|
|
box-shadow: var(--pf-global--BoxShadow--sm-top),
|
|
var(--pf-global--BoxShadow--sm-bottom);
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
/* For the small-screen table layout the before element is already used to
|
|
show the column names. Thus, we fall back to the border to show the hover
|
|
effect. The drawback with that is, that we can't show a nice transition.
|
|
*/
|
|
.zuul-build-table tbody tr:hover {
|
|
border-left-color: var(--pf-global--active-color--100);
|
|
border-left-width: var(--pf-global--BorderWidth--lg);
|
|
border-left-style: solid;
|
|
/* Compensate the border width with a negative margin */
|
|
margin-left: -3px;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 769px) {
|
|
/* For the larger screens (normal table layout) we can use the before
|
|
element on the first table cell to show the same hover effect like for
|
|
the data list */
|
|
.zuul-build-table tbody tr td:first-child::before {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: var(--pf-global--BorderWidth--lg);
|
|
content: "";
|
|
background-color: transparent;
|
|
transition: var(--pf-global--Transition);
|
|
}
|
|
|
|
.zuul-build-table tbody tr:hover td:first-child::before {
|
|
background-color: var(--pf-global--active-color--100);
|
|
}
|
|
|
|
/* Hide the action column with the build link on larger screen. This is only
|
|
needed for the mobile version as we can't use the "magnifying-glass icon
|
|
on hover" effect there. */
|
|
.zuul-build-table .pf-c-table__action {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Build/Buildset result page
|
|
*/
|
|
.zuul-build-attributes > .pf-l-flex > * {
|
|
padding-bottom: var(--pf-global--spacer--sm);
|
|
padding-left: var(--pf-global--spacer--sm);
|
|
padding-right: var(--pf-global--spacer--sm);
|
|
}
|
|
|
|
/* Status page */
|
|
.zuul-pipeline-header h3 {
|
|
font-weight: var(--pf-global--FontWeight--bold);
|
|
}
|
|
|
|
.zuul-change {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.zuul-change-id {
|
|
float: right;
|
|
}
|
|
|
|
.zuul-job-result {
|
|
float: right;
|
|
width: 70px;
|
|
height: 20px;
|
|
margin: 2px 0 0 0;
|
|
padding: 4px;
|
|
}
|
|
|
|
.zuul-change-total-result {
|
|
height: 10px;
|
|
width: 100px;
|
|
margin: 0;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.zuul-spinner,
|
|
.zuul-spinner:hover {
|
|
opacity: 0;
|
|
transition: opacity 0.5s ease-out;
|
|
cursor: default;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.zuul-spinner-on,
|
|
.zuul-spinner-on:hover {
|
|
opacity: 1;
|
|
transition-duration: 0.2s;
|
|
cursor: progress;
|
|
}
|
|
|
|
.zuul-change-cell {
|
|
padding-left: 5px;
|
|
}
|
|
|
|
.zuul-change-job {
|
|
padding: 2px 8px;
|
|
}
|
|
|
|
/* Force_break_very_long_non_hyphenated_repo_names */
|
|
.change_project {
|
|
word-break: break-all;
|
|
}
|
|
|
|
.zuul-job-name {
|
|
font-size: small;
|
|
}
|
|
|
|
.zuul-non-voting-desc {
|
|
font-size: smaller;
|
|
}
|
|
|
|
.zuul-patchset-header {
|
|
font-size: small;
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
.zuul-log-output {
|
|
color: black;
|
|
}
|
|
|
|
.zuul-log-output a,
|
|
.zuul-log-output a:hover {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.zuul-log-sev-0 {
|
|
color: black;
|
|
}
|
|
.zuul-log-sev-1 {
|
|
color: black;
|
|
}
|
|
.zuul-log-sev-2 {
|
|
color: #0000aa;
|
|
}
|
|
.zuul-log-sev-3 {
|
|
color: #883300;
|
|
}
|
|
.zuul-log-sev-4 {
|
|
color: #aa0000;
|
|
}
|
|
.zuul-log-sev-5 {
|
|
color: #aa0000;
|
|
}
|
|
.zuul-log-sev-6 {
|
|
color: #aa0000;
|
|
}
|
|
.zuul-log-sev-7 {
|
|
color: #aa0000;
|
|
}
|
|
|
|
.form-inline > .form-group {
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.zuul-change-row {
|
|
height: 100%;
|
|
padding: 0 0 10px 0;
|
|
margin: 0;
|
|
width: 16px;
|
|
min-width: 16px;
|
|
overflow: hidden;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.zuul-build-status {
|
|
background: white;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.zuul-build-merge-conflict:before {
|
|
color: black;
|
|
}
|
|
|
|
.zuul-change-row-line {
|
|
background-image: url('images/line.png');
|
|
background-repeat: 'repeat-y';
|
|
}
|
|
|
|
.progress-bar-animated {
|
|
animation: progress-bar-stripes 1s linear infinite;
|
|
}
|
|
|
|
/* Job Tree View group gap */
|
|
div.tree-view-container ul.list-group {
|
|
margin: 0px 0px;
|
|
}
|
|
|
|
/* OpenAPI page */
|
|
pre.version {
|
|
background-color: lightgrey;
|
|
color: black;
|
|
}
|
|
.swagger-ui .servers {
|
|
padding-top: 5px
|
|
}
|
|
|
|
/* Console */
|
|
.zuul-console .list-group-item-header,
|
|
.zuul-console .list-view-pf-actions,
|
|
.zuul-console .list-view-pf-expand,
|
|
.zuul-console .list-view-pf-main-info
|
|
{
|
|
margin-top: 1px;
|
|
margin-bottom: 1px;
|
|
}
|
|
.zuul-console .list-view-pf-main-info
|
|
{
|
|
padding-top: 1px;
|
|
padding-bottom: 1px;
|
|
}
|
|
.zuul-console .list-view-pf-additional-info-item {
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
flex-basis: 0;
|
|
}
|
|
.zuul-console .list-view-pf-expand
|
|
{
|
|
padding: 0;
|
|
}
|
|
.zuul-console .list-view-pf-left
|
|
{
|
|
padding-right: 17px;
|
|
}
|
|
.zuul-console .list-group-item-heading
|
|
{
|
|
margin-bottom: 0;
|
|
}
|
|
.zuul-console .list-group-item-text
|
|
{
|
|
margin-bottom: 0;
|
|
}
|
|
.zuul-console .task-skipped
|
|
{
|
|
color: white;
|
|
background-color: #00729b;
|
|
width: 6em;
|
|
cursor: pointer;
|
|
}
|
|
.zuul-console .task-changed
|
|
{
|
|
color: white;
|
|
background-color: #a28301;
|
|
width: 6em;
|
|
cursor: pointer;
|
|
}
|
|
.zuul-console .task-ok
|
|
{
|
|
color: white;
|
|
background-color: #018200;
|
|
width: 6em;
|
|
cursor: pointer;
|
|
}
|
|
.zuul-console .task-failed
|
|
{
|
|
color: white;
|
|
background-color: #9b0000;
|
|
width: 6em;
|
|
cursor: pointer;
|
|
}
|
|
.zuul-console .additionalinfo-icon
|
|
{
|
|
cursor: default;
|
|
margin-right: 8px;
|
|
}
|
|
.zuul-console .task-details-icon
|
|
{
|
|
cursor: pointer;
|
|
margin-right: 8px;
|
|
}
|
|
.zuul-console-modal-header-link
|
|
{
|
|
margin-left: 2em;
|
|
font-size: 18px;
|
|
}
|
|
.zuul-console-task-detail
|
|
{
|
|
width: 80%;
|
|
}
|
|
.zuul-console-task-result
|
|
{
|
|
padding-left: 4em;
|
|
}
|
|
pre.zuul-log-output
|
|
{
|
|
overflow-x: auto;
|
|
background-color: inherit;
|
|
border: none;
|
|
}
|
|
.zuul-log-output .line-number
|
|
{
|
|
display: inline;
|
|
-webkit-touch-callout: none;
|
|
-khtml-user-select: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
text-align: right;
|
|
padding-right: 1em;
|
|
cursor: pointer;
|
|
color: #555;
|
|
}
|
|
|
|
.highlight {
|
|
background: rgb(255, 255, 204);
|
|
}
|
|
|
|
details.foldable pre {
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
details.stderr pre {
|
|
color: #9b0000;
|
|
}
|
|
|
|
pre.cmd {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Used to make the "more/less" fold, look like a normal hyperlink */
|
|
details.foldable summary
|
|
{
|
|
color: #0088ce;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
details.foldable summary:hover
|
|
{
|
|
text-decoration: underline;
|
|
}
|
|
|
|
details.foldable summary::before {
|
|
content: "more";
|
|
}
|
|
|
|
details.foldable[open] summary::before {
|
|
content: "less";
|
|
}
|
|
|
|
/* Overwrite PF4 navbar rules to enforce the 'lg' layout of the navbar also for
|
|
'xl' sized screens. This will keep the navbar stacked (like it was in Zuul
|
|
before) and prevent PF4 to put all elements in a single line with horizontal
|
|
scrolling (which would look something like:
|
|
ZUUL | < Status Projects Jobs Labels No... > | API Documentation Tenant */
|
|
@media screen and (min-width: 1200px) {
|
|
.pf-c-page__header-nav {
|
|
grid-column: 1/-1;
|
|
grid-row: 2/3;
|
|
}
|
|
|
|
.pf-c-page {
|
|
--pf-c-page__header-nav--PaddingRight: var(
|
|
--pf-c-page__header-nav--lg--PaddingRight
|
|
);
|
|
--pf-c-page__header-nav--PaddingLeft: var(
|
|
--pf-c-page__header-nav--lg--PaddingLeft
|
|
);
|
|
}
|
|
}
|