style: Remove view controls for improved layout consistency and responsiveness

This commit is contained in:
MayaTheShy
2026-02-20 03:05:18 -05:00
parent 586d231720
commit 0b61d8b2dd

View File

@@ -7,42 +7,6 @@
background: #2c2c2c;
}
.view-controls {
display: flex;
gap: 0.5rem;
padding: 0.75rem;
background: #3b3b3b;
border-bottom: 3px solid #1a1a1a;
box-shadow: inset 0 -2px 0 #555;
}
.view-controls button {
padding: 0.5rem 1rem;
border: 2px solid #1a1a1a;
background: #6b6b6b;
color: #e0e0e0;
border-radius: 0;
font-size: 0.875rem;
font-weight: 700;
cursor: pointer;
transition: all 0.1s;
font-family: 'Silkscreen', 'Courier New', monospace;
text-shadow: 1px 1px 0 #1a1a1a;
box-shadow: inset 0 -2px 0 #444, inset 0 2px 0 #888;
}
.view-controls button:hover {
background: #7b7b7b;
box-shadow: inset 0 -2px 0 #555, inset 0 2px 0 #999;
}
.view-controls button.active {
background: #4a8c2a;
color: white;
box-shadow: inset 0 2px 0 #6ab04c, inset 0 -2px 0 #2d6b1a;
border-color: #1a1a1a;
}
.app-content {
flex: 1;
display: flex;
@@ -63,14 +27,6 @@
width: 50%;
}
.app-content.map .panel-container {
display: none;
}
.app-content.panel .map-container {
display: none;
}
.map-container {
position: relative;
background: #2c2c2c;
@@ -158,28 +114,9 @@
width: 100%;
flex: 1;
}
.view-controls {
flex-wrap: wrap;
}
}
@media (max-width: 768px) {
/* Mobile: Force single view mode with tabs */
.view-controls {
position: sticky;
top: 0;
z-index: 100;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.view-controls button {
flex: 1;
min-width: 0;
padding: 0.75rem 0.5rem;
font-size: 0.8125rem;
}
.app-content.split {
flex-direction: column;
}
@@ -200,17 +137,6 @@
}
@media (max-width: 480px) {
/* Small mobile: Optimize spacing */
.view-controls {
padding: 0.5rem;
gap: 0.375rem;
}
.view-controls button {
padding: 0.625rem 0.375rem;
font-size: 0.75rem;
}
.app-content.split .map-container {
height: 40vh;
}
@@ -279,10 +205,6 @@
/* High contrast mode */
@media (prefers-contrast: high) {
.view-controls button {
border: 2px solid currentColor;
}
.turtle-card {
border-width: 3px;
}