testes/Css/global/Blocos.css

404 lines
6.2 KiB
CSS

.matriz {
display: flex;
flex-direction: row;
width: 100%;
margin-top: 5vh;
}
.capitulo_1 {
width: 4vw;
height: 100vh;
background-color: var(--fundo_2);
position: absolute;
top: 0px;
left: 0;
overflow: hidden;
transition: 1s ease;
}
div.ativo {
background-color: var(--fundo_4);
}
.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(--fundo_2);
}
.Corpo_1 .Colunas_1 .seguimentos_2 {
width: 85%;
height: 30vh;
order: 1;
display: flex;
color: var(--variante_font_1);
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;
}
.Corpo_1 .Colunas_2 {
display: flex;
flex-direction: row;
position: relative;
width: 15vw;
background-color: var(--fundo_2);
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(--variante_font_1);
}
.Corpo_1 .Colunas_2 .seguimentos_2 .sessao_1 .forg .item_menu {
font-family: var(--font_titulo);
text-decoration: none;
color: var(--variante_font_1);
}
.Corpo_1 .Colunas_2 .seguimentos_2 .sessao_1 .forg .item_menu:hover {
color: var(--variante_font_4);
}
.Corpo_1 .Colunas_2 .seguimentos_2 a:hover {
color: var(--variante_font_4);
}
.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(--fundo_4);
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: rgb(249, 249, 252);
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(--fundo_4);
transition: 1s ease;
}
.sub_item_1:hover,
.sub_item_2:hover,
.sub_item_3:hover {
background-color: var(--fundo_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%;
}
.capitulo_2 {
display: flex;
align-items: end;
justify-content: end;
align-content: end;
width: 98vw;
}
.Corpo_2 .Colunas_1 .transmissão {
width: 92vw;
height: 82vh;
transition: 1s ease;
}
.Corpo_2 iframe {
outline: none;
border: none;
}
.Corpo_2 .Colunas_1 .transmissão.expansao {
width: 81vw;
height: 82vh;
transition: 1s ease;
}