MORE css
This commit is contained in:
dudleycu
parent
d67d55ed5d
commit
53325c2f93
@ -4,7 +4,7 @@ function TestHeader() {
|
||||
return (
|
||||
<header>
|
||||
<div className="headerWrapper">
|
||||
<div className="logo"><a href="."><img alt="" src={process.env.PUBLIC_URL + '/icons/logo_sm.png'} /> NGS<span>planner.com</span></a></div>
|
||||
<div className="logo"><a href="."><img alt="" src={process.env.PUBLIC_URL + '/icons/logo_sm.png'} /> NGS<span>planner</span></a></div>
|
||||
<div className="navigation"><ul>
|
||||
<li className="headerMenuItem"><a href=".">Builds</a></li>
|
||||
<li className="headerMenuItem"><a href=".">Guides</a></li>
|
||||
|
||||
@ -448,37 +448,45 @@ useEffect(()=>{
|
||||
<div className="boxTitleBar">
|
||||
<h1>Basic Information</h1></div>
|
||||
<div className="basicInfo">
|
||||
<div style={{gridArea:"author"}}><span>Author</span></div><div style={{gridArea:"player",textAlign:"right"}}><EditBoxInput setData={setAuthor} data={author}/></div>
|
||||
<div style={{gridArea:"build"}}><span>Build Name</span></div><div style={{gridArea:"character",textAlign:"right"}}><EditBoxInput setData={setbuildName} data={buildName}/></div>
|
||||
<div style={{gridArea:"class"}} onClick={()=>{setClassSelectWindowOpen(true)}}><span>Class</span></div><div><EditableClass editClass={0} setClassNameSetter={setClassNameSetter} GetData={p.GetData} setClassName={setClassName} name={className} setClassSelectWindowOpen={setClassSelectWindowOpen}></EditableClass></div><div style={{textAlign:"right"}}><EditBoxInput prefix="Lv." setData={setLevel} data={level} type="number"/></div>
|
||||
<div style={{gridArea:"subClass"}} onClick={()=>{setClassSkillTreeWindowOpen(true)}}><span>Sub-Class</span></div><div><EditableClass editClass={1} setClassNameSetter={setClassNameSetter} GetData={p.GetData} setClassName={setSubClassName} name={subclassName} setClassSelectWindowOpen={setClassSelectWindowOpen}></EditableClass></div><div style={{textAlign:"right"}}><EditBoxInput prefix="Lv." setData={setsecondaryLevel} data={secondaryLevel} type="number"/></div>
|
||||
<div style={{gridArea:"author"}}>Author</div>
|
||||
<div style={{gridArea:"build"}}>Build Name</div>
|
||||
<div style={{gridArea:"class"}} onClick={()=>{setClassSelectWindowOpen(true)}}>Class</div>
|
||||
<div style={{gridArea:"subclass"}} onClick={()=>{setClassSkillTreeWindowOpen(true)}}>Sub-Class</div>
|
||||
|
||||
<div style={{gridArea:"class2"}}><EditableClass editClass={0} setClassNameSetter={setClassNameSetter} GetData={p.GetData} setClassName={setClassName} name={className} setClassSelectWindowOpen={setClassSelectWindowOpen}></EditableClass></div>
|
||||
<div style={{gridArea:"subclass2"}}><EditableClass editClass={1} setClassNameSetter={setClassNameSetter} GetData={p.GetData} setClassName={setSubClassName} name={subclassName} setClassSelectWindowOpen={setClassSelectWindowOpen}></EditableClass></div>
|
||||
|
||||
<div style={{gridArea:"player",textAlign:"right"}}><EditBoxInput setData={setAuthor} data={author}/></div>
|
||||
<div style={{gridArea:"character",textAlign:"right"}}><EditBoxInput setData={setbuildName} data={buildName}/></div>
|
||||
<div style={{gridArea:"classlv",textAlign:"right"}}><EditBoxInput prefix="Lv." setData={setLevel} data={level} type="number"/></div>
|
||||
<div style={{gridArea:"subclasslv",textAlign:"right"}}><EditBoxInput prefix="Lv." setData={setsecondaryLevel} data={secondaryLevel} type="number"/></div>
|
||||
</div>
|
||||
<div className="statsInfo">
|
||||
<div style={{gridArea:"bp"}}><span>Battle Power</span></div><div>{p.bp}</div><div style={{gridArea:"bpGraph"}}><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.bp/bpGraphMax)*100)+"%,black "+((p.bp/bpGraphMax)*100)+"%)"}}> </span></div></div>
|
||||
<div style={{gridArea:"hp"}}><span>HP</span></div><div>{p.hp}</div><div style={{gridArea:"hpGraph"}}><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.hp/hpGraphMax)*100)+"%,black "+((p.hp/hpGraphMax)*100)+"%)"}}> </span></div></div>
|
||||
<div style={{gridArea:"pp"}}><span>PP</span></div><div>{p.pp}</div><div style={{gridArea:"ppGraph"}}><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.pp/ppGraphMax)*100)+"%,black "+((p.pp/ppGraphMax)*100)+"%)"}}> </span></div></div>
|
||||
<div style={{gridArea:"atk"}}><span>Attack</span></div><div>{p.statDisplayAtk}</div><div style={{gridArea:"atkGraph"}}><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.statDisplayAtk/atkGraphMax)*100)+"%,black "+((p.statDisplayAtk/atkGraphMax)*100)+"%)"}}> </span></div></div>
|
||||
<div style={{gridArea:"def"}}><span>Defense</span></div><div>{p.def}</div><div style={{gridArea:"defGraph"}}><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.def/defGraphMax)*100)+"%,black "+((p.def/defGraphMax)*100)+"%)"}}> </span></div></div>
|
||||
<div style={{gridArea:"bp"}}>Battle Power</div>
|
||||
<div style={{gridArea:"hp"}}>HP</div>
|
||||
<div style={{gridArea:"pp"}}>PP</div>
|
||||
<div style={{gridArea:"atk"}}>Attack</div>
|
||||
<div style={{gridArea:"def"}}>Defense</div>
|
||||
<div style={{gridArea:"wepUp"}}>Weapon Up</div>
|
||||
<div style={{gridArea:"res"}}>Ailment Resist.</div>
|
||||
<div style={{gridArea:"dmgRes",border:"0"}}>Damage Resist.</div>
|
||||
|
||||
<div style={{gridArea:"wepUp"}}><span>Weapon Up</span></div>
|
||||
<div style={{gridArea:"wepUp2",color:"#ffb74c"}}><img alt="" src={process.env.PUBLIC_URL+"/icons/mel.png"} /> +{(p.weaponUp1*100).toFixed(1)}%<br />
|
||||
<img alt="" src={process.env.PUBLIC_URL+"/icons/tec.png"} /> +{(p.weaponUp3*100).toFixed(1)}%</div>
|
||||
<div style={{gridArea:"wepUp3",color:"#ffb74c"}}><img alt="" src={process.env.PUBLIC_URL+"/icons/rng.png"} /> +{(p.weaponUp2*100).toFixed(1)}%</div>
|
||||
<div style={{gridArea:"bp2"}}>{p.bp}</div>
|
||||
<div style={{gridArea:"hp2"}}>{p.hp}</div>
|
||||
<div style={{gridArea:"pp2"}}>{p.pp}</div>
|
||||
<div style={{gridArea:"atk2"}}>{p.statDisplayAtk}</div>
|
||||
<div style={{gridArea:"def2"}}>{p.def}</div>
|
||||
<div style={{gridArea:"wepUp2",color:"#ffb74c"}}><img alt="" src={process.env.PUBLIC_URL+"/icons/mel.png"} /> +{(p.weaponUp1*100).toFixed(1)}%<br /><img alt="" src={process.env.PUBLIC_URL+"/icons/tec.png"} /> +{(p.weaponUp3*100).toFixed(1)}%</div>
|
||||
<div style={{gridArea:"res2"}}><img alt="" src={process.env.PUBLIC_URL+"/icons/status/burn.png"} /> {(p.burnResist*100).toFixed(1)}%<br /><img alt="" src={process.env.PUBLIC_URL+"/icons/status/shock.png"} /> {(p.shockResist*100).toFixed(1)}%<br /><img alt="" src={process.env.PUBLIC_URL+"/icons/status/panic.png"} /> {(p.panicResist*100).toFixed(1)}%<br /><img alt="" src={process.env.PUBLIC_URL+"/icons/status/stun.png"} /> {(p.stunResist*100).toFixed(1)}%<br /></div>
|
||||
<div style={{gridArea:"dmgRes2",border:"0"}}>{(p.damageResist*100).toFixed(1)}%</div>
|
||||
|
||||
<div style={{gridArea:"res"}}><span>Ailment Resist.</span></div>
|
||||
<div style={{gridArea:"res2"}}>
|
||||
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/burn.png"} /> {(p.burnResist*100).toFixed(1)}%<br />
|
||||
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/shock.png"} /> {(p.shockResist*100).toFixed(1)}%<br />
|
||||
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/panic.png"} /> {(p.panicResist*100).toFixed(1)}%<br />
|
||||
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/stun.png"} /> {(p.stunResist*100).toFixed(1)}%<br />
|
||||
</div>
|
||||
<div style={{gridArea:"res3"}}>
|
||||
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/freeze.png"} /> {(p.freezeResist*100).toFixed(1)}%<br />
|
||||
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/blind.png"} /> {(p.blindResist*100).toFixed(1)}%<br />
|
||||
<img alt="" src={process.env.PUBLIC_URL+"/icons/status/poison.png"} /> {(p.poisonResist*100).toFixed(1)}%<br />
|
||||
</div>
|
||||
|
||||
<div style={{gridArea:"dmgRes"}}><span>Damage Resist.</span></div><div style={{gridArea:"dmgRes2"}}>{(p.damageResist*100).toFixed(1)}%</div>
|
||||
<div style={{gridArea:"bpGraph"}}><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.bp/bpGraphMax)*100)+"%,black "+((p.bp/bpGraphMax)*100)+"%)"}}> </span></div></div>
|
||||
<div style={{gridArea:"hpGraph"}}><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.hp/hpGraphMax)*100)+"%,black "+((p.hp/hpGraphMax)*100)+"%)"}}> </span></div></div>
|
||||
<div style={{gridArea:"ppGraph"}}><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.pp/ppGraphMax)*100)+"%,black "+((p.pp/ppGraphMax)*100)+"%)"}}> </span></div></div>
|
||||
<div style={{gridArea:"atkGraph"}}><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.statDisplayAtk/atkGraphMax)*100)+"%,black "+((p.statDisplayAtk/atkGraphMax)*100)+"%)"}}> </span></div></div>
|
||||
<div style={{gridArea:"defGraph"}}><div className="barGraph"><span className="barOverlay" style={{background:"linear-gradient(90deg,transparent 0% "+((p.def/defGraphMax)*100)+"%,black "+((p.def/defGraphMax)*100)+"%)"}}> </span></div></div>
|
||||
<div style={{gridArea:"wepUp3",color:"#ffb74c"}} ><div><img alt="" src={process.env.PUBLIC_URL+"/icons/rng.png"} /> +{(p.weaponUp2*100).toFixed(1)}%</div></div>
|
||||
<div style={{gridArea:"res3"}}><div><img alt="" src={process.env.PUBLIC_URL+"/icons/status/freeze.png"} /> {(p.freezeResist*100).toFixed(1)}%<br /><img alt="" src={process.env.PUBLIC_URL+"/icons/status/blind.png"} /> {(p.blindResist*100).toFixed(1)}%<br /><img alt="" src={process.env.PUBLIC_URL+"/icons/status/poison.png"} /> {(p.poisonResist*100).toFixed(1)}%<br /></div></div>
|
||||
|
||||
</div><section className="saveControls">
|
||||
<button onClick={()=>{SaveData()}}>Save Build</button>
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user