/** * melhorias-colorir.css * Estilos para os novos recursos da ferramenta de colorir. * * COMO INCLUIR: No da página: * */ /* ─── Botão de Ferramenta Novo (Conta-Gotas) ─────────────────────────────── */ #btn-conta-gotas { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px 6px; font-size: 0.6rem; font-weight: bold; color: #444; background: #f0f0f0; border: 1.5px solid #ccc; border-radius: 8px; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.1s; min-width: 44px; min-height: 44px; } #btn-conta-gotas svg { width: 20px; height: 20px; } #btn-conta-gotas:hover { background: #e0eeff; border-color: #084b93; } #btn-conta-gotas.active-draw-mode { background: #dbeafe; border-color: #084b93; color: #084b93; box-shadow: 0 0 0 2px #084b9340; } .tool-label { line-height: 1; text-align: center; font-size: 0.58rem; letter-spacing: 0.02em; } /* ─── Controles do Pincel (Espessura) ────────────────────────────────────── */ #draw-mode-controls { display: none; flex-wrap: wrap; align-items: center; gap: 12px; background: linear-gradient(135deg, #fdf6e3, #f5eedc); border: 1px solid #e8d9b5; border-radius: 10px; padding: 8px 14px; margin: 0 0 10px 0; animation: fadeSlideIn 0.25s ease; } #draw-mode-controls.draw-mode-controls--visible { display: flex; } @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .brush-control-group { display: flex; align-items: center; gap: 7px; color: #555; white-space: nowrap; } .brush-control-group label { display: flex; align-items: center; gap: 4px; font-weight: 600; cursor: default; } .brush-control-group input[type="range"] { width: 85px; accent-color: #084b93; cursor: pointer; } .brush-control-group span:last-child { min-width: 36px; text-align: right; font-weight: bold; color: #084b93; font-size: 0.78rem; } /* ─── Seção de Cores Recentes no Modal ───────────────────────────────────── */ #recent-colors-section { animation: fadeSlideIn 0.2s ease; } #recent-colors-row .color-option { box-sizing: border-box; transition: transform 0.12s, border-color 0.12s; } #recent-colors-row .color-option:hover { transform: scale(1.12); border-color: #084b93 !important; } /* ─── Animação de Vitória ─────────────────────────────────────────────────── */ .victory-stars-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 100000; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; } .victory-stars-overlay--visible { opacity: 1; } .victory-message { display: flex; align-items: center; gap: 14px; background: rgba(255, 255, 255, 0.96); border: 3px solid #ffca3a; border-radius: 24px; padding: 18px 30px; box-shadow: 0 8px 40px rgba(0,0,0,0.25); animation: victoryPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); font-family: Arial, sans-serif; } @keyframes victoryPop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } } .victory-text { font-size: clamp(1.1rem, 4vw, 1.6rem); font-weight: 800; color: #1a1a2e; text-align: center; line-height: 1.2; } .victory-emoji { font-size: clamp(1.5rem, 5vw, 2.4rem); animation: victoryBounce 0.6s ease infinite alternate; } @keyframes victoryBounce { from { transform: translateY(0); } to { transform: translateY(-8px); } } /* ─── Canvas de Confetti ─────────────────────────────────────────────────── */ #confetti-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; pointer-events: none; } /* ─── Responsividade ─────────────────────────────────────────────────────── */ @media (max-width: 600px) { .brush-control-group input[type="range"] { width: 65px; } #draw-mode-controls { gap: 8px; padding: 6px 10px; } #btn-conta-gotas { min-width: 38px; min-height: 38px; } }