/* BCS Management — общие стили */ /* Шрифты подключаются через в каждой страницы */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --bg: #030810; --card: rgba(8, 20, 38, 0.95); --border: #1c3e60; --accent: #2d86c8; --text: #f2f9ff; --sub: #9dc4e0; --muted: #7aaece; --green: #2ab87a; --red: #e05252; --grid: rgba(45, 134, 200, 0.07); --input-bg: rgba(4, 14, 28, 0.8); } :root.light { --bg: #dde8f2; --card: rgba(255, 255, 255, 0.98); --border: #a8c4dc; --accent: #1a6eb0; --text: #08141f; --sub: #1a3d5c; --muted: #2e506c; --green: #1a7a50; --red: #c0392b; --grid: rgba(26, 110, 176, 0.1); --input-bg: rgba(220, 235, 248, 0.7); } html, body { height: 100%; } body { font-family: 'IBM Plex Mono', monospace; background: var(--bg); color: var(--text); min-height: 100vh; transition: background .3s, color .3s; } body::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 48px 48px; z-index: 0; pointer-events: none; } /* ── Theme icon ─────────────────────────────────────────────── */ .icon-moon, .icon-sun { display: none; } :root:not(.light) .icon-moon { display: block; } :root.light .icon-sun { display: block; } /* ── BG logo ────────────────────────────────────────────────── */ .bg-logo { position: fixed; inset: 0; z-index: 1; pointer-events: none; display: flex; align-items: center; justify-content: center; } .bg-logo img { width: 110%; height: 110%; object-fit: contain; opacity: .07; filter: grayscale(1) brightness(8); user-select: none; -webkit-user-drag: none; } :root.light .bg-logo img { opacity: .09; filter: grayscale(1) brightness(.2); } /* ── Loader ─────────────────────────────────────────────────── */ .loader-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(3,8,16,.78); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .2s ease; } :root.light .loader-overlay { background: rgba(210,225,240,.84); } .loader-overlay.active { opacity: 1; pointer-events: all; } .loader-frame { position: relative; background: var(--card); border: 1px solid var(--border); border-top: 2px solid var(--accent); backdrop-filter: blur(12px); padding: 28px 36px 24px; display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 220px; } .lf-c { position: absolute; width: 10px; height: 10px; border-color: var(--accent); border-style: solid; opacity: .6; } .lf-tl { top: -1px; left: -1px; border-width: 1px 0 0 1px; } .lf-tr { top: -1px; right: -1px; border-width: 1px 1px 0 0; } .lf-bl { bottom: -1px; left: -1px; border-width: 0 0 1px 1px; } .lf-br { bottom: -1px; right: -1px; border-width: 0 1px 1px 0; } .lf-icon { width: 22px; height: 22px; border: 1.5px solid var(--accent); position: relative; animation: lf-sq 2s ease-in-out infinite; } .lf-icon::after { content: ''; position: absolute; inset: 4px; background: var(--accent); animation: lf-sq 2s ease-in-out infinite reverse; } @keyframes lf-sq { 0%,100% { opacity:.3; } 50% { opacity:1; } } .lf-track { width: 148px; height: 2px; background: var(--border); position: relative; overflow: hidden; } .lf-beam { position: absolute; top: 0; left: -55%; width: 55%; height: 100%; background: linear-gradient(90deg,transparent,var(--accent),transparent); box-shadow: 0 0 6px var(--accent); animation: lf-beam 1.4s ease-in-out infinite; } @keyframes lf-beam { 0% { left:-55%; } 100% { left:110%; } } .lf-status { font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--sub); transition: opacity .12s; } .lf-dots { display: flex; gap: 5px; } .lf-dots span { width: 3px; height: 3px; background: var(--accent); animation: lf-dot 1.2s ease-in-out infinite; } .lf-dots span:nth-child(2) { animation-delay: .2s; } .lf-dots span:nth-child(3) { animation-delay: .4s; } @keyframes lf-dot { 0%,100% { opacity:.15; } 50% { opacity:1; } } /* ── Toast ──────────────────────────────────────────────────── */ #toast-container { position: fixed; top: 8px; left: 50%; transform: translateX(-50%); z-index: 250; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; width: max-content; max-width: calc(100vw - 32px); } .toast { min-width: 300px; max-width: 440px; background: var(--card); border: 1px solid var(--border); border-top: 2px solid; backdrop-filter: blur(12px); padding: 11px 12px 11px 14px; display: flex; align-items: center; gap: 10px; pointer-events: all; position: relative; overflow: hidden; animation: toast-in .28s cubic-bezier(0.34,1.2,0.64,1) both; transition: opacity .2s ease, transform .2s ease; } .toast.t-error { border-top-color: var(--red); } .toast.t-warning { border-top-color: #c97d10; } .toast.t-success { border-top-color: var(--green); } .toast.t-info { border-top-color: var(--accent); } .toast-indicator { width: 6px; height: 6px; flex-shrink: 0; } .toast.t-error .toast-indicator { background: var(--red); } .toast.t-warning .toast-indicator { background: #c97d10; } .toast.t-success .toast-indicator { background: var(--green); } .toast.t-info .toast-indicator { background: var(--accent); } .toast-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .toast-type { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; line-height: 1; } .toast.t-error .toast-type { color: var(--red); } .toast.t-warning .toast-type { color: #c97d10; } .toast.t-success .toast-type { color: var(--green); } .toast.t-info .toast-type { color: var(--accent); } .toast-msg { font-size: 13px; color: var(--text); line-height: 1.45; letter-spacing: .01em; } .toast-close { background: none; border: none; color: var(--muted); cursor: pointer; width: 20px; height: 20px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: color .15s; font-size: 15px; line-height: 1; margin-left: 2px; } .toast-close:hover { color: var(--text); } .toast-prog { position: absolute; bottom: 0; left: 0; right: 0; height: 1px; } .toast.t-error .toast-prog { background: var(--red); } .toast.t-warning .toast-prog { background: #c97d10; } .toast.t-success .toast-prog { background: var(--green); } .toast.t-info .toast-prog { background: var(--accent); } @keyframes toast-in { from { opacity:0; transform:translateY(-14px) scaleX(.97); } to { opacity:1; transform:translateY(0) scaleX(1); } } .toast.toast-out { opacity:0; transform:translateY(-10px) scaleX(.97); transition: opacity .32s ease, transform .32s cubic-bezier(0.4,0,1,1); }