mirror-cockpit-project-cockpit/pkg/packagekit/updates.scss

/* SPDX-License-Identifier: LGPL-2.1-or-later */
@use "ct-card";
@use "page";
@use "global-variables" as *;

@use "@patternfly/patternfly/utilities/Spacing/spacing.css";
// For .pf-v6-u-display-flex
@use "@patternfly/patternfly/utilities/Display/display.css";

/* Style the list cards as ct-cards */
.pf-v6-c-page__main-section .pf-v6-c-card {
  @extend .ct-card;
}

.pf-v6-c-table tr:nth-child(1) {
  > td, th {
    padding-block: var(--pf-v6-c-table--cell--PaddingBlockStart) var(--pf-v6-c-table--cell--PaddingBlockEnd);
    padding-inline: var(--pf-v6-c-table--cell--PaddingInlineStart) var(--pf-v6-c-table--cell--PaddingInlineEnd);
  }
}

.kpatches-labelgroup ul.pf-v6-c-label-group__list,
.kpatches-labelgroup li.pf-v6-c-label-group__list-item:last-child {
  margin-block-end: 0;
}

.pk-updates--header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-block: 1.5rem 1rem;
  padding-inline: 0;

  &--actions {
    > .pf-v6-c-button,
    > .btn-group {
      margin-block: 5px 0;
      margin-inline: 0 5px;

      &:last-child {
        margin-inline-end: 0;
      }
    }
  }
}

// Make header's content bold
.pf-v6-c-table tr:nth-child(1) td:nth-child(2) {
  font-weight: var(--pf-t--global--font--weight--body--bold);
}

.ct-table tr {
  .severity-icon {
    margin-inline-end: var(--pf-t--global--spacer--xs);
  }

  td.changelog {
    vertical-align: top;

    * {
      display: inline;
      font: inherit;
      background: inherit;
      color: inherit;
    }

    &, p {
      max-inline-size: 60vw;
      margin-block-end: 0;  // counter-act <Markdown>
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

  th:last-child,
  td.changelog:last-child {
    text-align: start;
  }
}

.severity-critical {
  color: #a30000;
}

.severity-important {
  color: #ec7a08;
}

.severity-low {
  color: var(--ct-color-subtle-copy);
}

div.changelog {
  max-block-size: 20em;
  overflow: auto;
  white-space: pre-wrap;
}

/* Hide changelog summaries in narrow widths */
@media screen and (max-width: 80ch) {
  table.ct-table {
    /* Hide changelog header (there's no class) & data */
    thead th:last-child,
    td.changelog {
      display: none;
    }
  }
}

/* don't let the install progress bar get too wide */
.progress-main-view {
  inline-size: 50vw;
  max-inline-size: 60rem;
  margin-block: 10ex 0;
  margin-inline: auto;

  @media screen and (max-width: $pf-v6-global--breakpoint--sm - 1) {
    inline-size: 100%;
  }

  .pf-v6-l-grid {
    align-items: end;
  }
}

/* workaround font not supporting tabular numbers yet https://github.com/cockpit-project/cockpit/issues/15090 */
.pf-v6-c-progress__status {
  min-inline-size: 3ch;
}

/* Add some space between the spinner and the text */
.progress-description > svg {
  margin-inline-end: var(--pf-t--global--spacer--sm);
}

.flow-list-blank-slate {
  margin-block: 0;
  margin-inline: auto;
  max-inline-size: 69rem;
  text-align: center;
}

.flow-list {
  padding: 0;
  text-align: start;
  box-sizing: border-box;

  li {
    text-align: start;
    box-sizing: border-box;
    inline-size: 22rem;
    padding-block: 0;
    padding-inline: 0 1ex;
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

// prevent overflowo on small screens
.error-log {
  max-inline-size: 100%;
}

.update-log {
  text-align: center;

  th {
    text-align: start;
    padding-inline-end: 3ex;
  }

  td {
    text-align: start;
  }
}

.update-log-content {
  margin-block: 0;
  margin-inline: 10ex;
  block-size: 13em;
  overflow-y: auto;
}

#auto-update-day {
  max-inline-size: 10rem;
}

#auto-update-time {
  max-inline-size: 7rem;
}

.auto-update-group {
  // Add spacing between rows for when the flex items wrap
  row-gap: var(--pf-t--global--spacer--sm);
}

.pk-updates .pf-v6-c-description-list + div {
  padding-block-start: var(--pf-t--global--spacer--md);
}

.restart-services-modal-body {
  padding-block: 1em;
  padding-inline: 0;
}

.pf-v6-c-content ul {
  list-style-type: none;
}

.updates-history {
  // Constrain  time's width
  .history-time {
    inline-size: 0;
    white-space: nowrap;
  }

  // Fix alignment of the package count's icon
  .list-view-pf-additional-info-item {
    align-items: baseline;

    > svg {
      margin-inline-end: 1ex;
    }
  }
}

.updates-success-table {
  margin-block-end: 1em;
}

.update-success-actions > button {
  margin-block: var(--pf-t--global--spacer--xs);
  margin-inline: var(--pf-t--global--spacer--sm) 0;
}

.update-success-table-title {
  padding-inline-start: var(--pf-t--global--spacer--sm);
}

.cockpit-update-warning {
  margin-inline-end: var(--pf-t--global--spacer--md);
}

.cockpit-update-warning-icon {
  margin-inline-end: var(--pf-t--global--spacer--sm);
}

// TODO @Venefilyn: Cleanup and remove
// Alerts no longer need yellow background
.cockpit-update-warning-text {
  color: var(--pf-t--global--text--color--regular);
}

.autoupdates-card-error {
  margin-block-end: var(--pf-t--global--spacer--md);
}

// TODO @Venefilyn: Can be replaced with normal icon now
.ct-info-circle {
  color: var(--pf-t--global--icon--color--status--info--default);
}