first
This commit is contained in:
@ -0,0 +1,14 @@
|
||||
/**
|
||||
* Lazyload CSS Variables
|
||||
*/
|
||||
|
||||
:root {
|
||||
// Lazy.
|
||||
--vp-lazyload-images__background: linear-gradient(270deg, rgba(140, 140, 140, 15%), rgba(140, 140, 140, 5%), rgba(140, 140, 140, 5%), rgba(140, 140, 140, 15%));
|
||||
--vp-lazyload-images__background-size: 400% 100%;
|
||||
--vp-lazyload-images__animation-duration: 7s;
|
||||
|
||||
// Transitions.
|
||||
--vp-lazyload-transition-duration: 0.3s;
|
||||
--vp-lazyload-transition-easing: ease-in-out;
|
||||
}
|
||||
@ -0,0 +1,47 @@
|
||||
/**
|
||||
* Global CSS Variables
|
||||
*/
|
||||
:root {
|
||||
// Main colors.
|
||||
--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;
|
||||
|
||||
// Radius.
|
||||
--vp-border-radius: 5px;
|
||||
|
||||
// Gap.
|
||||
--vp-items__gap: 0;
|
||||
|
||||
// Transitions.
|
||||
--vp-transition-duration: 0.3s;
|
||||
--vp-transition-easing: ease-in-out;
|
||||
--vp-interactive__transition-duration: 0.2s;
|
||||
--vp-interactive__transition-easing: ease-in-out;
|
||||
}
|
||||
|
||||
// Vertical gap.
|
||||
.vp-portfolio__items {
|
||||
--vp-items__gap-vertical: var(--vp-items__gap);
|
||||
}
|
||||
|
||||
.vp-portfolio {
|
||||
--vp-wrap__min-height: 114px;
|
||||
--vp-elements__gap: 20px;
|
||||
|
||||
// Images.
|
||||
--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;
|
||||
}
|
||||
@ -0,0 +1,17 @@
|
||||
/**
|
||||
* Popup Galleries CSS Variables
|
||||
*/
|
||||
.vp-pswp,
|
||||
.vp-fancybox {
|
||||
--vp-popup__z-index: 1500;
|
||||
|
||||
// Thumbnails.
|
||||
--vp-popup--thumbnails__size: 160px;
|
||||
--vp-popup--thumbnails__aspect-ratio: 10 / 7;
|
||||
--vp-popup--thumbnails__background-color: #1e1e1e;
|
||||
--vp-popup--thumbnails--items__border-color: var(--vp-color-brand);
|
||||
--vp-popup--thumbnails--scrollbar__size: 7px;
|
||||
--vp-popup--thumbnails--scrollbar-track__background-color: #1f1f1f;
|
||||
--vp-popup--thumbnails--scrollbar-thumb__background-color: #424242;
|
||||
--vp-popup--thumbnails--scrollbar-thumb__border-radius: 10px;
|
||||
}
|
||||
@ -0,0 +1,38 @@
|
||||
/**
|
||||
* Slider CSS Variables
|
||||
*/
|
||||
.vp-portfolio {
|
||||
// Arrows.
|
||||
--vp-layout-slider--arrows__width: 2em;
|
||||
--vp-layout-slider--arrows__height: 2em;
|
||||
--vp-layout-slider--arrows__offset: 10px;
|
||||
--vp-layout-slider--arrows__compensation: 10px;
|
||||
--vp-layout-slider--arrows__color: var(--vp-color-gray);
|
||||
--vp-layout-slider--arrows__background-color: #fff;
|
||||
--vp-layout-slider--arrows__border-radius: 50%;
|
||||
--vp-layout-slider--arrows__box-shadow: 0 0 7px 2px rgba(0, 0, 0, 4%);
|
||||
--vp-layout-slider--arrows__opacity: 0.5;
|
||||
--vp-layout-slider--arrows-hover__box-shadow: 0 2px 15px 2px rgba(0, 0, 0, 4%);
|
||||
--vp-layout-slider--arrows-hover__opacity: 1;
|
||||
|
||||
// Bullets.
|
||||
--vp-layout-slider--bullets__margin-top: 2em;
|
||||
--vp-layout-slider--bullets__width: 0.4em;
|
||||
--vp-layout-slider--bullets__height: 0.4em;
|
||||
--vp-layout-slider--bullets__gap: 0.4em;
|
||||
--vp-layout-slider--bullets__compensation: 4px;
|
||||
--vp-layout-slider--bullets__background-color: currentcolor;
|
||||
--vp-layout-slider--bullets__border-radius: 50%;
|
||||
--vp-layout-slider--bullets__opacity: 0.2;
|
||||
--vp-layout-slider--bullets-hover__opacity: 0.5;
|
||||
--vp-layout-slider--bullets-active__opacity: 1;
|
||||
|
||||
// Thumbnails.
|
||||
--vp-layout-slider--thumbnails__opacity: 0.5;
|
||||
--vp-layout-slider--thumbnails-hover__opacity: 1;
|
||||
--vp-layout-slider--thumbnails-active__opacity: 1;
|
||||
|
||||
// Transitions.
|
||||
--vp-layout-slider__transition-duration: var(--vp-interactive__transition-duration);
|
||||
--vp-layout-slider__transition-easing: var(--vp-interactive__transition-easing);
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
/*
|
||||
* Visual Portfolio custom scrollbar.
|
||||
*/
|
||||
.vp-portfolio__custom-scrollbar {
|
||||
--vp-custom-scrollbar__background-color: #888;
|
||||
|
||||
.simplebar-scrollbar::before {
|
||||
background-color: var(--vp-custom-scrollbar__background-color);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
/*
|
||||
* Additional styles to fix Elementor page builder conflicts.
|
||||
*/
|
||||
|
||||
// Gaps.
|
||||
[data-vp-layout="grid"],
|
||||
[data-vp-layout="masonry"],
|
||||
[data-vp-layout="tiles"] {
|
||||
.elementor & .vp-portfolio__items .vp-portfolio__item-wrap .vp-portfolio__item {
|
||||
margin-top: var(--vp-items__gap-vertical);
|
||||
margin-left: var(--vp-items__gap);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,47 @@
|
||||
/*
|
||||
* Visual Portfolio layout Grid.
|
||||
*/
|
||||
|
||||
// Gaps.
|
||||
[data-vp-layout="grid"] {
|
||||
.vp-portfolio__items {
|
||||
margin-top: calc(-1 * var(--vp-items__gap-vertical));
|
||||
margin-left: calc(-1 * var(--vp-items__gap));
|
||||
}
|
||||
|
||||
.vp-portfolio__item-wrap .vp-portfolio__item {
|
||||
margin-top: var(--vp-items__gap-vertical);
|
||||
margin-left: var(--vp-items__gap);
|
||||
}
|
||||
}
|
||||
|
||||
// Images.
|
||||
[data-vp-grid-images-aspect-ratio*=":"] {
|
||||
.vp-portfolio__item-img img,
|
||||
.vp-portfolio__item-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.vp-portfolio__item-img-wrap {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
padding-top: 56%;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
.vp-portfolio__item-img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: var(--vp-images__object-fit);
|
||||
object-position: var(--vp-images__object-position);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
/*
|
||||
* Visual Portfolio layout Justified.
|
||||
*/
|
||||
[data-vp-layout="justified"] {
|
||||
.vp-portfolio__item-wrap {
|
||||
top: 0;
|
||||
left: 0;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,47 @@
|
||||
/*
|
||||
* Visual Portfolio layout Masonry.
|
||||
*/
|
||||
|
||||
// Gaps.
|
||||
[data-vp-layout="masonry"] {
|
||||
.vp-portfolio__items {
|
||||
margin-top: calc(-1 * var(--vp-items__gap-vertical));
|
||||
margin-left: calc(-1 * var(--vp-items__gap));
|
||||
}
|
||||
|
||||
.vp-portfolio__item-wrap .vp-portfolio__item {
|
||||
margin-top: var(--vp-items__gap-vertical);
|
||||
margin-left: var(--vp-items__gap);
|
||||
}
|
||||
}
|
||||
|
||||
// Images.
|
||||
[data-vp-masonry-images-aspect-ratio*=":"] {
|
||||
.vp-portfolio__item-img img,
|
||||
.vp-portfolio__item-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.vp-portfolio__item-img-wrap {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
padding-top: 56%;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
.vp-portfolio__item-img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: var(--vp-images__object-fit);
|
||||
object-position: var(--vp-images__object-position);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,167 @@
|
||||
@import "./variables-slider";
|
||||
|
||||
/*
|
||||
* Visual Portfolio layout Slider.
|
||||
*/
|
||||
[data-vp-layout="slider"] {
|
||||
// Initial styles before Swiper init.
|
||||
.vp-portfolio__items-wrap:not(.swiper) .vp-portfolio__items,
|
||||
.vp-portfolio__thumbnails-wrap:not(.swiper) .vp-portfolio__thumbnails {
|
||||
position: relative;
|
||||
box-sizing: content-box;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.vp-portfolio__items-wrap:not(.swiper) .vp-portfolio__items .vp-portfolio__item-wrap,
|
||||
.vp-portfolio__thumbnails-wrap:not(.swiper) .vp-portfolio__thumbnails .vp-portfolio__thumbnail-wrap {
|
||||
width: calc(100% / var(--vp-layout-slider__initial-slides-per-view, 8));
|
||||
min-width: calc(100% / var(--vp-layout-slider__initial-slides-per-view, 8));
|
||||
}
|
||||
|
||||
@for $i from 1 through 8 {
|
||||
&[data-vp-slider-slides-per-view="#{$i}"] .vp-portfolio__items-wrap:not(.swiper),
|
||||
&[data-vp-slider-thumbnails-per-view="#{$i}"] .vp-portfolio__thumbnails-wrap:not(.swiper) {
|
||||
--vp-layout-slider__initial-slides-per-view: #{$i};
|
||||
}
|
||||
}
|
||||
|
||||
.vp-portfolio__thumbnail-img-wrap {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vp-portfolio__item-img-wrap::before,
|
||||
.vp-portfolio__thumbnail-img-wrap::before {
|
||||
display: block;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.vp-portfolio__item-img img,
|
||||
.vp-portfolio__thumbnail-img img {
|
||||
object-fit: var(--vp-images__object-fit);
|
||||
object-position: var(--vp-images__object-position);
|
||||
}
|
||||
|
||||
// arrows
|
||||
.vp-portfolio__items-arrow {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--vp-layout-slider--arrows__width);
|
||||
height: var(--vp-layout-slider--arrows__height);
|
||||
margin-top: calc(-1 * var(--vp-layout-slider--arrows__height) / 2);
|
||||
color: var(--vp-layout-slider--arrows__color);
|
||||
cursor: pointer;
|
||||
background-color: var(--vp-layout-slider--arrows__background-color);
|
||||
border-radius: var(--vp-layout-slider--arrows__border-radius);
|
||||
box-shadow: var(--vp-layout-slider--arrows__box-shadow);
|
||||
opacity: var(--vp-layout-slider--arrows__opacity);
|
||||
transition: var(--vp-layout-slider__transition-duration) opacity var(--vp-layout-slider__transition-easing), var(--vp-layout-slider__transition-duration) box-shadow var(--vp-layout-slider__transition-easing);
|
||||
|
||||
// additional element to make the buttons clickable also in outside.
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: calc(-1 * var(--vp-layout-slider--arrows__compensation));
|
||||
right: calc(-1 * var(--vp-layout-slider--arrows__compensation));
|
||||
bottom: calc(-1 * var(--vp-layout-slider--arrows__compensation));
|
||||
left: calc(-1 * var(--vp-layout-slider--arrows__compensation));
|
||||
display: block;
|
||||
content: "";
|
||||
}
|
||||
|
||||
&:hover {
|
||||
box-shadow: var(--vp-layout-slider--arrows-hover__box-shadow);
|
||||
opacity: var(--vp-layout-slider--arrows-hover__opacity);
|
||||
}
|
||||
|
||||
// RTL.
|
||||
@if variable-exists(rtl) and $rtl {
|
||||
svg {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vp-portfolio__items-arrow-prev {
|
||||
left: var(--vp-layout-slider--arrows__offset);
|
||||
}
|
||||
|
||||
.vp-portfolio__items-arrow-next {
|
||||
right: var(--vp-layout-slider--arrows__offset);
|
||||
}
|
||||
|
||||
// bullets
|
||||
&[data-vp-slider-bullets="true"] .vp-portfolio__items-wrap {
|
||||
padding-bottom: var(--vp-layout-slider--bullets__margin-top);
|
||||
|
||||
.vp-portfolio__items-arrow {
|
||||
transform: translateY(calc(var(--vp-layout-slider--bullets__margin-top) / -2));
|
||||
}
|
||||
}
|
||||
|
||||
.vp-portfolio__items-bullets {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
text-align: center;
|
||||
|
||||
// Fixes Swiper default font-size
|
||||
&.swiper-pagination-bullets-dynamic {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
> .swiper-pagination-bullet {
|
||||
position: relative;
|
||||
width: var(--vp-layout-slider--bullets__width);
|
||||
height: var(--vp-layout-slider--bullets__height);
|
||||
margin: 0 calc(var(--vp-layout-slider--bullets__gap) / 2);
|
||||
cursor: pointer;
|
||||
background-color: var(--vp-layout-slider--bullets__background-color);
|
||||
border-radius: var(--vp-layout-slider--bullets__border-radius);
|
||||
opacity: var(--vp-layout-slider--bullets__opacity);
|
||||
transition: var(--vp-layout-slider__transition-duration) opacity var(--vp-layout-slider__transition-easing);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: var(--vp-layout-slider--bullets-hover__opacity);
|
||||
}
|
||||
|
||||
&.swiper-pagination-bullet-active {
|
||||
opacity: var(--vp-layout-slider--bullets-active__opacity);
|
||||
}
|
||||
|
||||
// additional element to make the buttons clickable also in outside.
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: calc(-1 * var(--vp-layout-slider--bullets__compensation));
|
||||
right: calc(-1 * var(--vp-layout-slider--bullets__compensation));
|
||||
bottom: calc(-1 * var(--vp-layout-slider--bullets__compensation));
|
||||
left: calc(-1 * var(--vp-layout-slider--bullets__compensation));
|
||||
display: block;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// thumbnails
|
||||
.vp-portfolio__thumbnails-wrap {
|
||||
.vp-portfolio__thumbnail-wrap {
|
||||
cursor: pointer;
|
||||
opacity: var(--vp-layout-slider--thumbnails__opacity);
|
||||
transition: var(--vp-layout-slider__transition-duration) opacity;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: var(--vp-layout-slider--thumbnails-hover__opacity);
|
||||
}
|
||||
|
||||
&.swiper-slide-thumb-active {
|
||||
opacity: var(--vp-layout-slider--thumbnails-active__opacity);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,50 @@
|
||||
/*
|
||||
* Visual Portfolio layout Tiles.
|
||||
*/
|
||||
[data-vp-layout="tiles"] {
|
||||
// Gaps.
|
||||
.vp-portfolio__items,
|
||||
.vp-portfolio__item-wrap .vp-portfolio__item-img-wrap {
|
||||
margin-top: calc(-1 * var(--vp-items__gap-vertical));
|
||||
margin-left: calc(-1 * var(--vp-items__gap));
|
||||
}
|
||||
|
||||
.vp-portfolio__item-wrap .vp-portfolio__item {
|
||||
margin-top: var(--vp-items__gap-vertical);
|
||||
margin-left: var(--vp-items__gap);
|
||||
}
|
||||
|
||||
// Images
|
||||
.vp-portfolio__item-img img,
|
||||
.vp-portfolio__item-img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.vp-portfolio__item-img {
|
||||
top: var(--vp-items__gap-vertical);
|
||||
left: var(--vp-items__gap);
|
||||
}
|
||||
|
||||
.vp-portfolio__item-img-wrap {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
padding-top: 56%;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
.vp-portfolio__item-img img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: var(--vp-images__object-fit);
|
||||
object-position: var(--vp-images__object-position);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,32 @@
|
||||
/*
|
||||
* Visual Portfolio Lazyload Images fallback for old browsers
|
||||
* which does not support CSS :has()
|
||||
*/
|
||||
:is(.vp-portfolio__item-img, .vp-portfolio__thumbnail-img) {
|
||||
// Extra check for lazy loading class on the inner image
|
||||
// to make sure image will be lazy loaded by Visual Portfolio.
|
||||
&:is(.vp-has-lazyload, .vp-has-lazyloading, .vp-has-lazyloaded)::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
// Fixed possible bug with inaccessible links on images in the Classic style.
|
||||
pointer-events: none;
|
||||
visibility: visible;
|
||||
content: "";
|
||||
background-image: var(--vp-lazyload-images__background);
|
||||
background-size: var(--vp-lazyload-images__background-size);
|
||||
opacity: 1;
|
||||
transition: var(--vp-lazyload-transition-duration) var(--vp-lazyload-transition-duration) opacity, var(--vp-lazyload-transition-duration) var(--vp-lazyload-transition-duration) visibility;
|
||||
}
|
||||
|
||||
&:is(.vp-has-lazyloading)::before {
|
||||
animation: vp-lazyload-placeholder var(--vp-lazyload-images__animation-duration) linear infinite;
|
||||
}
|
||||
|
||||
&:is(.vp-has-lazyloaded)::before {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
59
wp-content/plugins/visual-portfolio/assets/css/lazyload.scss
Normal file
59
wp-content/plugins/visual-portfolio/assets/css/lazyload.scss
Normal file
@ -0,0 +1,59 @@
|
||||
@import "./variables-lazyload";
|
||||
|
||||
/*
|
||||
* Visual Portfolio Lazyload Images
|
||||
*
|
||||
* - :first-of-type is used to prevent conflicts with hover image (Pro feature)
|
||||
*/
|
||||
|
||||
// LazyLoad image
|
||||
img.vp-lazyload,
|
||||
img.vp-lazyloaded,
|
||||
img.vp-lazypreload,
|
||||
img.vp-lazyloading {
|
||||
opacity: 0;
|
||||
transition: var(--vp-lazyload-transition-duration) opacity;
|
||||
}
|
||||
|
||||
img.vp-lazyloaded {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
:is(.vp-portfolio__item-img, .vp-portfolio__thumbnail-img) {
|
||||
// Extra check for lazy loading class on the inner image
|
||||
// to make sure image will be lazy loaded by Visual Portfolio.
|
||||
&:has(img:first-of-type:is(.vp-lazyload, .vp-lazyloading, .vp-lazyloaded))::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
// Fixed possible bug with inaccessible links on images in the Classic style.
|
||||
pointer-events: none;
|
||||
visibility: visible;
|
||||
content: "";
|
||||
background-image: var(--vp-lazyload-images__background);
|
||||
background-size: var(--vp-lazyload-images__background-size);
|
||||
opacity: 1;
|
||||
transition: var(--vp-lazyload-transition-duration) var(--vp-lazyload-transition-duration) opacity, var(--vp-lazyload-transition-duration) var(--vp-lazyload-transition-duration) visibility;
|
||||
}
|
||||
|
||||
&:has(img:first-of-type.vp-lazyloading)::before {
|
||||
animation: vp-lazyload-placeholder var(--vp-lazyload-images__animation-duration) ease-in-out infinite;
|
||||
}
|
||||
|
||||
&:has(img:first-of-type.vp-lazyloaded)::before {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes vp-lazyload-placeholder {
|
||||
0% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
306
wp-content/plugins/visual-portfolio/assets/css/main.scss
Normal file
306
wp-content/plugins/visual-portfolio/assets/css/main.scss
Normal file
@ -0,0 +1,306 @@
|
||||
@import "./variables-main";
|
||||
|
||||
/*
|
||||
* Visual Portfolio main style.
|
||||
*/
|
||||
.vp-portfolio {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
min-height: var(--vp-wrap__min-height);
|
||||
overflow-wrap: break-word;
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
// Fixes Swiper box-sizing conflict.
|
||||
// https://github.com/nk-crew/visual-portfolio/issues/147
|
||||
.swiper-wrapper {
|
||||
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 {
|
||||
display: block;
|
||||
clear: both;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.vp-portfolio__items-wrap,
|
||||
.vp-portfolio__thumbnails-wrap,
|
||||
.vp-portfolio__filter-wrap,
|
||||
.vp-portfolio__sort-wrap,
|
||||
.vp-portfolio__pagination-wrap,
|
||||
.vp-portfolio__item {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.vp-portfolio__items-wrap,
|
||||
.vp-portfolio__thumbnails-wrap,
|
||||
.vp-portfolio__layout-elements {
|
||||
margin-bottom: var(--vp-elements__gap);
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
transition: var(--vp-transition-duration) opacity, var(--vp-transition-duration) visibility;
|
||||
}
|
||||
|
||||
.vp-portfolio > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.vp-portfolio__item-wrap {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 33.333%;
|
||||
}
|
||||
|
||||
// icons.
|
||||
.vp-svg-icon {
|
||||
display: inline-block;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
overflow: visible;
|
||||
font-size: inherit;
|
||||
vertical-align: -0.125em;
|
||||
}
|
||||
|
||||
// screen readers only.
|
||||
.vp-screen-reader-text {
|
||||
position: absolute !important;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
clip-path: inset(50%);
|
||||
word-break: normal;
|
||||
word-wrap: normal !important;
|
||||
border: 0;
|
||||
|
||||
&:focus {
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
z-index: 100000;
|
||||
display: block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 15px 23px 14px;
|
||||
clip: auto !important;
|
||||
clip-path: none;
|
||||
font-size: 14px;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 700;
|
||||
line-height: normal;
|
||||
color: var(--vp-color-brand);
|
||||
text-decoration: none;
|
||||
background-color: #f1f1f1;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 60%);
|
||||
}
|
||||
}
|
||||
|
||||
// fix for default themes styles.
|
||||
[data-vp-layout]:not([data-vp-layout="slider"]) .vp-portfolio__item-wrap {
|
||||
padding: 0 !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
[data-vp-layout="slider"] .vp-portfolio__item-wrap {
|
||||
// In some plugins there is a style with `display: flex`, which breaks our items.
|
||||
display: block;
|
||||
float: none;
|
||||
padding: 0 !important;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
.vp-portfolio__item .vp-portfolio__item-img img,
|
||||
.vp-portfolio__item .vp-portfolio__item-img a,
|
||||
.vp-portfolio__item .vp-portfolio__thumbnail-img img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.vp-portfolio__item-img,
|
||||
.vp-portfolio__thumbnail-img {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Fix conflict with such theme styles:
|
||||
// a { position: relative; }
|
||||
// https://wordpress.org/support/topic/gallery-images-grey/
|
||||
.vp-portfolio__item .vp-portfolio__item-img a {
|
||||
position: unset;
|
||||
}
|
||||
|
||||
// layout elements
|
||||
.vp-portfolio__layout-elements {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--vp-elements__gap);
|
||||
|
||||
&-align-left {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
&-align-center {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&-align-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
&-align-between {
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
// Fix custom theme styles for figures
|
||||
.vp-portfolio figure.vp-portfolio__item {
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
[class^="wp-block-"]:not(.wp-block-gallery) figcaption.vp-portfolio__item-meta,
|
||||
.vp-portfolio figcaption.vp-portfolio__item-meta {
|
||||
margin-bottom: 0;
|
||||
font-style: inherit;
|
||||
}
|
||||
|
||||
// Preloader
|
||||
.vp-portfolio__preloader-wrap {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
transition: var(--vp-transition-duration) opacity, var(--vp-transition-duration) visibility;
|
||||
}
|
||||
|
||||
.vp-portfolio__preloader {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-top: 45px;
|
||||
margin-left: -10px;
|
||||
|
||||
svg,
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
text-indent: -9999em;
|
||||
content: "";
|
||||
border: 1px solid rgba(#000, 0.2);
|
||||
border-left: 1px solid #000;
|
||||
border-radius: 50%;
|
||||
animation: vp-preloader-spinner 0.3s infinite linear;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes vp-preloader-spinner {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
// On loaded portfolio
|
||||
.vp-portfolio.vp-portfolio__ready {
|
||||
min-height: initial;
|
||||
|
||||
.vp-portfolio__items-wrap,
|
||||
.vp-portfolio__thumbnails-wrap,
|
||||
.vp-portfolio__layout-elements {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.vp-portfolio__preloader-wrap {
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
|
||||
.vp-portfolio__preloader {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vp-portfolio__layout-elements__ready {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.vp-single-filter.vp-single-filter__ready {
|
||||
.vp-portfolio__filter-wrap {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.vp-single-sort.vp-single-sort__ready {
|
||||
.vp-portfolio__sort-wrap {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Loading
|
||||
.vp-portfolio.vp-portfolio__loading .vp-portfolio__layout-elements {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
// Popup Galleries
|
||||
.vp-portfolio__item-popup {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// loading spinner.
|
||||
.vp-spinner {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: var(--vp-spinner__size);
|
||||
height: var(--vp-spinner__size);
|
||||
text-indent: -9999em;
|
||||
border: var(--vp-spinner__border-size) solid transparent;
|
||||
border-left: var(--vp-spinner__border-size) solid var(--vp-spinner__color);
|
||||
border-radius: 50%;
|
||||
animation: vp-spinner var(--vp-spinner__speed) infinite linear;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: calc(-1 * var(--vp-spinner__border-size));
|
||||
right: calc(-1 * var(--vp-spinner__border-size));
|
||||
bottom: calc(-1 * var(--vp-spinner__border-size));
|
||||
left: calc(-1 * var(--vp-spinner__border-size));
|
||||
display: block;
|
||||
content: "";
|
||||
border: var(--vp-spinner__border-size) solid var(--vp-spinner--background__color);
|
||||
border-radius: 50%;
|
||||
opacity: var(--vp-spinner--background__opacity);
|
||||
}
|
||||
}
|
||||
@keyframes vp-spinner {
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
28
wp-content/plugins/visual-portfolio/assets/css/noscript.scss
Normal file
28
wp-content/plugins/visual-portfolio/assets/css/noscript.scss
Normal file
@ -0,0 +1,28 @@
|
||||
/*
|
||||
* Visual Portfolio Noscript
|
||||
* Loaded inline in class-assets.php -> add_noscript_styles
|
||||
*/
|
||||
|
||||
// preloader
|
||||
.vp-portfolio__preloader-wrap {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// hidden items before load.
|
||||
.vp-portfolio__items-wrap,
|
||||
.vp-portfolio__filter-wrap,
|
||||
.vp-portfolio__sort-wrap,
|
||||
.vp-portfolio__pagination-wrap {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
// image tag without script
|
||||
.vp-portfolio__item .vp-portfolio__item-img noscript + img {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Slider thumbnails
|
||||
.vp-portfolio__thumbnails-wrap {
|
||||
display: none;
|
||||
}
|
||||
@ -0,0 +1,88 @@
|
||||
@import "./variables-popup";
|
||||
|
||||
/*
|
||||
* Visual Portfolio styles for Fancybox.
|
||||
*/
|
||||
.vp-fancybox {
|
||||
top: var(--wp-admin--admin-bar--height, 0);
|
||||
z-index: var(--vp-popup__z-index);
|
||||
height: calc(100% - var(--wp-admin--admin-bar--height, 0px));
|
||||
|
||||
// removed white background to improve vertical videos displaying.
|
||||
.fancybox-slide--iframe .fancybox-content {
|
||||
background: none;
|
||||
}
|
||||
|
||||
// Caption.
|
||||
.fancybox-caption__body {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
|
||||
h3 {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.vp-portfolio__item-meta-title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 3px;
|
||||
font-size: 14px;
|
||||
color: inherit;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Thumbnails.
|
||||
.fancybox-thumbs {
|
||||
width: var(--vp-popup--thumbnails__size);
|
||||
background: var(--vp-popup--thumbnails__background-color);
|
||||
}
|
||||
|
||||
&.fancybox-show-thumbs .fancybox-inner {
|
||||
right: var(--vp-popup--thumbnails__size);
|
||||
}
|
||||
|
||||
.fancybox-thumbs__list a {
|
||||
width: var(--vp-popup--thumbnails__size);
|
||||
max-width: calc(100% - 4px);
|
||||
height: calc(var(--vp-popup--thumbnails__size) / calc(var(--vp-popup--thumbnails__aspect-ratio)));
|
||||
|
||||
&::before {
|
||||
border: 2px solid var(--vp-popup--thumbnails--items__border-color);
|
||||
}
|
||||
|
||||
@supports (aspect-ratio: 16 / 9) {
|
||||
width: calc(100% - 4px);
|
||||
max-width: none;
|
||||
height: auto;
|
||||
max-height: none;
|
||||
aspect-ratio: var(--vp-popup--thumbnails__aspect-ratio);
|
||||
}
|
||||
}
|
||||
|
||||
.fancybox-thumbs-y .fancybox-thumbs__list {
|
||||
&::-webkit-scrollbar {
|
||||
width: var(--vp-popup--thumbnails--scrollbar__size);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: var(--vp-popup--thumbnails--scrollbar-track__background-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: var(--vp-popup--thumbnails--scrollbar-thumb__background-color);
|
||||
border-radius: var(--vp-popup--thumbnails--scrollbar-thumb__border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,97 @@
|
||||
@import "./variables-popup";
|
||||
|
||||
/*
|
||||
* Visual Portfolio styles for PhotoSwipe.
|
||||
*/
|
||||
.vp-pswp {
|
||||
top: var(--wp-admin--admin-bar--height, 0);
|
||||
z-index: var(--vp-popup__z-index);
|
||||
height: calc(100% - var(--wp-admin--admin-bar--height, 0px));
|
||||
|
||||
.pswp__caption {
|
||||
background-color: rgba(0, 0, 0, 75%);
|
||||
|
||||
> div {
|
||||
max-width: 600px;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
h3 {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.vp-portfolio__item-meta-title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 3px;
|
||||
font-size: 14px;
|
||||
color: inherit;
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pswp__preloader {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.vp-pswp-video {
|
||||
position: relative;
|
||||
z-index: 1045;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 1920px;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
line-height: 0;
|
||||
text-align: left;
|
||||
vertical-align: middle;
|
||||
|
||||
> div {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 0;
|
||||
padding-bottom: 56.25%;
|
||||
|
||||
iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
video,
|
||||
audio {
|
||||
position: absolute;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
audio {
|
||||
padding: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Default cursor when click to zoom option disabled.
|
||||
&.vp-pswp-no-zoom .pswp__img {
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
// Fix images <a> tags.
|
||||
// https://wordpress.org/support/topic/portfolio-page-doesnt-display-images/
|
||||
.vp-portfolio__item .vp-portfolio__item-img a {
|
||||
position: unset !important;
|
||||
}
|
||||
@ -0,0 +1,33 @@
|
||||
// Fix popup buttons styles.
|
||||
// https://wordpress.org/support/topic/your-plugin-does-not-load-the-css-correctly/
|
||||
.vp-pswp {
|
||||
.pswp__button,
|
||||
.pswp__button--arrow--left::before,
|
||||
.pswp__button--arrow--right::before,
|
||||
.pswp__button:hover,
|
||||
.pswp__button--arrow--left:hover::before,
|
||||
.pswp__button--arrow--right:hover::before {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.vp-fancybox {
|
||||
.fancybox-button,
|
||||
.fancybox-button:hover {
|
||||
background-color: rgba(30, 30, 30, 60%);
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
|
||||
&::after {
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
.fancybox-button:not(:hover) {
|
||||
color: #ccc !important;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,36 @@
|
||||
// Fix headings margin.
|
||||
.entry-content .vp-portfolio__item-meta-title {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// Fix preview background color.
|
||||
.vp-preview-body {
|
||||
background: none;
|
||||
}
|
||||
|
||||
// Fix font family.
|
||||
.vp-filter__item,
|
||||
.vp-sort__item,
|
||||
.vp-sort select,
|
||||
.vp-portfolio__item-meta-category,
|
||||
.vp-pagination__item {
|
||||
font-family: "Noto Sans", sans-serif;
|
||||
}
|
||||
|
||||
// Fix links border.
|
||||
.vp-portfolio__item-meta-title,
|
||||
.vp-filter__item,
|
||||
.vp-sort__item,
|
||||
.vp-portfolio__item-meta-category,
|
||||
.vp-pagination__item,
|
||||
.vp-portfolio__item-img {
|
||||
.entry-content & a {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Fix figcaption padding.
|
||||
.wp-block-visual-portfolio[class^="wp-block-"].vp-portfolio__items-style-fade figcaption,
|
||||
.wp-block-visual-portfolio[class^="wp-block-"].vp-portfolio__items-style-fly figcaption {
|
||||
padding: 0;
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
// Fix links decoration.
|
||||
.entry .entry-content .vp-portfolio a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Fix headings margin.
|
||||
.entry-content .vp-portfolio__item-meta-title {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// Fix headings decorators.
|
||||
.vp-portfolio__item-meta-title::before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
// Fix font family.
|
||||
.vp-filter__item,
|
||||
.vp-sort__item,
|
||||
.vp-sort select,
|
||||
.vp-portfolio__item-meta-category,
|
||||
.vp-pagination__item {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||
}
|
||||
@ -0,0 +1,30 @@
|
||||
// Fix links border.
|
||||
.entry-content .vp-portfolio {
|
||||
a,
|
||||
a:hover,
|
||||
a:focus {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Fix headings padding and font.
|
||||
.entry-content .vp-portfolio__item-meta-title {
|
||||
padding-top: 0;
|
||||
font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
// Fix for figcaption in block.
|
||||
.wp-block-visual-portfolio[class^="wp-block-"]:not(.wp-block-gallery) figcaption {
|
||||
margin-bottom: 0;
|
||||
font-style: inherit;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Fix color on hover.
|
||||
.vp-portfolio__items-style-fade .vp-portfolio__item-meta:hover,
|
||||
.vp-portfolio__items-style-fade .vp-portfolio__item-meta:focus,
|
||||
.vp-portfolio__items-style-fly .vp-portfolio__item-meta:hover,
|
||||
.vp-portfolio__items-style-fly .vp-portfolio__item-meta:focus {
|
||||
color: inherit;
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
// Fix preview background color.
|
||||
.vp-preview-body {
|
||||
background: none;
|
||||
}
|
||||
|
||||
// Fix headings margin.
|
||||
.entry-content .vp-portfolio__item-meta-title {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// Fix font family.
|
||||
.vp-portfolio__item-meta-title,
|
||||
.vp-filter__item,
|
||||
.vp-sort__item,
|
||||
.vp-sort select,
|
||||
.vp-portfolio__item-meta-category,
|
||||
.vp-pagination__item {
|
||||
font-family: Montserrat, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
@ -0,0 +1,56 @@
|
||||
// Fix headings margin.
|
||||
.entry-content .vp-portfolio__item-meta-title {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// Fix caption margin.
|
||||
.vp-portfolio__item figcaption {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// Fix preview background color.
|
||||
.vp-preview-body {
|
||||
background: none;
|
||||
}
|
||||
|
||||
// Fix font family.
|
||||
.vp-filter__item,
|
||||
.vp-sort__item,
|
||||
.vp-sort select,
|
||||
.vp-portfolio__item-meta-category,
|
||||
.vp-pagination__item {
|
||||
font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
// Filters, Sort and Pagination.
|
||||
.vp-filter__style-default {
|
||||
--vp-filter-default--items__font-size: 0.7em;
|
||||
}
|
||||
|
||||
.vp-filter__style-minimal {
|
||||
--vp-filter-minimal--items__font-size: 0.7em;
|
||||
}
|
||||
|
||||
.vp-filter__style-dropdown {
|
||||
--vp-filter-dropdown--items__font-size: 0.7em;
|
||||
}
|
||||
|
||||
.vp-sort__style-default {
|
||||
--vp-sort-default--items__font-size: 0.7em;
|
||||
}
|
||||
|
||||
.vp-sort__style-minimal {
|
||||
--vp-sort-minimal--items__font-size: 0.7em;
|
||||
}
|
||||
|
||||
.vp-sort__style-dropdown {
|
||||
--vp-sort-dropdown--items__font-size: 0.7em;
|
||||
}
|
||||
|
||||
.vp-pagination__style-default {
|
||||
--vp-pagination-default--items__font-size: 0.7em;
|
||||
}
|
||||
|
||||
.vp-pagination__style-minimal {
|
||||
--vp-pagination-minimal--items__font-size: 0.7em;
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
// Fix headings margin.
|
||||
.entry-content .vp-portfolio__item-meta-title {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// Fix caption margin.
|
||||
.vp-portfolio__item figcaption {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Fix preview background color.
|
||||
.vp-preview-body {
|
||||
background: none;
|
||||
}
|
||||
|
||||
// Fix images size.
|
||||
// https://github.com/WordPress/twentytwentyone/blob/trunk/inc/template-functions.php#L405-L447.
|
||||
[data-vp-layout="tiles"] .vp-portfolio__item-img img,
|
||||
[data-vp-masonry-images-aspect-ratio*=":"] .vp-portfolio__item-img img,
|
||||
[data-vp-grid-images-aspect-ratio*=":"] .vp-portfolio__item-img img {
|
||||
width: 100% !important;
|
||||
max-width: none !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
// Fix headings margin.
|
||||
.vp-portfolio__item-meta-title {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// Fix top and bottom padding of main content in the popup iframe.
|
||||
.vp-popup-iframe .wp-site-blocks > main {
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
margin-top: 0;
|
||||
}
|
||||
Reference in New Issue
Block a user