From eb88510e925525e21dceae4c35cdeaf7ed8943bc Mon Sep 17 00:00:00 2001
From: James Fleming <jaemz@alum.mit.edu>
Date: Mon, 10 Jan 2022 09:45:02 -0500
Subject: [PATCH] Some formatting, background color

---
 The Fantasy Trip/TFT.css  | 116 +++++++++++++++++++++++++-------------
 The Fantasy Trip/TFT.html |  36 ++++++------
 2 files changed, 94 insertions(+), 58 deletions(-)

diff --git a/The Fantasy Trip/TFT.css b/The Fantasy Trip/TFT.css
index 776ca54777..37d6d67a26 100644
--- a/The Fantasy Trip/TFT.css	
+++ b/The Fantasy Trip/TFT.css	
@@ -18,7 +18,7 @@
 	text-align: center;
 	font-weight: bold;
 }
-.sheet-stat-final {
+.sheet-computed-value {
 	display: inline-block;
 	vertical-align: middle;
 	min-width: 2rem;
@@ -30,7 +30,6 @@
 	padding-left: .4rem;
 	padding-right: .4rem;
 	border-style: solid;
-	border-color: gray;
 	border-width: 1px;
 	border-radius: 3px;
 }
@@ -66,27 +65,15 @@
 	font-family: "Pictos";
 	display: inline-block;
 	border-style: solid;
-	background-color: #F9F9F9;
 	height: 1.25em;
 	width: 1em;
 	border-width: 1px;
 	border-radius: 4px;
-	border-color: #BBBBBB;
 	text-align: center;
 	font-weight: bold;
 	align-self: flex-start;
 }
 
-.sheet-expand-button:hover,
-.sheet-describe-button:hover {
-	background-color: #EBEBEB;
-}
-
-.sheet-expand-button:active,
-.sheet-describe-button:active {
-	background-color: #E1E1E1;
-}
-
 .sheet-describe-button::before {
 	content: "w"
 }
@@ -100,53 +87,32 @@
 	font-family: "Pictos";
 	display: inline-block;
 	border-style: solid;
-	background-color: #F9F9F9;
 	height: 1rem;
 	width: 0rem;
 	border-radius: .75rem;
 	border-width: 1px;
-	border-color: #BBBBBB;
 	/*font-weight: bold;*/
 	align-self: center;
 	text-align: center;
 }
 
-.sheet-select-button:hover {
-	background-color: #EBEBEB;
-}
-
-.sheet-select-button:active {
-	background-color: #E1E1E1;
-}
-
 .sheet-attack-button {
 	display: inline-block;
 	border-style: solid;
-	background-color: #F9F9F9;
 	height: 1.25em;
 	width: 1em;
 	border-width: 1px;
 	border-radius: 4px;
-	border-color: #BBBBBB;
 	text-align: center;
 	font-weight: bold;
 }
 
-.sheet-attack-button:hover {
-	background-color: #EBEBEB;
-}
-
-.sheet-attack-button:active {
-	background-color: #E1E1E1;
-}
-
 /* Fake roll button */
 .sheet-dice-button {
 	display: inline-block;
 	border-style: solid;
 	border-width: 1px;
 	border-radius: 4px;
-	border-color: #BBBBBB;
 	position:relative;
 	top:.17em;
 	text-align: center;
@@ -154,7 +120,6 @@
 	margin-top: 0em;
 	padding-left: .125em;
 	padding-right: .125em;
-	background-color: #F9F9F9;
 	font-weight: bold;
 }
 
@@ -165,14 +130,44 @@
 	font-weight: normal;
 }
 
+/* Colors */
+
+.sheet-expand-button,
+.sheet-describe-button,
+.sheet-select-button,
+.sheet-attack-button,
+.sheet-dice-button {
+	background-color: #F9F9F9;
+}
+
+.sheet-expand-button,
+.sheet-describe-button,
+.sheet-select-button,
+.sheet-attack-button,
+.sheet-dice-button {
+	border-color: #BBBBBB;
+}
+
+.sheet-expand-button:hover,
+.sheet-describe-button:hover,
+.sheet-select-button:hover,
+.sheet-attack-button:hover,
 .sheet-dice-button:hover {
 	background-color: #EBEBEB;
 }
 
