redo usercarding

core/css/usercard.css

@@ -1,45 +0,0 @@
-.user-card {
-	background-position: 50% 50%;
-	font-family: var(--primary-font);
-	text-shadow: 
-		-1px -1px 0 var(--card-outline), 
-		0px -1px 0 var(--card-outline), 
-		1px -1px 0 var(--card-outline), 
-		-1px 0px 0 var(--card-outline), 
-		-1px 1px 0 var(--card-outline), 
-		0px 1px 0 var(--card-outline), 
-		1px 1px 0 var(--card-outline),
-		1px 0px 0 var(--card-outline);
-}
-
-/* == STYLES
-	URL assets should be in base64 here, preventing issues with incorrect path-finding from the URL itself. This file should be cached.
-*/
-.user-card.wblue { /* Worlio Blue */
-	--usercard-image: url('background');
-	--usercard-color: #1E90FF;
-}
-
-.user-card.wbumps { /* Worm Bumps */
-	--usercard-image: url('card/wbumps');
-	--usercard-color: #ddd;
-	--card-outline: #FFF;
-}
-
-.user-card.wgraving { /* Worm Engravings */
-	--usercard-image: url('card/wgraving');
-	--usercard-color: #eee;
-	--card-outline: #FFF;
-}
-
-.user-card.warpspeed { /* Warp Speed */
-	--usercard-image: url('card/warpspeed');
-	--usercard-color: #000;
-	--card-outline: #FFF;
-}
-
-.user-card.nyanstars { /* Nyan Stars */
-	--usercard-image: url('card/nyanstars');
-	--usercard-color: #013368;
-	--card-outline: #FFF;
-}

core/style.css

@@ -1,6 +1,5 @@
 /* == BUTTONS */ @import url('css/buttons.css');
 /* = TABBED CONTAINERS */ @import url('css/tabbed-container.css');
-/* = UserCards */ @import url('css/usercard.css');
 
 /* Prevent automatic browser scaling and non-linear rendering */
 .pixel,
@@ -205,6 +204,26 @@ div.page-selector div.pagebutton.curpage a:visited {
 div.page-selector div.pagebutton.backpage { border-right: none; }
 div.page-selector div.pagebutton.forwpage { border-left: none; }
 
+/* == USER CARDS */
+.usercard {
+	background-image: var(--usercard-image, none);
+	background-color: var(--usercard-color, var(--secondary-container-background));
+	width: 400px;
+	border: 1px solid #7e7e7e;
+	padding: 8px;
+	background-position: 50% 50%;
+	font-family: var(--primary-font);
+	text-shadow: 
+		-1px -1px 0 var(--usercard-outline), 
+		0px -1px 0 var(--usercard-outline), 
+		1px -1px 0 var(--usercard-outline), 
+		-1px 0px 0 var(--usercard-outline), 
+		-1px 1px 0 var(--usercard-outline), 
+		0px 1px 0 var(--usercard-outline), 
+		1px 1px 0 var(--usercard-outline),
+		1px 0px 0 var(--usercard-outline);
+}
+
 /* == MAIN BODY */
 
 body {