Blox Default Styles
/** | |
* Blox Frontend Default Styles | |
* | |
* This stylesheet supplies default styling for Blox. It can be disabled in the Blox settings. | |
* | |
* @package Blox | |
* @copyright Copyright (c) 2015, Nick Diego | |
* @license http://opensource.org/licenses/gpl-2.0.php GNU Public License | |
*/ | |
/* Caption Defaults | |
-------------------------------------------------------------- */ | |
.blox-theme-default .blox-caption-container { | |
bottom: 0; | |
left: 0; | |
position: absolute; | |
text-align: left; | |
width: 100%; | |
} | |
.blox-theme-default .blox-caption-wrap { | |
background: rgba(0, 0, 0, .4); | |
color: #fff; | |
padding: 10px 20px; | |
} | |
/* Static Image Defaults | |
-------------------------------------------------------------- */ | |
.blox-theme-default .blox-image-container { | |
margin: 0 auto; | |
position: relative; | |
text-align: center; | |
width: 100%; | |
} | |
.blox-theme-default .blox-image-wrap { | |
display: inline-block; | |
position: relative; | |
width: 100%; | |
} | |
.blox-theme-default .blox-image-container img { | |
vertical-align: top; | |
} | |
/* Styling for background images */ | |
.blox-theme-default .blox-image-wrap.blox-image-background { | |
display: block; | |
position: relative; | |
width: 100%; | |
height: 400px; /* Adjust as needed */ | |
background-repeat: no-repeat; | |
background-position: center center; | |
-webkit-background-size: cover; | |
-moz-background-size: cover; | |
-o-background-size: cover; | |
background-size: cover; | |
} | |
.blox-theme-default .blox-image-wrap.blox-image-background a { | |
display: block; | |
width: 100%; | |
height: 100%; | |
} | |
/* Slideshow Defaults | |
-------------------------------------------------------------- */ | |
.blox-theme-default .blox-slideshow-item { | |
position: relative; | |
} | |
/* Styling for background images */ | |
.blox-theme-default .blox-slideshow-item .blox-image-background { | |
display: block; | |
position: relative; | |
width: 100%; | |
height: 500px; /* Adjust as needed */ | |
background-repeat: no-repeat; | |
background-position: center center; | |
-webkit-background-size: cover; | |
-moz-background-size: cover; | |
-o-background-size: cover; | |
background-size: cover; | |
} | |
.blox-theme-default .blox-slideshow-item .blox-image-background a { | |
display: block; | |
width: 100%; | |
height: 100%; | |
} | |
/* Slick Slider Styling --------------- */ | |
.blox-theme-default .slick-slider *:focus { | |
outline: none; | |
} | |
.blox-theme-default .slick-slider .blox-slideshow-item.image img { | |
width: 100%; | |
max-width: 100%; | |
line-height: 0; | |
} | |
/* Arrows */ | |
.blox-theme-default .slick-slider .slick-prev, | |
.blox-theme-default .slick-slider .slick-next { | |
font-size: 0; | |
line-height: 0; | |
position: absolute; | |
top: 50%; | |
-webkit-transform: translate(0, -50%); | |
-ms-transform: translate(0, -50%); | |
transform: translate(0, -50%); | |
display: block; | |
width: 60px; | |
height: 60px; | |
color: transparent; | |
text-shadow: none; | |
line-height: 1; | |
background-repeat: no-repeat; | |
background-size: 100%; | |
text-align: right; | |
padding: 0; | |
cursor: pointer; | |
color: transparent; | |
border: none; | |
outline: none; | |
background: initial; | |
z-index:1; | |
/* Hide the nav icons initially, show on hover */ | |
visibility: hidden; | |
} | |
.blox-theme-default .slick-slider:hover .slick-prev, | |
.blox-theme-default .slick-slider:hover .slick-next { | |
visibility: visible; | |
} | |
.blox-theme-default .slick-slider .slick-prev:hover, | |
.blox-theme-default .slick-slider .slick-prev:focus, | |
.blox-theme-default .slick-slider .slick-next:hover, | |
.blox-theme-default .slick-slider .slick-next:focus { | |
outline: none; | |
} | |
.blox-theme-default .slick-slider .slick-prev:hover, | |
.blox-theme-default .slick-slider .slick-next:hover { | |
opacity: .7; | |
} | |
.blox-theme-default .slick-slider .slick-prev, | |
.blox-theme-default .slick-slider .slick-prev:hover, | |
.blox-theme-default .slick-slider .slick-prev:focus { | |
background-image: url('../images/prev.svg'); | |
left: 2%; | |
background-repeat: no-repeat; | |
background-size: 100%; | |
} | |
[dir='rtl'] .blox-theme-default .slick-slider .slick-prev { | |
right: 2%; | |
left: auto; | |
} | |
.blox-theme-default .slick-slider .slick-next, | |
.blox-theme-default .slick-slider .slick-next:hover, | |
.blox-theme-default .slick-slider .slick-next:focus { | |
background-image: url('../images/next.svg'); | |
right: 2%; | |
background-repeat: no-repeat; | |
background-size: 100%; | |
} | |
[dir='rtl'] .blox-theme-default .slick-slider .slick-next { | |
right: auto; | |
left: 2%; | |
} | |
.blox-theme-default .slick-slider .slick-prev:before, | |
.blox-theme-default .slick-slider .slick-next:before { | |
content: ''; | |
} | |
/* Disable nav arrow if there is no next/prev slide */ | |
.blox-theme-default .slick-prev.slick-disabled, | |
.blox-theme-default .slick-next.slick-disabled { | |
opacity: 0 !important; | |
cursor: default; | |
} | |
.blox-theme-default .slick-dots { | |
bottom: 3%; | |
} | |
.blox-theme-default .slick-dots li { | |
margin: 0 2px; | |
} | |
.blox-theme-default .slick-dots li button:before { | |
font-size: 14px; | |
color: #fff; | |
opacity: .6; | |
} | |
.blox-theme-default .slick-dots li button:before:hover { | |
opacity: .8; | |
} | |
.blox-theme-default .slick-dots li.slick-active button:before { | |
color: #fff; | |
opacity: 1; | |
} | |
/* Dark Slideshow Theme */ | |
.blox-theme-default.dark .slick-slider .slick-prev, | |
.blox-theme-default.dark .slick-slider .slick-prev:hover, | |
.blox-theme-default.dark .slick-slider .slick-prev:focus { | |
background-image: url('../images/prev-dark.svg'); | |
} | |
.blox-theme-default.dark .slick-slider .slick-next, | |
.blox-theme-default.dark .slick-slider .slick-next:hover, | |
.blox-theme-default.dark .slick-slider .slick-next:focus { | |
background-image: url('../images/next-dark.svg') | |
} | |
.blox-theme-default.dark .slick-dots li button:before { | |
color: #000; | |
} | |
.blox-theme-default.dark .slick-dots li.slick-active button:before { | |
color: #000; | |
} | |
/* Flexslider Styling --------------- */ | |
.blox-theme-default .flexslider { | |
margin: 0 0 0; | |
background: #ffffff; | |
border: none; | |
-webkit-border-radius: 0; | |
-moz-border-radius: 0; | |
border-radius: 0; | |
-webkit-box-shadow: none; | |
-moz-box-shadow: none; | |
-o-box-shadow: none; | |
box-shadow: none; | |
} | |
.blox-theme-default .flexslider .slides > li { | |
position: relative; | |
} | |
.blox-theme-default .flex-direction-nav a { | |
width: 60px; | |
height: 70px; | |
margin: -20px 0 0; | |
top: 48%; | |
color: transparent; /* Used to make default text disappear without ruining default Flexslider theme */ | |
text-shadow: none; | |
line-height: 1; | |
} | |
.blox-theme-default .flex-direction-nav a:before { | |
content: ''; /* remove default icon font */ | |
} | |
.blox-theme-default .flex-direction-nav a.flex-next:before { | |
content: ''; /* remove default icon font */ | |
} | |
.blox-theme-default .flex-direction-nav .flex-prev { | |
background-image: url('../images/prev.svg'); | |
background-repeat: no-repeat; | |
background-size: 100%; | |
left: 2%; | |
} | |
.blox-theme-default .flex-direction-nav .flex-next { | |
background-image: url('../images/next.svg'); | |
background-repeat: no-repeat; | |
background-size: 100%; | |
right: 2%; | |
text-align: right; | |
} | |
.blox-theme-default .flexslider:hover .flex-direction-nav .flex-prev { | |
opacity: 1; | |
left: 2%; | |
} | |
.blox-theme-default .flexslider:hover .flex-direction-nav .flex-prev:hover { | |
opacity: 0.7; | |
} | |
.blox-theme-default .flexslider:hover .flex-direction-nav .flex-next { | |
opacity: 1; | |
right: 2%; | |
} | |
.blox-theme-default .flexslider:hover .flex-direction-nav .flex-next:hover { | |
opacity: 0.7; | |
} | |
.blox-theme-default .flex-control-nav { | |
bottom: 3%; | |
z-index: 1000; | |
} | |
.blox-theme-default .flex-control-paging li a { | |
background: #fff; | |
background: rgba(255, 255, 255, 0.6); | |
-webkit-box-shadow: none; | |
-moz-box-shadow: none; | |
-o-box-shadow: none; | |
box-shadow: none; | |
} | |
.blox-theme-default .flex-control-paging li a:hover { | |
background: #fff; | |
background: rgba(255, 255, 255, 0.8); | |
} | |
.blox-theme-default .flex-control-paging li a.flex-active { | |
background: #fff; | |
background: rgba(255, 255, 255, 1); | |
cursor: default; | |
} | |
/* Dark Slideshow Theme */ | |
.blox-theme-default.dark .flex-direction-nav .flex-prev { | |
background-image: url('../images/prev-dark.svg'); | |
} | |
.blox-theme-default.dark .flex-direction-nav .flex-next { | |
background-image: url('../images/next-dark.svg'); | |
} | |
.blox-theme-default.dark .flex-control-paging li a { | |
background: #000; | |
background: rgba(0, 0, 0, 0.6); | |
} | |
.blox-theme-default.dark .flex-control-paging li a:hover { | |
background: #000; | |
background: rgba(0, 0, 0, 0.8); | |
} | |
.blox-theme-default.dark .flex-control-paging li a.flex-active { | |
background: #000; | |
background: rgba(0, 0, 0, 1); | |
cursor: default; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment