composer / static /_app /assets /pages /index.svelte-32be1fd5.css
Ron Au
feat(ui): Turn visualisation into audio controls
3deaf02
raw
history blame
3.85 kB
fieldset.svelte-1r9pswz.svelte-1r9pswz{position:relative;padding:0;border:none;margin-top:1rem}legend.svelte-1r9pswz.svelte-1r9pswz{text-align:center;font-size:1.25rem;font-weight:700;padding:0}.grid.svelte-1r9pswz.svelte-1r9pswz{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;width:min-content;margin:1rem auto}img.svelte-1r9pswz.svelte-1r9pswz{width:100%;height:100%;filter:invert(1);margin:auto}label.svelte-1r9pswz.svelte-1r9pswz{background-color:transparent;border-radius:.375rem;transition:background-color .25s;cursor:pointer}label.svelte-1r9pswz>div.svelte-1r9pswz{width:3rem;aspect-ratio:1 / 1}input.svelte-1r9pswz.svelte-1r9pswz{position:fixed;opacity:0;pointer-events:none}label[data-selected=true].svelte-1r9pswz.svelte-1r9pswz{background-color:#f7f7f7;border-radius:.375rem}label[data-selected=true].svelte-1r9pswz img.svelte-1r9pswz{filter:none}@media (min-width: 600px) and (max-width: 899px){.grid.svelte-1r9pswz.svelte-1r9pswz{display:flex;flex-direction:row}}@media (min-width: 900px){.grid.svelte-1r9pswz.svelte-1r9pswz{grid-template-columns:repeat(4,1fr)}}.options.svelte-1m848u0{display:flex;flex-direction:row;justify-content:center;width:100%;margin:auto}label.svelte-1m848u0{display:block;margin-bottom:1rem;padding:.5rem;border:2px solid hsl(0 0% 97%);border-right:none;text-align:center;transition:background-color .25s;cursor:pointer}label.svelte-1m848u0:nth-of-type(1){border-top-left-radius:.375rem;border-bottom-left-radius:.375rem;border-right-width:0}label.svelte-1m848u0:last-of-type{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem;border-right:2px solid hsl(0 0% 97%)}label[data-selected=true].svelte-1m848u0{background-color:#fff;color:#333;font-weight:700}label.svelte-1m848u0:focus{outline:red}input.svelte-1m848u0{position:fixed;opacity:0;pointer-events:none}fieldset.svelte-1ikh8be{padding:0;border:none;margin-top:1rem}legend.svelte-1ikh8be{text-align:center;font-size:1.25rem;font-weight:700;padding:0;margin-bottom:1rem}button.svelte-18w38ow{display:block;font-size:1.2rem;font-family:Lato,sans-serif;font-weight:700;color:#f7f7f7;background:transparent;border:3px solid hsl(0 0% 97%);border-radius:.375rem;padding:.5rem 1rem;cursor:pointer;margin:1rem auto 2rem}button[disabled].svelte-18w38ow{border-color:gray;color:gray;cursor:initial}img.svelte-18w38ow{height:1.2rem;aspect-ratio:1 / 1;vertical-align:bottom}@media (min-width: 900px){button.svelte-18w38ow{margin-top:0}}section.svelte-t1xv1q{border:2px solid hsl(0 0% 80%);border-radius:.375rem;padding:1rem}.container.svelte-t1xv1q{position:relative;padding:1rem;margin:auto}.visualisation.svelte-t1xv1q{display:block;margin:auto;height:100%;aspect-ratio:1 / 1;cursor:pointer}audio.svelte-t1xv1q{width:100%;margin:1rem auto}.play.svelte-t1xv1q{position:absolute;left:50%;top:50%;width:20%;aspect-ratio:1 / 1;transform:translate(-50%,-60%);filter:drop-shadow(0 0 5px black);cursor:pointer}.handle.svelte-t1xv1q{position:absolute;left:0;top:-2.5%;height:105%;width:.2rem;margin-left:1rem;border-radius:.1rem;background-color:#fff;cursor:pointer}@media (min-width: 600px){audio.svelte-t1xv1q{max-width:40rem}}section.svelte-4un5mw{border:2px solid hsl(0 0% 80%);border-radius:.375rem;padding:1rem}p.svelte-4un5mw{font-size:.75rem}main.svelte-1rfjlkw{width:100%;display:flex;flex-direction:column;gap:1rem;margin:0 auto}h1.svelte-1rfjlkw{font-size:1.5rem;border-left:.25ch solid hsl(0 0% 97%);padding-left:.5ch}.heading.svelte-1rfjlkw{font-size:2.25rem}p.svelte-1rfjlkw:not(.heading){max-width:40rem;font-size:1.2rem;line-height:1.5rem;margin:0}#options.svelte-1rfjlkw{display:flex;flex-direction:column;justify-content:space-between;margin-top:1rem}@media (min-width: 600px){main.svelte-1rfjlkw{max-width:60rem}}@media (min-width: 900px){#options.svelte-1rfjlkw{display:flex;flex-direction:row;justify-content:space-between}}