mirror of
https://github.com/UNITRONIX/BetterDesk.git
synced 2026-09-10 01:27:11 +00:00
UNITRONIX
261a7fcd78
- Fixed light theme to correctly apply the blue topbar and ensure text colors are consistent with the selected theme. - Updated theme management to persist the selected theme and its corresponding palette across sessions. - Enhanced documentation to clarify theme color mappings and behavior. - Introduced built-in theme palettes for light and dark modes to streamline theme application. - Improved CSS variable handling for better theme integration in the UI. This update addresses user feedback regarding theme inconsistencies and improves overall theme functionality.
483 lines
12 KiB
CSS
483 lines
12 KiB
CSS
/**
|
|
* BetterDesk Console — UX 3.5 Shell
|
|
* Native topbar + full-list sidebar (promoted from Beta 3.1), with glass surfaces.
|
|
*/
|
|
|
|
/* ── App shell ── */
|
|
body.app-page.ux35-page {
|
|
margin: 0;
|
|
background: var(--ux35-bg, var(--bg-primary));
|
|
color: var(--ux35-text, var(--text-primary));
|
|
font-family: var(--font-family);
|
|
}
|
|
|
|
.ux35-shell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
height: 100dvh;
|
|
overflow: hidden;
|
|
background: var(--ux35-bg, var(--bg-primary));
|
|
color: var(--ux35-text, var(--text-primary));
|
|
}
|
|
|
|
.ux35-shell.embed-mode {
|
|
height: auto;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* ── Topbar ── */
|
|
.ux35-topbar {
|
|
height: var(--ux35-topbar-height);
|
|
min-height: var(--ux35-topbar-height);
|
|
background: var(--ux35-topbar-bg);
|
|
color: var(--ux35-topbar-fg);
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 var(--ux35-space-4);
|
|
gap: var(--ux35-space-3);
|
|
z-index: 40;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
|
|
backdrop-filter: blur(var(--ux35-glass-blur)) saturate(var(--ux35-glass-saturate));
|
|
-webkit-backdrop-filter: blur(var(--ux35-glass-blur)) saturate(var(--ux35-glass-saturate));
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ux35-topbar-logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--ux35-space-2);
|
|
font-weight: 700;
|
|
font-size: 15px;
|
|
letter-spacing: 0.02em;
|
|
white-space: nowrap;
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.ux35-topbar-logo .material-icons { font-size: 22px; }
|
|
.ux35-topbar-logo img { height: 24px; width: auto; }
|
|
.ux35-topbar-logo .brand-text-accent { opacity: 0.85; }
|
|
|
|
.ux35-topbar-menu-btn {
|
|
display: none;
|
|
background: none;
|
|
border: none;
|
|
color: var(--ux35-topbar-fg-muted);
|
|
padding: 6px;
|
|
border-radius: var(--ux35-radius-sm);
|
|
cursor: pointer;
|
|
}
|
|
.ux35-topbar-menu-btn:hover { background: rgba(255, 255, 255, 0.12); color: var(--ux35-topbar-fg); }
|
|
.ux35-topbar-menu-btn .material-icons { font-size: 22px; }
|
|
|
|
.ux35-topbar-breadcrumb {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 13px;
|
|
color: var(--ux35-topbar-fg-muted);
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
}
|
|
.ux35-topbar-breadcrumb a {
|
|
color: var(--ux35-topbar-fg-muted);
|
|
text-decoration: none;
|
|
}
|
|
.ux35-topbar-breadcrumb a:hover { color: var(--ux35-topbar-fg); }
|
|
.ux35-topbar-breadcrumb .current { color: var(--ux35-topbar-fg); font-weight: 600; }
|
|
.ux35-topbar-breadcrumb .separator { opacity: 0.5; }
|
|
|
|
.ux35-topbar-spacer { flex: 1; }
|
|
|
|
.ux35-topbar-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.ux35-topbar-btn {
|
|
background: none;
|
|
border: none;
|
|
color: var(--ux35-topbar-fg-muted);
|
|
padding: 6px;
|
|
border-radius: var(--ux35-radius-sm);
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
transition: background var(--ux35-motion-fast), color var(--ux35-motion-fast);
|
|
}
|
|
.ux35-topbar-btn:hover { background: rgba(127, 127, 127, 0.18); color: var(--ux35-topbar-fg); }
|
|
.ux35-topbar-btn .material-icons { font-size: 20px; }
|
|
|
|
[data-theme="light"] .ux35-topbar-btn:hover,
|
|
[data-theme="light"] .ux35-topbar-menu-btn:hover {
|
|
background: rgba(255, 255, 255, 0.16);
|
|
color: #fff;
|
|
}
|
|
|
|
.ux35-topbar .notif-badge {
|
|
position: absolute;
|
|
top: 2px;
|
|
right: 2px;
|
|
min-width: 16px;
|
|
height: 16px;
|
|
padding: 0 4px;
|
|
border-radius: 8px;
|
|
background: var(--accent-red, #f85149);
|
|
color: #fff;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.ux35-topbar .lang-selector,
|
|
.ux35-topbar .notif-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.ux35-topbar .lang-dropdown,
|
|
.ux35-topbar .notif-dropdown {
|
|
right: 0;
|
|
top: calc(100% + 6px);
|
|
}
|
|
|
|
/* ── Body: sidebar + content ── */
|
|
.ux35-body {
|
|
flex: 1;
|
|
display: flex;
|
|
overflow: hidden;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* ── Sidebar ── */
|
|
.ux35-sidebar {
|
|
width: var(--ux35-sidebar-width);
|
|
min-width: var(--ux35-sidebar-width);
|
|
max-width: var(--ux35-sidebar-width-max);
|
|
background: var(--ux35-sidebar-bg);
|
|
border-right: 1px solid var(--ux35-border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
backdrop-filter: blur(var(--ux35-glass-blur)) saturate(var(--ux35-glass-saturate));
|
|
-webkit-backdrop-filter: blur(var(--ux35-glass-blur)) saturate(var(--ux35-glass-saturate));
|
|
z-index: 30;
|
|
transition: transform var(--ux35-motion) ease, box-shadow var(--ux35-motion) ease;
|
|
}
|
|
|
|
.ux35-sidebar-nav {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding-bottom: var(--ux35-space-2);
|
|
}
|
|
|
|
.ux35-sidebar-section {
|
|
padding: 6px 0;
|
|
border-bottom: 1px solid var(--ux35-border);
|
|
}
|
|
.ux35-sidebar-section:last-of-type { border-bottom: none; }
|
|
|
|
.ux35-sidebar-heading {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.06em;
|
|
color: var(--ux35-muted);
|
|
padding: 10px 16px 4px;
|
|
}
|
|
|
|
.ux35-sidebar-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 7px 16px;
|
|
font-size: 13px;
|
|
color: var(--ux35-text);
|
|
cursor: pointer;
|
|
transition: background var(--ux35-motion-fast), color var(--ux35-motion-fast);
|
|
border: none;
|
|
background: none;
|
|
width: 100%;
|
|
text-align: left;
|
|
border-left: 3px solid transparent;
|
|
text-decoration: none;
|
|
box-sizing: border-box;
|
|
}
|
|
.ux35-sidebar-item:hover {
|
|
background: var(--ux35-hover);
|
|
color: var(--ux35-primary);
|
|
}
|
|
.ux35-sidebar-item.active {
|
|
background: var(--ux35-active-bg);
|
|
color: var(--ux35-primary);
|
|
font-weight: 600;
|
|
border-left-color: var(--ux35-primary);
|
|
}
|
|
.ux35-sidebar-item .material-icons {
|
|
font-size: 20px;
|
|
opacity: 0.7;
|
|
flex-shrink: 0;
|
|
}
|
|
.ux35-sidebar-item.active .material-icons { opacity: 1; }
|
|
.ux35-sidebar-item .sidebar-link-external {
|
|
font-size: 14px;
|
|
margin-left: auto;
|
|
opacity: 0.5;
|
|
}
|
|
.ux35-sidebar-item-badge,
|
|
.ux35-sidebar .badge-sidebar {
|
|
margin-left: auto;
|
|
background: var(--ux35-primary);
|
|
color: #fff;
|
|
font-size: 10px;
|
|
padding: 1px 6px;
|
|
border-radius: 10px;
|
|
font-weight: 600;
|
|
flex-shrink: 0;
|
|
}
|
|
.ux35-sidebar .badge-sidebar--alpha {
|
|
background: linear-gradient(135deg, #a371f7, #58a6ff);
|
|
}
|
|
|
|
.ux35-sidebar-footer {
|
|
border-top: 1px solid var(--ux35-border);
|
|
padding: var(--ux35-space-3) var(--ux35-space-4);
|
|
flex-shrink: 0;
|
|
}
|
|
.ux35-sidebar-user {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--ux35-space-3);
|
|
min-width: 0;
|
|
}
|
|
.ux35-sidebar-user-avatar {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
background: var(--ux35-active-bg);
|
|
color: var(--ux35-primary);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 700;
|
|
font-size: 14px;
|
|
flex-shrink: 0;
|
|
}
|
|
.ux35-sidebar-user-info { min-width: 0; }
|
|
.ux35-sidebar-user-name {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--ux35-text);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.ux35-sidebar-user-role {
|
|
font-size: 11px;
|
|
color: var(--ux35-muted);
|
|
}
|
|
.ux35-sidebar-attribution {
|
|
margin-top: var(--ux35-space-2);
|
|
font-size: 10px;
|
|
color: var(--ux35-muted);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* Resize handle */
|
|
.ux35-sidebar-resize {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 4px;
|
|
height: 100%;
|
|
cursor: col-resize;
|
|
z-index: 5;
|
|
}
|
|
.ux35-sidebar-resize:hover,
|
|
.ux35-sidebar-resize.active {
|
|
background: var(--ux35-primary);
|
|
opacity: 0.35;
|
|
}
|
|
.ux35-sidebar { position: relative; }
|
|
|
|
/* Overlay for mobile drawer */
|
|
.ux35-sidebar-overlay {
|
|
display: none;
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.45);
|
|
z-index: 25;
|
|
opacity: 0;
|
|
transition: opacity var(--ux35-motion) ease;
|
|
}
|
|
.ux35-sidebar-overlay.visible {
|
|
display: block;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* ── Main content ── */
|
|
.ux35-main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
background: var(--ux35-bg, var(--bg-primary));
|
|
color: var(--ux35-text, var(--text-primary));
|
|
}
|
|
|
|
.ux35-content.main-content {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding: var(--ux35-content-padding-lg);
|
|
margin-top: 0;
|
|
height: auto;
|
|
width: 100%;
|
|
animation: ux35PageEnter var(--ux35-motion) ease-out;
|
|
overscroll-behavior: contain;
|
|
scrollbar-gutter: stable;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
/* Tighten page chrome spacing inside the shell */
|
|
.ux35-content > .dashboard-header,
|
|
.ux35-content > .devices-header,
|
|
.ux35-content > .page-header,
|
|
.ux35-content > .settings-header,
|
|
.ux35-content .b31-page-header {
|
|
margin-bottom: var(--ux35-section-gap);
|
|
}
|
|
|
|
.ux35-content .dashboard-stats,
|
|
.ux35-content .devices-page,
|
|
.ux35-content .settings-layout,
|
|
.ux35-content .card,
|
|
.ux35-content .settings-panel {
|
|
margin-bottom: var(--ux35-card-gap);
|
|
}
|
|
|
|
.ux35-content .settings-tabs {
|
|
gap: var(--ux35-space-2);
|
|
}
|
|
|
|
/* Settings page density under UX 3.5 */
|
|
.ux35-page .settings-layout {
|
|
gap: var(--ux35-space-4);
|
|
}
|
|
.ux35-page .settings-panel {
|
|
border-radius: var(--ux35-radius);
|
|
background: var(--ux35-card-bg);
|
|
border: 1px solid var(--ux35-border);
|
|
backdrop-filter: blur(var(--ux35-glass-blur));
|
|
}
|
|
.ux35-page .settings-panel-header {
|
|
padding: var(--ux35-space-4);
|
|
border-bottom: 1px solid var(--ux35-border);
|
|
}
|
|
.ux35-page .dashboard-stats .stat-card,
|
|
.ux35-page .card {
|
|
border-radius: var(--ux35-radius);
|
|
background: var(--ux35-card-bg);
|
|
border: 1px solid var(--ux35-border);
|
|
backdrop-filter: blur(var(--ux35-glass-blur));
|
|
}
|
|
.ux35-page .devices-page {
|
|
gap: var(--ux35-space-3);
|
|
}
|
|
|
|
@keyframes ux35PageEnter {
|
|
from { opacity: 0; transform: translateY(6px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.ux35-content { animation: none; }
|
|
}
|
|
|
|
/* Embed: no chrome */
|
|
body.embed-mode .ux35-topbar,
|
|
body.embed-mode .ux35-sidebar,
|
|
body.embed-mode .ux35-sidebar-overlay,
|
|
body.embed-mode .mobile-bottom-nav {
|
|
display: none !important;
|
|
}
|
|
body.embed-mode .ux35-body { display: block; }
|
|
body.embed-mode .ux35-content { padding: var(--ux35-content-padding); }
|
|
|
|
/* Emergency banner sits above topbar */
|
|
.ux35-shell > .emergency-banner {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ── Responsive ── */
|
|
@media (max-width: 1099px) {
|
|
.ux35-topbar-menu-btn { display: flex; }
|
|
.ux35-topbar-breadcrumb { display: none; }
|
|
|
|
.ux35-sidebar {
|
|
position: fixed;
|
|
top: var(--ux35-topbar-height);
|
|
left: 0;
|
|
bottom: 0;
|
|
height: auto;
|
|
transform: translateX(-105%);
|
|
box-shadow: none;
|
|
}
|
|
.ux35-shell.ux35-drawer-open .ux35-sidebar {
|
|
transform: translateX(0);
|
|
box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
|
|
}
|
|
.ux35-sidebar-resize { display: none; }
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.ux35-content {
|
|
padding: var(--ux35-content-padding);
|
|
padding-bottom: calc(var(--ux35-content-padding) + 72px);
|
|
}
|
|
.ux35-sidebar {
|
|
width: min(86vw, 280px);
|
|
min-width: min(86vw, 280px);
|
|
max-width: 280px;
|
|
}
|
|
}
|
|
|
|
/* Topbar dropdowns inherit shell text; force readable panels in both themes */
|
|
.ux35-topbar .lang-dropdown,
|
|
.ux35-topbar .notif-dropdown {
|
|
background: var(--bg-elevated, var(--bg-secondary));
|
|
color: var(--text-primary);
|
|
border: 1px solid var(--border-primary);
|
|
}
|
|
.ux35-topbar .lang-option {
|
|
color: var(--text-primary);
|
|
}
|
|
.ux35-topbar .lang-option:hover {
|
|
background: var(--bg-hover);
|
|
}
|
|
|
|
/* Page body text follows theme tokens */
|
|
.ux35-content,
|
|
.ux35-content h1,
|
|
.ux35-content h2,
|
|
.ux35-content h3,
|
|
.ux35-content p,
|
|
.ux35-content .page-title,
|
|
.ux35-content .dashboard-header,
|
|
.ux35-content .devices-title h1 {
|
|
color: var(--text-primary);
|
|
}
|
|
.ux35-content .text-muted,
|
|
.ux35-content .page-subtitle,
|
|
.ux35-content .dashboard-header p,
|
|
.ux35-sidebar-heading {
|
|
color: var(--text-secondary);
|
|
}
|