Fire JS Bin - timer

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

<!DOCTYPE html>
<html manifest='sf/main.appcache' itemscope itemtype="http://schema.org/CreativeWork/WebApp/Utility/Timer" class="mute">
<head>

<title>Timer Tab</title>

<link rel="icon" type="image/png" href="http://brillcdn.appspot.com/sf/favicon.png"/>
<link rel="apple-touch-icon"      href="http://brillcdn.appspot.com/sf/favicon.png"/>

</head>
<body>
  <div id='stripBg1'></div>
  <div id='stripBg2'></div>

<td>
        <form id='stopwForm'></form>
        </td>
      </tr>
      <tr>
        <td><button form='timerForm' id='timerButton' tabindex='-1' type='submit'><span>timer</span></button></td>
        <td><button form='alarmForm' id='alarmButton' tabindex='-1' type='submit'><span>alarm</span></button></td>
        <td><button form='stopwForm' id='stopwButton'               type='submit'><span>stopwatch</span></button></td>
      </tr>
    </table>

</html>

/* notes
{{{
-intial values of transitioned properties must be written inline otherwise a transition will be triggered on page load
}}}
*/

/*activate the GPU for compositing each page => made my previous OS version crash
html
{
  -webkit-transform: translate3d(0, 0, 0);
}
*/

/* structure */
/* {{{ */
/* strips -- outer structure -- CORE: most critical CSS*/
/* {{{ */
/* everything absolute positioning expect #middle */
#stripBg1,
#stripBg2,
#inputs,
#vertical
{
  position: absolute;
}
#inputs,
#stripBg1,
#stripBg2
{
  margin-top: 50px;
  height: 150px;
}
body
{
  margin:0;
}
#inputs,
#stripBg1,
#stripBg2,
#middle
{
  width: 900px;
}
/*only used to middle content -- no other way found to middle content: left:50%;margin-left:width/2; doesn't do if window's width < content's width */
#middle
{
  margin: auto;
}
#vertical
{
  height: 100%; /*for tables height is a min-height */
  display: table;
}
#stripBg1,
#stripBg2
{
  min-width: 100%;
}
#vertical,
#inputs td
{
  width: 300px;
}
html.alarm #vertical
{
  margin-left: 300px !important;
}
html.timer #vertical
{
  margin-left: 0px !important;
}
/* }}} */

