Move popup class in client.css

static/css/base.css

@@ -2,12 +2,7 @@
 
 :root {
   --bar-bg: grey;
-
-  --error-bg: #FFBBBB;
-  --error-text: darkred;
-
-  --info-bg: #DDEEFF;
-  --info-text: #00004D;
+  --bar-text: white;
 }
 
 body, html {
@@ -16,12 +11,12 @@ body, html {
 
 /* =============== Header =================== */
 #header {
-    position: absolute;
+    position: fixed;
     display: block;
 
     text-align: center;
 
-    color: white;
+    color: var(--bar-text);
     font-family: monospace;
     font-size: 1.7em;
     font-weight: bold;
@@ -61,46 +56,6 @@ body, html {
     margin-bottom: 75px;
 }
 
-/* ============== Popup ===================== */
-
-.popup {
-    border: solid 2px;
-
-    font-family: monospace;
-    font-size: 1.3em;
-    font-weight: bold;
-
-    width: 66%;
-
-    padding: 10px;
-    margin: auto;
-    margin-bottom: 50px;
-}
-
-.popup:empty {
-    display: none;
-}
-
-.popup button {
-    background-color: inherit;
-
-    border: solid 2px;
-
-    font-size: smaller;
-    color: inherit;
-
-    padding: 10px 30px 10px 30px;
-}
-
-.error {
-    background-color: var(--error-bg);
-    color: var(--error-text);
-}
-
-.info {
-    background-color: var(--info-bg);
-    color: var(--info-text);
-}
 
 /* ============== Footer ===================== */
 
@@ -120,6 +75,6 @@ body, html {
 }
 
 #footer a {
-    color: white;
+    color: var(--bar-text);
     text-decoration: none;
 }

static/css/client.css

+:root {
+  --error-bg: #FFBBBB;
+  --error-text: darkred;
+
+  --info-bg: #DDEEFF;
+  --info-text: #00004D;
+}
+
+/**************************************/
+
 body {
     text-align: center;
     background-color: lightgrey;
@@ -10,3 +20,44 @@ body {
 #current_content input {
     text-transform: inherit;
 }
+
+/* ============== Popup ===================== */
+
+.popup {
+    border: solid 2px;
+
+    font-family: monospace;
+    font-size: 1.3em;
+    font-weight: bold;
+
+    width: 66%;
+
+    padding: 10px;
+    margin: auto;
+    margin-bottom: 50px;
+}
+
+.popup:empty {
+    display: none;
+}
+
+.popup button {
+    background-color: inherit;
+
+    border: solid 2px;
+
+    font-size: smaller;
+    color: inherit;
+
+    padding: 10px 30px 10px 30px;
+}
+
+.error {
+    background-color: var(--error-bg);
+    color: var(--error-text);
+}
+
+.info {
+    background-color: var(--info-bg);
+    color: var(--info-text);
+}

views/layout.html

@@ -17,6 +17,7 @@
         {{include}}
         <!-- ======================== -->
 
+        <div class="spacer"></div>
         <div id="footer">
             [ <a href="{{=URL('default', 'index')}}">WebClient</a> ]
             [ <a href="{{=URL('debug', 'index')}}">Debug</a> ]