| @@ -1,225 +1,122 @@ | ||
| 1 | 1 | /*---------------------------------------------------------------------------------------------- |
| 2 | 2 | * |
| 3 | - * Base | |
| 3 | + * Global | |
| 4 | 4 | * |
| 5 | 5 | *--------------------------------------------------------------------------------------------*/ |
| 6 | -.ayg { | |
| 7 | - box-sizing: border-box; | |
| 8 | - margin-bottom: 1em; | |
| 9 | - line-height: 1.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; | |
| 10 | 15 | } |
| 11 | 16 | |
| 12 | -.ayg *, | |
| 13 | -.ayg *:before, | |
| 14 | -.ayg *:after { | |
| 15 | - box-sizing: inherit; | |
| 17 | +.ayg-btn:hover, | |
| 18 | +.ayg-btn:focus { | |
| 19 | + background: #333; | |
| 20 | + color: #fff; | |
| 16 | 21 | } |
| 17 | 22 | |
| 18 | 23 | /*---------------------------------------------------------------------------------------------- |
| 19 | 24 | * |
| 20 | - * Spinner | |
| 25 | + * Player | |
| 21 | 26 | * |
| 22 | 27 | *--------------------------------------------------------------------------------------------*/ |
| 23 | -@keyframes ayg-wait { | |
| 24 | - 12.5% { | |
| 25 | - background-position-x: -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, 0, 0; | |
| 26 | - } | |
| 27 | - | |
| 28 | - 25% { | |
| 29 | - background-position-x: -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, 0, 0, 6px, 6px; | |
| 30 | - } | |
| 31 | - | |
| 32 | - 37.5% { | |
| 33 | - background-position-x: -4px, -4px, -4px, -4px, -4px, -4px, 0, 0, 6px, 6px, 12px, 12px; | |
| 34 | - } | |
| 35 | - | |
| 36 | - 50% { | |
| 37 | - background-position-x: -4px, -4px, -4px, -4px, 0, 0, 6px, 6px, 12px, 12px, -4px, -4px; | |
| 38 | - } | |
| 39 | - | |
| 40 | - 62.5% { | |
| 41 | - background-position-x: -4px, -4px, 0, 0, 6px, 6px, 12px, 12px, -4px, -4px, -4px, -4px; | |
| 42 | - } | |
| 43 | - | |
| 44 | - 75% { | |
| 45 | - background-position-x: 0, 0, 6px, 6px, 12px, 12px, -4px, -4px, -4px, -4px, -4px, -4px; | |
| 46 | - } | |
| 47 | - | |
| 48 | - 87.5% { | |
| 49 | - background-position-x: 6px, 6px, 12px, 12px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px; | |
| 50 | - } | |
| 51 | - | |
| 52 | - 100% { | |
| 53 | - background-position-x: 12px, 12px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px, -4px; | |
| 54 | - } | |
| 28 | +.ayg-player-wrapper { | |
| 29 | + position: relative; | |
| 30 | + width: 100%; | |
| 31 | + height: 0; | |
| 32 | + padding-bottom: 56.25%; | |
| 55 | 33 | } |
| 56 | 34 | |
| 57 | -.ayg-loading { | |
| 58 | - background: | |
| 59 | - linear-gradient(0deg, #f4f5fa 1px, transparent 0, transparent 8px, #f4f5fa 8px), /* 6 */ | |
| 60 | - linear-gradient(90deg, #f4f5fa 1px, #f6f9fb 0, #f6f9fb 3px, #f4f5fa 3px), | |
| 61 | - | |
| 62 | - linear-gradient(0deg, #ececf5 1px, transparent 0, transparent 8px, #ececf5 8px), /* 5 */ | |
| 63 | - linear-gradient(90deg, #ececf5 1px, #f2f3f9 0, #f2f3f9 3px, #ececf5 3px), | |
| 64 | - | |
| 65 | - linear-gradient(0deg, #e7eaf4 1px, transparent 0, transparent 8px, #e7eaf4 8px), /* 4 */ | |
| 66 | - linear-gradient(90deg, #e7eaf4 1px, #eef1f8 0, #eef1f8 3px, #e7eaf4 3px), | |
| 67 | - | |
| 68 | - linear-gradient(0deg, #b9bedd 1px, transparent 0, transparent 10px, #b9bedd 10px), /* 3 */ | |
| 69 | - linear-gradient(90deg, #b9bedd 1px, #d0d5e8 0, #d0d5e8 3px, #b9bedd 3px), | |
| 70 | - | |
| 71 | - linear-gradient(0deg, #9fa6d2 1px, transparent 0, transparent 15px, #9fa6d2 15px), /* 2 */ | |
| 72 | - linear-gradient(90deg, #9fa6d2 1px, #c0c5e1 0, #c0c5e1 3px, #9fa6d2 3px), | |
| 73 | - | |
| 74 | - linear-gradient(0deg, #8490c6 1px, transparent 0, transparent 15px, #8490c6 15px), /* 1 */ | |
| 75 | - linear-gradient(90deg, #8490c6 1px, #aeb5da 0, #aeb5da 3px, #8490c6 3px); | |
| 76 | - | |
| 77 | - background-position-x: -4px; /* Hide All */ | |
| 78 | - background-position-y: 3px, 3px, 3px, 3px, 3px, 3px, 2px, 2px, 0, 0, 0, 0; | |
| 79 | - | |
| 80 | - background-repeat: no-repeat; | |
| 81 | - | |
| 82 | - background-size: | |
| 83 | - 4px 9px, /* 6 */ | |
| 84 | - 4px 9px, | |
| 85 | - | |
| 86 | - 4px 9px, /* 5 */ | |
| 87 | - 4px 9px, | |
| 88 | - | |
| 89 | - 4px 9px, /* 4 */ | |
| 90 | - 4px 9px, | |
| 91 | - | |
| 92 | - 4px 11px, /* 3 */ | |
| 93 | - 4px 11px, | |
| 94 | - | |
| 95 | - 4px 16px, /* 2 */ | |
| 96 | - 4px 16px, | |
| 97 | - | |
| 98 | - 4px 16px, /* 1 */ | |
| 99 | - 4px 16px; | |
| 100 | - | |
| 101 | - zoom: 1; /* Increase this for a bigger symbol*/ | |
| 102 | - width: 16px; | |
| 103 | - min-width: 16px; | |
| 104 | - height: 16px; | |
| 105 | - min-height: 16px; | |
| 106 | - | |
| 107 | - animation: ayg-wait .80s steps(1, start) infinite; | |
| 35 | +.ayg-player-wrapper .fluid-width-video-wrapper { | |
| 36 | + position: static !important; | |
| 108 | 37 | } |
| 109 | 38 | |
| 110 | -/*---------------------------------------------------------------------------------------------- | |
| 111 | - * | |
| 112 | - * Search Form | |
| 113 | - * | |
| 114 | - *--------------------------------------------------------------------------------------------*/ | |
| 115 | -ayg-search-form { | |
| 116 | - display: flex; | |
| 117 | - flex-direction: column; | |
| 118 | - gap: 0.5em; | |
| 119 | - margin-bottom: 1.5em; | |
| 39 | +.ayg-player-iframe { | |
| 40 | + position: absolute; | |
| 41 | + width: 100%; | |
| 42 | + height: 100%; | |
| 43 | + top: 0; | |
| 44 | + left: 0; | |
| 120 | 45 | } |
| 121 | 46 | |
| 122 | -ayg-search-form form { | |
| 123 | - display: flex; | |
| 124 | - position: relative; | |
| 47 | +.ayg-player-caption, | |
| 48 | +.ayg-player-title, | |
| 49 | +.ayg-player-description { | |
| 50 | + margin: 0 !important; | |
| 51 | + padding: 7px 0; | |
| 125 | 52 | } |
| 126 | 53 | |
| 127 | -ayg-search-form form input { | |
| 128 | - flex-grow: 1; | |
| 54 | +.ayg-player-description-more { | |
| 55 | + display: none; | |
| 129 | 56 | } |
| 130 | 57 | |
| 131 | -ayg-search-form form button { | |
| 132 | - position: absolute; | |
| 133 | - top: 0; | |
| 134 | - right: 0; | |
| 135 | - bottom: 0; | |
| 58 | +.ayg-player-description-toggle-btn { | |
| 59 | + display: block; | |
| 60 | + margin: 10px 0; | |
| 61 | + font-weight: bold; | |
| 136 | 62 | } |
| 137 | 63 | |
| 138 | -ayg-search-form form button, | |
| 139 | -ayg-search-form form button:hover, | |
| 140 | -ayg-search-form form button:focus { | |
| 64 | +.ayg-privacy-wrapper { | |
| 65 | + position: absolute; | |
| 66 | + width: 100%; | |
| 67 | + height: 100%; | |
| 141 | 68 | margin: 0; |
| 142 | - border: 0; | |
| 143 | - box-shadow: none; | |
| 144 | - background: transparent; | |
| 145 | - background-color: transparent; | |
| 146 | - background-image: none; | |
| 147 | 69 | padding: 0; |
| 148 | - width: 2em; | |
| 149 | - height: 100%; | |
| 150 | - line-height: 1; | |
| 151 | - color: inherit; | |
| 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; | |
| 152 | 80 | } |
| 153 | 81 | |
| 154 | -ayg-search-form form .ayg-loading { | |
| 155 | - display: flex; | |
| 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% ); | |
| 156 | 93 | } |
| 157 | 94 | |
| 158 | -ayg-search-form .ayg-status-message { | |
| 159 | - display: flex; | |
| 160 | - align-items: center; | |
| 161 | - gap: 0.35em; | |
| 162 | - color: #008000; | |
| 163 | - font-size: small; | |
| 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; | |
| 164 | 102 | } |
| 165 | 103 | |
| 166 | -ayg-search-form .ayg-status-message.ayg-error { | |
| 167 | - color: #FF4500; | |
| 104 | +.ayg-privacy-consent-button:hover { | |
| 105 | + opacity: 0.8; | |
| 168 | 106 | } |
| 169 | 107 | |
| 170 | 108 | /*---------------------------------------------------------------------------------------------- |
| 171 | 109 | * |
| 172 | - * Player | |
| 173 | - * | |
| 174 | - *--------------------------------------------------------------------------------------------*/ | |
| 175 | -/* Custom Element */ | |
| 176 | -ayg-player { | |
| 177 | - border-radius: 3px; | |
| 178 | - background: #000 url( '../../../public/assets/images/spinner-dark.gif' ) center center no-repeat; | |
| 179 | -} | |
| 180 | - | |
| 181 | -/* Theme Integration */ | |
| 182 | -.ayg-player { | |
| 183 | - display: flex; | |
| 184 | - flex-direction: column; | |
| 185 | - gap: 1.5em; | |
| 186 | -} | |
| 187 | - | |
| 188 | -.ayg-player-container { | |
| 189 | - width: 100%; | |
| 190 | - margin: auto; | |
| 191 | -} | |
| 192 | - | |
| 193 | -.ayg-player-caption { | |
| 194 | - display: flex; | |
| 195 | - flex-direction: column; | |
| 196 | - gap: 1em; | |
| 197 | -} | |
| 198 | - | |
| 199 | -.ayg-player-caption .ayg-player-title { | |
| 200 | - margin: 0; | |
| 201 | - padding: 0; | |
| 202 | -} | |
| 203 | - | |
| 204 | -.ayg-player-description-more { | |
| 205 | - display: none; | |
| 206 | -} | |
| 207 | - | |
| 208 | -.ayg-player-description-toggle-btn { | |
| 209 | - display: inline; | |
| 210 | - padding-left: 0.5em; | |
| 211 | -} | |
| 212 | - | |
| 213 | -/*---------------------------------------------------------------------------------------------- | |
| 214 | - * | |
| 215 | 110 | * Responsive Grid |
| 216 | 111 | * |
| 217 | 112 | *--------------------------------------------------------------------------------------------*/ |
| 218 | 113 | .ayg-row { |
| 114 | + display: -webkit-flex; /* Safari */ | |
| 115 | + -webkit-flex-wrap: wrap; /* Safari 6.1+ */ | |
| 219 | 116 | display: flex; |
| 220 | 117 | flex-wrap: wrap; |
| 221 | - margin: 0 -0.75em; | |
| 118 | + margin: 0 -15px; | |
| 222 | 119 | } |
| 223 | 120 | |
| 224 | 121 | .ayg-col { |
| 225 | 122 | width: 100%; |
| @@ -224,21 +121,9 @@ | ||
| 224 | 121 | .ayg-col { |
| 225 | 122 | width: 100%; |
| 226 | 123 | } |
| 227 | 124 | |
| 228 | -@media only screen and (min-width: 420px) { | |
| 229 | - .ayg-col-xs-2 { | |
| 230 | - width: 50%; | |
| 231 | - } | |
| 232 | -} | |
| 233 | - | |
| 234 | -@media only screen and (min-width: 600px) { | |
| 235 | - .ayg-col-sm-3 { | |
| 236 | - width: 33.33%; | |
| 237 | - } | |
| 238 | -} | |
| 239 | - | |
| 240 | -@media only screen and (min-width: 768px) { | |
| 125 | +@media only screen and (min-width: 480px) { | |
| 241 | 126 | .ayg-col-2 { |
| 242 | 127 | width: 50%; |
| 243 | 128 | } |
| 244 | 129 | |
| @@ -287,85 +172,62 @@ | ||
| 287 | 172 | * |
| 288 | 173 | * Thumbnail |
| 289 | 174 | * |
| 290 | 175 | *--------------------------------------------------------------------------------------------*/ |
| 291 | -.ayg-thumbnail { | |
| 292 | - display: flex; | |
| 293 | - flex-direction: column; | |
| 294 | - gap: 0.75em; | |
| 295 | - margin: 0.75em; | |
| 176 | +.ayg-thumbnail { | |
| 177 | + padding: 15px; | |
| 296 | 178 | cursor: pointer; |
| 297 | 179 | } |
| 298 | 180 | |
| 299 | -.ayg-thumbnail p, | |
| 300 | -.ayg-thumbnail br { | |
| 301 | - display: none; | |
| 302 | -} | |
| 303 | - | |
| 304 | -.ayg-thumbnail .ayg-thumbnail-media { | |
| 181 | +.ayg-thumbnail-image-wrapper { | |
| 305 | 182 | position: relative; |
| 306 | - aspect-ratio: var(--ayg-image-ratio, 16 / 9); | |
| 307 | - border-radius: 3px; | |
| 308 | - overflow: hidden; | |
| 309 | 183 | } |
| 310 | 184 | |
| 311 | -.ayg-thumbnail .ayg-thumbnail-image { | |
| 185 | +.ayg-thumbnail-image { | |
| 312 | 186 | display: block; |
| 313 | 187 | width: 100%; |
| 314 | - max-width: 100%; | |
| 315 | - height: 100%; | |
| 316 | - object-fit: cover; | |
| 188 | + height: auto; | |
| 317 | 189 | } |
| 318 | 190 | |
| 319 | -.ayg-thumbnail .ayg-thumbnail-now-playing { | |
| 320 | - pointer-events: none; | |
| 321 | - display: none; | |
| 322 | - position: absolute; | |
| 323 | - right: 5px; | |
| 324 | - bottom: 5px; | |
| 325 | - z-index: 3; | |
| 326 | - border-radius: 2px; | |
| 327 | - background-color: rgba( 0, 0, 0, 0.8 ); | |
| 328 | - padding: 0.35em 0.5em; | |
| 329 | - line-height: 1; | |
| 330 | - color: #fff; | |
| 331 | - font-size: 0.85em; | |
| 332 | -} | |
| 333 | - | |
| 334 | 191 | .ayg-thumbnail .ayg-thumbnail-icon-play { |
| 335 | - pointer-events: none; | |
| 336 | 192 | display: inline-block; |
| 337 | 193 | position: absolute; |
| 194 | + width: 32px; | |
| 338 | 195 | top: 50%; |
| 339 | 196 | left: 50%; |
| 340 | - transform: translate( -50%, -50% ); | |
| 341 | - width: 30%; | |
| 342 | - height: 30%; | |
| 343 | - min-width: 36px; | |
| 344 | - min-height: 36px; | |
| 345 | - max-width: 64px; | |
| 346 | - max-height: 64px; | |
| 347 | - vertical-align: middle; | |
| 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; | |
| 348 | 204 | z-index: 3; |
| 349 | 205 | } |
| 350 | 206 | |
| 351 | -.ayg-thumbnail .ayg-thumbnail-caption { | |
| 352 | - display: flex; | |
| 353 | - flex-direction: column; | |
| 354 | - gap: 0.35em; | |
| 355 | - word-wrap: break-word; | |
| 207 | +.ayg-thumbnail-title, | |
| 208 | +.ayg-thumbnail-excerpt { | |
| 209 | + margin: 10px 0 0 0; | |
| 210 | + padding: 0; | |
| 356 | 211 | } |
| 357 | 212 | |
| 358 | -.ayg-thumbnail .ayg-thumbnail-title { | |
| 359 | - line-height: 1.5; | |
| 360 | - font-weight: 600; | |
| 213 | +.ayg-thumbnail-title { | |
| 214 | + font-weight: bold; | |
| 361 | 215 | } |
| 362 | 216 | |
| 363 | -.ayg-active .ayg-thumbnail-icon-play { | |
| 364 | - display: none !important; | |
| 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; | |
| 365 | 227 | } |
| 366 | 228 | |
| 367 | -.ayg-active .ayg-thumbnail-now-playing { | |
| 229 | +.ayg-active .ayg-thumbnail-active { | |
| 368 | 230 | display: inline-block !important; |
| 369 | 231 | } |
| 370 | 232 | |
| 371 | 233 | /*---------------------------------------------------------------------------------------------- |
| @@ -373,64 +235,41 @@ | ||
| 373 | 235 | * Pagination |
| 374 | 236 | * |
| 375 | 237 | *--------------------------------------------------------------------------------------------*/ |
| 376 | 238 | .ayg-pagination { |
| 377 | - display: flex; | |
| 378 | - align-items: center; | |
| 379 | - justify-content: center; | |
| 380 | - gap: 1em; | |
| 381 | - margin-bottom: 1em; | |
| 239 | + margin: 15px 0; | |
| 240 | + text-align: center; | |
| 382 | 241 | } |
| 383 | 242 | |
| 384 | -.ayg-pagination .ayg-btn { | |
| 385 | - cursor: pointer; | |
| 386 | -} | |
| 387 | - | |
| 388 | 243 | .ayg-pagination-info { |
| 389 | - display: flex; | |
| 390 | - align-items: center; | |
| 391 | - gap: 4px; | |
| 244 | + padding: 0 7px; | |
| 392 | 245 | } |
| 393 | 246 | |
| 394 | -.ayg-pagination-info, | |
| 395 | -.ayg-pagination-info * { | |
| 396 | - line-height: 1; | |
| 397 | -} | |
| 398 | - | |
| 399 | 247 | .ayg-pagination.ayg-loading { |
| 400 | - margin-left: auto; | |
| 401 | - margin-right: auto; | |
| 402 | -} | |
| 403 | - | |
| 404 | -.ayg-pagination.ayg-loading * { | |
| 405 | - display: none; | |
| 406 | -} | |
| 407 | - | |
| 408 | -/*---------------------------------------------------------------------------------------------- | |
| 409 | - * | |
| 410 | - * Block Editor | |
| 411 | - * | |
| 412 | - *--------------------------------------------------------------------------------------------*/ | |
| 413 | -.wp-block-automatic-youtube-gallery-block .components-spinner { | |
| 414 | - display: flex; | |
| 415 | - align-items: center; | |
| 248 | + display: block; | |
| 416 | 249 | width: 100%; |
| 250 | + height: 32px; | |
| 251 | + background-image: url( '../images/spinner-light.gif' ); | |
| 252 | + background-position: center center; | |
| 253 | + background-repeat: no-repeat; | |
| 417 | 254 | } |
| 418 | 255 | |
| 419 | -.wp-block-automatic-youtube-gallery-block .components-placeholder { | |
| 420 | - display: none; | |
| 256 | +.ayg-pagination .ayg-pagination-prev, | |
| 257 | +.ayg-pagination .ayg-pagination-info, | |
| 258 | +.ayg-pagination .ayg-pagination-next { | |
| 259 | + display: inline-block; | |
| 421 | 260 | } |
| 422 | 261 | |
| 423 | -.is-loading .wp-block-automatic-youtube-gallery-block { | |
| 424 | - opacity: 0.5; | |
| 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; | |
| 425 | 266 | } |
| 426 | 267 | |
| 427 | 268 | /*---------------------------------------------------------------------------------------------- |
| 428 | 269 | * |
| 429 | - * Theme | |
| 270 | + * Theme: Classic | |
| 430 | 271 | * |
| 431 | 272 | *--------------------------------------------------------------------------------------------*/ |
| 432 | -.ayg-theme { | |
| 433 | - display: flex; | |
| 434 | - flex-direction: column; | |
| 435 | - gap: 1.5em; | |
| 436 | -} | |
| 273 | +.ayg-theme-classic .ayg-active { | |
| 274 | + pointer-events: none; | |
| 275 | +} | |
