From 87a228bf73ae193a41461078ccfbd7154a4cb426 Mon Sep 17 00:00:00 2001
From: neri <neri@ctdo.de>
Date: Wed, 13 Oct 2021 09:34:15 +0200
Subject: [PATCH] css focus styling

---
 static/index.css | 36 ++++++++++++++++++++++++++++--------
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/static/index.css b/static/index.css
index 72332aa..89a93db 100644
--- a/static/index.css
+++ b/static/index.css
@@ -1,6 +1,11 @@
 :root {
   --bg: #222222;
+  --bg-alt: #444444;
+  --accent: #007600;
+  --accent-alt: #228b22;
   --fg: #e9e9e9;
+  --fg-light: #b6b6b6;
+  --radius: 5px;
 }
 
 html {
@@ -59,11 +64,25 @@ textarea,
   color: var(--fg);
   padding: 0.5rem;
   border: 2px solid var(--fg);
-  border-radius: 5px;
+  border-radius: var(--radius);
   margin-bottom: 1rem;
   max-width: calc(100vw - 2rem);
 }
 
+details {
+  display: inline;
+}
+
+input:focus-within,
+select:focus-within,
+textarea:focus-within,
+.button:focus-within,
+details:focus-within,
+a:focus-within {
+  outline: solid cornflowerblue 2px;
+  border-radius: var(--radius);
+}
+
 textarea {
   height: 30vh;
 }
@@ -72,7 +91,7 @@ textarea {
   display: none;
 }
 
-input[type="checkbox"] {
+input[type='checkbox'] {
   margin-bottom: 1.5rem;
 }
 
@@ -94,15 +113,15 @@ a.button:visited {
 }
 
 .button:hover {
-  background-color: #444444;
+  background-color: var(--bg-alt);
 }
 
 .button.main {
-  background-color: #007600;
+  background-color: var(--accent);
 }
 
 .button.main:hover {
-  background-color: forestgreen;
+  background-color: var(--accent-alt);
 }
 
 .usage {
@@ -111,7 +130,7 @@ a.button:visited {
 }
 
 .large-link {
-  display: block;
+  display: inline-block;
   margin-bottom: 1em;
   max-height: 60vh;
   overflow-y: auto;
@@ -121,6 +140,7 @@ a.button:visited {
 }
 
 footer {
+  font-family: sans;
   flex-shrink: 0;
   display: flex;
   justify-content: flex-end;
@@ -129,12 +149,12 @@ footer {
 
 .repo {
   padding: 0.5rem;
-  color: #b6b6b6;
+  color: var(--fg-light);
   text-decoration: none;
 }
 
 .repo:visited {
-  color: #b6b6b6;
+  color: var(--fg-light);
 }
 
 .repo:hover {