Fixing various CSS bugs, fixes #22

src/popup.css

@@ -8,8 +8,8 @@
 
   --window-margin: 10px;
   --window-width: 360px; /* Equal to width of add-ons panel */
-  --window-height: 550px; /* Equal to hwightof add-ons panel  */
+  --window-height: 515px; /* Equal to height add-ons panel */
-  --scrollbar-width: 5px; /*TODO make sure this is correct */
+  --scrollbar-width: 5px; /* Estimated! */
 
   --toggle-margin-left: 15px;
   --toggle-margin-right: 5px;
@@ -29,14 +29,16 @@
   --border-radius-section: .5rem;
   --border-radius-input: .5rem;
 
-  --total-height-other: 297px;
+  --total-height-other: 294px;
   --total-height-also-li: 26px;
+  --total-height-prompt: 33.5px;
 }
 
 /* Light theme */
 :root {
   --text-color: var(--color-l-gray-120);
-  --desc-color: var(--color-l-gray-100);
+  --desc-color: blue;
+  --desc-color: var(--color-l-gray-110);
   --link-color: var(--color-l-gray-90);
 
   --icon-color: var(--color-l-gray-80);
@@ -86,8 +88,8 @@
     --desc-color: var(--color-d-gray-20);
     --link-color: var(--color-d-gray-50);
 
-    --icon-color: var(--color-d-gray-40);
+    --icon-color: var(--color-d-gray-50);
-    --icon-color-hover: var(--color-d-gray-50);
+    --icon-color-hover: var(--color-d-gray-40);
     --border-color: var(--color-d-gray-90);
     --border-color-hover: var(--color-d-gray-80);
     --scrollbar-color: var(--color-d-gray-90);
@@ -101,7 +103,7 @@
 
     /* Text input */
     --text-input-background-color-focus: var(--color-d-gray-90);
-    --text-input-placeholder-color: var(--color-d-gray-70);
+    --text-input-placeholder-color: var(--color-d-gray-50);
     --text-input-background-color: var(--color-d-gray-100);
 
     /* Select */
@@ -207,6 +209,7 @@ button:not(.delete):active > svg {
 
 #site-details {
   min-width: 0;
+  cursor: default;
 }
 
 #site-details h1 {
@@ -216,6 +219,10 @@ button:not(.delete):active > svg {
   text-overflow: ellipsis;
 }
 
+#site-details p {
+  color: var(--desc-color);
+}
+
 #state {
   color: var(--state-text-color-disabled);
   transition: var(--speed-slow);
@@ -268,7 +275,6 @@ button:not(.delete):active > svg {
   border-radius: var(--border-radius-input);
   font-size: var(--text-large);
   color: var(--text-color);
-  gap: var(--spacer-medium);
   outline: none;
 }
 
@@ -321,15 +327,8 @@ button:not(.delete):active > svg {
   text-wrap: nowrap;
   gap: var(--spacer-small);
   align-content: center;
-}
+  height: var(--total-height-prompt);
-
+  margin-bottom: var(--spacer-large);
-#header-name {
-  margin-bottom: 17.25px;
-}
-
-#header-pov {
-  margin-top: 8px;
-  margin-bottom: 21.25px;
 }
 
 /* Other pronouns */
@@ -352,6 +351,7 @@ button:not(.delete):active > svg {
 
 #other li label {
   font-size: var(--text-small);
+  color: var(--desc-color);
   text-align: right;
   text-wrap: nowrap;
 }
@@ -365,6 +365,10 @@ button:not(.delete):active > svg {
   width: min-content;
 }
 
+#other-final {
+  margin-bottom: var(--spacer-large);
+}
+
 /* Also replacements */
 
 #also li {
@@ -375,6 +379,10 @@ button:not(.delete):active > svg {
   height: var(--total-height-also-li);
 }
 
+#also li label {
+  color: var(--desc-color);
+}
+
 .lhs {
   text-align: right;
 }
@@ -398,6 +406,7 @@ button:not(.delete):active > svg {
 
 .delete-disabled button {
   visibility: hidden;
+  scale: 0;
 }
 
 
@@ -513,30 +522,18 @@ background-color: var(--button-background-color-active);
 
 .hide {
   height: 0 !important;
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
-  margin-top: 0 !important;
-  margin-bottom: 0 !important;
   overflow: hidden !important;
   opacity: 0 !important;
 }
 
 .unhide-slow {
   transition:
-  height var(--speed-slow) ease-out,
+    height var(--speed-slow) ease-out,
-  padding-top var(--speed-slow) ease-out,
+    opacity var(--speed-slow) linear !important;
-  padding-bottom var(--speed-slow) ease-out,
-  margin-top var(--speed-slow) ease-out,
-  margin-bottom var(--speed-slow) ease-out,
-  opacity var(--speed-slow) linear !important;
 }
 
 .unhide-fast {
   transition:
     height var(--speed-fast) ease-out,
-    padding-top var(--speed-fast) ease-out,
-    padding-bottom var(--speed-fast) ease-out,
-    margin-top var(--speed-fast) ease-out,
-    margin-bottom var(--speed-fast) ease-out,
     opacity var(--speed-fast) linear !important;
 }

src/popup.html

@@ -22,14 +22,14 @@
         <form id="options">
           <h2 class="visually-hidden">Name</h2>
 
-          <div id="header-name" class="primary-prompt">
+          <div class="primary-prompt">
             <label for="name">My name is</label>
             <input type="text" id="name" name="name">
           </div>
 
           <h2 class="visually-hidden">Pronouns</h2>
 
-          <div id="header-preset" class="primary-prompt">
+          <div class="primary-prompt">
             <label for="preset">My pronouns are</label>
             <select id="preset" name="preset">
               <option value=""></option>
@@ -86,7 +86,7 @@
               <input type="text" id="child" name="child-noun" placeholder="e.g. boy, kid">
             </li>
 
-            <li>
+            <li id="other-final">
               <label for="plurality">Conjugates</label>
               <select id="plurality" name="conjugates">
                 <option value="singular">singular</option>
@@ -97,7 +97,7 @@
 
           <h2 class="visually-hidden">Perspective</h2>
 
-          <div id="header-pov" class="primary-prompt">
+          <div class="primary-prompt">
             <label for="pov">I prefer to read in</label>
             <select id="pov" name="pov">
               <option value=""></option>
@@ -109,7 +109,9 @@
 
           <h2 class="visually-hidden">Also replace</h2>
 
-          <label id="header-also" for="lhs-1">I also want to replace...</label>
+          <div class="primary-prompt">
+            <label for="lhs-1">I also want to replace...</label>
+          </div>
 
           <ul id="also"></ul>