Adds separate style enqueue for media gallery. #607.

This commit is contained in:
mateuswetah 2021-10-05 12:11:01 -03:00
parent a440a22d65
commit e3d3f81993
5 changed files with 9 additions and 9 deletions

View File

@ -612,7 +612,7 @@ a.pswp__share--download:hover {
.tainacan-media-component {
--swiper-theme-color: var(--tainacan-secondary, #298596);
--swiper-navigation-size: 44px;
--tainacan-media-background: var(--tainacan-background-color, #ffffff);
--tainacan-media-background: var(--tainacan-background-color, transparent);
--tainacan-media-main-carousel-height: 60vh;
--tainacan-media-main-carousel-width: 100%;
--tainacan-media-thumbs-carousel-width: 100%;
@ -620,7 +620,7 @@ a.pswp__share--download:hover {
width: 100%;
height: auto;
display: block;
background-color: var(--tainacan-media-background, #ffffff); }
background-color: var(--tainacan-media-background, transparent); }
/* Style valid for both cases of carousel, main and thumbs */
.tainacan-media-component__swiper-main .swiper-button-prev::after,
@ -780,7 +780,7 @@ a.pswp__share--download:hover {
object-position: center;
border-bottom-width: 6px;
border-bottom-style: solid;
background-color: var(--tainacan-media-background, #ffffff);
background-color: var(--tainacan-media-background, transparent);
border-bottom-color: rgba(255, 255, 255, 0);
opacity: 0.85;
transition: opacity 0.3s ease, border-bottom-color 0.3s ease; }

File diff suppressed because one or more lines are too long

View File

@ -335,7 +335,8 @@ function tainacan_get_the_media_component(
if ( $args['has_media_main'] || $args['has_media_thumbs'] ) :
// Modal lightbox layer for rendering photoswipe
add_action('wp_footer', 'tainacan_get_the_media_modal_layer');
wp_enqueue_style( 'tainacan-media-component', $TAINACAN_BASE_URL . '/assets/css/tainacan-gutenberg-block-item-gallery.css', array(), TAINACAN_VERSION);
?>
<script>

View File

@ -14,7 +14,7 @@ $pswp__include-minimal-style: true !default;
.tainacan-media-component {
--swiper-theme-color: var(--tainacan-secondary, #298596);
--swiper-navigation-size: 44px;
--tainacan-media-background: var(--tainacan-background-color, #ffffff);
--tainacan-media-background: var(--tainacan-background-color, transparent);
--tainacan-media-main-carousel-height: 60vh;
--tainacan-media-main-carousel-width: 100%;
--tainacan-media-thumbs-carousel-width: 100%;
@ -23,7 +23,7 @@ $pswp__include-minimal-style: true !default;
width: 100%;
height: auto;
display: block;
background-color: var(--tainacan-media-background, #ffffff);
background-color: var(--tainacan-media-background, transparent);
}
/* Style valid for both cases of carousel, main and thumbs */
@ -232,7 +232,7 @@ $pswp__include-minimal-style: true !default;
object-position: center;
border-bottom-width: 6px;
border-bottom-style: solid;
background-color: var(--tainacan-media-background, #ffffff);
background-color: var(--tainacan-media-background, transparent);
border-bottom-color: rgba(255,255,255, 0.0);
opacity: 0.85;
transition: opacity 0.3s ease, border-bottom-color 0.3s ease;

View File

@ -6,7 +6,6 @@ import PhotoSwipe from 'photoswipe/dist/photoswipe.min.js';
import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default.min.js';
import Swiper from 'swiper';
import 'swiper/css/swiper.min.css';
import '../../../../assets/css/tainacan-gutenberg-block-item-gallery.css';
const { __ } = wp.i18n;