mirror of
https://github.com/UNITRONIX/BetterDesk.git
synced 2026-09-11 13:49:03 +00:00
UNITRONIX
160 lines
3.4 KiB
CSS
160 lines
3.4 KiB
CSS
/**
|
|
* BetterDesk Console — Desktop Widget Overrides
|
|
* Applied only when content is rendered inside desktop mode iframes (embed=1).
|
|
* Provides desktop-optimized spacing, typography, and layout adjustments.
|
|
*
|
|
* This stylesheet is loaded ONLY in embed mode (iframe windows) and overrides
|
|
* the default web panel styles with desktop-friendly values.
|
|
*/
|
|
|
|
/* ============ CSS Custom Properties (Desktop) ============ */
|
|
|
|
:root {
|
|
--dw-bg: rgba(13, 17, 23, 0.95);
|
|
--dw-text: #e6edf3;
|
|
--dw-text-secondary: #8b949e;
|
|
--dw-accent: #58a6ff;
|
|
--dw-border: rgba(48, 54, 61, 0.5);
|
|
--dw-radius: 8px;
|
|
--dw-spacing: 16px;
|
|
--dw-font-size: 14px;
|
|
}
|
|
|
|
/* ============ Base Overrides ============ */
|
|
|
|
body.embed-mode {
|
|
background: transparent;
|
|
font-size: var(--dw-font-size);
|
|
}
|
|
|
|
body.embed-mode .main-content {
|
|
padding: var(--dw-spacing);
|
|
max-width: 100%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Remove web-panel elements that don't belong in desktop windows */
|
|
body.embed-mode .breadcrumb,
|
|
body.embed-mode .session-bar,
|
|
body.embed-mode .page-header-actions .desktop-toggle-btn,
|
|
body.embed-mode .footer {
|
|
display: none !important;
|
|
}
|
|
|
|
/* ============ Typography ============ */
|
|
|
|
body.embed-mode h1 {
|
|
font-size: 1.4rem;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
body.embed-mode h2 {
|
|
font-size: 1.15rem;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
body.embed-mode h3 {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
/* ============ Cards & Panels ============ */
|
|
|
|
body.embed-mode .card,
|
|
body.embed-mode .panel,
|
|
body.embed-mode .stat-card {
|
|
border-radius: var(--dw-radius);
|
|
border-color: var(--dw-border);
|
|
}
|
|
|
|
/* ============ Tables ============ */
|
|
|
|
body.embed-mode .table-responsive {
|
|
border-radius: var(--dw-radius);
|
|
}
|
|
|
|
body.embed-mode table th,
|
|
body.embed-mode table td {
|
|
padding: 10px 14px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* ============ Buttons ============ */
|
|
|
|
body.embed-mode .btn,
|
|
body.embed-mode button {
|
|
min-height: 36px;
|
|
min-width: 36px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* ============ Form Elements ============ */
|
|
|
|
body.embed-mode input,
|
|
body.embed-mode select,
|
|
body.embed-mode textarea {
|
|
font-size: var(--dw-font-size);
|
|
padding: 8px 12px;
|
|
border-radius: var(--dw-radius);
|
|
}
|
|
|
|
/* ============ Spacing Adjustments ============ */
|
|
|
|
body.embed-mode .page-header {
|
|
margin-bottom: var(--dw-spacing);
|
|
padding-bottom: 12px;
|
|
}
|
|
|
|
body.embed-mode .section,
|
|
body.embed-mode .card-group {
|
|
gap: var(--dw-spacing);
|
|
}
|
|
|
|
/* ============ Scrollbar (Desktop-optimized thin) ============ */
|
|
|
|
body.embed-mode ::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
body.embed-mode ::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
|
|
body.embed-mode ::-webkit-scrollbar-thumb {
|
|
background: rgba(139, 148, 158, 0.3);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
body.embed-mode ::-webkit-scrollbar-thumb:hover {
|
|
background: rgba(139, 148, 158, 0.5);
|
|
}
|
|
|
|
/* ============ Status Bar Area ============ */
|
|
|
|
body.embed-mode .page-footer,
|
|
body.embed-mode .status-bar {
|
|
font-size: 11px;
|
|
padding: 6px var(--dw-spacing);
|
|
border-top: 1px solid var(--dw-border);
|
|
color: var(--dw-text-secondary);
|
|
}
|
|
|
|
/* ============ Compact Mode for Small Windows ============ */
|
|
|
|
@container (max-width: 600px) {
|
|
body.embed-mode .main-content {
|
|
padding: 10px;
|
|
}
|
|
|
|
body.embed-mode h1 {
|
|
font-size: 1.15rem;
|
|
}
|
|
|
|
body.embed-mode table th,
|
|
body.embed-mode table td {
|
|
padding: 6px 8px;
|
|
font-size: 12px;
|
|
}
|
|
}
|