From d20c5a49a48d803a0dcf8ffd8e7277bce15e01b8 Mon Sep 17 00:00:00 2001 From: Joscha Date: Sun, 10 Mar 2024 20:16:45 +0100 Subject: [PATCH] Add flip camera button --- showbits-thermal-printer/static/photo.html | 85 ++++++++++++++++++---- 1 file changed, 72 insertions(+), 13 deletions(-) diff --git a/showbits-thermal-printer/static/photo.html b/showbits-thermal-printer/static/photo.html index 4a5ab71..d91dccd 100644 --- a/showbits-thermal-printer/static/photo.html +++ b/showbits-thermal-printer/static/photo.html @@ -19,9 +19,9 @@ height: 100%; } - button { + #button { position: absolute; - bottom: 1em; + bottom: 20px; left: 50%; transform: translateX(-50%); @@ -34,11 +34,11 @@ background-color: transparent; } - button:active { + #button:active { border-color: #fff; } - button .circle { + #button .circle { width: 60px; height: 60px; border-radius: 60px; @@ -47,23 +47,69 @@ background-color: #f00; } - button:active .circle { + #button:active .circle { background-color: #a00; } + + #flip { + position: absolute; + bottom: 20px; + right: 20px; + + width: 60px; + height: 60px; + + background-color: transparent; + border: 5px solid #fff; + border-radius: 100px; + } + + #flip:active { + background-color: #fff; + } + + #flip svg { + display: block; + margin: auto; + + width: 70%; + height: 70%; + } + + #flip:active path { + fill: #000; + } +