Responsive layout and mobile app workarounds

Added some responsive layout stuff to the CSS so the sheet displays well at narrower widths (which is mobile friendly), plus some workarounds to deal with the fact that Roll20's app doesn't actually use any of the translation support attributes and functions.

Fate/FateOmni.css

@@ -25,10 +25,68 @@
 
 /* I should really add more comments to this some day */
 
+/* Overall Sheet Wrapper */
+
 .Wrapper {
 	font-size: 11pt;
 }
 
+/* Top Section */
+
+.topwrap {
+	display: flex;
+	flex-flow: row-reverse;
+	width: 100%;
+	justify-content: space-between;
+	align-items: flex-end;
+}
+
+.topwrap > div:last-child {
+	flex-grow: 1;
+}
+
+/* Fate Point Box */
+
+.fpbox {
+	float: right;
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-end;
+	align-items: stretch;
+	flex-grow: 0;
+	flex-shrink: 1;
+	margin-left: 20px;
+}
+
+.pronounbox div,
+.fpbox div {
+	text-align: center;
+	vertical-align: bottom;
+	white-space: nowrap;
+	margin-left: 10px;
+}
+
+.pronounbox > div > div,
+.fpbox > div > div {
+	display: block;
+}
+
+.pronounbox > div > div + div,
+.fpbox > div > div + div {
+	font-weight: bold;
+	font-size: 90%;
+	text-transform: uppercase;
+}
+
+.fpbox input[type=number] {
+	border: 0px;
+	font-size: 30px;
+	font-weight: bold;
+	width: 2em;
+	margin-left: 0.5em;
+	text-align: center;
+}
+
 .listcount {
 	font-weight: normal;
 	font-size: 80%;
@@ -589,18 +647,6 @@ input.icon[value="blank"] + span.icon::before {
 	margin-left: 6px;
 }
 
-.topwrap {
-	display: flex;
-	flex-flow: row-reverse;
-	width: 100%;
-	justify-content: space-between;
-	align-items: flex-end;
-}
-
-.topwrap > div:last-child {
-	flex-grow: 1;
-}
-
 .Bar {
 	display: flex;
 	flex-direction: row;
@@ -608,46 +654,6 @@ input.icon[value="blank"] + span.icon::before {
 	align-items: center;
 }
 
-.fpbox {
-	float: right;
-	display: flex;
-	flex-direction: row;
-	justify-content: flex-end;
-	align-items: stretch;
-	flex-grow: 0;
-	flex-shrink: 1;
-	margin-left: 20px;
-}
-
-.pronounbox div,
-.fpbox div {
-	text-align: center;
-	vertical-align: bottom;
-	white-space: nowrap;
-	margin-left: 10px;
-}
-
-.pronounbox > div > div,
-.fpbox > div > div {
-	display: block;
-}
-
-.pronounbox > div > div + div,
-.fpbox > div > div + div {
-	font-weight: bold;
-	font-size: 90%;
-	text-transform: uppercase;
-}
-
-.fpbox input[type=number] {
-	border: 0px;
-	font-size: 30px;
-	font-weight: bold;
-	width: 2em;
-	margin-left: 0.5em;
-	text-align: center;
-}
-
 .pronounbox input {
 	text-align: center;
 	max-width: 96px;
@@ -1430,11 +1436,11 @@ input.hideAllBut[value="1"] + .iblock {
 }
 
 .ui-dialog .tab-content .charsheet button[type="roll"].share:hover {
-	opacity: 100%;
+	opacity: 1.0;
 }
 
 .ui-dialog .tab-content .charsheet button[type="roll"].share {
-	opacity: 25%;
+	opacity: 0.25;
 	background: transparent;
 	border-style: none;
 	margin: 0px;
@@ -1443,7 +1449,7 @@ input.hideAllBut[value="1"] + .iblock {
 }
 
 .sheet-darkmode .ui-dialog .tab-content .charsheet button[type="roll"].share {
-	opacity: 40%;
+	opacity: 0.4;
 }
 
 /* Color Theme Shenanigans */
@@ -2970,3 +2976,102 @@ input[value="orange"].theme + .Wrapper .SkillEdit > .repcontainer {
 .sheet-darkmode .ui-dialog .tab-content .charsheet input[value="orange"].theme + .Wrapper .charname {
 	color: #e3ac24;
 }
+
+
+/* Media Change Block — Hopefully to help us get mobile support working. Needs to come after everything previously defined, so it can override previously defined elements when the interface resizes. */
+
+.Mobile {
+	display: none;
+}
+
+@media only screen and (max-width: 720px) {
+
+	/* Here's actual styling content */
+
+	.topwrap {
+		display: grid;
+		grid-template-columns: 1fr 2fr;
+	}
+
+	input[type="checkbox"].triggerbox:checked + .logobox, 
+	input[type="checkbox"].triggerbox + .logobox, 
+	.logobox {
+		display: none;
+	}
+	
+	.pronounbox {
+		grid-row: 2;
+		grid-column: 1;
+	}
+
+	.fpbox {
+		grid-row: 2;
+		grid-column: 2;
+		display: grid;
+		grid-template-columns: 1fr 1fr;
+		margin-left: 0px;
+		float: none !important;
+		justify-items: stretch;
+	}
+
+	.fpbox div {
+		margin-left: 5px;
+		margin-right: 5px;
+	}
+
+	.namebox {
+		grid-row: 1;
+		grid-column: span 2;
+	}
+	
+	.namebox input[type="text"] {
+		text-align: center;
+	}
+
+	/* This will help me notice when width is narrowed to Mobile view */
+
+	/*
+	.Mobile {
+		display: block;
+		background-color: yellow;
+		color: black;
+		width: 640px;
+	}
+
+	.Mobile textarea {
+		width: 100%;
+		height: 400px;
+	}
+	*/
+
+	.SheetFlex {
+		flex-direction: column-reverse;
+	}
+
+	.SheetCol {
+		margin-left: 0px;
+	}
+
+	.StuntFrame,
+	.PowerFrame,
+	.NoteFrame,
+	.SkillFrame {
+		flex-direction: column;
+		justify-content: flex-start;
+	}
+
+	.sheet-darkmode .ui-dialog .tab-content .charsheet button[type="roll"].share,
+	.sheet-darkmode .ui-dialog .tab-content .charsheet .pencilbox,
+	.sheet-darkmode .ui-dialog .tab-content .charsheet .optionsbox,
+	input[type="checkbox"].checkbox:hover + span.checkmark::before {
+		opacity: 0.8
+	}
+
+	.ui-dialog .tab-content .charsheet button[type="roll"].share,
+	.pencilbox,
+	.optionsbox,
+	input[type="checkbox"].checkbox + span.checkmark::before {
+		opacity: 0.6
+	}
+
+}