patternfly-overrides.scss

:root {
  // Overrides some PatternFly CSS variables using values
  // from brand.suse.com

  // Font families
  --pf-v5-global--FontFamily--text: var(--ff);
  --pf-v5-global--FontFamily--text--vf: var(--ff);
  --pf-v5-global--FontFamily--heading: var(--ff-headings);
  --pf-v5-global--FontFamily--heading--vf: var(--ff-headings);
  --pf-v5-global--FontFamily--monospace: var(--ff-code);
  --pf-v5-global--FontFamily--monospace--vf: var(--ff-code);

  // Font sizes
  --pf-v5-global--FontSize--4xl: 2em;
  --pf-v5-global--FontSize--3xl: 1.75em;
  --pf-v5-global--FontSize--2xl: 1.5em;
  --pf-v5-global--FontSize--xl: 1.3em;
  --pf-v5-global--FontSize--lg: 1.15em;
  --pf-v5-global--FontSize--md: var(--fs-base);

  // Font weight
  --pf-v5-global--FontWeight--light: var(--fw-light);
  --pf-v5-global--FontWeight--normal: var(--fw-normal);
  --pf-v5-global--FontWeight--semi-bold: var(--fw-medium);
  --pf-v5-global--FontWeight--overpass--semi-bold: var(--fw-medium);
  --pf-v5-global--FontWeight--bold: var(--fw-bold);
  --pf-v5-global--FontWeight--overpass--bold: var(--fw-bold);

  // Colors
  --pf-v5-global--primary-color--100: var(--color-primary);
  --pf-v5-global--primary-color--200: var(--color-primary);
  --pf-v5-global--link--Color: var(--color-link);
  --pf-v5-global--link--Color--hover: var(--color-link-hover);
  --pf-v5-global--BackgroundColor--dark-100: var(--color-primary);
}

.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--color-button-primary);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--color-button-primary-hover);
}

// Make :hover style visible when the button is in a :focus state too
.pf-v5-c-button.pf-m-primary:focus:hover {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--color-button-primary-hover);
}

.pf-v5-c-button.pf-m-link {
  // Colors for buttons modifiers
  --pf-v5-c-button--m-link--Color: var(--color-link);
  --pf-v5-c-button--m-link--Color--hover: var(--color-link-hover);
  --pf-v5-c-button--m-link--m-inline--hover--Color: var(--link-color-hover);
}

.pf-v5-c-button.pf-m-plain {
  --pf-v5-c-button--m-plain--Color: var(--color-button-plain-link);
  --pf-v5-c-button--m-plain--hover--Color: var(--color-button-plain-link-hover);
}

.pf-v5-c-button.pf-m-secondary {
  --pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--color-link-hover);
  --pf-v5-c-button--m-secondary--hover--Color: var(--color-link-hover);
}

// Make :hover style visible when the button is in a :focus state too
.pf-v5-c-button.pf-m-secondary:focus:hover {
  --pf-v5-c-button--after--BorderColor: var(--color-link-hover);
  --pf-v5-c-button--m-secondary--Color: var(--color-link-hover);
}

// Force a separation between PF/EmptyStateBody paragraph without needing
// either: add the .pf-v5-c-content class nor wrapping PF/Text into
// PF/TextContent
.pf-v5-c-empty-state__body p:not(:last-child) {
  margin-block-end: var(--pf-v5-global--spacer--md);
}

// Do not add block padding to empty state inside a table/column
table td > .pf-v5-c-empty-state {
  --pf-v5-c-empty-state--PaddingTop: 0;
  --pf-v5-c-empty-state--PaddingBottom: 0;
}

// Fix single-line sub-progress miss-alignment
.pf-v5-c-progress.pf-m-singleline .pf-v5-c-progress__bar {
  grid-row: 1/3;
  grid-column: 1/3;
}

.pf-v5-c-modal-box__body {
  padding-block: var(--pf-v5-c-modal-box__body--PaddingTop);
}

.pf-v5-c-form__actions,
.pf-v5-c-modal-box__footer {
  // We prefer buttons placed at the right
  flex-direction: row-reverse;

  // Overrides buttons margins. In row-reverse mode, we need margin
  // for the :last-child too.
  // See https://github.com/patternfly/patternfly/blob/9c8cb7c8609613ab53eef3fe05addda16bc63233/src/patternfly/components/ModalBox/modal-box.scss#L211
  > .pf-v5-c-button {
    margin-inline-end: var(--pf-v5-c-modal-box__footer--c-button--MarginRight);
  }
}

// Do not change the default cursor for labels forms because it is confusing
//
// See:
//  * https://github.com/openSUSE/Agama/issues/115#issuecomment-1090205696
//  * https://github.com/patternfly/patternfly/issues/4777#issuecomment-1092090484
.pf-v5-c-form__label {
  --pf-v5-c-form__label--hover--Cursor: default;
  --pf-v5-c-form__label--m-disabled--hover--Cursor: default;
}

