Skip to content

Commit 9041b4e

Browse files
Edinaldo-longEdinaldo-long
authored
Refactor header styles and improve layout
1 parent c2e23e3 commit 9041b4e

1 file changed

Lines changed: 94 additions & 80 deletions

File tree

‎relatorio.html‎

Lines changed: 94 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -13,37 +13,76 @@
1313
--text-muted: #5a7a5a; --border: #c8dcc8;
1414
}
1515
* { margin:0; padding:0; box-sizing:border-box; }
16-
17-
/* ── FIX PRINCIPAL: impede qualquer elemento de vazar além da viewport ── */
1816
html { overflow-x: hidden; }
1917
body {
2018
font-family:'Syne',sans-serif; background:var(--bg); color:var(--text);
21-
min-height:100vh;
22-
overflow-x: hidden;
19+
min-height:100vh; overflow-x: hidden;
2320
}
2421

22+
/* ══════════════════════════════════
23+
HEADER — logo + nome + tagline + botão
24+
sempre em UMA linha, sem display:none no nome
25+
══════════════════════════════════ */
2526
header {
26-
background:#0a0a0a; padding:0 1.25rem;
27-
display:flex; align-items:center; justify-content:space-between;
28-
height:70px;
27+
background:#0a0a0a;
28+
padding:0 1rem;
29+
display:flex;
30+
align-items:center;
31+
justify-content:space-between;
32+
height:64px;
2933
position:sticky; top:0; z-index:100;
3034
box-shadow:0 2px 16px rgba(0,0,0,.4);
3135
border-bottom:2px solid var(--verde-mid);
32-
width:100%;
33-
max-width:100vw;
36+
width:100%; max-width:100vw;
37+
gap:8px;
38+
}
39+
.header-brand {
40+
display:flex; align-items:center; gap:8px;
41+
flex:1; min-width:0; overflow:hidden;
42+
}
43+
.header-logo-img {
44+
height:40px; width:auto; object-fit:contain; flex-shrink:0;
45+
filter:brightness(1.2) drop-shadow(0 0 10px rgba(255,100,0,.7));
46+
}
47+
.header-divider {
48+
width:1px; height:28px;
49+
background:rgba(255,255,255,.18); flex-shrink:0;
50+
}
51+
.header-name {
52+
display:flex; flex-direction:column; min-width:0; flex-shrink:1;
53+
}
54+
.header-name strong {
55+
color:#fff; font-size:1rem; font-weight:700;
56+
letter-spacing:.02em; line-height:1.15;
57+
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
58+
}
59+
.header-name small {
60+
color:var(--verde-light); font-size:.58rem; font-weight:600;
61+
letter-spacing:.07em; text-transform:uppercase;
62+
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
63+
}
64+
.header-right {
65+
display:flex; align-items:center; gap:10px; flex-shrink:0;
3466
}
35-
.header-brand { display:flex; align-items:center; gap:10px; min-width:0; overflow:hidden; }
36-
.header-divider { width:1px; height:32px; background:rgba(255,255,255,.12); flex-shrink:0; }
37-
.header-name { display:flex; flex-direction:column; min-width:0; overflow:hidden; }
38-
.header-name strong { color:#fff; font-size:1.1rem; font-weight:700; letter-spacing:.03em; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
39-
.header-logo-img { height:52px; width:auto; object-fit:contain; flex-shrink:0; filter:brightness(1.2) drop-shadow(0 0 12px rgba(255,100,0,.7)); }
40-
.header-right { display:flex; align-items:center; gap:12px; flex-shrink:0; margin-left:auto; padding-left:10px; }
4167
.header-title { display:flex; flex-direction:column; align-items:flex-end; }
42-
.header-title span:first-child { font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--verde-light); }
43-
.header-title span:last-child { font-family:'DM Mono',monospace; font-size:.65rem; color:rgba(255,255,255,.5); }
44-
.btn-voltar { display:flex; align-items:center; gap:6px; padding:5px 12px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:20px; color:rgba(255,255,255,.75); font-family:'DM Mono',monospace; font-size:.72rem; text-decoration:none; transition:all .15s; white-space:nowrap; flex-shrink:0; }
68+
.header-title span:first-child {
69+
font-size:.65rem; font-weight:700; letter-spacing:.1em;
70+
text-transform:uppercase; color:var(--verde-light);
71+
}
72+
.header-title span:last-child {
73+
font-family:'DM Mono',monospace; font-size:.6rem; color:rgba(255,255,255,.45);
74+
}
75+
.btn-voltar {
76+
display:flex; align-items:center; gap:6px; padding:5px 12px;
77+
background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
78+
border-radius:20px; color:rgba(255,255,255,.75);
79+
font-family:'DM Mono',monospace; font-size:.72rem;
80+
text-decoration:none; transition:all .15s;
81+
white-space:nowrap; flex-shrink:0;
82+
}
4583
.btn-voltar:hover { background:rgba(255,255,255,.18); color:#fff; }
4684

85+
/* ── main ── */
4786
main { max-width:1200px; margin:0 auto; padding:2rem 1rem; display:grid; gap:1.5rem; width:100%; }
4887

4988
.section-title { font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); display:flex; align-items:center; gap:8px; }
@@ -66,7 +105,6 @@
66105
}
67106
.btn-imprimir:hover { background:var(--verde); }
68107

