mirror of https://github.com/VERT-sh/VERT.git
Adjust colours
This commit is contained in:
JovannMC
parent
212de6e325
commit
1ced7573ef
21
src/app.scss
21
src/app.scss
|
|
@ -30,7 +30,11 @@
|
|||
|
||||
@mixin light {
|
||||
// general
|
||||
--accent: hsl(303, 73%, 81%);
|
||||
--accent-pink: hsl(303, 73%, 81%);
|
||||
--accent-red: hsl(348, 71%, 81%);
|
||||
--accent-purple: hsl(264, 71%, 81%);
|
||||
--accent-blue: hsl(220, 73%, 81%);
|
||||
--accent: var(--accent-pink);
|
||||
|
||||
// foregrounds
|
||||
--fg: hsl(0, 0%, 0%);
|
||||
|
|
@ -56,18 +60,22 @@
|
|||
hsla(287, 100%, 50%, 0)
|
||||
);
|
||||
--bg-panel: hsl(0, 0%, 100%);
|
||||
--bg-panel-alt: hsl(0, 0%, 92%);
|
||||
--bg-panel-accented: #EBEBEB;
|
||||
--bg-panel-accented: hsl(0, 0%, 92%);
|
||||
--bg-separator: hsl(0, 0%, 88%);
|
||||
--bg-button: var(--bg-panel-accented);
|
||||
--bg-badge: hsl(0, 0%, 0%);
|
||||
|
||||
--bg-input: #E0E0E0;
|
||||
|
||||
--shadow-panel: 0 2px 4px 0 hsla(0, 0%, 0%, 0.15);
|
||||
}
|
||||
|
||||
@mixin dark {
|
||||
// general
|
||||
--accent: hsl(303, 73%, 81%);
|
||||
--accent-pink: hsl(303, 73%, 81%);
|
||||
--accent-red: hsl(348, 71%, 81%);
|
||||
--accent-purple: hsl(264, 71%, 81%);
|
||||
--accent-blue: hsl(220, 73%, 81%);
|
||||
--accent: var(--accent-pink);
|
||||
|
||||
// foregrounds
|
||||
--fg: hsl(0, 0%, 100%);
|
||||
|
|
@ -94,9 +102,8 @@
|
|||
);
|
||||
--bg-panel: hsl(220, 4%, 18%);
|
||||
--bg-panel-accented: color-mix(in srgb, var(--accent) 12%, transparent);
|
||||
--bg-panel-alt: hsl(220, 6%, 25%);
|
||||
--bg-separator: hsl(220, 4%, 28%);
|
||||
--bg-button: #43464C;
|
||||
--bg-button: hsl(220, 6%, 28%);
|
||||
--bg-badge: hsl(0, 0%, 100%);
|
||||
|
||||
--shadow-panel: 0 4px 6px 0 hsla(0, 0%, 0%, 0.15);
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
bind:value
|
||||
{placeholder}
|
||||
{disabled}
|
||||
class="w-full p-3 rounded-lg bg-panel border-2 border-gray-300
|
||||
class="w-full p-3 rounded-lg bg-panel border-2 border-button
|
||||
{prefix ? 'pl-[2rem]' : 'pl-3'}
|
||||
{extension ? 'pr-[4rem]' : 'pr-3'}"
|
||||
/>
|
||||
|
|
@ -39,7 +39,7 @@
|
|||
{/if}
|
||||
{#if extension}
|
||||
<div class="absolute right-0 top-0 bottom-0 flex items-center px-4">
|
||||
<span class="text-sm text-black bg-gray-300 px-2 py-1 rounded"
|
||||
<span class="text-sm bg-button text-black dynadark:text-white px-2 py-1 rounded"
|
||||
>{extension}</span
|
||||
>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
<Panel class="flex flex-col gap-8 p-6">
|
||||
<h2 class="text-2xl font-bold flex items-center">
|
||||
<div class="rounded-full bg-blue-300 p-2 inline-block mr-3 w-10 h-10">
|
||||
<HeartHandshakeIcon />
|
||||
<HeartHandshakeIcon color="black" />
|
||||
</div>
|
||||
Credits
|
||||
</h2>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
<div class="flex flex-col gap-3">
|
||||
<h2 class="text-2xl font-bold flex items-center">
|
||||
<div
|
||||
class="rounded-full bg-rose-300 p-2 inline-block mr-3 w-10 h-10"
|
||||
class="rounded-full bg-accent-red p-2 inline-block mr-3 w-10 h-10"
|
||||
>
|
||||
<HeartIcon color="black" />
|
||||
</div>
|
||||
|
|
@ -41,7 +41,7 @@
|
|||
<div class="flex flex-col gap-3 w-full">
|
||||
<div class="flex gap-3 w-full">
|
||||
<button
|
||||
class="btn flex-1 p-4 rounded-lg bg-rose-300 text-black flex items-center justify-center"
|
||||
class="btn flex-1 p-4 rounded-lg bg-accent-red text-black flex items-center justify-center"
|
||||
>
|
||||
<HandCoinsIcon size="24" class="inline-block mr-2" />
|
||||
One-time
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
</button>
|
||||
</div>
|
||||
<div class="flex gap-3 w-full">
|
||||
<button class="btn bg-rose-300 text-black p-4 rounded-lg flex-1"
|
||||
<button class="btn bg-accent-red text-black p-4 rounded-lg flex-1"
|
||||
>$1 USD</button
|
||||
>
|
||||
<button
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
</p>
|
||||
|
||||
<button
|
||||
class="btn flex-1 p-3 rounded-3xl bg-rose-300 text-black flex items-center justify-center"
|
||||
class="btn flex-1 p-3 rounded-3xl bg-accent-red text-black flex items-center justify-center"
|
||||
>
|
||||
<WalletIcon size="24" class="inline-block mr-2" />
|
||||
Pay now
|
||||
|
|
|
|||
|
|
@ -6,9 +6,9 @@
|
|||
<Panel class="flex flex-col gap-4 p-6">
|
||||
<h2 class="text-2xl font-bold flex items-center">
|
||||
<div
|
||||
class="rounded-full bg-violet-400 p-2 inline-block mr-3 w-10 h-10"
|
||||
class="rounded-full bg-accent-purple p-2 inline-block mr-3 w-10 h-10"
|
||||
>
|
||||
<LinkIcon />
|
||||
<LinkIcon color="black" />
|
||||
</div>
|
||||
Resources
|
||||
</h2>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<Panel class="flex flex-col gap-3 p-6">
|
||||
<h2 class="text-2xl font-bold flex items-center">
|
||||
<div
|
||||
class="rounded-full bg-accent p-2 inline-block mr-3 w-10 h-10"
|
||||
class="rounded-full bg-accent-pink p-2 inline-block mr-3 w-10 h-10"
|
||||
>
|
||||
<MessageCircleQuestionIcon color="black" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,21 +10,21 @@
|
|||
theme.dark = dark;
|
||||
|
||||
if (dark) {
|
||||
lightElement.classList.remove("bg-violet-400");
|
||||
darkElement.classList.add("bg-violet-400");
|
||||
lightElement.classList.remove("bg-accent-purple");
|
||||
darkElement.classList.add("bg-accent-purple");
|
||||
} else {
|
||||
darkElement.classList.remove("bg-violet-400");
|
||||
lightElement.classList.add("bg-violet-400");
|
||||
darkElement.classList.remove("bg-accent-purple");
|
||||
lightElement.classList.add("bg-accent-purple");
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if (theme.dark) {
|
||||
lightElement.classList.remove("bg-violet-400");
|
||||
darkElement.classList.add("bg-violet-400");
|
||||
lightElement.classList.remove("bg-accent-purple");
|
||||
darkElement.classList.add("bg-accent-purple");
|
||||
} else {
|
||||
darkElement.classList.remove("bg-violet-400");
|
||||
lightElement.classList.add("bg-violet-400");
|
||||
darkElement.classList.remove("bg-accent-purple");
|
||||
lightElement.classList.add("bg-accent-purple");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
<h2 class="text-2xl font-bold">
|
||||
<PaletteIcon
|
||||
size="40"
|
||||
class="inline-block -mt-1 mr-2 bg-violet-400 p-2 rounded-full"
|
||||
class="inline-block -mt-1 mr-2 bg-accent-purple p-2 rounded-full"
|
||||
color="black"
|
||||
/>
|
||||
Appearance
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
<button
|
||||
bind:this={darkElement}
|
||||
onclick={() => setDark(true)}
|
||||
class="btn flex-1 p-4 rounded-lg bg-button text-black flex items-center justify-center"
|
||||
class="btn flex-1 p-4 rounded-lg text-black flex items-center justify-center"
|
||||
>
|
||||
<MoonIcon size="24" class="inline-block mr-2" />
|
||||
Dark
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@
|
|||
<div class="flex flex-col gap-4 flex-1">
|
||||
<About.Resources />
|
||||
<About.Credits {mainContribs} {ghContribs} />
|
||||
<!-- <About.Donate {donors} /> -->
|
||||
<About.Donate />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,11 +10,12 @@ export default {
|
|||
"panel-accented": "var(--bg-panel-accented)",
|
||||
separator: "var(--bg-separator)",
|
||||
button: "var(--bg-button)",
|
||||
"panel-alt": "var(--bg-panel-alt)",
|
||||
"panel-alt": "var(--bg-button)",
|
||||
badge: "var(--bg-badge)",
|
||||
},
|
||||
borderColor: {
|
||||
separator: "var(--bg-separator)",
|
||||
button: "var(--bg-button)",
|
||||
},
|
||||
textColor: {
|
||||
foreground: "var(--fg)",
|
||||
|
|
@ -24,6 +25,10 @@ export default {
|
|||
},
|
||||
colors: {
|
||||
accent: "var(--accent)",
|
||||
"accent-pink": "var(--accent-pink)",
|
||||
"accent-red": "var(--accent-red)",
|
||||
"accent-purple": "var(--accent-purple)",
|
||||
"accent-blue": "var(--accent-blue)",
|
||||
},
|
||||
boxShadow: {
|
||||
panel: "var(--shadow-panel)",
|
||||
|
|
|
|||
Loading…
Reference in New Issue