/* Estilo do boby e HTML*/
html, body {
margin: 0; /* Margens*/
padding: 0; /* Padding*/
width: 100%; /* Largura*/
font-family: Arial, sans-serif; /* Definir uma fonte para o corpo*/
overflow: hidden; /* Impede rolagem extra caso a imagem de fundo ultrapasse*/
}
/* Estilo adicional do body*/
body {
background-color: #f4f6f9; /* Cor de fundo*/
font-family: 'Arial', sans-serif; /* Fonte para os textos*/
}
/* Estilo para o Header1*/
h1 {
margin: 0px; /* Margens*/
font-size: 30px; /* Tamanho do texto*/
font-weight: bold; /* Testo a Bold*/
color: white; /* Cor do texto*/
text-transform: uppercase; /* Colocar texto em maiúsculas*/
}
/* Estilo para o topo onde se encontra o tútulo da página e botão voltar*/
.topo {
border-radius: 15px;
display: flex; /* Ativa o modelo Flexbox */
justify-content: space-between; /* Justifica os items com o mesmo espaço entre eles*/
align-items: center; /* Alinha os itens verticalmente */
text-align: center; /* Alinha o texto ao centro*/
width: 90%; /* Define quanto ocupa o contentor em largura do ecrã*/
background-color: #004085; /* Cor de fundo do contentor Azul 5Basket*/
margin: 0 auto; /* Centraliza o contentor no ecrã*/
box-sizing: border-box; /* Inclui bordas e padding no cálculo da largura */
margin-top: 30px; /* Margem para o topo*/
margin-bottom: 30px; /* Margem para o item seguinte*/
padding: 20px; /* Define o Padding*/
height: 80px; /* Definindo a altura do contentor */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.8); /* Sombra*/
border-radius: 5px; /* Raio da borda */
border: 1px solid #004085; /* Cor da borda*/
}
/* Estilo do botão Voltar*/
.btn-voltar {
margin-top: 0px; /* Margem superior*/
padding: 5px 20px; /* Espaçamento interno*/
font-size: 16px; /* Tamanho da fonte*/
color: #0b3b85; /* Cor do texto*/
background-color: white; /* Cor de fundo*/
border: none; /* Remove a borda padrão */
border-radius: 5px; /* Bordas arredondadas */
cursor: pointer; /* Cursor de mão ao passar por cima */
display: flex; /* Usamos flexbox para poder alinhar o ícone e o texto */
align-items: center; /* Alinha o ícone e o texto verticalmente */
gap: 8px; /* Espaço entre o ícone e o texto */
transition: background-color 0.3s, transform 0.2s; /* Transições suaves */
}
/* Efeito de hover para o botão Voltar (quando o mouse passa por cima) */
.btn-voltar:hover {
background-color: #ff7513; /* Cor de fundo mais escura quando hover */
transform: scale(1.05); /* Aumenta o tamanho do botão levemente 5%*/
}
/* Efeito de foco para o botão Voltar (quando o botão está focado, como ao ser clicado) */
.btn-voltar:focus {
background-color: #ff7513; /* Cor de fundo*/
outline: none; /* Remove o contorno padrão */
box-shadow: 0 0 10px rgba(11, 59, 133, 0.8); /* Sombra azul ao focar */
}
/* Estilo para o ícone */
.btn-voltar i {
font-size: 18px; /* Tamanho do ícone */
}
/* Estilo para o footer*/
footer {
position: fixed; /* Fixar posição*/
bottom: 0; /* Posicionar no fundo*/
width: 100%; /* Largura*/
text-align: center; /* Justifica o texto à direita*/
padding: 10px 20px; /* Padding*/
color: black; /* Cor do texto*/
font-weight: bold; /* Texto a Bold*/
}
footer p {
margin: 0; /* Remove a margem padrão */
}
/* Conteiner principal onde estará tabela*/
.caixalista {
flex-direction: column; /* Organiza os elementos filhos verticalmente */
width: 90%; /* Largura do contêiner principal */
margin: 0 auto; /* Centraliza na tela */
padding: 20px; /* Padding*/
box-sizing: border-box; /* Inclui a borda no calculo da Largura*/
background-color: #fff; /* Cor de fundo*/
border-radius: 15px; /* Raio da borda*/
border: 1px solid #004085; /* tamanho e cor da borda*/
max-height: calc(100vh - 190px); /* Altura máxima do conteiner*/
overflow-y: hidden; /* Esconde a barra de scrool vertical*/
}
/* Tabela de dados no contentor*/
.contentortabela {
max-height: calc(100vh - 210px - 65px); /* Altura máxima do corpo da tabela */
overflow-y: auto; /* Habilita o scroll vertical */
border: 1px solid #004085; /* Tamanho e cor da Borda */
}
/* Estilização da tabela */
.asstabela {
width: 100%; /* Largura da tabela*/
border-collapse: collapse; /* Remove a borda da tabela*/
table-layout: auto; /* Permite que as colunas se ajustem ao conteúdo */
}
/* Estiliza o thead da tabela com a classe "asstabela" */
.asstabela thead {
position: sticky; /* Coloca o header fixo*/
z-index: 1; /* Coloca o header acima do resto do conteúdo da tabela*/
top: 0; /* Coloca o header no colado ao topo*/
background-color: #004085; /* Cor de fundo */
border: 1px solid #004085; /* Cor e tamanho da borda */
color: white; /* Cor do texto para contraste */
}
/* Estilização do table header e table data*/
.asstabela th,.asstabela td {
padding: 10px; /* Espaçamento interno das células */
border-bottom: 1px solid #ddd; /* Borda inferior nas células */
}
/* + Estilização do table header e table data*/
.asstabela th, .asstabela td {
padding: 10px; /* Espaçamento interno das células */
border-bottom: 1px solid #ddd; /* Borda inferior e cor nas células */
text-align: left; /* Alinhamento à esquerda para todas as células */
white-space: nowrap; /* Impedir que o texto quebre*/
}
/* Estilização da ultima célula da tabela*/
.asstabela th:last-child, .asstabela td:last-child {
width: 100%; /* A última coluna ocupa o espaço restante */
}
/* Estilização da primeira coluna da tabela*/
.asstabela th:nth-child(1), .asstabela td:nth-child(1) {
white-space: nowrap; /* Impede a quebra de linha */
text-align: left; /* Alinhamento à esquerda para a primeira coluna */
}
/* Estilo para os botões de ação editar e excluir*/
.btn-editar, .btn-excluir {
display: inline-flex; /* Usar flexbox para alinhar o ícone */
align-items: center; /* Centraliza verticalmente */
justify-content: center; /* Centraliza horizontalmente */
text-align: center; /* Alinhamento do texto ao centro*/
padding: 0px; /* Padding uniforme para dar espaço ao ícone */
border: none; /* Definir a borda a zero(invisivel)*/
border-radius: 5px; /* Raio da borda*/
color: white; /* Cor do texto*/
cursor: pointer; /* Define o cursor como pointer*/
transition: background-color 0.3s ease; /* Transições de efeito suaves*/
min-width: 30px; /* Largura mínima para garantir espaço */
min-height: 30px; /* Altura mínima para garantir espaço */
}
/* Botão de editar */
.btn-editar {
color: #ffc107; /* Cor do texto a Amarelo */
}
/* Hover no botão de editar*/
.btn-editar:hover {
color: #e0a800; /* Amarelo mais escuro no hover */
}
/* Botão de excluir */
.btn-excluir {
color: #dc3545; /* Cor do texo a Vermelho */
}
/* Hover no botão de excluir*/
.btn-excluir:hover {
color: #a71d2a; /* Vermelho mais escuro no hover */
}
/* Botão de ver */
.btn-ver {
color: #1de501; /* Cor do texo a Verde */
}
/* Hover no botão de ver*/
.btn-ver:hover {
color: #139801; /* Verde mais escuro no hover */
}
/* Ícones de editar, excluir e ver*/
.btn-editar i, .btn-excluir i, .btn-ver i {
font-size: 1.2em; /* Aumenta o tamanho dos ícones */
margin-right: 5px; /* Margem à direita*/
}
/* Estilização do botão adicionar*/
.btn-adicionar {
display: inline-flex; /* Permitir alinhamento dos itens do botão*/
align-items: center; /* Alinhar itens ao centro*/
padding: 10px 15px; /* Definição de espacamento*/
background-color: #28a745; /* Cor de funfo Verde */
color: white; /* Cor do texto a branco*/
text-decoration: none; /* Remover decoração do texto*/
border-radius: 5px; /* Raio da borda*/
font-size: 14px; /* Tamanho do texto*/
transition: background-color 0.3s ease; /* Transições suaves*/
border: 0px; /* Definição da borda para 0 (invisivel)*/
}
/* Hover no botão de adicionar*/
.btn-adicionar:hover {
background-color: #218838; /* Cor verde mais escura no hover */
}
/* Definição do icone do botão de inserir*/
.btn-adicionar i {
margin-right: 8px; /* Espaço entre o texto e o ícone */
}