/* Robotics Webapp Styles */
.App {
text-align: center;
min-height: 100vh;
background-color: #f5f5f5;
}
.App-header {
background-color: #282c34;
padding: 20px;
color: white;
}
.App-main {
padding: 20px;
max-width: 1200px;
margin: 0 auto;
}
.robot-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-top: 20px;
}
.robot-card {
background: white;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border: 2px solid transparent;
cursor: pointer;
transition: all 0.2s ease;
}
.robot-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.robot-card.selected {
border-color: #007bff;
background-color: #f8f9fa;
}
.robot-card h3 {
margin-top: 0;
color: #333;
}
.robot-status {
display: inline-block;
padding: 4px 8px;
border-radius: 4px;
font-size: 0.8em;
font-weight: bold;
text-transform: uppercase;
}
.status-connected {
background-color: #28a745;
color: white;
}
.status-disconnected {
background-color: #dc3545;
color: white;
}
.controls-section {
background: white;
border-radius: 8px;
padding: 20px;
margin-top: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.controls-section h2 {
margin-top: 0;
color: #333;
border-bottom: 2px solid #007bff;
padding-bottom: 10px;
}
.control-group {
margin-bottom: 20px;
}
.control-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #555;
}
.control-input {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
}
.control-button {
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
margin-right: 10px;
transition: background-color 0.2s ease;
}
.control-button:hover {
background-color: #0056b3;
}
.control-button:disabled {
background-color: #6c757d;
cursor: not-allowed;
}
.connection-status {
position: fixed;
top: 20px;
right: 20px;
padding: 10px;
border-radius: 4px;
font-weight: bold;
z-index: 1000;
}
.status-online {
background-color: #28a745;
color: white;
}
.status-offline {
background-color: #dc3545;
color: white;
}
.loading {
text-align: center;
padding: 40px;
font-size: 18px;
color: #666;
}
.error {
background-color: #f8d7da;
color: #721c24;
padding: 10px;
border-radius: 4px;
margin: 10px 0;
border: 1px solid #f5c6cb;
}
/* Responsive design */
@media (max-width: 768px) {
.robot-grid {
grid-template-columns: 1fr;
}
.App-main {
padding: 10px;
}
}
