Style and layout all metric and sort controls

index.html

@@ -17,32 +17,42 @@
 
     <template id="metric-select-template">
       <form bind-to="form">
-        <fieldset class="metric-select-fieldset">
+        <fieldset class="metric-fields | flex col small-gap">
           <legend bind-to="legend">Metric</legend>
-          <div>
-            <label>
-              <input type="radio" name="metricKind" value="whole" />
+          <label>
+            <input type="radio" name="metricKind" value="whole" />
+            <div class="toggle-label | center pill-shape highlight-border">
               Set Comparison
-            </label>
-          </div>
-          <div>
-            <label>
-              <input type="radio" name="metricKind" value="mean" />
+            </div>
+          </label>
+          <label>
+            <input type="radio" name="metricKind" value="mean" />
+            <div class="toggle-label | center pill-shape highlight-border">
               Mean Comparison
-            </label>
-          </div>
-          <div>
-            <label>
-              <input type="radio" name="metricKind" value="stat" />
+            </div>
+          </label>
+          <label>
+            <input type="radio" name="metricKind" value="stat" />
+            <div class="toggle-label | center pill-shape highlight-border">
               Set Statistics
-            </label>
-          </div>
-          <select name="whole" bind-to="wholeSelect" disabled>
+            </div>
+          </label>
+          <select
+            class="pill-shape highlight-border"
+            name="whole"
+            bind-to="wholeSelect"
+            disabled
+          >
             <option value="alpha">Geometric Difference (α)</option>
             <option value="sigma">RMS Deviation (σ)</option>
             <option value="bigTheta">Cosine Difference (Θ)</option>
           </select>
-          <select name="mean" bind-to="meanSelect" disabled>
+          <select
+            class="pill-shape highlight-border"
+            name="mean"
+            bind-to="meanSelect"
+            disabled
+          >
             <option value="theta">Angular Difference (θ)</option>
             <option value="phi">Hue Azimuth (ϕ)</option>
             <option value="delta">Euclidean (δ)</option>
@@ -50,7 +60,12 @@
             <option value="ch">Chebyshev (Ч)</option>
             <option value="lightnessDiff">Lightness (ℓ)</option>
           </select>
-          <select name="stat" bind-to="statSelect" disabled>
+          <select
+            class="pill-shape highlight-border"
+            name="stat"
+            bind-to="statSelect"
+            disabled
+          >
             <option value="importance">Visual Importance (β)</option>
             <option value="inertia">Inertia (I)</option>
             <option value="variance">Variance (V)</option>
@@ -64,48 +79,58 @@
     </template>
 
     <template id="function-template">
-      <!-- TODO styling -->
       <form bind-to="form" autocomplete="off">
-        <div class="flex col no-gap">
-          <label>
-            <input type="checkbox" name="sortOrder" role="button" />
-            <span bind-to="minmaxLabel"></span>
-          </label>
-          <span class="emphasis">[</span>
-          <div>
+        <div class="fn-control | flex col no-gap">
+          <div class="center">
+            <label class="fn-minmax | pill-shape highlight-border">
+              <input type="checkbox" name="sortOrder" role="button" />
+              <span bind-to="minmaxLabel"></span>imizing
+            </label>
+            [
+          </div>
+          <div class="fn-body | flex">
             <label bind-to="useWholeImageLabel">
               <input type="checkbox" name="useWholeImage" />
-              <span bind-to="metricSymbol"></span>(P)
+              <span class="toggle-label | pill-shape highlight-border">
+                <span bind-to="metricSymbol"></span>(P)</span
+              >
             </label>
             ⋅
             <label>
               <input type="checkbox" name="useBestCluster" />
-              <span bind-to="metricSymbolCls"></span>
+              <span
+                class="toggle-label | pill-shape highlight-border"
+                bind-to="metricSymbolCls"
+              ></span>
             </label>
             ⋅
             <div class="fn-fraction | flex col no-gap">
               <label>
                 <input type="checkbox" name="clusterSize" />
-                |<span bind-to="clusterName"></span>|
+                <span class="toggle-label | pill-shape highlight-border">
+                  |<span bind-to="clusterName"></span>|
+                </span>
               </label>
               <label>
                 <input type="checkbox" name="invClusterSize" />
-                |<span bind-to="clusterNameInv"></span>|
+                <span class="toggle-label | pill-shape highlight-border">
+                  |<span bind-to="clusterNameInv"></span>|
+                </span>
               </label>
             </div>
             ⋅
             <div class="fn-fraction | flex col no-gap">
               <label>
                 <input type="checkbox" name="totalSize" />
-                |P|
+                <span class="toggle-label | pill-shape highlight-border">|P|</span>
               </label>
               <label>
                 <input type="checkbox" name="invTotalSize" />
-                |P|
+                <span class="toggle-label | pill-shape highlight-border">|P|</span>
               </label>
             </div>
           </div>
-          <span class="emphasis">]</span>
+          <div class="center">] using</div>
         </div>
       </form>
     </template>
