460 lines
6.7 KiB
CSS
460 lines
6.7 KiB
CSS
/*subpainel alert*/
|
|
|
|
.matriz_alert {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 75vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sub_tela_alert_frame_1 {
|
|
width: 95%;
|
|
height: 100%;
|
|
|
|
background-color: var(--fundo_5);
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
/* Subpainel Vpn */
|
|
|
|
.Matriz_Vpn {
|
|
display: none;
|
|
justify-content: center;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
height: 75vh;
|
|
|
|
overflow: hidden;
|
|
}
|
|
|
|
.Subtela_Vpn_1 {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.Matriz_Vpn .Subtela_Vpn_1 .Subtela_Vpn_frame_1,
|
|
.Matriz_Vpn .Subtela_Vpn_1 .Subtela_Vpn_frame_2 {
|
|
|
|
width: 48vw;
|
|
height: 100%;
|
|
|
|
background-color: var(--fundo_5);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/*Data Center*/
|
|
|
|
.matriz_DataCenter {
|
|
display: none;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.matriz_DataCenter .Subtela_Data_1 .Subtela_Data_frame_1,
|
|
.matriz_DataCenter .Subtela_Data_1 .Subtela_Data_frame_2 {
|
|
|
|
width: 100%;
|
|
height: 35vh;
|
|
background-color: var(--fundo_5);
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
/*Fireware*/
|
|
|
|
.matriz_Firewall {
|
|
display: none;
|
|
flex-direction: row;
|
|
width: 100%;
|
|
height: 75vh;
|
|
overflow: hidden;
|
|
|
|
|
|
}
|
|
|
|
.capitulo_1,
|
|
.capitulo_2 {
|
|
width: 50vw;
|
|
height: 75vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
|
|
.Hardware {
|
|
display: flex;
|
|
width: 48vw;
|
|
height: 100%;
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
}
|
|
|
|
.sessao_1 {
|
|
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sessao_2 {
|
|
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-content: center;
|
|
align-items: center;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.tela_har_1 {
|
|
width: 46vw;
|
|
height: 35vh;
|
|
|
|
background-color: var(--fundo_5);
|
|
}
|
|
|
|
.tela_har_1 iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
.tela_har_2,
|
|
.tela_har_3 {
|
|
width: 23vw;
|
|
height: 40vh;
|
|
|
|
background-color: var(--fundo_5);
|
|
}
|
|
|
|
.tela_har_2 iframe,
|
|
.tela_har_3 iframe {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
|
|
.trafegos {
|
|
width: 48vw;
|
|
height: 30vh;
|
|
|
|
display: flex;
|
|
background-color: var(--fundo_5);
|
|
flex-direction: row;
|
|
|
|
}
|
|
|
|
.tela_traf_1 {
|
|
width: 50%;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
.tela_traf_2 {
|
|
width: 50%;
|
|
height: 100%;
|
|
}
|
|
|
|
.tela_traf_3 {
|
|
width: 50%;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
.tela_traf_1 iframe,
|
|
.tela_traf_2 iframe,
|
|
.tela_traf_3 iframe {
|
|
outline: none;
|
|
border: none;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
.speed_teste {
|
|
|
|
width: 48vw;
|
|
height: 44vh;
|
|
margin-top: 3vh;
|
|
|
|
display: flex;
|
|
background-color: var(--fundo_5);
|
|
flex-direction: row;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tela_spe_1,
|
|
.tela_spe_2 {
|
|
height: 100%;
|
|
|
|
|
|
}
|
|
|
|
.tela_spe_1 iframe,
|
|
.tela_spe_2 iframe {
|
|
|
|
width: 24.01366vw;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
/*Ramais*/
|
|
|
|
.matriz_Ramais {
|
|
|
|
display: none;
|
|
justify-content: center;
|
|
}
|
|
|
|
.matriz_Ramais .Subtela_ramais_1 .Subtela_Ramais_frame_1 {
|
|
|
|
width: 90vw;
|
|
height: 75vh;
|
|
|
|
background-color: var(--fundo_5);
|
|
}
|
|
|
|
|
|
/*CFTV*/
|
|
|
|
.matriz_CFTV {
|
|
|
|
display: none;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
|
|
.matriz_CFTV .Subtela_CFTV_1 .Subtela_CFTV_frame_1,
|
|
.matriz_CFTV .Subtela_CFTV_2 .Subtela_CFTV_frame_2,
|
|
.matriz_CFTV .Subtela_CFTV_3 .Subtela_CFTV_frame_3,
|
|
.matriz_CFTV .Subtela_CFTV_4 .Subtela_CFTV_frame_4 {
|
|
|
|
margin: 1vw;
|
|
background-color: var(--fundo_5);
|
|
width: 38vw;
|
|
height: 35vh;
|
|
|
|
}
|
|
|
|
|
|
/*Host*/
|
|
|
|
|
|
.matriz_hosts {
|
|
width: 100vw;
|
|
display: none;
|
|
justify-content: center;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.host_2,
|
|
.host_3,
|
|
.host_4 {
|
|
width: 22.5vw;
|
|
|
|
}
|
|
|
|
.host_2 .Subtela_2_1 .subtela_frame_1,
|
|
.host_2 .Subtela_2_2 .subtela_frame_2,
|
|
.host_2 .Subtela_2_3 .subtela_frame_3 {
|
|
width: 100%;
|
|
height: 25vh;
|
|
background-color: var(--fundo_5);
|
|
}
|
|
|
|
.host_3 .Subtela_3_1 .subtela_frame_1,
|
|
.host_3 .Subtela_3_2 .subtela_frame_2,
|
|
.host_3 .Subtela_3_3 .subtela_frame_3 {
|
|
width: 100%;
|
|
height: 25vh;
|
|
background-color: var(--fundo_5);
|
|
}
|
|
|
|
.host_4 .Subtela_4_1 .subtela_frame_1,
|
|
.host_4 .Subtela_4_2 .subtela_frame_2,
|
|
.host_4 .Subtela_4_3 .subtela_frame_3 {
|
|
width: 100%;
|
|
height: 25vh;
|
|
background-color: var(--fundo_5);
|
|
}
|
|
|
|
|
|
.matriz_consumo_PDU {
|
|
width: 100%;
|
|
display: none;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-content: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
|
|
}
|
|
|
|
.cap_1 {
|
|
margin-top: 1vh;
|
|
}
|
|
|
|
.cap_1,
|
|
.cap_2,
|
|
.cap_3 {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 99vw;
|
|
height: 25vh;
|
|
}
|
|
|
|
.cap_1 .sessao_1 {
|
|
width: 49.5vw;
|
|
background-color: var(--fundo_5);
|
|
}
|
|
|
|
.cap_1 .sessao_2 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 49.5vw;
|
|
background-color: var(--fundo_5);
|
|
}
|
|
|
|
.cap_1 .sessao_1 .subtela_PDU_1 .subtela_PDU_1_1 {
|
|
width: 49.5vw;
|
|
height: 25vh;
|
|
}
|
|
|
|
.cap_1 .sessao_2 .subtela_PDU_1 .subtela_PDU_1_1 {
|
|
width: 49.5vw;
|
|
height: 13vh;
|
|
margin-bottom: -1vh;
|
|
}
|
|
|
|
.cap_1 .sessao_2 .subtela_PDU_2 .subtela_PDU_1_2 {
|
|
width: 49.5vw;
|
|
height: 13vh;
|
|
}
|
|
|
|
|
|
.cap_2 .sessao_1 {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 49.5vw;
|
|
background-color: var(--fundo_5);
|
|
}
|
|
|
|
.cap_2 .sessao_2 {
|
|
display: flex;
|
|
flex-direction: row;
|
|
width: 49.5vw;
|
|
background-color: var(--fundo_5);
|
|
}
|
|
|
|
.cap_2 .sessao_1 .subtela_PDU_1 .subtela_PDU_1_1,
|
|
.cap_2 .sessao_1 .subtela_PDU_2 .subtela_PDU_1_2,
|
|
.cap_2 .sessao_1 .subtela_PDU_3 .subtela_PDU_1_3,
|
|
.cap_2 .sessao_1 .subtela_PDU_4 .subtela_PDU_1_4 {
|
|
width: 12.375vw;
|
|
height: 25vh;
|
|
}
|
|
|
|
|
|
.cap_2 .sessao_2 .subtela_PDU_1 .subtela_PDU_1_1 {
|
|
width: 24.75vw;
|
|
height: 25vh;
|
|
}
|
|
|
|
.cap_2 .sessao_2 .subtela_PDU_2 .subtela_PDU_1_2 {
|
|
width: 24.75vw;
|
|
height: 25vh;
|
|
}
|
|
|
|
|
|
.cap_3 .sessao_1 {
|
|
width: 49.5vw;
|
|
background-color: rgb(226, 226, 226);
|
|
}
|
|
|
|
.cap_3 .sessao_2 {
|
|
width: 49.5vw;
|
|
display: flex;
|
|
flex-direction: row;
|
|
background-color: var(--fundo_5);
|
|
}
|
|
|
|
.cap_3 .sessao_2 .esqueda {
|
|
|
|
width: 50%;
|
|
|
|
}
|
|
|
|
.cap_3 .sessao_2 .direita {
|
|
|
|
width: 50%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.cap_3 .sessao_1 .subtela_PDU_1 .subtela_PDU_1_1 {
|
|
width: 49.5vw;
|
|
height: 26vh;
|
|
}
|
|
|
|
.cap_3 .sessao_2 .esqueda .subtela_PDU_1 .subtela_PDU_1_1 {
|
|
width: 24.75vw;
|
|
height: 26vh;
|
|
}
|
|
|
|
.cap_3 .sessao_2 .direita .subtela_PDU_2 .subtela_PDU_1_2 {
|
|
width: 24.75vw;
|
|
height: 13vh;
|
|
margin-bottom: -1vh;
|
|
}
|
|
|
|
.cap_3 .sessao_2 .direita .subtela_PDU_3 .subtela_PDU_1_3 {
|
|
width: 24.75vw;
|
|
height: 13vh;
|
|
}
|
|
|
|
|
|
#panel1,
|
|
#panel2,
|
|
#panel3,
|
|
#panel4,
|
|
#panel5,
|
|
#panel6,
|
|
#panel7,
|
|
#panel8 {
|
|
|
|
animation: conteudoPrincipal2 2s ease;
|
|
|
|
}
|
|
|
|
@keyframes conteudoPrincipal2 {
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0vh);
|
|
|
|
}
|
|
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10vh);
|
|
overflow: auto;
|
|
|
|
}
|
|
|
|
} |