pencil & css buttons

style.css

@@ -70,7 +70,7 @@ section, div, footer {
     border-right: 1px solid black;
 }
 
-input[type=number] {
+.grid input {
     width: 1.5em;
     height: 1.5em;
     font-size: 1.5em;
@@ -88,53 +88,77 @@ input::-webkit-inner-spin-button {
 input::-webkit-calendar-picker-indicator {
     display: none;
 }
-input[type=number]:enabled {
-    color: darkblue;
+.grid input:enabled {
     background: white;
 }
-input[type=number]:disabled, button:enabled {
+.grid input:disabled, button:enabled {
     color: white;
     background: #6666ff;
 }
-input[type=number].same-value:enabled {
-    color: #009973 !important;
-    background: #66ffd9 !important;
+.grid input.same-value:enabled {
+    background: #ffff33;
 }
-input[type=number].forbidden-value:enabled {
-    background: #b3ffda !important;
+.grid input.forbidden-value:enabled {
+    background: #ffff77;
 }
-input[type=number].same-value, button.same-value:enabled {
-    color: white !important;
-    background: #00e6ac !important;
+.grid input.same-value:disabled, button.same-value:enabled {
+    color: #ffff99;
+    background: #00cc66;
 }
-input[type=number].forbidden-value:disabled {
-    background: #6288ea !important;
+.grid input.forbidden-value:disabled {
+    color: #ffff99;
+    background: #6666ff;
 }
 input::placeholder {
     color: #888;
 }
+.grid input.ink-pen {
+    color: darkblue;
+}
+.grid input.pencil {
+    color: #666;
+}
 
 .highlight-buttons {
-    column-gap: 0.3em;
+    column-gap: 2px;
 }
 button, input[type="color"] {
     border: 2px outset #6666ff;
     border-radius: 4px;
-    font-size: 1em;
-    margin: 0 0 1px 0;
+    font-size: 1.2em;
+    padding: 2px 9px 5px 9px;
+    margin:  0px 0px 1px 2px;
 }
-button {
-    padding: 0 8px 2px 8px;
+button:enabled:hover {
+    border-width: 1px;
+    border-style: outset;
+    padding: 3px 9px 5px 10px;
+    margin:  1px 0px 1px 3px;
 }
-button.same-value:enabled {
-    border: 2px inset #00e6ac;
-    padding: 2px 7px 0 9px;
-    margin: 1px 0 0 0;
+button:enabled:active,
+button.pressed:enabled:hover {
+    border-width: 3px;
+    border-style: inset;
+    padding: 2px 6px 2px 9px;
+    margin:  1px 0px 1px 3px;
+}
+button.pressed {
+    border: 2px inset #00cc66;
+    background: #00cc66;
+    padding: 2px 8px 4px 9px;
+    margin:  1px 0px 0px 3px;
+}
+button.pressed:enabled:active {
+    border-width: 4px;
+    border-style: inset;
+    padding: 2px 4px 0px 9px;
+    margin:  0px 0px 0px 3px;
 }
 button:disabled {
     color: lightgrey;
     background: darkgrey;
-    border: 2px outset darkgrey;
+    border: 1px outset darkgrey;
+    padding: 1px 9px 3px 9px;
 }
 input[type="color"] {
     padding: 0;
@@ -154,8 +178,11 @@ a {
     font-family: sans-serif;
     background: #EEE;
     color: #333;
-    border-radius: 3px;
+    border-top-right-radius: 3px;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
     padding: 0;
+    margin: 0;
 }
 
 .context-menu li {