spacebar/SplatNet
spacebar/SplatNet
Watch
13
1
Fork
You've already forked SplatNet
 1
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

use spritesheet in header to reduce server net strain

Browse source
This commit is contained in:
kittentm 2026-02-20 05:50:17 +01:00
commit 9bf9947d28
7 changed files with 66 additions and 99 deletions
Download patch file Download diff file Expand all files Collapse all files

BIN
assets/en/ui/default.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 5.7 KiB

BIN
assets/en/ui/equipment-selected.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 9.4 KiB

BIN
assets/en/ui/friendlist-selected.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 9.4 KiB

BIN
assets/en/ui/rank-selected.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 8.8 KiB

BIN
assets/en/ui/stage-selected.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 9.3 KiB

27
header.html
View file

@ -8,14 +8,13 @@
<body>
<aside class="splatnet-sidebar">
<div class="splatnet-logo">
<img src="../assets/en/ui/SplatNetLogo.png" alt="SplatNet">
<div class="icon-header-logo">
</div>
<a href="/friend_list/" class="menu-link">
<div class="menu-item friend">
<img class="bg default" src="../assets/en/ui/default.png">
<img class="bg hover-state" src="../assets/en/ui/friendlist-selected.png">
<div class="menu-item icon-navi-friend friend">
<div class="bg default"></div>
<div class="bg hover-state"></div>
<img class="icon default" src="../assets/en/svg/ui/ico_friendlist-320cb666486606280b494d4d4427451b2de2c9ad01f3332c286433c6f536db0a.svg">
<img class="icon hover-state" src="../assets/en/svg/ui/ico_friendlist_wht-032a1f27d7f1529f75f86f8976877a12ce0ec18496e84fcb249a510129aa337c.svg">
<img class="label default" src="../assets/en/svg/text/menu/tx_friendlist-c96280213f50b1bc3c6380aa2bf191f6aaf4fd2da44a111bcbb1495444f23868.svg">
@ -24,9 +23,9 @@
</a>
<a href="/ranking/" class="menu-link">
<div class="menu-item rank">
<img class="bg default" src="../assets/en/ui/default.png">
<img class="bg hover-state" src="../assets/en/ui/rank-selected.png">
<div class="menu-item icon-navi-ranking rank">
<div class="bg default"></div>
<div class="bg hover-state"></div>
<img class="icon default" src="../assets/en/svg/ui/ico_ranking-c89e570ab4d08a764d285e453423188b1976895b3feacf031e3f231b1506b441.svg">
<img class="icon hover-state" src="../assets/en/svg/ui/ico_ranking_wht-526d8e4da303f0c9e77ee41ea8422d265f41280e2ffc6ffa763b35d96f8e51f1.svg">
<img class="label default" src="../assets/en/svg/text/menu/tx_ranking-8d97ac01b5b5c5b9244c8a4960bce79d33349175d141b06da0d835c71c8298e2.svg">
@ -35,9 +34,9 @@
</a>
<a href="/equipment/" class="menu-link">
<div class="menu-item equipment">
<img class="bg default" src="../assets/en/ui/default.png">
<img class="bg hover-state" src="../assets/en/ui/equipment-selected.png">
<div class="menu-item icon-navi-equipment equipment">
<div class="bg default"></div>
<div class="bg hover-state"></div>
<img class="icon default" src="../assets/en/svg/ui/ico_equipment-40943361040a3d62c745a21d1a1fa95794c851f378e11334f2dc6c1cc81b4984.svg">
<img class="icon hover-state" src="../assets/en/svg/ui/ico_equipment_wht-a9d551da5fa6a6792cb2bf8aca2938a107a983a13aef9f4fd020493e6412435e.svg">
<img class="label default" src="../assets/en/svg/text/menu/tx_equipment-8d59c4296bdafb1746824229dc9300ef6b140d4bda0bb0284a662903f20afe45.svg">
@ -46,9 +45,9 @@
</a>
<a href="/stages/" class="menu-link">
<div class="menu-item stage">
<img class="bg default" src="../assets/en/ui/default.png">
<img class="bg hover-state" src="../assets/en/ui/stage-selected.png">
<div class="menu-item icon-navi-stage stage">
<div class="bg default"></div>
<div class="bg hover-state"></div>
<img class="icon default" src="../assets/en/svg/ui/ico_stage-8dbc9e30d2dd9f99f4d1678fe53c4aaada7f7ff43929880a0c9f4e49f148f540.svg">
<img class="icon hover-state" src="../assets/en/svg/ui/ico_stage_wht-0093ccdcb4a0985c929e77571e4baf690f39def2f97b84a4cb4109e4a4ae10b4.svg">
<img class="label default" src="../assets/en/svg/text/menu/tx_stageinfo-5e7f00d4a18387e2ee3065e97a475e23002554c3facc1dc6816cdb157c5985c4.svg">

