diff --git a/assets/components/container/warning.vue b/assets/components/container/warning.vue
index dfb0de9d..a81c4309 100644
--- a/assets/components/container/warning.vue
+++ b/assets/components/container/warning.vue
@@ -29,7 +29,7 @@
@click="$emit('enter', true)"
>
Enter
- I like gay, bi and trans content
+ I want to see gay, bi and trans content
- You can adjust your content preferences after entering
+ You can adjust your content preferences later
@@ -119,14 +119,6 @@ export default {
line-height: 1.5;
}
-.preferences {
- color: var(--lighten);
- display: block;
- padding: .5rem 0 1rem 0;
- text-align: center;
- font-size: .9rem;
-}
-
.actions {
display: flex;
text-align: center;
@@ -134,21 +126,22 @@ export default {
}
.button {
- display: inline-block;
+ display: inline-flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
border: none;
font-size: 1.5rem;
padding: 0;
- background: none;
border: solid 2px transparent;
+ color: var(--lighten-strong);
+ background: none;
cursor: pointer;
text-decoration: none;
flex-basis: 0;
&.leave {
- display: inline-flex;
- align-items: center;
- justify-content: center;
- color: var(--lighten-strong);
+ flex-direction: row;
padding: 1rem;
.icon {
@@ -161,13 +154,6 @@ export default {
&.enter {
flex-grow: 1;
-
- &:hover {
- .button-title,
- .button-sub {
- color: var(--text-light);
- }
- }
}
&.straight {
@@ -185,6 +171,10 @@ export default {
&:hover {
color: var(--text-light);
+ .button-sub {
+ color: var(--lighten-strong);
+ }
+
.icon {
fill: var(--text-light);
}
@@ -194,23 +184,30 @@ export default {
.button-title,
.button-sub {
width: 100%;
- display: block;
box-sizing: border-box;
}
.button-title {
font-size: 1.5rem;
- padding: .5rem .5rem .15rem .5rem;
- color: var(--lighten-strong);
+ padding: .5rem 0 .15rem 0;
font-weight: bold;
}
.button-sub {
- font-size: .75rem;
+ display: block;
+ font-size: .8rem;
padding: .15rem .5rem .75rem .5rem;
color: var(--lighten);
}
+.preferences {
+ color: var(--lighten);
+ display: block;
+ padding: .5rem 0 2rem 0;
+ text-align: center;
+ font-size: .9rem;
+}
+
@media(max-width: $breakpoint) {
.title {
font-size: 1.5rem;
@@ -220,17 +217,15 @@ export default {
@media(max-width: $breakpoint-small) {
.actions {
flex-direction: column-reverse;
+ padding: 0;
.button {
margin: 0 0 1rem 0;
}
- }
-}
-@media(max-width: $breakpoint-micro) {
- .button.leave {
- padding: 1rem;
- flex-grow: 1;
+ .button:first-child {
+ margin: 0;
+ }
}
}