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

223 lines 4.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-no-scroll {
7 overflow: hidden;
8 }
9
10 .ayg-btn {
11 margin: 1px;
12 padding: 5px 10px;
13 background: #e6e6e6;
14 border-radius: 2px;
15 color: #666;
16 text-transform: uppercase;
17 line-height: 1;
18 cursor: pointer;
19 }
20
21 .ayg-btn:hover,
22 .ayg-btn:focus {
23 background: #333;
24 color: #fff;
25 }
26
27 /*----------------------------------------------------------------------------------------------
28 *
29 * Player
30 *
31 *--------------------------------------------------------------------------------------------*/
32 .ayg-player-wrapper {
33 position: relative;
34 width: 100%;
35 height: 0;
36 padding-bottom: 56.25%;
37 }
38
39 .ayg-player-wrapper .fluid-width-video-wrapper {
40 position: static !important;
41 }
42
43 .ayg-player-iframe {
44 position: absolute;
45 width: 100%;
46 height: 100%;
47 top: 0;
48 left: 0;
49 }
50
51 .ayg-player-caption,
52 .ayg-player-title,
53 .ayg-player-description {
54 margin: 0 !important;
55 padding: 7px 0;
56 }
57
58 .ayg-player-description-more {
59 display: none;
60 }
61
62 .ayg-player-description-more-less-btn {
63 text-decoration: underline;
64 cursor: pointer;
65 }
66
67 .ayg-player-nav {
68 margin: 15px 0;
69 text-align: center;
70 }
71
72 /*----------------------------------------------------------------------------------------------
73 *
74 * Responsive Grid
75 *
76 *--------------------------------------------------------------------------------------------*/
77 .ayg-row {
78 display: -webkit-flex; /* Safari */
79 -webkit-flex-wrap: wrap; /* Safari 6.1+ */
80 display: flex;
81 flex-wrap: wrap;
82 margin: 0 -15px;
83 }
84
85 .ayg-col {
86 width: 100%;
87 }
88
89 @media only screen and (min-width: 480px) {
90 .ayg-col-2 {
91 width: 50%;
92 }
93
94 .ayg-col-3 {
95 width: 33.33%;
96 }
97
98 .ayg-col-4 {
99 width: 25%;
100 }
101
102 .ayg-col-5 {
103 width: 20%;
104 }
105
106 .ayg-col-6 {
107 width: 16.66%;
108 }
109
110 .ayg-col-7 {
111 width: 14.28%;
112 }
113
114 .ayg-col-8 {
115 width: 12.5%;
116 }
117
118 .ayg-col-9 {
119 width: 11.11%;
120 }
121
122 .ayg-col-10 {
123 width: 10%;
124 }
125
126 .ayg-col-11 {
127 width: 9.09%;
128 }
129
130 .ayg-col-12 {
131 width: 8.33%;
132 }
133 }
134
135 /*----------------------------------------------------------------------------------------------
136 *
137 * Thumbnail
138 *
139 *--------------------------------------------------------------------------------------------*/
140 .ayg-thumbnail {
141 padding: 15px;
142 cursor: pointer;
143 }
144
145 .ayg-thumbnail-image-wrapper {
146 position: relative;
147 }
148
149 .ayg-thumbnail-image {
150 display: block;
151 width: 100%;
152 height: auto;
153 }
154
155 .ayg-thumbnail-play-icon {
156 position: absolute;
157 width: 100%;
158 height: 100%;
159 top: 0;
160 left: 0;
161 background-image: url( '../images/play.png' );
162 background-repeat: no-repeat;
163 background-position: center;
164 pointer-events: none;
165 z-index: 2;
166 }
167
168 .ayg-thumbnail-title,
169 .ayg-thumbnail-excerpt {
170 margin: 10px 0 0 0;
171 padding: 0;
172 }
173
174 .ayg-thumbnail-title {
175 font-weight: bold;
176 }
177
178 .ayg-thumbnail-active {
179 position: absolute;
180 padding: 3px 5px;
181 right: 10px;
182 bottom: 10px;
183 background: #28cc28;
184 border-radius: 2px;
185 color: #ffffff;
186 font-size: 12px;
187 line-height: 1;
188 z-index: 1;
189 }
190
191 .ayg-active .ayg-thumbnail-active {
192 display: inline-block !important;
193 }
194
195 /*----------------------------------------------------------------------------------------------
196 *
197 * Pagination
198 *
199 *--------------------------------------------------------------------------------------------*/
200 .ayg-pagination {
201 margin: 15px 0;
202 text-align: center;
203 }
204
205 .ayg-pagination-info {
206 padding: 0 7px;
207 }
208
209 .ayg-pagination.ayg-loading {
210 display: block;
211 width: 100%;
212 height: 20px;
213 background-image: url('../images/spinner.gif');
214 background-position: center center;
215 background-repeat: no-repeat;
216 }
217
218 .ayg-pagination.ayg-loading .ayg-pagination-prev,
219 .ayg-pagination.ayg-loading .ayg-pagination-info,
220 .ayg-pagination.ayg-loading .ayg-pagination-next,
221 .ayg-pagination.ayg-loading .ayg-pagination-more {
222 visibility: hidden;
223 }