From 5df78cd85e81d58721a1932033aa1e023f0764fb Mon Sep 17 00:00:00 2001
From: dudleycu <dudleyc.twitch@gmail.com>
Date: Wed, 25 Aug 2021 23:04:27 +0900
Subject: [PATCH] i make food menu turn diff color

---
 src/TestPanel.js |  6 +++---
 src/style.css    | 34 +++++++++++++++++++++++++++-------
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/src/TestPanel.js b/src/TestPanel.js
index ef69b4a..ee6f21d 100644
--- a/src/TestPanel.js
+++ b/src/TestPanel.js
@@ -749,10 +749,10 @@ AUGMENT
 
 <SelectorWindow title={"Food Menu"} modalOpen={foodMenuWindowOpen} setModalOpen={setFoodMenuWindowOpen} GetData={p.GetData}>
 
-<div className="itemWrapper r1"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/aelio_meat.png")} /></div><div className="itemNameWrapper meat">XXXL Super Duper Extra Crispy Delicious Sweet Mouth-Watering Meat</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
+<div className="itemWrapperActive r1"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/aelio_meat.png")} /></div><div className="itemNameWrapper meat">XXXL Super Duper Extra Crispy Delicious Sweet Mouth-Watering Meat</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
 <div className="itemWrapper r2"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/light_aelio_mushroom.png")} /></div><div className="itemNameWrapper meat">Potato 2</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
-<div className="itemWrapper r3"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/robust_aelio_lobster.png")} /></div><div className="itemNameWrapper meat">Dog with Claws</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
-<div className="itemWrapper r4"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/light_aelio_turban_shell.png")} /></div><div className="itemNameWrapper meat">If you put your ear to it you can hear the PSO2 lobby music</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
+<div className="itemWrapperActive r3"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/robust_aelio_lobster.png")} /></div><div className="itemNameWrapper meat">Dog with Claws</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
+<div className="itemWrapperActive r4"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/light_aelio_turban_shell.png")} /></div><div className="itemNameWrapper meat">If you put your ear to it you can hear the PSO2 lobby music</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
 <div className="itemWrapper r1"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/aelio_meat.png")} /></div><div className="itemNameWrapper meat">XXXL Super Duper Extra Crispy Delicious Sweet Mouth-Watering Meat</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
 <div className="itemWrapper r2"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/light_aelio_mushroom.png")} /></div><div className="itemNameWrapper meat">Potato 2</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
 <div className="itemWrapper r3"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/robust_aelio_lobster.png")} /></div><div className="itemNameWrapper meat">Dog with Claws</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
diff --git a/src/style.css b/src/style.css
index 5439d79..9d7d239 100644
--- a/src/style.css
+++ b/src/style.css
@@ -449,9 +449,8 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
 	box-sizing: content-box;
 	border-style: solid;
 }
-.itemWrapper {
+.itemWrapper, .itemWrapperActive {
 	background-color: rgba(128,128,128,0.33);
-	color: white;
 	margin: 5px 10px 5px;
 	padding: 10px;
 	display: grid;
@@ -462,6 +461,10 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
 	"img . . ."
 	"img properties controls controls";
 }
+.itemWrapperActive {
+	background: linear-gradient(135deg,#60461b,#b0a34e);
+	border-bottom: 4px solid #ffd602;
+}
 .itemImgWrapper {
 	grid-area: img;
 }
@@ -510,16 +513,33 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
 	text-align: right;
 	white-space: nowrap;
 }
-.itemControlsWrapper > span:nth-child(1) {
+/*.selected {
+	background: linear-gradient(135deg,#60461b,#b0a34e);
+	outline: 2px solid #ffd602;
+}
+.unselected:hover {
+	background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
+	border-bottom: 0;
+	padding-bottom: 9px;
+	outline: 2px solid hsl(180, 78%, 50%);
+}
+li.selected:hover {
+	background: linear-gradient(135deg,#60461b,#b0a34e);
+	outline: 2px solid hsl(180, 78%, 50%);
+}*/
+
+.itemControlsWrapper > span:nth-child(1), .itemControlsWrapper > span:nth-child(3) {
 	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) {
+.itemControlsWrapper > span:nth-child(1):hover, .itemControlsWrapper > span:nth-child(3):hover {
 	background-color: rgba(113,169,189,0.33);
 	cursor: pointer;
+	background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
+	outline: 2px solid hsl(180, 78%, 50%);
+}
+.itemControlsWrapper > span:nth-child(2) {
+	background-color:rgba(0,0,0,0.33);
 }
 .itemControlsWrapper > span {
 	display:inline-block;