www/plugins/auto/anythingslider/css/theme-metallic.css

   1 /*
   2         AnythingSlider v1.5.10 Metallic Theme
   3         By Rob Garrison
   4 */
   5
   6 /****** SET COLORS HERE *******/
   7 /* Default State */
   8 div.anythingSlider-metallic .anythingWindow {
   9         border-top: 3px solid #333;
  10         border-bottom: 3px solid #333;
  11 }
  12 div.anythingSlider-metallic .anythingControls ul a {
  13         border: 1px solid #000;
  14 }
  15 div.anythingSlider-metallic .start-stop {
  16         border: 1px solid #000;
  17 }
  18 div.anythingSlider-metallic .start-stop.playing {
  19         background-color: #300;
  20 }
  21 div.anythingSlider-metallic .start-stop:hover, div.anythingSlider-metallic .start-stop.hover {
  22         color: #ddd;
  23 }
  24
  25 /* Active State */
  26 div.anythingSlider-metallic.activeSlider .anythingWindow {
  27         border-color: #0355a3;
  28 }
  29 div.anythingSlider-metallic.activeSlider .anythingControls ul a {
  30         background-color: transparent;
  31         background-position: -68px -40px;
  32 }
  33 div.anythingSlider-metallic.activeSlider .anythingControls ul a:hover, div.anythingSlider-metallic.activeSlider .anythingControls ul a.cur {
  34         background-position: -76px -57px;
  35 /*      background: #fff; */
  36 }
  37 div.anythingSlider-metallic.activeSlider .start-stop.playing {
  38         background-color: #f00;
  39 }
  40 div.anythingSlider-metallic .start-stop:hover, div.anythingSlider-metallic .start-stop.hover {
  41         color: #fff;
  42 }
  43
  44 /* Navigation Arrows */
  45 div.anythingSlider-metallic .arrow {
  46         top: 50%;
  47         position: absolute;
  48         display: block;
  49         z-index: 100;
  50 }
  51 div.anythingSlider-metallic .arrow a {
  52         display: block;
  53         height: 95px;
  54         margin-top: -47px; /* half height of image */
  55         width: 45px;
  56         outline: 0;
  57         background: url(../images/arrows-metallic.png) no-repeat;
  58 }
  59
  60 div.anythingSlider-metallic .forward { right: 0; }
  61 div.anythingSlider-metallic .back { left: 0; }
  62 div.anythingSlider-metallic .forward a { background-position: right bottom; }
  63 div.anythingSlider-metallic .back a { background-position: left bottom; }
  64 div.anythingSlider-metallic .forward a:hover, div.anythingSlider-metallic .forward a.hover { background-position: right top; }
  65 div.anythingSlider-metallic .back a:hover, div.anythingSlider-metallic .back a.hover { background-position: left top; }
  66
  67 /* Navigation Links */
  68 div.anythingSlider-metallic .anythingControls {
  69         float: right;
  70         position: absolute;
  71         bottom: 0;
  72         right: 15%;
  73         z-index: 100;
  74         opacity: 0.90;
  75         filter: alpha(opacity=90);
  76 }
  77 div.anythingSlider-metallic .anythingControls ul {
  78         margin: 0;
  79         z-index: 100;
  80 }
  81 div.anythingSlider-metallic .anythingControls ul li {
  82         display: block;
  83         float: left;
  84 }
  85 div.anythingSlider-metallic .anythingControls ul a {
  86         display: block;
  87         background: transparent url(../images/arrows-metallic.png) -68px -136px no-repeat;
  88         height: 10px;
  89         width: 10px;
  90         margin: 3px;
  91         padding: 0;
  92         outline: 0;
  93         border-radius: 5px;
  94         -moz-border-radius: 5px;
  95         -webkit-border-radius: 5px;
  96 }
  97
  98 div.anythingSlider-metallic .anythingControls ul a:hover, div.anythingSlider-metallic .anythingControls ul a.cur {
  99         background: transparent url(../images/arrows-metallic.png) -76px -57px no-repeat;
 100 }
 101
 102 /* Navigation size window arrows */
 103 div.anythingSlider-metallic .anythingControls li.next a span, div.anythingSlider-metallic .anythingControls li.prev a span {
 104         text-indent: 1px;
 105         margin-top: 3px;
 106 }
 107 div.anythingSlider-metallic .anythingControls li.prev a, div.anythingSlider-metallic .anythingControls li.next a {
 108         color: #ddd;
 109 }
 110 div.anythingSlider-metallic .anythingControls li.next a:hover, div.anythingSlider-metallic .anythingControls li.prev a:hover {
 111         color: #000;
 112 }
 113
 114 /* slider autoplay right-to-left, reverse order of nav links to look better */
 115 div.anythingSlider-metallic.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */
 116 div.anythingSlider-metallic.rtl .anythingControls ul { float: left; }    /* move nav link group to left */
 117 /* div.anythingSlider-metallic.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */
 118
 119 /* Autoplay Start/Stop button */
 120 div.anythingSlider-metallic .start-stop {
 121         margin: 3px;
 122         padding: 0;
 123         display: inline-block;
 124         width: 14px;
 125         height: 14px;
 126         position: relative;
 127         bottom: 2px;
 128         left: 0;
 129         z-index: 100;
 130         float: right;
 131         border-radius: 7px;
 132         -moz-border-radius: 7px;
 133         -webkit-border-radius: 7px;
 134 }
 135
 136 /* Extra - replace defaults */
 137 div.anythingSlider-metallic {
 138         padding: 6px 23px;
 139 }
 140
 141 /* 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 */
 142 div.anythingSlider-metallic .arrow a span, div.anythingSlider-metallic .anythingControls ul a span, div.anythingSlider-metallic .start-stop span {
 143         display: block;
 144         line-height: 1px; /* needed for IE7 */
 145         text-indent: -9999px;
 146 }