You are here

jquery_countdown_timer.css in jQuery Countdown Timer 7

Same filename and directory in other branches
  1. 8 css/jquery_countdown_timer.css
.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
  1. .countdownHolder{
  2. width:450px;
  3. margin:0 auto;
  4. font: 28px/1.5 'Open Sans Condensed',sans-serif;
  5. text-align:center;
  6. letter-spacing:-3px;
  7. }
  8. .position{
  9. display: inline-block;
  10. height: 1.6em;
  11. overflow: hidden;
  12. position: relative;
  13. width: 1.05em;
  14. }
  15. .digit{
  16. position:absolute;
  17. display:block;
  18. width:1em;
  19. background-color:#444;
  20. border-radius:0.2em;
  21. text-align:center;
  22. color:#fff;
  23. letter-spacing:-1px;
  24. }
  25. .digit.static{
  26. box-shadow:1px 1px 1px rgba(4, 4, 4, 0.35);
  27. background-image: linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
  28. background-image: -o-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
  29. background-image: -moz-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
  30. background-image: -webkit-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
  31. background-image: -ms-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
  32. background-image: -webkit-gradient(
  33. linear,
  34. left bottom,
  35. left top,
  36. color-stop(0.5, #3A3A3A),
  37. color-stop(0.5, #444444)
  38. );
  39. }
  40. /**
  41. * You can use these classes to hide parts
  42. * of the countdown that you don't need.
  43. */
  44. .countDays{ /* display:none !important;*/ }
  45. .countDiv0{ /* display:none !important;*/ }
  46. .countHours{}
  47. .countDiv1{}
  48. .countMinutes{}
  49. .countDiv2{}
  50. .countSeconds{}
  51. .countDiv{
  52. display:inline-block;
  53. width:16px;
  54. height:1.6em;
  55. position:relative;
  56. }
  57. .countDiv:before,
  58. .countDiv:after{
  59. position:absolute;
  60. width:5px;
  61. height:5px;
  62. background-color:#444;
  63. border-radius:50%;
  64. left:50%;
  65. margin-left:-3px;
  66. top:0.5em;
  67. box-shadow:1px 1px 1px rgba(4, 4, 4, 0.5);
  68. content:'';
  69. }
  70. .countDiv:after{
  71. top:0.9em;
  72. }
  73. #jquery-countdown-timer-note{
  74. color: #666666;
  75. font-size: 12px;
  76. margin: 0 auto;
  77. padding: 4px;
  78. text-align: center;
  79. text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
  80. width: 400px;
  81. }