ari/live-schedule
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

add special event toggle (alt + click)

Browse source
This commit is contained in:
ari melody 2026-07-20 22:31:44 +01:00
parent 2df26b8ce0
commit 4585d674e0
Signed by: ari
GPG key ID: CF99829C92678188
2 changed files with 49 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

23
main.js
View file

@ -149,6 +149,8 @@ function createSchedule() {
container.id = `slot-${day}`;
if (!schedule.days[day].enabled)
container.classList.add('disabled');
if (schedule.days[day].special)
container.classList.add('special');
const timeslotDateContainer = document.createElement('div');
timeslotDateContainer.className = 'timeslot-date';
@ -183,7 +185,10 @@ function createSchedule() {
scheduleDOM.appendChild(container);
timeslotDay.addEventListener('click', () => {
timeslotDay.addEventListener('click', event => {
if (event.altKey)
return;
schedule.days[day].enabled = !schedule.days[day].enabled;
timeslotTitle.contentEditable = schedule.days[day].enabled;
@ -210,5 +215,21 @@ function createSchedule() {
timeslotTime.addEventListener('keyup', () => {
schedule.days[day].time = timeslotTime.innerText;
});
container.addEventListener('click', event => {
if (!event.altKey)
return;
event.preventDefault();
const slot = schedule.days[day];
slot.special = !slot.special;
if (slot.special) {
container.classList.add("special");
} else {
container.classList.remove("special");
}
});
}
}

30
style.css
View file

@ -213,11 +213,35 @@ body {
opacity: .75;
}
.timeslot:not(.disabled) .timeslot-title,
.timeslot:not(.disabled) .timeslot-subtitle {
background: linear-gradient(to top, #81ac34 0%, #b7ff00 33%, #d7ff83 60%, #d9ff6d);
.timeslot:not(.disabled) {
.timeslot-title, .timeslot-subtitle {
background: linear-gradient(to top, #81ac34 0%, #b7ff00 33%, #d7ff83 60%, #d9ff6d);
/* --hue: 128.7;
background: linear-gradient(in oklch, to top,
oklch(0.58, 0.1464, var(--hue)) 0%,
oklch(0.70, 0.1764, var(--hue)) 33%,
oklch(0.95, 0.1164, var(--hue)) 60%,
oklch(0.90, 0.2264, var(--hue))
); */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 8px color-mix(in srgb, var(--active), transparent 50%);
}
&.special {
.timeslot-title, .timeslot-subtitle {
--hue: 325.03;
background: linear-gradient(to top, #bc11c7 0%, #d64bdf 33%, #f99cff 60%, #f788fe);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 8px color-mix(in srgb, #f788fe, transparent 50%);
}
.timeslot-content::before {
background-color: #f788fe;
}
}
}