dudleycu
3 years ago
parent
06eeb2ab56
commit
51a2a0425f
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 7.8 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 9.3 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 357 B |
|
After Width: | Height: | Size: 346 B |
|
After Width: | Height: | Size: 413 B |
|
After Width: | Height: | Size: 579 B |
|
After Width: | Height: | Size: 367 B |
|
After Width: | Height: | Size: 363 B |
|
After Width: | Height: | Size: 249 B |
|
After Width: | Height: | Size: 270 B |
|
After Width: | Height: | Size: 268 B |
|
After Width: | Height: | Size: 273 B |
|
After Width: | Height: | Size: 523 B |
|
After Width: | Height: | Size: 436 B |
|
After Width: | Height: | Size: 394 B |
@ -0,0 +1,75 @@ |
|||||||
|
<html> |
||||||
|
<head> |
||||||
|
<title>NGS Planner UI Mock-Up</title> |
||||||
|
<link rel="stylesheet" href="reset.css"> |
||||||
|
<link rel="stylesheet" href="style.css"> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div id="header"> |
||||||
|
<div> |
||||||
|
<ul> |
||||||
|
<li class="logo"><a href="#"><img alt="" src="logo_sm.png" /> NGSplanner.com</a></li> |
||||||
|
<li class="headermenuitem"><a href="#">Build Planner</a></li> |
||||||
|
<li class="headermenuitem"><a href="#">Guides</a></li> |
||||||
|
<li class="headermenuitem"><a href="#">Blog</a></li> |
||||||
|
<li class="headermenuitem"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Grid Ref</a></li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div id="main"> |
||||||
|
<div class="containerX"> |
||||||
|
|
||||||
|
<!-- Item Select Box Start --> |
||||||
|
<div class="box treeSelectBox"> |
||||||
|
<div class="boxTitleBar"> |
||||||
|
<h1>Class Skill Tree</h1> |
||||||
|
<div class="boxExit"></div> |
||||||
|
</div> |
||||||
|
<div class="treeListContainer customScrollbar"> |
||||||
|
<ul class="treeList"> |
||||||
|
<li><img alt="" src="./icons/class/hu.png" />Hunter</li> |
||||||
|
<li><img alt="" src="./icons/class/fi.png" />Fighter</li> |
||||||
|
<li class="treeListMain"><img alt="" src="./icons/class/ra.png" />Ranger</li> |
||||||
|
<li><img alt="" src="./icons/class/gu.png" />Gunner</li> |
||||||
|
<li class="treeListSub"><img alt="" src="./icons/class/fo.png" />Force</li> |
||||||
|
<li><img alt="" src="./icons/class/te.png" />Techter</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- Item Select Box End --> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div class="containerY"> |
||||||
|
|
||||||
|
<!-- Item Select Box Start --> |
||||||
|
<div class="box skillTreeBox"> |
||||||
|
<div class="boxTitleBar"> |
||||||
|
<h1>Ranger01</h1> |
||||||
|
<div class="boxExit"></div> |
||||||
|
</div> |
||||||
|
<div class="skillTreeContainer customScrollbar"> |
||||||
|
<div class="skillTreeGrid"> |
||||||
|
<div class="skillActive" style="grid-area:a1"><img class="skillIcon" alt="" src="./icons/class_skills/ra/Blight_Rounds.png" /><span class="skillAllocated">1/5</span><em class="skillName">Blight Rounds</em></div> |
||||||
|
<div class="skillMaxed" style="grid-area:a2"><span class="skillTreeReqUnlock"> </span><img class="skillIcon" alt="" src="./icons/class_skills/ra/Blight_Rounds_Reinforce.png" /><span class="skillAllocated">1/1</span><em class="skillName">Blight Rounds Reinforce</em></div> |
||||||
|
<div style="grid-area:b1"><img class="skillIcon" alt="" src="./icons/class_skills/ra/Bad_Condition_Ward.png" /><span class="skillAllocated">0/10</span><em class="skillName">Bad Condition Ward</em></div> |
||||||
|
<div style="grid-area:b2"><img class="skillIcon" alt="" src="./icons/class_skills/ra/Spread_Shot.png" /><span class="skillAllocated">0/1</span><em class="skillName">Spread Shot</em></div> |
||||||
|
<div class="skillLocked" style="grid-area:b3"><span class="skillTreeReqLock"> </span><img class="skillIcon" alt="" src="./icons/class_skills/ra/Spread_Shot_Quick_Getaway.png" /><span class="skillAllocated">0/1</span><em class="skillName">Spread Shot Quick Getaway</em></div> |
||||||
|
<div style="grid-area:c1"><img class="skillIcon" alt="" src="./icons/class_skills/ra/Bad_Condition_Reduction.png" /><span class="skillAllocated">0/10</span><em class="skillName">Bad Condition Reduction</em></div> |
||||||
|
<div style="grid-area:c2"><img class="skillIcon" alt="" src="./icons/class_skills/ra/Rifle_Grenadier.png" /><span class="skillAllocated">0/1</span><em class="skillName">Rifle Grenadier</em></div> |
||||||
|
<div style="grid-area:c3"><img class="skillIcon" alt="" src="./icons/class_skills/ra/Slide_Shot_Advance.png" /><span class="skillAllocated">0/1</span><em class="skillName">Slide Shot Advance</em></div> |
||||||
|
<div style="grid-area:d2"><img class="skillIcon" alt="" src="./icons/class_skills/ra/Sticky_Bomb_Quick_Reload.png" /><span class="skillAllocated">0/1</span><em class="skillName">Sticky Bomb Quick Reload</em></div> |
||||||
|
<div style="grid-area:d3"><img class="skillIcon" alt="" src="./icons/class_skills/ra/Launcher_Charge_Grouping.png" /><span class="skillAllocated">0/1</span><em class="skillName">Launcher Charge Grouping</em></div> |
||||||
|
<div style="grid-area:e1"><img class="skillIcon" alt="" src="./icons/class_skills/ra/Slow_Landing_Attack-Ranger.png" /><span class="skillAllocated">0/1</span><em class="skillName">Slow Landing Attack-Ranger</em></div> |
||||||
|
<div style="grid-area:f1"><img class="skillIcon" alt="" src="./icons/class_skills/ra/Slow_Landing_Charge-Ranger.png" /><span class="skillAllocated">0/1</span><em class="skillName">Slow Landing Charge-Ranger</em></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="skillPoints">Your Skill Points  6   SP    0</div> |
||||||
|
<div class="skillConfirm"><span>Confirm</span><span>Cancel</span></div> |
||||||
|
</div> |
||||||
|
<!-- Item Select Box End --> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</body> |
||||||
|
</html> |
||||||
@ -0,0 +1,79 @@ |
|||||||
|
<html> |
||||||
|
<head> |
||||||
|
<title>NGS Planner UI Mock-Up</title> |
||||||
|
<link rel="stylesheet" href="reset.css"> |
||||||
|
<link rel="stylesheet" href="style.css"> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div id="header"> |
||||||
|
<div> |
||||||
|
<ul> |
||||||
|
<li class="logo"><a href="#"><img alt="" src="logo_sm.png" /> NGSplanner.com</a></li> |
||||||
|
<li class="headermenuitem"><a href="#">Build Planner</a></li> |
||||||
|
<li class="headermenuitem"><a href="#">Guides</a></li> |
||||||
|
<li class="headermenuitem"><a href="#">Blog</a></li> |
||||||
|
<li class="headermenuitem"><a href="#">About</a></li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div id="main"> |
||||||
|
<div class="containerB"> |
||||||
|
|
||||||
|
<!-- Item Select Box Start --> |
||||||
|
<div class="box treeSelectBox"> |
||||||
|
<h1>◆ Class Skill Tree<span class="exitBox">✕</span></h1> |
||||||
|
<div class="treeListContainer customScrollbar"> |
||||||
|
<ul class="treeList"> |
||||||
|
<li>Hunter</li> |
||||||
|
<li>Fighter</li> |
||||||
|
<li>Ranger</li> |
||||||
|
<li>Gunner</li> |
||||||
|
<li>Force</li> |
||||||
|
<li>Techter</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- Item Select Box End --> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div class="containerC"> |
||||||
|
|
||||||
|
<!-- Item Select Box Start --> |
||||||
|
<div class="box skillTreeBox"> |
||||||
|
<h1>◆ Class Skill Tree<span class="exitBox">✕</span></h1> |
||||||
|
<div class="skillTreeContainer customScrollbar"> |
||||||
|
<div class="skillTreeColumn"> |
||||||
|
<div class="skillItem"><img class="skillIcon" alt="" src="Blight_Rounds.png" /><span class="skillAllocated">0/5</span><em class="skillName">Blight Rounds</em></div> |
||||||
|
<div class="skillItem"><img class="skillIcon" alt="" src="./icons/Blight_Rounds_Reinforce.png" /><span class="skillAllocated">0/1</span><em class="skillName">Blight Rounds Reinforce</em></div> |
||||||
|
</div> |
||||||
|
<div class="skillTreeColumn"> |
||||||
|
<div class="skillItem"><img class="skillIcon" alt="" src="Blight_Rounds.png" /><span class="skillAllocated">0/10</span><em class="skillName">Bad Condition Ward</em></div> |
||||||
|
<div class="skillItem"><img class="skillIcon" alt="" src="Blight_Rounds.png" /><span class="skillAllocated">0/1</span><em class="skillName">Spread Shot</em></div> |
||||||
|
<div class="skillItem"><img class="skillIcon" alt="" src="Blight_Rounds.png" /><span class="skillAllocated">0/1</span><em class="skillName">Spread Shot Quick Getaway</em></div> |
||||||
|
</div> |
||||||
|
<div class="skillTreeColumn"> |
||||||
|
<div class="skillItem"><img class="skillIcon" alt="" src="Blight_Rounds.png" /><span class="skillAllocated">0/10</span><em class="skillName">Bad Condition Reduction</em></div> |
||||||
|
<div class="skillItem"><img class="skillIcon" alt="" src="Blight_Rounds.png" /><span class="skillAllocated">0/1</span><em class="skillName">Rifle Grenadier</em></div> |
||||||
|
<div class="skillItem"><img class="skillIcon" alt="" src="Blight_Rounds.png" /><span class="skillAllocated">0/1</span><em class="skillName">Slide Shot Advance</em></div> |
||||||
|
</div> |
||||||
|
<div class="skillTreeColumn"> |
||||||
|
<div class="skillBlank"> </div> |
||||||
|
<div class="skillItem"><img class="skillIcon" alt="" src="Blight_Rounds.png" /><span class="skillAllocated">0/1</span><em class="skillName">Sticky Bomb Quick Reload</em></div> |
||||||
|
<div class="skillItem"><img class="skillIcon" alt="" src="Blight_Rounds.png" /><span class="skillAllocated">0/1</span><em class="skillName">Launcher Charge Grouping</em></div> |
||||||
|
</div> |
||||||
|
<div class="skillTreeColumn"> |
||||||
|
<div class="skillItem"><img class="skillIcon" alt="" src="Blight_Rounds.png" /><span class="skillAllocated">0/1</span><em class="skillName">Slow Landing Attack-Ranger</em></div> |
||||||
|
</div> |
||||||
|
<div class="skillTreeColumn"> |
||||||
|
<div class="skillItem"><img class="skillIcon" alt="" src="Blight_Rounds.png" /><span class="skillAllocated">0/1</span><em class="skillName">Slow Landing Charge-Ranger</em></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- Item Select Box End --> |
||||||
|
<div class="skillPoints">Your Skill Points  6   SP    0</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
|
||||||
|
</div> |
||||||
|
</body> |
||||||
|
</html> |
||||||
|
After Width: | Height: | Size: 418 KiB |
|
After Width: | Height: | Size: 215 B |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 208 KiB |
@ -0,0 +1,212 @@ |
|||||||
|
<html> |
||||||
|
<head> |
||||||
|
<title>NGS Planner UI Mock-Up</title> |
||||||
|
<link rel="stylesheet" href="reset.css"> |
||||||
|
<link rel="stylesheet" href="style.css"> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div id="header"> |
||||||
|
<div> |
||||||
|
<ul> |
||||||
|
<li class="logo"><a href="#"><img alt="" src="logo_sm.png" /> NGSplanner.com</a></li> |
||||||
|
<li class="headermenuitem"><a href="#">Build Planner</a></li> |
||||||
|
<li class="headermenuitem"><a href="#">Guides</a></li> |
||||||
|
<li class="headermenuitem"><a href="#">Blog</a></li> |
||||||
|
<li class="headermenuitem"><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout">Grid Ref</a></li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div id="main"> |
||||||
|
<div class="containerA"> |
||||||
|
<div class="box"> |
||||||
|
<div class="boxTitleBar"> |
||||||
|
<h1>Basic Information</h1> |
||||||
|
<div class="boxExit"></div> |
||||||
|
</div> |
||||||
|
<table class="basicInfo"> |
||||||
|
<tr> |
||||||
|
<td>Author</td> |
||||||
|
<td> </td> |
||||||
|
<td>Dudley</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>Build Name</td> |
||||||
|
<td> </td> |
||||||
|
<td>Fatimah</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>Class</td> |
||||||
|
<td><img alt="" src="Ra.png" /> Ranger</td> |
||||||
|
<td><span class="ye">Lv.20</span></td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td> </td> |
||||||
|
<td><img alt="" src="Fo.png" /> Force</td> |
||||||
|
<td>Lv.15</td> |
||||||
|
</tr> |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
<div class="box"> |
||||||
|
<div class="boxTitleBar"> |
||||||
|
<h1>Current Effects</h1> |
||||||
|
<div class="boxExit"></div> |
||||||
|
</div> |
||||||
|
<ul class="boxmenu"> |
||||||
|
<li>1</li> |
||||||
|
<li>2</li> |
||||||
|
</ul> |
||||||
|
<h3>Effect Name</h3> |
||||||
|
<ul class="infoBuffs"> |
||||||
|
<li>Food Bost Effect |
||||||
|
<ul> |
||||||
|
<li><img alt="" src="https://i.imgur.com/TQ8EBW2.png" /> [Meat] Potency +10.0%</li> |
||||||
|
<li><img alt="" src="https://i.imgur.com/TQ8EBW2.png" /> [Crisp] Potency to Weak Point +5.0%</li> |
||||||
|
</ul> |
||||||
|
</li> |
||||||
|
<li>Shifta / Deband |
||||||
|
<ul> |
||||||
|
<li><img alt="" src="https://i.imgur.com/VIYYNIm.png" /> Potency +5.0%</li> |
||||||
|
<li><img alt="" src="https://i.imgur.com/VIYYNIm.png" /> Damage Resistance +10.0%</li> |
||||||
|
</ul> |
||||||
|
</li> |
||||||
|
<li>Region Mag Boost |
||||||
|
<ul> |
||||||
|
<li><img alt="" src="https://i.imgur.com/N6M74Qr.png" /> Potency +5.0%</li> |
||||||
|
</ul> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="containerB"> |
||||||
|
<div class="box"> |
||||||
|
<div class="boxTitleBar"> |
||||||
|
<h1>Equip</h1> |
||||||
|
<div class="boxExit"></div> |
||||||
|
</div> |
||||||
|
<div class="equipPalette"> |
||||||
|
<div class="equipPaletteSlot"><h3>Weapons</h3><div class="equipPaletteSlotWrapper"><span>1</span><img class="r4" alt="" src="./64px-NGSUIItemResurgirRifle.png" /></div></div> |
||||||
|
<div class="equipPaletteSlot"><h3>Armor 1</h3><div class="equipPaletteSlotWrapper"><img class="r3" alt="" src="./photon_barrier.png" /></div></div> |
||||||
|
<div class="equipPaletteSlot"><h3>Armor 2</h3><div class="equipPaletteSlotWrapper"><img class="r3" alt="" src="./photon_barrier.png" /></div></div> |
||||||
|
<div class="equipPaletteSlot"><h3>Armor 3</h3><div class="equipPaletteSlotWrapper"><img class="r3" alt="" src="./photon_barrier.png" /></div></div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="box"> |
||||||
|
<div class="boxTitleBar"> |
||||||
|
<h1>Equipped Weapon</h1> |
||||||
|
<div class="boxExit"></div> |
||||||
|
</div> |
||||||
|
<h2 class="rifle">Resurgir Rifle+40</h2> |
||||||
|
<ul class="boxmenu"> |
||||||
|
<li>1</li> |
||||||
|
<li>2</li> |
||||||
|
<li>3</li> |
||||||
|
<li>4</li> |
||||||
|
<li>5</li> |
||||||
|
<li>6</li> |
||||||
|
</ul> |
||||||
|
<div class="equipDetails"> |
||||||
|
<div class="equipAugs"> |
||||||
|
<h3>Abilitiy Details</h3> |
||||||
|
<ul> |
||||||
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Potency +20%/<br />Critical Hit Rage +15% for 30 seconds after a successful sidestep</span></div><span class="pot">Dynamo Unit Lv.3</span></li> |
||||||
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Potency +4%</span></div><span class="fixa">Fixa Attack Lv.3</span></li> |
||||||
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>PP +5<br />Ranged Weapon Potency +2.0%</span></div><span class="aug">Pettas Soul II</span></li> |
||||||
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>HP -10, Potency +1.5%,<br />Potency Floor Increase +1.5%<br />Damage Resistance -1.5%</span></div><span class="aug">Alts Secreta II</span></li> |
||||||
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>HP +10<br />Ranged Weapon Potency +2.0%</span></div><span class="aug">Gigas Precision II</span></li> |
||||||
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Ranged Weapon Potency +2.0%</span></div><span class="aug">Precision III</span></li> |
||||||
|
<li><img alt="" src="./icons/aug_plus.png" /></li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
<div class="pr"> |
||||||
|
<h3>Properties</h3> |
||||||
|
<ul> |
||||||
|
<li>Enhancement Lv. <span>+35</span></li> |
||||||
|
<li>Multi-Weapon <span>-</span></li> |
||||||
|
<li>Element <span>-</span></li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="containerC"> |
||||||
|
<div class="box"> |
||||||
|
<div class="boxTitleBar"> |
||||||
|
<h1>Basic Stats</h1> |
||||||
|
<div class="boxExit"></div> |
||||||
|
</div> |
||||||
|
<table class="statsInfo"> |
||||||
|
<tr> |
||||||
|
<td>Battle Power</td> |
||||||
|
<td class="ri">1344</td> |
||||||
|
<td> </td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>HP</td> |
||||||
|
<td>289</td> |
||||||
|
<td> </td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>PP</td> |
||||||
|
<td>100</td> |
||||||
|
<td> </td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>Defense</td> |
||||||
|
<td>402</td> |
||||||
|
<td> </td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>Weapon Up</td> |
||||||
|
<td class="statsMelWeaponUp"><span class="ye">+34%</span></td> |
||||||
|
<td class="statsRngWeaponUp"><span class="ye">+34%</span></td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td></td> |
||||||
|
<td class="statsTecWeaponUp"><span class="ye">+34%</span></td> |
||||||
|
<td> </td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>Damage Resist.</td> |
||||||
|
<td>18%</td> |
||||||
|
<td> </td> |
||||||
|
</tr> |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
<div class="box"> |
||||||
|
<div class="boxTitleBar"> |
||||||
|
<h1>Damage Stats</h1> |
||||||
|
<div class="boxExit"></div> |
||||||
|
</div> |
||||||
|
<ul class="boxmenu"> |
||||||
|
<li>1</li> |
||||||
|
<li>2</li> |
||||||
|
<li>3</li> |
||||||
|
</ul> |
||||||
|
<table class="basicInfo"> |
||||||
|
<tr> |
||||||
|
<td>Critical Hit Rate</td> |
||||||
|
<td>5%</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>Critical Multiplier</td> |
||||||
|
<td>120%</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>Midrange</td> |
||||||
|
<td>126</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>Critcal</td> |
||||||
|
<td>152</td> |
||||||
|
</tr> |
||||||
|
<tr> |
||||||
|
<td>Effective</td> |
||||||
|
<td><span class="ye">127</span></td> |
||||||
|
</tr> |
||||||
|
</table> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</body> |
||||||
|
</html> |
||||||
|
After Width: | Height: | Size: 20 KiB |
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 312 B |
|
After Width: | Height: | Size: 67 KiB |
|
After Width: | Height: | Size: 118 B |
@ -0,0 +1,50 @@ |
|||||||
|
the file to use and tweak as fits you best. If you're more of the copy-and-paste type, or just want an in-page preview of what you'll be getting, here it is. |
||||||
|
|
||||||
|
/* http://meyerweb.com/eric/tools/css/reset/ |
||||||
|
v2.0 | 20110126 |
||||||
|
License: none (public domain) |
||||||
|
*/ |
||||||
|
|
||||||
|
html, body, div, span, applet, object, iframe, |
||||||
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre, |
||||||
|
a, abbr, acronym, address, big, cite, code, |
||||||
|
del, dfn, em, img, ins, kbd, q, s, samp, |
||||||
|
small, strike, strong, sub, sup, tt, var, |
||||||
|
b, u, i, center, |
||||||
|
dl, dt, dd, ol, ul, li, |
||||||
|
fieldset, form, label, legend, |
||||||
|
table, caption, tbody, tfoot, thead, tr, th, td, |
||||||
|
article, aside, canvas, details, embed, |
||||||
|
figure, figcaption, footer, header, hgroup, |
||||||
|
menu, nav, output, ruby, section, summary, |
||||||
|
time, mark, audio, video { |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
border: 0; |
||||||
|
font-size: 100%; |
||||||
|
font: inherit; |
||||||
|
vertical-align: baseline; |
||||||
|
} |
||||||
|
/* HTML5 display-role reset for older browsers */ |
||||||
|
article, aside, details, figcaption, figure, |
||||||
|
footer, header, hgroup, menu, nav, section { |
||||||
|
display: block; |
||||||
|
} |
||||||
|
body { |
||||||
|
line-height: 1; |
||||||
|
} |
||||||
|
ol, ul { |
||||||
|
list-style: none; |
||||||
|
} |
||||||
|
blockquote, q { |
||||||
|
quotes: none; |
||||||
|
} |
||||||
|
blockquote:before, blockquote:after, |
||||||
|
q:before, q:after { |
||||||
|
content: ''; |
||||||
|
content: none; |
||||||
|
} |
||||||
|
table { |
||||||
|
border-collapse: collapse; |
||||||
|
border-spacing: 0; |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 6.9 KiB |
|
After Width: | Height: | Size: 157 B |
@ -0,0 +1,143 @@ |
|||||||
|
<html> |
||||||
|
<head> |
||||||
|
<title>NGS Planner UI Mock-Up</title> |
||||||
|
<link rel="stylesheet" href="reset.css"> |
||||||
|
<link rel="stylesheet" href="style.css"> |
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
||||||
|
</head> |
||||||
|
<body> |
||||||
|
<div id="header"> |
||||||
|
<div> |
||||||
|
<ul> |
||||||
|
<li class="logo"><a href="#"><img alt="" src="logo_sm.png" /> NGSplanner.com</a></li> |
||||||
|
<li class="headermenuitem"><a href="#">Build Planner</a></li> |
||||||
|
<li class="headermenuitem"><a href="#">Guides</a></li> |
||||||
|
<li class="headermenuitem"><a href="#">Blog</a></li> |
||||||
|
<li class="headermenuitem"><a href="#">About</a></li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div id="main"> |
||||||
|
<div class="container"> |
||||||
|
|
||||||
|
<!-- Item Select Box Start --> |
||||||
|
<div class="box itembox"> |
||||||
|
<div class="boxTitleBar"> |
||||||
|
<h1>Weapon Select</h1> |
||||||
|
<div class="boxExit"></div> |
||||||
|
</div> |
||||||
|
<ul class="boxmenu"> |
||||||
|
<li>Rifle</li> |
||||||
|
<li>Launcher</li> |
||||||
|
<li>Rod</li> |
||||||
|
<li>Talis</li> |
||||||
|
</ul> |
||||||
|
<div class="itemBar"> |
||||||
|
<div class="itemBarSort"> |
||||||
|
<select class="itemBarForm"> |
||||||
|
<option>Standard Sort</option> |
||||||
|
<option>Rarity</option> |
||||||
|
<option>Attack</option> |
||||||
|
<option>Potency</option> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
<div class="itemBarFilter"> |
||||||
|
<input class="itemBarForm" type="text" placeholder="Filter" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="itemlistcontainer customScrollbar"> |
||||||
|
<ul class="itemlist"> |
||||||
|
<li class="itemwep r1"><img class="itemimg" alt="" src="64px-NGSUIItemPrimmRifle.png" /><em class="rifle">Primm Rifle</em><br /><span class="atk">177</span> <span class="pot tooltip">Recycler Unit<span>Lv.4: Potency +24%/<br />20% chance of Restasigne not being consumed on use. Effect starts 10 sec after equip</span></span></li> |
||||||
|
<li class="itemwep r2"><img class="itemimg" alt="" src="64px-NGSUIItemTzviaRifle.png" /><em class="rifle">Tzvia Rifle</em><br /><span class="atk">195</span> <span class="pot tooltip">Indomitable Unit<span>Lv.4: Potency +26%/<br />All Down Resistances +20%</span></li> |
||||||
|
<li class="itemwep r3"><img class="itemimg" alt="" src="64px-NGSUIItemTheseusRifle.png" /><em class="rifle">Theseus Rifle</em><br /><span class="atk">223</span> <span class="pot tooltip">Defensive Formation<span>Lv.4: Potency +22%/<br />Critical Hit Rate increases based on Defense, up to a maximum of +18% at 1,000 Defense.</span></span></li> |
||||||
|
<li class="itemwep r4"><img class="itemimg" alt="" src="64px-NGSUIItemResurgirRifle.png" /><em class="rifle">Resurgir Rifle</em><br /><span class="atk">240</span> <span class="pot tooltip">Dynamo Unit<span>Lv.4: Potency +21%/<br />Critical Hit Rate +18% for 30 seconds after a successful Sidestep.</span></span></li> |
||||||
|
<li class="itemwep r4"><img class="itemimg" alt="" src="64px-NGSUIItemFoursisRifle.png" /><em class="rifle">Foursis Rifle</em><br /><span class="atk">242</span> <span class="pot tooltip">Bastion Unit<span>Lv.4: Potency +24%/<br />Creates a barrier that provides Damage Resistance +50% when at Max HP.</span></span></li> |
||||||
|
<li class="itemwep"><img class="itemimg" alt="" src="logo_test.png" /><em class="gb">Test</em><br /><span class="atk">999</span> <span class="pot tooltip" title="Test">Test<span>Test</span></span></li> |
||||||
|
<li class="itemwep"><img class="itemimg" alt="" src="logo_test.png" /><em class="gb">Test</em><br /><span class="atk">999</span> <span class="pot tooltip" title="Test">Test<span>Test</span></span></li> |
||||||
|
<li class="itemwep"><img class="itemimg" alt="" src="logo_test.png" /><em class="gb">Test</em><br /><span class="atk">999</span> <span class="pot tooltip" title="Test">Test<span>Test</span></span></li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- Item Select Box End --> |
||||||
|
|
||||||
|
<!-- Item Select Box Start --> |
||||||
|
<div class="box itembox"> |
||||||
|
<div class="boxTitleBar"> |
||||||
|
<h1>Food List</h1> |
||||||
|
<div class="boxExit"></div> |
||||||
|
</div> |
||||||
|
<div class="itemBar"> |
||||||
|
<div class="itemBarSort"> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div class="itemBarFilter"> |
||||||
|
<input class="itemBarForm" type="text" placeholder="Filter" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="itemlistcontainer customScrollbar"> |
||||||
|
<ul class="itemlist"> |
||||||
|
<li class="itemwep r1"><img class="itemimg" alt="" src="./icons/food/rich_aelio_herb.png" style="" /><em class="vege">Rich Aelio Herb</em><br /><span class="atk">177</span> </li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- Item Select Box End --> |
||||||
|
|
||||||
|
</div> |
||||||
|
<div class="container"> |
||||||
|
|
||||||
|
<!-- Item Select Box Start --> |
||||||
|
<div class="box itembox"> |
||||||
|
<div class="boxTitleBar"> |
||||||
|
<h1>Augment Select</h1> |
||||||
|
<div class="boxExit"></div> |
||||||
|
</div> |
||||||
|
<ul class="boxmenu"> |
||||||
|
<li>Potential</li> |
||||||
|
<li>Preset Skill</li> |
||||||
|
<li>Augment</li> |
||||||
|
</ul> |
||||||
|
<div class="itemBar"> |
||||||
|
<div class="itemBarSort"> |
||||||
|
<select class="itemBarForm"> |
||||||
|
<option>Standard Sort</option> |
||||||
|
<option>MEL Potency</option> |
||||||
|
<option>RNG Potency</option> |
||||||
|
<option>TEC Potency</option> |
||||||
|
<option>Potency Floor</option> |
||||||
|
<option>HP</option> |
||||||
|
<option>PP</option> |
||||||
|
<option>DMG Resistance</option> |
||||||
|
</select> |
||||||
|
</div> |
||||||
|
<div class="itemBarFilter"> |
||||||
|
<input class="itemBarForm" type="text" placeholder="Filter" /> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="itemListContainer customScrollbar"> |
||||||
|
<ul class="itemList"> |
||||||
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Potency +XX%/<br />Critical Hit Rage +XX% for 30 seconds after a successful sidestep</span></div><span class="pot">Dynamo Unit Lv.1</span></li> |
||||||
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Potency +XX%/<br />Critical Hit Rage +XX% for 30 seconds after a successful sidestep</span></div><span class="pot">Dynamo Unit Lv.2</span></li> |
||||||
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Potency +20%/<br />Critical Hit Rage +15% for 30 seconds after a successful sidestep</span></div><span class="pot">Dynamo Unit Lv.3</span></li> |
||||||
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Potency +XX%/<br />Critical Hit Rage +XX% for 30 seconds after a successful sidestep</span></div><span class="pot">Dynamo Unit Lv.4</span></li> |
||||||
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Potency +2%</span></div><span class="fixa">Fixa Attack Lv.1</span></li> |
||||||
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Potency +3%</span></div><span class="fixa">Fixa Attack Lv.2</span></li> |
||||||
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Potency +4%</span></div><span class="fixa">Fixa Attack Lv.3</span></li> |
||||||
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Potency +4.5%</span></div><span class="fixa">Fixa Attack Lv.4</span></li> |
||||||
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Potency +5%</span></div><span class="fixa">Fixa Attack Lv.5</span></li> |
||||||
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>HP -10, Potency +1.5%,<br />Potency Floor Increase +1.5%<br />Damage Resistance -1.5%</span></div><span class="aug">Alts Secreta II</span></li> |
||||||
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Testing</span></div><span class="aug">Test</span></li> |
||||||
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Testing</span></div><span class="aug">Test</span></li> |
||||||
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Testing</span></div><span class="aug">Test</span></li> |
||||||
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Testing</span></div><span class="aug">Test</span></li> |
||||||
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Testing</span></div><span class="aug">Test</span></li> |
||||||
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Testing</span></div><span class="aug">Test</span></li> |
||||||
|
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Testing</span></div><span class="aug">Test</span></li> |
||||||
|
</ul> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<!-- Item Select Box End --> |
||||||
|
|
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</body> |
||||||
|
</html> |
||||||
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 851 B |
|
After Width: | Height: | Size: 662 B |
|
After Width: | Height: | Size: 761 B |
@ -0,0 +1,817 @@ |
|||||||
|
* { |
||||||
|
border: 0; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
@font-face { |
||||||
|
font-family: "ngs"; |
||||||
|
src: url("4.woff") format("woff"); |
||||||
|
} |
||||||
|
@font-face { |
||||||
|
font-family: "ngs2"; |
||||||
|
src: url("3.woff") format("woff"); |
||||||
|
} |
||||||
|
@font-face { |
||||||
|
font-family: "ngs3"; |
||||||
|
src: url("2.woff") format("woff"); |
||||||
|
} |
||||||
|
@font-face { |
||||||
|
font-family: "ngs4"; |
||||||
|
src: url("1.woff") format("woff"); |
||||||
|
} |
||||||
|
img { |
||||||
|
vertical-align: middle; |
||||||
|
} |
||||||
|
body { |
||||||
|
background-image: url("./d_global_bg_header.png"),url("./gl_main_bg.jpg"); |
||||||
|
background-size: 1903px,2560px; |
||||||
|
background-color: #e8ecf4; |
||||||
|
background-repeat: no-repeat,repeat-y; |
||||||
|
background-position: center 40px; |
||||||
|
color: black; |
||||||
|
font-family: ngs,Arial,sans-serif; |
||||||
|
font-size: 11pt; |
||||||
|
font-weight: normal; |
||||||
|
text-align: center; |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
} |
||||||
|
ul { |
||||||
|
list-style-type: none; |
||||||
|
padding-inline-start: 0; |
||||||
|
} |
||||||
|
em { |
||||||
|
font-style: normal; |
||||||
|
} |
||||||
|
#header { |
||||||
|
background-color: white; |
||||||
|
min-height: 50px; |
||||||
|
padding: 20px; |
||||||
|
text-align: left; |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
#header a { |
||||||
|
color: #151f25; |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
#header a:hover { |
||||||
|
color: #454f85; |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
#header div { |
||||||
|
margin: 0 auto; |
||||||
|
width: 80%; |
||||||
|
} |
||||||
|
#header ul { |
||||||
|
display: flex; |
||||||
|
flex-flow: row wrap; |
||||||
|
align-items: center; |
||||||
|
margin-left: -40px; |
||||||
|
justify-content: flex-end; |
||||||
|
} |
||||||
|
#header ul li { |
||||||
|
flex: 0 1; |
||||||
|
color: black; |
||||||
|
font-family: "ngs2"; |
||||||
|
text-align: center; |
||||||
|
white-space:nowrap; |
||||||
|
|
||||||
|
} |
||||||
|
.headermenuitem { |
||||||
|
font-size:14pt; |
||||||
|
margin-left: 40px; |
||||||
|
} |
||||||
|
.logo { |
||||||
|
margin-right: auto; |
||||||
|
font-weight:bold; |
||||||
|
font-size:20px; |
||||||
|
} |
||||||
|
.logo img { |
||||||
|
height:28px; |
||||||
|
} |
||||||
|
@media screen and (min-width:390px) and (max-width:860px) { |
||||||
|
.headermenuitem { |
||||||
|
display:none; |
||||||
|
} |
||||||
|
} |
||||||
|
@media screen and (max-width:390px) { |
||||||
|
.headermenuitem { |
||||||
|
display:none; |
||||||
|
} |
||||||
|
} |
||||||
|
#main { |
||||||
|
display: flex; |
||||||
|
flex-flow: row wrap; |
||||||
|
justify-content: center; |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.container { |
||||||
|
flex-grow: 1; |
||||||
|
flex-shrink: 1; |
||||||
|
flex-basis: 200px; |
||||||
|
max-width: 500px; |
||||||
|
margin: 10px; |
||||||
|
} |
||||||
|
.containerA, .containerC { |
||||||
|
flex-grow: 1; |
||||||
|
/* flex-shrink: 1; |
||||||
|
flex-basis: 200px;*/ |
||||||
|
max-width: 360px; |
||||||
|
margin: 10px; |
||||||
|
} |
||||||
|
.containerB { |
||||||
|
flex-grow: 1; |
||||||
|
flex-shrink: 1; |
||||||
|
flex-basis: 200px; |
||||||
|
max-width: 480px; |
||||||
|
margin: 10px; |
||||||
|
} |
||||||
|
.box { |
||||||
|
color: #97e2fc; |
||||||
|
background-clip: padding-box; |
||||||
|
background-color: rgba(38,53,63,0.80); |
||||||
|
/*background-color: #151f25;*/ |
||||||
|
margin: 10px auto; |
||||||
|
text-align: left; |
||||||
|
text-shadow: -1px -1px 0 rgba(0,0,0,0.66), 1px -1px 0 rgba(0,0,0,0.66), -1px 1px 0 rgba(0,0,0,0.66), 1px 1px 0 rgba(0,0,0,0.66); |
||||||
|
/*min-width: 300px;*/ |
||||||
|
/*max-width: 500px;*/ |
||||||
|
padding-bottom:10px; |
||||||
|
} |
||||||
|
.box:hover { |
||||||
|
outline: 1px solid rgba(54,255,255,1); |
||||||
|
} |
||||||
|
.box:hover .boxTitleBar { |
||||||
|
background: linear-gradient(45deg, rgba(47,153,193,1),rgba(46,94,137,1) 30%,rgba(46,94,137,1) 70%, rgba(47,153,193,1)); |
||||||
|
} |
||||||
|
.box table { |
||||||
|
border-spacing: 0; |
||||||
|
color: white; |
||||||
|
margin: 10px auto; |
||||||
|
width: 95%; |
||||||
|
} |
||||||
|
.box tr { |
||||||
|
/* background-image: url("tr_bg.png");*/ |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: left bottom; |
||||||
|
border-bottom: 1px solid rgba(128,128,128,0.5); |
||||||
|
} |
||||||
|
.box tr:last-child { |
||||||
|
border-bottom: 0; |
||||||
|
} |
||||||
|
.box td { |
||||||
|
padding: 0 5px; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
.box td:first-child { |
||||||
|
color: #97e2fc; |
||||||
|
} |
||||||
|
.box td:last-child { |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
.statsInfo td:nth-child(2) { |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
.statsInfo td:last-child { |
||||||
|
width: 45%; |
||||||
|
} |
||||||
|
.statsInfo span { |
||||||
|
|
||||||
|
} |
||||||
|
.statsMelWeaponUp:before { |
||||||
|
content: url("./mel.png"); |
||||||
|
margin-right: 5px; |
||||||
|
vertical-align: middle; |
||||||
|
} |
||||||
|
.statsRngWeaponUp:before { |
||||||
|
content: url("./rng.png"); |
||||||
|
margin-right: 5px; |
||||||
|
vertical-align: middle; |
||||||
|
} |
||||||
|
.statsTecWeaponUp:before { |
||||||
|
content: url("./tec.png"); |
||||||
|
margin-right: 5px; |
||||||
|
vertical-align: middle; |
||||||
|
} |
||||||
|
.boxTitleBar { |
||||||
|
/* background-color: #495a61; */ |
||||||
|
background-color: rgba(128,128,128,0.50); |
||||||
|
color: white; |
||||||
|
font-weight: normal; |
||||||
|
font-size: 13pt; |
||||||
|
text-align: left; |
||||||
|
white-space: nowrap; |
||||||
|
display: flex; |
||||||
|
flex-flow: row nowrap; |
||||||
|
justify-content: space-between; |
||||||
|
|
||||||
|
} |
||||||
|
.boxTitleBar h1 { |
||||||
|
/* background-color: #495a61; */ |
||||||
|
color: white; |
||||||
|
font-weight: normal; |
||||||
|
font-size: 13pt; |
||||||
|
overflow: hidden; |
||||||
|
text-overflow: ellipsis; |
||||||
|
margin-right: 10px; |
||||||
|
padding: 13px 13px 7px 13px; |
||||||
|
} |
||||||
|
.boxTitleBar h1:before { |
||||||
|
content: ' \25C6'; |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
.box h2 { |
||||||
|
color: white; |
||||||
|
font-weight: normal; |
||||||
|
font-size: 18px; |
||||||
|
margin: 10px 10px 0 10px; |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
.box h2 img { |
||||||
|
margin-right: 5px; |
||||||
|
vertical-align: top; |
||||||
|
} |
||||||
|
.box h2:hover { |
||||||
|
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); |
||||||
|
} |
||||||
|
.da { |
||||||
|
color: white; |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
.da span { |
||||||
|
background-color: rgba(20,29,40,0.66); |
||||||
|
padding: 5px; |
||||||
|
} |
||||||
|
.da span:hover { |
||||||
|
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); |
||||||
|
} |
||||||
|
.basicInfo tr:hover { |
||||||
|
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); |
||||||
|
} |
||||||
|
.infoBuffs { |
||||||
|
margin: 0 auto; |
||||||
|
width: 90%; |
||||||
|
} |
||||||
|
.infoBuffs:last-child { |
||||||
|
margin-bottom: 10px; |
||||||
|
} |
||||||
|
.infobuffs li { |
||||||
|
margin: 5px 0; |
||||||
|
} |
||||||
|
.infoBuffs li:hover { |
||||||
|
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); |
||||||
|
} |
||||||
|
.infoBuffs li ul { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.infoBuffs li ul li { |
||||||
|
width: 100%; |
||||||
|
padding-left: 20px; |
||||||
|
} |
||||||
|
.infoBuffs li ul li:hover { |
||||||
|
background: transparent; |
||||||
|
} |
||||||
|
.box p { |
||||||
|
padding: 10px 10px 0 10px; |
||||||
|
color: white; |
||||||
|
} |
||||||
|
.box h3 { |
||||||
|
/* background-image: url("tr_bg.png"); |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: left bottom;*/ |
||||||
|
font-size: 12pt; |
||||||
|
font-weight: normal; |
||||||
|
padding: 0 5px; |
||||||
|
margin: 5px; |
||||||
|
border-bottom: 1px solid rgba(128,128,128,0.5); |
||||||
|
} |
||||||
|
.equipPalette { |
||||||
|
margin: 10px 10px 0 10px; |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
flex-flow: row wrap; |
||||||
|
white-space: nowrap; |
||||||
|
|
||||||
|
} |
||||||
|
.equipPaletteSlotWrapper { |
||||||
|
background-color: rgba(128,128,128,0.50); |
||||||
|
padding: 10px; |
||||||
|
} |
||||||
|
.equipPaletteSlotWrapper span { |
||||||
|
margin: 0 10px 0 0; |
||||||
|
color: rgb(255,207,4); |
||||||
|
font-size: 14pt; |
||||||
|
font-family: ngs2,Arial,sans-serif; |
||||||
|
} |
||||||
|
.equipPaletteSlotWrapper img { |
||||||
|
height: 48px; |
||||||
|
} |
||||||
|
.equipPaletteSlot { |
||||||
|
text-align: center; |
||||||
|
flex: 1 1; |
||||||
|
} |
||||||
|
.equipPaletteSlot:first-child { |
||||||
|
padding-right: 10px; |
||||||
|
} |
||||||
|
.equipPaletteSlot:hover { |
||||||
|
|
||||||
|
} |
||||||
|
.equipPaletteSlot:hover img { |
||||||
|
outline: 2px solid rgba(54,255,255,0.66); |
||||||
|
} |
||||||
|
.equipPalette h3 { |
||||||
|
color: #97e2fc; |
||||||
|
font-size: 16px; |
||||||
|
font-weight: normal; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
.equipDetails { |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
flex-flow: row wrap; |
||||||
|
} |
||||||
|
.equipDetails { |
||||||
|
margin: 10px 10px 0 0; |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
.equipAugs { |
||||||
|
flex: 1 1 auto; |
||||||
|
} |
||||||
|
.equipAugs ul { |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.equipAugs li { |
||||||
|
background-color: rgba(128,128,128,0.50); |
||||||
|
color: white; |
||||||
|
margin: 0 0 5px 10px; |
||||||
|
padding: 12px 10px 7px 10px; |
||||||
|
} |
||||||
|
.equipAugs li img { |
||||||
|
} |
||||||
|
.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 { |
||||||
|
margin: 0 10px 0 0; |
||||||
|
display: inline; |
||||||
|
} |
||||||
|
.tooltip { |
||||||
|
cursor: help; |
||||||
|
} |
||||||
|
.tooltip span { |
||||||
|
color: white; |
||||||
|
font-size:10pt; |
||||||
|
visibility: hidden; |
||||||
|
width: 200px; |
||||||
|
background-color: rgba(38,53,63,0.9); |
||||||
|
text-align: left; |
||||||
|
/*border-radius: 6px;*/ |
||||||
|
padding: 5px; |
||||||
|
/* Position the tooltip */ |
||||||
|
position: absolute; |
||||||
|
white-space: normal; |
||||||
|
left: 1em; |
||||||
|
|
||||||
|
} |
||||||
|
.tooltip:hover span { |
||||||
|
visibility: visible; |
||||||
|
} |
||||||
|
.pr { |
||||||
|
flex: 1 1 auto; |
||||||
|
margin: 10px 10px 0 0; |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
.pr li { |
||||||
|
margin: 0 10px 2px 10px; |
||||||
|
padding: 5px; |
||||||
|
} |
||||||
|
.pr li span { |
||||||
|
color:white |
||||||
|
} |
||||||
|
/*.pr li:hover { |
||||||
|
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); |
||||||
|
}*/ |
||||||
|
.ye { |
||||||
|
color: #ffb74c; |
||||||
|
} |
||||||
|
.itemlist { |
||||||
|
margin: 0 10px; |
||||||
|
position: relative; |
||||||
|
} |
||||||
|
.itemlist li { |
||||||
|
background-color: rgba(128,128,128,0.33); |
||||||
|
color: white; |
||||||
|
margin: 0 0 5px 0; |
||||||
|
padding: 10px; |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: right top; |
||||||
|
background-origin: content-box; |
||||||
|
white-space: nowrap; |
||||||
|
overflow: hidden; |
||||||
|
text-overflow: ellipsis; |
||||||
|
} |
||||||
|
.aug:before { |
||||||
|
content:url("./UINGSItemSpecialAbility.png"); |
||||||
|
margin-right: 5px; |
||||||
|
vertical-align: middle; |
||||||
|
} |
||||||
|
.itemwep { |
||||||
|
font-size: 10pt; |
||||||
|
} |
||||||
|
.itemwep em { |
||||||
|
font-size: 12pt; |
||||||
|
line-height: 28px; |
||||||
|
} |
||||||
|
.itemwep:after { |
||||||
|
clear:both; |
||||||
|
} |
||||||
|
.rifle:before { |
||||||
|
content: url("./NGSUIItemAssaultRifleMini.png"); |
||||||
|
margin-right: 5px; |
||||||
|
vertical-align: middle; |
||||||
|
} |
||||||
|
.gb:before { |
||||||
|
content: url("./NGSUIItemGunbladeMini.png"); |
||||||
|
margin-right: 5px; |
||||||
|
vertical-align: middle; |
||||||
|
} |
||||||
|
.vege:before { |
||||||
|
content: url("./icons/food/vege.png"); |
||||||
|
margin-right: 5px; |
||||||
|
vertical-align: middle; |
||||||
|
} |
||||||
|
.itemimg { |
||||||
|
background: radial-gradient(rgb(196,196,196),rgb(128,128,128)); |
||||||
|
border: 4px solid rgba(128,128,128,1); |
||||||
|
float: left; |
||||||
|
margin-right: 10px; |
||||||
|
width: 48px; |
||||||
|
box-sizing: content-box; |
||||||
|
} |
||||||
|
li.r1 { |
||||||
|
background-image: url("./NGSUIRarity1Star.png"); |
||||||
|
} |
||||||
|
.r1 img { |
||||||
|
background: radial-gradient(rgb(64,150,183),rgb(52,123,150)); |
||||||
|
} |
||||||
|
li.r2 { |
||||||
|
background-image: url("./NGSUIRarity2Star.png"); |
||||||
|
} |
||||||
|
.r2 img { |
||||||
|
background: radial-gradient(rgb(64,150,183),rgb(52,123,150)); |
||||||
|
} |
||||||
|
li.r3 { |
||||||
|
background-image: url("./NGSUIRarity3Star.png"); |
||||||
|
} |
||||||
|
.r3 img { |
||||||
|
background: radial-gradient(rgb(64,150,183),rgb(52,123,150)); |
||||||
|
} |
||||||
|
li.r4 { |
||||||
|
background-image: url("./NGSUIRarity4Star.png"); |
||||||
|
} |
||||||
|
.r4 img { |
||||||
|
background: radial-gradient(rgb(101,178,77),rgb(83,146,63)); |
||||||
|
} |
||||||
|
.equipPaletteSlotWrapper img.r1 { |
||||||
|
background: radial-gradient(rgb(64,150,183),rgb(52,123,150)); |
||||||
|
border: 1px solid rgb(64,150,183); |
||||||
|
} |
||||||
|
.equipPaletteSlotWrapper img.r2 { |
||||||
|
background: radial-gradient(rgb(64,150,183),rgb(52,123,150)); |
||||||
|
border: 1px solid rgb(64,150,183); |
||||||
|
} |
||||||
|
.equipPaletteSlotWrapper img.r3 { |
||||||
|
background: radial-gradient(rgb(64,150,183),rgb(52,123,150)); |
||||||
|
border: 1px solid rgb(64,150,183); |
||||||
|
} |
||||||
|
.equipPaletteSlotWrapper img.r4 { |
||||||
|
background: radial-gradient(rgb(101,178,77),rgb(83,146,63)); |
||||||
|
border: 1px solid rgb(101,178,77); |
||||||
|
} |
||||||
|
.itemlist li span { |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: left center; |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
.atk:before { |
||||||
|
content: url("./NGSUIStatATKOutline.png"); |
||||||
|
margin-right: 5px; |
||||||
|
vertical-align: middle; |
||||||
|
} |
||||||
|
.fixa { |
||||||
|
color: rgb(255,135,80); |
||||||
|
} |
||||||
|
.fixa:before { |
||||||
|
content: url("./UINGSItemPresetAbility.png"); |
||||||
|
margin-right: 5px; |
||||||
|
vertical-align: middle; |
||||||
|
} |
||||||
|
.pot { |
||||||
|
color: rgb(255,255,0); |
||||||
|
} |
||||||
|
.pot:before { |
||||||
|
content: url("./NGSUIItemPotentialAbility.png"); |
||||||
|
margin-right: 5px; |
||||||
|
vertical-align: middle; |
||||||
|
} |
||||||
|
.clear { |
||||||
|
clear: both; |
||||||
|
} |
||||||
|
.itemlistcontainer { |
||||||
|
max-height: 400px; |
||||||
|
overflow-y: scroll; |
||||||
|
overflow-x: hidden; |
||||||
|
margin: 10px 5px 0 0; |
||||||
|
padding: 2px; |
||||||
|
} |
||||||
|
@media screen and (min-width:390px) and (max-width:860px) { |
||||||
|
.itemlistcontainer { |
||||||
|
max-height: 300px; |
||||||
|
} |
||||||
|
} |
||||||
|
.itemlist li:hover, .treeList li:hover { |
||||||
|
background-color: rgba(113,169,189,0.33); |
||||||
|
outline: 2px solid rgba(54,255,255,0.66); |
||||||
|
} |
||||||
|
.boxmenu { |
||||||
|
font-size: 10pt; |
||||||
|
margin: 0 10px 0 10px; |
||||||
|
justify-content: flex-start; |
||||||
|
display: flex; |
||||||
|
flex-flow: row wrap; |
||||||
|
} |
||||||
|
.boxmenu li { |
||||||
|
background-color: rgba(245, 245, 245,0.66); |
||||||
|
color: white; |
||||||
|
display: inline-block; |
||||||
|
margin: 10px 5px 0 0; |
||||||
|
padding: 5px; |
||||||
|
text-align: center; |
||||||
|
flex-basis: 57px; |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
|
.boxmenu img { |
||||||
|
vertical-align: middle; |
||||||
|
} |
||||||
|
.boxmenu li:first-child { |
||||||
|
background: linear-gradient(135deg,#60461b,#b0a34e); |
||||||
|
border-bottom: 4px solid #ffd602; |
||||||
|
} |
||||||
|
.boxmenu li:hover { |
||||||
|
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); |
||||||
|
border-bottom: 0; |
||||||
|
padding-bottom: 9px; |
||||||
|
outline: 2px solid hsl(180, 78%, 50%); |
||||||
|
} |
||||||
|
.itembar { |
||||||
|
justify-content: center; |
||||||
|
display: flex; |
||||||
|
flex-flow: row nowrap; |
||||||
|
margin: 10px 10px 0 10px; |
||||||
|
padding: 0 2px; |
||||||
|
} |
||||||
|
.itemBarSort, .itemBarFilter { |
||||||
|
flex: 1 1 100px; |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
input { |
||||||
|
background-color: #101317; |
||||||
|
color: white; |
||||||
|
font-family: ngs,sans-serif; |
||||||
|
font-size: 11pt; |
||||||
|
height: 28px; |
||||||
|
padding: 0 5px; |
||||||
|
text-shadow: -1px -1px 0 rgba(0,0,0,0.66), 1px -1px 0 rgba(0,0,0,0.66), -1px 1px 0 rgba(0,0,0,0.66), 1px 1px 0 rgba(0,0,0,0.66); |
||||||
|
} |
||||||
|
input:hover { |
||||||
|
outline: 2px solid #30cdef; |
||||||
|
} |
||||||
|
select{ |
||||||
|
background-color: rgba(128,128,128,0.5); |
||||||
|
color: white; |
||||||
|
font-family: ngs,sans-serif; |
||||||
|
font-size: 11pt; |
||||||
|
height: 28px; |
||||||
|
padding: 5px 10px; |
||||||
|
text-shadow: -1px -1px 0 rgba(0,0,0,0.66), 1px -1px 0 rgba(0,0,0,0.66), -1px 1px 0 rgba(0,0,0,0.66), 1px 1px 0 rgba(0,0,0,0.66); |
||||||
|
} |
||||||
|
select.itemBarForm, input.itemBarForm { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
option { |
||||||
|
background-color: rgb(128,128,128); |
||||||
|
} |
||||||
|
.boxExit { |
||||||
|
padding: 9px 9px 3px 9px; |
||||||
|
margin: 4px; |
||||||
|
} |
||||||
|
.boxExit:hover { |
||||||
|
background-color: hsl(0, 100%, 33%); |
||||||
|
outline: 2px solid hsl(0, 100%, 50%); |
||||||
|
} |
||||||
|
.boxExit:after { |
||||||
|
content: ' \2573'; |
||||||
|
font-size:9pt; |
||||||
|
} |
||||||
|
/*.itembox:hover { |
||||||
|
border: 1px solid #36ffff; |
||||||
|
}*/ |
||||||
|
.exit { |
||||||
|
color: white; |
||||||
|
} |
||||||
|
/* width */ |
||||||
|
.customScrollbar::-webkit-scrollbar { |
||||||
|
width: 4px; |
||||||
|
height: 4px; |
||||||
|
} |
||||||
|
/* Track */ |
||||||
|
.customScrollbar::-webkit-scrollbar-track { |
||||||
|
background: rgba(128,128,128,0.8); |
||||||
|
} |
||||||
|
|
||||||
|
/* Handle */ |
||||||
|
.customScrollbar::-webkit-scrollbar-thumb { |
||||||
|
background-color: rgba(245, 245, 245,0.66); |
||||||
|
} |
||||||
|
.customScrollbar::-webkit-scrollbar-button { |
||||||
|
background-color: rgba(162,162,162,0.8); |
||||||
|
height:4px; |
||||||
|
width:4px; |
||||||
|
} |
||||||
|
.customScrollbar::-webkit-scrollbar-corner { |
||||||
|
background-color: transparent; |
||||||
|
} |
||||||
|
/* Handle on hover |
||||||
|
::-webkit-scrollbar-thumb:hover { |
||||||
|
background: #555; |
||||||
|
}*/ |
||||||
|
.containerX { |
||||||
|
margin: 10px; |
||||||
|
min-width: 0; |
||||||
|
} |
||||||
|
.containerY { |
||||||
|
margin: 10px; |
||||||
|
min-width: 0; |
||||||
|
} |
||||||
|
.treeListContainer { |
||||||
|
overflow-y: auto; |
||||||
|
margin: 10px 10px 0 10px; |
||||||
|
} |
||||||
|
.treeSelectBox { |
||||||
|
min-width: 150px; |
||||||
|
} |
||||||
|
.treeList { |
||||||
|
padding: 0 2px; |
||||||
|
} |
||||||
|
.treelist li { |
||||||
|
background-color: rgba(128,128,128,0.33); |
||||||
|
color: white; |
||||||
|
margin: 5px 0 0 0; |
||||||
|
padding: 10px; |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: right center; |
||||||
|
background-origin: content-box; |
||||||
|
} |
||||||
|
li.treeListMain { |
||||||
|
background-image: url("./icons/class_main.png"); |
||||||
|
} |
||||||
|
li.treeListSub { |
||||||
|
background-image: url("./icons/class_sub.png"); |
||||||
|
} |
||||||
|
.treeList li img { |
||||||
|
vertical-align: middle; |
||||||
|
margin-right: 5px; |
||||||
|
} |
||||||
|
.skillTreeBox { |
||||||
|
max-width: 1108px; |
||||||
|
} |
||||||
|
.skillTreeContainer { |
||||||
|
max-height: 400px; |
||||||
|
overflow-y: scroll; |
||||||
|
margin: 10px 5px 0 10px; |
||||||
|
padding: 2px; |
||||||
|
} |
||||||
|
@media screen and (min-width:390px) and (max-width:860px) { |
||||||
|
.skillTreeContainer { |
||||||
|
max-height: 300px; |
||||||
|
} |
||||||
|
} |
||||||
|
.skillTreeGrid { |
||||||
|
display: grid; |
||||||
|
grid-template-columns: repeat(6, 171px); |
||||||
|
gap: 10px; |
||||||
|
grid-template-areas: |
||||||
|
"a1 b1 c1 d1 e1 f1" |
||||||
|
"a2 b2 c2 d2 e2 f2" |
||||||
|
"a3 b3 c3 d3 e3 f3" |
||||||
|
"a4 b4 c4 d4 e4 f4" |
||||||
|
"a5 b5 c5 d5 e5 f5"; |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
.skillTreeGrid div { |
||||||
|
background-color: rgba(128,128,128,0.33); |
||||||
|
color: white; |
||||||
|
padding: 6px; |
||||||
|
/*background-repeat: no-repeat; |
||||||
|
background-position: right top; |
||||||
|
background-origin: content-box;*/ |
||||||
|
text-align: center; |
||||||
|
height: 148px; |
||||||
|
position: relative; |
||||||
|
margin: 0 0 37px 0; |
||||||
|
} |
||||||
|
.skillTreeGrid div:hover .skillButtons { |
||||||
|
visibility: visible; |
||||||
|
} |
||||||
|
div.skillActive { |
||||||
|
background-color: rgba(18,103,87,0.5); |
||||||
|
} |
||||||
|
div.skillMaxed { |
||||||
|
background-color: rgba(18,103,87,0.5); |
||||||
|
} |
||||||
|
.skillTreeGrid div:hover { |
||||||
|
outline: 2px solid rgba(54,255,255,0.66); |
||||||
|
background-color: rgba(113,169,189,0.33); |
||||||
|
background-image: url("./skilltree_div_overlay.png"); |
||||||
|
background-repeat: no-repeat; |
||||||
|
} |
||||||
|
.skillTreeGrid div.skillActive:hover, .skillTreeGrid div.skillMaxed:hover { |
||||||
|
outline: 2px solid rgba(54,255,255,0.66); |
||||||
|
background-color: rgba(18,103,87,0.5); |
||||||
|
} |
||||||
|
div.skillLocked { |
||||||
|
background-color: rgba(64,64,64,0.33); |
||||||
|
} |
||||||
|
div.skillLocked img, div.skillLocked span.skillAllocated, div.skillLocked em.skillName { |
||||||
|
opacity: 0.33; |
||||||
|
} |
||||||
|
.skillIcon { |
||||||
|
margin: 0 auto; |
||||||
|
} |
||||||
|
.skillAllocated { |
||||||
|
display: block; |
||||||
|
line-height: 40px; |
||||||
|
} |
||||||
|
div.skillActive .skillAllocated { |
||||||
|
color: rgb(255,255,0) |
||||||
|
} |
||||||
|
div.skillMaxed .skillAllocated { |
||||||
|
color: rgb(255,135,80); |
||||||
|
} |
||||||
|
.skillTreeReqUnlock { |
||||||
|
position: absolute; |
||||||
|
height: 22px; |
||||||
|
width: 175px; |
||||||
|
background-image: url("./skilltree_req_unlock.png"); |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: center; |
||||||
|
top: -34px; |
||||||
|
left: -2px; |
||||||
|
display: block; |
||||||
|
opacity: 0.8; |
||||||
|
} |
||||||
|
.skillTreeReqLock { |
||||||
|
position: absolute; |
||||||
|
height: 22px; |
||||||
|
width: 175px; |
||||||
|
background-image: url("./skilltree_req_lock.png"); |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: center; |
||||||
|
top: -34px; |
||||||
|
left: -2px; |
||||||
|
display: block; |
||||||
|
opacity: 0.8; |
||||||
|
} |
||||||
|
.skillName { |
||||||
|
background-color: rgba(32,32,32,0.33); |
||||||
|
display: block; |
||||||
|
padding: 10px; |
||||||
|
height: 48px; |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
|
||||||
|
.skillPoints { |
||||||
|
background-color: rgba(64,64,64,0.5); |
||||||
|
text-align: center; |
||||||
|
margin: 10px 10px 0 10px; |
||||||
|
padding: 16px 0 10px 0; |
||||||
|
color: white; |
||||||
|
font-size: 14pt; |
||||||
|
} |
||||||
|
.skillConfirm { |
||||||
|
justify-content: center; |
||||||
|
display: flex; |
||||||
|
flex-flow: row wrap; |
||||||
|
} |
||||||
|
.skillConfirm span { |
||||||
|
flex: 1 1 auto; |
||||||
|
background-color: rgba(113,169,189,0.33); |
||||||
|
display: inline-block; |
||||||
|
text-align: center; |
||||||
|
line-height: 48px; |
||||||
|
color: white; |
||||||
|
font-size: 13pt; |
||||||
|
margin: 10px 6px 0 6px; |
||||||
|
max-width: 292px; |
||||||
|
} |
||||||
@ -0,0 +1,634 @@ |
|||||||
|
* { |
||||||
|
border: 0; |
||||||
|
margin: 0; |
||||||
|
padding: 0; |
||||||
|
box-sizing: border-box; |
||||||
|
} |
||||||
|
@font-face { |
||||||
|
font-family: "ngs"; |
||||||
|
src: url("4.woff") format("woff"); |
||||||
|
} |
||||||
|
@font-face { |
||||||
|
font-family: "ngs2"; |
||||||
|
src: url("3.woff") format("woff"); |
||||||
|
} |
||||||
|
body { |
||||||
|
background-image: url("./d_global_bg_header.png"),url("./gl_main_bg.jpg"); |
||||||
|
background-size: 1903px,2560px; |
||||||
|
background-color: #e8ecf4; |
||||||
|
background-repeat: no-repeat,repeat-y; |
||||||
|
background-position: center 40px; |
||||||
|
color: black; |
||||||
|
font-family: ngs,Arial,sans-serif; |
||||||
|
font-size: 11pt; |
||||||
|
font-weight: normal; |
||||||
|
text-align: center; |
||||||
|
-webkit-font-smoothing: antialiased; |
||||||
|
} |
||||||
|
ul { |
||||||
|
list-style-type: none; |
||||||
|
padding-inline-start: 0; |
||||||
|
} |
||||||
|
em { |
||||||
|
font-style: normal; |
||||||
|
} |
||||||
|
#header { |
||||||
|
background-color: white; |
||||||
|
min-height: 50px; |
||||||
|
padding: 20px; |
||||||
|
text-align: left; |
||||||
|
margin-bottom: 20px; |
||||||
|
} |
||||||
|
#header a { |
||||||
|
color: #151f25; |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
#header a:hover { |
||||||
|
color: #454f85; |
||||||
|
text-decoration: none; |
||||||
|
} |
||||||
|
#header div { |
||||||
|
margin: 0 auto; |
||||||
|
width: 80%; |
||||||
|
} |
||||||
|
#header ul { |
||||||
|
display: flex; |
||||||
|
flex-flow: row wrap; |
||||||
|
align-items: center; |
||||||
|
margin-left: -40px; |
||||||
|
justify-content: flex-end; |
||||||
|
} |
||||||
|
#header ul li { |
||||||
|
flex: 0 1; |
||||||
|
color: black; |
||||||
|
font-family: "ngs2"; |
||||||
|
text-align: center; |
||||||
|
white-space:nowrap; |
||||||
|
|
||||||
|
} |
||||||
|
.headermenuitem { |
||||||
|
font-size:14pt; |
||||||
|
margin-left: 40px; |
||||||
|
} |
||||||
|
.logo { |
||||||
|
margin-right: auto; |
||||||
|
font-weight:bold; |
||||||
|
font-size:20px; |
||||||
|
} |
||||||
|
.logo img { |
||||||
|
height:28px; |
||||||
|
vertical-align: middle; |
||||||
|
} |
||||||
|
@media screen and (min-width:960px) and (max-width:1280px) { |
||||||
|
#header ul { |
||||||
|
margin-left: -20; |
||||||
|
} |
||||||
|
.headermenuitem { |
||||||
|
font-size:13pt; |
||||||
|
margin-left: 20px; |
||||||
|
} |
||||||
|
} |
||||||
|
@media screen and (min-width:760px) and (max-width:960px) { |
||||||
|
#header ul { |
||||||
|
margin-left: -10px; |
||||||
|
} |
||||||
|
.headermenuitem { |
||||||
|
font-size:12pt; |
||||||
|
margin-left: 10px; |
||||||
|
} |
||||||
|
} |
||||||
|
@media screen and (min-width:380px) and (max-width:760px) { |
||||||
|
.headermenuitem { |
||||||
|
display:none; |
||||||
|
} |
||||||
|
} |
||||||
|
@media screen and (max-width:380px) { |
||||||
|
.headermenuitem { |
||||||
|
display:none; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
#main { |
||||||
|
display: flex; |
||||||
|
flex-flow: row wrap; |
||||||
|
justify-content: center; |
||||||
|
width:100%; |
||||||
|
} |
||||||
|
.container { |
||||||
|
flex: 1 1 200px; |
||||||
|
max-width: 500px; |
||||||
|
margin: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.box { |
||||||
|
color: #97e2fc; |
||||||
|
background-clip: padding-box; |
||||||
|
background-color: rgba(38,53,63,0.80); |
||||||
|
border: 1px solid transparent; |
||||||
|
/*background-color: #151f25;*/ |
||||||
|
margin: 10px auto; |
||||||
|
text-align: left; |
||||||
|
text-shadow: -1px -1px 0 rgba(0,0,0,0.66), 1px -1px 0 rgba(0,0,0,0.66), -1px 1px 0 rgba(0,0,0,0.66), 1px 1px 0 rgba(0,0,0,0.66); |
||||||
|
/*min-width: 300px;*/ |
||||||
|
/*max-width: 500px;*/ |
||||||
|
} |
||||||
|
.box:hover { |
||||||
|
border: 1px solid #36ffff; |
||||||
|
} |
||||||
|
.box:hover h1 { |
||||||
|
background: linear-gradient(45deg, rgba(47,153,193,1),rgba(46,94,137,1) 30%,rgba(46,94,137,1) 70%, rgba(47,153,193,1)); |
||||||
|
|
||||||
|
} |
||||||
|
.box table { |
||||||
|
border-spacing: 0; |
||||||
|
color: white; |
||||||
|
margin: 10px auto; |
||||||
|
width: 95%; |
||||||
|
} |
||||||
|
.box tr { |
||||||
|
/* background-image: url("tr_bg.png");*/ |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: left bottom; |
||||||
|
border-bottom: 1px solid rgba(128,128,128,0.5); |
||||||
|
} |
||||||
|
.box tr:last-child { |
||||||
|
border-bottom: 0; |
||||||
|
} |
||||||
|
.box td { |
||||||
|
padding: 0 5px; |
||||||
|
|
||||||
|
} |
||||||
|
.box td:first-child { |
||||||
|
color: #97e2fc; |
||||||
|
} |
||||||
|
.box td:last-child { |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
.statsInfo td:nth-child(2) { |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
.statsInfo td:last-child { |
||||||
|
width: 45%; |
||||||
|
} |
||||||
|
.statsInfo span { |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: left center; |
||||||
|
} |
||||||
|
.statsMelWeaponUp span { |
||||||
|
background-image: url("./mel.png"); |
||||||
|
padding: 0 0 0 21px; |
||||||
|
} |
||||||
|
.statsRngWeaponUp span { |
||||||
|
background-image: url("./rng.png"); |
||||||
|
padding: 0 0 0 21px; |
||||||
|
} |
||||||
|
.statsTecWeaponUp span { |
||||||
|
background-image: url("./tec.png"); |
||||||
|
padding: 0 0 0 21px; |
||||||
|
} |
||||||
|
.box h1 { |
||||||
|
/* background-color: #495a61; */ |
||||||
|
background-color: rgba(128,128,128,0.50); |
||||||
|
color: white; |
||||||
|
font-weight: normal; |
||||||
|
font-size: 13pt; |
||||||
|
margin-bottom: 10px; |
||||||
|
padding: 13px 13px 7px 13px; |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
.box h2 { |
||||||
|
/* background-color: #495a61; */ |
||||||
|
color: white; |
||||||
|
font-weight: normal; |
||||||
|
font-size: 18px; |
||||||
|
/* margin-bottom: 20px; |
||||||
|
padding: 10px; */ |
||||||
|
margin: 0 auto 10px auto; |
||||||
|
text-align: left; |
||||||
|
width: 95%; |
||||||
|
} |
||||||
|
.box h2 img { |
||||||
|
margin-right: 5px; |
||||||
|
vertical-align: top; |
||||||
|
} |
||||||
|
.box h2:hover { |
||||||
|
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); |
||||||
|
} |
||||||
|
.da { |
||||||
|
color: white; |
||||||
|
text-align: right; |
||||||
|
} |
||||||
|
.da span { |
||||||
|
background-color: rgba(20,29,40,0.66); |
||||||
|
padding: 5px; |
||||||
|
} |
||||||
|
.da span:hover { |
||||||
|
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); |
||||||
|
} |
||||||
|
.basicInfo tr:hover { |
||||||
|
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); |
||||||
|
} |
||||||
|
.infoBuffs { |
||||||
|
margin: 0 auto; |
||||||
|
width: 90%; |
||||||
|
} |
||||||
|
.infoBuffs:last-child { |
||||||
|
margin-bottom: 10px; |
||||||
|
} |
||||||
|
.infobuffs li { |
||||||
|
margin: 5px 0; |
||||||
|
} |
||||||
|
.infoBuffs li:hover { |
||||||
|
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); |
||||||
|
} |
||||||
|
.infoBuffs li ul { |
||||||
|
width: 100%; |
||||||
|
} |
||||||
|
.infoBuffs li ul li { |
||||||
|
width: 100%; |
||||||
|
padding-left: 20px; |
||||||
|
} |
||||||
|
.infoBuffs li ul li:hover { |
||||||
|
background: transparent; |
||||||
|
} |
||||||
|
.box p { |
||||||
|
margin: 10px; |
||||||
|
} |
||||||
|
.box h3 { |
||||||
|
/* background-image: url("tr_bg.png"); |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: left bottom;*/ |
||||||
|
font-size: 12pt; |
||||||
|
font-weight: normal; |
||||||
|
margin: 10px; |
||||||
|
padding: 0 5px; |
||||||
|
border-bottom: 1px solid rgba(128,128,128,0.5); |
||||||
|
} |
||||||
|
.we { |
||||||
|
color: white; |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
justify-content: center; |
||||||
|
flex-wrap: wrap; |
||||||
|
} |
||||||
|
.we div { |
||||||
|
background: linear-gradient(rgba(0,0,0,0) 15%,rgba(128,128,128,0.50) 15%); |
||||||
|
/* background-image: url("we_bg.png"); |
||||||
|
background-repeat:repeat-x; |
||||||
|
background-position: left bottom;*/ |
||||||
|
min-height: 128px; |
||||||
|
max-width: 118px; |
||||||
|
min-width: 100px; |
||||||
|
width: 23%; |
||||||
|
padding: 0 0 10px 0; |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
.we div img { |
||||||
|
margin-bottom: 10px; |
||||||
|
} |
||||||
|
.we div:hover { |
||||||
|
background: linear-gradient(rgba(0,0,0,0) 15%,rgba(76,113,126,0.66) 15%,rgba(113,169,189,00.66)); |
||||||
|
} |
||||||
|
.we div h3 { |
||||||
|
background-image: none; |
||||||
|
/* background-image: url("tr_bg.png"); |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: left bottom;*/ |
||||||
|
color: #97e2fc; |
||||||
|
font-size: 16px; |
||||||
|
font-weight: normal; |
||||||
|
margin: 0 0 10px 0; |
||||||
|
padding: 0; |
||||||
|
} |
||||||
|
.de { |
||||||
|
display: flex; |
||||||
|
flex-direction: row; |
||||||
|
justify-content: center; |
||||||
|
flex-wrap: wrap; |
||||||
|
} |
||||||
|
.de div { |
||||||
|
/* background: linear-gradient(rgba(0,0,0,0) 18%,rgba(128,128,128,0.50) 18%); |
||||||
|
background-image: url("we_bg.png"); |
||||||
|
background-repeat:repeat-x; |
||||||
|
background-position: left bottom;*/ |
||||||
|
max-width: 250px; |
||||||
|
min-width: 100px; |
||||||
|
width: 50%; |
||||||
|
padding: 0; |
||||||
|
margin: 0; |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
.aug li { |
||||||
|
background-color: rgba(128,128,128,0.50); |
||||||
|
color: white; |
||||||
|
margin: 0 0 5px 10px; |
||||||
|
padding: 5px; |
||||||
|
} |
||||||
|
.aug li img { |
||||||
|
vertical-align: middle; |
||||||
|
} |
||||||
|
.aug li:hover { |
||||||
|
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); |
||||||
|
} |
||||||
|
.pr li { |
||||||
|
margin: 0 10px 2px 10px; |
||||||
|
padding: 5px; |
||||||
|
} |
||||||
|
.pr li span { |
||||||
|
color:white |
||||||
|
} |
||||||
|
.pr li:hover { |
||||||
|
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); |
||||||
|
} |
||||||
|
.ye { |
||||||
|
color: #ffb74c; |
||||||
|
} |
||||||
|
.itemlist { |
||||||
|
margin: 0 10px; |
||||||
|
} |
||||||
|
.itemlist li { |
||||||
|
background-color: rgba(128,128,128,0.33); |
||||||
|
color: white; |
||||||
|
margin: 0 0 5px 0; |
||||||
|
padding: 10px; |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: right top; |
||||||
|
background-origin: content-box;white-space: nowrap; |
||||||
|
overflow: hidden; |
||||||
|
text-overflow: ellipsis; |
||||||
|
} |
||||||
|
.itemlist li em { |
||||||
|
/*background-color: rgba(38,53,63,0.33);*/ |
||||||
|
|
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: left center; |
||||||
|
} |
||||||
|
.itemaug em { |
||||||
|
background-image: url("./UINGSItemSpecialAbility.png"); |
||||||
|
padding: 0 0 0 26px; |
||||||
|
} |
||||||
|
.itemwep { |
||||||
|
font-size: 10pt; |
||||||
|
} |
||||||
|
.itemwep em { |
||||||
|
font-size: 12pt; |
||||||
|
line-height: 28px; |
||||||
|
padding: 0 0 0 21px; |
||||||
|
} |
||||||
|
.rifle { |
||||||
|
background-image: url("./NGSUIItemAssaultRifleMini.png"); |
||||||
|
} |
||||||
|
.gb { |
||||||
|
background-image: url("./NGSUIItemGunbladeMini.png"); |
||||||
|
} |
||||||
|
.itemimg { |
||||||
|
background: radial-gradient(rgb(196,196,196),rgb(128,128,128)); |
||||||
|
border: 4px solid rgba(128,128,128,1); |
||||||
|
float: left; |
||||||
|
margin-right: 10px; |
||||||
|
width: 48px; |
||||||
|
box-sizing: content-box; |
||||||
|
} |
||||||
|
.r1 { |
||||||
|
background-image: url("./NGSUIRarity1Star.png"); |
||||||
|
} |
||||||
|
.r1 .itemimg { |
||||||
|
background: radial-gradient(rgb(64,150,183),rgb(52,123,150)); |
||||||
|
} |
||||||
|
.r2 { |
||||||
|
background-image: url("./NGSUIRarity2Star.png"); |
||||||
|
} |
||||||
|
.r2 .itemimg { |
||||||
|
background: radial-gradient(rgb(64,150,183),rgb(52,123,150)); |
||||||
|
} |
||||||
|
.r3 { |
||||||
|
background-image: url("./NGSUIRarity3Star.png"); |
||||||
|
} |
||||||
|
.r3 .itemimg { |
||||||
|
background: radial-gradient(rgb(64,150,183),rgb(52,123,150)); |
||||||
|
} |
||||||
|
.r4 { |
||||||
|
background-image: url("./NGSUIRarity4Star.png"); |
||||||
|
} |
||||||
|
.r4 .itemimg { |
||||||
|
background: radial-gradient(rgb(101,178,77),rgb(83,146,63)); |
||||||
|
} |
||||||
|
.itemlist li span { |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: left center; |
||||||
|
line-height: 28px; |
||||||
|
padding: 0 23px; |
||||||
|
} |
||||||
|
.atk { |
||||||
|
background-image: url("./NGSUIStatATKOutline.png"); |
||||||
|
|
||||||
|
} |
||||||
|
.pot { |
||||||
|
background-image: url("./NGSUIItemPotentialAbility.png"); |
||||||
|
cursor: help; |
||||||
|
} |
||||||
|
.clear { |
||||||
|
clear: both; |
||||||
|
} |
||||||
|
.itemlistcontainer { |
||||||
|
height: 400px; |
||||||
|
overflow-y: scroll; |
||||||
|
margin: 0 5px 10px 0; |
||||||
|
} |
||||||
|
.itemlist li:hover, .treeList li:hover { |
||||||
|
background-color: rgba(113,169,189,0.33); |
||||||
|
} |
||||||
|
.boxmenu { |
||||||
|
font-size: 10pt; |
||||||
|
margin: 10px; |
||||||
|
} |
||||||
|
.boxmenu li { |
||||||
|
background-color: rgba(245, 245, 245,0.66); |
||||||
|
color: white; |
||||||
|
display: inline-block; |
||||||
|
margin: 0; |
||||||
|
min-width: 53px; |
||||||
|
padding: 5px; |
||||||
|
border-bottom: 4px solid rgba(245, 245, 245,0.66); |
||||||
|
text-align: center; |
||||||
|
background-clip: padding-box; |
||||||
|
} |
||||||
|
.boxmenu img { |
||||||
|
vertical-align: middle; |
||||||
|
} |
||||||
|
.boxmenu li:first-child { |
||||||
|
background: linear-gradient(135deg,#60461b,#b0a34e); |
||||||
|
border-bottom: 4px solid #ffd602; |
||||||
|
} |
||||||
|
.boxmenu li:hover { |
||||||
|
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); |
||||||
|
border-bottom: 0; |
||||||
|
padding-bottom: 9px; |
||||||
|
} |
||||||
|
.itembar { |
||||||
|
margin: 10px; |
||||||
|
} |
||||||
|
input { |
||||||
|
background-color: #101317; |
||||||
|
border: 2px solid transparent; |
||||||
|
color: white; |
||||||
|
font-family: ngs,sans-serif; |
||||||
|
font-size: 11pt; |
||||||
|
height: 28px; |
||||||
|
padding: 0 5px; |
||||||
|
text-shadow: -1px -1px 0 rgba(0,0,0,0.66), 1px -1px 0 rgba(0,0,0,0.66), -1px 1px 0 rgba(0,0,0,0.66), 1px 1px 0 rgba(0,0,0,0.66); |
||||||
|
} |
||||||
|
input:hover { |
||||||
|
border: 2px solid #30cdef; |
||||||
|
} |
||||||
|
select{ |
||||||
|
background-color: rgba(128,128,128,0.5); |
||||||
|
color: white; |
||||||
|
font-family: ngs,sans-serif; |
||||||
|
font-size: 11pt; |
||||||
|
height: 28px; |
||||||
|
padding: 5px 10px; |
||||||
|
text-shadow: -1px -1px 0 rgba(0,0,0,0.66), 1px -1px 0 rgba(0,0,0,0.66), -1px 1px 0 rgba(0,0,0,0.66), 1px 1px 0 rgba(0,0,0,0.66); |
||||||
|
} |
||||||
|
select.sortFilter { |
||||||
|
width: 40%; |
||||||
|
margin-right: 10px; |
||||||
|
} |
||||||
|
.sortFilter { |
||||||
|
width: 40%; |
||||||
|
} |
||||||
|
option { |
||||||
|
background-color: rgb(128,128,128); |
||||||
|
} |
||||||
|
.exitBox { |
||||||
|
float: right; |
||||||
|
cursor: pointer; |
||||||
|
} |
||||||
|
.exitBox:after { |
||||||
|
clear: both; |
||||||
|
} |
||||||
|
/*.itembox:hover { |
||||||
|
border: 1px solid #36ffff; |
||||||
|
}*/ |
||||||
|
.exit { |
||||||
|
color: white; |
||||||
|
} |
||||||
|
/* width */ |
||||||
|
.customScrollbar::-webkit-scrollbar { |
||||||
|
width: 4px; |
||||||
|
} |
||||||
|
|
||||||
|
/* Track */ |
||||||
|
.customScrollbar::-webkit-scrollbar-track { |
||||||
|
background: rgba(128,128,128,0.8); |
||||||
|
} |
||||||
|
|
||||||
|
/* Handle */ |
||||||
|
.customScrollbar::-webkit-scrollbar-thumb { |
||||||
|
background-color: rgba(245, 245, 245,0.66); |
||||||
|
} |
||||||
|
.customScrollbar::-webkit-scrollbar-button { |
||||||
|
background-color: rgba(162,162,162,0.8); |
||||||
|
height:4px; |
||||||
|
width:4px; |
||||||
|
} |
||||||
|
/* Handle on hover |
||||||
|
::-webkit-scrollbar-thumb:hover { |
||||||
|
background: #555; |
||||||
|
}*/ |
||||||
|
.containerB { |
||||||
|
flex: 1 1 auto; |
||||||
|
max-width: 250px; |
||||||
|
margin: 10px; |
||||||
|
} |
||||||
|
.containerC { |
||||||
|
flex: 1 1 auto; |
||||||
|
min-width: 370px; |
||||||
|
max-width: 1050px; |
||||||
|
margin: 10px; |
||||||
|
} |
||||||
|
.treeListContainer { |
||||||
|
max-height: 400px; |
||||||
|
overflow-y: auto; |
||||||
|
margin: 0 0 10px 0; |
||||||
|
} |
||||||
|
.treeList { |
||||||
|
margin: 0 10px; |
||||||
|
} |
||||||
|
.treelist li { |
||||||
|
background-color: rgba(128,128,128,0.33); |
||||||
|
color: white; |
||||||
|
margin: 0 0 5px 0; |
||||||
|
padding: 10px; |
||||||
|
background-repeat: no-repeat; |
||||||
|
background-position: right top; |
||||||
|
background-origin: content-box;white-space: nowrap; |
||||||
|
} |
||||||
|
.treeList li em { |
||||||
|
|
||||||
|
} |
||||||
|
.skillTreeBox { |
||||||
|
|
||||||
|
} |
||||||
|
.skillTreeContainer { |
||||||
|
height: 650px; |
||||||
|
overflow-y: scroll; |
||||||
|
margin: 10px 5px 10px 10px; |
||||||
|
display: flex; |
||||||
|
flex-flow: row wrap; |
||||||
|
} |
||||||
|
.skillTreeColumn { |
||||||
|
flex: 0 1 171px; |
||||||
|
} |
||||||
|
.skillItem:hover { |
||||||
|
/*background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));*/ |
||||||
|
background-color: rgba(113,169,189,0.33); |
||||||
|
|
||||||
|
} |
||||||
|
.skillBlank { |
||||||
|
color: white; |
||||||
|
padding: 6px; |
||||||
|
margin-right: 10px; |
||||||
|
margin-bottom: 96px; |
||||||
|
text-align: center; |
||||||
|
min-height: 148px; |
||||||
|
} |
||||||
|
.skillItem { |
||||||
|
background-color: rgba(128,128,128,0.33); |
||||||
|
color: white; |
||||||
|
padding: 6px; |
||||||
|
margin-right: 10px; |
||||||
|
margin-bottom: 96px; |
||||||
|
/*background-repeat: no-repeat; |
||||||
|
background-position: right top; |
||||||
|
background-origin: content-box;*/ |
||||||
|
text-align: center; |
||||||
|
min-height: 148px; |
||||||
|
} |
||||||
|
.skillPushRight { |
||||||
|
margin-left: auto; |
||||||
|
} |
||||||
|
.skillIcon { |
||||||
|
display: block; |
||||||
|
margin: 0 auto; |
||||||
|
width: |
||||||
|
} |
||||||
|
.skillAllocated { |
||||||
|
line-height: 40px; |
||||||
|
} |
||||||
|
.skillName { |
||||||
|
background-color: rgba(64,64,64,0.5); |
||||||
|
display: block; |
||||||
|
padding: 10px; |
||||||
|
height: 48px; |
||||||
|
text-align: left; |
||||||
|
} |
||||||
|
.skillPoints { |
||||||
|
background-color: rgba(64,64,64,0.5); |
||||||
|
text-align: center; |
||||||
|
margin: 10px; |
||||||
|
padding: 16px 0 10px 0; |
||||||
|
color: white; |
||||||
|
font-size: 14pt; |
||||||
|
} |
||||||
|
After Width: | Height: | Size: 157 B |
|
After Width: | Height: | Size: 653 B |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 557 B |
Loading…
Reference in new issue