source: trip-planner-front/node_modules/primeng/resources/components/galleria/galleria.css@ 59329aa

Last change on this file since 59329aa was 59329aa, checked in by Ema <ema_spirova@…>, 3 years ago

adding photos

  • Property mode set to 100644
File size: 5.5 KB
Line 
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}
Note: See TracBrowser for help on using the repository browser.