@@ -188,8 +213,11 @@
         </div>
       </form>
       <hr />
+      <div class="emphasis center">Ranking Function</div>
       <div id="sort-fn-mount"></div>
       <div id="sort-metric-mount"></div>
+      <hr />
+      <div class="emphasis center">Cluster Ranking</div>
       <div id="cls-fn-mount"></div>
       <div id="cls-metric-mount"></div>
       <hr />

styles.css

@@ -176,6 +176,10 @@ button {
   transition: background-color 100ms;
 }
 
+button:hover {
+  box-shadow: 0 0 4px 2px var(--shadow);
+}
+
 button.color-select {
   background-color: var(--button-bg);
 }
@@ -198,15 +202,6 @@ button.color-select:hover {
   flex: 0 0 2rem;
 }
 
-#sidebar select:disabled {
-  display: none;
-}
-
-.fn-fraction > *:first-child {
-  padding-bottom: 2px;
-  border-block-end: 1px solid var(--highlight);
-}
-
 :is(#cls-fn-mount, #cls-metric-mount) form {
   transition: opacity 200ms;
 }
@@ -224,6 +219,21 @@ button.color-select:hover {
   padding-block: 0.5ch;
 }
 
+.toggle-label {
+  padding: 0 0.625ch 0.125rem;
+  color: var(--shadow);
+  border-color: var(--shadow);
+  transition: color 200ms, border-color 200ms, background-color 200ms;
+}
+
+:is(input[type="checkbox"], input[type="radio"]):checked + .toggle-label {
+  background-color: var(--highlight);
+  color: var(--background);
+  border-color: var(--highlight);
+}
+
+/* Pokemon Tiles */
+
 .pkmn-tile {
   max-width: 24ch;
   padding-inline: 0.5ch;
@@ -275,3 +285,57 @@ button.color-select:hover {
   width: 1ch;
   margin-inline: 0.25ch;
 }
+
+/* Sort Function Controls */
+
+.fn-control .fn-minmax {
+  padding: 0.25rem 0.5ch;
+  display: inline-flex;
+  justify-content: center;
+  background-color: var(--shadow);
+  /* TODO might want to bring back that shifting pill */
+}
+
+.fn-control .fn-minmax span {
+  text-transform: capitalize;
+}
+
+.fn-control .fn-body {
+  --gap: 0.25ch;
+  margin-block: 0.5rem;
+  justify-content: center;
+  align-items: center;
+}
+
+.fn-control input[type="checkbox"] {
+  display: none;
+}
+
+.fn-control .toggle-label:first-child {
+  /* only affects the fake label on the cluster function */
+  color: inherit;
+  background-color: inherit;
+  border: none;
+}
+
+.fn-fraction > *:first-child {
+  /* this feels a little fragile */
+  padding-bottom: 6px;
+  margin-bottom: 4px;
+  border-block-end: 1px solid var(--highlight);
+}
+
+/* Metric Controls */
+
+.metric-fields {
+  border: none;
+}
+
+.metric-fields :is(legend, select:disabled, input[type="radio"]) {
+  display: none;
+}
+
+.metric-fields select {
+  width: 100%;
+  padding: 0.25rem 1ch;
+}