aboutsummaryrefslogtreecommitdiff
path: root/public/style/main.css
diff options
context:
space:
mode:
authorJoris2016-09-04 21:21:11 +0200
committerJoris2016-09-04 21:21:31 +0200
commit973a039b54327df74396605410ea9abe19c8a4e7 (patch)
treec702564d17e0a490d56845027238eb4f231be785 /public/style/main.css
parent62fee9133f36f655c1ed83e0c2e85394f9948bf5 (diff)
Upgrade to elm 0.17.1
Diffstat (limited to 'public/style/main.css')
-rw-r--r--public/style/main.css171
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;
+}