src-gui/css/wide.css

Rama main · réplica de lectura del repositorio original.

/* SPDX-License-Identifier: GPL-3.0-or-later */
/* === Wide desktop (≥1200px) ===
   The shell is already edge-to-edge from 1100px; what wide adds is the
   master-detail reading layout: the findings list on the left, the selected
   finding's full body pinned on the right. */
@media (min-width: 1200px) {
  /* The toolbar sticks under the header, so it must be opaque or the
     scrolling rows show through it. */
  html.wide .toolbar { background: var(--bg); margin-bottom: 12px; }
  html.wide header.scrolled { background: var(--bg2); }

  /* === Master-detail ===
     Below 1200 .reportgrid is a plain block and the pane stays hidden. */
  html.wide .reportgrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(340px, 30vw, 460px);
    gap: 0 24px;
    align-items: start;
  }
  html.wide .reportgrid > #drillhint,
  html.wide .reportgrid > #report,
  html.wide .reportgrid > #nomatch { grid-column: 1; }
  html.wide .reportgrid > #detailpane { grid-column: 2; }
  html.wide .detailpane {
    position: sticky; top: 104px;
    max-height: calc(100vh - 152px); overflow: auto;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 14px 16px 16px;
  }
  html.wide .detailpane::-webkit-scrollbar { width: 8px; }
  html.wide .detailpane::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }
  html.wide .dp-kicker {
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
    font-size: 10px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: var(--muted2);
  }
  html.wide .dp-tag { background: color-mix(in srgb, var(--green) 16%, transparent); color: var(--green); border-radius: 999px; padding: 2px 7px; }
  html.wide .dp-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  html.wide .dp-head h3 { font-size: 15px; font-weight: 650; letter-spacing: -.015em; line-height: 1.3; flex: 1; min-width: 200px; }
  html.wide .dp-body .detail { padding: 10px 0 12px; border-top: 1px solid var(--border); margin-top: 10px; }
  html.wide .dp-lowconf { display: flex; gap: 6px; align-items: center; font-size: 11px; color: var(--muted2); margin-top: 6px; }
  html.wide .dp-evrow { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; }
  html.wide .dp-body .fix { padding-top: 12px; }
  html.wide #report details.card.selected {
    background: var(--card);
    border-color: var(--border);
    outline: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  }
}