mirror of
https://github.com/cupcakearmy/ora.git
synced 2024-10-31 16:24:11 +01:00
animation
This commit is contained in:
parent
b719d12b93
commit
27cbc8e56e
@ -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>
|
||||
|
@ -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)
|
||||
|
@ -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)
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user