Mercurial > libervia-templates

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

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
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
comparison
equal deleted inserted replaced
251:80cfec962b1e 252:a0e889d73bad
130 div.state_appended .modal-content { 130 div.state_appended .modal-content {
131 transform: scaleY(1); 131 transform: scaleY(1);
132 transition: transform 0.15s ease-in; 132 transition: transform 0.15s ease-in;
133 } 133 }
134 134
135 .click_to_close {
136 cursor: pointer;
137 }
138
139 /**********
140 * panels *
141 **********/
142
143 .panel_wrapper {
144 position: absolute;
145 top: 0;
146 right: 0;
147 height: 100vh;
148 width: 100vw;
149 z-index: 150;
150 }
151
152 .comments_side_panel {
153 position: absolute;
154 top: 0;
155 right: 0;
156 height: 100vh;
157 width: 0;
158 max-width: 80%;
159 z-index: 200;
160 background: white;
161 transition: width 0.3s ease-out;
162 }
163
164 .comments_side_panel.open {
165 width: 55rem;
166 transition: width 0.3s ease-out;
167 }
168
169 /*************
170 * slideshow *
171 *************/
172
173 .slideshow {
174 position: absolute;
175 top: 0;
176 left: 0;
177 width: 100vw;
178 height: 100vh;
179 background-color: black;
180 color: white;
181 z-index: 100;
182 /* color: white; */
183 }
184
185 div.slideshow>button.delete {
186 z-index: 100;
187 background-color: var(--grey-light);
188 position: absolute;
189 top: 1rem;
190 right: 2rem;
191 }
192
193 div.slideshow>div.click_to_comment {
194 z-index: 100;
195 position: absolute;
196 right: 1.7rem;
197 bottom: 2rem;
198 cursor: pointer;
199 }
200
201 div.slideshow>div.comments__count {
202 z-index: 100;
203 position: absolute;
204 right: 1.7rem;
205 bottom: 0.5rem;
206 font-weight: bold;
207 }
208
209 .swiper-slide {
210 display: flex;
211 align-items: center;
212 justify-content: center;
213 }
214
215 .swiper-container {
216 height: 100%;
217 width: 100%;
218 }
219
220 .swiper-button-prev {
221 left: 2.1rem !important;
222 color: #f1f1f1 !important;
223 }
224
225 .swiper-button-next {
226 right: 2.1rem !important;
227 color: #f1f1f1 !important;
228 }
229
230 .slide_img {
231 max-height: 100%;
232 max-width: 100%;
233 }
135 234
136 /*************** 235 /***************
137 * progression * 236 * progression *
138 ***************/ 237 ***************/
139 238