Nulo/schreiben
1
0
Fork 0
Code Issues 13 Pull requests Packages Projects Releases Wiki Activity

theme linktooltip

Browse source
This commit is contained in:
Cat /dev/Nulo 2023-08-31 13:47:09 -03:00
parent 6f52321632
commit b8901b904d
2 changed files with 17 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/app.css
View file

@ -53,8 +53,8 @@ a {
@apply rounded-md bg-neutral-950 px-4 py-2 text-sm font-medium tracking-wide text-white dark:bg-neutral-200 dark:text-neutral-800; @apply rounded-md bg-neutral-950 px-4 py-2 text-sm font-medium tracking-wide text-white dark:bg-neutral-200 dark:text-neutral-800;
} }
.btn-outline { .btn-outline {
@apply rounded-md border border-neutral-200/70 bg-white px-4 py-2 text-sm font-medium tracking-wide text-neutral-500 dark:bg-neutral-950 dark:text-neutral-200; @apply rounded-md border border-neutral-200/70 bg-white px-4 py-2 text-sm font-medium tracking-wide text-neutral-500 dark:bg-neutral-900 dark:text-neutral-200;
} }
.input { .input {
@apply flex h-10 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-sm placeholder:text-neutral-500 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-900; @apply flex h-10 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-sm placeholder:text-neutral-500 focus:border-neutral-300 focus:outline-none focus:ring-2 focus:ring-neutral-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-neutral-700/70 dark:bg-neutral-900;
} }

56
src/editor/bubblemenu/LinkTooltip.svelte
View file

@ -44,15 +44,15 @@
</script> </script>
<div <div
class="x-tooltip bg-gray" class="absolute z-30 w-max items-center overflow-hidden rounded border border-neutral-200/70 bg-white px-1 leading-none shadow-lg dark:border-neutral-700 dark:bg-neutral-900"
class:flex={shown} class:flex={shown}
class:hidden={!shown} class:hidden={!shown}
bind:this={tooltipEl} bind:this={tooltipEl}
style={$style} style={$style}
> >
<!-- TODO: hacer que el clickeable sea relativo a la url final del sitio? --> <span class=" ">
<span>
<a <a
class="block max-w-[50vw] overflow-x-hidden text-ellipsis whitespace-nowrap p-2 text-blue-500 dark:text-blue-300"
href={link?.mark.attrs.href} href={link?.mark.attrs.href}
rel="noopener noreferrer nofollow" rel="noopener noreferrer nofollow"
target="_blank" target="_blank"
@ -60,46 +60,20 @@
{link?.mark.attrs.href} {link?.mark.attrs.href}
</a> </a>
</span> </span>
<button type="button" on:click={editLink} title={"Editar enlace"}> <button
class="my-1 appearance-none rounded border-none p-1 hover:bg-neutral-200 dark:hover:bg-neutral-700"
type="button"
on:click={editLink}
title={"Editar enlace"}
>
<EditIcon class="h-6 w-6 fill-current" /> <EditIcon class="h-6 w-6 fill-current" />
</button> </button>
<button type="button" on:click={removeLink} title={"Borrar enlace"}> <button
class="my-1 appearance-none rounded border-none p-1 hover:bg-neutral-200 dark:hover:bg-neutral-700"
type="button"
on:click={removeLink}
title={"Borrar enlace"}
>
<CloseIcon class="h-6 w-6 fill-current" /> <CloseIcon class="h-6 w-6 fill-current" />
</button> </button>
</div> </div>
<style>
.x-tooltip {
width: max-content;
position: absolute;
background: #222;
color: white;
border-radius: 4px;
z-index: 420;
line-height: 1;
align-items: center;
}
.x-tooltip > * {
padding: 0.4rem 0.5rem;
}
a {
display: block;
color: lightblue;
max-width: 50vw;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
button {
background: #222;
color: white;
border: none;
appearance: none;
font-size: 1.5rem;
border-radius: 4px;
}
button:hover {
background: #444;
}
</style>