Refactoring, styles, example

dialog.css

@@ -8,6 +8,17 @@
     inherits: true;
     initial-value: #444;
 }
+@property --jsl-dialog-button-normal {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #e0e0e0;
+
+}
+@property --jsl-dialog-button-hover {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #f0f0f0;
+}
 
 .jsl-dialog {
 
@@ -65,6 +76,7 @@
         border: 0px;
         background: transparent;
         color: red;
+        cursor: pointer;
     }
 
     .-content {
@@ -76,17 +88,20 @@
         text-align: right;
 
         .action {
-            font-size: 105%;
+            font-size: 102%;
             border: solid 1px #666;
             border-radius: 0.25rem;
             padding: 0.45rem 0.8rem;
             margin: 0px 0.25rem;
-            background: #eee;
-
+            background: var(--jsl-dialog-button-normal);
+            box-shadow: inset -1px -1px 1px 0px #bbb, inset 1px 1px 1px 0px #fff;
             &.default-action {
                 outline: solid 1px #666;
             }
-
+            &:hover {
+                background: var(--jsl-dialog-button-hover);
+                text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
+            }
             &:active {
                 outline: solid 1px #444;
             }