fix css for CEF 103

src/app/components/Lobby.tsx

@@ -72,7 +72,7 @@ export default function Lobby ( { player }: { player: string } )
 							return (
 								<div key={ i } className={ playerClass }>
 									<div
-										className="champion w-11 h-11 scale-125 bg-center bg-no-repeat bg-[length:120%] rounded-br-xl rounded-tr-xl"
+										className="champion w-11 h-11 scaler-125 bg-center bg-no-repeat bg-[length:120%] rounded-br-xl rounded-tr-xl"
 										style={ {
 											backgroundImage: `url(${ player.championImage })`,
 										} }
@@ -85,13 +85,13 @@ export default function Lobby ( { player }: { player: string } )
 
 										<div className="flex flex-row gap-1">
 											<div
-												className="country w-8 h-6 scale-75 bg-center bg-contain bg-no-repeat"
+												className="country w-8 h-6 scaler-75 bg-center bg-contain bg-no-repeat"
 												style={ {
 													backgroundImage: `url(${ player.countryFlag })`,
 												} }
 											></div>
 											<div
-												className="position w-6 h-6 scale-105 bg-center bg-contain bg-no-repeat"
+												className="position w-6 h-6 scaler-105 bg-center bg-contain bg-no-repeat"
 												style={ {
 													backgroundImage: `url(${ player.positionIcon })`,
 												} }
@@ -104,7 +104,7 @@ export default function Lobby ( { player }: { player: string } )
 
 									{ player.logo && (
 										<div
-											className="logo w-10 h-10 scale-90 mr-1 -ml-1 my-1 bg-center bg-contain bg-no-repeat rounded-lg"
+											className="logo w-10 h-10 scaler-90 mr-1 -ml-1 my-1 bg-center bg-contain bg-no-repeat rounded-lg"
 											style={ { backgroundImage: `url(${ player.logo })` } }
 										></div>
 									) }

src/app/components/Ranked.tsx

@@ -87,7 +87,7 @@ export default function Ranked ( { name, tag }: { name: string; tag: string } )
 								}` }
 						>
 							<div
-								className={ `champion bg-center aspect-square scale-90 rounded-full drop-shadow-lg bg-no-repeat bg-[length:110%] ${ match.win ? "" : "lose"
+								className={ `champion bg-center aspect-square scaler-90 rounded-full drop-shadow-lg bg-no-repeat bg-[length:110%] ${ match.win ? "" : "lose"
 									}` }
 								style={ { backgroundImage: `url('${ match.championImg }')` } }
 							/>

src/app/components/Session.tsx

@@ -43,16 +43,16 @@ export default function Session ( { name, tag }: { name: string; tag: string } )
 
 	return (
 		<div className="font-sans font-bold tracking-wide">
-			<div className="profile scale-50 mx-[17rem] -mb-12 relative">
+			<div className="profile scaler-50 mx-[17rem] -mb-12 relative">
 				<div className="profile-picture w-64 h-64 floating-box relative">
 					<img
-						className="absolute inset-0 w-full h-full object-cover rounded-full scale-75 mt-16"
+						className="absolute inset-0 w-full h-full object-cover rounded-full scaler-75 mt-16"
 						src={ data.profileIcon }
 						alt="Summoner Icon"
 					/>
 					{ data.rankedIcon && (
 						<img
-							className="absolute inset-0 w-full h-full object-cover scale-200"
+							className="absolute inset-0 w-full h-full object-cover scaler-200"
 							src={ data.rankedIcon }
 							alt="Ranked Icon"
 						/>

src/app/globals.css

@@ -18,6 +18,15 @@ body {
 	font-family: Arial, Helvetica, sans-serif;
 }
 
+@theme {
+	--color-red-600: #e7000b;
+	--color-red-800: #9f0712;
+	--color-sky-600: #0084d1;
+	--color-sky-800: #00598a;
+	--color-gray-200: #e5e7eb;
+	--color-gray-300: #d1d5dc;
+}
+
 @keyframes slideInOut {
 	0% {
 		transform: translateX(-100%);
@@ -36,6 +45,31 @@ body {
 	}
 }
 
+.scaler-200 {
+	transform: scale(2);
+}
+
+.scaler-125 {
+	transform: scale(1.25);
+}
+
+.scaler-105 {
+	transform: scale(1.05);
+}
+
+.scaler-90 {
+	transform: scale(0.9);
+}
+
+.scaler-75 {
+	transform: scale(0.75);
+}
+
+.scaler-50 {
+	transform: scale(0.5);
+}
+
+
 .slide-animation {
 	animation: slideInOut 30s ease-in-out forwards;
 }