Merge branch 'main' into tidyation5

gm3dmo · Feb 18, 2025 · c1abe4d · c1abe4d
2 parents 2f19b4b + 2d4cf0a
commit c1abe4d
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 14 deletions.
diff --git a/powerindex/static/styles.css b/powerindex/static/styles.css
@@ -308,13 +308,15 @@ tr:hover {
 }
 
 .copy-button {
-    padding: 4px 8px;
+    padding: 4px 12px;  /* Increased horizontal padding */
+    min-width: 100px;   /* Set minimum width */
     font-size: 12px;
     background-color: var(--govuk-green);
     color: white;
     border: none;
     border-radius: 4px;
     cursor: pointer;
+    white-space: nowrap;  /* Keep text on one line */
 }
 
 .copy-button:hover {
@@ -414,7 +416,8 @@ tr:hover {
 }
 
 .script-item a:hover {
-    background-color: #f6f8fa;
+    background-color: var(--govuk-dark-blue) !important;  /* Dark blue on hover in light mode */
+    color: #ffffff !important;  /* White text for contrast */
 }
 
 .script-item a.selected {
@@ -423,6 +426,13 @@ tr:hover {
     font-weight: bold;
 }
 
+.script-item a.selected:hover,
+.script-item a.selected:active,
+.script-item a.selected:focus {
+    background-color: var(--govuk-yellow) !important;  /* Keep yellow for selected items */
+    color: var(--govuk-black) !important;
+}
+
 .execute-button {
     background-color: var(--govuk-green);
     color: white;
@@ -582,23 +592,27 @@ tr:hover {
     -webkit-tap-highlight-color: transparent;
 }
 
+[data-theme="dark"] .script-item a:hover {
+    background-color: var(--govuk-dark-blue) !important;  /* Dark blue on hover */
+    color: #e0e0e0;
+}
+
 [data-theme="dark"] .script-item a:active,
 [data-theme="dark"] .script-item a:focus {
-    background-color: #000000 !important;
+    background-color: transparent !important;  /* Remove active/focus background */
     color: #e0e0e0 !important;
 }
 
 [data-theme="dark"] .script-item a.selected {
     background-color: var(--govuk-yellow);
-    color: var(--govuk-black);  /* Dark gray text for selected items */
-    font-weight: bold;
+    color: var(--govuk-black);
 }
 
 [data-theme="dark"] .script-item a.selected:hover,
 [data-theme="dark"] .script-item a.selected:active,
 [data-theme="dark"] .script-item a.selected:focus {
     background-color: var(--govuk-yellow) !important;
-    color: var(--govuk-black) !important;  /* Maintain dark gray text in all states */
+    color: var(--govuk-black) !important;
 }
 
 [data-theme="dark"] .script-content h3 {

diff --git a/powerindex/templates/index.html b/powerindex/templates/index.html
@@ -39,19 +39,13 @@ <h1>The Power Viewer</h1>
             <div class="script-content">
                 <h3 data-script-name="{{ selected_script }}">
                     <button class="execute-button" onclick="executeScript('{{ selected_script }}')">Execute</button>
-                    {{ selected_script }}
+                    <button class="copy-button" onclick="copyToClipboard('{{ doc_url }}')">Copy Docs URL</button>
+                    <a href="{{ doc_url }}" target="_blank" rel="noopener noreferrer">{{ selected_script }}</a>
                 </h3>
-                {% if doc_url %}
-                <div class="doc-url">
-                    <a href="{{ doc_url }}" target="_blank" rel="noopener noreferrer">{{ doc_url }}</a>
-                    <button class="copy-button" onclick="copyToClipboard('{{ doc_url }}')">Copy</button>
-                </div>
-                {% endif %}
                 <div class="script-boxes">
                     <div class="script-box">
                         <div class="script-box-header">
                             <h4>Original Script</h4>
-                            <button class="copy-button" onclick="copyScriptContent('original-script')">Copy</button>
                         </div>
                         <div class="highlight-wrapper" id="original-script">
                             {{ highlighted_content | safe }}