CSP hardening: remove inline styles

Similar to removal of inline scripts, everything was taken out into the
CSS files, with the same styles applied there directly. This lets us
use `script-src 'self'` in the CSP.

Additionally, serve Golden Layout CSS locally to avoid third-party
connection.

6 files changed, 144 insertions, 17 deletions

diff --git a/webAO/dom/toggleElement.js b/webAO/dom/toggleElement.js
index 76a1c633..c87561d0 100644
--- a/webAO/dom/toggleElement.js
+++ b/webAO/dom/toggleElement.js
@@ -4,10 +4,10 @@
  */
 export function toggleElement(elementId) {
   const element = document.getElementById(elementId);
-  if (element.style.display !== "none") {
-    element.style.display = "none";
+  if ("nodisplay" in element.classList) {
+    element.classList.remove("nodisplay");
   } else {
-    element.style.display = "block";
+    element.classList.add("nodisplay");
   }
 }
 window.toggleElement = toggleElement;
diff --git a/webAO/golden/css/goldenlayout-dark-theme.css b/webAO/golden/css/goldenlayout-dark-theme.css
new file mode 100644
index 00000000..beb8e3b0
--- /dev/null
+++ b/webAO/golden/css/goldenlayout-dark-theme.css
@@ -0,0 +1 @@
+.lm_goldenlayout{background:#000000}.lm_content{background:#222222}.lm_dragProxy .lm_content{box-shadow:2px 2px 4px rgba(0,0,0,0.9)}.lm_dropTargetIndicator{box-shadow:inset 0 0 30px #000000;outline:1px dashed #cccccc;transition:all 200ms ease}.lm_dropTargetIndicator .lm_inner{background:#000000;opacity:.2}.lm_splitter{background:#000000;opacity:.001;transition:opacity 200ms ease}.lm_splitter:hover,.lm_splitter.lm_dragging{background:#444444;opacity:1}.lm_header{height:20px;user-select:none}.lm_header.lm_selectable{cursor:pointer}.lm_header .lm_tab{font-family:Arial,sans-serif;font-size:12px;color:#999999;background:#111111;box-shadow:2px -2px 2px rgba(0,0,0,0.3);margin-right:2px;padding-bottom:2px;padding-top:2px}.lm_header .lm_tab .lm_close_tab{width:11px;height:11px;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAATElEQVR4nG3OwQ0DMQwDwZGRBtR/j1YJzMc5+IDoR+yCVO29g+pu981MFgqZmRdAfU7+CYWcbF11LwALjpBL0N0qybNx/RPU+gOeiS/+XCRwDlTgkQAAAABJRU5ErkJggg==);background-position:center center;background-repeat:no-repeat;top:4px;right:6px;opacity:.4}.lm_header .lm_tab .lm_close_tab:hover{opacity:1}.lm_header .lm_tab.lm_active{border-bottom:none;box-shadow:0 -2px 2px #000000;padding-bottom:3px}.lm_header .lm_tab.lm_active .lm_close_tab{opacity:1}.lm_dragProxy.lm_bottom .lm_header .lm_tab,.lm_stack.lm_bottom .lm_header .lm_tab{box-shadow:2px 2px 2px rgba(0,0,0,0.3)}.lm_dragProxy.lm_bottom .lm_header .lm_tab.lm_active,.lm_stack.lm_bottom .lm_header .lm_tab.lm_active{box-shadow:0 2px 2px #000000}.lm_selected .lm_header{background-color:#452500}.lm_tab:hover,.lm_tab.lm_active{background:#222222;color:#dddddd}.lm_header .lm_controls .lm_tabdropdown:before{color:#ffffff}.lm_controls>li{position:relative;background-position:center center;background-repeat:no-repeat;opacity:.4;transition:opacity 300ms ease}.lm_controls>li:hover{opacity:1}.lm_controls .lm_popout{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPklEQVR4nI2Q0QoAIAwCNfr/X7aXCpGN8snBdgejJOzckpkxs9jR6K6T5JpU0nWl5pSXTk7qwh8SnNT+CAAWCgkKFpuSWsUAAAAASUVORK5CYII=)}.lm_controls .lm_maximise{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==)}.lm_controls .lm_close{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=)}.lm_maximised .lm_header{background-color:#000000}.lm_maximised .lm_controls .lm_maximise{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC)}.lm_transition_indicator{background-color:#000000;border:1px dashed #555555}.lm_popin{cursor:pointer}.lm_popin .lm_bg{background:#ffffff;opacity:.3}.lm_popin .lm_icon{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAJCAYAAADpeqZqAAAAWklEQVR4nJWOyw3AIAxDHcQC7L8jbwT3AlJBfNp3SiI7dtRaLSlKKeoA1oEsKSQZCEluexw8Tm3ohk+E7bnOUHUGcNh+HwbBygw4AZ7FN/Lt84p0l+yTflV8AKQyLdcCRJi/AAAAAElFTkSuQmCC);background-position:center center;background-repeat:no-repeat;border-left:1px solid #eeeeee;border-top:1px solid #eeeeee;opacity:.7}.lm_popin:hover .lm_icon{opacity:1}/*# sourceMappingURL=goldenlayout-dark-theme.css.map */
\ No newline at end of file
diff --git a/webAO/packets/handlers/handleFL.ts b/webAO/packets/handlers/handleFL.ts
index 5479f4ef..b9647f14 100644
--- a/webAO/packets/handlers/handleFL.ts
+++ b/webAO/packets/handlers/handleFL.ts
@@ -19,24 +19,24 @@ export const handleFL = (args: string[]) => {
   }
 
   if (args.includes("cccc_ic_support")) {
-    document.getElementById("cccc")!.style.display = "";
-    document.getElementById("pairing")!.style.display = "";
+    document.getElementById("cccc")!.classList.remove("nodisplay");
+    document.getElementById("pairing")!.classList.remove("nodisplay");
   }
 
   if (args.includes("flipping")) {
-    document.getElementById("button_flip")!.style.display = "";
+    document.getElementById("button_flip")!.classList.remove("nodisplay");
   }
 
   if (args.includes("looping_sfx")) {
-    document.getElementById("button_shake")!.style.display = "";
-    document.getElementById("2.7")!.style.display = "";
+    document.getElementById("button_shake")!.classList.remove("nodisplay");
+    document.getElementById("2.7")!.classList.remove("nodisplay");
   }
 
   if (args.includes("effects")) {
-    document.getElementById("2.8")!.style.display = "";
+    document.getElementById("2.8")!.classList.remove("nodisplay");
   }
 
   if (args.includes("y_offset")) {
-    document.getElementById("y_offset")!.style.display = "";
+    document.getElementById("y_offset")!.classList.remove("nodisplay");
   }
 };
diff --git a/webAO/packets/handlers/handlePV.ts b/webAO/packets/handlers/handlePV.ts
index 2e14ad2f..28eaf741 100644
--- a/webAO/packets/handlers/handlePV.ts
+++ b/webAO/packets/handlers/handlePV.ts
@@ -99,9 +99,6 @@ export const handlePV = async (args: string[]) => {
       `${AO_HOST}characters/${encodeURI(me.name)}/custom.gif`,
     )
   ) {
-    document.getElementById("button_4")!.style.display = "";
-  } else {
-    document.getElementById("button_4")!.style.display = "none";
+    document.getElementById("button_4")!.classList.remove("nodisplay");
   }
