Let you see Diep.io online
目前為
// ==UserScript==
// @name Diep.io servers status online (beta version)
// @version 0.0.1
// @description Let you see Diep.io online
// @author @jaja.morgan
// @match https://diep.io/*
// @grant GM_addStyle
// @license MIT
// @namespace *://diep.io/
// ==/UserScript==
const hotKeys = ["t", "е"]; // show/hide hotKeys
const refreshTiming = 60; // in seconds
const SVGS = {
fra: `<svg
xmlns="http://www.w3.org/2000/svg"
id="flag-icons-de"
viewBox="0 0 512 512"
>
<path fill="#ffce00" d="M0 341.3h512V512H0z"></path>
<path fill="#000" d="M0 0h512v170.7H0z"></path>
<path fill="#d00" d="M0 170.7h512v170.6H0z"></path>
</svg>`,
atl: `<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-us" viewBox="0 0 512 512">
<g fill-rule="evenodd">
<g stroke-width="1pt">
<path fill="#bd3d44" d="M0 0h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z" transform="scale(3.9385)"></path>
<path fill="#fff" d="M0 10h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0zm0 20h247v10H0z" transform="scale(3.9385)"></path>
</g>
<path fill="#192f5d" d="M0 0h98.8v70H0z" transform="scale(3.9385)"></path>
<path fill="#fff" d="m8.2 3 1 2.8H12L9.7 7.5l.9 2.7-2.4-1.7L6 10.2l.9-2.7-2.4-1.7h3zm16.5 0 .9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0 .9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0 1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0 .9 2.8h2.9l-2.4 1.7 1 2.7L74 8.5l-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0 .9 2.8h2.9L92 7.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7 .9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0 1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0 .9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.5 0 .9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0 1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7 .8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 24.2l.9-2.7-2.4-1.7h3zm16.4 0 .9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0 .9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0 1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0 .9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0 .9 2.8h2.9L92 21.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7 .9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0 1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0 .9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0 .9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0 1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7 .8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 38.2l.9-2.7-2.4-1.7h3zm16.4 0 .9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0 .9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0 1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0 .9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0 .9 2.8h2.9L92 35.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7 .9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0 1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0 .9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0 .9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0 1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7 .8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 52.2l.9-2.7-2.4-1.7h3zm16.4 0 .9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0 .9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0 1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0 .9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0 .9 2.8h2.9L92 49.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm-74.1 7 .9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0 1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0 .9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0 .9 2.8h2.9l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7H65zm16.4 0 1 2.8H86l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm-74 7 .8 2.8h3l-2.4 1.7.9 2.7-2.4-1.7L6 66.2l.9-2.7-2.4-1.7h3zm16.4 0 .9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0 .9 2.8H45l-2.4 1.7 1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9zm16.4 0 1 2.8h2.8l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h3zm16.5 0 .9 2.8h2.9l-2.3 1.7.9 2.7-2.4-1.7-2.3 1.7.9-2.7-2.4-1.7h2.9zm16.5 0 .9 2.8h2.9L92 63.5l1 2.7-2.4-1.7-2.4 1.7 1-2.7-2.4-1.7h2.9z" transform="scale(3.9385)"></path>
</g>
</svg>`,
itm: `<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-jp" viewBox="0 0 512 512">
<defs>
<clipPath id="jp-a">
<path fill-opacity=".7" d="M177.2 0h708.6v708.7H177.2z"></path>
</clipPath>
</defs>
<g fill-rule="evenodd" stroke-width="1pt" clip-path="url(#jp-a)" transform="translate(-128) scale(.72249)">
<path fill="#fff" d="M0 0h1063v708.7H0z"></path>
<circle cx="523.1" cy="344.1" r="194.9" fill="#d30000" transform="translate(-59.7 -34.5) scale(1.1302)"></circle>
</g>
</svg>
`,
syd: ` <svg
xmlns="http://www.w3.org/2000/svg"
id="flag-icons-au"
viewBox="0 0 512 512"
>
<path
id="path598"
fill="#006"
stroke-width="1.3"
d="M0 0h512v512H0z"
></path>
<path
id="path606"
fill="#fff"
fill-rule="evenodd"
stroke-width="1.3"
d="M54.9 368.6 95.5 384l13.4-41.4 13.3 41.4 40.7-15.4-24.1 36.3 37.4 22.2-43.3 3.7 6 43.1-30-31.5-30 31.5 6-43-43.4-3.8L79 404.9m325 71.5-19 1.6 2.7 18.8-13-13.7-13 13.7L364 478l-18.8-1.6 16.3-9.6L351 451l17.7 6.7 5.8-18 5.7 18L398 451l-10.4 15.8m16.2-270.4L385 198l2.6 18.8-13-13.7-13 13.7L364 198l-18.8-1.6 16.3-9.6L351 171l17.7 6.7 5.8-18 5.7 18L398 171l-10.4 15.8m-88.8 123.4-18.8 1.6 2.6 18.7-13-13.7-13 13.7 2.5-18.7-18.8-1.6 16.3-9.7-10.5-15.7 17.7 6.7 5.8-18 5.7 18 17.7-6.7-10.4 15.7M497 282.2l-18.8 1.6 2.6 18.7-13-13.7-13 13.7 2.5-18.7-18.8-1.6 16.3-9.7-10.5-15.7 17.7 6.7 5.8-18 5.8 18 17.6-6.7-10.4 15.7M416.6 355l-10.3 6.4 2.9-11.8-9.3-7.8 12-.9 4.7-11.2L421 341l12.1 1-9.2 7.7 2.9 11.8"
></path>
<g id="g1582" transform="scale(.5)">
<path id="path1560" fill="#006" d="M0 0h512v512H0z"></path>
<path
id="path1562"
fill="#fff"
d="M512 0v64L322 256l190 187v69h-67L254 324 68 512H0v-68l186-187L0 74V0h62l192 188L440 0z"
></path>
<path
id="path1564"
fill="#c8102e"
d="m184 324 11 34L42 512H0v-3zm124-12 54 8 150 147v45zM512 0 320 196l-4-44L466 0zM0 1l193 189-59-8L0 49z"
></path>
<path
id="path1566"
fill="#fff"
d="M176 0v512h160V0zM0 176v160h512V176z"
></path>
<path
id="path1568"
fill="#c8102e"
d="M0 208v96h512v-96zM208 0v512h96V0z"
></path>
</g>
</svg>`,
};
const INDICES = {
regions: {
fra: 1,
atl: 2,
itm: 3,
syd: 4,
},
gameModes: {
ffa: 1,
teams: 2,
"4teams": 3,
maze: 4,
event: 5,
sandbox: 6,
},
};
let lobbiesArr = [];
let inRefreshing = false;
const user_options = {
sortMode: "region",
hideRegions: [],
hideModes: ["sandbox"],
};
const list = document.createElement("div");
list.id = "list";
list.style.display = "none";
list.innerHTML = `<div class="list__headers">
<h3 class="lobby__region sortable">Region</h3>
<h3 class="lobby__name">IP</h3>
<h3 class="lobby__onl sortable">Players</h3>
<h3 class="lobby__gm sortable">Game Mode</h3>
</div>
<div class="list__container">
<div class="list__lobbies">
<div class="scanning">
<div>SCANNING ALL FREQUENCIES</div>
<div class="wrapper">
<span class="circle circle-1"></span>
<span class="circle circle-2"></span>
<span class="circle circle-3"></span>
<span class="circle circle-4"></span>
<span class="circle circle-5"></span>
<span class="circle circle-6"></span>
<span class="circle circle-7"></span>
<span class="circle circle-8"></span>
<span class="circle circle-9"></span>
<span class="circle circle-10"></span>
</div>
</div>
</div>
<div class="list__options">
<h3>Options</h3>
<ul class="options__filters"></ul>
<ul class="options__buttons">
<button class="gray-btn" disable>Connect</button>
<button class="yellow-btn">Refresh</button>
</ul>
</div>
</div>`;
document.body.append(list);
createCB("showFra", "Show Frankfurt:", true);
createCB("showAtl", "Show Atlanta:", true);
createCB("showItm", "Show Osaka:", true);
createCB("showSyd", "Show Sydney:", true);
setDraggable(list, [list.querySelector(".list__headers")]);
const list_header_players = document.body.querySelector(
".list__headers .lobby__onl"
);
const list_header_region = document.body.querySelector(
".list__headers .lobby__region"
);
const list_header_gamemode = document.body.querySelector(
".list__headers .lobby__gm"
);
list_header_players.onclick = () => {
if (user_options.sortMode !== "p_increase") {
user_options.sortMode = "p_increase";
} else {
user_options.sortMode = "p_decrease";
}
sort();
};
list_header_region.onclick = () => {
if (user_options.sortMode !== "regions") {
user_options.sortMode = "regions";
sort();
}
};
list_header_gamemode.onclick = () => {
if (user_options.sortMode !== "gms") {
user_options.sortMode = "gms";
sort();
}
};
const list_lobbies = document.body.querySelector(".list__lobbies");
const scanning = document.body.querySelector(".list__lobbies .scanning");
document.addEventListener("keydown", (e) => {
if (hotKeys.includes(e.key)) {
if (list.style.display == "none") {
list.style.display = "inline-block";
} else list.style.display = "none";
}
});
checking();
let chkInt = setInterval(() => {
checking();
}, refreshTiming * 1000);
setInterval(() => {
[...list_lobbies.children].forEach((e) => {
if (e.classList.contains(".lobby__name")) {
if (e.querySelector(".lobby__name").innerText === lobby_ip) {
e.classList.add("active");
} else e.className = "lobby";
}
});
}, 1000);
const refresh_btn = document.body.querySelector("button.yellow-btn");
refresh_btn.onclick = () => {
if (inRefreshing) return;
clearInterval(chkInt);
checking();
chkInt = setInterval(() => {
checking();
}, refreshTiming * 1000);
};
function createLobby(r_name, lobby_data) {
const lobby = document.createElement("div");
lobby.classList = "lobby";
const lobby_region = document.createElement("h4");
lobby_region.classList = "lobby__region";
lobby_region.innerHTML = SVGS[`${r_name}`];
lobby.region = r_name;
const lobby_name = document.createElement("h4");
lobby_name.classList = "lobby__name";
lobby_name.innerText = `${lobby_data.ip}`;
const lobby_onl = document.createElement("h4");
lobby_onl.classList = "lobby__onl";
lobby_onl.innerText = `${lobby_data.numPlayers}`;
lobby.plrsCount = lobby_data.numPlayers;
const lobby_gm = document.createElement("h4");
lobby_gm.classList = "lobby__gm";
lobby_gm.innerText = `${lobby_data.gamemode}`;
lobby.mode = lobby_data.gamemode;
lobby.append(lobby_region, lobby_name, lobby_onl, lobby_gm);
return lobby;
}
function createCB(id, text, isChecked = false) {
let ln = document.createElement("line");
let cb = document.createElement("input");
cb.type = "checkbox";
cb.id = id;
cb.checked = isChecked;
let lb = document.createElement("label");
lb.htmlFor = id;
lb.className = "custom-cb";
lb.innerText = text;
switch (id) {
case "showFra":
cb.onclick = () => {
if (!cb.checked) {
user_options.hideRegions.push("fra");
} else
user_options.hideRegions = user_options.hideRegions.filter(
(e) => e !== "fra"
);
sort();
};
break;
case "showAtl":
cb.onclick = () => {
if (!cb.checked) {
user_options.hideRegions.push("atl");
} else
user_options.hideRegions = user_options.hideRegions.filter(
(e) => e !== "atl"
);
sort();
};
break;
case "showItm":
cb.onclick = () => {
if (!cb.checked) {
user_options.hideRegions.push("itm");
} else
user_options.hideRegions = user_options.hideRegions.filter(
(e) => e !== "itm"
);
sort();
};
break;
case "showSyd":
cb.onclick = () => {
if (!cb.checked) {
user_options.hideRegions.push("syd");
} else
user_options.hideRegions = user_options.hideRegions.filter(
(e) => e !== "syd"
);
sort();
};
break;
}
ln.append(cb, lb);
document.body.querySelector(".list__options ul").append(ln);
}
async function getData() {
try {
const response = await fetch("https://lb.diep.io/api/lb/pc");
return await response.json();
} catch (e) {
console.error(e);
}
}
async function checking() {
[...list_lobbies.children].forEach((e) => {
if (e.classList.contains("lobby")) e.remove();
});
scanning.style.display = "block";
lobbiesArr = [];
inRefreshing = true;
const data = await getData();
scanning.style.display = "none";
inRefreshing = false;
for (const region of data.regions) {
for (const lobby of region.lobbies) {
lobbiesArr.push(createLobby(region.region, lobby));
}
}
sort();
}
function sort() {
[...list_lobbies.children].forEach((e) => {
if (e.classList.contains("lobby")) e.remove();
});
if (user_options.sortMode === "p_increase") {
lobbiesArr
.sort((a, b) => {
return a.plrsCount - b.plrsCount;
})
.reverse();
} else if (user_options.sortMode === "p_decrease") {
lobbiesArr.sort((a, b) => {
return a.plrsCount - b.plrsCount;
});
} else if (user_options.sortMode === "regions") {
lobbiesArr.sort((a, b) => {
return INDICES.regions[`${a.region}`] - INDICES.regions[`${b.region}`];
});
} else if (user_options.sortMode === "gms") {
lobbiesArr.sort((a, b) => {
return INDICES.gameModes[`${a.mode}`] - INDICES.gameModes[`${b.mode}`];
});
}
lobbiesArr.forEach((e) => {
if (user_options.hideModes.includes(e.mode)) return;
if (user_options.hideRegions.includes(e.region)) return;
list_lobbies.append(e);
});
}
function setDraggable(el, el_child) {
var newPosX = 0,
newPosY = 0,
MousePosX = 0,
MousePosY = 0;
if (el_child) {
el_child.forEach((e) => e.addEventListener("mousedown", MouseDown));
} else el.addEventListener("mousedown", MouseDown);
function MouseDown(mouseDown) {
MousePosX = mouseDown.pageX;
MousePosY = mouseDown.pageY;
if (el_child) {
el_child.forEach((e) => e.classList.add("dragableging"));
} else el.classList.add("dragableging");
document.addEventListener("mousemove", elementMove);
document.addEventListener("mouseup", stopElementMove);
}
function elementMove(mouseMove) {
newPosX = MousePosX - mouseMove.pageX;
newPosY = MousePosY - mouseMove.pageY;
MousePosX = mouseMove.pageX;
MousePosY = mouseMove.pageY;
el.style.top = el.offsetTop - newPosY + "px";
el.style.left = el.offsetLeft - newPosX + "px";
}
function stopElementMove() {
if (el_child) {
el_child.forEach((e) => e.classList.remove("dragableging"));
} else el.classList.remove("dragableging");
document.removeEventListener("mousemove", elementMove);
document.removeEventListener("mouseup", stopElementMove);
}
}
GM_addStyle(`* {
outline: none;
border: none;
margin: 0;
padding: 0;
}
#list {
position: absolute;
z-index: 999;
top: 50px;
left: 50%;
transform: translateX(-50%);
color: white;
font-family: "Ubuntu", sans-serif;
font-size: 14px;
background-color: #050c0a;
padding: 0 5px;
user-select: none;
box-shadow: #050c0a8a 0px 0px 2px 6px;
}
.list__headers {
background-color: #050c0a;
color: #5b9e7d;
display: flex;
justify-content: space-between;
align-items: center;
text-align: center;
cursor: grab;
gap: 25px;
padding: 15px;
max-width: 575px;
}
.sortable {
cursor: pointer;
}
.list__container {
display: flex;
justify-content: space-between;
align-items: flex-start;
text-align: center;
padding: 3px 3px 8px 3px;
}
/*
* lobbies
*/
.list__lobbies {
position: relative;
background-color: #081c1c;
padding-right: 4px;
overflow-y: scroll;
display: flex;
flex-direction: column;
align-items: center;
min-width: 616px;
height: 395px;
}
.list__lobbies .scanning {
display: none;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-75%);
position: absolute;
background-color: #153832;
color: #8addd3;
font-size: 28px;
padding: 5px 10px;
width: 420px;
}
.circle {
display: inline-block;
width: 10px;
height: 10px;
opacity: 0;
border-radius: 3px;
background-color: #8addd3;
animation: loading 1.5s cubic-bezier(0.8, 0.5, 0.2, 1.4) infinite;
position: relative;
}
@keyframes loading {
0% {
opacity: 0;
transform: scale(0);
}
40% {
opacity: 0;
transform: scale(0);
}
60% {
opacity: 1;
transform: scale(1);
}
80% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0);
}
}
.circle-1 {
animation-delay: 0s;
}
.circle-2 {
animation-delay: 0.05s;
}
.circle-3 {
animation-delay: 0.1s;
}
.circle-4 {
animation-delay: 0.15s;
}
.circle-5 {
animation-delay: 0.2s;
}
.circle-6 {
animation-delay: 0.25s;
}
.circle-7 {
animation-delay: 0.3s;
}
.circle-8 {
animation-delay: 0.35s;
}
.circle-9 {
animation-delay: 0.4s;
}
.circle-10 {
animation-delay: 0.5s;
}
.list__lobbies::-webkit-scrollbar {
background-color: #0a2120;
width: 8px;
padding: 1px;
}
.list__lobbies::-webkit-scrollbar-thumb {
background-color: #f3fdfd;
border-radius: 1px;
}
.lobby {
background-color: #153832;
color: #8addd3;
padding: 5px 15px;
border-radius: 5px;
border: #375552 2px solid;
margin-bottom: -1px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 25px;
min-width: 500px;
}
.lobby.active {
background-color: #315a56;
}
.lobby:hover {
background-color: #2c6b54;
transition: 0.05s;
}
.chosen {
background-color: #325c57;
}
.lobby svg {
align-items: center;
border-radius: 50%;
height: 20px;
width: auto;
}
.lobby__region {
width: 50px;
}
.lobby__name {
width: 250px;
}
.lobby .lobby__name {
user-select: text;
}
.lobby__onl {
width: 75px;
}
.lobby__gm {
width: 120px;
}
/*
* options
*/
.list__options {
font-weight: bolder;
background-color: #133532;
color: #69c49f;
height: 395px;
width: 250px;
}
.list__options h3 {
font-size: 28px;
margin: 10px 10px 30px 10px;
}
.list__options ul {
display: flex;
flex-direction: column;
justify-content: space-between;
/* align-items: flex-start; */
text-align: left;
margin: 0 10px;
}
ul.options__filters {
margin-bottom: 100px;
}
.list__options line {
position: relative;
width: 100%;
font-size: 14px;
margin-bottom: 17.5px;
}
.list__options input {
position: absolute;
opacity: 0;
}
.custom-cb::before {
content: "";
cursor: pointer;
top: 50%;
right: 0;
transform: translateY(-50%);
position: absolute;
background-color: transparent;
border: #69c49f 2px solid;
width: 20px;
height: 20px;
}
.custom-cb::after {
content: "";
cursor: pointer;
opacity: 0;
top: 50%;
right: 4.5px;
transform: translateY(-50%);
position: absolute;
background-color: #69c49f;
width: 15px;
height: 15px;
}
.list__options input:checked + .custom-cb::after {
opacity: 1;
transition: 0.05s;
}
/*
* buttons
*/
button {
position: relative;
font-size: 24px;
font-weight: bold;
color: #bbc9c9;
margin: 5px 0px;
padding: 3px 0;
border-radius: 7.5px;
cursor: pointer;
}
button.gray-btn {
background-color: #343434;
cursor: not-allowed;
filter: brightness(0.5);
}
button.yellow-btn {
background-color: #4f4917;
}
button.yellow-btn:hover {
background-color: #c4b73b;
box-shadow: inset #4f4917 0px 0px 12px 12px;
}
button.yellow-btn:active {
background-color: #dfcc20;
box-shadow: inset #4f4917 0px 0px 10px 7px;
}
.dragableging {
cursor: grabbing;
}`);