120 lines
2.1 KiB
Vue
120 lines
2.1 KiB
Vue
<template>
|
||
<div class="nsfw-warning">
|
||
<div class="nsfw-warning__background"></div>
|
||
<div class="nsfw-warning__message">
|
||
<div>
|
||
<h2>⚠️ Whoa, Nelly! ⚠️</h2>
|
||
<p>
|
||
By enabling NSFW mode you confirm that you are of legal age to view
|
||
adult content.
|
||
</p>
|
||
|
||
<div class="btn-container">
|
||
<a href="#" class="btn positive" @click.prevent="confirmNsfw(true)">
|
||
Yes, show me the goods 👀
|
||
</a>
|
||
<a href="#" class="btn negative" @click.prevent="confirmNsfw(false)">
|
||
NO, STAHP 😱
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
methods: {
|
||
confirmNsfw(input) {
|
||
this.$parent.nsfw = input;
|
||
this.$parent.isConfirmedHorny = input;
|
||
this.$parent.isWarn = false;
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import "@scss/_variables.scss";
|
||
@import "@scss/_mixins.scss";
|
||
|
||
.nsfw-warning {
|
||
position: fixed;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
|
||
z-index: 9001;
|
||
|
||
backdrop-filter: blur(1em);
|
||
background-color: rgba(#000, 0.5);
|
||
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
justify-content: center;
|
||
|
||
padding: 2em;
|
||
text-align: center;
|
||
|
||
&__background {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
}
|
||
|
||
&__message {
|
||
flex: 0 1 30em;
|
||
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
justify-content: center;
|
||
align-content: center;
|
||
|
||
margin: auto;
|
||
border: 0.25em solid $bg-color-warning;
|
||
border-radius: 1em;
|
||
padding: 1em;
|
||
|
||
z-index: 9002;
|
||
|
||
background-color: $bg-color-dark;
|
||
|
||
> * {
|
||
flex: 0 1 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btn-container {
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
}
|
||
|
||
.btn {
|
||
flex: 0 1 100%;
|
||
background-color: $bg-color-light;
|
||
border-radius: 0.25em;
|
||
font-size: 1.5em;
|
||
font-weight: bold;
|
||
padding: 0.25em 0.5em;
|
||
margin: 0 0 1em 0;
|
||
text-decoration: none;
|
||
|
||
@include mq-desktop {
|
||
flex: 0 1 100%;
|
||
}
|
||
|
||
&.positive {
|
||
background-color: green;
|
||
}
|
||
|
||
&.negative {
|
||
background-color: red;
|
||
}
|
||
}
|
||
</style>
|