changeset 286:f8026bf77a4c

bulma (CSS): updated classed to handle native video player + video in slideshow
author Goffi <goffi@goffi.org>
date Tue, 25 Aug 2020 08:49:32 +0200
parents 2ed424742e72
children 7670752665e0
files sat_templates/templates/bulma/static/styles.css
diffstat 1 files changed, 74 insertions(+), 24 deletions(-) [+]
line wrap: on
line diff
--- a/sat_templates/templates/bulma/static/styles.css	Tue Aug 25 08:48:22 2020 +0200
+++ b/sat_templates/templates/bulma/static/styles.css	Tue Aug 25 08:49:32 2020 +0200
@@ -18,6 +18,16 @@
     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%;
@@ -25,6 +35,7 @@
 
 .is-photo-thumbnail-container {
     height: var(--photo-height);
+
 }
 
 .has-items-centered {
@@ -108,6 +119,10 @@
     user-select: none;
 }
 
+.selected_for_action {
+    outline: solid var(--col-primary) 0.25rem;
+}
+
 .selected_for_deletion {
     outline: solid red 0.25rem;
 }
@@ -207,23 +222,29 @@
 }
 
 /****************
- * video player *
+ * media player *
  ****************/
 
-div.video_player>div.video_elt, div.video_player>div.video_elt>ogvjs {
+div.media_player>div.media_elt,
+div.media_player>div.media_elt>ogvjs,
+div.media_player>div.media_elt>video {
     width: 100%;
-}
-
-div.video_player:fullscreen>div.video_elt, div.video_player:fullscreen>div.video_elt>ogvjs {
     height: 100%;
 }
 
-div.video_player {
+/* 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.video_player>div.video_overlay_play {
+div.media_overlay_play {
     position: absolute;
     top: 0;
     left: 0;
@@ -231,43 +252,47 @@
     height: 100%;
 }
 
-div.video_player>div.video_overlay_play>.icon {
+div.media_overlay_play>.icon {
     height: 12rem;
     width: 12rem;
     font-size: 10rem;
     color: #eee;
 }
 
-div.video_player .video_pause, div.video_player .video_sound_off,
-div.video_player .video_resize_small {
+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.video_player.playing .video_pause {
+div.media_player.playing .media_pause {
     display: inline-block;
 }
 
-div.video_player.playing .video_play {
+div.media_player.playing .media_play {
     display: none;
 }
 
-div.video_player.muted .video_sound_off {
+div.media_player.muted .media_sound_off {
     display: inline-block;
 }
 
-div.video_player.muted .video_sound_on {
+div.media_player.muted .media_sound_on {
     display: none;
 }
 
-div.video_player:fullscreen .video_resize_small {
+div.media_player:fullscreen .media_resize_small {
     display: inline-block;
 }
 
-div.video_player:fullscreen .video_resize_full {
+div.media_player:fullscreen .media_resize_full {
     display: none;
 }
 
-div.video_controls {
+div.media_controls {
     position: absolute;
     bottom: 0;
     left: 0;
@@ -275,32 +300,41 @@
     margin: 0;
     background-color: #000A;
     color: #eee;
+    z-index: 150;
 }
 
-div.video_player.playing:hover>.video_controls,
-div.video_player.playing>.video_controls.hidden:hover
+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.video_player.playing>.video_controls,
-div.video_player.playing>.video_controls.hidden {
+div.media_player.playing>.media_controls,
+div.media_player.playing>.media_controls.hidden {
     opacity: 0;
     transition: opacity 2s;
 }
 
-div.video_player .video_controls .icon:hover {
+div.media_player .media_controls .icon:hover {
     background-color: #777;
     cursor: pointer;
 }
 
-div.video_player .timer {
+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 *
@@ -330,7 +364,7 @@
     z-index: 100;
     position: absolute;
     right: 1.7rem;
-    bottom: 2rem;
+    bottom: 3rem;
     cursor: pointer;
 }
 
@@ -356,11 +390,13 @@
 .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 {
@@ -368,6 +404,20 @@
     max-width: 100%;
 }
 
+.slide_video {
+    height: 100%;
+    width: 100%;
+}
+
+div.slideshow.flag_no_pagination>div.swiper-container>div.swiper-pagination {
+    display: none;
+}
+
+div.slideshow.flag_no_scrollbar>div.swiper-container>div.swiper-scrollbar {
+    display: none;
+}
+
+
 /***************
  * progression *
  ***************/