www/plugins/auto/anythingslider/css/theme-minimalist-square.css

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