Blox Default Styles

blox_default_styles.css

/**
 * 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;
}