mirror of
https://github.com/UNITRONIX/BetterDesk.git
synced 2026-09-10 17:45:42 +00:00
UNITRONIX
cbf72ca1e3
- Added UX 3.5 as the default console shell, featuring a full-list sidebar, topbar, and customizable themes (Dark/Light/Custom). - Updated documentation to reflect the new UX 3.5 shell. - Removed legacy Desktop Mode and Beta 3.1 styles, ensuring a streamlined user experience. - Enhanced language support for new theme options across multiple languages. - Fixed OIDC client login issues by proxying callback URLs to the Go API. This update improves the overall user interface and experience, aligning with modern design standards.
538 lines
13 KiB
CSS
538 lines
13 KiB
CSS
/**
|
|
* @deprecated Retired Beta 3.1 overlay styles — replaced by ux35.css / ux35-tokens.css.
|
|
* Not loaded by layouts/main.ejs.
|
|
*/
|
|
|
|
/**
|
|
* BetterDesk Console — Beta 3.1 Panel (legacy reference)
|
|
* ISPmanager-inspired layout with persistent sidebar + content area
|
|
*/
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════
|
|
NAVBAR TOGGLE BUTTON
|
|
═══════════════════════════════════════════════════════════════════ */
|
|
|
|
.beta31-toggle-btn {
|
|
position: relative;
|
|
display: flex !important;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════
|
|
BETA 3.1 SHELL — full-screen overlay
|
|
═══════════════════════════════════════════════════════════════════ */
|
|
|
|
.beta31-shell {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 250;
|
|
display: none;
|
|
background: var(--b31-bg, #f0f2f5);
|
|
font-family: var(--font-family);
|
|
}
|
|
|
|
.beta31-shell.active {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* ── Top bar ── */
|
|
.b31-topbar {
|
|
height: 48px;
|
|
min-height: 48px;
|
|
background: var(--b31-topbar-bg, #2b579a);
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 16px;
|
|
gap: 12px;
|
|
z-index: 2;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,.18);
|
|
}
|
|
|
|
.b31-topbar-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-weight: 700;
|
|
font-size: 15px;
|
|
letter-spacing: .02em;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.b31-topbar-logo .material-icons { font-size: 22px; }
|
|
|
|
.b31-topbar-badge {
|
|
background: rgba(255,255,255,.2);
|
|
font-size: 10px;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-weight: 600;
|
|
letter-spacing: .05em;
|
|
}
|
|
|
|
.b31-topbar-tabs {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 2px;
|
|
margin-left: 24px;
|
|
height: 100%;
|
|
}
|
|
|
|
.b31-topbar-tab {
|
|
background: none;
|
|
border: none;
|
|
color: rgba(255,255,255,.7);
|
|
font-size: 13px;
|
|
padding: 0 14px;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
transition: all .15s;
|
|
border-bottom: 2px solid transparent;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.b31-topbar-tab:hover { color: #fff; background: rgba(255,255,255,.08); }
|
|
.b31-topbar-tab.active {
|
|
color: #fff;
|
|
border-bottom-color: #fff;
|
|
background: rgba(255,255,255,.1);
|
|
}
|
|
|
|
.b31-topbar-tab .material-icons { font-size: 18px; }
|
|
|
|
.b31-topbar-spacer { flex: 1; }
|
|
|
|
.b31-topbar-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.b31-topbar-btn {
|
|
background: none;
|
|
border: none;
|
|
color: rgba(255,255,255,.75);
|
|
padding: 6px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
transition: all .15s;
|
|
}
|
|
.b31-topbar-btn:hover { background: rgba(255,255,255,.12); color: #fff; }
|
|
.b31-topbar-btn .material-icons { font-size: 20px; }
|
|
|
|
/* ── Body: sidebar + content ── */
|
|
.b31-body {
|
|
flex: 1;
|
|
display: flex;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── Sidebar ── */
|
|
.b31-sidebar {
|
|
width: 220px;
|
|
min-width: 220px;
|
|
background: var(--b31-sidebar-bg, #fff);
|
|
border-right: 1px solid var(--b31-border, #dde1e6);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.b31-sidebar-section {
|
|
padding: 6px 0;
|
|
border-bottom: 1px solid var(--b31-border, #dde1e6);
|
|
}
|
|
|
|
.b31-sidebar-section:last-child { border-bottom: none; }
|
|
|
|
.b31-sidebar-heading {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: .06em;
|
|
color: var(--b31-muted, #8a8f9a);
|
|
padding: 10px 16px 4px;
|
|
}
|
|
|
|
.b31-sidebar-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 7px 16px;
|
|
font-size: 13px;
|
|
color: var(--b31-text, #333);
|
|
cursor: pointer;
|
|
transition: all .12s;
|
|
border: none;
|
|
background: none;
|
|
width: 100%;
|
|
text-align: left;
|
|
border-left: 3px solid transparent;
|
|
}
|
|
|
|
.b31-sidebar-item:hover {
|
|
background: var(--b31-hover, #f5f7fa);
|
|
color: var(--b31-primary, #2b579a);
|
|
}
|
|
|
|
.b31-sidebar-item.active {
|
|
background: var(--b31-active-bg, #e8eef7);
|
|
color: var(--b31-primary, #2b579a);
|
|
font-weight: 600;
|
|
border-left-color: var(--b31-primary, #2b579a);
|
|
}
|
|
|
|
.b31-sidebar-item .material-icons {
|
|
font-size: 20px;
|
|
opacity: .7;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.b31-sidebar-item.active .material-icons { opacity: 1; }
|
|
|
|
.b31-sidebar-item-badge {
|
|
margin-left: auto;
|
|
background: var(--b31-primary, #2b579a);
|
|
color: #fff;
|
|
font-size: 10px;
|
|
padding: 1px 6px;
|
|
border-radius: 10px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* ── Content area ── */
|
|
.b31-content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
padding: 24px;
|
|
background: var(--b31-bg, #f0f2f5);
|
|
}
|
|
|
|
.b31-content.has-frame {
|
|
overflow: hidden;
|
|
padding: 0;
|
|
}
|
|
|
|
.b31-panel-frame {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
min-height: 100%;
|
|
border: 0;
|
|
border-radius: 0;
|
|
background: transparent;
|
|
opacity: 0;
|
|
transition: opacity .15s ease;
|
|
}
|
|
|
|
.b31-panel-frame.loaded {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* ── Content cards (ISPmanager-style collapsible sections) ── */
|
|
.b31-card {
|
|
background: var(--b31-card-bg, #fff);
|
|
border: 1px solid var(--b31-border, #dde1e6);
|
|
border-radius: 6px;
|
|
margin-bottom: 16px;
|
|
box-shadow: 0 1px 2px rgba(0,0,0,.04);
|
|
}
|
|
|
|
.b31-card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 12px 16px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
border-bottom: 1px solid var(--b31-border, #dde1e6);
|
|
transition: background .12s;
|
|
}
|
|
|
|
.b31-card-header:hover { background: var(--b31-hover, #f5f7fa); }
|
|
|
|
.b31-card-header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--b31-text, #333);
|
|
}
|
|
|
|
.b31-card-header-left .material-icons {
|
|
font-size: 18px;
|
|
color: var(--b31-primary, #2b579a);
|
|
}
|
|
|
|
.b31-card-header-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.b31-card-action-btn {
|
|
background: none;
|
|
border: none;
|
|
color: var(--b31-muted, #8a8f9a);
|
|
padding: 4px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
display: flex;
|
|
transition: all .12s;
|
|
}
|
|
.b31-card-action-btn:hover {
|
|
background: var(--b31-hover, #f5f7fa);
|
|
color: var(--b31-primary, #2b579a);
|
|
}
|
|
.b31-card-action-btn .material-icons { font-size: 18px; }
|
|
|
|
.b31-card-body { padding: 16px; }
|
|
|
|
.b31-card.collapsed .b31-card-body { display: none; }
|
|
.b31-card.collapsed .b31-card-header { border-bottom: none; }
|
|
|
|
/* ── Info grid (label-value pairs like ISPmanager system info) ── */
|
|
.b31-info-grid {
|
|
display: grid;
|
|
grid-template-columns: 180px 1fr;
|
|
gap: 0;
|
|
}
|
|
|
|
.b31-info-label,
|
|
.b31-info-value {
|
|
padding: 8px 12px;
|
|
font-size: 13px;
|
|
border-bottom: 1px solid var(--b31-border-light, #eef0f3);
|
|
}
|
|
|
|
.b31-info-label {
|
|
color: var(--b31-muted, #8a8f9a);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.b31-info-value {
|
|
color: var(--b31-text, #333);
|
|
}
|
|
|
|
.b31-info-value a {
|
|
color: var(--b31-primary, #2b579a);
|
|
text-decoration: none;
|
|
}
|
|
.b31-info-value a:hover { text-decoration: underline; }
|
|
|
|
/* ── Table styles ── */
|
|
.b31-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.b31-table th {
|
|
text-align: left;
|
|
padding: 8px 12px;
|
|
font-weight: 600;
|
|
color: var(--b31-muted, #8a8f9a);
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: .04em;
|
|
border-bottom: 2px solid var(--b31-border, #dde1e6);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.b31-table td {
|
|
padding: 8px 12px;
|
|
border-bottom: 1px solid var(--b31-border-light, #eef0f3);
|
|
color: var(--b31-text, #333);
|
|
}
|
|
|
|
.b31-table tbody tr:hover {
|
|
background: var(--b31-hover, #f5f7fa);
|
|
}
|
|
|
|
/* ── Quick action bar (like ISPmanager taskbar) ── */
|
|
.b31-taskbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px 16px;
|
|
background: var(--b31-card-bg, #fff);
|
|
border: 1px solid var(--b31-border, #dde1e6);
|
|
border-radius: 6px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.b31-taskbar-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 8px 16px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
transition: all .12s;
|
|
text-decoration: none;
|
|
color: var(--b31-text, #333);
|
|
font-size: 12px;
|
|
background: none;
|
|
border: none;
|
|
}
|
|
.b31-taskbar-item:hover { background: var(--b31-hover, #f5f7fa); color: var(--b31-primary, #2b579a); }
|
|
.b31-taskbar-item .material-icons { font-size: 28px; color: var(--b31-primary, #2b579a); }
|
|
|
|
/* ── Status indicators ── */
|
|
.b31-status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.b31-status-dot {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
flex-shrink: 0;
|
|
}
|
|
.b31-status.online .b31-status-dot { background: #2ea44f; }
|
|
.b31-status.offline .b31-status-dot { background: #8b949e; }
|
|
.b31-status.error .b31-status-dot { background: #f85149; }
|
|
.b31-status.warning .b31-status-dot { background: #d29922; }
|
|
|
|
/* ── Buttons ── */
|
|
.b31-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 14px;
|
|
font-size: 13px;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--b31-border, #dde1e6);
|
|
background: var(--b31-card-bg, #fff);
|
|
color: var(--b31-text, #333);
|
|
cursor: pointer;
|
|
transition: all .12s;
|
|
font-weight: 500;
|
|
}
|
|
.b31-btn:hover { background: var(--b31-hover, #f5f7fa); border-color: var(--b31-primary, #2b579a); }
|
|
.b31-btn .material-icons { font-size: 16px; }
|
|
|
|
.b31-btn-primary {
|
|
background: var(--b31-primary, #2b579a);
|
|
color: #fff;
|
|
border-color: var(--b31-primary, #2b579a);
|
|
}
|
|
.b31-btn-primary:hover { background: #1e4280; }
|
|
|
|
/* ── Loading state ── */
|
|
.b31-loading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 60px;
|
|
color: var(--b31-muted, #8a8f9a);
|
|
font-size: 14px;
|
|
gap: 10px;
|
|
}
|
|
|
|
.b31-loading .material-icons {
|
|
animation: b31spin 1s linear infinite;
|
|
}
|
|
|
|
@keyframes b31spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* ── Page header inside content area ── */
|
|
.b31-page-header {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.b31-page-title {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
color: var(--b31-text, #333);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.b31-page-subtitle {
|
|
font-size: 13px;
|
|
color: var(--b31-muted, #8a8f9a);
|
|
}
|
|
|
|
/* ── Stats row ── */
|
|
.b31-stats {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
gap: 12px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.b31-stat-card {
|
|
background: var(--b31-card-bg, #fff);
|
|
border: 1px solid var(--b31-border, #dde1e6);
|
|
border-radius: 6px;
|
|
padding: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.b31-stat-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
.b31-stat-icon.blue { background: rgba(43,87,154,.1); color: #2b579a; }
|
|
.b31-stat-icon.green { background: rgba(46,164,79,.1); color: #2ea44f; }
|
|
.b31-stat-icon.red { background: rgba(248,81,73,.1); color: #f85149; }
|
|
.b31-stat-icon.yellow { background: rgba(210,153,34,.1); color: #d29922; }
|
|
.b31-stat-icon .material-icons { font-size: 22px; }
|
|
|
|
.b31-stat-value { font-size: 22px; font-weight: 700; color: var(--b31-text, #333); }
|
|
.b31-stat-label { font-size: 12px; color: var(--b31-muted, #8a8f9a); }
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════
|
|
DARK MODE overrides
|
|
═══════════════════════════════════════════════════════════════════ */
|
|
|
|
.beta31-shell.b31-dark {
|
|
--b31-bg: #0d1117;
|
|
--b31-topbar-bg: #161b22;
|
|
--b31-sidebar-bg: #161b22;
|
|
--b31-card-bg: #1c2128;
|
|
--b31-border: #30363d;
|
|
--b31-border-light: #262c36;
|
|
--b31-text: #e6edf3;
|
|
--b31-muted: #8b949e;
|
|
--b31-hover: rgba(255,255,255,.04);
|
|
--b31-active-bg: rgba(88,166,255,.12);
|
|
--b31-primary: #58a6ff;
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════
|
|
RESPONSIVE
|
|
═══════════════════════════════════════════════════════════════════ */
|
|
|
|
@media (max-width: 768px) {
|
|
.b31-sidebar { width: 56px; min-width: 56px; }
|
|
.b31-sidebar-heading,
|
|
.b31-sidebar-item span:not(.material-icons),
|
|
.b31-sidebar-item-badge { display: none; }
|
|
.b31-sidebar-item { justify-content: center; padding: 10px 0; }
|
|
.b31-content { padding: 12px; }
|
|
.b31-content.has-frame { padding: 0; }
|
|
.b31-topbar-tabs { display: none; }
|
|
}
|