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

feat: Refine Control Panel styling with adjusted padding, margins, and button sizes for improved layout and usability

Browse Source
This commit is contained in:
MayaTheShy
2026-02-16 02:05:24 -05:00
parent e0495eeb9c
commit 6534af4516
1 changed files with 30 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -247,7 +247,7 @@
.turtle-details { .turtle-details {
flex: 1; flex: 1;
padding: 2.5rem; padding: 1.5rem;
overflow-y: auto; overflow-y: auto;
background: linear-gradient(180deg, #0f172a 0%, #020617 100%); background: linear-gradient(180deg, #0f172a 0%, #020617 100%);
} }
@@ -314,8 +314,8 @@
} }
.detail-section { .detail-section {
margin-bottom: 2rem; margin-bottom: 1.25rem;
padding: 1.75rem; padding: 1.25rem;
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
border-radius: 0.75rem; border-radius: 0.75rem;
border: 1px solid #334155; border: 1px solid #334155;
@@ -329,8 +329,8 @@
} }
.detail-section h3 { .detail-section h3 {
font-size: 1.375rem; font-size: 1.125rem;
margin-bottom: 1.25rem; margin-bottom: 1rem;
color: #60a5fa; color: #60a5fa;
font-weight: 700; font-weight: 700;
display: flex; display: flex;
@@ -384,15 +384,15 @@
.command-grid { .command-grid {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 0.75rem; gap: 0.5rem;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.command-btn { .command-btn {
padding: 0.875rem 1rem; padding: 0.625rem 0.75rem;
border: none; border: none;
border-radius: 0.5rem; border-radius: 0.375rem;
font-size: 0.95rem; font-size: 0.8125rem;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
@@ -400,7 +400,8 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 0.5rem; gap: 0.375rem;
white-space: nowrap;
} }
.command-btn:hover { .command-btn:hover {
@@ -449,30 +450,30 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: 0.5rem; gap: 0.375rem;
padding: 1rem; padding: 0.75rem;
background: #1e293b; background: #1e293b;
border-radius: 0.5rem; border-radius: 0.5rem;
} }
.movement-row { .movement-row {
display: flex; display: flex;
gap: 0.5rem; gap: 0.375rem;
justify-content: center; justify-content: center;
} }
.movement-row.vertical { .movement-row.vertical {
gap: 1rem; gap: 0.75rem;
} }
.movement-controls button { .movement-controls button {
width: 3.5rem; width: 2.75rem;
height: 3.5rem; height: 2.75rem;
border: 2px solid #334155; border: 2px solid #334155;
background: #0f172a; background: #0f172a;
color: #60a5fa; color: #60a5fa;
border-radius: 0.5rem; border-radius: 0.375rem;
font-size: 1.5rem; font-size: 1.25rem;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
display: flex; display: flex;
@@ -495,19 +496,24 @@
.action-grid { .action-grid {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
gap: 0.75rem; gap: 0.5rem;
} }
.action-btn { .action-btn {
padding: 1rem; padding: 0.625rem 0.75rem;
border: 2px solid #334155; border: 2px solid #334155;
border-radius: 0.5rem; background: #0f172a;
font-size: 0.95rem; color: #60a5fa;
border-radius: 0.375rem;
font-size: 0.8125rem;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
color: white; display: flex;
background: #1e293b; align-items: center;
justify-content: center;
gap: 0.375rem;
white-space: nowrap;
} }
.action-btn:hover { .action-btn:hover {