diff --git a/src/layout/melissa/MelissaConfiguracoes.vue b/src/layout/melissa/MelissaConfiguracoes.vue index 6372fcc..a2ab251 100644 --- a/src/layout/melissa/MelissaConfiguracoes.vue +++ b/src/layout/melissa/MelissaConfiguracoes.vue @@ -350,7 +350,10 @@ function resetCores() {
- {{ g.label }} +
+ {{ g.label }} + {{ g.desc }} +
{{ g.items.length }}
@@ -362,11 +365,13 @@ function resetCores() { type="button" class="mcfg-nav-item" :class="{ 'is-active': secaoAtiva === s.key }" - :title="s.desc" @click="selecionar(s)" > - {{ s.label }} +
+ {{ s.label }} + {{ s.desc }} +
@@ -736,7 +741,7 @@ function resetCores() { padding: 2px 0 6px; } -/* Header de grupo — icone inline + label + badge */ +/* Header de grupo — icone inline + (label + desc) + badge */ .mcfg-grp-head { display: flex; align-items: center; @@ -745,19 +750,33 @@ function resetCores() { min-width: 0; } .mcfg-grp-icon { - width: 16px; + width: 18px; text-align: center; color: var(--p-primary-color); - font-size: 0.92rem; + font-size: 0.95rem; flex-shrink: 0; } -.mcfg-grp-label { +.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); - text-align: left; + 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; text-overflow: ellipsis; white-space: nowrap; @@ -778,28 +797,28 @@ function resetCores() { border-radius: 999px; } -/* Sub-itens — botao linha unica, denso */ +/* Sub-itens — botao com titulo + subtitulo */ .mcfg-nav-list { display: flex; flex-direction: column; - gap: 1px; - padding-left: 22px; + gap: 2px; + padding-left: 24px; padding-right: 4px; } .mcfg-nav-item { display: flex; align-items: center; gap: 10px; - padding: 7px 10px; + padding: 8px 10px; background: transparent; border: none; - border-radius: 7px; + border-radius: 8px; color: var(--m-text); cursor: pointer; text-align: left; font-family: inherit; - font-size: 0.84rem; width: 100%; + min-height: 44px; } .mcfg-nav-item:hover { background: color-mix(in srgb, var(--p-primary-color) 12%, transparent); @@ -815,17 +834,36 @@ function resetCores() { width: 16px; text-align: center; color: var(--m-text-muted); - font-size: 0.82rem; + font-size: 0.85rem; flex-shrink: 0; } -.mcfg-nav-item__label { +.mcfg-nav-item__text { flex: 1; min-width: 0; - font-weight: 500; + 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; + text-overflow: ellipsis; + white-space: nowrap; +} +.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 {