From 9d07b9c92d1aa376a163311fe514eaf8173fa875 Mon Sep 17 00:00:00 2001
From: Joscha <joscha@plugh.de>
Date: Wed, 9 Apr 2025 15:29:20 +0200
Subject: [PATCH] Tweak look of buttons

---
 showbits-thermal-printer-ui/src/AppPhoto.vue  | 65 +++++++++++++------
 .../src/components/CPhotoButtonFlip.vue       | 13 ++--
 .../src/components/CPhotoButtonGallery.vue    |  8 +--
 .../src/components/CPhotoButtonRecord.vue     |  6 +-
 4 files changed, 58 insertions(+), 34 deletions(-)

diff --git a/showbits-thermal-printer-ui/src/AppPhoto.vue b/showbits-thermal-printer-ui/src/AppPhoto.vue
index 3daf7c4..ba6551a 100644
--- a/showbits-thermal-printer-ui/src/AppPhoto.vue
+++ b/showbits-thermal-printer-ui/src/AppPhoto.vue
@@ -136,12 +136,14 @@ onMounted(() => {
     <p>{{ originalsInfo }}</p>
   </div>
   <div class="buttons">
-    <CPhotoButtonGallery @click="onGallery" />
-    <CPhotoButtonRecord :disabled="stream === undefined" @click="onRecord" />
-    <CPhotoButtonFlip
-      :disabled="stream === undefined || facing === undefined"
-      @click="onFlip"
-    />
+    <div>
+      <CPhotoButtonGallery @click="onGallery" />
+      <CPhotoButtonRecord :disabled="stream === undefined" @click="onRecord" />
+      <CPhotoButtonFlip
+        :disabled="stream === undefined || facing === undefined"
+        @click="onFlip"
+      />
+    </div>
   </div>
   <div class="cover" :class="{ hidden: !covered }">
     <RiLoader4Fill size="48px" />
@@ -149,6 +151,17 @@ onMounted(() => {
 </template>
 
 <style>
+:root {
+  --button-fg: #000;
+  --button-active-fg: #fff;
+  --button-active-bg: #000;
+  --button-disabled-fg: #888;
+
+  --record-button-fg: #f00;
+  --record-button-active-fg: #800;
+  --record-button-disabled-fg: var(--button-disabled-fg);
+}
+
 body {
   margin: 0;
   background-color: black;
@@ -166,32 +179,44 @@ video.mirrored {
   scale: -1 1;
 }
 
-.originals {
+.originals,
+.buttons {
   position: absolute;
-  top: 0;
   width: 100%;
   display: flex;
   justify-content: center;
 }
+.originals {
+  top: 0;
+}
+.buttons {
+  bottom: 0;
+}
+
+.originals p,
+.buttons div {
+  border-radius: 100px;
+  background-color: #fffa;
+  backdrop-filter: blur(8px);
+}
 
 .originals p {
-  margin: 0;
-  margin-top: 20px;
-  padding: 0.2em 0.8em;
-  border-radius: 10em;
-  background-color: #fffa;
+  margin: 10px 0 0 0;
+  padding: 5px 20px;
+
   text-align: center;
 }
 
-.buttons {
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  margin-bottom: 20px;
-
+.buttons div {
   display: flex;
-  justify-content: space-evenly;
   align-items: center;
+  gap: 20px;
+
+  /* The big button has a height of 100px, the smaller one a height of 74px. This
+   * calculation ensures the border of the background element is cocentric with
+   * the smaller buttons. */
+  padding: 10px calc(10px + (100px - 74px) / 2);
+  margin-bottom: 10px;
 }
 
 .cover {
diff --git a/showbits-thermal-printer-ui/src/components/CPhotoButtonFlip.vue b/showbits-thermal-printer-ui/src/components/CPhotoButtonFlip.vue
index 80e3f5c..b278b4d 100644
--- a/showbits-thermal-printer-ui/src/components/CPhotoButtonFlip.vue
+++ b/showbits-thermal-printer-ui/src/components/CPhotoButtonFlip.vue
@@ -12,21 +12,20 @@ import { RiCameraSwitchFill } from "@remixicon/vue";
 button {
   padding: 8px;
 
-  color: white;
-  border: 5px solid white;
+  color: var(--button-fg);
+  border: 5px solid var(--button-fg);
   border-radius: 100px;
   background-color: transparent;
 }
 
 button:enabled:active {
-  color: black;
-  background-color: white;
+  color: var(--button-active-fg);
+  background-color: var(--button-active-bg);
 }
 
 button:disabled {
-  --disabled: #444;
-  color: var(--disabled);
-  border-color: var(--disabled);
+  color: var(--button-disabled-fg);
+  border-color: var(--button-disabled-fg);
 }
 
 svg {
diff --git a/showbits-thermal-printer-ui/src/components/CPhotoButtonGallery.vue b/showbits-thermal-printer-ui/src/components/CPhotoButtonGallery.vue
index 640c984..a34f1e2 100644
--- a/showbits-thermal-printer-ui/src/components/CPhotoButtonGallery.vue
+++ b/showbits-thermal-printer-ui/src/components/CPhotoButtonGallery.vue
@@ -27,16 +27,16 @@ function onImageChange() {
 label {
   padding: 8px;
 
-  border: 5px solid white;
+  border: 5px solid var(--button-fg);
   border-radius: 100px;
   background-color: transparent;
 
-  color: white;
+  color: var(--button-fg);
 }
 
 label:active {
-  background-color: white;
-  color: black;
+  color: var(--button-active-fg);
+  background-color: var(--button-active-bg);
 }
 
 svg {
diff --git a/showbits-thermal-printer-ui/src/components/CPhotoButtonRecord.vue b/showbits-thermal-printer-ui/src/components/CPhotoButtonRecord.vue
index f76e862..aa622dd 100644
--- a/showbits-thermal-printer-ui/src/components/CPhotoButtonRecord.vue
+++ b/showbits-thermal-printer-ui/src/components/CPhotoButtonRecord.vue
@@ -9,7 +9,7 @@ button {
   width: 100px;
   height: 100px;
 
-  --color: red;
+  --color: var(--record-button-fg);
 
   border: 10px solid var(--color);
   border-radius: 100px;
@@ -17,11 +17,11 @@ button {
 }
 
 button:enabled:active {
-  --color: white;
+  --color: var(--record-button-active-fg);
 }
 
 button:disabled {
-  --color: #444;
+  --color: var(--record-button-disabled-fg);
 }
 
 button div {