PABX da Simples IP
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

240 lines
4.2 KiB

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande",
"Lucida Sans", Arial, sans-serif;
background-color: rgb(74, 125, 245);
background-image: radial-gradient(
at 7% 96%,
hsla(194, 98%, 50%, 1) 0px,
transparent 70%
),
radial-gradient(at 77% 30%, hsla(303, 90%, 50%, 1) 0px, transparent 15%),
radial-gradient(at 1% 39%, hsla(324, 100%, 50%, 1) 0px, transparent 50%),
radial-gradient(at 78% 90%, hsla(295, 95%, 51%, 1) 0px, transparent 30%),
radial-gradient(at 22% 87%, hsla(253, 100%, 50%, 1) 0px, transparent 30%),
radial-gradient(at 34% 74%, hsla(240, 100%, 50%, 1) 0px, transparent 80%);
}
button {
cursor: pointer;
}
form {
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1;
}
/* ///////////////////////////////////////////////////// */
.no-style {
all: unset;
display: block; /* Para garantir que a imagem seja exibida como um bloco */
width: 50px;
height: 50px;
}
.return {
display: flex;
justify-content: start;
align-items: center;
margin: 5px;
cursor: pointer;
width: -webkit-fill-available;
}
/* Container de login */
.container-home {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow-y: hidden;
}
.box {
background-color: white;
padding: 12px;
border-radius: 6px;
min-width: 20%;
height: 65vh;
display: flex;
flex-direction: column;
align-items: center;
animation: transform 0.3s ease-out;
}
.box:hover {
transform: scale(1.005);
overflow: hidden;
}
.box .box-content-1 {
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
width: 100%;
padding: 10px;
flex: 1;
}
.box-content-1 h1 {
color: #2d69f5;
margin-bottom: 80px;
}
.box-content-1 h4 {
color: #2d69f5;
}
.box .box-content-1 select,
.options {
border: #e7e7e7 solid 1px;
width: 280px;
padding: 10px;
border-radius: 7px;
outline: none;
}
.box .box-content-1 .group {
width: 100%;
display: flex;
flex-direction: column;
justify-content: start;
color: #818181;
padding: 3px;
flex: 1;
}
.box .box-content-1 .group span {
font-size: 13px;
padding: 5px;
}
.box .box-content-2 {
margin: 30px 0 10px 0;
}
.fo-info {
text-align: center;
}
.fo-info p {
font-size: 12px;
color: #aaaaaa;
font-weight: 200;
}
.fa-solid.fa-user {
width: max-content;
height: min-content;
padding: 10px;
border-radius: 0 12px 12px 12px;
background-color: transparent;
}
.fa-solid.fa-key {
width: max-content;
height: max-content;
padding: 10px;
border-radius: 0 12px 12px 12px;
background-color: transparent;
color: #2d69f5;
}
.esqueci-senha {
display: flex;
justify-content: end;
align-items: center;
width: 100%;
}
.esqueci-senha > a {
color: #858585;
font-size: small;
text-decoration: none;
padding: 8px;
}
:root {
overflow-y: hidden;
}
/* ///////////////////////////////////////////////////// */
/* Menu de redes sociais */
.menu {
width: 100%;
font-weight: bolder;
display: flex;
align-items: end;
justify-content: center;
}
.social {
color: #8aa2ff;
margin: 2vh;
transition: transform 0.3s;
background-color: #f1f1f1;
border-radius: 10px;
padding: 10px 14px;
}
.social:hover {
transform: scale(1.15);
}
/* ///////////////////////////////////////////////////// */
/* Bot<EFBFBD>o de envio */
.bn-login {
width: 100%;
display: flex;
justify-content: center;
align-items: end;
}
.bn632-hover {
border-radius: 10px;
font-size: 14px;
font-weight: 600;
color: #fff;
cursor: pointer;
height: 40px;
width: 75%;
text-align: center;
border: none;
background-size: 300% 100%;
-o-transition: all 0.6s ease-in-out;
-webkit-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.bn632-hover:hover {
background-position: 100% 0;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
-webkit-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
.bn632-hover:focus {
outline: none;
}
.bn632-hover.bn24 {
background-image: linear-gradient(
to right,
#2d69f5,
#ff007a,
#6664f1,
rgb(249, 5, 78)
);
}