Permalink
Browse files

updated for AnythingSlider 1.8+

  • Loading branch information...
1 parent 2d72fd5 commit ec0191742662a0e2fc60909c747817db125d18c7 @Mottie Mottie committed Aug 5, 2012
View
7 README.markdown
@@ -73,6 +73,12 @@ See them on the [AnythingSlider Theme Demo Page](http://mottie.github.com/Anythi
## Change Log
+### Version 1.4
+
+* Removed max-width from css as the latest version of Opera (11.60+) no longer appears to have that limitation.
+* Updated to work with AnythingSlider v1.8+ (fade mode)
+* Changed links to point to css-tricks
+
### Version 1.3
* Updated css files to prevent problems with using the navigation in IE8, as per AnythingSlider [issue #206](https://github.com/ProLoser/AnythingSlider/issues/206). Even though it doesn't appear to be a problem, better to make the change anyway :P
@@ -86,7 +92,6 @@ See them on the [AnythingSlider Theme Demo Page](http://mottie.github.com/Anythi
* Updated tabs-light and tabs-dark themes by removing the navigation width, the update to AnythingSlider (v1.7.12+) should better calculate the tab widths now.
-
### Version 1.0
* Initial commit
View
68 css/anythingslider-ie.css
@@ -1,68 +0,0 @@
-/* AnythingSlider IE7 and older stylesheet - included !important flag in case the theme is loaded after page load */
-
-div.anythingSlider .arrow {
- margin: 0 !important;
-}
-
-/* When using the navigationSize option, the side margins need to be zero
- None of the navigation panels look good in IE7 now =( */
-div.anythingSlider .anythingControls {
- margin: 0 0 0 30px;
-}
-}div.anythingSlider .anythingControls ul.thumbNav a {
- margin: 0 0 0 2px;
-}
-div.anythingSlider .anythingControls .anythingNavWindow li {
- padding: 3px 0 0 0;
-}
-div.anythingSlider-cs-portfolio .anythingControls .anythingNavWindow {
- margin: 18px 0 0 0;
-}
-
-div.anythingSlider .anythingControls {
- display: block;
- width: 95% !important; /* arbitrary percentage, adjust to fit your slider in IE7 */
- margin: 0;
-}
-div.anythingSlider-default2 .anythingControls,
-div.anythingSlider-office .anythingControls,
-div.anythingSlider-polished .anythingControls,
-div.anythingSlider-ribbon .anythingControls {
- width: 90% !important;
- margin-left: 0;
-}
-div.anythingSlider-shiny .anythingControls {
- width: 85% !important;
-}
-
-/* wrappers */
-/*************
- Carbon fiber image
- *************/
-#wrapper.carbonfiber {
- border: rgb(22,22,22) 2px solid;
- background-image: url(../images/bkgd-carbon-fiber.gif);
-}
-
-/*************
- Leather image
- *************/
-#wrapper.leather {
- background-color: rgb(117, 117, 117);
- background-image: url(../images/bkgd-leather.jpg);
-}
-
-
-/*************
- Light Wood image
- *************/
-#wrapper.light-wood {
- background-image: url(../images/bkgd-wood2.jpg);
-}
-
-/*************
- Noise overlay
- *************/
-#wrapper.noise {
- border: rgb(128,128,128) 1px solid;
-}
View
131 css/theme-default1.css
@@ -1,6 +1,7 @@
/*
AnythingSlider v1.7+ themes
Default 1 theme - no images/css3
+ by Rob Garrison (aka Mottie)
*/
/****************************
@@ -18,7 +19,6 @@
/* Opera width restriction */
.anythingBase {
- max-width: 32766px;
background: transparent;
list-style: none;
position: absolute;
@@ -34,42 +34,42 @@
ACTIVE STATE (slider has keyboard focus)
*************/
/* slider window - top & bottom borders, active state */
-div.anythingSlider-default1.activeSlider .anythingWindow {
+.anythingSlider-default1.activeSlider .anythingWindow {
border-color: #6699aa;
}
/* Text arrows */
-div.anythingSlider-default1.activeSlider .arrow a:link {
+.anythingSlider-default1.activeSlider .arrow a:link {
color: #6699aa;
}
-div.anythingSlider-default1.activeSlider .arrow a:hover {
+.anythingSlider-default1.activeSlider .arrow a:hover {
color: #44bbcc;
}
/* Navigation tabs, active state */
-div.anythingSlider-default1.activeSlider .anythingControls ul a:link {
+.anythingSlider-default1.activeSlider .anythingControls ul a:link {
background-color: #6699aa;
color: #ddd;
}
-div.anythingSlider-default1.activeSlider .anythingControls ul a.cur:link,
-div.anythingSlider-default1.activeSlider .anythingControls ul a:hover,
-div.anythingSlider-default1.activeSlider .anythingControls ul a.hover {
+.anythingSlider-default1.activeSlider .anythingControls ul a.cur:link,
+.anythingSlider-default1.activeSlider .anythingControls ul a:hover,
+.anythingSlider-default1.activeSlider .anythingControls ul a.hover {
background-color: #44bbcc;
}
/* start-stop button, stopped, active state */
-div.anythingSlider-default1.activeSlider .start-stop {
+.anythingSlider-default1.activeSlider .start-stop {
background-color: #6699aa;
}
/* start-stop button, stopped, active state, hovered */
-div.anythingSlider-default1.activeSlider .start-stop:hover,
-div.anythingSlider-default1.activeSlider .start-stop.hover {
+.anythingSlider-default1.activeSlider .start-stop:hover,
+.anythingSlider-default1.activeSlider .start-stop.hover {
background-color: #44bbcc;
}
/* start-stop button, playing, active state */
-div.anythingSlider-default1.activeSlider .start-stop.playing:link {
+.anythingSlider-default1.activeSlider .start-stop.playing:link {
background-color: #d00;
}
/* start-stop button, playing, active state, hovered */
-div.anythingSlider-default1.activeSlider .start-stop.playing:hover,
-div.anythingSlider-default1.activeSlider .start-stop.playing.hover {
+.anythingSlider-default1.activeSlider .start-stop.playing:hover,
+.anythingSlider-default1.activeSlider .start-stop.playing.hover {
background-color: #a00;
}
@@ -78,7 +78,7 @@ div.anythingSlider-default1.activeSlider .start-stop.playing.hover {
*****************/
/* Slider window - top & bottom borders, default state */
-div.anythingSlider-default1 .anythingWindow {
+.anythingSlider-default1 .anythingWindow {
border-top: 3px solid #777;
border-bottom: 3px solid #777;
overflow: hidden;
@@ -87,30 +87,30 @@ div.anythingSlider-default1 .anythingWindow {
height: 100%;
}
/* Text arrows */
-div.anythingSlider-default1 .arrow a:link {
+.anythingSlider-default1 .arrow a:link {
color: #777;
}
-div.anythingSlider-default1 .arrow a:hover {
+.anythingSlider-default1 .arrow a:hover {
color: #999;
}
/* Disabled arrows - infiniteSlide = false & stopAtEnd = true */
-div.anythingSlider-default1 .back.disabled,
-div.anythingSlider-default1 .forward.disabled {
+.anythingSlider-default1 .back.disabled,
+.anythingSlider-default1 .forward.disabled {
display: none;
}
/* Navigation tabs */
-div.anythingSlider-default1 .anythingControls ul a.cur,
-div.anythingSlider-default1 .anythingControls ul a {
+.anythingSlider-default1 .anythingControls ul a.cur,
+.anythingSlider-default1 .anythingControls ul a {
background: #777;
color: #ddd;
}
-div.anythingSlider-default1 .anythingControls ul a.cur:hover,
-div.anythingSlider-default1 .anythingControls ul a.hover,
-div.anythingSlider-default1 .anythingControls ul a:hover {
+.anythingSlider-default1 .anythingControls ul a.cur:hover,
+.anythingSlider-default1 .anythingControls ul a.hover,
+.anythingSlider-default1 .anythingControls ul a:hover {
background: #999;
}
/* Start/stop button - stopped */
-div.anythingSlider-default1 .start-stop {
+.anythingSlider-default1 .start-stop {
background-color: #779;
color: #ddd;
font: 10px/14px Georgia, Serif;
@@ -123,58 +123,71 @@ div.anythingSlider-default1 .start-stop {
padding: 2px 5px;
}
/* Start/stop button - stopped */
-div.anythingSlider-default1 .start-stop:hover,
-div.anythingSlider-default1 .start-stop.hover {
+.anythingSlider-default1 .start-stop:hover,
+.anythingSlider-default1 .start-stop.hover {
background-color: #88a;
}
/* start/stop button - playing */
-div.anythingSlider-default1 .start-stop.playing {
+.anythingSlider-default1 .start-stop.playing {
background-color: #300;
}
-div.anythingSlider-default1 .start-stop.playing:hover,
-div.anythingSlider-default1 .start-stop.playing.hover {
+.anythingSlider-default1 .start-stop.playing:hover,
+.anythingSlider-default1 .start-stop.playing.hover {
background-color: #700;
}
/***********************
COMMON SLIDER STYLING
***********************/
/* Overall Wrapper */
-div.anythingSlider-default1 {
+.anythingSlider-default1 {
display: block;
position: relative;
margin: 0 auto;
padding: 0; /* adjust left/right padding here to move arrows towards or away from the center */
}
-/* Panels/Slides */
-.anythingBase .panel {
+/* all panels inside the slider; horizontal mode */
+.anythingSlider .panel {
background: transparent;
display: block;
overflow: hidden;
float: left;
- margin: 0;
padding: 0;
+ margin: 0;
}
-/* Vertical panels */
-.anythingBase .panel.vertical {
+/* vertical mode */
+.anythingSlider .vertical .panel {
+ float: none;
+}
+
+/* fade mode */
+.anythingSlider .fade .panel {
float: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+}
+/* fade mode active page - visible & on top */
+.anythingSlider .fade .activePage {
+ z-index: 0;
}
/* Arrow buttons position */
-div.anythingSlider-default1 .arrow {
+.anythingSlider-default1 .arrow {
top: 50%;
position: absolute;
display: block;
}
-div.anythingSlider-default1 span.back {
+.anythingSlider-default1 span.back {
left: 0;
}
-div.anythingSlider-default1 span.forward {
+.anythingSlider-default1 span.forward {
right: 0;
}
/* Arrow buttons dimensions */
-div.anythingSlider-default1 .arrow a {
+.anythingSlider-default1 .arrow a {
display: block;
height: 48px;
width: 35px;
@@ -184,13 +197,13 @@ div.anythingSlider-default1 .arrow a {
margin: -26px 0 0; /* set to 1/2 height */
}
/* Arrow buttons text */
-div.anythingSlider-default1 .arrow a span {
+.anythingSlider-default1 .arrow a span {
display: block;
font-size: 40px;
}
/* Slider control block */
-div.anythingSlider-default1 .anythingControls {
+.anythingSlider-default1 .anythingControls {
outline: 0;
float: right;
position: absolute;
@@ -201,18 +214,18 @@ div.anythingSlider-default1 .anythingControls {
filter: alpha(opacity=90);
}
/* control list */
-div.anythingSlider-default1 .anythingControls ul {
+.anythingSlider-default1 .anythingControls ul {
float: left;
margin: 0;
padding: 0;
}
/* control tabs */
-div.anythingSlider-default1 .anythingControls ul li {
+.anythingSlider-default1 .anythingControls ul li {
display: block;
float: left;
}
/* control links */
-div.anythingSlider-default1 .anythingControls ul a {
+.anythingSlider-default1 .anythingControls ul a {
font: 10px/14px Georgia, Serif;
display: block;
height: 14px;
@@ -223,19 +236,39 @@ div.anythingSlider-default1 .anythingControls ul a {
padding: 2px 8px;
}
/* control nav window (navigationSize = true) */
-div.anythingSlider-default1 .anythingControls .anythingNavWindow {
+.anythingSlider-default1 .anythingControls .anythingNavWindow {
overflow: hidden;
float: left;
}
/* Navigation size window arrows */
-div.anythingSlider-default1 .anythingControls li.next a span, div.anythingSlider-default1 .anythingControls li.prev a span {
+.anythingSlider-default1 .anythingControls li.next a span, .anythingSlider-default1 .anythingControls li.prev a span {
text-indent: 1px;
margin-top: 3px;
}
-div.anythingSlider-default1 .anythingControls li.prev a, div.anythingSlider-default1 .anythingControls li.next a {
+.anythingSlider-default1 .anythingControls li.prev a, .anythingSlider-default1 .anythingControls li.next a {
color: #ddd;
}
-div.anythingSlider-default1 .anythingControls li.next a:hover, div.anythingSlider-default1 .anythingControls li.prev a:hover {
+.anythingSlider-default1 .anythingControls li.next a:hover, .anythingSlider-default1 .anythingControls li.prev a:hover {
color: #000;
}
+/* AnythingSlider IE7 and older styling */
+.as-oldie div.anythingSlider .arrow {
+ margin: 0;
+}
+/* When using the navigationSize option, the side margins need to be zero
+ None of the navigation panels look good in IE7 now =( */
+.as-oldie div.anythingSlider .anythingControls {
+ margin: 0 0 0 30px;
+}
+}.as-oldie div.anythingSlider .anythingControls ul.thumbNav a {
+ margin: 0 0 0 2px;
+}
+.as-oldie div.anythingSlider .anythingControls .anythingNavWindow li {
+ padding: 3px 0 0 0;
+}
+.as-oldie div.anythingSlider .anythingControls {
+ display: block;
+ width: 95%; /* arbitrary percentage, adjust to fit your slider in IE7 */
+ margin: 0;
+}
View
139 css/theme-default2.css
@@ -1,6 +1,7 @@
/*
- AnythingSlider v1.7+ themes
- Default 2 theme - triangly
+ AnythingSlider v1.8+ themes
+ Default 2 theme - ugly triangly
+ by Rob Garrison (aka Mottie)
*/
/****************************
@@ -16,32 +17,37 @@
overflow-x: hidden;
}
-/* Opera width restriction */
+/******************
+ SET STYLING HERE
+ ******************
+ =================================
+ Default state (no keyboard focus)
+ ==================================*/
+
.anythingBase {
- max-width: 32766px;
background: transparent;
list-style: none;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
- /* override the #slider overflow above, once the class is added */
+ /* override the #slider overflow above, once this class is added to #slider */
overflow: visible !important;
}
/*************
ACTIVE STATE (slider has keyboard focus)
*************/
/* slider window - top & bottom borders, active state */
-div.anythingSlider-default2.activeSlider .anythingWindow {
+.anythingSlider-default2.activeSlider .anythingWindow {
border-color: #999;
}
-div.anythingSlider-default2.activeSlider .arrow a {
+.anythingSlider-default2.activeSlider .arrow a {
opacity: 0.90;
filter: alpha(opacity=90);
}
-div.anythingSlider-default2.activeSlider .anythingControls {
+.anythingSlider-default2.activeSlider .anythingControls {
opacity: 0.90;
filter: alpha(opacity=90);
}
@@ -50,29 +56,42 @@ div.anythingSlider-default2.activeSlider .anythingControls {
DEFAULT STATE (no keyboard focus)
*****************/
/* Overall Wrapper */
-div.anythingSlider-default2 {
+.anythingSlider-default2 {
display: block;
position: relative;
margin: 0 auto;
padding: 0 19px; /* adjust left/right padding here to move arrows towards or away from the center */
}
-/* Panels/Slides */
-.anythingBase .panel {
+/* all panels inside the slider; horizontal mode */
+.anythingSlider .panel {
background: transparent;
display: block;
overflow: hidden;
float: left;
- margin: 0;
padding: 0;
+ margin: 0;
+}
+/* vertical mode */
+.anythingSlider .vertical .panel {
+ float: none;
}
-/* Vertical panels */
-.anythingBase .panel.vertical {
+
+/* fade mode */
+.anythingSlider .fade .panel {
float: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+}
+/* fade mode active page - visible & on top */
+.anythingSlider .fade .activePage {
+ z-index: 0;
}
/* Slider window - top & bottom borders, default state */
-div.anythingSlider-default2 .anythingWindow {
+.anythingSlider-default2 .anythingWindow {
border-top: 3px solid #777;
border-bottom: 3px solid #777;
overflow: hidden;
@@ -81,19 +100,19 @@ div.anythingSlider-default2 .anythingWindow {
height: 100%;
}
/* Arrow buttons position */
-div.anythingSlider-default2 .arrow {
+.anythingSlider-default2 .arrow {
top: 50%;
position: absolute;
display: block;
}
-div.anythingSlider-default2 span.back {
+.anythingSlider-default2 span.back {
left: 0;
}
-div.anythingSlider-default2 span.forward {
+.anythingSlider-default2 span.forward {
right: 0;
}
/* Arrow buttons images */
-div.anythingSlider-default2 .arrow a {
+.anythingSlider-default2 .arrow a {
display: block;
background: transparent url(../images/default.png) no-repeat;
height: 56px;
@@ -105,33 +124,33 @@ div.anythingSlider-default2 .arrow a {
opacity: 0.70;
filter: alpha(opacity=70);
}
-div.anythingSlider-default2 .arrow a:hover {
+.anythingSlider-default2 .arrow a:hover {
opacity: 0.90;
filter: alpha(opacity=90);
}
-div.anythingSlider-default2 .back a {
+.anythingSlider-default2 .back a {
background-position: left top;
}
-div.anythingSlider-default2 .forward a {
+.anythingSlider-default2 .forward a {
background-position: right top;
}
-div.anythingSlider-default2 .back a:hover,
-div.anythingSlider-default2 .back a.hover {
+.anythingSlider-default2 .back a:hover,
+.anythingSlider-default2 .back a.hover {
background-position: left -56px;
}
-div.anythingSlider-default2 .forward a:hover,
-div.anythingSlider-default2 .forward a.hover {
+.anythingSlider-default2 .forward a:hover,
+.anythingSlider-default2 .forward a.hover {
background-position: right -56px;
}
/* Disabled arrows - infiniteSlide = false & stopAtEnd = true */
-div.anythingSlider-default2 .back.disabled,
-div.anythingSlider-default2 .forward.disabled {
+.anythingSlider-default2 .back.disabled,
+.anythingSlider-default2 .forward.disabled {
display: none;
}
/* Navigation tabs - Slider control block */
-div.anythingSlider-default2 .anythingControls {
+.anythingSlider-default2 .anythingControls {
outline: 0;
float: right;
position: absolute;
@@ -141,24 +160,24 @@ div.anythingSlider-default2 .anythingControls {
opacity: 0.70;
filter: alpha(opacity=70);
}
-div.anythingSlider-default2 .anythingControls:hover {
+.anythingSlider-default2 .anythingControls:hover {
opacity: 0.90;
filter: alpha(opacity=90);
}
/* control list */
-div.anythingSlider-default2 .anythingControls ul {
+.anythingSlider-default2 .anythingControls ul {
float: left;
margin: 0;
padding: 0;
z-index: 100;
}
/* control tabs */
-div.anythingSlider-default2 .anythingControls ul li {
+.anythingSlider-default2 .anythingControls ul li {
display: block;
float: left;
}
/* control links */
-div.anythingSlider-default2 .anythingControls ul a {
+.anythingSlider-default2 .anythingControls ul a {
display: block;
background: transparent url(../images/default.png) no-repeat left -111px; /* default tab, active/inactive slider */
text-decoration: none;
@@ -169,23 +188,23 @@ div.anythingSlider-default2 .anythingControls ul a {
outline: 0;
}
/* control nav window (navigationSize = true) */
-div.anythingSlider-default2 .anythingControls .anythingNavWindow {
+.anythingSlider-default2 .anythingControls .anythingNavWindow {
overflow: hidden;
float: left;
}
-div.anythingSlider-default2 .anythingControls ul a.hover,
-div.anythingSlider-default2 .anythingControls ul a:hover {
+.anythingSlider-default2 .anythingControls ul a.hover,
+.anythingSlider-default2 .anythingControls ul a:hover {
background-position: left -129px;
}
-div.anythingSlider-default2 .anythingControls ul a.cur {
+.anythingSlider-default2 .anythingControls ul a.cur {
background-position: -18px -111px;
}
-div.anythingSlider-default2 .anythingControls ul a.cur:hover {
+.anythingSlider-default2 .anythingControls ul a.cur:hover {
background-position: -18px -129px;
}
/* Start/stop button - stopped */
-div.anythingSlider-default2 .start-stop {
+.anythingSlider-default2 .start-stop {
background: transparent url(../images/default.png) no-repeat -37px -111px;
color: #ddd;
width: 18px;
@@ -197,39 +216,63 @@ div.anythingSlider-default2 .start-stop {
margin: 0 0 0 3px;
}
/* Start/stop button - stopped */
-div.anythingSlider-default2 .start-stop:hover,
-div.anythingSlider-default2 .start-stop.hover {
+.anythingSlider-default2 .start-stop:hover,
+.anythingSlider-default2 .start-stop.hover {
background-position: -37px -129px;
}
/* start/stop button - playing */
-div.anythingSlider-default2 .start-stop.playing {
+.anythingSlider-default2 .start-stop.playing {
background-position: -55px -111px;
}
-div.anythingSlider-default2 .start-stop.playing:hover,
-div.anythingSlider-default2 .start-stop.playing.hover {
+.anythingSlider-default2 .start-stop.playing:hover,
+.anythingSlider-default2 .start-stop.playing.hover {
background-position: -55px -129px;
}
/* Navigation size window arrows */
-div.anythingSlider-default2 .anythingControls li.next a span, div.anythingSlider-default2 .anythingControls li.prev a span {
+.anythingSlider-default2 .anythingControls li.next a span, .anythingSlider-default2 .anythingControls li.prev a span {
font-size: 9px;
text-indent: 1px;
padding: 6px 0 0 5px;
}
-div.anythingSlider-default2 .anythingControls li.prev a, div.anythingSlider-default2 .anythingControls li.next a {
+.anythingSlider-default2 .anythingControls li.prev a, .anythingSlider-default2 .anythingControls li.next a {
color: #ddd;
}
-div.anythingSlider-default2 .anythingControls li.next a:hover, div.anythingSlider-default2 .anythingControls li.prev a:hover {
+.anythingSlider-default2 .anythingControls li.next a:hover, .anythingSlider-default2 .anythingControls li.prev a:hover {
color: #000;
}
/***********************
COMMON SLIDER STYLING
***********************/
/* 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 */
-div.anythingSlider-default2 .arrow a span, div.anythingSlider-default2 .anythingControls ul a span, div.anythingSlider-default2 .start-stop span {
+.anythingSlider-default2 .arrow a span, .anythingSlider-default2 .anythingControls ul a span, .anythingSlider-default2 .start-stop span {
display: block;
line-height: 1px; /* needed for IE7 */
width: 0;
visibility: hidden; /* needed for IE8, instead of text-indent: -9999px */
}
+/* AnythingSlider IE7 and older styling */
+.as-oldie div.anythingSlider .arrow {
+ margin: 0;
+}
+/* When using the navigationSize option, the side margins need to be zero
+ None of the navigation panels look good in IE7 now =( */
+.as-oldie div.anythingSlider .anythingControls {
+ margin: 0 0 0 30px;
+}
+}.as-oldie div.anythingSlider .anythingControls ul.thumbNav a {
+ margin: 0 0 0 2px;
+}
+.as-oldie div.anythingSlider .anythingControls .anythingNavWindow li {
+ padding: 3px 0 0 0;
+}
+.as-oldie div.anythingSlider .anythingControls {
+ display: block;
+ width: 95%; /* arbitrary percentage, adjust to fit your slider in IE7 */
+ margin: 0;
+}
+.as-oldie .anythingSlider-default2 .anythingControls {
+ width: 90%;
+ margin-left: 0;
+}
View
128 css/theme-mini-dark.css
@@ -1,12 +1,11 @@
/*
- AnythingSlider v1.7+ themes
- Mini Dark theme
+ AnythingSlider v1.8+ Mini Dark theme
+ by Rob Garrison (aka Mottie)
*/
-
/****************************
SET DEFAULT DIMENSIONS HERE
****************************/
-/* Change the ID to match your slider */
+/* change the ID & dimensions to match your slider */
#slider {
width: 700px;
height: 390px;
@@ -16,9 +15,8 @@
overflow-x: hidden;
}
-/* Opera width restriction */
+/* anythingBase class added to the #slider above by the plugin */
.anythingBase {
- max-width: 32766px;
background: transparent;
list-style: none;
position: absolute;
@@ -34,11 +32,11 @@
ACTIVE STATE (slider has keyboard focus)
*************/
/* slider window, active state */
-div.anythingSlider-mini-dark.activeSlider .arrow a {
+.anythingSlider-mini-dark.activeSlider .arrow a {
opacity: 0.90;
filter: alpha(opacity=90);
}
-div.anythingSlider-mini-dark.activeSlider .anythingControls {
+.anythingSlider-mini-dark.activeSlider .anythingControls {
opacity: 0.90;
filter: alpha(opacity=90);
}
@@ -47,49 +45,62 @@ div.anythingSlider-mini-dark.activeSlider .anythingControls {
DEFAULT STATE (no keyboard focus)
*****************/
/* Overall Wrapper */
-div.anythingSlider-mini-dark {
+.anythingSlider-mini-dark {
display: block;
position: relative;
margin: 0 auto;
padding: 0; /* adjust left/right padding here to move arrows towards or away from the center */
}
-/* Panels/Slides */
-.anythingBase .panel {
+/* all panels inside the slider; horizontal mode */
+.anythingSlider .panel {
background: transparent;
display: block;
overflow: hidden;
float: left;
- margin: 0;
padding: 0;
+ margin: 0;
+}
+/* vertical mode */
+.anythingSlider .vertical .panel {
+ float: none;
}
-/* Vertical panels */
-.anythingBase .panel.vertical {
+
+/* fade mode */
+.anythingSlider .fade .panel {
float: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+}
+/* fade mode active page - visible & on top */
+.anythingSlider .fade .activePage {
+ z-index: 0;
}
/* Slider window - top & bottom borders, default state */
-div.anythingSlider-mini-dark .anythingWindow {
+.anythingSlider-mini-dark .anythingWindow {
border: 0;
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
}
/* Arrow buttons position */
-div.anythingSlider-mini-dark .arrow {
+.anythingSlider-mini-dark .arrow {
top: 50%;
position: absolute;
display: block;
}
-div.anythingSlider-mini-dark span.back {
+.anythingSlider-mini-dark span.back {
left: 0;
}
-div.anythingSlider-mini-dark span.forward {
+.anythingSlider-mini-dark span.forward {
right: 0;
}
/* Arrow buttons images */
-div.anythingSlider-mini-dark .arrow a {
+.anythingSlider-mini-dark .arrow a {
display: block;
background: transparent url(../images/mini-dark.png) no-repeat;
height: 42px;
@@ -101,33 +112,33 @@ div.anythingSlider-mini-dark .arrow a {
opacity: 0.60;
filter: alpha(opacity=60);
}
-div.anythingSlider-mini-dark .arrow a:hover {
+.anythingSlider-mini-dark .arrow a:hover {
opacity: 0.90;
filter: alpha(opacity=90);
}
-div.anythingSlider-mini-dark .back a {
+.anythingSlider-mini-dark .back a {
background-position: left top;
}
-div.anythingSlider-mini-dark .forward a {
+.anythingSlider-mini-dark .forward a {
background-position: right top;
}
-div.anythingSlider-mini-dark .back a:hover,
-div.anythingSlider-mini-dark .back a.hover {
+.anythingSlider-mini-dark .back a:hover,
+.anythingSlider-mini-dark .back a.hover {
background-position: left -43px;
}
-div.anythingSlider-mini-dark .forward a:hover,
-div.anythingSlider-mini-dark .forward a.hover {
+.anythingSlider-mini-dark .forward a:hover,
+.anythingSlider-mini-dark .forward a.hover {
background-position: right -43px;
}
/* Disabled arrows - infiniteSlide = false & stopAtEnd = true */
-div.anythingSlider-mini-dark .back.disabled,
-div.anythingSlider-mini-dark .forward.disabled {
+.anythingSlider-mini-dark .back.disabled,
+.anythingSlider-mini-dark .forward.disabled {
display: none;
}
/* Navigation tabs - Slider control block */
-div.anythingSlider-mini-dark .anythingControls {
+.anythingSlider-mini-dark .anythingControls {
outline: 0;
margin: 0 auto;
position: absolute;
@@ -137,24 +148,24 @@ div.anythingSlider-mini-dark .anythingControls {
opacity: 0.60;
filter: alpha(opacity=60);
}
-div.anythingSlider-mini-dark .anythingControls:hover {
+.anythingSlider-mini-dark .anythingControls:hover {
opacity: 0.90;
filter: alpha(opacity=90);
}
/* control list */
-div.anythingSlider-mini-dark .anythingControls ul {
+.anythingSlider-mini-dark .anythingControls ul {
float: left;
margin: 0;
padding: 0;
z-index: 100;
}
/* control tabs */
-div.anythingSlider-mini-dark .anythingControls ul li {
+.anythingSlider-mini-dark .anythingControls ul li {
display: block;
float: left;
}
/* control links */
-div.anythingSlider-mini-dark .anythingControls ul a {
+.anythingSlider-mini-dark .anythingControls ul a {
display: block;
background: transparent url(../images/mini-dark.png) no-repeat left -85px; /* default tab, active/inactive slider */
text-decoration: none;
@@ -165,23 +176,23 @@ div.anythingSlider-mini-dark .anythingControls ul a {
outline: 0;
}
/* control nav window (navigationSize = true) */
-div.anythingSlider-mini-dark .anythingControls .anythingNavWindow {
+.anythingSlider-mini-dark .anythingControls .anythingNavWindow {
overflow: hidden;
float: left;
}
-div.anythingSlider-mini-dark .anythingControls ul a.hover,
-div.anythingSlider-mini-dark .anythingControls ul a:hover {
+.anythingSlider-mini-dark .anythingControls ul a.hover,
+.anythingSlider-mini-dark .anythingControls ul a:hover {
background-position: left bottom;
}
-div.anythingSlider-mini-dark .anythingControls ul a.cur {
+.anythingSlider-mini-dark .anythingControls ul a.cur {
background-position: -12px -85px;
}
-div.anythingSlider-mini-dark .anythingControls ul a.cur:hover {
+.anythingSlider-mini-dark .anythingControls ul a.cur:hover {
background-position: -12px bottom;
}
/* Start/stop button - stopped */
-div.anythingSlider-mini-dark .start-stop {
+.anythingSlider-mini-dark .start-stop {
background: transparent url(../images/mini-dark.png) no-repeat -22px -85px;
color: #ddd;
width: 11px;
@@ -192,39 +203,60 @@ div.anythingSlider-mini-dark .start-stop {
outline: 0;
}
/* Start/stop button - stopped */
-div.anythingSlider-mini-dark .start-stop:hover,
-div.anythingSlider-mini-dark .start-stop.hover {
+.anythingSlider-mini-dark .start-stop:hover,
+.anythingSlider-mini-dark .start-stop.hover {
background-position: -22px bottom;
}
/* start/stop button - playing */
-div.anythingSlider-mini-dark .start-stop.playing {
+.anythingSlider-mini-dark .start-stop.playing {
background-position: right -85px;
}
-div.anythingSlider-mini-dark .start-stop.playing:hover,
-div.anythingSlider-mini-dark .start-stop.playing.hover {
+.anythingSlider-mini-dark .start-stop.playing:hover,
+.anythingSlider-mini-dark .start-stop.playing.hover {
background-position: right bottom;
}
/* Navigation size window arrows */
-div.anythingSlider-mini-dark .anythingControls li.next a span, div.anythingSlider-mini-dark .anythingControls li.prev a span {
+.anythingSlider-mini-dark .anythingControls li.next a span, .anythingSlider-mini-dark .anythingControls li.prev a span {
text-indent: 1px;
padding: 4px 0 0 3px;
font-size: 8px;
}
-div.anythingSlider-mini-dark .anythingControls li.prev a, div.anythingSlider-mini-dark .anythingControls li.next a {
+.anythingSlider-mini-dark .anythingControls li.prev a, .anythingSlider-mini-dark .anythingControls li.next a {
color: #ddd;
}
-div.anythingSlider-mini-dark .anythingControls li.next a:hover, div.anythingSlider-mini-dark .anythingControls li.prev a:hover {
+.anythingSlider-mini-dark .anythingControls li.next a:hover, .anythingSlider-mini-dark .anythingControls li.prev a:hover {
color: #000;
}
/***********************
COMMON SLIDER STYLING
***********************/
/* 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 */
-div.anythingSlider-mini-dark .arrow a span, div.anythingSlider-mini-dark .anythingControls ul a span, div.anythingSlider-mini-dark .start-stop span {
+.anythingSlider-mini-dark .arrow a span, .anythingSlider-mini-dark .anythingControls ul a span, .anythingSlider-mini-dark .start-stop span {
display: block;
line-height: 1px; /* needed for IE7 */
width: 0;
visibility: hidden; /* needed for IE8, instead of text-indent: -9999px */
}
+
+/* AnythingSlider IE7 and older styling */
+.as-oldie div.anythingSlider .arrow {
+ margin: 0;
+}
+/* When using the navigationSize option, the side margins need to be zero
+ None of the navigation panels look good in IE7 now =( */
+.as-oldie div.anythingSlider .anythingControls {
+ margin: 0 0 0 30px;
+}
+}.as-oldie div.anythingSlider .anythingControls ul.thumbNav a {
+ margin: 0 0 0 2px;
+}
+.as-oldie div.anythingSlider .anythingControls .anythingNavWindow li {
+ padding: 3px 0 0 0;
+}
+.as-oldie div.anythingSlider .anythingControls {
+ display: block;
+ width: 95%; /* arbitrary percentage, adjust to fit your slider in IE7 */
+ margin: 0;
+}
View
120 css/theme-mini-light.css
@@ -1,6 +1,7 @@
/*
AnythingSlider v1.7+ themes
Mini Light theme
+ by Rob Garrison (aka Mottie)
*/
/****************************
@@ -18,7 +19,6 @@
/* Opera width restriction */
.anythingBase {
- max-width: 32766px;
background: transparent;
list-style: none;
position: absolute;
@@ -33,11 +33,11 @@
/*************
ACTIVE STATE (slider has keyboard focus)
*************/
-div.anythingSlider-mini-light.activeSlider .arrow a {
+.anythingSlider-mini-light.activeSlider .arrow a {
opacity: 0.80;
filter: alpha(opacity=80);
}
-div.anythingSlider-mini-light.activeSlider .anythingControls {
+.anythingSlider-mini-light.activeSlider .anythingControls {
opacity: 0.80;
filter: alpha(opacity=80);
}
@@ -46,49 +46,62 @@ div.anythingSlider-mini-light.activeSlider .anythingControls {
DEFAULT STATE (no keyboard focus)
*****************/
/* Overall Wrapper */
-div.anythingSlider-mini-light {
+.anythingSlider-mini-light {
display: block;
position: relative;
margin: 0 auto;
padding: 0; /* adjust left/right padding here to move arrows towards or away from the center */
}
-/* Panels/Slides */
-.anythingBase .panel {
+/* all panels inside the slider; horizontal mode */
+.anythingSlider .panel {
background: transparent;
display: block;
overflow: hidden;
float: left;
- margin: 0;
padding: 0;
+ margin: 0;
}
-/* Vertical panels */
-.anythingBase .panel.vertical {
+/* vertical mode */
+.anythingSlider .vertical .panel {
+ float: none;
+}
+
+/* fade mode */
+.anythingSlider .fade .panel {
float: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+}
+/* fade mode active page - visible & on top */
+.anythingSlider .fade .activePage {
+ z-index: 0;
}
/* Slider window - top & bottom borders, default state */
-div.anythingSlider-mini-light .anythingWindow {
+.anythingSlider-mini-light .anythingWindow {
border: 0;
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
}
/* Arrow buttons position */
-div.anythingSlider-mini-light .arrow {
+.anythingSlider-mini-light .arrow {
top: 50%;
position: absolute;
display: block;
}
-div.anythingSlider-mini-light span.back {
+.anythingSlider-mini-light span.back {
left: 0;
}
-div.anythingSlider-mini-light span.forward {
+.anythingSlider-mini-light span.forward {
right: 0;
}
/* Arrow buttons images */
-div.anythingSlider-mini-light .arrow a {
+.anythingSlider-mini-light .arrow a {
display: block;
background: transparent url(../images/mini-light.png) no-repeat;
height: 42px;
@@ -100,33 +113,33 @@ div.anythingSlider-mini-light .arrow a {
opacity: 0.50;
filter: alpha(opacity=50);
}
-div.anythingSlider-mini-light .arrow a:hover {
+.anythingSlider-mini-light .arrow a:hover {
opacity: 0.80;
filter: alpha(opacity=80);
}
-div.anythingSlider-mini-light .back a {
+.anythingSlider-mini-light .back a {
background-position: left top;
}
-div.anythingSlider-mini-light .forward a {
+.anythingSlider-mini-light .forward a {
background-position: right top;
}
-div.anythingSlider-mini-light .back a:hover,
-div.anythingSlider-mini-light .back a.hover {
+.anythingSlider-mini-light .back a:hover,
+.anythingSlider-mini-light .back a.hover {
background-position: left -43px;
}
-div.anythingSlider-mini-light .forward a:hover,
-div.anythingSlider-mini-light .forward a.hover {
+.anythingSlider-mini-light .forward a:hover,
+.anythingSlider-mini-light .forward a.hover {
background-position: right -43px;
}
/* Disabled arrows - infiniteSlide = false & stopAtEnd = true */
-div.anythingSlider-mini-light .back.disabled,
-div.anythingSlider-mini-light .forward.disabled {
+.anythingSlider-mini-light .back.disabled,
+.anythingSlider-mini-light .forward.disabled {
display: none;
}
/* Navigation tabs - Slider control block */
-div.anythingSlider-mini-light .anythingControls {
+.anythingSlider-mini-light .anythingControls {
outline: 0;
float: right;
position: absolute;
@@ -136,24 +149,24 @@ div.anythingSlider-mini-light .anythingControls {
opacity: 0.50;
filter: alpha(opacity=50);
}
-div.anythingSlider-mini-light .anythingControls:hover {
+.anythingSlider-mini-light .anythingControls:hover {
opacity: 0.80;
filter: alpha(opacity=80);
}
/* control list */
-div.anythingSlider-mini-light .anythingControls ul {
+.anythingSlider-mini-light .anythingControls ul {
float: left;
margin: 0;
padding: 0;
z-index: 100;
}
/* control tabs */
-div.anythingSlider-mini-light .anythingControls ul li {
+.anythingSlider-mini-light .anythingControls ul li {
display: block;
float: left;
}
/* control links */
-div.anythingSlider-mini-light .anythingControls ul a {
+.anythingSlider-mini-light .anythingControls ul a {
display: block;
background: transparent url(../images/mini-light.png) no-repeat left -85px; /* default tab, active/inactive slider */
text-decoration: none;
@@ -164,23 +177,23 @@ div.anythingSlider-mini-light .anythingControls ul a {
outline: 0;
}
/* control nav window (navigationSize = true) */
-div.anythingSlider-mini-light .anythingControls .anythingNavWindow {
+.anythingSlider-mini-light .anythingControls .anythingNavWindow {
overflow: hidden;
float: left;
}
-div.anythingSlider-mini-light .anythingControls ul a.hover,
-div.anythingSlider-mini-light .anythingControls ul a:hover {
+.anythingSlider-mini-light .anythingControls ul a.hover,
+.anythingSlider-mini-light .anythingControls ul a:hover {
background-position: left bottom;
}
-div.anythingSlider-mini-light .anythingControls ul a.cur {
+.anythingSlider-mini-light .anythingControls ul a.cur {
background-position: -11px -85px;
}
-div.anythingSlider-mini-light .anythingControls ul a.cur:hover {
+.anythingSlider-mini-light .anythingControls ul a.cur:hover {
background-position: -11px bottom;
}
/* Start/stop button - stopped */
-div.anythingSlider-mini-light .start-stop {
+.anythingSlider-mini-light .start-stop {
background: transparent url(../images/mini-light.png) no-repeat -22px -85px;
color: #ddd;
width: 11px;
@@ -191,39 +204,60 @@ div.anythingSlider-mini-light .start-stop {
outline: 0;
}
/* Start/stop button - stopped */
-div.anythingSlider-mini-light .start-stop:hover,
-div.anythingSlider-mini-light .start-stop.hover {
+.anythingSlider-mini-light .start-stop:hover,
+.anythingSlider-mini-light .start-stop.hover {
background-position: -22px bottom;
}
/* start/stop button - playing */
-div.anythingSlider-mini-light .start-stop.playing {
+.anythingSlider-mini-light .start-stop.playing {
background-position: right -85px;
}
-div.anythingSlider-mini-light .start-stop.playing:hover,
-div.anythingSlider-mini-light .start-stop.playing.hover {
+.anythingSlider-mini-light .start-stop.playing:hover,
+.anythingSlider-mini-light .start-stop.playing.hover {
background-position: right bottom;
}
/* Navigation size window arrows */
-div.anythingSlider-mini-light .anythingControls li.next a span, div.anythingSlider-mini-light .anythingControls li.prev a span {
+.anythingSlider-mini-light .anythingControls li.next a span, .anythingSlider-mini-light .anythingControls li.prev a span {
text-indent: 1px;
padding: 4px 0 0 3px;
font-size: 8px;
}
-div.anythingSlider-mini-light .anythingControls li.prev a, div.anythingSlider-mini-light .anythingControls li.next a {
+.anythingSlider-mini-light .anythingControls li.prev a, .anythingSlider-mini-light .anythingControls li.next a {
color: #ddd;
}
-div.anythingSlider-mini-light .anythingControls li.next a:hover, div.anythingSlider-mini-light .anythingControls li.prev a:hover {
+.anythingSlider-mini-light .anythingControls li.next a:hover, .anythingSlider-mini-light .anythingControls li.prev a:hover {
color: #000;
}
/***********************
COMMON SLIDER STYLING
***********************/
/* 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 */
-div.anythingSlider-mini-light .arrow a span, div.anythingSlider-mini-light .anythingControls ul a span, div.anythingSlider-mini-light .start-stop span {
+.anythingSlider-mini-light .arrow a span, .anythingSlider-mini-light .anythingControls ul a span, .anythingSlider-mini-light .start-stop span {
display: block;
line-height: 1px; /* needed for IE7 */
width: 0;
visibility: hidden; /* needed for IE8, instead of text-indent: -9999px */
}
+
+/* AnythingSlider IE7 and older styling */
+.as-oldie div.anythingSlider .arrow {
+ margin: 0;
+}
+/* When using the navigationSize option, the side margins need to be zero
+ None of the navigation panels look good in IE7 now =( */
+.as-oldie div.anythingSlider .anythingControls {
+ margin: 0 0 0 30px;
+}
+}.as-oldie div.anythingSlider .anythingControls ul.thumbNav a {
+ margin: 0 0 0 2px;
+}
+.as-oldie div.anythingSlider .anythingControls .anythingNavWindow li {
+ padding: 3px 0 0 0;
+}
+.as-oldie div.anythingSlider .anythingControls {
+ display: block;
+ width: 95%; /* arbitrary percentage, adjust to fit your slider in IE7 */
+ margin: 0;
+}
View
117 css/theme-office.css
@@ -1,6 +1,7 @@
/*
AnythingSlider v1.7+ themes
Office Supplies theme
+ by Rob Garrison (aka Mottie)
*/
/****************************
@@ -18,7 +19,6 @@
/* Opera width restriction */
.anythingBase {
- max-width: 32766px;
background: transparent;
list-style: none;
position: absolute;
@@ -34,55 +34,68 @@
ACTIVE STATE (slider has keyboard focus)
*************/
/* slider window - top & bottom borders, active state */
-div.anythingSlider-office.activeSlider .anythingWindow {}
+.anythingSlider-office.activeSlider .anythingWindow {}
/*****************
DEFAULT STATE (no keyboard focus)
*****************/
/* Overall Wrapper */
-div.anythingSlider-office {
+.anythingSlider-office {
display: block;
position: relative;
margin: 0 auto;
padding: 0 16px; /* adjust left/right padding here to move arrows towards or away from the center */
}
-/* Panels/Slides */
-.anythingBase .panel {
+/* all panels inside the slider; horizontal mode */
+.anythingSlider .panel {
background: transparent;
display: block;
overflow: hidden;
float: left;
- margin: 0;
padding: 0;
+ margin: 0;
}
-/* Vertical panels */
-.anythingBase .panel.vertical {
+/* vertical mode */
+.anythingSlider .vertical .panel {
+ float: none;
+}
+
+/* fade mode */
+.anythingSlider .fade .panel {
float: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+}
+/* fade mode active page - visible & on top */
+.anythingSlider .fade .activePage {
+ z-index: 0;
}
/* Slider window - top & bottom borders, default state */
-div.anythingSlider-office .anythingWindow {
+.anythingSlider-office .anythingWindow {
border: 0;
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
}
/* Arrow buttons position */
-div.anythingSlider-office .arrow {
+.anythingSlider-office .arrow {
top: 50%;
position: absolute;
display: block;
}
-div.anythingSlider-office span.back {
+.anythingSlider-office span.back {
left: 0;
}
-div.anythingSlider-office span.forward {
+.anythingSlider-office span.forward {
right: 0;
}
/* Arrow buttons images */
-div.anythingSlider-office .arrow a {
+.anythingSlider-office .arrow a {
display: block;
background: transparent url(../images/office.png) no-repeat;
width: 90px;
@@ -92,29 +105,29 @@ div.anythingSlider-office .arrow a {
outline: 0;
margin: -22px 0 0; /* set to 1/2 height */
}
-div.anythingSlider-office .back a {
+.anythingSlider-office .back a {
background-position: left top;
}
-div.anythingSlider-office .forward a {
+.anythingSlider-office .forward a {
background-position: 1px -45px;
}
-div.anythingSlider-office .back a:hover,
-div.anythingSlider-office .back a.hover {
+.anythingSlider-office .back a:hover,
+.anythingSlider-office .back a.hover {
background-position: left -90px;
}
-div.anythingSlider-office .forward a:hover,
-div.anythingSlider-office .forward a.hover {
+.anythingSlider-office .forward a:hover,
+.anythingSlider-office .forward a.hover {
background-position: 1px -135px;
}
/* Disabled arrows - infiniteSlide = false & stopAtEnd = true */
-div.anythingSlider-office .back.disabled,
-div.anythingSlider-office .forward.disabled {
+.anythingSlider-office .back.disabled,
+.anythingSlider-office .forward.disabled {
display: none;
}
/* Navigation tabs - Slider control block */
-div.anythingSlider-office .anythingControls {
+.anythingSlider-office .anythingControls {
outline: 0;
float: right;
position: absolute;
@@ -123,19 +136,19 @@ div.anythingSlider-office .anythingControls {
z-index: 100;
}
/* control list */
-div.anythingSlider-office .anythingControls ul {
+.anythingSlider-office .anythingControls ul {
float: left;
margin: 0;
padding: 0;
z-index: 100;
}
/* control tabs */
-div.anythingSlider-office .anythingControls ul li {
+.anythingSlider-office .anythingControls ul li {
display: block;
float: left;
}
/* control links */
-div.anythingSlider-office .anythingControls ul a {
+.anythingSlider-office .anythingControls ul a {
display: block;
background: transparent url(../images/office.png) no-repeat left -182px; /* default tab, active/inactive slider */
text-decoration: none;
@@ -146,23 +159,23 @@ div.anythingSlider-office .anythingControls ul a {
outline: 0;
}
/* control nav window (navigationSize = true) */
-div.anythingSlider-office .anythingControls .anythingNavWindow {
+.anythingSlider-office .anythingControls .anythingNavWindow {
overflow: hidden;
float: left;
}
-div.anythingSlider-office .anythingControls ul a.hover,
-div.anythingSlider-office .anythingControls ul a:hover {
+.anythingSlider-office .anythingControls ul a.hover,
+.anythingSlider-office .anythingControls ul a:hover {
background-position: left -204px;
}
-div.anythingSlider-office .anythingControls ul a.cur {
+.anythingSlider-office .anythingControls ul a.cur {
background-position: -23px -182px;
}
-div.anythingSlider-office .anythingControls ul a.cur:hover {
+.anythingSlider-office .anythingControls ul a.cur:hover {
background-position: -23px -204px;
}
/* Start/stop button - stopped */
-div.anythingSlider-office .start-stop {
+.anythingSlider-office .start-stop {
background: transparent url(../images/office.png) no-repeat -67px -182px;
color: #ddd;
width: 22px;
@@ -174,38 +187,62 @@ div.anythingSlider-office .start-stop {
margin: 0 0 0 3px;
}
/* Start/stop button - stopped */
-div.anythingSlider-office .start-stop:hover,
-div.anythingSlider-office .start-stop.hover {
+.anythingSlider-office .start-stop:hover,
+.anythingSlider-office .start-stop.hover {
background-position: -67px -204px;
}
/* start/stop button - playing */
-div.anythingSlider-office .start-stop.playing {
+.anythingSlider-office .start-stop.playing {
background-position: -45px -182px;
}
-div.anythingSlider-office .start-stop.playing:hover,
-div.anythingSlider-office .start-stop.playing.hover {
+.anythingSlider-office .start-stop.playing:hover,
+.anythingSlider-office .start-stop.playing.hover {
background-position: -45px -204px;
}
/* Navigation size window arrows */
-div.anythingSlider-office .anythingControls li.next a span, div.anythingSlider-office .anythingControls li.prev a span {
+.anythingSlider-office .anythingControls li.next a span, .anythingSlider-office .anythingControls li.prev a span {
text-indent: 1px;
padding: 8px 0 0 7px;
}
-div.anythingSlider-office .anythingControls li.prev a, div.anythingSlider-office .anythingControls li.next a {
+.anythingSlider-office .anythingControls li.prev a, .anythingSlider-office .anythingControls li.next a {
color: #ddd;
}
-div.anythingSlider-office .anythingControls li.next a:hover, div.anythingSlider-office .anythingControls li.prev a:hover {
+.anythingSlider-office .anythingControls li.next a:hover, .anythingSlider-office .anythingControls li.prev a:hover {
color: #000;
}
/***********************
COMMON SLIDER STYLING
***********************/
/* 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 */
-div.anythingSlider-office .arrow a span, div.anythingSlider-office .anythingControls ul a span, div.anythingSlider-office .start-stop span {
+.anythingSlider-office .arrow a span, .anythingSlider-office .anythingControls ul a span, .anythingSlider-office .start-stop span {
display: block;
line-height: 1px; /* needed for IE7 */
width: 0;
visibility: hidden; /* needed for IE8, instead of text-indent: -9999px */
}
+/* AnythingSlider IE7 and older styling */
+.as-oldie div.anythingSlider .arrow {
+ margin: 0;
+}
+/* When using the navigationSize option, the side margins need to be zero
+ None of the navigation panels look good in IE7 now =( */
+.as-oldie div.anythingSlider .anythingControls {
+ margin: 0 0 0 30px;
+}
+}.as-oldie div.anythingSlider .anythingControls ul.thumbNav a {
+ margin: 0 0 0 2px;
+}
+.as-oldie div.anythingSlider .anythingControls .anythingNavWindow li {
+ padding: 3px 0 0 0;
+}
+.as-oldie div.anythingSlider .anythingControls {
+ display: block;
+ width: 95%; /* arbitrary percentage, adjust to fit your slider in IE7 */
+ margin: 0;
+}
+.as-oldie .anythingSlider-office .anythingControls {
+ width: 90%;
+ margin-left: 0;
+}
View
117 css/theme-polished.css
@@ -1,6 +1,7 @@
/*
AnythingSlider v1.7+ themes
Polished Aluminum theme
+ by Rob Garrison (aka Mottie)
*/
/****************************
@@ -18,7 +19,6 @@
/* Opera width restriction */
.anythingBase {
- max-width: 32766px;
background: transparent;
list-style: none;
position: absolute;
@@ -34,37 +34,50 @@
ACTIVE STATE (slider has keyboard focus)
*************/
/* slider window - top & bottom borders, active state */
-div.anythingSlider-polished.activeSlider .anythingWindow {
+.anythingSlider-polished.activeSlider .anythingWindow {
border-color: #999;
}
/*****************
DEFAULT STATE (no keyboard focus)
*****************/
/* Overall Wrapper */
-div.anythingSlider-polished {
+.anythingSlider-polished {
display: block;
position: relative;
margin: 0 auto;
padding: 0 4px; /* adjust left/right padding here to move arrows towards or away from the center */
}
-/* Panels/Slides */
-.anythingBase .panel {
+/* all panels inside the slider; horizontal mode */
+.anythingSlider .panel {
background: transparent;
display: block;
overflow: hidden;
float: left;
- margin: 0;
padding: 0;
+ margin: 0;
}
-/* Vertical panels */
-.anythingBase .panel.vertical {
+/* vertical mode */
+.anythingSlider .vertical .panel {
+ float: none;
+}
+
+/* fade mode */
+.anythingSlider .fade .panel {
float: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+}
+/* fade mode active page - visible & on top */
+.anythingSlider .fade .activePage {
+ z-index: 0;
}
/* Slider window - top & bottom borders, default state */
-div.anythingSlider-polished .anythingWindow {
+.anythingSlider-polished .anythingWindow {
border-top: 3px solid #777;
border-bottom: 3px solid #777;
overflow: hidden;
@@ -73,19 +86,19 @@ div.anythingSlider-polished .anythingWindow {
height: 100%;
}
/* Arrow buttons position */
-div.anythingSlider-polished .arrow {
+.anythingSlider-polished .arrow {
top: 50%;
position: absolute;
display: block;
}
-div.anythingSlider-polished span.back {
+.anythingSlider-polished span.back {
left: 0;
}
-div.anythingSlider-polished span.forward {
+.anythingSlider-polished span.forward {
right: 0;
}
/* Arrow buttons images */
-div.anythingSlider-polished .arrow a {
+.anythingSlider-polished .arrow a {
display: block;
background: transparent url(../images/polished.png) no-repeat;
width: 32px;
@@ -95,29 +108,29 @@ div.anythingSlider-polished .arrow a {
outline: 0;
margin: -20px 0 0; /* set to 1/2 height */
}
-div.anythingSlider-polished .back a {
+.anythingSlider-polished .back a {
background-position: left top;
}
-div.anythingSlider-polished .forward a {
+.anythingSlider-polished .forward a {
background-position: right top;
}
-div.anythingSlider-polished .back a:hover,
-div.anythingSlider-polished .back a.hover {
+.anythingSlider-polished .back a:hover,
+.anythingSlider-polished .back a.hover {
background-position: left -39px;
}
-div.anythingSlider-polished .forward a:hover,
-div.anythingSlider-polished .forward a.hover {
+.anythingSlider-polished .forward a:hover,
+.anythingSlider-polished .forward a.hover {
background-position: right -39px;
}
/* Disabled arrows - infiniteSlide = false & stopAtEnd = true */
-div.anythingSlider-polished .back.disabled,
-div.anythingSlider-polished .forward.disabled {
+.anythingSlider-polished .back.disabled,
+.anythingSlider-polished .forward.disabled {
display: none;
}
/* Navigation tabs - Slider control block */
-div.anythingSlider-polished .anythingControls {
+.anythingSlider-polished .anythingControls {
outline: 0;
float: right;
position: absolute;
@@ -126,19 +139,19 @@ div.anythingSlider-polished .anythingControls {
z-index: 100;
}
/* control list */
-div.anythingSlider-polished .anythingControls ul {
+.anythingSlider-polished .anythingControls ul {
float: left;
margin: 0;
padding: 0;
z-index: 100;
}
/* control tabs */
-div.anythingSlider-polished .anythingControls ul li {
+.anythingSlider-polished .anythingControls ul li {
display: block;
float: left;
}
/* control links */
-div.anythingSlider-polished .anythingControls ul a {
+.anythingSlider-polished .anythingControls ul a {
display: block;
background: transparent url(../images/polished.png) no-repeat left -80px; /* default tab, active/inactive slider */
text-decoration: none;
@@ -149,23 +162,23 @@ div.anythingSlider-polished .anythingControls ul a {
outline: 0;
}
/* control nav window (navigationSize = true) */
-div.anythingSlider-polished .anythingControls .anythingNavWindow {
+.anythingSlider-polished .anythingControls .anythingNavWindow {
overflow: hidden;
float: left;
}
-div.anythingSlider-polished .anythingControls ul a.hover,
-div.anythingSlider-polished .anythingControls ul a:hover {
+.anythingSlider-polished .anythingControls ul a.hover,
+.anythingSlider-polished .anythingControls ul a:hover {
background-position: left -97px;
}
-div.anythingSlider-polished .anythingControls ul a.cur {
+.anythingSlider-polished .anythingControls ul a.cur {
background-position: -17px -80px;
}
-div.anythingSlider-polished .anythingControls ul a.cur:hover {
+.anythingSlider-polished .anythingControls ul a.cur:hover {
background-position: -17px -97px;
}
/* Start/stop button - stopped */
-div.anythingSlider-polished .start-stop {
+.anythingSlider-polished .start-stop {
background: transparent url(../images/polished.png) no-repeat -48px -80px;
color: #ddd;
width: 15px;
@@ -177,38 +190,62 @@ div.anythingSlider-polished .start-stop {
margin: 0 0 0 3px;
}
/* Start/stop button - stopped */
-div.anythingSlider-polished .start-stop:hover,
-div.anythingSlider-polished .start-stop.hover {
+.anythingSlider-polished .start-stop:hover,
+.anythingSlider-polished .start-stop.hover {
background-position: -48px -97px;
}
/* start/stop button - playing */
-div.anythingSlider-polished .start-stop.playing {
+.anythingSlider-polished .start-stop.playing {
background-position: -32px -80px;
}
-div.anythingSlider-polished .start-stop.playing:hover,
-div.anythingSlider-polished .start-stop.playing.hover {
+.anythingSlider-polished .start-stop.playing:hover,
+.anythingSlider-polished .start-stop.playing.hover {
background-position: -32px -97px;
}
/* Navigation size window arrows */
-div.anythingSlider-polished .anythingControls li.next a span, div.anythingSlider-polished .anythingControls li.prev a span {
+.anythingSlider-polished .anythingControls li.next a span, .anythingSlider-polished .anythingControls li.prev a span {
text-indent: 1px;
padding: 6px 0 0 4px;
}
-div.anythingSlider-polished .anythingControls li.prev a, div.anythingSlider-polished .anythingControls li.next a {
+.anythingSlider-polished .anythingControls li.prev a, .anythingSlider-polished .anythingControls li.next a {
color: #ddd;
}
-div.anythingSlider-polished .anythingControls li.next a:hover, div.anythingSlider-polished .anythingControls li.prev a:hover {
+.anythingSlider-polished .anythingControls li.next a:hover, .anythingSlider-polished .anythingControls li.prev a:hover {
color: #000;
}
/***********************
COMMON SLIDER STYLING
***********************/
/* 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 */
-div.anythingSlider-polished .arrow a span, div.anythingSlider-polished .anythingControls ul a span, div.anythingSlider-polished .start-stop span {
+.anythingSlider-polished .arrow a span, .anythingSlider-polished .anythingControls ul a span, .anythingSlider-polished .start-stop span {
display: block;
line-height: 1px; /* needed for IE7 */
width: 0;
visibility: hidden; /* needed for IE8, instead of text-indent: -9999px */
}
+/* AnythingSlider IE7 and older styling */
+.as-oldie div.anythingSlider .arrow {
+ margin: 0;
+}
+/* When using the navigationSize option, the side margins need to be zero
+ None of the navigation panels look good in IE7 now =( */
+.as-oldie div.anythingSlider .anythingControls {
+ margin: 0 0 0 30px;
+}
+}.as-oldie div.anythingSlider .anythingControls ul.thumbNav a {
+ margin: 0 0 0 2px;
+}
+.as-oldie div.anythingSlider .anythingControls .anythingNavWindow li {
+ padding: 3px 0 0 0;
+}
+.as-oldie div.anythingSlider .anythingControls {
+ display: block;
+ width: 95%; /* arbitrary percentage, adjust to fit your slider in IE7 */
+ margin: 0;
+}
+.as-oldie .anythingSlider-polished .anythingControls {
+ width: 90%;
+ margin-left: 0;
+}
View
117 css/theme-ribbon.css
@@ -1,6 +1,7 @@
/*
AnythingSlider v1.7+ themes
Ribbon theme
+ by Rob Garrison (aka Mottie)
*/
/****************************
@@ -18,7 +19,6 @@
/* Opera width restriction */
.anythingBase {
- max-width: 32766px;
background: transparent;
list-style: none;
position: absolute;
@@ -34,37 +34,50 @@
ACTIVE STATE (slider has keyboard focus)
*************/
/* slider window - top & bottom borders, active state */
-div.anythingSlider-ribbon.activeSlider .anythingWindow {
+.anythingSlider-ribbon.activeSlider .anythingWindow {
border-color: #74a1ba;
}
/*****************
DEFAULT STATE (no keyboard focus)
*****************/
/* Overall Wrapper */
-div.anythingSlider-ribbon {
+.anythingSlider-ribbon {
display: block;
position: relative;
margin: 0 auto;
padding: 0 6px; /* adjust left/right padding here to move arrows towards or away from the center */
}
-/* Panels/Slides */
-.anythingBase .panel {
+/* all panels inside the slider; horizontal mode */
+.anythingSlider .panel {
background: transparent;
display: block;
overflow: hidden;
float: left;
- margin: 0;
padding: 0;
+ margin: 0;
}
-/* Vertical panels */
-.anythingBase .panel.vertical {
+/* vertical mode */
+.anythingSlider .vertical .panel {
+ float: none;
+}
+
+/* fade mode */
+.anythingSlider .fade .panel {
float: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+}
+/* fade mode active page - visible & on top */
+.anythingSlider .fade .activePage {
+ z-index: 0;
}
/* Slider window - top & bottom borders, default state */
-div.anythingSlider-ribbon .anythingWindow {
+.anythingSlider-ribbon .anythingWindow {
border-top: 3px solid #111;
border-bottom: 3px solid #111;
overflow: hidden;
@@ -73,19 +86,19 @@ div.anythingSlider-ribbon .anythingWindow {
height: 100%;
}
/* Arrow buttons position */
-div.anythingSlider-ribbon .arrow {
+.anythingSlider-ribbon .arrow {
top: 50%;
position: absolute;
display: block;
}
-div.anythingSlider-ribbon span.back {
+.anythingSlider-ribbon span.back {
left: 0;
}
-div.anythingSlider-ribbon span.forward {
+.anythingSlider-ribbon span.forward {
right: 0;
}
/* Arrow buttons images */
-div.anythingSlider-ribbon .arrow a {
+.anythingSlider-ribbon .arrow a {
display: block;
background: transparent url(../images/ribbon.png) no-repeat;
width: 41px;
@@ -95,29 +108,29 @@ div.anythingSlider-ribbon .arrow a {
outline: 0;
margin: -20px 0 0; /* set to 1/2 height */
}
-div.anythingSlider-ribbon .back a {
+.anythingSlider-ribbon .back a {
background-position: -2px top;
}
-div.anythingSlider-ribbon .forward a {
+.anythingSlider-ribbon .forward a {
background-position: right top;
}
-div.anythingSlider-ribbon .back a:hover,
-div.anythingSlider-ribbon .back a.hover {
+.anythingSlider-ribbon .back a:hover,
+.anythingSlider-ribbon .back a.hover {
background-position: -2px -39px;
}
-div.anythingSlider-ribbon .forward a:hover,
-div.anythingSlider-ribbon .forward a.hover {
+.anythingSlider-ribbon .forward a:hover,
+.anythingSlider-ribbon .forward a.hover {
background-position: right -39px;
}
/* Disabled arrows - infiniteSlide = false & stopAtEnd = true */
-div.anythingSlider-ribbon .back.disabled,
-div.anythingSlider-ribbon .forward.disabled {
+.anythingSlider-ribbon .back.disabled,
+.anythingSlider-ribbon .forward.disabled {
display: none;
}
/* Navigation tabs - Slider control block */
-div.anythingSlider-ribbon .anythingControls {
+.anythingSlider-ribbon .anythingControls {
outline: 0;
float: right;
position: absolute;
@@ -126,19 +139,19 @@ div.anythingSlider-ribbon .anythingControls {
z-index: 100;
}
/* control list */
-div.anythingSlider-ribbon .anythingControls ul {
+.anythingSlider-ribbon .anythingControls ul {
float: left;
margin: 0;
padding: 0;
z-index: 100;
}
/* control tabs */
-div.anythingSlider-ribbon .anythingControls ul li {
+.anythingSlider-ribbon .anythingControls ul li {
display: block;
float: left;
}
/* control links */
-div.anythingSlider-ribbon .anythingControls ul a {
+.anythingSlider-ribbon .anythingControls ul a {
display: block;
background: transparent url(../images/ribbon.png) no-repeat left -77px; /* default tab, active/inactive slider */
text-decoration: none;
@@ -149,23 +162,23 @@ div.anythingSlider-ribbon .anythingControls ul a {
outline: 0;
}
/* control nav window (navigationSize = true) */
-div.anythingSlider-ribbon .anythingControls .anythingNavWindow {
+.anythingSlider-ribbon .anythingControls .anythingNavWindow {
overflow: hidden;
float: left;
}
-div.anythingSlider-ribbon .anythingControls ul a.hover,
-div.anythingSlider-ribbon .anythingControls ul a:hover {
+.anythingSlider-ribbon .anythingControls ul a.hover,
+.anythingSlider-ribbon .anythingControls ul a:hover {
background-position: left -93px;
}
-div.anythingSlider-ribbon .anythingControls ul a.cur {
+.anythingSlider-ribbon .anythingControls ul a.cur {
background-position: -17px -77px;
}
-div.anythingSlider-ribbon .anythingControls ul a.cur:hover {
+.anythingSlider-ribbon .anythingControls ul a.cur:hover {
background-position: -17px -93px;
}
/* Start/stop button - stopped */
-div.anythingSlider-ribbon .start-stop {
+.anythingSlider-ribbon .start-stop {
background: transparent url(../images/ribbon.png) no-repeat -51px -77px;
color: #ddd;
width: 16px;
@@ -177,39 +190,63 @@ div.anythingSlider-ribbon .start-stop {
margin: 0 0 0 3px;
}
/* Start/stop button - stopped */
-div.anythingSlider-ribbon .start-stop:hover,
-div.anythingSlider-ribbon .start-stop.hover {
+.anythingSlider-ribbon .start-stop:hover,
+.anythingSlider-ribbon .start-stop.hover {
background-position: -51px -93px;
}
/* start/stop button - playing */
-div.anythingSlider-ribbon .start-stop.playing {
+.anythingSlider-ribbon .start-stop.playing {
background-position: -34px -77px;
}
-div.anythingSlider-ribbon .start-stop.playing:hover,
-div.anythingSlider-ribbon .start-stop.playing.hover {
+.anythingSlider-ribbon .start-stop.playing:hover,
+.anythingSlider-ribbon .start-stop.playing.hover {
background-position: -34px -93px;
}
/* Navigation size window arrows */
-div.anythingSlider-ribbon .anythingControls li.next a span, div.anythingSlider-ribbon .anythingControls li.prev a span {
+.anythingSlider-ribbon .anythingControls li.next a span, .anythingSlider-ribbon .anythingControls li.prev a span {
text-indent: 1px;
font-size: 11px;
padding: 7px 0 0 5px;
}
-div.anythingSlider-ribbon .anythingControls li.prev a, div.anythingSlider-ribbon .anythingControls li.next a {
+.anythingSlider-ribbon .anythingControls li.prev a, .anythingSlider-ribbon .anythingControls li.next a {
color: #ddd;
}
-div.anythingSlider-ribbon .anythingControls li.next a:hover, div.anythingSlider-ribbon .anythingControls li.prev a:hover {
+.anythingSlider-ribbon .anythingControls li.next a:hover, .anythingSlider-ribbon .anythingControls li.prev a:hover {
color: #000;
}
/***********************