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-family: Arial, sans-serif;
  31         text-shadow: 0.03em 0.03em #cccccc;
  32         border: 0.02em #cccccc solid;
  33         border-radius: 0.5em;
  34         margin: 0.2em;
  35         padding: 0.1em;
  36 }
  37
  38 @media only screen and (min-width: 200px) {
  39         #display, #alarm-text {
  40                 font-size: 1.5em;
  41         }
  42 }
  43
  44 @media only screen and (min-width: 300px) {
  45         #display, #alarm-text {
  46                 font-size: 3em;
  47         }
  48 }
  49
  50 @media only screen and (min-width: 400px) {
  51         #display, #alarm-text {
  52                 font-size: 4em;
  53         }
  54 }
  55
  56 @media only screen and (min-width: 500px) {
  57         #display, #alarm-text {
  58                 font-size: 5em;
  59         }
  60 }
  61
  62 @media only screen and (min-width: 600px) {
  63         #display, #alarm-text {
  64                 font-size: 6em;
  65         }
  66 }
  67
  68 @media only screen and (min-width: 700px) {
  69         #display, #alarm-text {
  70                 font-size: 7em;
  71         }
  72 }
  73
  74 @media only screen and (min-width: 800px) {
  75         #display, #alarm-text {
  76                 font-size: 8em;
  77         }
  78 }
  79
  80 @media only screen and (min-width: 1000px) {
  81         #display, #alarm-text {
  82                 font-size: 10em;
  83         }
  84 }
  85
  86 @media only screen and (min-width: 1400px) {
  87         #display, #alarm-text {
  88                 font-size: 10em;
  89         }
  90 }
  91
  92 #alarm-text {
  93         text-decoration: blink;
  94 }
  95
  96 #display span {
  97         display: inline-block;
  98         width: 0.7em;
  99 }
 100
 101 #number-buttons {
 102         margin: 1em;
 103 }
 104 #number-buttons button {
 105         margin: 0.2em;
 106 }
 107
 108
 109 button {
 110         -moz-box-shadow: inset 0em 0.1em 0em 0em #ffffff;
 111         -webkit-box-shadow: inset 0em 0.1em 0em 0em #ffffff;
 112         box-shadow: inset 0em 0.1em 0em 0em #ffffff;
 113         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
 114         background: -moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
 115         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
 116         background-color: #ededed;
 117         -moz-border-radius: 0.4em;
 118         -webkit-border-radius: 0.4em;
 119         border-radius: 0.4em;
 120         border: 0.1em solid #dcdcdc;
 121         display: inline-block;
 122         color: #777777;
 123         font-family: arial;
 124         font-weight: bold;
 125         padding: 0.4em 1.5em;
 126         text-decoration: none;
 127         text-shadow: 0.1em 0.1em 0em #ffffff;
 128 }
 129
 130 button:hover {
 131         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
 132         background: -moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
 133         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
 134         background-color: #dfdfdf;
 135 }
 136
 137 button:active {
 138         position:relative;
 139         top:0.1em;
 140 }
 141
 142 button.action {
 143         -moz-box-shadow: inset 0em 0.1em 0em 0em #97c4fe;
 144         -webkit-box-shadow: inset 0em 0.1em 0em 0em #97c4fe;
 145         box-shadow: inset 0em 0.1em 0em 0em #97c4fe;
 146         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0) );
 147         background: -moz-linear-gradient( center top, #3d94f6 5%, #1e62d0 100% );
 148         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0');
 149         background-color: #3d94f6;
 150         border: 0.1em solid #337fed;
 151         text-shadow: 0.1em 0.1em 0em #1570cd;
 152         color: #ffffff;
 153 }
 154
 155 button.action:hover {
 156         background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #1e62d0), color-stop(1, #3d94f6) );
 157         background: -moz-linear-gradient( center top, #1e62d0 5%, #3d94f6 100% );
 158         filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e62d0', endColorstr='#3d94f6');
 159         background-color: #1e62d0;
 160 }
 161
 162
 163
 164
 165 /* Default hidden */
 166
 167 #configure-controls, #countdown-controls, #countdown-pause, #alarm {
 168         display: none;
 169 }
 170
 171
 172 /* State: alarm */
 173
 174 body.alarm {
 175         background-color: #c05080;
 176 }
 177
 178 body.alarm #countdown-controls, body.alarm #display {
 179         display: none !important;
 180 }
 181
 182 body.alarm #alarm {
 183         display: block;
 184 }
 185
 186
 187
 188 /* State: countdown */
 189
 190 body.countdown #countdown-controls {
 191         display: block;
 192 }
 193
 194
 195
 196 /* State: configure */
 197
 198 body.configure #configure-controls {
 199         display: block;
 200 }
 201
 202
 203
 204 /* State: counting */
 205
 206 body.counting #countdown-pause {
 207         display: inline;
 208 }
 209
 210 body.counting #countdown-start {
 211         display: none;
 212 }
 213