source: Klonkt/src/views/partials/shared-styles.ejs@ 75c6919

<style>
/* ─────────────────────────────────────────────────
   View switcher (timeline ↔ grid + grid-cols picker)
   ───────────────────────────────────────────────── */
.view-switcher-wrap {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  /* Geen extra margin-top: de pill wordt zo gecentreerd tussen de profielkop-
     streep (boven) en de eigen border (onder). De gelijke lucht boven/onder de
     pill komt uit de symmetrische container-padding hieronder. De margin-bottom
     (1.5rem in style.css) blijft lucht naar de feed. */
  margin-top: 0;
}
.view-switcher-wrap .container {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  /* Symmetrische padding → even veel lucht boven als onder de pill (≈8px),
     gecentreerd tussen de twee lijnen. */
  padding: 0.5rem 1rem;
  max-width: 1200px; margin: 0 auto;
  flex-wrap: wrap;
}
.view-switcher {
  display: inline-flex;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.15rem;
}
.view-switch-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.35rem 0.85rem;
  border: 0; background: transparent; color: var(--ink-muted, var(--ink-soft));
  cursor: pointer; border-radius: 999px;
  font-size: 0.85rem; font-family: inherit;
  transition: background 120ms, color 120ms;
}
.view-switch-btn:hover { color: var(--ink); }
/* Actief = wit (lichte achtergrond, donkere tekst). Via aria-selected (element-
   attribuut, door syncAria gezet + op htmx:afterSettle) → htmx-robuust. Op niet-
   feed-pagina's zet syncAria aria-selected=false → beide grijs. */
.view-switch-btn[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Agenda = een EIGEN pill (los van Tijdlijn/Grid, zodat de feed-toggle nooit
   verstoord raakt). Zelfde look als de view-switcher-pill. Zichtbaar in alle modi. */
.agenda-pill { display: inline-flex; align-items: center; }   /* geen box — losse icoon+tekst link */
.vs-agenda {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.35rem 0.5rem;
  color: var(--ink-muted, var(--ink-soft));
  text-decoration: none;
  font-size: 0.9rem; font-family: inherit;
  transition: color 120ms;
}
.vs-agenda:hover { color: var(--ink); }
/* Actief (op de agendapagina) = helder/wit. Element-class (in de OOB-gerenderde
   chrome) i.p.v. body-class-CSS → werkt betrouwbaar ook na htmx-navigatie. */
.vs-agenda.is-active { color: var(--ink); font-weight: 600; }

.grid-cols-picker {
  display: none;     /* desktop-only, see media query */
  gap: 0.2rem;
}
.grid-cols-btn {
  width: 28px; height: 28px;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink-muted, var(--ink-soft));
  border-radius: 4px;
  font-size: 0.8rem; font-weight: 600;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.grid-cols-btn:hover { color: var(--ink); border-color: var(--accent); }
.grid-cols-btn.is-active { background: var(--accent); color: white; border-color: var(--accent); }

/* Show grid-cols picker only on grid view + desktop */
@media (min-width: 720px) {
  body[data-feed-view="grid"] .grid-cols-picker { display: inline-flex; }
}

/* Switcher is hidden only on admin pages — admin has a dedicated layout
   and its own back-button flow where Tijdlijn/Grid is irrelevant. On
   every other page (home, post, tag, archive, search, account) it stays
   visible so the user keeps a consistent return-to-feed control. */
.on-admin .view-switcher-wrap { display: none; }

/* Op een losse post is er geen feed om te schakelen, dus geen knop hoort "actief"
   (gekleurd) te ogen. De actieve staat zit in style.css op body[data-feed-view]
   / body[data-grid-cols] (background:var(--ink)); we overrulen die SPECIFIEKER
   via body.on-post zodat de knoppen neutraal/grijs worden — maar wél klikbaar
   blijven (de klik-handler navigeert dan naar de feed in die weergave). De
   body-class wisselt client-side bij HTMX-nav, dus dit werkt ook zonder reload. */
body.on-post[data-feed-view="timeline"] .view-switch-btn[data-view="timeline"],
body.on-post[data-feed-view="grid"] .view-switch-btn[data-view="grid"],
body.on-post[data-grid-cols="2"] .grid-cols-btn[data-cols="2"],
body.on-post[data-grid-cols="3"] .grid-cols-btn[data-cols="3"],
body.on-post[data-grid-cols="4"] .grid-cols-btn[data-cols="4"] {
  background: transparent;
  color: var(--ink-muted, var(--ink-soft));
  border-color: var(--rule);
}


/* Spacing between switcher-bar and the page content below.
   .feed-timeline (used on home + archive + post-list pages) gets a top
   margin so the first post doesn't collide with the switcher's border.
   .feed-grid already has its own top spacing from grid-tile padding. */
.view-switcher-wrap + #pcms-main .feed-timeline,
.view-switcher-wrap + #pcms-main .container:first-child {
  margin-top: 1.5rem;
}

/* Feed layout switching is in the v9 style.css (style.css):
   .feed-timeline always rendered, .feed-grid hidden unless on-home + grid-mode. */

/* ─────────────────────────────────────────────────
   PWA install button (lives in topnav, hidden by default)
   ───────────────────────────────────────────────── */
#pwa-install-btn { color: var(--accent); }
#pwa-install-btn:hover { background: var(--paper-2); }

/* Shared button + form styles (used across pages) */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--rule);
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--font-ui, system-ui), sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
}
.btn:hover { border-color: var(--accent); }
.btn-primary { background: var(--accent); color: white; border-color: var(--accent); }
.btn-primary:hover { opacity: 0.92; border-color: var(--accent); }
.btn-success { background: #16a34a; color: white; border-color: #16a34a; }
.btn-danger { background: #dc2626; color: white; border-color: #dc2626; }

.alert { padding: 0.75rem 1rem; border-radius: 5px; margin-bottom: 1rem; }
.alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.alert-success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }

.auth-page { max-width: 420px; margin: 3rem auto; padding: 0 1rem; }
.auth-page h1 { font-family: var(--font-display, serif); text-align: center; margin: 0 0 1.5rem; }
.auth-form { display: flex; flex-direction: column; gap: 1rem; }
.auth-form label { display: flex; flex-direction: column; gap: 0.3rem; }
.auth-form label > span { font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.auth-form input { padding: 0.6rem 0.75rem; border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); color: var(--ink); font-size: 1rem; }
.auth-form .btn { justify-content: center; padding: 0.7rem; font-size: 1rem; margin-top: 0.5rem; }
.auth-link { text-align: center; color: var(--ink-muted); font-size: 0.9rem; margin: 1rem 0 0; }
.auth-link a { color: var(--accent); }
.auth-google { align-items: stretch; }
.auth-intro { text-align: center; color: var(--ink-muted); font-size: 0.95rem; margin: 0 0 1rem; }
.btn-google {
  display: flex; justify-content: center; gap: 0.6rem; padding: 0.7rem; font-size: 1rem;
  background: #fff; color: #1f1f1f; border: 1px solid #dadce0;
}
.btn-google:hover { background: #f7f8f8; border-color: #dadce0; }
.btn-google .g-icon { flex-shrink: 0; }
.auth-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0; color: var(--ink-muted); font-size: 0.85rem; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--rule); }

/* HTMX loading indicator */
.pcms-loading {
  display: none;
  position: fixed;
  top: 60px;
  right: 1rem;
  width: 24px;
  height: 24px;
  border: 3px solid var(--paper-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  z-index: 1000;
}
.htmx-request .pcms-loading { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
</style>