aboutsummaryrefslogtreecommitdiff
path: root/design
diff options
context:
space:
mode:
Diffstat (limited to 'design')
-rw-r--r--design/design.css65
-rw-r--r--design/reset.css12
2 files changed, 72 insertions, 5 deletions
diff --git a/design/design.css b/design/design.css
index 820bf29..a8a4ab7 100644
--- a/design/design.css
+++ b/design/design.css
@@ -1,6 +1,6 @@
.headerBar {
background-color: #111111;
- margin-bottom: 30px;
+ margin-bottom: 40px;
font-size: 70px;
box-shadow: 0px 2px 2px grey;
}
@@ -16,6 +16,51 @@
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 {
+ text-align: center;
+ font-size: 30px;
+}
+
+.timer {
+ line-height: 80px;
+ height: 80px;
+}
+
+.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;
@@ -48,11 +93,22 @@
text-align: center;
height: 80px;
margin-right: 20px;
- border-radius: 2px;
+ border-radius: 35px;
+ box-shadow: 0px 4px #AAAAAA;
+ border: 1px solid #DDDDDD;
}
.block:hover {
- border: 1px solid #BBBBBB;
+ border: 1px solid #AAAAAA;
+}
+
+.block:active {
+ transform: translateY(2px);
+ box-shadow: 0px 2px #AAAAAA;
+}
+
+.block:focus {
+ border: 1px solid #AAAAAA;
}
.timer.isRunning > :not(.remove) {
@@ -76,7 +132,6 @@
}
.timer > button {
- border: none;
width: 100px;
font-size: 30px;
}
@@ -90,5 +145,5 @@
}
.timer:not(last-child) {
- margin-bottom: 20px;
+ margin-bottom: 40px;
}
diff --git a/design/reset.css b/design/reset.css
index 419794c..d7942e1 100644
--- a/design/reset.css
+++ b/design/reset.css
@@ -58,3 +58,15 @@ button {
cursor: pointer;
box-sizing: border-box;
}
+
+button::-moz-focus-inner {
+ border: 0;
+}
+
+button:focus {
+ outline: 0;
+}
+
+button:active {
+ padding: 0;
+}