@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap'); /* ============================================================ TEMA: ANIMADO (baseado em modelos_tela/infantil.jpg) Arquivo isolado — mexa só aqui para ajustes deste tema. Aplicado quando . ============================================================ */ :root[data-theme="animado"] { --bg: #f4ecd8; /* creme */ --surface: #ffffff; /* modais/painéis */ --surface-2: #dbe9f5; /* azul-pastel (secundário) */ --line: #e6dcc2; --text: #34497a; /* azul-marinho */ --muted: #7c8bb0; --gold: #ef8a3c; /* laranja (ponteiros, botões, dots) */ --teal: #46b3a8; /* verde-água (início/Régua) */ --danger: #e0725e; --radius: 22px; } /* fundo creme com "nuvens" (papel de parede) + fonte lúdica */ html[data-theme="animado"] body { background-color: var(--bg); background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='480'%20height='340'%3E%3Cg%20fill='%23ffffff'%3E%3Cg%20opacity='0.6'%3E%3Cellipse%20cx='90'%20cy='70'%20rx='78'%20ry='30'/%3E%3Cellipse%20cx='150'%20cy='62'%20rx='55'%20ry='26'/%3E%3Cellipse%20cx='60'%20cy='78'%20rx='45'%20ry='22'/%3E%3C/g%3E%3Cg%20opacity='0.5'%3E%3Cellipse%20cx='360'%20cy='170'%20rx='95'%20ry='34'/%3E%3Cellipse%20cx='420'%20cy='162'%20rx='60'%20ry='28'/%3E%3C/g%3E%3Cg%20opacity='0.45'%3E%3Cellipse%20cx='210'%20cy='280'%20rx='85'%20ry='30'/%3E%3Cellipse%20cx='270'%20cy='274'%20rx='55'%20ry='24'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); background-repeat: repeat; background-size: 480px 340px; background-attachment: fixed; font-family: "Fredoka", "Comic Sans MS", "Baloo 2", "Segoe UI", sans-serif; } /* ── Relógio: face branca ELEVADA (disco flutuando sobre o fundo) ── */ html[data-theme="animado"] #clock-svg { overflow: visible; position: relative; z-index: 1; } html[data-theme="animado"] #clock-svg circle[fill="none"] { fill: #ffffff; stroke: #ead9bd; stroke-width: 1; } /* espaço p/ a sombra escapar por baixo (mantém overflow hidden: recolher ok) */ html[data-theme="animado"] .clock-section { padding-bottom: 20px; } /* sombra de ELEVAÇÃO sutil (mantém o deslocamento p/ frente, só mais leve) */ html[data-theme="animado"] .clock-wrap::before { content: ""; position: absolute; left: 50%; top: 50%; width: 90%; height: 90%; transform: translate(-50%, -50%); border-radius: 50%; z-index: 0; box-shadow: 0 6px 11px rgba(52,73,122,.13), 0 2px 3px rgba(52,73,122,.14); } /* ── Face limpa: sem marcadores (evita números encostando nos traços) ── */ html[data-theme="animado"] .tick, html[data-theme="animado"] .tick-major { display: none; } /* ── Números do relógio: azul mais claro, fonte lúdica (12h maior) ── */ html[data-theme="animado"] .num { font-family: "Fredoka", "Comic Sans MS", sans-serif; font-size: 30px; font-weight: 400; fill: #6580c6; transform: translateY(2px); /* desce todo o conjunto de números */ } html[data-theme="animado"] .num-24h { font-family: "Fredoka", "Comic Sans MS", sans-serif; font-size: 14px; font-weight: 400; fill: #6580c6; /* era branco */ } html[data-theme="animado"] .num-timer { fill: var(--text); } /* ── Sino: acima do relógio digital (grupo sobe; não conflita com a animação) ── */ html[data-theme="animado"] .bell-group { transform: translateY(-16px); } /* ── Relógio digital interno (acima do 6): maior e ~15px mais acima ── */ html[data-theme="animado"] .time-svg-label { font-size: 21px; transform: translateY(-10px) scaleX(0.8); /* -20% de largura, mesmo tamanho */ } /* ── Botão 12h/24h: fundo mais claro, ~10px mais baixo, fonte maior ── */ html[data-theme="animado"] .mode-toggle-bg { fill: #e8eff8; transform: translateY(7px); } html[data-theme="animado"] .mode-toggle-lbl { fill: var(--text); font-size: 13px; font-weight: 700; transform: translateY(7px); } /* ── Ponteiros GROSSOS e eixo central maior ── */ html[data-theme="animado"] .hand { stroke-linecap: round; filter: drop-shadow(0 1.5px 2px rgba(52,73,122,.30)); } html[data-theme="animado"] .hand-hour { stroke: #f3ac78; stroke-width: 11; } /* laranja pastel sólido */ html[data-theme="animado"] .hand-min { stroke: #f3ac78; stroke-width: 8; opacity: 1; } html[data-theme="animado"] .hand-sec { display: none; } /* ponteiro de segundos oculto */ html[data-theme="animado"] .hub { fill: #ffffff; r: 5; stroke: #f3ac78; stroke-width: 1.6; } /* bola central = cor do fundo do relógio */ /* ── Faixa de tarefa EXPIRADA/concluída: cinza claro ── */ html[data-theme="animado"] .faixa-done { stroke: #cccccc !important; } /* ── Evento no relógio = linha de chegada (xadrez): oculta o ponto padrão ── */ html[data-theme="animado"] .dot-event { display: none; } /* ── Seta de recolhimento (botão de tarefa de hora / âncora): à DIREITA, ~2x maior, na mesma cor da fonte do título ── */ html[data-theme="animado"] .ev-menu-btn.ev-anchor--has-deps { position: relative; } html[data-theme="animado"] .ev-menu-btn.ev-anchor--has-deps .ev-menu-time::before { content: none; } html[data-theme="animado"] .ev-menu-btn.ev-anchor--has-deps .ev-menu-title::after { content: "▼"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; line-height: 1; color: currentColor; pointer-events: none; } html[data-theme="animado"] .ev-menu-btn.ev-anchor--collapsed .ev-menu-title::after { content: "▶"; } /* ── Botões de tarefa: fonte BRANCA; tempo/horário em NEGRITO ── */ html[data-theme="animado"] .ev-menu-time, html[data-theme="animado"] .ev-menu-title, html[data-theme="animado"] .ev-menu-status, html[data-theme="animado"] .ev-item-onlight .ev-menu-time, html[data-theme="animado"] .ev-item-onlight .ev-menu-title, html[data-theme="animado"] .ev-item-onlight .ev-menu-status { color: #ffffff; } html[data-theme="animado"] .ev-menu-time { font-weight: 700; position: relative; padding-right: 9px; margin-right: 6px; } /* barra vertical separando hora/tempo do nome da tarefa (sem encostar nas bordas) */ html[data-theme="animado"] .ev-menu-time::after { content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 2px; height: 18px; background: rgba(255,255,255,.55); border-radius: 1px; } /* barra de progresso: linhas E círculos ainda NÃO percorridos → brancos (os percorridos recebem cor inline via JS e não são afetados) */ html[data-theme="animado"] .ev-track-seg-line { background: #ffffff; } html[data-theme="animado"] .ev-track-stop { background: #ffffff; border-color: #ffffff; } /* ── Marcador "Início" da barra vertical: círculo da mesma cor (teal) ── */ html[data-theme="animado"] .ev-track-start-pin svg { display: none; } html[data-theme="animado"] .ev-track-start-pin { width: 14px; height: 14px; border-radius: 50%; background: var(--teal); line-height: 0; margin-bottom: -3px; /* conecta a bola à 1ª linha de continuidade */ } /* texto "Início" ACIMA da bola (reordena no flex da coluna) */ html[data-theme="animado"] .ev-track-label:first-of-type { order: -1; margin: 0 0 3px; } /* ── Menu lateral (era dark fixo) ── */ html[data-theme="animado"] .side-menu { background: #ffffff; border-left: 1px solid var(--line); box-shadow: -8px 0 28px rgba(52,73,122,.18); } html[data-theme="animado"] .side-menu-header, html[data-theme="animado"] .side-menu-footer { border-color: var(--line); } html[data-theme="animado"] .side-menu-title { color: var(--text); } html[data-theme="animado"] .side-menu-item { color: var(--text); } html[data-theme="animado"] .side-menu-item:hover, html[data-theme="animado"] .side-menu-close:hover { background: rgba(70,179,168,.14); } html[data-theme="animado"] .side-menu-toggle { background: rgba(70,179,168,.15); border-color: var(--teal); color: var(--text); } html[data-theme="animado"] .clock-format-toggle { color: var(--text); } /* ── Modais (garante card branco + sombra suave) ── */ html[data-theme="animado"] .modal-backdrop { background: rgba(52,73,122,.35); } html[data-theme="animado"] .modal-box { background: var(--surface); border: 1px solid var(--line); box-shadow: 0 14px 44px rgba(52,73,122,.20); } html[data-theme="animado"] .modal-title { color: var(--text); } html[data-theme="animado"] .time-grid-modal, html[data-theme="animado"] .drum-modal { background: var(--surface); color: var(--text); } html[data-theme="animado"] select option { background: #ffffff; color: var(--text); } /* ── Botões ── */ html[data-theme="animado"] .modal-btn-cancel { background: #eef3f9; border: 1px solid var(--line); color: var(--text); } /* ── Cantos bem arredondados — cara mais “fofa” ── */ html[data-theme="animado"] .modal-box, html[data-theme="animado"] .ev-menu-btn, html[data-theme="animado"] .config-item, html[data-theme="animado"] .chip, html[data-theme="animado"] .submit-btn, html[data-theme="animado"] .modal-btn-cancel, html[data-theme="animado"] .modal-btn-save, html[data-theme="animado"] .modal-btn-danger { border-radius: 22px; } html[data-theme="animado"] .side-menu-title, html[data-theme="animado"] h1 { font-weight: 800; letter-spacing: 0; } /* ── Menu de contexto da tarefa (Editar/Excluir) — era dark fixo ── */ html[data-theme="animado"] .task-ctx-backdrop { background: rgba(52,73,122,.35); } html[data-theme="animado"] .task-ctx-menu { background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -14px 44px rgba(52,73,122,.20); } html[data-theme="animado"] .task-ctx-title { color: var(--muted); border-bottom-color: var(--line); } html[data-theme="animado"] .task-ctx-btn { background: #eef3f9; color: var(--text); } html[data-theme="animado"] .task-ctx-btn:active { background: rgba(70,179,168,.16); } html[data-theme="animado"] .task-ctx-btn--danger { color: var(--danger); } html[data-theme="animado"] .task-ctx-btn--cancel { background: transparent; color: var(--muted); border: 1px solid var(--line); } /* ── Instruções de Tela — combina com a paleta/fonte do tema animado ── */ html[data-theme="animado"] .screen-instr { font-family: "Fredoka", "Comic Sans MS", sans-serif; } html[data-theme="animado"] .screen-instr-ring--box { border-radius: var(--radius); } html[data-theme="animado"] .screen-instr-cap { color: var(--text); border-radius: 18px; } html[data-theme="animado"] .screen-instr-cap b { color: #3b82f6; }