mirror of
https://github.com/ND-Framework/ND_Core.git
synced 2026-08-17 05:56:01 +01:00
feat: admin group panel
This commit is contained in:
Andyyy7666
13
ui/index.html
Normal file
13
ui/index.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<script type="module" src="main.js" defer></script>
|
||||
<title>Group Management</title>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
283
ui/main.js
Normal file
283
ui/main.js
Normal file
@@ -0,0 +1,283 @@
|
||||
import van from "https://cdn.jsdelivr.net/gh/vanjs-org/van/public/van-1.5.3.min.js";
|
||||
import { nuiMessage } from "./modules/listener.js";
|
||||
import { fetchCallback } from "./modules/fetch.js";
|
||||
import { closeUI, setOpen } from "./modules/close.js";
|
||||
|
||||
const { div, h1, h2, h3, p, button, input, label, span, i: icon } = van.tags;
|
||||
|
||||
let groups = [];
|
||||
let container = null;
|
||||
let editPanel = null;
|
||||
let currentEdit = null;
|
||||
|
||||
function createGroupCard(group) {
|
||||
const card = div({ class: "group-card", onclick: () => openEditPanel(group) },
|
||||
div({ class: "group-card-header" },
|
||||
h3(group.label),
|
||||
span({ class: "group-name" }, group.name)
|
||||
),
|
||||
div({ class: "group-card-tags" },
|
||||
group.isJob ? span({ class: "tag tag-job" }, "Job") : null,
|
||||
span({ class: "tag tag-ranks" }, `${group.ranks.length} rank${group.ranks.length !== 1 ? "s" : ""}`)
|
||||
)
|
||||
);
|
||||
return card;
|
||||
}
|
||||
|
||||
function renderGroupList() {
|
||||
if (!container) return;
|
||||
container.innerHTML = "";
|
||||
|
||||
const header = div({ class: "list-header" },
|
||||
h1("Group Management"),
|
||||
button({ class: "btn btn-create", onclick: () => openCreatePanel() },
|
||||
icon({ class: "fa-solid fa-plus" }),
|
||||
" New Group"
|
||||
)
|
||||
);
|
||||
container.appendChild(header);
|
||||
|
||||
const searchRow = div({ class: "search-row" },
|
||||
input({ class: "search-input", type: "text", placeholder: "Search groups...", oninput: (e) => filterGroups(e.target.value) })
|
||||
);
|
||||
container.appendChild(searchRow);
|
||||
|
||||
const grid = div({ class: "group-grid", id: "group-grid" });
|
||||
groups.forEach(g => grid.appendChild(createGroupCard(g)));
|
||||
container.appendChild(grid);
|
||||
}
|
||||
|
||||
function filterGroups(query) {
|
||||
const grid = document.getElementById("group-grid");
|
||||
if (!grid) return;
|
||||
grid.innerHTML = "";
|
||||
const lower = query.toLowerCase();
|
||||
const filtered = groups.filter(g => g.name.toLowerCase().includes(lower) || g.label.toLowerCase().includes(lower));
|
||||
filtered.forEach(g => grid.appendChild(createGroupCard(g)));
|
||||
}
|
||||
|
||||
function createRankRow(rank, index, ranksList) {
|
||||
const row = div({ class: "rank-row", "data-index": index },
|
||||
div({ class: "rank-order" },
|
||||
button({ class: "btn-icon", title: "Move up", onclick: () => moveRank(ranksList, index, -1) },
|
||||
icon({ class: "fa-solid fa-chevron-up" })
|
||||
),
|
||||
span({ class: "rank-weight" }, String(rank.weight)),
|
||||
button({ class: "btn-icon", title: "Move down", onclick: () => moveRank(ranksList, index, 1) },
|
||||
icon({ class: "fa-solid fa-chevron-down" })
|
||||
)
|
||||
),
|
||||
input({ class: "rank-label-input", type: "text", value: rank.label, placeholder: "Rank label", oninput: (e) => {
|
||||
ranksList[index].label = e.target.value;
|
||||
}}),
|
||||
div({ class: "rank-boss-toggle" },
|
||||
label({ class: "checkbox-label" },
|
||||
input({ type: "checkbox", checked: rank.isBoss, onchange: (e) => {
|
||||
ranksList[index].isBoss = e.target.checked;
|
||||
}}),
|
||||
" Boss"
|
||||
)
|
||||
),
|
||||
button({ class: "btn-icon btn-danger", title: "Delete rank", onclick: () => {
|
||||
ranksList.splice(index, 1);
|
||||
recalculateWeights(ranksList);
|
||||
rerenderRanks(ranksList);
|
||||
}},
|
||||
icon({ class: "fa-solid fa-trash" })
|
||||
)
|
||||
);
|
||||
return row;
|
||||
}
|
||||
|
||||
function moveRank(ranksList, index, direction) {
|
||||
const newIndex = index + direction;
|
||||
if (newIndex < 0 || newIndex >= ranksList.length) return;
|
||||
const temp = ranksList[index];
|
||||
ranksList[index] = ranksList[newIndex];
|
||||
ranksList[newIndex] = temp;
|
||||
recalculateWeights(ranksList);
|
||||
rerenderRanks(ranksList);
|
||||
}
|
||||
|
||||
function recalculateWeights(ranksList) {
|
||||
for (let i = 0; i < ranksList.length; i++) {
|
||||
ranksList[i].weight = i + 1;
|
||||
}
|
||||
}
|
||||
|
||||
function rerenderRanks(ranksList) {
|
||||
const ranksContainer = document.getElementById("ranks-container");
|
||||
if (!ranksContainer) return;
|
||||
ranksContainer.innerHTML = "";
|
||||
ranksList.forEach((rank, idx) => {
|
||||
ranksContainer.appendChild(createRankRow(rank, idx, ranksList));
|
||||
});
|
||||
}
|
||||
|
||||
function openEditPanel(group) {
|
||||
currentEdit = JSON.parse(JSON.stringify(group));
|
||||
showEditPanel(false);
|
||||
}
|
||||
|
||||
function openCreatePanel() {
|
||||
currentEdit = { name: "", label: "", isJob: false, ranks: [] };
|
||||
showEditPanel(true);
|
||||
}
|
||||
|
||||
function showEditPanel(isNew) {
|
||||
if (!editPanel) return;
|
||||
editPanel.innerHTML = "";
|
||||
editPanel.classList.add("open");
|
||||
|
||||
const ranksList = currentEdit.ranks.map(r => ({ ...r }));
|
||||
|
||||
const panelContent = div({ class: "edit-content" },
|
||||
div({ class: "edit-header" },
|
||||
h2(isNew ? "Create Group" : "Edit Group"),
|
||||
button({ class: "btn-icon", onclick: () => closeEditPanel() },
|
||||
icon({ class: "fa-solid fa-xmark" })
|
||||
)
|
||||
),
|
||||
div({ class: "edit-form" },
|
||||
div({ class: "form-group" },
|
||||
label("Name (unique key)"),
|
||||
input({
|
||||
class: "form-input",
|
||||
type: "text",
|
||||
value: currentEdit.name,
|
||||
disabled: !isNew,
|
||||
placeholder: "e.g. polis",
|
||||
oninput: (e) => { currentEdit.name = e.target.value.toLowerCase().replace(/[^a-z0-9_-]/g, ""); e.target.value = currentEdit.name; }
|
||||
})
|
||||
),
|
||||
div({ class: "form-group" },
|
||||
label("Label"),
|
||||
input({
|
||||
class: "form-input",
|
||||
type: "text",
|
||||
value: currentEdit.label,
|
||||
placeholder: "e.g. Polis",
|
||||
oninput: (e) => { currentEdit.label = e.target.value; }
|
||||
})
|
||||
),
|
||||
div({ class: "form-group form-row" },
|
||||
label({ class: "checkbox-label" },
|
||||
input({
|
||||
type: "checkbox",
|
||||
checked: currentEdit.isJob,
|
||||
onchange: (e) => { currentEdit.isJob = e.target.checked; }
|
||||
}),
|
||||
" Is Job"
|
||||
)
|
||||
),
|
||||
div({ class: "form-group" },
|
||||
div({ class: "ranks-header" },
|
||||
h3("Ranks"),
|
||||
button({ class: "btn btn-small", onclick: () => {
|
||||
ranksList.push({ label: "", weight: ranksList.length + 1, isBoss: false });
|
||||
rerenderRanks(ranksList);
|
||||
}},
|
||||
icon({ class: "fa-solid fa-plus" }),
|
||||
" Add Rank"
|
||||
)
|
||||
),
|
||||
div({ class: "ranks-info" },
|
||||
p("Rank 1 is the lowest. Higher weight = higher rank. Boss ranks grant boss permissions.")
|
||||
),
|
||||
div({ id: "ranks-container", class: "ranks-container" })
|
||||
)
|
||||
),
|
||||
div({ class: "edit-actions" },
|
||||
!isNew ? button({ class: "btn btn-danger", onclick: () => deleteGroup(currentEdit.name) },
|
||||
icon({ class: "fa-solid fa-trash" }),
|
||||
" Delete Group"
|
||||
) : null,
|
||||
div({ class: "edit-actions-right" },
|
||||
button({ class: "btn btn-secondary", onclick: () => closeEditPanel() }, "Cancel"),
|
||||
button({ class: "btn btn-primary", onclick: () => saveGroup(isNew, ranksList) },
|
||||
icon({ class: "fa-solid fa-floppy-disk" }),
|
||||
" Save"
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
editPanel.appendChild(panelContent);
|
||||
rerenderRanks(ranksList);
|
||||
}
|
||||
|
||||
function closeEditPanel() {
|
||||
if (!editPanel) return;
|
||||
editPanel.classList.remove("open");
|
||||
editPanel.innerHTML = "";
|
||||
currentEdit = null;
|
||||
}
|
||||
|
||||
function saveGroup(isNew, ranksList) {
|
||||
if (!currentEdit.name || !currentEdit.label) return;
|
||||
|
||||
const ranks = ranksList.map((r, idx) => ({
|
||||
label: r.label,
|
||||
weight: idx + 1,
|
||||
isBoss: r.isBoss
|
||||
}));
|
||||
|
||||
if (isNew) {
|
||||
fetchCallback("groups:create", {
|
||||
name: currentEdit.name,
|
||||
label: currentEdit.label,
|
||||
isJob: currentEdit.isJob,
|
||||
ranks: ranks
|
||||
}, (result) => {
|
||||
if (result && result.success) {
|
||||
groups = result.groups || groups;
|
||||
renderGroupList();
|
||||
closeEditPanel();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
fetchCallback("groups:edit", {
|
||||
name: currentEdit.name,
|
||||
label: currentEdit.label,
|
||||
isJob: currentEdit.isJob,
|
||||
ranks: ranks
|
||||
}, (result) => {
|
||||
if (result && result.success) {
|
||||
groups = result.groups || groups;
|
||||
renderGroupList();
|
||||
closeEditPanel();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function deleteGroup(name) {
|
||||
if (!name) return;
|
||||
fetchCallback("groups:delete", { name: name }, (result) => {
|
||||
if (result && result.success) {
|
||||
groups = result.groups || groups;
|
||||
renderGroupList();
|
||||
closeEditPanel();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function init() {
|
||||
container = div({ class: "main-page" });
|
||||
editPanel = div({ class: "edit-panel" });
|
||||
document.body.appendChild(container);
|
||||
document.body.appendChild(editPanel);
|
||||
}
|
||||
|
||||
nuiMessage("groups:open", (info) => {
|
||||
setOpen(true);
|
||||
document.body.style.opacity = "1";
|
||||
groups = info.groups || [];
|
||||
renderGroupList();
|
||||
});
|
||||
|
||||
nuiMessage("groups:close", () => {
|
||||
closeUI();
|
||||
});
|
||||
|
||||
init();
|
||||
46
ui/modules/close.js
Normal file
46
ui/modules/close.js
Normal file
@@ -0,0 +1,46 @@
|
||||
import { fetchCallback } from "./fetch.js";
|
||||
|
||||
let isOpen = false;
|
||||
|
||||
export function closeUI() {
|
||||
if (!isOpen) return;
|
||||
isOpen = false;
|
||||
document.body.style.opacity = "0";
|
||||
setTimeout(() => {
|
||||
fetchCallback("hide");
|
||||
}, 400);
|
||||
}
|
||||
|
||||
export function setOpen(state) {
|
||||
isOpen = state;
|
||||
}
|
||||
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") closeUI();
|
||||
});
|
||||
|
||||
document.addEventListener("click", (event) => {
|
||||
const mainPage = document.querySelector(".main-page");
|
||||
const editPanel = document.querySelector(".edit-panel");
|
||||
if (!mainPage || !editPanel) return;
|
||||
|
||||
const mainRect = mainPage.getBoundingClientRect();
|
||||
const editRect = editPanel.getBoundingClientRect();
|
||||
|
||||
const insideMainPage =
|
||||
event.clientX >= mainRect.left &&
|
||||
event.clientX <= mainRect.right &&
|
||||
event.clientY >= mainRect.top &&
|
||||
event.clientY <= mainRect.bottom;
|
||||
|
||||
const insideEditPanel =
|
||||
event.clientX >= editRect.left &&
|
||||
event.clientX <= editRect.right &&
|
||||
event.clientY >= editRect.top &&
|
||||
event.clientY <= editRect.bottom;
|
||||
|
||||
if (!insideMainPage && !insideEditPanel) {
|
||||
closeUI();
|
||||
}
|
||||
});
|
||||
|
||||
9
ui/modules/fetch.js
Normal file
9
ui/modules/fetch.js
Normal file
@@ -0,0 +1,9 @@
|
||||
export function fetchCallback(name, data, cb) {
|
||||
fetch(`https://${GetParentResourceName()}/${name}`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json; charset=UTF-8" },
|
||||
body: JSON.stringify(data)
|
||||
}).then(resp => resp.json()).then(resp => {
|
||||
if (cb) cb(resp);
|
||||
});
|
||||
}
|
||||
15
ui/modules/listener.js
Normal file
15
ui/modules/listener.js
Normal file
@@ -0,0 +1,15 @@
|
||||
const nuiMessages = {};
|
||||
|
||||
window.addEventListener("message", function(event) {
|
||||
const item = event.data;
|
||||
const listener = nuiMessages[item.type];
|
||||
if (!listener) return;
|
||||
for (let i = 0; i < listener.length; i++) {
|
||||
listener[i](item);
|
||||
}
|
||||
});
|
||||
|
||||
export function nuiMessage(name, cb) {
|
||||
if (!nuiMessages[name]) nuiMessages[name] = [];
|
||||
nuiMessages[name].push(cb);
|
||||
}
|
||||
455
ui/style.css
Normal file
455
ui/style.css
Normal file
@@ -0,0 +1,455 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');
|
||||
|
||||
:root {
|
||||
--font: "Abel", sans-serif;
|
||||
--bg-primary: #1a1a1bfd;
|
||||
--bg-secondary: #202020;
|
||||
--bg-tertiary: #262627;
|
||||
--bg-hover: #2e2e2f;
|
||||
--text-primary: #d4d4d3;
|
||||
--text-secondary: #999;
|
||||
--accent: #0063b1;
|
||||
--accent-hover: #0078d4;
|
||||
--danger: #c42b1c;
|
||||
--danger-hover: #e03e2d;
|
||||
--border: #333;
|
||||
--success: #107c10;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
body {
|
||||
user-select: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s;
|
||||
font-family: var(--font);
|
||||
color: var(--text-primary);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.main-page {
|
||||
position: relative;
|
||||
background-color: var(--bg-primary);
|
||||
border-radius: 12px;
|
||||
width: 60rem;
|
||||
max-height: 45rem;
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.list-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.list-header h1 {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.search-row {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 0.6rem 1rem;
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border);
|
||||
background-color: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font);
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.group-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
|
||||
gap: 0.75rem;
|
||||
overflow-y: auto;
|
||||
padding-right: 0.25rem;
|
||||
max-height: 35rem;
|
||||
}
|
||||
|
||||
.group-grid::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.group-grid::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.group-grid::-webkit-scrollbar-thumb {
|
||||
background: var(--border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.group-card {
|
||||
background-color: var(--bg-secondary);
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.2s, transform 0.15s;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.group-card:hover {
|
||||
background-color: var(--bg-tertiary);
|
||||
border-color: var(--border);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.group-card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.group-card-header h3 {
|
||||
font-size: 1.15rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.group-name {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.group-card-tags {
|
||||
display: flex;
|
||||
gap: 0.4rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 0.8rem;
|
||||
padding: 0.15rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
background-color: var(--bg-tertiary);
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.tag-job {
|
||||
background-color: rgba(0, 99, 177, 0.25);
|
||||
color: var(--accent-hover);
|
||||
}
|
||||
|
||||
.tag-ranks {
|
||||
background-color: rgba(16, 124, 16, 0.2);
|
||||
color: #4caf50;
|
||||
}
|
||||
|
||||
/* Edit Panel */
|
||||
.edit-panel {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: -35rem;
|
||||
width: 35rem;
|
||||
height: 100vh;
|
||||
background-color: var(--bg-primary);
|
||||
border-left: 1px solid var(--border);
|
||||
transition: right 0.3s ease;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.edit-panel.open {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.edit-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
|
||||
.edit-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.edit-header h2 {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.edit-form {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
|
||||
.edit-form::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
}
|
||||
|
||||
.edit-form::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.edit-form::-webkit-scrollbar-thumb {
|
||||
background: var(--border);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.form-group > label {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.form-row {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 6px;
|
||||
border: 1px solid var(--border);
|
||||
background-color: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font);
|
||||
font-size: 1rem;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.form-input:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.form-input:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
cursor: pointer;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.checkbox-label input[type="checkbox"] {
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
accent-color: var(--accent);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Ranks */
|
||||
.ranks-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ranks-header h3 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.ranks-info {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.ranks-info p {
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.ranks-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
|
||||
.rank-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
background-color: var(--bg-secondary);
|
||||
padding: 0.5rem 0.6rem;
|
||||
border-radius: 8px;
|
||||
transition: background-color 0.15s;
|
||||
}
|
||||
|
||||
.rank-row:hover {
|
||||
background-color: var(--bg-tertiary);
|
||||
}
|
||||
|
||||
.rank-order {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.15rem;
|
||||
min-width: 4rem;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.rank-weight {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-secondary);
|
||||
min-width: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.rank-label-input {
|
||||
flex: 1;
|
||||
padding: 0.35rem 0.6rem;
|
||||
border-radius: 5px;
|
||||
border: 1px solid var(--border);
|
||||
background-color: var(--bg-primary);
|
||||
color: var(--text-primary);
|
||||
font-family: var(--font);
|
||||
font-size: 0.95rem;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.rank-label-input:focus {
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.rank-boss-toggle {
|
||||
min-width: 3.5rem;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: 7px;
|
||||
cursor: pointer;
|
||||
font-family: var(--font);
|
||||
font-size: 0.95rem;
|
||||
transition: background-color 0.2s, opacity 0.2s;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background-color: var(--accent);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--accent-hover);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: var(--bg-hover);
|
||||
}
|
||||
|
||||
.btn-create {
|
||||
background-color: var(--accent);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btn-create:hover {
|
||||
background-color: var(--accent-hover);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background-color: var(--danger);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background-color: var(--danger-hover);
|
||||
}
|
||||
|
||||
.btn-small {
|
||||
padding: 0.3rem 0.7rem;
|
||||
font-size: 0.85rem;
|
||||
background-color: var(--accent);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
padding: 0.2rem;
|
||||
font-size: 0.85rem;
|
||||
border-radius: 4px;
|
||||
transition: color 0.2s, background-color 0.15s;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.btn-icon:hover {
|
||||
color: var(--text-primary);
|
||||
background-color: var(--bg-hover);
|
||||
}
|
||||
|
||||
.btn-icon.btn-danger {
|
||||
background: none;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.btn-icon.btn-danger:hover {
|
||||
color: var(--danger-hover);
|
||||
background-color: rgba(196, 43, 28, 0.15);
|
||||
}
|
||||
|
||||
/* Edit Actions */
|
||||
.edit-actions {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid var(--border);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.edit-actions-right {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
Reference in New Issue
Block a user