animation

This commit is contained in:
cupcakearmy 2021-11-23 14:32:00 +01:00
parent b719d12b93
commit 27cbc8e56e
No known key found for this signature in database
GPG Key ID: 3235314B4D31232F
3 changed files with 18 additions and 9 deletions

View File

@ -28,28 +28,30 @@
<style>
.wrapper {
position: fixed;
color: #111;
top: 0;
color: #000;
bottom: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: #fefefe;
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;
/* display: none; */
bottom: -100vh;
}
@media (prefers-color-scheme: dark) {
.wrapper {
background-color: #111;
color: #eee;
background-color: hsl(0, 0%, 0%, 0.925);
color: #ffffff;
}
}
@ -76,10 +78,12 @@
display: block;
cursor: pointer;
padding: 0.1em;
opacity: 0.6;
transition: all 100ms ease-in-out;
}
.dismiss .links a:hover {
transform: translateX(-0.5em);
transform: translateX(-0.25em);
opacity: 1;
}
</style>

View File

@ -1,5 +1,5 @@
import browser from 'webextension-polyfill'
import { readable } from 'svelte/store'
import { writable } from 'svelte/store'
async function check(set) {
if (window.document.hidden) return
@ -10,7 +10,7 @@ async function check(set) {
set(isBlocked)
}
export const blocked = new readable(false, (set) => {
export const blocked = new writable(false, (set) => {
check(set)
const interval = setInterval(() => check(set), 1000)
return () => clearInterval(interval)

View File

@ -4,7 +4,11 @@ dayjs.extend(duration)
import browser from 'webextension-polyfill'
import { isDev } from '../shared/utils'
import { blocked } from './blocked'
export const buttons = [
...(isDev ? [{ label: 'Dev', duration: dayjs.duration({ seconds: 5 }) }] : []),
{ label: '1 minute', duration: dayjs.duration({ minutes: 1 }) },
{ label: '5 minutes', duration: dayjs.duration({ minutes: 5 }) },
{ label: '15 minutes', duration: dayjs.duration({ minutes: 15 }) },
@ -17,4 +21,5 @@ export function dismiss(duration) {
duration: duration.asMilliseconds(),
host: window.location.host,
})
blocked.set(false)
}