From c90d64f2439cf4fc5ac07f0ace27100aad2b69be Mon Sep 17 00:00:00 2001
From: Ben Harris <bjh21@bjh21.me.uk>
Date: Mon, 17 Oct 2022 22:04:16 +0100
Subject: js: Move most style settings from JavaScript to CSS

Some elements (generally those created by JavaScript) had their style
parameters set directly by JavaScript.  Putting styles in CSS generally
makes them easier to understand (and fiddle with), so I've done that.
The only styles left in JavaScript are those that are calculated by
JavaScript (like the status-bar size) and the random-seed permalink
visibility because I wasn't quite sure how to handle it.
---
 html/jspage.pl | 55 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)

(limited to 'html')

diff --git a/html/jspage.pl b/html/jspage.pl
index 574f255..3a241e4 100755
--- a/html/jspage.pl
+++ b/html/jspage.pl
@@ -191,6 +191,61 @@ EOF
     display: flex;
 }
 
+#gamemenu .tick {
+    /* The tick next to a menu item, or its unselected equivalent. */
+    padding-right: 0.5em;
+    color: transparent;
+}
+
+#gamemenu .tick.selected {
+    /* Tick for a selected menu entry. */
+    color: inherit;
+}
+
+#statusbar {
+    overflow: hidden;
+    height: 1.2em;
+    text-align: left;
+    background: #d8d8d8;
+    border-left: 2px solid #c8c8c8;
+    border-top: 2px solid #c8c8c8;
+    border-right: 2px solid #e8e8e8;
+    border-bottom: 2px solid #e8e8e8;
+}
+
+#dlgdimmer {
+    width: 100%;
+    height: 100%;
+    background: #000000;
+    position: fixed;
+    opacity: 0.3;
+    left: 0;
+    top: 0;
+    z-index: 99;
+}
+
+#dlgform {
+    opacity: 1;
+    background: #ffffff;
+    color: #000000;
+    position: absolute;
+    border: 2px solid black;
+    padding: 20px;
+    z-index: 100;
+}
+
+#dlgform .title {
+    margin-top: 0px;
+}
+
+#resizehandle {
+    position: absolute;
+    z-index: 98;
+    bottom: 0;
+    right: 0;
+    cursor: se-resize;
+}
+
 #apology {
     padding: 0 1em 0 1em;
     margin: 1em;
-- 
cgit v1.1