Ajoute un style plus classieux grâce aux conseils du criquet. Ajoute un titre qui scroll c'est la classe (le criquet est nul pour détecter un overflow)

2026-01-23 01:48:56 +01:00
parent b874da3a9c
commit 7d938f05e7
3 changed files with 115 additions and 8 deletions
@@ -0,0 +1,78 @@
+/* Reset minimal */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    height: 100vh;
+    background: #0e0e0e;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-family: Arial, Helvetica, sans-serif;
+    color: #ffffff;
+}
+
+.radio-container {
+    text-align: center;
+}
+
+.track-title {
+    width: 300px;
+    overflow: hidden;
+    white-space: nowrap;
+    margin-bottom: 12px;
+    font-size: 0.95rem;
+    opacity: 0.85;
+    position: relative;
+}
+
+.track-title p.overflow {
+    padding-left: 100%;
+    animation: scroll-title 10s linear infinite;
+}
+
+.track-title:hover p.overflow {
+    animation-play-state: paused;
+}
+
+@keyframes scroll-title {
+    0% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translateX(-100%);
+    }
+}
+
+audio {
+    width: 300px;
+}
+
+.radio-links {
+    all: unset;
+    display: flex;
+    gap: 12px;
+    margin-top: 14px;
+    font-size: 0.8rem;
+    opacity: 0.7;
+}
+
+.radio-links li {
+    all: unset;
+}
+
+.radio-links a {
+    text-decoration: none;
+    color: #ffffff;
+    padding: 4px 8px;
+    border: 1px solid rgba(255,255,255,0.15);
+    border-radius: 3px;
+}
+
+.radio-links a:hover {
+    opacity: 1;
+    background: rgba(255,255,255,0.08);
+}