Changeset 7f46817d in Klonkt

Timestamp:

06/15/2026 03:27:41 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

d54dade

Parents:

3e86f1c

Message:

style: Spotify embed in a white rounded box (border + shadow)

Spotify card gets a white border, rounded corners, and a light shadow so
the (dark) Spotify player sits as a neat box on the page. Facade text
forced dark so it stays readable on the white surface, regardless of theme.
embed.css cache-buster v=1 -> v=2.

Co-Authored-By: Claude <noreply@…>

Location:

src

Files:

• assets/css/embed.css (modified) (1 diff)
• views/shell.ejs (modified) (1 diff)

src/assets/css/embed.css

@@ -135 +135 @@
 .pcms-embed-card--spotify:not(.is-mounted) .pcms-embed-mount { display: none; }
 
+/* Spotify in een nette witte box (Robin 2026-06-15): witte rand + rounded +
+ * schaduw. Hogere specificity (.folio-embed.pcms-embed-card--spotify) zodat dit
+ * de generieke .folio-embed.pcms-embed-card-basis (gelijke specificity) wint —
+ * staat ook later in het bestand. */
+.folio-embed.pcms-embed-card--spotify {
+  border: 3px solid #ffffff;
+  border-radius: 16px;
+  background: #ffffff;
+  padding: 5px;
+  box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
+}
+.pcms-embed-card--spotify .pcms-embed-mount iframe { border-radius: 12px; }
+/* Facade (vóór afspelen) leesbaar op de witte box, ongeacht het thema. */
+.pcms-embed-card--spotify .pcms-embed-audio { background: #ffffff; border-radius: 12px; overflow: hidden; }
+.pcms-embed-card--spotify .pcms-embed-art { background: #f0f0f0; color: #191414; }
+.pcms-embed-card--spotify .pcms-embed-title { color: #191414; }
+.pcms-embed-card--spotify .pcms-embed-sub { color: #555555; }
+.pcms-embed-card--spotify .pcms-embed-frame-badge { background: #ffffff; border-top: 0; padding-top: 0; }
+
 /* ---- Grote play-knop (poster/art) ---- */
 .pcms-embed-bigplay {

src/views/shell.ejs

@@ -170 +170 @@
 <link rel="stylesheet" href="/assets/css/audio.css?v=5">
 <!-- Eigen custom media-embeds (YouTube/SoundCloud/Spotify) in huisstijl. -->
-<link rel="stylesheet" href="/assets/css/embed.css?v=1">
+<link rel="stylesheet" href="/assets/css/embed.css?v=2">
 
 <%- include('partials/shared-styles') %>