-
 };
diff --git a/webAO/styles/client.css b/webAO/styles/client.css
index fa01ddc6..8dfd5daa 100644
--- a/webAO/styles/client.css
+++ b/webAO/styles/client.css
@@ -65,7 +65,7 @@
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.6);
-  display: flex;
+  display: none;
   justify-content: center;
   align-items: center;
   z-index: 200;
@@ -95,6 +95,7 @@
 #client_errortext {
   margin: 4px 0 8px;
   text-align: center;
+  white-space: pre-wrap;
 }
 
 #client_error_code {
@@ -594,12 +595,17 @@
   font-size: small;
   overflow-wrap: break-word;
   overflow-y: auto;
+  text-align: left;
   text-rendering: optimizelegibility;
   resize: none;
   flex: 1 1 auto;
   border: none;
 }
 
+#client_ooclog a {
+  color: white;
+}
+
 #client_oocinput {
   display: flex;
   flex-flow: row nowrap;
@@ -814,6 +820,125 @@
   white-space: pre-wrap;
 }
 
-#client_errortext {
-  white-space: pre-wrap;
+.error {
+  color: red;
+}
+
+#client_chatcontainer {
+  font-size: 12px;
+  opacity: 0;
+}
+
+.nodisplay {
+  display: none;
+}
+
+#pairing_table {
+  border: none;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+#judge_fieldset {
+  margin: 10px;
+}
+
+#menu_wt {
+  color: blue;
+}
+
+#menu_ce {
+  color: red;
+}
+
+#menu_nguilty {
+  color: white;
+  font-family: serif;
+  text-shadow:
+    -1px 0 #000,
+    0 1px #000,
+    1px 0 #000,
+    0 -1px #000;
+  font-size: 1.5em;
+  line-height: 0.75;
+}
+
+#menu_guilty {
+  color: black;
+  font-family: serif;
+  font-size: 1.5em;
+}
+
+.menu-hp-bar {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.menu-hp-label {
+  font-size: 1.25em;
+}
+
+#mute_label {
+  float: left;
+}
+
+#callmod_button {
+  color: #ce2727;
+}
+
+.l-fieldset {
+  text-align: left;
+}
+
+#bg_span {
+  display: inline-block;
+}
+
+.bg-selection {
+  margin-top: 10px;
+}
+
+#evi_fieldset {
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+}
+
+#evi_info {
+  display: flex;
+}
+
+#evi_desc_container {
+  display: flex;
+  padding-top: 5px;
+}
+
+#evi_add_container {
+  display: block;
+  text-align: center;
+  padding-top: 20px;
+}
+
+#auth_fieldset {
+  margin: 1rem auto;
+  padding: 1rem;
+  max-width: 200px;
+}
+
+#webao_title {
+  line-height: 0.3em;
+}
+
+#client_ooc {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+#client_replaycontrols {
+  white-space: nowrap;
+}
+
+.replay-control {
+  width: 25%;
 }
diff --git a/webAO/styles/master.css b/webAO/styles/master.css
index add9ed21..c5d9b197 100644
--- a/webAO/styles/master.css
+++ b/webAO/styles/master.css
@@ -379,3 +379,7 @@ nav.navbar.fixed-top.navbar-expand-lg.navbar-dark.bg-dark.fixed-top {
 .server-description {
   white-space: pre-wrap;
 }
+
+#ms_error {
+  display: none;
+}