forked from spacebar/SplatNet
fully implement new header
This commit is contained in:
parent
eabad49083
commit
788e23d190
9 changed files with 390 additions and 189 deletions
|
|
@ -1,44 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<div id="squid-container">
|
|
||||||
<canvas id="squid-canvas" width="1920" height="1080"></canvas>
|
|
||||||
</div>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<title>SplatNet - Splatoon's multiplayer service hub</title>
|
|
||||||
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
|
|
||||||
<link rel="stylesheet" href="../../styles.css" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="header-container"></div>
|
|
||||||
|
|
||||||
<div id="loading-overlay" class="loading-overlay">
|
|
||||||
<canvas id="loading-canvas" width="100" height="100"></canvas>
|
|
||||||
<div id="loading-text">Loading</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="content">
|
|
||||||
<img src="/assets/stageinfo.png" class="stage-info" alt="Stage Info" />
|
|
||||||
<div class="stage-info-text">
|
|
||||||
Use the stage information to guide your weapon strategy and battle strategy!
|
|
||||||
</div>
|
|
||||||
<div class="stages-container" id="stages-container"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
fetch("../../../header.html")
|
|
||||||
.then(res => res.text())
|
|
||||||
.then(html => {
|
|
||||||
document.getElementById("header-container").innerHTML = html;
|
|
||||||
})
|
|
||||||
.catch(err => console.error("Failed to load header:", err));
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script src="stages.js"></script>
|
|
||||||
</body>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
background-image: url("/assets/stage.png");
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</html>
|
|
||||||
62
header.html
62
header.html
|
|
@ -2,37 +2,71 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<title>sidebar</title>
|
<link rel="stylesheet" href="../style.css" />
|
||||||
<link rel="stylesheet" href="style.css" />
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<aside class="splatnet-sidebar">
|
<aside class="splatnet-sidebar">
|
||||||
|
<div class="splatnet-logo">
|
||||||
|
<img src="../assets/SplatNetLogo.png" alt="SplatNet">
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="menu-item friend">
|
<div class="menu-item friend">
|
||||||
<img class="bg" src="assets/default.png">
|
<img class="bg default" src="../assets/default.png">
|
||||||
<img class="icon" src="assets/svg/ui/ico_friendlist-320cb666486606280b494d4d4427451b2de2c9ad01f3332c286433c6f536db0a.svg">
|
<img class="bg hover-state" src="../assets/friendlist-selected.png">
|
||||||
<img class="label" src="assets/svg/text/menu/tx_friendlist-c96280213f50b1bc3c6380aa2bf191f6aaf4fd2da44a111bcbb1495444f23868.svg">
|
|
||||||
|
<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">
|
||||||
|
<img class="label hover-state" src="../assets/en/svg/text/menu/tx_friendlist_wht-b805b3146503cef16e75964333f58c2934bc3b6b6e1cd6e21172c85706a4deda.svg">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="menu-item rank">
|
<div class="menu-item rank">
|
||||||
<img class="bg" src="assets/default.png">
|
<img class="bg default" src="../assets/default.png">
|
||||||
<img class="icon" src="assets/svg/ui/ico_ranking-c89e570ab4d08a764d285e453423188b1976895b3feacf031e3f231b1506b441.svg">
|
<img class="bg hover-state" src="../assets/rank-selected.png">
|
||||||
<img class="label" src="assets/svg/text/menu/tx_ranking-8d97ac01b5b5c5b9244c8a4960bce79d33349175d141b06da0d835c71c8298e2.svg">
|
|
||||||
|
<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">
|
||||||
|
<img class="label hover-state" src="../assets/en/svg/text/menu/tx_ranking_wht-6b4dcbc2bb6f0d50c8e6180ec1da935b54c3b0cc761dd7700b26c7bd1b5ac9d4.svg">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="menu-item equipment">
|
<div class="menu-item equipment">
|
||||||
<img class="bg" src="assets/default.png">
|
<img class="bg default" src="../assets/default.png">
|
||||||
<img class="icon" src="assets/svg/ui/ico_equipment-40943361040a3d62c745a21d1a1fa95794c851f378e11334f2dc6c1cc81b4984.svg">
|
<img class="bg hover-state" src="../assets/equipment-selected.png">
|
||||||
<img class="label" src="assets/svg/text/menu/tx_equipment-8d59c4296bdafb1746824229dc9300ef6b140d4bda0bb0284a662903f20afe45.svg">
|
|
||||||
|
<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">
|
||||||
|
<img class="label hover-state" src="../assets/en/svg/text/menu/tx_equipment_wht-940f9bdfe17d321ac6bc737021f1b837ccace05cf0a14e24315e2a39d3d52a3e.svg">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="menu-item stage">
|
<div class="menu-item stage">
|
||||||
<img class="bg" src="assets/default.png">
|
<img class="bg default" src="../assets/default.png">
|
||||||
<img class="icon" src="assets/svg/ui/ico_stage-8dbc9e30d2dd9f99f4d1678fe53c4aaada7f7ff43929880a0c9f4e49f148f540.svg">
|
<img class="bg hover-state" src="../assets/stage-selected.png">
|
||||||
<img class="label" src="assets/svg/text/menu/tx_stageinfo-5e7f00d4a18387e2ee3065e97a475e23002554c3facc1dc6816cdb157c5985c4.svg">
|
|
||||||
|
<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">
|
||||||
|
<img class="label hover-state" src="../assets/en/svg/text/menu/tx_stageinfo_wht-5fa41cd0a2c7e72f93cb7ec6821d01af7f5d05e91b9dc16b002197e69fdf9440.svg">
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="twitterbgbox">
|
||||||
|
<div class="button-container">
|
||||||
|
<button class="box-btn twitter-btn">
|
||||||
|
<img src="../assets/en/svg/ui/ico_twitter-e7c60d7a77d2adc6a5ca9338e1c74d4a2378804fc979929a4fc9cad1127945f0.svg" alt="" class="btn-icon">
|
||||||
|
<img src="../assets/en/svg/text/menu/tx_twitter-47ce083cc4514ab6aeb75b7dd9f71ce89ddc54a18d930d90cf4df62047413831.svg" class="btn-label-img" alt="Unlink Twitter">
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button class="box-btn">
|
||||||
|
<img src="../assets/en/svg/text/menu/tx_logout-a35c74ff79b585667ae273fd9477f07a9d07c7fce8f5ef24f8f8f43988b5afcb.svg" class="btn-label-img" alt="Log Out">
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,9 @@
|
||||||
<link rel="stylesheet" href="policy.css" />
|
<link rel="stylesheet" href="policy.css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<div class="header">
|
||||||
|
<img src="/assets/SplatNetLogo.png" class="logo" alt="SplatNet Logo" />
|
||||||
|
</div>
|
||||||
<div id="squid-container">
|
<div id="squid-container">
|
||||||
<canvas id="squid-canvas" width="1920" height="1080"></canvas>
|
<canvas id="squid-canvas" width="1920" height="1080"></canvas>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -85,7 +88,5 @@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="policy.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -18,11 +18,28 @@ body {
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
display: block;
|
||||||
|
max-width: 280px;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 24px 20px;
|
padding: 24px 20px;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.policy-container {
|
.policy-container {
|
||||||
|
|
@ -85,13 +102,6 @@ body {
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
#header-container .logo,
|
|
||||||
#header-container .icon-header-logo {
|
|
||||||
display: block;
|
|
||||||
margin: 0 auto;
|
|
||||||
max-height: 120px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text-link {
|
.text-link {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
fetch("../header.html")
|
|
||||||
.then(res => res.text())
|
|
||||||
.then(html => {
|
|
||||||
document.getElementById("header-container").innerHTML = html;
|
|
||||||
})
|
|
||||||
.catch(err => console.error("Failed to load header:", err));
|
|
||||||
|
|
||||||
(function(){
|
|
||||||
ika_swim('div#ika_swim');
|
|
||||||
})();
|
|
||||||
44
stages/index.html
Normal file
44
stages/index.html
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<title>SplatNet - Splatoon's multiplayer service hub</title>
|
||||||
|
<link rel="icon" href="../favicon.ico" type="image/x-icon" />
|
||||||
|
<link rel="stylesheet" href="styles.css" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="squid-container">
|
||||||
|
<canvas id="squid-canvas" width="1920" height="1080"></canvas>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="loading-overlay" class="loading-overlay">
|
||||||
|
<canvas id="loading-canvas" width="100" height="100"></canvas>
|
||||||
|
<div id="loading-text">Loading</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="main-wrapper">
|
||||||
|
|
||||||
|
<div id="header-container"></div>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<img src="../assets/stageinfo.png" class="stage-info" alt="Stage Info" />
|
||||||
|
<div class="stage-info-text">
|
||||||
|
Use the stage information to guide your weapon strategy and battle strategy!
|
||||||
|
</div>
|
||||||
|
<div class="stages-container" id="stages-container"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
fetch("../header.html")
|
||||||
|
.then(res => res.text())
|
||||||
|
.then(html => {
|
||||||
|
document.getElementById("header-container").innerHTML = html;
|
||||||
|
})
|
||||||
|
.catch(err => console.error("Failed to load header:", err));
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script src="stages.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -1,5 +1,22 @@
|
||||||
const API_URL = "https://api.splatcord.ink/prod/s1rotations";
|
const API_URL = "https://api.splatcord.ink/prod/s1rotations";
|
||||||
|
|
||||||
|
function loadHeader() {
|
||||||
|
fetch("../../../header.html")
|
||||||
|
.then(res => res.text())
|
||||||
|
.then(html => {
|
||||||
|
const headerContainer = document.getElementById("header-container");
|
||||||
|
if (headerContainer) {
|
||||||
|
headerContainer.innerHTML = html;
|
||||||
|
|
||||||
|
const stageButton = headerContainer.querySelector('.menu-item.stage');
|
||||||
|
if (stageButton) {
|
||||||
|
stageButton.classList.add('active');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(err => console.error("Failed to load header:", err));
|
||||||
|
}
|
||||||
|
|
||||||
function stageNames(stages, lang = "en-US") {
|
function stageNames(stages, lang = "en-US") {
|
||||||
return stages.map(s => s.translatedNames[lang]);
|
return stages.map(s => s.translatedNames[lang]);
|
||||||
}
|
}
|
||||||
|
|
@ -237,5 +254,6 @@ async function renderStages() {
|
||||||
container.innerHTML = html;
|
container.innerHTML = html;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
loadHeader();
|
||||||
animateLoadingCanvas();
|
animateLoadingCanvas();
|
||||||
renderStages();
|
renderStages();
|
||||||
|
|
@ -1,69 +1,69 @@
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Splatoon1";
|
font-family: "Splatoon1";
|
||||||
src: url("./splatoon1.otf") format("opentype");
|
src: url("../splatoon1.otf") format("opentype");
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: "Regular";
|
font-family: "Regular";
|
||||||
src: url("./regular.otf") format("opentype");
|
src: url("../regular.otf") format("opentype");
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body {
|
html {
|
||||||
margin: 0;
|
height: 100%;
|
||||||
padding: 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
min-height: 100vh;
|
||||||
|
background-image: url("/assets/stage.png");
|
||||||
background-repeat: repeat;
|
background-repeat: repeat;
|
||||||
background-size: 800px 800px;
|
background-size: 800px 800px;
|
||||||
|
background-attachment: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* HEADER */
|
.main-wrapper {
|
||||||
.header {
|
|
||||||
position: relative;
|
|
||||||
height: 150px;
|
|
||||||
background-color: black;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
width: 100%;
|
||||||
align-items: flex-start;
|
background: transparent;
|
||||||
|
|
||||||
clip-path: polygon(
|
|
||||||
0% 0%, 100% 0%, 100% 80%,
|
|
||||||
90% 85%, 80% 75%, 70% 85%,
|
|
||||||
60% 75%, 50% 85%, 40% 75%,
|
|
||||||
30% 85%, 20% 75%, 10% 85%,
|
|
||||||
0% 80%
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
|
||||||
max-height: 120px;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* MAIN CONTENT */
|
|
||||||
.content {
|
.content {
|
||||||
|
flex-grow: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding-top: 24px;
|
padding: 40px 60px 0 0;
|
||||||
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stage-info {
|
.stage-info {
|
||||||
width: 65%;
|
width: 100%;
|
||||||
max-width: 600px;
|
max-width: 600px;
|
||||||
height: auto;
|
height: auto;
|
||||||
margin-bottom: 20px;
|
margin: 0 auto 20px auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stage-info-text {
|
||||||
|
margin: 6px auto 24px auto;
|
||||||
|
max-width: 600px;
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
font-family: "Regular", sans-serif;
|
||||||
|
font-size: 40px;
|
||||||
|
line-height: 1.4;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* STAGES */
|
|
||||||
.stages-container {
|
.stages-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 400px;
|
max-width: 500px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 32px;
|
gap: 32px;
|
||||||
|
|
@ -87,17 +87,6 @@ body {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.stage-info-text {
|
|
||||||
margin-top: 6px;
|
|
||||||
margin-bottom: 24px;
|
|
||||||
max-width: 600px;
|
|
||||||
text-align: left;
|
|
||||||
color: white;
|
|
||||||
font-family: "Regular", sans-serif;
|
|
||||||
font-size: 40px;
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stage-title {
|
.stage-title {
|
||||||
font-family: "Regular", sans-serif;
|
font-family: "Regular", sans-serif;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
201
style.css
201
style.css
|
|
@ -1,27 +1,77 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Splatoon1';
|
||||||
|
src: url('Splatoon1.otf') format('opentype');
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: 'RegularFont';
|
||||||
|
src: url('regular.otf') format('opentype');
|
||||||
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
.splatnet-sidebar {
|
||||||
margin: 0;
|
width: 330px;
|
||||||
background: black;
|
background-color: black;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0 24px 32px;
|
||||||
|
position: relative;
|
||||||
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.splatnet-sidebar {
|
.splatnet-sidebar::after {
|
||||||
width: 400px;
|
content: "";
|
||||||
padding: 30px 20px;
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: -30px;
|
||||||
|
width: 30px;
|
||||||
|
height: 100%;
|
||||||
|
background-image: url('assets/en/svg/ui/bg_menu_right_wave-c8ca7628fe4a702b3985b66f59c365748d266db743ec3a7a7e68211c81c74ec1.svg');
|
||||||
|
background-repeat: repeat-y;
|
||||||
|
background-size: contain;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.splatnet-sidebar::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
bottom: -28px;
|
||||||
|
left: 0;
|
||||||
|
width: 340px;
|
||||||
|
height: 30px;
|
||||||
|
background-image: url('assets/en/svg/ui/bg_menu_bottom_wave-03056ad08bac76d5bf1d0bc2895f30cda65a731d9d69789719da70a084be31cb.svg');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.splatnet-logo, .menu-item, .twitterbgbox {
|
||||||
|
position: relative;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.splatnet-logo {
|
||||||
|
width: 300px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.splatnet-logo img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-item {
|
.menu-item {
|
||||||
position: relative;
|
position: relative;
|
||||||
height: 72px;
|
height: 84px;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 8px;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 18px;
|
gap: 10px;
|
||||||
|
padding-left: 24px;
|
||||||
padding-left: 36px;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-item .bg {
|
.menu-item .bg {
|
||||||
|
|
@ -34,24 +84,133 @@ body {
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.menu-item .hover-state {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item:hover .default {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item:hover .hover-state {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
.menu-item .icon {
|
.menu-item .icon {
|
||||||
width: 42px;
|
width: 32px;
|
||||||
height: 42px;
|
height: 32px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-item .label {
|
.menu-item .label {
|
||||||
height: 32px;
|
height: 28px;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* this text renders smaller for some reason, hardcode fix!!!*/
|
|
||||||
.menu-item.equipment .label {
|
.menu-item.equipment .label {
|
||||||
height: 70px;
|
height: 55px;
|
||||||
margin-top: 0px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-item.friend .label { margin-top: 1px; }
|
.twitterbgbox {
|
||||||
.menu-item.rank { margin-top: 3px; }
|
width: 280px;
|
||||||
.menu-item.stage .label { margin-top: 3px; }
|
height: 170px;
|
||||||
|
background-color: #333333;
|
||||||
|
border-radius: 40px;
|
||||||
|
margin: 60px auto 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.twitterbgbox::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 60px;
|
||||||
|
height: 60px;
|
||||||
|
top: -20px;
|
||||||
|
left: -20px;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 50%;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.twitterbgbox::after {
|
||||||
|
content: "WWWWWWWWWWWW";
|
||||||
|
position: absolute;
|
||||||
|
top: 12px;
|
||||||
|
left: 48px;
|
||||||
|
color: white;
|
||||||
|
font-family: 'RegularFont', sans-serif;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 18px;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-container {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 15px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-btn {
|
||||||
|
width: 85%;
|
||||||
|
background-color: #919191;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
padding: 10px 0;
|
||||||
|
border-radius: 15px;
|
||||||
|
font-family: 'Splatoon1', sans-serif;
|
||||||
|
font-size: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-btn.twitter-btn {
|
||||||
|
background-color: #00a0f3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-icon {
|
||||||
|
width: 18px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue