Line 208: | Line 208: | ||
.cd-slider h2 { | .cd-slider h2 { | ||
font-weight: 300; | font-weight: 300; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | /* -------------------------------- | ||
+ | |||
+ | Slider Navigation | ||
+ | |||
+ | -------------------------------- */ | ||
+ | .cd-slider-navigation { | ||
+ | /* you won't see this element in the html but it will be created using jQuery */ | ||
+ | position: absolute; | ||
+ | z-index: 3; | ||
+ | left: 50%; | ||
+ | right: auto; | ||
+ | -webkit-transform: translateX(-50%); | ||
+ | -moz-transform: translateX(-50%); | ||
+ | -ms-transform: translateX(-50%); | ||
+ | -o-transform: translateX(-50%); | ||
+ | transform: translateX(-50%); | ||
+ | bottom: 30px; | ||
+ | } | ||
+ | .cd-slider-navigation li { | ||
+ | display: inline-block; | ||
+ | margin: 0 .25em; | ||
+ | } | ||
+ | .cd-slider-navigation li.selected a { | ||
+ | background-color: #ffffff; | ||
+ | } | ||
+ | .cd-slider-navigation a { | ||
+ | display: block; | ||
+ | height: 8px; | ||
+ | width: 8px; | ||
+ | border-radius: 50%; | ||
+ | color: transparent; | ||
+ | /* image replacement */ | ||
+ | white-space: nowrap; | ||
+ | text-indent: 100%; | ||
+ | overflow: hidden; | ||
+ | border: 1px solid #ffffff; | ||
+ | } | ||
+ | @media only screen and (min-width: 900px) { | ||
+ | .cd-slider-navigation { | ||
+ | padding: 0.5em 1em; | ||
+ | background-color: rgba(0, 0, 0, 0.8); | ||
+ | /* fixes a bug on Firefox with ul.cd-slider-navigation z-index */ | ||
+ | -webkit-transform: translateZ(2px) translateX(-50%); | ||
+ | -moz-transform: translateZ(2px) translateX(-50%); | ||
+ | -ms-transform: translateZ(2px) translateX(-50%); | ||
+ | -o-transform: translateZ(2px) translateX(-50%); | ||
+ | transform: translateZ(2px) translateX(-50%); | ||
+ | -webkit-transition: -webkit-transform 0.3s; | ||
+ | -moz-transition: -moz-transform 0.3s; | ||
+ | transition: transform 0.3s; | ||
+ | } | ||
+ | .cd-slider-navigation.slider-animating { | ||
+ | /* fixes a bug on Firefox with ul.cd-slider-navigation z-index */ | ||
+ | -webkit-transform: translateX(-50%) scale(1); | ||
+ | -moz-transform: translateX(-50%) scale(1); | ||
+ | -ms-transform: translateX(-50%) scale(1); | ||
+ | -o-transform: translateX(-50%) scale(1); | ||
+ | transform: translateX(-50%) scale(1); | ||
+ | } | ||
+ | .cd-slider-navigation a { | ||
+ | height: 40px; | ||
+ | width: 40px; | ||
+ | line-height: 40px; | ||
+ | text-align: center; | ||
+ | /* reset style */ | ||
+ | text-indent: 0; | ||
+ | border: none; | ||
+ | border-radius: 0; | ||
+ | color: #ffffff; | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | -moz-osx-font-smoothing: grayscale; | ||
+ | } | ||
+ | .cd-slider-navigation li.selected a { | ||
+ | background-color: transparent; | ||
+ | color: #f3b96c; | ||
} | } | ||
} | } |
Revision as of 04:36, 1 August 2017