classic-fvwm.css

commit e9222fcd0cbdb5488f3e8d63543851d559715ecb
parent 0c5bdb36127f3745521fd3a89b81c59672ba696b
Author: Nathanael Gentry <ngentry1@liberty.edu>
Date:   Wed, 19 Jun 2019 23:59:10 -0400

Make command button native

Diffstat:
M
base.css
 | 
66
++++++++++++++++++++++++++++++------------------------------------
D
img/button/button-back-pressed.png
 | 
0

D
img/button/button-back.png
 | 
0

D
img/button/button-front-pressed.png
 | 
0

D
img/button/button-front.png
 | 
0

D
img/button/button-mid-pressed.png
 | 
0

D
img/button/button-mid.png
 | 
0

7 files changed, 30 insertions(+), 36 deletions(-)
diff --git a/base.css b/base.css
@@ -12,6 +12,18 @@
     src: url('fonts/ChicagoFLF.ttf') format('truetype'); /* Safari, Android, iOS */
 }
 
+:root {
+    --button-box-shadow:
+	inset -1px -1px 0px 0px #777,
+	inset -2px -2px 0px 0px #aaa,
+	inset 1px 1px 0px 0px #ddd,
+	inset 2px 2px 0px 0px #fff;
+    --button-hover-bezel:
+	0 0 0 1px #aaa,
+	0 0 0 2px #ddd,
+	0 0 0 3px #000;
+}
+
 html,
 body {
     -moz-user-select: none;
@@ -129,49 +141,31 @@ a {
     border-top: 1px solid #000;
     border-bottom: 1px solid #000;
 }
-.content .command_button,
-.content .command_button:active {
-    height: 26px;
-    position: relative;
-    border: none;
+.content .command_button {
+    height: 22px;
+    background-color: #dedede;
+    display: inline-block;
     margin-bottom: 7px;
     margin-left: 14px;
-    cursor: pointer;
-}
-.content .command_button {
-    background: url(img/button/button-mid.png);
-}
-.content .command_button:before {
-    left: -7px;
-    background: url(img/button/button-front.png) no-repeat;
+    border-radius: 3px;
+    border: 1px solid black;
+    box-shadow: var(--button-box-shadow);
 }
-.content .command_button:after {
-    right: -7px;
-    background: url(img/button/button-back.png) no-repeat;
+.content .command_button:hover {
+    box-shadow:
+	var(--button-box-shadow),
+        var(--button-hover-bezel);
 }
 .content .command_button:active {
-    background: url(img/button/button-mid-pressed.png);
     color: white;
+    background-color: #666;
+    box-shadow:
+	var(--button-hover-bezel),
+	inset -1px -1px 0px 0px #888,
+	inset -2px -2px 0px 0px #777,
+	inset 1px 1px 0px 0px #444,
+	inset 2px 2px 0px 0px #555;
 }
-.content .command_button:active:before {
-    left: -7px;
-    background: url(img/button/button-front-pressed.png) no-repeat;
-}
-.content .command_button:active:after {
-    right: -7px;
-    background: url(img/button/button-back-pressed.png) no-repeat;
-}
-.content .command_button:before,
-.content .command_button:after,
-.content .command_button:active:before,
-.content .command_button:active:after {
-    position: absolute;
-    top: 0;
-    height: 26px;
-    width: 7px;
-    content: "";
-}
-
 /* Hide only visually, but have it available for screenreaders & for SEO purposes. See h5bp.com/v */
 .visuallyhidden {
     border: 0;
diff --git a/img/button/button-back-pressed.png b/img/button/button-back-pressed.png
Binary files differ.
diff --git a/img/button/button-back.png b/img/button/button-back.png
Binary files differ.
diff --git a/img/button/button-front-pressed.png b/img/button/button-front-pressed.png
Binary files differ.
diff --git a/img/button/button-front.png b/img/button/button-front.png
Binary files differ.
diff --git a/img/button/button-mid-pressed.png b/img/button/button-mid-pressed.png
Binary files differ.
diff --git a/img/button/button-mid.png b/img/button/button-mid.png
Binary files differ.