From 024f0fd288012293351f7e620e4062bc80d15d82 Mon Sep 17 00:00:00 2001
From: dudleycu <dudleyc.twitch@gmail.com>
Date: Wed, 25 Aug 2021 06:27:22 +0000
Subject: [PATCH] CSS for food menu

---
 src/TestPanel.js |  2 +-
 src/style.css    | 30 +++++++++++++++++++++++-------
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/src/TestPanel.js b/src/TestPanel.js
index 55bd7fd..93b6cd7 100644
--- a/src/TestPanel.js
+++ b/src/TestPanel.js
@@ -713,7 +713,7 @@ AUGMENT
 <div className="itemNameWrapper meat">meet</div>
 <div className="itemRarityWrapper"><img alt="" src={DisplayIcon("icons/NGSUIRarity1Star.png")} /></div>
 <div className="itemPropertiesWrapper"><span className="atk">9999</span><span class="pot">Indomitable Unit</span></div>
-<div className="itemControlsWrapper"><span>-</span><span>99</span><span>+</span></div>
+<div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div>
 </li>
 
 </SelectorWindow>
diff --git a/src/style.css b/src/style.css
index 1acd5c6..63f6558 100644
--- a/src/style.css
+++ b/src/style.css
@@ -452,12 +452,12 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
 }
 .itemWrapper {
 	display: grid;
-	grid-template-columns: 56px 1fr 1fr 1fr minmax(16px,auto);
+	grid-template-columns: minmax(56px,auto) 1fr auto minmax(16px,auto);
 	grid-template-rows: auto 1fr auto;
 	grid-template-areas:
-	"img itemname itemname itemname rarity"
-	"img . . . ."
-	"img properties properties controls controls";
+	"img itemname itemname rarity"
+	"img . . ."
+	"img properties controls controls";
 }
 .itemImgWrapper {
 	grid-area: img;
@@ -475,6 +475,7 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
 	grid-area: itemname;
 	margin: 0 10px;
 	padding: 2px 2px 0 2px;
+	white-space: nowrap;
 }
 .itemRarityWrapper {
 	grid-area: rarity;
@@ -484,14 +485,30 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
 	grid-area: properties;
 	margin: 0 10px;
 }
+.itemPropertiesWrapper > span {
+	white-space: nowrap;
+}
 .itemControlsWrapper  {
 	grid-area: controls;
 	text-align: right;
+	white-space: nowrap;
+}
+.itemControlsWrapper > span:nth-child(1) {
+	background-color: rgba(113,169,189,0.33);
+	cursor: pointer;
+}
+.itemControlsWrapper > span:nth-child(2) {
+	background-color:rgba(0,0,0,0.33);
+}
+.itemControlsWrapper > span:nth-child(3) {
+	background-color: rgba(113,169,189,0.33);
+	cursor: pointer;
 }
 .itemControlsWrapper > span {
 	display:inline-block;
-	background-color:red;
-	margin-right: 0 !important;
+	padding: 5px 10px;
+	text-align: center;
+	margin: 0 0 0 5px;
 }
 li.r1 {
     background-image: url("./icons/NGSUIRarity1Star.png");
@@ -525,7 +542,6 @@ li.r4 {
 .itemlist li span {
     background-repeat: no-repeat;
     background-position: left center;
-	margin-right: 10px;
 }
 .atk:before {
 	content: url("./icons/NGSUIStatATKOutline.png");