mirror of https://github.com/cupcakearmy/ora.git
99 lines
1.9 KiB
Svelte
99 lines
1.9 KiB
Svelte
<script>
|
|
import { blocked } from './blocked'
|
|
import { init } from './reporter'
|
|
import { buttons, dismiss } from './dismiss'
|
|
|
|
init()
|
|
</script>
|
|
|
|
<div class="wrapper" class:hidden={!$blocked}>
|
|
<div>
|
|
<h1>Overtime</h1>
|
|
<div>You have no time left on this website.</div>
|
|
<hr />
|
|
<div class="dismiss">
|
|
<div>
|
|
<i> dismiss for... </i>
|
|
</div>
|
|
<div class="links">
|
|
{#each buttons as button}
|
|
<!-- svelte-ignore a11y-missing-attribute -->
|
|
<a on:click={() => dismiss(button.duration)}>{button.label}</a>
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.wrapper {
|
|
position: fixed;
|
|
color: #000;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
background-color: hsla(0, 0%, 100%, 0.975);
|
|
z-index: 999999999;
|
|
font-size: 1rem;
|
|
padding: 1rem;
|
|
user-select: none;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
|
|
'Helvetica Neue', sans-serif;
|
|
transition: all 300ms ease-out;
|
|
}
|
|
|
|
.wrapper.hidden {
|
|
/* display: none; */
|
|
bottom: -100vh;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
.wrapper {
|
|
background-color: hsl(0, 0%, 0%, 0.925);
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.wrapper > div {
|
|
margin: 3rem auto;
|
|
max-width: 25rem;
|
|
}
|
|
|
|
.wrapper h1 {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.dismiss {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.dismiss .links {
|
|
margin-left: 1rem;
|
|
margin-top: -0.1rem;
|
|
}
|
|
|
|
.dismiss .links a {
|
|
color: inherit;
|
|
text-decoration: inherit;
|
|
display: block;
|
|
cursor: pointer;
|
|
padding: 0.1em;
|
|
opacity: 0.6;
|
|
transition: all 100ms ease-in-out;
|
|
}
|
|
|
|
.dismiss .links a:hover {
|
|
transform: translateX(-0.25em);
|
|
opacity: 1;
|
|
}
|
|
|
|
hr {
|
|
outline: none;
|
|
background: transparent;
|
|
border: 1px inset currentColor;
|
|
margin: 1em 0;
|
|
}
|
|
</style>
|