mirror of
https://github.com/UNITRONIX/BetterDesk.git
synced 2026-09-10 17:45:42 +00:00
UNITRONIX
f6d4112ef7
Updated sidebar styles to use new glass background variables for both the sidebar rail and flyout. This change enhances the visual aesthetics by applying a semi-transparent glass effect, improving the overall UI experience. Additionally, adjustments were made to the theme CSS to ensure consistency across light and dark modes.
284 lines
7.7 KiB
CSS
284 lines
7.7 KiB
CSS
/**
|
|
* BetterDesk Console — Theme Bridge
|
|
* Imports from ui-polish.css light theme. This file exists because the
|
|
* main layout references /css/theme.css as a separate stylesheet entry.
|
|
*
|
|
* All theme variables are defined in ui-polish.css.
|
|
* Desktop-specific light theme overrides are below.
|
|
*/
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
LIGHT THEME — Console Components
|
|
═══════════════════════════════════════════════════════════════════════ */
|
|
|
|
[data-theme="light"] .sidebar-rail,
|
|
.theme-light .sidebar-rail {
|
|
background: var(--sidebar-glass-bg-rail, rgba(255, 255, 255, 0.72));
|
|
border-right-color: #d0d7de;
|
|
}
|
|
|
|
[data-theme="light"] .sidebar-rail-btn,
|
|
.theme-light .sidebar-rail-btn {
|
|
color: #656d76;
|
|
}
|
|
|
|
[data-theme="light"] .sidebar-rail-btn:hover,
|
|
.theme-light .sidebar-rail-btn:hover {
|
|
background: rgba(0, 0, 0, 0.06);
|
|
color: #1f2328;
|
|
}
|
|
|
|
[data-theme="light"] .sidebar-rail-btn.active,
|
|
.theme-light .sidebar-rail-btn.active {
|
|
background: rgba(9, 105, 218, 0.1);
|
|
color: #0969da;
|
|
}
|
|
|
|
[data-theme="light"] .sidebar-rail,
|
|
.theme-light .sidebar-rail {
|
|
background: var(--sidebar-glass-bg-rail, rgba(255, 255, 255, 0.72));
|
|
}
|
|
|
|
[data-theme="light"] .sidebar-flyout,
|
|
.theme-light .sidebar-flyout {
|
|
background: var(--sidebar-glass-bg-flyout, rgba(255, 255, 255, 0.82));
|
|
border-right-color: #d0d7de;
|
|
}
|
|
|
|
[data-theme="light"] .sidebar-rail-btn,
|
|
.theme-light .sidebar-rail-btn {
|
|
color: var(--sidebar-btn-color, #656d76);
|
|
}
|
|
|
|
[data-theme="light"] .sidebar-link,
|
|
.theme-light .sidebar-link {
|
|
color: var(--sidebar-btn-color, #656d76);
|
|
}
|
|
|
|
[data-theme="light"] .sidebar-link:hover,
|
|
.theme-light .sidebar-link:hover {
|
|
background: rgba(0, 0, 0, 0.06);
|
|
color: #1f2328;
|
|
}
|
|
|
|
[data-theme="light"] .sidebar-flyout-title,
|
|
.theme-light .sidebar-flyout-title {
|
|
color: var(--sidebar-section-title, #656d76);
|
|
}
|
|
|
|
[data-theme="light"] .navbar,
|
|
.theme-light .navbar {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
backdrop-filter: blur(12px);
|
|
border-bottom-color: #d0d7de;
|
|
}
|
|
|
|
[data-theme="light"] .content-wrapper,
|
|
.theme-light .content-wrapper {
|
|
background: #f6f8fa;
|
|
}
|
|
|
|
[data-theme="light"] .card,
|
|
.theme-light .card {
|
|
background: #ffffff;
|
|
border-color: #d0d7de;
|
|
}
|
|
|
|
[data-theme="light"] .table th,
|
|
.theme-light .table th {
|
|
background: #f6f8fa;
|
|
color: #656d76;
|
|
border-color: #d0d7de;
|
|
}
|
|
|
|
[data-theme="light"] .table td,
|
|
.theme-light .table td {
|
|
border-color: #eaeef2;
|
|
color: #1f2328;
|
|
}
|
|
|
|
[data-theme="light"] .table tbody tr:hover,
|
|
.theme-light .table tbody tr:hover {
|
|
background: rgba(0, 0, 0, 0.02);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
LIGHT THEME — Desktop Mode
|
|
═══════════════════════════════════════════════════════════════════════ */
|
|
|
|
.desktop-theme-light .desktop-topbar {
|
|
background: rgba(255, 255, 255, 0.85);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
|
|
color: #1f2328;
|
|
}
|
|
|
|
.desktop-theme-light .topbar-clock {
|
|
color: #1f2328;
|
|
}
|
|
|
|
.desktop-theme-light .topbar-btn {
|
|
color: #656d76;
|
|
}
|
|
|
|
.desktop-theme-light .topbar-btn:hover {
|
|
background: rgba(0, 0, 0, 0.06);
|
|
color: #1f2328;
|
|
}
|
|
|
|
.desktop-theme-light .desktop-taskbar {
|
|
background: rgba(255, 255, 255, 0.85);
|
|
backdrop-filter: blur(20px);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
border-top: 1px solid rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.desktop-theme-light .taskbar-item {
|
|
color: #656d76;
|
|
}
|
|
|
|
.desktop-theme-light .taskbar-item:hover {
|
|
background: rgba(0, 0, 0, 0.06);
|
|
color: #1f2328;
|
|
}
|
|
|
|
.desktop-theme-light .taskbar-item.active {
|
|
background: rgba(9, 105, 218, 0.1);
|
|
color: #0969da;
|
|
}
|
|
|
|
.desktop-theme-light .taskbar-clock {
|
|
color: #656d76;
|
|
}
|
|
|
|
.desktop-theme-light .app-drawer {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(24px);
|
|
-webkit-backdrop-filter: blur(24px);
|
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
color: #1f2328;
|
|
}
|
|
|
|
.desktop-theme-light .app-drawer-search input {
|
|
background: rgba(0, 0, 0, 0.04);
|
|
border-color: #d0d7de;
|
|
color: #1f2328;
|
|
}
|
|
|
|
.desktop-theme-light .app-tile {
|
|
color: #1f2328;
|
|
}
|
|
|
|
.desktop-theme-light .app-tile:hover {
|
|
background: rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
.desktop-theme-light .app-category-label {
|
|
color: #656d76;
|
|
}
|
|
|
|
/* Desktop windows — light theme */
|
|
.desktop-theme-light .desktop-window {
|
|
background: rgba(255, 255, 255, 0.92);
|
|
border-color: rgba(0, 0, 0, 0.1);
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.desktop-theme-light .window-titlebar {
|
|
background: rgba(246, 248, 250, 0.95);
|
|
border-bottom-color: rgba(0, 0, 0, 0.06);
|
|
color: #1f2328;
|
|
}
|
|
|
|
.desktop-theme-light .window-title {
|
|
color: #1f2328;
|
|
}
|
|
|
|
.desktop-theme-light .window-btn:hover {
|
|
background: rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
/* Widget canvas — light theme */
|
|
.desktop-theme-light .widget-canvas {
|
|
scrollbar-color: rgba(0, 0, 0, 0.12) transparent;
|
|
}
|
|
|
|
.desktop-theme-light .widget {
|
|
background: rgba(255, 255, 255, 0.82);
|
|
backdrop-filter: blur(24px);
|
|
-webkit-backdrop-filter: blur(24px);
|
|
border-color: rgba(0, 0, 0, 0.08);
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
|
color: #1f2328;
|
|
}
|
|
|
|
.desktop-theme-light .widget:hover {
|
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.desktop-theme-light .widget-header {
|
|
border-bottom-color: rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.desktop-theme-light .widget-title {
|
|
color: #1f2328;
|
|
}
|
|
|
|
.desktop-theme-light .widget-body {
|
|
color: #656d76;
|
|
}
|
|
|
|
/* Tutorial help button light theme */
|
|
.desktop-theme-light .tutorial-help-btn,
|
|
[data-theme="light"] .tutorial-help-btn {
|
|
box-shadow: 0 4px 16px rgba(46, 160, 67, 0.2), 0 2px 6px rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.desktop-theme-light .tutorial-help-menu,
|
|
[data-theme="light"] .tutorial-help-menu {
|
|
background: rgba(255, 255, 255, 0.98);
|
|
border-color: rgba(0, 0, 0, 0.1);
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
.desktop-theme-light .tutorial-help-menu-item,
|
|
[data-theme="light"] .tutorial-help-menu-item {
|
|
color: #1f2328;
|
|
}
|
|
|
|
.desktop-theme-light .tutorial-help-menu-item:hover,
|
|
[data-theme="light"] .tutorial-help-menu-item:hover {
|
|
background: rgba(0, 0, 0, 0.04);
|
|
}
|
|
|
|
/* ═══════════════════════════════════════════════════════════════════════
|
|
AUTO THEME (OS preference)
|
|
═══════════════════════════════════════════════════════════════════════ */
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
[data-theme="auto"] .sidebar-rail {
|
|
background: var(--sidebar-glass-bg-rail, rgba(255, 255, 255, 0.72));
|
|
border-right-color: #d0d7de;
|
|
}
|
|
|
|
[data-theme="auto"] .sidebar-flyout {
|
|
background: var(--sidebar-glass-bg-flyout, rgba(255, 255, 255, 0.82));
|
|
border-right-color: #d0d7de;
|
|
}
|
|
|
|
[data-theme="auto"] .navbar {
|
|
background: rgba(255, 255, 255, 0.9);
|
|
border-bottom-color: #d0d7de;
|
|
}
|
|
|
|
[data-theme="auto"] .content-wrapper {
|
|
background: #f6f8fa;
|
|
}
|
|
|
|
[data-theme="auto"] .card {
|
|
background: #ffffff;
|
|
border-color: #d0d7de;
|
|
}
|
|
}
|