More successful attempt at improving omnimods UI.

4 files changed, 42 insertions, 23 deletions

diff --git a/src/css/src/roster-editor/constants.scss b/src/css/src/roster-editor/constants.scss
index 8ce7828..8f77b47 100644
--- a/src/css/src/roster-editor/constants.scss
+++ b/src/css/src/roster-editor/constants.scss
@@ -1,5 +1,5 @@
 @import '../shared/battle-view/constants';
 
-$CONTROLLED-MENU-WIDTH: 15em;
+$CONTROLLED-MENU-WIDTH: 18em;
 
 $NEXT-TO-CONTROLLED-MENU: $CONTROLLED-MENU-WIDTH + $MENU-EXTRA;
diff --git a/src/css/src/shared/battle-view.scss b/src/css/src/shared/battle-view.scss
index 979740f..c1cbf7b 100644
--- a/src/css/src/shared/battle-view.scss
+++ b/src/css/src/shared/battle-view.scss
@@ -1,14 +1,10 @@
 @import 'colors';
 @import 'shadows';
 
-*
+body
 {
    color: $GOLD-0;
    @include text-shadow(1px, $BROWN-0, 0.5);
-}
-
-body
-{
    background-color: $BROWN-2;
 }
 
diff --git a/src/css/src/shared/omnimod-icons.scss b/src/css/src/shared/omnimod-icons.scss
index 32835dc..726361c 100644
--- a/src/css/src/shared/omnimod-icons.scss
+++ b/src/css/src/shared/omnimod-icons.scss
@@ -1,3 +1,5 @@
+@import 'colors';
+
 .omnimod-icon
 {
    display: inline-block;
@@ -9,6 +11,19 @@
    background-position: center;
 }
 
+.omnimod-attack-mods .omnimod-icon,
+.omnimod-defense-mods .omnimod-icon,
+.omnimod-attribute-mods .omnimod-icon
+{
+   background-size: 2em;
+   background-position: 3.1em;
+}
+
+.omnimod-value
+{
+   display: inline-block;
+}
+
 .omnimod-icon-dmg,
 .omnimod-icon-dmgm
 {
@@ -40,13 +55,18 @@
    background-image: url(/asset/svg/damage_type/piercing.svg);
 }
 
+.omnimod-defense-mods
+{
+   background-size: 1.5em, 2em;
+   background-position: 3.4em, 3.1em;
+}
+
 .omnimod-defense-mods .omnimod-icon-slh
 {
    background-image:
       url(/asset/svg/damage_type/slash.svg),
       url(/asset/svg/damage_type/shield.svg)
    ;
-   background-size: 1em, 1.5em;
 }
 
 .omnimod-defense-mods .omnimod-icon-blu
@@ -55,7 +75,6 @@
       url(/asset/svg/damage_type/impact.svg),
       url(/asset/svg/damage_type/shield.svg)
    ;
-   background-size: 1em, 1.5em;
 }
 
 .omnimod-defense-mods .omnimod-icon-pie
@@ -64,16 +83,6 @@
       url(/asset/svg/damage_type/piercing.svg),
       url(/asset/svg/damage_type/shield.svg)
    ;
-   background-size: 1em, 1.5em;
-}
-
-.omnimod-defense-mods .omnimod-icon-bse
-{
-   background-image:
-      url(/asset/svg/damage_type/base.svg),
-      url(/asset/svg/damage_type/shield.svg)
-   ;
-   background-size: 1em, 1.5em;
 }
 
 .omnimod-icon-dodg
@@ -153,11 +162,25 @@
 
 .omnimod-attack-mods,
 .omnimod-defense-mods,
-.omnimod-attribute-mods,
+.omnimod-attribute-mods
+{
+   display: block;
+}
+
 .omnimod-attack-mods > *,
 .omnimod-defense-mods > *,
 .omnimod-attribute-mods > *
 {
-   display: flex;
-   flex-wrap: wrap;
+   display: inline-block;
+   background-color: $GLAUQUE-3;
+   color: $GLAUQUE-0;
+   line-height: 1.5em;
+   border-radius: 6px;
+   border: solid 1px $GLAUQUE-2;
+   text-shadow: none;
+   padding: 2px;
+   padding-right: 1.7em;
+   text-align: center;
+   margin: 1px;
+   width: 5em;
 }
diff --git a/src/css/src/shared/parameters.scss b/src/css/src/shared/parameters.scss
index 908d739..10f8a5b 100644
--- a/src/css/src/shared/parameters.scss
+++ b/src/css/src/shared/parameters.scss
@@ -1,2 +1,2 @@
-$MIN-PAGE-WIDTH: 800px;
-$MIN-PAGE-HEIGHT: 600px;
+$MIN-PAGE-WIDTH: 1024px;
+$MIN-PAGE-HEIGHT: 768px;