various mobile adjustments

try to use tab buttons for location indication too to save screen space. Move all font sizing to em vs px.

HarnMaster3/harnsheet.html

@@ -13,6 +13,7 @@
 
 <!-- buttons to select desired tab -->
 <div class="tab-buttons">
+   <input type='hidden' class='tabshighlight' name='attr_sheettabhighlight'  value='character'  />
    <button id=chartab type="action" name="act_character" >Character<span class="buttonicon">&nbsp;U </span></button>
    <button id=inventab type="action" name="act_inventory" >Inventory<span class="buttonicon">&nbsp;O </span></button>
    <button id=settingstab type="action" name="act_settings" >Settings<span class="buttonicon">&nbsp;x </span></button>
@@ -1874,7 +1875,8 @@ const buttonlist = ['character','inventory','settings'];
 buttonlist.forEach(button => {
     on(`clicked:${button}`, function() {
         setAttrs({
-            sheetTab: button
+            sheetTab: button,
+			sheettabHighlight: button
         });
     });
 });

HarnMaster3/harnstyle.css

@@ -24,7 +24,7 @@
   --tcl-dark: #e4e4e4;
   --tch-dark: #0087ff;
   --hlr-dark: #484845b3;
-  --bbg-dark: #e4e4e4;
+  --bbg-dark: #1c1c1cf1;
 }
 
 body {
@@ -141,10 +141,11 @@ body.sheet-darkmode .sectionwrapper input {
   transition: 0.3s; /* Add transition on hover */
   padding: 15px 5px; /* 15px padding */
   width: 130px; /* Set a specific width */
-  font-size: 20px; /* Increase font size */
+  font-size: 1.5em; /* Increase font size */
   /* color: white; White text color */
   border-radius: 0 5px 5px 0; /* Rounded corners on the top right and bottom right side */
   background-color: var(--button-background);
+  color: var(--textcolor-light);
   text-align: right;
   border-color: #CCC;
 }
@@ -157,6 +158,11 @@ body.sheet-darkmode .sectionwrapper input {
   left: -55px; /* On mouse-over, make the elements appear as they should */
 }
 
+/* highlight active button/tab 
+ul.nav.nav-tabs > li > a:active {
+    background-color: var(--background-dark);
+} /
+
 #chartab {
 	top: 20px;
 }
@@ -183,6 +189,14 @@ body.sheet-darkmode .sectionwrapper input {
 	min-height: 700px;
 }
 
+/* highlight the button for selected tab */
+
+.tabshighlight[value="character"] ~ #chartab,
+.tabshighlight[value="inventory"] ~ #inventab,
+.tabshighlight[value="settings"] ~ #settingstab {
+	background-color: var(--background-dark);
+}
+
 /* show the selected tab */
 .tabstoggle[value="character"] ~ div.character,
 .tabstoggle[value="inventory"] ~ div.inventory,
@@ -513,7 +527,7 @@ input[type="hidden"].showhorse[value="0"] ~ .inven-personal {
    grid-template-columns: 8.5em 1.5em 1.5em 2.2em 2.5em repeat(4, 4.5em 2.5em 2.5em 2.2em) 1fr;
    align-items: center;	
    align-content: baseline;	
-   font-size: 12px;
+   font-size: 0.9em;
 }
 
 .magic-grid,
@@ -916,7 +930,7 @@ input.piety-label[readonly] {
 .family-grid label,
 .physical-grid label,
 .horseattribs-grid label {
-	height:26px;
+	height:2.4em;
 }
 
 .physical-grid label,
@@ -928,7 +942,7 @@ input.piety-label[readonly] {
 .ui-dialog .charsheet .attribs-grid input,
 .ui-dialog .charsheet .horseattribs-grid input{
 	width: 2.5em;
-	font-size: 15px;
+	font-size: 1.1em;
 }
 
 .attribs-grid label,
@@ -1258,7 +1272,7 @@ button.dismissnotification {
   padding: 0.2em;
 }
 .sheet-rolltemplate-custom .sheet-subtitle {
-  font-size:.9em;
+  font-size:0.9em;
 }
 
 /* example colors */
@@ -1399,7 +1413,7 @@ body {
 }	
 
 label, input, button, select, textarea {
-    font-size: 34px;
+    font-size: 1em;
     font-weight: normal;
     /* line-height: 18px; */
 }
@@ -1412,8 +1426,8 @@ ul.nav-tabs.nav{
 }
 */
 
-ul.nav.nav-tabs > li {
-    padding: 2em 0.5em 0em;
+ul.nav.nav-tabs > li > a {
+    padding: 1em 0.7em;
 }
 
 /* hide avatar banner, not enough screen space on mobile */
@@ -1423,6 +1437,7 @@ ul.nav.nav-tabs > li {
 /* change sheet tabs navigation for touch use */
 .tab-buttons {
 	top: 0px;
+	margin-left: -1em;
 	width: 99%;
 }
 
@@ -1431,7 +1446,14 @@ ul.nav.nav-tabs > li {
 	width: 25%;
 	transition: none;
 	margin: 0 5px;
-	font-size: 46px;
+	font-size: 1.2em;
+	padding: 1em 0.2em;
+    width: fit-content;
+	border-radius: 5px;
+}
+
+.character, .inventory, .settings {
+	margin-top: 0px;
 }
 
 /* make tab headers more compact for small screen */
@@ -1634,7 +1656,13 @@ h1.tab-header {
    grid-template-columns: 4em 1.5em 1.5em 2.2em 2.5em repeat(4, 4.5em 2.5em 2.5em 2.2em) 1fr;
    align-items: center;	
    align-content: baseline;	
-   font-size: 12px;
+   font-size: 0.9em;
+}
+
+/* other minor styling tweaks */
+
+.personal-grid label, .family-grid label, .physical-grid label, .horseattribs-grid label {
+    height: 1.65em;
 }
 
 }
@@ -1859,7 +1887,7 @@ h1.tab-header {
    grid-template-columns: 4em 1.5em 1.5em 2.2em 2.5em repeat(4, 4.5em 2.5em 2.5em 2.2em) 1fr;
    align-items: center;	
    align-content: baseline;	
-   font-size: 12px;
+   font-size: 0.9em;
 }
 
 }