code.delx.au - countdown-timer/blob - timer.css

   1 * {
   2         padding: 0;
   3         margin: 0;
   4         color: #333333;
   5         -webkit-touch-callout: none;
   6         -webkit-user-select: none;
   7         -khtml-user-select: none;
   8         -moz-user-select: none;
   9         -ms-user-select: none;
  10         user-select: none;
  11 }
  12
  13 html, body {
  14         width: 100%;
  15         height: 100%;
  16 }
  17
  18 #content {
  19         width: 1%;
  20         height: 30em;
  21
  22         margin-left: auto;
  23         margin-right: auto;
  24         text-align: center;
  25         display: table-cell;
  26         vertical-align: middle;
  27 }
  28
  29 #display, #alarm-text {
  30         font-size: 10em;
  31         font-family: Verdana, Arial, Lucida, Helvetica, sans-serif;
  32         text-shadow: 0.03em 0.03em #cccccc;
  33         border: 0.02em #cccccc solid;
  34         border-radius: 0.5em;
  35         margin: 0.2em;
  36 }
  37
  38 #alarm-text {
  39         text-decoration: blink;
  40 }
  41
  42 #display span {
  43         display: inline-block;
  44         width: 0.7em;
  45 }
  46
  47 #number-buttons {
  48         margin: 1em;
  49 }
  50 #number-buttons button {
  51         margin: 0.2em;
  52 }
  53
  54
  55 button {
  56         -moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
  57         -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
  58         box-shadow: inset 0px 1px 0px 0px #ffffff;
  59         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
  60         background: -moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
  61         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
  62         background-color: #ededed;
  63         -moz-border-radius: 6px;
  64         -webkit-border-radius: 6px;
  65         border-radius: 6px;
  66         border: 1px solid #dcdcdc;
  67         display: inline-block;
  68         color: #777777;
  69         font-family: arial;
  70         font-size: 15px;
  71         font-weight: bold;
  72         padding: 6px 24px;
  73         text-decoration: none;
  74         text-shadow: 1px 1px 0px #ffffff;
  75 }
  76
  77 button:hover {
  78         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
  79         background: -moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
  80         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
  81         background-color: #dfdfdf;
  82 }
  83
  84 button:active {
  85         position:relative;
  86         top:1px;
  87 }
  88
  89 button.action {
  90         -moz-box-shadow: inset 0px 1px 0px 0px #97c4fe;
  91         -webkit-box-shadow: inset 0px 1px 0px 0px #97c4fe;
  92         box-shadow: inset 0px 1px 0px 0px #97c4fe;
  93         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0) );
  94         background: -moz-linear-gradient( center top, #3d94f6 5%, #1e62d0 100% );
  95         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0');
  96         background-color: #3d94f6;
  97         border: 1px solid #337fed;
  98         text-shadow: 1px 1px 0px #1570cd;
  99         color: #ffffff;
 100 }
 101
 102 button.action:hover {
 103         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1e62d0), color-stop(1, #3d94f6) );
 104         background: -moz-linear-gradient( center top, #1e62d0 5%, #3d94f6 100% );
 105         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e62d0', endColorstr='#3d94f6');
 106         background-color: #1e62d0;
 107 }
 108
 109
 110
 111
 112 /* Default hidden */
 113
 114 #configure-controls, #countdown-controls, #countdown-pause, #alarm {
 115         display: none;
 116 }
 117
 118
 119 /* State: alarm */
 120
 121 body.alarm {
 122         background-color: #c05080;
 123 }
 124
 125 body.alarm #countdown-controls, body.alarm #display {
 126         display: none !important;
 127 }
 128
 129 body.alarm #alarm {
 130         display: block;
 131 }
 132
 133
 134
 135 /* State: countdown */
 136
 137 body.countdown #countdown-controls {
 138         display: block;
 139 }
 140
 141
 142
 143 /* State: configure */
 144
 145 body.configure #configure-controls {
 146         display: block;
 147 }
 148
 149
 150
 151 /* State: counting */
 152
 153 body.counting #countdown-pause {
 154         display: inline;
 155 }
 156
 157 body.counting #countdown-start {
 158         display: none;
 159 }
 160