🏡 index : quine-global-labs/mirror-cockpit-project-cockpit.git

/* SPDX-License-Identifier: LGPL-2.1-or-later */
@use "./global-variables";
@use "@patternfly/patternfly/base";
@use "./patternfly/patternfly-6-overrides.scss";

/* Globally resize headings */
h1 {
  --ct-heading-font-size: var(--pf-t--global--font--size--4xl);
}

h2 {
  --ct-heading-font-size: var(--pf-t--global--font--size--3xl);
}

h3 {
  --ct-heading-font-size: var(--pf-t--global--font--size--2xl);
}

h4 {
  --ct-heading-font-size: var(--pf-t--global--font--size--lg);
}

// Only apply a custom font size when a heading does NOT have a PF4 class
h1,
h2,
h3,
h4 {
  &:not([class*="pf-"]):not([data-pf-content="true"]) {
    font-size: var(--ct-heading-font-size);
  }
}

/* End of headings resize */

a {
  cursor: pointer;
}

.disabled {
  pointer-events: auto;
}

.btn {
  min-block-size: 26px;
  min-inline-size: 26px;
}

.btn.disabled,
.pf-v6-c-button.disabled {
  pointer-events: auto;
}

.btn.disabled:hover,
.pf-v6-c-button.disabled:hover {
  z-index: auto;
}

.btn-group {
  /* Fix button groups from wrapping in narrow widths */
  display: inline-flex;
}

a.disabled {
  cursor: not-allowed !important;
  text-decoration: none;
  pointer-events: none;
  color: #8b8d8f;
}

a.disabled:hover {
  text-decoration: none;
}

.highlight-ct {
  background-color: var(--ct-color-link-hover-bg);
}

.curtains-ct {
  inline-size: 100%;
}

/* Animation of new items */
.ct-new-item {
  animation: ctNewRow 4s ease-in;
}

:root {
  --ct-animation-new-background: #fdf4dd;
}

.pf-v6-theme-dark {
  --ct-animation-new-background: #353428;
}

/* Animation background is instantly yellow and fades out halfway through */
@keyframes ctNewRow {
  0% {
    background-color: var(--ct-animation-new-background);
  }

  50% {
    background-color: var(--ct-animation-new-background);
  }
}

/* Dialog patterns */

.dialog-wait-ct {
  /* Right align footer idle messages after the buttons */
  margin-inline-start: auto;
  display: flex;
  column-gap: var(--pf-t--global--spacer--sm);
  align-items: center;
}

:root {
  /* Cockpit custom colors */
  --ct-color-light-red: #f8cccc;
  --ct-color-red-hat-red: #e00;

  // Blend between --pf-v6-global--palette--black-200 and 300
  --ct-global--palette--black-250: #e6e6e6;

  /* Semantic colors */
  --ct-color-bg: var(--pf-t--global--background--color--primary--default);
  --ct-color-text: var(--pf-t--global--text--color--regular);

  --ct-color-link: var(--pf-t--global--text--color--link--default);
  --ct-color-link-visited: var(--pf-t--global--text--color--link--visited);

  --ct-color-subtle-copy: var(--pf-t--global--text--color--subtle);

  // General border color (semantic shortcut, instead of specifying the color directly)
  --ct-color-border: var(--pf-t--global--color--brand--default);

  // Used for highlighting link blocks (with a light background blue)
  --ct-color-link-hover-bg: var(--pf-v6-global--palette--light-blue-100);

  /* Colors used for custom lists */
  // as seen in Journal, Listing, Table widgets and pages like Machines, Updates, Services
  --ct-color-list-text: var(--ct-color-text);
  --ct-color-list-link: var(--ct-color-link);
  --ct-color-list-bg: var(--ct-color-bg);
  --ct-color-list-border: var(--ct-color-border);
  --ct-color-list-hover-text: var(--ct-color-link);
  --ct-color-list-hover-bg: var(--pf-t--global--background--color--primary--hover);
  --ct-color-list-hover-border: var(--pf-v6-global--BackgroundColor--150);
  --ct-color-list-hover-icon: var(--pf-v6-global--palette--light-blue-400);
  --ct-color-list-selected-text: var(--ct-color-link);
  --ct-color-list-selected-bg: var(--pf-v6-global--BackgroundColor--150);
  --ct-color-list-selected-border: var(--pf-v6-global--BackgroundColor--150);
  --ct-color-list-active-text: var(--pf-v6-global--palette--blue-500);
  --ct-color-list-active-bg: var(--ct-color-bg);
  --ct-color-list-active-border: var(--ct-color-list-border);
  --ct-color-list-critical-bg: color-mix(in oklch, var(--pf-t--global--border--color--status--danger--default) 10%, transparent);
  --ct-color-list-critical-border: color-mix(in oklch, var(--pf-t--global--border--color--status--danger--default) 25%, transparent);
  --ct-color-list-critical-alert-text: var(--pf-v6-global--palette--red-200);
}

.pf-v6-theme-dark {
  --ct-color-list-critical-alert-text: var(--pf-v6-global--palette--red-8888);
}

// Let PF4 handle the scrolling through page component otherwise we might get double scrollbar
html:not(.index-page) body {
  overflow-block: hidden;

  // Ensure UI fills the entire page (and does not run over)
  .ct-page-fill {
    block-size: 100% !important;

    .pf-v6-c-page__main-container {
      block-size: 100%;
    }
  }
}

/* Makes loading new pages not flicker white but keep the natural background */
body {
  background: var(--pf-t--global--background--color--secondary--default);
}

.ct-icon-info-circle {
  color: var(--pf-t--global--icon--color--status--info--default);
}

.ct-icon-exclamation-triangle {
  color: var(--pf-t--global--icon--color--status--warning--default);
}

.ct-icon-times-circle {
  color: var(--pf-t--global--icon--color--status--danger--default);
}

// When we have elements within a select you can use this helper class to align on a baseline.
// You might have used radio or checkbox wrong if you need to use this.
//   - Don't have inputs or selectable items within a radio/checkbox label.
//   - Instead of aligning on a baseline, put the text in the label and everything else in a description.
.pf-v6-c-radio,
.pf-v6-c-check {
  &__input {
    .ct-align-center & {
      margin-block: auto;
      align-self: unset;
      transform: unset;
    }
  }
}

// To be used only from testlib.py for pixel-tests
.pixel-test {
  .pf-v6-c-page__main-container,
  main {
    overflow-y: clip;
  }

  // Due to rounded corners in PF6 the pixel tests on modals pick up changes
  // behind it. To fix this we can make the backdrop (a dimmed layer behind the modal)
  // completely opaque to prevent these issues.
  .pf-v6-c-backdrop {
    --pf-t--global--background--color--backdrop--default: var(--pf-t--global--background--color--secondary--default) !important;
  }
}

// Set patternfly-6 native font-weight for bold elements
b,
strong {
  font-weight: var(--pf-t--global--font--weight--body--bold);
}

b.ct-heading-font-weight,
strong.ct-heading-font-weight {
  font-weight: var(--pf-t--global--font--weight--heading--bold);
}