mirror of
https://github.com/revanced/revanced-website.git
synced 2025-04-29 22:24:31 +02:00
refactor: clean up modal
This commit is contained in:
afn
parent
49cc968d7f
commit
d1f7e998de
47
src/app.css
47
src/app.css
@ -1,4 +1,4 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
|
||||
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
|
||||
|
||||
* {
|
||||
box-sizing: inherit;
|
||||
@ -29,36 +29,25 @@ body {
|
||||
|
||||
.wrapper {
|
||||
margin-inline: auto;
|
||||
width: min(90%, 100rem);
|
||||
width: min(95%, 80rem);
|
||||
margin-top: 7rem;
|
||||
}
|
||||
|
||||
.button-reset {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
font-style: inherit;
|
||||
font-weight: inherit;
|
||||
line-height: inherit;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
--main-font: "Manrope", sans-serif;
|
||||
--mono-font: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
|
||||
--white: #fff;
|
||||
--mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
|
||||
--white: hsl(206, 100%, 94%);
|
||||
--accent-color: #9fd5ff;
|
||||
--accent-color-two: hsl(207, 65%, 90%);
|
||||
--accent-color-two: hsl(208, 29%, 82%);
|
||||
--accent-low-opacity: #9ed7ff50;
|
||||
--bg-color: hsl(240, 2%, 11%);
|
||||
--bg-color: hsl(252, 10%, 11%);
|
||||
--grey-one: #252b31;
|
||||
--grey-two: #28313b;
|
||||
--grey-three: #373e4d;
|
||||
--grey-four: #182244;
|
||||
--grey-five: hsl(208, 30%, 75%);
|
||||
--grey-six: #202126;
|
||||
--grey-seven: #18191d;
|
||||
--grey-seven: hsl(240, 9%, 13.5%);
|
||||
--grey-eight: hsla(207, 30%, 75%, 0.577);
|
||||
--bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
@ -71,15 +60,15 @@ body {
|
||||
|
||||
h1 {
|
||||
color: var(--white);
|
||||
line-height: 1em;
|
||||
font-size: 3rem;
|
||||
line-height: 4rem;
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: var(--grey-five);
|
||||
line-height: 1em;
|
||||
|
||||
font-size: 2.25rem;
|
||||
letter-spacing: -0.05rem;
|
||||
font-weight: 600;
|
||||
@ -92,10 +81,11 @@ h3 {
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: var(--grey-five);
|
||||
color: var(--accent-color-two);
|
||||
font-weight: 400;
|
||||
font-size: 1.1rem;
|
||||
letter-spacing: 0.02rem;
|
||||
line-height: 2rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
@ -140,3 +130,16 @@ hr {
|
||||
border: 0;
|
||||
border-top: 1px solid var(--grey-three);
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 1rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--grey-three);
|
||||
background-color: transparent;
|
||||
color: var(--accent-color-two);
|
||||
}
|
||||
|
||||
|
||||
input:focus {
|
||||
outline: 1px solid var(--accent-color);
|
||||
}
|
||||
@ -1,126 +0,0 @@
|
||||
<script lang="ts">
|
||||
import * as settings from '../../../data/api/settings';
|
||||
import Modal from '$lib/components/atoms/Modal.svelte';
|
||||
import { clear_and_reload } from '../../../data/api/cache';
|
||||
|
||||
let url = settings.api_base_url();
|
||||
|
||||
function save() {
|
||||
settings.set_api_base_url(url);
|
||||
clear_and_reload();
|
||||
}
|
||||
|
||||
function reset() {
|
||||
url = settings.default_base_url;
|
||||
}
|
||||
</script>
|
||||
|
||||
<Modal icon="/icons/settings.svg" alt="Settings">
|
||||
<div class="settings-menu">
|
||||
<h3>Configure the backend</h3>
|
||||
<div class="url-stuff">
|
||||
<h4>API URL:</h4>
|
||||
<div class="input-wrapper">
|
||||
<input name="api-url" type="text" bind:value={url} />
|
||||
<button class="button-reset" on:click={reset}>
|
||||
<img src="/icons/reset.svg" alt="Reset" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btns">
|
||||
<button class="save-url-btn" on:click={save}>
|
||||
<h4>Save</h4>
|
||||
</button>
|
||||
<button class="clear-cache-btn" on:click={clear_and_reload}>
|
||||
<h4>Clear cache</h4>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<style>
|
||||
div.settings-menu {
|
||||
position: fixed;
|
||||
width: min(95%, 500px);
|
||||
/* width: clamp(45vw, 850px, 850px); */
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 40px;
|
||||
border-radius: 12px;
|
||||
background-color: var(--grey-six);
|
||||
display: flex;
|
||||
user-select: none;
|
||||
gap: 5%;
|
||||
z-index: 999;
|
||||
white-space: normal;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
div.btns {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
text-align: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btns button {
|
||||
min-width: max-content;
|
||||
font-size: 1rem;
|
||||
color: var(--white);
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
flex-grow: 2;
|
||||
padding: 1rem 1.75rem;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
background-color: var(--grey-two);
|
||||
transition: transform 0.4s var(--bezier-one), filter 0.4s var(--bezier-one);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.btns .save-url-btn {
|
||||
background-color: var(--accent-color);
|
||||
box-shadow: 0px 0px 32px 1px var(--accent-color-glow);
|
||||
flex-grow: 1;
|
||||
}
|
||||
.save-url-btn h4 {
|
||||
color: var(--grey-four);
|
||||
}
|
||||
div.input-wrapper {
|
||||
display: flex;
|
||||
background-color: #2a2c33;
|
||||
padding: 12px;
|
||||
width: 100%;
|
||||
margin: 10px 0 10px 0;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
input[type='text'] {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
color: white;
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
@media (max-width: 780px) {
|
||||
div.settings-menu {
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,36 +1,53 @@
|
||||
<script>
|
||||
export let kind = 'secondary';
|
||||
$: type = 'button-' + kind;
|
||||
export let href = '#';
|
||||
export let maxWidth = false;
|
||||
export let icon = '';
|
||||
export let href = '';
|
||||
export let capitalize = false;
|
||||
export let target = '';
|
||||
</script>
|
||||
|
||||
<a {href} {target}>
|
||||
<div class={type} style="width: {maxWidth ? '100%' : 'max-content'}">
|
||||
{#if icon}
|
||||
<img src="../icons/{icon}.svg" alt={icon} />
|
||||
{/if}
|
||||
<slot />
|
||||
</div>
|
||||
</a>
|
||||
<button on:click>
|
||||
{#if href}
|
||||
<a {href} {target}>
|
||||
<div class={type} class:capitalize style="width: {maxWidth ? '100%' : 'max-content'}">
|
||||
{#if icon}
|
||||
<img src="../icons/{icon}.svg" alt={icon} />
|
||||
{/if}
|
||||
<slot />
|
||||
</div>
|
||||
</a>
|
||||
{:else}
|
||||
<div class={type} class:capitalize style="width: {maxWidth ? '100%' : 'max-content'}">
|
||||
{#if icon}
|
||||
<img src="../icons/{icon}.svg" alt={icon} />
|
||||
{/if}
|
||||
<slot />
|
||||
</div>
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<style>
|
||||
button {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
div,
|
||||
.button-secondary {
|
||||
min-width: max-content;
|
||||
font-size: 1rem;
|
||||
min-height: 52px;
|
||||
font-size: 0.9rem;
|
||||
color: var(--white);
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
padding: 1rem 1.75rem;
|
||||
padding: 1rem 1.5rem;
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
background-color: var(--grey-two);
|
||||
@ -38,6 +55,13 @@
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.capitalize {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03rem;
|
||||
font-weight: 700;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
background-color: var(--accent-color);
|
||||
box-shadow: 0px 0px 32px 1px var(--accent-color-glow);
|
||||
|
||||
@ -1,71 +1,47 @@
|
||||
<script lang="ts">
|
||||
import { click_outside } from '$lib/utils';
|
||||
import { fade } from 'svelte/transition';
|
||||
|
||||
let modalOpen = false;
|
||||
export let icon: string;
|
||||
export let alt: string;
|
||||
import { quadInOut } from 'svelte/easing';
|
||||
export let modalOpen = false;
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<button class="modal-btn" on:click={() => (modalOpen = !modalOpen)}>
|
||||
<img src={icon} {alt} />
|
||||
</button>
|
||||
{#if modalOpen}
|
||||
<div class="overlay" />
|
||||
<div
|
||||
class="modal-container"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
use:click_outside
|
||||
on:click_outside={() => (modalOpen = false)}
|
||||
transition:fade={{ duration: 125 }}
|
||||
>
|
||||
{#if modalOpen}
|
||||
<div class="modal-container" transition:fade={{ easing: quadInOut, duration: 150 }}>
|
||||
<div class="modal">
|
||||
<slot />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="overlay" on:click={() => (modalOpen = !modalOpen)} />
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
button.modal-btn {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
transition-timing-function: var(--bezier-one);
|
||||
transition-duration: 0.25s;
|
||||
padding: 10px 25px;
|
||||
border-radius: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
button.modal-btn:hover {
|
||||
color: var(--white);
|
||||
background-color: var(--grey-one);
|
||||
}
|
||||
|
||||
img {
|
||||
height: 1.75rem;
|
||||
width: auto;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 1;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
button.modal-btn {
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 16px;
|
||||
}
|
||||
.modal {
|
||||
position: fixed;
|
||||
width: min(95%, 500px);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
padding: 42px;
|
||||
border-radius: 16px;
|
||||
background-color: var(--grey-six);
|
||||
display: flex;
|
||||
user-select: none;
|
||||
gap: 5%;
|
||||
white-space: normal;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
z-index: 1001;
|
||||
box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12),
|
||||
0px 2px 4px -1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -24,20 +24,18 @@
|
||||
border: var(--grey-six);
|
||||
transition-timing-function: var(--bezier-one);
|
||||
transition-duration: 0.25s;
|
||||
padding: 10px 25px;
|
||||
border-radius: 200px;
|
||||
padding: 10px 16px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
font-size: 1rem;
|
||||
user-select: none;
|
||||
border-radius: 200px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
li:hover {
|
||||
@ -46,7 +44,7 @@
|
||||
}
|
||||
|
||||
li.selected {
|
||||
background-color: var(--grey-two);
|
||||
background-color: var(--grey-one);
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
|
||||
@ -1,12 +1,28 @@
|
||||
<script lang="ts">
|
||||
import Navigation from '../atoms/NavButton.svelte';
|
||||
import { page } from '$app/stores';
|
||||
import MobileDropdown from './MobileDropdown.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import RouterEvents from '../../../data/RouterEvents';
|
||||
import ApiSettingsButton from '$lib/components/atoms/ApiSettingsButton.svelte';
|
||||
import Svg from '../atoms/Svg.svelte';
|
||||
import Modal from '../atoms/Modal.svelte';
|
||||
|
||||
import * as settings from '../../../data/api/settings';
|
||||
import { clear_and_reload } from '../../../data/api/cache';
|
||||
import Button from '../atoms/Button.svelte';
|
||||
|
||||
let url = settings.api_base_url();
|
||||
|
||||
function save() {
|
||||
settings.set_api_base_url(url);
|
||||
clear_and_reload();
|
||||
}
|
||||
|
||||
function reset() {
|
||||
url = settings.default_base_url;
|
||||
}
|
||||
|
||||
let menuOpen = false;
|
||||
let modalOpen = false;
|
||||
let y: number;
|
||||
|
||||
onMount(() => {
|
||||
return RouterEvents.subscribe((event) => {
|
||||
@ -17,206 +33,127 @@
|
||||
});
|
||||
</script>
|
||||
|
||||
<nav>
|
||||
<div class="navbar">
|
||||
<div class="left-side">
|
||||
<a href="/">
|
||||
<span class="logo">
|
||||
<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
|
||||
</span>
|
||||
</a>
|
||||
<span class="desktop">
|
||||
<Navigation href="/">Home</Navigation>
|
||||
<Navigation href="/download">Download</Navigation>
|
||||
<div hidden>
|
||||
<!-- This is just temporary so the build doesn't fail -->
|
||||
<Navigation is_selected={(target) => target.startsWith('/docs')} href="/docs"
|
||||
>Docs</Navigation
|
||||
>
|
||||
</div>
|
||||
<Navigation href="/patches">Patches</Navigation>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="right-side">
|
||||
<span class="desktop">
|
||||
<Navigation href="/contributors/">
|
||||
<img src="/icons/contrib.svg" alt="Contributors" />
|
||||
</Navigation>
|
||||
<ApiSettingsButton />
|
||||
</span>
|
||||
|
||||
<!-- Should probably be moved to its own component. -->
|
||||
<button
|
||||
class="menu-btn button-reset mobile"
|
||||
class:open={menuOpen}
|
||||
on:click={() => {
|
||||
menuOpen = !menuOpen;
|
||||
}}
|
||||
>
|
||||
<span class="menu-btn__burger" />
|
||||
</button>
|
||||
<!-- give me a bit, ill add back mobile nav -->
|
||||
<nav class:scrolled={y > 10}>
|
||||
<div id="left-side">
|
||||
<img src="/logo.svg" id="logo" alt="ReVanced Logo" />
|
||||
<div class="nav-buttons">
|
||||
<Navigation href="/">Home</Navigation>
|
||||
<Navigation href="/download">Download</Navigation>
|
||||
<Navigation href="/patches">Patches</Navigation>
|
||||
<div hidden>
|
||||
<!-- This is just temporary so the build doesn't fail -->
|
||||
<Navigation is_selected={(target) => target.startsWith('/docs')} href="/docs"
|
||||
>Docs</Navigation
|
||||
>
|
||||
</div>
|
||||
<Navigation href="/contributors">Contributors</Navigation>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mobile">
|
||||
{#if menuOpen}
|
||||
<MobileDropdown>
|
||||
<div class="mobile-menu">
|
||||
<div>
|
||||
<Navigation href="/">Home</Navigation>
|
||||
<Navigation href="/download">Download</Navigation>
|
||||
<Navigation href="/patches">Patches</Navigation>
|
||||
</div>
|
||||
|
||||
<div class="bottom-mobile-container">
|
||||
<Navigation href="/contributors/">
|
||||
<img src="/icons/contrib.svg" alt="Contributors" />
|
||||
</Navigation>
|
||||
<ApiSettingsButton on:click={() => {
|
||||
menuOpen = false;
|
||||
}}/>
|
||||
</div>
|
||||
</div>
|
||||
</MobileDropdown>
|
||||
{/if}
|
||||
<div id="right-side">
|
||||
<button on:click={() => (modalOpen = !modalOpen)}>
|
||||
<Svg viewBoxHeight={24} svgHeight={20}>
|
||||
<path
|
||||
d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.09-.16-.26-.25-.44-.25-.06 0-.12.01-.17.03l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.06-.02-.12-.03-.18-.03-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.09.16.26.25.44.25.06 0 .12-.01.17-.03l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-1.98-1.71c.04.31.05.52.05.73 0 .21-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14 1.13zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
|
||||
/>
|
||||
</Svg>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- settings -->
|
||||
<Modal bind:modalOpen>
|
||||
<div class="settings-menu">
|
||||
<h3>Backend</h3>
|
||||
<h6>API URL</h6>
|
||||
<div id="content">
|
||||
<div class="input-wrapper">
|
||||
<input name="api-url" type="text" bind:value={url} />
|
||||
<button class="button-reset" on:click={reset}>
|
||||
<Svg viewBoxHeight={48} svgHeight={24}>
|
||||
<path
|
||||
d="M11.2 36.725C14.6667 40.2417 18.8833 42 23.85 42C26.35 42 28.7 41.525 30.9 40.575C33.1 39.625 35.025 38.3333 36.675 36.7C38.325 35.0667 39.625 33.15 40.575 30.95C41.525 28.75 42 26.4 42 23.9C42 21.4 41.525 19.0667 40.575 16.9C39.625 14.7333 38.325 12.8417 36.675 11.225C35.025 9.60833 33.1 8.33333 30.9 7.4C28.7 6.46667 26.35 6 23.85 6C21.1833 6 18.6583 6.58333 16.275 7.75C13.8917 8.91667 11.8333 10.5167 10.1 12.55V7.25H7.1V17.65H17.55V14.65H12.3C13.7667 12.95 15.4917 11.5833 17.475 10.55C19.4583 9.51667 21.5833 9 23.85 9C28.0167 9 31.5833 10.425 34.55 13.275C37.5167 16.125 39 19.6167 39 23.75C39 27.9833 37.5333 31.5833 34.6 34.55C31.6667 37.5167 28.0833 39 23.85 39C19.6833 39 16.1667 37.5333 13.3 34.6C10.4333 31.6667 9 28.1167 9 23.95H6C6 28.95 7.73333 33.2083 11.2 36.725Z"
|
||||
/>
|
||||
</Svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<Button kind="primary" on:click={save}>Save</Button>
|
||||
<Button on:click={clear_and_reload}>Clear Cache</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<svelte:window bind:scrollY={y} />
|
||||
|
||||
<style>
|
||||
nav {
|
||||
position: fixed;
|
||||
width: 100vw;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
border-bottom: 0.5px solid var(--grey-three);
|
||||
path {
|
||||
fill: var(--grey-five);
|
||||
}
|
||||
.navbar {
|
||||
padding: 0 1rem 0 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 70px;
|
||||
width: 100%;
|
||||
z-index: 999;
|
||||
background-color: var(--grey-six);
|
||||
button:hover path {
|
||||
fill: var(--accent-color-two);
|
||||
}
|
||||
|
||||
.desktop {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.mobile-menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
width: 85vw;
|
||||
height: calc(100vh - 70px);
|
||||
white-space: pre;
|
||||
padding: 2rem 0;
|
||||
margin: 0 auto;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
height: 1.75rem;
|
||||
width: auto;
|
||||
button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.left-side {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 2.5rem;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-mobile-container {
|
||||
display: flex;
|
||||
float: bottom;
|
||||
}
|
||||
|
||||
/* Hamburger mmm yum */
|
||||
@media screen and (min-width: 768px) {
|
||||
.mobile {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.menu-btn {
|
||||
user-select: none;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 80px;
|
||||
height: 60px;
|
||||
cursor: pointer;
|
||||
transition: all 0.5s var(--bezier-one);
|
||||
}
|
||||
|
||||
.menu-btn__burger {
|
||||
width: 25px;
|
||||
height: 2px;
|
||||
border-radius: 50px;
|
||||
background: var(--grey-five);
|
||||
transition: all 0.5s var(--bezier-one);
|
||||
.settings-menu h3 {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.settings-menu h6 {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.input-wrapper {
|
||||
margin-bottom: 0.75rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.menu-btn__burger::before,
|
||||
.menu-btn__burger::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 25px;
|
||||
height: 2px;
|
||||
border-radius: 50px;
|
||||
background: var(--grey-five);
|
||||
transition: all 0.5s var(--bezier-one);
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.menu-btn__burger::before {
|
||||
transform: translateY(-8px);
|
||||
input {
|
||||
width: 90%;
|
||||
}
|
||||
.menu-btn__burger::after {
|
||||
transform: translateY(8px);
|
||||
nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem 2rem;
|
||||
z-index: 666;
|
||||
height: 70px;
|
||||
background-color: var(--grey-seven);
|
||||
width: 100%;
|
||||
}
|
||||
/* ANIMATION */
|
||||
.menu-btn.open .menu-btn__burger {
|
||||
transform: translateX(-20px);
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
|
||||
#left-side,
|
||||
#right-side {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
}
|
||||
.menu-btn.open .menu-btn__burger::before {
|
||||
transform: rotate(45deg) translate(15px, -15px);
|
||||
|
||||
img {
|
||||
height: 24px;
|
||||
}
|
||||
.menu-btn.open .menu-btn__burger::after {
|
||||
transform: rotate(-45deg) translate(15px, 15px);
|
||||
.nav-buttons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.scrolled {
|
||||
box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12),
|
||||
0px 2px 4px -1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -6,23 +6,3 @@ export function dev_log(part: string, ...args) {
|
||||
console.log(`[${part}]:`, ...args);
|
||||
}
|
||||
}
|
||||
|
||||
// Use directive that makes an element dispatch an event when you click or tap outside of it.
|
||||
// Stolen from the svelte docs: https://svelte.dev/tutorial/actions
|
||||
export function click_outside(node: Element) {
|
||||
const handle = (event: MouseEvent) => {
|
||||
if (!node.contains(event.target)) {
|
||||
node.dispatchEvent(new CustomEvent("click_outside"));
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("touchstart", handle, true);
|
||||
document.addEventListener("click", handle, true);
|
||||
|
||||
return {
|
||||
destroy() {
|
||||
document.removeEventListener("touchstart", handle, true);
|
||||
document.removeEventListener("click", handle, true);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,2 +0,0 @@
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="#ACC1D2"><g><rect fill="none" height="24" width="24"/></g><g><g><g><g><path d="M16,13c3.09-2.81,6-5.44,6-7.7C22,3.45,20.55,2,18.7,2c-1.04,0-2.05,0.49-2.7,1.25C15.34,2.49,14.34,2,13.3,2 C11.45,2,10,3.45,10,5.3C10,7.56,12.91,10.19,16,13z M13.3,4c0.44,0,0.89,0.21,1.18,0.55L16,6.34l1.52-1.79 C17.81,4.21,18.26,4,18.7,4C19.44,4,20,4.56,20,5.3c0,1.12-2.04,3.17-4,4.99c-1.96-1.82-4-3.88-4-4.99C12,4.56,12.56,4,13.3,4z"/><path d="M19,16h-2c0-1.2-0.75-2.28-1.87-2.7L8.97,11H1v11h6v-1.44l7,1.94l8-2.5v-1C22,17.34,20.66,16,19,16z M3,20v-7h2v7H3z M13.97,20.41L7,18.48V13h1.61l5.82,2.17C14.77,15.3,15,15.63,15,16c0,0-1.99-0.05-2.3-0.15l-2.38-0.79l-0.63,1.9l2.38,0.79 c0.51,0.17,1.04,0.26,1.58,0.26H19c0.39,0,0.74,0.23,0.9,0.56L13.97,20.41z"/></g></g></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 880 B |
@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#ACC1D2"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.09-.16-.26-.25-.44-.25-.06 0-.12.01-.17.03l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.06-.02-.12-.03-.18-.03-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.09.16.26.25.44.25.06 0 .12-.01.17-.03l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-1.98-1.71c.04.31.05.52.05.73 0 .21-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14 1.13zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/></svg>
|
||||
|
Before Width: | Height: | Size: 1.4 KiB |
Loading…
x
Reference in New Issue
Block a user