testes/Css/page/Ambiente/Config/Estrutura/menu.css

167 lines
3.4 KiB
CSS

body {
display: flex;
}
.voltar {
display: flex;
flex-direction: row;
align-items: center;
margin-top: 2vh;
margin-left: 1vw;
margin-bottom: 2vh;
gap: 0.5vw;
text-decoration: none;
}
.voltar .escrita_A {
width: 10vw;
height: 4vh;
background-color: var(--Vazio_Corpo);
box-shadow: 5px 5px 0px var(--Vazio_Fundo);
display: flex;
align-items: center;
justify-content: center;
padding: 0.3vw;
font-family: var(--font_titulo);
font-size: 0.8vw;
color: var(--Matriz);
transition: 1s ease;
}
.voltar .retrato_A {
width: 2vw;
height: 4vh;
padding: 0.3vw;
background-color: var(--Vazio_Corpo);
box-shadow: 5px 5px 0px var(--Vazio_Fundo);
transition: 1s ease;
}
.menu {
width: 25vw;
height: 100vh;
background-color: var(--Cor_Segundaria_5_1);
overflow-x: hidden;
overflow-y: auto;
}
/* Estilo customizado para o scroll (somente no Webkit) */
.menu::-webkit-scrollbar {
width: 0.2vw;
/* Largura da barra de rolagem */
height: 0.2vw;
/* Para scroll horizontal, se necessário */
}
/* Estilo para o polegar da barra de rolagem */
.menu::-webkit-scrollbar-thumb {
background-color: var(--Cor_Segundaria_3_1);
/* Cor da parte da barra que você arrasta */
border-radius: 10px;
/* Borda arredondada */
/* Borda ao redor do polegar */
}
/* Aumentando o tamanho do track (fundo da barra de rolagem) */
.menu::-webkit-scrollbar-track {
background-color: var(--Cor_Segundaria_3_2);
/* Cor do fundo do scroll */
border-radius: 10px;
/* Borda arredondada */
/* Usar diretamente a largura ou altura aqui para aumentar o track */
width: 1vw;
/* Aumentando a largura do track para o scroll vertical */
height: 1vw;
/* Aumentando a altura do track para o scroll horizontal */
}
.contener_1,
.contener_2,
.contener_3 {
width: 100%;
padding-bottom: 1vh;
list-style: none;
text-decoration: none;
padding-top: 1vh;
border-top: 0.1vh solid var(--Matriz);
}
.contener_1 li,
.contener_2 li,
.contener_3 li {
list-style: none;
text-decoration: none;
}
.contener_1 .titulos,
.contener_2 .titulos,
.contener_3 .titulos {
width: 15vw;
height: 5vh;
padding: 0.5vw;
margin-left: 1vw;
display: flex;
justify-content: start;
align-items: center;
gap: 1vw;
font-family: var(--font_titulo);
font-size: 1vw;
color: var(--Matriz);
background-color: var(--Cor_Segundaria_2_1);
box-shadow: 5px 5px 0px var(--Cor_Segundaria_2_2);
}
.contener_1 .titulos img,
.contener_2 .titulos img,
.contener_3 .titulos img {
width: 3vw;
}
.contener_1 .opicao button,
.contener_2 .opicao button,
.contener_3 .opicao button {
display: flex;
background: none;
border: none;
outline: none;
align-items: center;
align-content: center;
gap: 0.5vw;
cursor: pointer;
}
.contener_1 .opicao .retrato,
.contener_2 .opicao .retrato,
.contener_3 .opicao .retrato {
width: 2vw;
filter: drop-shadow(5px 5px 0px var(--Vazio_Fundo));
transition: 1s ease;
}
.contener_1 .opicao .escrita,
.contener_2 .opicao .escrita,
.contener_3 .opicao .escrita {
width: 12vw;
margin-right: 2vw;
padding: 0.6vw;
background-color: var(--Vazio_Corpo);
box-shadow: 5px 5px 0px var(--Vazio_Fundo);
font-family: var(--font_titulo);
color: var(--Matriz);
transition: 1s ease;
}