Files
WeatherTool/web/src/pages/warnings/warnings.css
T

31 lines
3.3 KiB
CSS
Raw Normal View History

.warningsPage{max-width:1900px}.warningsHeading{margin-bottom:18px}.warningsSetup{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;padding:18px 0 24px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.warningsSetup h2{margin:0 0 14px;font-size:20px}.warningFilterGrid{display:grid;grid-template-columns:220px 260px minmax(320px,1fr);gap:12px}.warningFilterGrid label{display:grid;gap:5px}.warningFilterGrid label span{font-size:12px;color:var(--text-muted)}.warningTitle input{width:100%}.warningsPreview{padding-top:24px}.warningsPreview canvas{display:block;width:100%;height:auto}.inlineNotice button{margin-left:14px}
.warningSummary{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
.warningCard{display:flex;align-items:center;gap:9px;flex:0 1 190px;padding:12px 16px;border:1px solid var(--border);border-left-width:7px;border-radius:12px;background:rgba(255,255,255,.6);appearance:none;font:inherit;color:var(--text);text-align:left;cursor:pointer;transition:transform 150ms,box-shadow 150ms,background 150ms}
.warningCard:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.warningCard svg{flex:0 0 auto;color:var(--text-muted)}
.warningCard strong{font-size:14px}
.warningCard.yellow{border-left-color:#ffd600}
.warningCard.orange{border-left-color:#f27e20}
.warningCard.red{border-left-color:#cc1c20}
.warningCard.active{background:rgba(255,255,255,.95);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-pale)}
.warningBackdrop{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(10,20,35,.55);backdrop-filter:blur(6px);animation:warningFadeIn 180ms ease}
.warningModal{position:relative;width:100%;max-width:640px;max-height:85vh;overflow-y:auto;padding:28px;border-radius:20px;background:var(--surface);box-shadow:var(--shadow-md);animation:warningPopIn 200ms ease}
.warningModalClose{position:absolute;top:16px;right:16px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:50%;background:var(--surface-strong);color:var(--text-muted);cursor:pointer;transition:background 150ms,color 150ms}
.warningModalClose:hover{background:var(--accent-pale);color:var(--accent-strong)}
.warningModalHeader{display:flex;align-items:center;gap:14px;padding:0 32px 14px 0;margin-bottom:14px;border-bottom:1px solid var(--border)}
.warningModalHeader strong{display:block;font-size:20px}
.warningModalHeader span{display:block;margin-top:2px;color:var(--text-muted);font-size:14px}
.warningModalHeader.yellow svg{color:#caa000}
.warningModalHeader.orange svg{color:#c1580f}
.warningModalHeader.red svg{color:#b91c1c}
.warningModalPeriod{margin:0 0 14px;color:var(--text-muted);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.warningModal p{margin:0 0 14px;line-height:1.55;white-space:pre-line}
.warningRisks{font-style:italic;color:var(--text-muted)}
@keyframes warningFadeIn{from{opacity:0}to{opacity:1}}
@keyframes warningPopIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
@media(max-width:1100px){.warningsSetup{grid-template-columns:1fr}.warningFilterGrid{grid-template-columns:repeat(2,minmax(220px,1fr))}.warningTitle{grid-column:1/-1}}
@media(max-width:650px){.warningFilterGrid,.resolutionChoices{grid-template-columns:1fr}.warningTitle{grid-column:auto}}