mirror of
https://github.com/UNITRONIX/BetterDesk.git
synced 2026-09-10 17:45:42 +00:00
UNITRONIX
736a35476d
Updated the accessibility styles in the sidebar and main content areas to enhance readability and usability. Introduced new CSS variables for sidebar navigation, including background colors, button styles, and category accents. Adjusted typography scaling and layout dimensions to ensure consistent user experience across different accessibility settings.
279 lines
7.4 KiB
CSS
279 lines
7.4 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: #f0f3f6;
|
|
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-rail-bg, #f0f3f6);
|
|
}
|
|
|
|
[data-theme="light"] .sidebar-flyout,
|
|
.theme-light .sidebar-flyout {
|
|
background: var(--sidebar-flyout-bg, #ffffff);
|
|
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: #f0f3f6;
|
|
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;
|
|
}
|
|
}
|