/* ===================================================================== THEME: PILLS2 (wild edition) Activated by: via ?theme=pills2 Concept: each save renders in one of 7 distinct visual TREATMENTS, assigned stably by save id. Categories don't drive visual style here — the wall is pure editorial variety. Same save always looks the same. Treatments (cycled by data-treatment="0..6"): 0. Butter yellow gradient pill 1. Light grey solid pill 2. Transparent + thick French blue border, squared (not pill) 3. Soft pink with glow halo 4. Flat saturated yellow, full pill 5. Cream + thin ink border, full pill (the quiet one) 6. Lavender soft fill, full pill Inspiration: contemporary-art-journal index pages. ===================================================================== */ /* ---------- Stream layout ---------- */ body.theme-pills2 .stream { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start; gap: 10px 12px; padding: 8px 0 0; flex-direction: row; } /* Hide date/meta — pills2 is the wall view */ body.theme-pills2 .stream__when, body.theme-pills2 .stream__meta, body.theme-pills2 .stream__pending { display: none !important; } /* ---------- Base pill (shared structure) ---------- Use !important on borders to override the default home.css border-bottom + border-top on stream items. */ body.theme-pills2 .stream__item { display: inline-flex; align-items: center; flex-direction: row; gap: 0; border-radius: 999px; padding: 10px 20px; border: 2px solid transparent !important; box-sizing: border-box; cursor: pointer; transition: transform 140ms ease, box-shadow 200ms ease, filter 140ms ease; max-width: 100%; min-width: 0; white-space: nowrap; overflow: hidden; flex: 0 0 auto; /* Default placeholder — overridden by treatments */ background: #f0eadd; color: #1a1a1a; } body.theme-pills2 .stream__item:hover { transform: translateY(-1px); filter: brightness(0.97); } /* Body wrapper */ body.theme-pills2 .stream__body { display: inline-flex; flex-direction: row; align-items: baseline; gap: 8px; min-width: 0; overflow: hidden; } /* Name = bold sans */ body.theme-pills2 .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 = regular sans */ body.theme-pills2 .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-pills2 .stream__tip::before { content: "•"; color: inherit; opacity: 0.5; margin-right: 8px; font-weight: 400; } /* Want-to-go: no special treatment, suppress default blue dot */ body.theme-pills2 .stream__item.is-want .stream__name::after { content: none !important; display: none !important; } /* ===================================================================== THE 7 TREATMENTS ===================================================================== */ /* TREATMENT 0 — Butter yellow with subtle gradient Top is brighter, bottom slightly deeper. Full pill shape. */ body.theme-pills2 .stream__item[data-treatment="0"] { background: linear-gradient(180deg, #f8e95e 0%, #ead84a 100%); color: #1a1a1a; border-color: transparent !important; } /* TREATMENT 1 — Light grey solid pill, no border, full pill */ body.theme-pills2 .stream__item[data-treatment="1"] { background: #d6d6d4; color: #1a1a1a; border-color: transparent !important; } /* TREATMENT 2 — Transparent + thick French blue border, SQUARED rectangle NOT pill-shaped — softly rounded rectangle. The graphic anchor. */ body.theme-pills2 .stream__item[data-treatment="2"] { background: transparent; color: #2a4ed4; border-color: #2a4ed4 !important; border-radius: 8px; } /* TREATMENT 3 — Soft pink with glow halo, full pill */ body.theme-pills2 .stream__item[data-treatment="3"] { background: #f7d4dc; color: #4a1a28; border-color: transparent !important; box-shadow: 0 0 0 6px rgba(247, 212, 220, 0.4); } body.theme-pills2 .stream__item[data-treatment="3"]:hover { box-shadow: 0 0 0 10px rgba(247, 212, 220, 0.5); } /* TREATMENT 4 — Flat saturated yellow (no gradient), full pill */ body.theme-pills2 .stream__item[data-treatment="4"] { background: #f3e94f; color: #1a1a1a; border-color: transparent !important; } /* TREATMENT 5 — Cream + thin ink border, full pill (the quiet one) */ body.theme-pills2 .stream__item[data-treatment="5"] { background: #f0eadd; color: #2a2a2a; border-color: #b8b4a8 !important; border-width: 1px !important; } /* TREATMENT 6 — Lavender soft fill, full pill */ body.theme-pills2 .stream__item[data-treatment="6"] { background: #d8d2e8; color: #2a2848; border-color: transparent !important; } /* ---------- Mobile tweaks ---------- */ @media (max-width: 720px) { body.theme-pills2 .stream { gap: 8px 10px; } body.theme-pills2 .stream__item { padding: 8px 16px; } body.theme-pills2 .stream__name, body.theme-pills2 .stream__tip { font-size: 14px; } } /* ---------- Stream head spacing ---------- */ body.theme-pills2 .stream__head { margin-bottom: 14px; } /* ---------- Dark mode ---------- */ body.dark.theme-pills2 .stream__item[data-treatment="0"] { background: linear-gradient(180deg, #c8b840 0%, #b8a830 100%); color: #1a1a1a; } body.dark.theme-pills2 .stream__item[data-treatment="1"] { background: #3a3a38; color: #e8e8e6; } body.dark.theme-pills2 .stream__item[data-treatment="2"] { background: transparent; color: #6f8aff; border-color: #6f8aff !important; } body.dark.theme-pills2 .stream__item[data-treatment="3"] { background: #4a2a32; color: #f7d4dc; box-shadow: 0 0 0 6px rgba(74, 42, 50, 0.5); } body.dark.theme-pills2 .stream__item[data-treatment="4"] { background: #d4ca40; color: #1a1a1a; } body.dark.theme-pills2 .stream__item[data-treatment="5"] { background: transparent; color: #c8c4b8; border-color: #5a564c !important; } body.dark.theme-pills2 .stream__item[data-treatment="6"] { background: #3a3450; color: #d8d2e8; }