perf(web): improve sasa menu design

web/public/css/tfm.css

@@ -1,7 +1,17 @@
+html,
+body {
+	padding-bottom: 0;
+	padding-left: 0;
+	padding-right: 0;
+}
+
 main {
 	position: relative;
-	height: 70vh;
-	max-width: 100%;
+	width: 100%;
+	height: 100%;
+	max-width: 100vw;
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
 }
 
 .contents-wrapper {
@@ -17,7 +27,7 @@ main {
 	overflow-x: hidden;
 }
 
-.item {
+.sasa {
 	position: relative;
 	margin: 16px;
 	padding: 0;
@@ -28,9 +38,10 @@ main {
 	background-size: cover;
 	background-position: center;
 	overflow: hidden;
+	cursor: pointer;
 }
 
-.item .overlay {
+.sasa .overlay {
 	position: absolute;
 	top: 0;
 	right: 0;
@@ -39,11 +50,11 @@ main {
 	background-color: #0000;
 }
 
-.item:hover .overlay {
+.sasa:hover .overlay {
 	background-color: #0002;
 }
 
-.item.selected .overlay {
+.sasa.selected .overlay {
 	background-color: #0004;
 }
 
@@ -76,17 +87,36 @@ main {
 	overflow: hidden;
 }
 
-form#sasa-menu {
-	margin: 0;
+#sasa-form {
 	padding: 2vw 2vw;
-	width: 100%;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
 }
 
 #tanzaku-list {
-	height: 40vh;
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-start;
+	align-items: flex-start;
+	flex-wrap: wrap;
+	padding: 8px 0;
+	height: 39vh;
+	box-shadow: inset -5px 5px 5px #1111, inset -5px -5px 5px #1111;
 	overflow-y: scroll;
 	overflow-x: hidden;
 }
+
+.tanzaku {
+	margin: 5px;
+	padding: 7px;
+	border: 1px solid #555;
+	border-radius: 7px;
+	cursor: default;
+}
+
+.tanzaku:hover,
+.tanzaku.selected:hover {
+	background-color: #0004;
+}
+
+.tanzaku.selected {
+	background-color: #0002;
+}