ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/ReVanced/revanced-website.git synced 2026-01-26 04:11:02 +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

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">
<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"
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}
</button>
<style>
<style lang="scss">
button {
font-family: var(--font-two);
border: none;
@@ -32,18 +32,11 @@
display: flex;
align-items: center;
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>

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

@@ -1,6 +1,6 @@
<script lang="ts">
import { slide, fade } from 'svelte/transition';
import { expoOut } from 'svelte/easing';
import { backIn, expoOut } from 'svelte/easing';
import { slide } from 'svelte/transition';
export let open = false;
export let dismissTime = 3000;
@@ -13,47 +13,32 @@
</script>
{#if open}
<div
class="snackbar"
in:slide={{ duration: 400, easing: expoOut }}
out:fade={{ duration: 300, easing: expoOut }}
>
<div class="text">
<slot name="text" />
</div>
<div id="snackbar" in:slide={{ duration: 400, easing: expoOut }} out:slide={{ duration: 300, easing: backIn }}>
<slot name="text" />
</div>
{/if}
<style lang="scss">
.snackbar {
<style>
#snackbar {
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;
position: fixed;
bottom: 2rem;
left: 2rem;
padding: 0.5rem 1rem;
border-radius: 0.25rem;
min-width: 12.5rem;
max-width: 35rem;
position: fixed;
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);
}
height: 3rem;
.text {
background: var(--surface-one);
color: var(--text-two);
font-weight: 500;
box-shadow: var(--drop-shadow-one);
font-size: 14px;
font-weight: 500;
z-index: 10;
}
</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 {
to {
transform: rotate(360deg);
}
}
.spinner {
#spinner {
position: fixed;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
transform: translate(-50%, -50%);
}
.spinner:before {
content: '';
box-sizing: border-box;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 4.5px solid transparent;
border-top-color: var(--primary);
animation: spinner 0.6s linear infinite;
&:before {
content: '';
box-sizing: border-box;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 4.5px solid transparent;
border-top-color: var(--primary);
animation: spinner 0.6s linear infinite;
}
}
</style>