+.sheet-expand-button:active,
+.sheet-describe-button:active,
+.sheet-select-button:active,
+.sheet-attack-button:active,
 .sheet-dice-button:active {
 	background-color: #E1E1E1;
 }
 
+.sheet-computed-value {
+	border-color: gray;
+}
+
 .sheet-text-area {
 	resize: none;
 	box-sizing: border-box;
@@ -191,9 +186,11 @@
 .sheet-rolltemplate-description .sheet-container
 {
 	background-color: #ffffff;
-	border: 1px solid;
+	border: 2px solid;
+	border-color: rgb(126, 45, 64);
 	padding: 2px;
 	width: 100%;
+	border-radius: .5rem;
 }
 
 .sheet-rolltemplate-stat-check .sheet-container h1,
@@ -413,7 +410,9 @@
 	display: grid;
 	padding: 5px;
 	border: 3px solid black;
-	background-color: #F0F0F0;
+	background-color: #E8EBF1;
+	/*background-color: #ECEAEF;*/
+/*	background-color: #F0F0F0;*/
 }
 .charsheet div.sheet-namelvl{
 	grid-area: namelvl;
@@ -456,14 +455,35 @@
 		"otherspells";
 	grid-gap: 5px;
 }
+.charsheet div.sheet-pointhistory{
+	grid-area: pointhistory;
+}
 .charsheet div.sheet-otherspells{
 	grid-area: otherspells;
 }
 .charsheet div.sheet-notes{
 	grid-area: notes;
 }
+
+.charsheet div.sheet-namelvl,
+.charsheet div.sheet-combat,
+.charsheet div.sheet-stats,
+.charsheet div.sheet-talents,
+.charsheet div.sheet-attack,
+.charsheet div.sheet-weapons,
+.charsheet div.sheet-armor,
+.charsheet div.sheet-spells,
+.charsheet div.sheet-equip,
+.charsheet div.sheet-notes,
+.charsheet div.sheet-otherspells,
+.charsheet div.sheet-pointhistory {
+	border-radius: .5rem;
+}
+
+/* The two things at the top */
+.charsheet div.sheet-namelvl,
 .charsheet div.sheet-pointhistory{
-	grid-area: pointhistory;
+	border-top-left-radius: 0rem;
 }
 
 .charsheet .sheet-toggle ~ .sheet-toggle-checked {
@@ -481,6 +501,23 @@
 	display: none;
 }
 
+.charsheet .sheet-selected-tab {
+	border-radius: 5px 5px 0px 0px;
+	border-width: 2px;
+	border-bottom-width: 0;
+	border-color: black;
+	color: black;
+	background-color: #E8EBF1;
+/*	font-weight: bold;*/
+}
+.charsheet .sheet-unselected-tab {
+	border-radius: 5px 5px 0px 0px;
+	border-bottom-width: 0;
+	color: grey;
+	border-color: grey;
+	background-color: white;
+}
+
 .charsheet .sheet-select-radio:checked + button {
 	background-color: blue;
 }
@@ -520,4 +557,3 @@
 	color: black;
 	opacity: .3;
  }
-
diff --git a/The Fantasy Trip/TFT.html b/The Fantasy Trip/TFT.html
index 6cf3bfd8e9..ff0242a241 100644
--- a/The Fantasy Trip/TFT.html	
+++ b/The Fantasy Trip/TFT.html	
@@ -4,8 +4,8 @@
 
 <div class='sheet-character'>
 	<div>
