cupcakearmy/ora
1
0
Fork 0
mirror of https://github.com/cupcakearmy/ora.git synced 2024-12-21 23:56:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

animation

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/client/App.svelte
View File

@ -28,28 +28,30 @@
<style> <style>
.wrapper { .wrapper {
position: fixed; position: fixed;
color: #111; color: #000;
top: 0; bottom: 0;
left: 0; left: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
background-color: #fefefe; background-color: hsla(0, 0%, 100%, 0.975);
z-index: 999999999; z-index: 999999999;
font-size: 1rem; font-size: 1rem;
padding: 1rem; padding: 1rem;
user-select: none; user-select: none;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
'Helvetica Neue', sans-serif; 'Helvetica Neue', sans-serif;
transition: all 300ms ease-out;
} }
.wrapper.hidden { .wrapper.hidden {
display: none; /* display: none; */
bottom: -100vh;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
.wrapper { .wrapper {
background-color: #111; background-color: hsl(0, 0%, 0%, 0.925);
color: #eee; color: #ffffff;
} }
} }
@ -76,10 +78,12 @@
display: block; display: block;
cursor: pointer; cursor: pointer;
padding: 0.1em; padding: 0.1em;
opacity: 0.6;
transition: all 100ms ease-in-out; transition: all 100ms ease-in-out;
} }
.dismiss .links a:hover { .dismiss .links a:hover {
transform: translateX(-0.5em); transform: translateX(-0.25em);
opacity: 1;
} }
</style> </style>

4
src/client/blocked.js
View File

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

5
src/client/dismiss.js
View File

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