Added effective date column. Changed warning page theme.

assets/components/container/warning.vue

@@ -67,12 +67,13 @@ export default {
 	justify-content: center;
 	position: absolute;
 	z-index: 10;
-	background: var(--darken-censor);
+	background: var(--background-censor);
+	backdrop-filter: blur(.25rem);
 	overflow-y: auto;
 }
 
 .warning {
-	color: var(--text-light);
+	color: var(--text);
 	width: 50rem;
 	max-height: 100%;
 	max-width: 100%;
@@ -87,8 +88,8 @@ export default {
 .title {
 	display: block;
 	font-size: 2rem;
-	margin: 1rem 0 0 0;
-	color: var(--text-light);
+	margin: 1rem 0;
+	color: var(--text);
 	text-align: center;
 }
 
@@ -113,7 +114,7 @@ export default {
 .rules {
 	margin: 0 0 0 1rem;
 	text-align: left;
-	text-shadow: 0 0 3px var(--darken-extreme);
+	text-shadow: 0 0 3px var(--highlight-strong);
 }
 
 .rule {
@@ -134,16 +135,16 @@ export default {
 	align-items: center;
 	justify-content: center;
 	border: none;
+	border-radius: .25rem;
 	padding: 0;
 	position: relative;
-	border-radius: 1rem;
-	color: var(--lighten-strong);
 	cursor: pointer;
 	font-size: 1.5rem;
 	text-decoration: none;
-	transition: border .5s ease;
+	transition: border-radius .2s ease;
 
 	&.leave {
+		color: var(--shadow-strong);
 		flex-direction: row;
 		padding: 1rem;
 
@@ -151,7 +152,11 @@ export default {
 			width: 1.5rem;
 			height: 1.5rem;
 			margin: 0 1rem 0 0;
-			fill: var(--lighten);
+			fill: var(--shadow);
+		}
+
+		&:hover {
+			color: var(--text);
 		}
 	}
 
@@ -161,6 +166,7 @@ export default {
 
 	&.straight,
 	&.queer {
+		color: var(--lighten-strong);
 		background: var(--darken-censor);
 
 		&:before {
@@ -169,10 +175,18 @@ export default {
 			height: calc(100% + .25rem);
 			position: absolute;
 			z-index: -1;
-			border-radius: 1.1rem;
 			filter: blur(.25rem);
 			transition: filter .2s ease;
 		}
+
+		&:hover {
+			color: var(--text-light);
+			border-radius: 0;
+
+			.button-sub {
+				color: var(--text-light);
+			}
+		}
 	}
 
 	&.straight:before {
@@ -188,14 +202,8 @@ export default {
 	}
 
 	&:hover {
-		color: var(--text-light);
-
-		.button-sub {
-			color: var(--lighten-strong);
-		}
-
 		.icon {
-			fill: var(--text-light);
+			fill: var(--text);
 		}
 
 		&.straight:before,
@@ -225,7 +233,7 @@ export default {
 }
 
 .preferences {
-	color: var(--lighten);
+	color: var(--shadow);
 	display: block;
 	padding: .5rem 0 1rem 0;
 	text-align: center;
@@ -234,11 +242,11 @@ export default {
 
 @media(max-width: $breakpoint) {
 	.title {
-		font-size: 1.5rem;
+		font-size: 1.75rem;
 	}
 
 	.logo {
-		width: 5rem;
+		width: 5.75rem;
 		margin: 0 .5rem 0 0;
 	}
 }