-		<button type="action" name="act_character" style='border-radius: 5px 5px 0px 0px; border-bottom-width: 0;' >Character</button>
-		<button type="action" name="act_journal" style='border-radius: 5px 5px 0px 0px; border-bottom-width: 0; color: grey; background-color: white;'>Journal</button>
+		<button type="action" class=sheet-selected-tab name="act_character">Character</button>
+		<button type="action" class=sheet-unselected-tab name="act_journal">Journal</button>
 	</div>
 	<div class="sheet-grid-section">
 		<div class="sheet-namelvl sheet-block">
@@ -39,7 +39,7 @@
 						<span class=sheet-stat-plus>+</span>
 						<input class=sheet-small-input type=number title="Temporary adjustment to Strength, not counting Wounds or Fatigue." name="attr_ST_adj" value="0"/>
 						<span class=sheet-stat-equals>=</span>
-						<span class=sheet-stat-final title="Final Strength.  Base plus Adjustments, not counting Wounds or Fatigue." name="attr_ST"/>
+						<span class=sheet-computed-value title="Final Strength.  Base plus Adjustments, not counting Wounds or Fatigue." name="attr_ST"/>
 					</span>
 					<span>
 						<button class=sheet-dice-button type="action" title="3d6 Strength Check" name="act_st_check3">3</button>
@@ -55,7 +55,7 @@
 						<span class=sheet-stat-plus>+</span>
 						<input class=sheet-small-input type=number title="Temporary adjustment to Dexterity." name="attr_DX_adj" value="0"/>
 						<span class=sheet-stat-equals>=</span>
-						<span class=sheet-stat-final title="Final Dexterity.  Base plus Adjustments minus Armor Penalties." name="attr_DX"/>
+						<span class=sheet-computed-value title="Final Dexterity.  Base plus Adjustments minus Armor Penalties." name="attr_DX"/>
 					</span>
 					<span>
 						<button class=sheet-dice-button type="action" title="3d6 Dexterity Check" name="act_dx_check3">3</button>
@@ -71,7 +71,7 @@
 						<span class=sheet-stat-plus>+</span>
 						<input class=sheet-small-input type=number title="Temporary adjustment to IQ." name="attr_IQ_adj" value="0"/>
 						<span class=sheet-stat-equals>=</span>
-						<span class=sheet-stat-final title="Final IQ.  Base plus Adjustments." name="attr_IQ"/>
+						<span class=sheet-computed-value title="Final IQ.  Base plus Adjustments." name="attr_IQ"/>
 					</span>
 					<span>
 						<button class=sheet-dice-button type="action" title="3d6 IQ Check" name="act_iq_check3">3</button>
@@ -86,12 +86,12 @@
 					<span class=sheet-stat-plus>+</span>
 					<input class=sheet-small-input type=number title="Temporary adjustment to Movement Allowance, excluding caused by weight." name="attr_MA_adj" value="0"/>
 					<span class=sheet-stat-equals>=</span>
-					<span class=sheet-stat-final title="Final Movement Allowance.  Base plus Adjustments." name="attr_MA"/>
+					<span class=sheet-computed-value title="Final Movement Allowance.  Base plus Adjustments." name="attr_MA"/>
 				</div>
 				<div class=sheet-nowrap>
 					<span title="Total weight carried.">
 						&nbsp;<span class=sheet-label>Carrying</span>
-						<span class=sheet-stat-final name="attr_weightcarried"></span>
+						<span class=sheet-computed-value name="attr_weightcarried"></span>
 					</span>
 					<span class=sheet-label title="Weight penalties, automatically applied." name="attr_mapenalty"></span>
 				</div>
@@ -103,7 +103,7 @@
 					<span class=sheet-stat-plus title="How much Mana spent.">-</span>
 					<input class=sheet-small-input title="How much Mana spent." type=number name="attr_mana_adj" value="0"/>
 					<span class=sheet-stat-equals>=</span>
-					<span class=sheet-stat-final title="Remaining Mana." type=number name="attr_mana"></span>
+					<span class=sheet-computed-value title="Remaining Mana." type=number name="attr_mana"></span>
 				</div>
 			</div>
 		</div>
