Added padding for timer display

[countdown-timer] / timer.css

diff --git a/timer.css b/timer.css
index 8e7769b902b50f3faac2101be6768e08a9e21ed5..77e95f7b5903b3849b966761a3b035c15b08a942 100644 (file)
--- a/timer.css
+++ b/timer.css
@@ -27,12 +27,66 @@ html, body {
 }
 
 #display, #alarm-text {
-       font-size: 10em;
        font-family: Verdana, Arial, Lucida, Helvetica, sans-serif;
        text-shadow: 0.03em 0.03em #cccccc;
        border: 0.02em #cccccc solid;
        border-radius: 0.5em;
        margin: 0.2em;
+       padding: 0.1em;
+}
+
+@media only screen and (min-width: 200px) {
+       #display, #alarm-text {
+               font-size: 1.5em;
+       }
+}
+
+@media only screen and (min-width: 300px) {
+       #display, #alarm-text {
+               font-size: 3em;
+       }
+}
+
+@media only screen and (min-width: 400px) {
+       #display, #alarm-text {
+               font-size: 4em;
+       }
+}
+
+@media only screen and (min-width: 500px) {
+       #display, #alarm-text {
+               font-size: 5em;
+       }
+}
+
+@media only screen and (min-width: 600px) {
+       #display, #alarm-text {
+               font-size: 6em;
+       }
+}
+
+@media only screen and (min-width: 700px) {
+       #display, #alarm-text {
+               font-size: 7em;
+       }
+}
+
+@media only screen and (min-width: 800px) {
+       #display, #alarm-text {
+               font-size: 8em;
+       }
+}
+
+@media only screen and (min-width: 1000px) {
+       #display, #alarm-text {
+               font-size: 10em;
+       }
+}
+
+@media only screen and (min-width: 1400px) {
+       #display, #alarm-text {
+               font-size: 10em;
+       }
 }
 
 #alarm-text {
@@ -53,25 +107,24 @@ html, body {
 
 
 button {
-       -moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
-       -webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
-       box-shadow: inset 0px 1px 0px 0px #ffffff;
+       -moz-box-shadow: inset 0em 0.1em 0em 0em #ffffff;
+       -webkit-box-shadow: inset 0em 0.1em 0em 0em #ffffff;
+       box-shadow: inset 0em 0.1em 0em 0em #ffffff;
        background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
        background: -moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
        background-color: #ededed;
-       -moz-border-radius: 6px;
-       -webkit-border-radius: 6px;
-       border-radius: 6px;
-       border: 1px solid #dcdcdc;
+       -moz-border-radius: 0.4em;
+       -webkit-border-radius: 0.4em;
+       border-radius: 0.4em;
+       border: 0.1em solid #dcdcdc;
        display: inline-block;
        color: #777777;
        font-family: arial;
-       font-size: 15px;
        font-weight: bold;
-       padding: 6px 24px;
+       padding: 0.4em 1.5em;
        text-decoration: none;
-       text-shadow: 1px 1px 0px #ffffff;
+       text-shadow: 0.1em 0.1em 0em #ffffff;
 }
 
 button:hover {
@@ -83,19 +136,19 @@ button:hover {
 
 button:active {
        position:relative;
-       top:1px;
+       top:0.1em;
 }
 
 button.action {
-       -moz-box-shadow: inset 0px 1px 0px 0px #97c4fe;
-       -webkit-box-shadow: inset 0px 1px 0px 0px #97c4fe;
-       box-shadow: inset 0px 1px 0px 0px #97c4fe;
+       -moz-box-shadow: inset 0em 0.1em 0em 0em #97c4fe;
+       -webkit-box-shadow: inset 0em 0.1em 0em 0em #97c4fe;
+       box-shadow: inset 0em 0.1em 0em 0em #97c4fe;
        background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #3d94f6), color-stop(1, #1e62d0) );
        background: -moz-linear-gradient( center top, #3d94f6 5%, #1e62d0 100% );
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3d94f6', endColorstr='#1e62d0');
        background-color: #3d94f6;
-       border: 1px solid #337fed;
-       text-shadow: 1px 1px 0px #1570cd;
+       border: 0.1em solid #337fed;
+       text-shadow: 0.1em 0.1em 0em #1570cd;
        color: #ffffff;
 }