style: Adjust series page & app colors
This commit is contained in:
Aleksi Lassila
42
src/app.css
42
src/app.css
@@ -3,27 +3,47 @@
|
||||
@tailwind utilities;
|
||||
|
||||
a {
|
||||
@apply hover:text-amber-200;
|
||||
@apply hover:text-amber-200;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
@apply bg-zinc-700 bg-opacity-40 animate-pulse;
|
||||
@apply bg-zinc-700 bg-opacity-40 animate-pulse;
|
||||
}
|
||||
|
||||
.placeholder-image {
|
||||
@apply bg-zinc-700 bg-opacity-75;
|
||||
@apply bg-zinc-700 bg-opacity-75;
|
||||
}
|
||||
|
||||
.placeholder-text {
|
||||
@apply bg-zinc-700 bg-opacity-40 animate-pulse text-transparent rounded-lg select-none;
|
||||
@apply bg-zinc-700 bg-opacity-40 animate-pulse text-transparent rounded-lg select-none;
|
||||
}
|
||||
|
||||
/*html:not([data-useragent*="Tizen"]) .selectable, html:not([data-useragent*="Tizen"]) .selectable-offset {*/
|
||||
/* @apply focus-visible:outline-2;*/
|
||||
/*}*/
|
||||
|
||||
/*html[data-useragent*="Tizen"] .selectable, html[data-useragent*="Tizen"] .selectable-offset {*/
|
||||
/* @apply focus-within:outline-2;*/
|
||||
/*}*/
|
||||
|
||||
/*.selectable, .selectable-offset {*/
|
||||
/* @apply outline outline-0 outline-highlight-foreground*/
|
||||
/*}*/
|
||||
|
||||
/*.selectable {*/
|
||||
/* @apply outline-offset-[-2px] border-2 border-transparent*/
|
||||
/*}*/
|
||||
|
||||
/*.selectable-offset {*/
|
||||
/* @apply outline-offset-[2px]*/
|
||||
/*}*/
|
||||
|
||||
html:not([data-useragent*="Tizen"]) .selectable {
|
||||
@apply outline-none outline-0 border-2 border-[#00000000] focus-visible:border-[#f0cd6dc2];
|
||||
@apply outline-none outline-0 border-2 border-[#00000000] focus-visible:border-highlight-foreground;
|
||||
}
|
||||
|
||||
html[data-useragent*="Tizen"] .selectable {
|
||||
@apply outline-none outline-0 border-2 border-[#00000000] focus-within:border-[#f0cd6dc2];
|
||||
@apply outline-none outline-0 border-2 border-[#00000000] focus-within:border-highlight-foreground;
|
||||
}
|
||||
|
||||
.selectable:focus, .selectable:focus-within {
|
||||
@@ -31,15 +51,15 @@ html[data-useragent*="Tizen"] .selectable {
|
||||
}
|
||||
|
||||
.peer-selectable {
|
||||
@apply peer-focus-visible:outline outline-2 outline-[#f0cd6dc2] outline-offset-2;
|
||||
@apply peer-focus-visible:outline outline-2 outline-[#f0cd6dc2] outline-offset-2;
|
||||
}
|
||||
|
||||
.selectable-explicit {
|
||||
@apply focus-within:outline outline-2 outline-[#f0cd6dc2] outline-offset-2;
|
||||
@apply focus-within:outline outline-2 outline-[#f0cd6dc2] outline-offset-2;
|
||||
}
|
||||
|
||||
@media tv {
|
||||
html {
|
||||
font-size: 24px;
|
||||
}
|
||||
html {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,8 +14,8 @@
|
||||
class={classNames(
|
||||
'px-6 py-2 rounded-lg font-medium tracking-wide flex items-center',
|
||||
{
|
||||
'bg-stone-200 text-stone-900': $hasFoucus,
|
||||
'hover:bg-stone-200 hover:text-stone-900': true,
|
||||
'bg-highlight-foreground text-stone-900': $hasFoucus,
|
||||
'hover:bg-highlight-foreground hover:text-stone-900': true,
|
||||
'bg-stone-800/50': !$hasFoucus,
|
||||
'cursor-pointer': !inactive,
|
||||
'cursor-not-allowed pointer-events-none opacity-40': inactive
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
</div>
|
||||
|
||||
<div class="relative">
|
||||
<Container direction="horizontal" handleNavigateOut={{ left: () => true }}>
|
||||
<Container direction="horizontal" handleNavigateOut={{ left: () => true }} let:focusIndex>
|
||||
<div
|
||||
class={classNames(
|
||||
'flex overflow-x-scroll items-center overflow-y-visible relative scrollbar-hide',
|
||||
@@ -55,7 +55,7 @@
|
||||
tabindex="-1"
|
||||
on:scroll={() => (scrollX = carousel?.scrollLeft || scrollX)}
|
||||
>
|
||||
<slot />
|
||||
<slot {focusIndex} />
|
||||
</div>
|
||||
</Container>
|
||||
{#if scrollX > 50}
|
||||
|
||||
@@ -26,13 +26,17 @@
|
||||
|
||||
<Container
|
||||
direction="horizontal"
|
||||
class={classNames($$restProps.class, 'overflow-x-scroll scrollbar-hide relative p-1')}
|
||||
class={classNames(
|
||||
$$restProps.class,
|
||||
'overflow-x-scroll scrollbar-hide relative p-1 overflow-y-visible'
|
||||
)}
|
||||
style={`mask-image: linear-gradient(to right, transparent 0%, ${
|
||||
fadeLeft ? '' : 'black 0%, '
|
||||
}black 5%, black 95%, ${fadeRight ? '' : 'black 100%, '}transparent 100%);`}
|
||||
on:scroll={updateScrollPosition}
|
||||
bind:this={element}
|
||||
handleNavigateOut={{ left: () => true }}
|
||||
let:focusIndex
|
||||
>
|
||||
<slot />
|
||||
<slot {focusIndex} />
|
||||
</Container>
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
<Container
|
||||
class={classNames(
|
||||
'rounded-xl overflow-hidden cursor-pointer group',
|
||||
'w-[428px] h-[240.75px] px-4 py-3',
|
||||
'w-[420px] h-[236.25px] px-4 py-3',
|
||||
'flex flex-col shrink-0 relative selectable'
|
||||
)}
|
||||
let:hasFocus
|
||||
|
||||
@@ -92,38 +92,42 @@
|
||||
'-translate-y-16': scrollTop < 140
|
||||
})}
|
||||
>
|
||||
<UICarousel
|
||||
slot="title"
|
||||
class={classNames('text-xl flex -mx-2 max-w-2xl transition-opacity', {
|
||||
'opacity-0': scrollTop < 140
|
||||
})}
|
||||
>
|
||||
{#each $tmdbSeasons as season}
|
||||
<Container
|
||||
let:hasFocus
|
||||
class="mx-2"
|
||||
on:click={() => focusFirstEpisodeOf(season)}
|
||||
on:enter={(event) => {
|
||||
console.log(event);
|
||||
scrollIntoView({ horizontal: 64 })(event);
|
||||
if (event.detail.options.setFocusedElement) focusFirstEpisodeOf(season);
|
||||
}}
|
||||
bind:this={containers[`season-${season.season_number}`]}
|
||||
>
|
||||
<div
|
||||
class={classNames(
|
||||
'cursor-pointer whitespace-nowrap hover:font-semibold hover:tracking-wide hover:text-white',
|
||||
{
|
||||
'font-semibold tracking-wide': hasFocus,
|
||||
'text-zinc-300 font-medium': !hasFocus
|
||||
}
|
||||
)}
|
||||
<svelte:fragment slot="title">
|
||||
<UICarousel
|
||||
class={classNames('flex -mx-2 transition-opacity', {
|
||||
'opacity-0': scrollTop < 140
|
||||
})}
|
||||
let:focusIndex
|
||||
>
|
||||
{#each $tmdbSeasons as season, i}
|
||||
<Container
|
||||
let:hasFocus
|
||||
on:click={() => focusFirstEpisodeOf(season)}
|
||||
on:enter={(event) => {
|
||||
console.log(event);
|
||||
scrollIntoView({ horizontal: 64 })(event);
|
||||
if (event.detail.options.setFocusedElement) focusFirstEpisodeOf(season);
|
||||
}}
|
||||
bind:this={containers[`season-${season.season_number}`]}
|
||||
>
|
||||
Season {season.season_number}
|
||||
</div>
|
||||
</Container>
|
||||
{/each}
|
||||
</UICarousel>
|
||||
<div
|
||||
class={classNames(
|
||||
'px-3 py-1 cursor-pointer whitespace-nowrap text-xl tracking-wide font-medium rounded-lg',
|
||||
'hover:font-semibold hover:tracking-wide hover:text-white',
|
||||
{
|
||||
'bg-highlight-foreground text-black': hasFocus,
|
||||
//'bg-stone-800/50': hasFocus,
|
||||
'text-zinc-400': !(focusIndex === i),
|
||||
'text-white': focusIndex === i && !hasFocus
|
||||
}
|
||||
)}
|
||||
>
|
||||
Season {season.season_number}
|
||||
</div>
|
||||
</Container>
|
||||
{/each}
|
||||
</UICarousel>
|
||||
</svelte:fragment>
|
||||
<div class="flex -mx-2">
|
||||
{#each $tmdbSeasons as season}
|
||||
{#each season?.episodes || [] as episode}
|
||||
|
||||
@@ -9,7 +9,9 @@ export default {
|
||||
},
|
||||
colors: {
|
||||
darken: '#07050166',
|
||||
lighten: '#fde68a20'
|
||||
lighten: '#fde68a20',
|
||||
// 'highlight-foreground': '#E7E5E4'
|
||||
'highlight-foreground': '#ffe6abcc'
|
||||
},
|
||||
keyframes: {
|
||||
timer: {
|
||||
|
||||
Reference in New Issue
Block a user