@@ -116,7 +116,7 @@
 				<div class=sheet-flex-centered>
 					<span title="Wounded ST, current Strength reduced by Wounds and Fatigue." class=sheet-nowrap>
 						<span class='sheet-label sheet-first-word' style='width: 5rem'>Health </span>
-						<span class=sheet-stat-final name="attr_stcurrent"/>
+						<span class=sheet-computed-value name="attr_stcurrent"/>
 					</span>
 					<span>
 						<button class=sheet-dice-button type="action" title="3d6 Health Check" name="act_health_check3">3</button>
@@ -140,13 +140,13 @@
 				<div class=sheet-flex-centered>
 					<span title="Subtract from enemy DX when attacking you." class=sheet-nowrap>
 						<span class=sheet-label style='width: 8rem' >Minus to Hit </span>
-						<span class=sheet-stat-final name="attr_minustohit"/>
+						<span class=sheet-computed-value name="attr_minustohit"/>
 					</span>
 					<button class=sheet-dice-button type="action" title="Shield Rush Save vs weaker (unwounded strength) rusher." style='width: 4.6rem' name="act_shieldrushweaker">SRW</button>
 				</div>
 				<div title="Hits blocked per attack by your armor/shields/abilities." class=sheet-nowrap>
 					<span class=sheet-label style='width: 8rem'>Hits Blocked</span>
-					<span class=sheet-stat-final name="attr_totalblock"/>
+					<span class=sheet-computed-value name="attr_totalblock"/>
 				</div>
 			</div>
 		</div>
@@ -156,7 +156,7 @@
 					<span class='sheet-first-word sheet-flex'>Talent</span>
 					<span title="IQ available to buy new Talents or Spells." class=sheet-nowrap>
 						<span>Available IQ</span>
-						<span class=sheet-stat-final name="attr_iqunspent"/>
+						<span class=sheet-computed-value name="attr_iqunspent"/>
 					</span>
 				</div>
 				<fieldset class=repeating_talents>
@@ -384,8 +384,8 @@
 </div>
 <div class='sheet-journal'>
 	<div>
-		<button type="action" name="act_character" style='border-radius: 5px 5px 0px 0px; border-bottom-width: 0; color: grey; background-color: white;' >Character</button>
-		<button type="action" name="act_journal" style='border-radius: 5px 5px 0px 0px; border-bottom-width: 0; '>Journal</button>
+		<button type="action" class=sheet-unselected-tab name="act_character">Character</button>
+		<button type="action" class=sheet-selected-tab name="act_journal">Journal</button>
 	</div>
 	<div class="sheet-grid-section-journal">
 		<div class="sheet-pointhistory sheet-block">
@@ -397,17 +397,17 @@
 						<input type=number style='width: 6em;' name="attr_experiencetotal" value="0"/>
 					</span>
 					&nbsp
-					<span title="Total XP spent on Attributes, Talents, and Spells.">XP Spent <span class=sheet-stat-final name="attr_experiencespent"/></span>
+					<span title="Total XP spent on Attributes, Talents, and Spells.">XP Spent <span class=sheet-computed-value name="attr_experiencespent"/></span>
 					&nbsp
-					<span title="XP available to spend on new Attributes, Talents, or Spells.">XP Available <span class=sheet-stat-final name="attr_experienceunspent"/></span>
+					<span title="XP available to spend on new Attributes, Talents, or Spells.">XP Available <span class=sheet-computed-value name="attr_experienceunspent"/></span>
 				</div>
 				<div style='margin-bottom: .5em'>
 					<span title="Sum of all Attributes.">
-						Attribute Total <span class=sheet-stat-final name="attr_totalattrpoints"/>
+						Attribute Total <span class=sheet-computed-value name="attr_totalattrpoints"/>
 					</span>
 					&nbsp
 					<span title="XP cost to get your next attribute point.">
-						Next Attribute Point Cost <span class=sheet-stat-final name="attr_nextattrcost"/> XP
+						Next Attribute Point Cost <span class=sheet-computed-value name="attr_nextattrcost"/> XP
 					</span>
 				</div>
 			</span>