diff options
author | Joris | 2016-09-04 21:21:11 +0200 |
---|---|---|
committer | Joris | 2016-09-04 21:21:31 +0200 |
commit | 973a039b54327df74396605410ea9abe19c8a4e7 (patch) | |
tree | c702564d17e0a490d56845027238eb4f231be785 /public/style/main.css | |
parent | 62fee9133f36f655c1ed83e0c2e85394f9948bf5 (diff) |
Upgrade to elm 0.17.1
Diffstat (limited to 'public/style/main.css')
-rw-r--r-- | public/style/main.css | 171 |
1 files changed, 171 insertions, 0 deletions
diff --git a/public/style/main.css b/public/style/main.css new file mode 100644 index 0000000..7602c7d --- /dev/null +++ b/public/style/main.css @@ -0,0 +1,171 @@ +/**************/ +/* Header bar */ +/**************/ + +.headerBar { + background-color: #111111; + font-size: 70px; + box-shadow: 0px 2px 2px grey; + min-width: 1020px; + margin-bottom: 2px; +} + +.headerBar > button { + background-color: #111111; + color: white; + height: 150px; + line-height: 150px; + font-size: 70px; + border: none; + font-family: "DejaVu Serif"; + transition: color 0.4s ease; +} + +.headerBar > button:focus { + background-color: #222222; +} + +.headerBar > button.title { + letter-spacing: 12px; + padding: 0 50px; +} + +.headerBar > button.addTimer { + float: right; + padding: 0 50px; +} + +.headerBar > button:hover, +.headerBar > button:hover { + color: #CCCC88; + border-color: #CCCC88; +} + +.headerBar > button { + background-color: #111111; + color: white; + height: 150px; + line-height: 150px; + font-size: 70px; + border: none; + font-family: "DejaVu Serif"; + transition: color 0.4s ease; +} + +.headerBar > button:focus { + background-color: #222222; +} + +.headerBar > button.title { + letter-spacing: 12px; + padding: 0 50px; +} + +.headerBar > button.addTimer { + float: right; + padding: 0 50px; +} + +.headerBar > button:hover, +.headerBar > button:hover { + color: #CCCC88; + border-color: #CCCC88; +} + +/**********/ +/* Timers */ +/**********/ + +.timers { + text-align: center; + font-size: 30px; + display: table; + table-layout: auto; + margin-left: auto; + margin-right: auto; + width: 1020px; +} + +.timer { + line-height: 140px; + height: 140px; + position: relative; + display: table-row; +} + +.timer:nth-child(even) { + background-color: #FAFAFA; +} + +.timer.isRinging:hover { + background-color: #FED5AE; +} + +.timer .name, +.timer .time, +.timer button { + display: table-cell; +} + +.timer button { + background-color: rgba(0, 0, 0, 0); + border: none; + width: 140px; + height: 140px; + font-size: 35px; + padding: 0px; + position: relative; +} + +.timer button.remove { + color: #AA2222; +} + +.timer:only-of-type button.remove { + color: grey; +} + +.timer .name { + width: 400px; + letter-spacing: 2px; + cursor: text; +} + +.timer .time { + width: 200px; + letter-spacing: 2px; + cursor: text; + border-radius: 0px; +} + +.timer .progressBar { + background-color: darkgrey; + position: absolute; + left: 0; + top: 133px; + height: 10px; +} + +.timer.isRunning .progressBar { + background-color: #CDE4C2; +} + +.timer.isRinging .progressBar { + background-color: #FED5AE; +} + +.timer:hover.isRinging .progressBar { + top: 0px; + height: 143px; + z-index: 1; + opacity: 0; + cursor: pointer; +} + +.timer .edition.empty { + color: #DDDDDD; +} + +.timer .edition:not(.empty) { + color: darkgrey; +} |