:root { --bg: #0b0f14; --bg-card: rgba(255, 255, 255, 0.04); --border: rgba(255, 255, 255, 0.08); --text: #e6edf3; --muted: #7d8590; --accent: #5eead4; --spotify: #1db954; } /* tema claro (aplicado via data-theme no , controlado pelo admin) */ :root[data-theme="light"] { --bg: #f4f5f7; --bg-card: rgba(0, 0, 0, 0.04); --border: rgba(0, 0, 0, 0.1); --text: #1a1d21; --muted: #6b7280; } :root[data-theme="light"] body { background: var(--bg); } /* widget desativado no admin */ .card[data-disabled="1"] { display: none !important; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: -apple-system, system-ui, "Segoe UI", Roboto, sans-serif; background: radial-gradient(1200px 800px at 70% -10%, #15202b 0%, var(--bg) 55%); color: var(--text); -webkit-font-smoothing: antialiased; overflow: hidden; } .dashboard { height: 100vh; /* fallback */ height: 100dvh; /* estável quando a barra do browser do tablet mexe */ display: flex; flex-direction: column; padding: 3vh 3vw; gap: 2vh; } .top { text-align: center; } .clock { font-size: clamp(3rem, 9.75vw, 8.25rem); /* ~25% mais pequeno */ font-weight: 200; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; } .date { font-size: clamp(0.9rem, 2.25vw, 1.5rem); color: var(--muted); margin-top: 0.8vh; } .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; flex: 1; min-height: 0; /* permite à grelha encolher para caber no ecrã */ align-content: start; } .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 24px; backdrop-filter: blur(6px); /* grid item: preenche a célula definida no editor de layout; conteúdo faz scroll */ display: flex; flex-direction: column; overflow: hidden; min-height: 0; } .card h2 { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 16px; } .muted { color: var(--muted); } /* meteo */ .card.weather { justify-content: center; } /* sem título -> centra o conteúdo */ .weather-body { display: flex; align-items: center; gap: 20px; } .temp { font-size: 3.5rem; font-weight: 300; font-variant-numeric: tabular-nums; } /* temperatura -> ícone -> texto, tudo em linha */ .wx-icon { font-size: 2.6rem; } .wx { font-size: 1.1rem; line-height: 1.4; } /* listas */ .list { list-style: none; display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; overflow-y: auto; } .list li { display: flex; gap: 12px; align-items: flex-start; font-size: 1.1rem; } .li-title { font-weight: 500; } .dot, .check { flex: none; } .dot { margin-top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); } .check { margin-top: 4px; width: 16px; height: 16px; border-radius: 4px; border: 2px solid var(--muted); background: transparent; cursor: pointer; transition: background 0.15s, transform 0.1s; } .check:hover { transform: scale(1.12); } .check.done { background: var(--accent); } .list li.completing { opacity: 0.4; transition: opacity 0.5s; } /* tag da conta (Work / Pessoal) por item */ .tag { display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 8px; border-radius: 99px; border: 1px solid currentColor; vertical-align: middle; white-space: nowrap; } /* card de tarefas com flip 3D entre contas */ .card.flip { background: none; border: none; padding: 0; backdrop-filter: none; perspective: 1400px; } .flip-inner { position: relative; transition: transform 0.6s; transform-style: preserve-3d; flex: 1; min-height: 0; } .flip-face { position: absolute; inset: 0; backface-visibility: hidden; background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 24px; display: flex; flex-direction: column; overflow: hidden; } .flip-face.back { transform: rotateY(180deg); } .card.flip.flipped .flip-inner { transform: rotateY(180deg); } .face-label { color: var(--accent); } /* cor definida por JS (cor da conta) */ .card.flip[data-mode="single"] .flip-btn, .card.flip[data-mode="single"] .flip-face.back { display: none; } .flip-btn { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.06); color: var(--muted); cursor: pointer; font-size: 1.1rem; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s, transform 0.1s; } .flip-btn:hover { background: rgba(255, 255, 255, 0.12); color: var(--text); } .flip-btn:active { transform: scale(0.9); } /* carousel de fotos — foto inteira (contain) sobre cópia desfocada que preenche */ .photos-card { position: relative; overflow: hidden; padding: 0; } .carousel-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; /* background-size cover: preenche sempre o bloco, corta o excesso, nunca estica nem deixa espaços — robusto a reflows (ao contrário de no WebView Android) */ background-size: cover; background-position: center; background-repeat: no-repeat; } .carousel-slide.active { opacity: 1; } /* bloco smart home */ .smarthome-card { align-items: center; justify-content: center; gap: 6px; cursor: pointer; transition: background 0.15s; } .smarthome-card:hover { background: rgba(255, 255, 255, 0.07); } .sh-icon { width: clamp(40px, 8vw, 64px); height: clamp(40px, 8vw, 64px); color: var(--text); } .sh-label { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); } /* modal smart home */ .modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 4vh; } .modal { width: min(560px, 92vw); max-height: 88vh; overflow-y: auto; background: #11161d; border: 1px solid var(--border); border-radius: 20px; padding: 28px; } .modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .modal-head h2 { font-size: 1.4rem; } .modal-close { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.06); color: var(--text); font-size: 1.1rem; cursor: pointer; } .sh-section { margin-bottom: 24px; } .sh-section h3 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 12px; } /* tiles modernos */ .sh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .sh-tile { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; text-align: left; padding: 16px; min-height: 116px; border-radius: 18px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.04); color: var(--text); cursor: pointer; font: inherit; transition: transform 0.12s, background 0.2s, box-shadow 0.2s, border-color 0.2s; } .sh-tile:active { transform: scale(0.97); } .sh-tile .sh-ico { width: 30px; height: 30px; opacity: 0.6; margin-bottom: auto; } .sh-tile .sh-ico svg { width: 100%; height: 100%; display: block; } .sh-tile .nm { font-weight: 600; font-size: 1.02rem; } .sh-tile .st { font-size: 0.82rem; color: var(--muted); } /* luz ligada -> brilho quente */ .sh-tile.light.on { background: linear-gradient(150deg, rgba(255, 209, 102, 0.22), rgba(255, 176, 30, 0.07)); border-color: rgba(255, 207, 94, 0.6); box-shadow: 0 0 28px rgba(255, 207, 94, 0.16); } .sh-tile.light.on .sh-ico, .sh-tile.light.on .st { color: #ffcf5e; opacity: 1; } /* AC ligado -> brilho frio */ .sh-tile.ac.on { background: linear-gradient(150deg, rgba(96, 165, 250, 0.22), rgba(56, 189, 248, 0.07)); border-color: rgba(96, 165, 250, 0.6); box-shadow: 0 0 28px rgba(96, 165, 250, 0.16); } .sh-tile.ac.on .sh-ico, .sh-tile.ac.on .st { color: #60a5fa; opacity: 1; } /* estore (não é toggle, tem slider) */ .sh-tile.blind { cursor: default; } .sh-tile.blind .sh-slider { width: 100%; accent-color: var(--accent); margin-top: 2px; } /* spotify player */ .player { display: flex; align-items: center; gap: 18px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 18px; padding: 16px 22px; } .player .cover { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; background: #222; flex: none; } .player .track { flex: 1; min-width: 0; } .player .title { font-size: 1.3rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .player .artist { color: var(--muted); margin-bottom: 10px; } .progress { height: 5px; background: rgba(255, 255, 255, 0.1); border-radius: 99px; overflow: hidden; } .progress-bar { height: 100%; width: 0; background: var(--spotify); transition: width 1s linear; } .controls { display: flex; align-items: center; gap: 8px; flex: none; } .ctrl { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.06); color: var(--spotify); font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s, transform 0.1s; } .ctrl:hover { background: rgba(29, 185, 84, 0.18); } .ctrl:active { transform: scale(0.92); } .ctrl.play { width: 56px; height: 56px; background: var(--spotify); color: #04231f; border: none; font-size: 1.3rem; } .ctrl.play:hover { background: #1ed760; } .ctrl.flash-err { background: #4a1f1f; border-color: #7a2e2e; } [hidden] { display: none !important; }