218 lines
4.8 KiB
CSS
218 lines
4.8 KiB
CSS
/*importações de outros estilos css para o funcionamento desse proprio */
|
|
@import '../../global/import.css';
|
|
@import './Erros_login.css';
|
|
|
|
|
|
/*Alinhamento da propria pagina, tirar parametros bases da propria página html*/
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/*Alinhamento da propria pagina, define um alinhamento de centralização do painel de login no centro da propria página*/
|
|
.centralizar {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-content: center;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/*
|
|
.invisivel {
|
|
display: none;
|
|
}
|
|
*/
|
|
|
|
/*Sendo todo o painel principal da pagina, e aplicações de alinhamento dentro desse proprio painel, sendo o proprio corpo do painel de login*/
|
|
.Bloco {
|
|
box-shadow: 10px 10px 5px var(--Cor_Segundaria_5_2);
|
|
padding: 3vh 2vw;
|
|
width: 30vw;
|
|
height: 75vh;
|
|
border: 3px solid var(--Cor_Segundaria_5_1);
|
|
background-color: rgb(255, 255, 255);
|
|
z-index: 999;
|
|
position: fixed;
|
|
top: 10vh;
|
|
left: 35vw;
|
|
border-radius: 3%;
|
|
justify-content: center;
|
|
/*Bottom e left são os elementos que vão organizar o ponto onde o painel vai parar, adicionar uma midia query para isso conseguira adapitar o painel para mais telas*/
|
|
animation: aparecer 1s ease;
|
|
|
|
|
|
}
|
|
|
|
/*sendo a classe que defini alinhamentos para a propria logo*/
|
|
.logo {
|
|
align-items: center;
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
/*Sendo uma especificação para toda a tag img, que esteja dentro da tag que está usando a classe logo, terá esse dimensionamento */
|
|
.logo img {
|
|
width: 10vw;
|
|
|
|
}
|
|
|
|
.formulario {
|
|
width: 100%;
|
|
height: 45vh;
|
|
margin-top: 5vh;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
|
|
}
|
|
|
|
.formulario .colum_1,
|
|
.formulario .colum_2 {
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
|
|
|
|
}
|
|
|
|
.formulario .colum_1 {
|
|
width: 100%;
|
|
height: 30vh;
|
|
}
|
|
|
|
.formulario .colum_2 {
|
|
width: 100%;
|
|
height: 10vh;
|
|
}
|
|
|
|
|
|
/*Resumindamente lida diretamente em alinhar todos os elementos inputs e labels dentro do painel de login*/
|
|
.login_central {
|
|
align-items: center;
|
|
text-align: center;
|
|
color: var(--Cor_Segundaria_5_1);
|
|
font-family: var(--font_conteudo);
|
|
font-size: 1.5vw;
|
|
padding: 0vw 1vh;
|
|
margin-bottom: 4vh;
|
|
}
|
|
|
|
/*São as caixa de alinhamento tanto para o tudo relacionado a senha quanto para tudo que é relacionado a login*/
|
|
.Login,
|
|
.Senha {
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
align-content: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
|
|
gap: 1vw;
|
|
margin-top: 2vh;
|
|
}
|
|
|
|
/*São os textos sobre tanto a caixa de texto de usuario quanto a caixa de texto de senha*/
|
|
.Login_label,
|
|
.Senha_label {
|
|
|
|
width: 10%;
|
|
display: flex;
|
|
align-items: center;
|
|
align-content: center;
|
|
justify-content: center;
|
|
|
|
}
|
|
|
|
/*edição especifica usando as classes superiores para editar tag img dento delas, sendo os iconis de login e senha*/
|
|
.Login img,
|
|
.Senha img {
|
|
width: 3.5vw;
|
|
|
|
}
|
|
|
|
/*São a edição sobre as caixa de texto, tanto do usuário quanto da senha.*/
|
|
.Login_input,
|
|
.Senha_input {
|
|
width: 90%;
|
|
height: 1vh;
|
|
|
|
padding: 2.5vh 2vw;
|
|
margin: 0px 0;
|
|
|
|
border: none;
|
|
outline: none;
|
|
|
|
font-size: 1vw;
|
|
color: var(--Cor_Segundaria_5_1);
|
|
border: 2.5px solid var(--Cor_Segundaria_5_1);
|
|
|
|
|
|
transition: 1s ease;
|
|
}
|
|
|
|
/*Aqui só defini alguma dependencia de dimensionamento da tags inputs para as tags superiores com as classes .Login_input,
|
|
.Senha_input, ao mesmo tempo que defini os fundo do input transparentes */
|
|
.Login_input input,
|
|
.Senha_input input {
|
|
width: 100%;
|
|
height: 100%;
|
|
background: transparent;
|
|
}
|
|
|
|
/*Defini pequena mudança de cor, para o momento que o mouse interage com o input*/
|
|
.Login_input:hover,
|
|
.Senha_input:hover {
|
|
border: 2.5px solid var(--Cor_Segundaria_2_1);
|
|
transition: 1s ease;
|
|
}
|
|
|
|
/*Defini edições em funcionalidade dos inputs que no caso é o placeholder, que resumidamente é textinho que fica inicialmente, antes do usuario escrever.*/
|
|
.Login input::placeholder,
|
|
.Senha input::placeholder {
|
|
|
|
font-family: var(--font_conteudo);
|
|
color: #696969;
|
|
font-size: 1vw;
|
|
|
|
}
|
|
|
|
|
|
/*Define edições para o botão do painel de login*/
|
|
.botao {
|
|
margin-top: 2vh;
|
|
width: 100%;
|
|
height: 6vh;
|
|
border-radius: 2vw;
|
|
background-color: var(--Cor_Segundaria_5_1);
|
|
font-family: var(--font_conteudo);
|
|
font-size: 1vw;
|
|
color: rgb(255, 255, 255);
|
|
border: none;
|
|
outline: none;
|
|
transition: 1s ease;
|
|
}
|
|
|
|
/*Define pequena interatividade com o mouse, onde o botão muda a cor de seu fundo e seu proprio dimensionamento muda*/
|
|
.botao:hover {
|
|
background-color: var(--Cor_Segundaria_2_1);
|
|
color: white;
|
|
transform: scale(0.9);
|
|
transition: 1s ease;
|
|
}
|
|
|
|
/* Defina a animação de aparecimento */
|
|
@keyframes aparecer {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(100%);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
} |