diff --git a/src/layout/melissa/MelissaConfiguracoes.vue b/src/layout/melissa/MelissaConfiguracoes.vue index 6c66313..6372fcc 100644 --- a/src/layout/melissa/MelissaConfiguracoes.vue +++ b/src/layout/melissa/MelissaConfiguracoes.vue @@ -349,13 +349,8 @@ function resetCores() {
-
- -
-
- {{ g.label }} - {{ g.desc }} -
+ + {{ g.label }} {{ g.items.length }}
@@ -367,15 +362,11 @@ function resetCores() { type="button" class="mcfg-nav-item" :class="{ 'is-active': secaoAtiva === s.key }" + :title="s.desc" @click="selecionar(s)" > -
- -
-
- {{ s.label }} - {{ s.desc }} -
+ + {{ s.label }} @@ -714,46 +705,38 @@ function resetCores() { .mcfg-side::-webkit-scrollbar { width: 5px; } .mcfg-side::-webkit-scrollbar-thumb { background: var(--m-border-strong); border-radius: 3px; } -/* Accordion — neutralizando cores do PrimeVue pra tema Melissa */ -.mcfg-accordion :deep(.p-accordion) { - display: flex; - flex-direction: column; - gap: 2px; - background: transparent; -} +/* 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: 8px; + padding: 6px 8px; background: transparent; border: none; color: var(--m-text); - border-radius: 9px; - transition: background-color 140ms ease; - min-height: 56px; + 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.7rem; - margin-left: 4px; - transition: transform 200ms ease; + font-size: 0.72rem; } -.mcfg-accordion :deep(.p-accordioncontent) { - border: none; +.mcfg-accordion :deep(.p-accordioncontent), +.mcfg-accordion :deep(.p-accordioncontent-content) { + padding: 0; background: transparent; + border: none; } .mcfg-accordion :deep(.p-accordioncontent-content) { - padding: 4px 4px 6px; - background: transparent; - border: none; + padding: 2px 0 6px; } -/* Header de grupo — ícone + label/desc + badge contador */ +/* Header de grupo — icone inline + label + badge */ .mcfg-grp-head { display: flex; align-items: center; @@ -762,119 +745,86 @@ function resetCores() { min-width: 0; } .mcfg-grp-icon { - width: 36px; height: 36px; - display: grid; place-items: center; - background: var(--m-accent-soft); - color: var(--m-accent); - border-radius: 9px; + width: 16px; + text-align: center; + color: var(--p-primary-color); + font-size: 0.92rem; flex-shrink: 0; - transition: box-shadow 140ms ease; -} -.mcfg-grp-icon > i { font-size: 0.92rem; } -.mcfg-accordion :deep(.p-accordionheader:hover) .mcfg-grp-icon { - box-shadow: 0 0 0 2px color-mix(in srgb, var(--m-accent) 28%, transparent); -} -.mcfg-grp-text { - flex: 1; - min-width: 0; - display: flex; - flex-direction: column; - gap: 1px; - text-align: left; } .mcfg-grp-label { + flex: 1; + min-width: 0; font-size: 0.86rem; font-weight: 600; color: var(--m-text); - line-height: 1.25; -} -.mcfg-grp-desc { - font-size: 0.72rem; - color: var(--m-text-muted); - line-height: 1.3; + text-align: left; overflow: hidden; - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; + text-overflow: ellipsis; + white-space: nowrap; } .mcfg-grp-badge { flex-shrink: 0; - min-width: 22px; - height: 22px; - padding: 0 7px; + 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.68rem; + font-size: 0.66rem; font-weight: 700; border-radius: 999px; } -/* Cards de sub-itens dentro do grupo */ +/* Sub-itens — botao linha unica, denso */ .mcfg-nav-list { display: flex; flex-direction: column; - gap: 6px; - padding-left: 14px; - padding-right: 2px; + gap: 1px; + padding-left: 22px; + padding-right: 4px; } .mcfg-nav-item { display: flex; - align-items: flex-start; + align-items: center; gap: 10px; - padding: 10px; - background: var(--m-bg-medium); - border: 1px solid var(--m-border); - border-radius: 10px; + padding: 7px 10px; + background: transparent; + border: none; + border-radius: 7px; color: var(--m-text); cursor: pointer; text-align: left; font-family: inherit; - transition: background-color 140ms ease, border-color 140ms ease; + font-size: 0.84rem; width: 100%; } .mcfg-nav-item:hover { - background: var(--m-bg-soft-hover); - border-color: var(--m-border-strong); + 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: var(--m-accent-soft); - border-color: color-mix(in srgb, var(--m-accent) 55%, transparent); + 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: 32px; height: 32px; - display: grid; place-items: center; - background: var(--m-bg-soft); + width: 16px; + text-align: center; color: var(--m-text-muted); - border-radius: 9px; + font-size: 0.82rem; flex-shrink: 0; - transition: background-color 140ms ease, color 140ms ease; -} -.mcfg-nav-item.is-active .mcfg-nav-item__icon { - background: color-mix(in srgb, var(--m-accent) 22%, transparent); - color: var(--m-accent); -} -.mcfg-nav-item__icon > i { font-size: 0.82rem; } -.mcfg-nav-item__text { - flex: 1; - min-width: 0; - display: flex; - flex-direction: column; - gap: 2px; } .mcfg-nav-item__label { - font-size: 0.84rem; - font-weight: 600; - line-height: 1.2; -} -.mcfg-nav-item.is-active .mcfg-nav-item__label { color: var(--m-accent); } -.mcfg-nav-item__desc { - font-size: 0.7rem; - color: var(--m-text-muted); - line-height: 1.3; + flex: 1; + min-width: 0; + font-weight: 500; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } /* ═════ COL 2: Main ═════ */