testes/Css/Ambiente_Usuario/Configuracoes.css

250 lines
3.9 KiB
CSS

.matriz {
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
align-content: center;
background-color: var(--fundo_4);
}
.menu {
background-color: var(--fundo_1);
width: 15vw;
height: 100vh;
display: flex;
flex-direction: column;
align-content: start;
align-items: start;
justify-content: start;
}
.menu .catalos_1,
.menu .catalos_2,
.menu .catalos_3,
.menu .catalos_4,
.menu .catalos_5,
.menu .catalos_6 {
display: flex;
align-items: center;
margin-top: 5vh;
align-content: center;
margin-left: 2vw;
padding-left: 0.5vw;
gap: 2vw;
}
.menu .catalos_1:hover,
.menu .catalos_2:hover,
.menu .catalos_3:hover,
.menu .catalos_4:hover,
.menu .catalos_5:hover,
.menu .catalos_6:hover {
border-left: 0.5vh solid var(--fudno_3);
}
.menu .catalos_1 img,
.menu .catalos_2 img,
.menu .catalos_3 img,
.menu .catalos_4 img,
.menu .catalos_5 img,
.menu .catalos_6 img {
width: 3vw;
}
.menu .catalos_1 a,
.menu .catalos_2 a,
.menu .catalos_3 a,
.menu .catalos_4 a,
.menu .catalos_5 a,
.menu .catalos_6 a {
text-decoration: none;
color: var(--variante_font_1);
font-family: fonteTi;
}
.apresentacao {
display: flex;
align-content: center;
align-items: center;
width: 80vw;
height: 100vh;
}
.apresentacao iframe {
width: 100%;
height: 99%;
}
.estilos {
padding: 10px;
}
.estilos label {
font-family: var(--font_titulo);
}
.tema_usuario input {}
.mudanca_Img {}
.mudanca_Img .Cap_1 {}
.mudanca_Img .Cap_2 {}
.tema_Pesonalizavel {
display: flex;
flex-direction: row;
}
.tema_Pesonalizavel {}
.tema_Pesonalizavel .fundo_1 {}
.tema_Pesonalizavel .fundo_1 img {
width: 10vw;
height: 10vh;
}
.tema_Pesonalizavel .fundo_2 {}
.tema_Pesonalizavel .fundo_2 img {
width: 10vw;
height: 10vh;
}
.tema_Pesonalizavel .fundo_3 {}
.tema_Pesonalizavel .fundo_3 img {
width: 10vw;
height: 10vh;
}
.conteiner2 {
width: 20vw;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 7px;
box-shadow: var(--sombra_variante_1) 0 0 10px;
}
.image-container2 {
width: 20vw;
height: 30vh;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
margin: 0 auto 30px auto;
border-radius: 50%;
background-color: #ffffff;
overflow: hidden;
}
.image-container2 img {
display: block;
position: relative;
width: 100%;
height: 100%;
margin: auto;
}
.figcaption {
margin: 20px 0 30px 0;
text-align: center;
color: #2a292a;
}
.container2 input[type="file"] {
display: none;
}
.container2 label {
display: block;
position: relative;
background-color: #025bee;
color: #ffffff;
font-size: 18px;
text-align: center;
width: 300px;
padding: 18px 0;
border-radius: 5px;
margin: auto;
cursor: pointer;
}
.conteiner {
background-color: var(--variante_font_1);
width: 20vw;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
border-radius: 7px;
box-shadow: var(--sombra_variante_1) 0 0 10px;
}
.image-container {
width: 30vw;
height: 30vh;
display: flex;
align-items: center;
align-content: center;
justify-content: center;
margin: 0 auto 30px auto;
background-color: #ffffff;
overflow: hidden;
}
.image-container img {
display: block;
position: relative;
width: 100%;
height: 100%;
margin: auto;
}
.figcaption {
margin: 20px 0 30px 0;
text-align: center;
color: #2a292a;
}
.container input[type="file"] {
display: none;
}
.container label {
display: block;
position: relative;
background-color: #025bee;
color: #ffffff;
font-size: 18px;
text-align: center;
width: 300px;
padding: 18px 0;
border-radius: 5px;
margin: auto;
cursor: pointer;
}