forked from RiseUP/riseup-squad21
444 lines
12 KiB
CSS
444 lines
12 KiB
CSS
|
|
/* --- Estilos Gerais e Reset --- */
|
|
* {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
border: none;
|
|
box-sizing: border-box; /* Essencial para um bom layout */
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
body {
|
|
font-family: sans-serif;
|
|
background-color: #f3f0f0;
|
|
}
|
|
|
|
/* --- Estilos do Header/Navegação (mantido e levemente ajustado) --- */
|
|
.nav {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background-color: #eaeaea;
|
|
align-items: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
BARRA DE BUSCA
|
|
========================================================================== */
|
|
|
|
.div-search {
|
|
display: flex; /* Essencial para que a propriedade 'order' funcione */
|
|
align-items: center;
|
|
border: 1.5px solid #ccc;
|
|
border-radius: 6px;
|
|
background-color: #fff;
|
|
overflow: hidden;
|
|
margin-top: 2rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* Efeito de foco no contêiner inteiro */
|
|
.div-search:focus-within {
|
|
border-color: rgb(44, 185, 228);
|
|
box-shadow: 0 0 0 2px rgba(44, 185, 228, 0.2);
|
|
}
|
|
|
|
/* --- 2. Reordenando os Itens Visualmente --- */
|
|
.search-input { order: 1; } /* Primeiro item */
|
|
.search-button { order: 2; } /* Segundo item (a lupa) */
|
|
.filter-select { order: 3; } /* Terceiro e último item (Geral) */
|
|
|
|
/* --- 3. Estilo dos Itens Individuais na Nova Ordem --- */
|
|
|
|
/* Campo "Buscar paciente" */
|
|
.search-input {
|
|
height: 38px;
|
|
flex-grow: 1; /* Ocupa o máximo de espaço */
|
|
padding: 0 12px;
|
|
border: none;
|
|
outline: none;
|
|
font-size: 14px;
|
|
background: transparent;
|
|
}
|
|
|
|
/* Botão da Lupa */
|
|
.search-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 38px;
|
|
padding: 0 12px;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
border: none; /* Sem borda, para se juntar ao input */
|
|
outline: none;
|
|
}
|
|
|
|
.search-button img {
|
|
width: 20px;
|
|
height: 20px;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Seletor "Geral" */
|
|
.filter-select {
|
|
height: 38px;
|
|
padding: 0 12px;
|
|
background: transparent;
|
|
border: none;
|
|
border-left: 1.5px solid #ccc; /* A única linha divisória */
|
|
color: #555;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
outline: none;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
ÍCONES DO CABEÇALHO - ESTILO APRIMORADO
|
|
========================================================================== */
|
|
|
|
/* --- 1. O contêiner da lista de ícones --- */
|
|
.icon-lista {
|
|
display: flex;
|
|
list-style: none;
|
|
gap: 7px; /* Reduzi um pouco o espaço para ficar mais coeso */
|
|
align-items: center; /* Alinha todos os ícones verticalmente */
|
|
}
|
|
|
|
/* --- 2. PADRONIZAÇÃO dos links (a) e botões (button) --- */
|
|
.icon-lista li a,
|
|
.icon-lista li button {
|
|
display: flex; /* Garante que o contêiner se ajuste à imagem */
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: none; /* Remove qualquer fundo padrão */
|
|
border: none; /* Remove qualquer borda padrão */
|
|
padding: 0; /* Remove qualquer padding padrão */
|
|
cursor: pointer;
|
|
opacity: 0.7; /* Deixa os ícones um pouco mais suaves */
|
|
transition: opacity 0.2s ease, transform 0.2s ease; /* Animação suave */
|
|
}
|
|
|
|
/* --- 3. EFEITO HOVER para dar feedback ao usuário --- */
|
|
.icon-lista li a:hover,
|
|
.icon-lista li button:hover {
|
|
opacity: 1; /* Opacidade total no hover */
|
|
transform: scale(1.1); /* Leve aumento de tamanho */
|
|
}
|
|
|
|
/* --- 4. O TAMANHO REAL da imagem do ícone --- */
|
|
.icon-lista li img {
|
|
width: 18px; /* << AUMENTADO O TAMANHO AQUI */
|
|
height: 18px; /* << AUMENTADO O TAMANHO AQUI */
|
|
display: block;
|
|
}
|
|
|
|
/* A regra #music não é mais necessária, pois já foi padronizada acima */
|
|
|
|
#music {
|
|
background: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
SIDEBAR E LAYOUT PRINCIPAL - REVISÃO FINAL
|
|
========================================================================== */
|
|
|
|
/* --- Container principal da sidebar para flexbox --- */
|
|
.div-sidebar {
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between; /* Este é crucial para empurrar o perfil para baixo */
|
|
align-items: center; /* Centraliza o conteúdo da sidebar se ela for estreita */
|
|
width: 100%; /* Garante que div-sidebar ocupe a largura total de .sidebar */
|
|
}
|
|
|
|
/* --- Estilos de Base da Sidebar --- */
|
|
.sidebar {
|
|
background-color: #ffffff;
|
|
box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
|
|
height: 100vh;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1000;
|
|
transition: width 0.3s ease, transform 0.3s ease;
|
|
}
|
|
|
|
/* --- Logo na Sidebar --- */
|
|
.logo1 {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
padding: 1.5rem 0; /* Espaçamento vertical generoso */
|
|
border-bottom: 1px solid #eee; /* Linha divisória */
|
|
}
|
|
|
|
#logo-med {
|
|
width: 80px; /* << MAIOR AINDA! */
|
|
height: auto;
|
|
transition: transform 0.3s ease, filter 0.3s ease;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#logo-med:hover {
|
|
transform: scale(1.1);
|
|
filter: drop-shadow(0 0 10px rgba(44, 185, 228, 0.7)); /* Destaque mais forte */
|
|
}
|
|
|
|
/* --- Itens de Navegação --- */
|
|
.sidebar ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
width: 100%; /* Garante que a lista preencha a largura disponível */
|
|
}
|
|
|
|
.sidebar li {
|
|
width: 100%; /* Garante que cada item da lista preencha a largura */
|
|
}
|
|
|
|
.sidebar a {
|
|
display: flex;
|
|
align-items: center;
|
|
color: rgb(12, 54, 70);
|
|
text-decoration: none;
|
|
padding: 1rem 1.5rem;
|
|
white-space: nowrap;
|
|
border-left: 4px solid transparent;
|
|
transition: background-color 0.2s ease, border-left 0.2s ease, color 0.2s ease;
|
|
}
|
|
|
|
.sidebar a:hover,
|
|
.sidebar a.active { /* Estilo para hover e item ativo */
|
|
background-color: #eef5fa; /* Fundo suave */
|
|
border-left-color: rgb(44, 185, 228); /* Borda azul destacada */
|
|
color: rgb(44, 185, 228); /* Texto azul para item ativo */
|
|
font-weight: 600; /* Negrito para destacar */
|
|
}
|
|
|
|
.icon-sidebar {
|
|
width: 22px; /* Tamanho do ícone */
|
|
height: 22px;
|
|
flex-shrink: 0;
|
|
margin-right: 15px; /* Espaço entre ícone e texto */
|
|
}
|
|
|
|
/* --- Perfil do Médico (Dr. Rafael) --- */
|
|
.perfil-medico-sidebar {
|
|
text-align: center;
|
|
padding: 1rem;
|
|
border-top: 1px solid #eee;
|
|
width: 100%;
|
|
}
|
|
|
|
.perfil-medico-sidebar h3 {
|
|
font-size: 1rem;
|
|
margin-bottom: 0.25rem;
|
|
color: #333;
|
|
}
|
|
|
|
.perfil-medico-sidebar p {
|
|
font-size: 0.8rem;
|
|
color: #6c757d;
|
|
}
|
|
|
|
/* --- Conteúdo Principal --- */
|
|
.section-main {
|
|
background-color: #f3f0f0;
|
|
transition: margin-left 0.3s ease;
|
|
/* padding: 0px; */
|
|
width: 100%; /* Garante que ocupe o espaço restante */
|
|
height: 100%;
|
|
}
|
|
|
|
/* --- Botão Hambúrguer e Overlay (escondidos por padrão no desktop) --- */
|
|
.hamburger-btn,
|
|
.overlay {
|
|
display: none;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
MEDIA QUERIES - RESPONSIVIDADE
|
|
========================================================================== */
|
|
|
|
/* --- LAYOUT DESKTOP (Telas a partir de 1025px) --- */
|
|
@media (min-width: 1025px) {
|
|
.sidebar {
|
|
width: 200px; /* Largura expandida */
|
|
}
|
|
.section-main {
|
|
margin-left: 200px; /* Empurra o conteúdo */
|
|
}
|
|
}
|
|
|
|
/* --- LAYOUT TABLET (Telas de 769px a 1024px) - CORRIGIDO --- */
|
|
@media (min-width: 769px) and (max-width: 1024px) {
|
|
.sidebar {
|
|
width: 150px; /* << MUDANÇA: Mantém a largura expandida, igual ao desktop */
|
|
}
|
|
|
|
/* As regras abaixo garantem que o conteúdo da sidebar (ícones, texto)
|
|
se comporte como no desktop, mesmo que alguma outra regra os altere. */
|
|
|
|
.sidebar a {
|
|
justify-content: flex-start; /* Alinha o conteúdo à esquerda */
|
|
padding: 1rem 1.5rem; /* Restaura o espaçamento interno */
|
|
}
|
|
|
|
.icon-sidebar {
|
|
margin-right: 15px; /* Devolve o espaço entre o ícone e o texto */
|
|
}
|
|
|
|
/* AQUI ESTÁ A CORREÇÃO PRINCIPAL:
|
|
Garantimos que o texto e o perfil fiquem visíveis. */
|
|
.sidebar a span,
|
|
.perfil-medico-sidebar {
|
|
display: block; /* Garante que eles sejam visíveis */
|
|
}
|
|
|
|
#logo-med {
|
|
width: 80px; /* Restaura o tamanho original do logo */
|
|
}
|
|
|
|
.section-main {
|
|
margin-left: 150px; /* << MUDANÇA: Empurra o conteúdo pela distância correta */
|
|
}
|
|
|
|
.search-input {
|
|
width: 30vw; /* Mantém o ajuste da barra de busca para tablets */
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/* --- LAYOUT MOBILE (Telas até 768px) - CORRIGIDO E FINALIZADO --- */
|
|
@media (max-width: 768px) {
|
|
.nav {
|
|
/* Adicionado flexbox para o alinhamento vertical dos itens */
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 999;
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.13);
|
|
padding: 0 15px 0 60px;
|
|
height: 65px;
|
|
}
|
|
|
|
.div-search {
|
|
flex-grow: 1;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.search-input {
|
|
width: 100%;
|
|
}
|
|
|
|
/* <<< MUDANÇA DRÁSTICA #1: ÍCONES DA DIREITA BEM MENORES */
|
|
/* --- CORREÇÃO FINAL: FORÇAR A DIMINUIÇÃO DOS ÍCONES DA DIREITA --- */
|
|
|
|
.user-actions i,
|
|
.user-actions svg {
|
|
font-size: 2px !important; /* Força um tamanho visivelmente menor */
|
|
height: 2px !important; /* Garante a altura para qualquer tipo de ícone */
|
|
width: 2px !important; /* Garante a largura para qualquer tipo de ícone */
|
|
}
|
|
|
|
.sidebar {
|
|
width: 280px;
|
|
transform: translateX(-100%);
|
|
|
|
/* <<< MUDANÇA #2: A ESTRUTURA QUE FEZ O PERFIL FUNCIONAR */
|
|
height: 100vh; /* Ocupa a altura toda da tela */
|
|
display: flex;
|
|
flex-direction: column; /* Organiza os itens em coluna */
|
|
}
|
|
|
|
.sidebar.active {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.sidebar a {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.icon-sidebar {
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.sidebar a span {
|
|
display: block;
|
|
}
|
|
|
|
/* <<< MUDANÇA #3: O ESTILO DO PERFIL QUE VOCÊ APROVOU */
|
|
.perfil-medico-sidebar {
|
|
margin-top: auto; /* Joga o perfil para a base do menu */
|
|
text-align: left;
|
|
padding: 20px 15px; /* Espaçamento interno */
|
|
border-top: 2px solid #007bff; /* A linha azul que você gostou */
|
|
}
|
|
|
|
#logo-med {
|
|
width: 100px;
|
|
padding: 0.1rem 15px; /* Adiciona padding para alinhar com os outros itens */
|
|
}
|
|
|
|
.section-main {
|
|
margin-left: 0;
|
|
padding-top: 80px;
|
|
}
|
|
|
|
/* O seu código do botão hambúrguer e overlay permanece intacto */
|
|
.hamburger-btn {
|
|
display: flex;
|
|
position: fixed;
|
|
top: 24px;
|
|
left: 20px;
|
|
z-index: 1002;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
width: 30px;
|
|
height: 25px;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.hamburger-btn span {
|
|
width: 100%; height: 3px; background-color: #333;
|
|
border-radius: 3px; transition: all 0.3s ease;
|
|
}
|
|
.hamburger-btn.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
|
|
.hamburger-btn.active span:nth-child(2) { opacity: 0; }
|
|
.hamburger-btn.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); }
|
|
.overlay {
|
|
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5); z-index: 999;
|
|
opacity: 0; visibility: hidden;
|
|
transition: opacity 0.3s ease, visibility 0.3s ease;
|
|
}
|
|
.overlay.active {
|
|
display: block; opacity: 1; visibility: visible;
|
|
}
|
|
}
|
|
|
|
/* --- Estilos para foco e acessibilidade --- */
|
|
.hamburger-btn:focus-visible { /* Usar focus-visible para melhor UX */
|
|
outline: 2px solid #007bff;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.sidebar ul li a:focus-visible,
|
|
.icon-lista li a:focus-visible {
|
|
outline: 2px solid #007bff;
|
|
outline-offset: 2px;
|
|
border-radius: 4px;
|
|
} |