/* ╔══════════════════════════════════════════════════════════════════╗ ║ GLONECT · CSS Override for Flutter Web ║ ║ Inject into: /var/www/logistiq/build/web/assets/theme/g.css ║ ║ Add to index.html : ║ ║ ║ ╚══════════════════════════════════════════════════════════════════╝ */ :root { --g-white: #ffffff; --g-ice: #e8f1ff; --g-sky3: #4fc3f7; --g-sky4: #29b6f6; --g-b5: #1e88e5; --g-b6: #1565c0; --g-b7: #0d47a1; --g-b8: #0a2f6e; --g-navy: #061428; --g-text: #0a1628; --g-mid: #1a3a6e; --g-muted: #4a6fa5; --g-brd: rgba(21,101,192,0.11); --g-brdh: rgba(21,101,192,0.26); } /* ── App background ────────────────────────────── */ body, flt-glass-pane, #app { background-color: var(--g-white) !important; font-family: 'Inter', 'Exo 2', sans-serif !important; } /* ── Scrollbars ────────────────────────────────── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: var(--g-white); } ::-webkit-scrollbar-thumb { background: var(--g-brdh); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--g-b6); } /* ── Login screen override ─────────────────────── */ /* The Flutter web login is replaced by login.html */ /* This CSS handles the transition shimmer */ flt-glass-pane * { box-sizing: border-box; } /* ── Material buttons → brand gradient ────────── */ button.MuiButton-containedPrimary, [data-flutter-action="login"], flt-semantics button[aria-label*="Войти"], flt-semantics button[aria-label*="Enter"], flt-semantics button[aria-label*="Login"] { background: linear-gradient(135deg, var(--g-b7), var(--g-b5)) !important; color: #fff !important; border-radius: 12px !important; box-shadow: 0 6px 28px rgba(13,71,161,0.28) !important; } /* ── Sidebar (NavigationRail / Drawer) ─────────── */ [aria-label*="Navigation"] > div, flt-clip:first-child > flt-picture, .sidebar-container { background-color: var(--g-navy) !important; } /* ── App bar ───────────────────────────────────── */ flt-clip[style*="overflow: hidden"]:first-of-type { background: rgba(255,255,255,0.95) !important; backdrop-filter: blur(20px) !important; border-bottom: 1px solid var(--g-brd) !important; } /* ── Loading indicator ─────────────────────────── */ flt-glass-pane .progress-indicator circle, flt-glass-pane [style*="stroke"] circle { stroke: var(--g-b6) !important; } flt-glass-pane [style*="background-color: rgb(33, 150, 243)"] { background-color: var(--g-b6) !important; } /* ── Selection color ───────────────────────────── */ ::selection { background: rgba(21,101,192,0.18); color: var(--g-b7); } /* ── Focus ring ────────────────────────────────── */ :focus-visible { outline: 2px solid var(--g-b5) !important; outline-offset: 2px !important; } /* ── Page loader (before Flutter initializes) ──── */ .loading-overlay { position: fixed; inset: 0; z-index: 9999; background: var(--g-white); display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 24px; transition: opacity 0.4s ease; } .loading-overlay.hide { opacity: 0; pointer-events: none; } .loading-logo { width: 72px; height: 72px; object-fit: contain; animation: lfl 2s ease-in-out infinite; filter: drop-shadow(0 4px 16px rgba(21,101,192,0.35)); } @keyframes lfl { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} } .loading-bar { width: 160px; height: 3px; border-radius: 3px; background: var(--g-ice); overflow: hidden; } .loading-bar::after { content: ''; display: block; height: 100%; width: 40%; background: linear-gradient(90deg, var(--g-b6), var(--g-sky4)); border-radius: 3px; animation: loadBar 1.4s ease-in-out infinite; } @keyframes loadBar { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } }