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

<style>
/* ─────────────────────────────────────────────────
   View switcher (timeline ↔ grid + grid-cols picker)
   ───────────────────────────────────────────────── */
.view-switcher-wrap {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  /* No extra margin-top: this centres the pill between the profile-header
     rule (above) and the own border (below). Equal space above/below the
     pill comes from the symmetric container padding below. The margin-bottom
     (1.5rem in style.css) keeps breathing room toward the feed. */
  margin-top: 0;
}
.view-switcher-wrap .container {
  display: flex; align-items: center; justify-content: center; gap: 0.75rem;
  /* Symmetric padding → equal space above and below the pill (≈8px),
     centred between the two dividing lines. */
  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); }
/* Active = white (light background, dark text). Via aria-selected (element
   attribute, set by syncAria + on htmx:afterSettle) → htmx-robust. On non-
   feed pages syncAria sets aria-selected=false → both grey. */
.view-switch-btn[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* Agenda = its OWN pill (separate from Timeline/Grid, so the feed-toggle is never
   disturbed). Same look as the view-switcher pill. Visible in all modes. */
.agenda-pill { display: inline-flex; align-items: center; }   /* no box — standalone icon+text 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); }
/* Active (on the agenda page) = bright/white. Element-class (in the OOB-rendered
   chrome) rather than body-class CSS → stays reliable after htmx navigation. */
.vs-agenda.is-active { color: var(--ink); font-weight: 600; }

/* Mobile: Agenda on its own row at the top, Solo/Circle + Timeline/Grid together
   on the row below (together ~330px → fits within a phone, instead of the old
   unbalanced split Agenda+Solo / Timeline). */
@media (max-width: 520px) {
  .view-switcher-wrap .agenda-pill { flex: 0 0 100%; justify-content: center; }
}

.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; }

/* On a standalone post there is no feed to switch, so no button should look "active"
   (coloured). The active state lives in style.css on body[data-feed-view]
   / body[data-grid-cols] (background:var(--ink)); we override that MORE SPECIFICALLY
   via body.on-post so the buttons become neutral/grey — but remain clickable
   (the click-handler then navigates to the feed in that view). The
   body-class switches client-side on HTMX-nav, so this works without a reload too. */
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-intro { text-align: center; color: var(--ink-muted); font-size: 0.95rem; margin: 0 0 1rem; }
.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); } }

/* Load more (Solo, Cirkel, News, Messages) — page size 72, htmx append. */
.load-more-wrap { display: flex; justify-content: center; margin: 1.5rem 0 .5rem; }
.load-more-wrap:empty { margin: 0; }
.load-more-btn { padding: .6rem 1.4rem; border-radius: 999px; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--ink, inherit);
  background: color-mix(in srgb, var(--ink, #000) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink, #000) 14%, transparent); }
.load-more-btn:hover { background: color-mix(in srgb, var(--ink, #000) 9%, transparent); }
.load-more-btn.htmx-request { opacity: .6; pointer-events: none; }
</style>