69-
/* ── Tabela com scroll interno — não vaza ── */
70108
.historico-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }
71109
table { width:100%; border-collapse:collapse; font-size:.84rem; }
72110
thead th { background:var(--verde); color:#fff; padding:10px 14px; text-align:center; font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
@@ -85,17 +123,11 @@
85123
gap:1rem;
86124
margin-bottom:1.5rem;
87125
}
88-
89126
.resumo-card {
90-
background:var(--card);
91-
border:2px solid var(--border);
92-
border-radius:16px;
93-
padding:1.2rem .75rem 1rem;
94-
text-align:center;
95-
position:relative;
96-
cursor:help;
97-
overflow:visible;
98-
min-width:0;
127+
background:var(--card); border:2px solid var(--border);
128+
border-radius:16px; padding:1.2rem .75rem 1rem;
129+
text-align:center; position:relative;
130+
cursor:help; overflow:visible; min-width:0;
99131
}
100132
.resumo-card::before {
101133
content:''; position:absolute; top:0; left:0; right:0;
@@ -109,37 +141,19 @@
109141
.resumo-valor.alerta { color:var(--amarelo); }
110142
.resumo-valor.critico { color:var(--vermelho); }
111143
.resumo-status { font-size:.65rem; font-weight:700; letter-spacing:.04em; margin-top:4px; }
112-
113-
.limite-ref {
114-
margin-top:8px;
115-
font-family:'DM Mono',monospace;
116-
font-size:.62rem;
117-
color:var(--text-muted);
118-
letter-spacing:.02em;
119-
}
144+
.limite-ref { margin-top:8px; font-family:'DM Mono',monospace; font-size:.62rem; color:var(--text-muted); letter-spacing:.02em; }
120145

121146
/* ─── ESCALA DE AMPLITUDE ─── */
122147
.amp-escala {
123-
display:flex;
124-
flex-direction:column;
125-
gap:4px;
126-
margin-top:10px;
127-
padding:8px;
128-
background:#f5f9f5;
129-
border-radius:10px;
130-
border:1px solid var(--border);
148+
display:flex; flex-direction:column; gap:4px;
149+
margin-top:10px; padding:8px;
150+
background:#f5f9f5; border-radius:10px; border:1px solid var(--border);
131151
}
132152
.amp-tag {
133-
display:flex;
134-
align-items:center;
135-
justify-content:space-between;
136-
font-size:.65rem;
137-
font-weight:700;
138-
padding:4px 8px;
139-
border-radius:6px;
140-
letter-spacing:.02em;
141-
opacity:.55;
142-
transition:opacity .2s, transform .2s;
153+
display:flex; align-items:center; justify-content:space-between;
154+
font-size:.65rem; font-weight:700; padding:4px 8px;
155+
border-radius:6px; letter-spacing:.02em;
156+
opacity:.55; transition:opacity .2s, transform .2s;
143157
}
144158
.amp-tag .amp-label { flex:1; text-align:left; }
145159
.amp-tag .amp-range { font-family:'DM Mono',monospace; font-size:.62rem; opacity:.85; }
@@ -148,25 +162,16 @@
148162
.amp-tag.critico { background:#ffebee; color:#c62828; }
149163
.amp-tag.ativo { opacity:1; transform:scale(1.03); outline:2px solid currentColor; outline-offset:1px; }
150164

151-
/* ─── TOOLTIP GLOBAL (position:fixed — sem clipping) ─── */
165+
/* ─── TOOLTIP ─── */
152166
.tooltip-box {
153-
visibility: hidden;
154-
opacity: 0;
155-
position: fixed;
156-
background: #1a2a1a;
157-
color: #fff;
158-
font-family: 'DM Mono', monospace;
159-
font-size: .72rem;
160-
line-height: 1.6;
161-
padding: 10px 14px;
162-
border-radius: 10px;
163-
width: 230px;
164-
max-width: calc(100vw - 24px);
165-
text-align: left;
166-
z-index: 9999;
167+
visibility: hidden; opacity: 0;
168+
position: fixed; background: #1a2a1a; color: #fff;
169+
font-family: 'DM Mono', monospace; font-size: .72rem;
170+
line-height: 1.6; padding: 10px 14px; border-radius: 10px;
171+
width: 230px; max-width: calc(100vw - 24px);
172+
text-align: left; z-index: 9999;
167173
box-shadow: 0 4px 16px rgba(0,0,0,.35);
168-
transition: opacity .2s, visibility .2s;
169-
pointer-events: none;
174+
transition: opacity .2s, visibility .2s; pointer-events: none;
170175
}
171176
.tooltip-box.visivel { visibility: visible; opacity: 1; }
172177
.tooltip { display: none !important; }
@@ -184,13 +189,23 @@
184189
.tooltip-box { display:none !important; }
185190
}
186191

192+
/* ── MOBILE — nome NUNCA some ── */
187193
@media (max-width:700px) {
188194
main { padding:1rem .75rem; gap:1rem; }
189195
.resumo-grid { grid-template-columns:1fr 1fr; gap:.75rem; }
196+
/* título do header (Histórico / período) some, mas nome fica */
190197
.header-title { display:none; }
191-
/* Esconde nome e divisor — logo + botão ficam limpos e sem sobreposição */
192-
.header-name { display:none; }
198+
.header-logo-img { height:34px; }
199+
.header-name strong { font-size:.88rem; }
200+
.header-name small { font-size:.52rem; }
201+
.btn-voltar { font-size:.65rem; padding:4px 9px; }
202+
}
203+
204+
@media (max-width:380px) {
205+
.header-name strong { font-size:.75rem; }
206+
.header-name small { display:none; }
193207
.header-divider { display:none; }
208+
.btn-voltar { font-size:.6rem; padding:4px 7px; }
194209
}
195210
</style>
196211
</head>
@@ -200,10 +215,11 @@
200215
<div class="header-brand">
201216
<img src="logo.png" alt="Vansan Therm" class="header-logo-img"
202217
onerror="this.style.display='none';document.getElementById('flame-fallback').style.display='inline'">
203-
<span id="flame-fallback" style="display:none;font-size:1.5rem;line-height:1;">🔥</span>
218+
<span id="flame-fallback" style="display:none;font-size:1.4rem;line-height:1;flex-shrink:0;">🔥</span>
204219
<div class="header-divider"></div>
205220
<div class="header-name">
206221
<strong>Vansan Therm</strong>
222+
<small>Monitoramento Inteligente</small>
207223
</div>
208224
</div>
209225
<div class="header-right">
@@ -297,7 +313,7 @@
297313
</main>
298314

299315
<footer>
300-
Vansan Therm · ANVISA RDC 301 · Laboratório · Responsável: Edinado Santos de Almeida<br>
316+
Vansan Therm · Monitoramento Inteligente · ANVISA RDC 301 · Responsável: Edinado Santos de Almeida<br>
301317
Limites ANVISA: Temperatura 15°C – 25°C | Umidade Relativa 40% – 70%
302318
</footer>
303319

@@ -413,13 +429,11 @@
413429

414430
carregar();
415431

416-
// ── Tooltip universal — position:fixed, sem clipping ──
432+
// ── Tooltip universal ──
417433
(function() {
418434
const tooltipEl = document.getElementById('tooltip-global');
419435

420-
function esconder() {
421-
tooltipEl.classList.remove('visivel');
422-
}
436+
function esconder() { tooltipEl.classList.remove('visivel'); }
423437

424438
function posicionar(card) {
425439
const r = card.getBoundingClientRect();

0 commit comments

Comments
 (0)