Leonardo
ac8308f45b
Volta -webkit-line-clamp: 2 no .mcfg-grp-desc e .mcfg-nav-item__desc — descricao quebra em 2 linhas se precisar ao inves de cortar com ellipsis em 1 linha. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
1294 lines
50 KiB
Vue
1294 lines
50 KiB
Vue
<script setup>
|
|
/*
|
|
* MelissaConfiguracoes — Configs do layout Melissa.
|
|
* Layout 2-col seguindo blueprint melissa-page-blueprint.md (estrutura
|
|
* da MelissaAgenda) + visual de aside da /configuracoes/ (accordion com
|
|
* grupos e cards de seções).
|
|
*
|
|
* ┌──────────────────────────────────────────────────────────┐
|
|
* │ Header (Menu mobile + título + close) │
|
|
* ├────────────┬─────────────────────────────────────────────┤
|
|
* │ ASIDE │ MAIN │
|
|
* │ ~300px │ Conteúdo da seção ativa │
|
|
* │ │ (Aparência / Fundo / Relógio / Cronômetro) │
|
|
* │ Accordion │ │
|
|
* │ + cards │ │
|
|
* └────────────┴─────────────────────────────────────────────┘
|
|
*
|
|
* Aside é teleportada pra drawer off-canvas em <lg.
|
|
*
|
|
* Refs/setters chegam via inject('melissaSettings') — escreve direto
|
|
* nas mesmas refs do MelissaLayout (sem duplicar estado). Persistência
|
|
* ainda é responsabilidade do MelissaLayout (watchers já existentes).
|
|
*/
|
|
import { computed, defineAsyncComponent, inject, ref, watch, onMounted, onBeforeUnmount } from 'vue';
|
|
import { useRouter, useRoute } from 'vue-router';
|
|
import { TOQUES } from './melissaToques';
|
|
|
|
const props = defineProps({
|
|
// Key da rota /melissa/:secao — usada pra pré-selecionar uma seção interna
|
|
// (ex: 'perfil' abre direto em "Meu Perfil"). 'aparencia' = comportamento default.
|
|
secaoRota: { type: String, default: 'aparencia' }
|
|
});
|
|
const emit = defineEmits(['close']);
|
|
|
|
// Aliases "bonitos" pros slugs principais — URL fica /melissa/perfil em vez
|
|
// de /melissa/cfg-perfil. Demais seções de config usam a key direta como
|
|
// slug (ex: cfg-precificacao → /melissa/cfg-precificacao). Bidirecional:
|
|
// rotaToSecao() lê alias OU key direta; secaoToRota() devolve alias se
|
|
// existir, senão a key como-é.
|
|
const ROUTE_ALIASES = {
|
|
aparencia: 'aparencia',
|
|
perfil: 'cfg-perfil',
|
|
plano: 'cfg-plano',
|
|
negocio: 'cfg-negocio',
|
|
seguranca: 'cfg-seguranca',
|
|
bloqueios: 'cfg-bloqueios'
|
|
};
|
|
// URLs antigas (/melissa/fundo, /melissa/relogio, /melissa/cronometro)
|
|
// agora caem no slug unificado "aparencia" — pagina Layout Melissa
|
|
// concentra os 4 blocos em uma unica tela.
|
|
const DEPRECATED_ALIASES = {
|
|
fundo: 'aparencia',
|
|
relogio: 'aparencia',
|
|
cronometro: 'aparencia'
|
|
};
|
|
const SECAO_ALIASES = Object.fromEntries(
|
|
Object.entries(ROUTE_ALIASES).map(([slug, key]) => [key, slug])
|
|
);
|
|
|
|
function rotaToSecao(rota) {
|
|
if (!rota) return 'aparencia';
|
|
const r = String(rota).toLowerCase();
|
|
if (ROUTE_ALIASES[r]) return ROUTE_ALIASES[r];
|
|
if (DEPRECATED_ALIASES[r]) return DEPRECATED_ALIASES[r];
|
|
if (INLINE_KEYS.has(r)) return r;
|
|
if (COMPONENT_MAP[r]) return r;
|
|
return 'aparencia';
|
|
}
|
|
function secaoToRota(key) {
|
|
if (!key) return 'aparencia';
|
|
return SECAO_ALIASES[key] || key;
|
|
}
|
|
|
|
|
|
// ── Componentes externos embedados (todas as páginas de /configuracoes/) ─
|
|
// Usa defineAsyncComponent pra lazy-load — só carrega quando o user clica.
|
|
// Mantém o user dentro do overlay Melissa em vez de navegar pra fora.
|
|
const COMPONENT_MAP = {
|
|
'cfg-agenda': defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesAgendaPage.vue')),
|
|
'cfg-bloqueios': defineAsyncComponent(() => import('@/layout/configuracoes/BloqueiosPage.vue')),
|
|
'cfg-agendador': defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesAgendadorPage.vue')),
|
|
'cfg-pagamento': defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesPagamentoPage.vue')),
|
|
'cfg-precificacao': defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesPrecificacaoPage.vue')),
|
|
'cfg-descontos': defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesDescontosPage.vue')),
|
|
'cfg-excecoes': defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesExcecoesFinanceirasPage.vue')),
|
|
'cfg-convenios': defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesConveniosPage.vue')),
|
|
'cfg-wa': defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesWhatsappChooserPage.vue')),
|
|
'cfg-wa-templates': defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesWhatsappTemplatesPage.vue')),
|
|
'cfg-conversas-tags': defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesConversasTagsPage.vue')),
|
|
'cfg-conversas-autoreply': defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesConversasAutoreplyPage.vue')),
|
|
'cfg-conversas-optouts': defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesConversasOptoutsPage.vue')),
|
|
'cfg-conversas-sla': defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesConversasSlaPage.vue')),
|
|
'cfg-conversas-bots': defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesConversasBotsPage.vue')),
|
|
'cfg-lembretes': defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesLembretesSessaoPage.vue')),
|
|
'cfg-creditos-wa': defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesCreditosWhatsappPage.vue')),
|
|
'cfg-sms': defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesSmsPage.vue')),
|
|
'cfg-email-templates': defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesEmailTemplatesPage.vue')),
|
|
'cfg-empresa': defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesMinhaEmpresaPage.vue')),
|
|
'cfg-recursos-extras': defineAsyncComponent(() => import('@/layout/configuracoes/ConfiguracoesRecursosExtrasPage.vue')),
|
|
'cfg-auditoria': defineAsyncComponent(() => import('@/layout/configuracoes/AuditoriaPage.vue')),
|
|
// Conta (páginas pessoais que vivem em /account/*)
|
|
'cfg-perfil': defineAsyncComponent(() => import('@/views/pages/account/ProfilePage.vue')),
|
|
'cfg-plano': defineAsyncComponent(() => import('@/views/pages/billing/TherapistMeuPlanoPage.vue')),
|
|
'cfg-negocio': defineAsyncComponent(() => import('@/views/pages/account/Negociopage.vue')),
|
|
'cfg-seguranca': defineAsyncComponent(() => import('@/views/pages/auth/SecurityPage.vue'))
|
|
};
|
|
|
|
// Keys que renderizam controles inline definidos neste arquivo (Layout Melissa).
|
|
// Hoje ha apenas 1: pagina unificada que concentra Aparencia + Fundo
|
|
// + Relogio + Cronometro nos 4 cards stackeados.
|
|
const INLINE_KEYS = new Set(['aparencia']);
|
|
|
|
const settings = inject('melissaSettings', null);
|
|
if (!settings) {
|
|
console.warn('[MelissaConfiguracoes] inject melissaSettings ausente — montagem fora do MelissaLayout?');
|
|
}
|
|
|
|
const {
|
|
layoutConfig,
|
|
isDarkTheme,
|
|
activeSurface,
|
|
PRIMARY_COLORS,
|
|
SURFACES,
|
|
setPrimary,
|
|
setSurface,
|
|
setDark,
|
|
bgUrl,
|
|
overlayOpacity,
|
|
bgImageOpacity,
|
|
onFileChange,
|
|
clearBg,
|
|
use24h,
|
|
toqueTermino,
|
|
testarToque
|
|
} = settings || {};
|
|
|
|
// ── Catálogo de seções ─────────────────────────────────────────
|
|
// Espelha a estrutura da /configuracoes/ (ConfiguracoesPage.vue).
|
|
// Todas as keys são INTERNAS — controles inline (Layout Melissa) ou
|
|
// componentes embedados (COMPONENT_MAP). Nada navega pra fora.
|
|
const grupos = [
|
|
{
|
|
key: 'layout-melissa',
|
|
label: 'Layout Melissa',
|
|
desc: 'Aparência, plano de fundo, relógio e cronômetro do resumo.',
|
|
icon: 'pi pi-palette',
|
|
items: [
|
|
{ key: 'aparencia', label: 'Layout Melissa', desc: 'Tema, cor primária, surface, plano de fundo, relógio e cronômetro — tudo numa tela só.', icon: 'pi pi-palette' }
|
|
]
|
|
},
|
|
{
|
|
key: 'conta',
|
|
label: 'Conta',
|
|
desc: 'Perfil pessoal, plano contratado, dados do negócio e segurança.',
|
|
icon: 'pi pi-user',
|
|
items: [
|
|
{ key: 'cfg-perfil', label: 'Meu Perfil', desc: 'Nome, avatar, redes sociais e preferências de aparência.', icon: 'pi pi-user' },
|
|
{ key: 'cfg-plano', label: 'Meu Plano', desc: 'Plano contratado, limites de uso e fatura.', icon: 'pi pi-credit-card' },
|
|
{ key: 'cfg-negocio', label: 'Meu Negócio', desc: 'Dados do negócio, faturamento e branding.', icon: 'pi pi-briefcase' },
|
|
{ key: 'cfg-seguranca', label: 'Segurança', desc: 'Senha, dispositivos confiáveis e sessões ativas.', icon: 'pi pi-shield' }
|
|
]
|
|
},
|
|
{
|
|
key: 'agenda',
|
|
label: 'Agenda',
|
|
desc: 'Horários, bloqueios e agendador público para pacientes.',
|
|
icon: 'pi pi-calendar',
|
|
items: [
|
|
{ key: 'cfg-agenda', label: 'Agenda', desc: 'Horários semanais, exceções, duração e intervalo padrão.', icon: 'pi pi-calendar' },
|
|
{ key: 'cfg-bloqueios', label: 'Bloqueios', desc: 'Feriados nacionais, municipais e períodos bloqueados.', icon: 'pi pi-ban' },
|
|
{ key: 'cfg-agendador', label: 'Agendador Online', desc: 'Link público para pacientes solicitarem horários.', icon: 'pi pi-calendar-clock' }
|
|
]
|
|
},
|
|
{
|
|
key: 'financeiro',
|
|
label: 'Financeiro',
|
|
desc: 'Formas de pagamento, valores, descontos e convênios.',
|
|
icon: 'pi pi-wallet',
|
|
items: [
|
|
{ key: 'cfg-pagamento', label: 'Pagamento', desc: 'Formas de pagamento: Pix, depósito, dinheiro, cartão, convênio.', icon: 'pi pi-wallet' },
|
|
{ key: 'cfg-precificacao', label: 'Precificação', desc: 'Valor padrão da sessão e preços por tipo de compromisso.', icon: 'pi pi-tag' },
|
|
{ key: 'cfg-descontos', label: 'Descontos por Paciente', desc: 'Descontos recorrentes aplicados automaticamente.', icon: 'pi pi-percentage' },
|
|
{ key: 'cfg-excecoes', label: 'Exceções Financeiras', desc: 'O que cobrar em faltas, cancelamentos e situações excepcionais.', icon: 'pi pi-exclamation-triangle' },
|
|
{ key: 'cfg-convenios', label: 'Convênios', desc: 'Cadastre os convênios que você atende e seus valores.', icon: 'pi pi-id-card' }
|
|
]
|
|
},
|
|
{
|
|
key: 'whatsapp',
|
|
label: 'WhatsApp & Conversas',
|
|
desc: 'Canal, tags, auto-reply, lembretes e créditos.',
|
|
icon: 'pi pi-whatsapp',
|
|
items: [
|
|
{ key: 'cfg-wa', label: 'Canal WhatsApp', desc: 'Escolha o canal (oficial AgenciaPSI ou pessoal) e configure a integração.', icon: 'pi pi-whatsapp' },
|
|
{ key: 'cfg-wa-templates', label: 'Templates WhatsApp', desc: 'Personalize os textos enviados ou volte ao padrão da plataforma.', icon: 'pi pi-file-edit' },
|
|
{ key: 'cfg-conversas-tags', label: 'Tags de Conversa', desc: 'Etiquetas custom pra classificar threads no CRM (urgente, remarcação…).', icon: 'pi pi-tag' },
|
|
{ key: 'cfg-conversas-autoreply', label: 'Auto-reply WhatsApp', desc: 'Resposta automática quando paciente escreve fora do horário.', icon: 'pi pi-reply' },
|
|
{ key: 'cfg-conversas-optouts', label: 'Opt-outs (LGPD)', desc: 'Números que pediram pra não receber mensagens. Direito de oposição LGPD.', icon: 'pi pi-ban' },
|
|
{ key: 'cfg-conversas-sla', label: 'SLA de resposta', desc: 'Tempo máximo pra responder. Alerta quando estourar.', icon: 'pi pi-stopwatch' },
|
|
{ key: 'cfg-conversas-bots', label: 'Bot de triagem', desc: 'Coleta nome e motivo via WhatsApp antes do fluxo humano.', icon: 'pi pi-android' },
|
|
{ key: 'cfg-lembretes', label: 'Lembretes de Sessão', desc: 'WhatsApp automático 24h e 2h antes das sessões agendadas.', icon: 'pi pi-bell' },
|
|
{ key: 'cfg-creditos-wa', label: 'Créditos WhatsApp', desc: 'Compre pacotes de mensagens, veja saldo e extrato.', icon: 'pi pi-credit-card' }
|
|
]
|
|
},
|
|
{
|
|
key: 'comunicacao',
|
|
label: 'Comunicação',
|
|
desc: 'SMS e templates de e-mail enviados aos pacientes.',
|
|
icon: 'pi pi-send',
|
|
items: [
|
|
{ key: 'cfg-sms', label: 'SMS', desc: 'Gerencie créditos SMS e personalize as mensagens enviadas.', icon: 'pi pi-comment' },
|
|
{ key: 'cfg-email-templates', label: 'Templates de E-mail', desc: 'Personalize os e-mails enviados aos pacientes.', icon: 'pi pi-envelope' }
|
|
]
|
|
},
|
|
{
|
|
key: 'plataforma',
|
|
label: 'Empresa & Plataforma',
|
|
desc: 'Dados da empresa, recursos extras e auditoria.',
|
|
icon: 'pi pi-building',
|
|
items: [
|
|
{ key: 'cfg-empresa', label: 'Minha Empresa', desc: 'CNPJ, endereço, logomarca e redes sociais.', icon: 'pi pi-building' },
|
|
{ key: 'cfg-recursos-extras', label: 'Recursos Extras', desc: 'Amplíe as funcionalidades com recursos adicionais.', icon: 'pi pi-box' },
|
|
{ key: 'cfg-auditoria', label: 'Auditoria', desc: 'Registro imutável de operações (LGPD Art. 37).', icon: 'pi pi-shield' }
|
|
]
|
|
}
|
|
];
|
|
const secoesFlat = computed(() => grupos.flatMap((g) => g.items));
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
|
|
const secaoAtiva = ref(rotaToSecao(props.secaoRota));
|
|
const secaoAtivaInfo = computed(() => secoesFlat.value.find((s) => s.key === secaoAtiva.value) || secoesFlat.value[0]);
|
|
|
|
// Accordion: começa com o grupo da seção ativa aberto
|
|
const grupoDaSecao = (key) => grupos.find((g) => g.items.some((i) => i.key === key))?.key;
|
|
const openGroups = ref([grupoDaSecao(secaoAtiva.value)]);
|
|
|
|
// Sincroniza com mudanças de rota (deep-link, navegação dentro do MelissaLayout
|
|
// trocando entre /melissa/perfil ↔ /melissa/plano sem desmontar)
|
|
watch(() => props.secaoRota, (v) => {
|
|
const k = rotaToSecao(v);
|
|
if (!k || k === secaoAtiva.value) return;
|
|
secaoAtiva.value = k;
|
|
const gk = grupoDaSecao(k);
|
|
if (gk && !openGroups.value.includes(gk)) openGroups.value = [...openGroups.value, gk];
|
|
});
|
|
|
|
function selecionar(item) {
|
|
secaoAtiva.value = item.key;
|
|
fecharDrawer();
|
|
const gk = grupoDaSecao(item.key);
|
|
if (gk && !openGroups.value.includes(gk)) openGroups.value = [...openGroups.value, gk];
|
|
// Atualiza a URL pra refletir a seção atual — sem isso, /melissa/aparencia
|
|
// ficava fixo no path enquanto o user navegava em outras seções da config.
|
|
const slug = secaoToRota(item.key);
|
|
if (route.params?.secao !== slug) {
|
|
router.push({ name: 'Melissa', params: { secao: slug } });
|
|
}
|
|
}
|
|
|
|
// Componente embedado da seção ativa (null → renderiza inline do Layout Melissa)
|
|
const embedComp = computed(() => COMPONENT_MAP[secaoAtiva.value] || null);
|
|
const isInline = computed(() => INLINE_KEYS.has(secaoAtiva.value));
|
|
|
|
// ── Breakpoints + drawer (blueprint §2/§3) ─────────────────
|
|
const drawerOpen = ref(false);
|
|
const isMobile = ref(false);
|
|
let _mqMobile = null;
|
|
function _onMqMobileChange(e) {
|
|
isMobile.value = e.matches;
|
|
if (!e.matches) drawerOpen.value = false;
|
|
}
|
|
function toggleDrawer() { drawerOpen.value = !drawerOpen.value; }
|
|
function fecharDrawer() { drawerOpen.value = false; }
|
|
|
|
onMounted(() => {
|
|
if (typeof window !== 'undefined' && window.matchMedia) {
|
|
_mqMobile = window.matchMedia('(max-width: 1023px)');
|
|
isMobile.value = _mqMobile.matches;
|
|
_mqMobile.addEventListener('change', _onMqMobileChange);
|
|
}
|
|
});
|
|
onBeforeUnmount(() => {
|
|
if (_mqMobile) _mqMobile.removeEventListener('change', _onMqMobileChange);
|
|
});
|
|
|
|
// ── Helpers de display ──────────────────────────────────────
|
|
const overlayPct = computed(() => Math.round((overlayOpacity?.value ?? 0) * 100));
|
|
const bgImagePct = computed(() => Math.round((bgImageOpacity?.value ?? 1) * 100));
|
|
const TOQUES_LIST = TOQUES;
|
|
|
|
// File input local (o do MelissaLayout vive dentro do popover de canto e
|
|
// pode estar null quando esta página é aberta sem o popover)
|
|
const fileInputRef = ref(null);
|
|
function pickFile() { fileInputRef.value?.click(); }
|
|
|
|
function resetCores() {
|
|
setPrimary?.('noir');
|
|
setSurface?.(isDarkTheme?.value ? 'zinc' : 'slate');
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<!-- Drawer host (multi-root, sibling do .mcfg-page — blueprint §2) -->
|
|
<aside
|
|
class="mcfg-mobile-drawer"
|
|
:class="{ 'is-open': drawerOpen }"
|
|
v-show="isMobile"
|
|
aria-label="Seções de configuração"
|
|
>
|
|
<div id="mcfg-mobile-drawer-target" class="mcfg-mobile-drawer__scroll" />
|
|
</aside>
|
|
<Transition name="mcfg-drawer-fade">
|
|
<div
|
|
v-if="isMobile && drawerOpen"
|
|
class="mcfg-mobile-drawer__backdrop"
|
|
@click="fecharDrawer"
|
|
/>
|
|
</Transition>
|
|
|
|
<section class="mcfg-page">
|
|
<header class="mcfg-page__head">
|
|
<button
|
|
class="mcfg-menu-btn mcfg-menu-btn--mobile-only"
|
|
v-tooltip.bottom="'Seções'"
|
|
@click="toggleDrawer"
|
|
>
|
|
<i class="pi pi-bars" />
|
|
<span>Seções</span>
|
|
</button>
|
|
<div class="mcfg-page__title">
|
|
<i class="pi pi-cog text-slate-300" />
|
|
<span>Configurações do Melissa</span>
|
|
<span class="mcfg-page__sep" aria-hidden="true">·</span>
|
|
<span class="mcfg-page__sub">{{ secaoAtivaInfo?.label }}</span>
|
|
</div>
|
|
<div class="mcfg-page__actions">
|
|
<button class="mcfg-close" v-tooltip.bottom="'Voltar (Esc)'" @click="emit('close')">
|
|
<i class="pi pi-times" />
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="mcfg-body">
|
|
<!-- ═══ ASIDE — Accordion de grupos + cards de seções ═══ -->
|
|
<Teleport to="#mcfg-mobile-drawer-target" :disabled="!isMobile">
|
|
<aside class="mcfg-side">
|
|
<Accordion v-model:value="openGroups" multiple class="mcfg-accordion">
|
|
<AccordionPanel v-for="g in grupos" :key="g.key" :value="g.key">
|
|
<AccordionHeader>
|
|
<div class="mcfg-grp-head">
|
|
<i :class="g.icon" class="mcfg-grp-icon" />
|
|
<div class="mcfg-grp-text">
|
|
<span class="mcfg-grp-label">{{ g.label }}</span>
|
|
<span class="mcfg-grp-desc">{{ g.desc }}</span>
|
|
</div>
|
|
<span class="mcfg-grp-badge">{{ g.items.length }}</span>
|
|
</div>
|
|
</AccordionHeader>
|
|
<AccordionContent>
|
|
<div class="mcfg-nav-list">
|
|
<button
|
|
v-for="s in g.items"
|
|
:key="s.key"
|
|
type="button"
|
|
class="mcfg-nav-item"
|
|
:class="{ 'is-active': secaoAtiva === s.key }"
|
|
@click="selecionar(s)"
|
|
>
|
|
<i :class="s.icon" class="mcfg-nav-item__icon" />
|
|
<div class="mcfg-nav-item__text">
|
|
<span class="mcfg-nav-item__label">{{ s.label }}</span>
|
|
<span class="mcfg-nav-item__desc">{{ s.desc }}</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</AccordionContent>
|
|
</AccordionPanel>
|
|
</Accordion>
|
|
</aside>
|
|
</Teleport>
|
|
|
|
<!-- ═══ MAIN — Conteúdo da seção ativa ═══ -->
|
|
<div class="mcfg-main" :class="{ 'is-embed': !isInline }">
|
|
<!-- Hero compacto (mostra contexto da seção quando embed; o Layout
|
|
Melissa inline mostra título/ações nos próprios cards) -->
|
|
<div v-if="!isInline && secaoAtivaInfo" class="mcfg-embed-hero">
|
|
<div class="mcfg-embed-hero__icon">
|
|
<i :class="secaoAtivaInfo.icon" />
|
|
</div>
|
|
<div class="mcfg-embed-hero__text">
|
|
<div class="mcfg-embed-hero__title">{{ secaoAtivaInfo.label }}</div>
|
|
<div class="mcfg-embed-hero__desc">{{ secaoAtivaInfo.desc }}</div>
|
|
</div>
|
|
<!-- Teleport target pros componentes externos que injetam
|
|
ações no header da ConfiguracoesPage tradicional. -->
|
|
<div id="cfg-page-actions" class="mcfg-embed-hero__actions"></div>
|
|
</div>
|
|
|
|
<div class="mcfg-main__inner">
|
|
|
|
<!-- ──── Layout Melissa unificado: Aparência + Fundo + Relógio + Cronômetro ──── -->
|
|
<template v-if="secaoAtiva === 'aparencia'">
|
|
<div class="mcfg-w">
|
|
<div class="mcfg-w__head">
|
|
<span class="mcfg-w__title"><i class="pi pi-palette" /> Aparência</span>
|
|
<button class="mcfg-w__action" v-tooltip.left="'Voltar ao padrão (noir)'" @click="resetCores">
|
|
<i class="pi pi-refresh" />
|
|
<span>Padrão</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mcfg-field">
|
|
<label class="mcfg-field__label">Tema</label>
|
|
<div class="mcfg-segmented">
|
|
<button class="mcfg-seg__btn" :class="{ 'is-active': !isDarkTheme }" @click="setDark(false)">
|
|
<i class="pi pi-sun" /><span>Claro</span>
|
|
</button>
|
|
<button class="mcfg-seg__btn" :class="{ 'is-active': isDarkTheme }" @click="setDark(true)">
|
|
<i class="pi pi-moon" /><span>Escuro</span>
|
|
</button>
|
|
</div>
|
|
<div class="mcfg-field__hint">Vale pra todo o app, não só pra esta tela.</div>
|
|
</div>
|
|
|
|
<div class="mcfg-field">
|
|
<label class="mcfg-field__label">
|
|
Cor primária
|
|
<span class="mcfg-field__current">{{ layoutConfig?.primary || 'noir' }}</span>
|
|
</label>
|
|
<div class="mcfg-swatches">
|
|
<button
|
|
v-for="pc in PRIMARY_COLORS"
|
|
:key="pc.name"
|
|
class="mcfg-swatch"
|
|
:class="{ 'is-active': layoutConfig?.primary === pc.name }"
|
|
:style="{ backgroundColor: pc.swatch === 'currentColor' ? 'var(--m-text)' : pc.swatch }"
|
|
v-tooltip.bottom="pc.name"
|
|
@click="setPrimary(pc.name)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mcfg-field">
|
|
<label class="mcfg-field__label">
|
|
Surface
|
|
<span class="mcfg-field__current">{{ activeSurface || '—' }}</span>
|
|
</label>
|
|
<div class="mcfg-swatches">
|
|
<button
|
|
v-for="sf in SURFACES"
|
|
:key="sf.name"
|
|
class="mcfg-swatch"
|
|
:class="{ 'is-active': activeSurface === sf.name }"
|
|
:style="{ backgroundColor: sf.palette['500'] }"
|
|
v-tooltip.bottom="sf.name"
|
|
@click="setSurface(sf.name)"
|
|
/>
|
|
</div>
|
|
<div class="mcfg-field__hint">Tom de fundo das superfícies (cards, dialogs, header dialog).</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ──── Plano de fundo ──── -->
|
|
<div class="mcfg-w">
|
|
<div class="mcfg-w__head">
|
|
<span class="mcfg-w__title"><i class="pi pi-image" /> Plano de fundo</span>
|
|
<button v-if="bgUrl" class="mcfg-w__action mcfg-w__action--danger" v-tooltip.left="'Voltar ao gradiente padrão'" @click="clearBg">
|
|
<i class="pi pi-times" />
|
|
<span>Remover</span>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mcfg-field">
|
|
<label class="mcfg-field__label">Imagem</label>
|
|
<div class="mcfg-bg-pick">
|
|
<div class="mcfg-bg-preview" :class="{ 'is-empty': !bgUrl }">
|
|
<img v-if="bgUrl" :src="bgUrl" alt="Plano de fundo atual" />
|
|
<i v-else class="pi pi-image" />
|
|
</div>
|
|
<div class="mcfg-bg-pick__actions">
|
|
<button class="mcfg-btn mcfg-btn--primary" @click="pickFile">
|
|
<i class="pi pi-upload" />
|
|
<span>{{ bgUrl ? 'Trocar imagem' : 'Enviar imagem' }}</span>
|
|
</button>
|
|
<input ref="fileInputRef" type="file" accept="image/*" hidden @change="onFileChange" />
|
|
<div class="mcfg-field__hint">JPG, PNG ou WEBP. Máximo 2 MB.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mcfg-field">
|
|
<label class="mcfg-field__label">
|
|
Opacidade do escurecedor
|
|
<span class="mcfg-field__current">{{ overlayPct }}%</span>
|
|
</label>
|
|
<input
|
|
v-model.number="overlayOpacity"
|
|
type="range"
|
|
min="0"
|
|
max="0.8"
|
|
step="0.01"
|
|
class="mcfg-slider"
|
|
/>
|
|
<div class="mcfg-field__hint">Filme escuro sobre o fundo — destaca o conteúdo.</div>
|
|
</div>
|
|
|
|
<div v-if="bgUrl" class="mcfg-field">
|
|
<label class="mcfg-field__label">
|
|
Opacidade da imagem
|
|
<span class="mcfg-field__current">{{ bgImagePct }}%</span>
|
|
</label>
|
|
<input
|
|
v-model.number="bgImageOpacity"
|
|
type="range"
|
|
min="0.05"
|
|
max="1"
|
|
step="0.01"
|
|
class="mcfg-slider"
|
|
/>
|
|
<div class="mcfg-field__hint">Mistura a foto com o gradiente do tema.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ──── Relógio ──── -->
|
|
<div class="mcfg-w">
|
|
<div class="mcfg-w__head">
|
|
<span class="mcfg-w__title"><i class="pi pi-clock" /> Relógio</span>
|
|
</div>
|
|
<div class="mcfg-field">
|
|
<label class="mcfg-field__label">Formato da hora</label>
|
|
<div class="mcfg-segmented">
|
|
<button class="mcfg-seg__btn" :class="{ 'is-active': use24h }" @click="use24h = true">
|
|
<span>24 horas</span>
|
|
</button>
|
|
<button class="mcfg-seg__btn" :class="{ 'is-active': !use24h }" @click="use24h = false">
|
|
<span>12 horas (AM/PM)</span>
|
|
</button>
|
|
</div>
|
|
<div class="mcfg-field__hint">Aparece no relógio gigante do resumo.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ──── Cronômetro ──── -->
|
|
<div class="mcfg-w">
|
|
<div class="mcfg-w__head">
|
|
<span class="mcfg-w__title"><i class="pi pi-stopwatch" /> Cronômetro de sessão</span>
|
|
</div>
|
|
<div class="mcfg-field">
|
|
<label class="mcfg-field__label">Toque ao terminar</label>
|
|
<div class="mcfg-toque">
|
|
<select v-model="toqueTermino" class="mcfg-select">
|
|
<option v-for="t in TOQUES_LIST" :key="t.id" :value="t.id">{{ t.label }}</option>
|
|
</select>
|
|
<button class="mcfg-btn" :disabled="toqueTermino === 'nenhum'" @click="testarToque">
|
|
<i class="pi pi-volume-up" />
|
|
<span>Testar</span>
|
|
</button>
|
|
</div>
|
|
<div class="mcfg-field__hint">Som ao final dos 50 minutos da sessão.</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- ──── Embed dinâmico (páginas /configuracoes/*) ──── -->
|
|
<div v-else-if="embedComp" class="mcfg-embed-wrap">
|
|
<Suspense>
|
|
<template #default>
|
|
<component :is="embedComp" :key="secaoAtiva" />
|
|
</template>
|
|
<template #fallback>
|
|
<div class="mcfg-loading">
|
|
<i class="pi pi-spin pi-spinner" />
|
|
<span>Carregando…</span>
|
|
</div>
|
|
</template>
|
|
</Suspense>
|
|
</div>
|
|
|
|
<!-- Rodapé info — auto-save (só nos inlines) -->
|
|
<div v-if="isInline" class="mcfg-foot">
|
|
<i class="pi pi-check-circle" />
|
|
<span>Mudanças são salvas automaticamente.</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* ═════ Container ═════ */
|
|
.mcfg-page {
|
|
position: absolute;
|
|
inset: 6px 6px calc(var(--m-dock-h, 76px) + 6px) 6px;
|
|
z-index: 40;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--m-bg-medium);
|
|
backdrop-filter: blur(32px) saturate(160%);
|
|
-webkit-backdrop-filter: blur(32px) saturate(160%);
|
|
border: 1px solid var(--m-border);
|
|
border-radius: 18px;
|
|
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
|
|
overflow: hidden;
|
|
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
|
|
color: var(--m-text);
|
|
animation: mcfg-page-enter 240ms cubic-bezier(0.2, 0.7, 0.3, 1);
|
|
}
|
|
@keyframes mcfg-page-enter {
|
|
from { opacity: 0; transform: scale(0.985); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|
|
|
|
/* ═════ Header ═════ */
|
|
.mcfg-page__head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 14px 18px;
|
|
border-bottom: 1px solid var(--m-border);
|
|
flex-shrink: 0;
|
|
gap: 10px;
|
|
}
|
|
.mcfg-page__title {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
}
|
|
.mcfg-page__title > span:not(.mcfg-page__sep):not(.mcfg-page__sub) {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.mcfg-page__sep {
|
|
color: var(--m-text-faint);
|
|
font-weight: 400;
|
|
margin: 0 -2px;
|
|
}
|
|
.mcfg-page__sub {
|
|
color: var(--m-text-muted);
|
|
font-weight: 400;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.mcfg-page__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
|
|
|
|
.mcfg-close {
|
|
width: 32px; height: 32px;
|
|
display: grid; place-items: center;
|
|
background: var(--m-bg-soft);
|
|
border: 1px solid var(--m-border);
|
|
color: var(--m-text);
|
|
border-radius: 9px;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
transition: background-color 140ms ease;
|
|
}
|
|
.mcfg-close:hover { background: var(--m-bg-soft-hover); }
|
|
.mcfg-close > i { font-size: 0.85rem; }
|
|
|
|
.mcfg-menu-btn {
|
|
display: none;
|
|
height: 32px;
|
|
align-items: center;
|
|
gap: 6px;
|
|
flex-shrink: 0;
|
|
background: var(--m-accent);
|
|
border: 1px solid var(--m-accent);
|
|
color: white;
|
|
padding: 0 11px;
|
|
border-radius: 9px;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
font-size: 0.78rem;
|
|
font-weight: 600;
|
|
transition: background-color 140ms ease, transform 140ms ease;
|
|
}
|
|
.mcfg-menu-btn:hover {
|
|
background: color-mix(in srgb, var(--m-accent) 88%, white);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* ═════ Body 2-col ═════ */
|
|
.mcfg-body {
|
|
flex: 1;
|
|
display: flex;
|
|
min-height: 0;
|
|
position: relative;
|
|
}
|
|
|
|
/* ═════ COL 1: Aside ═════ */
|
|
.mcfg-side {
|
|
width: 320px;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-right: 1px solid var(--m-border);
|
|
background: var(--m-bg-soft);
|
|
overflow-y: auto;
|
|
padding: 10px 8px 16px;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--m-border-strong) transparent;
|
|
}
|
|
.mcfg-side::-webkit-scrollbar { width: 5px; }
|
|
.mcfg-side::-webkit-scrollbar-thumb { background: var(--m-border-strong); border-radius: 3px; }
|
|
|
|
/* Accordion — usando o componente do PrimeVue, neutralizando cores
|
|
pra tema Melissa. Estilo enxuto pra evitar lag (sem transitions
|
|
de box-shadow/color-mix, sem line-clamp em cada item). */
|
|
.mcfg-accordion :deep(.p-accordionpanel) {
|
|
border: none;
|
|
background: transparent;
|
|
}
|
|
.mcfg-accordion :deep(.p-accordionheader) {
|
|
padding: 6px 8px;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--m-text);
|
|
border-radius: 8px;
|
|
}
|
|
.mcfg-accordion :deep(.p-accordionheader:hover) {
|
|
background: var(--m-bg-soft-hover);
|
|
}
|
|
.mcfg-accordion :deep(.p-accordionheader-toggle-icon) {
|
|
color: var(--m-text-muted);
|
|
font-size: 0.72rem;
|
|
}
|
|
.mcfg-accordion :deep(.p-accordioncontent),
|
|
.mcfg-accordion :deep(.p-accordioncontent-content) {
|
|
padding: 0;
|
|
background: transparent;
|
|
border: none;
|
|
}
|
|
.mcfg-accordion :deep(.p-accordioncontent-content) {
|
|
padding: 2px 0 6px;
|
|
}
|
|
|
|
/* Header de grupo — icone inline + (label + desc) + badge */
|
|
.mcfg-grp-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
.mcfg-grp-icon {
|
|
width: 18px;
|
|
text-align: center;
|
|
color: var(--p-primary-color);
|
|
font-size: 0.95rem;
|
|
flex-shrink: 0;
|
|
}
|
|
.mcfg-grp-text {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
text-align: left;
|
|
}
|
|
.mcfg-grp-label {
|
|
font-size: 0.86rem;
|
|
font-weight: 600;
|
|
color: var(--m-text);
|
|
line-height: 1.25;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.mcfg-grp-desc {
|
|
font-size: 0.7rem;
|
|
color: var(--m-text-muted);
|
|
line-height: 1.3;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
.mcfg-grp-badge {
|
|
flex-shrink: 0;
|
|
min-width: 20px;
|
|
height: 18px;
|
|
padding: 0 6px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--m-bg-medium);
|
|
border: 1px solid var(--m-border);
|
|
color: var(--m-text-muted);
|
|
font-size: 0.66rem;
|
|
font-weight: 700;
|
|
border-radius: 999px;
|
|
}
|
|
|
|
/* Sub-itens — botao com titulo + subtitulo */
|
|
.mcfg-nav-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
padding-left: 24px;
|
|
padding-right: 4px;
|
|
}
|
|
.mcfg-nav-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 10px;
|
|
background: transparent;
|
|
border: none;
|
|
border-radius: 8px;
|
|
color: var(--m-text);
|
|
cursor: pointer;
|
|
text-align: left;
|
|
font-family: inherit;
|
|
width: 100%;
|
|
min-height: 44px;
|
|
}
|
|
.mcfg-nav-item:hover {
|
|
background: color-mix(in srgb, var(--p-primary-color) 12%, transparent);
|
|
color: var(--p-primary-color);
|
|
}
|
|
.mcfg-nav-item:hover .mcfg-nav-item__icon { color: var(--p-primary-color); }
|
|
.mcfg-nav-item.is-active {
|
|
background: color-mix(in srgb, var(--p-primary-color) 16%, transparent);
|
|
color: var(--p-primary-color);
|
|
}
|
|
.mcfg-nav-item.is-active .mcfg-nav-item__icon { color: var(--p-primary-color); }
|
|
.mcfg-nav-item__icon {
|
|
width: 16px;
|
|
text-align: center;
|
|
color: var(--m-text-muted);
|
|
font-size: 0.85rem;
|
|
flex-shrink: 0;
|
|
}
|
|
.mcfg-nav-item__text {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
}
|
|
.mcfg-nav-item__label {
|
|
font-size: 0.84rem;
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.mcfg-nav-item__desc {
|
|
font-size: 0.7rem;
|
|
color: var(--m-text-muted);
|
|
line-height: 1.3;
|
|
overflow: hidden;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
.mcfg-nav-item:hover .mcfg-nav-item__desc,
|
|
.mcfg-nav-item.is-active .mcfg-nav-item__desc {
|
|
color: color-mix(in srgb, var(--p-primary-color) 70%, var(--m-text-muted));
|
|
}
|
|
|
|
/* ═════ COL 2: Main ═════ */
|
|
.mcfg-main {
|
|
flex: 1;
|
|
min-width: 0;
|
|
overflow-y: auto;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--m-border-strong) transparent;
|
|
}
|
|
.mcfg-main::-webkit-scrollbar { width: 6px; }
|
|
.mcfg-main::-webkit-scrollbar-thumb { background: var(--m-border-strong); border-radius: 3px; }
|
|
|
|
.mcfg-main__inner {
|
|
max-width: 720px;
|
|
margin: 0 auto;
|
|
padding: 22px 22px 28px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 14px;
|
|
}
|
|
/* Em modo embed (componentes /configuracoes/* aninhados), tira limites
|
|
pra não esmagar layouts complexos. */
|
|
.mcfg-main.is-embed .mcfg-main__inner {
|
|
max-width: none;
|
|
padding: 0;
|
|
}
|
|
|
|
/* ── Hero compacto contextual quando embed ─────────────────────
|
|
Substitui o hero da ConfiguracoesPage que não existe aqui (embedamos
|
|
só a child sem o parent). Sticky no topo do scroll do .mcfg-main. */
|
|
.mcfg-embed-hero {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 11;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 12px 18px;
|
|
background: var(--m-bg-medium);
|
|
backdrop-filter: blur(20px) saturate(160%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(160%);
|
|
border-bottom: 1px solid var(--m-border);
|
|
flex-shrink: 0;
|
|
}
|
|
.mcfg-embed-hero__icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
display: grid;
|
|
place-items: center;
|
|
background: var(--m-accent-soft);
|
|
color: var(--m-accent);
|
|
border-radius: 9px;
|
|
flex-shrink: 0;
|
|
}
|
|
.mcfg-embed-hero__icon > i { font-size: 0.92rem; }
|
|
.mcfg-embed-hero__text {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1px;
|
|
}
|
|
.mcfg-embed-hero__title {
|
|
font-size: 0.94rem;
|
|
font-weight: 600;
|
|
color: var(--m-text);
|
|
line-height: 1.2;
|
|
}
|
|
.mcfg-embed-hero__desc {
|
|
font-size: 0.74rem;
|
|
color: var(--m-text-muted);
|
|
line-height: 1.3;
|
|
}
|
|
.mcfg-embed-hero__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Wrapper que dá padding ao conteúdo embedado (espelha o
|
|
`<div class="px-3 md:px-4 pb-5">` da ConfiguracoesPage). */
|
|
.mcfg-embed-wrap {
|
|
padding: 16px 18px 28px;
|
|
}
|
|
@media (max-width: 1023px) {
|
|
.mcfg-embed-wrap { padding: 12px 12px 24px; }
|
|
.mcfg-embed-hero { padding: 10px 12px; }
|
|
}
|
|
|
|
/* Loading do Suspense quando o async component está carregando */
|
|
.mcfg-loading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
padding: 60px 20px;
|
|
color: var(--m-text-muted);
|
|
font-size: 0.86rem;
|
|
}
|
|
.mcfg-loading > i { font-size: 1.2rem; color: var(--m-accent); }
|
|
|
|
/* ═════ Card "widget" (corpo da seção) ═════ */
|
|
.mcfg-w {
|
|
background: var(--m-bg-soft);
|
|
border: 1px solid var(--m-border);
|
|
border-radius: 12px;
|
|
padding: 18px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
}
|
|
.mcfg-w__head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
.mcfg-w__title {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 0.94rem;
|
|
font-weight: 600;
|
|
}
|
|
.mcfg-w__title > i { color: var(--m-text-muted); font-size: 0.92rem; }
|
|
|
|
.mcfg-w__action {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
height: 28px;
|
|
padding: 0 10px;
|
|
background: transparent;
|
|
border: 1px solid var(--m-border);
|
|
color: var(--m-text-muted);
|
|
border-radius: 9px;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
font-size: 0.72rem;
|
|
font-weight: 500;
|
|
transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
|
|
}
|
|
.mcfg-w__action:hover { background: var(--m-bg-soft-hover); color: var(--m-text); }
|
|
.mcfg-w__action--danger:hover {
|
|
background: rgba(239, 68, 68, 0.15);
|
|
border-color: rgba(239, 68, 68, 0.4);
|
|
color: rgb(248, 113, 113);
|
|
}
|
|
.mcfg-w__action > i { font-size: 0.7rem; }
|
|
|
|
/* ═════ Field ═════ */
|
|
.mcfg-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
.mcfg-field__label {
|
|
font-size: 0.78rem;
|
|
font-weight: 600;
|
|
color: var(--m-text);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 8px;
|
|
}
|
|
.mcfg-field__current {
|
|
font-size: 0.7rem;
|
|
color: var(--m-text-muted);
|
|
font-weight: 500;
|
|
text-transform: lowercase;
|
|
letter-spacing: 0.02em;
|
|
}
|
|
.mcfg-field__hint {
|
|
font-size: 0.7rem;
|
|
color: var(--m-text-muted);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* ═════ Segmented ═════ */
|
|
.mcfg-segmented {
|
|
display: inline-flex;
|
|
background: var(--m-bg-medium);
|
|
border: 1px solid var(--m-border);
|
|
border-radius: 9px;
|
|
padding: 3px;
|
|
gap: 2px;
|
|
width: fit-content;
|
|
}
|
|
.mcfg-seg__btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 14px;
|
|
border-radius: 7px;
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--m-text-muted);
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
font-size: 0.78rem;
|
|
font-weight: 500;
|
|
transition: background-color 140ms ease, color 140ms ease;
|
|
}
|
|
.mcfg-seg__btn:hover:not(.is-active) { color: var(--m-text); background: var(--m-bg-soft-hover); }
|
|
.mcfg-seg__btn.is-active {
|
|
background: var(--m-accent-soft);
|
|
color: var(--m-text);
|
|
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--m-accent) 35%, transparent);
|
|
}
|
|
.mcfg-seg__btn > i { font-size: 0.78rem; }
|
|
|
|
/* ═════ Swatches ═════ */
|
|
.mcfg-swatches {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
.mcfg-swatch {
|
|
width: 28px; height: 28px;
|
|
border-radius: 50%;
|
|
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
cursor: pointer;
|
|
padding: 0;
|
|
transition: transform 140ms ease, box-shadow 140ms ease;
|
|
}
|
|
.mcfg-swatch:hover { transform: scale(1.1); }
|
|
.mcfg-swatch.is-active {
|
|
transform: scale(1.1);
|
|
box-shadow:
|
|
0 0 0 2px var(--m-bg-medium),
|
|
0 0 0 4px var(--p-primary-color);
|
|
}
|
|
|
|
/* ═════ Background pick ═════ */
|
|
.mcfg-bg-pick {
|
|
display: flex;
|
|
gap: 14px;
|
|
align-items: stretch;
|
|
}
|
|
.mcfg-bg-preview {
|
|
width: 140px;
|
|
height: 90px;
|
|
border-radius: 10px;
|
|
border: 1px solid var(--m-border);
|
|
overflow: hidden;
|
|
background: var(--m-bg-medium);
|
|
display: grid;
|
|
place-items: center;
|
|
flex-shrink: 0;
|
|
}
|
|
.mcfg-bg-preview > img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.mcfg-bg-preview.is-empty > i {
|
|
color: var(--m-text-faint);
|
|
font-size: 1.6rem;
|
|
}
|
|
.mcfg-bg-pick__actions {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
justify-content: center;
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* ═════ Slider ═════ */
|
|
.mcfg-slider {
|
|
width: 100%;
|
|
height: 4px;
|
|
border-radius: 2px;
|
|
background: var(--m-bg-medium);
|
|
cursor: pointer;
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
accent-color: var(--p-primary-color);
|
|
}
|
|
.mcfg-slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
width: 14px; height: 14px;
|
|
border-radius: 50%;
|
|
background: var(--p-primary-color);
|
|
cursor: pointer;
|
|
border: 2px solid var(--m-bg-medium);
|
|
}
|
|
.mcfg-slider::-moz-range-thumb {
|
|
width: 14px; height: 14px;
|
|
border-radius: 50%;
|
|
background: var(--p-primary-color);
|
|
cursor: pointer;
|
|
border: 2px solid var(--m-bg-medium);
|
|
}
|
|
|
|
/* ═════ Toque ═════ */
|
|
.mcfg-toque {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
.mcfg-select {
|
|
flex: 1;
|
|
background: var(--m-bg-medium);
|
|
border: 1px solid var(--m-border);
|
|
color: var(--m-text);
|
|
padding: 8px 12px;
|
|
border-radius: 9px;
|
|
font-size: 0.82rem;
|
|
font-family: inherit;
|
|
outline: none;
|
|
cursor: pointer;
|
|
}
|
|
.mcfg-select:focus { border-color: var(--m-border-strong); }
|
|
|
|
/* ═════ Botões genéricos ═════ */
|
|
.mcfg-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
height: 36px;
|
|
padding: 0 14px;
|
|
border-radius: 9px;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
font-size: 0.78rem;
|
|
font-weight: 600;
|
|
background: var(--m-bg-medium);
|
|
border: 1px solid var(--m-border);
|
|
color: var(--m-text);
|
|
transition: background-color 140ms ease, transform 140ms ease;
|
|
}
|
|
.mcfg-btn:hover:not(:disabled) { background: var(--m-bg-soft-hover); transform: translateY(-1px); }
|
|
.mcfg-btn:disabled { opacity: 0.5; cursor: not-allowed; }
|
|
.mcfg-btn--primary {
|
|
background: var(--m-accent);
|
|
border-color: var(--m-accent);
|
|
color: white;
|
|
}
|
|
.mcfg-btn--primary:hover:not(:disabled) {
|
|
background: color-mix(in srgb, var(--m-accent) 88%, white);
|
|
}
|
|
|
|
/* ═════ Footer informativo ═════ */
|
|
.mcfg-foot {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 10px 14px;
|
|
background: color-mix(in srgb, var(--m-bg-soft) 60%, transparent);
|
|
border: 1px dashed var(--m-border);
|
|
border-radius: 10px;
|
|
color: var(--m-text-muted);
|
|
font-size: 0.74rem;
|
|
}
|
|
.mcfg-foot > i { color: rgb(74, 222, 128); font-size: 0.85rem; }
|
|
|
|
/* ═════ Drawer mobile (blueprint) ═════ */
|
|
.mcfg-mobile-drawer {
|
|
position: fixed;
|
|
top: 0; left: 0;
|
|
height: 100vh;
|
|
height: 100dvh;
|
|
width: min(360px, 88vw);
|
|
z-index: 80;
|
|
background: var(--m-bg-medium);
|
|
backdrop-filter: blur(28px) saturate(160%);
|
|
-webkit-backdrop-filter: blur(28px) saturate(160%);
|
|
border-right: 1px solid var(--m-border);
|
|
transform: translateX(-100%);
|
|
transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
color: var(--m-text);
|
|
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
|
|
}
|
|
.mcfg-mobile-drawer.is-open { transform: translateX(0); }
|
|
.mcfg-mobile-drawer__scroll {
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
padding: 12px 12px 24px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
.mcfg-mobile-drawer__scroll::-webkit-scrollbar { width: 5px; }
|
|
.mcfg-mobile-drawer__scroll::-webkit-scrollbar-thumb {
|
|
background: var(--m-border-strong);
|
|
border-radius: 3px;
|
|
}
|
|
/* Aside teleportada perde os adornos próprios dentro do drawer */
|
|
.mcfg-mobile-drawer__scroll .mcfg-side {
|
|
width: 100%;
|
|
height: auto;
|
|
overflow: visible;
|
|
border-right: none;
|
|
background: transparent;
|
|
padding: 0;
|
|
}
|
|
.mcfg-mobile-drawer__backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.45);
|
|
backdrop-filter: blur(4px);
|
|
-webkit-backdrop-filter: blur(4px);
|
|
z-index: 79;
|
|
}
|
|
.mcfg-drawer-fade-enter-active,
|
|
.mcfg-drawer-fade-leave-active { transition: opacity 200ms ease; }
|
|
.mcfg-drawer-fade-enter-from,
|
|
.mcfg-drawer-fade-leave-to { opacity: 0; }
|
|
|
|
/* Mobile (<lg) — central 100%, aside off-canvas */
|
|
@media (max-width: 1023px) {
|
|
.mcfg-body { flex-direction: column; }
|
|
.mcfg-main { width: 100%; }
|
|
.mcfg-page__sep,
|
|
.mcfg-page__title > i,
|
|
.mcfg-page__title > span:first-of-type { display: none; }
|
|
.mcfg-menu-btn--mobile-only { display: inline-flex; }
|
|
.mcfg-main__inner { padding: 14px; }
|
|
.mcfg-bg-pick { flex-direction: column; }
|
|
.mcfg-bg-preview { width: 100%; height: 120px; }
|
|
.mcfg-segmented { width: 100%; }
|
|
.mcfg-seg__btn { flex: 1; justify-content: center; }
|
|
}
|
|
</style>
|