-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Working with issue #50 and completing the Hotels section.
- Second phase of styling to come, but it is acceptable and functional
- Loading branch information
Showing
7 changed files
with
360 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Original file line | Diff line number | Diff line change |
---|---|---|---|
@@ -0,0 +1,205 @@ | |||
/* | |||
AnythingSlider v1.7+ Default (base) theme | |||
By Chris Coyier: http://css-tricks.com | |||
with major improvements by Doug Neiner: http://pixelgraphics.us/ | |||
based on work by Remy Sharp: http://jqueryfordesigners.com/ | |||
*/ | |||
|
|||
/***************************** | |||
SET DEFAULT DIMENSIONS HERE | |||
*****************************/ | |||
/* change the ID 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; | |||
} | |||
/* Opera width restriction */ | |||
.anythingBase { max-width: 32766px; } | |||
|
|||
/***************** | |||
SET COLORS HERE | |||
*****************/ | |||
|
|||
/* Navigation buttons, default state */ | |||
div.anythingSlider .anythingControls ul a.cur, div.anythingSlider .anythingControls ul a { | |||
background: #777; | |||
color: #000; | |||
} | |||
/* start-stop button, stopped, default state */ | |||
div.anythingSlider .start-stop { | |||
background-color: #040; | |||
color: #fff; | |||
} | |||
/* start-stop button, playing, default state */ | |||
div.anythingSlider .start-stop.playing { | |||
background-color: #800; | |||
} | |||
/* start-stop button, default hovered text color (when visible) */ | |||
div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover { | |||
color: #ddd; | |||
} | |||
|
|||
/* Navigation buttons, active state */ | |||
div.anythingSlider.activeSlider .anythingControls ul a.cur, div.anythingSlider.activeSlider .anythingControls ul a { | |||
background-color: #7C9127; | |||
} | |||
/* start-stop button, stopped, active state */ | |||
div.anythingSlider .start-stop { | |||
background-color: #080; | |||
color: #fff; | |||
} | |||
/* start-stop button, playing, active state */ | |||
div.anythingSlider .start-stop.playing { | |||
background-color: #d00; | |||
} | |||
/* start-stop button, active slider hovered text color (when visible) */ | |||
div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover { | |||
color: #fff; | |||
} | |||
|
|||
/*********************** | |||
COMMON SLIDER STYLING | |||
***********************/ | |||
/* Overall Wrapper: 45px right & left padding for the arrows, 28px @ bottom for navigation */ | |||
div.anythingSlider { | |||
display: block; | |||
margin: 0 auto; | |||
overflow: visible !important; /* needed for Opera and Safari */ | |||
position: relative; | |||
padding: 0 45px 28px 45px; | |||
} | |||
/* anythingSlider viewport window */ | |||
div.anythingSlider .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; | |||
} | |||
/* all panels inside the slider */ | |||
.anythingBase .panel { | |||
background: transparent; | |||
display: block; | |||
overflow: hidden; | |||
float: left; | |||
padding: 0; | |||
margin: 0; | |||
} | |||
.anythingBase .panel.vertical { | |||
float: none; | |||
} | |||
|
|||
/* Navigation Arrows */ | |||
div.anythingSlider .arrow { | |||
top: 310px; | |||
position: absolute; | |||
display: block; | |||
} | |||
div.anythingSlider .arrow a { | |||
display: block; | |||
height: 31px; | |||
margin: 0 0 0 0; | |||
width: 54px; | |||
text-align: center; | |||
outline: 0; | |||
} | |||
|
|||
div.anythingSlider .arrow.back { | |||
background: url(./images/slider-arrow-left.png) no-repeat; | |||
background-position: 0 -31px; | |||
} | |||
|
|||
div.anythingSlider .arrow.forward { | |||
right: -14px; | |||
background: url(./images/slider-arrow-right.png) no-repeat; | |||
background-position: 0 -31px; | |||
} | |||
|
|||
/* hide text, target the span so IE7 doesn't text-indent the link */ | |||
div.anythingSlider .arrow a span { display: block; text-indent: -9999px; } | |||
/* back arrow */ | |||
div.anythingSlider .back { left: 0; } | |||
div.anythingSlider .back a { background-position: left top; } | |||
/*div.anythingSlider .back a:hover, div.anythingSlider .back a.hover { background-position: left -140px; }*/ | |||
div.anythingSlider .back.disabled { display: none; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */ | |||
/* forward arrow */ | |||
div.anythingSlider .forward { right: 3px; } | |||
div.anythingSlider .forward a { background-position: right top; } | |||
/*div.anythingSlider .forward a:hover, div.anythingSlider .forward a.hover { background-position: right -140px; }*/ | |||
div.anythingSlider .forward.disabled { display: none; } /* disabled arrows, hide or reduce opacity: opacity: .5; filter: alpha(opacity=50); */ | |||
|
|||
/* Navigation Links */ | |||
div.anythingSlider .anythingControls { outline: 0; display: none; } | |||
div.anythingSlider .anythingControls ul { margin: 0; padding: 0; float: left; } | |||
div.anythingSlider .anythingControls ul li { display: inline; } | |||
div.anythingSlider .anythingControls ul a { | |||
font: 11px/18px Georgia, Serif; | |||
display: inline-block; | |||
text-decoration: none; | |||
padding: 2px 8px; | |||
height: 18px; | |||
margin: 0 5px 0 0; | |||
background-image: url(../images/default.png); | |||
background-position: center -288px ; | |||
background-repeat: repeat-x; | |||
text-align: center; | |||
outline: 0; | |||
border-radius: 0 0 5px 5px; | |||
-moz-border-radius: 0 0 5px 5px; | |||
-webkit-border-radius: 0 0 5px 5px; | |||
} | |||
div.anythingSlider .anythingControls ul a:hover { | |||
background-image: none; | |||
} | |||
/* Navigation size window */ | |||
div.anythingSlider .anythingControls .anythingNavWindow { overflow: hidden; float: left; } | |||
|
|||
/* slider autoplay right-to-left, reverse order of nav links to look better */ | |||
div.anythingSlider.rtl .anythingControls ul a { float: right; } /* reverse order of nav links */ | |||
div.anythingSlider.rtl .anythingControls ul { float: left; } /* move nav link group to left */ | |||
div.anythingSlider.rtl .anythingWindow { | |||
direction: ltr; | |||
unicode-bidi: bidi-override; | |||
} | |||
/* div.anythingSlider.rtl .start-stop { float: right; } */ /* move start/stop button - in case you want to switch sides */ | |||
|
|||
/* Autoplay Start/Stop button */ | |||
div.anythingSlider .start-stop { | |||
background-image: url(../images/default.png); | |||
background-position: center -288px; | |||
background-repeat: repeat-x; | |||
padding: 2px 5px; | |||
width: 40px; | |||
text-align: center; | |||
text-decoration: none; | |||
float: right; | |||
z-index: 100; | |||
outline: 0; | |||
border-radius: 0 0 5px 5px; | |||
-moz-border-radius: 0 0 5px 5px; | |||
-webkit-border-radius: 0 0 5px 5px; | |||
} | |||
/* hide cell shading on hover - makes the button appear to come forward */ | |||
div.anythingSlider .start-stop:hover, div.anythingSlider .start-stop.hover { background-image: none; } | |||
|
|||
/* probably not necessary, but added just in case */ | |||
div.anythingSlider, div.anythingSlider .anythingWindow, div.anythingSlider .anythingControls ul a, div.anythingSlider .arrow a, div.anythingSlider .start-stop { | |||
transition-duration: 0; | |||
-o-transition-duration: 0; | |||
-moz-transition-duration: 0; | |||
-webkit-transition-duration: 0; | |||
} |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.