Fix overlapping items in options

rantstats · Aug 18, 2024 · 6a0a5ff · 6a0a5ff
1 parent dbd10ca
commit 6a0a5ff
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 22 deletions.
diff --git a/src/pages/options/options.html b/src/pages/options/options.html
@@ -10,6 +10,10 @@
     <body id="options">
         <h1>RantStats Extension Options</h1>
 
+        <nav class="pages">
+            <div class="nav-link" id="open-rants">View Cached Rants</div>
+        </nav>
+
         <div class="options">
             <div class="option">
                 <div class="option-info">
@@ -80,23 +84,17 @@ <h1>RantStats Extension Options</h1>
             </div>
         </div>
 
-        <div class="save">
-            <p class="description">
-                <span id="save-status"></span>
-                <button id="save">Save</button>
-            </p>
-        </div>
-
-        <div class="pages">
-            <h2 id="open-rants">View Cached Rants</h2>
-        </div>
-
         <footer>
             <div class="row clear-section">
                 <p class="description">
                     <button id="clear">Clear all saved data</button>
                     <span id="clear-status"></span>
                 </p>
+
+                <p class="description save">
+                    <span id="save-status"></span>
+                    <button id="save">Save</button>
+                </p>
             </div>
 
             <div class="row">

diff --git a/src/pages/options/options.scss b/src/pages/options/options.scss
@@ -18,7 +18,7 @@
                 align-items: unset;
             }
 
-            &:nth-child(odd) {
+            &:nth-child(even) {
                 background: var(--light-accent2);
             }
 
@@ -88,20 +88,25 @@
         }
     }
 
-    .save {
-        text-align: right;
-        margin-right: 10px;
-        //padding: 5px;
-    }
-
     .pages {
         text-align: center;
-
-        h2 {
-            font-size: 1.5em;
+        font-size: 1.25em;
+        font-weight: bold;
+        padding: 10px;
+        margin-bottom: 5px;
+        background: var(--light-accent2);
+        border-bottom: 1px inset var(--border);
+
+        .nav-link {
+            display: inline;
+            padding: 5px;
+            border-radius: 10px;
+            width: auto;
+            background: var(--light-accent);
 
             &:hover {
                 cursor: pointer;
+                text-decoration: underline;
             }
         }
     }
@@ -115,15 +120,28 @@
             button {
                 font-size: 1em;
             }
+
+            .save {
+                font-size: 15px;
+                margin-left: auto;
+            }
         }
     }
 }
 
 .theme-dark {
     #options {
+        .pages {
+            background: var(--dark-accent);
+
+            .nav-link {
+                background: var(--dark-accent2);
+            }
+        }
+
         .options {
             .option {
-                &:nth-child(odd) {
+                &:nth-child(even) {
                     background: var(--dark-accent);
                 }
             }

diff --git a/src/pages/pages.scss b/src/pages/pages.scss
@@ -58,6 +58,7 @@ html.rantstats {
             justify-self: flex-end;
             position: sticky;
             bottom: 0;
+            background: var(--light-accent2);
 
             .row {
                 display: flex;
@@ -77,6 +78,10 @@ html.rantstats {
 
         body {
             background: var(--dark-accent2);
+
+            footer {
+                background: var(--dark-accent2);
+            }
         }
 
         h1,