web: allow controls side to be chosen by user

1 files changed, 17 insertions, 4 deletions

diff --git a/web/static/style.css b/web/static/style.css
index 893c144..3ff1680 100644
--- a/web/static/style.css
+++ b/web/static/style.css
@@ -307,19 +307,23 @@ div#settings-bar input {
 	border: 0;
 }
 
-div#settings-bar div.help-button {
+div#settings-bar div.button {
 	background-color: #3d2466;
 	font-weight: 700;
 
 	padding: 0 0.4em;
 }
 
+#flip-controls-button {
+	display: none;
+}
+
 @media (hover: hover) and (pointer: fine) {
 	div#settings-bar input:hover {
 		background-color: #5c3699;
 	}
 
-	div#settings-bar div.help-button:hover {
+	div#settings-bar div.button:hover {
 		background-color: #5c3699;
 	}
 }
@@ -330,7 +334,7 @@ div#settings-bar input:focus {
 	outline: #7eab1e solid 2px;
 }
 
-div#settings-bar div.help-button:active {
+div#settings-bar div.button:active {
 	color: #fff;
 	background-color: #6e41b8;
 }
@@ -434,7 +438,7 @@ a:hover {
 		padding: 0 0.4rem;
 	}
 
-	div#settings-bar .help-button {
+	div#settings-bar .button {
 		font-size: 3em;
 	}
 }
@@ -448,6 +452,15 @@ a:hover {
 		grid-template-areas: 'settings-bar settings-bar' 'info visits' 'controls visits';
 	}
 
+	div#main.right-controls {
+		grid-template-columns: 1fr 80vh;
+		grid-template-areas: 'settings-bar settings-bar' 'visits info' 'visits controls';
+	}
+
+	#flip-controls-button {
+		display: unset;
+	}
+
 	div#controls {
 		margin-top: 0;
 	}