ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/ReVanced/revanced-website.git synced 2026-01-11 05:36:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Component style cleanup

Browse Source
This commit is contained in:
Ushie
2025-06-14 02:45:43 +03:00
parent d29c29361c
commit 32c0bbb3d4
18 changed files with 232 additions and 303 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app.html
View File

@@ -22,6 +22,6 @@
</head> </head>
<body> <body>
%sveltekit.body% <div style="display: contents">%sveltekit.body%</div>
</body> </body>
</html> </html>

2
src/app.scss
View File

@@ -143,7 +143,7 @@ p {
line-height: 1.75rem; line-height: 1.75rem;
} }
@media screen and (max-width: 767px) { @media (max-width: 767px) {
h1 { h1 {
font-size: 2.6rem; font-size: 2.6rem;
line-height: 3.75rem; line-height: 3.75rem;

219
src/layout/Footer/FooterHost.svelte
View File

@@ -9,6 +9,7 @@
import FooterSection from './FooterSection.svelte'; import FooterSection from './FooterSection.svelte';
import { RV_DMCA_GUID } from '$env/static/public'; import { RV_DMCA_GUID } from '$env/static/public';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import Divider from '$lib/components/Divider.svelte';
const aboutQuery = createQuery(queries.about()); const aboutQuery = createQuery(queries.about());
@@ -20,104 +21,101 @@
}); });
</script> </script>
<Divider horizontalPadding={'15px'} />
<footer in:fly={{ y: 10, easing: quintOut, duration: 750 }}> <footer in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
<svg <div class="top">
aria-hidden="true" <section class="main-content">
width="100%" <img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
height="8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
in:fly={{ y: 10, easing: quintOut, duration: 750 }}
>
<pattern id="a" width="91" height="8" patternUnits="userSpaceOnUse">
<path
d="M114 4c-5.067 4.667-10.133 4.667-15.2 0S88.667-.667 83.6 4 73.467 8.667 68.4 4 58.267-.667 53.2 4 43.067 8.667 38 4 27.867-.667 22.8 4 12.667 8.667 7.6 4-2.533-.667-7.6 4s-10.133 4.667-15.2 0S-32.933-.667-38 4s-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0"
stroke-linecap="square"
/>
</pattern>
<rect width="100%" height="100%" fill="url(#a)" />
</svg>
<div class="footer-wrapper">
<div class="footer-top">
<section class="main-content">
<img src="/logo.svg" class="logo-image" alt="ReVanced Logo" />
<Query query={aboutQuery} let:data>
{#if data}
<div>
<p>
{data.about.about}
</p>
</div>
{/if}
</Query>
</section>
<section class="links-container">
<FooterSection title="Pages">
<li><a href="/">Home</a></li>
<li><a href="/download">Download</a></li>
<li><a href="/patches">Patches</a></li>
<li><a href="/contributors">Contributors</a></li>
<li><a href="/donate">Donate</a></li>
</FooterSection>
<Query query={aboutQuery} let:data>
{#if data}
<FooterSection title="Socials">
{#each data.about.socials as { name, url }}
<li>
<a href={url} target="_blank" rel="noreferrer">{name}</a>
</li>
{/each}
</FooterSection>
{/if}
</Query>
</section>
</div>
<div class="footer-bottom">
<div id="logo-name"><span>Re</span>Vanced</div>
<a href="/donate"><div>Donate</div></a>
<Query query={aboutQuery} let:data> <Query query={aboutQuery} let:data>
{#if data} {#if data}
<a href="mailto:{data.about.contact.email}"><div>Email</div></a> <div>
<p>
{data.about.about}
</p>
</div>
{/if} {/if}
</Query> </Query>
<!-- DMCA Protection Badge --> </section>
<a
href="//www.dmca.com/Protection/Status.aspx?ID={RV_DMCA_GUID}&refurl={location}" <section class="links-container">
title="DMCA.com Protection Status" <FooterSection title="Pages">
class="dmca-badge" <li><a href="/">Home</a></li>
> <li><a href="/download">Download</a></li>
<img <li><a href="/patches">Patches</a></li>
src="https://images.dmca.com/Badges/dmca-badge-w150-5x1-08.png?ID={RV_DMCA_GUID}" <li><a href="/contributors">Contributors</a></li>
alt="DMCA.com Protection Status" <li><a href="/donate">Donate</a></li>
/></a </FooterSection>
> <Query query={aboutQuery} let:data>
</div> {#if data}
<FooterSection title="Socials">
{#each data.about.socials as { name, url }}
<li>
<a href={url} target="_blank" rel="noreferrer">{name}</a>
</li>
{/each}
</FooterSection>
{/if}
</Query>
</section>
</div>
<div class="bottom">
<div id="logo-name"><span>Re</span>Vanced</div>
<a href="/donate"><div>Donate</div></a>
<Query query={aboutQuery} let:data>
{#if data}
<a href="mailto:{data.about.contact.email}"><div>Email</div></a>
{/if}
</Query>
<!-- DMCA Protection Badge -->
<a
href="//www.dmca.com/Protection/Status.aspx?ID={RV_DMCA_GUID}&refurl={location}"
title="DMCA.com Protection Status"
class="dmca-badge"
>
<img
src="https://images.dmca.com/Badges/dmca-badge-w150-5x1-08.png?ID={RV_DMCA_GUID}"
alt="DMCA.com Protection Status"
/>
</a>
</div> </div>
</footer> </footer>
<style> <style lang="scss">
footer { footer {
background-color: var(--background-one); background-color: var(--background-one);
}
.footer-wrapper {
max-width: min(87%, 100rem); max-width: min(87%, 100rem);
padding: 5rem 0rem; padding: 5rem 0rem;
margin: 0 auto; margin: 0 auto;
}
.footer-top { .top {
display: flex; display: flex;
gap: 8rem; gap: 8rem;
justify-content: space-between; justify-content: space-between;
margin-bottom: 4rem; margin-bottom: 4rem;
}
.footer-bottom { @media (max-width: 1050px) {
display: flex; flex-direction: column;
gap: 2rem; gap: 2rem;
align-items: center; }
}
.bottom {
display: flex;
gap: 2rem;
align-items: center;
a {
text-decoration: none;
color: var(--text-four);
font-weight: 600;
}
@media (max-width: 768px) {
flex-wrap: wrap;
gap: 1rem;
}
}
} }
.dmca-badge { .dmca-badge {
@@ -125,27 +123,14 @@
align-items: center; align-items: center;
} }
@media screen and (max-width: 768px) {
.footer-bottom {
flex-wrap: wrap;
gap: 1rem;
}
}
#logo-name { #logo-name {
font-size: 1.4rem; font-size: 1.4rem;
color: var(--text-one); color: var(--text-one);
font-weight: 600; font-weight: 600;
}
#logo-name span { span {
color: var(--primary); color: var(--primary);
} }
.footer-bottom a {
text-decoration: none;
color: var(--text-four);
font-weight: 600;
} }
li { li {
@@ -153,12 +138,12 @@
color: var(--text-four); color: var(--text-four);
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 500; font-weight: 500;
}
li a { a {
color: var(--primary); color: var(--primary);
font-weight: 600; font-weight: 600;
font-size: 0.95rem; font-size: 0.95rem;
}
} }
path { path {
@@ -178,42 +163,28 @@
a { a {
text-decoration: none; text-decoration: none;
}
a:hover { &:hover {
text-decoration: underline var(--secondary); text-decoration: underline var(--secondary);
color: var(--text-one); color: var(--text-one);
}
} }
.links-container { .links-container {
display: flex; display: flex;
gap: 10rem; gap: 10rem;
margin-top: 1rem; margin-top: 1rem;
}
@media screen and (max-width: 1050px) { @media (max-width: 1050px) {
.footer-top {
flex-direction: column;
gap: 2rem;
}
.links-container {
display: grid; display: grid;
gap: 2rem; gap: 2rem;
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
} }
}
@media screen and (max-width: 768px) { @media (max-width: 768px) {
.links-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: initial; gap: initial;
} }
} }
svg {
padding-left: 15px;
padding-right: 15px;
}
</style> </style>

2
src/layout/Footer/FooterSection.svelte
View File

@@ -59,7 +59,7 @@
user-select: none; user-select: none;
} }
@media screen and (max-width: 768px) { @media (max-width: 768px) {
.mobile-only { .mobile-only {
display: block; display: block;
} }

108
src/layout/Hero/HeroSection.svelte
View File

@@ -17,7 +17,7 @@
<p> <p>
Customize your mobile experience through ReVanced <br /> by applying patches to your applications. Customize your mobile experience through ReVanced <br /> by applying patches to your applications.
</p> </p>
<div class="hero-buttons-container"> <div class="buttons-container">
<div class="hero-buttons internal-buttons"> <div class="hero-buttons internal-buttons">
<Button type="filled" icon={TrayArrowDown} href="download">Download</Button> <Button type="filled" icon={TrayArrowDown} href="download">Download</Button>
<Button type="tonal" icon={FileDocumentOutline} href="patches">View patches</Button> <Button type="tonal" icon={FileDocumentOutline} href="patches">View patches</Button>
@@ -34,83 +34,59 @@
</div> </div>
</section> </section>
<style> <style lang="scss">
h1 {
color: var(--text-one);
}
.hero-buttons-container {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.social-buttons {
max-width: 30rem;
position: absolute;
bottom: 1rem;
transition: opacity 0.1s var(--bezier-one);
}
.hero-buttons {
flex-wrap: wrap;
display: flex;
user-select: none;
gap: 1rem;
}
.hero { .hero {
padding-top: 10vh;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1rem;
}
span { @media (min-width: 1100px) {
color: var(--primary); padding-top: 10vh;
}
@media screen and (max-width: 1100px) {
.hero {
padding-top: initial;
} }
}
@media screen and (max-width: 450px) { h1 {
.internal-buttons { color: var(--text-one);
}
span {
color: var(--primary);
}
.buttons-container {
display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 2.5rem;
}
.social-buttons { .social-buttons {
left: 50%; max-width: 30rem;
transform: translateX(-50%); position: absolute;
justify-content: center; bottom: 1rem;
width: 100%; transition: opacity 0.1s var(--bezier-one);
}
.hero { @media (max-width: 450px) {
height: initial; justify-content: center;
} left: 0;
} }
@media screen and (max-width: 1100px) or (min-height: 780px) { @media (max-height: 600px), (max-width: 450px) and (max-height: 780px) {
.social-buttons { position: static;
transform: translateX(-50%); opacity: 100% !important;
width: 90%; }
position: absolute; }
left: initial;
transform: initial;
}
}
@media screen and (max-height: 780px) { .hero-buttons {
.social-buttons { flex-wrap: wrap;
transform: initial; display: flex;
left: initial; user-select: none;
position: initial; gap: 1rem;
width: initial;
opacity: 100% !important; @media (max-width: 450px) {
&.internal-buttons {
flex-direction: column;
gap: 1rem;
}
}
}
} }
} }
</style> </style>

16
src/layout/Navbar/NavHost.svelte
View File

@@ -91,13 +91,13 @@
</ul> </ul>
</div> </div>
<div id="secondary-navigation"> <div id="secondary-navigation">
<button <button
on:click={() => (modals.settings = !modals.settings)} on:click={() => (modals.settings = !modals.settings)}
class:selected={modals.settings} class:selected={modals.settings}
aria-label="Settings" aria-label="Settings"
> >
<Cog size="20px" color={modals.settings ? 'var(--primary)' : 'var(--surface-six)'} /> <Cog size="20px" color={modals.settings ? 'var(--primary)' : 'var(--surface-six)'} />
</button> </button>
</div> </div>
</div> </div>
</div> </div>
@@ -256,7 +256,7 @@
} }
} }
@media screen and (min-width: 768px) { @media (min-width: 768px) {
.mobile-only { .mobile-only {
display: none !important; display: none !important;
} }

13
src/lib/components/Divider.svelte
View File

@@ -1,4 +1,15 @@
<svg aria-hidden="true" width="100%" height="8" fill="none" xmlns="http://www.w3.org/2000/svg"> <script>
export let horizontalPadding;
</script>
<svg
style:padding-inline={horizontalPadding}
aria-hidden="true"
width="100%"
height="8"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<pattern id="a" width="91" height="8" patternUnits="userSpaceOnUse"> <pattern id="a" width="91" height="8" patternUnits="userSpaceOnUse">
<path <path
d="M114 4c-5.067 4.667-10.133 4.667-15.2 0S88.667-.667 83.6 4 73.467 8.667 68.4 4 58.267-.667 53.2 4 43.067 8.667 38 4 27.867-.667 22.8 4 12.667 8.667 7.6 4-2.533-.667-7.6 4s-10.133 4.667-15.2 0S-32.933-.667-38 4s-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0" d="M114 4c-5.067 4.667-10.133 4.667-15.2 0S88.667-.667 83.6 4 73.467 8.667 68.4 4 58.267-.667 53.2 4 43.067 8.667 38 4 27.867-.667 22.8 4 12.667 8.667 7.6 4-2.533-.667-7.6 4s-10.133 4.667-15.2 0S-32.933-.667-38 4s-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0-10.133-4.667-15.2 0-10.133 4.667-15.2 0"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

19
src/lib/components/FilterChip.svelte
View File

@@ -17,7 +17,7 @@
{/if} {/if}
</button> </button>
<style> <style lang="scss">
button { button {
font-family: var(--font-two); font-family: var(--font-two);
border: none; border: none;
@@ -32,18 +32,11 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 8px;
&.selected {
background-color: var(--tertiary);
color: var(--primary);
}
} }
.selected {
background-color: var(--tertiary);
color: var(--primary);
}
#dropdown {
margin-right: -6px;
}
#check {
margin-left: -6px;
}
</style> </style>

51
src/lib/components/Snackbar.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { slide, fade } from 'svelte/transition'; import { backIn, expoOut } from 'svelte/easing';
import { expoOut } from 'svelte/easing'; import { slide } from 'svelte/transition';
export let open = false; export let open = false;
export let dismissTime = 3000; export let dismissTime = 3000;
@@ -13,47 +13,32 @@
</script> </script>
{#if open} {#if open}
<div <div id="snackbar" in:slide={{ duration: 400, easing: expoOut }} out:slide={{ duration: 300, easing: backIn }}>
class="snackbar" <slot name="text" />
in:slide={{ duration: 400, easing: expoOut }}
out:fade={{ duration: 300, easing: expoOut }}
>
<div class="text">
<slot name="text" />
</div>
</div> </div>
{/if} {/if}
<style lang="scss"> <style>
.snackbar { #snackbar {
display: flex; display: flex;
box-sizing: border-box;
justify-content: space-between;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 1rem;
padding-right: 0.5rem;
height: 3rem;
gap: 1.5rem;
align-items: center; align-items: center;
position: fixed;
bottom: 2rem;
left: 2rem;
padding: 0.5rem 1rem;
border-radius: 0.25rem; border-radius: 0.25rem;
min-width: 12.5rem; min-width: 12.5rem;
max-width: 35rem; max-width: 35rem;
position: fixed; height: 3rem;
margin-left: 2.25rem;
margin-right: 2.25rem;
z-index: 8;
left: 0;
right: 0;
bottom: 2rem;
background-color: var(--surface-one);
transition: all 0.4s var(--bezier-one);
box-shadow: var(--drop-shadow-one);
}
.text { background: var(--surface-one);
color: var(--text-two); color: var(--text-two);
font-weight: 500; box-shadow: var(--drop-shadow-one);
font-size: 14px; font-size: 14px;
font-weight: 500;
z-index: 10;
} }
</style> </style>

28
src/lib/components/Spinner.svelte
View File

@@ -1,30 +1,30 @@
<div class="spinner" /> <div id="spinner" />
<style> <style lang="scss">
@keyframes spinner { @keyframes spinner {
to { to {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
.spinner { #spinner {
position: fixed; position: fixed;
top: 50%; top: 50%;
left: 50%; left: 50%;
width: 50px; width: 50px;
height: 50px; height: 50px;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.spinner:before { &:before {
content: ''; content: '';
box-sizing: border-box; box-sizing: border-box;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-radius: 50%; border-radius: 50%;
border: 4.5px solid transparent; border: 4.5px solid transparent;
border-top-color: var(--primary); border-top-color: var(--primary);
animation: spinner 0.6s linear infinite; animation: spinner 0.6s linear infinite;
}
} }
</style> </style>

15
src/routes/+page.svelte
View File

@@ -160,21 +160,18 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@media (max-width: 335px) {
padding: 2rem 0 !important;
}
} }
.hero-img-container { .hero-img-container {
z-index: 0; z-index: 0;
}
@media screen and (max-width: 1100px) { @media (max-width: 1100px) {
.hero-img-container {
display: none; display: none;
} }
} }
@media screen and (max-width: 335px) {
main {
padding: 2rem 0 !important;
}
}
</style> </style>

5
src/routes/announcements/+page.svelte
View File

@@ -175,13 +175,10 @@
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
padding: 16px 0; padding: 16px 0;
min-width: 0;
width: 100%; width: 100%;
gap: 16px; gap: 16px;
}
@media (max-width: 767px) { @media (max-width: 767px) {
.cards {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }

2
src/routes/contributors/+page.svelte
View File

@@ -109,7 +109,7 @@
a:hover::after { a:hover::after {
transform: translateX(5px); transform: translateX(5px);
} }
@media screen and (max-width: 767px) { @media (max-width: 767px) {
.text-container { .text-container {
padding: 2rem 1.75rem; padding: 2rem 1.75rem;
} }

11
src/routes/donate/+page.svelte
View File

@@ -215,7 +215,7 @@
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@media screen and (max-width: 768px) { @media (max-width: 768px) {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
} }
@@ -234,17 +234,16 @@
margin-bottom: 2rem; margin-bottom: 2rem;
width: 60%; width: 60%;
@media screen and (max-width: 1200px) { @media (max-width: 1200px) {
width: 90%; width: 90%;
} }
@media screen and (max-width: 768px) { @media (max-width: 768px) {
width: 100%; width: 100%;
} }
} }
// COPEEEE @media (max-width: 768px) {
@media screen and (max-width: 768px) {
#heart { #heart {
display: none; display: none;
} }
@@ -255,7 +254,7 @@
gap: 1rem; gap: 1rem;
margin-bottom: 3rem; margin-bottom: 3rem;
@media screen and (max-width: 768px) { @media (max-width: 768px) {
flex-direction: column; flex-direction: column;
} }
} }

4
src/routes/donate/TeamMember.svelte
View File

@@ -93,7 +93,7 @@
.mobile { .mobile {
display: none; display: none;
} }
@media screen and (width <= 768px) { @media (max-width: 768px) {
.desktop { .desktop {
display: none; display: none;
} }
@@ -117,7 +117,7 @@
user-select: none; user-select: none;
margin-bottom: 1rem; margin-bottom: 1rem;
@media screen and (max-width: 768px) { @media (max-width: 768px) {
margin-bottom: 0; margin-bottom: 0;
height: 48px; height: 48px;
width: 48px; width: 48px;

22
src/routes/patches/Package.svelte
View File

@@ -33,7 +33,7 @@
{name} {name}
</div> </div>
<style> <style lang="scss">
.package { .package {
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
font-size: 0.85rem; font-size: 0.85rem;
@@ -48,19 +48,17 @@
transition: background-color 0.4s var(--bezier-one); transition: background-color 0.4s var(--bezier-one);
color: var(--text-four); color: var(--text-four);
transition: color 0.3s var(--bezier-one); transition: color 0.3s var(--bezier-one);
}
.selected { &.selected {
color: var(--primary); color: var(--primary);
transition: color 0.3s var(--bezier-one); transition: color 0.3s var(--bezier-one);
background-color: var(--tertiary); background-color: var(--tertiary);
} }
.package:hover:not(.selected) {
background-color: var(--surface-seven);
}
.package:not(.selected):hover { &:hover:not(.selected) {
color: var(--text-one); background-color: var(--surface-seven);
color: var(--text-one);
}
} }
@media (max-width: 767px) { @media (max-width: 767px) {

14
src/routes/patches/PackageMenu.svelte
View File

@@ -6,7 +6,7 @@
</div> </div>
</div> </div>
<style> <style lang="scss">
.menu { .menu {
height: calc(100vh - 60px); height: calc(100vh - 60px);
width: 100%; width: 100%;
@@ -17,13 +17,13 @@
top: 60px; top: 60px;
padding-top: calc(6rem - 60px); padding-top: calc(6rem - 60px);
overflow-y: scroll; overflow-y: scroll;
}
.menu::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background-color: transparent; background-color: transparent;
} }
.menu:hover::-webkit-scrollbar-thumb { &:hover::-webkit-scrollbar-thumb {
background-color: var(--primary); background-color: var(--primary);
}
} }
.slot { .slot {

2
src/routes/patches/PatchItem.svelte
View File

@@ -19,6 +19,7 @@
</script> </script>
<!-- svelte-ignore a11y-click-events-have-key-events --> <!-- svelte-ignore a11y-click-events-have-key-events -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div <div
class="patch-container" class="patch-container"
class:expanded={hasPatchOptions} class:expanded={hasPatchOptions}
@@ -99,6 +100,7 @@
<span transition:fade={{ easing: quintOut, duration: 1000 }}> <span transition:fade={{ easing: quintOut, duration: 1000 }}>
<div class="options" transition:slide={{ easing: quintOut, duration: 500 }}> <div class="options" transition:slide={{ easing: quintOut, duration: 500 }}>
{#each options as option} {#each options as option}
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div class="option" on:click|stopPropagation> <div class="option" on:click|stopPropagation>
<h5 id="option-title">{option.title}</h5> <h5 id="option-title">{option.title}</h5>
<h5> <h5>