419 lines
7.0 KiB
CSS
419 lines
7.0 KiB
CSS
:root {
|
|
|
|
/*Fundos das telas de iframe de cada monitoramento*/
|
|
--fundo_5: #e2e2e2;
|
|
|
|
/*padrão de fonts*/
|
|
--font_titulo: fonteTi;
|
|
--font_conteudo: fonteTa;
|
|
|
|
/*Cor matriz*/
|
|
--Matriz: #ffffff;
|
|
|
|
/*Paleta de cores padrão*/
|
|
--Cor_Primaria_1: #1B8C51;
|
|
--Cor_Primaria_2: #1B8C77;
|
|
--Cor_Primaria_3: #1B7C8C;
|
|
--Cor_Primaria_4: #1B8C2A;
|
|
--Cor_Primaria_5: #1B588C;
|
|
|
|
/*Paleta de cores padrão claro*/
|
|
--Cor_Segundaria_1_1: #22bb6c;
|
|
--Cor_Segundaria_2_1: #22c0a3;
|
|
--Cor_Segundaria_3_1: #26b1c7;
|
|
--Cor_Segundaria_4_1: #26c03a;
|
|
--Cor_Segundaria_5_1: #1478cf;
|
|
|
|
/*Paleta de cores padrão escuro*/
|
|
--Cor_Segundaria_1_1: #115834;
|
|
--Cor_Segundaria_2_2: #125f51;
|
|
--Cor_Segundaria_3_2: #1B7C8C;
|
|
--Cor_Segundaria_4_2: #105018;
|
|
--Cor_Segundaria_5_2: #123655;
|
|
|
|
}
|
|
|
|
|
|
/*Usar para construir toda a estrutura padrão do ambiente */
|
|
.matriz {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
margin-top: 5vh;
|
|
|
|
}
|
|
|
|
/* ------------------- Primeiro painel de dedicado para conter as personalizações unicas do usuário -------------------------- */
|
|
|
|
.capitulo_1 {
|
|
width: 4vw;
|
|
height: 100vh;
|
|
background-color: var(--Cor_Segundaria_5_1);
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0;
|
|
overflow: hidden;
|
|
transition: 1s ease;
|
|
|
|
}
|
|
|
|
|
|
div.ativo {
|
|
background-color: var(--Cor_Segundaria_5_2);
|
|
}
|
|
|
|
|
|
|
|
.capitulo_1.expansao {
|
|
|
|
width: 15vw;
|
|
transition: 1s ease;
|
|
|
|
.Corpo_1 .Colunas_1 {
|
|
|
|
width: 15vw;
|
|
height: 26.5vh;
|
|
transition: 1s ease;
|
|
}
|
|
|
|
.Corpo_1 .Colunas_1 .seguimentos_2 .user_1 .icon_subcab2_1 {
|
|
opacity: 1;
|
|
filter: blur(0px);
|
|
transition: 1s ease;
|
|
|
|
}
|
|
|
|
|
|
.Corpo_1 .Colunas_1 .seguimentos_2 .user_1 .icon_subcab2_2 {
|
|
opacity: 0;
|
|
margin-top: 5vh;
|
|
transform: scale(2.1);
|
|
transition: 1s ease;
|
|
}
|
|
|
|
.Corpo_1 .Colunas_2 {
|
|
width: 15vw;
|
|
height: 73.5vh;
|
|
transition: 1s ease;
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
.capitulo_1:hover {
|
|
|
|
width: 15vw;
|
|
transition: 1s ease;
|
|
|
|
.Corpo_1 .Colunas_1 {
|
|
|
|
width: 15vw;
|
|
height: 26.5vh;
|
|
transition: 1s ease;
|
|
}
|
|
|
|
.Corpo_1 .Colunas_1 .seguimentos_2 .user_1 .icon_subcab2_1 {
|
|
opacity: 1;
|
|
filter: blur(0px);
|
|
transition: 1s ease;
|
|
|
|
}
|
|
|
|
.Corpo_1 .Colunas_1 .seguimentos_2 .user_1 .icon_subcab2_2 {
|
|
opacity: 0;
|
|
filter: blur(20px);
|
|
margin-top: 5vh;
|
|
transform: scale(2.1);
|
|
transition: 1s ease;
|
|
}
|
|
|
|
.Corpo_1 .Colunas_2 {
|
|
width: 15vw;
|
|
height: 73.5vh;
|
|
transition: 1s ease;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
.Corpo_1 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.Corpo_1 .Colunas_1 {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
background-image: url(../../Acessts/Imagens/Capa\ 1.png);
|
|
background-position: center;
|
|
background-size: cover;
|
|
width: 15vw;
|
|
height: 10vh;
|
|
overflow: hidden;
|
|
transition: 1s ease;
|
|
|
|
}
|
|
|
|
.Corpo_1 .Colunas_1 .seguimentos_1 {
|
|
width: 15%;
|
|
height: 30vh;
|
|
background-color: #12365552;
|
|
backdrop-filter: blur(8px);
|
|
display: flex;
|
|
order: 2;
|
|
justify-content: center;
|
|
align-items: start;
|
|
align-content: center;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
.Corpo_1 .Colunas_1 .seguimentos_1 button {
|
|
background: none;
|
|
outline: none;
|
|
border: none;
|
|
|
|
}
|
|
|
|
|
|
.Corpo_1 .Colunas_1 .seguimentos_1 img {
|
|
width: 1.5vw;
|
|
margin-top: 1vh;
|
|
padding: 0.5vh 0.5vw;
|
|
border-radius: 10% 10% 10% 10%;
|
|
|
|
|
|
}
|
|
|
|
.Corpo_1 .Colunas_1 .seguimentos_1 img:hover {
|
|
background-color: var(--Cor_Segundaria_2_1);
|
|
|
|
|
|
}
|
|
|
|
|
|
.Corpo_1 .Colunas_1 .seguimentos_2 {
|
|
width: 85%;
|
|
height: 30vh;
|
|
|
|
order: 1;
|
|
display: flex;
|
|
color: var(--Matriz);
|
|
flex-direction: column;
|
|
|
|
|
|
}
|
|
|
|
|
|
.Corpo_1 .Colunas_1 .seguimentos_2 .user_1 img {
|
|
|
|
width: 6vw;
|
|
margin-top: 2vh;
|
|
margin-left: 35%;
|
|
|
|
|
|
}
|
|
|
|
.Corpo_1 .Colunas_1 .seguimentos_2 .user_1 .icon_subcab2_1 {
|
|
opacity: 0;
|
|
filter: blur(20px);
|
|
transition: 1s ease;
|
|
|
|
}
|
|
|
|
|
|
.Corpo_1 .Colunas_1 .seguimentos_2 .user_2 {
|
|
|
|
font-family: var(--font_titulo);
|
|
font-size: 1.4vw;
|
|
margin-left: 13%;
|
|
text-align: center;
|
|
|
|
}
|
|
|
|
.Corpo_1 .Colunas_1 .seguimentos_2 .user_1 .icon_subcab2_2 {
|
|
|
|
width: 2.5vw;
|
|
opacity: 1;
|
|
filter: blur(0px);
|
|
position: absolute;
|
|
top: 0;
|
|
left: -0.8vw;
|
|
transition: 1s ease;
|
|
}
|
|
|
|
|
|
/* ------------------- Segundo painel que apresenta as opições do ambiente do usuário, que está dividido em duas subpartes -------------------------- */
|
|
|
|
.Corpo_1 .Colunas_2 {
|
|
display: flex;
|
|
flex-direction: row;
|
|
position: relative;
|
|
width: 15vw;
|
|
background-color: var(--Cor_Primaria_5_1);
|
|
height: 90vh;
|
|
transition: 1s ease;
|
|
|
|
}
|
|
|
|
.Corpo_1 .Colunas_2 .seguimentos_2 img {
|
|
width: 1.5vw;
|
|
padding-left: 1vw;
|
|
|
|
}
|
|
|
|
.Corpo_1 .Colunas_2 .seguimentos_2 a {
|
|
|
|
font-family: var(--font_titulo);
|
|
text-decoration: none;
|
|
color: var(--Matriz);
|
|
|
|
}
|
|
|
|
.Corpo_1 .Colunas_2 .seguimentos_2 .sessao_1 .forg .item_menu {
|
|
font-family: var(--font_titulo);
|
|
text-decoration: none;
|
|
color: var(--Matriz);
|
|
|
|
}
|
|
|
|
.Corpo_1 .Colunas_2 .seguimentos_2 .sessao_1 .forg .item_menu:hover {
|
|
color: var(--Matriz);
|
|
|
|
}
|
|
|
|
|
|
.Corpo_1 .Colunas_2 .seguimentos_2 a:hover {
|
|
color: var(--Matriz);
|
|
|
|
}
|
|
|
|
.sessao_1 {
|
|
|
|
list-style: none;
|
|
|
|
}
|
|
|
|
.sessao_1 .item_menu {
|
|
|
|
display: flex;
|
|
gap: 2vw;
|
|
align-items: center;
|
|
align-content: center;
|
|
|
|
}
|
|
|
|
.sub_menu {
|
|
display: flex;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 1vh;
|
|
transition: ease 1s;
|
|
}
|
|
|
|
.sub_menu.show {
|
|
width: 100%;
|
|
height: 15vh;
|
|
|
|
background-color: var(--Cor_Segundaria_5_2);
|
|
display: flex;
|
|
overflow-y: auto;
|
|
flex-direction: column;
|
|
align-items: start;
|
|
align-content: start;
|
|
justify-content: start;
|
|
transition: ease 1s;
|
|
|
|
}
|
|
|
|
.sub_item_1,
|
|
.sub_item_2,
|
|
.sub_item_3 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: start;
|
|
align-content: start;
|
|
|
|
gap: 1vw;
|
|
width: 15vw;
|
|
height: 5vh;
|
|
}
|
|
|
|
|
|
.sub_item_1 p,
|
|
.sub_item_2 p,
|
|
.sub_item_3 p {
|
|
color: var(--Matriz);
|
|
font-family: var(--font_titulo);
|
|
font-size: 0.9vw;
|
|
}
|
|
|
|
.sub_item_1 img,
|
|
.sub_item_2 img,
|
|
.sub_item_3 img {
|
|
|
|
width: 1.5vw;
|
|
padding-left: 1vw;
|
|
|
|
|
|
}
|
|
|
|
.sessao_2 .item_menu:hover,
|
|
.sessao_1 .item_menu:hover {
|
|
background-color: var(--Cor_Segundaria_5_2);
|
|
transition: 1s ease;
|
|
}
|
|
|
|
|
|
.sub_item_1:hover,
|
|
.sub_item_2:hover,
|
|
.sub_item_3:hover {
|
|
background-color: var(--Cor_Segundaria_2_1);
|
|
transition: 1s ease;
|
|
|
|
.Corpo_1 .Colunas_2 .seguimentos_2 .sessao_1 .forg .item_menu {
|
|
color: var(--variante_font_4);
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.sessao_2 .item_menu {
|
|
|
|
display: flex;
|
|
gap: 2vw;
|
|
align-items: center;
|
|
align-content: center;
|
|
|
|
}
|
|
|
|
.sessao_1 .item_menu p,
|
|
.sessao_2 .item_menu p {
|
|
font-size: 1vw;
|
|
}
|
|
|
|
.Corpo_1 .Colunas_2 .seguimentos_2 .sessao_1,
|
|
.Corpo_1 .Colunas_2 .seguimentos_2 .sessao_2 {
|
|
width: 100%;
|
|
|
|
|
|
}
|
|
|
|
.Corpo_1 .Colunas_2 .seguimentos_2 .sessao_1 {
|
|
margin-top: 3vh;
|
|
}
|
|
|
|
.Corpo_1 .Colunas_2 .seguimentos_2 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
|
|
} |