/* * mobile.css — responsive overrides for the Argus Linode dashboard * Breakpoints: mobile < 768px | tablet 768–1024px | desktop > 1024px (base styles) * Loaded at end of base.html . All selectors are additive — no desktop styles changed. */ /* ── Hamburger button (hidden on desktop) ─────────────────────── */ .hamburger { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; background: transparent; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; padding: 0; flex-shrink: 0; color: var(--text); font-size: 1.1rem; line-height: 1; } .hamburger:hover { background: rgba(0,192,243,0.08); border-color: var(--accent); } /* ── Nav overlay (behind open sidebar on mobile) ──────────────── */ .nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 99; } /* ── Table scroll wrapper ─────────────────────────────────────── */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ── Mobile card lists (replace tables on mobile) ─────────────── */ .mobile-card-list { display: none; } .pi-mobile-list { display: none; } .assigned-pi-mobile-list { display: none; } @media (max-width: 767px) { /* ── Sidebar / nav ───────────────────────────────────────────── */ .sidebar { transform: translateX(-100%); transition: transform 0.22s ease; z-index: 100; } body.nav-open .sidebar { transform: translateX(0); } body.nav-open .nav-overlay { display: block; } .app-body { margin-left: 0 !important; } /* ── Topbar ─────────────────────────────────────────────────── */ .topbar { padding: 0 0.85rem; gap: 0.5rem; } .hamburger { display: flex; } .topbar-breadcrumb { font-size: 0.78rem; } /* Long breadcrumbs: truncate middle crumbs, always show current */ .topbar-breadcrumb .crumb:not(.current) { display: none; } .topbar-breadcrumb .sep { display: none; } /* ── Main content padding ────────────────────────────────────── */ main { padding: 1rem 0.85rem; } /* ── Page header ────────────────────────────────────────────── */ .page-header { flex-direction: column; align-items: flex-start; gap: 0.65rem; margin-bottom: 1rem; } .page-header h1 { font-size: 1rem; } .page-header .actions { margin-left: 0; flex-wrap: wrap; gap: 0.4rem; } /* ── Buttons — 44px min tap target ──────────────────────────── */ .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0 1rem; } .btn-sm { min-height: 36px; padding: 0 0.75rem; font-size: 0.78rem; } /* ── Stat grid — 2-up on mobile ─────────────────────────────── */ .stats { grid-template-columns: repeat(2, 1fr) !important; gap: 0.65rem; } .stat .value { font-size: 1.75rem; } /* ── Two-column layouts → single column ─────────────────────── */ .cols, .cols-3 { grid-template-columns: 1fr !important; } /* ── Cards ──────────────────────────────────────────────────── */ .card { padding: 1rem; margin-bottom: 0.75rem; } /* ── Tables — wrap in scroll container ──────────────────────── */ .card > table, .card > div > table { min-width: 520px; } /* Wrap any table that isn't already in a .table-scroll div */ .card table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ── Forms ──────────────────────────────────────────────────── */ input[type=text], input[type=password], input[type=email], input[type=number], input[type=tel], select, textarea { font-size: 16px; /* prevent iOS zoom on focus */ min-height: 44px; } .form-inline { flex-direction: column; } /* ── Flash messages ─────────────────────────────────────────── */ .flash { font-size: 0.82rem; } /* ───────────────────────────────────────────────────────────── * dashboard.html — stat cards already handled by .stats above. * Engagement cards (details/summary) stay as-is — they are * already a vertical list. Run rows inside them get tap targets. * ───────────────────────────────────────────────────────────── */ .run-row { min-height: 44px; padding: 0.55rem 0.85rem; flex-wrap: wrap; gap: 0.35rem; } .run-row .run-meta { font-size: 0.7rem; } .eng-card > summary { min-height: 52px; padding: 0.65rem 0.85rem; flex-wrap: wrap; gap: 0.35rem; } .eng-meta { flex-wrap: wrap; margin-left: 0; width: 100%; gap: 0.4rem; } .eng-card-actions { padding: 0.5rem 0.85rem; flex-wrap: wrap; } /* ───────────────────────────────────────────────────────────── * engagements.html — hide table, show mobile cards * ───────────────────────────────────────────────────────────── */ .eng-table-desktop { display: none !important; } .mobile-card-list { display: block; } .m-eng-card { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.85rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 0.55rem; text-decoration: none; color: var(--text); min-height: 44px; } .m-eng-card:hover { border-color: rgba(0,192,243,0.3); text-decoration: none; color: var(--text); } .m-eng-card-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .m-eng-name { font-weight: 700; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .m-eng-meta { font-size: 0.75rem; color: var(--muted); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .m-eng-actions { display: flex; justify-content: flex-end; gap: 0.4rem; margin-top: 0.25rem; } /* ───────────────────────────────────────────────────────────── * engagement_detail.html — Assigned Pis * ───────────────────────────────────────────────────────────── */ .assigned-pi-table-desktop { display: none !important; } .assigned-pi-mobile-list { display: block; } .m-assigned-pi-card { background: rgba(0,0,0,0.15); border: 1px solid var(--border); border-radius: 7px; padding: 0.85rem; margin-bottom: 0.55rem; } .m-assigned-pi-top { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; } .m-assigned-pi-name { font-weight: 700; font-size: 0.9rem; color: var(--accent); } .m-assigned-pi-meta { font-size: 0.75rem; color: var(--muted); margin-bottom: 0.65rem; padding-left: 1.3rem; } .m-assigned-pi-remove { width: 100%; justify-content: center; } /* ───────────────────────────────────────────────────────────── * engagement_detail.html — forms / runs / devices * ───────────────────────────────────────────────────────────── */ /* Dispatch form: everything single-column, full-width */ #dispatch-form > div[style*="grid"] { display: block !important; } #dispatch-form > div[style*="grid"] > div { margin-bottom: 0.65rem; } /* Manual creds: override inline grid */ #manual-creds { display: block !important; } #manual-creds > div { margin-bottom: 0.65rem; } /* Dispatch submit button full-width */ #dispatch-form .btn { width: 100%; } /* Provisioning link form selects stack */ .form-inline select, .form-inline input { width: 100%; } /* Runs table on engagement detail — hide less-critical columns */ #eng-runs th:nth-child(2), /* Pi */ #eng-runs td:nth-child(2), #eng-runs th:nth-child(6), /* H/M/L */ #eng-runs td:nth-child(6) { display: none; } /* Devices table — hide lower-priority columns */ #tbl-eng-devices th:nth-child(4), /* OS */ #tbl-eng-devices td:nth-child(4), #tbl-eng-devices th:nth-child(5), /* SSH */ #tbl-eng-devices td:nth-child(5), #tbl-eng-devices th:nth-child(6), /* Config */ #tbl-eng-devices td:nth-child(6), #tbl-eng-devices th:nth-child(7), /* ARP */ #tbl-eng-devices td:nth-child(7), #tbl-eng-devices th:nth-child(8), /* MACs */ #tbl-eng-devices td:nth-child(8), #tbl-eng-devices th:nth-child(9), /* First seen */ #tbl-eng-devices td:nth-child(9), #tbl-eng-devices th:nth-child(10), /* Last seen */ #tbl-eng-devices td:nth-child(10) { display: none; } /* Topology: reduce height on mobile so it doesn't dominate */ #topo-container { height: 300px !important; } /* ───────────────────────────────────────────────────────────── * pis.html — hide table, show mobile cards * ───────────────────────────────────────────────────────────── */ .pi-table-desktop { display: none !important; } .pi-mobile-list { display: block; } .m-pi-card { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 0.55rem; text-decoration: none; color: var(--text); min-height: 56px; } .m-pi-card:hover { border-color: rgba(0,192,243,0.3); text-decoration: none; color: var(--text); } .m-pi-dot { flex-shrink: 0; } .m-pi-info { flex: 1; min-width: 0; } .m-pi-name { font-weight: 700; font-size: 0.9rem; } .m-pi-sub { font-size: 0.74rem; color: var(--muted); display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.15rem; } .m-pi-arrow { color: var(--muted); font-size: 0.9rem; flex-shrink: 0; } /* ───────────────────────────────────────────────────────────── * pi_detail.html — action buttons stack vertically * ───────────────────────────────────────────────────────────── */ .pi-actions-mobile { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; } .pi-actions-mobile .btn { width: 100%; } /* Beacon history: hide lower-priority columns */ .beacon-table th:nth-child(3), /* Public IP */ .beacon-table td:nth-child(3), .beacon-table th:nth-child(5), /* VPN IP */ .beacon-table td:nth-child(5) { display: none; } /* ───────────────────────────────────────────────────────────── * run_detail.html * ───────────────────────────────────────────────────────────── */ /* Device table — keep IP, Hostname, Vendor/Model, SSH; hide rest */ #tbl-devices th:nth-child(4), /* OS/Version */ #tbl-devices td:nth-child(4), #tbl-devices th:nth-child(5), /* Serial */ #tbl-devices td:nth-child(5), #tbl-devices th:nth-child(7), /* Config */ #tbl-devices td:nth-child(7), #tbl-devices th:nth-child(8), /* ARP */ #tbl-devices td:nth-child(8), #tbl-devices th:nth-child(9), /* MACs */ #tbl-devices td:nth-child(9) { display: none; } /* Run metadata table: stack into single column */ .run-meta-table { display: none; } .run-meta-stack { display: block !important; } /* Findings: pad Acknowledge button for tap */ .finding .btn { min-height: 36px; } .finding .f-title { padding-right: 0 !important; } .finding > div[style*="absolute"] { position: static !important; display: flex; justify-content: flex-end; margin-bottom: 0.4rem; } } /* ── Tablet: narrower sidebar, content still visible ──────────── */ @media (min-width: 768px) and (max-width: 1024px) { :root { --sidebar-w: 175px; } .stats { grid-template-columns: repeat(3, 1fr) !important; } }