mirror of
https://github.com/revanced/revanced-website.git
synced 2025-04-29 22:24:31 +02:00
feat: Apply themes on specific events (#227)
Signed-off-by: oSumAtrIX <johan.melkonyan1@web.de>
This commit is contained in:
madkarmaa
oSumAtrIX
parent
f428902773
commit
bc8e19e0e7
@ -18,7 +18,7 @@
|
||||
"@sveltejs/vite-plugin-svelte": "3.1.1",
|
||||
"@typescript-eslint/eslint-plugin": "7.16.0",
|
||||
"@typescript-eslint/parser": "7.16.0",
|
||||
"eslint": "^8.56.0",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-plugin-svelte": "2.42.0",
|
||||
"fuse.js": "^7.0.0",
|
||||
@ -42,6 +42,7 @@
|
||||
"@tanstack/query-core": "^4.36.1",
|
||||
"@tanstack/query-persist-client-core": "^4.36.1",
|
||||
"@tanstack/query-sync-storage-persister": "^4.36.1",
|
||||
"@tanstack/svelte-query": "^4.36.1"
|
||||
"@tanstack/svelte-query": "^4.36.1",
|
||||
"datetrigger": "^1.1.1"
|
||||
}
|
||||
}
|
||||
|
||||
3405
pnpm-lock.yaml
generated
3405
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
84
src/app.scss
84
src/app.scss
@ -6,6 +6,10 @@
|
||||
padding: 0;
|
||||
font-family: var(--main-font);
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
transition:
|
||||
color 0.5s ease-in-out,
|
||||
background-color 0.5s ease-in-out,
|
||||
fill 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
html {
|
||||
@ -19,7 +23,7 @@ html {
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: var(--bg-color);
|
||||
background-color: var(--background-one);
|
||||
}
|
||||
|
||||
html,
|
||||
@ -34,39 +38,55 @@ body {
|
||||
}
|
||||
|
||||
:root {
|
||||
/* TODO properly name these */
|
||||
--main-font: 'Manrope', sans-serif;
|
||||
--mono-font: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
|
||||
--white: hsl(206, 100%, 94%);
|
||||
--accent-color: hsl(206, 100%, 81%);
|
||||
--accent-color-two: hsl(208, 75%, 82%);
|
||||
--accent-low-opacity: hsla(205, 91%, 69%, 0.15);
|
||||
--bg-color: hsl(252, 10%, 11%);
|
||||
--grey-one: hsl(210, 14%, 17%);
|
||||
--grey-two: hsl(212, 19%, 19%);
|
||||
--grey-three: hsl(221, 17%, 26%);
|
||||
--grey-four: hsl(226, 48%, 18%);
|
||||
--grey-five: hsl(208, 30%, 75%);
|
||||
--grey-six: hsl(230, 9%, 13%);
|
||||
--grey-seven: hsl(240, 9%, 13.5%);
|
||||
--grey-eight: hsla(207, 30%, 75%, 0.577);
|
||||
--grey-nine: hsla(240, 6%, 7%, 0.3);
|
||||
--grey-ten: hsl(230, 9.5%, 17.5%);
|
||||
--grey-eleven: hsl(208, 10%, 40%);
|
||||
|
||||
--text-one: hsl(calc(var(--hue, 206) + 0), 100%, 94%);
|
||||
--surface-one: hsl(calc(var(--hue, 206) + 0), 100%, 94%);
|
||||
|
||||
--primary: hsl(calc(var(--hue, 206) + 0), 100%, 81%);
|
||||
|
||||
--secondary: hsl(calc(var(--hue, 206) + 2), 75%, 82%);
|
||||
|
||||
--tertiary: hsla(calc(var(--hue, 206) - 1), 91%, 69%, 0.15);
|
||||
|
||||
--background-one: hsl(calc(var(--hue, 206) + 46), 10%, 11%);
|
||||
--surface-two: hsl(calc(var(--hue, 206) + 46), 10%, 11%);
|
||||
|
||||
--surface-three: hsl(calc(var(--hue, 206) + 4), 14%, 17%);
|
||||
|
||||
--surface-four: hsl(calc(var(--hue, 206) + 6), 19%, 19%);
|
||||
--text-two: hsl(calc(var(--hue, 206) + 6), 19%, 19%);
|
||||
|
||||
--border: hsl(calc(var(--hue, 206) + 15), 17%, 26%);
|
||||
--surface-five: hsl(calc(var(--hue, 206) + 15), 17%, 26%);
|
||||
|
||||
--text-three: hsl(calc(var(--hue, 206) + 20), 48%, 18%);
|
||||
|
||||
--text-four: hsl(calc(var(--hue, 206) + 2), 30%, 75%);
|
||||
--surface-six: hsl(calc(var(--hue, 206) + 2), 30%, 75%);
|
||||
|
||||
--surface-seven: hsl(calc(var(--hue, 206) + 24), 9%, 13%);
|
||||
|
||||
--surface-eight: hsl(calc(var(--hue, 206) + 34), 9%, 13.5%);
|
||||
|
||||
--surface-nine: hsl(calc(var(--hue, 206) + 24), 9.5%, 17.5%);
|
||||
|
||||
--red-one: hsl(333, 84%, 62%);
|
||||
|
||||
--bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
--drop-shadow-one: 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);
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: var(--accent-low-opacity);
|
||||
background-color: var(--tertiary);
|
||||
}
|
||||
|
||||
/*-----headings-----*/
|
||||
|
||||
h1 {
|
||||
color: var(--white);
|
||||
color: var(--text-one);
|
||||
line-height: 4rem;
|
||||
font-size: 3.5rem;
|
||||
font-weight: 700;
|
||||
@ -74,7 +94,7 @@ h1 {
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: var(--grey-five);
|
||||
color: var(--text-four);
|
||||
font-size: 2.5rem;
|
||||
letter-spacing: -0.04rem;
|
||||
font-weight: 600;
|
||||
@ -82,12 +102,12 @@ h2 {
|
||||
|
||||
h3 {
|
||||
font-size: 1.25rem;
|
||||
color: var(--accent-color-two);
|
||||
color: var(--secondary);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: var(--accent-color-two);
|
||||
color: var(--secondary);
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.02rem;
|
||||
@ -95,20 +115,20 @@ h4 {
|
||||
}
|
||||
|
||||
h5 {
|
||||
color: var(--grey-five);
|
||||
color: var(--text-four);
|
||||
font-weight: 400;
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 0.02rem;
|
||||
}
|
||||
|
||||
h6 {
|
||||
color: var(--grey-five);
|
||||
color: var(--text-four);
|
||||
font-weight: 500;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
p {
|
||||
color: var(--grey-five);
|
||||
color: var(--text-four);
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
letter-spacing: 0.02rem;
|
||||
@ -134,30 +154,30 @@ p {
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: var(--accent-color);
|
||||
background-color: var(--primary);
|
||||
background-clip: content-box;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--grey-three);
|
||||
background-color: var(--surface-five);
|
||||
}
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: 1px solid var(--grey-three);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
input {
|
||||
padding: 1rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--grey-three);
|
||||
border: 1px solid var(--border);
|
||||
background-color: transparent;
|
||||
color: var(--accent-color-two);
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
input:focus {
|
||||
outline: 1px solid var(--accent-color);
|
||||
outline: 1px solid var(--primary);
|
||||
}
|
||||
|
||||
@ -105,35 +105,35 @@
|
||||
|
||||
#logo-name {
|
||||
font-size: 1.4rem;
|
||||
color: var(--white);
|
||||
color: var(--text-one);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#logo-name span {
|
||||
color: var(--accent-color);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.footer-bottom a {
|
||||
text-decoration: none;
|
||||
color: var(--grey-five);
|
||||
color: var(--text-four);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
color: var(--grey-five);
|
||||
color: var(--text-four);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
li a {
|
||||
color: var(--accent-color);
|
||||
color: var(--primary);
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
path {
|
||||
stroke: var(--grey-three);
|
||||
stroke: var(--border);
|
||||
}
|
||||
|
||||
.main-content {
|
||||
@ -152,8 +152,8 @@
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline var(--accent-color-two);
|
||||
color: var(--white);
|
||||
text-decoration: underline var(--secondary);
|
||||
color: var(--text-one);
|
||||
}
|
||||
|
||||
.links-container {
|
||||
|
||||
@ -34,7 +34,7 @@
|
||||
<style lang="scss">
|
||||
span {
|
||||
list-style: none;
|
||||
color: var(--grey-five);
|
||||
color: var(--text-four);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
@ -58,7 +58,7 @@
|
||||
}
|
||||
|
||||
.mobile-only:not(:last-child) {
|
||||
border-bottom: 1px solid var(--grey-three);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.mobile-only {
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
float: right;
|
||||
padding: 0.5rem 0.5rem;
|
||||
border-radius: 1.75rem;
|
||||
background-color: var(--grey-six);
|
||||
background-color: var(--surface-seven);
|
||||
user-select: none;
|
||||
}
|
||||
@media (max-width: 1700px) {
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
color: var(--white);
|
||||
color: var(--text-one);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
@ -40,7 +40,7 @@
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--accent-color);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
||||
@ -18,8 +18,8 @@
|
||||
cursor: pointer;
|
||||
border-radius: 200px;
|
||||
transition: transform 0.4s var(--bezier-one);
|
||||
background-color: var(--grey-two);
|
||||
color: var(--white);
|
||||
background-color: var(--surface-four);
|
||||
color: var(--text-one);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
@ -57,21 +57,21 @@
|
||||
font-weight: 400;
|
||||
font-size: 0.9rem;
|
||||
letter-spacing: 0.02rem;
|
||||
color: var(--grey-five);
|
||||
color: var(--text-four);
|
||||
}
|
||||
|
||||
li:hover {
|
||||
color: var(--white);
|
||||
background-color: var(--grey-one);
|
||||
color: var(--text-one);
|
||||
background-color: var(--surface-three);
|
||||
}
|
||||
|
||||
li.selected {
|
||||
background-color: var(--accent-low-opacity);
|
||||
color: var(--accent-color);
|
||||
background-color: var(--tertiary);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
li.selected span {
|
||||
color: var(--accent-color);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
||||
@ -143,11 +143,11 @@
|
||||
}
|
||||
|
||||
path {
|
||||
fill: var(--grey-five);
|
||||
fill: var(--surface-six);
|
||||
}
|
||||
|
||||
button:hover path {
|
||||
fill: var(--accent-color-two);
|
||||
fill: var(--secondary);
|
||||
}
|
||||
|
||||
button {
|
||||
@ -189,7 +189,7 @@
|
||||
padding: 1rem 2rem;
|
||||
z-index: 666;
|
||||
height: 70px;
|
||||
background-color: var(--grey-seven);
|
||||
background-color: var(--surface-eight);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -250,7 +250,7 @@
|
||||
top: 0px;
|
||||
border-radius: 0px 24px 24px 0px;
|
||||
left: 0px;
|
||||
background-color: var(--grey-seven);
|
||||
background-color: var(--surface-eight);
|
||||
padding: 1rem;
|
||||
padding-top: 6rem;
|
||||
z-index: 100;
|
||||
@ -303,7 +303,7 @@
|
||||
.menu-btn__burger::after {
|
||||
width: 24px;
|
||||
height: 2px;
|
||||
background: var(--grey-five);
|
||||
background: var(--surface-six);
|
||||
transition: all 0.3s var(--bezier-one);
|
||||
}
|
||||
|
||||
@ -336,9 +336,9 @@
|
||||
left: -300px;
|
||||
border-radius: 100px;
|
||||
text-decoration: none;
|
||||
background-color: var(--accent-color);
|
||||
background-color: var(--primary);
|
||||
z-index: 10;
|
||||
color: var(--grey-four);
|
||||
color: var(--text-three);
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
padding: 16px 24px;
|
||||
|
||||
@ -35,7 +35,7 @@
|
||||
min-width: max-content;
|
||||
font-size: 0.95rem;
|
||||
text-decoration: none;
|
||||
color: var(--white);
|
||||
color: var(--text-one);
|
||||
font-weight: 600;
|
||||
border: none;
|
||||
border-radius: 100px;
|
||||
@ -51,11 +51,11 @@
|
||||
}
|
||||
|
||||
.button-filled {
|
||||
background-color: var(--accent-color);
|
||||
color: var(--grey-four);
|
||||
background-color: var(--primary);
|
||||
color: var(--text-three);
|
||||
}
|
||||
.button-tonal {
|
||||
background-color: var(--grey-two);
|
||||
background-color: var(--surface-four);
|
||||
}
|
||||
|
||||
.button-filled,
|
||||
@ -65,7 +65,7 @@
|
||||
|
||||
.button-text {
|
||||
background-color: transparent;
|
||||
color: var(--accent-color);
|
||||
color: var(--primary);
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.01rem;
|
||||
}
|
||||
|
||||
@ -92,7 +92,7 @@
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
background-color: var(--grey-six);
|
||||
background-color: var(--surface-seven);
|
||||
}
|
||||
|
||||
.buttons {
|
||||
@ -119,7 +119,7 @@
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 26px;
|
||||
background-color: var(--grey-six);
|
||||
background-color: var(--surface-seven);
|
||||
display: flex;
|
||||
gap: 5%;
|
||||
white-space: normal;
|
||||
@ -170,7 +170,7 @@
|
||||
}
|
||||
|
||||
.fullscreen.scrolled .title {
|
||||
border-bottom: 1px solid var(--grey-three);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.slot {
|
||||
|
||||
@ -18,9 +18,9 @@
|
||||
button {
|
||||
font-family: var(--font-two);
|
||||
border: none;
|
||||
border: 1.5px solid var(--grey-three);
|
||||
border: 1.5px solid var(--border);
|
||||
background-color: transparent;
|
||||
color: var(--grey-five);
|
||||
color: var(--text-four);
|
||||
height: 32px;
|
||||
padding: 0 16px;
|
||||
border-radius: 8px;
|
||||
@ -32,8 +32,8 @@
|
||||
}
|
||||
|
||||
.selected {
|
||||
background-color: var(--accent-low-opacity);
|
||||
color: var(--accent-color);
|
||||
background-color: var(--tertiary);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
img {
|
||||
|
||||
@ -67,29 +67,29 @@
|
||||
display: flex;
|
||||
padding: 1rem 3.25rem;
|
||||
width: 100%;
|
||||
color: var(--accent-color-two);
|
||||
color: var(--secondary);
|
||||
font-weight: 500;
|
||||
font-size: 0.92rem;
|
||||
border-radius: 100px;
|
||||
border: none;
|
||||
background-color: var(--grey-ten);
|
||||
background-color: var(--surface-nine);
|
||||
outline: none;
|
||||
|
||||
transition: background-color 0.3s var(--bezier-one);
|
||||
&:hover {
|
||||
background-color: var(--grey-three);
|
||||
background-color: var(--surface-five);
|
||||
}
|
||||
|
||||
&:focus::placeholder {
|
||||
color: var(--accent-color);
|
||||
color: var(--primary);
|
||||
}
|
||||
&:focus {
|
||||
background-color: var(--bg-color);
|
||||
background-color: var(--surface-two);
|
||||
}
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: var(--grey-five);
|
||||
color: var(--text-four);
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s var(--bezier-one);
|
||||
|
||||
@ -46,13 +46,13 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 2rem;
|
||||
background-color: var(--white);
|
||||
background-color: var(--surface-one);
|
||||
transition: all 0.4s var(--bezier-one);
|
||||
box-shadow: var(--drop-shadow-one);
|
||||
}
|
||||
|
||||
.text {
|
||||
color: var(--grey-two);
|
||||
color: var(--text-two);
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: 4.5px solid transparent;
|
||||
border-top-color: var(--accent-color);
|
||||
border-top-color: var(--primary);
|
||||
animation: spinner 0.6s linear infinite;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
animation: wave-anim 40s;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
fill: var(--accent-color);
|
||||
fill: var(--primary);
|
||||
}
|
||||
|
||||
@keyframes wave-anim {
|
||||
|
||||
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.4 KiB |
@ -28,6 +28,6 @@
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: var(--accent-color);
|
||||
color: var(--primary);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
import { persistQueryClient } from '@tanstack/query-persist-client-core';
|
||||
import { QueryClientProvider } from '@tanstack/svelte-query';
|
||||
import { createSyncStoragePersister } from '@tanstack/query-sync-storage-persister';
|
||||
import { DateTriggerEventHandler } from 'datetrigger';
|
||||
|
||||
import NavHost from '$layout/Navbar/NavHost.svelte';
|
||||
import Spinner from '$lib/components/Spinner.svelte';
|
||||
@ -21,6 +22,7 @@
|
||||
import Button from '$lib/components/Button.svelte';
|
||||
import { staleTime } from '$data/api';
|
||||
import RouterEvents from '$data/RouterEvents';
|
||||
import { events as themeEvents } from '$util/themeEvents';
|
||||
|
||||
const queryClient = new QueryClient({
|
||||
defaultOptions: {
|
||||
@ -41,6 +43,8 @@
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
new DateTriggerEventHandler(themeEvents);
|
||||
|
||||
// Check if the user has already decided.
|
||||
|
||||
const hasDecided = localStorage.getItem('analytics') !== null;
|
||||
|
||||
@ -74,13 +74,13 @@
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
color: var(--grey-four);
|
||||
color: var(--text-three);
|
||||
margin-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
color: var(--grey-four);
|
||||
color: var(--text-three);
|
||||
}
|
||||
|
||||
.text-container {
|
||||
@ -88,14 +88,14 @@
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-bottom: 2rem;
|
||||
background-color: var(--accent-color);
|
||||
background-color: var(--primary);
|
||||
padding: 2.5rem 1.75rem;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--grey-four);
|
||||
color: var(--text-three);
|
||||
}
|
||||
|
||||
a::after {
|
||||
@ -106,7 +106,7 @@
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline var(--grey-four);
|
||||
text-decoration: underline var(--text-three);
|
||||
}
|
||||
|
||||
a:hover::after {
|
||||
|
||||
@ -12,7 +12,7 @@
|
||||
|
||||
<style>
|
||||
a {
|
||||
color: var(--white);
|
||||
color: var(--text-one);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
padding: 0.9rem 1rem;
|
||||
@ -21,14 +21,14 @@
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
border-right: 1px solid var(--grey-three);
|
||||
border-bottom: 1px solid var(--grey-three);
|
||||
border-right: 1px solid var(--border);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
background: var(--grey-one);
|
||||
text-decoration: underline var(--accent-color);
|
||||
color: var(--white);
|
||||
background: var(--surface-three);
|
||||
text-decoration: underline var(--primary);
|
||||
color: var(--text-one);
|
||||
}
|
||||
|
||||
h5 {
|
||||
@ -42,7 +42,7 @@
|
||||
border-radius: 50%;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
background-color: var(--grey-two);
|
||||
background-color: var(--surface-four);
|
||||
transition: transform 0.4s var(--bezier-one);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@ -48,13 +48,13 @@
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
background-color: var(--grey-six);
|
||||
background-color: var(--surface-seven);
|
||||
padding: 0.75rem 1.25rem;
|
||||
border-bottom: 1px solid var(--grey-three);
|
||||
border-bottom: 1px solid var(--border);
|
||||
transition: all 0.2s var(--bezier-one);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--grey-one);
|
||||
background-color: var(--surface-three);
|
||||
}
|
||||
}
|
||||
|
||||
@ -71,7 +71,7 @@
|
||||
.section-container {
|
||||
border-radius: 20px;
|
||||
overflow: hidden;
|
||||
border: 1px solid var(--grey-three);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
a {
|
||||
@ -82,8 +82,8 @@
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: underline var(--accent-color);
|
||||
color: var(--white);
|
||||
text-decoration: underline var(--primary);
|
||||
color: var(--text-one);
|
||||
}
|
||||
|
||||
.contrib-host {
|
||||
|
||||
@ -73,7 +73,7 @@
|
||||
<main class="wrapper" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
|
||||
<section>
|
||||
<div>
|
||||
<h2>🎉 Support <span style="color: var(--accent-color);">ReVanced</span></h2>
|
||||
<h2>🎉 Support <span style="color: var(--primary);">ReVanced</span></h2>
|
||||
<p>
|
||||
ReVanced offers a variety of patches, including ad-blocking, custom themes, and innovative
|
||||
features. All of which is completely open source and free of charge. Donating will allow
|
||||
@ -221,7 +221,7 @@
|
||||
|
||||
h2 {
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--white);
|
||||
color: var(--text-one);
|
||||
}
|
||||
|
||||
h3 {
|
||||
@ -260,7 +260,7 @@
|
||||
|
||||
.donate-card {
|
||||
text-decoration: none;
|
||||
background-color: var(--grey-ten);
|
||||
background-color: var(--surface-nine);
|
||||
border-radius: 1.5rem;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
@ -272,7 +272,7 @@
|
||||
0.3s background-color var(--bezier-one);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--accent-low-opacity);
|
||||
background-color: var(--tertiary);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@ -281,7 +281,7 @@
|
||||
|
||||
span {
|
||||
display: block;
|
||||
color: var(--grey-five);
|
||||
color: var(--text-four);
|
||||
font-size: 1.05rem;
|
||||
font-weight: 500;
|
||||
padding: 1.5rem;
|
||||
@ -308,12 +308,12 @@
|
||||
font-size: 0.9rem;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: var(--grey-five);
|
||||
color: var(--text-four);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
background-color: var(--grey-six);
|
||||
background-color: var(--surface-seven);
|
||||
padding: 0.75rem 1.25rem;
|
||||
transition: filter 0.4s var(--bezier-one);
|
||||
|
||||
|
||||
@ -28,8 +28,8 @@
|
||||
<style lang="scss">
|
||||
.member {
|
||||
width: 100%;
|
||||
color: var(--white);
|
||||
border: 1px solid var(--grey-three);
|
||||
color: var(--text-one);
|
||||
border: 1px solid var(--border);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
padding: 1rem;
|
||||
@ -39,7 +39,7 @@
|
||||
transition: 0.3s background-color var(--bezier-one);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--grey-six);
|
||||
background-color: var(--surface-seven);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -123,7 +123,7 @@
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
color: var(--white);
|
||||
color: var(--text-one);
|
||||
}
|
||||
|
||||
p {
|
||||
@ -138,7 +138,7 @@
|
||||
width: auto;
|
||||
padding: 0.5rem 0.5rem;
|
||||
border-radius: 2rem;
|
||||
background-color: var(--grey-six);
|
||||
background-color: var(--surface-seven);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@ -148,6 +148,6 @@
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--accent-color);
|
||||
color: var(--primary);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -209,7 +209,7 @@
|
||||
.search {
|
||||
padding-top: 5rem;
|
||||
padding-bottom: 1.25rem;
|
||||
background-color: var(--grey-seven);
|
||||
background-color: var(--surface-eight);
|
||||
}
|
||||
|
||||
.search-contain {
|
||||
@ -239,7 +239,7 @@
|
||||
margin-bottom: -1px;
|
||||
overflow: hidden;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--grey-three);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
|
||||
@ -46,21 +46,21 @@
|
||||
width: 100%;
|
||||
user-select: none;
|
||||
transition: background-color 0.4s var(--bezier-one);
|
||||
color: var(--grey-five);
|
||||
color: var(--text-four);
|
||||
transition: color 0.3s var(--bezier-one);
|
||||
}
|
||||
|
||||
.selected {
|
||||
color: var(--accent-color);
|
||||
color: var(--primary);
|
||||
transition: color 0.3s var(--bezier-one);
|
||||
background-color: var(--accent-low-opacity);
|
||||
background-color: var(--tertiary);
|
||||
}
|
||||
.package:hover:not(.selected) {
|
||||
background-color: var(--grey-six);
|
||||
background-color: var(--surface-seven);
|
||||
}
|
||||
|
||||
.package:not(.selected):hover {
|
||||
color: var(--white);
|
||||
color: var(--text-one);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
@ -73,17 +73,17 @@
|
||||
word-break: break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--grey-five);
|
||||
border-bottom: 1px solid var(--grey-three);
|
||||
color: var(--text-four);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.selected {
|
||||
color: var(--accent-color);
|
||||
background-color: var(--accent-low-opacity);
|
||||
color: var(--primary);
|
||||
background-color: var(--tertiary);
|
||||
}
|
||||
|
||||
.package:not(.selected):hover {
|
||||
color: var(--grey-five);
|
||||
color: var(--text-four);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -23,7 +23,7 @@
|
||||
background-color: transparent;
|
||||
}
|
||||
.menu:hover::-webkit-scrollbar-thumb {
|
||||
background-color: var(--accent-color);
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
.slot {
|
||||
@ -37,7 +37,7 @@
|
||||
|
||||
h6 {
|
||||
margin-bottom: 1rem;
|
||||
color: var(--accent-color);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
|
||||
@ -100,7 +100,7 @@
|
||||
h3 {
|
||||
margin-right: 0.5rem;
|
||||
margin-bottom: 0.2rem;
|
||||
color: var(--accent-color);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
#option-description {
|
||||
@ -109,7 +109,7 @@
|
||||
}
|
||||
|
||||
#option-title {
|
||||
color: var(--accent-color-two);
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.button {
|
||||
@ -124,23 +124,23 @@
|
||||
list-style: none;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
color: var(--grey-five);
|
||||
color: var(--text-four);
|
||||
padding: 0.25rem 0.5rem;
|
||||
border: 1px solid var(--grey-three);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--grey-two);
|
||||
background-color: var(--surface-four);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: var(--grey-five);
|
||||
color: var(--text-four);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline var(--accent-color-two);
|
||||
color: var(--accent-color-two);
|
||||
text-decoration: underline var(--secondary);
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
@ -155,7 +155,7 @@
|
||||
|
||||
.patch-container {
|
||||
transition: all 0.1s var(--bezier-one);
|
||||
background-color: var(--grey-six);
|
||||
background-color: var(--surface-seven);
|
||||
padding: 1.25rem;
|
||||
border-radius: 12px;
|
||||
}
|
||||
@ -184,7 +184,7 @@
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--grey-one);
|
||||
background-color: var(--surface-three);
|
||||
}
|
||||
|
||||
&:active {
|
||||
@ -198,11 +198,11 @@
|
||||
|
||||
/* thanks piknik */
|
||||
.option + .option {
|
||||
border-top: 1px solid var(--grey-three);
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.options {
|
||||
border: 1px solid var(--grey-three);
|
||||
border: 1px solid var(--border);
|
||||
overflow: hidden;
|
||||
border-radius: 8px;
|
||||
margin-top: 1rem;
|
||||
|
||||
55
src/util/themeEvents.ts
Normal file
55
src/util/themeEvents.ts
Normal file
@ -0,0 +1,55 @@
|
||||
import { DateTriggerEvent, DAY_IN_MINUTES } from 'datetrigger';
|
||||
|
||||
const changeHue = (n: number) => document.documentElement.style.setProperty('--hue', n.toString());
|
||||
|
||||
/**
|
||||
* Get the date of when easter should happen based off a given year
|
||||
* @param Y The year to get Easter's date from
|
||||
* @returns When Easter should happen
|
||||
*/
|
||||
function getEaster(Y: number): Date {
|
||||
const a = Y % 19,
|
||||
b = Math.floor(Y / 100),
|
||||
c = Y % 100,
|
||||
d = Math.floor(b / 4),
|
||||
e = b % 4,
|
||||
f = Math.floor((b + 8) / 25),
|
||||
g = Math.floor((b - f + 1) / 3),
|
||||
h = (19 * a + b - d - g + 15) % 30,
|
||||
i = Math.floor(c / 4),
|
||||
k = c % 4,
|
||||
L = (32 + 2 * e + 2 * i - h - k) % 7,
|
||||
m = Math.floor((a + 11 * h + 22 * L) / 451),
|
||||
month = Math.floor((h + L - 7 * m + 114) / 31),
|
||||
day = ((h + L - 7 * m + 114) % 31) + 1;
|
||||
return new Date(Y, month - 1, day);
|
||||
}
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
|
||||
export const events: DateTriggerEvent[] = [
|
||||
// New Year.
|
||||
new DateTriggerEvent(new Date(currentYear, 0, 1), DAY_IN_MINUTES, () => {
|
||||
changeHue(240);
|
||||
}),
|
||||
// Christmas.
|
||||
new DateTriggerEvent(new Date(currentYear, 11, 25), DAY_IN_MINUTES, () => {
|
||||
changeHue(120);
|
||||
}),
|
||||
// Valentine's day.
|
||||
new DateTriggerEvent(new Date(currentYear, 1, 14), DAY_IN_MINUTES, () => {
|
||||
changeHue(300);
|
||||
}),
|
||||
// Halloween.
|
||||
new DateTriggerEvent(new Date(currentYear, 9, 31), DAY_IN_MINUTES, () => {
|
||||
changeHue(0);
|
||||
}),
|
||||
// Easter.
|
||||
new DateTriggerEvent(getEaster(currentYear), DAY_IN_MINUTES, () => {
|
||||
changeHue(100);
|
||||
}),
|
||||
// April Fools.
|
||||
new DateTriggerEvent(new Date(currentYear, 3, 1), DAY_IN_MINUTES, () => {
|
||||
changeHue(69);
|
||||
})
|
||||
];
|
||||
Loading…
x
Reference in New Issue
Block a user