+
-
The ... Championship
-
at 00:00
-
Remaining: 00:00:00
+
+
The ... Championship
+
at 00:00
+
Remaining: 00:00:00
+
-
+
More
- Make my timers shorter by
+
+
Make my timers shorter by minutes.
+
diff --git a/js/ui.js b/js/ui.js
index 8ce0a86..e080b94 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -23,7 +23,9 @@ export default class UI {
get paranoiaOffset() {
let currentParanoiaOffset = this.rootObject.getElementById('paranoia').value
if (this.savedParanoiaOffset != currentParanoiaOffset) {
+ this.savedParanoiaOffset = currentParanoiaOffset
localStorage.setItem('paranoiaOffset', currentParanoiaOffset)
+ this.#updateParanoiaPlural()
}
return currentParanoiaOffset
@@ -54,6 +56,7 @@ export default class UI {
#setParanoiaOffset(value) {
this.rootObject.getElementById('paranoia').value = value
+ this.#updateParanoiaPlural()
}
#loadResponseIntoData(response) {
@@ -64,6 +67,10 @@ export default class UI {
fetch(Data.championshipsURL).then(this.#loadResponseIntoData)
}
+ #updateParanoiaPlural() {
+ this.rootObject.getElementById('minutes_plural').innerHTML = this.paranoiaOffset == 1 ? '' : 's'
+ }
+
#updateChampionshipDetails() {
this.rootObject.getElementById('time').innerHTML = Transform.time(this.next?.time)
this.rootObject.getElementById('location').innerHTML = this.next?.location
@@ -90,11 +97,12 @@ export default class UI {
#buildChampionshipDay(dayDetails) {
const [day, details] = dayDetails
- let dayContainer = `
${Day.names[day]}
`
- dayContainer += this.#buildChampionshipTimes(day, details)
+
+ let dayContainer = this.#buildChampionshipTimes(day, details)
+ dayContainer = `
${Day.names[day]}
`
let dayContainerClasses = 'day-container' + ((Day.today == day) ? ' today' : '')
- return `
`
+ return `
${dayContainer}
`
}
#buildChampionshipTimes(day, details) {
diff --git a/style.css b/style.css
index 2afcc65..49fb885 100644
--- a/style.css
+++ b/style.css
@@ -1,9 +1,18 @@
:root {
- --border: black;
+ --text: black;
+ --background: white;
+ --border: white;
+ --border-size: 0px;
+ --border-pattern: solid;
+ --border-radius: 10px;
+ --box-shadow-offset: 0 0;
+ --box-shadow-spread: 10px;
+ --box-shadow: white;
--sso-pink: #e53bb9;
--modal-background: rgba(255, 255, 255, 0.7);
--highlighted-modal-background: rgba(255, 210, 242, 0.7);
--highlighted-row: rgba(229, 59, 185, 0.55);
+ --more: var(--highlighted-modal-background);
}
* {
@@ -12,8 +21,9 @@
html {
margin: 0;
- font-family: sans-serif;
- background-color: white;
+ font-family: 'Quicksand', sans-serif;
+ background-color: var(--background);
+ color: var(--text);
}
body {
@@ -21,6 +31,22 @@ body {
padding: 20px;
}
+.more summary {
+ padding: 7px 5px;
+ cursor: pointer;
+}
+
+.more .more-content {
+ padding: 2px 5px 7px;
+}
+
+.more {
+ margin: 0;
+ background-color: var(--more);
+ border-radius: 0 0 var(--border-radius) var(--border-radius);
+ box-shadow: var(--box-shadow-offset) var(--box-shadow-spread) var(--more);
+}
+
.background-image {
position: fixed;
inset: 0;
@@ -31,19 +57,28 @@ body {
background-size: cover;
}
-.timer-container {
+.timer-panel-container {
min-height: 600px;
padding-top: 50px;
}
+.timer-container, .day-container {
+ background-color: var(--modal-background);
+ border: var(--border-size) var(--border-pattern) var(--border);
+ box-shadow: var(--box-shadow-offset) var(--box-shadow-spread) var(--box-shadow);
+ border-radius: var(--border-radius);
+}
+
+.timer-container {
+ padding: 5px;
+ border-radius: var(--border-radius) var(--border-radius) 0 0;
+}
+
.timer-panel {
text-align: center;
max-width: 40em;
margin: 5px auto;
- background-color: var(--modal-background);
- border: 1px solid var(--border);
- border-radius: 5px;
- padding: 5px;
+ padding: 0;
}
.location-container {
@@ -55,6 +90,21 @@ body {
margin-top: 0;
}
+.paranoia-disclaimer {
+ font-style: italic;
+}
+
+.paranoia-disclaimer input#paranoia {
+ font-family: inherit;
+ font-size: inherit;
+ background-color: transparent;
+ border: none;
+ border-bottom: 2px var(--border-pattern) var(--text);
+ padding: 1px 4px;
+ text-align: center;
+ width: 2em;
+}
+
.days {
display: flex;
flex-flow: row wrap;
@@ -63,9 +113,6 @@ body {
.day-container {
flex: 1 1 auto;
- background-color: var(--modal-background);
- border: 1px solid var(--border);
- border-radius: 5px;
padding: 5px;
}
@@ -84,9 +131,15 @@ body {
.time-container {
list-style-type: none;
padding: 3px 5px;
- border-radius: 5px;
+ border-radius: var(--border-radius);
}
.next-time {
background-color: var(--highlighted-row);
}
+
+@media screen and (max-width: 600px) {
+ .no-mobile {
+ display: none;
+ }
+}