--- a/sat_templates/templates/bulma/static/styles.css	Wed Oct 02 17:23:03 2024 +0200
+++ b/sat_templates/templates/bulma/static/styles.css	Sat Oct 26 22:53:26 2024 +0200
@@ -1,813 +1,14 @@
-:root {
-  --photo-height: 280px;
-  --photo-height--poster: 500px;
-  --col-primary: #82baff;
-  --grey-light: hsl(0, 0%, 71%);
-}
-
-html {
-    /* Bulma default force scrollbar, we don't want this */
-    overflow-y: auto;
-}
-
-body.body--fullscreen {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-    width: 100vw;
-    overflow: hidden;
-}
-
+html, body {
 
-input[type="search"]::-webkit-search-cancel-button {
-    /* We disable cancel button on webkit based browser for consistency, as we add our */
-    /* own when necessary */
-  display: none;
-}
-
-
-.is-full-below-menu {
-    /* full viewport minus top menu height */
-    position:relative;
-    height: calc(100vh - 52px);
-}
-
-.has-whitespace-pre-wrap {
-    white-space: pre-wrap;
-}
-
-.has-whitespace-pre-line {
-    white-space: pre-line;
-}
-
-.has-decoration-line-through {
-    text-decoration: line-through;
-}
-
-.is-avatar {
-    height: 64px;
-    width: 64px;
-    border-radius: 50%;
-    border: 1px solid #bbb;
-    background-color: #eee;
+    height: 100%;
     overflow: hidden;
 }
 
-.is-video-thumbnail-wrapper {
-    background-color: black;
-}
-
-.is-video-thumbnail-wrapper, .is-video-thumbnail {
-    height: 100%;
-    width: 100%;
-}
-
-
-.is-photo-thumbnail {
-    max-height: var(--photo-height);
-    max-width: 100%;
-}
-
-.is-photo-thumbnail-container {
-    height: var(--photo-height);
-
-}
-
-.is-top-right {
-    /* position element on top right corner, outside document flow (abolute positioning)
-     * useful for delete icon
-     */
-    position: absolute;
-    top: 0.25rem;
-    right: 0.25rem;
-}
-
-.is-top-left {
-    position: absolute;
-    top: 0.25em;
-    left: 0.25em;
-}
-
-.has-items-centered {
-    align-items: center;
-    justify-content: center;
-}
-
-.is-poster {
-    height: var(--photo-height--poster) !important;
-}
-
-.is-poster>.is-photo-thumbnail {
-    max-height: var(--photo-height--poster) !important;
-}
-
-.has-items-vcentered {
-    align-items: center;
-}
-
-.is-valign-middle {
-    vertical-align: middle;
-}
-
-.x-is-hoverable:hover {
-    background-color: #eee !important;
-}
-
-.x-is-hoverable-primary:hover {
-    background-color: var(--col-primary) !important;
-    border-radius: 50%;
-    box-shadow: 0px 0px 0 0.25rem var(--col-primary);
-}
-
-.media.is-chat-message {
-    margin: 0.5rem 0 0;
-    padding: 0;
-    border: 0;
-}
-
-.is-text-content {
-    white-space: break-spaces;
-}
-
-
-a.is-wrapping {
-    line-height: 0;
-}
-
-.has-no-background {
-    box-shadow: none !important;
-    background-color: initial !important;
-}
-
-.pagination-disabled {
-    background-color: white;
-    border-color: #dbdbdb;
-    color: #b5b5b5;
-    cursor: auto;
-}
-
-.pagination-disabled:hover {
-    background-color: white;
-    border-color: #dbdbdb;
-    color: #b5b5b5;
-}
-
-.has-text-shortenable {
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.has-border-dashed {
-    border-style: dashed;
-}
-
-.has-border-grey-light {
-    border-color: var(--grey-light);
-}
-
-.has-justify-start {
-    justify-content: start;
-}
-
-.has-width-7 {
-    width: 7em;
-}
-
-.media-content {
-    min-width: 15em;
-}
-
-.column {
-    max-width: 100%;
-}
-
-:not(div.highlight>pre)>code {
-    border: 1px solid #DDD;
-    color: initial;
-    background-color: unset;
-    padding: 0.05em 0.25em 0.05em;
-}
-
-/**************
- * selections *
- **************/
-
-.is-selected-search_item {
-    border: solid 2px #3273dc;
-    background-color: #eff3fa;
-    transform: scale(1.03);
-    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-}
-
-.is-not-selectable {
-    user-select: none;
-}
-
-.selected_for_action {
-    outline: solid var(--col-primary) 0.25rem;
-}
-
-.selected_for_deletion {
-    outline: solid red 0.25rem;
-}
-
-/**************
- * JID Search *
- **************/
-
-.search-item__group-tags {
-    /* we want the item with no group to have the same height as an item with one */
-    min-height: 40px;
-}
-
-/***************
- * misc states *
- ***************/
-
-.state_deleted {
-    opacity: 0;
-    transform: scale(0);
-    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
-}
-
-/**********
- * editor *
- **********/
-
-.tag_input {
-    flex-grow: 1;
-    margin-bottom: 0.5rem;
-    width: auto;
+.navbar-item {
+    gap: 0;
 }
 
 
-/***********
- * dialogs *
- ***********/
-
-.modal-dialog {
-    transform: scaleY(0);
-}
-
-div.state_appended .modal-dialog, div.main_notification.state_appended {
-    transform: scaleY(1);
-    transition: transform 0.15s ease-in;
-}
-
-div.main_notification.state_closing {
-    transform: scaleY(0);
-}
-
-.main_notification {
-    position: fixed;
-    top: 2rem;
-    left: 0;
-    right: 0;
-    z-index: 10000;
-    transform: scaleY(0);
-    transition: transform 0.15s ease-in;
-}
-
-div.main_notification>div.column {
-    display: flex;
-    max-width: 95%;
-}
-div.main_notification>div.column>div.notification {
-    max-width: 80rem;
-}
-
-.click_to_close {
-    cursor: pointer;
-}
-
-div.search_dialog.is-active>div.dropdown-menu {
-    display: none;
-}
-
-div.search_dialog.open>div.dropdown-menu {
-    display: block;
-}
-
-div.dropdown-item.selected {
-    background-color: var(--col-primary);
-}
-
-/**********
- * panels *
- **********/
-
-.panel_wrapper {
-    position: absolute;
-    top: 0;
-    right: 0;
-    height: 100vh;
-    width: 100vw;
-    z-index: 150;
-}
-
-.comments_side_panel, .invitation_manager_side_panel {
-    position: absolute;
-    top: 0;
-    right: 0;
-    height: 100vh;
-    width: 0;
-    max-width: 80%;
-    z-index: 200;
-    background: white;
-    transition: width 0.3s ease-out;
-    overflow: auto;
-    color: black;
-}
-
-.comments_side_panel.open, .invitation_manager_side_panel.open {
-    width: 55rem;
-    transition: width 0.3s ease-out;
-}
-
-/*********
- * embed *
- *********/
-
-.embed {
-    width: 100%;
-    height: 100%;
-}
-
-/****************
- * media player *
- ****************/
-
-div.media_player>div.media_elt,
-div.media_player>div.media_elt>ogvjs,
-div.media_player>div.media_elt>video {
-    width: 100%;
-    height: 100%;
-}
-
-/* div.media_player:fullscreen>div.media_elt, */
-/* div.media_player:fullscreen>div.media_elt>ogvjs, */
-/* div.media_player:fullscreen>div.media_elt>video */
-/* { */
-/*     height: 100%; */
-/* } */
-
-div.media_player {
-    position: relative;
-    background-color: black;
-}
-
-div.media_overlay_play {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
-
-div.media_overlay_play>.icon {
-    height: 12rem;
-    width: 12rem;
-    font-size: 10rem;
-    color: #eee;
-}
-
-div.media_player.in_use>div.media_overlay_play {
-    display: none !important;
-}
-
-div.media_player .media_pause, div.media_player .media_sound_off,
-div.media_player .media_resize_small {
-    display: none;
-}
-
-div.media_player.playing .media_pause {
-    display: inline-block;
-}
-
-div.media_player.playing .media_play {
-    display: none;
-}
-
-div.media_player.muted .media_sound_off {
-    display: inline-block;
-}
-
-div.media_player.muted .media_sound_on {
-    display: none;
-}
-
-div.media_player:fullscreen .media_resize_small {
-    display: inline-block;
-}
-
-div.media_player:fullscreen .media_resize_full {
-    display: none;
-}
-
-div.media_controls {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    margin: 0;
-    background-color: #000A;
-    color: #eee;
-    z-index: 150;
-}
-
-div.media_controls progress {
-    cursor: pointer;
-}
-
-div.media_player.playing:hover>.media_controls,
-div.media_player.playing>.media_controls.hidden:hover
-{
-    opacity: 1;
-    transition: opacity 0.5s;
-}
-
-div.media_player.playing>.media_controls,
-div.media_player.playing>.media_controls.hidden {
-    opacity: 0;
-    transition: opacity 2s;
-}
-
-div.media_player .media_controls .icon:hover {
-    background-color: #777;
-    cursor: pointer;
-}
-
-div.media_player .timer {
-    cursor: pointer;
-    width: 5em;
-    text-align: center;
-}
-
-div.media_player.no_fullscreen>div.media_controls>div.click_to_fullscreen {
-    display: none;
-}
-
-
-/*************
- * slideshow *
- *************/
-
-.slideshow {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color: black;
-    color: white;
-    z-index: 100;
-    overflow: hidden;
-}
-
-div.slideshow>button.delete {
-    z-index: 100;
-    background-color: var(--grey-light);
-    position: absolute;
-    top: 1rem;
-    right: 2rem;
-}
-
-div.slideshow>div.click_to_comment {
-    z-index: 100;
-    position: absolute;
-    right: 1.7rem;
-    bottom: 3rem;
-    cursor: pointer;
-}
-
-div.slideshow>div.comments__count {
-    z-index: 100;
-    position: absolute;
-    right: 1.7rem;
-    bottom: 0.5rem;
-    font-weight: bold;
-}
-
-.swiper-slide {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.swiper-container {
-    height: 100%;
-    width: 100%;
-}
-
-.swiper-button-prev {
-    left: 2.1rem !important;
-    color: #f1f1f1 !important;
-    z-index: 150;
-}
-
-.swiper-button-next {
-    right: 2.1rem !important;
-    color: #f1f1f1 !important;
-    z-index: 150;
-}
-
-.slide_img {
-    max-height: 100%;
-    max-width: 100%;
-}
-
-.slide_video {
-    height: 100%;
-    width: 100%;
-}
-
-div.slideshow.flag_no_pagination>div.swiper-container>div.swiper-pagination {
-    display: none;
+.menu-item {
+    padding-top: 0.225em;
 }
-
-div.slideshow.flag_no_scrollbar>div.swiper-container>div.swiper-scrollbar {
-    display: none;
-}
-
-
-/***************
- * progression *
- ***************/
-
-.progress_started img {
-    filter: grayscale(100%);
-}
-
-.progress_finished img {
-    filter: grayscale(0%);
-    transition: filter 1.5s ease-out;
-}
-
-.progress_finished progress {
-    height: 0;
-    opacity: 0;
-    transition: all 1.5s ease-out;
-}
-
-.progress {
-    transition: width 5s ease;
-}
-
-
-/**********
- * drawer *
- **********/
-
-
-.panel-drawer {
-    /* A panel which is hidden by default but can be
-       opened when it's clicked */
-    max-height: 0;
-    opacity: 0;
-    overflow: hidden;
-    transition: max-height 0.5s, opacity 0.5s;
-}
-
-.panel-drawer.state_clicked {
-    opacity: 1;
-}
-
-/********
- * code *
- ********/
-
-.highlight {
-    overflow: auto;
-}
-
-/**********
- * blocks *
- **********/
-
-.block_separator {
-    font-size: 1.4em;
-    display: flex;
-    margin: 1rem 0;
-}
-
-.block_separator__label {
-    display: inline-block;
-    margin: 0 0.2em;
-}
-
-.block_separator__line {
-    height: 1px;
-    background: #ccc;
-    flex: 1;
-    margin-top: 0.7em;
-}
-
-/********
- * tabs *
- ********/
-
-#tab_guests {
-    overflow: auto;
-}
-
-.tab__page {
-    display: None;
-}
-
-.tab__page.state_clicked {
-    display: block;
-}
-
-/*********
- * icons *
- *********/
-
-.svg-icon {
-    fill: currentColor;
-}
-
-.icon_animate_spin {
-  animation: spin 2s infinite linear;
-  display: inline-block;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-
-  100% {
-    transform: rotate(359deg);
-  }
-}
-
-/*******************
- * common features *
- ******************/
-
-.reaction {
-    border-radius: 12px; /* Rounded background */
-    cursor: pointer; /* Pointer cursor for the entire reaction */
-    border: 1px solid #dbdbdb; /* Discreet but visible border */
-}
-
-.reaction .emoji {
-    margin-right: .5rem; /* Space between emoji and counter using rem unit */
-}
-
-.own-reaction {
-    border-color: #3273dc;
-}
-
-/**************
- * animations *
- *************/
-
-/* Fade In */
-
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
-.fade-in {
-  animation: fade-in 0.5s ease-in forwards;
-}
-
-@keyframes fade-in-x {
-  0% {
-    opacity: 0;
-    transform: scaleX(0);
-  }
-  100% {
-    opacity: 1;
-    transform: scaleX(1);
-  }
-}
-
-.fade-in-x {
-  animation: fade-in-x 0.5s ease-in forwards;
-}
-
-@keyframes fade-in-y {
-  0% {
-    opacity: 0;
-    transform: scaleY(0);
-  }
-  100% {
-    opacity: 1;
-    transform: scaleY(1);
-  }
-}
-
-.fade-in-y {
-  animation: fade-in-y 0.5s ease-in forwards;
-}
-
-@keyframes fade-in-xy {
-  0% {
-    opacity: 0;
-    transform: scale(0);
-  }
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-.fade-in-xy {
-  animation: fade-in-xy 0.5s ease-in forwards;
-}
-
-/* Fade Out */
-
-@keyframes fade-out {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
-
-.fade-out {
-  animation: fade-out 0.5s ease-in forwards;
-}
-
-@keyframes fade-out-x {
-  0% {
-    opacity: 1;
-    transform: scaleX(1);
-  }
-  100% {
-    opacity: 0;
-    transform: scaleX(0);
-  }
-}
-
-.fade-out-x {
-  animation: fade-out-x 0.5s ease-in forwards;
-}
-
-@keyframes fade-out-y {
-  0% {
-    opacity: 1;
-    transform: scaleY(1);
-  }
-  100% {
-    opacity: 0;
-    transform: scaleY(0);
-  }
-}
-
-.fade-out-y {
-  animation: fade-out-y 0.5s ease-in forwards;
-}
-
-@keyframes fade-out-xy {
-  0% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  100% {
-    opacity: 0;
-    transform: scale(0);
-  }
-}
-
-.fade-out-xy {
-  animation: fade-out-xy 0.5s ease-in forwards;
-}
-
-/* Slide In */
-@keyframes slide-in {
-  0% {
-    transform: translateY(100%);
-    opacity: 0;
-  }
-  100% {
-    transform: translateY(0);
-    opacity: 1;
-  }
-}
-
-.slide-in {
-  animation: slide-in 0.5s ease-in-out forwards;
-}
-
-.animation-reverse {
-  animation-direction: reverse;
-}
-
-/***************
- * third party *
- **************/
-
-emoji-picker {
-  width: 100%;
-  /* height: 30rem; */
-}