anythingslider.css 6.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  1. /*
  2. AnythingSlider v1.7+ Default (base) theme
  3. By Chris Coyier: http://css-tricks.com
  4. with major improvements by Doug Neiner: http://pixelgraphics.us/
  5. based on work by Remy Sharp: http://jqueryfordesigners.com/
  6. */
  7. /*****************************
  8. SET DEFAULT DIMENSIONS HERE
  9. *****************************/
  10. /* change the ID to match your slider */
  11. #slider {
  12. width: 700px;
  13. height: 390px;
  14. list-style: none;
  15. /* Prevent FOUC (see FAQ page) and keep things readable if javascript is disabled */
  16. overflow-y: auto;
  17. overflow-x: hidden;
  18. }
  19. /* Opera width restriction */
  20. .anythingBase { max-width: 32766px; }
  21. /*****************
  22. SET COLORS HERE
  23. *****************/
  24. /**** Default state (no keyboard focus) ****/
  25. /* slider window - top & bottom borders, default state */
  26. div.anythingSlider .anythingWindow {
  27. border-top: 3px solid #777;
  28. border-bottom: 3px solid #777;
  29. }
  30. /* Navigation buttons, default state */
  31. div.anythingSlider .anythingControls ul a.cur, div.anythingSlider .anythingControls ul a {
  32. background: #777;
  33. color: #000;
  34. }
  35. /* start-stop button, stopped, default state */
  36. div.anythingSlider .start-stop {
  37. background-color: #040;
  38. color: #fff;
  39. }
  40. /* start-stop button, playing, default state */
  41. div.anythingSlider .start-stop.playing {
  42. background-color: #800;
  43. }
  44. /* start-stop button, default hovered text color (when visible) */
  45. div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover {
  46. color: #ddd;
  47. }
  48. /**** Active State (slider has keyboard focus) ****/
  49. /* slider window - top & bottom borders, active state */
  50. div.anythingSlider.activeSlider .anythingWindow {
  51. border-color: #7C9127;
  52. }
  53. /* Navigation buttons, active state */
  54. div.anythingSlider.activeSlider .anythingControls ul a.cur, div.anythingSlider.activeSlider .anythingControls ul a {
  55. background-color: #7C9127;
  56. }
  57. /* start-stop button, stopped, active state */
  58. div.anythingSlider .start-stop {
  59. background-color: #080;
  60. color: #fff;
  61. }
  62. /* start-stop button, playing, active state */
  63. div.anythingSlider .start-stop.playing {
  64. background-color: #d00;
  65. }
  66. /* start-stop button, active slider hovered text color (when visible) */
  67. div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover {
  68. color: #fff;
  69. }
  70. /***********************
  71. COMMON SLIDER STYLING
  72. ***********************/
  73. /* Overall Wrapper: 45px right & left padding for the arrows, 28px @ bottom for navigation */
  74. div.anythingSlider {
  75. display: block;
  76. margin: 0 auto;
  77. overflow: visible !important; /* needed for Opera and Safari */
  78. position: relative;
  79. padding: 0 45px 28px 45px;
  80. }
  81. /* anythingSlider viewport window */
  82. div.anythingSlider .anythingWindow {
  83. overflow: hidden;
  84. position: relative;
  85. width: 100%;
  86. height: 100%;
  87. }
  88. /* anythingSlider base (original element) */
  89. .anythingBase {
  90. background: transparent;
  91. list-style: none;
  92. position: absolute;
  93. overflow: visible !important;
  94. top: 0;
  95. left: 0;
  96. margin: 0;
  97. padding: 0;
  98. }
  99. /* all panels inside the slider */
  100. .anythingBase .panel {
  101. background: transparent;
  102. display: block;
  103. overflow: hidden;
  104. float: left;
  105. padding: 0;
  106. margin: 0;
  107. }
  108. .anythingBase .panel.vertical {
  109. float: none;
  110. }
  111. /* Navigation Arrows */
  112. div.anythingSlider .arrow {
  113. top: 50%;
  114. position: absolute;
  115. display: block;
  116. }
  117. div.anythingSlider .arrow a {
  118. display: block;
  119. height: 140px;
  120. margin: -70px 0 0 0; /* half height of image */
  121. width: 45px;
  122. text-align: center;
  123. outline: 0;
  124. background: url(../images/default.png) no-repeat;
  125. }
  126. /* hide text, target the span so IE7 doesn't text-indent the link */
  127. div.anythingSlider .arrow a span { display: block; text-indent: -9999px; }
  128. /* back arrow */
  129. div.anythingSlider .back { left: 0; }
  130. div.anythingSlider .back a { background-position: left top; }
  131. div.anythingSlider .back a:hover, div.anythingSlider .back a.hover { background-position: left -140px; }
  132. div.anythingSlider .back.disabled { display: none; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */
  133. /* forward arrow */
  134. div.anythingSlider .forward { right: 0; }
  135. div.anythingSlider .forward a { background-position: right top; }
  136. div.anythingSlider .forward a:hover, div.anythingSlider .forward a.hover { background-position: right -140px; }
  137. div.anythingSlider .forward.disabled { display: none; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */
  138. /* Navigation Links */
  139. div.anythingSlider .anythingControls { outline: 0; display: none; }
  140. div.anythingSlider .anythingControls ul { margin: 0; padding: 0; float: left; }
  141. div.anythingSlider .anythingControls ul li { display: inline; }
  142. div.anythingSlider .anythingControls ul a {
  143. font: 11px/18px Georgia, Serif;
  144. display: inline-block;
  145. text-decoration: none;
  146. padding: 2px 8px;
  147. height: 18px;
  148. margin: 0 5px 0 0;
  149. background-image: url(../images/default.png);
  150. background-position: center -288px ;
  151. background-repeat: repeat-x;
  152. text-align: center;
  153. outline: 0;
  154. border-radius: 0 0 5px 5px;
  155. -moz-border-radius: 0 0 5px 5px;
  156. -webkit-border-radius: 0 0 5px 5px;
  157. }
  158. div.anythingSlider .anythingControls ul a:hover {
  159. background-image: none;
  160. }
  161. /* Navigation size window */
  162. div.anythingSlider .anythingControls .anythingNavWindow { overflow: hidden; float: left; }
  163. /* slider autoplay right-to-left, reverse order of nav links to look better */
  164. div.anythingSlider.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */
  165. div.anythingSlider.rtl .anythingControls ul { float: left; } /* move nav link group to left */
  166. div.anythingSlider.rtl .anythingWindow {
  167. direction: ltr;
  168. unicode-bidi: bidi-override;
  169. }
  170. /* div.anythingSlider.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */
  171. /* Autoplay Start/Stop button */
  172. div.anythingSlider .start-stop {
  173. background-image: url(../images/default.png);
  174. background-position: center -288px;
  175. background-repeat: repeat-x;
  176. padding: 2px 5px;
  177. width: 40px;
  178. text-align: center;
  179. text-decoration: none;
  180. float: right;
  181. z-index: 100;
  182. outline: 0;
  183. border-radius: 0 0 5px 5px;
  184. -moz-border-radius: 0 0 5px 5px;
  185. -webkit-border-radius: 0 0 5px 5px;
  186. }
  187. /* hide cell shading on hover - makes the button appear to come forward */
  188. div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover { background-image: none; }
  189. /* probably not necessary, but added just in case */
  190. div.anythingSlider, div.anythingSlider .anythingWindow, div.anythingSlider .anythingControls ul a, div.anythingSlider .arrow a, div.anythingSlider .start-stop {
  191. transition-duration: 0;
  192. -o-transition-duration: 0;
  193. -moz-transition-duration: 0;
  194. -webkit-transition-duration: 0;
  195. }