162 lines
2.6 KiB
CSS
162 lines
2.6 KiB
CSS
/* Galaxy Strike Online - Main Styles */
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--primary-color: #00d4ff;
|
|
--secondary-color: #ff6b35;
|
|
--accent-color: #ff00ff;
|
|
--bg-primary: #0a0e1a;
|
|
--bg-secondary: #151923;
|
|
--bg-tertiary: #1e2433;
|
|
--text-primary: #ffffff;
|
|
--text-secondary: #b8c5d6;
|
|
--text-muted: #6b7c93;
|
|
--border-color: #2a3241;
|
|
--success-color: #00ff88;
|
|
--warning-color: #ffaa00;
|
|
--error-color: #ff3366;
|
|
--card-bg: rgba(30, 36, 51, 0.8);
|
|
--hover-bg: rgba(0, 212, 255, 0.1);
|
|
--gradient-primary: linear-gradient(135deg, #00d4ff, #0099cc);
|
|
--gradient-secondary: linear-gradient(135deg, #ff6b35, #ff4500);
|
|
}
|
|
|
|
body {
|
|
font-family: "Space Mono", monospace;
|
|
background: var(--bg-primary);
|
|
color: var(--text-primary);
|
|
overflow: hidden;
|
|
background-image:
|
|
radial-gradient(
|
|
circle at 20% 50%,
|
|
rgba(0, 212, 255, 0.1) 0%,
|
|
transparent 50%
|
|
),
|
|
radial-gradient(
|
|
circle at 80% 80%,
|
|
rgba(255, 107, 53, 0.1) 0%,
|
|
transparent 50%
|
|
),
|
|
radial-gradient(
|
|
circle at 40% 20%,
|
|
rgba(255, 0, 255, 0.05) 0%,
|
|
transparent 50%
|
|
);
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.server-controls {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.server-filters {
|
|
justify-content: center;
|
|
}
|
|
|
|
.server-confirmation {
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
|
|
.confirm-actions-left,
|
|
.confirm-actions-right {
|
|
width: 100%;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.server-details {
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(30px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%,
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.dashboard-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.dungeons-container {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.base-container {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.inventory-container {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.main-nav {
|
|
overflow-x: scroll;
|
|
}
|
|
|
|
.resources {
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.resource {
|
|
padding: 0.25rem 0.5rem;
|
|
font-size: 0.8rem;
|
|
}
|
|
|
|
.game-title {
|
|
font-size: 2rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.header-center {
|
|
display: none;
|
|
}
|
|
|
|
.nav-btn span {
|
|
display: none;
|
|
}
|
|
|
|
.nav-btn {
|
|
padding: 0.5rem;
|
|
width: 100px;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
*::-webkit-scrollbar {
|
|
width: 0px;
|
|
background: transparent;
|
|
}
|
|
|
|
* {
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|