jquery_countdown_timer.css in jQuery Countdown Timer 7
.countdownHolder{
width:450px;
margin:0 auto;
font: 28px/1.5 'Open Sans Condensed',sans-serif;
text-align:center;
letter-spacing:-3px;
}
.position{
display: inline-block;
height: 1.6em;
overflow: hidden;
position: relative;
width: 1.05em;
}
.digit{
position:absolute;
display:block;
width:1em;
background-color:#444;
border-radius:0.2em;
text-align:center;
color:#fff;
letter-spacing:-1px;
}
.digit.static{
box-shadow:1px 1px 1px rgba(4, 4, 4, 0.35);
background-image: linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
background-image: -o-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
background-image: -moz-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
background-image: -webkit-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
background-image: -ms-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.5, #3A3A3A),
color-stop(0.5, #444444)
);
}
/**
* You can use these classes to hide parts
* of the countdown that you don't need.
*/
.countDays{ /* display:none !important;*/ }
.countDiv0{ /* display:none !important;*/ }
.countHours{}
.countDiv1{}
.countMinutes{}
.countDiv2{}
.countSeconds{}
.countDiv{
display:inline-block;
width:16px;
height:1.6em;
position:relative;
}
.countDiv:before,
.countDiv:after{
position:absolute;
width:5px;
height:5px;
background-color:#444;
border-radius:50%;
left:50%;
margin-left:-3px;
top:0.5em;
box-shadow:1px 1px 1px rgba(4, 4, 4, 0.5);
content:'';
}
.countDiv:after{
top:0.9em;
}
#jquery-countdown-timer-note{
color: #666666;
font-size: 12px;
margin: 0 auto;
padding: 4px;
text-align: center;
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
width: 400px;
}
File
css/jquery_countdown_timer.css
View source
- .countdownHolder{
- width:450px;
- margin:0 auto;
- font: 28px/1.5 'Open Sans Condensed',sans-serif;
- text-align:center;
- letter-spacing:-3px;
- }
-
- .position{
- display: inline-block;
- height: 1.6em;
- overflow: hidden;
- position: relative;
- width: 1.05em;
- }
-
- .digit{
- position:absolute;
- display:block;
- width:1em;
- background-color:#444;
- border-radius:0.2em;
- text-align:center;
- color:#fff;
- letter-spacing:-1px;
- }
-
- .digit.static{
- box-shadow:1px 1px 1px rgba(4, 4, 4, 0.35);
-
- background-image: linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
- background-image: -o-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
- background-image: -moz-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
- background-image: -webkit-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
- background-image: -ms-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
-
- background-image: -webkit-gradient(
- linear,
- left bottom,
- left top,
- color-stop(0.5, #3A3A3A),
- color-stop(0.5, #444444)
- );
- }
-
- /**
- * You can use these classes to hide parts
- * of the countdown that you don't need.
- */
-
- .countDays{ /* display:none !important;*/ }
- .countDiv0{ /* display:none !important;*/ }
- .countHours{}
- .countDiv1{}
- .countMinutes{}
- .countDiv2{}
- .countSeconds{}
-
-
- .countDiv{
- display:inline-block;
- width:16px;
- height:1.6em;
- position:relative;
- }
-
- .countDiv:before,
- .countDiv:after{
- position:absolute;
- width:5px;
- height:5px;
- background-color:#444;
- border-radius:50%;
- left:50%;
- margin-left:-3px;
- top:0.5em;
- box-shadow:1px 1px 1px rgba(4, 4, 4, 0.5);
- content:'';
- }
-
- .countDiv:after{
- top:0.9em;
- }
-
- #jquery-countdown-timer-note{
- color: #666666;
- font-size: 12px;
- margin: 0 auto;
- padding: 4px;
- text-align: center;
- text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
- width: 400px;
- }