/* * CloudGate panel — view modes (PC skin vs smartphone skin). * * The panel now has two DISTINCT, user-switchable skins instead of media queries * silently overriding the desktop look. The choice lives on the element as * data-view, set by panel.js (and applied pre-paint in View::page): * * data-view="desktop" → the colleague's ORIGINAL design (panel.css only) — pristine, * nothing in this file applies, so the PC look is untouched. * data-view="mobile" → the smartphone-optimised skin below (always, at any width). * * The "Авто" mode picks "mobile" under ~1000px and "desktop" above. Switch it in * Настройки → Интерфейс → «Вид панели». This is additive: it never edits panel.css. */ /* ===== Smartphone skin — applies ONLY when html[data-view="mobile"] ===== */ html[data-view="mobile"] .content { padding: 16px; } html[data-view="mobile"] .content h2 { font-size: 1.15rem; } /* Fluid stat grid — reflows 4→3→2→1 as width changes. */ html[data-view="mobile"] .stats { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } /* Layout stacks; the sidebar becomes a two-row sticky top bar: row 1 = logo (left) + logout (right); row 2 = nav as a scrollable tab strip. */ html[data-view="mobile"] .layout { flex-direction: column; } html[data-view="mobile"] .sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 14px; position: sticky; top: 0; z-index: 50; background: var(--bg-deep); border-right: none; border-bottom: 1px solid var(--border); } html[data-view="mobile"] .sidebar-logo { padding: 0; margin: 0; border-bottom: none; font-size: 1rem; white-space: nowrap; } html[data-view="mobile"] .sidebar-bottom { order: 1; margin-left: auto; padding: 0; border-top: none; } html[data-view="mobile"] .sidebar-nav { order: 2; flex-basis: 100%; display: flex; gap: 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; } html[data-view="mobile"] .sidebar-nav a { flex: 0 0 auto; padding: 8px 14px; border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; } html[data-view="mobile"] .sidebar-nav a.active, html[data-view="mobile"] .sidebar-nav a:hover { border-left: none; border-bottom: 3px solid var(--accent); } /* Chip-bar: a horizontal scroll strip so it never eats vertical space. */ html[data-view="mobile"] .chip-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; margin-bottom: 16px; } html[data-view="mobile"] .chip, html[data-view="mobile"] .chip-refresh { flex: 0 0 auto; } html[data-view="mobile"] .table-wrap { -webkit-overflow-scrolling: touch; } html[data-view="mobile"] .modal-overlay { padding: 10px; } html[data-view="mobile"] .modal { padding: 18px; max-height: 92vh; border-radius: 10px; } html[data-view="mobile"] .detail-grid { grid-template-columns: 1fr; } /* Wide tables marked `cards` stack into readable cards (no side-scroll). */ html[data-view="mobile"] table.cards, html[data-view="mobile"] table.cards thead, html[data-view="mobile"] table.cards tbody, html[data-view="mobile"] table.cards tr, html[data-view="mobile"] table.cards td { display: block; width: 100%; } html[data-view="mobile"] table.cards thead { position: absolute; left: -9999px; } html[data-view="mobile"] table.cards tr { margin-bottom: 12px; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); } html[data-view="mobile"] table.cards td { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; text-align: right; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } html[data-view="mobile"] table.cards td:last-child { border-bottom: none; } html[data-view="mobile"] table.cards td::before { content: attr(data-label); flex: 0 0 auto; text-align: left; color: var(--text-muted); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; } html[data-view="mobile"] table.cards td.card-title { display: block; text-align: left; padding: 4px 0 8px; } html[data-view="mobile"] table.cards td.card-title::before { content: none; } /* Phone-width fine-tuning WITHIN the mobile skin. */ @media (max-width: 480px) { html[data-view="mobile"] .content { padding: 12px; } html[data-view="mobile"] .stats { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; } html[data-view="mobile"] .stat-card { padding: 14px; } html[data-view="mobile"] .stat-card .value { font-size: 1.4rem; } html[data-view="mobile"] .stat-card .label { font-size: 0.72rem; } html[data-view="mobile"] .stat-card .stat-spark { height: 1.4rem; margin-top: 8px; } html[data-view="mobile"] .stat-trend { font-size: 0.68rem; } html[data-view="mobile"] .controls { gap: 8px; } html[data-view="mobile"] .controls input, html[data-view="mobile"] .controls select { min-width: 0; width: 100%; } html[data-view="mobile"] .controls .switch { margin-left: 0 !important; } } @media (max-width: 340px) { html[data-view="mobile"] .stats { grid-template-columns: 1fr; } }