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