boiii
/
traxxx
forked from DebaucheryLibrarian/traxxx
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improved consent warning layout.

This commit is contained in:
DebaucheryLibrarian 2021-01-04 19:57:53 +01:00
parent a5eef66a1c
commit b791aaca5a
1 changed files with 28 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
assets/components/container/warning.vue
View File

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