1 | .p-galleria-content {
|
---|
2 | display: flex;
|
---|
3 | flex-direction: column;
|
---|
4 | }
|
---|
5 |
|
---|
6 | .p-galleria-item-wrapper {
|
---|
7 | display: flex;
|
---|
8 | flex-direction: column;
|
---|
9 | position: relative;
|
---|
10 | }
|
---|
11 |
|
---|
12 | .p-galleria-item-container {
|
---|
13 | position: relative;
|
---|
14 | display: flex;
|
---|
15 | height: 100%;
|
---|
16 | }
|
---|
17 |
|
---|
18 | .p-galleria-item-nav {
|
---|
19 | position: absolute;
|
---|
20 | top: 50%;
|
---|
21 | margin-top: -.5rem;
|
---|
22 | display: inline-flex;
|
---|
23 | justify-content: center;
|
---|
24 | align-items: center;
|
---|
25 | overflow: hidden;
|
---|
26 | }
|
---|
27 |
|
---|
28 | .p-galleria-item-prev {
|
---|
29 | left: 0;
|
---|
30 | border-top-left-radius: 0;
|
---|
31 | border-bottom-left-radius: 0;
|
---|
32 | }
|
---|
33 |
|
---|
34 | .p-galleria-item-next {
|
---|
35 | right: 0;
|
---|
36 | border-top-right-radius: 0;
|
---|
37 | border-bottom-right-radius: 0;
|
---|
38 | }
|
---|
39 |
|
---|
40 | .p-galleria-item {
|
---|
41 | display: flex;
|
---|
42 | justify-content: center;
|
---|
43 | align-items: center;
|
---|
44 | height: 100%;
|
---|
45 | width: 100%;
|
---|
46 | }
|
---|
47 |
|
---|
48 | .p-galleria-item-nav-onhover .p-galleria-item-nav {
|
---|
49 | pointer-events: none;
|
---|
50 | opacity: 0;
|
---|
51 | transition: opacity .2s ease-in-out;
|
---|
52 | }
|
---|
53 |
|
---|
54 | .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav {
|
---|
55 | pointer-events: all;
|
---|
56 | opacity: 1;
|
---|
57 | }
|
---|
58 |
|
---|
59 | .p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled {
|
---|
60 | pointer-events: none;
|
---|
61 | }
|
---|
62 |
|
---|
63 | .p-galleria-caption {
|
---|
64 | position: absolute;
|
---|
65 | bottom: 0;
|
---|
66 | left: 0;
|
---|
67 | width: 100%;
|
---|
68 | }
|
---|
69 |
|
---|
70 | /* Thumbnails */
|
---|
71 | .p-galleria-thumbnail-wrapper {
|
---|
72 | display: flex;
|
---|
73 | flex-direction: column;
|
---|
74 | overflow: auto;
|
---|
75 | flex-shrink: 0;
|
---|
76 | }
|
---|
77 |
|
---|
78 | .p-galleria-thumbnail-prev,
|
---|
79 | .p-galleria-thumbnail-next {
|
---|
80 | align-self: center;
|
---|
81 | flex: 0 0 auto;
|
---|
82 | display: flex;
|
---|
83 | justify-content: center;
|
---|
84 | align-items: center;
|
---|
85 | overflow: hidden;
|
---|
86 | position: relative;
|
---|
87 | }
|
---|
88 |
|
---|
89 | .p-galleria-thumbnail-prev span,
|
---|
90 | .p-galleria-thumbnail-next span {
|
---|
91 | display: flex;
|
---|
92 | justify-content: center;
|
---|
93 | align-items: center;
|
---|
94 | }
|
---|
95 |
|
---|
96 | .p-galleria-thumbnail-container {
|
---|
97 | display: flex;
|
---|
98 | flex-direction: row;
|
---|
99 | }
|
---|
100 |
|
---|
101 | .p-galleria-thumbnail-items-container {
|
---|
102 | overflow: hidden;
|
---|
103 | width: 100%;
|
---|
104 | }
|
---|
105 |
|
---|
106 | .p-galleria-thumbnail-items {
|
---|
107 | display: flex;
|
---|
108 | }
|
---|
109 |
|
---|
110 | .p-galleria-thumbnail-item {
|
---|
111 | overflow: auto;
|
---|
112 | display: flex;
|
---|
113 | align-items: center;
|
---|
114 | justify-content: center;
|
---|
115 | cursor: pointer;
|
---|
116 | opacity: .5;
|
---|
117 | }
|
---|
118 |
|
---|
119 | .p-galleria-thumbnail-item:hover {
|
---|
120 | opacity: 1;
|
---|
121 | transition: opacity .3s;
|
---|
122 | }
|
---|
123 |
|
---|
124 | .p-galleria-thumbnail-item-current {
|
---|
125 | opacity: 1;
|
---|
126 | }
|
---|
127 |
|
---|
128 | /* Positions */
|
---|
129 | /* Thumbnails */
|
---|
130 | .p-galleria-thumbnails-left .p-galleria-content,
|
---|
131 | .p-galleria-thumbnails-right .p-galleria-content {
|
---|
132 | flex-direction: row;
|
---|
133 | }
|
---|
134 |
|
---|
135 | .p-galleria-thumbnails-left .p-galleria-item-wrapper,
|
---|
136 | .p-galleria-thumbnails-right .p-galleria-item-wrapper {
|
---|
137 | flex-direction: row;
|
---|
138 | }
|
---|
139 |
|
---|
140 | .p-galleria-thumbnails-left p-galleriaitem,
|
---|
141 | .p-galleria-thumbnails-top p-galleriaitem {
|
---|
142 | order: 2;
|
---|
143 | }
|
---|
144 |
|
---|
145 | .p-galleria-thumbnails-left p-galleriathumbnails,
|
---|
146 | .p-galleria-thumbnails-top p-galleriathumbnails {
|
---|
147 | order: 1;
|
---|
148 | }
|
---|
149 |
|
---|
150 | .p-galleria-thumbnails-left .p-galleria-thumbnail-container,
|
---|
151 | .p-galleria-thumbnails-right .p-galleria-thumbnail-container {
|
---|
152 | flex-direction: column;
|
---|
153 | flex-grow: 1;
|
---|
154 | }
|
---|
155 |
|
---|
156 | .p-galleria-thumbnails-left .p-galleria-thumbnail-items,
|
---|
157 | .p-galleria-thumbnails-right .p-galleria-thumbnail-items {
|
---|
158 | flex-direction: column;
|
---|
159 | height: 100%;
|
---|
160 | }
|
---|
161 | .p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper,
|
---|
162 | .p-galleria-thumbnails-right .p-galleria-thumbnail-wrapper {
|
---|
163 | height: 100%;
|
---|
164 | }
|
---|
165 |
|
---|
166 | /* Indicators */
|
---|
167 | .p-galleria-indicators {
|
---|
168 | display: flex;
|
---|
169 | align-items: center;
|
---|
170 | justify-content: center;
|
---|
171 | }
|
---|
172 |
|
---|
173 | .p-galleria-indicator > button {
|
---|
174 | display: inline-flex;
|
---|
175 | align-items: center;
|
---|
176 | }
|
---|
177 |
|
---|
178 | .p-galleria-indicators-left .p-galleria-item-wrapper,
|
---|
179 | .p-galleria-indicators-right .p-galleria-item-wrapper {
|
---|
180 | flex-direction: row;
|
---|
181 | align-items: center;
|
---|
182 | }
|
---|
183 |
|
---|
184 | .p-galleria-indicators-left .p-galleria-item-container,
|
---|
185 | .p-galleria-indicators-top .p-galleria-item-container {
|
---|
186 | order: 2;
|
---|
187 | }
|
---|
188 |
|
---|
189 | .p-galleria-indicators-left .p-galleria-indicators,
|
---|
190 | .p-galleria-indicators-top .p-galleria-indicators {
|
---|
191 | order: 1;
|
---|
192 | }
|
---|
193 |
|
---|
194 | .p-galleria-indicators-left .p-galleria-indicators,
|
---|
195 | .p-galleria-indicators-right .p-galleria-indicators {
|
---|
196 | flex-direction: column;
|
---|
197 | }
|
---|
198 |
|
---|
199 | .p-galleria-indicator-onitem .p-galleria-indicators {
|
---|
200 | position: absolute;
|
---|
201 | display: flex;
|
---|
202 | z-index: 1;
|
---|
203 | }
|
---|
204 |
|
---|
205 | .p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators {
|
---|
206 | top: 0;
|
---|
207 | left: 0;
|
---|
208 | width: 100%;
|
---|
209 | align-items: flex-start;
|
---|
210 | }
|
---|
211 |
|
---|
212 | .p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators {
|
---|
213 | right: 0;
|
---|
214 | top: 0;
|
---|
215 | height: 100%;
|
---|
216 | align-items: flex-end;
|
---|
217 | }
|
---|
218 |
|
---|
219 | .p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators {
|
---|
220 | bottom: 0;
|
---|
221 | left: 0;
|
---|
222 | width: 100%;
|
---|
223 | align-items: flex-end;
|
---|
224 | }
|
---|
225 |
|
---|
226 | .p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators {
|
---|
227 | left: 0;
|
---|
228 | top: 0;
|
---|
229 | height: 100%;
|
---|
230 | align-items: flex-start;
|
---|
231 | }
|
---|
232 |
|
---|
233 | /* FullScreen */
|
---|
234 | .p-galleria-mask {
|
---|
235 | position: fixed;
|
---|
236 | top: 0;
|
---|
237 | left: 0;
|
---|
238 | width: 100%;
|
---|
239 | height: 100%;
|
---|
240 | display: flex;
|
---|
241 | align-items: center;
|
---|
242 | justify-content: center;
|
---|
243 | background-color: transparent;
|
---|
244 | transition-property: background-color;
|
---|
245 | }
|
---|
246 |
|
---|
247 | .p-galleria-close {
|
---|
248 | position: absolute;
|
---|
249 | top: 0;
|
---|
250 | right: 0;
|
---|
251 | display: flex;
|
---|
252 | justify-content: center;
|
---|
253 | align-items: center;
|
---|
254 | overflow: hidden;
|
---|
255 | }
|
---|
256 |
|
---|
257 | .p-galleria-mask .p-galleria-item-nav {
|
---|
258 | position: fixed;
|
---|
259 | top: 50%;
|
---|
260 | margin-top: -.5rem;
|
---|
261 | }
|
---|
262 |
|
---|
263 | .p-galleria-mask.p-galleria-mask-leave {
|
---|
264 | background-color: transparent;
|
---|
265 | }
|
---|
266 |
|
---|
267 | /* Keyboard Support */
|
---|
268 | .p-items-hidden .p-galleria-thumbnail-item {
|
---|
269 | visibility: hidden;
|
---|
270 | }
|
---|
271 |
|
---|
272 | .p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {
|
---|
273 | visibility: visible;
|
---|
274 | }
|
---|