/* |-------------------------------------------------------------------------- | LOGIDATA PBX - AJUSTES RESPONSIVOS (MOBILE) |-------------------------------------------------------------------------- | | Carregado no final do de todas as paginas, portanto sobrepoe | as regras internas de cada tela. | | Corrige dois problemas: | | 1. o logo em imagem tinha largura fixa de 200px e estourava a barra | lateral reduzida no celular; | | 2. o menu lateral ficava sempre visivel, comendo o espaco util da | tela. Agora ele desliza (off-canvas) com o botao de menu. | |-------------------------------------------------------------------------- */ /* ------------------------------------------------------------------ LOGO FLUIDO EM QUALQUER TAMANHO DE TELA ------------------------------------------------------------------ */ .logo img, .logo-area img, .login-logo img { display:block; max-width:100%; height:auto; } /* ------------------------------------------------------------------ BOTAO DE MENU (HAMBURGUER) - OCULTO NO DESKTOP ------------------------------------------------------------------ */ .ld-nav-toggle { display:none; position:fixed; top:12px; left:12px; z-index:1200; width:42px; height:42px; border:1px solid rgba(0,0,0,.10); border-radius:10px; background:#fff; color:#1b4fd8; font-size:20px; line-height:1; align-items:center; justify-content:center; box-shadow:0 4px 14px rgba(16,24,40,.12); cursor:pointer; padding:0; } .ld-nav-overlay { display:none; position:fixed; inset:0; background:rgba(16,24,40,.45); z-index:1100; border:0; padding:0; } /* ------------------------------------------------------------------ MOBILE / TABLET ------------------------------------------------------------------ */ @media (max-width:900px) { .ld-nav-toggle { display:inline-flex; } body.ld-nav-open .ld-nav-overlay { display:block; } .sidebar { width:250px !important; max-width:82vw; transform:translateX(-102%); transition:transform .25s ease; z-index:1150 !important; overflow-y:auto; } body.ld-nav-open .sidebar { transform:translateX(0); box-shadow:0 18px 45px rgba(16,24,40,.22); } /* o menu volta a ser completo, com textos */ .logo { font-size:22px !important; width:100%; } .logo:after { content:none !important; } .logo-area { justify-content:flex-start !important; padding:0 18px !important; } .menu-title { display:block !important; } .menu-item { justify-content:flex-start !important; } .menu-item span { display:inline !important; } /* conteudo ocupa a largura inteira */ .main, .content-wrapper, .page { margin-left:0 !important; } .topbar { padding-left:66px !important; padding-right:16px !important; flex-wrap:wrap; row-gap:6px; } .content { padding-left:16px !important; padding-right:16px !important; } .table-responsive, .tabela-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; } } @media (max-width:600px) { .page-title { font-size:17px !important; } .logo img, .logo-area img { max-width:170px; } .dominio-bar { flex-direction:column; align-items:stretch !important; } .dominio-bar .form-select, .dominio-bar .btn { width:100%; } }