You've already forked Ghost-Theme-Source
Pagination, responsive video, and lightbox
This commit is contained in:
Sodbileg Gansukh
@@ -43,6 +43,7 @@ production stylesheet in assets/built/screen.css
|
||||
21.1. Footer styles
|
||||
21.2. Footer bar
|
||||
21.3. Footer signup
|
||||
22. Lightbox
|
||||
|
||||
*/
|
||||
|
||||
@@ -934,14 +935,14 @@ Search LOGO Login Subscribe
|
||||
}
|
||||
|
||||
.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-title {
|
||||
font-size: clamp(2rem, 2.73vw + 0.91rem, 4.4rem);
|
||||
font-size: clamp(3.2rem, 1.82vw + 2.47rem, 4.8rem);
|
||||
font-weight: 750;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.022em;
|
||||
}
|
||||
|
||||
.gh-header.is-magazine .gh-header-inner > .gh-card .gh-card-excerpt {
|
||||
margin-top: 16px;
|
||||
margin-top: clamp(12px, 0.45vw + 10.18px, 16px);
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
@@ -1065,14 +1066,14 @@ Search LOGO Login Subscribe
|
||||
}
|
||||
|
||||
.gh-header.is-highlight .gh-header-left .gh-card .gh-card-title {
|
||||
font-size: clamp(2.4rem, 2.73vw + 1.31rem, 4.8rem);
|
||||
font-size: clamp(3.2rem, 1.82vw + 2.47rem, 4.8rem);
|
||||
font-weight: 750;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.022em;
|
||||
}
|
||||
|
||||
.gh-header.is-highlight .gh-header-left .gh-card .gh-card-excerpt {
|
||||
margin-top: 16px;
|
||||
margin-top: clamp(12px, 0.45vw + 10.18px, 16px);
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
@@ -1192,6 +1193,10 @@ Search LOGO Login Subscribe
|
||||
.gh-header.is-highlight .gh-card-image {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.gh-header.is-highlight .gh-header-middle .gh-card .gh-card-excerpt {
|
||||
display: -webkit-box;
|
||||
}
|
||||
}
|
||||
|
||||
/* 8.3. Classic layout */
|
||||
@@ -1591,6 +1596,16 @@ Search LOGO Login Subscribe
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.gh-container.is-list .gh-card-link {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.gh-container.is-list .gh-card-image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 12.2. Grid style */
|
||||
|
||||
.gh-container.is-grid .gh-feed {
|
||||
@@ -1688,7 +1703,7 @@ Search LOGO Login Subscribe
|
||||
}
|
||||
|
||||
.gh-article-header {
|
||||
margin: 72px 0 40px;
|
||||
margin: clamp(40px, 3.64vw + 25.45px, 72px) 0 40px;
|
||||
}
|
||||
|
||||
.gh-article-tag {
|
||||
@@ -1701,15 +1716,15 @@ Search LOGO Login Subscribe
|
||||
}
|
||||
|
||||
.gh-article-title {
|
||||
font-size: calc(clamp(3.2rem, 1.59vw + 2.56rem, 4.6rem) * var(--factor, 1));
|
||||
font-size: calc(clamp(3.4rem, 1.36vw + 2.85rem, 4.6rem) * var(--factor, 1));
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.022em;
|
||||
}
|
||||
|
||||
.gh-article-excerpt {
|
||||
margin-top: 16px;
|
||||
margin-top: clamp(12px, 0.45vw + 10.18px, 16px);
|
||||
max-width: 720px;
|
||||
font-size: 2.2rem;
|
||||
font-size: clamp(2rem, 0.23vw + 1.91rem, 2.2rem);
|
||||
line-height: 1.35;
|
||||
letter-spacing: -0.018em;
|
||||
}
|
||||
@@ -1814,34 +1829,34 @@ headings, text, images and lists. We deal with cards lower down. */
|
||||
|
||||
.gh-content {
|
||||
font-size: calc(var(--content-font-size, 1.8rem) * var(--font-multiplier, 1));
|
||||
letter-spacing: var(--content-letter-spacing, 0);
|
||||
letter-spacing: -0.014em;
|
||||
}
|
||||
|
||||
/* Default vertical spacing */
|
||||
.gh-content > * + * {
|
||||
margin-top: calc(28px * var(--content-spacing-multiplier, 1));
|
||||
margin-top: calc(28px * var(--content-spacing-factor, 1));
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* Add back a top margin to all headings,
|
||||
unless a heading is the very first element in the post content */
|
||||
.gh-content > [id]:not(:first-child) {
|
||||
margin-top: calc(48px * var(--content-spacing-multiplier, 1));
|
||||
margin-top: calc(48px * var(--content-spacing-factor, 1));
|
||||
}
|
||||
|
||||
/* Add a small margin between a heading and anything after it */
|
||||
.gh-content > [id] + * {
|
||||
margin-top: calc(16px * var(--content-spacing-multiplier, 1));
|
||||
margin-top: calc(16px * var(--content-spacing-factor, 1));
|
||||
}
|
||||
|
||||
/* A larger margin before/after dividers, blockquotes and embeds */
|
||||
.gh-content > :is(hr, blockquote, iframe) {
|
||||
position: relative;
|
||||
margin-top: calc(48px * var(--content-spacing-multiplier, 1)) !important;
|
||||
margin-top: calc(48px * var(--content-spacing-factor, 1)) !important;
|
||||
}
|
||||
|
||||
.gh-content > :is(hr, blockquote, iframe) + * {
|
||||
margin-top: calc(48px * var(--content-spacing-multiplier, 1)) !important;
|
||||
margin-top: calc(48px * var(--content-spacing-factor, 1)) !important;
|
||||
}
|
||||
|
||||
/* Now the content typography styles */
|
||||
@@ -1953,19 +1968,19 @@ unless a heading is the very first element in the post content */
|
||||
/* Add extra margin before/after any cards, except for when immediately preceeded by a heading */
|
||||
|
||||
.gh-content :not(.kg-card):not(table):not([id]) + :is(.kg-card, table) {
|
||||
margin-top: calc(48px * var(--content-spacing-multiplier, 1));
|
||||
margin-top: calc(48px * var(--content-spacing-factor, 1));
|
||||
}
|
||||
|
||||
.gh-content :is(.kg-card, table) + :not(.kg-card):not(table):not([id]) {
|
||||
margin-top: calc(48px * var(--content-spacing-multiplier, 1));
|
||||
margin-top: calc(48px * var(--content-spacing-factor, 1));
|
||||
}
|
||||
|
||||
.gh-content :not(.kg-card):not([id]) + .kg-card.kg-width-full {
|
||||
margin-top: calc(68px * var(--content-spacing-multiplier, 1));
|
||||
margin-top: calc(68px * var(--content-spacing-factor, 1));
|
||||
}
|
||||
|
||||
.gh-content .kg-card.kg-width-full + :not(.kg-card):not([id]) {
|
||||
margin-top: calc(68px * var(--content-spacing-multiplier, 1));
|
||||
margin-top: calc(68px * var(--content-spacing-factor, 1));
|
||||
}
|
||||
|
||||
/* Image */
|
||||
@@ -2177,25 +2192,17 @@ figcaption a {
|
||||
.gh-archive {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
align-items: center;
|
||||
gap: var(--grid-gap);
|
||||
margin-block: 80px 24px;
|
||||
padding-bottom: 48px;
|
||||
padding-bottom: clamp(40px, 2.73vw + 29.09px, 64px);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.gh-archive.has-image {
|
||||
align-items: center;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.gh-archive.has-image .gh-article-title {
|
||||
font-size: 5.6rem;
|
||||
}
|
||||
|
||||
.gh-archive .gh-article-excerpt {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.gh-archive .gh-article-image {
|
||||
grid-column: auto;
|
||||
margin-top: 0;
|
||||
@@ -2214,8 +2221,8 @@ figcaption a {
|
||||
|
||||
.author-template .gh-article-image {
|
||||
margin-top: 0;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@@ -2251,12 +2258,12 @@ figcaption a {
|
||||
@media (max-width: 767px) {
|
||||
.gh-archive {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-direction: column-reverse;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.author-template .gh-archive {
|
||||
flex-direction: column-reverse;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2440,22 +2447,22 @@ figcaption a {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-bottom: 120px;
|
||||
padding-bottom: 160px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gh-footer-signup-header {
|
||||
font-size: calc(clamp(3.2rem, 2.5vw + 2.2rem, 5.4rem) * var(--factor, 1));
|
||||
font-size: calc(clamp(3.2rem, 1.82vw + 2.47rem, 4.8rem) * var(--factor, 1));
|
||||
font-weight: 750;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
.gh-footer-signup-subhead {
|
||||
margin-top: 8px;
|
||||
max-width: 720px;
|
||||
margin-top: 12px;
|
||||
max-width: 640px;
|
||||
font-size: clamp(1.6rem, 0.68vw + 1.33rem, 2.2rem);
|
||||
font-weight: 450;
|
||||
line-height: 1.5;
|
||||
line-height: 1.4;
|
||||
letter-spacing: -0.018em;
|
||||
opacity: 0.6;
|
||||
}
|
||||
@@ -2478,4 +2485,500 @@ figcaption a {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 22. Lightbox
|
||||
/* ---------------------------------------------------------- */
|
||||
|
||||
.pswp {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 3999999;
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
-ms-touch-action: none;
|
||||
touch-action: none;
|
||||
outline: none;
|
||||
backface-visibility: hidden;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
.pswp img {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.pswp--animate_opacity {
|
||||
opacity: 0.001;
|
||||
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
.pswp--open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pswp--zoom-allowed .pswp__img {
|
||||
cursor: zoom-in;
|
||||
}
|
||||
|
||||
.pswp--zoomed-in .pswp__img {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.pswp--dragging .pswp__img {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.pswp__bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.85);
|
||||
opacity: 0;
|
||||
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
.pswp__scroll-wrap {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pswp__container,
|
||||
.pswp__zoom-wrap {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
touch-action: none;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.pswp__container,
|
||||
.pswp__img {
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
}
|
||||
|
||||
.pswp__zoom-wrap {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
transform-origin: left top;
|
||||
}
|
||||
|
||||
.pswp--animated-in .pswp__bg,
|
||||
.pswp--animated-in .pswp__zoom-wrap {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.pswp__item {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pswp__img {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.pswp__img--placeholder {
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.pswp__img--placeholder--blank {
|
||||
background: var(--color-black);
|
||||
}
|
||||
|
||||
.pswp--ie .pswp__img {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.pswp__error-msg {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
margin-top: -8px;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: var(--color-secondary-text);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pswp__error-msg a {
|
||||
color: var(--color-secondary-text);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.pswp__button {
|
||||
position: relative;
|
||||
display: block;
|
||||
float: right;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: visible;
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.pswp__button:focus,
|
||||
.pswp__button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.pswp__button:active {
|
||||
outline: none;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.pswp__button::-moz-focus-inner {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.pswp__ui--over-close .pswp__button--close {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.pswp__button,
|
||||
.pswp__button--arrow--left::before,
|
||||
.pswp__button--arrow--right::before {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: url("../images/default-skin.png") 0 0 no-repeat;
|
||||
background-size: 264px 88px;
|
||||
}
|
||||
|
||||
@media (-webkit-min-device-pixel-ratio: 1.1), (-webkit-min-device-pixel-ratio: 1.09375), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
|
||||
.pswp--svg .pswp__button,
|
||||
.pswp--svg .pswp__button--arrow--left::before,
|
||||
.pswp--svg .pswp__button--arrow--right::before {
|
||||
background-image: url("../images/default-skin.svg");
|
||||
}
|
||||
|
||||
.pswp--svg .pswp__button--arrow--left,
|
||||
.pswp--svg .pswp__button--arrow--right {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
.pswp__button--close {
|
||||
background-position: 0 -44px;
|
||||
}
|
||||
|
||||
.pswp__button--share {
|
||||
background-position: -44px -44px;
|
||||
}
|
||||
|
||||
.pswp__button--fs {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pswp--supports-fs .pswp__button--fs {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pswp--fs .pswp__button--fs {
|
||||
background-position: -44px 0;
|
||||
}
|
||||
|
||||
.pswp__button--zoom {
|
||||
display: none;
|
||||
background-position: -88px 0;
|
||||
}
|
||||
|
||||
.pswp--zoom-allowed .pswp__button--zoom {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.pswp--zoomed-in .pswp__button--zoom {
|
||||
background-position: -132px 0;
|
||||
}
|
||||
|
||||
.pswp--touch .pswp__button--arrow--left,
|
||||
.pswp--touch .pswp__button--arrow--right {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.pswp__button--arrow--left,
|
||||
.pswp__button--arrow--right {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 70px;
|
||||
height: 100px;
|
||||
margin-top: -50px;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.pswp__button--arrow--left {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.pswp__button--arrow--right {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.pswp__button--arrow--left::before,
|
||||
.pswp__button--arrow--right::before {
|
||||
position: absolute;
|
||||
top: 35px;
|
||||
width: 32px;
|
||||
height: 30px;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.pswp__button--arrow--left::before {
|
||||
left: 6px;
|
||||
background-position: -138px -44px;
|
||||
}
|
||||
|
||||
.pswp__button--arrow--right::before {
|
||||
right: 6px;
|
||||
background-position: -94px -44px;
|
||||
}
|
||||
|
||||
.pswp__counter {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 44px;
|
||||
padding: 0 15px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
line-height: 44px;
|
||||
color: var(--color-white);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.pswp__caption {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.pswp__caption__center {
|
||||
max-width: 420px;
|
||||
padding: 25px 15px 30px;
|
||||
margin: 0 auto;
|
||||
font-size: 11px;
|
||||
line-height: 1.6;
|
||||
color: var(--color-white);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.pswp__caption__center .post-caption-title {
|
||||
margin-bottom: 7px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.pswp__caption__center .post-caption-meta-item + .post-caption-meta-item::before {
|
||||
padding: 0 4px;
|
||||
content: "\02022";
|
||||
}
|
||||
|
||||
.pswp__caption--empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pswp__caption--fake {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.pswp__preloader {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin-left: -22px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s ease-out;
|
||||
direction: ltr;
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
.pswp__preloader__icn {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 12px;
|
||||
}
|
||||
|
||||
.pswp__preloader--active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.pswp__preloader--active .pswp__preloader__icn {
|
||||
background: url("../images/preloader.gif") 0 0 no-repeat;
|
||||
}
|
||||
|
||||
.pswp--css_animation .pswp__preloader--active {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
|
||||
animation: clockwise 500ms linear infinite;
|
||||
}
|
||||
|
||||
.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
|
||||
animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
|
||||
}
|
||||
|
||||
.pswp--css_animation .pswp__preloader__icn {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin: 0;
|
||||
background: none;
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.pswp--css_animation .pswp__preloader__cut {
|
||||
position: relative;
|
||||
width: 7px;
|
||||
height: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.pswp--css_animation .pswp__preloader__donut {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
box-sizing: border-box;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin: 0;
|
||||
background: none;
|
||||
border: 2px solid var(--color-white);
|
||||
border-bottom-color: transparent;
|
||||
border-left-color: transparent;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1024px) {
|
||||
.pswp__preloader {
|
||||
position: relative;
|
||||
top: auto;
|
||||
left: auto;
|
||||
float: right;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes clockwise {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes donut-rotate {
|
||||
0% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: rotate(-140deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
.pswp__ui {
|
||||
z-index: 1550;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
-webkit-font-smoothing: auto;
|
||||
}
|
||||
|
||||
.pswp__top-bar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.pswp__caption,
|
||||
.pswp__top-bar,
|
||||
.pswp--has_mouse .pswp__button--arrow--left,
|
||||
.pswp--has_mouse .pswp__button--arrow--right {
|
||||
backface-visibility: hidden;
|
||||
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
|
||||
will-change: opacity;
|
||||
}
|
||||
|
||||
.pswp--has_mouse .pswp__button--arrow--left,
|
||||
.pswp--has_mouse .pswp__button--arrow--right {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.pswp__ui--idle .pswp__top-bar {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.pswp__ui--idle .pswp__button--arrow--left,
|
||||
.pswp__ui--idle .pswp__button--arrow--right {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.pswp__ui--hidden .pswp__top-bar,
|
||||
.pswp__ui--hidden .pswp__caption,
|
||||
.pswp__ui--hidden .pswp__button--arrow--left,
|
||||
.pswp__ui--hidden .pswp__button--arrow--right {
|
||||
opacity: 0.001;
|
||||
}
|
||||
|
||||
.pswp__ui--one-slide .pswp__button--arrow--left,
|
||||
.pswp__ui--one-slide .pswp__button--arrow--right,
|
||||
.pswp__ui--one-slide .pswp__counter {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pswp__element--disabled {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.pswp--minimal--dark .pswp__top-bar {
|
||||
background: none;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user