Improve gamepad layout window

public/src/css/view.css

@@ -164,7 +164,8 @@ kbd{
 }
 .view-content:not(:hover) .setting-box.selected .setting-name,
 .view-outer:not(.settings-outer) .setting-box.selected .setting-name,
-.setting-box:hover .setting-name{
+.setting-box:hover .setting-name,
+.setting-box:hover #gamepad-value{
 	color: #fff;
 	z-index: 0;
 }
@@ -210,15 +211,19 @@ kbd{
 	right: 0;
 	bottom: 0;
 	left: 0;
-	width: 550px;
-	height: 417px;
+	width: 574px;
+	height: 428px;
+	max-height: calc(100vh - 14em + 88px);
+}
+#settings-gamepad .setting-box{
+	height: auto;
 }
 #gamepad-bg{
 	position: relative;
 	width: 550px;
 	height: 317px;
 	max-height: none;
-	background-repeat: none;
+	background-repeat: no-repeat;
 	text-align: center;
 	font-size: 1.4em;
 	cursor: pointer;
@@ -230,6 +235,13 @@ kbd{
 	width: 282px;
 	height: 131px;
 	background-position: 0 -318px;
-	background-repeat: none;
+	background-repeat: no-repeat;
 	pointer-events: none;
 }
+#gamepad-value{
+	position: relative;
+	margin-top: 1em;
+}
+#gamepad-value::before{
+	left: auto;
+}

public/src/js/settings.js

@@ -227,8 +227,8 @@ class SettingsView{
 		this.gamepadTitle = this.gamepadSettings.getElementsByClassName("view-title")[0]
 		this.gamepadEndButton = this.gamepadSettings.getElementsByClassName("view-end-button")[0]
 		this.addTouch(this.gamepadEndButton, event => this.gamepadBack(true))
-		this.gamepadBg = document.getElementById("gamepad-bg")
-		this.addTouch(this.gamepadBg, event => this.gamepadSet(1))
+		this.gamepadBox = this.gamepadSettings.getElementsByClassName("setting-box")[0]
+		this.addTouch(this.gamepadBox, event => this.gamepadSet(1))
 		this.gamepadButtons = document.getElementById("gamepad-buttons")
 		this.gamepadValue = document.getElementById("gamepad-value")
 		
@@ -425,7 +425,9 @@ class SettingsView{
 			assets.sounds["se_ka"].play()
 		}
 		var opt = current.options[this.gamepadSelected]
-		this.gamepadValue.innerText = strings.settings[selected.id][opt]
+		var value = strings.settings[selected.id][opt]
+		this.gamepadValue.innerText = value
+		this.gamepadValue.setAttribute("alt", value)
 		this.gamepadButtons.style.backgroundPosition = "0 " + (-318 - 132 * this.gamepadSelected) + "px"
 		this.gamepadSettings.style.display = "block"
 	}
@@ -513,14 +515,14 @@ class SettingsView{
 		}
 		this.removeTouch(this.gamepadSettings)
 		this.removeTouch(this.gamepadEndButton)
-		this.removeTouch(this.gamepadBg)
+		this.removeTouch(this.gamepadBox)
 		delete this.tutorialTitle
 		delete this.endButton
 		delete this.items
 		delete this.gamepadSettings
 		delete this.gamepadTitle
 		delete this.gamepadEndButton
-		delete this.gamepadBg
+		delete this.gamepadBox
 		delete this.gamepadButtons
 		delete this.gamepadValue
 		if(this.resolution !== settings.getItem("resolution")){

public/src/views/settings.html

@@ -9,9 +9,13 @@
 		<div class="view-outer shadow-outer" id="settings-gamepad">
 			<div class="view">
 				<div class="view-title stroke-sub"></div>
-				<div id="gamepad-bg" class="view-content">
-					<span id="gamepad-value"></span>
-					<div id="gamepad-buttons"></div>
+				<div class="view-content">
+					<div class="setting-box">
+						<div id="gamepad-bg">
+							<div id="gamepad-value" class="stroke-sub"></div>
+							<div id="gamepad-buttons"></div>
+						</div>
+					</div>
 				</div>
 				<div class="view-end-button taibtn stroke-sub selected"></div>
 			</div>

public/src/views/tutorial.html

 <div class="view-outer">
 	<div class="view">
-		<div class="view-title" class="stroke-sub"></div>
+		<div class="view-title stroke-sub"></div>
 		<div class="view-content"></div>
 		<div class="view-end-button taibtn stroke-sub selected"></div>
 	</div>