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

<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="reader"] .view-switch-btn[data-view="reader"],
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; }

/* FEP-9098 custom emojis: small inline images (Shaer parity), rendered in note
   content and display names across the timeline, messages and threads. Never
   styled as media (no rounding/background), and never blown up to media width. */
img.emoji { height: 1.3em; width: auto; margin: 0 .05em; vertical-align: -0.2em;
  display: inline-block; border-radius: 0; background: none; box-shadow: none; }
.tl-content img.emoji, .tl-quote-body img.emoji, .msg-content img.emoji, .comment-content img.emoji,
.tl-author img.emoji, .tl-boost-by img.emoji, .tl-quote-name img.emoji, .msg-who img.emoji, .comment-author img.emoji {
  max-width: none; height: 1.3em; border-radius: 0; background: none; box-shadow: none; vertical-align: -0.2em; }

/* ── The body of a post ────────────────────────────────────────────────────
   Shared with partials/note-body.ejs, so a post looks the same in de Krant, in
   Berichten and in the Guardian PWA. These used to live in the Krant's own
   <style> block, which is why a post outside de Krant came out unstyled.
   Krant-only behaviour (the clamp + "read more", the poll, the action bar)
   stays in pages/news.ejs. */
.tl-content { line-height: 1.55; overflow-wrap: anywhere; }
.tl-content p { margin: .4rem 0; } .tl-content p:first-child { margin-top: 0; } .tl-content p:last-child { margin-bottom: 0; }
.tl-content a { color: var(--accent, #06c); }
.tl-content img { max-width: 100%; height: auto; border-radius: 10px; background: #fff; }

/* FEP-044f embedded quote card (mirror of the Shaer QuoteCard). Also carries
   an external link preview: same card, different origin. */
.tl-quote { margin: .75rem 0 0; padding: .6rem .7rem; border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--ink, #000) 12%, transparent);
  background: color-mix(in srgb, var(--ink, #000) 3.5%, transparent); }
.tl-quote-head { display: flex; align-items: center; gap: .4rem; margin: 0 0 .35rem; min-width: 0; }
.tl-quote-avatar { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: #fff; }
.tl-quote-name { font-weight: 700; font-size: .85rem; color: var(--ink, inherit); white-space: nowrap; }
.tl-quote-handle { color: var(--ink-soft, #888); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tl-quote-body { line-height: 1.5; font-size: .92rem; color: var(--ink-soft, #555);
  overflow-wrap: anywhere; max-height: 16em; overflow: hidden; }
.tl-quote-body p { margin: .3rem 0; } .tl-quote-body p:first-child { margin-top: 0; } .tl-quote-body p:last-child { margin-bottom: 0; }
.tl-quote-body a { color: var(--accent, #06c); }
.tl-quote-media { display: block; margin: .45rem 0 0; }
.tl-quote-media img { max-width: 100%; height: auto; border-radius: 8px; }

/* Always show the FULL image at its natural ratio — never cropped, no letterbox. */
.tl-media { display: flex; flex-direction: column; gap: .4rem; margin: .75rem 0 0; }
.tl-media-img { display: block; border-radius: 12px; overflow: hidden;
  background-image: linear-gradient(135deg,
    color-mix(in srgb, var(--accent, #888) 22%, var(--paper-2, var(--paper))) 0%,
    color-mix(in srgb, var(--accent, #888) 6%, var(--paper-2, var(--paper))) 100%); }
.tl-media-img img { width: 100%; height: auto; display: block; background: #fff; transition: opacity .4s ease; }
.tl-media-img img.is-loading { opacity: 0; }
/* Reserve placeholder space while the (natural-aspect) feed image loads. */
.tl-media-img:has(img.is-loading) { min-height: 220px; }
.tl-media-video, .tl-media-audio { width: 100%; margin: .75rem 0 0; border-radius: 12px; display: block; }
.tl-media-video { max-height: 480px; background: #000; }

/* In Berichten a post sits inside a notification row, so it starts tighter and
   its media stays modest: the row is a pointer to the post, not the post page. */
.msg-note .tl-content { line-height: 1.5; }
.msg-note .tl-quote, .msg-note .tl-media, .msg-note .tl-media-video, .msg-note .tl-media-audio { margin-top: .5rem; }
.msg-note .tl-media-img:has(img.is-loading) { min-height: 120px; }
.msg-note .tl-media-video { max-height: 320px; }
</style>