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

refactor: add color picker styles and area color dot to enhance UI

Browse Source
This commit is contained in:
MayaTheShy
2026-02-20 04:21:21 -05:00
parent 681b4e1fa9
commit 05519dc17e
1 changed files with 59 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -446,3 +446,62 @@
text-align: left; text-align: left;
} }
} }
/* Color picker row */
.color-picker-row {
display: flex;
align-items: center;
gap: 0.4rem;
flex-wrap: wrap;
}
.color-input {
width: 32px;
height: 32px;
padding: 0;
border: 2px solid #1a1a1a;
background: none;
cursor: pointer;
border-radius: 0;
}
.color-input::-webkit-color-swatch-wrapper {
padding: 0;
}
.color-input::-webkit-color-swatch {
border: none;
}
.color-swatch {
width: 24px;
height: 24px;
border: 2px solid #1a1a1a;
cursor: pointer;
padding: 0;
transition: transform 0.1s;
}
.color-swatch:hover {
transform: scale(1.2);
}
.color-swatch.active {
border-color: #ffff55;
box-shadow: 0 0 4px #ffff55;
transform: scale(1.15);
}
/* Color dot in area card */
.area-title-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.area-color-dot {
width: 14px;
height: 14px;
border: 2px solid #1a1a1a;
flex-shrink: 0;
}