Obsidian CSS snippet: SNS Post callout (Twitter/X style timeline)

callout-sns-post.css

/* ================================================================
   [callout] timeline — SNS投稿風 callout for Obsidian
   Usage:
     > [!timeline] 23:23    ← local note
     > [!timeline|blue] 23:23   ← highlighted variant (blue left border)

   Customize:
     --sns-avatar-url  : your avatar image URL
     ::before content  : your display name
   ================================================================*/

/* ── Avatar URL（change this to your own image） ─────────────── */
:root {
  --sns-avatar-url: url("https://example.com/your-avatar.png");
}

/* ── Color tokens ───────────────────────────────────────────── */
.theme-dark {
  --sns-bg:     #15202b;
  --sns-border: #38444d;
  --sns-text:   #f7f9f9;
  --sns-sub:    #8b98a5;
}

.theme-light {
  --sns-bg:     #ffffff;
  --sns-border: #cfd9de;
  --sns-text:   #0f1419;
  --sns-sub:    #536471;
}

/* ── Container ──────────────────────────────────────────────── */
.callout[data-callout="timeline"] {
  position: relative;
  padding: 14px 16px 10px 74px;
  background: var(--sns-bg) !important;
  border: 1px solid var(--sns-border) !important;
  border-radius: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, sans-serif;
  line-height: 1.4;
}

/* Blue left border variant */
.callout[data-callout="timeline"][data-callout-metadata="blue"] {
  border-left: 3px solid #0085ff !important;
}

/* ── Avatar ──────────────────────────────────────────────────── */
.callout[data-callout="timeline"] .callout-icon {
  display: block !important;
  position: absolute;
  left: 14px;
  top: 14px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--sns-avatar-url) center / cover no-repeat, var(--sns-border);
  overflow: hidden;
}

/* Hide default SVG icon */
.callout[data-callout="timeline"] .callout-icon svg {
  display: none;
}

/* ── Title: DisplayName · timestamp ─────────────────────────── */
.callout[data-callout="timeline"] .callout-title {
  padding: 0 0 4px 0;
  background: transparent !important;
  border: none;
}

/* Timestamp (title text) in muted color */
.callout[data-callout="timeline"] .callout-title-inner {
  font-size: 0.88em;
  color: var(--sns-sub);
  font-weight: 400;
}

/* Display name prepended before timestamp — change "Your Name" to yours */
.callout[data-callout="timeline"] .callout-title-inner::before {
  content: "Your Name  ·  ";
  color: var(--sns-text);
  font-weight: 700;
}

/* ── Content (post body) ─────────────────────────────────────── */
.callout[data-callout="timeline"] .callout-content {
  font-size: 1em;
  color: var(--sns-text);
  line-height: 1.5;
  padding: 0;
  margin: 0;
}

.callout[data-callout="timeline"] .callout-content p {
  margin: 0;
}

/* ── Action bar (decorative) ─────────────────────────────────── */
.callout[data-callout="timeline"] .callout-content::after {
  content: "←    ↺    ♡    ↗";
  display: block;
  font-size: 0.85em;
  color: var(--sns-sub);
  margin-top: 12px;
  letter-spacing: 0.6em;
}

/* ── Mobile ──────────────────────────────────────────────────── */
body.is-mobile .callout[data-callout="timeline"] {
  padding-left: 58px;
}

body.is-mobile .callout[data-callout="timeline"] .callout-icon {
  left: 10px;
  width: 36px;
  height: 36px;
}

body.is-mobile .callout[data-callout="timeline"] .callout-title-inner {
  font-size: 0.75em;
}

/* ── Hide fold button ────────────────────────────────────────── */
.callout[data-callout="timeline"] .callout-fold {
  display: none;
}