/* strips -- inner structure */
/* {{{ */
/* vertical strip */
/* {{{ */
#vertical td
{
  padding:0;
}
#top
{
  vertical-align: bottom;
}
#time
{
  vertical-align: top;
  padding-top: 5px !important;
  height: 45px;
}
#counter
{
  font-size: 105px;
  line-height: 100px;
  padding-top: 40px !important;
  padding-bottom: 8px !important;
  width: 300px;
}
#counter.tiny
{
  font-size: 65px;
}
#inputOverlap
{
  height: 150px;
}
#top
{
  font-size: 14px;
  padding-bottom: 7px !important;
}
#iframe_td
{
  line-height: 0px;
  font-size: 0px;
}
#iframe
{
  height: 180px;
}
#iframe
{
  width: 100%;
  height: 100%;
  border: 0;
  margin: 0;
  padding: 0px 1px 0px 1px;
          box-sizing: border-box;/*supported everywhere expect IE7*/
     -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
/* }}} */
/* horizontal strip */
/* {{{ */
#inputs
{
  font-size: 35px;
}
#inputs tr
{
  vertical-align: top;
}
#inputs tr.first
{
  vertical-align: bottom;
}
#inputs td
{
  padding-top: 0;
  padding-bottom: 0;
}
#button
{
  font-size: 12px;
}
input
{
  font-size: 100%;
  text-align: center;
  padding: 0;
  border: 0;
}
input.s,
.inputSep.s
{
  font-size: 70%;
}
.inputSep
{
  letter-spacing: -3px;
  position: relative;
  left: -1px;
  top: -1px;
}
input
{
  width: 1.5em;
}
input.s
{
  position: relative;
  margin-left: -12px;
  left:         12px;
}
.inputSep.s
{
  padding: 3px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* hides controler buttons of input[type='number'] */
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}
/* }}} */
/* }}} */

/* rest -- big counter + milliseconds */
/* {{{ */
/* #big */
/* {{{ */
html.big #bigCounterContainer
{
  /*bigCounterContainer cos position: absolute => display: block*/
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0; /*height of iframe != 0 -> bigCounter Container top != 0*/
}
html.big #bigCounter
{
  width: 100%;
  height: 100%;
  text-align: center;
  cursor: pointer;
  color: #222;
  vertical-align: middle;
}
html:not(.big) #bigCounter,
html.big #inputs,
html.big #stripBg1,
html.big #stripBg2,
html.big #vertical td *:not(#iframe)
{
  display: none !important;
}
/* overflow: hidden -> iframe reloading in firefox
/* visibility: hidden -> iframe reloading in firefox */
/* 0px height & width -> iframe not loading */
/* position: absolute -> iframe reloading in FF */
/* this should hide the iframe even if window height ->INF */
/* change of position value -> iframe reloading in FF */
#iframe
{ 
  position: relative;
}
html.big #vertical,
html.mute #iframe
{
  top: -1000px;
}
html.mute:not(.opera) #iframe
{
  height: 1px !important;
}
/* }}} */
/* milliseconds */
/* {{{ */
/*
#ms
{
  font-size: 40%;
  opacity: 0.4;
  display:none;
  width: 67px;
  -webkit-transition: all 0.5s ease-in-out;
     -moz-transition: all 0.5s ease-in-out;
       -o-transition: all 0.5s ease-in-out;
          transition: all 0.5s ease-in-out;
}
#ms.hide
{
  width: 0px;
  opacity:0;
}
html.stopwatch #ms
{
  display: inline-block; 
}
*/
/* }}} */
/* }}} */

/* z-index */
/* {{{ */
#stripBg1
{
  z-index: 0;
}
#vertical
{
  z-index: 1;
}
#stripBg2
{
  z-index: 2;
}
#inputs
{
  z-index: 3;
}
#bigCounterContainer
{
  z-index: 4;
}
/* }}} */
/* }}} */

/* details */
/* {{{ */

/* colors */
/* {{{ */
#stripBg1,
/* red: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGElEQVQYV2P8z8AARIQB46hCfIFE/eABAGX8E/e8eQLYAAAAAElFTkSuQmCC
   rgba(255,255,255,0.55): data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQIW2P8//9/DwAJjQOL14spMwAAAABJRU5ErkJggg==
   rgba(0,0,0,0.1): data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGUlEQVQYV2NkYGCQBGKCgHFUIb4won7wAADiuAEFTQyqkgAAAABJRU5ErkJggg==
   rgba(0,0,0,0.07): data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGUlEQVQYV2NkYGAQBGKCgHFUIb4won7wAACdgAC1HEP07QAAAABJRU5ErkJggg==
   rgba(0,0,0,0.06): data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGUlEQVQYV2NkYGDgB2KCgHFUIb4won7wAACMMgChIL+eEAAAAABJRU5ErkJggg==
   rgba(0,0,0,0.065):data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGUlEQVQYV2NkYGAQAGKCgHFUIb4won7wAACU2QCr84FEPQAAAABJRU5ErkJggg==
*/
#vertical,
#bigCounter
{
  /*background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGUlEQVQYV2NkYGAQAGKCgHFUIb4won7wAACU2QCr84FEPQAAAABJRU5ErkJggg==) rgba(255,255,255,0.55);*/
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGUlEQVQYV2NkYGAQAGKCgHFUIb4won7wAACU2QCr84FEPQAAAABJRU5ErkJggg==);
  background-color: rgba(255,255,255,0.55);
}
#stripBg1
{
  background: rgba(255,255,255,0.55);
}
#stripBg2
{
  background: rgba(0,0,0,0.07);
}
hr
{
  opacity: 0.3;
}
input,
button
{
  background: rgba(255,255,255,0.5);
}
input.s,
.inputSep.s
{
  color: #999;
}
a,
#moreButton,
#notiPermission,
#install
{
  color: #000;
  /*
  color: #888;
  */
}
#top
{
  color: #444;
}
#vertical,
#inputs
{
  text-shadow: rgba(255,255,255,0.1) 0px 1px 0px;
  color: #444;
}
body.paused #counter,
body.paused #bigCounter
{
  color: rgba(64,64,64,0.3); /*rgb(64,64,64)==#444*/
}

/* button & input colors */
button,
input
{
  color: #666;
}
button:hover,
button:focus,
input:hover,
input:focus
{
  color: #333;
  background: rgba(255,255,255,0.95);
}
button > span
{
  color: #33b;
}

/* selection styling only works in firefox for now */
input::selection,
input::-webkit-selection
{
  background-color: rgba(48,48,178,0.25);/* #33b ~= rgb(48,48,178) */
}
input::-moz-selection /*stupid firefox wants this selector to be alone*/
{
  background-color: rgba(48,48,178,0.25);
}
/* }}} */

