sigonasr2/ngsplanner
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

css stuff

Browse Source
This commit is contained in:
dudleycu 2021-09-20 07:18:08 +00:00
parent d181449b63
commit 097a1a0d16
2 changed files with 85 additions and 76 deletions

71
src/TestPanel.js

@ -1,4 +1,4 @@
import {PencilFill} from 'react-bootstrap-icons' import {PencilFill,Save} from 'react-bootstrap-icons'
import React, { useEffect,useState } from 'react'; import React, { useEffect,useState } from 'react';
import Modal from 'react-modal' import Modal from 'react-modal'
import { DisplayIcon } from './DEFAULTS'; import { DisplayIcon } from './DEFAULTS';
@ -167,7 +167,7 @@ function ClassSelectorWindow(p) {
} }
} }
displayFunction={(key) => { displayFunction={(key) => {
return <li className={p.class===key?"treeListMain":p.subClass===key?"treeListSub":""} onClick={() => {if (p.editClass===0){p.setClassName(key);p.setSubClassName(p.subClass===key?p.class:p.subClass)}else{p.setSubClassName(key);p.setClassName(p.class===key?p.subClass:p.class)}; p.setModalOpen(false) }}><img alt="" src={DisplayIcon(p.GetData("class", key, "icon"))} /> {p.GetData("class", key, "name")}</li> return <div className={"classSelector "+(p.class===key?"treeListMain":p.subClass===key?"treeListSub":"")} onClick={() => {if (p.editClass===0){p.setClassName(key);p.setSubClassName(p.subClass===key?p.class:p.subClass)}else{p.setSubClassName(key);p.setClassName(p.class===key?p.subClass:p.class)}; p.setModalOpen(false) }}><img alt="" src={DisplayIcon(p.GetData("class", key, "icon"))} /> {p.GetData("class", key, "name")}</div>
}} }}
/> />
} }
@ -637,15 +637,17 @@ function deepCopySkills(skillData) {
<div className="containerA"> <div className="containerA">
<div className="box basicInfoBox"> <div className="box basicInfoBox">
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>Basic Information</h1></div> <h1>Basic Information</h1></div>
<ReactPlaceholder showLoadingAnimation ready={buildLoad} type="media" rows={12}> <ReactPlaceholder showLoadingAnimation ready={buildLoad} type="media" rows={5}>
<div className="basicInfo"> <div className="basicInfo">
<div style={{gridArea:"author"}}>Author</div> <div style={{gridArea:"author"}}>Author</div>
<div style={{gridArea:"build"}}>Build Name</div> <div style={{gridArea:"build"}}>Build Name</div>
<div style={{gridArea:"class"}} onClick={()=>{setClassSelectWindowOpen(true)}}>Class</div> <div style={{gridArea:"class"}}>Class</div>
<div style={{gridArea:"subclass"}} onClick={()=>{setPrevPoints([...points]);setPrevSkillPointData(deepCopySkills(skillPointData));setClassSkillTreeWindowOpen(true)}}>Sub-Class</div> <div style={{gridArea:"subclass"}}>Sub-Class</div>
<div style={{gridArea:"skilltree",border:"0"}}><button onClick={()=>{setPrevPoints([...points]);setPrevSkillPointData(deepCopySkills(skillPointData));setClassSkillTreeWindowOpen(true)}}><PencilFill /> Skill Tree</button></div>
<div style={{gridArea:"class2"}}><EditableClass editClass={0} setClassNameSetter={setClassNameSetter} GetData={p.GetData} setClassName={setClassName} name={className} setClassSelectWindowOpen={setClassSelectWindowOpen}></EditableClass></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:"subclass2"}}><EditableClass editClass={1} setClassNameSetter={setClassNameSetter} GetData={p.GetData} setClassName={setSubClassName} name={subclassName} setClassSelectWindowOpen={setClassSelectWindowOpen}></EditableClass></div>
@ -654,7 +656,15 @@ function deepCopySkills(skillData) {
<div style={{gridArea:"character",textAlign:"right"}}><EditBoxInput setData={setbuildName} data={buildName}/></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:"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 style={{gridArea:"subclasslv",textAlign:"right"}}><EditBoxInput prefix="Lv." setData={setsecondaryLevel} data={secondaryLevel} type="number"/></div>
</div> <div style={{gridArea:"controls",textAlign:"right",border:"0"}}><button onClick={()=>{SaveData()}}><Save /> Save Build</button></div>
</div> </ReactPlaceholder>
</div>
<div className="box basicInfoBox">
<div className="boxTitleBar">
<h1>Basic Stats</h1></div> <ReactPlaceholder showLoadingAnimation ready={buildLoad} type="media" rows={8}>
<div className="statsInfo"> <div className="statsInfo">
<div style={{gridArea:"bp"}}>Battle Power</div> <div style={{gridArea:"bp"}}>Battle Power</div>
<div style={{gridArea:"hp"}}>HP</div> <div style={{gridArea:"hp"}}>HP</div>
@ -663,7 +673,7 @@ function deepCopySkills(skillData) {
<div style={{gridArea:"def"}}>Defense</div> <div style={{gridArea:"def"}}>Defense</div>
<div style={{gridArea:"wepUp"}}>Weapon Up</div> <div style={{gridArea:"wepUp"}}>Weapon Up</div>
<div style={{gridArea:"res"}}>Ailment Resist.</div> <div style={{gridArea:"res"}}>Ailment Resist.</div>
<div style={{gridArea:"dmgRes",border:"0"}}>Damage Resist.</div> <div style={{gridArea:"dmgRes"}}>Damage Resist.</div>
<div style={{gridArea:"bp2"}}>{p.bp}</div> <div style={{gridArea:"bp2"}}>{p.bp}</div>
<div style={{gridArea:"hp2"}}>{p.hp}</div> <div style={{gridArea:"hp2"}}>{p.hp}</div>
@ -672,7 +682,7 @@ function deepCopySkills(skillData) {
<div style={{gridArea:"def2"}}>{p.def}</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:"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:"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:"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)+"%)"}}>&nbsp;</span></div></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)+"%)"}}>&nbsp;</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)+"%)"}}>&nbsp;</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)+"%)"}}>&nbsp;</span></div></div>
@ -682,13 +692,11 @@ function deepCopySkills(skillData) {
<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:"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 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"> </div></ReactPlaceholder>
<button onClick={()=>{SaveData()}}>Save Build</button>
</section>
</ReactPlaceholder>
</div> </div>
<div className="box"> <div className="box">
@ -707,17 +715,18 @@ function deepCopySkills(skillData) {
</div> </div>
<div className="containerB"> <div className="containerB">
<div className="box equipWindow"> <div className="box equipWindow">
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>Equipped Weapon</h1></div> <h1>Equipped Weapon</h1></div> <ReactPlaceholder showLoadingAnimation ready={GetData(p)!=="no data"&&buildLoad} type="media" rows={12}>
<ReactPlaceholder showLoadingAnimation ready={GetData(p)!=="no data"&&buildLoad} type="media" rows={12}>
<div className="equipNameWrapper"> <div className="equipNameWrapper">
<div className="equipName"><h2 className="rifle">{GetSpecialWeaponName(selectedWeapon)}</h2></div> <div className="equipName"><h2 className="rifle">{GetSpecialWeaponName(selectedWeapon)}</h2></div>
<div className="equipEnhancement editOverlayWrapper"> <div className="equipEnhancement editOverlayWrapper">
<div className="editOverlay"><p><PencilFill /> Edit</p></div> <div className="editOverlay"><p><PencilFill /> Edit</p></div>
+40</div> +40</div>
</div> </div>
<PageControl pages={3} currentPage={weaponPage} setCurrentPage={setWeaponPage}><PencilFill /> Edit Details</PageControl> <PageControl pages={3} currentPage={weaponPage} setCurrentPage={setWeaponPage}><div onClick={()=>{setAugmentSelectWindowOpen(true)}}><PencilFill /> Edit Details</div></PageControl>
{weaponPage === 1 ? {weaponPage === 1 ?
<> <>
@ -743,7 +752,7 @@ function deepCopySkills(skillData) {
</div></div> </div></div>
</div> </div>
<div className="itemDetailsGridBottom editOverlayWrapper"> <div className="itemDetailsGridBottom editOverlayWrapper">
<div className="editOverlay" onClick={()=>{setAugmentSelectWindowOpen(true)}}><p><PencilFill /> Edit</p></div> <div className="editOverlay" onClick={()=>{setAugmentSelectWindowOpen(true)}}><p><PencilFill /> Edit</p></div>
<div className="itemPotential"><span className="pot">Soulspring Unit Lv.3</span></div> <div className="itemPotential"><span className="pot">Soulspring Unit Lv.3</span></div>
<div className="itemFixa"><span className="fixa">Fixa Attack Lv.3</span></div> <div className="itemFixa"><span className="fixa">Fixa Attack Lv.3</span></div>
<div className="itemDetailsAugment"> <div className="itemDetailsAugment">
@ -833,6 +842,7 @@ function deepCopySkills(skillData) {
</div> </div>
<div className="containerC"> <div className="containerC">
@ -1031,13 +1041,30 @@ function deepCopySkills(skillData) {
<Modal ariaHideApp={false} isOpen={augmentSelectWindowOpen} onRequestClose={()=>{setAugmentSelectWindowOpen(false)}} shouldFocusAfterRender={true} shouldCloseOnOverlayClick={true} shouldCloseOnEsc={true} className="modal" overlayClassName="modalOverlayAugment"> <Modal ariaHideApp={false} isOpen={augmentSelectWindowOpen} onRequestClose={()=>{setAugmentSelectWindowOpen(false)}} shouldFocusAfterRender={true} shouldCloseOnOverlayClick={true} shouldCloseOnEsc={true} className="modal" overlayClassName="modalOverlayAugment">
<div className="augmentSelectorPopup"> <div className="augmentSelectorPopup">
<div className="box"> <div className="box boxModal">
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>hi</h1></div> <h1>Select Augments</h1></div>
<div className="augmentSelectorList customScrollbar noSelect">
<ul>
<li className="pot">Dynamo Unit Lv.1</li>
<li className="pot">Dynamo Unit Lv.2</li>
<li className="pot">Dynamo Unit Lv.3</li>
<li className="pot">Dynamo Unit Lv.4</li>
<li className="fixa">Fixa Attack Lv.1</li>
<li className="fixa">Fixa Attack Lv.2</li>
<li className="fixa">Fixa Attack Lv.3</li>
<li className="fixa">Fixa Attack Lv.4</li>
<li className="aug">Melee I</li>
<li className="aug">Melee II</li>
<li className="aug">Melee III</li>
<li className="aug">Precision I</li>
<li className="aug">Precision II</li>
<li className="aug">Precision III</li>
</ul>
</div>
</div> </div>
<div className="box equipWindow"> <div className="box boxModal">
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>Equipped Weapon</h1></div> <h1>Equipped Weapon</h1></div>
<div className="equipNameWrapper"> <div className="equipNameWrapper">

90
src/style.css

@ -67,6 +67,9 @@ body {
/* mobile viewport bug fix */ /* mobile viewport bug fix */
min-height: -webkit-fill-available; min-height: -webkit-fill-available;
} }
.media-block {
margin-top: 10px;
}
table { table {
border-spacing: 0; border-spacing: 0;
width: 100%; width: 100%;
@ -233,12 +236,13 @@ header a {
"author author player" "author author player"
"build build character" "build build character"
"class class2 classlv" "class class2 classlv"
"subclass subclass2 subclasslv"; "subclass subclass2 subclasslv"
"skilltree controls controls";
margin: 10px 10px 0; margin: 10px 10px 0;
padding: 0 5px; padding: 0 5px;
} }
.statsInfo { .statsInfo {
background-color:rgba(0,0,0,0.33); /*background-color:rgba(0,0,0,0.33);*/
margin: 5px 10px 0; margin: 5px 10px 0;
padding: 0 5px 5px; padding: 0 5px 5px;
display: grid; display: grid;
@ -315,10 +319,6 @@ header a {
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
} }
.equipName:hover {
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
outline: 2px solid hsl(180, 78%, 50%);
}
.equipName h2 { .equipName h2 {
color: white; color: white;
font-weight: normal; font-weight: normal;
@ -328,10 +328,11 @@ header a {
.equipEnhancement .editOverlay { .equipEnhancement .editOverlay {
text-align: left; text-align: left;
} }
.saveControls { .basicInfo button {
margin-top: 10px; background-color:rgba(0,0,0,0.33);
padding: 0 10px; margin: 10px 0 0 0;
text-align: right; padding: 5px 10px;
border: 0;
} }
.infoBuffs { .infoBuffs {
margin: 0 auto; margin: 0 auto;
@ -461,25 +462,28 @@ header a {
.augmentDetailsStatsHeader { .augmentDetailsStatsHeader {
grid-area: header2; grid-area: header2;
} }
.augmentSelectorList {
overflow-y: scroll;
overflow-x: hidden;
margin: 5px 5px 0 5px;
padding: 2px;
max-height: 380px;
}
.augmentDetailsList { .augmentDetailsList {
grid-area: ability; grid-area: ability;
overflow-y: scroll; overflow-y: scroll;
max-height: 280px; max-height: 280px;
} }
.augmentSelectorPopup .augmentDetailsList { .augmentDetailsList li, .augmentSelectorList li {
max-height: initial;
overflow-y: initial;
}
.augmentDetailsList li {
background-color: rgba(128,128,128,0.25); background-color: rgba(128,128,128,0.25);
color: white; color: white;
margin: 2px 5px 5px 2px; margin: 2px 5px 5px 2px;
padding: 10px; padding: 10px;
} }
.augmentDetailsList li:hover { .augmentDetailsList li:hover, .augmentSelectorList li:hover,.basicInfo button:hover, .equipName:hover,.equipAugs li:hover, .itemControlsWrapper > span:nth-child(odd):hover, .pageControlDetails:hover, .unselected:hover, .foodConfirm > div:hover, .skillConfirm > div:hover, .editBox:hover, .editClass:hover {
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
outline: 2px solid hsl(180, 78%, 50%); outline: 2px solid hsl(180, 78%, 50%);
cursor: pointer;
} }
.augmentDetailsStats { .augmentDetailsStats {
grid-area: stats; grid-area: stats;
@ -498,16 +502,11 @@ overflow-y: initial;
padding: 12px 10px 7px 10px; padding: 12px 10px 7px 10px;
cursor:pointer !important; cursor:pointer !important;
} }
.equipAugs li:hover {
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
outline: 2px solid hsl(180, 78%, 50%);
}
.equipAugsExpand { .equipAugsExpand {
margin: 0 10px 0 0; margin: 0 10px 0 0;
display: inline; display: inline;
} }
.tooltip { .tooltip {
cursor: help;
color: white; color: white;
font-size:10pt; font-size:10pt;
width: 200px; width: 200px;
@ -522,7 +521,6 @@ overflow-y: initial;
.xTooltip { .xTooltip {
margin: 0 10px 0 0; margin: 0 10px 0 0;
display: inline; display: inline;
cursor: help !important;
color: white; color: white;
font-size:10pt; font-size:10pt;
text-align: left; text-align: left;
@ -657,8 +655,6 @@ overflow-y: initial;
.itemControlsWrapper > span:nth-child(odd):hover { .itemControlsWrapper > span:nth-child(odd):hover {
background-color: rgba(113,169,189,0.33); background-color: rgba(113,169,189,0.33);
cursor: pointer; cursor: pointer;
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
outline: 2px solid hsl(180, 78%, 50%);
} }
.itemControlsWrapper > span:nth-child(2) { .itemControlsWrapper > span:nth-child(2) {
background-color:rgba(0,0,0,0.33); background-color:rgba(0,0,0,0.33);
@ -771,7 +767,7 @@ overflow-y: initial;
margin: 10px 5px 0 0; margin: 10px 5px 0 0;
padding: 2px; padding: 2px;
} }
.itemWrapper:hover, .treeList li:hover { .itemWrapper:hover, .classSelector:hover {
background-color: rgba(113,169,189,0.33); background-color: rgba(113,169,189,0.33);
outline: 2px solid rgba(54,255,255,0.66); outline: 2px solid rgba(54,255,255,0.66);
} }
@ -803,22 +799,17 @@ overflow-y: initial;
max-height: 16px; max-height: 16px;
} }
.pageControlDetails { .pageControlDetails {
background-color: rgba(25, 30, 35, 0.66) !important; /*background-color: rgba(25, 30, 35, 0.5) !important;*/
background-color:rgba(0,0,0,0.33) !important;
margin: 10px 5px 0 auto !important; margin: 10px 5px 0 auto !important;
} }
.pageControlDetails:hover {
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
outline: 2px solid hsl(180, 78%, 50%);
}
.selected { .selected {
background: linear-gradient(135deg,#60461b,#b0a34e); background: linear-gradient(135deg,#60461b,#b0a34e);
border-bottom: 4px solid #ffd602; border-bottom: 4px solid #ffd602;
} }
.unselected:hover { .unselected:hover {
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
border-bottom: 0; border-bottom: 0;
padding-bottom: 9px; padding-bottom: 9px;
outline: 2px solid hsl(180, 78%, 50%);
} }
li.selected:hover { li.selected:hover {
background: linear-gradient(135deg,#60461b,#b0a34e); background: linear-gradient(135deg,#60461b,#b0a34e);
@ -933,23 +924,23 @@ adminScrollbar::-webkit-scrollbar-button {
.treeList { .treeList {
padding: 0 2px 2px 2px; padding: 0 2px 2px 2px;
} }
.treeList li { .classSelector{
background-color: rgba(128,128,128,0.33); background-color: rgba(128,128,128,0.33);
color: white; color: white;
margin: 5px 0 0 0; margin: 0 0 5px 5px;
padding: 10px; padding: 10px;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right center; background-position: right center;
background-origin: content-box; background-origin: content-box;
line-height: 20px; line-height: 20px;
} }
li.treeListMain:after, li.treeListSub:after { .treeListMain:after, .treeListSub:after {
margin-left: 10px; margin-left: 10px;
} }
li.treeListMain:after { .treeListMain:after {
content: url("./icons/class_main.png"); content: url("./icons/class_main.png");
} }
li.treeListSub:after { .treeListSub:after {
content: url("./icons/class_sub.png"); content: url("./icons/class_sub.png");
} }
.treeList li img { .treeList li img {
@ -1114,11 +1105,6 @@ cursor:pointer !important;
font-size: 17px; font-size: 17px;
padding: 0 10px; padding: 0 10px;
} }
.foodConfirm > div:hover, .skillConfirm > div:hover {
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
cursor:pointer;
outline: 2px solid #30cdef;
}
.foodConfirm > div:first-child, .skillConfirm > div:first-child { .foodConfirm > div:first-child, .skillConfirm > div:first-child {
grid-column: 2; grid-column: 2;
} }
@ -1126,11 +1112,6 @@ cursor:pointer !important;
grid-column: 3; grid-column: 3;
} }
/* Sig's Amazing CSS (cuz Dudley edited it) */ /* Sig's Amazing CSS (cuz Dudley edited it) */
.editBox:hover, .editClass:hover{
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
cursor:pointer;
outline: 2px solid #30cdef;
}
.editBoxActive:hover { .editBoxActive:hover {
cursor:pointer cursor:pointer
} }
@ -1230,7 +1211,7 @@ button {
display: grid; display: grid;
justify-items: stretch; justify-items: stretch;
align-items: center; align-items: center;
grid-template-columns: minmax(10px,1fr) minmax(auto,950px) minmax(10px,1fr); grid-template-columns: minmax(10px,1fr) minmax(auto,910px) minmax(10px,1fr);
grid-template-rows: 10px minmax(10px, 1fr) 10px; grid-template-rows: 10px minmax(10px, 1fr) 10px;
min-height: 100vh; min-height: 100vh;
/* mobile viewport bug fix */ /* mobile viewport bug fix */
@ -1243,9 +1224,10 @@ button {
gap: 10px; gap: 10px;
} }
.augmentSelectorPopup > div { .augmentSelectorPopup > div {
max-height: 440px;
box-shadow: 0 10px 16px 0 rgba(0,0,0,0.5), 0 6px 20px 0 rgba(0,0,0,0.5) !important; }
outline: 1px solid rgba(54,255,255,1); .augmentSelectorPopup > .augmentDetailsList {
max-height: 280px;
} }
.modalOverlaySplash { .modalOverlaySplash {
position: fixed; position: fixed;
@ -1297,7 +1279,6 @@ span.twitter:before {
.boxModal { .boxModal {
animation: fadeIn 0.15s; animation: fadeIn 0.15s;
max-width: 580px; max-width: 580px;
margin: 0 auto;
box-shadow: 0 10px 16px 0 rgba(0,0,0,0.5), 0 6px 20px 0 rgba(0,0,0,0.5) !important; box-shadow: 0 10px 16px 0 rgba(0,0,0,0.5), 0 6px 20px 0 rgba(0,0,0,0.5) !important;
outline: 1px solid rgba(54,255,255,1); outline: 1px solid rgba(54,255,255,1);
} }
@ -1817,7 +1798,7 @@ dd:before {
display:inline; display:inline;
} }
.buildAvatar{ .buildAvatar{
display: initial;
} }
.buildData{ .buildData{
float:right; float:right;
@ -1826,6 +1807,7 @@ dd:before {
float:right; float:right;
} }
.buildImage{ .buildImage{
display: initial;
} }
.buildPalette{ .buildPalette{
width:360px; width:360px;