Some hover states

This commit is contained in:
Ian Donahue 2023-03-14 18:05:13 +01:00
parent ea589bdce4
commit 6d6e1b36a9
3 changed files with 26 additions and 15 deletions

View File

@ -6,7 +6,16 @@
%sveltekit.head% %sveltekit.head%
</head> </head>
<body class="fixed h-full w-full bg-zinc-800 font-sans text-base antialiased" style="background: linear-gradient(152.08deg, #27272A 17.75%, #19191F 99.04%); "> <body
class="fixed h-full w-full font-sans text-base antialiased"
style="
background: linear-gradient(152.08deg, #27272A 17.75%, #19191F 99.04%);
background: #28282b; /* Old browsers */
background: -moz-linear-gradient(-45deg, #28282b 0%, #202022 100%);
background: -webkit-linear-gradient(-45deg, #28282b 0%,#202022 100%);
background: linear-gradient(135deg, #28282b 0%,#202022 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#28282b', endColorstr='#202022',GradientType=1 );
">
<div style="display: contents;">%sveltekit.body%</div> <div style="display: contents;">%sveltekit.body%</div>
</body> </body>
</html> </html>

View File

@ -178,7 +178,7 @@
href="/projects/{project.id}/" href="/projects/{project.id}/"
> >
<div <div
class="flex flex-col justify-between space-y-1 rounded-lg border border-zinc-700 border-t-zinc-600 border-t-[1] bg-[#2F2F33] shadow" class="group flex flex-col justify-between space-y-1 rounded-lg border border-zinc-700 border-t-zinc-600 border-t-[1] bg-[#2F2F33] hover:bg-[#3B3B3F] shadow transition duration-150 ease-out hover:ease-in"
> >
<div class="flex-grow-0 px-4 py-4"> <div class="flex-grow-0 px-4 py-4">
<div class="text-lg text-zinc-300 hover:text-zinc-200"> <div class="text-lg text-zinc-300 hover:text-zinc-200">

View File

@ -307,11 +307,11 @@
/> />
</div> </div>
{/if} {/if}
<div class="w-100 flex flex-row-reverse items-center gap-4"> <div class="w-100 flex flex-row-reverse items-center justify-between gap-4">
{#if initiatedCommit} {#if initiatedCommit}
<div class="flex gap-2"> <div class="flex gap-2">
<button <button
class="w-[60px] button rounded bg-blue-600 py-2 text-white" class="w-[60px] button rounded border border-zinc-600 py-2 text-white hover:bg-zinc-800"
on:click={() => { on:click={() => {
initiatedCommit = false; initiatedCommit = false;
}}>✘</button }}>✘</button
@ -319,25 +319,27 @@
<button <button
disabled={!commitMessage || filesSelectedForCommit.length == 0} disabled={!commitMessage || filesSelectedForCommit.length == 0}
class="{!commitMessage || filesSelectedForCommit.length == 0 class="{!commitMessage || filesSelectedForCommit.length == 0
? 'grayscale' ? 'bg-zinc-800 text-zinc-600'
: ''} w-[60px] button rounded bg-blue-600 py-2 text-white" : ''} button rounded bg-blue-600 py-2 px-3 text-white"
on:click={() => { on:click={() => {
doCommit(); doCommit();
initiatedCommit = false; initiatedCommit = false;
commitMessage = ''; commitMessage = '';
}}></button }}>Commit changes</button
> >
</div> </div>
{#if filesSelectedForCommit.length == 0} <div class="w-100 align-left">
<div>Select at least one file.</div> {#if filesSelectedForCommit.length == 0}
{:else if !commitMessage} <div>Select at least one file.</div>
<div>Provide a commit message.</div> {:else if !commitMessage}
{:else} <div>Provide a commit message.</div>
<div>Are you certain of this?</div> {:else}
{/if} <div>Are you certain of this?</div>
{/if}
</div>
{:else} {:else}
<button <button
class="button rounded bg-blue-600 py-2 px-3 text-white" class="button rounded bg-blue-600 py-2 px-3 text-white hover:bg-blue-700"
on:click={() => (initiatedCommit = true)}>Commit changes</button on:click={() => (initiatedCommit = true)}>Commit changes</button
> >
{/if} {/if}