diff --git a/web/index.html b/web/index.html index e39c126..e0fa6b6 100644 --- a/web/index.html +++ b/web/index.html @@ -138,6 +138,7 @@ font:inherit; font-size:12.5px; padding:7px 12px; border-radius:8px; cursor:pointer; } .dropdown-btn:hover{ border-color:var(--accent); color:var(--ink); } + .dropdown-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .dropdown-btn .arrow{ font-size:10px; opacity:.6; } .dropdown-btn[aria-expanded="true"]{ border-color:var(--accent); background:var(--accent-wash); color:var(--ink); } .dropdown-btn .tag{ background:var(--accent); color:#fff; border-radius:999px; font-size:10.5px; padding:1px 6px; } @@ -156,6 +157,7 @@ border:0; background:none; color:var(--accent); font:inherit; font-size:12px; cursor:pointer; padding:0; } .dropdown-actions button:hover{ text-decoration:underline; } + .dropdown-actions button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; } .dropdown-list{ max-height:260px; overflow-y:auto; display:flex; flex-direction:column; gap:1px; } .type-row{ display:flex; align-items:center; gap:8px; padding:5px 4px; border-radius:6px; cursor:pointer; font-size:12.5px; @@ -173,6 +175,8 @@ border:1px solid var(--border); background:var(--page); color:var(--ink-2); font:inherit; font-size:11px; padding:3px 8px; border-radius:999px; cursor:pointer; } + .role-chip:hover{ border-color:var(--accent); color:var(--ink); } + .role-chip:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .role-chip[aria-pressed="true"]{ background:var(--accent-wash); border-color:var(--accent); color:var(--ink); } .type-row .role-badge{ flex:none; font-size:10px; color:var(--ink-3); background:var(--page); @@ -185,10 +189,13 @@ .segmented{ display:flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; } .segmented button{ border:0; background:var(--surface); color:var(--ink-2); font:inherit; font-size:12.5px; - padding:7px 12px; cursor:pointer; + padding:7px 12px; cursor:pointer; transition:background .15s ease, color .15s ease; } .segmented button + button{ border-left:1px solid var(--border); } + .segmented button:hover{ background:var(--accent-wash); color:var(--ink); } + .segmented button:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; } .segmented button[aria-pressed="true"]{ background:var(--accent); color:#fff; } + .segmented button[aria-pressed="true"]:hover{ background:var(--accent); } .presets{ display:flex; gap:6px; } .presets button{ @@ -196,6 +203,7 @@ font:inherit; font-size:12.5px; padding:6px 10px; border-radius:7px; cursor:pointer; } .presets button:hover{ border-color:var(--accent); color:var(--ink); } + .presets button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .presets button[aria-pressed="true"]{ background:var(--accent-wash); border-color:var(--accent); color:var(--ink); } label.check{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-2); cursor:pointer; } @@ -229,7 +237,6 @@ border-radius:999px; padding:2px 9px; margin-bottom:10px; } .resumo-text{ font-size:13.5px; line-height:1.6; color:var(--ink); margin:0 0 14px; } - .resumo-block{ margin-top:12px; padding-top:12px; border-top:1px solid var(--grid); } .resumo-label{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-3); margin-bottom:6px; } .resumo-people{ display:flex; flex-wrap:wrap; gap:5px; } .resumo-people span{ @@ -239,15 +246,15 @@ .resumo-file{ font-size:10.5px; color:var(--ink-3); line-height:1.5; overflow-wrap:anywhere; } .resumo-processo-btn{ - width:100%; text-align:left; font:inherit; font-size:12.5px; font-weight:600; color:var(--accent); + width:100%; text-align:center; font:inherit; font-size:12.5px; font-weight:600; color:var(--accent); background:var(--accent-wash); border:1px solid var(--border); border-radius:8px; padding:8px 10px; - cursor:pointer; + cursor:pointer; margin-top:12px; } .resumo-processo-btn:hover{ border-color:var(--accent); } - #resumoProcessoNum{ display:block; text-align:center; margin-top:2px; } .resumo-processo-content{ - margin-top:10px; max-height:46vh; overflow-y:auto; overflow-wrap:anywhere; font-size:12px; - line-height:1.55; color:var(--ink-2); + margin-top:14px; max-height:60vh; overflow-y:auto; overflow-wrap:anywhere; + font-size:14px; line-height:1.65; color:var(--ink-2); + background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px 18px; } .resumo-processo-content h1, .resumo-processo-content h2, .resumo-processo-content h3{ font-family:"Source Serif 4",serif; color:var(--ink); margin:12px 0 4px; line-height:1.3; @@ -298,7 +305,10 @@ } .selection-ring{ border:2px solid var(--accent); box-shadow:0 0 0 3px var(--accent-wash); } #tooltip{ - position:absolute; pointer-events:none; max-width:320px; z-index:5; + /* fixed (not absolute-in-wrap) so a tall/near-edge tooltip overlays the + page instead of expanding .detail-card's scrollable box and popping a + scrollbar */ + position:fixed; pointer-events:none; max-width:320px; z-index:5; background:var(--surface); border:1px solid var(--border); border-radius:9px; box-shadow:0 6px 20px rgba(0,0,0,.16); padding:10px 12px; font-size:12.5px; color:var(--ink-2); line-height:1.5; display:none; @@ -332,7 +342,11 @@ td.type{ white-space:nowrap; color:var(--ink-2); } td.people{ color:var(--ink-2); max-width:220px; } td.text{ color:var(--ink); max-width:520px; } - td.file{ font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--ink-3); max-width:220px; overflow-wrap:anywhere; } + td.file{ + font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--ink-3); max-width:220px; + overflow-wrap:anywhere; cursor:pointer; + } + td.file:hover{ color:var(--accent); text-decoration:underline; } .table-foot{ display:flex; align-items:center; justify-content:center; gap:12px; padding:14px; } .table-foot button{ border:1px solid var(--border); background:var(--page); color:var(--ink); @@ -384,8 +398,8 @@ Linha do tempo interativa da Pet16704 (STF) — um ponto por documento, agrupado pela instituição de origem e posicionado pela data real de juntada — cruzada com o resumo de cada um dos 53 processos conexos (o inquérito-mãe Inq 5026 — Operação - Compliance Zero — e os demais inquéritos e petições apartadas, reunidos em parte1/ - e parte2/). Clique em qualquer ponto da linha do tempo para abrir o resumo do + Compliance Zero — e os demais inquéritos e petições apartadas, reunidos em resumos/parte1/ + e resumos/parte2/). Clique em qualquer ponto da linha do tempo para abrir o resumo do documento e, dali, o resumo completo do processo a que ele pertence.

@@ -471,22 +485,22 @@

-