From 4507d471bc71de54100b4623a319818339fead71 Mon Sep 17 00:00:00 2001
From: Robin Scholtes <robin@theweirdscience.com>
Date: Tue, 18 Apr 2023 21:05:01 +1200
Subject: [PATCH] fix up banner links for consistency

---
 src/web/html/index.html                |  5 ++++-
 src/web/stylesheets/layout/_banner.css | 30 +++++++++++++++++---------
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/web/html/index.html b/src/web/html/index.html
index b5d793a9..c0c5625b 100755
--- a/src/web/html/index.html
+++ b/src/web/html/index.html
@@ -149,11 +149,12 @@
             <div id="banner" class="row">
                 <div>
                     <a href="#"
+                       class="banner-link"
                        data-toggle="modal"
                        data-target="#download-modal"
                        data-help-title="Downloading CyberChef"
                        data-help="<p>CyberChef can be downloaded to run locally or hosted within your own network. It has no server-side component so all that is required is that the ZIP file is uncompressed and the files are accessible.</p><p>As a user, it is worth noting that unofficial versions of CyberChef could have been modified to introduce Input and/or Recipe exfiltration. We recommend always using the official, open source, up-to-date version of CyberChef hosted at <a href='https://gchq.github.io/CyberChef'>https://gchq.github.io/CyberChef</a> if accessible.</p><p>The Network tab in your browser's Developer console (F12) can be used to inspect the network requests made by a website. This can confirm that no data is uploaded when a CyberChef recipe is baked.</p>">
-                        Download CyberChef
+                        <span>Download CyberChef</span>
                         <i class="material-icons">file_download</i>
                     </a>
                 </div>
@@ -172,6 +173,7 @@
                 <div>
                     <a href="#"
                        id="options"
+                       class="banner-link"
                        data-help-title="Options and Settings"
                        data-help="Configurable options to change how CyberChef behaves. These settings are stored in your browser's local storage, meaning they will persist between sessions that use the same browser profile.">
                         <span class="desktop-only">Options</span>
@@ -179,6 +181,7 @@
                     </a>
                     <a href="#"
                        id="support"
+                       class="banner-link"
                        data-toggle="modal"
                        data-target="#support-modal"
                        data-help-title="About / Support"
diff --git a/src/web/stylesheets/layout/_banner.css b/src/web/stylesheets/layout/_banner.css
index 241d6499..68f483cb 100755
--- a/src/web/stylesheets/layout/_banner.css
+++ b/src/web/stylesheets/layout/_banner.css
@@ -8,17 +8,17 @@
 
 #banner {
     position: absolute;
-    height: var(--banner-height);
-    width: 100%;
-    line-height: var(--banner-height);
-    border-bottom: 1px solid var(--primary-border-colour);
-    color: var(--banner-font-colour);
-    background-color: var(--banner-bg-colour);
-    margin: 0;
-    /* flex is applied through .row on the banner element */
-    justify-content: space-between;
     padding-left: 12px;
     padding-right: 4px;
+    margin: 0;
+    width: 100%;
+    height: var(--banner-height);
+    line-height: var(--banner-height);
+    color: var(--banner-font-colour);
+    background-color: var(--banner-bg-colour);
+    border-bottom: 1px solid var(--primary-border-colour);
+    justify-content: space-between; /* flex is applied through .row on the banner element */
+
 }
 
 #banner i {
@@ -26,10 +26,20 @@
     padding-right: 10px;
 }
 
-#banner a {
+.banner-link {
     color: var(--banner-url-colour);
 }
 
+.banner-link:hover {
+    text-decoration: none;
+}
+
+@media only screen and (min-width: 768px){
+    .banner-link:hover span {
+        text-decoration: underline;
+    }
+}
+
 #notice-wrapper {
     text-align: center;
     overflow: hidden;