Playground CSS improvements (#109)

This PR addresses #105 in attempt to make the playground looks nicer.
Things done:
- Vertically aligned headers and items inside it
- Change Run button color + add border radius

example/z-playground/client/playground.css

@@ -39,14 +39,17 @@ body {
 }
 
 
-
+header {
+  height: 64px;
+  display: flex;
+  align-items: center
+}
 /* Editor */
 
 h1 {
   margin: 0;
-  height: 21px;
-  padding: 21px 0 20px 32px;
   display: inline-block;
+  margin-left: 24px;
   font-weight: normal;
 }
 
@@ -61,26 +64,28 @@ h1 {
   font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
 }
 
-button {
+#editor button {
   font: inherit;
   color: inherit;
   margin-left: 2em;
-  background-color: rgba(255, 255, 255, 0.2);
-  border: none;
+  background-color: #4338CA;
   font-weight: bold;
+  border: none;
+  padding: 4px 8px;
+  border-radius: 4px;
 }
 
-button:hover {
+#editor button:hover {
   cursor: pointer;
-  background-color: rgba(255, 255, 255, 0.3);
+  background-color: #3730A3;
 }
 
 #editor header > a {
-  float: right;
   color: inherit;
   text-decoration: none;
-  margin-right: 2em;
-  margin-top: 28px;
+  flex: 1;
+  text-align: right;
+  margin-right: 24px;
 }
 
 @media (max-width: 550px) {
@@ -116,23 +121,19 @@ button:hover {
 /* Client */
 
 #client header {
-  height: 63px;
   background-color: #eee;
   box-sizing: border-box;
   border-bottom: 1px solid #ccc;
+  padding: 16px;
 }
 
 #client input {
-  display: inline-block;
-  width: calc(100% - 10px);
+  width: 100%;
+  height: 100%;
   background: none;
-  color: initial;
-  font: inherit;
   border: none;
-  padding: 0 5px;
-  margin-top: 28px;
-  margin-left: 5px;
   border: 1px solid #aaa;
+  padding: 8px;
 }
 
 #client input:focus {