From 20920524b7bd1650e6ed15e497d7cbbb5db1a4ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=B6rnquist?= <hugo@lysator.liu.se>
Date: Tue, 14 Apr 2020 16:40:19 +0200
Subject: Add UI sliders to tune CSS.

---
 static/script.js |  4 ++++
 static/style.css | 30 +++++++++++++++++++++++++++++-
 2 files changed, 33 insertions(+), 1 deletion(-)

(limited to 'static')

diff --git a/static/script.js b/static/script.js
index 45a8c8d0..a5a5093d 100644
--- a/static/script.js
+++ b/static/script.js
@@ -174,6 +174,10 @@ function new_popup () {
 
 }
 
+function setVar(str, val) {
+	document.documentElement.style.setProperty("--" + str, val);
+}
+
 window.onload = function () {
     start_time.setTime(document.querySelector("meta[name='start-time']").content * 1000)
     end_time.setTime(document.querySelector("meta[name='end-time']").content * 1000)
diff --git a/static/style.css b/static/style.css
index 83cd35d5..2bf4d125 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,5 +1,10 @@
 html {
     height: 100%;
+    /* TODO
+     * get the default values from the code.
+     */
+    --editmode: 1.0;
+    --event-font-size: 8pt;
 }
 
 html, body {
@@ -209,6 +214,27 @@ Each event within the eventlist
     display: block;
 }
 
+/* Sliders
+----------------------------------------
+ */
+
+.sliders label {
+    padding-left: 1em;
+}
+
+.sliders input[type="range"] {
+    width: 100%;
+    margin: 0;
+}
+
+.sliders .input-group {
+    display: flex;
+}
+
+.sliders .input-group input {
+    min-width: 0;
+}
+
 /* Calendar List
 ----------------------------------------
 The list of all the loaded calendars,
@@ -409,7 +435,9 @@ Find color between gray and lightgray
     width: 100%;
 
     border: 2px solid black;
-    font-size: 8pt;
+    font-size: var(--event-font-size);
+
+    transition: 0.3s;
 }
 
 .events .event.continuing {
-- 
cgit v1.2.3