diff sat_templates/templates/bulma/static/styles.css @ 252:a0e889d73bad

bulma (photo): slideshow CSS + template for slideshow and the comments panel used inside.
author Goffi <goffi@goffi.org>
date Thu, 16 Jul 2020 09:08:34 +0200
parents a841837afe78
children 7397d81dd633
line wrap: on
line diff
--- a/sat_templates/templates/bulma/static/styles.css	Thu Jul 16 09:08:34 2020 +0200
+++ b/sat_templates/templates/bulma/static/styles.css	Thu Jul 16 09:08:34 2020 +0200
@@ -132,6 +132,105 @@
     transition: transform 0.15s ease-in;
 }
 
+.click_to_close {
+    cursor: pointer;
+}
+
+/**********
+ * panels *
+ **********/
+
+.panel_wrapper {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100vh;
+    width: 100vw;
+    z-index: 150;
+}
+
+.comments_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;
+}
+
+.comments_side_panel.open {
+	width: 55rem;
+	transition: width 0.3s ease-out;
+}
+
+/*************
+ * slideshow *
+ *************/
+
+.slideshow {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: black;
+    color: white;
+    z-index: 100;
+    /* color: white; */
+}
+
+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: 2rem;
+    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;
+}
+
+.swiper-button-next {
+	right: 2.1rem !important;
+    color: #f1f1f1 !important;
+}
+
+.slide_img {
+    max-height: 100%;
+    max-width: 100%;
+}
 
 /***************
  * progression *