export/html: update toast markup

strictdoc-project · Oct 20, 2023 · 49b9e41 · 49b9e41
1 parent 59cc000
commit 49b9e41
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 16 deletions.
diff --git a/strictdoc/export/html/_static/layout.css b/strictdoc/export/html/_static/layout.css
@@ -70,28 +70,44 @@
   font-weight: bold;
 }
 
-/* connection_status */
+/* messages */
 
-.connection_status {
+.mars {
   position: fixed;
   z-index: 1111;
-  top: 50%;
-  left: 2rem;
-  right: 2rem;
-  /* left: 1rem; */
-
-  /* background: rgba(255, 255, 255, 0.6);
-  -webkit-backdrop-filter: blur(8px);
-  box-shadow: 0 8px 24px rgba(0,0,0,.3);
-  backdrop-filter: blur(8px); */
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  pointer-events: none;
+
+  display: flex;
+  justify-content: center;
+  /* align-items: flex-end */
+  align-items: center;
+
+  padding: calc(var(--base-rhythm)*10);
+}
 
-  box-shadow: 0 8px 32px rgba(0,0,0,.3);
-  background: #fff;
+/* <sdoc-toast> */
 
-  border-radius: 2rem;
+sdoc-toast {
+  pointer-events: initial;
   text-align: center;
+  border-radius: var(--base-rhythm);
+  box-shadow: 0 8px 32px rgba(0,0,0,.3);
+  background: var(--color-bg-ui);
+  color: var(--color-fg-secondary-invert);
 }
 
-.connection_status:not(:empty) {
+sdoc-toast:not(:empty) {
   padding: .75rem 2rem;
 }
+
+sdoc-toast a:link {
+  color: var(--color-bg-contrast);
+}
+
+sdoc-toast a:hover {
+  color: var(--color-fg-accent);
+}
diff --git a/strictdoc/export/html/templates/base.jinja.html b/strictdoc/export/html/templates/base.jinja.html
@@ -30,7 +30,9 @@
 
 <body data-viewtype="{%- block viewtype -%}{%- endblock viewtype -%}" data-turbo="false">
 
+<div class="mars">
   {%- include "websocket.jinja.html" -%}
+</div>
 
   <div class="layout" id="layout">
 

diff --git a/strictdoc/export/html/templates/websocket.jinja.html b/strictdoc/export/html/templates/websocket.jinja.html
@@ -1,7 +1,7 @@
 {%- if project_config.is_running_on_server -%}
 
 {# It is important that there are no spaces within this element #connection_status: #}
-<div id="connection_status" class="connection_status"></div>
+<sdoc-toast id="connection_status"></sdoc-toast>
 
 <script>
   var clientId = Date.now();