From 53325c2f935180565964a6ff71960509b2848167 Mon Sep 17 00:00:00 2001 From: dudleycu Date: Thu, 2 Sep 2021 02:37:59 +0000 Subject: [PATCH] MORE css --- src/TestHeader.js | 2 +- src/TestPanel.js | 66 +++++++++++++++++++---------------- src/style.css | 88 ++++++++++++++++++++++++++++------------------- 3 files changed, 90 insertions(+), 66 deletions(-) diff --git a/src/TestHeader.js b/src/TestHeader.js index af4f301..668a6f9 100644 --- a/src/TestHeader.js +++ b/src/TestHeader.js @@ -4,7 +4,7 @@ function TestHeader() { return (
-
 NGSplanner.com
+
 NGSplanner
  • Builds
  • Guides
    • diff --git a/src/TestPanel.js b/src/TestPanel.js index 3e46500..cc4ba1e 100644 --- a/src/TestPanel.js +++ b/src/TestPanel.js @@ -448,37 +448,45 @@ useEffect(()=>{

    Basic Information

    -
    Author
    -
    Build Name
    -
    {setClassSelectWindowOpen(true)}}>Class
    -
    {setClassSkillTreeWindowOpen(true)}}>Sub-Class
    +
    Author
    +
    Build Name
    +
    {setClassSelectWindowOpen(true)}}>Class
    +
    {setClassSkillTreeWindowOpen(true)}}>Sub-Class
    + +
    +
    + +
    +
    +
    +
    -
    Battle Power
    {p.bp}
     
    -
    HP
    {p.hp}
     
    -
    PP
    {p.pp}
     
    -
    Attack
    {p.statDisplayAtk}
     
    -
    Defense
    {p.def}
     
    - -
    Weapon Up
    -
    +{(p.weaponUp1*100).toFixed(1)}%
    - +{(p.weaponUp3*100).toFixed(1)}%
    -
    +{(p.weaponUp2*100).toFixed(1)}%
    - -
    Ailment Resist.
    -
    - {(p.burnResist*100).toFixed(1)}%
    - {(p.shockResist*100).toFixed(1)}%
    - {(p.panicResist*100).toFixed(1)}%
    - {(p.stunResist*100).toFixed(1)}%
    -
    -
    - {(p.freezeResist*100).toFixed(1)}%
    - {(p.blindResist*100).toFixed(1)}%
    - {(p.poisonResist*100).toFixed(1)}%
    -
    - -
    Damage Resist.
    {(p.damageResist*100).toFixed(1)}%
    +
    Battle Power
    +
    HP
    +
    PP
    +
    Attack
    +
    Defense
    +
    Weapon Up
    +
    Ailment Resist.
    +
    Damage Resist.
    + +
    {p.bp}
    +
    {p.hp}
    +
    {p.pp}
    +
    {p.statDisplayAtk}
    +
    {p.def}
    +
    +{(p.weaponUp1*100).toFixed(1)}%
    +{(p.weaponUp3*100).toFixed(1)}%
    +
    {(p.burnResist*100).toFixed(1)}%
    {(p.shockResist*100).toFixed(1)}%
    {(p.panicResist*100).toFixed(1)}%
    {(p.stunResist*100).toFixed(1)}%
    +
    {(p.damageResist*100).toFixed(1)}%
    + +
     
    +
     
    +
     
    +
     
    +
     
    +
    +{(p.weaponUp2*100).toFixed(1)}%
    +
    {(p.freezeResist*100).toFixed(1)}%
    {(p.blindResist*100).toFixed(1)}%
    {(p.poisonResist*100).toFixed(1)}%
    diff --git a/src/style.css b/src/style.css index 22e3e3d..58e517a 100644 --- a/src/style.css +++ b/src/style.css @@ -104,7 +104,7 @@ header { grid-area: 1 / span 3; display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) minmax(0, auto); - place-items: stretch; + align-items: stretch; } header a { display: block; @@ -115,11 +115,15 @@ header a { margin-right: auto; font-size:24px; white-space: nowrap; + justify-self: start; } .logo span{ font-size:16px; text-transform: uppercase; } +.logo span:after { + content:".com"; +} .logo img { height: 40px; } @@ -128,6 +132,7 @@ header a { } .navigation { text-align: left; + justify-self: start; } .navigation a { padding: 0 15px; @@ -145,6 +150,7 @@ header a { } .rightNav { text-align: right; + justify-self: end; } .rightNav a { padding: 0 15px; @@ -165,6 +171,21 @@ header a { text-align: right; } @media screen and (max-width:860px) { + .logo a { + padding: 0 10px; + } + .logo { + font-size:22px; + } + .logo span{ + font-size:14px; + } + .logo span:after { + content: ""; + } + .navigation { + justify-self: end; + } .navigation > ul, .loginNav { display: none; } @@ -207,26 +228,15 @@ border-bottom: 1px solid rgba(128,128,128,0.5); .box td:last-child { text-align: right; } -.barGraph { - margin: 8px 0; - background: linear-gradient(90deg, #65beef, #f5ee3c); - display: block; - height: 8px; -} -.barOverlay { - border: 2px solid black; - display: block; - height: 8px; -} + .basicInfo { display: grid; - grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr); - justify-content: stretch; + grid-template-columns: minmax(0,0.9fr) minmax(0,1fr) minmax(0,1fr); grid-template-areas: - "author player player" - "build character character" - "class . ." - "subClass . ."; + "author author player" + "build build character" + "class class2 classlv" + "subclass subclass2 subclasslv"; margin: 10px 10px 0; padding: 0 5px; } @@ -235,16 +245,15 @@ border-bottom: 1px solid rgba(128,128,128,0.5); margin: 5px 10px 0; padding: 0 5px 5px; display: grid; - grid-template-columns: repeat(4, minmax(0,1fr)); - justify-content: stretch; + grid-template-columns: minmax(0,1fr) minmax(0,auto) minmax(0,0.66fr) minmax(0,1fr); grid-template-areas: - "bp . bpGraph bpGraph" - "hp . hpGraph hpGraph" - "pp . ppGraph ppGraph" - "atk . atkGraph atkGraph" - "def . defGraph defGraph" - "wepUp wepUp2 wepUp3 wepUp3" - "res res2 res3 res3" + "bp bp2 bpGraph bpGraph" + "hp hp2 hpGraph hpGraph" + "pp pp2 ppGraph ppGraph" + "atk atk2 atkGraph atkGraph" + "def def2 defGraph defGraph" + "wepUp wepUp2 wepUp2 wepUp3" + "res res2 res2 res3" "dmgRes dmgRes2 dmgRes2 dmgRes2"; } .basicInfo > div, .statsInfo > div { @@ -252,12 +261,24 @@ border-bottom: 1px solid rgba(128,128,128,0.5); line-height: 25px; position: relative; } -.statsInfo > div:nth-last-child(-n+2) { - border: 0; -} -.basicInfo > div > span, .statsInfo > div > span { +.basicInfo > div:nth-child(-n+4), .statsInfo > div:nth-child(-n+8) { color: #97e2fc; } +.statsInfo > div:nth-child(n+9):nth-child(-n+13) { + text-align: right; +} +.barGraph { + margin: 8px 0 8px auto; + background: linear-gradient(90deg, #65beef, #f5ee3c); + display: block; + height: 8px; + width: 75%; +} +.barOverlay { + border: 2px solid black; + display: block; + height: 8px; +} .boxTitleBar { background-color: rgba(124, 144, 148, 0.66); color: white; @@ -779,10 +800,6 @@ adminScrollbar::-webkit-scrollbar-button { .customScrollbar::-webkit-scrollbar-corner,.adminScrollbar::-webkit-scrollbar-corner { background-color: transparent; } -/* Handle on hover -::-webkit-scrollbar-thumb:hover { - background: #555; -}*/ .containerX { margin: 10px; min-width: 0; @@ -992,7 +1009,6 @@ cursor:pointer !important; } /* Sig's Amazing CSS (cuz Dudley edited it) */ - .editBox:hover{ background-color:rgba(0,0,0,0.5); cursor:pointer !important;