File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
.jBox-Image .jBox-container {
background-color: transparent;
}
.jBox-Image .jBox-content {
padding: 0;
width: 100%;
height: 100%;
}
.jBox-image-container {
background: center center no-repeat;
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
}
.jBox-image-label-container {
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 40px;
z-index: 100;
}
.jBox-image-label {
box-sizing: border-box;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
left: 0;
color: #fff;
padding: 8px 40px;
line-height: 24px;
transition: opacity .36s;
opacity: 0;
z-index: 0;
pointer-events: none;
}
.jBox-image-label.expanded {
background: #000;
}
.jBox-image-label:not(.expanded) {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.jBox-image-label.active {
opacity: 1;
pointer-events: all;
}
.jBox-image-pointer-next,
.jBox-image-pointer-prev {
position: absolute;
bottom: 0;
width: 40px;
height: 40px;
cursor: pointer;
opacity: .8;
transition: opacity .2s;
background: no-repeat center center url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ijc0LjcgMjI0IDE4LjcgMzIiPg0KPHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTkzLDIyNy40TDgwLjQsMjQwTDkzLDI1Mi42YzAuNCwwLjQsMC40LDEuMSwwLDEuNWwtMS42LDEuNmMtMC40LDAuNC0xLDAuNS0xLjUsMEw3NSwyNDAuN2MtMC40LTAuNC0wLjUtMSwwLTEuNWwxNC45LTE0LjljMC40LTAuNCwxLTAuNCwxLjUsMGwxLjYsMS42QzkzLjUsMjI2LjQsOTMuNCwyMjcsOTMsMjI3LjR6Ii8+DQo8L3N2Zz4=);
background-size: 11px auto;
user-select: none;
z-index: 1;
}
.jBox-image-pointer-next:hover,
.jBox-image-pointer-prev:hover {
opacity: 1;
}
.jBox-image-pointer-next {
right: 0;
transform: scaleX(-1);
}
.jBox-image-pointer-prev {
left: 0;
}
.jBox-image-counter-container {
position: absolute;
right: 40px;
height: 40px;
line-height: 40px;
font-size: 13px;
color: #fff;
text-align: right;
display: none;
}
.jBox-image-has-counter .jBox-image-counter-container {
display: block;
}
.jBox-image-has-counter .jBox-image-label:not(.expanded) {
padding-right: 80px;
text-indent: 40px;
}
.jBox-overlay.jBox-overlay-Image {
background: #000;
}
.jBox-image-not-found {
background: #000;
}
.jBox-image-not-found:before {
content: '';
box-sizing: border-box;
display: block;
width: 80px;
height: 80px;
margin-top: -40px;
margin-left: -40px;
position: absolute;
top: 50%;
left: 50%;
border: 5px solid #222;
border-radius: 50%;
}
.jBox-image-not-found:after {
content: '';
display: block;
box-sizing: content-box;
z-index: auto;
width: 6px;
height: 74px;
margin-top: -37px;
margin-left: -3px;
position: absolute;
top: 50%;
left: 50%;
background: #222;
transform: rotateZ(45deg);
transform-origin: 50% 50% 0;
}
/* Image spinner */
@keyframes jBoxImageLoading {
to { transform: rotate(360deg); }
}
.jBox-image-loading .jBox-container:before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 32px;
height: 32px;
margin-top: -16px;
margin-left: -16px;
border: 4px solid #333;
border-bottom-color: #666;
animation: jBoxImageLoading 1.2s linear infinite;
border-radius: 50%;
}