// Do not show top border for empty data lists
.pf-v5-c-data-list:empty {
  --pf-v5-c-data-list--BorderTopWidth: 0;
}

// Do not use thick border-top for data lists
.pf-v5-c-data-list {
  --pf-v5-c-data-list--BorderTopWidth: 2px;
}

.pf-v5-c-toolbar {
  --stack-gutter: 0;
  --pf-v5-c-toolbar--PaddingTop: 0;
  --pf-v5-c-toolbar--PaddingBottom: 0;
}

.pf-v5-c-toolbar__content {
  --pf-v5-c-toolbar__content--PaddingRight: 0;
  --pf-v5-c-toolbar__content--PaddingLeft: 0;
}

.pf-v5-c-text-input-group__utilities .pf-v5-c-button {
  padding: 0;
}

.pf-m-grid-md {
  &.pf-v5-c-table {
    tbody:first-of-type {
      --pf-v5-c-table--tbody--responsive--border-width--base: 4px;
    }

    tr:not(.pf-v5-c-table__expandable-row) {
      --pf-v5-c-table-tr--responsive--border-width--base: 4px;
    }
  }
}

.pf-v5-c-switch {
  // We prefer having same label color for checked and not checked switches
  --pf-v5-c-switch__input--not-checked__label--Color: var(--pf-v5-c-switch__input--checked__label--Color);
}

// Make the switch focus looks like the rest
.pf-v5-c-switch__input:focus ~ .pf-v5-c-switch__toggle {
  outline: none;
  box-shadow: 0 0 0 1px var(--focus-color);
}

// Avoid form select toggle icon overlap input Text
.pf-v5-c-form-control__toggle-icon {
  padding-inline-end: 0;
  margin-inline-start: calc(
    var(--pf-v5-c-form-control__toggle-icon--PaddingRight) * 2
  );
}

// Adjust icons for a menu item
.pf-v5-c-menu__item {
  svg {
    // let SVGs inherit the same color than text
    // useful for a `isDanger` item, for example.
    fill: var(--pf-v5-c-menu__item--Color);
    // and keep them centered
    vertical-align: middle;
  }
}

// Center icon in the visibility button of password input form fields
.password-toggler span.pf-c-button__icon {
  display: flex;
}

.pf-v5-c-toggle-group__button.pf-m-selected {
  --pf-v5-c-toggle-group__button--m-selected--BackgroundColor: var(--color-primary);
  --pf-v5-c-toggle-group__button--Color: var(--color-gray-light);
}

// Reduce padding of PF/Hint because it looks like an option of current Agama
// select
.pf-v5-c-hint {
  --pf-v5-c-hint--PaddingTop: var(--spacer-small);
  --pf-v5-c-hint--PaddingRight: var(--spacer-small);
  --pf-v5-c-hint--PaddingBottom: var(--spacer-small);
  --pf-v5-c-hint--PaddingLeft: var(--spacer-small);
}

// Do not reserve space for PF/Hint actions when there are none
.pf-v5-c-hint__actions:empty {
  display: none;
}

// Make PF/ExpandableSection looks a bit different when wrapped in a PF/Hint
.pf-v5-c-hint {
  .pf-v5-c-expandable-section {
    --pf-v5-c-expandable-section__toggle--Color: var(--color-primary);
  }

  .pf-v5-c-expandable-section__toggle,
  .pf-v5-c-expandable-section__toggle:hover {
    // NOTE. would be nice to being able to use darker variant of primary color
    // when hovering the link, but we aren't ready yet. We should switch to hsla
    // colors or so.
    --pf-v5-c-expandable-section__toggle--Color: var(--color-primary);
    text-decoration: underline;
  }

  .pf-v5-c-expandable-section__content {
    --pf-v5-c-expandable-section__content--PaddingRight: var(--spacer-normal);
    --pf-v5-c-expandable-section__content--PaddingLeft: var(--spacer-normal);
  }
}

.pf-v5-c-form__group-label-help {
  margin: 0;
  padding: 0;
  vertical-align: top;
}

.pf-m-grid-md.pf-v5-c-table .pf-v5-c-menu-toggle {
  padding-inline: 0;
}

ul {
  list-style: initial;
  margin-inline: var(--spacer-normal);

  li:not(:last-child) {
    margin-block-end: var(--spacer-small);
  }
}

// Styles for tree table used by storage page.

.pf-v5-c-table tbody {
  border-block-end: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
}

.pf-v5-c-table td > .pf-v5-c-form-control {
  inline-size: max-content;
}

.pf-v5-c-table tr[aria-level="1"] {
  border-block-end: 0;
  border-block-start: var(--pf-v5-c-table--border-width--base) solid var(--pf-v5-c-table--BorderColor);
}

.pf-v5-c-table tr[aria-level="2"] {
  border-block-end: 0;
}

@media screen and (width <= 768px) {
  .pf-m-grid-md.pf-v5-c-table tr:where(.pf-v5-c-table__tr):not(.pf-v5-c-table__expandable-row) {
    padding-inline: 0;
  }
}