93 lines
3.4 KiB
CSS
93 lines
3.4 KiB
CSS
/* Detalhe - Não é mencionado que todas as declarações CSS devem seguir esse mesmo padrão, onde a linha de classes declaradas segue a ordem das tags, indo da mais externa ("Quem inicia a linha") para a mais interna ("Quem dá o fim para a linha"). Seguindo esse modelo de declaração de classes, todos os elementos se tornam extremamente únicos, minimizando as chances de existir conflitos de classes. */
|
|
|
|
/* ========================================= Painel dedicado para estilizar os componentes de busca do capítulo 1 =============================================== */
|
|
|
|
/* Esta linha de classe aponta para a classe painel_Cap e define os alinhamentos principais de toda a estrutura. */
|
|
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap {
|
|
width: 80%;
|
|
height: 74vh;
|
|
padding: 2vw;
|
|
|
|
background-color: var(--Cor_Segundaria_5_1);
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: start;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Esta linha de classe aponta para a classe coluna_1 e define as extensões máximas que devem ser obedecidas, enquanto ajusta os alinhamentos dinâmicos para que o painel se adapte, utilizando o modelo flex. */
|
|
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_1 {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Esta linha de classe aponta para estilizar um botão que está dentro de insercao_ambiente. */
|
|
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_1 .insercao_ambiente button {
|
|
outline: none;
|
|
border: none;
|
|
|
|
width: 7vw;
|
|
height: 6vh;
|
|
|
|
background-color: var(--Cor_Segundaria_2_1);
|
|
box-shadow: 5px 5px 0px var(--Cor_Segundaria_2_2);
|
|
color: var(--Matriz);
|
|
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Esta linha de classe aponta para a classe pesquisa e define os limites de extensão, além de alinhar todos os elementos dentro dessas extensões. */
|
|
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_1 .pesquisa {
|
|
width: 70%;
|
|
height: 8vh;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Esta linha de classe aponta para estilizar um input que está dentro de pesquisa. */
|
|
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_1 .pesquisa input {
|
|
background: none;
|
|
outline: none;
|
|
border: none;
|
|
|
|
width: 13vw;
|
|
height: 4vh;
|
|
|
|
background-color: var(--Matriz);
|
|
border: 0.4vw solid var(--Cor_Segundaria_2_1);
|
|
box-shadow: 4px 4px 0px 0px var(--Cor_Segundaria_2_2);
|
|
|
|
padding-left: 1vw;
|
|
padding-right: 1vw;
|
|
|
|
font-size: 0.8vw;
|
|
font-family: var(--font_titulo);
|
|
color: var(--Cor_Segundaria_2_1);
|
|
}
|
|
|
|
/* Esta linha de classe aponta para estilizar um botão que está dentro de pesquisa. */
|
|
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_1 .pesquisa button {
|
|
background: none;
|
|
outline: none;
|
|
border: none;
|
|
|
|
width: 4vw;
|
|
height: 6vh;
|
|
|
|
background-color: var(--Cor_Segundaria_2_1);
|
|
box-shadow: 4px 4px 0px 0px var(--Cor_Segundaria_2_2);
|
|
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Esta linha de classe aponta para estilizar uma imagem que está sendo usada como um pequeno detalhe no botão de pesquisa. */
|
|
.bloco_ambiente .seguimento_1 .capitulo_1 .painel_Cap .coluna_1 .pesquisa img {
|
|
width: 2vw;
|
|
filter: drop-shadow(2px 2px 0px var(--Cor_Segundaria_2_2));
|
|
}
|
|
|
|
/* ========================================= Fechamento do bloco de busca =============================================== */ |