From 229b8af6b0f96070b6d96bfea860d554322c8578 Mon Sep 17 00:00:00 2001 From: Dudley C Date: Fri, 10 Sep 2021 16:29:59 +0900 Subject: [PATCH] equip window styling --- src/TestPanel.js | 19 +++++++---- src/icons/status/blind.png | Bin 0 -> 853 bytes src/icons/status/burn.png | Bin 0 -> 807 bytes src/icons/status/freeze.png | Bin 0 -> 784 bytes src/icons/status/panic.png | Bin 0 -> 791 bytes src/icons/status/poison.png | Bin 0 -> 824 bytes src/icons/status/shock.png | Bin 0 -> 756 bytes src/icons/status/stun.png | Bin 0 -> 805 bytes src/style.css | 62 ++++++++++++++++++++++++++++++------ 9 files changed, 65 insertions(+), 16 deletions(-) create mode 100644 src/icons/status/blind.png create mode 100644 src/icons/status/burn.png create mode 100644 src/icons/status/freeze.png create mode 100644 src/icons/status/panic.png create mode 100644 src/icons/status/poison.png create mode 100644 src/icons/status/shock.png create mode 100644 src/icons/status/stun.png diff --git a/src/TestPanel.js b/src/TestPanel.js index 4b68a41..4a443e6 100644 --- a/src/TestPanel.js +++ b/src/TestPanel.js @@ -517,7 +517,9 @@ useEffect(()=>{

Equipped Weapon

{GetSpecialWeaponName(selectedWeapon)}

-
+40
+
+

Edit

+ +40
Edit Details {weaponPage === 1 ? @@ -568,17 +570,22 @@ useEffect(()=>{
Enhancement Lv.
Damage Adj.
Weapon Up
-
Ailment Resist.
+
Ailment Resist.
Available Classes
Multi-weapon
40
75.0% ~ 100%
-
Weapon Up
-
Ailment Resist.
-
Available Classes
-
+
9.9%
+
0.0%
0.0%
0.0%
+
+
+
9.9%
+
0.0%
0.0%
+ +
9.9%
+
0.0%
0.0%
:weaponPage === 3 ? diff --git a/src/icons/status/blind.png b/src/icons/status/blind.png new file mode 100644 index 0000000000000000000000000000000000000000..1e0beb05fe9f7ba013557f21d20224e887b99ce7 GIT binary patch literal 853 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 literal 0 HcmV?d00001 diff --git a/src/style.css b/src/style.css index 9ba47b5..166bf1e 100644 --- a/src/style.css +++ b/src/style.css @@ -323,9 +323,8 @@ header a { font-size: 18px; text-align: left; } -.equipEnhancement:hover { - background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); - outline: 2px solid hsl(180, 78%, 50%); +.equipEnhancement .editOverlay { + text-align: left; } .saveControls { margin-top: 10px; @@ -418,15 +417,25 @@ header a { "enhance1 enhance2 enhance2 enhance2" "variance1 variance2 variance2 variance2" "weaponup mel rng tec" - "ailment ailment1 ailment2 ailment3" + "ailment1 ailment2 ailment3 ailment4" "class1 class2 class2 class2" - "mw1 mw2 mw2 mw2" + "mw1 mw2 mw2 mw2"; + margin: 10px; } .statsDetails > div:nth-child(-n+6){ color: #97e2fc; + padding-right: 20px; } .statsDetails > div { border-bottom: 1px solid rgba(128,128,128,0.5); + margin-top: 5px; +} +.statsDetails div > span { + margin-top: 5px; + display: inline-block; +} +.statsDetails div > span:first-child { + margin-top: 0; } .augmentDetails { display: grid; @@ -713,6 +722,41 @@ header a { margin-right: 5px; vertical-align: middle; } +.burn:before { + content: url("./icons/status/burn.png"); + margin-right: 5px; + vertical-align: middle; +} +.freeze:before { + content: url("./icons/status/freeze.png"); + margin-right: 5px; + vertical-align: middle; +} +.blind:before { + content: url("./icons/status/blind.png"); + margin-right: 5px; + vertical-align: middle; +} +.panic:before { + content: url("./icons/status/panic.png"); + margin-right: 5px; + vertical-align: middle; +} +.shock:before { + content: url("./icons/status/shock.png"); + margin-right: 5px; + vertical-align: middle; +} +.poison:before { + content: url("./icons/status/poison.png"); + margin-right: 5px; + vertical-align: middle; +} +.stun:before { + content: url("./icons/status/stun.png"); + margin-right: 5px; + vertical-align: middle; +} .clear { clear: both; } @@ -1553,8 +1597,6 @@ p.adminNav hr { top:16px; } .equipWindow { - display: flex; - flex-direction: column; min-height: 440px; } .itemDetailsGridTop { @@ -1570,8 +1612,8 @@ p.adminNav hr { "ability fixa" "augment augment"; grid-template-columns: repeat(2,minmax(0,1fr)); - margin: 10px; - flex: 1; + margin: 5px 10px 0 10px; + padding-top: 5px; } .itemDetailsIcon { grid-area: icon; @@ -1630,13 +1672,13 @@ p.adminNav hr { .itemDetailsAugment { margin: 15px 0 0 0; grid-area: augment; + min-height: 145px; } .itemDetailsAugmentWrapper { margin: 10px 0 0 0; display: grid; grid-template-columns: repeat(auto-fit,minmax(125px, 1fr)); gap: 10px 30px; - flex: 1; } .itemDetailsAugmentWrapper > div { background-color:rgba(0,0,0,0.33);