Mercurial > libervia-templates
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 *