378 lines
17 KiB
CSS
378 lines
17 KiB
CSS
|
|
/* Tag mencionada "*" responsavel vitalmente em manter o painel centralizado dentro da pagina, com todos os seus elementos de forma responsiva.*/
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* Classe "fundo" responsavel pelo proprio fundo da página, utilizando algumas tags para o desenvolver desse padrão.
|
|
Tendo alguns edições aplicadas:
|
|
-background-img: Essa declaração é para a inxersão de uma imagem no fundo, uitlizando "./" para navegacão dos arquivos.
|
|
-background-size: cover; Essa declaração é para atribuir um fundo, de uma forma de preenchimento.
|
|
*/
|
|
|
|
.fundo {
|
|
|
|
|
|
background-image: url('./Acessts_CC/Prancheta\ 5.jpg');
|
|
background-size: Cover;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Classe "centralizar" desenvolvida com um unico intuito de manter todos os elementos da propria página centralizados.
|
|
Tendo alguns edições aplicadas:
|
|
|
|
-Display: flex; Essa declaração responsavel pelo alinhamento do painel ser auto ajustavel,
|
|
-Justify-content: center, align-items:center e min-height:100vh; Essas declarações são focadas para deixar o painel ailnhado tanto verticalmente, quanto horizontalmente e com uma distancia do topo da página, tendo suas funcões explicadas respectivamente.
|
|
*/
|
|
|
|
.centralizar {
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
|
|
}
|
|
|
|
/* Font-face sendo uma tag para trazer uma fonte externa para dentro da propria linha de código.
|
|
|
|
-font-family a definição do nome dessa nova fonte.
|
|
-src com url sendo a extração da própria fonte para dentro da linha de código, utilizando "./" para iniciar a navegação da pasta.
|
|
*/
|
|
|
|
@font-face {
|
|
font-family: fontealpha;
|
|
src: url(./Acessts_CC/zekton\ rg.otf);
|
|
}
|
|
|
|
|
|
/*Classe "bloco" desenvolvida com um unico intuito, de organizar todos os elementos do formulario input, dentro de um painel central criada pela propria classe, em outras palavras ela seria o proprio corpo do painel log.
|
|
Tendo alguns edições aplicadas:
|
|
|
|
|
|
-Box-shadow: Essa declaração é responsavel por aplicar sombras em torno de todo o painel, sendo o seu primeiro 0 a direção da sombra como esqueda ou direita, seu segundo 0 sendo outro direcionamento da sombra para cima ou para baixo, enquanto o 10 representa a intensidade dessa sombra.
|
|
-Padding: Essa declaração atribui um preenchimento interno no elemento usado tendo sua forma resumida, focada declarar o 30px no seu top e Bottom "Cima e baixo" e 45px no seu left, right (Esquerda e direita).
|
|
-border-radius: Essa declaração atribuida para, a definição do aredondamento das pontas da propria borda do elemeneto.
|
|
-Width e heigth: Essas declarações são as suas medidas de largura e altura respectivamente.
|
|
-border: Essa declaração é usada para originar uma borda no elemento aplicando sua espessura 3px, depois a definindo em padrão solido “Solid” e por ultimo definindo sua cor atraves do rgb (255, 255, 255)= White.
|
|
-background-color: Essa declaração foi usada para definir a cor do fundo do painel no caso definindo sua cor atraves do rgb(255, 255, 255)=White.
|
|
*/
|
|
|
|
.Bloco {
|
|
|
|
box-shadow: 0 0 10px black;
|
|
padding: 30px 45px;
|
|
border-radius: 20px;
|
|
width: 750px;
|
|
height: 600px;
|
|
border: 3px solid rgb(255, 255, 255);
|
|
background-color: rgb(255, 255, 255);
|
|
|
|
|
|
}
|
|
|
|
/*Classe "logo" responsavel pelo alinhamento da imangem com logo da empresa na parte superior do painel log.
|
|
Tendo alguns edições aplicadas:
|
|
|
|
-text-align: center;, align-items:center; Essas declarações são focadas para deixar o elemento alinhado tanto verticalmente, quanto horizontalmente no centro.
|
|
*/
|
|
|
|
.logo {
|
|
|
|
align-items: center;
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
/*Classe "Login_central"" focada principalmente na organização e edição da palavra login, entre a logo e os campos imputs.
|
|
Tendo alguns edições aplicadas:
|
|
|
|
-text-align: center;, align-items:center; Essa declarações são focadas para deixar o elemento alinhado tanto verticalmente, quanto horizontalmente no centro.
|
|
-Color: Essa declaração foi usada para aplicação de um color para diretamente na fonte.
|
|
-font-family:fontealpha, Essas declaração altera a tipografia da fonte, para propria que foi trazida para a linha de código, sendo ela a fontealpha.
|
|
-font-size: Essa declaração é para aumentar o tamanho da fonte.
|
|
-Padding: Essa declaração atribui um preenchimento interno no próprio elemento, tendo sua aplicação de forma resumida com esse padrão top "Cima", left"Esquerda", bottom "baixo", rigth "Direita".
|
|
.*/
|
|
|
|
.login_central {
|
|
|
|
|
|
align-items: center;
|
|
text-align: center;
|
|
color: rgb(0, 0, 0);
|
|
font-family: fontealpha;
|
|
font-size: 20px;
|
|
padding: 5px 0px 10px 0px;
|
|
|
|
}
|
|
|
|
/*Classe "Login" desenvolvida com o objetivos de alinhar todos os elementos relacionados com o campo email.
|
|
|
|
Tendo alguns edições aplicadas:
|
|
|
|
-Align-items: center; Essas declaração alinha todo o grupo, no centro do painel.
|
|
-Width: 100%; Essa declaração corresponde a largura de um elemento, a defini com 100% pegando a referencia do largura maxima do painel não da página, levando ela automatica sempre se adapitar com o tamanho do painel.
|
|
*/
|
|
|
|
.Login {
|
|
|
|
align-items: center;
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
/*Classe "login_label"" focada na organização e edição do conteudo label, antes do proprio input de email.
|
|
Tendo alguns edições aplicadas:
|
|
|
|
-Display:inline-block, Essa declaração aplica uma organização do elemento em blocos, que ficam na mesma linha, ou seja um do lado do outro, mais aplicando br na linha de código do html, o elemento fica um em cima do outro.
|
|
-Margin: 5px 5px 0px 0px; Essa declaração sendo para o expasamento externo do elemento diante aos outros que estão no painel, sendo em ordem respectiva top "Cima", left"Esquerda", bottom "baixo", rigth "Direita".
|
|
-font-family:fontealpha, Essa declaração altera a tipografia da fonte, para propria que foi trazida para a linha de código, sendo ela a fontealpha.
|
|
-font-size: Essa declaração é para aumentar o tamanho da fonte.
|
|
-Padding: Essa declaração atribui um preenchimento interno no próprio elemento, tendo sua aplicação de forma resumida com esse padrão top "Cima", left"Esquerda", bottom "baixo", rigth "Direita".
|
|
*/
|
|
|
|
|
|
.Login_label {
|
|
|
|
display: inline-block;
|
|
margin: 5px 5px 0px 0px;
|
|
font-size: 20px;
|
|
font-family: fontealpha;
|
|
padding: 10px 10px 10px 0px;
|
|
color: rgb(0, 0, 0);
|
|
|
|
}
|
|
|
|
|
|
/*Classe "login_input" focada na organização e edição do conteudo input do email.
|
|
Tendo alguns edições aplicadas:
|
|
|
|
-width e heigth: Essa declaração são paras medidas, de largura e altura respectivamente, sendo que a largura foi aplicada um 100% da largura maxima da classe Login, para se adapitar naturalmente com classe e próprio painel.
|
|
-font-size: Essa declaração é para aumentar o tamanho da fonte.
|
|
-padding: Essa declaração atribui um preenchimento interno no próprio elemento, tendo sua aplicação de forma resumida com esse padrão top "Cima", left"Esquerda", bottom "baixo", rigth "Direita".
|
|
-color: Essa declaração foi usada para aplicação de um color, diretamente na fonte que é revalada durante o preenchimento do campo.
|
|
-margin: 0px 0; Essa declaração está sendo para o expasamento externa do elemento diante aos outros que estão no painel, no entanto só foram declaradas o 0px no seu top e Bottom "Cima e baixo" e 0 no seu left right.
|
|
-border: none; Essa declaração é uma utilizacão da tag para retirar o elemento definido, ou seja a propria borda do input, que vem de forma padronizada pelor proprio formulario.
|
|
-outline: none; Essa declaração é uma utilizacão da tag para retirar o elemento definido, ou seja a propria linha do campo input, que vem de forma padronizada pelor proprio formulario.
|
|
-border-radius: Essa Tag atribuida para, a definição do aredondamento das pontas da propria borda do elemeneto.
|
|
-border: Essa declaração é usada para originar uma borda no elemento aplicando sua espessura 3px, depois a definindo em padrão solido “Solid” e por ultimo definindo sua cor atraves do rgb (255, 255, 255)= White.
|
|
|
|
*/
|
|
|
|
|
|
.Login_input {
|
|
|
|
width: 100%;
|
|
height: 50px;
|
|
padding: 20px 10px 20px 20px;
|
|
font-size: 16px;
|
|
color: black;
|
|
margin: 0px 0;
|
|
border: none;
|
|
outline: none;
|
|
border: 3px solid rgb(0, 0, 0);
|
|
border-radius: 10px;
|
|
|
|
}
|
|
|
|
/*
|
|
Edição focada usando a classe "Login_input" focando na tag "input", todas as edições dentro dessa abertura de classe serão focadas somente no campo input e nenhum outro elemento.
|
|
Tendo alguns edições aplicadas:
|
|
|
|
-Width:100%; height:100%; Essa declaração é a largura e altura com a extensão maximas focadas no campo input sobre a extensão de sua propria classe, sendo mais uma garantia para a adaptação do campo input.
|
|
-Background: transparent; Essa declaração é usada para retirar um fundo do elemento, no caso retirando o fundo do campo input.
|
|
|
|
*/
|
|
|
|
.Login_input input {
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
background: transparent;
|
|
|
|
}
|
|
|
|
/*"Login_input":hover defini somente uma interação do campo input com a mouse, onde ao passar do mouse sobre o elemento ele realizara uma ação.
|
|
-Definida aqui como a mudaça de cor do próprio border
|
|
*/
|
|
|
|
.Login_input:hover {
|
|
|
|
border: 4px solid rgb(30, 121, 132);
|
|
|
|
}
|
|
|
|
/*Edição usando a classe "Login" focando na tag "input" sendo ainda mais especifico no atributo placeholder.
|
|
Tendo alguns edições aplicadas:
|
|
|
|
-Color: Essa declaração foi usada para aplicação de um color para diretamente na fonte, presetando antes do preenchimento dentro do campo input.
|
|
-font-family:fontealpha, Essa declaração altera a tipografia da fonte, para propria que foi trazida para a linha de código, sendo ela a fontealpha, presetanda antes do preenchimento do campo input, dentro do próprio.
|
|
-font-size: Essa declaração é para aumentar o tamanho da fonte, presetanda antes do preenchimento do campo input, dentro do próprio.
|
|
*/
|
|
|
|
.Login input::placeholder {
|
|
|
|
color: rgb(0, 0, 0);
|
|
font-family: fontealpha;
|
|
font-size: 15px;
|
|
|
|
}
|
|
|
|
/*Classe "Senha" desenvolvida com um objetivos para o alinhamento dos os elementos de campo relacionados com a senha.
|
|
Tendo alguns edições aplicadas:
|
|
|
|
|
|
-Align-items: center; Essa declaração alinha todo o grupo, no centro do painel.
|
|
-Width: 100%; Essa declaração corresponde a largura de um elemento, a defini com 100% pegando a referencia do largura maxima do painel não da página, levando ela automatica sempre se adapitar com o tamanho do painel.
|
|
*/
|
|
|
|
|
|
.Senha {
|
|
|
|
align-items: center;
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
/*Classe "Senha_label"" focada na organização e edição do conteudo label antes do proprio input de Password.
|
|
Tendo alguns edições aplicadas:
|
|
|
|
-Display:inline-block, Essa declaração aplica uma organização do elemento em blocos, que ficam na mesma linha, ou seja um do lado do outro, mais aplicando br na linha de código do html, o elemento fica um em cima do outro.
|
|
-Margin: 5px 5px 0px 0px; Essa declaração sendo para o expasamento externo do elemento diante aos outros que estão no painel, sendo em ordem respectiva top "Cima", left"Esquerda", bottom "baixo", rigth "Direita".
|
|
-font-family:fontealpha, Essa declaração altera a tipografia da fonte, para propria que foi trazida para a linha de código, sendo ela a fontealpha.
|
|
-font-size: Essa declaração é para aumentar o tamanho da fonte.
|
|
-Padding: Essa declaração atribui um preenchimento interno no próprio elemento, tendo sua aplicação de forma resumida com esse padrão top "Cima", left"Esquerda", bottom "baixo", rigth "Direita".
|
|
*/
|
|
|
|
|
|
|
|
.Senha_label {
|
|
|
|
display: inline-block;
|
|
margin: 5px 20px 0px 0px;
|
|
font-size: 20px;
|
|
font-family: fontealpha;
|
|
padding: 10px 10px 10px 1px;
|
|
color: rgb(0, 0, 0);
|
|
padding: 10px 20px 10px 0px;
|
|
|
|
}
|
|
|
|
/*Classe "Senha_input" focada na organização e edição do conteudo input do Senha.
|
|
Tendo alguns edições aplicadas:
|
|
|
|
-width e heigth: Essa declaração são paras medidas, de largura e altura respectivamente, sendo que a largura foi aplicada um 100% da largura maxima da classe Login, para se adapitar naturalmente com classe e próprio painel.
|
|
-font-size: Essa declaração é para aumentar o tamanho da fonte.
|
|
-padding: Essa declaração atribui um preenchimento interno no próprio elemento, tendo sua aplicação de forma resumida com esse padrão top "Cima", left"Esquerda", bottom "baixo", rigth "Direita".
|
|
-color: Essa declaração foi usada para aplicação de um color, diretamente na fonte que é revalada durante o preenchimento do campo.
|
|
-margin: 0px 0; Essa declaração está sendo para o expasamento externa do elemento diante aos outros que estão no painel, no entanto só foram declaradas o 0px no seu top e Bottom "Cima e baixo" e 0 no seu left right.
|
|
-border: none; Essa declaração é utilizacão da tag para retirar o elemento definido, ou seja a propria borda do input, que vem de forma padronizada pelor proprio formulario.
|
|
-outline: none; Essa declaração é utilizacão da tag para retirar o elemento definido, ou seja a propria linha do campo input, que vem de forma padronizada pelor proprio formulario.
|
|
-border-radius: Essa declaração atribuida para, a definição do aredondamento das pontas da propria borda do elemeneto.
|
|
-border: Essa declaração é usada para originar uma borda no elemento aplicando sua espessura 3px, depois a definindo em padrão solido “Solid” e por ultimo definindo sua cor atraves do rgb (255, 255, 255)= White.
|
|
|
|
*/
|
|
|
|
|
|
.Senha_input {
|
|
|
|
width: 100%;
|
|
height: 50px;
|
|
padding: 20px 10px 20px 20px;
|
|
font-size: 16px;
|
|
color: black;
|
|
margin: 0px 0;
|
|
border: none;
|
|
outline: none;
|
|
border: 3px solid rgb(0, 0, 0);
|
|
border-radius: 10px;
|
|
|
|
}
|
|
|
|
/*Edição focada usando a classe "Senha_input" focando na tag "input", todas as edições dentro dessa abertura de classe serão focadas somente no campo input e nenhum outro elemento.
|
|
Tendo alguns edições aplicadas:
|
|
|
|
-Width:100%; height:100%; Usando essas tags largura e altura com a extensão maximas focadas no campo input sobre a extensão de sua propria classe, sendo mais uma garantia para a adaptação do campo input.
|
|
-Background: transparent; Essa tag é usada para retirar um fundo do elemento, no caso retirando o fundo do campo input.
|
|
*/
|
|
|
|
.Senha_input input {
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
background: transparent;
|
|
|
|
}
|
|
|
|
/*Classe "Senha_input":hover defini somente uma interação do campo input com a mouse, onde ao passar do mouse sobre o elemento ele realizara uma ação.
|
|
|
|
-Definida aqui como a mudaça de cor do próprio border.
|
|
*/
|
|
|
|
.Senha_input:hover {
|
|
|
|
border: 4px solid rgb(30, 121, 132);
|
|
|
|
}
|
|
|
|
/*Edição usando a classe "Senha" focando na tag "input" sendo ainda mais especifico no atributo placeholder.
|
|
Tendo alguns edições aplicadas:
|
|
|
|
|
|
-Color: Essa declaração foi usada para aplicação de um color para diretamente na fonte, presetando antes do preenchimento dentro do campo input.
|
|
-font-family:fontealpha, Essa declaração altera a tipografia da fonte, para propria que foi trazida para a linha de código, sendo ela a fontealpha, presetanda antes do preenchimento do campo input, dentro do próprio.
|
|
-font-size: Essa declaração é para aumentar o tamanho da fonte, presetanda antes do preenchimento do campo input, dentro do próprio.
|
|
*/
|
|
|
|
.Senha input::placeholder {
|
|
|
|
color: rgb(0, 0, 0);
|
|
font-family: fontealpha;
|
|
font-size: 15px;
|
|
|
|
}
|
|
|
|
/*Classe "botao" focada principal no alinhamento do botão, enquanto também aplica algumas mudanças no seu designer.
|
|
Tendo alguns edições aplicadas:
|
|
|
|
-Margin-top: Essa declaração usada somente para expasamentos externos focalizados sobre o topo do elementos, aplicando assim 40px para dar um espaçamento do botão para o input senha.
|
|
-width: 100%, height: 50px: Essa declaração é para definir tanto lagura quanto altura do próprio botão, tendo a largura do botão adapitativa a largura total do painel.
|
|
-border-radius: 20px; Essa declaração é para definir o aredondamento da propria borda do botão.
|
|
-background-color: rgb(28, 173, 180); Essa declaração para definir a cor de fundo desse botão.
|
|
-Color: Essa declaração foi usada para aplicação de um color para diretamente na fonte, presetando antes do preenchimento dentro do campo input.
|
|
-font-family:fontealpha, Essa declaração altera a tipografia da fonte, para propria que foi trazida para a linha de código, sendo ela a fontealpha, presetanda antes do preenchimento do campo input, dentro do próprio.
|
|
-font-size: Essa declaração é para aumentar o tamanho da fonte, presetanda antes do preenchimento do campo input, dentro do próprio.
|
|
-border: none; e outline: none; para retirar o padrão do botão para uma melhor edição.
|
|
*/
|
|
|
|
.botao {
|
|
|
|
margin-top: 40px;
|
|
width: 100%;
|
|
height: 50px;
|
|
border-radius: 20px;
|
|
background-color: rgb(28, 173, 180);
|
|
font-family: fontealpha;
|
|
font-size: 20px;
|
|
color: rgb(0, 0, 0);
|
|
border: none;
|
|
outline: none;
|
|
|
|
}
|
|
|
|
/*classe "Senha_input":hover defini somente uma interação do campo input com a mouse, onde ao passar do mouse sobre o elemento ele realizara uma ação.
|
|
|
|
-Definido uma declaração de uma nova cor de backgroud, e uma nova cor de font para o botão.
|
|
*/
|
|
|
|
.botao:hover {
|
|
|
|
background-color: rgb(30, 121, 132);
|
|
color: white;
|
|
|
|
} |