191 lines
3.6 KiB
CSS
191 lines
3.6 KiB
CSS
/* RustDesk web client — minimal, dark theme to match the admin dashboard. */
|
|
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100%;
|
|
background: #0f172a;
|
|
color: #e2e8f0;
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
|
}
|
|
|
|
#root {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.placeholder {
|
|
background: #1e293b;
|
|
border: 1px solid #334155;
|
|
border-radius: 8px;
|
|
padding: 32px 40px;
|
|
max-width: 540px;
|
|
text-align: center;
|
|
}
|
|
|
|
.placeholder h1 {
|
|
margin: 0 0 16px;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.placeholder p {
|
|
margin: 8px 0;
|
|
font-size: 14px;
|
|
color: #cbd5e1;
|
|
}
|
|
|
|
.placeholder code {
|
|
background: #0f172a;
|
|
padding: 2px 6px;
|
|
border-radius: 3px;
|
|
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
|
font-size: 12px;
|
|
color: #7dd3fc;
|
|
}
|
|
|
|
.muted { color: #64748b !important; font-size: 12px !important; }
|
|
|
|
.pw-form {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-top: 16px;
|
|
align-items: stretch;
|
|
}
|
|
.pw-form input[type="password"] {
|
|
flex: 1;
|
|
background: #0f172a;
|
|
border: 1px solid #334155;
|
|
color: #e2e8f0;
|
|
padding: 8px 10px;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
font-family: inherit;
|
|
}
|
|
.pw-form input[type="password"]:focus {
|
|
outline: none;
|
|
border-color: #38bdf8;
|
|
}
|
|
.pw-form button {
|
|
background: #0284c7;
|
|
border: 0;
|
|
color: #f0f9ff;
|
|
padding: 8px 16px;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
}
|
|
.pw-form button:hover { background: #0369a1; }
|
|
|
|
/* Separator between "waiting for approval / cancel" and the unattended-
|
|
* password override on the awaiting-approval screen. */
|
|
.pw-divider {
|
|
border: none;
|
|
border-top: 1px solid rgba(148, 163, 184, 0.2);
|
|
margin: 20px 0 12px;
|
|
}
|
|
|
|
.error-inline {
|
|
background: rgba(220, 38, 38, 0.15);
|
|
border: 1px solid rgba(220, 38, 38, 0.4);
|
|
color: #fca5a5;
|
|
padding: 8px 10px;
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
/* ------- Live session ------- */
|
|
|
|
.session {
|
|
position: fixed;
|
|
inset: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: #000;
|
|
}
|
|
|
|
.rd-canvas {
|
|
flex: 1;
|
|
width: 100%;
|
|
height: 100%;
|
|
/* Letterbox: keep aspect ratio while fitting the browser viewport. */
|
|
object-fit: contain;
|
|
display: block;
|
|
background: #000;
|
|
}
|
|
|
|
.hud {
|
|
position: fixed;
|
|
top: 8px;
|
|
left: 8px;
|
|
background: rgba(0, 0, 0, 0.55);
|
|
color: #cbd5e1;
|
|
font-size: 11px;
|
|
font-family: ui-monospace, "SF Mono", Menlo, monospace;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
z-index: 10;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.hud-fps {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.hud-btn {
|
|
background: #334155;
|
|
border: 0;
|
|
color: #e2e8f0;
|
|
padding: 3px 8px;
|
|
border-radius: 3px;
|
|
font-size: 11px;
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
}
|
|
.hud-btn:hover { background: #475569; }
|
|
|
|
.hud-select {
|
|
background: #334155;
|
|
border: 0;
|
|
color: #e2e8f0;
|
|
padding: 2px 4px;
|
|
border-radius: 3px;
|
|
font-size: 11px;
|
|
font-family: inherit;
|
|
cursor: pointer;
|
|
}
|
|
.hud-select:hover { background: #475569; }
|
|
|
|
.reconnect-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(15, 23, 42, 0.65);
|
|
backdrop-filter: blur(2px);
|
|
-webkit-backdrop-filter: blur(2px);
|
|
color: #e2e8f0;
|
|
font-family: inherit;
|
|
font-size: 15px;
|
|
z-index: 20;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.error {
|
|
background: rgba(220, 38, 38, 0.15);
|
|
border: 1px solid rgba(220, 38, 38, 0.4);
|
|
border-radius: 8px;
|
|
padding: 24px 32px;
|
|
color: #fca5a5;
|
|
max-width: 640px;
|
|
}
|
|
.error h1 { margin: 0 0 12px; font-size: 18px; }
|
|
.error pre { white-space: pre-wrap; font-size: 13px; }
|