[Client] Improve CSS Nesting compatibility for older browsers

client/src/components/Collection.vue

@@ -253,41 +253,41 @@ export default defineComponent({
 	background: #444;
 	padding: 1em;
 
-	h3 {
+	& h3 {
 		margin: 0;
 	}
 
-	table {
+	& table {
 		margin: 0.25em;
 		text-align: right;
 	}
 
-	tr {
+	& tr {
 		margin: 0.1em;
 	}
 }
 
 .set-stats {
 	margin: 0.5em;
 
-	table {
+	& table {
 		margin: auto;
 	}
 
-	caption {
+	& caption {
 		font-size: 1.25em;
 	}
 
-	tr:nth-child(odd) {
+	& tr:nth-child(odd) {
 		background-color: rgba(0, 0, 0, 0.2);
 	}
 
-	th,
-	td {
+	& th,
+	& td {
 		padding: 0.25em;
 	}
 
-	td:not(:first-child) {
+	& td:not(:first-child) {
 		text-align: center;
 	}
 }

client/src/css/app.css

@@ -1023,7 +1023,7 @@ ul.player-list {
 	position: relative;
 	min-width: 14px;
 
-	img {
+	& img {
 		width: 1em;
 		position: absolute;
 		top: 50%;
@@ -1032,7 +1032,7 @@ ul.player-list {
 		transform: translate(-50%, -50%);
 		filter: drop-shadow(0 0 2px #00000080);
 	}
-	div {
+	& div {
 		position: absolute;
 		top: 50%;
 		left: 50%;
@@ -1240,7 +1240,7 @@ ul.player-list {
 	margin-left: 1em;
 	margin-right: 1em;
 	min-height: 35px;
-	h2 {
+	& h2 {
 		display: inline-block;
 		margin: 0;
 		font-variant: small-caps;
@@ -1299,7 +1299,7 @@ ul.player-list {
 	justify-content: center;
 	align-items: center;
 
-	img {
+	& img {
 		width: 16px;
 		height: 16px;
 		object-fit: contain;
@@ -1322,7 +1322,7 @@ ul.player-list {
 	margin-left: 1em;
 	box-sizing: border-box;
 
-	h2 {
+	& h2 {
 		font-size: 20px;
 		line-height: 28px;
 	}
@@ -1581,8 +1581,8 @@ Can't be applied to .card-filtered directly as it creates a bug with the rotatio
 See: https://stackoverflow.com/questions/52937708/why-does-applying-a-css-filter-on-the-parent-break-the-child-positioning
 */
 .card-filtered .card-image {
-	i,
-	img {
+	& i,
+	& img {
 		filter: brightness(35%) saturate(50%);
 	}
 }