123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152 |
- html.fssopen, html.fssopen body{ /* class added to HTML element when full screen slider is open to hide potential body scrollbars */
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- margin: 0;
- overflow: hidden;
- }
- section.dd_fullscreenslider{
- position: fixed;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- z-index: 2000;
- font-size: 16px; /* base font size */
- visibility: visible;
- overflow: hidden;
- }
- div.slidewrapper{ /* wrapper DIV that surrounds the ARTICLE elements inside .dd_fullscreenslider */
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
- -webkit-transform: translate3d(0, 0, 0); /* to prevent flickering in iOS */
- -moz-transition: -moz-transform 0.5s; /* actual duration controlled by script */
- -webkit-transition: -webkit-transform 0.5s;
- transition: transform 0.5s;
- }
- ul.fssnav{ /* UL list dynamically added by script for Slider navigation */
- list-style: none;
- display: none;
- padding: 0;
- margin: 0;
- position: fixed;
- top: 50%; /* vertically center menu */
- right: 20px; /* distance from right edge of screen */
- transform: translateY(-50%); /* vertically center menu */
- }
- ul.fssnav li{
- margin-bottom: 15px;
- }
- ul.fssnav li a{
- text-decoration: none;
- border: 5px solid white; /* border color of nav links */
- border-radius: 50%;
- width: 10px; /* dimensions of nav links */
- height: 10px;
- display: block;
- position: relative;
- text-indent: -500px;
- outline: none;
- overflow: hidden;
- }
- ul.fssnav li a::after{ /* create "fill" element inside A */
- content: "";
- position: absolute;
- width: 100%;
- height: 100%;
- top: 100%;
- left: 0;
- background: white; /* color of "fill" element */
- transition: top 0.5s; /* transition for "fill up" effect */
- }
- ul.fssnav li.selected a::after{
- top: 0; /* fill up selected A element from bottom to top */
- }
- section.dd_fullscreenslider article.slide{ /* CSS for each slide */
- width: 100%;
- height: 100%;
- display: block;
- font-family: 'Lato', sans-serif; /* Use google font */
- font-size: 1.2em;
- line-height: 2em;
- color: white;
- overflow: hidden;
- -webkit-box-sizing: border-box; /* include padding/ border as part of declared menu width */
- -moz-box-sizing: border-box;
- z-index: 1000;
- -webkit-transform: translate3d(0, 0, 0); /* to prevent flickering in iOS */
- }
- section.dd_fullscreenslider article.slide h2{ /* H2 Header inside each slide */
- font-size: 3em;
- margin: 0;
- line-height: 1.1em;
- letter-spacing: 3px;
- }
- section.dd_fullscreenslider article.slide .scrollable{ /* Assign this class to elements within a slide that should be scrollable */
- overflow: auto;
- }
- section.dd_fullscreenslider article.slide a{
- color: yellow;
- }
- section.dd_fullscreenslider article.slide:nth-of-type(2){ /* 2nd demo slide bgcolor */
- background: #22AFE2;
- }
- section.dd_fullscreenslider article.slide:nth-of-type(3){ /* 3rd demo slide bgcolor */
- background: #88D332;
- }
- section.dd_fullscreenslider article.slide:nth-of-type(4){ /* 4th demo slide bgcolor */
- background: #A36400;
- }
- section.dd_fullscreenslider div.closex{ /* Large x close button inside Slider */
- width: 50px;
- height: 50px;
- overflow: hidden;
- display: block;
- position: fixed;
- cursor: pointer;
- text-indent: -1000px;
- opacity: 0.8;
- z-index: 1001;
- top: 5px;
- right: 3px;
- }
- section.dd_fullscreenslider div.closex::before, section.dd_fullscreenslider div.closex::after{ /* render large x inside close button */
- content: "";
- display: block;
- position: absolute;
- width: 100%;
- height: 6px;
- background: white; /* color of x button */
- top: 50%;
- margin-top: -3px;
- -ms-transform: rotate(-45deg);
- -webkit-transform: rotate(-45deg);
- transform: rotate(-45deg);
- }
- section.dd_fullscreenslider div.closex::after{ /* render large cross inside close button */
- -ms-transform: rotate(-135deg);
- -webkit-transform: rotate(-135deg);
- transform: rotate(-135deg);
- }
|