<script lang="ts"> import { colors, fg, hex } from './colors'; export let owner: string; export let repo: string; export let n: null | number = null; export let tagColor: number = colors[0]; export let name = ''; export let token: string; export let id: string | null = null; let nn = n == null ? '' : n; </script> <noscript> <style> .noscriptshow { display: block !important; } .noscriptnoshow { display: none !important; } </style> </noscript> <form method="POST" action="/api/admin/{owner}/{repo}/tag"> <input type="hidden" name="token" value={token} /> {#if id} <input type="hidden" name="id" value={id} /> {/if} <div class="flex flex-col py-3"> <div> <input class="input input-sm my-1" type="text" name="tag_name" bind:value={name} placeholder="Tag" required /> </div> <div class="collapse"> <input type="checkbox" /> <div class="collapse-title px-0"> <button class="btn btn-sm scr color noscriptnoshow" style:background-color={hex(tagColor)} style:border-color={hex(tagColor)} style:color={hex(fg(tagColor))} type="button" data-bs-toggle="collapse" data-bs-target="#color{nn}" aria-expanded="false" aria-controls="color{nn}" id="colorButton{nn}" aria-label="tag color"></button> </div> <div class="collapse-content"> {#each colors as color} <input type="radio" name="colorp" bind:group={tagColor} value={color} checked={tagColor == color} class="r" style="--color: {hex(color)}" /> {/each} </div> </div> <div class="noscriptshow" id="color{nn}"> <div class="flex gap-2 items-center"> {#if n == null} <button class="btn btn-sm btn-secondary my-1">Add tag</button> {:else} <button class="btn btn-sm btn-secondary my-1" name="action" value="edit-tag{n}" >Ok</button> <button class="btn btn-sm btn-error my-1" name="action" value="delete-tag{n}" >Delete</button> {/if} </div> <div class="collapse-content p-3"></div> </div> </div> </form> <style> form { display: inline; } input[type='radio'].r { appearance: none; border: none; display: inline-block; width: 25px; height: 25px; border-radius: 50%; } @media (prefers-color-scheme: dark) { input[type='radio'].r:checked { border: 1px solid white; margin: -1px 1px 1px -1px; } } @media (prefers-color-scheme: light) { input[type='radio'].r:checked { border: 1px solid black; margin: -1px 1px 1px -1px; } } input[type='radio'].r::before { content: ''; display: block; width: 19px; height: 19px; border-radius: 50%; background-color: var(--color); position: relative; left: 2px; top: 2px; } input[type='radio'].r:not(:checked):hover { transform: scale(1.2); } button.color::after { content: ' '; padding-left: 10px; } </style>