changedetection.io/changedetectionio/static/styles/scss/parts/_queue.scss

// Styles for /queue (blueprint/ui/templates/queue.html)

#queue-page {
  width: 100%;
  color: var(--color-white);

  h2,
  h3 {
    color: var(--color-white);
  }

  .queue-panel {
    background: var(--color-background-new-watch-form);
    padding: 1em;
    border-radius: 10px;
    margin-bottom: 1em;
    width: 100%;
    box-sizing: border-box;
    color: var(--color-white);
  }

  .queue-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0.75rem;
  }

  .queue-stat {
    .label {
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      opacity: 0.7;
    }

    .value {
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--color-white);
    }

    // Action cell holds the Clear Queue button in place of a stat
    &.queue-stat--action {
      display: flex;
      align-items: center;
      justify-content: flex-start;

      .pure-button {
        white-space: nowrap;
      }
    }
  }

  // Watch-table-ish aesthetic but text stays white in both light and dark modes
  // (table sits over the colorful gradient page bg).
  table.pure-table {
    width: 100%;
    background: transparent;
    color: var(--color-white);
    font-size: 80%;

    thead th {
      background: transparent;
      color: var(--color-white);
      border-bottom: 1px solid rgba(255, 255, 255, 0.18);
      font-weight: 700;
      white-space: nowrap;
    }

    td {
      color: var(--color-white);
      border-color: rgba(255, 255, 255, 0.08);
      white-space: nowrap;
    }

    td.title-col,
    td.watch-cell {
      white-space: normal;
      word-break: break-all;
    }

    td.time-cell {
      font-variant-numeric: tabular-nums;
      color: rgba(255, 255, 255, 0.75);
      font-size: 0.95em;
    }

    code,
    small,
    em,
    strong {
      color: var(--color-white);
    }

    code {
      background: rgba(0, 0, 0, 0.18);
    }

    small {
      opacity: 0.7;
    }
  }

  table.pure-table-striped tr:nth-child(2n-1) td {
    background: rgba(255, 255, 255, 0.04);
  }

  // Rows that just completed — kept visible for a short grace period so the
  // user can see what finished without rows disappearing under their cursor.
  tr.is-completed td {
    opacity: 0.45;
    transition: opacity 0.4s ease;
  }

  // Visually separate the worker-slot section from the queue section.
  tbody[data-section="workers"] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }
  tr.worker-slot td {
    border-color: rgba(255, 255, 255, 0.05);
  }
  tr.worker-idle td {
    background: rgba(255, 255, 255, 0.02);
  }

  // Status pills inside cells
  .inline-tag {
    background: rgba(255, 255, 255, 0.14);
    color: var(--color-white);
  }
  .inline-tag--running {
    background: rgba(28, 184, 65, 0.45);
  }
  .inline-tag--idle {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.6);
  }
  .inline-tag--done {
    background: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.7);
  }

  a.queue-cancel {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.65);
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;

    &:hover {
      color: var(--color-white);
      text-decoration-style: solid;
    }

    &.is-busy {
      pointer-events: none;
      opacity: 0.5;
    }
  }

  // Brief flash when a queued row first appears
  tr.is-new td { animation: queue-row-in 0.45s ease; }
  @keyframes queue-row-in {
    from { background-color: rgba(28, 184, 65, 0.18); }
    to { background-color: transparent; }
  }

  // "Waiting for new pages to check…" footer; shown only when both workers
  // and queue have no actual jobs.
  .queue-waiting {
    display: none;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.5rem 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;

    &[data-show="true"] {
      display: flex;
    }

    .spinner {
      // The shared .spinner has `margin: 0 auto` which inside a flex container
      // absorbs all free space and pushes the label far to the right.
      margin: 0;
      flex: 0 0 auto;
      // Shared spinner's dark borders don't read on the colourful gradient bg.
      border-top-color: rgba(255, 255, 255, 0.18);
      border-right-color: rgba(255, 255, 255, 0.18);
      border-bottom-color: rgba(255, 255, 255, 0.18);
      border-left-color: var(--color-white);
    }
  }
}