Uploaded UI design example thing (because sig told me to)
This commit is contained in:
dudleycu
parent
06eeb2ab56
commit
51a2a0425f
BIN
public/ngsp/1.woff
Normal file
BIN
public/ngsp/1.woff
Normal file
Binary file not shown.
BIN
public/ngsp/2.woff
Normal file
BIN
public/ngsp/2.woff
Normal file
Binary file not shown.
BIN
public/ngsp/3.woff
Normal file
BIN
public/ngsp/3.woff
Normal file
Binary file not shown.
BIN
public/ngsp/4.woff
Normal file
BIN
public/ngsp/4.woff
Normal file
Binary file not shown.
BIN
public/ngsp/64px-NGSUIItemFoursisRifle.png
Normal file
BIN
public/ngsp/64px-NGSUIItemFoursisRifle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
BIN
public/ngsp/64px-NGSUIItemPrimmRifle.png
Normal file
BIN
public/ngsp/64px-NGSUIItemPrimmRifle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
public/ngsp/64px-NGSUIItemResurgirRifle.png
Normal file
BIN
public/ngsp/64px-NGSUIItemResurgirRifle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
BIN
public/ngsp/64px-NGSUIItemTheseusRifle.png
Normal file
BIN
public/ngsp/64px-NGSUIItemTheseusRifle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
public/ngsp/64px-NGSUIItemTzviaRifle.png
Normal file
BIN
public/ngsp/64px-NGSUIItemTzviaRifle.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
BIN
public/ngsp/Blight_Rounds.png
Normal file
BIN
public/ngsp/Blight_Rounds.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
public/ngsp/NGSUIItemAssaultRifleMini.png
Normal file
BIN
public/ngsp/NGSUIItemAssaultRifleMini.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 357 B |
BIN
public/ngsp/NGSUIItemGunbladeMini.png
Normal file
BIN
public/ngsp/NGSUIItemGunbladeMini.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 346 B |
BIN
public/ngsp/NGSUIItemLauncherMini.png
Normal file
BIN
public/ngsp/NGSUIItemLauncherMini.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 413 B |
BIN
public/ngsp/NGSUIItemPotentialAbility.png
Normal file
BIN
public/ngsp/NGSUIItemPotentialAbility.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 579 B |
BIN
public/ngsp/NGSUIItemRodMini.png
Normal file
BIN
public/ngsp/NGSUIItemRodMini.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 367 B |
BIN
public/ngsp/NGSUIItemTalisMini.png
Normal file
BIN
public/ngsp/NGSUIItemTalisMini.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 363 B |
BIN
public/ngsp/NGSUIRarity1Star.png
Normal file
BIN
public/ngsp/NGSUIRarity1Star.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 249 B |
BIN
public/ngsp/NGSUIRarity2Star.png
Normal file
BIN
public/ngsp/NGSUIRarity2Star.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 270 B |
BIN
public/ngsp/NGSUIRarity3Star.png
Normal file
BIN
public/ngsp/NGSUIRarity3Star.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 268 B |
BIN
public/ngsp/NGSUIRarity4Star.png
Normal file
BIN
public/ngsp/NGSUIRarity4Star.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 273 B |
BIN
public/ngsp/NGSUIStatATKOutline.png
Normal file
BIN
public/ngsp/NGSUIStatATKOutline.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 523 B |
BIN
public/ngsp/UINGSItemPresetAbility.png
Normal file
BIN
public/ngsp/UINGSItemPresetAbility.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 436 B |
BIN
public/ngsp/UINGSItemSpecialAbility.png
Normal file
BIN
public/ngsp/UINGSItemSpecialAbility.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 394 B |
75
public/ngsp/class.html
Normal file
75
public/ngsp/class.html
Normal file
@ -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>
|
||||
79
public/ngsp/class_old.html
Normal file
79
public/ngsp/class_old.html
Normal file
@ -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>
|
||||
BIN
public/ngsp/d_global_bg_header.png
Normal file
BIN
public/ngsp/d_global_bg_header.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 418 KiB |
BIN
public/ngsp/fo.png
Normal file
BIN
public/ngsp/fo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 215 B |
BIN
public/ngsp/gl_main_bg.jpg
Normal file
BIN
public/ngsp/gl_main_bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
BIN
public/ngsp/image0-14.png
Normal file
BIN
public/ngsp/image0-14.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 208 KiB |
212
public/ngsp/index.html
Normal file
212
public/ngsp/index.html
Normal file
@ -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>
|
||||
BIN
public/ngsp/logo.png
Normal file
BIN
public/ngsp/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
public/ngsp/logo_sm.png
Normal file
BIN
public/ngsp/logo_sm.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
public/ngsp/logo_test.png
Normal file
BIN
public/ngsp/logo_test.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
public/ngsp/mel.png
Normal file
BIN
public/ngsp/mel.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 312 B |
BIN
public/ngsp/photon_barrier.png
Normal file
BIN
public/ngsp/photon_barrier.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 67 KiB |
BIN
public/ngsp/ra.png
Normal file
BIN
public/ngsp/ra.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 118 B |
50
public/ngsp/reset.css
Normal file
50
public/ngsp/reset.css
Normal file
@ -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;
|
||||
}
|
||||
BIN
public/ngsp/rifle_resurgir.png
Normal file
BIN
public/ngsp/rifle_resurgir.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
BIN
public/ngsp/rng.png
Normal file
BIN
public/ngsp/rng.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 157 B |
143
public/ngsp/search.html
Normal file
143
public/ngsp/search.html
Normal file
@ -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>
|
||||
BIN
public/ngsp/skilltree_div_overlay.png
Normal file
BIN
public/ngsp/skilltree_div_overlay.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
public/ngsp/skilltree_div_overlay2.png
Normal file
BIN
public/ngsp/skilltree_div_overlay2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 851 B |
BIN
public/ngsp/skilltree_req_lock.png
Normal file
BIN
public/ngsp/skilltree_req_lock.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 662 B |
BIN
public/ngsp/skilltree_req_unlock.png
Normal file
BIN
public/ngsp/skilltree_req_unlock.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 761 B |
817
public/ngsp/style.css
Normal file
817
public/ngsp/style.css
Normal file
@ -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;
|
||||
}
|
||||
634
public/ngsp/style_old.css
Normal file
634
public/ngsp/style_old.css
Normal file
@ -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;
|
||||
}
|
||||
BIN
public/ngsp/tec.png
Normal file
BIN
public/ngsp/tec.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 157 B |
BIN
public/ngsp/tr_bg.png
Normal file
BIN
public/ngsp/tr_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 653 B |
BIN
public/ngsp/ui_item_2010908.png
Normal file
BIN
public/ngsp/ui_item_2010908.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 31 KiB |
BIN
public/ngsp/we_bg.png
Normal file
BIN
public/ngsp/we_bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 557 B |
Loading…
x
Reference in New Issue
Block a user