Mercurial > libervia-templates

diff sat_templates/templates/bulma/static/styles.css @ 403:65c53ec5e777

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Bulma: complete redesign: This is a WIP full redesign of the whole web UI. Only chat is usable at the moment, many things are broken. The design uses the new Bulma v1+, has a look closer to industry standards, paves the way for a dark theme, and should be easy to use. It's a basis for coming features such as UI/UX for threads. rel 457
author Goffi <goffi@goffi.org>
date Fri, 11 Apr 2025 21:32:05 +0200
parents 2bbcb7da56bc
children 66f98ee041d8
line wrap: on
line diff
--- a/sat_templates/templates/bulma/static/styles.css	Sat Oct 26 22:53:26 2024 +0200
+++ b/sat_templates/templates/bulma/static/styles.css	Fri Apr 11 21:32:05 2025 +0200
@@ -1,7 +1,26 @@
+:root {
+  --selected-item-bg: deepskyblue;
+}
+
 html, body {
 
+    height: 100vh;
+    overflow: hidden;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+}
+
+#body {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+}
+
+.is-full-height {
     height: 100%;
-    overflow: hidden;
 }
 
 .navbar-item {
@@ -12,3 +31,47 @@
 .menu-item {
     padding-top: 0.225em;
 }
+
+.avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    background-color: #3273dc;
+    color: #fff;
+}
+
+.avatar.image {
+    background-color: #ccc;
+    padding: 3px;
+}
+
+div.jid-search-dialog {
+    min-height: 80%;
+}
+
+div.search-item.is-selected {
+    background-color: var(--selected-item-bg);
+}
+
+
+.collapsible-content {
+    overflow: hidden;
+    max-height: 0;
+    opacity: 1;
+    transition:
+        max-height 0.3s ease-out,
+        opacity 0.2s linear;
+}
+
+.collapsible-header.collapsed .collapsible-icon {
+    transform: rotate(-90deg);
+}
+
+/* Animation */
+.collapsible-header.collapsed + .collapsible-content {
+    opacity: 0;
+}
+
+.collapsible-icon {
+    transition: transform 0.2s ease-out;
+}