Mercurial > libervia-templates

diff sat_templates/templates/bulma/static/styles.css @ 406:049a0638f6fa

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
chat: Keywords handling: - Keywords are now displayed in messages. - Modal panel has been updated to allow for side panels, i.e. modal panel comming from top, bottom, right or left with an animation, and which can be closed by clicking/touching outside of the panel. rel 458
author Goffi <goffi@goffi.org>
date Fri, 06 Jun 2025 10:50:35 +0200
parents 5016fb0ff62f
children a5588ea3bcd6
line wrap: on
line diff
--- a/sat_templates/templates/bulma/static/styles.css	Wed May 21 15:41:00 2025 +0200
+++ b/sat_templates/templates/bulma/static/styles.css	Fri Jun 06 10:50:35 2025 +0200
@@ -110,7 +110,7 @@
 
 /* Panels */
 
-.panel-header {
+.modal-panel-header {
     border-bottom: 1px solid #dbdbdb;
     padding: 0.5rem 1rem;
 }
@@ -187,4 +187,122 @@
     background-color: var(--reaction-user-hover-background);
 }
 
+/* Side Panels */
 
+.modal-panel {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+    display: flex;
+    pointer-events: none;
+}
+
+.modal-panel-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: hsla(221,14%,4%,0.86);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    pointer-events: all;
+}
+
+.modal-panel-container {
+    position: absolute;
+    background: white;
+    box-shadow: -2px 0 10px rgba(0,0,0,0.1);
+    overflow-y: auto;
+    transition: transform 0.3s ease-out;
+    will-change: transform;
+    pointer-events: all;
+}
+
+/* Position classes */
+.modal-panel-container.is-right {
+    top: 0;
+    right: 0;
+    height: 100vh;
+    transform: translateX(100%);
+    border-left: 1px solid #eee;
+}
+
+.modal-panel-container.is-left {
+    top: 0;
+    left: 0;
+    height: 100vh;
+    transform: translateX(-100%);
+    border-right: 1px solid #eee;
+}
+
+.modal-panel-container.is-top {
+    top: 0;
+    left: 0;
+    right: 0;
+    transform: translateY(-100%);
+    border-bottom: 1px solid #eee;
+}
+
+.modal-panel-container.is-bottom {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    transform: translateY(100%);
+    border-top: 1px solid #eee;
+}
+
+/* Active state */
+.modal-panel.is-active .modal-panel-background {
+    opacity: 1;
+}
+
+.modal-panel.is-active .modal-panel-container {
+    transform: none !important;
+}
+
+/* Closing animation */
+.modal-panel.closing .modal-panel-background {
+    opacity: 0;
+}
+
+.modal-panel.closing .modal-panel-container.is-right {
+    transform: translateX(100%) !important;
+}
+
+.modal-panel.closing .modal-panel-container.is-left {
+    transform: translateX(-100%) !important;
+}
+
+.modal-panel.closing .modal-panel-container.is-top {
+    transform: translateY(-100%) !important;
+}
+
+.modal-panel.closing .modal-panel-container.is-bottom {
+    transform: translateY(100%) !important;
+}
+
+
+/* Responsive */
+
+
+@media screen and (max-width: 768px) {
+    .modal-panel-container {
+        width: 90% !important;
+    }
+}
+
+@media screen and (min-width: 769px) {
+    .modal-panel-container.is-right,
+    .modal-panel-container.is-left {
+        width: 50rem;
+    }
+
+    .modal-panel-container.is-top,
+    .modal-panel-container.is-bottom {
+        height: 80vh;
+    }
+}