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

feat: Update Control Panel color scheme for improved contrast and aesthetics

Browse Source
This commit is contained in:
MayaTheShy
2026-02-16 02:13:30 -05:00
parent bd96333d22
commit 3589813dc6
1 changed files with 28 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,8 +2,8 @@
height: 100%;
display: flex;
flex-direction: column;
background: #ffffff;
color: #1f2937;
background: #111827;
color: #e5e7eb;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}
@@ -12,15 +12,15 @@
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
background: #ffffff;
border-bottom: 1px solid #e5e7eb;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
background: #1f2937;
border-bottom: 1px solid #374151;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.panel-header h1 {
font-size: 1.25rem;
font-weight: 600;
color: #111827;
color: #f9fafb;
letter-spacing: -0.025em;
}
@@ -77,10 +77,10 @@
.turtle-list {
width: 100%;
border-bottom: 1px solid #e5e7eb;
border-bottom: 1px solid #374151;
display: flex;
flex-direction: row;
background: #f9fafb;
background: #1f2937;
overflow-x: auto;
padding: 0.75rem;
gap: 0.75rem;
@@ -103,17 +103,17 @@
}
.turtle-cards::-webkit-scrollbar-track {
background: #f3f4f6;
background: #1f2937;
border-radius: 3px;
}
.turtle-cards::-webkit-scrollbar-thumb {
background: #d1d5db;
background: #4b5563;
border-radius: 3px;
}
.turtle-cards::-webkit-scrollbar-thumb:hover {
background: #9ca3af;
background: #6b7280;
}
.empty-state {
@@ -138,8 +138,8 @@
}
.turtle-card {
background: #ffffff;
border: 2px solid #e5e7eb;
background: #1f2937;
border: 2px solid #374151;
border-radius: 0.5rem;
padding: 0.875rem;
cursor: pointer;
@@ -154,9 +154,9 @@
}
.turtle-card:hover {
border-color: #3b82f6;
border-color: #60a5fa;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
.turtle-card:hover::before {
@@ -164,9 +164,9 @@
}
.turtle-card.selected {
border-color: #3b82f6;
background: #eff6ff;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
border-color: #60a5fa;
background: #1e3a5f;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.turtle-card.selected::before {
@@ -179,13 +179,13 @@
align-items: center;
margin-bottom: 0.625rem;
padding-bottom: 0.625rem;
border-bottom: 1px solid #e5e7eb;
border-bottom: 1px solid #374151;
}
.turtle-header h3 {
font-size: 0.875rem;
font-weight: 700;
color: #111827;
color: #f9fafb;
display: flex;
align-items: center;
gap: 0.375rem;
@@ -217,13 +217,13 @@
align-items: center;
font-size: 0.75rem;
padding: 0.375rem;
background: #f9fafb;
background: #111827;
border-radius: 0.25rem;
border: 1px solid #e5e7eb;
border: 1px solid #374151;
}
.turtle-stats .label {
color: #6b7280;
color: #9ca3af;
font-weight: 500;
display: flex;
align-items: center;
@@ -231,7 +231,7 @@
}
.turtle-stats .value {
color: #111827;
color: #f9fafb;
font-weight: 600;
font-family: 'Courier New', monospace;
font-size: 0.75rem;
@@ -241,7 +241,7 @@
flex: 1;
padding: 1.5rem;
overflow-y: auto;
background: #ffffff;
background: #111827;
}
.turtle-details::-webkit-scrollbar {
@@ -249,17 +249,17 @@
}
.turtle-details::-webkit-scrollbar-track {
background: #f3f4f6;
background: #1f2937;
border-radius: 4px;
}
.turtle-details::-webkit-scrollbar-thumb {
background: #d1d5db;
background: #4b5563;
border-radius: 4px;
}
.turtle-details::-webkit-scrollbar-thumb:hover {
background: #9ca3af;
background: #6b7280;
}
.turtle-details.empty {