525 lines
16 KiB
SCSS
525 lines
16 KiB
SCSS
@import "./patternfly/patternfly-4-overrides.scss";
|
|
@import "../../node_modules/@patternfly/patternfly/components/Page/page.scss";
|
|
|
|
a {
|
|
cursor: pointer;
|
|
}
|
|
|
|
p + p {
|
|
// The mix of PF3 and PF4 removes margin from paragraphs.
|
|
// We want successive paragraphs to have spaces between each other.
|
|
margin-top: var(--pf-global--spacer--md);
|
|
}
|
|
|
|
.disabled {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.btn {
|
|
min-height: 26px;
|
|
min-width: 26px;
|
|
}
|
|
|
|
.btn.disabled, .pf-c-button.disabled {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.btn.disabled:hover, .pf-c-button.disabled:hover {
|
|
z-index: auto;
|
|
}
|
|
|
|
.btn-group, .btn-group-vertical {
|
|
/* Fix button groups from wrapping in narrow widths */
|
|
display: inline-flex;
|
|
}
|
|
|
|
.btn-group-vertical {
|
|
/* Vertical btn-groups should be vertical */
|
|
flex-direction: column;
|
|
}
|
|
|
|
a.disabled {
|
|
cursor: not-allowed !important;
|
|
text-decoration: none;
|
|
pointer-events: none;
|
|
color: #8b8d8f;
|
|
}
|
|
|
|
a.disabled:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.dropdown-menu > li > a.disabled,
|
|
.dropdown-menu > li > a.disabled:hover,
|
|
.dropdown-menu > li > a.disabled:focus {
|
|
color: var(--color-subtle-copy);
|
|
}
|
|
|
|
.dropdown-menu > li > a.disabled:hover,
|
|
.dropdown-menu > li > a.disabled:focus {
|
|
text-decoration: none;
|
|
background-color: transparent;
|
|
background-image: none;
|
|
border-color: transparent;
|
|
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
|
cursor: default;
|
|
}
|
|
|
|
/* Limit dropdown menus to 90% of the viewport size */
|
|
.dropdown-menu {
|
|
height: auto;
|
|
overflow-y: auto;
|
|
max-height: 90vh;
|
|
}
|
|
|
|
/* Allow kebab menus to have a ^ with overflowing */
|
|
/* Note: This means kebab menus cannot be _too_ long */
|
|
.dropdown-kebab-pf > .dropdown-menu {
|
|
overflow: visible;
|
|
}
|
|
|
|
/* Align these buttons more nicely */
|
|
.btn.fa-minus,
|
|
.btn.fa-plus {
|
|
padding-top: 4px;
|
|
}
|
|
|
|
/* HACK: Workaround for https://github.com/patternfly/patternfly/issues/174*/
|
|
|
|
.page-ct {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.highlight-ct {
|
|
background-color: var(--color-link-hover-bg);
|
|
}
|
|
|
|
/* Well and Blankslate */
|
|
|
|
.curtains-ct {
|
|
top: 0px;
|
|
height: 100%;
|
|
width: 100%;
|
|
position: fixed;
|
|
}
|
|
|
|
.panel .well {
|
|
margin-bottom: 0px;
|
|
border: none;
|
|
border-radius: 0px;
|
|
background-color: var(--color-gray-1);
|
|
}
|
|
|
|
.well.blank-slate-pf {
|
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.05) inset;
|
|
padding-top: 40px;
|
|
}
|
|
|
|
.blank-slate-pf .spinner-lg {
|
|
height: 58px;
|
|
width: 58px;
|
|
}
|
|
|
|
.link-button {
|
|
background-color: transparent;
|
|
cursor: pointer;
|
|
text-decoration: none;
|
|
color: var(--pf-global--link--Color);
|
|
border: none;
|
|
display: inline;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.link-button:hover,
|
|
.link-button:focus {
|
|
text-decoration: underline;
|
|
outline: 0;
|
|
color: var(--pf-global--link--Color--hover);
|
|
}
|
|
|
|
.link-button.disabled {
|
|
pointer-events: none;
|
|
cursor: default;
|
|
color: var(--pf-global--disabled-color--100);
|
|
}
|
|
|
|
/* Small list inside a dialog */
|
|
/* Alert fixups */
|
|
|
|
.modal-content .pf-c-alert {
|
|
text-align: left;
|
|
margin-bottom: 24px;
|
|
}
|
|
/* Dialog patterns */
|
|
|
|
.dialog-wait-ct {
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.dialog-wait-ct .spinner {
|
|
display: inline-block;
|
|
}
|
|
|
|
.dialog-wait-ct span {
|
|
vertical-align: 4px;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.dialog-list-ct {
|
|
max-height: 230px;
|
|
overflow-x: auto;
|
|
border: 1px solid var(--color-light-gray);
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
/* HACK: https://github.com/patternfly/patternfly/issues/255 */
|
|
input[type=number] {
|
|
padding: 0 0 0 5px;
|
|
}
|
|
|
|
/* Make a dialog visible */
|
|
.dialog-ct-visible {
|
|
display: block;
|
|
}
|
|
|
|
.ct-select {
|
|
--dropdown-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='8'%3E%3Cpath fill='%23151515' d='M18.804 1h8.392c.58 0 .87.701.46 1.112L23.46 6.31a.653.653 0 0 1-.922 0l-4.194-4.197A.651.651 0 0 1 18.805 1z'/%3E%3C/svg%3E");
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
--dropdown-background: var(--pf-global--BackgroundColor--100);
|
|
max-width: 100%;
|
|
padding: 0.25em 2.5em calc(0.25em - 1px) 0.5em;
|
|
border: 1px solid var(--pf-global--BorderColor--300);
|
|
border-bottom-color: var(--pf-global--Color--200);
|
|
background: var(--dropdown-image) no-repeat 100% 50%, var(--dropdown-background);
|
|
border-radius: 3px;
|
|
color: var(--pf-global--Color--100);
|
|
cursor: pointer;
|
|
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
|
|
min-height: 2.25rem;
|
|
box-shadow: none;
|
|
}
|
|
|
|
@-moz-document url-prefix() {
|
|
/* Accommodate Firefox styling selects with slightly different padding. */
|
|
.ct-select {
|
|
padding-left: 0.25em;
|
|
}
|
|
}
|
|
|
|
.ct-select:active,
|
|
.ct-select:focus,
|
|
.ct-select:hover {
|
|
border-bottom-color: var(--pf-global--primary-color--100);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.ct-select:active,
|
|
.ct-select:focus {
|
|
border-bottom-width: 2px;
|
|
padding-bottom: calc(0.25rem - 2px);
|
|
}
|
|
|
|
.ct-select:disabled {
|
|
--dropdown-background: var(--pf-global--disabled-color--300);
|
|
color: var(--pf-global--disabled-color--100);
|
|
border: 1px solid var(--dropdown-background);
|
|
cursor: default;
|
|
}
|
|
|
|
.ct-select optgroup,
|
|
.ct-select option {
|
|
background-color: var(--color-bg);
|
|
}
|
|
|
|
.ct-select option:checked {
|
|
background-color: var(--pf-global--active-color--100);
|
|
color: var(--pf-global--Color--light-100);
|
|
}
|
|
|
|
:root {
|
|
/* Custom font aliases */
|
|
--font-family: var(--pf-global--FontFamily--sans-serif);
|
|
--font-family-mono: var(--pf-global--FontFamily--monospace);
|
|
--font-size: var(--pf-global--FontSize--md);
|
|
--font-size-s: var(--pf-global--FontSize--sm);
|
|
--font-size-xs: var(--pf-global--FontSize--xs);
|
|
--font-size-l: var(--pf-global--FontSize--lg);
|
|
--font-size-xl: var(--pf-global--FontSize--xl);
|
|
--font-size-2xl: var(--pf-global--FontSize--2xl);
|
|
--font-size-3xl: var(--pf-global--FontSize--3xl);
|
|
|
|
/* Cockpit custom colors */
|
|
--color-ct-light-red-1: #f8cccc;
|
|
--color-ct-light-red-2: #f8acac;
|
|
--color-ct-light-red-3: #f98383;
|
|
--color-ct-brick-gold : #ffa763;
|
|
--color-ct-brick-red : #a53131;
|
|
|
|
--color-ct-nav : #1b1b1b;
|
|
--color-ct-nav-sub : var(--pf-global--BackgroundColor--dark-300);
|
|
--color-ct-nav-text : var(--pf-global--BackgroundColor--light-300);
|
|
--color-ct-nav-active : var(--pf-global--BackgroundColor--dark-400);
|
|
--color-ct-nav-active-text: var(--pf-global--BackgroundColor--light-100);
|
|
--color-ct-nav-hover : var(--pf-global--BackgroundColor--dark-400);
|
|
--color-ct-nav-hover-text: var(--pf-global--BackgroundColor--light-100);
|
|
--color-ct-nav-border : var(--pf-global--BorderColor--100);
|
|
--color-ct-nav-cover-up : linear-gradient(to bottom, var(--color-ct-nav-sub), rgba(21,21,21, 0));
|
|
--color-ct-nav-cover-down : linear-gradient(to top, var(--color-ct-nav-sub), rgba(21,21,21, 0));
|
|
|
|
--color-ct-nav-main : #1b1b1b;
|
|
--color-ct-nav-main-text : var(--color-ct-nav-text);
|
|
--color-ct-nav-main-border : var(--pf-global--BackgroundColor--dark-200);
|
|
--color-ct-nav-main-active : var(--color-ct-nav-sub);
|
|
--color-ct-nav-main-active-text: var(--color-ct-nav-active-text);
|
|
--color-ct-nav-main-hover : var(--color-ct-nav-hover);
|
|
--color-ct-nav-main-hover-text : var(--color-ct-nav-hover-text);
|
|
|
|
--color-border: var(--pf-global--BorderColor--100);
|
|
|
|
--color-ct-list-text : var(--color-text);
|
|
--color-ct-list-link : var(--color-link);
|
|
--color-ct-list-bg : var(--color-bg);
|
|
--color-ct-list-border : var(--color-border);
|
|
--color-ct-list-hover-text : var(--color-link);
|
|
--color-ct-list-hover-bg : var(--pf-global--BackgroundColor--150);
|
|
--color-ct-list-hover-border : var(--pf-global--BackgroundColor--150);
|
|
--color-ct-list-hover-icon : var(--color-blue);
|
|
--color-ct-list-selected-text : var(--color-link);
|
|
--color-ct-list-selected-bg : var(--pf-global--BackgroundColor--150);
|
|
--color-ct-list-selected-border: var(--pf-global--BackgroundColor--150);
|
|
--color-ct-list-active-text : var(--color-link-focus);
|
|
--color-ct-list-active-bg : var(--color-bg);
|
|
--color-ct-list-active-border : var(--color-ct-list-border);
|
|
--color-ct-list-critical-bg : var(--color-ct-light-red-1);
|
|
--color-ct-list-critical-border : var(--color-ct-light-red-2);
|
|
--color-ct-list-critical-bg-hover : var(--color-ct-light-red-2);
|
|
--color-ct-list-critical-border-hover: var(--color-ct-light-red-3);
|
|
|
|
--color-link-hover-bg : var(--color-light-blue-2);
|
|
--color-link-hover-icon: var(--color-blue-5);
|
|
|
|
/* Red Hat Digital Design System 2019 named colors */
|
|
--color-red-hat-red : #ee0000;
|
|
--color-red-1 : #cc0000;
|
|
--color-red-2 : #a30000;
|
|
--color-red-3 : #820000;
|
|
--color-dark-red-4 : #5a0000;
|
|
--color-dark-red-5 : #460000;
|
|
--color-dark-red-6 : #320000;
|
|
--color-black : #000000;
|
|
--color-white : #ffffff;
|
|
--color-dark-blue : #004153;
|
|
--color-light-blue : #a3dbe8;
|
|
--color-dark-gray : #4c4c4c;
|
|
--color-light-gray : #dcdcdc;
|
|
--color-purple : #3b0083;
|
|
--color-gold : #f0ab00;
|
|
--color-teal : #007987;
|
|
--color-blue : #00b9e4;
|
|
--color-green : #92d400;
|
|
--color-storage : #ec7a08;
|
|
--color-infra : #0088ce;
|
|
--color-app-dev : #3f9c35;
|
|
--color-light-blue-1: #e8f6f9;
|
|
--color-light-blue-2: #d1edf4;
|
|
--color-light-blue-3: #b6e2ec;
|
|
--color-dark-blue-1 : #80a0a9;
|
|
--color-dark-blue-2 : #4e7a86;
|
|
--color-dark-blue-3 : #1b5764;
|
|
--color-blue-1 : #d9f5fb;
|
|
--color-blue-2 : #c0edf7;
|
|
--color-blue-3 : #9ae4f3;
|
|
--color-blue-4 : #82ddf1;
|
|
--color-blue-5 : #68d6ee;
|
|
--color-blue-6 : #38c8e8;
|
|
--color-teal-1 : #d9ebed;
|
|
--color-teal-2 : #cbe4f1;
|
|
--color-teal-3 : #b3d7db;
|
|
--color-teal-4 : #9acacf;
|
|
--color-teal-5 : #68afb6;
|
|
--color-teal-6 : #36959e;
|
|
--color-green-1 : #eaf5cd;
|
|
--color-green-2 : #dff1b4;
|
|
--color-green-3 : #d4ec9c;
|
|
--color-green-4 : #cae883;
|
|
--color-green-5 : #b5df56;
|
|
--color-green-6 : #aadb40;
|
|
--color-gold-1 : #fcedcd;
|
|
--color-gold-2 : #fae5b4;
|
|
--color-gold-3 : #f9dc9c;
|
|
--color-gold-4 : #f8d384;
|
|
--color-gold-5 : #f5c255;
|
|
--color-gold-6 : #f2b22d;
|
|
--color-purple-1 : #e2daec;
|
|
--color-purple-2 : #cdc0df;
|
|
--color-purple-3 : #b09bcc;
|
|
--color-purple-4 : #9c82c0;
|
|
--color-purple-5 : #8869b3;
|
|
--color-purple-6 : #7551a6;
|
|
--color-gray-1 : #f0f0f0;
|
|
--color-gray-2 : #e6e6e6;
|
|
--color-gray-3 : #d2d2d2;
|
|
--color-gray-4 : #bebebe;
|
|
--color-gray-5 : #aaaaaa;
|
|
--color-gray-6 : #969696;
|
|
--color-gray-7 : #828282;
|
|
--color-gray-8 : #6e6e6e;
|
|
--color-gray-9 : #5a5a5a;
|
|
--color-gray-10 : #464646;
|
|
--color-gray-11 : #323232;
|
|
--color-gray-12 : #1e1e1e;
|
|
|
|
/* Semantic colors */
|
|
--color-fg: #151515;
|
|
--color-bg: #fff;
|
|
--color-text: var(--color-fg);
|
|
|
|
--color-link : #0066cc;
|
|
--color-link-visited : #0066cc;
|
|
--color-link-hover : #004080;
|
|
--color-link-focus : #004080;
|
|
--color-link-dark : #73bcf7;
|
|
--color-link-visited-dark: #73bcf7;
|
|
--color-link-hover-dark : #2b9af3;
|
|
--color-link-focus-dark : #2b9af3;
|
|
|
|
--color-heading : #151515;
|
|
--color-heading-dark : #ffffff;
|
|
--color-body-copy : #151515;
|
|
--color-body-copy-dark : #cccccc;
|
|
--color-body-copy-dark-color: rbga(255,255,255,0.8);
|
|
--color-subtle-copy : #72767b;
|
|
--color-subtle-text-dark : #cccccc;
|
|
|
|
--color-alert-success-bg : #ffffff;
|
|
--color-alert-sucess-icon : #92d400;
|
|
--color-alert-sucess-border : #92d400;
|
|
--color-alert-success-text : #486b00;
|
|
--color-alert-info-bg : #ffffff;
|
|
--color-alert-info-icon : #39a5dc;
|
|
--color-alert-info-border : #39a5dc;
|
|
--color-alert-info-text : #004368;
|
|
--color-alert-warning-bg : #ffffff;
|
|
--color-alert-warning-icon : #f0ab00;
|
|
--color-alert-warning-border: #f0ab00;
|
|
--color-alert-warning-text : #795600;
|
|
--color-alert-danger-bg : #ffffff;
|
|
--color-alert-danger-icon : #c9190b;
|
|
--color-alert-danger-border : #c9190b;
|
|
--color-alert-danger-text : #7d1007;
|
|
|
|
--color-low-severity-background : #ffffff;
|
|
--color-low-severity-icon : #72767b;
|
|
--color-low-severity-border : #72767b;
|
|
--color-low-severity-text : #151515;
|
|
--color-moderate-severity-background : #ffffff;
|
|
--color-moderate-severity-icon : #f0ab00;
|
|
--color-moderate-severity-border : #f0ab00;
|
|
--color-moderate-severity-text : #795600;
|
|
--color-important-severity-background: #ffffff;
|
|
--color-important-severity-icon : #df7409;
|
|
--color-important-severity-border : #df7409;
|
|
--color-important-severity-text : #8f4c09;
|
|
--color-critical-severity-background : #ffffff;
|
|
--color-critical-severity-icon : #c9190b;
|
|
--color-critical-severity-border : #c9190b;
|
|
--color-critical-severity-text : #7d1007;
|
|
|
|
--color-cta-default : #0066cc;
|
|
--color-cta-default-hover : #004080;
|
|
--color-cta-primary : #ee0000;
|
|
--color-cta-primary-hover : #d40000;
|
|
--color-cta-secondary : #151515;
|
|
--color-cta-secondary-hover: #151515;
|
|
--color-cta-accent : #0066cc;
|
|
--color-cta-accent-hover : #0066cc;
|
|
|
|
--color-button-text : #ffffff;
|
|
--color-button-text-dark : #151515;
|
|
--color-button-default : #151515;
|
|
--color-button-default-hover : #151515;
|
|
--color-button-primary : #0066cc;
|
|
--color-button-primary-hover : #004080;
|
|
--color-button-secondary : #0066cc;
|
|
--color-button-secondary-hover: #0066cc;
|
|
--color-button-disabled : #d2d2d2;
|
|
--color-button-disabled-text : #72767b;
|
|
|
|
--color-border-lighter: #d2d2d2;
|
|
--color-border-default: #d2d2d2;
|
|
--color-border-darker : #d2d2d2;
|
|
|
|
--color-potential-band-color: #f0f0f0;
|
|
--color-ui-hover-bg : #ededed;
|
|
--color-ui-alternate-row-bg : #ededed;
|
|
|
|
--color-label : #151515;
|
|
--color-form-field-bottom-border : #8b8d8f;
|
|
--color-form-field-border : #0066cc;
|
|
--color-form-field-focus : #0066cc;
|
|
--color-form-field-bg : #ffffff;
|
|
--color-form-field-text : #151515;
|
|
--color-form-field-error-border : #a30000;
|
|
--color-form-field-error-bg : #ffffff;
|
|
--color-form-field-error-text : #a30000;
|
|
--color-form-field-active-border : #0066cc;
|
|
--color-select-dropdown-bottom-border: #8b8d8f;
|
|
--color-select-dropdown-bg : #ffffff;
|
|
--color-select-dropdown-arrow-color : #151515;
|
|
--color-select-dropdown-text-color : #151515;
|
|
|
|
--color-breadcrumb-link : #0066cc;
|
|
--color-breadcrumb-link-hover: #004080;
|
|
--color-breadcrumb-text : #151515;
|
|
|
|
--color-pagination-current-text: #393f44;
|
|
|
|
--color-chips : #72767b;
|
|
--color-chips-secondary: #72767b;
|
|
--color-chips-hover : #72767b;
|
|
|
|
--color-tab-link : #007bba;
|
|
--color-tab-text : #007bba;
|
|
--color-tab-indicator-color: #007bba;
|
|
|
|
--color-tab-bg : #ffffff;
|
|
--color-tab-border : #ededed;
|
|
--color-tab-selected-text : #007bba;
|
|
--color-tab-selected-indicator-color: #007bba;
|
|
--color-tab-selected-bg : #ffffff;
|
|
--color-tab-selected-border : #ededed;
|
|
|
|
--color-tooltips-bg : #ffffff;
|
|
--color-tooltips-text: #151515;
|
|
|
|
--color-modal-bg : #ffffff;
|
|
--color-modal-header-bg: #151515;
|
|
|
|
--color-table-header-bg : #ffffff;
|
|
--color-table-header-text : #393f44;
|
|
--color-table-header-border : #ededed;
|
|
--color-table-header-border-bottom: #ededed;
|
|
--color-table-border : #ededed;
|
|
--color-table-border-bottom : #ededed;
|
|
--color-table-text : #393f44;
|
|
}
|
|
|
|
[hidden] { display: none !important; }
|
|
|
|
/* btn-lg, btn-sm don't exist in PF4 */
|
|
.pf-c-button.btn-lg {
|
|
padding: .5rem 1rem;
|
|
font-size: 1.25rem;
|
|
line-height: 1.5;
|
|
border-radius: .3rem;
|
|
}
|
|
.pf-c-button.btn-sm {
|
|
padding: .25rem .75rem;
|
|
font-size: .875rem;
|
|
line-height: 1.5;
|
|
border-radius: .2rem;
|
|
}
|