From 0c0ee4fbe58b7cb63462eb55c93843fb69919fa5 Mon Sep 17 00:00:00 2001 From: OpenClaw Agent Date: Thu, 2 Jul 2026 08:20:40 +0000 Subject: [PATCH] Loading overlay: crno ozadje, samo logo postaje (odstranjene slike in vzorec) --- public/app.js | 12 ++++++------ public/styles.css | 37 ++----------------------------------- 2 files changed, 8 insertions(+), 41 deletions(-) diff --git a/public/app.js b/public/app.js index 7bd532f..454def4 100644 --- a/public/app.js +++ b/public/app.js @@ -6,12 +6,12 @@ const JW_HLS = id => `https://cdn.jwplayer.com/manifests/${id}.m3u8`; const JW_POSTER = id => `https://cdn.jwplayer.com/v2/media/${id}/poster.jpg?width=1280`; const CHANNELS = [ - { key: 'one', name: 'One Music TV', color: '#a84d7e', logo: '/logos/one_mt_neg_b.png', alt: 'logo of One', jw: 'CBM2fSnV', live: 'https://oneapp.b-cdn.net/master.m3u8', bg: '/backgrounds/ch_one.jpg' }, - { key: 'zwei', name: 'Zwei Music TV', color: '#f36700', logo: '/logos/zwei_neg_b.png', alt: 'logo of Zwei', jw: 'LZVUn3Qy', live: 'https://zweiapp.b-cdn.net/master.m3u8', bg: '/backgrounds/ch_zwei.jpg' }, - { key: 'mt', name: 'Folx Music TV', color: '#C43651', logo: '/logos/mt_neg_b.png', alt: 'logo of Folx Music',jw: 'UYU6dx3Q', live: 'https://folxapp.b-cdn.net/master.m3u8', bg: '/backgrounds/ch_mt.jpg' }, - { key: 'adria', name: 'Adria Music TV', color: '#30a6d1', logo: '/logos/adria_neg_b.png', alt: 'logo of Adria', jw: 'lI4SC7Do', live: 'https://adriaapp.b-cdn.net/master.m3u8', bg: '/backgrounds/ch_adria.jpg' }, - { key: 'folx-slo', name: 'Folx Slovenija', color: '#a8b539', logo: '/logos/folx_slo_neg_b.png', alt: 'logo of Folx Slovenija', jw: 'aoCWwwSg', live: 'https://folxsloapp.b-cdn.net/master.m3u8', bg: '/backgrounds/ch_folx-slo.jpg' }, - { key: 'one-adria', name: 'One Adria Music TV', color: '#a84d7e', logo: '/logos/one_neg_b.png', alt: 'logo of One Adria', jw: 'IGOSgmvW', live: 'https://oneadriaapp.b-cdn.net/master.m3u8', bg: '/backgrounds/ch_one-adria.jpg' }, + { key: 'one', name: 'One Music TV', color: '#a84d7e', logo: '/logos/one_mt_neg_b.png', alt: 'logo of One', jw: 'CBM2fSnV', live: 'https://oneapp.b-cdn.net/master.m3u8' }, + { key: 'zwei', name: 'Zwei Music TV', color: '#f36700', logo: '/logos/zwei_neg_b.png', alt: 'logo of Zwei', jw: 'LZVUn3Qy', live: 'https://zweiapp.b-cdn.net/master.m3u8' }, + { key: 'mt', name: 'Folx Music TV', color: '#C43651', logo: '/logos/mt_neg_b.png', alt: 'logo of Folx Music',jw: 'UYU6dx3Q', live: 'https://folxapp.b-cdn.net/master.m3u8' }, + { key: 'adria', name: 'Adria Music TV', color: '#30a6d1', logo: '/logos/adria_neg_b.png', alt: 'logo of Adria', jw: 'lI4SC7Do', live: 'https://adriaapp.b-cdn.net/master.m3u8' }, + { key: 'folx-slo', name: 'Folx Slovenija', color: '#a8b539', logo: '/logos/folx_slo_neg_b.png', alt: 'logo of Folx Slovenija', jw: 'aoCWwwSg', live: 'https://folxsloapp.b-cdn.net/master.m3u8' }, + { key: 'one-adria', name: 'One Adria Music TV', color: '#a84d7e', logo: '/logos/one_neg_b.png', alt: 'logo of One Adria', jw: 'IGOSgmvW', live: 'https://oneadriaapp.b-cdn.net/master.m3u8' }, ]; // Coloured dot per channel (colour taken from the channel's brand colour). diff --git a/public/styles.css b/public/styles.css index c7e884e..bc3fe3f 100644 --- a/public/styles.css +++ b/public/styles.css @@ -312,40 +312,7 @@ a:hover { border-bottom: 1px solid #313131; } .channelList__channelIcon, .channelList__channelIcon svg, .channelList__channelIcon svg path { transition: all .25s ease; } #random-btn { color: #D91D4A; } -/* channel loading overlay — monolithic pattern in the channel's colour */ +/* channel loading overlay — plain black, channel logo only */ .channelLoading { - background-color: var(--ch, #000); - background-image: - linear-gradient(135deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 40%, rgba(255,255,255,.10) 100%), - repeating-linear-gradient(135deg, rgba(0,0,0,.14) 0 2px, rgba(0,0,0,0) 2px 46px), - repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, rgba(255,255,255,0) 1px 92px), - radial-gradient(120% 130% at 18% 12%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 42%), - radial-gradient(140% 140% at 88% 92%, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 55%); - background-blend-mode: overlay, normal, normal, screen, multiply; - overflow: hidden; -} -.channelLoading::before { - content: ""; - position: absolute; - inset: -20%; - background: - linear-gradient(115deg, transparent 0 42%, rgba(0,0,0,.35) 42% 44%, transparent 44%), - linear-gradient(115deg, transparent 0 60%, rgba(255,255,255,.06) 60% 61%, transparent 61%), - linear-gradient(115deg, transparent 0 74%, rgba(0,0,0,.30) 74% 77%, transparent 77%); - pointer-events: none; -} -/* when a real artwork background is used, drop the generated pattern/blend and - lay a soft vignette so the channel logo stays readable on top. */ -.channelLoading--img { - background-color: #1a0509; - background-blend-mode: normal !important; - background-repeat: no-repeat !important; - background-size: cover !important; - background-position: center !important; -} -.channelLoading--img::before { - content: ""; - position: absolute; - inset: 0; - background: radial-gradient(circle at center, rgba(0,0,0,.10) 0%, rgba(0,0,0,.45) 100%); + background-color: #000; }