PluginProbe
Automatic YouTube Gallery – Embed Auto-Updating YouTube Video Galleries, Feeds, Playlists & Channels / 2.3.8
Automatic YouTube Gallery – Embed Auto-Updating YouTube Video Galleries, Feeds, Playlists & Channels v2.3.8
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.8, at public/assets/css/public.css

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