diff --git a/assets/css/main.scss b/assets/css/main.scss index 5b670350..9641ed09 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -121,6 +121,11 @@ padding: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; +} + +// Keep horizontal margin reset only before Swiper initialization. +// Swiper controls slide gap via inline `margin-left`/`margin-right` depending on direction. +[data-vp-layout="slider"] .vp-portfolio__item-wrap:not(.swiper-slide) { margin-left: 0 !important; } diff --git a/build/assets/css/main-rtl.css b/build/assets/css/main-rtl.css index 34f2988b..1b67e08a 100644 --- a/build/assets/css/main-rtl.css +++ b/build/assets/css/main-rtl.css @@ -1 +1 @@ -:root{--vp-color-brand:#2540cc;--vp-color-gray:#6c7781;--vp-color-gray-darken:#4b4b4b;--vp-color-gray-light:#e8e8e8;--vp-color-gray-lighten:#f7f7f7;--vp-color-red:#b71515;--vp-border-radius:5px;--vp-items__gap:0;--vp-transition-duration:0.3s;--vp-transition-easing:ease-in-out;--vp-interactive__transition-duration:0.2s;--vp-interactive__transition-easing:ease-in-out}.vp-portfolio__items{--vp-items__gap-vertical:var(--vp-items__gap)}.vp-portfolio{--vp-wrap__min-height:114px;--vp-elements__gap:20px;--vp-images__object-fit:cover;--vp-images__object-position:50% 50%}.vp-spinner{--vp-spinner__color:currentcolor;--vp-spinner__size:20px;--vp-spinner__border-size:2px;--vp-spinner__speed:0.3s;--vp-spinner--background__color:var(--vp-spinner__color);--vp-spinner--background__opacity:0.3}.vp-portfolio{box-sizing:border-box;min-height:var(--vp-wrap__min-height);overflow-wrap:break-word;position:relative}.vp-portfolio *,.vp-portfolio .swiper-wrapper,.vp-portfolio :after,.vp-portfolio :before{box-sizing:inherit}.vp-portfolio__items{transition:var(--vp-transition-duration) height var(--vp-transition-easing),var(--vp-transition-duration) transform var(--vp-transition-easing)}.vp-portfolio:after,.vp-portfolio__items:after{clear:both;content:"";display:block}.vp-portfolio__filter-wrap,.vp-portfolio__item,.vp-portfolio__items-wrap,.vp-portfolio__pagination-wrap,.vp-portfolio__sort-wrap,.vp-portfolio__thumbnails-wrap{overflow:hidden;position:relative}.vp-portfolio__items-wrap,.vp-portfolio__layout-elements,.vp-portfolio__thumbnails-wrap{margin-bottom:var(--vp-elements__gap);opacity:0;transition:var(--vp-transition-duration) opacity,var(--vp-transition-duration) visibility;visibility:hidden}.vp-portfolio>:last-child{margin-bottom:0}.vp-portfolio__item-wrap{float:left;position:relative;width:33.333%}.vp-svg-icon{display:inline-block;font-size:inherit;height:1em;overflow:visible;vertical-align:-.125em;width:1em}.vp-screen-reader-text{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);word-break:normal;word-wrap:normal!important;border:0}.vp-screen-reader-text:focus{display:block;height:auto;padding:15px 23px 14px;right:5px;top:5px;width:auto;z-index:100000;clip:auto!important;background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip-path:none;color:var(--vp-color-brand);font-size:14px;font-size:.875rem;font-weight:700;line-height:normal;text-decoration:none}[data-vp-layout]:not([data-vp-layout=slider]) .vp-portfolio__item-wrap{margin:0!important;padding:0!important}[data-vp-layout=slider] .vp-portfolio__item-wrap{display:block;float:none;margin-bottom:0!important;margin-left:0!important;margin-top:0!important;padding:0!important}.vp-portfolio__item .vp-portfolio__item-img a,.vp-portfolio__item .vp-portfolio__item-img img,.vp-portfolio__item .vp-portfolio__thumbnail-img img{display:block;height:auto;width:100%}.vp-portfolio__item-img,.vp-portfolio__thumbnail-img{position:relative}.vp-portfolio__item .vp-portfolio__item-img a{position:unset}.vp-portfolio__layout-elements{display:flex;flex-wrap:wrap;gap:var(--vp-elements__gap)}.vp-portfolio__layout-elements-align-left{justify-content:flex-start}.vp-portfolio__layout-elements-align-center{justify-content:center}.vp-portfolio__layout-elements-align-right{justify-content:flex-end}.vp-portfolio__layout-elements-align-between{justify-content:space-between}.vp-portfolio figure.vp-portfolio__item{display:block;margin:0}.vp-portfolio figcaption.vp-portfolio__item-meta,[class^=wp-block-]:not(.wp-block-gallery) figcaption.vp-portfolio__item-meta{font-style:inherit;margin-bottom:0}.vp-portfolio__preloader-wrap{opacity:1;transition:var(--vp-transition-duration) opacity,var(--vp-transition-duration) visibility;visibility:visible}.vp-portfolio__preloader{height:20px;left:50%;margin-left:-10px;margin-top:45px;position:absolute;width:20px}.vp-portfolio__preloader img,.vp-portfolio__preloader svg{border-radius:20px;display:block;height:100%;width:100%}.vp-portfolio__preloader:after{animation:vp-preloader-spinner .3s linear infinite;border:1px solid rgba(0,0,0,.2);border-left-color:#000;border-radius:50%;content:"";display:block;height:24px;left:-2px;position:absolute;text-indent:-9999em;top:-2px;width:24px}@keyframes vp-preloader-spinner{to{transform:rotate(1turn)}}.vp-portfolio.vp-portfolio__ready{min-height:auto}.vp-portfolio.vp-portfolio__ready .vp-portfolio__items-wrap,.vp-portfolio.vp-portfolio__ready .vp-portfolio__layout-elements,.vp-portfolio.vp-portfolio__ready .vp-portfolio__thumbnails-wrap{opacity:1;visibility:visible}.vp-portfolio.vp-portfolio__ready .vp-portfolio__preloader-wrap{opacity:0;visibility:hidden}.vp-portfolio.vp-portfolio__ready .vp-portfolio__preloader-wrap .vp-portfolio__preloader{animation:none}.vp-portfolio__layout-elements__ready,.vp-single-filter.vp-single-filter__ready .vp-portfolio__filter-wrap,.vp-single-sort.vp-single-sort__ready .vp-portfolio__sort-wrap{opacity:1;visibility:visible}.vp-portfolio.vp-portfolio__loading .vp-portfolio__layout-elements{opacity:.5}.vp-portfolio__item-popup{display:none}.vp-spinner{animation:vp-spinner var(--vp-spinner__speed) infinite linear;border:var(--vp-spinner__border-size) solid transparent;border-left:var(--vp-spinner__border-size) solid var(--vp-spinner__color);border-radius:50%;display:block;height:var(--vp-spinner__size);position:relative;text-indent:-9999em;width:var(--vp-spinner__size)}.vp-spinner:after{border:var(--vp-spinner__border-size) solid var(--vp-spinner--background__color);border-radius:50%;bottom:calc(var(--vp-spinner__border-size)*-1);content:"";display:block;left:calc(var(--vp-spinner__border-size)*-1);opacity:var(--vp-spinner--background__opacity);position:absolute;right:calc(var(--vp-spinner__border-size)*-1);top:calc(var(--vp-spinner__border-size)*-1)}@keyframes vp-spinner{to{transform:rotate(1turn)}} +:root{--vp-color-brand:#2540cc;--vp-color-gray:#6c7781;--vp-color-gray-darken:#4b4b4b;--vp-color-gray-light:#e8e8e8;--vp-color-gray-lighten:#f7f7f7;--vp-color-red:#b71515;--vp-border-radius:5px;--vp-items__gap:0;--vp-transition-duration:0.3s;--vp-transition-easing:ease-in-out;--vp-interactive__transition-duration:0.2s;--vp-interactive__transition-easing:ease-in-out}.vp-portfolio__items{--vp-items__gap-vertical:var(--vp-items__gap)}.vp-portfolio{--vp-wrap__min-height:114px;--vp-elements__gap:20px;--vp-images__object-fit:cover;--vp-images__object-position:50% 50%}.vp-spinner{--vp-spinner__color:currentcolor;--vp-spinner__size:20px;--vp-spinner__border-size:2px;--vp-spinner__speed:0.3s;--vp-spinner--background__color:var(--vp-spinner__color);--vp-spinner--background__opacity:0.3}.vp-portfolio{box-sizing:border-box;min-height:var(--vp-wrap__min-height);overflow-wrap:break-word;position:relative}.vp-portfolio *,.vp-portfolio .swiper-wrapper,.vp-portfolio :after,.vp-portfolio :before{box-sizing:inherit}.vp-portfolio__items{transition:var(--vp-transition-duration) height var(--vp-transition-easing),var(--vp-transition-duration) transform var(--vp-transition-easing)}.vp-portfolio:after,.vp-portfolio__items:after{clear:both;content:"";display:block}.vp-portfolio__filter-wrap,.vp-portfolio__item,.vp-portfolio__items-wrap,.vp-portfolio__pagination-wrap,.vp-portfolio__sort-wrap,.vp-portfolio__thumbnails-wrap{overflow:hidden;position:relative}.vp-portfolio__items-wrap,.vp-portfolio__layout-elements,.vp-portfolio__thumbnails-wrap{margin-bottom:var(--vp-elements__gap);opacity:0;transition:var(--vp-transition-duration) opacity,var(--vp-transition-duration) visibility;visibility:hidden}.vp-portfolio>:last-child{margin-bottom:0}.vp-portfolio__item-wrap{float:left;position:relative;width:33.333%}.vp-svg-icon{display:inline-block;font-size:inherit;height:1em;overflow:visible;vertical-align:-.125em;width:1em}.vp-screen-reader-text{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);word-break:normal;word-wrap:normal!important;border:0}.vp-screen-reader-text:focus{display:block;height:auto;padding:15px 23px 14px;right:5px;top:5px;width:auto;z-index:100000;clip:auto!important;background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip-path:none;color:var(--vp-color-brand);font-size:14px;font-size:.875rem;font-weight:700;line-height:normal;text-decoration:none}[data-vp-layout]:not([data-vp-layout=slider]) .vp-portfolio__item-wrap{margin:0!important;padding:0!important}[data-vp-layout=slider] .vp-portfolio__item-wrap{display:block;float:none;margin-bottom:0!important;margin-top:0!important;padding:0!important}[data-vp-layout=slider] .vp-portfolio__item-wrap:not(.swiper-slide){margin-left:0!important}.vp-portfolio__item .vp-portfolio__item-img a,.vp-portfolio__item .vp-portfolio__item-img img,.vp-portfolio__item .vp-portfolio__thumbnail-img img{display:block;height:auto;width:100%}.vp-portfolio__item-img,.vp-portfolio__thumbnail-img{position:relative}.vp-portfolio__item .vp-portfolio__item-img a{position:unset}.vp-portfolio__layout-elements{display:flex;flex-wrap:wrap;gap:var(--vp-elements__gap)}.vp-portfolio__layout-elements-align-left{justify-content:flex-start}.vp-portfolio__layout-elements-align-center{justify-content:center}.vp-portfolio__layout-elements-align-right{justify-content:flex-end}.vp-portfolio__layout-elements-align-between{justify-content:space-between}.vp-portfolio figure.vp-portfolio__item{display:block;margin:0}.vp-portfolio figcaption.vp-portfolio__item-meta,[class^=wp-block-]:not(.wp-block-gallery) figcaption.vp-portfolio__item-meta{font-style:inherit;margin-bottom:0}.vp-portfolio__preloader-wrap{opacity:1;transition:var(--vp-transition-duration) opacity,var(--vp-transition-duration) visibility;visibility:visible}.vp-portfolio__preloader{height:20px;left:50%;margin-left:-10px;margin-top:45px;position:absolute;width:20px}.vp-portfolio__preloader img,.vp-portfolio__preloader svg{border-radius:20px;display:block;height:100%;width:100%}.vp-portfolio__preloader:after{animation:vp-preloader-spinner .3s linear infinite;border:1px solid rgba(0,0,0,.2);border-left-color:#000;border-radius:50%;content:"";display:block;height:24px;left:-2px;position:absolute;text-indent:-9999em;top:-2px;width:24px}@keyframes vp-preloader-spinner{to{transform:rotate(1turn)}}.vp-portfolio.vp-portfolio__ready{min-height:auto}.vp-portfolio.vp-portfolio__ready .vp-portfolio__items-wrap,.vp-portfolio.vp-portfolio__ready .vp-portfolio__layout-elements,.vp-portfolio.vp-portfolio__ready .vp-portfolio__thumbnails-wrap{opacity:1;visibility:visible}.vp-portfolio.vp-portfolio__ready .vp-portfolio__preloader-wrap{opacity:0;visibility:hidden}.vp-portfolio.vp-portfolio__ready .vp-portfolio__preloader-wrap .vp-portfolio__preloader{animation:none}.vp-portfolio__layout-elements__ready,.vp-single-filter.vp-single-filter__ready .vp-portfolio__filter-wrap,.vp-single-sort.vp-single-sort__ready .vp-portfolio__sort-wrap{opacity:1;visibility:visible}.vp-portfolio.vp-portfolio__loading .vp-portfolio__layout-elements{opacity:.5}.vp-portfolio__item-popup{display:none}.vp-spinner{animation:vp-spinner var(--vp-spinner__speed) infinite linear;border:var(--vp-spinner__border-size) solid transparent;border-left:var(--vp-spinner__border-size) solid var(--vp-spinner__color);border-radius:50%;display:block;height:var(--vp-spinner__size);position:relative;text-indent:-9999em;width:var(--vp-spinner__size)}.vp-spinner:after{border:var(--vp-spinner__border-size) solid var(--vp-spinner--background__color);border-radius:50%;bottom:calc(var(--vp-spinner__border-size)*-1);content:"";display:block;left:calc(var(--vp-spinner__border-size)*-1);opacity:var(--vp-spinner--background__opacity);position:absolute;right:calc(var(--vp-spinner__border-size)*-1);top:calc(var(--vp-spinner__border-size)*-1)}@keyframes vp-spinner{to{transform:rotate(1turn)}} diff --git a/build/assets/css/main.css b/build/assets/css/main.css index 34f2988b..1b67e08a 100644 --- a/build/assets/css/main.css +++ b/build/assets/css/main.css @@ -1 +1 @@ -:root{--vp-color-brand:#2540cc;--vp-color-gray:#6c7781;--vp-color-gray-darken:#4b4b4b;--vp-color-gray-light:#e8e8e8;--vp-color-gray-lighten:#f7f7f7;--vp-color-red:#b71515;--vp-border-radius:5px;--vp-items__gap:0;--vp-transition-duration:0.3s;--vp-transition-easing:ease-in-out;--vp-interactive__transition-duration:0.2s;--vp-interactive__transition-easing:ease-in-out}.vp-portfolio__items{--vp-items__gap-vertical:var(--vp-items__gap)}.vp-portfolio{--vp-wrap__min-height:114px;--vp-elements__gap:20px;--vp-images__object-fit:cover;--vp-images__object-position:50% 50%}.vp-spinner{--vp-spinner__color:currentcolor;--vp-spinner__size:20px;--vp-spinner__border-size:2px;--vp-spinner__speed:0.3s;--vp-spinner--background__color:var(--vp-spinner__color);--vp-spinner--background__opacity:0.3}.vp-portfolio{box-sizing:border-box;min-height:var(--vp-wrap__min-height);overflow-wrap:break-word;position:relative}.vp-portfolio *,.vp-portfolio .swiper-wrapper,.vp-portfolio :after,.vp-portfolio :before{box-sizing:inherit}.vp-portfolio__items{transition:var(--vp-transition-duration) height var(--vp-transition-easing),var(--vp-transition-duration) transform var(--vp-transition-easing)}.vp-portfolio:after,.vp-portfolio__items:after{clear:both;content:"";display:block}.vp-portfolio__filter-wrap,.vp-portfolio__item,.vp-portfolio__items-wrap,.vp-portfolio__pagination-wrap,.vp-portfolio__sort-wrap,.vp-portfolio__thumbnails-wrap{overflow:hidden;position:relative}.vp-portfolio__items-wrap,.vp-portfolio__layout-elements,.vp-portfolio__thumbnails-wrap{margin-bottom:var(--vp-elements__gap);opacity:0;transition:var(--vp-transition-duration) opacity,var(--vp-transition-duration) visibility;visibility:hidden}.vp-portfolio>:last-child{margin-bottom:0}.vp-portfolio__item-wrap{float:left;position:relative;width:33.333%}.vp-svg-icon{display:inline-block;font-size:inherit;height:1em;overflow:visible;vertical-align:-.125em;width:1em}.vp-screen-reader-text{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);word-break:normal;word-wrap:normal!important;border:0}.vp-screen-reader-text:focus{display:block;height:auto;padding:15px 23px 14px;right:5px;top:5px;width:auto;z-index:100000;clip:auto!important;background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip-path:none;color:var(--vp-color-brand);font-size:14px;font-size:.875rem;font-weight:700;line-height:normal;text-decoration:none}[data-vp-layout]:not([data-vp-layout=slider]) .vp-portfolio__item-wrap{margin:0!important;padding:0!important}[data-vp-layout=slider] .vp-portfolio__item-wrap{display:block;float:none;margin-bottom:0!important;margin-left:0!important;margin-top:0!important;padding:0!important}.vp-portfolio__item .vp-portfolio__item-img a,.vp-portfolio__item .vp-portfolio__item-img img,.vp-portfolio__item .vp-portfolio__thumbnail-img img{display:block;height:auto;width:100%}.vp-portfolio__item-img,.vp-portfolio__thumbnail-img{position:relative}.vp-portfolio__item .vp-portfolio__item-img a{position:unset}.vp-portfolio__layout-elements{display:flex;flex-wrap:wrap;gap:var(--vp-elements__gap)}.vp-portfolio__layout-elements-align-left{justify-content:flex-start}.vp-portfolio__layout-elements-align-center{justify-content:center}.vp-portfolio__layout-elements-align-right{justify-content:flex-end}.vp-portfolio__layout-elements-align-between{justify-content:space-between}.vp-portfolio figure.vp-portfolio__item{display:block;margin:0}.vp-portfolio figcaption.vp-portfolio__item-meta,[class^=wp-block-]:not(.wp-block-gallery) figcaption.vp-portfolio__item-meta{font-style:inherit;margin-bottom:0}.vp-portfolio__preloader-wrap{opacity:1;transition:var(--vp-transition-duration) opacity,var(--vp-transition-duration) visibility;visibility:visible}.vp-portfolio__preloader{height:20px;left:50%;margin-left:-10px;margin-top:45px;position:absolute;width:20px}.vp-portfolio__preloader img,.vp-portfolio__preloader svg{border-radius:20px;display:block;height:100%;width:100%}.vp-portfolio__preloader:after{animation:vp-preloader-spinner .3s linear infinite;border:1px solid rgba(0,0,0,.2);border-left-color:#000;border-radius:50%;content:"";display:block;height:24px;left:-2px;position:absolute;text-indent:-9999em;top:-2px;width:24px}@keyframes vp-preloader-spinner{to{transform:rotate(1turn)}}.vp-portfolio.vp-portfolio__ready{min-height:auto}.vp-portfolio.vp-portfolio__ready .vp-portfolio__items-wrap,.vp-portfolio.vp-portfolio__ready .vp-portfolio__layout-elements,.vp-portfolio.vp-portfolio__ready .vp-portfolio__thumbnails-wrap{opacity:1;visibility:visible}.vp-portfolio.vp-portfolio__ready .vp-portfolio__preloader-wrap{opacity:0;visibility:hidden}.vp-portfolio.vp-portfolio__ready .vp-portfolio__preloader-wrap .vp-portfolio__preloader{animation:none}.vp-portfolio__layout-elements__ready,.vp-single-filter.vp-single-filter__ready .vp-portfolio__filter-wrap,.vp-single-sort.vp-single-sort__ready .vp-portfolio__sort-wrap{opacity:1;visibility:visible}.vp-portfolio.vp-portfolio__loading .vp-portfolio__layout-elements{opacity:.5}.vp-portfolio__item-popup{display:none}.vp-spinner{animation:vp-spinner var(--vp-spinner__speed) infinite linear;border:var(--vp-spinner__border-size) solid transparent;border-left:var(--vp-spinner__border-size) solid var(--vp-spinner__color);border-radius:50%;display:block;height:var(--vp-spinner__size);position:relative;text-indent:-9999em;width:var(--vp-spinner__size)}.vp-spinner:after{border:var(--vp-spinner__border-size) solid var(--vp-spinner--background__color);border-radius:50%;bottom:calc(var(--vp-spinner__border-size)*-1);content:"";display:block;left:calc(var(--vp-spinner__border-size)*-1);opacity:var(--vp-spinner--background__opacity);position:absolute;right:calc(var(--vp-spinner__border-size)*-1);top:calc(var(--vp-spinner__border-size)*-1)}@keyframes vp-spinner{to{transform:rotate(1turn)}} +:root{--vp-color-brand:#2540cc;--vp-color-gray:#6c7781;--vp-color-gray-darken:#4b4b4b;--vp-color-gray-light:#e8e8e8;--vp-color-gray-lighten:#f7f7f7;--vp-color-red:#b71515;--vp-border-radius:5px;--vp-items__gap:0;--vp-transition-duration:0.3s;--vp-transition-easing:ease-in-out;--vp-interactive__transition-duration:0.2s;--vp-interactive__transition-easing:ease-in-out}.vp-portfolio__items{--vp-items__gap-vertical:var(--vp-items__gap)}.vp-portfolio{--vp-wrap__min-height:114px;--vp-elements__gap:20px;--vp-images__object-fit:cover;--vp-images__object-position:50% 50%}.vp-spinner{--vp-spinner__color:currentcolor;--vp-spinner__size:20px;--vp-spinner__border-size:2px;--vp-spinner__speed:0.3s;--vp-spinner--background__color:var(--vp-spinner__color);--vp-spinner--background__opacity:0.3}.vp-portfolio{box-sizing:border-box;min-height:var(--vp-wrap__min-height);overflow-wrap:break-word;position:relative}.vp-portfolio *,.vp-portfolio .swiper-wrapper,.vp-portfolio :after,.vp-portfolio :before{box-sizing:inherit}.vp-portfolio__items{transition:var(--vp-transition-duration) height var(--vp-transition-easing),var(--vp-transition-duration) transform var(--vp-transition-easing)}.vp-portfolio:after,.vp-portfolio__items:after{clear:both;content:"";display:block}.vp-portfolio__filter-wrap,.vp-portfolio__item,.vp-portfolio__items-wrap,.vp-portfolio__pagination-wrap,.vp-portfolio__sort-wrap,.vp-portfolio__thumbnails-wrap{overflow:hidden;position:relative}.vp-portfolio__items-wrap,.vp-portfolio__layout-elements,.vp-portfolio__thumbnails-wrap{margin-bottom:var(--vp-elements__gap);opacity:0;transition:var(--vp-transition-duration) opacity,var(--vp-transition-duration) visibility;visibility:hidden}.vp-portfolio>:last-child{margin-bottom:0}.vp-portfolio__item-wrap{float:left;position:relative;width:33.333%}.vp-svg-icon{display:inline-block;font-size:inherit;height:1em;overflow:visible;vertical-align:-.125em;width:1em}.vp-screen-reader-text{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);word-break:normal;word-wrap:normal!important;border:0}.vp-screen-reader-text:focus{display:block;height:auto;padding:15px 23px 14px;right:5px;top:5px;width:auto;z-index:100000;clip:auto!important;background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip-path:none;color:var(--vp-color-brand);font-size:14px;font-size:.875rem;font-weight:700;line-height:normal;text-decoration:none}[data-vp-layout]:not([data-vp-layout=slider]) .vp-portfolio__item-wrap{margin:0!important;padding:0!important}[data-vp-layout=slider] .vp-portfolio__item-wrap{display:block;float:none;margin-bottom:0!important;margin-top:0!important;padding:0!important}[data-vp-layout=slider] .vp-portfolio__item-wrap:not(.swiper-slide){margin-left:0!important}.vp-portfolio__item .vp-portfolio__item-img a,.vp-portfolio__item .vp-portfolio__item-img img,.vp-portfolio__item .vp-portfolio__thumbnail-img img{display:block;height:auto;width:100%}.vp-portfolio__item-img,.vp-portfolio__thumbnail-img{position:relative}.vp-portfolio__item .vp-portfolio__item-img a{position:unset}.vp-portfolio__layout-elements{display:flex;flex-wrap:wrap;gap:var(--vp-elements__gap)}.vp-portfolio__layout-elements-align-left{justify-content:flex-start}.vp-portfolio__layout-elements-align-center{justify-content:center}.vp-portfolio__layout-elements-align-right{justify-content:flex-end}.vp-portfolio__layout-elements-align-between{justify-content:space-between}.vp-portfolio figure.vp-portfolio__item{display:block;margin:0}.vp-portfolio figcaption.vp-portfolio__item-meta,[class^=wp-block-]:not(.wp-block-gallery) figcaption.vp-portfolio__item-meta{font-style:inherit;margin-bottom:0}.vp-portfolio__preloader-wrap{opacity:1;transition:var(--vp-transition-duration) opacity,var(--vp-transition-duration) visibility;visibility:visible}.vp-portfolio__preloader{height:20px;left:50%;margin-left:-10px;margin-top:45px;position:absolute;width:20px}.vp-portfolio__preloader img,.vp-portfolio__preloader svg{border-radius:20px;display:block;height:100%;width:100%}.vp-portfolio__preloader:after{animation:vp-preloader-spinner .3s linear infinite;border:1px solid rgba(0,0,0,.2);border-left-color:#000;border-radius:50%;content:"";display:block;height:24px;left:-2px;position:absolute;text-indent:-9999em;top:-2px;width:24px}@keyframes vp-preloader-spinner{to{transform:rotate(1turn)}}.vp-portfolio.vp-portfolio__ready{min-height:auto}.vp-portfolio.vp-portfolio__ready .vp-portfolio__items-wrap,.vp-portfolio.vp-portfolio__ready .vp-portfolio__layout-elements,.vp-portfolio.vp-portfolio__ready .vp-portfolio__thumbnails-wrap{opacity:1;visibility:visible}.vp-portfolio.vp-portfolio__ready .vp-portfolio__preloader-wrap{opacity:0;visibility:hidden}.vp-portfolio.vp-portfolio__ready .vp-portfolio__preloader-wrap .vp-portfolio__preloader{animation:none}.vp-portfolio__layout-elements__ready,.vp-single-filter.vp-single-filter__ready .vp-portfolio__filter-wrap,.vp-single-sort.vp-single-sort__ready .vp-portfolio__sort-wrap{opacity:1;visibility:visible}.vp-portfolio.vp-portfolio__loading .vp-portfolio__layout-elements{opacity:.5}.vp-portfolio__item-popup{display:none}.vp-spinner{animation:vp-spinner var(--vp-spinner__speed) infinite linear;border:var(--vp-spinner__border-size) solid transparent;border-left:var(--vp-spinner__border-size) solid var(--vp-spinner__color);border-radius:50%;display:block;height:var(--vp-spinner__size);position:relative;text-indent:-9999em;width:var(--vp-spinner__size)}.vp-spinner:after{border:var(--vp-spinner__border-size) solid var(--vp-spinner--background__color);border-radius:50%;bottom:calc(var(--vp-spinner__border-size)*-1);content:"";display:block;left:calc(var(--vp-spinner__border-size)*-1);opacity:var(--vp-spinner--background__opacity);position:absolute;right:calc(var(--vp-spinner__border-size)*-1);top:calc(var(--vp-spinner__border-size)*-1)}@keyframes vp-spinner{to{transform:rotate(1turn)}} diff --git a/tests/e2e/specs/slider-rtl-gap.spec.js b/tests/e2e/specs/slider-rtl-gap.spec.js new file mode 100644 index 00000000..40be5b15 --- /dev/null +++ b/tests/e2e/specs/slider-rtl-gap.spec.js @@ -0,0 +1,89 @@ +/** + * WordPress dependencies + */ +import { expect, test } from '@wordpress/e2e-test-utils-playwright'; + +import { createRegularPosts } from '../utils/create-posts'; + +test.describe('slider gap on RTL direction', () => { + test.beforeAll(async ({ requestUtils }) => { + const pluginName = process.env.CORE + ? 'visual-portfolio-pro' + : 'visual-portfolio-posts-amp-image-gallery'; + + await Promise.all([ + requestUtils.activatePlugin(pluginName), + requestUtils.deleteAllPages(), + requestUtils.deleteAllPosts(), + ]); + }); + + test.afterAll(async ({ requestUtils }) => { + await Promise.all([ + requestUtils.deleteAllPages(), + requestUtils.deleteAllPosts(), + ]); + }); + + test('keeps Swiper RTL gap margins after initialization', async ({ + page, + requestUtils, + }) => { + const itemsGap = 35; + + // Create standard posts used by the VP posts source. + await createRegularPosts({ + requestUtils, + count: 5, + }); + + const pageWithSlider = await requestUtils.rest({ + path: '/wp/v2/pages', + method: 'POST', + data: { + title: 'RTL Slider Gap Test', + status: 'publish', + content: + '
', + }, + }); + + await page.goto(pageWithSlider.link); + + await expect(async () => { + const sliderState = await page.evaluate(() => { + const slider = document.querySelector('.vp-portfolio'); + const slide = document.querySelector( + '.vp-portfolio__item-wrap.swiper-slide' + ); + + if (!slider || !slide) { + return null; + } + + const slideStyles = window.getComputedStyle(slide); + const inlineStyles = slide.getAttribute('style') || ''; + + return { + vpDirection: window.getComputedStyle(slider).direction, + hasSwiperRtlClass: !!document.querySelector('.swiper-rtl'), + inlineMarginLeft: inlineStyles.includes('margin-left') + ? parseFloat( + inlineStyles.match(/margin-left:\s*([0-9.]+)px/)?.[1] || + '0' + ) + : 0, + computedMarginLeft: parseFloat(slideStyles.marginLeft || '0'), + computedMarginRight: parseFloat(slideStyles.marginRight || '0'), + }; + }); + + expect(sliderState).not.toBeNull(); + expect(sliderState.vpDirection).toBe('rtl'); + expect(sliderState.hasSwiperRtlClass).toBeTruthy(); + expect(sliderState.inlineMarginLeft).toBe(itemsGap); + expect(sliderState.computedMarginLeft).toBe(itemsGap); + expect(sliderState.computedMarginRight).toBe(0); + }).toPass({ timeout: 15000 }); + }); +});