Up-in-the-Air – commitdiff

Clone
You can use Git to clone the repository via the web URL. Download snapshot (zip)
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 50ac328)
Buttons visual redesigns
authorJulian Fietkau <git@fietkau.software>
Wed, 25 Sep 2024 23:03:47 +0000 (01:03 +0200)
committerJulian Fietkau <git@fietkau.software>
Wed, 25 Sep 2024 23:03:47 +0000 (01:03 +0200)
index.html patch | blob | history
textures/button-hover.png [new file with mode: 0644] patch | blob
textures/button-pressed.png [new file with mode: 0644] patch | blob
textures/button-standard.png [new file with mode: 0644] patch | blob

diff --git a/index.html b/index.html
index db0e1dfa7ac701f6abcbf9937bd3cfd0f631ec06..1d6c6851fad9f4e55052d17c1940fcab06c758e2 100644 (file)
--- a/index.html
+++ b/index.html
@@ -245,12 +245,34 @@
     padding: 0;
     color: #fff0;
   }
-  .ui-page.title button {
+  .ui-page.title::before {
+    /* image preloading hack */
+    content: url('textures/button-hover.png') url('textures/button-pressed.png');
+    position: absolute;
+    left: -9999px;
+    top: -99999px;
+    opacity: 0;
+  }
+  .ui-page > button {
+    padding: 0;
     width: 8em;
-    padding: .45em .6em;
+    font-family: Cookie;
     font-size: 2.5em;
     line-height: 1em;
-    font-family: Cookie;
+    appearance: none;
+    background: #f4f09a;
+    border: .5em outset #888;
+    border-radius: 1em;
+    border-image: url('textures/button-standard.png') 20 / .75em round;
+    border-image-outset: .2em;
+  }
+  .ui-page > button:hover {
+    background: #e9ce8a;
+    border-image-source: url('textures/button-hover.png');
+  }
+  .ui-page > button:active {
+    background: #f9c8d5;
+    border-image-source: url('textures/button-pressed.png');
   }
   .ui-page.title .footer {
     position: absolute;
@@ -284,13 +306,6 @@
     align-items: center;
     gap: 1em;
   }
-  .ui-page.credits button {
-    width: 8em;
-    padding: .45em .6em;
-    font-size: 2.5em;
-    line-height: 1em;
-    font-family: Cookie;
-  }
   .ui-page.options {
     padding: 1em;
     display: flex;
@@ -309,24 +324,20 @@
     gap: 1ex;
   }
   .ui-page.options .areatabs button {
-    font-size: 1.6em;
+    appearance: none;
+    width: 8em;
+    padding: .5em;
+    border: none;
+    border-radius: 1em 1em 0 0;
     background: #000b;
     color: #fff;
     font-family: 'Nihonium113';
-    border: none;
-    border-radius: 1em 1em 0 0;
+    font-size: 1.6em;
     cursor: pointer;
   }
   .ui-page.options .areatabs button.active {
     padding-bottom: .7em;
   }
-  .ui-page.options button {
-    width: 8em;
-    padding: .45em .6em;
-    font-size: 2.5em;
-    line-height: 1em;
-    font-family: Cookie;
-  }
   .ui-page input[type=range] {
     font-size: 1em;
     accent-color: #c50031;
@@ -450,13 +461,6 @@
     align-items: center;
     gap: 1em;
   }
-  .ui-page.outro button {
-    width: 8em;
-    padding: .45em .6em;
-    font-size: 2.5em;
-    line-height: 1em;
-    font-family: Cookie;
-  }
   .ui-page.pause {
     background: #000b;
     padding: 1em;
@@ -470,16 +474,10 @@
     color: #fff;
     text-shadow: unset;
   }
-  .ui-page.pause button {
-    width: 8em;
-    padding: .45em .6em;
-    font-size: 2.5em;
-    line-height: 1em;
-    font-family: Cookie;
-  }
   .ui-page.pause button.small {
     width: 5em;
-    padding: .45em .6em;
+    padding: 0;
+    border-image-width: 1em;
     font-size: 1.6em;
   }
   .ui-page.gameplay, .ui-page.openingcutscene, .ui-page.endingcutscene {
diff --git a/textures/button-hover.png b/textures/button-hover.png
new file mode 100644 (file)
index 0000000..817d948
Binary files /dev/null and b/textures/button-hover.png differ
diff --git a/textures/button-pressed.png b/textures/button-pressed.png
new file mode 100644 (file)
index 0000000..2334824
Binary files /dev/null and b/textures/button-pressed.png differ
diff --git a/textures/button-standard.png b/textures/button-standard.png
new file mode 100644 (file)
index 0000000..6752817
Binary files /dev/null and b/textures/button-standard.png differ