Added boob and country aggregation to actors page.

assets/css/inputs.css

@@ -65,3 +65,162 @@
 .radio {
 	margin: 0 .5rem 0 0;
 }
+
+.filter-section {
+	width: 15rem;
+	max-width: 100%;
+	border-bottom: solid 1px var(--shadow-hint);
+}
+
+.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);
+			}
+		}
+	}
+}
+
+.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;
+	}
+}
+
+.toggle {
+	width: 0;
+	flex-grow: 1;
+	height: 1.25rem;
+	appearance: none;
+	border-radius: 1rem;
+	background-color: var(--shadow-weak-30);
+	background-image: radial-gradient(circle, var(--shadow-weak-10) .3rem, transparent calc(.3rem + 1px));
+	cursor: pointer;
+
+	&::-webkit-slider-thumb {
+		appearance: none;
+		background: var(--disabled-handle);
+		width: 1.25rem;
+		height: 1.25rem;
+		border-radius: .625rem;
+		box-shadow: 0 0 3px var(--shadow-weak-10);
+	}
+
+	&::-moz-range-thumb {
+		appearance: none;
+		background: var(--disabled-handle);
+		width: 1.25rem;
+		height: 1.25rem;
+		border: none;
+		border-radius: .625rem;
+		box-shadow: 0 0 3px var(--shadow-weak-10);
+	}
+}

assets/css/theme.css

@@ -52,4 +52,10 @@
 
     --male: #0af;
     --female: #f0a;
+
+	--enabled: #5c2;
+	--enabled-background: rgba(0, 255, 0, .1);
+	--disabled: #c20;
+	--disabled-background: rgba(255, 0, 0, .1);
+	--disabled-handle: #aaa;
 }