PluginProbe
Automatic YouTube Gallery – Embed Auto-Updating YouTube Video Galleries, Feeds, Playlists & Channels / 2.3.2
Automatic YouTube Gallery – Embed Auto-Updating YouTube Video Galleries, Feeds, Playlists & Channels v2.3.2
2.9.1 2.9.0 trunk 1.0.0 1.1.0 1.2.0 1.3.0 1.4.0 1.5.0 1.6.0 1.6.1 1.6.2 1.6.3 1.6.4 1.6.5 2.0.0 2.1.0 2.2.0 2.3.2 2.3.3 2.3.5 2.3.6 2.3.8 2.3.9 2.4.3 All 37 releases
automatic-youtube-gallery / public / assets / css / public.css

public.css in Automatic YouTube Gallery – Embed Auto-Updating YouTube Video Galleries, Feeds, Playlists & Channels 2.3.2, at public/assets/css/public.css

268 lines 5.2 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 /*----------------------------------------------------------------------------------------------
2 *
3 * Global
4 *
5 *--------------------------------------------------------------------------------------------*/
6 .ayg-btn {
7 margin: 1px;
8 padding: 5px 10px;
9 background: #08c;
10 border-radius: 2px;
11 color: #fff;
12 line-height: 1;
13 cursor: pointer;
14 }
15
16 .ayg-btn:hover,
17 .ayg-btn:focus {
18 background: #333;
19 color: #fff;
20 }
21
22 /*----------------------------------------------------------------------------------------------
23 *
24 * Player
25 *
26 *--------------------------------------------------------------------------------------------*/
27 .ayg-player-wrapper {
28 position: relative;
29 width: 100%;
30 height: 0;
31 padding-bottom: 56.25%;
32 }
33
34 .ayg-player-wrapper .fluid-width-video-wrapper {
35 position: static !important;
36 }
37
38 .ayg-player-iframe {
39 position: absolute;
40 width: 100%;
41 height: 100%;
42 top: 0;
43 left: 0;
44 }
45
46 .ayg-player-caption,
47 .ayg-player-title,
48 .ayg-player-description {
49 margin: 0 !important;
50 padding: 7px 0;
51 }
52
53 .ayg-player-description-more {
54 display: none;
55 }
56
57 .ayg-player-description-toggle-btn {
58 display: block;
59 margin: 10px 0;
60 font-weight: bold;
61 }
62
63 .ayg-privacy-wrapper {
64 position: absolute;
65 width: 100%;
66 height: 100%;
67 margin: 0;
68 padding: 0;
69 top: 0;
70 right: 0;
71 bottom: 0;
72 left: 0;
73 background-color: #222;
74 background-size: cover;
75 background-position: center;
76 background-repeat: no-repeat;
77 color: #FFF;
78 text-align: center;
79 }
80
81 .ayg-privacy-consent-block {
82 position: relative;
83 margin: 0 30px;
84 padding: 15px;
85 top: 50%;
86 background: #000;
87 border-radius: 3px;
88 opacity: 0.9;
89 transform: translateY( -50% );
90 -ms-transform: translateY(- 50% );
91 -webkit-transform: translateY( -50% );
92 }
93
94 .ayg-privacy-consent-button {
95 display: inline-block;
96 margin-top: 10px;
97 padding: 5px 15px;
98 background: #08C;
99 border-radius: 3px;
100 cursor: pointer;
101 }
102
103 .ayg-privacy-consent-button:hover {
104 opacity: 0.8;
105 }
106
107 /*----------------------------------------------------------------------------------------------
108 *
109 * Responsive Grid
110 *
111 *--------------------------------------------------------------------------------------------*/
112 .ayg-row {
113 display: -webkit-flex; /* Safari */
114 -webkit-flex-wrap: wrap; /* Safari 6.1+ */
115 display: flex;
116 flex-wrap: wrap;
117 margin: 0 -15px;
118 }
119
120 .ayg-col {
121 width: 100%;
122 }
123
124 @media only screen and (min-width: 480px) {
125 .ayg-col-2 {
126 width: 50%;
127 }
128
129 .ayg-col-3 {
130 width: 33.33%;
131 }
132
133 .ayg-col-4 {
134 width: 25%;
135 }
136
137 .ayg-col-5 {
138 width: 20%;
139 }
140
141 .ayg-col-6 {
142 width: 16.66%;
143 }
144
145 .ayg-col-7 {
146 width: 14.28%;
147 }
148
149 .ayg-col-8 {
150 width: 12.5%;
151 }
152
153 .ayg-col-9 {
154 width: 11.11%;
155 }
156
157 .ayg-col-10 {
158 width: 10%;
159 }
160
161 .ayg-col-11 {
162 width: 9.09%;
163 }
164
165 .ayg-col-12 {
166 width: 8.33%;
167 }
168 }
169
170 /*----------------------------------------------------------------------------------------------
171 *
172 * Thumbnail
173 *
174 *--------------------------------------------------------------------------------------------*/
175 .ayg-thumbnail {
176 padding: 15px;
177 cursor: pointer;
178 }
179
180 .ayg-thumbnail-image-wrapper {
181 position: relative;
182 }
183
184 .ayg-thumbnail-image {
185 display: block;
186 width: 100%;
187 height: auto;
188 }
189
190 .ayg-thumbnail .ayg-thumbnail-icon-play {
191 display: inline-block;
192 position: absolute;
193 width: 32px;
194 top: 50%;
195 left: 50%;
196 margin-top: -16px;
197 margin-left: -16px;
198 fill: #fff;
199 stroke: none;
200 stroke-width: 0;
201 vertical-align: middle;
202 pointer-events: none;
203 z-index: 3;
204 }
205
206 .ayg-thumbnail-title,
207 .ayg-thumbnail-excerpt {
208 margin: 10px 0 0 0;
209 padding: 0;
210 }
211
212 .ayg-thumbnail-title {
213 font-weight: bold;
214 }
215
216 .ayg-thumbnail-active {
217 position: absolute;
218 padding: 5px 7px;
219 right: 0;
220 bottom: 0;
221 background: #222;
222 color: #fff;
223 font-size: 12px;
224 line-height: 1;
225 z-index: 1;
226 }
227
228 .ayg-active .ayg-thumbnail-active {
229 display: inline-block !important;
230 }
231
232 /*----------------------------------------------------------------------------------------------
233 *
234 * Pagination
235 *
236 *--------------------------------------------------------------------------------------------*/
237 .ayg-pagination {
238 margin: 15px 0;
239 text-align: center;
240 }
241
242 .ayg-pagination-info {
243 padding: 0 7px;
244 }
245
246 .ayg-pagination.ayg-loading {
247 display: block;
248 width: 100%;
249 height: 32px;
250 background-image: url( '../images/spinner-light.gif' );
251 background-position: center center;
252 background-repeat: no-repeat;
253 }
254
255 .ayg-pagination.ayg-loading .ayg-pagination-prev,
256 .ayg-pagination.ayg-loading .ayg-pagination-info,
257 .ayg-pagination.ayg-loading .ayg-pagination-next {
258 visibility: hidden;
259 }
260
261 /*----------------------------------------------------------------------------------------------
262 *
263 * Theme: Classic
264 *
265 *--------------------------------------------------------------------------------------------*/
266 .ayg-theme-classic .ayg-active {
267 pointer-events: none;
268 }