Update list style and highlight in player page

Improved the list style and highlight of the file list by making changes to the class properties in the player page. Modified padding, background color, and margins to create a more visually appealing and clearer display of the selected files.

Changes:
- Modified class property of the file list to set proper padding, remove default bullet points and add a right padding.
- Changed font-bold class to bg-[#3356C2] for selected file, making it more prominent and improved readability.
- Adjusted margins, padding and width for the list elements to better align and fit within the file list.
This commit is contained in:
idonahue 2023-04-12 18:51:15 +02:00
parent ad1a01573d
commit 504eabdc0f

View File

@ -311,7 +311,7 @@
{#if isCurrent} {#if isCurrent}
<ul <ul
class="list-disk overflow-hidden rounded-bl rounded-br bg-zinc-800 p-2" class="list-disk list-none overflow-hidden rounded-bl rounded-br bg-zinc-800 py-1 pl-0 pr-2"
style:list-style="disc" style:list-style="disc"
> >
{#each session.deltas {#each session.deltas
@ -320,8 +320,8 @@
.sort(lexically) as filename} .sort(lexically) as filename}
<li <li
class:text-zinc-100={$frame?.filepath === filename} class:text-zinc-100={$frame?.filepath === filename}
class:font-bold={$frame?.filepath === filename} class:bg-[#3356C2]={$frame?.filepath === filename}
class="mx-5 text-zinc-500" class="mx-5 ml-1 w-full list-none rounded p-1 text-zinc-500"
use:collapsable={{ value: filename, separator: '/' }} use:collapsable={{ value: filename, separator: '/' }}
/> />
{/each} {/each}