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

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