// ───────────────────────────────────────────────────────────────────────────── // Page: Stable Symbols (.ss-* layout) // File: src/scss/pages/_stable.scss // // STRUCTURAL LAYOUT ONLY — zero colors, zero typography here. // Visual rules live in components/_stable.scss. // ───────────────────────────────────────────────────────────────────────────── // ── Intel page header (shared with subpages) ────────────────────────────────── .intel-page-header { margin-bottom: 1.25rem; } // ── Intel meta context bar ──────────────────────────────────────────────────── .intel-meta-bar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; padding: 0.5rem 0.85rem; margin-bottom: 1rem; } // ── Stat row ────────────────────────────────────────────────────────────────── .ss-stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 1.25rem; @media (max-width: 600px) { grid-template-columns: repeat(2, 1fr); } } .ss-stat-card { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.85rem 1rem; } // ── Filter bar ──────────────────────────────────────────────────────────────── .intel-filter-bar { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap; } .intel-filter-pills { display: flex; gap: 0.4rem; flex-wrap: wrap; } .intel-filter-top { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; } .intel-filter-pill { padding: 3px 10px; &--sm { padding: 2px 7px; } } // ── Detail page ─────────────────────────────────────────────────────────────── .ss-detail-hd { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.1rem 1.25rem; margin-bottom: 1rem; } .ss-detail-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 1rem; @media (max-width: 600px) { grid-template-columns: repeat(2, 1fr); } } .ss-detail-chip { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; padding: 0.75rem 1rem; } .ss-detail-card { padding: 1rem 1.25rem; margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.5rem; } .ss-detail-card-title { margin-bottom: 0.25rem; } .ss-activity-row { padding: 0.35rem 0; } .ss-deps-list { } // ── Symbol list ─────────────────────────────────────────────────────────────── .ss-list { display: flex; flex-direction: column; } .ss-address { flex: 1; display: flex; align-items: center; gap: 0; min-width: 0; }