138
style.css
View file

@ -13,7 +13,7 @@
}
body {
margin-left: -5px;
margin-left: -5px;
}
.splatnet-sidebar {
@ -51,69 +51,78 @@ body {
z-index: 1;
}
.splatnet-logo, .menu-item, .twitterbgbox {
position: relative;
z-index: 2;
}
.splatnet-logo {
.icon-header-logo {
width: 300px;
margin: 0 auto;
}
.splatnet-logo img {
height: 138px;
margin: 0 auto 10px;
background-image: url('assets/en/ui-scf41f55f26-b7d4baf19342db013cc20bb9d1dd2bfddc4817ace5a1c86f5e14705cd514311f.png');
background-position: 0 -1134px;
background-repeat: no-repeat;
position: relative;
display: block;
width: 100%;
height: auto;
z-index: 2;
}
.menu-item {
position: relative;
height: 84px;
margin-bottom: 8px;
width: 266px;
height: 56px;
margin: 0 auto 8px;
display: flex;
align-items: center;
gap: 10px;
padding-left: 24px;
padding-left: 22px;
cursor: pointer;
z-index: 2;
text-decoration: none;
background-image: url('assets/en/ui-scf41f55f26-b7d4baf19342db013cc20bb9d1dd2bfddc4817ace5a1c86f5e14705cd514311f.png');
background-repeat: no-repeat;
background-position: 0 -1564px;
}
.menu-item .bg {
.icon-navi-friend:hover, .icon-navi-friend.active, .friend:hover, .friend.active { background-position: 0 -1508px; }
.icon-navi-ranking:hover, .icon-navi-ranking.active, .rank:hover, .rank.active { background-position: 0 -1620px; }
.icon-navi-equipment:hover, .icon-navi-equipment.active, .equipment:hover, .equipment.active { background-position: 0 -1452px; }
.icon-navi-stage:hover, .icon-navi-stage.active, .stage:hover, .stage.active { background-position: 0 -1676px; }
.menu-item img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
z-index: 0;
}
.menu-item .hover-state {
display: none;
}
.menu-item:hover .default {
display: none;
}
.menu-item:hover .hover-state {
display: block;
pointer-events: none;
z-index: 1;
}
.menu-item .icon {
left: 20px;
width: 32px;
height: 32px;
z-index: 1;
object-fit: contain;
}
.menu-item .label {
position: absolute;
left: 62px;
height: 28px;
top: 14px;
pointer-events: none;
z-index: 1;
}
.menu-item.equipment .label {
height: 55px;
.equipment .label {
height: 62px;
left: 60px;
top: -3px;
}
.menu-item .hover-state {
display: none !important;
}
.menu-item:hover .default,
.menu-item.active .default {
display: none !important;
}
.menu-item:hover .hover-state,
.menu-item.active .hover-state {
display: block !important;
}
.twitterbgbox {
@ -123,6 +132,7 @@ body {
border-radius: 40px;
margin: 60px auto 0;
position: relative;
z-index: 2;
}
.twitterbgbox::before {
@ -170,57 +180,15 @@ body {
font-family: 'Splatoon1', sans-serif;
font-size: 16px;
cursor: pointer;
transition: opacity 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
gap: 8px;
}
.box-btn.twitter-btn {
background-color: #00a0f3;
}
.box-btn.twitter-btn { background-color: #00a0f3; }
.btn-icon {
width: 18px;
.btn-icon, .btn-label-img {
height: 18px;
filter: brightness(0) invert(1);
}
.box-btn:hover {
opacity: 0.8;
}
.btn-label-img {
height: 18px;
width: auto;
display: block;
pointer-events: none;
filter: brightness(0) invert(1);
}
.box-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 0;
}
.box-btn .btn-label-img {
max-width: 80%;
}
.menu-item.active .hover-state {
display: block !important;
}
.menu-item.active .default {
display: none !important;
}
.menu-link {
text-decoration: none;
display: block;
color: inherit;
}