diff --git a/main.js b/main.js index 7fbd3e5..e42b01d 100644 --- a/main.js +++ b/main.js @@ -180,6 +180,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'; @@ -214,7 +216,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; @@ -241,5 +246,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"); + } + }); } } diff --git a/style.css b/style.css index 92c477c..0de1826 100644 --- a/style.css +++ b/style.css @@ -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; + } +} +}