From bd6b4b01c5395e01e125c896f8b5b00116187075 Mon Sep 17 00:00:00 2001
From: RunasSudo <runassudo@yingtongli.me>
Date: Tue, 22 Jun 2021 23:47:35 +1000
Subject: [PATCH] Add pills to web UI

---
 html/index.html | 18 +++++++++++-------
 html/main.css   | 13 +++++++++++--
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/html/index.html b/html/index.html
index 9d446b7..6825018 100644
--- a/html/index.html
+++ b/html/index.html
@@ -106,7 +106,7 @@
 						</label>
 					</div>
 					<div>
-						<label>
+						<label style="margin-right:1em;">
 							Exclusion:
 							<select id="selExclusion">
 								<option value="single_stage" selected>Single stage</option>
@@ -115,9 +115,10 @@
 								<option value="wright">Wright method (re-iterate)</option>
 							</select>
 						</label>
-						<label style="margin-left:1em;">
+						<label>
 							<input type="checkbox" id="chkMeekNZExclusion">
-							(Meek) NZ-style exclusion
+							<span class="pill-grey">Meek</span>
+							NZ-style exclusion
 						</label>
 					</div>
 					<div class="subheading">
@@ -150,7 +151,7 @@
 						Numeric representation:
 					</div>
 					<div class="col-12">
-						<label>
+						<label style="margin-right:1em;">
 							Numbers:
 							<select id="selNumbers">
 								<option value="rational" selected>Rational</option>
@@ -160,7 +161,8 @@
 							</select>
 						</label>
 						<label>
-							Decimal places (if <i>Numbers</i> = <i>Fixed</i>):
+							<span class="pill-grey">Fixed</span>
+							Decimal places:
 							<input type="number" id="txtDP" value="5" min="0" style="width: 3em;">
 						</label>
 					</div>
@@ -190,7 +192,8 @@
 					</label>
 					<label class="col-6">
 						<input type="checkbox" id="chkMeekImmediateElect">
-						(Meek) Immediate election
+						<span class="pill-grey">Meek</span>
+						Immediate election
 					</label>
 					<div class="col-12 subheading">
 						Rounding:
@@ -244,7 +247,8 @@
 						</select>
 					</label>
 					<label class="col-12">
-						(Meek) Surplus tolerance:
+						<span class="pill-grey">Meek</span>
+						Surplus tolerance:
 						<input type="text" id="txtMeekSurplusTolerance" value="0.001%" style="width: 5em;">
 					</label>
 				</div>
diff --git a/html/main.css b/html/main.css
index a5621e0..9eb1a87 100644
--- a/html/main.css
+++ b/html/main.css
@@ -16,7 +16,7 @@
     along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
-@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');
 
 html, body {
 	font-family: 'Source Sans Pro', sans-serif;
@@ -46,7 +46,16 @@ a:hover {
 
 .menudiv .subheading {
 	font-size: 0.8em;
-	font-weight: bold;
+	font-weight: 600;
+}
+
+.pill-grey {
+	border-radius: 4px;
+	background-color: #3f454f;
+	color: #fff;
+	font-size: 0.7rem;
+	font-weight: 600;
+	padding: 0 0.5em;
 }
 
 .cols-12 {