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

style: Revamp MiningAreasPanel.css for improved aesthetics and consistency with Minecraft theme

Browse Source
This commit is contained in:
MayaTheShy
2026-02-20 02:58:38 -05:00
parent b06f878ca0
commit 1d99ba534a
1 changed files with 111 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

208
client/src/components/MiningAreasPanel.css
View File

@@ -1,10 +1,15 @@
/* ============================================
Minecraft-Themed Mining Areas Panel
============================================ */
.mining-areas-panel { .mining-areas-panel {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: #0f172a; background: #2c2c2c;
color: #e2e8f0; color: #e0e0e0;
overflow: hidden; overflow: hidden;
font-family: 'Silkscreen', 'Courier New', monospace;
} }
.panel-header { .panel-header {
@@ -12,79 +17,86 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
background: #1e293b; background: #6b4e28;
border-bottom: 2px solid #334155; border-bottom: 3px solid #1a1a1a;
box-shadow: inset 0 2px 0 #8b6d3c, inset 0 -2px 0 #4a3520;
} }
.panel-header h2 { .panel-header h2 {
margin: 0; margin: 0;
font-size: 1.5rem; font-size: 1.5rem;
color: #f8fafc; color: #ffff55;
text-shadow: 2px 2px 0 #1a1a1a;
} }
.btn-create { .btn-create {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
background: #3b82f6; background: #4a8c2a;
color: white; color: white;
border: none; border: 2px solid #1a1a1a;
border-radius: 6px;
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 600; font-weight: 700;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.1s;
font-family: 'Silkscreen', 'Courier New', monospace;
text-shadow: 1px 1px 0 #1a1a1a;
box-shadow: inset 0 2px 0 #6ab04c, inset 0 -2px 0 #2d6b1a;
} }
.btn-create:hover { .btn-create:hover {
background: #2563eb; background: #5a9c3a;
transform: translateY(-1px); box-shadow: inset 0 2px 0 #7bc05c, inset 0 -2px 0 #3d7b2a;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
} }
/* Filter buttons */ /* Filter buttons */
.filter-buttons { .filter-buttons {
display: flex; display: flex;
gap: 0.5rem; gap: 0.25rem;
padding: 1rem 1.5rem; padding: 1rem 1.5rem;
background: #1e293b; background: #3b3b3b;
border-bottom: 1px solid #334155; border-bottom: 2px solid #1a1a1a;
flex-wrap: wrap; flex-wrap: wrap;
} }
.filter-btn { .filter-btn {
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
background: #334155; background: #6b6b6b;
color: #94a3b8; color: #e0e0e0;
border: none; border: 2px solid #1a1a1a;
border-radius: 6px;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 700;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.1s;
white-space: nowrap; white-space: nowrap;
font-family: 'Silkscreen', 'Courier New', monospace;
text-shadow: 1px 1px 0 #1a1a1a;
box-shadow: inset 0 -2px 0 #444, inset 0 2px 0 #888;
} }
.filter-btn:hover { .filter-btn:hover {
background: #475569; background: #7b7b7b;
color: #e2e8f0; box-shadow: inset 0 -2px 0 #555, inset 0 2px 0 #999;
} }
.filter-btn.active { .filter-btn.active {
background: #3b82f6; background: #4a8c2a;
color: white; color: white;
box-shadow: inset 0 2px 0 #6ab04c, inset 0 -2px 0 #2d6b1a;
} }
/* Create form */ /* Create form */
.create-form { .create-form {
padding: 1.5rem; padding: 1.5rem;
background: #1e293b; background: #3b3b3b;
border-bottom: 1px solid #334155; border-bottom: 2px solid #1a1a1a;
max-height: 60vh; max-height: 60vh;
overflow-y: auto; overflow-y: auto;
} }
.create-form h3 { .create-form h3 {
margin: 0 0 1rem 0; margin: 0 0 1rem 0;
color: #f8fafc; color: #ffaa00;
text-shadow: 1px 1px 0 #1a1a1a;
} }
.form-group { .form-group {
@@ -94,28 +106,27 @@
.form-group label { .form-group label {
display: block; display: block;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
color: #cbd5e1; color: #e0e0e0;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 600;
} }
.form-group input, .form-group input,
.form-group select { .form-group select {
width: 100%; width: 100%;
padding: 0.625rem; padding: 0.625rem;
background: #0f172a; background: #1a1a1a;
border: 1px solid #334155; border: 2px solid #4b4b4b;
border-radius: 6px; color: #e0e0e0;
color: #e2e8f0;
font-size: 0.875rem; font-size: 0.875rem;
transition: all 0.2s; transition: all 0.1s;
font-family: 'Silkscreen', 'Courier New', monospace;
} }
.form-group input:focus, .form-group input:focus,
.form-group select:focus { .form-group select:focus {
outline: none; outline: none;
border-color: #3b82f6; border-color: #55ffff;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
} }
.coordinates-section { .coordinates-section {
@@ -130,31 +141,34 @@
} }
.coordinates-header label { .coordinates-header label {
color: #cbd5e1; color: #e0e0e0;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 600;
} }
.btn-use-position { .btn-use-position {
padding: 0.375rem 0.75rem; padding: 0.375rem 0.75rem;
background: #10b981; background: #4a8c2a;
color: white; color: white;
border: none; border: 2px solid #1a1a1a;
border-radius: 4px;
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 500; font-weight: 700;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.1s;
font-family: 'Silkscreen', 'Courier New', monospace;
text-shadow: 1px 1px 0 #1a1a1a;
box-shadow: inset 0 2px 0 #6ab04c, inset 0 -2px 0 #2d6b1a;
} }
.btn-use-position:hover:not(:disabled) { .btn-use-position:hover:not(:disabled) {
background: #059669; background: #5a9c3a;
} }
.btn-use-position:disabled { .btn-use-position:disabled {
background: #334155; background: #4b4b4b;
color: #64748b; color: #7b7b7b;
cursor: not-allowed; cursor: not-allowed;
box-shadow: inset 0 -2px 0 #333, inset 0 2px 0 #666;
} }
.coordinate-inputs { .coordinate-inputs {
@@ -170,21 +184,22 @@
.btn-submit { .btn-submit {
width: 100%; width: 100%;
padding: 0.75rem; padding: 0.75rem;
background: #3b82f6; background: #4a8c2a;
color: white; color: white;
border: none; border: 2px solid #1a1a1a;
border-radius: 6px;
font-size: 1rem; font-size: 1rem;
font-weight: 600; font-weight: 700;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.1s;
margin-top: 1rem; margin-top: 1rem;
font-family: 'Silkscreen', 'Courier New', monospace;
text-shadow: 1px 1px 0 #1a1a1a;
box-shadow: inset 0 2px 0 #6ab04c, inset 0 -2px 0 #2d6b1a;
} }
.btn-submit:hover { .btn-submit:hover {
background: #2563eb; background: #5a9c3a;
transform: translateY(-1px); box-shadow: inset 0 2px 0 #7bc05c, inset 0 -2px 0 #3d7b2a;
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
} }
/* Areas list */ /* Areas list */
@@ -197,7 +212,7 @@
.empty-state { .empty-state {
text-align: center; text-align: center;
padding: 3rem 1rem; padding: 3rem 1rem;
color: #64748b; color: #7b7b7b;
} }
.empty-state p { .empty-state p {
@@ -206,22 +221,21 @@
/* Area card */ /* Area card */
.area-card { .area-card {
background: #1e293b; background: #3b3b3b;
border: 1px solid #334155; border: 2px solid #1a1a1a;
border-radius: 8px;
padding: 1rem; padding: 1rem;
margin-bottom: 1rem; margin-bottom: 1rem;
transition: all 0.2s; transition: all 0.1s;
box-shadow: inset 0 -2px 0 #2a2a2a, inset 0 2px 0 #555;
} }
.area-card:hover { .area-card:hover {
border-color: #475569; background: #4b4b4b;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
} }
.area-card.has-conflict { .area-card.has-conflict {
border-color: #ef4444; border-color: #ff5555;
background: linear-gradient(135deg, #1e293b 0%, #2d1818 100%); background: linear-gradient(135deg, #3b3b3b 0%, #4a2020 100%);
} }
.area-header { .area-header {
@@ -230,23 +244,24 @@
align-items: center; align-items: center;
margin-bottom: 1rem; margin-bottom: 1rem;
padding-bottom: 0.75rem; padding-bottom: 0.75rem;
border-bottom: 1px solid #334155; border-bottom: 2px solid #4b4b4b;
} }
.area-header h3 { .area-header h3 {
margin: 0; margin: 0;
color: #f8fafc; color: #e0e0e0;
font-size: 1.125rem; font-size: 1.125rem;
} }
.status-badge { .status-badge {
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
border-radius: 12px; border: 2px solid #1a1a1a;
font-size: 0.75rem; font-size: 0.75rem;
font-weight: 600; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.5px; letter-spacing: 0.5px;
color: white; color: white;
text-shadow: 1px 1px 0 rgba(0,0,0,0.5);
} }
/* Area info */ /* Area info */
@@ -259,7 +274,7 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0.5rem 0; padding: 0.5rem 0;
border-bottom: 1px solid #334155; border-bottom: 2px solid #4b4b4b;
} }
.info-row:last-child { .info-row:last-child {
@@ -267,32 +282,32 @@
} }
.info-label { .info-label {
color: #94a3b8; color: #a0a0a0;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 500; font-weight: 600;
} }
.info-value { .info-value {
color: #e2e8f0; color: #e0e0e0;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
text-align: right; text-align: right;
} }
.coordinate-value { .coordinate-value {
font-family: 'Courier New', monospace; font-family: 'Silkscreen', 'Courier New', monospace;
font-size: 0.75rem; font-size: 0.75rem;
word-break: break-all; word-break: break-all;
color: #55ffff;
} }
/* Conflict warning */ /* Conflict warning */
.conflict-warning { .conflict-warning {
background: #7f1d1d; background: #6b1a1a44;
border: 1px solid #ef4444; border: 2px solid #ff5555;
border-radius: 6px;
padding: 0.75rem; padding: 0.75rem;
margin-bottom: 1rem; margin-bottom: 1rem;
color: #fca5a5; color: #ff5555;
font-size: 0.875rem; font-size: 0.875rem;
} }
@@ -316,46 +331,45 @@
flex: 1; flex: 1;
min-width: 120px; min-width: 120px;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
border: none; border: 2px solid #1a1a1a;
border-radius: 6px;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 700;
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.1s;
white-space: nowrap; white-space: nowrap;
font-family: 'Silkscreen', 'Courier New', monospace;
text-shadow: 1px 1px 0 #1a1a1a;
} }
.btn-start { .btn-start {
background: #10b981; background: #4a8c2a;
color: white; color: white;
box-shadow: inset 0 2px 0 #6ab04c, inset 0 -2px 0 #2d6b1a;
} }
.btn-start:hover { .btn-start:hover {
background: #059669; background: #5a9c3a;
transform: translateY(-1px); box-shadow: inset 0 2px 0 #7bc05c, inset 0 -2px 0 #3d7b2a;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
} }
.btn-complete { .btn-complete {
background: #3b82f6; background: #345ec3;
color: white; color: white;
box-shadow: inset 0 2px 0 #5577dd, inset 0 -2px 0 #223399;
} }
.btn-complete:hover { .btn-complete:hover {
background: #2563eb; background: #4a6ed3;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
} }
.btn-delete { .btn-delete {
background: #ef4444; background: #aa0000;
color: white; color: white;
box-shadow: inset 0 2px 0 #dd3333, inset 0 -2px 0 #770000;
} }
.btn-delete:hover { .btn-delete:hover {
background: #dc2626; background: #cc0000;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
} }
/* Scrollbar styling */ /* Scrollbar styling */
@@ -366,18 +380,18 @@
.areas-list::-webkit-scrollbar-track, .areas-list::-webkit-scrollbar-track,
.create-form::-webkit-scrollbar-track { .create-form::-webkit-scrollbar-track {
background: #0f172a; background: #2c2c2c;
} }
.areas-list::-webkit-scrollbar-thumb, .areas-list::-webkit-scrollbar-thumb,
.create-form::-webkit-scrollbar-thumb { .create-form::-webkit-scrollbar-thumb {
background: #334155; background: #5a5a5a;
border-radius: 4px; border: 1px solid #1a1a1a;
} }
.areas-list::-webkit-scrollbar-thumb:hover, .areas-list::-webkit-scrollbar-thumb:hover,
.create-form::-webkit-scrollbar-thumb:hover { .create-form::-webkit-scrollbar-thumb:hover {
background: #475569; background: #6b6b6b;
} }
/* Responsive design */ /* Responsive design */