From 94eff28fda08329ed906a43dd28caf963ed00804 Mon Sep 17 00:00:00 2001
From: SML <smlbiobot@gmail.com>
Date: Thu, 9 Feb 2023 07:03:09 +0800
Subject: [PATCH] Add tab hover shadow definition. Intended to have better
 hover accents for light theme.

---
 sanic/pages/styles/BasePage.css  |  6 ++++--
 sanic/pages/styles/ErrorPage.css | 16 ++++++++++++++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/sanic/pages/styles/BasePage.css b/sanic/pages/styles/BasePage.css
index c9d1e5a0..2dad901a 100644
--- a/sanic/pages/styles/BasePage.css
+++ b/sanic/pages/styles/BasePage.css
@@ -6,10 +6,11 @@
     --sanic-yellow: #ffde41;
     --sanic-purple: #7e22ce;
     --sanic-green: #4d7c0f;
-    --sanic-background: #e2e8f0;
+    --sanic-background: #f1f5f9;
     --sanic-text: #1f2937;
-    --sanic-tab-background: #f8fafc;
+    --sanic-tab-background: #fff;
     --sanic-tab-text: #0f172a;
+    --sanic-tab-shadow: #adadad;
     --sanic-highlight-background: var(--sanic-yellow);
     --sanic-highlight-text: var(--sanic-text);
 }
@@ -25,6 +26,7 @@
         --sanic-text: #f1f5f9;
         --sanic-tab-background: #383d4d;
         --sanic-tab-text: #cbd5e1;
+        --sanic-tab-shadow: #000;
         --sanic-highlight-background: var(--sanic-yellow);
         --sanic-highlight-text: #1f2937;
     }
diff --git a/sanic/pages/styles/ErrorPage.css b/sanic/pages/styles/ErrorPage.css
index d91dbf9c..fd17811c 100644
--- a/sanic/pages/styles/ErrorPage.css
+++ b/sanic/pages/styles/ErrorPage.css
@@ -5,12 +5,15 @@
     text-align: justify;
     /*text-justify: both;*/
 }
+
 #enduser a {
     color: var(--sanic-blue);
 }
+
 #enduser p:last-child {
     text-align: right;
 }
+
 summary {
     margin-top: 3em;
     color: var(--sanic-blue);
@@ -37,10 +40,14 @@ summary {
     background: var(--tracerite-tab) !important;
     color: var(--tracerite-tab-text) !important;
     transition: 0.3s;
+    cursor: pointer;
 }
 
+.tracerite .traceback-labels {
+    padding-top: 5px;
+}
 .tracerite .traceback-labels button:hover {
-    filter: brightness(120%);
+    filter: contrast(150%) brightness(120%) drop-shadow(0 -0 2px var(--sanic-tab-shadow));
 }
 
 .tracerite .traceback-details mark span {
@@ -52,11 +59,13 @@ summary {
 h1 {
     /*margin-left: -1.5rem;  !* Emoji partially in the left margin *!*/
 }
+
 h2 {
     margin: 1em 0 0.2em 0;
     font-size: 1.25rem;
     color: var(--sanic-text);
 }
+
 dl.key-value-table {
     width: 100%;
     margin: 0;
@@ -65,13 +74,16 @@ dl.key-value-table {
     grid-gap: .3em;
     white-space: pre-wrap;
 }
+
 dl.key-value-table * {
     margin: 0;
 }
+
 dl.key-value-table dt {
     color: #888;
     word-break: break-word;
 }
+
 dl.key-value-table dd {
-    word-break: break-all;  /* Better breaking for cookies header and such */
+    word-break: break-all; /* Better breaking for cookies header and such */
 }