mirror of
https://github.com/UNITRONIX/BetterDesk.git
synced 2026-09-10 17:45:42 +00:00
UNITRONIX
dd0889e3d6
Introduce a SessionManager for relay-based remote sessions in the Tauri MGMT client: new SessionCommand API, start/stop/session input routing, clipboard/recording/quality controls, and notification read/dismiss state. Wire AppState with new mutexes and show main window on startup. CI: add SBOM generation (anchore) and Trivy vulnerability scan steps. Misc: change console Docker DB path, large README/CHANGELOG updates (chat E2E, unattended access/WOL, i18n expansion, CDAP/SDK docs), and many web-nodejs assets/locales/routes/views/services and server-side changes.
380 lines
8.7 KiB
CSS
380 lines
8.7 KiB
CSS
/* ============================================
|
|
Resource Control — resource-control.css
|
|
============================================ */
|
|
|
|
/* --- Header & Tabs --- */
|
|
.rc-header {
|
|
margin-bottom: 20px;
|
|
}
|
|
.rc-header h2 {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: var(--text-primary, #e6edf3);
|
|
margin: 0 0 16px 0;
|
|
}
|
|
.rc-tabs {
|
|
display: flex;
|
|
gap: 4px;
|
|
border-bottom: 1px solid var(--border-primary, #30363d);
|
|
padding-bottom: 0;
|
|
overflow-x: auto;
|
|
}
|
|
.rc-tab {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 8px 16px;
|
|
background: none;
|
|
border: none;
|
|
border-bottom: 2px solid transparent;
|
|
color: var(--text-secondary, #8b949e);
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
transition: color .2s, border-color .2s;
|
|
}
|
|
.rc-tab:hover {
|
|
color: var(--text-primary, #e6edf3);
|
|
}
|
|
.rc-tab.active {
|
|
color: var(--accent-blue, #58a6ff);
|
|
border-bottom-color: var(--accent-blue, #58a6ff);
|
|
}
|
|
.rc-tab .material-icons-round {
|
|
font-size: 18px;
|
|
}
|
|
|
|
/* --- Content Panels --- */
|
|
.rc-content {
|
|
position: relative;
|
|
}
|
|
.rc-panel {
|
|
display: none;
|
|
}
|
|
.rc-panel.active {
|
|
display: block;
|
|
animation: rcFadeIn .2s ease;
|
|
}
|
|
@keyframes rcFadeIn {
|
|
from { opacity: 0; transform: translateY(4px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* --- Section --- */
|
|
.rc-section {
|
|
background: var(--bg-secondary, #161b22);
|
|
border: 1px solid var(--border-primary, #30363d);
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.rc-section h3 {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: var(--text-primary, #e6edf3);
|
|
margin: 0 0 12px 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.rc-section h3 .material-icons-round {
|
|
font-size: 20px;
|
|
color: var(--accent-blue, #58a6ff);
|
|
}
|
|
.rc-section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.rc-hint {
|
|
color: var(--text-secondary, #8b949e);
|
|
font-size: 13px;
|
|
margin: 0 0 16px 0;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
/* --- Compliance Stats Row --- */
|
|
.rc-compliance-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
|
gap: 12px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.rc-stat-card {
|
|
background: var(--bg-secondary, #161b22);
|
|
border: 1px solid var(--border-primary, #30363d);
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
text-align: center;
|
|
}
|
|
.rc-stat-value {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
color: var(--text-primary, #e6edf3);
|
|
line-height: 1.2;
|
|
}
|
|
.rc-stat-value.green { color: #3fb950; }
|
|
.rc-stat-value.yellow { color: #d29922; }
|
|
.rc-stat-value.red { color: #f85149; }
|
|
.rc-stat-label {
|
|
font-size: 12px;
|
|
color: var(--text-secondary, #8b949e);
|
|
margin-top: 4px;
|
|
text-transform: uppercase;
|
|
letter-spacing: .5px;
|
|
}
|
|
|
|
/* --- Category Grid --- */
|
|
.rc-category-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 12px;
|
|
}
|
|
.rc-category-card {
|
|
background: var(--bg-tertiary, #0d1117);
|
|
border: 1px solid var(--border-primary, #30363d);
|
|
border-radius: 8px;
|
|
padding: 14px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.rc-category-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
.rc-category-icon .material-icons-round {
|
|
font-size: 20px;
|
|
color: #fff;
|
|
}
|
|
.rc-category-icon.usb { background: #388bfd33; }
|
|
.rc-category-icon.usb .material-icons-round { color: #58a6ff; }
|
|
.rc-category-icon.optical { background: #a371f733; }
|
|
.rc-category-icon.optical .material-icons-round { color: #bc8cff; }
|
|
.rc-category-icon.monitor { background: #3fb95033; }
|
|
.rc-category-icon.monitor .material-icons-round { color: #3fb950; }
|
|
.rc-category-icon.disk { background: #d2992233; }
|
|
.rc-category-icon.disk .material-icons-round { color: #d29922; }
|
|
.rc-category-icon.quota { background: #f8514933; }
|
|
.rc-category-icon.quota .material-icons-round { color: #f85149; }
|
|
|
|
.rc-category-info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.rc-category-name {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--text-primary, #e6edf3);
|
|
}
|
|
.rc-category-bar {
|
|
height: 6px;
|
|
background: var(--bg-secondary, #161b22);
|
|
border-radius: 3px;
|
|
margin-top: 6px;
|
|
overflow: hidden;
|
|
}
|
|
.rc-category-fill {
|
|
height: 100%;
|
|
border-radius: 3px;
|
|
transition: width .4s ease;
|
|
}
|
|
.rc-category-fill.green { background: #3fb950; }
|
|
.rc-category-fill.yellow { background: #d29922; }
|
|
.rc-category-fill.red { background: #f85149; }
|
|
|
|
.rc-category-pct {
|
|
font-size: 12px;
|
|
color: var(--text-secondary, #8b949e);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
/* --- Device Table --- */
|
|
.rc-device-filter {
|
|
margin-bottom: 12px;
|
|
}
|
|
.rc-search {
|
|
width: 100%;
|
|
max-width: 360px;
|
|
padding: 8px 12px;
|
|
background: var(--bg-tertiary, #0d1117);
|
|
border: 1px solid var(--border-primary, #30363d);
|
|
border-radius: 6px;
|
|
color: var(--text-primary, #e6edf3);
|
|
font-size: 13px;
|
|
}
|
|
.rc-search:focus {
|
|
outline: none;
|
|
border-color: var(--accent-blue, #58a6ff);
|
|
}
|
|
.rc-table-scroll {
|
|
overflow-x: auto;
|
|
}
|
|
.rc-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 13px;
|
|
}
|
|
.rc-table th {
|
|
text-align: left;
|
|
padding: 10px 12px;
|
|
font-weight: 600;
|
|
color: var(--text-secondary, #8b949e);
|
|
border-bottom: 1px solid var(--border-primary, #30363d);
|
|
white-space: nowrap;
|
|
font-size: 12px;
|
|
text-transform: uppercase;
|
|
letter-spacing: .5px;
|
|
}
|
|
.rc-table td {
|
|
padding: 10px 12px;
|
|
color: var(--text-primary, #e6edf3);
|
|
border-bottom: 1px solid rgba(48, 54, 61, .5);
|
|
white-space: nowrap;
|
|
}
|
|
.rc-table tr:hover td {
|
|
background: rgba(88, 166, 255, .04);
|
|
}
|
|
.rc-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 2px 8px;
|
|
border-radius: 12px;
|
|
font-size: 11px;
|
|
font-weight: 500;
|
|
}
|
|
.rc-badge.compliant { background: #3fb95020; color: #3fb950; }
|
|
.rc-badge.partial { background: #d2992220; color: #d29922; }
|
|
.rc-badge.noncompliant { background: #f8514920; color: #f85149; }
|
|
.rc-badge.na { background: #8b949e18; color: #8b949e; }
|
|
.rc-badge .material-icons-round {
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* --- Policy Forms --- */
|
|
.rc-policy-form {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 16px;
|
|
max-width: 600px;
|
|
}
|
|
.rc-form-group label {
|
|
display: block;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--text-primary, #e6edf3);
|
|
margin-bottom: 6px;
|
|
}
|
|
.rc-form-group select,
|
|
.rc-form-group input[type="text"],
|
|
.rc-form-group input[type="number"],
|
|
.rc-form-group textarea {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
background: var(--bg-tertiary, #0d1117);
|
|
border: 1px solid var(--border-primary, #30363d);
|
|
border-radius: 6px;
|
|
color: var(--text-primary, #e6edf3);
|
|
font-size: 13px;
|
|
font-family: inherit;
|
|
}
|
|
.rc-form-group select:focus,
|
|
.rc-form-group input:focus,
|
|
.rc-form-group textarea:focus {
|
|
outline: none;
|
|
border-color: var(--accent-blue, #58a6ff);
|
|
}
|
|
.rc-form-group textarea {
|
|
resize: vertical;
|
|
}
|
|
.rc-toggle-label {
|
|
display: flex !important;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
}
|
|
.rc-toggle-label input[type="checkbox"] {
|
|
width: 18px;
|
|
height: 18px;
|
|
accent-color: var(--accent-blue, #58a6ff);
|
|
}
|
|
.rc-range-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.rc-range-group input[type="range"] {
|
|
flex: 1;
|
|
accent-color: var(--accent-blue, #58a6ff);
|
|
}
|
|
.rc-range-group span {
|
|
min-width: 44px;
|
|
text-align: right;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: var(--text-primary, #e6edf3);
|
|
}
|
|
|
|
/* --- Inline Actions --- */
|
|
.rc-action-btn {
|
|
background: none;
|
|
border: 1px solid var(--border-primary, #30363d);
|
|
border-radius: 6px;
|
|
padding: 4px 10px;
|
|
color: var(--accent-blue, #58a6ff);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition: background .15s, border-color .15s;
|
|
}
|
|
.rc-action-btn:hover {
|
|
background: rgba(88, 166, 255, .1);
|
|
border-color: var(--accent-blue, #58a6ff);
|
|
}
|
|
|
|
/* --- Empty State --- */
|
|
.rc-empty {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
color: var(--text-secondary, #8b949e);
|
|
}
|
|
.rc-empty .material-icons-round {
|
|
font-size: 48px;
|
|
margin-bottom: 12px;
|
|
opacity: .4;
|
|
}
|
|
.rc-empty p {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* --- Responsive --- */
|
|
@media (max-width: 768px) {
|
|
.rc-tabs {
|
|
gap: 2px;
|
|
}
|
|
.rc-tab {
|
|
padding: 6px 10px;
|
|
font-size: 12px;
|
|
}
|
|
.rc-tab .material-icons-round {
|
|
font-size: 16px;
|
|
}
|
|
.rc-compliance-row {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
.rc-category-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.rc-table th:nth-child(n+4),
|
|
.rc-table td:nth-child(n+4) {
|
|
display: none;
|
|
}
|
|
}
|