9874561410
Move project files from uzdb/ subdirectory to root directory for cleaner project structure.
Changes:
- Move frontend/ to root
- Move internal/ to root
- Move build/ to root
- Move all config files (go.mod, wails.json, etc.) to root
- Remove redundant uzdb/ subdirectory nesting
Project structure is now:
├── frontend/ # React application
├── internal/ # Go backend
├── build/ # Wails build assets
├── doc/ # Design documentation
├── main.go # Entry point
└── ...
🤖 Generated with Qoder
74 lines
1.5 KiB
CSS
74 lines
1.5 KiB
CSS
/**
|
|
* StatusIndicator Component Styles
|
|
*/
|
|
|
|
.status-indicator {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
margin-right: var(--space-2);
|
|
transition: all var(--transition-normal) var(--ease-in-out);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Connected state - Green with glow */
|
|
.status-indicator.status-connected {
|
|
background-color: var(--success);
|
|
box-shadow: 0 0 4px var(--success);
|
|
}
|
|
|
|
/* Active state - Blue with pulse animation */
|
|
.status-indicator.status-active {
|
|
background-color: var(--primary);
|
|
box-shadow: 0 0 8px var(--primary);
|
|
animation: pulse 2s infinite;
|
|
}
|
|
|
|
/* Disconnected state - Gray with border */
|
|
.status-indicator.status-disconnected {
|
|
background-color: var(--text-muted);
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
/* Connecting state - Orange spinning animation */
|
|
.status-indicator.status-connecting {
|
|
width: 10px;
|
|
height: 10px;
|
|
border: 2px solid var(--warning);
|
|
border-top-color: transparent;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
/* Error state - Red with help cursor */
|
|
.status-indicator.status-error {
|
|
background-color: var(--error);
|
|
cursor: help;
|
|
}
|
|
|
|
/* Hover effect for clickable indicators */
|
|
.status-indicator[tabindex]:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.status-indicator[tabindex]:focus-visible {
|
|
outline: 2px solid var(--primary);
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|