admtracksteel/camila
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI/UX: unificação das cores e estilos dos botões das ferramentas para combinar com suas identidades visuais

Browse Source
This commit is contained in:
admtracksteel
2026-06-05 18:22:09 +00:00
parent a2318fc0b4
commit 6e16a16867
2 changed files with 56 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/style.css
+53 -1
View File
@@ -3159,13 +3159,15 @@ code {
gap: 6px;
}
/* Hover base */
.btn-music-option:hover, .btn-music-rhythm:hover, .btn-music-duration:hover {
background-color: var(--bg-tertiary);
color: var(--text-primary);
border-color: rgba(168, 85, 247, 0.5);
border-color: rgba(168, 85, 247, 0.5); /* Default Purple */
transform: translateY(-1px);
}
/* Active base (Purple - Musica Default) */
.btn-music-option.active, .btn-music-rhythm.active, .btn-music-duration.active {
background-color: rgba(168, 85, 247, 0.15);
border-color: #a855f7;
@@ -3174,6 +3176,56 @@ code {
box-shadow: 0 0 8px rgba(168, 85, 247, 0.2);
}
/* =========================================
CUSTOMIZACAO DE CORES DOS MODAIS
========================================= */
/* Estúdio de Poesias (Amarelo/Âmbar #eab308) */
#poesiaModal .btn-music-option:hover,
#poesiaModal .btn-music-rhythm:hover {
border-color: rgba(234, 179, 8, 0.5);
}
#poesiaModal .btn-music-option.active,
#poesiaModal .btn-music-rhythm.active {
background-color: rgba(234, 179, 8, 0.15);
border-color: #eab308;
color: #facc15;
box-shadow: 0 0 8px rgba(234, 179, 8, 0.2);
}
#poesiaModal .settings-modal-header h3,
#poesiaHistoryModal .settings-modal-header h3 {
color: #eab308;
}
/* Inventando Histórias (Verde #10a37f) */
#historiaModal .btn-music-option:hover,
#historiaModal .btn-music-rhythm:hover {
border-color: rgba(16, 163, 127, 0.5);
}
#historiaModal .btn-music-option.active,
#historiaModal .btn-music-rhythm.active {
background-color: rgba(16, 163, 127, 0.15);
border-color: #10a37f;
color: #34d399;
box-shadow: 0 0 8px rgba(16, 163, 127, 0.2);
}
#historiaModal .settings-modal-header h3,
#historiaHistoryModal .settings-modal-header h3 {
color: #10a37f;
}
/* Musicando Ideias (Roxo #a855f7) */
#musicaModal .settings-modal-header h3,
#musicaHistoryModal .settings-modal-header h3 {
color: #a855f7;
}
/* Fábrica de Quadrinhos (Rosa #db2777) */
#fabricaQuadrinhosModal .settings-modal-header h3,
#comicsHistoryModal .settings-modal-header h3 {
color: #db2777;
}
/* Customização para botões de tags ativos no estúdio */
.btn-music-duration.active {
background-color: rgba(16, 163, 127, 0.15);