178 lines
2.7 KiB
CSS
178 lines
2.7 KiB
CSS
:root {
|
|
--primary-color: #2196f3;
|
|
--danger-color: #f44336;
|
|
--background-color: #f5f5f5;
|
|
--border-radius: 8px;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
|
|
background-color: var(--background-color);
|
|
color: #333;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1280px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
color: var(--primary-color);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* Connection settings + status card */
|
|
.top-card {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
}
|
|
|
|
.connection-card,
|
|
.status-card {
|
|
background: white;
|
|
border-radius: var(--border-radius);
|
|
padding: 20px;
|
|
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
|
flex: 1 1 300px;
|
|
}
|
|
|
|
.connection-card h2,
|
|
.status-card h2 {
|
|
margin-top: 0;
|
|
color: #444;
|
|
}
|
|
|
|
.option {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.option label {
|
|
width: 120px;
|
|
color: #666;
|
|
}
|
|
|
|
.option input {
|
|
flex: 1;
|
|
padding: 8px 12px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* 统一下拉框与按钮的高度与样式 */
|
|
.option select {
|
|
padding: 10px 12px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
background-color: #fff;
|
|
height: 40px;
|
|
/* 与按钮视觉高度一致 */
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.option select:disabled {
|
|
background-color: #f3f3f3;
|
|
color: #999;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
}
|
|
|
|
button {
|
|
padding: 10px 20px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-weight: 500;
|
|
color: white;
|
|
background-color: var(--primary-color);
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #1976d2;
|
|
}
|
|
|
|
button:disabled {
|
|
background-color: #ccc;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
#disconnect {
|
|
background-color: var(--danger-color);
|
|
}
|
|
|
|
#disconnect:hover {
|
|
background-color: #d32f2f;
|
|
}
|
|
|
|
/* Status display */
|
|
.status-item {
|
|
padding: 10px;
|
|
background: #f8f9fa;
|
|
border-radius: 4px;
|
|
border: 1px solid #ddd;
|
|
margin-bottom: 10px;
|
|
transition: background-color 0.5s;
|
|
}
|
|
|
|
/* Status change animation */
|
|
.status-update {
|
|
animation: flash 0.5s;
|
|
}
|
|
|
|
@keyframes flash {
|
|
0% {
|
|
background-color: #ffeb3b;
|
|
}
|
|
|
|
50% {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
100% {
|
|
background-color: #ffeb3b;
|
|
}
|
|
}
|
|
|
|
/* Video display */
|
|
#media {
|
|
background: #222;
|
|
border-radius: var(--border-radius);
|
|
padding: 20px;
|
|
}
|
|
|
|
video {
|
|
width: 100%;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
#data-channel {
|
|
background: #f8f9fa;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
padding: 15px;
|
|
font-family: monospace;
|
|
height: 200px;
|
|
overflow-y: auto;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.top-card {
|
|
flex-direction: column;
|
|
}
|
|
} |