b0txec
41 lines
4.3 KiB
CSS
41 lines
4.3 KiB
CSS
.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;align-items:center;gap:10px;margin:18px 0}
|
|
.warningCard{position:relative;display:flex;align-items:center;gap:9px;height:44px;flex:0 0 auto;padding:0 12px 0 10px;border:1.5px solid var(--border);border-radius:12px;background:rgba(255,255,255,.65);transition:box-shadow 200ms}
|
|
.warningCardOpen{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;height:32px;padding:0 16px;border:none;border-radius:8px;appearance:none;font:inherit;color:#fff;cursor:pointer;transition:filter 150ms}
|
|
.warningCardOpen:hover{filter:brightness(1.08)}
|
|
.warningCardOpen:active{filter:brightness(.92)}
|
|
.warningCardIcon{display:flex;align-items:center}
|
|
.warningCardText{font-size:14px;font-weight:600;white-space:nowrap}
|
|
.warningCard.yellow .warningCardOpen{background:#caa000}
|
|
.warningCard.orange .warningCardOpen{background:#c1580f}
|
|
.warningCard.red .warningCardOpen{background:#b91c1c}
|
|
.warningCard.active{box-shadow:0 0 0 3px var(--accent-pale)}
|
|
|
|
.warningCheckboxLabel{position:relative;display:inline-flex;flex:0 0 auto;width:22px;height:22px;cursor:pointer}
|
|
.warningCheckboxLabel .warningCheckboxInput{position:absolute;opacity:0;height:0;width:0;margin:0}
|
|
.warningCheckmark{position:absolute;inset:0;background-color:#eee;border-radius:5px;transition:background-color .3s;box-shadow:0 2px 5px rgba(0,0,0,.2)}
|
|
.warningCheckmark:after{content:"";position:absolute;display:none;left:7px;top:3px;width:5px;height:10px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
|
|
.warningCheckboxInput:checked ~ .warningCheckmark{background-color:#2196F3;box-shadow:0 3px 7px rgba(33,150,243,.3)}
|
|
.warningCheckboxInput:checked ~ .warningCheckmark:after{display:block;animation:warningCheckAnim .2s forwards}
|
|
@keyframes warningCheckAnim{0%{height:0}100%{height:10px}}
|
|
|
|
.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:900px;max-height:85vh;overflow-y:auto;padding:32px 36px;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}}
|