MayaTheShy/remoteturtle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Update Control Panel styles for improved aesthetics and contrast

Browse Source
This commit is contained in:
MayaTheShy
2026-02-16 02:14:23 -05:00
parent 0296253149
commit c492529c1d
1 changed files with 22 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
client/src/components/ControlPanel.css
View File

@@ -455,9 +455,9 @@
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.5rem;
padding: 1rem; padding: 1rem;
background: #f9fafb; background: #1f2937;
border-radius: 0.5rem; border-radius: 0.5rem;
border: 1px solid #e5e7eb; border: 1px solid #374151;
} }
.movement-row { .movement-row {
@@ -473,9 +473,9 @@
.movement-controls button { .movement-controls button {
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
border: 2px solid #e5e7eb; border: 2px solid #374151;
background: #ffffff; background: #111827;
color: #3b82f6; color: #60a5fa;
border-radius: 0.5rem; border-radius: 0.5rem;
font-size: 1.25rem; font-size: 1.25rem;
cursor: pointer; cursor: pointer;
@@ -483,13 +483,13 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
} }
.movement-controls button:hover { .movement-controls button:hover {
background: #eff6ff; background: #1f2937;
border-color: #3b82f6; border-color: #60a5fa;
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2); box-shadow: 0 0 15px rgba(96, 165, 250, 0.3);
transform: scale(1.05); transform: scale(1.05);
} }
@@ -506,9 +506,9 @@
.action-btn { .action-btn {
padding: 0.75rem; padding: 0.75rem;
border: 2px solid #e5e7eb; border: 2px solid #374151;
background: #ffffff; background: #1f2937;
color: #3b82f6; color: #60a5fa;
border-radius: 0.5rem; border-radius: 0.5rem;
font-size: 0.8125rem; font-size: 0.8125rem;
font-weight: 600; font-weight: 600;
@@ -519,13 +519,14 @@
justify-content: center; justify-content: center;
gap: 0.375rem; gap: 0.375rem;
white-space: nowrap; white-space: nowrap;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
} }
.action-btn:hover { .action-btn:hover {
border-color: #3b82f6; border-color: #60a5fa;
background: #111827;
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2); box-shadow: 0 4px 8px rgba(96, 165, 250, 0.2);
} }
.action-btn.dig { .action-btn.dig {
@@ -577,15 +578,15 @@
align-items: center; align-items: center;
gap: 0.625rem; gap: 0.625rem;
padding: 0.625rem; padding: 0.625rem;
background: #f9fafb; background: #1f2937;
border: 1px solid #e5e7eb; border: 1px solid #374151;
border-radius: 0.375rem; border-radius: 0.375rem;
transition: all 0.2s; transition: all 0.2s;
} }
.inventory-item:hover { .inventory-item:hover {
border-color: #3b82f6; border-color: #60a5fa;
background: #eff6ff; background: #1e3a5f;
transform: translateX(4px); transform: translateX(4px);
} }
@@ -596,13 +597,13 @@
.item-name { .item-name {
flex: 1; flex: 1;
color: #111827; color: #e5e7eb;
font-size: 0.8125rem; font-size: 0.8125rem;
text-transform: capitalize; text-transform: capitalize;
} }
.item-count { .item-count {
color: #6b7280; color: #9ca3af;
font-weight: 600; font-weight: 600;
font-family: 'Courier New', monospace; font-family: 'Courier New', monospace;
font-size: 0.8125rem; font-size: 0.8125rem;