clockface.css 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. .clearfix {
  2. *zoom: 1;
  3. }
  4. .clearfix:before,
  5. .clearfix:after {
  6. display: table;
  7. content: "";
  8. line-height: 0;
  9. }
  10. .clearfix:after {
  11. clear: both;
  12. }
  13. .hide-text {
  14. font: 0/0 a;
  15. color: transparent;
  16. text-shadow: none;
  17. background-color: transparent;
  18. border: 0;
  19. }
  20. .input-block-level {
  21. display: block;
  22. width: 100%;
  23. min-height: 30px;
  24. -webkit-box-sizing: border-box;
  25. -moz-box-sizing: border-box;
  26. box-sizing: border-box;
  27. }
  28. .clockface {
  29. width: 160px;
  30. padding: 3px;
  31. text-align: center;
  32. /*
  33. .l3 .center span {
  34. vertical-align: middle;
  35. display: inline-block;
  36. .ie7-inline-block();
  37. padding: 0 2px;
  38. }
  39. */
  40. /*
  41. input {
  42. width: 20px;
  43. margin: 0;
  44. vertical-align: top;
  45. }
  46. a {
  47. text-decoration: none;
  48. padding: 0 3px;
  49. vertical-align: top;
  50. font-size: 0.85em;
  51. .border-radius(3px);
  52. &.am {margin-right: 8px;}
  53. &.active,
  54. &.active:hover {
  55. .buttonBackground(@btnSuccessBackground, spin(@btnSuccessBackground, 20));
  56. }
  57. }
  58. */
  59. }
  60. .clockface > div {
  61. clear: both;
  62. overflow: auto;
  63. }
  64. .clockface .outer,
  65. .clockface .inner {
  66. width: 22px;
  67. height: 22px;
  68. line-height: 22px;
  69. cursor: default;
  70. -webkit-border-radius: 4px;
  71. -moz-border-radius: 4px;
  72. border-radius: 4px;
  73. }
  74. .clockface .outer.active,
  75. .clockface .inner.active,
  76. .clockface .outer.active:hover,
  77. .clockface .inner.active:hover {
  78. color: #fff;
  79. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  80. }
  81. .clockface .outer:hover,
  82. .clockface .inner:hover {
  83. background-color: #dcdcdc;
  84. }
  85. .clockface .outer {
  86. color: gray;
  87. font-size: 0.8em;
  88. }
  89. .clockface .outer.active,
  90. .clockface .outer.active:hover {
  91. color: #ffffff;
  92. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  93. background-color: #5bb75b;
  94. background-image: -moz-linear-gradient(top, #62c462, #51a351);
  95. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
  96. background-image: -webkit-linear-gradient(top, #62c462, #51a351);
  97. background-image: -o-linear-gradient(top, #62c462, #51a351);
  98. background-image: linear-gradient(to bottom, #62c462, #51a351);
  99. background-repeat: repeat-x;
  100. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0);
  101. border-color: #51a351 #51a351 #387038;
  102. border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  103. *background-color: #51a351;
  104. /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  105. filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  106. }
  107. .clockface .outer.active:hover,
  108. .clockface .outer.active:hover:hover,
  109. .clockface .outer.active:active,
  110. .clockface .outer.active:hover:active,
  111. .clockface .outer.active.active,
  112. .clockface .outer.active:hover.active,
  113. .clockface .outer.active.disabled,
  114. .clockface .outer.active:hover.disabled,
  115. .clockface .outer.active[disabled],
  116. .clockface .outer.active:hover[disabled] {
  117. color: #ffffff;
  118. background-color: #51a351;
  119. *background-color: #499249;
  120. }
  121. .clockface .outer.active:active,
  122. .clockface .outer.active:hover:active,
  123. .clockface .outer.active.active,
  124. .clockface .outer.active:hover.active {
  125. background-color: #408140 \9;
  126. }
  127. .clockface .inner.active,
  128. .clockface .inner.active:hover {
  129. color: #ffffff;
  130. text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  131. background-color: #006dcc;
  132. background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
  133. background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
  134. background-image: -webkit-linear-gradient(top, #0088cc, #0044cc);
  135. background-image: -o-linear-gradient(top, #0088cc, #0044cc);
  136. background-image: linear-gradient(to bottom, #0088cc, #0044cc);
  137. background-repeat: repeat-x;
  138. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0);
  139. border-color: #0044cc #0044cc #002a80;
  140. border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  141. *background-color: #0044cc;
  142. /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  143. filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  144. }
  145. .clockface .inner.active:hover,
  146. .clockface .inner.active:hover:hover,
  147. .clockface .inner.active:active,
  148. .clockface .inner.active:hover:active,
  149. .clockface .inner.active.active,
  150. .clockface .inner.active:hover.active,
  151. .clockface .inner.active.disabled,
  152. .clockface .inner.active:hover.disabled,
  153. .clockface .inner.active[disabled],
  154. .clockface .inner.active:hover[disabled] {
  155. color: #ffffff;
  156. background: none repeat scroll 0 0 #3498DB;
  157. *background-color: #003bb3;
  158. }
  159. .clockface .inner.active:active,
  160. .clockface .inner.active:hover:active,
  161. .clockface .inner.active.active,
  162. .clockface .inner.active:hover.active {
  163. background-color: #003399 \9;
  164. }
  165. .clockface .l1 .cell,
  166. .clockface .l5 .cell {
  167. width: 22px;
  168. display: inline-block;
  169. *display: inline;
  170. /* IE7 inline-block hack */
  171. *zoom: 1;
  172. }
  173. .clockface .l1 .outer {
  174. margin-bottom: 3px;
  175. }
  176. .clockface .l5 .outer {
  177. margin-top: 3px;
  178. }
  179. .clockface .l2 .outer,
  180. .clockface .l3 .outer,
  181. .clockface .l4 .outer,
  182. .clockface .l2 .inner,
  183. .clockface .l3 .inner,
  184. .clockface .l4 .inner {
  185. display: inline-block;
  186. *display: inline;
  187. /* IE7 inline-block hack */
  188. *zoom: 1;
  189. vertical-align: middle;
  190. }
  191. .clockface .l2 .left,
  192. .clockface .l3 .left,
  193. .clockface .l4 .left {
  194. float: left;
  195. }
  196. .clockface .l2 .left .outer,
  197. .clockface .l3 .left .outer,
  198. .clockface .l4 .left .outer {
  199. margin-right: 3px;
  200. }
  201. .clockface .l2 .right,
  202. .clockface .l3 .right,
  203. .clockface .l4 .right {
  204. float: right;
  205. }
  206. .clockface .l2 .right .outer,
  207. .clockface .l3 .right .outer,
  208. .clockface .l4 .right .outer {
  209. margin-left: 3px;
  210. }
  211. .clockface .ampm {
  212. font-size: 0.8em;
  213. text-decoration: none;
  214. border-bottom: dashed 1px;
  215. }
  216. .clockface .ampm:focus {
  217. outline: 0;
  218. outline: thin dotted \9;
  219. /* IE6-9 */
  220. }