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">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>sidebar</title>
|
||||
<link rel="stylesheet" href="style.css" />
|
||||
<link rel="stylesheet" href="../style.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<aside class="splatnet-sidebar">
|
||||
<div class="splatnet-logo">
|
||||
<img src="../assets/SplatNetLogo.png" alt="SplatNet">
|
||||
</div>
|
||||
|
||||
<div class="menu-item friend">
|
||||
<img class="bg" src="assets/default.png">
|
||||
<img class="icon" src="assets/svg/ui/ico_friendlist-320cb666486606280b494d4d4427451b2de2c9ad01f3332c286433c6f536db0a.svg">
|
||||
<img class="label" src="assets/svg/text/menu/tx_friendlist-c96280213f50b1bc3c6380aa2bf191f6aaf4fd2da44a111bcbb1495444f23868.svg">
|
||||
<img class="bg default" src="../assets/default.png">
|
||||
<img class="bg hover-state" src="../assets/friendlist-selected.png">
|
||||
|
||||
<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 class="menu-item rank">
|
||||
<img class="bg" src="assets/default.png">
|
||||
<img class="icon" src="assets/svg/ui/ico_ranking-c89e570ab4d08a764d285e453423188b1976895b3feacf031e3f231b1506b441.svg">
|
||||
<img class="label" src="assets/svg/text/menu/tx_ranking-8d97ac01b5b5c5b9244c8a4960bce79d33349175d141b06da0d835c71c8298e2.svg">
|
||||
<img class="bg default" src="../assets/default.png">
|
||||
<img class="bg hover-state" src="../assets/rank-selected.png">
|
||||
|
||||
<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 class="menu-item equipment">
|
||||
<img class="bg" src="assets/default.png">
|
||||
<img class="icon" src="assets/svg/ui/ico_equipment-40943361040a3d62c745a21d1a1fa95794c851f378e11334f2dc6c1cc81b4984.svg">
|
||||
<img class="label" src="assets/svg/text/menu/tx_equipment-8d59c4296bdafb1746824229dc9300ef6b140d4bda0bb0284a662903f20afe45.svg">
|
||||
<img class="bg default" src="../assets/default.png">
|
||||
<img class="bg hover-state" src="../assets/equipment-selected.png">
|
||||
|
||||
<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 class="menu-item stage">
|
||||
<img class="bg" src="assets/default.png">
|
||||
<img class="icon" src="assets/svg/ui/ico_stage-8dbc9e30d2dd9f99f4d1678fe53c4aaada7f7ff43929880a0c9f4e49f148f540.svg">
|
||||
<img class="label" src="assets/svg/text/menu/tx_stageinfo-5e7f00d4a18387e2ee3065e97a475e23002554c3facc1dc6816cdb157c5985c4.svg">
|
||||
<img class="bg default" src="../assets/default.png">
|
||||
<img class="bg hover-state" src="../assets/stage-selected.png">
|
||||
|
||||
<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 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>
|
||||
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,9 @@
|
|||
<link rel="stylesheet" href="policy.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<img src="/assets/SplatNetLogo.png" class="logo" alt="SplatNet Logo" />
|
||||
</div>
|
||||
<div id="squid-container">
|
||||
<canvas id="squid-canvas" width="1920" height="1080"></canvas>
|
||||
</div>
|
||||
|
|
@ -85,7 +88,5 @@
|
|||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="policy.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -18,11 +18,28 @@ body {
|
|||
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 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 24px 20px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.policy-container {
|
||||
|
|
@ -85,13 +102,6 @@ body {
|
|||
z-index: 0;
|
||||
}
|
||||
|
||||
#header-container .logo,
|
||||
#header-container .icon-header-logo {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
max-height: 120px;
|
||||
}
|
||||
|
||||
.text-link {
|
||||
color: inherit;
|
||||
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";
|
||||
|
||||
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") {
|
||||
return stages.map(s => s.translatedNames[lang]);
|
||||
}
|
||||
|
|
@ -237,5 +254,6 @@ async function renderStages() {
|
|||
container.innerHTML = html;
|
||||
}
|
||||
|
||||
loadHeader();
|
||||
animateLoadingCanvas();
|
||||
renderStages();
|
||||
|
|
@ -1,69 +1,69 @@
|
|||
@font-face {
|
||||
font-family: "Splatoon1";
|
||||
src: url("./splatoon1.otf") format("opentype");
|
||||
src: url("../splatoon1.otf") format("opentype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Regular";
|
||||
src: url("./regular.otf") format("opentype");
|
||||
src: url("../regular.otf") format("opentype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
min-height: 100vh;
|
||||
background-image: url("/assets/stage.png");
|
||||
background-repeat: repeat;
|
||||
background-size: 800px 800px;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
/* HEADER */
|
||||
.header {
|
||||
position: relative;
|
||||
height: 150px;
|
||||
background-color: black;
|
||||
.main-wrapper {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
|
||||
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%
|
||||
);
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.logo {
|
||||
max-height: 120px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
/* MAIN CONTENT */
|
||||
.content {
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding-top: 24px;
|
||||
padding: 40px 60px 0 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.stage-info {
|
||||
width: 65%;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
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 {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
max-width: 500px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
|
|
@ -87,17 +87,6 @@ body {
|
|||
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 {
|
||||
font-family: "Regular", sans-serif;
|
||||
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;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: black;
|
||||
.splatnet-sidebar {
|
||||
width: 330px;
|
||||
background-color: black;
|
||||
display: inline-block;
|
||||
padding: 0 24px 32px;
|
||||
position: relative;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.splatnet-sidebar {
|
||||
width: 400px;
|
||||
padding: 30px 20px;
|
||||
.splatnet-sidebar::after {
|
||||
content: "";
|
||||
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 {
|
||||
position: relative;
|
||||
height: 72px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
height: 84px;
|
||||
margin-bottom: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 18px;
|
||||
|
||||
padding-left: 36px;
|
||||
gap: 10px;
|
||||
padding-left: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.menu-item .bg {
|
||||
|
|
@ -34,24 +84,133 @@ body {
|
|||
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 {
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
z-index: 1;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.menu-item .label {
|
||||
height: 32px;
|
||||
height: 28px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* this text renders smaller for some reason, hardcode fix!!!*/
|
||||
.menu-item.equipment .label {
|
||||
height: 70px;
|
||||
margin-top: 0px;
|
||||
height: 55px;
|
||||
}
|
||||
|
||||
.menu-item.friend .label { margin-top: 1px; }
|
||||
.menu-item.rank { margin-top: 3px; }
|
||||
.menu-item.stage .label { margin-top: 3px; }
|
||||
.twitterbgbox {
|
||||
width: 280px;
|
||||
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