<template> <div class="warning-container"> <div class="warning"> <strong class="title"> <span class="logo" v-html="logo" />contains sexually explicit content </strong> <ul class="rules"> <li class="rule">You are at least 18 years old, and legally permitted to view adult material in your jurisdiction.</li> <li class="rule">You do not regard erotic and frankly pornographic media as obscene or offensive.</li> <li class="rule">You understand that most sexual scenarios depicted on this website are fictional, performed by professional actors for the purpose of entertainment, and not representative of real-life interactions.</li> </ul> <span class="preferences">You can adjust your content preferences later</span> <div class="actions"> <a href="https://www.google.com" class="button leave" @click="$emit('leave')" ><Icon icon="arrow-left16" />Leave</a> <button class="button enter queer" @click="$emit('enter', true)" > <span class="button-title">Enter</span> <span class="button-sub">I want to see gay, bi and trans content</span> </button> <button class="button enter straight" @click="$emit('enter', false)" > <span class="button-title">Enter</span> <span class="button-sub">I prefer straight content</span> </button> </div> </div> </div> </template> <script> import logo from '../../img/logo.svg'; export default { data() { return { logo, }; }, emits: ['enter'], }; </script> <style lang="scss" scoped> @import 'breakpoints'; .warning-container { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: absolute; z-index: 10; background: var(--background-censor); backdrop-filter: blur(.25rem); overflow-y: auto; } .warning { color: var(--text); width: 50rem; max-height: 100%; max-width: 100%; margin: 1rem; } .copy, .rules { padding: .5rem 1rem; } .title { display: block; font-size: 2rem; margin: 1rem 0; color: var(--text); text-align: center; } .logo { width: 6.5rem; display: inline-block; fill: var(--primary); margin: 0 .6rem 0 0; ::v-deep(svg) { width: 100%; height: 100%; } } .copy { display: block; padding: 0 1rem; font-weight: bold; } .rules { margin: 0 0 0 1rem; text-align: left; text-shadow: 0 0 3px var(--highlight-strong); } .rule { padding: .5rem 1rem; line-height: 1.5; } .actions { display: flex; text-align: center; padding: 1rem 0; } .button { display: inline-flex; flex-basis: 0; flex-direction: column; align-items: center; justify-content: center; border: none; border-radius: .25rem; padding: 0; position: relative; cursor: pointer; font-size: 1.5rem; text-decoration: none; transition: border-radius .2s ease; &.leave { color: var(--shadow-strong); flex-direction: row; padding: 1rem; .icon { width: 1.5rem; height: 1.5rem; margin: 0 1rem 0 0; fill: var(--shadow); } &:hover { color: var(--text); } } &.enter { flex-grow: 1; } &.straight, &.queer { color: var(--lighten-strong); background: var(--darken-censor); &:before { content: ''; width: calc(100% + .3rem); height: calc(100% + .25rem); position: absolute; z-index: -1; filter: blur(.25rem); transition: filter .2s ease; } &:hover { color: var(--text-light); border-radius: 0; .button-sub { color: var(--text-light); } } } &.straight:before { background: var(--primary); } &.queer:before { background: linear-gradient(90deg, #f00, #f80, #ff0, #0f0, #00f, #a0f, #fff, #f8f, #0ff); } &:not(:last-child) { margin: 0 2rem 0 0; } &:hover { .icon { fill: var(--text); } &.straight:before, &.queer:before { filter: blur(0); } } } .button-title, .button-sub { width: 100%; box-sizing: border-box; } .button-title { font-size: 1.5rem; padding: .5rem 0 .15rem 0; font-weight: bold; } .button-sub { display: block; font-size: .8rem; padding: .15rem .5rem .75rem .5rem; color: var(--lighten); } .preferences { color: var(--shadow); display: block; padding: .5rem 0 1rem 0; text-align: center; font-size: .9rem; } @media(max-width: $breakpoint) { .title { font-size: 1.75rem; } .logo { width: 5.75rem; margin: 0 .5rem 0 0; } } @media(max-width: $breakpoint-small) { .actions { flex-direction: column-reverse; padding: 0; .button { margin: 0 0 1rem 0; } .button:first-child { margin: 0; } } } </style>