Fix fancybox styling

parent eedb6b80
......@@ -8,9 +8,14 @@ $(function() {
afterShow: function() {
var downloadUrl = $(this.element).attr('data-download');
if(downloadUrl != undefined) {
$('<a class="fancybox-download" href="' + downloadUrl + '"></a>').appendTo(this.outer);
$('<a class="btn btn-primary fancybox-download" href="' + downloadUrl + '"><i class="fas fa-download"></i></a>').appendTo(this.outer);
}
},
padding: 0
padding: 0,
tpl: {
closeBtn: '<a title="Close" class="btn btn-primary fancybox-close" href="javascript:;"><i class="fas fa-times"></i></a>',
next: '<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span class="btn btn-primary"><i class="fas fa-arrow-right"></i></span></a>',
prev: '<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span class="btn btn-primary"><i class="fas fa-arrow-left"></i></span></a>'
}
});
});
......@@ -8,177 +8,168 @@
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
padding: 0;
margin: 0;
border: 0;
outline: none;
vertical-align: top;
.fancybox-tmp {
padding: 0;
margin: 0;
border: 0;
outline: none;
vertical-align: top;
}
.fancybox-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 8020;
position: absolute;
top: 0;
left: 0;
z-index: 8020;
}
.fancybox-skin {
position: relative;
background: #f9f9f9;
color: #444;
text-shadow: none;
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
position: relative;
background: #f9f9f9;
color: #444;
text-shadow: none;
-webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}
.fancybox-opened {
z-index: 8030;
z-index: 8030;
}
.fancybox-outer, .fancybox-inner {
position: relative;
position: relative;
}
.fancybox-inner {
overflow: hidden;
overflow: hidden;
}
.fancybox-type-iframe .fancybox-inner {
-webkit-overflow-scrolling: touch;
-webkit-overflow-scrolling: touch;
}
.fancybox-error {
color: #444;
font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
margin: 0;
padding: 15px;
white-space: nowrap;
color: #444;
font: 14px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0;
padding: 15px;
white-space: nowrap;
}
.fancybox-image, .fancybox-iframe {
display: block;
width: 100%;
height: 100%;
display: block;
width: 100%;
height: 100%;
}
.fancybox-image {
max-width: 100%;
max-height: 100%;
max-width: 100%;
max-height: 100%;
}
#fancybox-loading {
position: fixed;
top: 50%;
left: 50%;
margin-top: -22px;
margin-left: -22px;
background-position: 0 -108px;
opacity: 0.8;
cursor: pointer;
z-index: 8060;
background-color: #000;
position: fixed;
top: 50%;
left: 50%;
margin-top: -22px;
margin-left: -22px;
background-position: 0 -108px;
opacity: 0.8;
cursor: pointer;
z-index: 8060;
background-color: #000;
}
#fancybox-loading div {
width: 44px;
height: 44px;
background: url('../images/fancybox/fancybox_loading.gif') center center no-repeat;
width: 44px;
height: 44px;
background: url('../img/fancybox/fancybox_loading.gif') center center no-repeat;
}
.fancybox-close {
background:url('../images/misc/icon_close.png') 0 0 no-repeat;
background-size: 32px 64px;
position: absolute;
top: 20px;
right: 20px;
width: 32px;
height: 32px;
cursor: pointer;
z-index: 8040;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: absolute;
top: 20px;
right: 20px;
width: 32px;
height: 32px;
cursor: pointer;
z-index: 8040;
}
.fancybox-download {
background:url('../images/misc/icon_download.png') 0 0 no-repeat;
background-size: 32px 64px;
position: absolute;
top: 20px;
right: 72px;
width: 32px;
height: 32px;
cursor: pointer;
z-index: 8040;
}
.fancybox-close:hover, .fancybox-download:hover {
background-position: 0 -32px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: absolute;
top: 20px;
right: 62px;
width: 32px;
height: 32px;
cursor: pointer;
z-index: 8040;
}
.fancybox-nav {
position: absolute;
top: 0;
width: 40%;
height: 100%;
cursor: pointer;
text-decoration: none;
background: transparent url('../images/fancybox/blank.gif'); /* helps IE */
-webkit-tap-highlight-color: rgba(0,0,0,0);
z-index: 8040;
position: absolute;
top: 0;
width: 40%;
height: 100%;
cursor: pointer;
text-decoration: none;
background: transparent url('../img/fancybox/blank.gif'); /* helps IE */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
z-index: 8040;
}
.fancybox-prev {
left: 0;
left: 0;
}
.fancybox-next {
right: 0;
right: 0;
}
.fancybox-nav span {
background: url('../images/misc/slider_large_next_prev.png') 0 0 no-repeat;
background-size: 64px 64px;
position: absolute;
top: 50%;
width: 32px;
height: 32px;
margin-top: -18px;
cursor: pointer;
z-index: 8040;
visibility: hidden;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
width: 32px;
height: 32px;
margin-top: -18px;
cursor: pointer;
z-index: 8040;
visibility: hidden;
}
.fancybox-prev span {
left: 20px;
background-position: 0 0;
}
.fancybox-prev span:hover {
background-position: -32px 0;
left: 20px;
}
.fancybox-next span {
right: 20px;
background-position: 0 -32px;
}
.fancybox-next span:hover {
background-position: -32px -32px;
right: 20px;
}
.fancybox-nav:hover span {
visibility: visible;
visibility: visible;
}
.fancybox-tmp {
position: absolute;
top: -99999px;
left: -99999px;
visibility: hidden;
max-width: 99999px;
max-height: 99999px;
overflow: visible !important;
position: absolute;
top: -99999px;
left: -99999px;
visibility: hidden;
max-width: 99999px;
max-height: 99999px;
overflow: visible !important;
}
/* Overlay helper */
......@@ -197,81 +188,81 @@
}
.fancybox-overlay {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: none;
z-index: 8010;
background: rgba(255,255,255,0.7);
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: none;
z-index: 8010;
background: rgba(255, 255, 255, 0.7);
}
.fancybox-overlay-fixed {
position: fixed;
bottom: 0;
right: 0;
position: fixed;
bottom: 0;
right: 0;
}
.fancybox-lock .fancybox-overlay {
overflow: auto;
overflow-y: scroll;
overflow: auto;
overflow-y: scroll;
}
/* Title helper */
.fancybox-title {
visibility: hidden;
font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
position: relative;
text-shadow: none;
z-index: 8050;
visibility: hidden;
font: normal 13px/20px "Helvetica Neue", Helvetica, Arial, sans-serif;
position: relative;
text-shadow: none;
z-index: 8050;
}
.fancybox-opened .fancybox-title {
visibility: visible;
visibility: visible;
}
.fancybox-title-float-wrap {
position: absolute;
bottom: 0;
right: 50%;
margin-bottom: -35px;
z-index: 8050;
text-align: center;
position: absolute;
bottom: 0;
right: 50%;
margin-bottom: -35px;
z-index: 8050;
text-align: center;
}
.fancybox-title-float-wrap .child {
display: inline-block;
margin-right: -100%;
padding: 2px 20px;
background: transparent; /* Fallback for web browsers that doesn't support RGBa */
background: rgba(0, 0, 0, 0.8);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
text-shadow: 0 1px 2px #222;
color: #FFF;
font-weight: bold;
line-height: 24px;
white-space: nowrap;
display: inline-block;
margin-right: -100%;
padding: 2px 20px;
background: transparent; /* Fallback for web browsers that doesn't support RGBa */
background: rgba(0, 0, 0, 0.8);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
text-shadow: 0 1px 2px #222;
color: #FFF;
font-weight: bold;
line-height: 24px;
white-space: nowrap;
}
.fancybox-title-outside-wrap {
position: relative;
margin-top: 10px;
color: #fff;
position: relative;
margin-top: 10px;
color: #fff;
}
.fancybox-title-inside-wrap {
padding-top: 10px;
padding-top: 10px;
}
.fancybox-title-over-wrap {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
padding: 10px;
background: #000;
background: rgba(0, 0, 0, .8);
position: absolute;
bottom: 0;
left: 0;
color: #fff;
padding: 10px;
background: #000;
background: rgba(0, 0, 0, .8);
}
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
This diff was suppressed by a .gitattributes entry.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment