playwright-reborn 0.2.1 → 0.2.3

package/dist/ui/report.css

@@ -3,7 +3,7 @@
   src: url("fonts/geist-latin-400-normal.woff2") format("woff2");
   font-weight: 400;
   font-style: normal;
-  font-display: block;
+  font-display: swap;
 }
 
 @font-face {
@@ -11,7 +11,7 @@
   src: url("fonts/geist-latin-500-normal.woff2") format("woff2");
   font-weight: 500;
   font-style: normal;
-  font-display: block;
+  font-display: swap;
 }
 
 @font-face {
@@ -19,7 +19,7 @@
   src: url("fonts/geist-latin-600-normal.woff2") format("woff2");
   font-weight: 600;
   font-style: normal;
-  font-display: block;
+  font-display: swap;
 }
 
 @font-face {
@@ -27,25 +27,25 @@
   src: url("fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
   font-weight: 500;
   font-style: normal;
-  font-display: block;
+  font-display: swap;
 }
 
 :root {
   color-scheme: dark;
   --base: #080808;
   --surface: #111111;
-  --border: #1a1a1a;
+  --border: #2b302e;
   --text: #f0f0f0;
-  --subtle: #888888;
+  --subtle: #a2aaa6;
   --accent: #00ff88;
   --accent-hover: #00cf6e;
   --wash: rgba(0, 255, 136, 0.16);
   --hairline: rgba(255, 255, 255, 0.08);
-  --pass: rgba(255, 255, 255, 0.22);
-  --fail: #00ff88;
-  --flaky: rgba(0, 255, 136, 0.45);
+  --pass: #96cbb0;
+  --fail: #ff8989;
+  --flaky: #edc66f;
   --skip: #888888;
-  --timeout: #00ff88;
+  --timeout: #edc66f;
   --interrupted: #888888;
   --sans: Geist, "Segoe UI", sans-serif;
   --display: Geist, "Segoe UI", sans-serif;
@@ -57,32 +57,24 @@ body[data-accent="red"] {
   --accent: #ff4d4d;
   --accent-hover: #e03b3b;
   --wash: rgba(255, 77, 77, 0.16);
-  --fail: #ff4d4d;
-  --timeout: #ff4d4d;
 }
 
 body[data-accent="blue"] {
   --accent: #4da3ff;
   --accent-hover: #2f86e0;
   --wash: rgba(77, 163, 255, 0.16);
-  --fail: #4da3ff;
-  --timeout: #4da3ff;
 }
 
 body[data-accent="amber"] {
   --accent: #ffb020;
   --accent-hover: #e09610;
   --wash: rgba(255, 176, 32, 0.16);
-  --fail: #ffb020;
-  --timeout: #ffb020;
 }
 
 body[data-accent="violet"] {
   --accent: #b07cff;
   --accent-hover: #945fe0;
   --wash: rgba(176, 124, 255, 0.16);
-  --fail: #b07cff;
-  --timeout: #b07cff;
 }
 
 * { box-sizing: border-box; }
@@ -91,7 +83,7 @@ body[data-accent="violet"] {
 
 body {
   margin: 0;
-  background: #050806;
+  background: var(--base);
   color: var(--text);
   font-family: var(--sans);
   font-size: 15px;
@@ -109,16 +101,12 @@ body {
   background: var(--accent);
   color: #080808;
   padding: 8px 12px;
-  z-index: 2;
+  z-index: 10;
 }
 
 .skip:focus { top: 12px; }
 
-.page {
-  width: min(1120px, calc(100% - 48px));
-  margin: 0 auto;
-  padding: 28px 0 64px;
-}
+
 
 button, input { font: inherit; color: inherit; }
 button { cursor: pointer; }
@@ -216,20 +204,19 @@ button { cursor: pointer; }
   color: var(--text);
 }
 
-.word[data-status="failed"],
-.word[data-status="timedOut"],
-.word[data-status="interrupted"] { color: var(--text); }
 
-.time {
-  margin: 0;
+
+.product {
+  margin: 10px 0 0;
+  color: var(--text);
+  font-size: clamp(22px, 3vw, 32px);
   font-weight: 500;
-  font-size: clamp(48px, 7vw, 64px);
-  line-height: 1;
-  letter-spacing: -0.04em;
-  color: var(--accent);
-  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.03em;
+  line-height: 1.15;
 }
 
+
+
 .summary {
   flex-basis: 100%;
   margin: 8px 0 0;
@@ -422,48 +409,39 @@ button { cursor: pointer; }
   box-shadow: inset 0 -1px 0 var(--accent);
 }
 
-#duration.legend {
+.charts {
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 1px;
-  margin-top: 8px;
+  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
+  gap: 28px 36px;
+  align-items: center;
+  margin-top: 12px;
 }
 
-#duration .band {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 6px;
+.pie { width: min(240px, 100%); height: auto; display: block; }
+.slice { cursor: pointer; }
+
+.bars { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
+
+.band {
+  display: grid;
+  grid-template-columns: 12px minmax(0, 1fr) auto;
+  grid-template-rows: auto 6px;
+  gap: 6px 10px;
   width: 100%;
   background: transparent;
   border: 0;
-  padding: 4px 16px 4px 0;
+  padding: 0;
   color: var(--subtle);
   text-align: left;
 }
 
-#duration .band .n {
-  color: var(--text);
-  font-size: 28px;
-  line-height: 1;
-  letter-spacing: -0.04em;
-}
-
-#duration .band[aria-pressed="true"] .n { color: var(--accent); }
-
+.swatch { width: 12px; height: 12px; margin-top: 3px; }
+.band .n { color: var(--text); font-size: 16px; letter-spacing: 0; }
 .band-label { font-size: 14px; }
-
-.band-track {
-  width: 100%;
-  height: 4px;
-  background: var(--hairline);
-}
-
-.band-fill {
-  display: block;
-  height: 100%;
-  background: var(--accent);
-}
+.band-track { grid-column: 2 / -1; height: 6px; background: var(--hairline); }
+.band-fill { display: block; height: 100%; background: var(--accent); }
+.band[aria-pressed="true"] .band-label,
+.band[aria-pressed="true"] .n { color: var(--accent); }
 
 .order {
   display: flex;
@@ -659,8 +637,8 @@ button { cursor: pointer; }
 
 .detail {
   position: sticky;
-  top: 18px;
-  max-height: calc(100vh - 36px);
+  top: 76px;
+  max-height: calc(100vh - 94px);
   overflow: auto;
   padding: 18px 0 24px 28px;
   background: transparent;
@@ -942,7 +920,8 @@ dialog::backdrop { background: rgba(8, 8, 8, 0.92); }
   .find-wrap { margin-left: 0; width: 100%; }
   .find { width: 100%; }
   .split { grid-template-columns: 1fr; }
-  .detail { position: static; max-height: none; padding-left: 0; }
+  .detail { position: static; max-height: none; padding-left: 0; border-top: 1px solid var(--border); }
+  #tests { max-height: 45vh; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 12px; }
 }
 
 .atmosphere {
@@ -950,7 +929,7 @@ dialog::backdrop { background: rgba(8, 8, 8, 0.92); }
   inset: 0;
   z-index: 0;
   pointer-events: none;
-  background: #050806;
+  background: var(--base);
   overflow: hidden;
 }
 
@@ -963,6 +942,7 @@ dialog::backdrop { background: rgba(8, 8, 8, 0.92); }
   height: 100%;
   display: block;
   filter: blur(18px) saturate(1.05);
+  opacity: 0.3;
   -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 18%, rgba(0, 0, 0, 0.4) 34%, transparent 52%);
   mask-image: linear-gradient(180deg, #000 0%, #000 18%, rgba(0, 0, 0, 0.4) 34%, transparent 52%);
 }
@@ -970,7 +950,7 @@ dialog::backdrop { background: rgba(8, 8, 8, 0.92); }
 .grain {
   position: absolute;
   inset: -20%;
-  opacity: 0.07;
+  opacity: 0.035;
   mix-blend-mode: overlay;
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.85'/></svg>");
   background-size: 180px 180px;
@@ -1007,9 +987,11 @@ dialog::backdrop { background: rgba(8, 8, 8, 0.92); }
   flex-direction: row;
   align-items: center;
   gap: 28px;
-  padding: 12px 16px;
+  padding: 12px clamp(20px, 3vw, 48px);
   border-right: 0;
-  background: linear-gradient(180deg, rgba(5, 8, 6, 0.72), rgba(5, 8, 6, 0.35) 70%, rgba(5, 8, 6, 0));
+  background: rgba(8, 8, 8, 0.9);
+  backdrop-filter: blur(16px);
+  border-bottom: 1px solid var(--hairline);
   transition: transform 220ms ease;
 }
 
@@ -1018,11 +1000,16 @@ dialog::backdrop { background: rgba(8, 8, 8, 0.92); }
   pointer-events: none;
 }
 
-.rail .meta { margin: 0 0 0 auto; flex-direction: row; gap: 16px; justify-content: flex-end; max-width: 46%; text-align: right; }
+.rail .meta { margin: 0 0 0 auto; flex-direction: row; gap: 16px; justify-content: flex-end; text-align: right; }
+.rail .meta { min-width: 0; }
+.rail .meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30ch; }
 
 .rail .tabbar {
   flex-direction: row;
   align-items: center;
+  width: auto;
+  flex: 1;
+  min-width: 0;
   gap: 22px;
   margin: 0;
   padding: 0;
@@ -1042,21 +1029,22 @@ dialog::backdrop { background: rgba(8, 8, 8, 0.92); }
 }
 
 .stage {
-  width: 100%;
-  margin: 0;
-  padding: 20px 16px 48px;
+  width: min(1440px, 100%);
+  margin: 0 auto;
+  padding: 24px clamp(20px, 3vw, 48px) 48px;
 }
 
 .hero { margin: 8px 0 28px; }
 
 .word {
-  font-size: clamp(64px, 8vw, 96px);
+  font-size: clamp(42px, 6vw, 80px);
   font-weight: 500;
   letter-spacing: -0.045em;
-  max-width: 14ch;
+  max-width: 100%;
+  overflow-wrap: anywhere;
 }
 
-.time { display: none; }
+
 
 #panel-tests,
 #panel-screenshots,
@@ -1175,16 +1163,86 @@ dialog::backdrop { background: rgba(8, 8, 8, 0.92); }
 }
 
 @media (max-width: 800px) {
-  .rail { flex-wrap: wrap; gap: 12px 18px; padding: 16px; }
+  .rail { flex-wrap: wrap; gap: 12px 18px; padding: 8px 16px; }
   .rail .meta { display: none; }
-  .rail .tabbar { flex-wrap: wrap; width: 100%; }
+  .rail .tabbar { flex-wrap: nowrap; overflow-x: auto; width: 100%; gap: 20px; }
+  .rail .tab { flex: 0 0 auto; min-height: 44px; }
   .stage { width: 100%; padding: 12px 16px 40px; }
-  #legend.legend, #duration.legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  #legend.legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .charts { grid-template-columns: 1fr; }
+  .pie { width: 180px; margin: 0 auto; }
   #legend .count { border-right: 0; }
   .evidence { grid-template-columns: 1fr; }
-  .hero { margin: 24px 0 32px; }
+  .hero { margin: 12px 0 28px; }
+  .run-state { margin: 12px 0 0; }
+  .count, .tag-btn, .project-btn, .order-btn, .band-clear, .view, .subtab, .attempt, .open-test, .more, .reset-filters { min-height: 40px; }
 }
 
 @media (prefers-reduced-motion: reduce) {
   .hero, .strip-window, .bands, .grain, .rail { animation: none; transition: none; }
 }
+
+/* State colors communicate outcomes independently of the chosen brand accent. */
+.run-state {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  flex: 0 0 auto;
+  margin: 4px 0 0;
+  padding: 6px 12px;
+  border: 1px solid currentColor;
+  border-radius: 20px;
+  font-size: 13px;
+  color: var(--subtle);
+}
+.run-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+.run-state[data-status="passed"] { color: var(--pass); }
+.run-state[data-status="failed"] { color: var(--fail); }
+.run-state[data-status="timedout"], .run-state[data-status="interrupted"] { color: var(--timeout); }
+.sw[data-status="passed"] { color: var(--pass); }
+.sw[data-status="failed"], .sw[data-status="timedOut"] { color: var(--fail); }
+.sw[data-status="flaky"] { color: var(--flaky); }
+.row[data-status="failed"], .row[data-status="timedOut"] { border-left-color: var(--fail); }
+.row[data-status="flaky"] { border-left-color: var(--flaky); }
+.run-fill[data-status="failed"], .run-fill[data-status="timedOut"] { background: var(--fail); }
+.run-fill[data-status="flaky"] { background: var(--flaky); }
+.run-row[data-status="failed"], .run-row[data-status="timedOut"] { box-shadow: inset 2px 0 0 var(--fail); }
+.run-row[data-status="flaky"] { box-shadow: inset 2px 0 0 var(--flaky); }
+#legend .count[data-status="failed"] .n, #legend .count[data-status="timedOut"] .n { color: var(--fail); }
+#legend .count[data-status="flaky"] .n { color: var(--flaky); }
+#legend .count[aria-pressed="true"] { box-shadow: inset 0 -2px 0 var(--accent); }
+#legend.legend { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px; }
+.charts:has(> .bars:only-child) { grid-template-columns: 1fr; }
+.hero > div, .info-row, .file-row, .row-meta, .stage, .rail, .detail { min-width: 0; }
+.info dd, .where, .file-name, .tile-title, .tile-meta, .now-file, .detail h2, .file-group h3, .step, .row-meta { overflow-wrap: anywhere; }
+.row-meta { flex-wrap: wrap; gap: 2px 12px; }
+.band { padding: 6px 0; }
+.band:hover .band-label { color: var(--text); }
+.find { padding: 8px 10px; border: 1px solid var(--border); background: rgba(8, 8, 8, 0.65); border-radius: 6px; }
+.find:focus { border-color: var(--accent); }
+.list-summary { display: flex; align-items: center; gap: 16px; margin: 18px 0 10px; color: var(--subtle); font-size: 13px; }
+.reset-filters { background: none; border: 0; color: var(--accent); padding: 4px 0; }
+.split { grid-template-columns: minmax(260px, 34%) minmax(0, 1fr); }
+#tests { padding-right: 16px; }
+.detail { border-left: 1px solid var(--border); }
+.row { padding: 12px; border-left-width: 2px; border-radius: 0 4px 4px 0; }
+.row[aria-current="true"] { background: var(--wash); }
+.error { border-left-color: var(--fail); }
+.step.bad .mark { background: var(--fail); }
+.gallery .tile { border-radius: 8px; background: rgba(17, 17, 17, 0.6); }
+.tile img { object-fit: contain; background: var(--base); }
+.well pre { padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
+dialog { border: 1px solid var(--border); border-radius: 8px; padding: 12px; max-height: 95vh; }
+dialog img { max-width: calc(92vw - 26px); object-fit: contain; }
+.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
+@media (max-width: 800px) {
+  .split { grid-template-columns: minmax(0, 1fr); }
+  .detail { border-left: 0; padding-top: 20px; }
+  #tests { padding-right: 0; }
+  #legend.legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .info { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
+  .run-state { margin-top: 12px; }
+}
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { scroll-behavior: auto !important; }
+}