/* AnythingSlider v1.8+ LESS Minimalist Round theme By Rob Garrison */ /***************************** SET DEFAULT DIMENSIONS HERE *****************************/ /* change the ID & dimensions to match your slider */ #slider { width: 700px; height: 390px; list-style: none; /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */ overflow-y: auto; overflow-x: hidden; } /* slider borders */ @slider-border-size : 3px; @inactive-border-color : #333; @active-border-color : #164054; /* current navigation tab styling - uses same navigation background image */ @inactive-background-current : #777; @active-background-current : #fff; @navigation-text-color-current : #000; /* non-current navigation styling */ @inactive-background-tab : #333; @active-background-tab : #164054; @navigation-text-color : #fff; @navigation-tab-size : 10px; .navigation-tab-styling { width: @navigation-tab-size; height: @navigation-tab-size; margin: 3px; padding: 0; } .navigation-border (@radius: 5px) { border: #000 1px solid; border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } /* start-stop button background color */ @inactive-start-stop-stopped : #040; @inactive-start-stop-playing : #800; @active-start-stop-stopped : #080; @active-start-stop-playing : #f00; /* start-stop button text */ @inactive-start-stop-text : #ddd; @active-start-stop-text : #fff; @active-start-stop-text-hover : #fff; .start-stop-shadow (@shadow: inset 1px 2px 5px rgba(0,0,0,0.5)) { /* top shadow */ -moz-box-shadow: @shadow; -webkit-box-shadow: @shadow; box-shadow: @shadow; } /* navigation arrows */ @arrow-width : 30px; @arrow-height : 40px; @arrow-image : url(../images/arrows-minimalist.png); @arrow-back-position : left bottom; @arrow-back-position-hovered : left top; @arrow-forward-position : right bottom; @arrow-forward-position-hovered: right top; @arrow-horizontal-pad : 30px; /* distance the arrow protrudes horizontally outside of the AnythingSlider wrapper */ @navigation-bottom-pad : 0; /* distance the navigation controls (tabs & start-stop button) protrudes below the wrapper */ .anythingSlider-minimalist-round { /* ================================= Default state (no keyboard focus) ================================= */ /* Overall Wrapper */ margin: 0 auto; padding: 0 @arrow-horizontal-pad @navigation-bottom-pad @arrow-horizontal-pad; /* slider window - top & bottom borders, default state */ .anythingWindow { border-top: @slider-border-size solid @inactive-border-color; border-bottom: @slider-border-size solid @inactive-border-color; } /* Navigation buttons + start/stop button, default state */ .anythingControls a { background-color: @inactive-background-tab; color: @navigation-text-color; .navigation-border; /* Navigation current button, default state */ &.cur, &:hover { background-color: @inactive-background-current; color: @navigation-text-color-current; } /* start-stop button, stopped, default state */ &.start-stop { background: @inactive-start-stop-stopped; color: @inactive-start-stop-text; .start-stop-shadow; /* start-stop button, playing, default state */ &.playing { background-color: @inactive-start-stop-playing; } /* start-stop button, default hovered text color (when visible) */ /* hide nav/start-stop background image shadow on hover - makes the button appear to come forward */ &:hover, &.hover, .anythingControls ul a:hover { color: @active-start-stop-text-hover; .start-stop-shadow(inset 0 0 0 #000); } } } /* ================================= Active State (has keyboard focus) ================================= */ &.activeSlider { /* slider window - top & bottom borders, active state */ .anythingWindow { border-color: @active-border-color; } /* Navigation buttons, active state */ .anythingControls a { /* background image = top shadow */ background-color: @active-background-tab; color: @navigation-text-color; /* Navigation current button, active state */ &.cur, &:hover { background-color: @active-background-current; color: @navigation-text-color-current; } /* start-stop button, stopped, active state */ &.start-stop { background: @active-start-stop-stopped; color: @active-start-stop-text; /* start-stop button, playing, active state */ &.playing { color: @active-start-stop-text; background: @active-start-stop-playing; } } } /* start-stop button, active slider hovered text color (when visible) */ .start-stop:hover, .start-stop.hover { color: @active-start-stop-text-hover; } } /************************ NAVIGATION POSITIONING ************************/ /* Navigation Arrows */ .arrow { top: 50%; position: absolute; display: block; a { display: block; width: @arrow-width; height: @arrow-height; margin: -@arrow-height/2 0 0 0; /* half height of image */ text-align: center; outline: 0; background: @arrow-image no-repeat; } } /* back arrow */ .back { left: 0; a { background-position: @arrow-back-position; &:hover, &.hover { background-position: @arrow-back-position-hovered; } } } /* forward arrow */ .forward { right: 0; a { background-position: @arrow-forward-position; &:hover, &.hover { background-position: @arrow-forward-position-hovered; } } } /* Navigation Links */ .anythingControls { height: @navigation-tab-size*1.5; /* limit height, needed for IE9 of all things */ outline: 0; display: none; float: right; position: absolute; bottom: 5px; right: 20px; margin: 0 @arrow-width*1.5; /* needed for IE */ z-index: 100; opacity: 0.90; filter: alpha(opacity=90); ul { margin: 0; padding: 0; float: left; li { list-style: none; float: left; margin: 0; padding: 0; } a { display: inline-block; .navigation-tab-styling; text-decoration: none; text-align: center; outline: 0; } } span { display: block; visibility: hidden; /* needed for IE8, instead of text-indent: -9999px */ } /* navigationSize window */ .anythingNavWindow { overflow: hidden; float: left; } /* navigationSize nav arrow positioning */ li.prev a span, li.next a span { visibility: visible; position: relative; top: -6px; /* bring navigationSize text arrows into view */ } /* Autoplay Start/Stop button */ .start-stop { display: inline-block; .navigation-tab-styling; text-align: center; text-decoration: none; z-index: 100; outline: 0; } } } /*********************** IE8 AND OLDER STYLING ***********************/ .as-oldie .anythingSlider-minimalist-round { /* Navigation Arrows */ .arrow { top: 45%; a { margin: 0; } } } /*********************** COMMON SLIDER STYLING ***********************/ /* Overall Wrapper */ .anythingSlider { display: block; overflow: visible !important; position: relative; /* anythingSlider viewport window */ .anythingWindow { overflow: hidden; position: relative; width: 100%; height: 100%; } /* anythingSlider base (original element) */ .anythingBase { background: transparent; list-style: none; position: absolute; overflow: visible !important; top: 0; left: 0; margin: 0; padding: 0; } /* Navigation arrow text; indent moved to span inside "a", for IE7; apparently, a negative text-indent on an "a" link moves the link as well as the text */ .arrow span { display: block; visibility: hidden; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */ .arrow.disabled { display: none; } /* all panels inside the slider; horizontal mode */ .panel { background: transparent; display: block; overflow: hidden; float: left; padding: 0; margin: 0; } /* vertical mode */ .vertical .panel { float: none; } /* fade mode */ .fade { .panel { float: none; position: absolute; top: 0; left: 0; z-index: 0; } .activePage { z-index: 1; } } /*********************** RTL STYLING ***********************/ /* slider autoplay right-to-left, reverse order of nav links to look better */ &.rtl { .anythingWindow { direction: ltr; unicode-bidi: bidi-override; } /* move nav link group to left */ .anythingControls ul { float: left; /* reverse order of nav links */ a { float: right; } } /* move start/stop button - in case you want to switch sides */ .start-stop { /* float: right; */ } } /* probably not necessary, but added just in case */ .anythingWindow, .anythingControls ul a, .arrow a, .start-stop { transition-duration: 0; -o-transition-duration: 0; -moz-transition-duration: 0; -webkit-transition-duration: 0; } }