Change colors

This commit is contained in:
2026-01-30 19:25:11 -07:00
parent a010e4ed81
commit 56cb8af74c
4 changed files with 23 additions and 12 deletions

View File

@@ -6,7 +6,7 @@ export function AccountButton () {
return (
<>
<div className='relative'>
<Link href='/account' className='home-button absolute -top-4 -left-4'>
<Link href='/account' className='top-button absolute -top-4 -left-4'>
<FontAwesomeIcon icon={faUser} />
</Link>
</div>

View File

@@ -6,7 +6,7 @@ export function DiscordButton () {
return (
<>
<div className='relative'>
<Link href='/discord' className='home-button absolute -top-4 -right-4'>
<Link href='/discord' className='top-button absolute -top-4 -right-4'>
<FontAwesomeIcon icon={faDiscord} />
</Link>
</div>

View File

@@ -6,7 +6,7 @@ export function HomeButton () {
return (
<>
<div className='relative'>
<Link href='/' className='home-button absolute -top-4 -left-4'>
<Link href='/' className='top-button absolute -top-4 -left-4'>
<FontAwesomeIcon icon={faHome} />
</Link>
</div>

View File

@@ -2,14 +2,24 @@
* {
@apply outline-0;
--col0: rgb(8, 8, 32);
--col1: rgb(16, 16, 40);
--col2: rgb(32, 32, 56);
--col3: rgb(48, 48, 72);
--col4: rgb(64, 64, 88);
--col5: rgb(80, 80, 104);
--col6: rgb(96, 96, 120);
--col7: rgb(112, 112, 136);
--col8: rgb(128, 128, 152);
}
body {
@apply bg-[rgb(24,24,48)] text-[rgb(200,200,250)] select-none flex items-center justify-center min-h-screen;
@apply bg-(--col0) text-[rgb(200,200,250)] select-none flex items-center justify-center min-h-screen;
}
.box {
@apply bg-[rgb(48,48,72)] border border-[rgb(72,72,96)] rounded-lg shadow-[rgba(0,0,0,0.5)];
@apply bg-(--col2) border border-(--col4) rounded-lg shadow-[rgba(0,0,0,0.5)];
@apply w-auto p-6 m-2;
}
@@ -18,8 +28,8 @@ body {
}
.games-grid a {
@apply flex flex-col items-center justify-center px-5 py-2.5 m-1 bg-[rgb(64,64,88)] border border-[rgb(88,88,112)] rounded-lg transition-all duration-200;
@apply hover:bg-[rgb(88,88,112)] hover:border-[rgb(112,112,136)] hover:-translate-y-0.5 min-w-30 w-auto h-32 shadow shadow-[rgba(0,0,0,0.5)];
@apply flex flex-col items-center justify-center px-5 py-2.5 m-1 bg-(--col4) border border-(--col6) rounded-lg transition-all duration-200;
@apply hover:bg-(--col5) hover:border-(--col7) hover:-translate-y-0.5 min-w-30 w-auto h-32 shadow shadow-[rgba(0,0,0,0.5)];
}
.games-grid a img {
@@ -49,15 +59,16 @@ body {
.downloads a,
button,
.button,
select {
@apply bg-[rgb(72,72,96)] hover:bg-[rgb(96,96,120)] border border-[rgb(96,96,120)] hover:border-[rgb(120,120,144)] hover:-translate-y-0.5 rounded-lg px-4 py-2 inline-block transition-all duration-200 cursor-pointer;
@apply bg-(--col4) hover:bg-(--col5) border border-(--col6) hover:border-(--col8) hover:-translate-y-0.5 rounded-lg px-4 py-2 inline-block transition-all duration-200 cursor-pointer;
}
.home-button {
@apply bg-[rgb(72,72,96)] hover:bg-[rgb(96,96,120)] border border-[rgb(96,96,120)] hover:border-[rgb(120,120,144)] hover:-translate-y-px rounded-full transition-all h-10 w-10 flex items-center justify-center;
.top-button {
@apply bg-(--col4) hover:bg-(--col5) border border-(--col6) hover:border-(--col7) hover:-translate-y-px rounded-full transition-all h-10 w-10 flex items-center justify-center;
}
.home-button svg {
.top-button svg {
@apply h-5 w-5;
}
@@ -66,5 +77,5 @@ p a {
}
input {
@apply bg-[rgb(72,72,96)] focus:bg-[rgb(96,96,120)] border border-[rgb(96,96,120)] focus:border-[rgb(120,120,144)] rounded-lg px-4 py-2 inline-block transition-all duration-200 cursor-pointer focus:cursor-text;
@apply bg-(--col4) focus:bg-(--col5) border border-(--col6) focus:border-(--col7) rounded-lg px-4 py-2 inline-block transition-all duration-200 cursor-pointer focus:cursor-text;
}