Added boob and country aggregation to actors page.

components/filters/range.vue

@@ -77,132 +77,4 @@ const emit = defineEmits(['change', 'input', 'enable']);
 </script>
 
 <style scoped>
-.filter-section {
-	width: 15rem;
-	max-width: 100%;
-	border-bottom: solid 1px var(--shadow-hint);
-}
-
-.filter-label {
-	display: flex;
-	justify-content: space-between;
-	padding: .75rem .5rem .5rem .5rem;
-	color: var(--shadow);
-	font-weight: bold;
-	font-size: .9rem;
-
-	.label {
-		display: inline-flex;
-		align-items: center;
-		text-transform: capitalize;
-	}
-
-	.checkbox {
-		margin: 0 .75rem 0 0;
-	}
-
-	.icon {
-		margin: 0 .5rem 0 0;
-	}
-}
-
-.label-values {
-	font-weight: normal;
-}
-
-.filter-split {
-	display: flex;
-	align-items: center;
-}
-
-.toggle-container,
-.range-container {
-	display: flex;
-	flex-grow: 1;
-	align-items: center;
-	padding: .5rem 0;
-
-	&.on {
-		.toggle-label.on {
-			color: var(--enabled);
-
-			.icon {
-				fill: var(--enabled);
-			}
-		}
-
-		.toggle {
-			background-color: var(--enabled-background);
-
-			&::-webkit-slider-thumb {
-				background: var(--enabled);
-			}
-
-			&::-moz-range-thumb {
-				background: var(--enabled);
-			}
-		}
-	}
-
-	&.off {
-		.toggle-label.off {
-			color: var(--disabled);
-
-			.icon {
-				fill: var(--disabled);
-			}
-		}
-
-		.toggle {
-			background-color: var(--disabled-background);
-
-			&::-webkit-slider-thumb {
-				background: var(--disabled);
-			}
-
-			&::-moz-range-thumb {
-				background: var(--disabled);
-			}
-		}
-	}
-}
-
-.toggle-label {
-	display: inline-flex;
-	justify-content: center;
-	min-width: 1.5rem;
-	flex-shrink: 0;
-	padding: 0 .5rem;
-	color: var(--shadow);
-	font-weight: bold;
-	font-size: .9rem;
-
-	&.on {
-		text-align: right;
-	}
-
-	.icon {
-		fill: var(--shadow);
-	}
-
-	&:hover {
-		cursor: pointer;
-
-		&.on {
-			color: var(--enabled);
-
-			.icon {
-				fill: var(--enabled);
-			}
-		}
-
-		&.off {
-			color: var(--disabled);
-
-			.icon {
-				fill: var(--disabled);
-			}
-		}
-	}
-}
 </style>