mirror of
https://github.com/kiddin9/op-packages.git
synced 2026-10-29 14:05:13 +08:00
💐 Sync 2026-05-31 20:31:25
This commit is contained in:
1 parent
d687452f74
commit
a0ef0d598a
8 files changed
+262
-47
No files matched your search
@@ -2081,6 +2081,7 @@ header .brand {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
transition: color .3s ease;
|
||||
}
|
||||
|
||||
header .pull-right {
|
||||
@@ -2147,8 +2148,8 @@ body.sidebar-open header {
|
||||
.menu-btn span::after {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
border-radius: 1px;
|
||||
height: 0.1rem;
|
||||
border-radius: 0.05rem;
|
||||
background: currentColor;
|
||||
transition: transform .3s ease, opacity .3s ease;
|
||||
}
|
||||
@@ -2286,16 +2287,15 @@ body.sidebar-open header {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.cbi-dropdown[open].btn>ul.dropdown,
|
||||
.cbi-dropdown[open].cbi-button>ul.dropdown {
|
||||
left: 0 !important;
|
||||
right: auto !important;
|
||||
width: max-content;
|
||||
max-width: calc(100vw - 24px);
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.cbi-dropdown[open].btn>ul.dropdown,
|
||||
.cbi-dropdown[open].cbi-button>ul.dropdown {
|
||||
left: 0 !important;
|
||||
right: auto !important;
|
||||
width: max-content;
|
||||
max-width: calc(100vw - 24px);
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.nav {
|
||||
@@ -4670,6 +4670,14 @@ div.cbi-value var.cbi-tooltip-container,
|
||||
color: var(--on-surface-variant);
|
||||
}
|
||||
|
||||
:is(body[data-page="admin-dashboard"], body[data-page="admin"], body[data-page=""]) .Dashboard .router-status-info .settings-info p span:nth-child(2) {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
:is(body[data-page="admin-dashboard"], body[data-page="admin"], body[data-page=""]) .Dashboard .settings-info p span:nth-child(2) {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
:is(body[data-page="admin-status-iptables"], body[data-page="admin-status-nftables-iptables"]) .cbi-tabmenu {
|
||||
margin-top: 28px;
|
||||
}
|
||||
@@ -4677,4 +4685,53 @@ div.cbi-value var.cbi-tooltip-container,
|
||||
[data-darkmode="true"] :is(body[data-page="admin-dashboard"], body[data-page="admin"], body[data-page=""]) .Dashboard img.svgmonotone,
|
||||
[data-mode="dark"] :is(body[data-page="admin-dashboard"], body[data-page="admin"], body[data-page=""]) .Dashboard img.svgmonotone {
|
||||
filter: invert(1) brightness(1.65) contrast(.82) opacity(.86);
|
||||
}
|
||||
|
||||
[data-darkmode="true"] body[data-page^="admin-services-dockerman"] img[src*="dockerman/"][src$=".svg"],
|
||||
[data-mode="dark"] body[data-page^="admin-services-dockerman"] img[src*="dockerman/"][src$=".svg"] {
|
||||
filter: invert(1) brightness(1.65) contrast(.82) opacity(.9);
|
||||
}
|
||||
|
||||
[data-darkmode="true"] body[data-page^="admin-services-dockerman"] img[src*="dockerman/containers.svg"][src$=".svg"],
|
||||
[data-mode="dark"] body[data-page^="admin-services-dockerman"] img[src*="dockerman/containers.svg"][src$=".svg"] {
|
||||
filter: none !important;
|
||||
opacity: .96;
|
||||
}
|
||||
|
||||
body[data-page^="admin-services-dockerman"] #view a[href*="/dockerman/"] {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
body[data-page^="admin-services-dockerman"] #view div[style*="grid-template-columns"][style*="minmax(300px"] {
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
|
||||
gap: 10px !important;
|
||||
}
|
||||
|
||||
body[data-page^="admin-services-dockerman"] #view a[href*="/dockerman/"]>div[style*="min-height: 120px"] {
|
||||
border: 1px solid var(--border-color-low) !important;
|
||||
border-radius: 12px !important;
|
||||
background: var(--background-color-high) !important;
|
||||
box-shadow: none !important;
|
||||
transition: background-color .2s ease, border-color .2s ease;
|
||||
}
|
||||
|
||||
body[data-page^="admin-services-dockerman"] #view a[href*="/dockerman/"]>div[style*="min-height: 120px"]:hover {
|
||||
border-color: var(--border-color-medium) !important;
|
||||
background: var(--background-color-low) !important;
|
||||
}
|
||||
|
||||
body[data-page^="admin-services-dockerman"] #view a[href*="/dockerman/"] div[style*="color: #333"] {
|
||||
color: var(--on-surface) !important;
|
||||
}
|
||||
|
||||
body[data-page^="admin-services-dockerman"] #view a[href*="/dockerman/"] span[style*="color: #666"] {
|
||||
color: var(--on-surface-variant) !important;
|
||||
}
|
||||
|
||||
body[data-page^="admin-services-dockerman"] #view a[href*="/dockerman/"] strong[style*="color: #0066cc"] {
|
||||
color: var(--primary-color-high) !important;
|
||||
}
|
||||
|
||||
body[data-page^="admin-services-dockerman"] #view a[href*="/dockerman/"] strong[style*="color: #28a745"] {
|
||||
color: var(--success-color-high) !important;
|
||||
}
|
||||
@@ -36,6 +36,24 @@ header h3 a {
|
||||
border-radius: var(--material3-card-radius);
|
||||
}
|
||||
|
||||
body[data-page^="admin-services-dockerman"] #view div[style*="grid-template-columns"][style*="minmax(300px"] {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
|
||||
}
|
||||
|
||||
body[data-page^="admin-services-dockerman"] #view a[href*="/dockerman/"]>div[style*="min-height: 120px"] {
|
||||
min-height: 96px !important;
|
||||
padding: 10px !important;
|
||||
}
|
||||
|
||||
body[data-page^="admin-services-dockerman"] #view a[href*="/dockerman/"] img[src*="dockerman/"][src$=".svg"] {
|
||||
width: 52px !important;
|
||||
height: 52px !important;
|
||||
}
|
||||
|
||||
body[data-page^="admin-services-dockerman"] #view a[href*="/dockerman/"] div[style*="margin-right: 15px"] {
|
||||
margin-right: 8px !important;
|
||||
}
|
||||
|
||||
.table {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -148,6 +166,8 @@ header h3 a {
|
||||
|
||||
.tr.table-titles,
|
||||
.tr.dashboard-table-titles,
|
||||
.thead.dashboard-table-titles,
|
||||
thead.dashboard-table-titles,
|
||||
.cbi-section-table-titles,
|
||||
.cbi-section-table-descr {
|
||||
display: none;
|
||||
|
||||
@@ -4,6 +4,7 @@
|
||||
|
||||
return baseclass.extend({
|
||||
__init__() {
|
||||
this.suppressClick = null;
|
||||
ui.menu.load().then((tree) => this.render(tree));
|
||||
this.initNavigationShell();
|
||||
this.initDashboardTables();
|
||||
@@ -43,6 +44,66 @@ return baseclass.extend({
|
||||
}
|
||||
},
|
||||
|
||||
shouldSuppressClick(ev) {
|
||||
const click = this.suppressClick;
|
||||
|
||||
if (!click || Date.now() >= click.until)
|
||||
return false;
|
||||
|
||||
const dx = Math.abs(ev.clientX - click.x);
|
||||
const dy = Math.abs(ev.clientY - click.y);
|
||||
const suppress = dx < 24 && dy < 24;
|
||||
|
||||
if (suppress)
|
||||
this.suppressClick = null;
|
||||
|
||||
return suppress;
|
||||
},
|
||||
|
||||
bindFastTap(target, handler) {
|
||||
let startX = 0;
|
||||
let startY = 0;
|
||||
let moved = false;
|
||||
|
||||
target.addEventListener('pointerdown', ev => {
|
||||
if (ev.pointerType == 'mouse' || ev.button)
|
||||
return;
|
||||
|
||||
startX = ev.clientX;
|
||||
startY = ev.clientY;
|
||||
moved = false;
|
||||
}, { passive: true });
|
||||
|
||||
target.addEventListener('pointermove', ev => {
|
||||
if (Math.abs(ev.clientX - startX) > 8 || Math.abs(ev.clientY - startY) > 8)
|
||||
moved = true;
|
||||
}, { passive: true });
|
||||
|
||||
target.addEventListener('pointerup', ev => {
|
||||
if (ev.pointerType == 'mouse' || ev.button || moved)
|
||||
return;
|
||||
|
||||
this.suppressClick = {
|
||||
x: ev.clientX,
|
||||
y: ev.clientY,
|
||||
until: Date.now() + 500
|
||||
};
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
handler(ev);
|
||||
});
|
||||
|
||||
target.addEventListener('click', ev => {
|
||||
if (this.shouldSuppressClick(ev)) {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
return;
|
||||
}
|
||||
|
||||
handler(ev);
|
||||
});
|
||||
},
|
||||
|
||||
closeOtherMenus(currentMenu) {
|
||||
document.querySelectorAll('#topmenu > li.open').forEach(menu => {
|
||||
if (menu === currentMenu)
|
||||
@@ -80,6 +141,14 @@ return baseclass.extend({
|
||||
if (!button || !sidebar || !overlay)
|
||||
return;
|
||||
|
||||
document.addEventListener('click', ev => {
|
||||
if (!this.shouldSuppressClick(ev))
|
||||
return;
|
||||
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
}, true);
|
||||
|
||||
const close = () => {
|
||||
sidebar.classList.remove('active');
|
||||
overlay.classList.remove('active');
|
||||
@@ -89,7 +158,7 @@ return baseclass.extend({
|
||||
button.setAttribute('aria-expanded', 'false');
|
||||
};
|
||||
|
||||
button.addEventListener('click', () => {
|
||||
this.bindFastTap(button, () => {
|
||||
sidebar.classList.toggle('active');
|
||||
overlay.classList.toggle('active');
|
||||
const isOpen = sidebar.classList.contains('active');
|
||||
@@ -107,24 +176,31 @@ return baseclass.extend({
|
||||
close();
|
||||
});
|
||||
|
||||
sidebar.addEventListener('click', ev => {
|
||||
sidebar.addEventListener('pointerdown', ev => {
|
||||
const link = ev.target.closest('a[href]');
|
||||
|
||||
if (!link)
|
||||
return;
|
||||
|
||||
this.createRipple(ev, link);
|
||||
}, { passive: true });
|
||||
|
||||
sidebar.addEventListener('click', ev => {
|
||||
const link = ev.target.closest('a[href]');
|
||||
|
||||
if (!link)
|
||||
return;
|
||||
|
||||
if (link.getAttribute('href') != '#')
|
||||
close();
|
||||
});
|
||||
|
||||
document.addEventListener('click', ev => {
|
||||
document.addEventListener('pointerdown', ev => {
|
||||
const target = ev.target.closest('.tabs > li, .cbi-tabmenu > li');
|
||||
|
||||
if (target)
|
||||
this.createRipple(ev, target);
|
||||
});
|
||||
}, { passive: true });
|
||||
|
||||
sidebar.addEventListener('mouseover', ev => {
|
||||
const link = ev.target.closest('.nav a');
|
||||
@@ -180,23 +256,29 @@ return baseclass.extend({
|
||||
updateDashboardTables() {
|
||||
document.querySelectorAll('.Dashboard, .dashboard-bg.box-s1').forEach(scope => {
|
||||
scope.querySelectorAll('.table').forEach(table => {
|
||||
const rows = Array.prototype.filter.call(table.children, child => child.classList && child.classList.contains('tr'));
|
||||
const headerRow = rows.find(row => row.querySelector('.th'));
|
||||
const rows = Array.prototype.filter.call(table.querySelectorAll('.tr, tr'), row =>
|
||||
row.closest('.table') === table);
|
||||
const headerRow = Array.prototype.find.call(table.children, child =>
|
||||
child.querySelector && child.querySelector('.th, th')) ||
|
||||
rows.find(row => row.querySelector('.th, th'));
|
||||
|
||||
if (!headerRow)
|
||||
return;
|
||||
|
||||
const titles = Array.prototype.map.call(headerRow.children, cell =>
|
||||
cell.classList && cell.classList.contains('th') ? cell.textContent.trim() : '');
|
||||
const titleCells = headerRow.querySelectorAll('.th, th');
|
||||
const titles = Array.prototype.map.call(titleCells, cell => cell.textContent.trim());
|
||||
|
||||
headerRow.classList.add('dashboard-table-titles');
|
||||
|
||||
rows.forEach(row => {
|
||||
if (row === headerRow)
|
||||
if (row === headerRow || row.querySelector('.th, th'))
|
||||
return;
|
||||
|
||||
Array.prototype.forEach.call(row.children, (cell, index) => {
|
||||
if (!cell.classList || !cell.classList.contains('td') || !titles[index])
|
||||
const cells = Array.prototype.filter.call(row.children, cell =>
|
||||
(cell.classList && cell.classList.contains('td')) || cell.tagName == 'TD');
|
||||
|
||||
cells.forEach((cell, index) => {
|
||||
if (!titles[index])
|
||||
return;
|
||||
|
||||
if (!cell.getAttribute('data-title'))
|
||||
@@ -283,13 +365,6 @@ return baseclass.extend({
|
||||
'href': linkurl
|
||||
};
|
||||
|
||||
if (!level && hasSubmenu) {
|
||||
linkAttrs.click = ev => {
|
||||
ev.preventDefault();
|
||||
this.toggleDropdown(ev.currentTarget.parentNode);
|
||||
};
|
||||
}
|
||||
|
||||
const li = E('li', attrs, [
|
||||
E('a', linkAttrs, [
|
||||
E('span', { 'class': 'nav-menu-title' }, [_(child.title)]),
|
||||
@@ -297,6 +372,12 @@ return baseclass.extend({
|
||||
submenu
|
||||
]);
|
||||
|
||||
if (!level && hasSubmenu)
|
||||
this.bindFastTap(li.firstElementChild, ev => {
|
||||
ev.preventDefault();
|
||||
this.toggleDropdown(li);
|
||||
});
|
||||
|
||||
if (!level && hasSubmenu && isActive)
|
||||
submenu.style.height = 'auto';
|
||||
|
||||
|
||||
Reference in new issue
Block a user