/* ===================================================================== THEME: PILLS Activated by: Set via: localStorage.setItem('kit.streamTheme', 'pills') or ?theme=pills query param Concept: home stream + spots list become a flowing wall of colored pills, magazine-style. Each pill = one save. Color encodes category. No metadata, no dates, no chrome — just title • tip in a pill. Inspiration: Mousse / Triple Canopy / Leftloft index pages ===================================================================== */ /* ---------- Stream layout becomes inline-wrap ---------- */ body.theme-pills .stream { display: flex; flex-wrap: wrap; align-items: flex-start; /* justify-content distributes pills across full row width — fills horizontal gaps that flex-start would leave, gives a poster feel. */ justify-content: flex-start; gap: 6px 8px; padding: 8px 0 0; flex-direction: row; } /* Hide the date column ("when") and meta entirely in this theme */ body.theme-pills .stream__when, body.theme-pills .stream__meta, body.theme-pills .stream__pending { display: none !important; } /* ---------- Each save becomes a pill ---------- */ body.theme-pills .stream__item { display: inline-flex; align-items: center; flex-direction: row; gap: 0; border-radius: 999px; padding: 9px 18px; border-bottom: 0 !important; border-top: 0 !important; background: var(--pill-bg, #e8e6df); color: var(--pill-fg, var(--ink)); cursor: pointer; transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease; max-width: 100%; min-width: 0; white-space: nowrap; overflow: hidden; flex: 0 0 auto; /* Outline-ready: reserve border space so swap to outlined doesn't shift layout */ border: 1px solid transparent; box-sizing: border-box; } body.theme-pills .stream__item:hover { transform: translateY(-1px); filter: brightness(0.96); box-shadow: 0 2px 8px rgba(0,0,0,0.06); } /* Body wrapper inside each item */ body.theme-pills .stream__body { display: inline-flex; flex-direction: row; align-items: baseline; gap: 8px; min-width: 0; overflow: hidden; } /* Name = bold */ body.theme-pills .stream__name { font-family: var(--sans); font-weight: 600; font-size: 15px; letter-spacing: -0.005em; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; } /* Tip = non-bold, separator dot before */ body.theme-pills .stream__tip { font-family: var(--sans); font-weight: 400; font-size: 15px; letter-spacing: -0.005em; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0; margin-top: 0; } body.theme-pills .stream__tip::before { content: "•"; color: inherit; opacity: 0.5; margin-right: 8px; font-weight: 400; } /* Want-to-go: NO visual distinction in pills theme. The pills view is editorial / wall-style — want vs been is operational metadata that lives in the default theme + edit drawer, not here. Explicitly suppress the default home.css blue-dot ::after that fires on .stream__item.is-want .stream__name across all themes. */ body.theme-pills .stream__item.is-want .stream__name::after { content: none !important; display: none !important; } /* ---------- Category color palette ---------- Each category gets a soft background + readable foreground. Default (no category) uses French blue tinted. Colors picked to feel editorial — warm, dusty, not cartoony. */ /* Default — French blue tint */ body.theme-pills .stream__item { --pill-bg: #d6def0; --pill-fg: #1f2a4a; } /* Eat — warm peach */ body.theme-pills .stream__item[data-category="eat"] { --pill-bg: #f4d4c0; --pill-fg: #5a2e1a; } /* Drink — pink */ body.theme-pills .stream__item[data-category="drink"] { --pill-bg: #f0c8d4; --pill-fg: #5a1f33; } /* Coffee — cream */ body.theme-pills .stream__item[data-category="coffee"] { --pill-bg: #e8dcc4; --pill-fg: #4a3820; } /* Stay — deep blue (kit French blue family) */ body.theme-pills .stream__item[data-category="stay"] { --pill-bg: #c4d0ec; --pill-fg: #1a2850; } /* Shop — yellow */ body.theme-pills .stream__item[data-category="shop"] { --pill-bg: #ecdcb0; --pill-fg: #4a3a10; } /* See — green */ body.theme-pills .stream__item[data-category="see"] { --pill-bg: #d0e4c8; --pill-fg: #1f3a1c; } /* Other — neutral mauve */ body.theme-pills .stream__item[data-category="other"] { --pill-bg: #dcd4e0; --pill-fg: #3a2e44; } /* Pending saves (no place_name yet) — muted ghost */ body.theme-pills .stream__item.stream__pending, body.theme-pills .stream__item:not(.is-structured) { --pill-bg: #e8e6df; --pill-fg: #888; } /* ---------- Stream head (the "Recently saved" label) ---------- */ body.theme-pills .stream__head { margin-bottom: 14px; } /* ---------- Mobile tweaks ---------- */ @media (max-width: 720px) { body.theme-pills .stream { gap: 6px; } body.theme-pills .stream__item { padding: 6px 14px; border-radius: 999px; } body.theme-pills .stream__name, body.theme-pills .stream__tip { font-size: 13px; } } /* ---------- Dark mode adjustments ---------- When dark + pills, soften the pill backgrounds so they don't glow. */ body.dark.theme-pills .stream__item { --pill-bg: #2c3142; --pill-fg: #c8d2eb; } body.dark.theme-pills .stream__item[data-category="eat"] { --pill-bg: #3a2820; --pill-fg: #f4d4c0; } body.dark.theme-pills .stream__item[data-category="drink"] { --pill-bg: #3a1f2c; --pill-fg: #f0c8d4; } body.dark.theme-pills .stream__item[data-category="coffee"] { --pill-bg: #322a1c; --pill-fg: #e8dcc4; } body.dark.theme-pills .stream__item[data-category="stay"] { --pill-bg: #1c2440; --pill-fg: #c4d0ec; } body.dark.theme-pills .stream__item[data-category="shop"] { --pill-bg: #322a14; --pill-fg: #ecdcb0; } body.dark.theme-pills .stream__item[data-category="see"] { --pill-bg: #1f2c1c; --pill-fg: #d0e4c8; } body.dark.theme-pills .stream__item[data-category="other"] { --pill-bg: #2c2630; --pill-fg: #dcd4e0; }