Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282@layer base, utils, components;
/* Import the base stylesheet */@import "@webtui/css/base.css";
/* Utils */@import "@webtui/css/utils/box.css";
/* Components */@import "@webtui/css/components/button.css";@import "@webtui/css/components/typography.css";@import "@webtui/css/components/badge.css";
/* Catppuccin Theme */@import "@webtui/theme-catppuccin";
/* Custom theme overrides for pixel/gameboy style */@layer base { :root { --font-size: 14px; --line-height: 1.5; --font-family: 'Press Start 2P', monospace; --font-weight-bold: 700; --font-weight-normal: 400; /* Box customization */ --box-border-color: var(--green); --box-border-width: 3px; --box-rounded-radius: 0px; /* Pixel style variables */ --pixel-border: 4px; --pixel-shadow: 5px 5px 0px rgba(0, 0, 0, 0.2); /* Gameboy screen colors */ --gameboy-bg: var(--crust); --gameboy-fg: var(--green); --gameboy-accent: var(--teal); --gameboy-button: var(--mauve); --gameboy-button-hover: var(--pink); /* Gameboy dimensions */ --gameboy-width: 480px; --gameboy-screen-padding: 1.25rem; }}
html { font-family: 'Press Start 2P', monospace;}
body { margin: 0; display: flex; align-items: center; justify-content: center; min-width: 320px; min-height: 100vh; background-color: var(--gameboy-bg); color: var(--text); padding: 1rem;}
#app { width: 100%; max-width: var(--gameboy-width); min-height: auto; margin: 0 auto; padding: var(--gameboy-screen-padding); text-align: center; background-color: var(--mantle); border: var(--pixel-border) solid var(--green); box-shadow: 0 0 0 8px var(--surface0), var(--pixel-shadow); overflow: auto;}
/* Pixel-styled containers using box utility */.pixel-container { padding: 1rem; margin-bottom: 1.5rem; --box-border-color: var(--green);}
/* Make the last container have no bottom margin */.pixel-container:last-child { margin-bottom: 0;}
/* Title styles */h1 { color: var(--mauve); margin-bottom: 1rem; font-size: 1.4rem; text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.3);}
h2 { color: var(--blue); margin-bottom: 0.75rem; font-size: 1rem;}
p { color: var(--text); font-size: 0.8rem;}
/* Pixel style buttons */button.pixel-btn { background-color: var(--surface0); border: var(--pixel-border) solid var(--mauve); border-radius: 0; padding: 0.75rem 1.25rem; font-family: inherit; font-size: 0.8rem; text-transform: uppercase; cursor: pointer; box-shadow: var(--pixel-shadow); transition: transform 0.1s, box-shadow 0.1s; margin-bottom: 0.5rem; position: relative; color: var(--text);}
button.pixel-btn:hover { background-color: var(--blue); color: var(--crust); border-color: var(--lavender);}
button.pixel-btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);}
button.pixel-btn:disabled { opacity: 0.6; cursor: not-allowed;}
/* Button hover animation */button.pixel-btn::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, transparent 0%, rgba(255, 255, 255, 0.1) 50%, transparent 100%); opacity: 0; transition: opacity 0.3s;}
button.pixel-btn:hover::after { opacity: 1;}
/* Custom form elements */.input-field { width: 100%; padding: 0.75rem; font-family: inherit; background-color: var(--surface0); color: var(--text); border: var(--pixel-border) solid var(--surface2); border-radius: 0; box-sizing: border-box; margin-bottom: 0.5rem; font-size: 0.8rem;}
.input-field:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue);}
.input-field.error { border-color: var(--red);}
/* Error styling */.error-text { color: var(--red); font-size: 0.7rem; margin-top: 0.25rem;}
/* Utility classes */.form-group { margin-bottom: 1rem; text-align: left;}
.follow-buttons { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 1rem;}
.share-url { margin-top: 1rem;}
label { color: var(--text); font-weight: bold; display: block; margin-bottom: 0.5rem; font-size: 0.8rem;}
.mb-2 { margin-bottom: 0.5rem;}
.block { display: block;}
/* Footer styling */.footer { margin-top: 2rem; margin-bottom: 0;}
.footer-links { display: flex; justify-content: center; gap: 1rem;}
.footer-link { text-decoration: none;}
.footer-btn { background-color: var(--surface1); border-color: var(--peach);}
.footer-btn:hover { background-color: var(--peach); color: var(--crust); border-color: var(--yellow);}
/* Mobile optimization */@media (max-width: 768px) { :root { --gameboy-width: 100%; } #app { padding: 0.75rem; max-width: none; box-shadow: none; border: none; } button.pixel-btn { width: 100%; } h1 { font-size: 1.2rem; } h2 { font-size: 0.9rem; } .footer-links { flex-direction: column; gap: 0.5rem; }}