Fix shop filterbox styling on newer browsers

Signed-off-by: Kouya Heika <kouyaheika@canithesis.org>

core/branding/icon-clippy.svg

@@ -0,0 +1,181 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="170.38976mm"
+   height="147.89905mm"
+   viewBox="0 0 170.38975 147.89904"
+   version="1.1"
+   id="svg18368"
+   sodipodi:docname="icon-clippy.svg"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   xml:space="preserve"
+   inkscape:export-filename="icon-clippy.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     inkscape:zoom="0.99234557"
+     inkscape:cx="303.82561"
+     inkscape:cy="270.06721"
+     inkscape:window-width="1901"
+     inkscape:window-height="1004"
+     inkscape:window-x="1920"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg18368" /><defs
+     id="defs18365"><marker
+       markerWidth="0.52499998"
+       markerHeight="0.99999995"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       id="marker15"
+       viewBox="0 0 0.525 1"
+       inkscape:stockid="Triangle cap"
+       style="overflow:visible"
+       preserveAspectRatio="xMidYMid"
+       inkscape:isstock="true"
+       inkscape:collect="always"><path
+         style="fill:context-stroke;stroke-linecap:butt"
+         d="M 0,-1 1,0 0,1 -0.05,0 Z"
+         sodipodi:nodetypes="sssssscsss"
+         transform="scale(0.5)"
+         id="path15" /></marker><marker
+       markerWidth="0.52499997"
+       markerHeight="0.99999994"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       id="CapTriangle"
+       viewBox="0 0 0.525 1"
+       inkscape:stockid="Triangle cap"
+       style="overflow:visible"
+       preserveAspectRatio="xMidYMid"
+       inkscape:isstock="true"
+       inkscape:collect="always"><path
+         style="fill:context-stroke;stroke-linecap:butt"
+         d="M 0,-1 1,0 0,1 -0.05,0 Z"
+         sodipodi:nodetypes="sssssscsss"
+         transform="scale(0.5)"
+         id="path61" /></marker><linearGradient
+       id="linearGradient10"
+       inkscape:collect="always"><stop
+         style="stop-color:#000000;stop-opacity:1;"
+         offset="0.42029846"
+         id="stop10" /><stop
+         style="stop-color:#ffffff;stop-opacity:1;"
+         offset="0.49509546"
+         id="stop12" /><stop
+         style="stop-color:#fdfdfd;stop-opacity:1;"
+         offset="0.80641204"
+         id="stop14" /><stop
+         style="stop-color:#c4c4c4;stop-opacity:1;"
+         offset="0.93403041"
+         id="stop13" /></linearGradient><clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath10"><g
+         inkscape:label="Clip"
+         id="use10" /></clipPath><radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient10"
+       id="radialGradient11"
+       cx="137.06261"
+       cy="22.058218"
+       fx="137.06261"
+       fy="22.058218"
+       r="9.6118269"
+       gradientTransform="matrix(0.90827681,0,0,0.54686612,1.1964336,35.417538)"
+       gradientUnits="userSpaceOnUse" /><radialGradient
+       inkscape:collect="always"
+       xlink:href="#linearGradient10"
+       id="radialGradient11-6"
+       cx="137.06261"
+       cy="22.058218"
+       fx="137.06261"
+       fy="22.058218"
+       r="9.6118269"
+       gradientTransform="matrix(0.87645508,0,0,0.54636444,-279.50538,15.874967)"
+       gradientUnits="userSpaceOnUse" /><marker
+       markerWidth="0.52499998"
+       markerHeight="0.99999994"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       id="marker15-1"
+       viewBox="0 0 0.525 1"
+       inkscape:stockid="Triangle cap"
+       style="overflow:visible"
+       preserveAspectRatio="xMidYMid"
+       inkscape:isstock="true"
+       inkscape:collect="always"><path
+         style="fill:context-stroke;stroke-linecap:butt"
+         d="M 0,-1 1,0 0,1 -0.05,0 Z"
+         sodipodi:nodetypes="sssssscsss"
+         transform="scale(0.5)"
+         id="path15-2" /></marker><marker
+       markerWidth="0.52499998"
+       markerHeight="0.99999994"
+       refX="0"
+       refY="0"
+       orient="auto-start-reverse"
+       id="CapTriangle-7"
+       viewBox="0 0 0.525 1"
+       inkscape:stockid="Triangle cap"
+       style="overflow:visible"
+       preserveAspectRatio="xMidYMid"
+       inkscape:isstock="true"
+       inkscape:collect="always"><path
+         style="fill:context-stroke;stroke-linecap:butt"
+         d="M 0,-1 1,0 0,1 -0.05,0 Z"
+         sodipodi:nodetypes="sssssscsss"
+         transform="scale(0.5)"
+         id="path61-0" /></marker></defs><path
+     style="fill:#fcf3e7;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:butt;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1"
+     d="M 0.26662419,131.97898 106.64967,147.17655 c 30.66178,-18.66369 34.66115,-30.39515 32.52815,-40.52687 7.19886,-17.597202 30.39516,-37.860638 30.39516,-37.860638 L 58.124072,57.057576 c 0,0 -19.996813,17.597198 -27.995538,36.79414 2.666241,10.398344 0.266623,21.863184 -29.86190981,38.127264 z"
+     id="path16"
+     sodipodi:nodetypes="ccccccc" /><path
+     style="fill:none;stroke:#ffb0bd;stroke-width:10;stroke-linecap:square;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+     d="m 41.47699,54.108619 c 0,0 -7.725334,-35.88282 -25.246556,-29.268512 -17.6186096,6.651073 -1.978712,54.084628 3.565402,66.409269 6.949003,15.447724 16.054467,38.719934 32.993059,38.649014 13.783345,-0.0577 23.683855,-21.67523 24.3206,-35.443973 C 77.787572,79.791893 74.317599,63.319214 59.76457,65.231992 45.002826,67.172202 40.793737,89.556325 44.116434,104.06953 c 4.324013,18.88685 20.521399,39.0756 39.780205,36.95223 23.892911,-2.63429 28.069541,-35.49706 29.033881,-57.879248 0.61322,-14.23268 6.35614,-32.20422 24.50914,-35.632505 13.47839,-2.545464 29.29129,-14.511646 23.18941,-26.960044 C 151.52819,1.9833318 124.41917,9.3930079 105.57779,17.910518 87.470351,26.096241 83.142512,55.428343 83.142512,55.428343"
+     id="path6"
+     sodipodi:nodetypes="csssssssssssc" /><path
+     style="fill:none;stroke:#99cdff;stroke-width:5;stroke-linecap:square;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
+     d="M 118.96354,62.592547 C 106.33191,60.141634 93.323228,52.600363 83.519575,40.722862 79.371876,55.42834 77.675091,81.634256 77.486559,91.249377 c 8.860994,7.918334 18.287579,14.516943 34.312771,19.230243 5.09036,-22.058217 5.46742,-37.517824 5.46742,-37.517824 -11.8775,-3.016509 -19.795824,-5.655954 -28.656818,-13.76282 -3.016508,11.68897 -0.188531,18.664645 -3.016508,27.148575"
+     id="path7"
+     sodipodi:nodetypes="ccccccc" /><ellipse
+     style="fill:url(#radialGradient11);stroke:none;stroke-width:7.08752;stroke-linecap:square;stroke-linejoin:round;stroke-dasharray:none"
+     id="path8"
+     cx="125.68723"
+     cy="47.480431"
+     rx="8.7301989"
+     ry="5.2563825"
+     transform="matrix(0.98090528,-0.19448609,0.2883079,0.95753776,0,0)" /><ellipse
+     style="fill:url(#radialGradient11-6);stroke:none;stroke-width:6.95906;stroke-linecap:square;stroke-linejoin:round;stroke-dasharray:none"
+     id="path8-9"
+     cx="-159.37614"
+     cy="27.926792"
+     rx="8.4243336"
+     ry="5.2515602"
+     transform="matrix(-0.99825386,0.05906975,-0.02952604,0.99956401,0,0)" /><path
+     style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#marker15);marker-end:url(#CapTriangle)"
+     d="m 140.51791,10.108248 c 0,0 -5.67963,0.425433 -9.80371,1.365623 -2.51009,0.572236 -7.2243,2.93241 -7.2243,2.93241"
+     id="path14"
+     sodipodi:nodetypes="csc" /><path
+     style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:2;stroke-linecap:butt;stroke-linejoin:bevel;stroke-dasharray:none;stroke-opacity:1;marker-start:url(#marker15-1);marker-end:url(#CapTriangle-7)"
+     d="m 150.80877,8.4570338 c 0,0 5.49557,-1.0251192 9.64602,-1.1543835 2.52615,-0.07868 7.59634,1.0260625 7.59634,1.0260625"
+     id="path14-6"
+     sodipodi:nodetypes="csc"
+     inkscape:transform-center-x="-26.259294"
+     inkscape:transform-center-y="-3.8206609" /></svg>

core/css/buttons.css

@@ -1,4 +1,4 @@
-.button { 
+.button {
 	background: var(--default-button-background);
 	border: var(--default-button-border);
 	font-family: var(--primary-font);
@@ -125,11 +125,20 @@ button.formbutton a {
 .longbutton > a, .widebutton > a {
 	width: 120px;
 }
-	
+
 .longbutton > a img, .smallbutton > a img, .widebutton > a img {
 	margin-right: 4px;
 }
 
+.button.longbutton.textbutton {
+	text-align: center;
+}
+
+.button.longbutton.textbutton a {
+	font-size: 16px;
+	display: inline-block !important;
+}
+
 .button:hover, .button.selected, button.formbutton:hover {
 	background: var(--hover-button-background);
 	border: var(--hover-button-border);
@@ -150,22 +159,22 @@ button.formbutton a {
 		display: block;
 		margin: 2px;
 	}
-	
+
 	.button a {
 		display: block;
 		width: 48px;
 		height: 48px;
 	}
-	
+
 	.popbutton {
 		font-size: 16px;
 		margin: 2px 4px;
 	}
-	
+
 	.popbutton:hover {
 		width: 140px;
 	}
-	
+
 	.popbutton > a {
 		color: var(--main-text);
 		text-decoration: none;
@@ -174,11 +183,11 @@ button.formbutton a {
 		height: 48px;
 		width: 144px;
 	}
-	
+
 	.popbutton > a img {
 		margin-right: 4px;
 	}
-	
+
 	.oddbutton {
 		top: 8px;
 		left: calc(64px + 8px);
@@ -190,24 +199,24 @@ button.formbutton a {
 		display: inline-block;
 		margin: 2px;
 	}
-	
+
 	.popbutton {
 		margin: 4px 2px;
 	}
-	
+
 	.popbutton:hover {
 		width: 44px;
 	}
-	
+
 	.popbutton a:nth-of-type(2) {
 		display: none;
 	}
-	
+
 	.oddbutton {
 		top: calc(64px + 8px);
 		left: 8px;
 	}
-	
+
 	.longbutton.collapse {
 		width: 20px;
 		margin: 2px !important;

core/css/tabbed-container.css

@@ -6,8 +6,8 @@
 	flex-direction: column;
 }
 
-.tabbed-page .tablist,
-.tabbed-container .tablist {
+.tabbed-page > .tablist,
+.tabbed-container > .tablist {
 	position: relative;
 	bottom: -2px;
 	display: flex;
@@ -17,21 +17,16 @@
 	overflow-y: hidden;
 }
 
-.tabbed-page .tablist .tab,
-.tabbed-container .tablist .tab,
-.tabbed-container .tablist .faketab {
-	cursor: pointer;
-}
+.tabbed-page > .tablist.fulltabs > .tab,
+.tabbed-container > .tablist.fulltabs > .tab,
+.tabbed-container > .tablist.fulltabs > .faketab { flex-grow: 1; }
+.tabbed-page > .tablist.fulltabs > .tab > *,
+.tabbed-container > .tablist.fulltabs > .tab > *,
+.tabbed-container > .tablist.fulltabs > .faketab > * { display: inline-block; width: 100%; }
 
-.tablist a,
-.tablist a:link, .tablist a:visited {
-	color: var(--main-text);
-	text-decoration: none;
-}
-
-.tabbed-page .tablist .tab,
-.tabbed-container .tablist .tab,
-.tabbed-container .tablist .faketab {
+.tabbed-page > .tablist > .tab,
+.tabbed-container > .tablist > .tab,
+.tabbed-container > .tablist > .faketab {
 	background-color: var(--tab-inactive);
 	border: var(--tab-border);
 	display: inline-block;
@@ -41,6 +36,13 @@
 	bottom: -2px;
 	text-align: center;
 	font-family: var(--primary-font);
+	cursor: pointer;
+}
+
+.tablist a,
+.tablist a:link, .tablist a:visited {
+	color: var(--main-text);
+	text-decoration: none;
 }
 
 .tabbed-container .tablist .tab *:not(.userlink) img,
@@ -48,9 +50,9 @@
 	vertical-align: middle;
 }
 
-.tabbed-page .tablist .tab.selected,
-.tabbed-container .tablist .tab.selected, 
-.tabbed-container .tablist .faketab.selected {
+.tabbed-page > .tablist > .tab.selected,
+.tabbed-container > .tablist > .tab.selected, 
+.tabbed-container > .tablist > .faketab.selected {
 	background: var(--tab-selected, #d3d3d3);
 	background: -moz-linear-gradient(0deg, var(--tab-selected) 50%, var(--tab-gradient) 100%);
 	background: -webkit-linear-gradient(0deg, var(--tab-selected) 50%, var(--tab-gradient) 100%);
@@ -59,15 +61,15 @@
 	/*border-bottom: none;*/
 }
 
-.tabbed-page .box:not(table),
-.tabbed-container .box:not(table),
-.tabbed-container .dropdown {
+.tabbed-page > .box:not(table),
+.tabbed-container > .box:not(table),
+.tabbed-container > .dropdown {
 	display: block;
 }
 
-.tabbed-page .box,
-.tabbed-container .box,
-.tabbed-container .dropdown {
+.tabbed-page > .box,
+.tabbed-container > .box,
+.tabbed-container > .dropdown {
 	background-color: var(--tab-selected);
 	border: var(--tab-border);
 	padding: 4px;
@@ -75,7 +77,7 @@
 }
 
 /* JS should handle positions and shit */
-.tabbed-container .dropdown {
+.tabbed-container > .dropdown {
 	position: absolute;
 	border-top: none;
 }
@@ -105,15 +107,15 @@
 		flex-shrink: 0;
 	}
 
-	.tabbed-container.vertical > .tablist .tab,
-	.tabbed-container.vertical > .tablist .faketab {
+	.tabbed-container.vertical > .tablist > .tab,
+	.tabbed-container.vertical > .tablist > .faketab {
 		margin: 2px 0px;
 		right: -1px;
 		bottom: 0px;
 	}
 
-	.tabbed-container.vertical > .tablist .tab.selected,
-	.tabbed-container.vertical > .tablist .faketab.selected {
+	.tabbed-container.vertical > .tablist > .tab.selected,
+	.tabbed-container.vertical > .tablist > .faketab.selected {
 		background: var(--tab-selected, #d3d3d3);
 		background: -moz-linear-gradient(-90deg, var(--tab-selected) 25%, var(--tab-gradient) 100%);
 		background: -webkit-linear-gradient(-90deg, var(--tab-selected) 25%, var(--tab-gradient) 100%);

core/css/usercard.css

@@ -7,13 +7,13 @@
 	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), 
+	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);
 }
@@ -32,4 +32,10 @@ div.usercard > table {
 .usercard .aframe.small {
 	image-rendering: auto;
 	width: 64px; height: 64px;
+}
+.usercard.wide .userlink {
+	font-size: 20px;
+}
+.usercard.wide .userlink img {
+	vertical-align: sub;
 }