/* transitions & opacity & display */
/* {{{ */
#vertical
{
  -webkit-transition: margin-left 0.3s ease-in-out;
     -moz-transition: margin-left 0.3s ease-in-out;
       -o-transition: margin-left 0.3s ease-in-out;
          transition: margin-left 0.3s ease-in-out;
}
#time
{
  -webkit-transition: opacity     0.3s ease-in-out;
     -moz-transition: opacity     0.3s ease-in-out;
       -o-transition: opacity     0.3s ease-in-out;
          transition: opacity     0.3s ease-in-out;
}
#topBox
{
  -webkit-transition: opacity 0.5s ease-in-out;
     -moz-transition: opacity 0.5s ease-in-out;
       -o-transition: opacity 0.5s ease-in-out;
          transition: opacity 0.5s ease-in-out;
}
button,
input
{
  -webkit-transition: all 0.3s ease-in-out;
     -moz-transition: all 0.3s ease-in-out;
       -o-transition: all 0.3s ease-in-out;
          transition: all 0.3s ease-in-out;
}
#counter,
#bigCounter
{
  -webkit-transition: color 0.3s ease-in-out;
     -moz-transition: color 0.3s ease-in-out;
       -o-transition: color 0.3s ease-in-out;
          transition: color 0.3s ease-in-out;
}
html.alarm #time,
#top:hover #topBox,
html.showOptions #topBox
{
  opacity: 100 !important;
}
/* }}} */

/* text */
/* {{{ */
body.running #pause:before {content:"pause"}
body.ringing #pause:before {content:"stop"}
body.paused  #pause:before {content:"resume"}
/*
#pause.running:before {content:"pause"}
#pause.ringing:before {content:"stop"}
#pause.paused:before {content:"resume"}
*/
#install:before {content:"add to Chrome"}
#notiPermission.on:before {content:"disable notification"}
#notiPermission.off:before {content:"enable notification"}
#yt_url:before {content:"youtube alarm:"}
#bg_toggle:before {content:"background:"}
#moreButton:before {content:"options"}
#sep:before {content:"| "}
.inputSep:before {content:" : "}
/*bug fix for chrome: no onclick on :before*/
#moreButton,#notiPermission,#install{position: relative}
/* }}} */

/* font */
/* {{{ */
body,html,input,a
{
  font-family: Helvetica, Arial;
}
button
{
  font-family: arial,sans-serif;
}
/* <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Lato:300">
   CORS font serving in app engine: http://blog.yjl.im/2010/05/font-face-and-cross-domain-cross-origin.html
   Infos about FF and fonts: http://tech.davemx.com/2010/firefox-font-face-not-working-on-different-domain/
*/
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  /*
  src: local('Lato Light'), local('Lato-Light'), url('lato.woff') format('woff');
  src: local('Lato Light'), local('Lato-Light'), url('http://brillcdn.appspot.com/sf/lato.woff') format('woff');
  src: local('Lato Light'), local('Lato-Light'), url('http://themes.googleusercontent.com/static/fonts/lobster/v4/MWVf-Rwh4GLQVBEwbyI61Q.woff') format('woff');
  src: local('Lato Light'), local('Lato-Light'), url('http://themes.googleusercontent.com/static/fonts/lato/v4/KT3KS9Aol4WfR6Vas8kNcg.woff') format('woff');
  */
  src: local('Lato Light'), local('Lato-Light'),
  url('http://themes.googleusercontent.com/static/fonts/lato/v4/KT3KS9Aol4WfR6Vas8kNcg.woff') format('woff'),
  url('http://brillcdn.appspot.com/sf/lato.woff') format('woff');
}
*
{
  font-family: 'Lato', sans-serif !important;
}
/* }}} */

/* rest */
/* {{{ */
*
{
  -webkit-user-select: none;
     -moz-user-select: -moz-none;
       -o-user-select: none;
          user-select: none;
  cursor: default;
}
input
{
  cursor: text;
  -webkit-user-select: text;
     -moz-user-select: text;
       -o-user-select: text;
          user-select: text;
}
button,
button *,
#counter,
#counter *,
a,
#moreButton,
#notiPermission,
#install
{
  cursor: pointer;
}
a
{
  text-decoration: none;
}
table
{
  text-align: center;
  border-spacing: 0; /* see http://stackoverflow.com/questions/339923/how-to-set-cellpadding-cellspacing-in-css */
}
table td
{
  padding: 0;
}
button,
input
{
  outline: 0;
  border: 0;
  border-radius: 2px;
}
button
{
  text-transform: uppercase;
  font-weight: bold;
  padding: 7px 12px;
  font-size: 12px;
}
/* should be set by JS
html
{
  background-size: cover;
  background-attachment: fixed;
}
*/

#timerButton:before,
#alarmButton:before,
#stopwButton:before
{
  content:"start ";
}
/* }}} */

/* }}} */

Pop out