package.json: stylelint: Add logical property checker
Auto-fix usage of logical properties.
This commit is contained in:
Garrett LeSage
Martin Pitt
parent
caed4da96e
commit
91920163f6
|
|
@ -1,5 +1,8 @@
|
|||
{
|
||||
"extends": "stylelint-config-standard-scss",
|
||||
"plugins": [
|
||||
"stylelint-use-logical-spec"
|
||||
],
|
||||
"rules": {
|
||||
"indentation": 2,
|
||||
|
||||
|
|
@ -34,6 +37,7 @@
|
|||
"scss/no-global-function-names": null,
|
||||
"scss/operator-no-unspaced": null,
|
||||
"selector-class-pattern": null,
|
||||
"selector-id-pattern": null
|
||||
"selector-id-pattern": null,
|
||||
"liberty/use-logical-spec": "always"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
Subproject commit 7aec4437ed49da19b6a5d4952d9bce60dadbdfb1
|
||||
Subproject commit 935143afcf7c306b025df9506d6636ed2d0f9f0c
|
||||
|
|
@ -29,10 +29,10 @@
|
|||
"cssnano-preset-lite": "^2.0.1",
|
||||
"date-fns": "^2.22.1",
|
||||
"esbuild": "0.17.13",
|
||||
"esbuild-wasm": "0.17.13",
|
||||
"esbuild-plugin-copy": "^2.1.1",
|
||||
"esbuild-plugin-replace": "^1.3.0",
|
||||
"esbuild-sass-plugin": "2.6.0",
|
||||
"esbuild-wasm": "0.17.13",
|
||||
"eslint": "^8.29.0",
|
||||
"eslint-config-standard": "^17.0.0",
|
||||
"eslint-config-standard-jsx": "^11.0.0",
|
||||
|
|
@ -51,10 +51,11 @@
|
|||
"qunit-tap": "^1.5.1",
|
||||
"sass": "^1.59.3",
|
||||
"sizzle": "^2.3.5",
|
||||
"stylelint": "^14.8.5",
|
||||
"stylelint": "^14.16.1",
|
||||
"stylelint-config-standard": "^25.0.0",
|
||||
"stylelint-config-standard-scss": "^4.0.0",
|
||||
"stylelint-formatter-pretty": "^3.1.1"
|
||||
"stylelint-formatter-pretty": "^3.1.1",
|
||||
"stylelint-use-logical-spec": "^5.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"eslint": "eslint --ext .js --ext .jsx pkg/ test/common/",
|
||||
|
|
|
|||
|
|
@ -4,17 +4,17 @@
|
|||
/* Application list */
|
||||
|
||||
.app-list img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
max-width: unset;
|
||||
inline-size: 32px;
|
||||
block-size: 32px;
|
||||
max-inline-size: unset;
|
||||
}
|
||||
|
||||
.app-list .progress-title {
|
||||
margin-right: 10px;
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
|
||||
.app-list .pf-c-data-list__item-action button {
|
||||
min-width: 6rem;
|
||||
min-inline-size: 6rem;
|
||||
}
|
||||
|
||||
.app-list .pf-c-data-list__item-content {
|
||||
|
|
@ -24,20 +24,20 @@
|
|||
|
||||
.progress-bar {
|
||||
display: inline-block;
|
||||
width: 20%;
|
||||
inline-size: 20%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Application */
|
||||
|
||||
.application-details img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
inline-size: 32px;
|
||||
block-size: 32px;
|
||||
}
|
||||
|
||||
.application-details .progress-title {
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
float: inline-start;
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
|
||||
.app-screenshot {
|
||||
|
|
|
|||
|
|
@ -20,11 +20,11 @@
|
|||
@use "page";
|
||||
|
||||
#kdump-settings-location {
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
// error details
|
||||
#kdump-settings-dialog .pf-c-code-block__pre {
|
||||
max-height: 200px;
|
||||
max-block-size: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
.pf-c-modal-box__body .scroll {
|
||||
max-height: calc(75vh - 10rem);
|
||||
max-block-size: calc(75vh - 10rem);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.dialog-wait-ct-spinner {
|
||||
margin-left: var(--pf-global--spacer--sm);
|
||||
margin-inline-start: var(--pf-global--spacer--sm);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.alert-link.more-button {
|
||||
margin-left: var(--pf-global--spacer--sm);
|
||||
margin-inline-start: var(--pf-global--spacer--sm);
|
||||
}
|
||||
|
||||
.notification-message {
|
||||
|
|
|
|||
|
|
@ -1,16 +1,18 @@
|
|||
.package-list-ct {
|
||||
margin: 1em 0;
|
||||
margin-block: 1em;
|
||||
margin-inline: 0;
|
||||
padding: 0;
|
||||
max-width: 110rem;
|
||||
text-align: left;
|
||||
max-inline-size: 110rem;
|
||||
text-align: start;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.package-list-ct li {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
box-sizing: border-box;
|
||||
width: 22rem;
|
||||
padding: 0 1ex;
|
||||
inline-size: 22rem;
|
||||
padding-block: 0;
|
||||
padding-inline: 1ex;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
|
@ -24,7 +26,7 @@
|
|||
@keyframes dialogScaleUpCt {
|
||||
0% {
|
||||
opacity: 0;
|
||||
max-height: 0;
|
||||
max-block-size: 0;
|
||||
}
|
||||
|
||||
25% {
|
||||
|
|
@ -32,7 +34,7 @@
|
|||
}
|
||||
|
||||
50% {
|
||||
max-height: 100vh;
|
||||
max-block-size: 100vh;
|
||||
}
|
||||
|
||||
100% {
|
||||
|
|
|
|||
|
|
@ -5,11 +5,12 @@
|
|||
&-actions {
|
||||
order: 2;
|
||||
flex-grow: 1;
|
||||
padding: var(--pf-global--spacer--sm) var(--pf-global--spacer--lg) var(--pf-global--spacer--sm) var(--pf-global--spacer--md);
|
||||
padding-block: var(--pf-global--spacer--sm);
|
||||
padding-inline: var(--pf-global--spacer--md) var(--pf-global--spacer--lg);
|
||||
}
|
||||
|
||||
&-caption {
|
||||
margin-left: auto;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
&-tabs {
|
||||
|
|
@ -28,11 +29,12 @@
|
|||
--pf-c-table--border-width--base: 0;
|
||||
|
||||
// Add some sizing to the body
|
||||
padding: var(--pf-global--spacer--md) var(--pf-global--spacer--lg);
|
||||
width: 100%;
|
||||
padding-block: var(--pf-global--spacer--md);
|
||||
padding-inline: var(--pf-global--spacer--lg);
|
||||
inline-size: 100%;
|
||||
|
||||
// Containing hack part 1
|
||||
float: left;
|
||||
float: inline-start;
|
||||
|
||||
&::after {
|
||||
// Containing hack part 2: Clearfix CSS hack,
|
||||
|
|
@ -50,7 +52,7 @@
|
|||
// Instead, rely on page scrolling.
|
||||
// Important for mobile; also useful for desktop.
|
||||
overflow-y: visible !important;
|
||||
max-height: unset !important;
|
||||
max-block-size: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -71,10 +73,9 @@
|
|||
transform-origin: top;
|
||||
// Overflow will revert when done (but should be hidden during animation)
|
||||
overflow: hidden;
|
||||
max-height: 0;
|
||||
max-block-size: 0;
|
||||
// Padding should 'tween between 0 and the actual padding (unstated)
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
padding-block: 0;
|
||||
}
|
||||
|
||||
67% {
|
||||
|
|
@ -82,11 +83,11 @@
|
|||
// 100vh makes sense, but would cause different speeds on different devices
|
||||
// Screens are almost all =< 12000px; data is almost always smaller
|
||||
// we'll relax it to to 100vh at 100%, just in case.
|
||||
max-height: 1200px;
|
||||
max-block-size: 1200px;
|
||||
}
|
||||
|
||||
100% {
|
||||
// Allow content to extend to the height of the screen (just in case)
|
||||
max-height: 100vh;
|
||||
max-block-size: 100vh;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
.panel-body.empty-message {
|
||||
padding: 0.5rem 1rem;
|
||||
padding-block: 0.5rem;
|
||||
padding-inline: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.cockpit-log-panel .panel-body {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-inline: 0;
|
||||
}
|
||||
|
||||
.cockpit-log-panel .pf-c-card__header-main > .pf-c-card__title > .pf-c-card__title-text {
|
||||
|
|
|
|||
|
|
@ -1,23 +1,22 @@
|
|||
.automation-script-modal pre {
|
||||
max-height: 20em;
|
||||
margin-bottom: 5px;
|
||||
max-block-size: 20em;
|
||||
margin-block-end: 5px;
|
||||
}
|
||||
|
||||
.automation-script-modal span.fa {
|
||||
margin-right: 5px;
|
||||
margin-inline-end: 5px;
|
||||
}
|
||||
|
||||
.automation-script-modal i.fa {
|
||||
margin-right: 2px;
|
||||
margin-left: 5px;
|
||||
margin-inline: 5px 2px;
|
||||
}
|
||||
|
||||
.automation-script-modal textarea {
|
||||
min-height: 15rem;
|
||||
min-block-size: 15rem;
|
||||
}
|
||||
|
||||
.automation-script-modal .ansible-docs-link > svg {
|
||||
padding-right: var(--pf-global--spacer--xs);
|
||||
padding-inline-end: var(--pf-global--spacer--xs);
|
||||
}
|
||||
|
||||
.green-icon {
|
||||
|
|
|
|||
|
|
@ -7,11 +7,11 @@
|
|||
row-gap: var(--pf-global--spacer--sm);
|
||||
|
||||
.shutdown-time-picker {
|
||||
max-width: 7rem;
|
||||
max-inline-size: 7rem;
|
||||
}
|
||||
|
||||
.shutdown-select-delay,
|
||||
.shutdown-date-picker {
|
||||
max-width: 10rem;
|
||||
max-inline-size: 10rem;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,9 +24,9 @@
|
|||
// Push buttons to the right by stretching the heading
|
||||
flex: auto;
|
||||
// Add a bit of minimum margin to the right of the heading
|
||||
margin-right: var(--pf-global--spacer--md);
|
||||
margin-inline-end: var(--pf-global--spacer--md);
|
||||
// Set a minimum height of 3rem, so when buttons wrap, there's spacing
|
||||
min-height: var(--pf-global--spacer--2xl);
|
||||
min-block-size: var(--pf-global--spacer--2xl);
|
||||
// Make sure textual content is aligned to the center
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -34,11 +34,12 @@
|
|||
|
||||
&-actions {
|
||||
> * {
|
||||
margin: var(--pf-global--spacer--xs) 0 var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
|
||||
margin-block: var(--pf-global--spacer--xs);
|
||||
margin-inline: var(--pf-global--spacer--sm) 0;
|
||||
}
|
||||
|
||||
> :first-child {
|
||||
margin-left: 0;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -64,7 +65,7 @@
|
|||
// unless a width is set. (This affects panels the most, but not only.)
|
||||
// As the width is smaller than the contents, and this is a table,
|
||||
// the cell will stay at the correct width.
|
||||
width: 1px;
|
||||
inline-size: 1px;
|
||||
}
|
||||
|
||||
// Properly align actions on the end
|
||||
|
|
@ -99,7 +100,7 @@
|
|||
.pf-c-table tbody tr:first-child.error {
|
||||
&, tbody.pf-m-expanded > & {
|
||||
background-color: var(--ct-color-list-critical-bg) !important; /* keep red background when expanded */
|
||||
border-top: 1px solid var(--ct-color-list-critical-border);
|
||||
border-bottom: 1px solid var(--ct-color-list-critical-border);
|
||||
border-block-start: 1px solid var(--ct-color-list-critical-border);
|
||||
border-block-end: 1px solid var(--ct-color-list-critical-border);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,5 +7,5 @@
|
|||
|
||||
/* Ensure the console fits to its container (and doesn't attempt to go beyond the limits) */
|
||||
.xterm-screen, .xterm-viewport {
|
||||
width: auto !important;
|
||||
inline-size: auto !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
display: flex;
|
||||
gap: var(--pf-global--spacer--sm);
|
||||
justify-content: space-between;
|
||||
min-width: 10rem;
|
||||
min-inline-size: 10rem;
|
||||
}
|
||||
|
||||
&Shortcut {
|
||||
|
|
|
|||
|
|
@ -2,27 +2,26 @@
|
|||
|
||||
/* Rely on the margin from the Card for spacing */
|
||||
.ct-card.pf-c-card .table {
|
||||
margin-bottom: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
// FIXME: Once PF4 provides a property for removing padding: https://github.com/patternfly/patternfly-react/issues/5606
|
||||
.ct-card.pf-c-card .pf-c-card__body.contains-list {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-bottom: 0;
|
||||
padding-inline: 0;
|
||||
padding-block-end: 0;
|
||||
|
||||
> .pf-c-table > :last-child > tr:last-child {
|
||||
border-bottom: none;
|
||||
border-block-end: none;
|
||||
}
|
||||
|
||||
// Remove excess padding from compact tables toggles
|
||||
// And adjust the padding to left align the toggles with the card header
|
||||
> .pf-c-table {
|
||||
.pf-c-table__toggle {
|
||||
padding-left: 0;
|
||||
padding-inline-start: 0;
|
||||
|
||||
> .pf-c-button {
|
||||
padding-left: var(--pf-global--spacer--lg);
|
||||
padding-inline-start: var(--pf-global--spacer--lg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -37,8 +36,7 @@
|
|||
// as card headers already add enough space
|
||||
.ct-card > .pf-c-card__body > .pf-c-empty-state {
|
||||
--pf-c-empty-state__body--MarginTop: 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: var(--pf-global--spacer--md);
|
||||
padding-block: 0 var(--pf-global--spacer--md);
|
||||
}
|
||||
|
||||
.ct-cards-grid {
|
||||
|
|
|
|||
|
|
@ -31,19 +31,18 @@
|
|||
|
||||
.cockpit-log-panel .pf-c-card__body .panel-heading,
|
||||
.cockpit-log-panel .panel-body .panel-heading {
|
||||
border-top: 0;
|
||||
border-block-start: 0;
|
||||
background-color: var(--ct-color-bg);
|
||||
font-weight: var(--pf-global--FontWeight--normal);
|
||||
padding-top: var(--pf-global--spacer--sm);
|
||||
padding-bottom: var(--pf-global--spacer--sm);
|
||||
width: auto;
|
||||
padding-block: var(--pf-global--spacer--sm);
|
||||
inline-size: auto;
|
||||
color: var(--ct-color-list-text);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.cockpit-log-panel .pf-c-card__body .panel-heading {
|
||||
/* Align sub-heading within a PF4 card to the heading of the card */
|
||||
padding-left: var(--pf-global--spacer--lg);
|
||||
padding-inline-start: var(--pf-global--spacer--lg);
|
||||
}
|
||||
|
||||
.cockpit-log-panel .panel-body .panel-heading:not(:first-child)::after {
|
||||
|
|
@ -51,7 +50,8 @@
|
|||
display: block;
|
||||
flex: auto;
|
||||
background: linear-gradient(var(--ct-color-bg) 50%, var(--ct-color-border) calc(50% + 1px), var(--ct-color-bg) calc(50% + 2px));
|
||||
margin: 0 0 0 0.5rem;
|
||||
margin-block: 0;
|
||||
margin-inline: 0.5rem 0;
|
||||
}
|
||||
|
||||
.cockpit-logline {
|
||||
|
|
@ -62,7 +62,8 @@
|
|||
--log-service: minmax(var(--log-service-min), max-content);
|
||||
background-color: var(--ct-color-list-bg);
|
||||
font-size: var(--font-small);
|
||||
padding: 0.5rem 1rem;
|
||||
padding-block: 0.5rem;
|
||||
padding-inline: 1rem;
|
||||
display: grid;
|
||||
grid-template-columns: var(--log-icon) var(--log-time) var(--log-message) var(--log-service);
|
||||
grid-gap: var(--pf-global--spacer--sm);
|
||||
|
|
@ -80,7 +81,7 @@
|
|||
}
|
||||
|
||||
.cockpit-log-panel .cockpit-logline + .panel-heading {
|
||||
border-top-width: 1px;
|
||||
border-block-start-width: 1px;
|
||||
}
|
||||
|
||||
/* Don't show headers without content */
|
||||
|
|
@ -99,10 +100,11 @@
|
|||
}
|
||||
|
||||
.empty-message {
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
color: var(--pf-global--Color--200);
|
||||
display: block;
|
||||
padding: 0.5rem 1rem;
|
||||
padding-block: 0.5rem;
|
||||
padding-inline: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -136,7 +138,7 @@
|
|||
}
|
||||
|
||||
.cockpit-log-service-container > .pf-c-badge {
|
||||
margin-left: var(--pf-global--spacer--xs);
|
||||
margin-inline-start: var(--pf-global--spacer--xs);
|
||||
}
|
||||
|
||||
.cockpit-log-service-container {
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
+ .pf-c-menu__content {
|
||||
// There should be minimal space between the widgets (replacing the divider)
|
||||
margin-top: var(--pf-global--spacer--sm);
|
||||
margin-block-start: var(--pf-global--spacer--sm);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -38,8 +38,8 @@ a {
|
|||
}
|
||||
|
||||
.btn {
|
||||
min-height: 26px;
|
||||
min-width: 26px;
|
||||
min-block-size: 26px;
|
||||
min-inline-size: 26px;
|
||||
}
|
||||
|
||||
.btn.disabled, .pf-c-button.disabled {
|
||||
|
|
@ -71,7 +71,7 @@ a.disabled:hover {
|
|||
}
|
||||
|
||||
.curtains-ct {
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
/* Animation of new items */
|
||||
|
|
@ -102,7 +102,7 @@ a.disabled:hover {
|
|||
|
||||
.dialog-wait-ct {
|
||||
/* Right align footer idle messages after the buttons */
|
||||
margin-left: auto;
|
||||
margin-inline-start: auto;
|
||||
display: flex;
|
||||
column-gap: var(--pf-global--spacer--sm);
|
||||
align-items: center;
|
||||
|
|
@ -167,7 +167,7 @@ html:not(.index-page) body {
|
|||
|
||||
// Ensure UI fills the entire page (and does not run over)
|
||||
.ct-page-fill {
|
||||
height: 100% !important;
|
||||
block-size: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -188,8 +188,7 @@ html:not(.index-page) body {
|
|||
// buttons or not.
|
||||
.pf-c-page__main-breadcrumb .pf-c-button {
|
||||
--offset: calc(-1 * var(--pf-global--spacer--sm));
|
||||
margin-top: var(--offset);
|
||||
margin-bottom: var(--offset);
|
||||
margin-block: var(--offset);
|
||||
}
|
||||
|
||||
// To be used only from testlib.py for pixel-tests
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.ct-serverTime-time-picker {
|
||||
max-width: 7rem;
|
||||
max-inline-size: 7rem;
|
||||
}
|
||||
|
||||
.ntp-server-input-group:not(:last-child) {
|
||||
margin-bottom: var(--pf-global--spacer--sm);
|
||||
margin-block-end: var(--pf-global--spacer--sm);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,12 +4,12 @@
|
|||
|
||||
/* Panels don't draw borders between them */
|
||||
.panel > .table > tbody:first-child td {
|
||||
border-top: 1px solid rgb(221 221 221);
|
||||
border-block-start: 1px solid rgb(221 221 221);
|
||||
}
|
||||
|
||||
/* Table headers should not generate a double border */
|
||||
.panel .table thead tr th {
|
||||
border-bottom: none;
|
||||
border-block-end: none;
|
||||
}
|
||||
|
||||
/* Fix panel heading alignment & mobile layout */
|
||||
|
|
@ -20,8 +20,9 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
/* (28px small size widget height) + (0.5rem * 2) */
|
||||
min-height: calc(28px + 1rem);
|
||||
padding: 0.5rem 1rem;
|
||||
min-block-size: calc(28px + 1rem);
|
||||
padding-block: 0.5rem;
|
||||
padding-inline: 1rem;
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
|
|
@ -54,15 +55,14 @@
|
|||
.panel-heading > :last-child:not(:first-child),
|
||||
.panel-heading > .panel-heading-actions {
|
||||
flex: auto;
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 640px) {
|
||||
/* Remove _most_ of the gaps on the sides of small screens */
|
||||
/* to maximize space, but still keep the boxy panel look */
|
||||
.col-md-12 > .panel {
|
||||
margin-left: -10px;
|
||||
margin-right: -10px;
|
||||
margin-inline: -10px;
|
||||
}
|
||||
|
||||
.panel {
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
--hi-width: 20px;
|
||||
--hi-width3: calc(var(--hi-width) * 3);
|
||||
--transparent: rgb(255 255 255 / 0%); /* WebKit needs white transparent */
|
||||
max-width: 100vw;
|
||||
max-inline-size: 100vw;
|
||||
overflow-x: auto;
|
||||
position: relative;
|
||||
background-image:
|
||||
|
|
@ -89,8 +89,8 @@
|
|||
|
||||
.panel > .panel-heading {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-block-start: 0;
|
||||
}
|
||||
|
||||
.panel .table thead th {
|
||||
|
|
@ -139,10 +139,10 @@
|
|||
/* Make things line up */
|
||||
.table tbody tr > :first-child,
|
||||
.table thead tr > :first-child {
|
||||
padding-left: 1rem;
|
||||
padding-inline-start: 1rem;
|
||||
}
|
||||
|
||||
.table tbody tr > :last-child,
|
||||
.table thead tr > :last-child {
|
||||
padding-right: 1rem;
|
||||
padding-inline-end: 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
// General networking page overview
|
||||
.network-page {
|
||||
.cockpit-log-panel {
|
||||
max-width: 100vw;
|
||||
max-inline-size: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -35,30 +35,30 @@
|
|||
}
|
||||
|
||||
.network-number-field {
|
||||
max-width: 4em;
|
||||
max-inline-size: 4em;
|
||||
}
|
||||
|
||||
.network-graph {
|
||||
height: 180px;
|
||||
block-size: 180px;
|
||||
}
|
||||
|
||||
.pf-c-page__main-breadcrumb + .networking-graphs {
|
||||
// Remove the top padding when following a breadcrumb
|
||||
padding-top: 0;
|
||||
padding-block-start: 0;
|
||||
}
|
||||
|
||||
// Constrain widths of networking headers (on both the main page and in network-interface-members)
|
||||
th {
|
||||
&.networking-speed {
|
||||
width: 20%;
|
||||
inline-size: 20%;
|
||||
}
|
||||
|
||||
&.networking-spacer {
|
||||
width: var(--pf-global--spacer--4xl);
|
||||
inline-size: var(--pf-global--spacer--4xl);
|
||||
}
|
||||
|
||||
&.networking-action {
|
||||
width: var(--pf-global--spacer--3xl);
|
||||
inline-size: var(--pf-global--spacer--3xl);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -70,7 +70,7 @@ th {
|
|||
}
|
||||
|
||||
&-delete {
|
||||
margin-right: var(--pf-global--spacer--lg);
|
||||
margin-inline-end: var(--pf-global--spacer--lg);
|
||||
}
|
||||
|
||||
// Seems to be used for the "general" checkbox
|
||||
|
|
@ -80,7 +80,7 @@ th {
|
|||
}
|
||||
|
||||
input {
|
||||
margin-left: 0;
|
||||
margin-inline-start: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -92,13 +92,13 @@ th {
|
|||
// Preserve the same baseline as other elements, so items align
|
||||
display: inline;
|
||||
// Expand the link to the container, for easier clickability
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.network-interface-members {
|
||||
.pf-c-switch {
|
||||
margin-right: var(--pf-global--spacer--md);
|
||||
margin-inline-end: var(--pf-global--spacer--md);
|
||||
}
|
||||
|
||||
.pf-c-table tbody > tr > * {
|
||||
|
|
@ -106,24 +106,23 @@ th {
|
|||
}
|
||||
|
||||
.btn-group {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
padding-block: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
// If the button is not the first item in the DescriptionListDescription all left padding
|
||||
.network-interface-settings dd .pf-c-description-list__text button:not(:first-child) {
|
||||
padding-left: var(--pf-global--spacer--md);
|
||||
padding-inline-start: var(--pf-global--spacer--md);
|
||||
}
|
||||
|
||||
#network-mtu-settings-custom {
|
||||
position: relative;
|
||||
top: 6px;
|
||||
inset-block-start: 6px;
|
||||
}
|
||||
|
||||
#network-mtu-settings-input {
|
||||
margin-left: 0.5em;
|
||||
width: 5em;
|
||||
margin-inline-start: 0.5em;
|
||||
inline-size: 5em;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
|
@ -133,7 +132,7 @@ th {
|
|||
}
|
||||
|
||||
.pf-l-flex > .network-ip-settings-method {
|
||||
width: 12rem;
|
||||
inline-size: 12rem;
|
||||
}
|
||||
|
||||
#network-ip-settings-body {
|
||||
|
|
@ -156,9 +155,9 @@ th {
|
|||
#add-services-dialog {
|
||||
.service-list {
|
||||
border: 1px solid var(--pf-c-data-list--BorderTopColor);
|
||||
height: 30rem;
|
||||
block-size: 30rem;
|
||||
// full height minus UI, for mobile and small desktops
|
||||
max-height: calc(100vh - 20rem);
|
||||
max-block-size: calc(100vh - 20rem);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
|
@ -176,7 +175,7 @@ th {
|
|||
opacity: 0.75;
|
||||
|
||||
&:first-of-type {
|
||||
margin-right: 1em;
|
||||
margin-inline-end: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -196,7 +195,7 @@ th {
|
|||
}
|
||||
|
||||
#firewall {
|
||||
height: 100%;
|
||||
block-size: 100%;
|
||||
|
||||
.ct-table tbody tr:first-of-type td:nth-child(2) {
|
||||
font-weight: var(--pf-global--FontWeight--bold);
|
||||
|
|
@ -205,7 +204,7 @@ th {
|
|||
|
||||
@media screen and (max-width: $pf-global--breakpoint--md) {
|
||||
.zone-section-heading.pf-c-card__header {
|
||||
padding-left: var(--pf-global--spacer--md);
|
||||
padding-inline-start: var(--pf-global--spacer--md);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -233,25 +232,25 @@ th {
|
|||
input {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
inline-size: 16px;
|
||||
block-size: 16px;
|
||||
}
|
||||
|
||||
> label {
|
||||
/* FIXME: Add lines behind the radio buttons */
|
||||
&::after {
|
||||
border-bottom: 1px solid #d1d1d1;
|
||||
border-block-end: 1px solid #d1d1d1;
|
||||
content: "";
|
||||
}
|
||||
|
||||
/* Start line at the midpoint for the first radio */
|
||||
&:first-of-type::after {
|
||||
left: 50%;
|
||||
inset-inline-start: 50%;
|
||||
}
|
||||
|
||||
/* End line at the midpoint for the last radio */
|
||||
&:last-of-type::after {
|
||||
right: 50%;
|
||||
inset-inline-end: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -264,7 +263,8 @@ th {
|
|||
}
|
||||
|
||||
#add-zone-description-readonly {
|
||||
padding: 0.5rem 0 0;
|
||||
padding-block: 0.5rem 0;
|
||||
padding-inline: 0;
|
||||
color: var(--ct-color-subtle-copy);
|
||||
}
|
||||
|
||||
|
|
@ -278,14 +278,14 @@ th {
|
|||
@keyframes error-slide-down {
|
||||
0% {
|
||||
line-height: 0;
|
||||
height: 0;
|
||||
block-size: 0;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
100% {
|
||||
line-height: inherit;
|
||||
height: auto;
|
||||
block-size: auto;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
|
@ -296,7 +296,7 @@ th {
|
|||
|
||||
// Remove the default top padding from the toolbar
|
||||
.filter-services-toolbar {
|
||||
padding-top: 0;
|
||||
padding-block-start: 0;
|
||||
}
|
||||
|
||||
/* End Firewall specific CSS */
|
||||
|
|
|
|||
|
|
@ -13,13 +13,15 @@
|
|||
--pf-c-table--cell--PaddingTop: 0.5rem;
|
||||
--pf-c-table--cell--PaddingBottom: 0.5rem;
|
||||
|
||||
padding: var(--pf-c-table--cell--PaddingTop) var(--pf-c-table--cell--PaddingRight) var(--pf-c-table--cell--PaddingBottom) var(--pf-c-table--cell--PaddingLeft);
|
||||
padding-block: var(--pf-c-table--cell--PaddingTop) var(--pf-c-table--cell--PaddingBottom);
|
||||
|
||||
padding-inline: var(--pf-c-table--cell--PaddingLeft) var(--pf-c-table--cell--PaddingRight);
|
||||
}
|
||||
}
|
||||
|
||||
.kpatches-labelgroup ul.pf-c-label-group__list,
|
||||
.kpatches-labelgroup li.pf-c-label-group__list-item:last-child, {
|
||||
margin-bottom: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
.pk-updates--header {
|
||||
|
|
@ -27,15 +29,17 @@
|
|||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 1.5rem 0 1rem;
|
||||
padding-block: 1.5rem 1rem;
|
||||
padding-inline: 0;
|
||||
|
||||
&--actions {
|
||||
> .pf-c-button,
|
||||
> .btn-group {
|
||||
margin: 5px 5px 0 0;
|
||||
margin-block: 5px 0;
|
||||
margin-inline: 0 5px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -54,7 +58,7 @@
|
|||
|
||||
.ct-table tr {
|
||||
.severity-icon {
|
||||
margin-right: var(--pf-global--spacer--xs);
|
||||
margin-inline-end: var(--pf-global--spacer--xs);
|
||||
}
|
||||
|
||||
td.changelog {
|
||||
|
|
@ -68,8 +72,8 @@
|
|||
}
|
||||
|
||||
&, p {
|
||||
max-width: 60vw;
|
||||
margin-bottom: 0; // counter-act <Markdown>
|
||||
max-inline-size: 60vw;
|
||||
margin-block-end: 0; // counter-act <Markdown>
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
|
@ -77,7 +81,7 @@
|
|||
|
||||
th:last-child,
|
||||
td.changelog:last-child {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -94,7 +98,7 @@
|
|||
}
|
||||
|
||||
div.changelog {
|
||||
max-height: 20em;
|
||||
max-block-size: 20em;
|
||||
overflow: auto;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
|
@ -112,8 +116,9 @@ div.changelog {
|
|||
|
||||
/* don't let the install progress bar get too wide */
|
||||
.progress-main-view {
|
||||
max-width: 60rem;
|
||||
margin: 10ex auto 0;
|
||||
max-inline-size: 60rem;
|
||||
margin-block: 10ex 0;
|
||||
margin-inline: auto;
|
||||
|
||||
.pf-l-grid {
|
||||
align-items: end;
|
||||
|
|
@ -122,30 +127,32 @@ div.changelog {
|
|||
|
||||
/* workaround font not supporting tabular numbers yet https://github.com/cockpit-project/cockpit/issues/15090 */
|
||||
.pf-c-progress__status {
|
||||
min-width: 3ch;
|
||||
min-inline-size: 3ch;
|
||||
}
|
||||
|
||||
/* Add some space between the spinner and the text */
|
||||
.progress-description > svg {
|
||||
margin-right: var(--pf-global--spacer--sm);
|
||||
margin-inline-end: var(--pf-global--spacer--sm);
|
||||
}
|
||||
|
||||
.flow-list-blank-slate {
|
||||
margin: 0 auto;
|
||||
max-width: 69rem;
|
||||
margin-block: 0;
|
||||
margin-inline: auto;
|
||||
max-inline-size: 69rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.flow-list {
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
box-sizing: border-box;
|
||||
|
||||
li {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
box-sizing: border-box;
|
||||
width: 22rem;
|
||||
padding: 0 1ex 0 0;
|
||||
inline-size: 22rem;
|
||||
padding-block: 0;
|
||||
padding-inline: 0 1ex;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
|
@ -155,45 +162,47 @@ div.changelog {
|
|||
|
||||
// prevent overflowo on small screens
|
||||
.error-log {
|
||||
max-width: 100%;
|
||||
max-inline-size: 100%;
|
||||
}
|
||||
|
||||
.update-log {
|
||||
text-align: center;
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
padding-right: 3ex;
|
||||
text-align: start;
|
||||
padding-inline-end: 3ex;
|
||||
}
|
||||
|
||||
td {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
|
||||
.update-log-content {
|
||||
margin: 0 10ex;
|
||||
height: 13em;
|
||||
margin-block: 0;
|
||||
margin-inline: 10ex;
|
||||
block-size: 13em;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
table.header-buttons {
|
||||
margin-bottom: 20px; /* replacement for h2's margin-bottom */
|
||||
margin-block-end: 20px; /* replacement for h2's margin-bottom */
|
||||
td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0 4rem 0 0; /* vertical default ones break vertical alignment */
|
||||
margin-block: 0;
|
||||
margin-inline: 0 4rem; /* vertical default ones break vertical alignment */
|
||||
}
|
||||
}
|
||||
|
||||
#auto-update-day {
|
||||
max-width: 10rem;
|
||||
max-inline-size: 10rem;
|
||||
}
|
||||
|
||||
#auto-update-time {
|
||||
max-width: 7rem;
|
||||
max-inline-size: 7rem;
|
||||
}
|
||||
|
||||
.auto-update-group {
|
||||
|
|
@ -202,11 +211,12 @@ table.header-buttons {
|
|||
}
|
||||
|
||||
.pk-updates .pf-c-description-list + div {
|
||||
padding-top: var(--pf-global--spacer--md);
|
||||
padding-block-start: var(--pf-global--spacer--md);
|
||||
}
|
||||
|
||||
.restart-services-modal-body {
|
||||
padding: 1em 0;
|
||||
padding-block: 1em;
|
||||
padding-inline: 0;
|
||||
}
|
||||
|
||||
.pf-c-content ul {
|
||||
|
|
@ -216,7 +226,7 @@ table.header-buttons {
|
|||
.updates-history {
|
||||
// Constrain time's width
|
||||
.history-time {
|
||||
width: 0;
|
||||
inline-size: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
|
|
@ -225,29 +235,30 @@ table.header-buttons {
|
|||
align-items: baseline;
|
||||
|
||||
> svg {
|
||||
margin-right: 1ex;
|
||||
margin-inline-end: 1ex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.updates-success-table {
|
||||
margin-bottom: 1em;
|
||||
margin-block-end: 1em;
|
||||
}
|
||||
|
||||
.update-success-actions > button {
|
||||
margin: 0.25rem 0 0.25rem 0.5rem;
|
||||
margin-block: 0.25rem;
|
||||
margin-inline: 0.5rem 0;
|
||||
}
|
||||
|
||||
.update-success-table-title {
|
||||
padding-left: 0.5em;
|
||||
padding-inline-start: 0.5em;
|
||||
}
|
||||
|
||||
.cockpit-update-warning {
|
||||
margin-right: 1rem;
|
||||
margin-inline-end: 1rem;
|
||||
}
|
||||
|
||||
.cockpit-update-warning-icon {
|
||||
margin-right: 0.5rem;
|
||||
margin-inline-end: 0.5rem;
|
||||
}
|
||||
|
||||
.cockpit-update-warning-text {
|
||||
|
|
@ -255,7 +266,7 @@ table.header-buttons {
|
|||
}
|
||||
|
||||
.autoupdates-card-error {
|
||||
margin-bottom: var(--pf-global--spacer--md);
|
||||
margin-block-end: var(--pf-global--spacer--md);
|
||||
}
|
||||
|
||||
.ct-info-circle {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
.mem-graph {
|
||||
height: 180px;
|
||||
block-size: 180px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
#spawn-output {
|
||||
min-width: 70ex;
|
||||
min-height: 1rem;
|
||||
max-height: 20rem;
|
||||
min-inline-size: 70ex;
|
||||
min-block-size: 1rem;
|
||||
max-block-size: 20rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -48,20 +48,20 @@
|
|||
gap: var(--pf-global--spacer--sm) var(--pf-global--spacer--md);
|
||||
|
||||
> div:first-child {
|
||||
width: 70%;
|
||||
inline-size: 70%;
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
+ hr {
|
||||
margin-top: var(--pf-global--spacer--sm);
|
||||
margin-block-start: var(--pf-global--spacer--sm);
|
||||
}
|
||||
|
||||
.pf-c-expandable-section__content {
|
||||
margin-top: unset;
|
||||
margin-block-start: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.selinux-details textarea {
|
||||
margin-top: var(--pf-global--spacer--xs);
|
||||
margin-block-start: var(--pf-global--spacer--xs);
|
||||
resize: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,14 +9,14 @@
|
|||
}
|
||||
|
||||
td:last-child {
|
||||
width: 1%;
|
||||
inline-size: 1%;
|
||||
}
|
||||
|
||||
// Remove excess padding from compact tables toggles
|
||||
// And adjust the padding to left align the toggles with the card header
|
||||
.pf-c-table {
|
||||
.pf-c-table__toggle {
|
||||
padding-left: 0;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,7 +54,8 @@ $desktop: $phone + 1px;
|
|||
// https://github.com/patternfly/patternfly-design/issues/1112
|
||||
.search {
|
||||
background: transparent !important;
|
||||
padding: var(--pf-global--spacer--md) var(--pf-global--spacer--md) var(--pf-global--spacer--sm);
|
||||
padding-block: var(--pf-global--spacer--md) var(--pf-global--spacer--sm);
|
||||
padding-inline: var(--pf-global--spacer--md);
|
||||
|
||||
> .pf-c-text-input-group__main {
|
||||
background: var(--ct-color-nav-search);
|
||||
|
|
@ -67,7 +68,8 @@ $desktop: $phone + 1px;
|
|||
|
||||
// Adjust search icon
|
||||
.pf-c-text-input-group__icon {
|
||||
padding: var(--pf-global--spacer--md) var(--pf-global--spacer--md) var(--pf-global--spacer--sm) !important;
|
||||
padding-block: var(--pf-global--spacer--md) var(--pf-global--spacer--sm) !important;
|
||||
padding-inline: var(--pf-global--spacer--md) !important;
|
||||
color: var(--pf-global--palette--black-200);
|
||||
}
|
||||
|
||||
|
|
@ -78,7 +80,7 @@ $desktop: $phone + 1px;
|
|||
|
||||
.pf-c-text-input-group__text-input {
|
||||
// Reserve space for the × icon
|
||||
padding-right: var(--pf-global--spacer--xl);
|
||||
padding-inline-end: var(--pf-global--spacer--xl);
|
||||
// Stroke outside, based on PF search dark mode mockups
|
||||
border: 1px solid var(--pf-global--palette--black-700);
|
||||
}
|
||||
|
|
@ -88,8 +90,8 @@ $desktop: $phone + 1px;
|
|||
align-self: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
right: var(--pf-global--spacer--sm);
|
||||
width: var(--pf-global--spacer--xl);
|
||||
inset-inline-end: var(--pf-global--spacer--sm);
|
||||
inline-size: var(--pf-global--spacer--xl);
|
||||
|
||||
// Recolor × icon
|
||||
> .pf-c-button {
|
||||
|
|
@ -107,7 +109,7 @@ $desktop: $phone + 1px;
|
|||
display: inline-block;
|
||||
font-size: var(--pf-global--FontSize--sm);
|
||||
font-weight: var(--pf-global--FontWeight--normal);
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
.pf-m-current .nav-item-hint {
|
||||
|
|
@ -130,7 +132,8 @@ $desktop: $phone + 1px;
|
|||
}
|
||||
|
||||
.no-results {
|
||||
padding: var(--pf-global--spacer--md) 0;
|
||||
padding-block: var(--pf-global--spacer--md);
|
||||
padding-inline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -140,25 +143,26 @@ $desktop: $phone + 1px;
|
|||
display: block;
|
||||
|
||||
> iframe {
|
||||
height: 100%;
|
||||
block-size: 100%;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
|
||||
.screenreader-text {
|
||||
position: absolute;
|
||||
left: -999px;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
top: auto;
|
||||
inset-inline-start: -999px;
|
||||
inline-size: 1px;
|
||||
block-size: 1px;
|
||||
inset-block-start: auto;
|
||||
|
||||
&:focus {
|
||||
display: inline-block;
|
||||
height: auto;
|
||||
width: auto;
|
||||
block-size: auto;
|
||||
inline-size: auto;
|
||||
position: static;
|
||||
padding: 19px 0;
|
||||
width: 100%;
|
||||
padding-block: 19px;
|
||||
padding-inline: 0;
|
||||
inline-size: 100%;
|
||||
text-align: center;
|
||||
background-color: var(--pf-global--BackgroundColor--dark-300);
|
||||
color: white;
|
||||
|
|
@ -168,7 +172,7 @@ $desktop: $phone + 1px;
|
|||
[dir="rtl"] {
|
||||
// Not setting this breaks pixel tests
|
||||
.screenreader-text {
|
||||
right: -999px;
|
||||
inset-inline-end: -999px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -177,11 +181,11 @@ $desktop: $phone + 1px;
|
|||
// Adapt PF4's new header select for 2-up
|
||||
.ct-topnav-content .pf-c-toolbar__item:not(.super-user-indicator) {
|
||||
// Remove the margin spacing between each
|
||||
margin-right: 0;
|
||||
margin-inline-end: 0;
|
||||
|
||||
// Collapse the 2 side border lines into 1
|
||||
+ .pf-c-toolbar__item button::before {
|
||||
margin-left: -1px;
|
||||
margin-inline-start: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -191,17 +195,14 @@ $desktop: $phone + 1px;
|
|||
|
||||
.area-ct-subnav {
|
||||
// Make a separator between host selector & search
|
||||
border-top: 1px solid var(--pf-global--Color--300);
|
||||
border-block-start: 1px solid var(--pf-global--Color--300);
|
||||
}
|
||||
|
||||
.view-hosts .sidebar-hosts {
|
||||
animation: navHostsSlide 300ms ease-out;
|
||||
transform-origin: top;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset: 0;
|
||||
background: var(--pf-global--BackgroundColor--dark-200);
|
||||
|
||||
.pf-theme-dark & {
|
||||
|
|
@ -221,7 +222,7 @@ $desktop: $phone + 1px;
|
|||
}
|
||||
|
||||
.header {
|
||||
border-left: 1px solid var(--pf-global--BackgroundColor--dark-100);
|
||||
border-inline-start: 1px solid var(--pf-global--BackgroundColor--dark-100);
|
||||
background: linear-gradient(to right, var(--pf-global--BackgroundColor--dark-100) -1rem, var(--pf-global--BackgroundColor--dark-300) 1rem);
|
||||
|
||||
.credential-unlocked {
|
||||
|
|
@ -231,7 +232,7 @@ $desktop: $phone + 1px;
|
|||
|
||||
.pf-c-dropdown__menu {
|
||||
// Correct the offset
|
||||
margin-top: -4px;
|
||||
margin-block-start: -4px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -245,7 +246,7 @@ $desktop: $phone + 1px;
|
|||
background-color: var(--pf-global--BackgroundColor--dark-300);
|
||||
|
||||
> .pf-c-select > button {
|
||||
padding-left: var(--pf-global--spacer--lg);
|
||||
padding-inline-start: var(--pf-global--spacer--lg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -284,25 +285,24 @@ $desktop: $phone + 1px;
|
|||
|
||||
.header {
|
||||
.pf-c-toolbar__item {
|
||||
margin-right: 0;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-system-menu {
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: auto;
|
||||
inset-inline: 0;
|
||||
block-size: auto;
|
||||
overflow: auto;
|
||||
max-height: calc(100vh - var(--nav-icon-size));
|
||||
max-width: 29rem;
|
||||
max-block-size: calc(100vh - var(--nav-icon-size));
|
||||
max-inline-size: 29rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-hosts-menu {
|
||||
position: absolute;
|
||||
bottom: var(--nav-icon-size);
|
||||
right: var(--pf-global--spacer--md);
|
||||
max-width: 100vw;
|
||||
inset-block-end: var(--nav-icon-size);
|
||||
inset-inline-end: var(--pf-global--spacer--md);
|
||||
max-inline-size: 100vw;
|
||||
}
|
||||
|
||||
.pf-m-dark.pf-c-select {
|
||||
|
|
@ -315,17 +315,17 @@ $desktop: $phone + 1px;
|
|||
.ct-switcher > .pf-c-select {
|
||||
.pf-c-select__toggle {
|
||||
display: block;
|
||||
width: auto;
|
||||
inline-size: auto;
|
||||
}
|
||||
|
||||
.pf-c-select__toggle-arrow {
|
||||
transform: rotate(180deg) scale(1.5);
|
||||
margin: unset;
|
||||
margin-top: 4px;
|
||||
margin-block-start: 4px;
|
||||
}
|
||||
|
||||
> button {
|
||||
padding-left: 0;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -347,27 +347,27 @@ $desktop: $phone + 1px;
|
|||
@media (max-width: $phone-tiny) {
|
||||
// Don't have a gap for the hosts selection
|
||||
.nav-hosts-menu {
|
||||
right: 0;
|
||||
inset-inline-end: 0;
|
||||
}
|
||||
|
||||
// Make the hosts selection fill the width of the page
|
||||
.view-hosts .sidebar-hosts .pf-c-page__sidebar-body {
|
||||
width: 100vw;
|
||||
inline-size: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar.navbar-pf-vertical {
|
||||
border-top: 0;
|
||||
border-block-start: 0;
|
||||
}
|
||||
|
||||
.ct-switcher {
|
||||
height: 100%;
|
||||
block-size: 100%;
|
||||
|
||||
> .pf-c-select {
|
||||
height: 100%;
|
||||
block-size: 100%;
|
||||
|
||||
.pf-c-select__toggle-text {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -396,11 +396,12 @@ $desktop: $phone + 1px;
|
|||
}
|
||||
|
||||
.pf-c-select__toggle {
|
||||
height: 100%;
|
||||
block-size: 100%;
|
||||
}
|
||||
|
||||
.nav-action {
|
||||
margin: 0 0 0 auto !important;
|
||||
margin-block: 0 !important;
|
||||
margin-inline: auto 0 !important;
|
||||
}
|
||||
|
||||
.host-apps {
|
||||
|
|
@ -414,9 +415,9 @@ $desktop: $phone + 1px;
|
|||
@media (max-width: $phone) {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
max-height: calc(100vh - var(--nav-icon-size));
|
||||
max-block-size: calc(100vh - var(--nav-icon-size));
|
||||
position: sticky;
|
||||
top: 0;
|
||||
inset-block-start: 0;
|
||||
|
||||
> .pf-c-nav {
|
||||
overflow: auto;
|
||||
|
|
@ -461,9 +462,9 @@ $desktop: $phone + 1px;
|
|||
grid-template-columns: 1fr auto;
|
||||
justify-content: space-between;
|
||||
gap: 0 var(--pf-global--spacer--md);
|
||||
padding-right: var(--pf-global--spacer--md);
|
||||
padding-inline-end: var(--pf-global--spacer--md);
|
||||
// In mobile, sometimes items wrap; neighbors should also fill the space
|
||||
height: 100%;
|
||||
block-size: 100%;
|
||||
|
||||
> .nav-item-name {
|
||||
grid-area: name;
|
||||
|
|
@ -500,10 +501,8 @@ $desktop: $phone + 1px;
|
|||
content: "";
|
||||
background-color: var(--pf-c-nav__link--Color);
|
||||
border-radius: 3px;
|
||||
top: 6px;
|
||||
right: 5px;
|
||||
bottom: 6px;
|
||||
left: 5px;
|
||||
inset-block: 6px;
|
||||
inset-inline: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -519,12 +518,12 @@ $desktop: $phone + 1px;
|
|||
grid-template-rows: max-content max-content max-content;
|
||||
|
||||
@media (min-width: $desktop) {
|
||||
max-height: 100%;
|
||||
max-block-size: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: $phone) {
|
||||
// Don't run off the top of the page in mobile
|
||||
max-height: calc(100vh - var(--nav-icon-size));
|
||||
max-block-size: calc(100vh - var(--nav-icon-size));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -537,7 +536,8 @@ $desktop: $phone + 1px;
|
|||
--button-margin-y: 0.75rem;
|
||||
display: grid;
|
||||
gap: var(--pf-global--spacer--sm);
|
||||
margin: var(--button-margin-y) var(--button-margin-x);
|
||||
margin-block: var(--button-margin-y);
|
||||
margin-inline: var(--button-margin-x);
|
||||
|
||||
> button {
|
||||
html:not(.pf-theme-dark) & {
|
||||
|
|
@ -565,7 +565,8 @@ $desktop: $phone + 1px;
|
|||
.nav-item-actions {
|
||||
display: flex;
|
||||
gap: var(--pf-global--spacer--xs);
|
||||
padding: var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
|
||||
padding-block: var(--pf-global--spacer--xs);
|
||||
padding-inline: var(--pf-global--spacer--sm);
|
||||
// Pull the background color over
|
||||
background: var(--pf-c-nav__link--BackgroundColor);
|
||||
|
||||
|
|
@ -595,7 +596,7 @@ $desktop: $phone + 1px;
|
|||
}
|
||||
|
||||
.ct-topnav-content {
|
||||
margin-left: auto;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
// Rework navigation toggles in desktop and (especially) mobile modes
|
||||
|
|
@ -650,7 +651,7 @@ $desktop: $phone + 1px;
|
|||
}
|
||||
|
||||
.ct-locked > .ct-lock-wrapper > svg {
|
||||
margin-right: var(--pf-global--spacer--sm);
|
||||
margin-inline-end: var(--pf-global--spacer--sm);
|
||||
color: var(--pf-global--palette--gold-400);
|
||||
}
|
||||
|
||||
|
|
@ -660,7 +661,8 @@ $desktop: $phone + 1px;
|
|||
> .ct-lock-wrapper {
|
||||
background: var(--pf-global--BackgroundColor--dark-200);
|
||||
border-radius: var(--pf-global--BorderRadius--sm);
|
||||
padding: var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
|
||||
padding-block: var(--pf-global--spacer--xs);
|
||||
padding-inline: var(--pf-global--spacer--sm);
|
||||
|
||||
> svg {
|
||||
color: var(--pf-global--palette--gold-300);
|
||||
|
|
@ -694,22 +696,23 @@ $desktop: $phone + 1px;
|
|||
#nav-system-item,
|
||||
.ct-nav-toggle > button {
|
||||
// Stretch to navbar
|
||||
height: 100%;
|
||||
block-size: 100%;
|
||||
// Don't stretch to fill content; make optimal width same as height
|
||||
width: var(--pf-global--spacer--4xl);
|
||||
inline-size: var(--pf-global--spacer--4xl);
|
||||
// Leave enough space for 5 items (4 + spinner)
|
||||
max-width: calc(100vw / 5);
|
||||
max-inline-size: calc(100vw / 5);
|
||||
display: grid !important;
|
||||
grid-template-rows: 28px 1fr;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
color: var(--pf-global--Color--light-100);
|
||||
padding: var(--pf-global--spacer--sm) var(--pf-global--spacer--xs);
|
||||
padding-block: var(--pf-global--spacer--sm);
|
||||
padding-inline: var(--pf-global--spacer--xs);
|
||||
align-items: center;
|
||||
|
||||
> .pf-c-select__toggle-wrapper {
|
||||
flex: none;
|
||||
max-width: 100%;
|
||||
max-inline-size: 100%;
|
||||
}
|
||||
|
||||
// Remove the toggled outline
|
||||
|
|
@ -728,22 +731,22 @@ $desktop: $phone + 1px;
|
|||
|
||||
.pf-c-select__toggle-arrow {
|
||||
// This is here because Chrome is weird sometimes...
|
||||
padding: 2px 0 5px;
|
||||
padding-block: 2px 5px;
|
||||
padding-inline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ct-nav-toggle .pf-c-dropdown__menu {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
inset-block: auto 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// HACK: Don't span the navigation as wide or tall as possible
|
||||
.nav-hosts-menu {
|
||||
height: auto;
|
||||
block-size: auto;
|
||||
|
||||
.pf-c-page__sidebar .pf-c-nav {
|
||||
width: unset;
|
||||
inline-size: unset;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -773,10 +776,7 @@ $desktop: $phone + 1px;
|
|||
border: 1px solid #444548;
|
||||
border-width: 0 1px 0 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset: 0;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
|
@ -791,8 +791,8 @@ $desktop: $phone + 1px;
|
|||
}
|
||||
|
||||
@keyframes navHostsEditButtonsAppear {
|
||||
0% { opacity: 0; max-height: 0; max-width: 0; }
|
||||
50% { opacity: 0; max-height: 0; max-width: 0; }
|
||||
75% { opacity: 0; max-height: 100%; max-width: 100%; }
|
||||
100% { opacity: 1; max-height: 100%; max-width: 100%; }
|
||||
0% { opacity: 0; max-block-size: 0; max-inline-size: 0; }
|
||||
50% { opacity: 0; max-block-size: 0; max-inline-size: 0; }
|
||||
75% { opacity: 0; max-block-size: 100%; max-inline-size: 100%; }
|
||||
100% { opacity: 1; max-block-size: 100%; max-inline-size: 100%; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,21 +46,21 @@ html.index-page body {
|
|||
}
|
||||
|
||||
#machine-change-auth > p {
|
||||
margin-bottom: 5px;
|
||||
margin-block-end: 5px;
|
||||
}
|
||||
|
||||
// Fix fingerprint layout
|
||||
.add-host-fingerprint {
|
||||
margin-top: var(--pf-global--spacer--md);
|
||||
margin-block-start: var(--pf-global--spacer--md);
|
||||
|
||||
td {
|
||||
padding: 0;
|
||||
line-height: inherit;
|
||||
height: auto;
|
||||
block-size: auto;
|
||||
vertical-align: middle !important;
|
||||
|
||||
&:first-child {
|
||||
padding-right: var(--pf-global--spacer--md);
|
||||
padding-inline-end: var(--pf-global--spacer--md);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -68,7 +68,8 @@ html.index-page body {
|
|||
.machine-key {
|
||||
margin: 0;
|
||||
white-space: pre-line;
|
||||
padding: var(--pf-global--spacer--xs) var(--pf-global--spacer--sm);
|
||||
padding-block: var(--pf-global--spacer--xs);
|
||||
padding-inline: var(--pf-global--spacer--sm);
|
||||
}
|
||||
|
||||
.login-setup-checkbox-wrapper {
|
||||
|
|
@ -77,14 +78,14 @@ html.index-page body {
|
|||
}
|
||||
|
||||
#edit-machine-port {
|
||||
width: 100px;
|
||||
inline-size: 100px;
|
||||
}
|
||||
|
||||
#connecting {
|
||||
height: 100%;
|
||||
block-size: 100%;
|
||||
background-color: var(--ct-global--palette--black-250);
|
||||
text-align: center;
|
||||
padding-top: 120px;
|
||||
padding-block-start: 120px;
|
||||
}
|
||||
|
||||
/* System information */
|
||||
|
|
@ -100,7 +101,7 @@ html.index-page body {
|
|||
.display-language-modal {
|
||||
/* Do not let the language menu expand to the end of the page */
|
||||
.pf-c-menu__content {
|
||||
max-height: 20rem;
|
||||
max-block-size: 20rem;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -108,7 +109,7 @@ html.index-page body {
|
|||
iframe.container-frame {
|
||||
display: none;
|
||||
border: none;
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
// Page layout
|
||||
|
|
@ -119,8 +120,8 @@ $desktop: $phone + 1px;
|
|||
.page {
|
||||
--nav-width: 15rem;
|
||||
display: grid;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
inline-size: 100%;
|
||||
block-size: 100%;
|
||||
|
||||
// Set masthead and toolbar to transparent, so the background shows through
|
||||
// (including the accent line)
|
||||
|
|
@ -178,7 +179,7 @@ $desktop: $phone + 1px;
|
|||
grid-template-columns: minmax(min-content, var(--nav-width)) 1fr;
|
||||
|
||||
> .navbar {
|
||||
max-width: var(--nav-width);
|
||||
max-inline-size: var(--nav-width);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
|
|
@ -231,12 +232,12 @@ $desktop: $phone + 1px;
|
|||
|
||||
/* Alert fixups */
|
||||
.modal-content .pf-c-alert {
|
||||
text-align: left;
|
||||
margin-bottom: 24px;
|
||||
text-align: start;
|
||||
margin-block-end: 24px;
|
||||
}
|
||||
|
||||
.early-failure {
|
||||
height: 100%;
|
||||
block-size: 100%;
|
||||
}
|
||||
|
||||
// Header menu buttons don't need a background color (especially in dark mode)
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
@import "global-variables";
|
||||
|
||||
.table-row-action {
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
|
||||
html {
|
||||
font-family: sans-serif;
|
||||
height: 100%;
|
||||
block-size: 100%;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
|
|
@ -47,7 +47,8 @@ h1, h2, h3, h4 {
|
|||
h1 {
|
||||
font-size: 1.75rem;
|
||||
line-height: 1.3;
|
||||
padding: 0 0 1rem;
|
||||
padding-block: 0 1rem;
|
||||
padding-inline: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
|
|
@ -128,26 +129,26 @@ input::-moz-focus-inner {
|
|||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 1rem;
|
||||
margin-block: 0 1rem;
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
/* Bump options & connection away from user/pass */
|
||||
#option-group,
|
||||
#option-group[hidden] + #server-group {
|
||||
margin-top: 1rem;
|
||||
margin-block-start: 1rem;
|
||||
}
|
||||
|
||||
#option-group {
|
||||
margin-bottom: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
}
|
||||
|
||||
.form-group:not(:first-child) {
|
||||
margin-top: 1rem;
|
||||
margin-block-start: 1rem;
|
||||
}
|
||||
|
||||
.login-actions {
|
||||
|
|
@ -169,8 +170,9 @@ label {
|
|||
form .control-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 2rem;
|
||||
padding: 0 0 0.5rem;
|
||||
min-block-size: 2rem;
|
||||
padding-block: 0 0.5rem;
|
||||
padding-inline: 0;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
|
|
@ -181,12 +183,13 @@ form .control-label {
|
|||
.form-control[type="password"],
|
||||
.form-control[type="text"] {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.25rem 0.5rem;
|
||||
inline-size: 100%;
|
||||
padding-block: 0.25rem;
|
||||
padding-inline: 0.5rem;
|
||||
background-color: #fff;
|
||||
background-image: none;
|
||||
border: 1px solid #ededed;
|
||||
border-bottom-color: #72767b;
|
||||
border-block-end-color: #72767b;
|
||||
border-radius: 1px;
|
||||
transition: border-color 0.15s ease-in-out;
|
||||
color: #151515;
|
||||
|
|
@ -197,14 +200,14 @@ form .control-label {
|
|||
.form-control[type="text"]:hover,
|
||||
.form-control[type="password"]:focus,
|
||||
.form-control[type="text"]:focus {
|
||||
border-bottom-color: #06c;
|
||||
border-block-end-color: #06c;
|
||||
}
|
||||
|
||||
.pf-c-button.pf-m-control:focus,
|
||||
.form-control[type="password"]:focus,
|
||||
.form-control[type="text"]:focus {
|
||||
padding-bottom: calc(0.25rem - 1px);
|
||||
border-bottom-width: 2px;
|
||||
padding-block-end: calc(0.25rem - 1px);
|
||||
border-block-end-width: 2px;
|
||||
}
|
||||
|
||||
.pf-c-button.pf-m-control:focus,
|
||||
|
|
@ -219,17 +222,18 @@ form .control-label {
|
|||
}
|
||||
|
||||
.checkbox-row {
|
||||
margin: 1rem 0 0;
|
||||
margin-block: 1rem 0;
|
||||
margin-inline: 0;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.checkbox-row > input[type="checkbox"] {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
inline-size: 1rem;
|
||||
block-size: 1rem;
|
||||
align-self: flex-start;
|
||||
margin-top: calc((1.5rem - 1rem) / 2);
|
||||
margin-right: 0.5rem;
|
||||
margin-block-start: calc((1.5rem - 1rem) / 2);
|
||||
margin-inline-end: 0.5rem;
|
||||
}
|
||||
|
||||
label.checkbox {
|
||||
|
|
@ -238,8 +242,7 @@ label.checkbox {
|
|||
|
||||
.help-block {
|
||||
display: block;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 1rem;
|
||||
margin-block: 5px 1rem;
|
||||
color: #737373;
|
||||
}
|
||||
|
||||
|
|
@ -254,7 +257,7 @@ label.checkbox {
|
|||
|
||||
.form-group::after {
|
||||
clear: both;
|
||||
margin-bottom: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
}
|
||||
|
||||
.pf-c-button {
|
||||
|
|
@ -262,7 +265,8 @@ label.checkbox {
|
|||
background-image: none;
|
||||
border: 1px solid transparent;
|
||||
white-space: nowrap;
|
||||
padding: 0.375rem 1rem;
|
||||
padding-block: 0.375rem;
|
||||
padding-inline: 1rem;
|
||||
border-radius: 3px;
|
||||
font-size: inherit;
|
||||
font-weight: 400;
|
||||
|
|
@ -336,13 +340,14 @@ label.checkbox {
|
|||
}
|
||||
|
||||
.login-pf {
|
||||
height: 100%;
|
||||
block-size: 100%;
|
||||
}
|
||||
|
||||
.login-pf #brand img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
margin-block: 0;
|
||||
margin-inline: auto;
|
||||
max-inline-size: 100%;
|
||||
}
|
||||
|
||||
.unsupported-browser #brand {
|
||||
|
|
@ -350,14 +355,15 @@ label.checkbox {
|
|||
}
|
||||
|
||||
.login-pf #banner {
|
||||
margin: 1rem 0 0.5rem;
|
||||
margin-block: 1rem 0.5rem;
|
||||
margin-inline: 0;
|
||||
grid-area: banner;
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
#banner-message {
|
||||
white-space: pre-wrap;
|
||||
max-height: 12em;
|
||||
max-block-size: 12em;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
|
|
@ -365,8 +371,9 @@ label.checkbox {
|
|||
background-color: rgb(255 255 255 / 50%);
|
||||
background: white;
|
||||
color: #333;
|
||||
padding: 3rem 3rem 2rem;
|
||||
width: 100%;
|
||||
padding-block: 3rem 2rem;
|
||||
padding-inline: 3rem;
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
#main {
|
||||
|
|
@ -374,9 +381,9 @@ label.checkbox {
|
|||
}
|
||||
|
||||
.login-pf .container .details p:first-child {
|
||||
border-top: 1px solid #474747;
|
||||
padding-top: 1.5rem;
|
||||
margin-top: 1.5rem;
|
||||
border-block-start: 1px solid #474747;
|
||||
padding-block-start: 1.5rem;
|
||||
margin-block-start: 1.5rem;
|
||||
}
|
||||
|
||||
.login-pf .details p {
|
||||
|
|
@ -384,7 +391,7 @@ label.checkbox {
|
|||
}
|
||||
|
||||
.login-pf .details p + p {
|
||||
margin-top: 0.5rem;
|
||||
margin-block-start: 0.5rem;
|
||||
}
|
||||
|
||||
.login-pf .container .control-label {
|
||||
|
|
@ -397,18 +404,18 @@ label.checkbox {
|
|||
|
||||
.login-pf .container .form-group:last-child,
|
||||
.login-pf .container .form-group:last-child .help-block:last-child {
|
||||
margin-bottom: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
animation: 0.6s linear infinite rotation;
|
||||
border-bottom: 4px solid rgb(0 0 0 / 25%);
|
||||
border-left: 4px solid rgb(0 0 0 / 25%);
|
||||
border-right: 4px solid rgb(0 0 0 / 25%);
|
||||
border-block-end: 4px solid rgb(0 0 0 / 25%);
|
||||
border-inline-start: 4px solid rgb(0 0 0 / 25%);
|
||||
border-inline-end: 4px solid rgb(0 0 0 / 25%);
|
||||
border-radius: 100%;
|
||||
border-top: 4px solid rgb(0 0 0 / 75%);
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
border-block-start: 4px solid rgb(0 0 0 / 75%);
|
||||
block-size: 1.5rem;
|
||||
inline-size: 1.5rem;
|
||||
}
|
||||
|
||||
/* Alerts */
|
||||
|
|
@ -421,7 +428,8 @@ label.checkbox {
|
|||
"icon title action"
|
||||
". content content";
|
||||
background-color: #fff;
|
||||
margin: 0 0 1.5rem;
|
||||
margin-block: 0 1.5rem;
|
||||
margin-inline: 0;
|
||||
display: grid;
|
||||
border: 3px solid #009596;
|
||||
border-width: 2px 0 0;
|
||||
|
|
@ -434,17 +442,18 @@ label.checkbox {
|
|||
|
||||
.pf-c-alert > svg {
|
||||
grid-area: icon;
|
||||
height: 1.125rem;
|
||||
width: 1.125rem;
|
||||
margin: 1.25rem 1rem 1rem;
|
||||
float: left;
|
||||
block-size: 1.125rem;
|
||||
inline-size: 1.125rem;
|
||||
margin-block: 1.25rem 1rem;
|
||||
margin-inline: 1rem;
|
||||
float: inline-start;
|
||||
color: #009596;
|
||||
}
|
||||
|
||||
@supports (display: grid) {
|
||||
.pf-c-alert > svg {
|
||||
float: none;
|
||||
margin-right: 0;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -495,7 +504,7 @@ label.checkbox {
|
|||
|
||||
#server-group::before {
|
||||
clear: both;
|
||||
margin-top: 5px;
|
||||
margin-block-start: 5px;
|
||||
}
|
||||
|
||||
.login-fatal {
|
||||
|
|
@ -504,8 +513,9 @@ label.checkbox {
|
|||
|
||||
.unsupported-browser ul {
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
text-align: left;
|
||||
margin-block: 0;
|
||||
margin-inline: auto;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.unsupported-browser a {
|
||||
|
|
@ -538,7 +548,7 @@ label.checkbox {
|
|||
#hostkey-fingerprint {
|
||||
font-size: large;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
#hostkey-type {
|
||||
|
|
@ -547,7 +557,8 @@ label.checkbox {
|
|||
|
||||
#hostkey-verify-help-cmds {
|
||||
border-radius: 0.25rem;
|
||||
padding: 0.5rem 1rem;
|
||||
padding-block: 0.5rem;
|
||||
padding-inline: 1rem;
|
||||
background: rgb(150 150 150 / 20%);
|
||||
}
|
||||
|
||||
|
|
@ -571,8 +582,9 @@ label.checkbox {
|
|||
|
||||
.caret {
|
||||
vertical-align: middle;
|
||||
margin: calc((1.5rem - 16px) / 2) 0;
|
||||
margin-right: 0.25rem;
|
||||
margin-block: calc((1.5rem - 16px) / 2);
|
||||
margin-inline: 0;
|
||||
margin-inline-end: 0.25rem;
|
||||
transition: all 300ms;
|
||||
}
|
||||
|
||||
|
|
@ -583,16 +595,16 @@ label.checkbox {
|
|||
|
||||
.input-clear {
|
||||
display: flex;
|
||||
padding: 0.5rem 0.75rem;
|
||||
padding-block: 0.5rem;
|
||||
padding-inline: 0.75rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
inset-block: 0;
|
||||
inset-inline-end: 0;
|
||||
}
|
||||
|
||||
.input-clear > svg {
|
||||
height: 1rem;
|
||||
width: auto;
|
||||
block-size: 1rem;
|
||||
inline-size: auto;
|
||||
}
|
||||
|
||||
/* Only show clear icon when the field has text */
|
||||
|
|
@ -602,7 +614,7 @@ label.checkbox {
|
|||
|
||||
/* Reserve a little space for the clear icon in the input */
|
||||
.server-box > .form-control {
|
||||
padding-right: 2rem;
|
||||
padding-inline-end: 2rem;
|
||||
}
|
||||
|
||||
#option-group:hover svg,
|
||||
|
|
@ -611,16 +623,15 @@ label.checkbox {
|
|||
}
|
||||
|
||||
#option-group div {
|
||||
margin-left: -3px;
|
||||
margin-top: 3px;
|
||||
margin-bottom: 1rem;
|
||||
margin-inline-start: -3px;
|
||||
margin-block: 3px 1rem;
|
||||
}
|
||||
|
||||
.login-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 2.5rem;
|
||||
block-size: 2.5rem;
|
||||
flex-basis: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -651,12 +662,12 @@ label.checkbox {
|
|||
}
|
||||
|
||||
.login-pf .container {
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.login-pf #badge {
|
||||
max-width: calc(100vw - 2rem);
|
||||
max-inline-size: calc(100vw - 2rem);
|
||||
}
|
||||
|
||||
/* Brand container */
|
||||
|
|
@ -673,28 +684,29 @@ label.checkbox {
|
|||
/* Large phones and desktops */
|
||||
@media (min-width: 481px) {
|
||||
.unsupported-browser-heading {
|
||||
margin: 2rem 0 1rem;
|
||||
margin-block: 2rem 1rem;
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
.login-pf #brand {
|
||||
padding: 0;
|
||||
margin-bottom: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Desktop only */
|
||||
@media (min-width: 1024px) {
|
||||
.control-label {
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.login-pf #brand img {
|
||||
margin: 0;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.login-pf .container .login-area {
|
||||
border-right: 1px solid #474747;
|
||||
border-inline-end: 1px solid #474747;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -716,30 +728,32 @@ body.login-pf {
|
|||
}
|
||||
|
||||
.login-pf .container .details p:first-child {
|
||||
border-top: 0;
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
border-block-start: 0;
|
||||
padding-block-start: 0;
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
.login-button {
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
.login-pf .details {
|
||||
grid-area: details;
|
||||
padding: 1.5rem 3rem;
|
||||
width: 100%;
|
||||
padding-block: 1.5rem;
|
||||
padding-inline: 3rem;
|
||||
inline-size: 100%;
|
||||
background: #ededed;
|
||||
}
|
||||
|
||||
#recent-hosts {
|
||||
grid-area: recent;
|
||||
margin-top: 1rem;
|
||||
padding: 3rem 1.5rem 1.5rem;
|
||||
margin-block-start: 1rem;
|
||||
padding-block: 3rem 1.5rem;
|
||||
padding-inline: 1.5rem;
|
||||
}
|
||||
|
||||
#recent-hosts > h1 {
|
||||
padding-left: 1.5rem;
|
||||
padding-inline-start: 1.5rem;
|
||||
}
|
||||
|
||||
.login-pf #badge {
|
||||
|
|
@ -748,12 +762,13 @@ body.login-pf {
|
|||
|
||||
.login-pf .container .login-area {
|
||||
border: none;
|
||||
width: auto;
|
||||
inline-size: auto;
|
||||
}
|
||||
|
||||
details > summary {
|
||||
display: block;
|
||||
padding: 0.5rem 0;
|
||||
padding-block: 0.5rem;
|
||||
padding-inline: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
@ -775,7 +790,7 @@ details[open] > summary > .caret {
|
|||
}
|
||||
|
||||
.login-pf #brand.text-brand {
|
||||
width: auto;
|
||||
inline-size: auto;
|
||||
background: none;
|
||||
}
|
||||
|
||||
|
|
@ -796,16 +811,17 @@ a:hover {
|
|||
}
|
||||
|
||||
.host-line + .host-line {
|
||||
border-top-width: 0;
|
||||
border-block-start-width: 0;
|
||||
}
|
||||
|
||||
.host-name {
|
||||
flex: auto;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
color: #06c;
|
||||
border: none;
|
||||
/* As we're making the list flush to the card, we should indent the contents to align */
|
||||
padding: 0.5rem 1rem 0.5rem 1.5rem;
|
||||
padding-block: 0.5rem;
|
||||
padding-inline: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.host-name:hover {
|
||||
|
|
@ -815,8 +831,9 @@ a:hover {
|
|||
|
||||
.host-remove {
|
||||
background: transparent;
|
||||
margin-right: 1.5rem;
|
||||
padding: 0.375rem 1rem;
|
||||
margin-inline-end: 1.5rem;
|
||||
padding-block: 0.375rem;
|
||||
padding-inline: 1rem;
|
||||
/* Allow ::before to size relative to .host-remove */
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -827,10 +844,7 @@ a:hover {
|
|||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset: 0;
|
||||
background-color: #151515;
|
||||
border: none;
|
||||
mask: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' viewBox='0 0 352 512'%3E%3Cpath d='m242.7 256 100-100a31.5 31.5 0 0 0 0-44.5l-22.2-22.3a31.5 31.5 0 0 0-44.4 0L176 189.2 76 89.3a31.5 31.5 0 0 0-44.5 0L9.2 111.5a31.5 31.5 0 0 0 0 44.4l100 100.1-100 100a31.5 31.5 0 0 0 0 44.5l22.3 22.3a31.5 31.5 0 0 0 44.4 0l100.1-100 100 100a31.5 31.5 0 0 0 44.5 0l22.3-22.2a31.5 31.5 0 0 0 0-44.5L242.8 256z'/%3E%3C/svg%3E");
|
||||
|
|
@ -873,25 +887,28 @@ a:hover {
|
|||
|
||||
.unsupported-browser ul {
|
||||
color: #555;
|
||||
margin: 0 0 1rem;
|
||||
margin-block: 0 1rem;
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
.browser-recommendations {
|
||||
margin: 1rem 0 0;
|
||||
margin-block: 1rem 0;
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
.browser-recommendations h3 {
|
||||
font: inherit;
|
||||
margin-top: 0;
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
.dialog-error {
|
||||
margin: 0 0 1rem;
|
||||
margin-block: 0 1rem;
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
#login-again {
|
||||
display: block;
|
||||
margin-top: 1rem;
|
||||
margin-block-start: 1rem;
|
||||
}
|
||||
|
||||
.password-with-toggle {
|
||||
|
|
@ -902,12 +919,12 @@ a:hover {
|
|||
.pf-c-button.login-password-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-left-width: 0;
|
||||
border-inline-start-width: 0;
|
||||
}
|
||||
|
||||
.login-password-toggle > svg {
|
||||
height: 1rem;
|
||||
width: auto;
|
||||
block-size: 1rem;
|
||||
inline-size: auto;
|
||||
}
|
||||
|
||||
/* Show the appropriate eye icon based on the password text status */
|
||||
|
|
@ -917,7 +934,7 @@ input[type="password"] + .login-password-toggle .password-hide {
|
|||
}
|
||||
|
||||
.pf-c-helper-text {
|
||||
margin-top: 1rem;
|
||||
margin-block-start: 1rem;
|
||||
}
|
||||
|
||||
.pf-c-helper-text.pf-m-warning {
|
||||
|
|
@ -946,7 +963,7 @@ input[type="password"] + .login-password-toggle .password-hide {
|
|||
.form-control[type="text"] {
|
||||
background: #393f44;
|
||||
border-color: #393f44;
|
||||
border-bottom-color: #6c6f72;
|
||||
border-block-end-color: #6c6f72;
|
||||
color: #f0f0f0;
|
||||
}
|
||||
|
||||
|
|
@ -1006,10 +1023,7 @@ input[type="password"] + .login-password-toggle .password-hide {
|
|||
display: block;
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -41,18 +41,18 @@
|
|||
}
|
||||
|
||||
#storage .create-storage {
|
||||
margin-bottom: 10px;
|
||||
margin-block-end: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 1560px) {
|
||||
#storage .create-storage .col-lg-6 {
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
#storage .create-storage button {
|
||||
margin-bottom: 5px;
|
||||
width: 100%;
|
||||
margin-block-end: 5px;
|
||||
inline-size: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
|
@ -76,113 +76,109 @@
|
|||
}
|
||||
|
||||
.dialog-select-row-table {
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
.dialog-select-row-table td,
|
||||
.dialog-select-row-table td:first-child {
|
||||
text-align: left;
|
||||
padding-top: 0.75em;
|
||||
padding-bottom: 0.75em;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
text-align: start;
|
||||
padding-block: 0.75em;
|
||||
padding-inline: 0;
|
||||
vertical-align: top;
|
||||
white-space: default;
|
||||
color: black;
|
||||
width: auto;
|
||||
height: auto;
|
||||
border-top: 1px solid #d1d1d1;
|
||||
border-bottom: 1px solid #d1d1d1;
|
||||
inline-size: auto;
|
||||
block-size: auto;
|
||||
border-block-start: 1px solid #d1d1d1;
|
||||
border-block-end: 1px solid #d1d1d1;
|
||||
}
|
||||
|
||||
.dialog-select-row-table td:first-child {
|
||||
padding-left: 0.75em;
|
||||
border-left: 1px solid #d1d1d1;
|
||||
padding-inline-start: 0.75em;
|
||||
border-inline-start: 1px solid #d1d1d1;
|
||||
}
|
||||
|
||||
.dialog-select-row-table td:last-child {
|
||||
padding-right: 0.75em;
|
||||
border-right: 1px solid #d1d1d1;
|
||||
padding-inline-end: 0.75em;
|
||||
border-inline-end: 1px solid #d1d1d1;
|
||||
}
|
||||
|
||||
.dialog-select-row-table th {
|
||||
font-weight: bold;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
color: var(--pf-global--palette--black-800);
|
||||
padding: 0;
|
||||
padding-top: 0.75em;
|
||||
padding-bottom: 0.75em;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
padding-block: 0.75em;
|
||||
padding-inline: 0;
|
||||
}
|
||||
|
||||
.dialog-select-row-table th:first-child {
|
||||
padding-left: 0.75em;
|
||||
padding-inline-start: 0.75em;
|
||||
}
|
||||
|
||||
.dialog-select-row-table th:last-child {
|
||||
padding-right: 0.75em;
|
||||
padding-inline-end: 0.75em;
|
||||
}
|
||||
|
||||
td.storage-icon {
|
||||
width: 48px;
|
||||
inline-size: 48px;
|
||||
}
|
||||
|
||||
div.progress {
|
||||
width: 100%;
|
||||
height: var(--pf-global--FontSize-xs);
|
||||
inline-size: 100%;
|
||||
block-size: var(--pf-global--FontSize-xs);
|
||||
}
|
||||
|
||||
#detail-header div.progress {
|
||||
min-width: 250px;
|
||||
min-inline-size: 250px;
|
||||
}
|
||||
|
||||
#storage-detail .ct-table {
|
||||
border-top: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
|
||||
border-block-start: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
|
||||
}
|
||||
|
||||
td.usage-text {
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
td.job-description {
|
||||
width: 50%;
|
||||
inline-size: 50%;
|
||||
}
|
||||
|
||||
td.job-status {
|
||||
width: 15%;
|
||||
text-align: right;
|
||||
inline-size: 15%;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
td.job-action {
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.detail-jobs {
|
||||
margin-top: 20px;
|
||||
margin-block-start: 20px;
|
||||
}
|
||||
|
||||
.storage-graph {
|
||||
height: 180px;
|
||||
block-size: 180px;
|
||||
}
|
||||
|
||||
.content-nav-item-warning:first-child {
|
||||
padding-right: var(--pf-global--spacer--sm);
|
||||
padding-inline-end: var(--pf-global--spacer--sm);
|
||||
}
|
||||
|
||||
.content-action {
|
||||
text-align: right;
|
||||
text-align: end;
|
||||
white-space: nowrap !important;
|
||||
}
|
||||
|
||||
.dialog-item-tooltip {
|
||||
margin-left: 5px;
|
||||
margin-inline-start: 5px;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.modal-footer-teardown {
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
}
|
||||
|
||||
.pf-c-modal-box__body table {
|
||||
|
|
@ -190,7 +186,7 @@ td.job-action {
|
|||
}
|
||||
|
||||
* + .modal-footer-teardown {
|
||||
padding-top: var(--pf-global--spacer--xl);
|
||||
padding-block-start: var(--pf-global--spacer--xl);
|
||||
}
|
||||
|
||||
tr[class*="content-level-"] {
|
||||
|
|
@ -200,12 +196,12 @@ tr[class*="content-level-"] {
|
|||
// Move the button over
|
||||
> .pf-c-table__toggle > button {
|
||||
position: relative;
|
||||
left: var(--offset);
|
||||
inset-inline-start: var(--offset);
|
||||
}
|
||||
|
||||
// Add space for the button and offset
|
||||
> .pf-c-table__toggle + td {
|
||||
padding-left: calc(var(--offset) + var(--pf-c-table--cell--PaddingLeft));
|
||||
padding-inline-start: calc(var(--offset) + var(--pf-c-table--cell--PaddingLeft));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -216,12 +212,12 @@ tr[class*="content-level-"] {
|
|||
}
|
||||
|
||||
.tab-actions {
|
||||
float: right;
|
||||
margin-top: -15px;
|
||||
float: inline-end;
|
||||
margin-block-start: -15px;
|
||||
}
|
||||
|
||||
.tab-actions button {
|
||||
margin-left: 0.3em;
|
||||
margin-inline-start: 0.3em;
|
||||
}
|
||||
|
||||
a.disabled {
|
||||
|
|
@ -232,7 +228,7 @@ a.disabled {
|
|||
|
||||
.tab-row-actions {
|
||||
display: inline-block;
|
||||
margin-left: 2em;
|
||||
margin-inline-start: 2em;
|
||||
}
|
||||
|
||||
/* Make tooltips inside tables visible.
|
||||
|
|
@ -244,11 +240,11 @@ td.storage-action {
|
|||
|
||||
.network-keys-table td {
|
||||
vertical-align: baseline;
|
||||
padding-right: 10px;
|
||||
padding-inline-end: 10px;
|
||||
}
|
||||
|
||||
.combobox-container .input-group {
|
||||
width: 100%;
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
/* Prevent long names from sticking out of dialog titles
|
||||
|
|
@ -259,7 +255,7 @@ td.storage-action {
|
|||
}
|
||||
|
||||
.just-installed {
|
||||
margin-right: 1em;
|
||||
margin-inline-end: 1em;
|
||||
}
|
||||
|
||||
.faded {
|
||||
|
|
@ -270,25 +266,26 @@ td.storage-action {
|
|||
|
||||
.widest-title {
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
block-size: 0;
|
||||
}
|
||||
|
||||
.radio-horizontal input[type="radio"] {
|
||||
margin-top: 5px;
|
||||
margin-block-start: 5px;
|
||||
}
|
||||
|
||||
.radio-horizontal label {
|
||||
margin-right: 1em;
|
||||
margin-inline-end: 1em;
|
||||
}
|
||||
|
||||
.key-slot-panel-remaining {
|
||||
margin-right: 1em;
|
||||
margin-inline-end: 1em;
|
||||
}
|
||||
|
||||
.sigkey-heading {
|
||||
color: var(--pf-global--Color--dark-100);
|
||||
font-size: var(--pf-global--FontSize--sm);
|
||||
margin: var(--pf-global--spacer--md) 0 0;
|
||||
margin-block: var(--pf-global--spacer--md) 0;
|
||||
margin-inline: 0;
|
||||
}
|
||||
|
||||
.sigkey-hash {
|
||||
|
|
@ -297,20 +294,20 @@ td.storage-action {
|
|||
}
|
||||
|
||||
.pf-c-modal-box h3 {
|
||||
margin-top: 0;
|
||||
margin-block-start: 0;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.progressive-disclosure .form-group {
|
||||
padding-left: 20px;
|
||||
padding-inline-start: 20px;
|
||||
}
|
||||
|
||||
.progressive-disclosure .form-group > :first-child {
|
||||
margin-left: -20px;
|
||||
margin-inline-start: -20px;
|
||||
}
|
||||
|
||||
.progressive-disclosure .form-group > :not(:first-child) {
|
||||
margin-top: 0.5em;
|
||||
margin-block-start: 0.5em;
|
||||
animation: showRemovalDisclosure ease-in-out 200ms;
|
||||
}
|
||||
|
||||
|
|
@ -336,24 +333,25 @@ td.storage-action {
|
|||
}
|
||||
|
||||
.pf-c-modal-box .key-source .radio-horizontal {
|
||||
margin-bottom: 2ex;
|
||||
margin-block-end: 2ex;
|
||||
}
|
||||
|
||||
// This is needs to avoid showing scrollbar in dialog
|
||||
.size-slider {
|
||||
padding-bottom: var(--pf-global--spacer--xs);
|
||||
padding-block-end: var(--pf-global--spacer--xs);
|
||||
}
|
||||
|
||||
/* Overview side panels */
|
||||
|
||||
.sidepanel-row {
|
||||
padding: var(--pf-global--spacer--sm) var(--pf-global--spacer--lg);
|
||||
border-top: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
|
||||
padding-block: var(--pf-global--spacer--sm);
|
||||
padding-inline: var(--pf-global--spacer--lg);
|
||||
border-block-start: var(--pf-global--BorderWidth--sm) solid var(--pf-global--BorderColor--100);
|
||||
}
|
||||
|
||||
.sidepanel-row.pf-c-empty-state {
|
||||
.pf-c-empty-state__body {
|
||||
margin-top: 0;
|
||||
margin-block-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -368,7 +366,7 @@ td.storage-action {
|
|||
|
||||
.sidepanel-row-info {
|
||||
font-size: var(--pf-global--FontSize--xs);
|
||||
max-width: 50ch;
|
||||
max-inline-size: 50ch;
|
||||
}
|
||||
|
||||
.panel-heading {
|
||||
|
|
@ -376,7 +374,8 @@ td.storage-action {
|
|||
}
|
||||
|
||||
.storage_alert_action_buttons button {
|
||||
margin: 0.5rem 0.2rem 0.2rem 0;
|
||||
margin-block: 0.5rem 0.2rem;
|
||||
margin-inline: 0 0.2rem;
|
||||
}
|
||||
|
||||
// We wrap the data list row with a label to make checkboxes clickable from the whole row
|
||||
|
|
@ -397,11 +396,11 @@ td.storage-action {
|
|||
}
|
||||
|
||||
.pf-c-description-list .pf-c-progress {
|
||||
max-width: 30ch;
|
||||
max-inline-size: 30ch;
|
||||
}
|
||||
|
||||
#mounts .pf-c-progress__measure, #nfs-mounts .pf-c-progress__measure, #detail-content .pf-c-progress__measure {
|
||||
min-width: 7rem;
|
||||
min-inline-size: 7rem;
|
||||
}
|
||||
|
||||
// Hatched effect for progressbars that are parts of a group, but not the main
|
||||
|
|
|
|||
|
|
@ -26,5 +26,5 @@
|
|||
}
|
||||
|
||||
.cpu-mitigations-dialog-info {
|
||||
margin-bottom: var(--pf-global--spacer--md);
|
||||
margin-block-end: var(--pf-global--spacer--md);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,12 +18,12 @@
|
|||
|
||||
.pf-c-page__main {
|
||||
// Constrain page to viewport height, so journal can overflow
|
||||
max-height: 100vh;
|
||||
max-block-size: 100vh;
|
||||
}
|
||||
|
||||
// Static width for the service selector as it likes to resize a lot while loading
|
||||
#journal-identifier-menu ul.pf-c-select__menu {
|
||||
width: 10rem;
|
||||
inline-size: 10rem;
|
||||
}
|
||||
|
||||
// Long names without spaces do not wrap; triggers overflow and overlaps with check icon
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
}
|
||||
|
||||
.pf-l-split {
|
||||
padding-bottom: var(--pf-global--gutter);
|
||||
padding-block-end: var(--pf-global--gutter);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
|
||||
// For abrt log details: add some gutter between the tabs and their content
|
||||
.pf-c-tab-content > .pf-c-description-list {
|
||||
padding-top: var(--pf-global--spacer--md);
|
||||
padding-block-start: var(--pf-global--spacer--md);
|
||||
}
|
||||
|
||||
.table-hide-labels {
|
||||
|
|
@ -93,14 +93,15 @@
|
|||
|
||||
.panel-heading {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
inset-block-start: 0;
|
||||
color: var(--pf-global--Color--300);
|
||||
background-color: var(--pf-global--BackgroundColor--100);
|
||||
border: none;
|
||||
font-size: var(--pf-global--FontSize--md);
|
||||
font-family: var(--pf-global--FontFamily--heading--sans-serif);
|
||||
font-weight: var(--pf-global--FontWeight--bold);
|
||||
padding: var(--pf-global--spacer--lg) var(--pf-global--spacer--lg) var(--pf-global--spacer--sm);
|
||||
padding-block: var(--pf-global--spacer--lg) var(--pf-global--spacer--sm);
|
||||
padding-inline: var(--pf-global--spacer--lg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -116,7 +117,7 @@
|
|||
}
|
||||
|
||||
#accordion-markup {
|
||||
margin-bottom: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
.pf-c-toolbar {
|
||||
|
|
@ -127,8 +128,7 @@
|
|||
--pf-c-toolbar--PaddingBottom: 0;
|
||||
|
||||
.pf-c-toolbar__group {
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
padding-block: 0.5rem;
|
||||
}
|
||||
|
||||
.pf-c-toolbar__group:nth-child(3) {
|
||||
|
|
@ -141,7 +141,7 @@
|
|||
}
|
||||
|
||||
.text-help {
|
||||
padding-left: var(--pf-global--spacer--xs);
|
||||
padding-inline-start: var(--pf-global--spacer--xs);
|
||||
}
|
||||
|
||||
// Hide filters from advanced search dropdown entries which already exist in the toolbar
|
||||
|
|
|
|||
|
|
@ -34,16 +34,15 @@
|
|||
}
|
||||
|
||||
// Set the right padding so that the button aligns with the other alerts in the page on the side
|
||||
padding-right: var(--pf-c-page__main-section--PaddingRight);
|
||||
padding-inline-end: var(--pf-c-page__main-section--PaddingRight);
|
||||
|
||||
> .pf-c-alert__action {
|
||||
margin-right: 0;
|
||||
margin-left: var(--pf-global--spacer--md);
|
||||
margin-inline: var(--pf-global--spacer--md) 0;
|
||||
}
|
||||
|
||||
// Align left content with the rest of the page
|
||||
@media (min-width: $pf-global--breakpoint--xl) {
|
||||
padding-left: var(--pf-global--spacer--lg);
|
||||
padding-inline-start: var(--pf-global--spacer--lg);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -76,7 +75,7 @@
|
|||
|
||||
&-hostname > h1,
|
||||
&-subheading {
|
||||
padding-right: 1rem;
|
||||
padding-inline-end: 1rem;
|
||||
}
|
||||
|
||||
&-actions {
|
||||
|
|
@ -137,13 +136,13 @@
|
|||
&__body {
|
||||
&:last-child .pf-c-table:last-child tr:last-child {
|
||||
/* Remove the border of tables when it's the last item in a card and there isn't a card footer */
|
||||
border-bottom: none;
|
||||
border-block-end: none;
|
||||
}
|
||||
|
||||
p {
|
||||
+ p,
|
||||
+ button {
|
||||
margin-top: calc(var(--pf-global--LineHeight--md) * 1rem);
|
||||
margin-block-start: calc(var(--pf-global--LineHeight--md) * 1rem);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -173,21 +172,21 @@
|
|||
th, td {
|
||||
&:first-child {
|
||||
:not([dir="rtl"]) & {
|
||||
padding-left: 0;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
padding-right: 0;
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
:not([dir="rtl"]) & {
|
||||
padding-right: 0;
|
||||
padding-inline-end: 0;
|
||||
}
|
||||
|
||||
[dir="rtl"] & {
|
||||
padding-left: 0;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -235,7 +234,7 @@
|
|||
|
||||
.ct-inline-list .pf-c-list.pf-m-inline {
|
||||
display: inline-flex;
|
||||
margin-left: 1rem;
|
||||
margin-inline-start: 1rem;
|
||||
}
|
||||
|
||||
/* Add a subtle dropshadow to the alerts, to separate them from the background, similar to the cards on the page */
|
||||
|
|
@ -255,11 +254,11 @@
|
|||
|
||||
#motd-box > .pf-c-alert {
|
||||
/* Spacing between the MOTD is handled by the .pf-l-gallery grid */
|
||||
margin-bottom: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
.pf-c-alert .pf-c-alert__description a {
|
||||
padding-left: 15px;
|
||||
padding-inline-start: 15px;
|
||||
}
|
||||
|
||||
// Stretch modal content to fill body
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
.comma-list {
|
||||
display: inline;
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
|
||||
.comma-list li {
|
||||
|
|
@ -18,12 +18,12 @@
|
|||
|
||||
.comma-list li:not(:last-child)::after {
|
||||
content: ",";
|
||||
margin-right: 0.5em;
|
||||
margin-inline-end: 0.5em;
|
||||
}
|
||||
|
||||
/* Rely on flex for spacing only */
|
||||
#service-actions button {
|
||||
padding-left: 0;
|
||||
padding-inline-start: 0;
|
||||
}
|
||||
|
||||
.service-thumbtack-icon {
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
}
|
||||
|
||||
.action-button {
|
||||
margin-left: 2rem;
|
||||
margin-inline-start: 2rem;
|
||||
}
|
||||
|
||||
.status-icon::before {
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
}
|
||||
|
||||
.status-icon {
|
||||
margin-right: 0.5rem;
|
||||
margin-inline-end: 0.5rem;
|
||||
color: var(--pf-global--icon--Color--light);
|
||||
}
|
||||
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
|
||||
.side-note {
|
||||
color: var(--pf-global--Color--300);
|
||||
padding-left: 1em;
|
||||
padding-inline-start: 1em;
|
||||
}
|
||||
|
||||
.pf-theme-dark .side-note {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
// However, the toolbar also lacks a border and is sticky, so add a bottom
|
||||
// border to the toolbar to separate the toolbar and list.
|
||||
.services-toolbar {
|
||||
border-bottom: 1px solid var(--pf-global--BorderColor--100);
|
||||
border-block-end: 1px solid var(--pf-global--BorderColor--100);
|
||||
}
|
||||
|
||||
// Magic pixie dust to make the list a bit faster and more furious
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
.service-unit-file-state {
|
||||
display: inline-block;
|
||||
font-size: var(--pf-global--FontSize--sm);
|
||||
min-width: 5rem;
|
||||
min-inline-size: 5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
@ -44,28 +44,28 @@
|
|||
|
||||
// Add some spacing between the tab label and the icon
|
||||
.pf-c-nav__link > .ct-exclamation-circle {
|
||||
margin-left: 0.5rem;
|
||||
margin-inline-start: 0.5rem;
|
||||
}
|
||||
|
||||
.services-header.pf-c-page__main-nav {
|
||||
padding-bottom: 1rem;
|
||||
padding-right: 0;
|
||||
padding-block-end: 1rem;
|
||||
padding-inline-end: 0;
|
||||
|
||||
> .pf-l-flex {
|
||||
// Add spacing between the tabs and the 'Create timer' button in mobile
|
||||
row-gap: var(--pf-global--spacer--sm);
|
||||
// Align 'Create timer' button with the right side of the services list card
|
||||
margin-right: var(--pf-c-page__main-section--PaddingRight);
|
||||
margin-inline-end: var(--pf-c-page__main-section--PaddingRight);
|
||||
}
|
||||
}
|
||||
|
||||
// Add some spacing between the icon and the status string in the list
|
||||
.service-unit-status-failed > .ct-exclamation-circle {
|
||||
margin-right: 0.5rem;
|
||||
margin-inline-end: 0.5rem;
|
||||
}
|
||||
|
||||
.service-unit-first-column {
|
||||
min-width: 20rem;
|
||||
min-inline-size: 20rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(5rem, 25rem));
|
||||
grid-gap: var(--pf-global--spacer--sm);
|
||||
|
|
@ -80,7 +80,7 @@
|
|||
}
|
||||
|
||||
.service-unit-triggers {
|
||||
min-width: 20ch;
|
||||
min-inline-size: 20ch;
|
||||
}
|
||||
|
||||
.pf-c-table .service-unit-second-column {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
@import "global-variables";
|
||||
|
||||
.console-ct-container {
|
||||
height: 100%;
|
||||
block-size: 100%;
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr;
|
||||
overflow: hidden;
|
||||
|
|
@ -11,20 +11,17 @@
|
|||
|
||||
.console-ct-container .terminal-body,
|
||||
.console-ct-container .console-ct {
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.console-ct-container .terminal-group {
|
||||
border-bottom: 1px solid var(--ct-color-border);
|
||||
border-block-end: 1px solid var(--ct-color-border);
|
||||
}
|
||||
|
||||
.xterm-accessibility {
|
||||
/* Allow for scrollbar clicking */
|
||||
/* (scrollbars are 18px or less across common OSes) */
|
||||
right: 18px !important;
|
||||
inset-inline-end: 18px !important;
|
||||
}
|
||||
|
||||
.console-ct-container .terminal-body {
|
||||
|
|
@ -70,7 +67,7 @@
|
|||
padding: 0;
|
||||
|
||||
select {
|
||||
min-width: 5rem;
|
||||
min-inline-size: 5rem;
|
||||
}
|
||||
}
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
.timer-dialog {
|
||||
// Limit the width of the components so that they fit in a single row
|
||||
.pf-c-date-picker:not(.create-timer-time-picker), select {
|
||||
width: 10rem;
|
||||
max-width: 10rem;
|
||||
inline-size: 10rem;
|
||||
max-inline-size: 10rem;
|
||||
}
|
||||
|
||||
.create-timer-time-picker, .delay-number {
|
||||
width: 6rem;
|
||||
inline-size: 6rem;
|
||||
}
|
||||
|
||||
.specific-repeat-group, .delay-group {
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
}
|
||||
|
||||
.account-details .pf-c-card__header {
|
||||
margin-bottom: var(--pf-global--spacer--lg);
|
||||
margin-block-end: var(--pf-global--spacer--lg);
|
||||
}
|
||||
|
||||
#account .pf-l-gallery {
|
||||
|
|
@ -29,34 +29,34 @@
|
|||
}
|
||||
|
||||
#account-details div.checkbox:first-child {
|
||||
margin-top: 0;
|
||||
margin-block-start: 0;
|
||||
}
|
||||
|
||||
#account-details div.checkbox:last-child {
|
||||
margin-bottom: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
|
||||
.size-text-ct {
|
||||
display: inline;
|
||||
width: 8em;
|
||||
text-align: left;
|
||||
inline-size: 8em;
|
||||
text-align: start;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
@media (min-width: 500px) {
|
||||
.modal-sm-ct {
|
||||
width: 32rem;
|
||||
inline-size: 32rem;
|
||||
}
|
||||
}
|
||||
|
||||
.account-column-one {
|
||||
min-width: 280px;
|
||||
min-inline-size: 280px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.expiration-modal .pf-c-form__group-control {
|
||||
.pf-c-radio:first-child {
|
||||
padding-bottom: var(--pf-global--spacer--sm);
|
||||
padding-block-end: var(--pf-global--spacer--sm);
|
||||
}
|
||||
// Work around for https://github.com/patternfly/patternfly/issues/4061
|
||||
.pf-c-radio:nth-child(2) input {
|
||||
|
|
@ -69,7 +69,7 @@
|
|||
}
|
||||
|
||||
.outline-question-circle-icon {
|
||||
margin-left: var(--pf-global--spacer--sm);
|
||||
margin-inline-start: var(--pf-global--spacer--sm);
|
||||
}
|
||||
|
||||
.accounts-toolbar-header > .pf-c-toolbar__content-section {
|
||||
|
|
@ -77,8 +77,8 @@
|
|||
}
|
||||
|
||||
.dot {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
block-size: 20px;
|
||||
inline-size: 20px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
@ -107,5 +107,5 @@
|
|||
}
|
||||
|
||||
#groups-create, #account-create {
|
||||
min-width: 11rem;
|
||||
min-inline-size: 11rem;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue