lc-micro-slider/themes/default_theme.css

Lightweight vanilla javascript (ES6) media and contents slider

/*  LC STYLES */

.lcms_default_theme.lcms_wrap {
	border: 6px solid #fff;
    box-shadow: 0 -1px 7px rgba(0, 0, 0, 0.3);
}


/* slide type */
.lcms_default_theme .lcms_slide[data-type="image"] .lcms_content {
	bottom: 0;
	left: 0;
	right: 0;
	padding: 13px 20px;
	background: rgba(20, 20, 20, 0.7);
	color: #fff;
	font-size: 1em;
	line-height: 1.2em;
}
.lcms_default_theme .lcms_slide[data-type="video"] .lcms_content,
.lcms_default_theme .lcms_slide[data-type="iframe"] .lcms_content {
	background: #222;
}
.lcms_default_theme .lcms_slide[data-type="mixed"] .lcms_content {
    padding: 25px;
	background: rgba(20, 20, 20, 0.5);
    color: #fdfdfd;
}


/* default CSS3 loader */
.lcms_default_theme .lcms_loader:before,
.lcms_default_theme .lcms_loader:after {
	content: "";
	position: absolute;
	height: 0px;
	width: 0px;
	top: 50%;
	left: 50%;
	margin-top: 0;
	margin-left: 0;	
	border-radius: 50%;
	animation: lcms_bt_loader 2s infinite ease-in-out;
}
.lcms_default_theme .lcms_loader:before {
	z-index: 100; 
	background: #555;
	background: rgba(50, 50, 50, 0.4);
}
.lcms_default_theme .lcms_loader:after {
	z-index: 110; 
	background: #777;
	background: rgba(70, 70, 70, 0.4);
	-webkit-animation-delay: -1s;
	animation-delay: -1s;
}
@keyframes lcms_bt_loader {
	0% { width: 0; height: 0; margin-top: 0; margin-left: 0; }
	50% { width: 30px; height: 30px; margin-top: -15px; margin-left: -15px; }
	100% { width: 0; height: 0; margin-top: 0; margin-left: 0; }
}


/* default navigation style */
.lcms_default_theme.lcms_default_theme .lcms_nav,
.lcms_default_theme .lcms_play {
	top: 10px;
	left: 10px;
	opacity: 0;
	transition: all .2s ease-in .5s;
	transform: scale(0.8);
}
.lcms_default_theme.lcms_wrap:not(.lcms_already_hovered) .lcms_nav,
.lcms_default_theme.lcms_wrap:not(.lcms_already_hovered) .lcms_play,
.lcms_default_theme.lcms_wrap:hover .lcms_nav,
.lcms_default_theme.lcms_wrap:hover .lcms_play,
.lcms_default_theme.lcms_wrap:focus-within .lcms_nav,
.lcms_default_theme.lcms_wrap:focus-within .lcms_play {
	opacity: 1;
	transition: all .2s ease-in 0s;
	transform: scale(1);
}
@media screen and (max-width: 1024px) { 
    .lcms_default_theme.lcms_wrap .lcms_nav,
    .lcms_default_theme.lcms_wrap .lcms_play {
        opacity: 1;
        transition: all .2s ease-in 0s;
        transform: scale(1);
    }
}
.lcms_default_theme .lcms_nav *,
.lcms_default_theme .lcms_play span {
	display: inline-block;
	float: left;
	cursor: pointer;
	width: 27px;
	height: 27px;
	background: #fff;
	text-align: center;
	overflow: hidden;
	border-radius: 3px;
	vertical-align: top;
	box-shadow: 0 0 2px rgba(0,0,0, 0.1);
	transition: all .2s ease-in;
}
.lcms_default_theme .lcms_nav > *:not(.lcms_disabled_btn):hover,
.lcms_default_theme .lcms_play span:not(.lcms_disabled_btn):hover {
	box-shadow: 0 0 3px rgba(0,0,0, 0.2);
}
.lcms_default_theme .lcms_prev {
	margin-right: 4px;
}


/* icons */
.lcms_default_theme .lcms_prev:before,
.lcms_default_theme .lcms_next:before,
.lcms_default_theme .lcms_play *:before {
    content: "";
    background-repeat: no-repeat;
    background-size: 8px;
    background-position: center;
    display: block;
    height: 100%;
    opacity: 0.6;
    transition: opacity .2s linear;
}
.lcms_default_theme .lcms_prev:before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJjaGV2cm9uLWxlZnQiIGNsYXNzPSJzdmctaW5saW5lLS1mYSBmYS1jaGV2cm9uLWxlZnQgZmEtdy0xMCIgcm9sZT0iaW1nIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMjAgNTEyIj48cGF0aCBmaWxsPSJjdXJyZW50Q29sb3IiIGQ9Ik0zNC41MiAyMzkuMDNMMjI4Ljg3IDQ0LjY5YzkuMzctOS4zNyAyNC41Ny05LjM3IDMzLjk0IDBsMjIuNjcgMjIuNjdjOS4zNiA5LjM2IDkuMzcgMjQuNTIuMDQgMzMuOUwxMzEuNDkgMjU2bDE1NC4wMiAxNTQuNzVjOS4zNCA5LjM4IDkuMzIgMjQuNTQtLjA0IDMzLjlsLTIyLjY3IDIyLjY3Yy05LjM3IDkuMzctMjQuNTcgOS4zNy0zMy45NCAwTDM0LjUyIDI3Mi45N2MtOS4zNy05LjM3LTkuMzctMjQuNTcgMC0zMy45NHoiPjwvcGF0aD48L3N2Zz4=");
}
.lcms_default_theme .lcms_next:before {
    background-image: url("data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJjaGV2cm9uLXJpZ2h0IiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtY2hldnJvbi1yaWdodCBmYS13LTEwIiByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDMyMCA1MTIiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTI4NS40NzYgMjcyLjk3MUw5MS4xMzIgNDY3LjMxNGMtOS4zNzMgOS4zNzMtMjQuNTY5IDkuMzczLTMzLjk0MSAwbC0yMi42NjctMjIuNjY3Yy05LjM1Ny05LjM1Ny05LjM3NS0yNC41MjItLjA0LTMzLjkwMUwxODguNTA1IDI1NiAzNC40ODQgMTAxLjI1NWMtOS4zMzUtOS4zNzktOS4zMTctMjQuNTQ0LjA0LTMzLjkwMWwyMi42NjctMjIuNjY3YzkuMzczLTkuMzczIDI0LjU2OS05LjM3MyAzMy45NDEgMEwyODUuNDc1IDIzOS4wM2M5LjM3MyA5LjM3MiA5LjM3MyAyNC41NjguMDAxIDMzLjk0MXoiPjwvcGF0aD48L3N2Zz4=");
}
.lcms_default_theme .lcms_play *:before {
    background-size: 9px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJwbGF5IiBjbGFzcz0ic3ZnLWlubGluZS0tZmEgZmEtcGxheSBmYS13LTE0IiByb2xlPSJpbWciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDQ0OCA1MTIiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZD0iTTQyNC40IDIxNC43TDcyLjQgNi42QzQzLjgtMTAuMyAwIDYuMSAwIDQ3LjlWNDY0YzAgMzcuNSA0MC43IDYwLjEgNzIuNCA0MS4zbDM1Mi0yMDhjMzEuNC0xOC41IDMxLjUtNjQuMSAwLTgyLjZ6Ij48L3BhdGg+PC9zdmc+");
}
.lcms_default_theme .lcms_play.lcms_pause *:before {
    background-size: 11px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyBhcmlhLWhpZGRlbj0idHJ1ZSIgZm9jdXNhYmxlPSJmYWxzZSIgZGF0YS1wcmVmaXg9ImZhcyIgZGF0YS1pY29uPSJwYXVzZSIgY2xhc3M9InN2Zy1pbmxpbmUtLWZhIGZhLXBhdXNlIGZhLXctMTQiIHJvbGU9ImltZyIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2aWV3Qm94PSIwIDAgNDQ4IDUxMiI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMTQ0IDQ3OUg0OGMtMjYuNSAwLTQ4LTIxLjUtNDgtNDhWNzljMC0yNi41IDIxLjUtNDggNDgtNDhoOTZjMjYuNSAwIDQ4IDIxLjUgNDggNDh2MzUyYzAgMjYuNS0yMS41IDQ4LTQ4IDQ4em0zMDQtNDhWNzljMC0yNi41LTIxLjUtNDgtNDgtNDhoLTk2Yy0yNi41IDAtNDggMjEuNS00OCA0OHYzNTJjMCAyNi41IDIxLjUgNDggNDggNDhoOTZjMjYuNSAwIDQ4LTIxLjUgNDgtNDh6Ij48L3BhdGg+PC9zdmc+") !important;
}
.lcms_default_theme .lcms_disabled_btn:before {
	opacity: 0.35;	
}
.lcms_default_theme .lcms_prev:not(.lcms_disabled_btn):hover:before,
.lcms_default_theme .lcms_next:not(.lcms_disabled_btn):hover:before,
.lcms_default_theme .lcms_play *:not(.lcms_disabled_btn):hover:before,
.lcms_default_theme .lcms_prev:not(.lcms_disabled_btn):focus:before,
.lcms_default_theme .lcms_next:not(.lcms_disabled_btn):focus:before,
.lcms_default_theme .lcms_play *:not(.lcms_disabled_btn):focus:before{
    opacity: .9;
}


/* default nav dots */
.lcms_default_theme .lcms_nav_dots span {
	border-radius: 50%;
	background: transparent;
	border: 2px solid #777;
	display: inline-block;
	height: 13px;
	width: 13px;	
	margin: 0 6px;
	cursor: pointer;
	transition: all .3s ease;
}
.lcms_default_theme .lcms_nav_dots span:not(.lcms_sel_dot):hover {	
	box-shadow: 0 -9px 0 0 #999 inset;
}
.lcms_default_theme .lcms_nav_dots span.lcms_sel_dot {
	box-shadow: 0 -9px 0 0 #cfcfcf inset;
}


/* default play/pause style */
.lcms_default_theme .lcms_play {
	right: 10px;	
	left: auto;
}