mirrors/caddy-website
1
0
Fork 0
mirror of https://github.com/caddyserver/website.git synced 2025-04-21 20:46:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Get themes under control; button hover splash

Browse source
This commit is contained in:
Matthew Holt 2023-05-26 23:12:07 -06:00 • committed by Francis Lavoie
parent 824b1b1940
commit 98793dab52
No known key found for this signature in database
GPG key ID: C5204D4F28147FC8
7 changed files with 165 additions and 133 deletions
Download patch file Download diff file Expand all files Collapse all files

27
new/resources/js/common.js
View file

@ -127,6 +127,9 @@ function getTheme() {
// setTheme changes the configured theme to light, dark, or system and applies it.
function setTheme(theme) {
if (theme !== "light" && theme !== "dark" && theme !== "system") {
theme = "system";
}
localStorage.setItem("theme", theme);
$('#current-theme').innerText = theme;
if (theme == "system") {
@ -139,10 +142,8 @@ function setTheme(theme) {
function applyTheme(lightOrDark) {
if (lightOrDark == "dark") {
$('html').classList.add('dark');
$('#logo').src = '/resources/images/logo-dark.svg';
} else {
$('html').classList.remove('dark');
$('#logo').src = '/resources/images/logo-light.svg';
}
}
@ -157,4 +158,24 @@ function nextTheme() {
theme = "system";
}
setTheme(theme);
}
}
// hoversplash effect!
on('mouseover', '.button', (e) => {
const elem = document.createElement('span');
elem.classList.add('hover-splash');
// get coordinates relative to container
const rect = e.target.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
elem.style.left = `${x}px`;
elem.style.top = `${y}px`;
e.target.append(elem);
setTimeout(function() {
elem.remove();
}, 1000);
});