/* ===================================================================== TR7 · Sidebar estilo protótipo (override do SmartAdmin) — v10 --------------------------------------------------------------------- 1) wwwroot/css/tr7-nav.css 2) _Layout: A SEGUIR ao skin-master.css 3) com mod-nav-dark e SEM mod-nav-link ===================================================================== */ :root{ --tr-nav-bg:#16456f; /* navy do corpo da barra */ --tr-nav-bg-deep:#0f3354; /* faixa do logótipo, um tom mais escura */ --tr-nav-text:#cfdcea; --tr-nav-label:#8fa6bd; --tr-nav-active:#ffffff; --tr-nav-accent:#5dcaa5; --tr-nav-font:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; } /* ---- navy uniforme no corpo (sem gradientes) ---------------------- */ .page-sidebar, .page-sidebar .primary-nav, .page-sidebar .nav-menu, .page-sidebar .nav-footer{ background-color:var(--tr-nav-bg) !important; background-image:none !important; box-shadow:none !important; } /* faixa do topo (logótipo) — propositadamente mais escura */ aside.page-sidebar > .page-logo{ background-color:var(--tr-nav-bg-deep) !important; background-image:none !important; } aside.page-sidebar > .page-logo *{ background:transparent !important; } .page-sidebar::before, .page-sidebar::after, .page-sidebar .primary-nav::before, .page-sidebar .primary-nav::after, .page-sidebar .nav-footer::before, .page-sidebar .nav-footer::after{ background:none !important; box-shadow:none !important; } /* submenu aberto não pode ter fundo próprio (senão destoa dos itens) */ .page-sidebar .nav-menu ul, .page-sidebar .nav-menu li > ul{ background:transparent !important; background-color:transparent !important; } #js-primary-nav .nav-filter{ display:none !important; } /* tipo de letra do esboço em toda a barra */ #js-primary-nav, .nav-menu a, .nav-menu .nav-link-text{ font-family:var(--tr-nav-font) !important; } /* ---- lista --------------------------------------------------------- */ .nav-menu{ padding:8px 0 !important; } .nav-menu li{ background:transparent !important; } .nav-menu li > ul::before, .nav-menu li > ul li > a::before, .nav-menu li > ul li > a::after{ border:0 !important; } /* ---- CABEÇALHO DE GRUPO (com seta) = etiqueta --------------------- */ .nav-menu > li > a:has(.collapse-sign){ pointer-events:none; background:transparent !important; /* nunca "acende" quando a secção está ativa/aberta */ border-left-color:transparent !important; padding:14px 20px 5px !important; color:var(--tr-nav-label) !important; font-size:11px !important; font-weight:600 !important; letter-spacing:1px; text-transform:uppercase; } .nav-menu > li > a:has(.collapse-sign) .collapse-sign, .nav-menu > li > a:has(.collapse-sign) > i{ display:none !important; } .nav-menu > li > a:has(.collapse-sign) .nav-link-text{ margin-left:-4px; } /* submenus sempre abertos */ .nav-menu > li > ul{ display:block !important; height:auto !important; max-height:none !important; overflow:visible !important; opacity:1 !important; visibility:visible !important; } /* ---- ITENS (filhos + topo sem seta) ------------------------------- */ .nav-menu > li > ul > li > a, .nav-menu > li > a:not(:has(.collapse-sign)){ display:flex !important; align-items:center; gap:12px; padding:11px 20px !important; margin:0 !important; color:var(--tr-nav-text) !important; font-size:14px !important; font-weight:400 !important; border-left:3px solid transparent !important; text-decoration:none; } .nav-menu > li > ul > li > a .nav-link-text, .nav-menu > li > a:not(:has(.collapse-sign)) .nav-link-text{ color:inherit !important; } .nav-menu > li > a:not(:has(.collapse-sign)) > i{ font-size:17px; width:20px; text-align:center; opacity:.95; flex:0 0 auto; } /* ---- ÍCONES DOS FILHOS por CSS (o template não os cria) ----------- */ .nav-menu > li > ul > li > a::before{ font-family:"Font Awesome 5 Pro","Font Awesome 6 Pro","Font Awesome 5 Free","Font Awesome 6 Free"; font-weight:300; font-size:17px; width:20px; text-align:center; flex:0 0 auto; opacity:.95; display:inline-block; } .nav-menu a[href="/insert/insertclockings"]::before{ content:"\f577"; } .nav-menu a[href="/insert/insertabsences"]::before{ content:"\f273"; } .nav-menu a[href="/insert/insertvacation"]::before{ content:"\f5ca"; } .nav-menu a[href="/insert/insertcorrections"]::before { content: "\f334"; } .nav-menu a[href="/consultation/consultationclockings"]::before{ content:"\f03a"; } .nav-menu a[href="/consultation/consultationschedule"]::before{ content:"\f073"; } .nav-menu a[href="/consultation/consultationdaily"]::before{ content:"\f080"; } .nav-menu a[href="/consultation/consultationmonthly"]::before{ content:"\f201"; } .nav-menu a[href*="historic" i]::before{ content:"\f086"; } /* comments — Comunicacao (filho): *= apanha qualquer href com "historic" */ /* hover */ .nav-menu > li > ul > li > a:hover, .nav-menu > li > a:not(:has(.collapse-sign)):hover{ background:rgba(255,255,255,.06) !important; color:#fff !important; } /* ---- ITEM ATIVO --------------------------------------------------- */ .nav-menu li.active > a:not(:has(.collapse-sign)){ background:rgba(255,255,255,.10) !important; color:var(--tr-nav-active) !important; font-weight:600 !important; border-left-color:var(--tr-nav-accent) !important; } .nav-menu li.active > a:not(:has(.collapse-sign)) .nav-link-text{ color:#fff !important; } /* ---- a SECÇÃO-pai ativa não mostra marca à esquerda (traço/realce) -- */ .nav-menu > li > a:has(.collapse-sign), .nav-menu > li.active > a:has(.collapse-sign), .nav-menu > li.open > a:has(.collapse-sign){ border:0 !important; box-shadow:none !important; } .nav-menu > li > a:has(.collapse-sign)::before, .nav-menu > li > a:has(.collapse-sign)::after{ content:none !important; display:none !important; background:none !important; border:0 !important; } .nav-menu > li.active, .nav-menu > li.open{ border:0 !important; box-shadow:none !important; background:transparent !important; } .nav-menu > li.active::before, .nav-menu > li.active::after, .nav-menu > li.open::before, .nav-menu > li.open::after{ content:none !important; display:none !important; background:none !important; border:0 !important; } /* ---- ÍCONE também no item ATIVO ----------------------------------- */ /* O realce do ativo não tocava no ::before, mas a regra-base do tipo de letra (com combinadores diretos) não apanhava o item ativo e o glifo saía na fonte errada (invisível). Reafirma-se aqui o tipo de letra e o glifo de cada item para o ícone aparecer quando está selecionado. */ .nav-menu li.active > a:not(:has(.collapse-sign))::before{ font-family:"Font Awesome 5 Pro","Font Awesome 6 Pro","Font Awesome 5 Free","Font Awesome 6 Free" !important; font-weight:300 !important; font-size:17px !important; width:20px !important; text-align:center !important; flex:0 0 auto !important; display:inline-block !important; opacity:1 !important; color:#fff !important; } .nav-menu li.active a[href="/insert/insertclockings"]::before{ content:"\f577" !important; } .nav-menu li.active a[href="/insert/insertabsences"]::before{ content:"\f273" !important; } .nav-menu li.active a[href="/insert/insertvacation"]::before{ content:"\f5ca" !important; } .nav-menu li.active a[href="/insert/insertcorrections"]::before { content: "\f334" !important; } .nav-menu li.active a[href="/consultation/consultationclockings"]::before{ content:"\f03a" !important; } .nav-menu li.active a[href="/consultation/consultationschedule"]::before{ content:"\f073" !important; } .nav-menu li.active a[href="/consultation/consultationdaily"]::before{ content:"\f080" !important; } .nav-menu li.active a[href="/consultation/consultationmonthly"]::before{ content:"\f201" !important; } .nav-menu li.active a[href*="historic" i]::before{ content:"\f086" !important; } /* manter o ícone do ativo à ESQUERDA (antes do texto), como nos outros itens */ .nav-menu li.active > a:not(:has(.collapse-sign)){ flex-direction:row !important; justify-content:flex-start !important; } .nav-menu li.active > a:not(:has(.collapse-sign))::before{ order:-1 !important; margin-right:0 !important; } .nav-menu li.active > a:not(:has(.collapse-sign)) .nav-link-text{ order:0 !important; margin-left:0 !important; } /* O template usava o ::before do item ativo como "pontinho" (position:absolute, right:11px). Como agora o ::before é o ÍCONE, tiramos o posicionamento absoluto para ele voltar ao fluxo e ficar à esquerda, antes do texto. */ .nav-menu li.active > a:not(:has(.collapse-sign))::before{ position:static !important; right:auto !important; left:auto !important; top:auto !important; display:inline-block !important; margin:0 !important; } /* o ícone do ativo estava a descair — forçar centragem vertical certinha */ .nav-menu li.active > a:not(:has(.collapse-sign)){ align-items:center !important; } .nav-menu li.active > a:not(:has(.collapse-sign))::before{ align-self:center !important; line-height:1 !important; vertical-align:middle !important; position:relative !important; top:-2px !important; }