Themes for diep.io is amazing tool for your style :)
// ==UserScript==
// @name Themes for Diep.io
// @version 2.1.2
// @description Themes for diep.io is amazing tool for your style :)
// @author @jaja.morgan
// @match https://diep.io/*
// @grant GM_addStyle
// @license MIT
// @namespace *://diep.io/
// ==/UserScript==
let editing;
let selected;
let cache = {};
const modo = document.createElement("div");
modo.id = "modo";
modo.style.display = "none";
modo.innerHTML = `
<div id="themes">
<div class="tool__header">
<h2 class="">Themes menu</h2>
</div>
<div class="themes__content"></div>
<div class="container-btns"><button class="green">Create theme</button>
<span>or</span>
<button class="purple">Import</button></div>
</div>
<div id="dashboard">
<div class="tool__header">
<h2>Dashboard</h2>
<span></span>
</div>
<div class="dashboard__content"></div>
<div class="container-btns">
<button class="green">Save</button>
<button class="red">Close</button>
</div>
</div>
`;
document.body.append(modo);
const logo = document.createElement("span");
logo.style =
"z-index:100;position: absolute; top:0; left: 75px; color: #ffffff69; font-size:15px";
logo.innerText = "Themes for diep.io :)";
document.body.append(logo);
const MENU_CONTENT = document.getElementsByClassName("themes__content")[0];
const THEMES = document.getElementById("themes");
const DASHBOARD = document.getElementById("dashboard");
DASHBOARD.style.display = "none";
DASHBOARD.setValues = (values) => {
[
...document
.querySelector(".dashboard__content")
.querySelectorAll(".option__value *"),
].map((el) => el.setValue(values));
};
DASHBOARD.getValues = () => {
return [
...document
.querySelector(".dashboard__content")
.querySelectorAll(".option__value *"),
].map((el) => el.getValue());
};
DASHBOARD.context = {
type: null,
theme: null,
};
class ThemeBtn {
constructor(parentTheme, type, name, parent) {
this.el = document.createElement("button");
this.el.className = type;
this.parentTheme = parentTheme;
if (type == "edit") {
this.el.innerText = "Edit";
this.el.onclick = () => {
if (editing) editing.classList.remove("editing");
editing = this.parentTheme.el;
editing.classList.add("editing");
callDashboard("edit", parentTheme);
cache = getUserData();
};
} else if (type == "export") {
this.el.innerText = "Export";
this.el.onclick = () => {
navigator.clipboard.writeText(
JSON.stringify({ [`${name}`]: getUserData()[`${name}`] })
);
};
} else {
this.el.innerText = "Delete";
this.el.onclick = () => {
if (confirm("Are you sure? The theme will be deleted.")) {
let db = getUserData();
delete db[`${name}`];
localStorage.setItem("users_themes", JSON.stringify(db));
parentTheme.el.remove();
cache = getUserData();
}
};
}
parent.append(this.el);
}
}
class Theme {
constructor(name, data) {
this.el = document.createElement("div");
this.el.className = "theme";
this.data = data;
this.name = name;
this.label = document.createElement("div");
this.label.className = "theme__name";
this.label.innerText = name;
this.label.onclick = () => {
if (selected) selected.classList.remove("activated");
DASHBOARD.setValues(this.data);
selected = this.el;
localStorage.setItem("selected_theme", JSON.stringify(this.name));
selected.classList.add("activated");
};
this.el.append(this.label);
let contBtn = document.createElement("div");
contBtn.className = "container-btns";
new ThemeBtn(this, "export", this.name, contBtn);
new ThemeBtn(this, "edit", this.name, contBtn);
new ThemeBtn(this, "delete", this.name, contBtn);
this.el.append(contBtn);
MENU_CONTENT.append(this.el);
cache = getUserData();
}
editData(values) {
let db = getUserData();
db[`${this.name}`] = values;
localStorage.setItem("users_themes", JSON.stringify(db));
this.data = values;
cache = getUserData();
}
}
class Input {
constructor(default_, cmd, isLast = false) {
this.default = default_;
this.cmd = cmd;
//this.cEl = document.createElement("div");
//this.vEl = document.createElement("div");
this.el = document.createElement("input");
this.isLast = isLast;
}
}
class ColorInput extends Input {
constructor(default_, cmd, isLast) {
super(default_, cmd, isLast);
this.el.type = "color";
this.el.value = this.default;
this.el.oninput = () => {
input.execute(`${this.cmd}${this.el.value.slice(1)}`);
};
this.el.getValue = () => {
return `${this.cmd}${this.el.value.slice(1)}`;
};
this.el.setValue = (values) => {
let found = false;
for (let value of values) {
if (value.includes(this.cmd)) {
found = true;
const RE = new RegExp(this.cmd);
const value_ = value.replace(RE, "");
this.el.value = "#" + value_;
break;
}
}
if (!found) this.el.value = this.default;
this.el.oninput();
};
}
}
class CheckBoxInput extends Input {
constructor(default_, cmd, isLast) {
super(default_, cmd, isLast);
this.el.type = "checkbox";
this.el.checked = this.default;
this.el.oninput = () => {
input.execute(`${this.cmd}${this.el.checked}`);
};
this.el.getValue = () => {
return `${this.cmd}${this.el.checked}`;
};
this.el.setValue = (values) => {
let found = false;
for (let value of values) {
if (value.includes(this.cmd)) {
found = true;
const RE = new RegExp(this.cmd);
const value_ = value.replace(RE, "");
if (value_ === "true") {
this.el.checked = true;
} else {
this.el.checked = false;
}
break;
}
}
if (!found) this.el.checked = this.default;
this.el.oninput();
};
}
}
class RangeInput extends Input {
constructor(default_, cmd, step, min, max, isLast) {
super(default_, cmd, isLast);
this.el.type = "range";
this.el.value = this.default;
this.el.step = step;
this.el.min = min;
this.el.max = max;
this.el.addEventListener("mousedown", (event) => {
event.stopImmediatePropagation();
});
this.el.oninput = () => {
input.execute(`${this.cmd}${this.el.value}`);
this.el.parentElement.parentElement
.querySelector(".option__label")
.onlabel(this.el.value);
};
this.el.getValue = () => {
return `${this.cmd}${this.el.value}`;
};
this.el.setValue = (values) => {
let found = false;
for (let value of values) {
if (value.includes(this.cmd)) {
found = true;
const RE = new RegExp(this.cmd);
this.el.value = value.replace(RE, "");
break;
}
}
if (!found) this.el.value = this.default;
this.el.oninput();
};
}
}
function callDashboard(type, theme) {
DASHBOARD.style.display = "block";
DASHBOARD.context.type = type;
DASHBOARD.context.theme = theme;
DASHBOARD.setValues(theme.data);
let header = DASHBOARD.querySelector("div span");
header.innerText = `editing "${theme.name}"`;
console.log(DASHBOARD.context);
}
function saveTheme(type, theme) {
var db = getUserData();
var values = [];
var name = "";
if (!db) db = [];
if (type == "create") {
name = prompt("Enter the name of this theme.");
if (!name) {
alert("ERR: Invalid volume!");
return false;
}
if (name.length > 25) {
alert("ERR: Invalid length name (must be 25-)!");
return false;
}
for (let t in db)
if (t == name)
return alert("ERR: There is already a theme with the same name!");
values = DASHBOARD.getValues();
db[`${name}`] = values;
localStorage.setItem("users_themes", JSON.stringify(db));
new Theme(name, values);
hideEl(DASHBOARD);
} else if (type == "edit") {
if (confirm("Are you sure? The theme will be overwritten.")) {
values = DASHBOARD.getValues();
theme.editData(values);
if (editing) editing.classList.remove("editing");
hideEl(DASHBOARD);
}
}
backToSTheme();
cache = getUserData();
}
function hideEl(el) {
if (el.style.display != "none") {
el.style.display = "none";
} else {
el.style.display = "";
}
}
function setDrag(el, el_child, lsName) {
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;
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() {
localStorage.setItem(
lsName,
JSON.stringify({
x: el.offsetLeft - newPosX + "px",
y: el.offsetTop - newPosY + "px",
})
);
el.classList.remove("dragableging");
document.removeEventListener("mousemove", elementMove);
document.removeEventListener("mouseup", stopElementMove);
}
}
function importJSON(text) {
let data;
let uDb = getUserData();
try {
console.log(text);
data = JSON.parse(text);
for (let theme in data) {
if (theme.length > 25) new Error("Incorrect name.");
for (let el of [...THEMES.getElementsByClassName("theme__name")]) {
if (el.innerText === theme) {
if (confirm(`${theme} will be overwrriten, are you sure?`)) {
el.parentElement.remove();
} else return;
}
}
new Theme(theme, data[`${theme}`]);
uDb[`${theme}`] = data[`${theme}`];
}
} catch (err) {
return alert("Something went wrong...");
}
localStorage.setItem("users_themes", JSON.stringify(uDb));
}
function init() {
if (!JSON.parse(localStorage.getItem("cho"))) {
alert("Press 'r' to show or hide menu in game.");
setTimeout(() => alert("Please dont forget to send feedback :v"), 30000);
localStorage.setItem("cho", "1");
localStorage.setItem(
"users_themes",
JSON.stringify({
classic: [],
dark: [
"ren_border_color 0x858585",
"ren_grid_color 0xffffff",
"ren_background_color 0x101010",
],
arras: [
"ren_score_bar_fill_color 0x8abc3f",
"ren_xp_bar_fill_color 0xefc74b",
"net_replace_color 0 0x484848",
"net_replace_color 1 0xa7a7af",
"net_replace_color 2 0x3ca4cb",
"net_replace_color 3 0x3ca4cb",
"net_replace_color 4 0xe03e41",
"net_replace_color 5 0xcc669c",
"net_replace_color 6 0x8abc3f",
"net_replace_color 8 0xefc74b",
"net_replace_color 9 0xe7896d",
"net_replace_color 10 0x8d6adf",
"net_replace_color 11 0xef99c3",
"net_replace_color 12 0xfdf380",
"net_replace_color 14 0xa7a7af",
"net_replace_color 15 0xe03e41",
"net_replace_color 17 0x726f6f",
],
neon: [
"ren_stroke_soft_color_intensity -100",
"ren_solid_background true",
"ren_stroke_soft_color true",
"ren_background_color 0x000000",
"ren_border_color 0xFFFFFF",
"ren_border_alpha 100",
"net_replace_color 0 0xFFFFFF",
"net_replace_color 1 0x010101",
"net_replace_color 2 0x000102",
"net_replace_color 3 0x000102",
"net_replace_color 4 0x020000",
"net_replace_color 5 0x020002",
"net_replace_color 6 0x000200",
"net_replace_color 7 0x000100",
"net_replace_color 8 0x010101",
"net_replace_color 9 0x010101",
"net_replace_color 10 0x010101",
"net_replace_color 11 0x0e0e0e",
"net_replace_color 12 0x020200",
"net_replace_color 13 0x010101",
"net_replace_color 14 0x010101",
"net_replace_color 15 0x020000",
"net_replace_color 16 0x010200",
"net_replace_color 17 0x000202",
],
})
);
}
window.addEventListener("keydown", (event) => {
if (["r", "R", "к", "К"].includes(event.key)) {
hideEl(modo);
}
});
document.getElementsByClassName("green")[0].onclick = () => {
callDashboard("create", { name: "new theme", data: [] });
};
document.getElementsByClassName("green")[1].onclick = () => {
saveTheme(DASHBOARD.context.type, DASHBOARD.context.theme);
};
document.getElementsByClassName("purple")[0].onclick = () => {
importJSON(prompt("Please paste here copied theme."));
};
document.getElementsByClassName("red")[0].onclick = () => {
if (confirm("Are you sure? The changes are unsaved!")) {
hideEl(DASHBOARD);
backToSTheme();
if (editing) editing.classList.remove("editing");
let header = DASHBOARD.querySelector("div span");
header.innerText = ``;
}
};
setDrag(
document.querySelector("#dashboard"),
[
document.querySelector("#dashboard .tool__header"),
document.querySelector("#dashboard > .container-btns"),
],
"dashboardPos"
);
setDrag(
document.querySelector("#themes"),
[
document.querySelector("#themes .tool__header"),
document.querySelector("#themes > .container-btns"),
],
"themesPos"
);
function addSection(header, options) {
const SECTION = document.createElement("div");
SECTION.className = "content__section";
SECTION.append(header, options);
document.getElementsByClassName("dashboard__content")[0].append(SECTION);
}
function createHeader(text) {
const HEADER = document.createElement("div");
HEADER.className = "section__header";
HEADER.innerText = text;
HEADER.onclick = function () {
const OPTIONS = HEADER.parentElement.querySelector(".section__options");
if (OPTIONS) {
if (OPTIONS.style.display != "none") {
HEADER.classList.add("hidden");
OPTIONS.style.display = "none";
} else {
HEADER.classList.remove("hidden");
OPTIONS.style.display = "";
}
}
};
return HEADER;
}
function createOption(text, html, isLast = false) {
const OPTION = document.createElement("div");
OPTION.className = "section__option";
const OPTION_LABEL = document.createElement("span");
OPTION_LABEL.className = "option__label";
OPTION_LABEL.innerText = text;
OPTION_LABEL.onlabel = (value) => {
OPTION_LABEL.innerText = `${text}: ${value}`;
};
const OPTION_VALUE = document.createElement("div");
OPTION_VALUE.className = "option__value";
OPTION_VALUE.append(html);
OPTION.append(OPTION_LABEL, OPTION_VALUE);
if (isLast) {
OPTION.style.marginBottom = "10px";
}
return OPTION;
}
const DB_OBJECT = {
"Global colors": {
"Map background": new ColorInput("#cdcdcd", "ren_background_color 0x"),
"Map border": new ColorInput("#000000", "ren_border_color 0x"),
"Map border alpha": new RangeInput(
0.1,
"ren_border_color_alpha ",
0.01,
0,
1
),
"Map grid": new ColorInput("#000000", "ren_grid_color 0x"),
"Map grid alpha": new RangeInput(
0.1,
"ren_grid_base_alpha ",
0.01,
0,
1,
true
),
"Minimap background": new ColorInput(
"#cdcdcd",
"ren_minimap_background_color 0x"
),
"Minimap border": new ColorInput(
"#555555",
"ren_minimap_border_color 0x",
true
),
"Soft colors": new CheckBoxInput(true, "ren_stroke_soft_color "),
"Soft stroke intensity": new RangeInput(
0.25,
"ren_stroke_soft_color_intensity ",
0.05,
null,
1,
true
),
Squares: new ColorInput("#ffe869", "net_replace_color 8 0x"),
Triangles: new ColorInput("#fc7677", "net_replace_color 9 0x"),
Pentagons: new ColorInput("#768dfc", "net_replace_color 10 0x"),
"Shiny poligons": new ColorInput(
"#89ff69",
"net_replace_color 7 0x",
true
),
Crashers: new ColorInput("#ff77dc", "net_replace_color 11 0x"),
"Neutral team": new ColorInput("#ffe869", "net_replace_color 12 0x"),
"Fallen Bosses": new ColorInput(
"#c0c0c0",
"net_replace_color 17 0x",
true
),
"Health bar": new ColorInput("#85e37d", "ren_health_fill_color 0x"),
"Health bar background": new ColorInput(
"#555555",
"ren_health_background_color 0x"
),
"EXP bar": new ColorInput("#ffde43", "ren_xp_bar_fill_color 0x"),
"Score bar": new ColorInput("#43ff91", "ren_score_bar_fill_color 0x"),
"EXP/Score/Scoreboard backgrounds": new ColorInput(
"#000000",
"ren_bar_background_color 0x",
true
),
"Barrels & etc": new ColorInput("#999999", "net_replace_color 1 0x"),
"Smasher & dominator bases": new ColorInput(
"#555555",
"net_replace_color 0 0x"
),
},
"TDM colors": {
"Blue team": new ColorInput("#00b1de", "net_replace_color 3 0x"),
"Red Team": new ColorInput("#f14e54", "net_replace_color 4 0x"),
"Purple team": new ColorInput("#be7ff5", "net_replace_color 5 0x"),
"Green team": new ColorInput("#00f46c", "net_replace_color 6 0x"),
},
"FFA colors": {
"Your body": new ColorInput("#00b1de", "net_replace_color 2 0x"),
"Enemies' bodies": new ColorInput("#f14e56", "net_replace_color 15 0x"),
"Summoned squares": new ColorInput("#fbc477", "net_replace_color 16 0x"),
"Maze walls": new ColorInput("#bbbbbb", "net_replace_color 14 0x"),
"Scoreboard bar": new ColorInput("#44ffa0", "net_replace_color 13 0x"),
},
Other: {
FPS: new CheckBoxInput(false, "ren_fps "),
"Players' names": new CheckBoxInput(true, "ren_names "),
"Health bar": new CheckBoxInput(true, "ren_health_bars "),
"Show health bar values": new CheckBoxInput(
false,
"ren_raw_health_values "
),
"Scoreboar names": new CheckBoxInput(true, "ren_scoreboard_names "),
Scoreboard: new CheckBoxInput(true, "ren_scoreboard "),
"Minimap viewport": new CheckBoxInput(false, "ren_minimap_viewport "),
UI: new CheckBoxInput(true, "ren_ui "),
//"UI scale": new RangeInput(1, "ren_ui_scale ", 0.01, 0, null, true),
"Pattern grid": new CheckBoxInput(true, "ren_pattern_grid "),
"Debug collisions": new CheckBoxInput(false, "ren_debug_collisions "),
},
};
for (let ctg in DB_OBJECT) {
const HEADER = createHeader(ctg);
const OPTIONS = document.createElement("div");
OPTIONS.className = "section__options";
for (let opt in DB_OBJECT[ctg]) {
const OPT_OBJECT = DB_OBJECT[ctg][opt];
OPTIONS.append(createOption(opt, OPT_OBJECT.el, OPT_OBJECT.isLast));
}
addSection(HEADER, OPTIONS);
}
let uDb = getUserData();
const selected = JSON.parse(localStorage.getItem("selected_theme"));
for (let t in uDb) {
let theme = uDb[`${t}`];
let sTheme = new Theme(t, theme);
if (!!selected) {
if (sTheme.name == selected) {
sTheme.label.onclick();
DASHBOARD.setValues(cache[`${selected}`]);
}
}
}
const dashboardPos = JSON.parse(localStorage.getItem("dashboardPos"));
const themesPos = JSON.parse(localStorage.getItem("themesPos"));
if (!!dashboardPos) {
DASHBOARD.style.left = dashboardPos.x;
DASHBOARD.style.top = dashboardPos.y;
}
if (!!themesPos) {
THEMES.style.left = themesPos.x;
THEMES.style.top = themesPos.y;
}
}
function backToSTheme() {
DASHBOARD.setValues(
cache[`${JSON.parse(localStorage.getItem("selected_theme"))}`]
);
}
function getUserData() {
return JSON.parse(localStorage.getItem("users_themes"));
}
const checking = setInterval(() => {
try {
if (input) {
clearInterval(checking);
init();
}
} catch (err) {}
}, 10);
GM_addStyle(`* {
outline: none;
margin: 0;
}
#modo {
font-family: "Montserrat", sans-serif !important;
font-size: 16px;
position: relative;
z-index: 777;
}
#modo #themes,
#modo #dashboard {
outline: none;
padding: 10px 15px;
border-radius: 6px;
position: absolute;
border: 2px #00ffff solid;
box-shadow: 4px 3px 20px 1px black;
background: #25282b;
opacity: 0.9;
color: white;
}
#modo .tool__header {
cursor: move !important;
display: flex;
justify-content: center;
position: relative;
margin-bottom: 20px;
text-align: center;
font-weight: bold;
}
.tool__header h2 {
font-size: 250%;
}
.tool__header span {
display: inline-block;
font-size: 75%;
bottom: -15px;
position: absolute;
}
/*
*
* THEMES MENU
*
*/
#themes {
top: 25px;
left: 10px;
overflow-y: auto;
overflow-x: hidden;
max-width: 700px;
padding: 150px 0px;
border: 2px solid aqua;
}
.themes__content {
margin: 20px 0;
width: 100%;
max-height: 200px;
overflow-y: auto;
padding-right: 10px;
}
.themes__content::-webkit-scrollbar {
width: 7.5px;
}
.themes__content::-webkit-scrollbar-track {
background-color: aqua;
border-radius: 5px;
}
.themes__content::-webkit-scrollbar-thumb {
background-color: #070707;
border-radius: 3px;
}
.theme {
position: relative;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0px 10px;
}
.theme .theme__name {
cursor: pointer;
word-wrap: break-word;
word-break: normal;
padding: 10px 0;
width: 150px;
}
.theme.editing,
.theme.editing.activated {
background-color: rgba(255, 166, 0, 0.5);
}
.theme.activated {
background-color: rgba(0, 255, 0, 0.53);
}
.theme:hover:not(.activated, .editing) {
transition-duration: 0.25s;
background-color: rgba(255, 255, 255, 0.1);
}
.theme button {
padding: 0px 10px;
font-weight: bold;
border: none;
color: white;
height: 25px;
cursor: pointer;
}
.theme button:hover {
filter: brightness(80%);
}
button.export {
margin-right: 10px;
background: purple;
}
button.edit {
margin-right: 10px;
background: rgb(240, 204, 0);
}
button.delete {
background: red;
}
.container-btns {
text-align: center;
display: flex;
justify-content: space-around;
align-items: center;
}
#themes > .container-btns {
cursor: move;
padding: 0 25px;
}
#dashboard > .container-btns {
cursor: move;
}
.container-btns .green {
padding: 10px 15px;
cursor: pointer;
font-size: 105%;
outline: none;
font-weight: bold;
background: transparent;
border: 1px solid rgb(0, 237, 0);
color: rgb(0, 237, 0);
transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.container-btns .green:hover {
color: #070707;
background: rgb(0, 237, 0);
transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.container-btns .purple {
padding: 10px 25px;
cursor: pointer;
font-size: 105%;
outline: none;
font-weight: bold;
background: transparent;
border: 1px solid purple;
color: purple;
transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.container-btns .purple:hover {
color: #070707;
background: purple;
transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.container-btns .red {
padding: 10px 25px;
cursor: pointer;
font-size: 105%;
outline: none;
font-weight: bold;
background: transparent;
border: 1px solid rgb(237, 0, 0);
color: rgb(237, 0, 0);
transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.container-btns .red:hover {
color: #070707;
background: rgb(237, 0, 0);
transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
/*
*
* DASHBOARD
*
*/
#dashboard {
top: 25px;
right: 25px;
width: 444px;
font-size: 20px;
}
#dashboard * {
font-weight: 600;
}
#dashboard input {
outline: none;
border: none;
margin: 0;
padding: 0;
cursor: pointer;
}
#dashboard input[type="color"],
#dashboard input[type="checkbox"] {
background: rgba(0, 0, 0, 0);
}
#dashboard ::-webkit-color-swatch {
border-radius: 50%;
}
#dashboard input[type="checkbox"] {
margin-top: 3px;
}
#dashboard input[type="number"] {
text-align: center;
width: 75px;
height: 10px;
border: rgba(0, 0, 0, 0) 2px solid;
color: white;
background: black;
padding: 3px 0px 3px 10px;
border-radius: 25px;
transition: border-color 0.3s;
}
#dashboard input[type="number"]:hover,
#dashboard input[type="number"]:focus {
border: #00ffffbf 2px solid;
}
#dashboard input::-webkit-color-swatch-wrapper {
margin-top: 2px;
outline: none;
padding: 0;
}
.dashboard__content {
max-height: 500px;
margin-bottom: 15px;
overflow-y: auto;
overflow-x: hidden;
}
.dashboard__content::-webkit-scrollbar {
width: 7.5px;
}
.dashboard__content::-webkit-scrollbar-track {
background: #00ffff;
border-radius: 5px;
}
.dashboard__content::-webkit-scrollbar-thumb {
background: #070707;
border-radius: 3px;
}
.content__section {
margin: 5px 5px 10px 5px;
}
.section__options {
margin-left: 20px;
font-size: 75%;
}
.section__header {
position: relative;
cursor: pointer;
user-select: none;
font-size: 110%;
display: inline-block;
margin-left: 25px;
margin-bottom: 5px;
font-weight: bold;
}
.section__header::before {
left: -20px;
position: absolute;
content: ">";
transform: rotate(90deg);
}
.section__header.hidden::before {
content: ">";
transform: rotate(0deg);
}
.section__option {
height: 25px;
width: 300px;
padding: 5px 300px 0px 15px;
border-left: 3px #255cd8 solid;
transition: 0.2s;
}
.section__option span {
margin-right: 5px;
}
.section__option input[type="color"] {
width: 15px;
height: 15px;
border: none;
padding: 0;
}
.section__option input[type="range"] {
width: 100px;
}
.section__option:hover {
background: #ffffff12;
}
.section__option:focus-within {
background: #ffffff26;
border-left: 3px orange solid;
}
.option__value {
float: right;
display: inline-block;
}
.option__label {
user-select: none;
display: inline-block;
}
#dashboard .ct {
padding: 10px 100px;
}
.header__btn {
outline: none;
border: none;
padding: 10px 20px;
cursor: pointer;
color: white;
font-weight: bold;
transition-property: background-color;
transition-duration: 0.3s;
}
.header__btn:hover {
background-color: rgba(0, 0, 0, 0.33) !important;
}
#db_switcher::after,
#db_switcher::before {
content: " - ";
}
#db_switcher.hidden::after,
#db_switcher.hidden::before {
content: " + ";
}
`);