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