ui reorder and menu

1 files changed, 73 insertions, 11 deletions

diff --git a/style.css b/style.css
index 3a97ff1..c0bf5f4 100644
--- a/style.css
+++ b/style.css
@@ -2,6 +2,10 @@
   box-sizing: border-box;
 }
 
+html {
+  font-size: 14px;
+}
+
 body {
   margin: 0;
 }
@@ -13,11 +17,10 @@ img {
 
 .wrap {
   margin: 0 auto;
-  width: 1200px;
+  min-width: 360px;
+  max-width: 750px;
+  width: 100vw;
   height: 100vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
 }
 
 .popup__overlay {
@@ -33,21 +36,19 @@ img {
 }
 .popup {
   background-color: #fff;
-  padding: 1rem;
+  padding: 0.25rem 0.5rem;
 }
 
 #battle {
   user-select: none;
-  min-width: 750px;
   min-height: 300px;
-  padding: 1rem;
+  padding: 0.5rem;
 
   display: flex;
   flex-direction: column;
   justify-content: space-between;
 
-  background-image: url('/modules/tuxemon/mods/tuxemon/gfx/backgrounds/test/back02.png');
-  background-image: url('https://wiki.tuxemon.org/images/9/9f/Sea_background.png');
+  background-image: url('/modules/tuxemon/mods/tuxemon/gfx/ui/combat/sea_background.png');
   background-size: cover;
 }
 
@@ -78,6 +79,17 @@ img {
 .battle__monster-info__gender {
   line-height: 1em;
 }
+
+.battle__monster-info-box__status {
+  display: flex;
+  justify-content: space-between;
+  /* align-items: center; */
+}
+.battle__monster-info__status {
+  flex-basis: 5%;
+  text-align: center;
+}
+
 .battle__monster-info-exp {
   display: flex;
   align-items: center;
@@ -113,9 +125,14 @@ img {
 .battle__monster-technique {
   background-color: beige;
   border: 2px solid #000;
-  display: inline;
   padding: 0.25rem;
+
+  display: inline-flex;
+  align-items: center;
 }
+.battle__monster-technique__name {}
+.battle__monster-technique__types {}
+.battle__monster-technique__power {}
 
 .battle__monster--player {
   flex-direction: row-reverse;
@@ -139,6 +156,9 @@ img {
   transition: background-color;
   width: 0%;
 }
+.hp {
+  flex-grow: 1;
+}
 .hp-bar-wrap {
   width: 100%;
   border: 1px solid rgba(0, 0, 0, 0.5);
@@ -149,8 +169,50 @@ img {
   transition: background-color;
 }
 
+.moveset__item {
+  font-size: 1.5rem;
+  border: 1px solid #000;
+  padding: 0.5em 0.75em;
+  margin: 0.5em 0;
+  line-height: 1em;
+  cursor: pointer;
+}
+.moveset__item:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
 .moveset__item[disabled] {
-  color: #ebebeb;
+  filter: grayscale(100%);
+  opacity: 0.5;
+}
+.moveset__item img {
+  height: 1em;
+  width: 1em;
+}
+
+
+#menu {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  text-align: center;
+}
+#menu > div {
+  cursor: pointer;
+}
+#menu > div:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+
+#party {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
+}
+
+.party__monster {
+  cursor: pointer;
+}
+.party__monster:hover {
+  background-color: rgba(0, 0, 0, 0.1);
 }