teste
/
testes
Template
2
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects 1 Releases Wiki Activity
testes/Css/page/Ambiente/Config/pop.css

809 lines
34 KiB
CSS
Raw Blame History

/*Pop_user*/
.Pop_up_Config.PainelEstilo .Pop_up_Config.PainelUser {
color: #000;
/*define a cor */
}
.Pop_up_Config.PainelEstilo {
display: none;
/* define o display como none*/
border: none;
/*retira a borda padrao do html*/
flex-direction: column;
/*define a direção dos itens na div*/
width: 40vw;
/*define largura*/
height: 70vh;
/*Define altura*/
border-radius: 3vw;
/*define tamanho da borda*/
position: absolute;
/*define se que o elemento ta solto*/
top: 10vh;
/*define o quao pra cima vai estar o objeto*/
left: 30vw;
/*define o qual para esquerda o objeto vai estar */
background-color: #D9D9D9;
/*define a cor de fundo*/
}
.Pop_up_Config.PainelEstilo .PainelFechar button {
border: none;
/*tira a borda do html*/
background: none;
/*tira o backgrond*/
outline: none;
/*tira a borda de foco*/
width: 2vw;
/*define largura*/
height: 2vw;
/*define altura*/
margin-left: 1vw;
/*define a margin da esquerda*/
margin-top: 1vw;
/*define a margin de cima*/
color: var(--Matriz);
/* Cor do texto do botão */
background-color: var(--Cor_Segundaria_5_1);
/* Cor de fundo do botão */
border-radius: 12vh;
/*define aredondamento da borda*/
transition: 1s ease;
/* Transição suave de 1 segundo */
font-family: var(--font_conteudo);
/*define a fonte */
font-size: 0.8vw;
/*define tamanho*/
}
.Pop_up_Config.PainelEstilo .PainelFechar button:hover {
color: var(--Cor_Segundaria_5_1);
/* Muda a cor do texto */
background-color: var(--Matriz);
/* Muda a cor de fundo */
transition: 1s ease;
/* Transição suave de 1 segundo */
font-family: var(--font_titulo);
/*define a fonte usada*/
}
.Pop_up_Config.PainelEstilo .PainelFechar .TituloPopup img {
width: 2vw;
/*define largura*/
height: 2vw;
/*define altura*/
font-size: 0.8vw;
/*define tamanho da fonte*/
}
.Pop_up_Config.PainelEstilo .PainelConteudo .Forme .CampoInsercao_Perfil button {
color: var(--Cor_Segundaria_5_1);
/* Muda a cor do texto */
background: none;
/*deixa sem background*/
outline: none;
/*tira a borda de foco*/
border: none;
/*tira a borda*/
background-color: var(--Matriz);
/* Muda a cor de fundo */
width: 10vw;
/*define a laregura*/
height: 20vh;
/*define a altura*/
border-radius: 12vh;
/*define o quao arredondado fica a borda*/
font-size: 2.5vw;
/*define o tamanho da fonte*/
justify-content: center;
/* Alinha os itens horizontalmente no centro do container */
align-items: center;
/* Alinha os itens verticalmente no centro do container */
font-family: var(--font_titulo);
/* Define a fonte para o título, utilizando uma variável CSS */
}
.Pop_up_Config.PainelEstilo .PainelConteudo .Forme .CampoInsercao_Fundo button {
color: var(--Cor_Segundaria_5_1);
/* Muda a cor do texto */
background: none;
/* Remove o fundo do elemento */
outline: none;
/* Remove a borda de foco (outline) */
border: none;
/* Remove a borda do elemento */
background-color: var(--Matriz);
/* Muda a cor de fundo */
width: 10vw;
/* Define a largura do elemento como 10% da largura da janela de visualização */
height: 20vh;
/* Define a altura do elemento como 20% da altura da janela de visualização */
justify-content: center;
/* Alinha os itens horizontalmente no centro do container */
align-items: center;
/* Alinha os itens verticalmente no centro do container */
font-family: var(--font_titulo);
/* Define a fonte para o título, utilizando uma variável CSS */
font-size: 2.5vw;
/* Define o tamanho da fonte como 0.8% da largura da janela de visualização */
}
.Pop_up_Config.PainelManual {
display: none;
/* Esconde o elemento da página (não será exibido) */
width: 40vw;
/* Define a largura do elemento como 40% da largura da janela de visualização */
height: 70vh;
/* Define a altura do elemento como 70% da altura da janela de visualização */
margin: 1vh;
/* Adiciona uma margem de 1% da altura da janela de visualização */
position: absolute;
/* Posiciona o elemento de forma absoluta em relação ao contêiner mais próximo */
top: 10vh;
/* Define a distância do topo do contêiner (10% da altura da janela de visualização) */
left: 30vw;
/* Define a distância da esquerda do contêiner (30% da largura da janela de visualização) */
background-color: black;
/* Define o fundo do elemento com cor preta */
}
.Pop_up_Config.PainelEstilo .PainelFechar .TituloPopup h2 {
font-family: var(--font_titulo);
/* Define a fonte para o título, utilizando uma variável CSS */
color: rgb(0, 55, 100);
/* Define a cor do texto usando valores RGB (azul escuro) */
font-size: 3vh;
/* Define o tamanho da fonte como 3% da altura da janela de visualização */
}
.Pop_up_Config.PainelEstilo .PainelFechar {
width: 100%;
/* Define a largura do elemento como 100% da largura do contêiner pai */
align-items: center;
/* Alinha os itens verticalmente no centro do container (quando usando flexbox) */
font-family: var(--font_titulo);
/* Define a fonte para o título, utilizando uma variável CSS */
display: flex;
/* Define o layout como flexbox, permitindo o uso das propriedades de alinhamento e direção */
flex-direction: row;
/* Define a direção dos itens dentro do flexbox como linha (horizontal) */
height: 10%;
/* Define a altura do elemento como 10% da altura do contêiner pai */
}
.Pop_up_Config.PainelEstilo .PainelFechar .TituloPopup {
margin-top: 2vh;
/* Adiciona uma margem no topo do elemento equivalente a 2% da altura da janela de visualização */
width: 80%;
/* Define a largura do elemento como 80% da largura do contêiner pai */
display: flex;
/* Define o layout como flexbox, permitindo o uso das propriedades de alinhamento e direção */
align-items: center;
/* Alinha os itens verticalmente no centro do container (quando usando flexbox) */
justify-content: center;
/* Alinha os itens horizontalmente no centro do container (quando usando flexbox) */
flex-direction: row;
/* Define a direção dos itens dentro do flexbox como linha (horizontal) */
gap: 0.8vw;
/* Define o espaço entre os itens dentro do container como 0.8% da largura da janela de visualização */
height: 15%;
/* Define a altura do elemento como 15% da altura do contêiner pai */
}
.Pop_up_Config.PainelEstilo .PainelConteudo .Forme .CampoInsercao_Perfil label {
font-family: var(--font_conteudo);
/* define a fonte*/
color: rgb(0, 55, 100);
/* define a cor */
font-size: 1.8vw;
/* define tamanho*/
}
.Pop_up_Config.PainelEstilo .PainelConteudo .Forme .CampoInsercao_Fundo label {
font-family: var(--font_conteudo);
/* define a fonte*/
color: rgb(0, 55, 100);
/* define a cor */
font-size: 1.8vw;
/* define tamanho*/
}
.Pop_up_Config.PainelEstilo .PainelConteudo .Forme .CampoInsercao_Perfil {
margin-top: 2vh;
/*define a margin de cima*/
width: 100%;
/*largura*/
display: flex;
/*define o dysplay */
align-items: center;
/*alinhar os itens no eixo transversal */
justify-content: center;
/*para alinhar os itens ao longo do eixo principal */
flex-direction: column;
/* alterar a direção do eixo principal dentro de um contêiner flexível.*/
height: 30%;
/*definir a altura de um elemento como uma porcentagem em relação à altura do seu elemento pai.*/
}
.Pop_up_Config.PainelEstilo .PainelConteudo .Forme .CampoInsercao_Fundo {
margin-top: 2vh;
/* Dá uma margem superior de 2% da altura da janela de visualização */
width: 100%;
/* Define a largura do elemento para 100% da largura do seu contêiner pai */
display: flex;
/* Define o contêiner como um flexbox para controlar o layout dos filhos */
align-items: center;
/* Alinha os itens ao longo do eixo transversal (horizontal) no centro */
justify-content: center;
/* Alinha os itens ao longo do eixo principal (vertical, já que o flex-direction está em coluna) no centro */
flex-direction: column;
/* Define que o eixo principal do layout será vertical (os itens serão organizados em uma coluna) */
height: 30%;
/* Define a altura do elemento para 30% da altura do seu contêiner pai */
}
.Pop_up_Config.PainelEstilo .PainelConteudo .Forme .CampoInsercao_Enviar {
margin-top: 2vh;
/* Define uma margem superior de 2% da altura da janela de visualização (a altura da tela) */
height: 5%;
/* Define a altura do elemento como 5% da altura do seu contêiner pai */
display: flex;
/* Define o contêiner como um flexbox, permitindo controlar o layout dos itens filhos de forma flexível */
align-items: center;
/* Alinha os itens ao longo do eixo transversal (horizontal) no centro do contêiner */
justify-content: center;
/* Alinha os itens ao longo do eixo principal (vertical, no caso de flex-direction ser o padrão, que é horizontal) no centro */
}
.Pop_up_Config.PainelEstilo .PainelConteudo .Forme .CampoInsercao_Enviar button {
margin-top: 1vh;
/* Define uma margem superior de 1% da altura da janela de visualização (altura da tela) */
border: none;
/* Remove qualquer borda do elemento (como se fosse um botão, por exemplo) */
background: none;
/* Remove qualquer fundo anterior, deixando o fundo transparente (pode ser redundante com o background-color) */
outline: none;
/* Remove a linha de foco ao clicar no elemento (geralmente usada em botões ou links) */
width: 12vw;
/* Define a largura do elemento como 12% da largura da janela de visualização (tela) */
height: 5vh;
/* Define a altura do elemento como 8% da altura da janela de visualização (tela) */
font-size: 0.8vw;
/* Define o tamanho da fonte como 0.8% da largura da janela de visualização, ajustando o texto de acordo com o tamanho da tela */
color: #D9D9D9;
/* Define a cor do texto para um cinza claro (#D9D9D9) */
background-color: var(--Cor_Segundaria_5_1);
/* Define a cor de fundo usando uma variável CSS personalizada (substituída por um valor real da variável) */
border-radius: 12vh;
/* Define um raio de borda grande, criando bordas arredondadas com um valor proporcional à altura da tela */
transition: 1s ease;
/* Adiciona uma transição suave de 1 segundo, com um efeito de suavização "ease" (transição mais natural) */
font-family: var(--font_conteudo);
/* Define a fonte do texto usando uma variável CSS personalizada para a família de fontes (substituída pelo valor real da variável) */
font-size: 0.8vw;
/* Define novamente o tamanho da fonte, repetindo a linha anterior */
}
.Pop_up_Config.PainelEstilo .PainelConteudo .Forme .CampoInsercao_Enviar button:hover {
color: var(--Cor_Segundaria_5_1);
/* Muda a cor do texto */
background-color: #D9D9D9;
/* Muda a cor de fundo */
transition: 1s ease;
/* Transição suave de 1 segundo */
}
/*pop user*/
.Pop_up_Config.PainelUser .PainelConteudo .TituloPopup img {
width: 3vw;
/* Define a largura do elemento como 3% da largura da janela de visualização (tela) */
height: 3vw;
/* Define a altura do elemento como 3% da largura da janela de visualização (tela) */
font-size: 1.8vw;
/* Define o tamanho da fonte como 1.8% da largura da janela de visualização (tela), ajustando o texto de acordo com a largura da tela */
}
.Pop_up_Config.PainelUser {
display: none;
/* Oculta o elemento, fazendo com que ele não seja exibido na página. (Se for necessário exibir o elemento, você pode usar display: block ou outro valor adequado) */
flex-direction: column;
/* Define que o layout do contêiner flex será em coluna, organizando os itens de cima para baixo (funciona somente se o elemento for um contêiner flex). */
width: 40vw;
/* Define a largura do elemento como 40% da largura da janela de visualização (tela). */
height: 80vh;
/* Define a altura do elemento como 80% da altura da janela de visualização (tela). */
margin: 1vh;
/* Define uma margem ao redor do elemento de 1% da altura da janela de visualização (tela). Isso cria um espaço ao redor do elemento. */
position: absolute;
/* Define que o elemento será posicionado de forma absoluta em relação ao seu contêiner pai mais próximo com position relativa ou ao documento, se não houver um contêiner com position relativa. */
top: 10vh;
/* Define a posição do topo do elemento a 10% da altura da janela de visualização (tela), movendo o elemento para baixo em relação ao seu contêiner pai ou ao documento. */
left: 30vw;
/* Define a posição do lado esquerdo do elemento a 30% da largura da janela de visualização (tela), movendo o elemento para a direita em relação ao seu contêiner pai ou ao documento. */
border-radius: 3vw;
/* Define bordas arredondadas com um raio de 3% da largura da janela de visualização, criando bordas suavemente arredondadas. */
background-color: #D9D9D9;
/* Define a cor de fundo do elemento como um tom de cinza claro (#D9D9D9). */
border: 0.2vw solid var(--Cor_Segundaria_5_1);
/* Define uma borda de 0.2% da largura da janela de visualização, com uma cor sólida baseada em uma variável CSS personalizada chamada --Cor_Segundaria_5_1. */
}
.Pop_up_Config.PainelUser .TituloPopup {
display: flex;
/* Define o contêiner como um flexbox, permitindo organizar os itens dentro dele de maneira flexível. */
flex-direction: row;
/* Organiza os itens dentro do contêiner de forma **horizontal** (na linha), ou seja, os itens serão dispostos da esquerda para a direita. */
}
.Pop_up_Config.PainelUser .PainelFechar button {
background: none;
/* Remove qualquer fundo do elemento, deixando-o transparente ou sem qualquer imagem/fundo definido. */
outline: none;
/* Remove a linha de contorno que aparece ao clicar no elemento (geralmente usada para mostrar o foco, como em botões ou links). */
border: none;
/* Remove qualquer borda do elemento, tornando-o sem borda visível. */
color: #D9D9D9;
/* Define a cor do texto como um tom de cinza claro (#D9D9D9). */
width: 2vw;
/* Define a largura do elemento como 2% da largura da janela de visualização (tela). */
height: 4vh;
/* Define a altura do elemento como 4% da altura da janela de visualização (tela). */
background-color: var(--Cor_Segundaria_5_1);
/* Define a cor de fundo do elemento usando uma variável CSS personalizada (no caso, a variável --Cor_Segundaria_5_1, que será substituída pelo valor real da variável). */
border-radius: 12vh;
/* Define bordas arredondadas com um valor de 12% da altura da tela (o que cria um formato bem arredondado, quase circular dependendo das proporções da tela). */
transition: 1s ease;
/* Define uma transição suave de 1 segundo, com um efeito de suavização "ease" (transição gradual que começa mais devagar, acelera no meio e desacelera no final). */
font-family: var(--font_conteudo);
/* Define a fonte do texto utilizando uma variável CSS personalizada para a família de fontes (será substituída pelo valor real da variável). */
font-size: 0.8vw;
/* Define o tamanho da fonte como 0.8% da largura da janela de visualização (tela), fazendo com que o texto seja responsivo e se ajuste ao tamanho da tela. */
}
#VoltarPopup {
background: none;
/* Remove qualquer fundo do elemento (sem cor ou imagem de fundo) */
outline: none;
/* Remove a linha de contorno que aparece ao focar o elemento (geralmente ao clicar em botões ou links) */
border: none;
/* Remove qualquer borda visível do elemento */
color: #D9D9D9;
/* Define a cor do texto para um tom de cinza claro (#D9D9D9) */
width: 7vw;
/* Define a largura do elemento como 7% da largura da janela de visualização (tela), ajustando-se automaticamente ao tamanho da tela */
height: 4vh;
/* Define a altura do elemento como 4% da altura da janela de visualização (tela), ajustando-se automaticamente ao tamanho da tela */
background-color: var(--Cor_Segundaria_5_1);
/* Define a cor de fundo do elemento utilizando uma variável CSS personalizada chamada --Cor_Segundaria_5_1, que será substituída pelo valor da variável */
border-radius: 12vh;
/* Define bordas arredondadas com um valor de 12% da altura da tela, criando bordas muito arredondadas, quase circulares */
transition: 1s ease;
/* Adiciona uma transição suave de 1 segundo, com um efeito de suavização "ease" (transição gradual que acelera e desacelera de forma natural) */
font-family: var(--font_conteudo);
/* Define a fonte do texto usando uma variável CSS personalizada chamada --font_conteudo, que será substituída pelo valor real da variável */
font-size: 0.8vw;
/* Define o tamanho da fonte como 0.8% da largura da janela de visualização, fazendo o texto responsivo e ajustando automaticamente ao tamanho da tela */
}
#VoltarPopup:hover {
color: var(--Cor_Segundaria_5_1);
/* Muda a cor do texto */
background-color: white;
/* Muda a cor de fundo */
transition: 1s ease;
/* Transição suave de 1 segundo */
}
.Pop_up_Config.PainelUser .PainelFechar button:hover {
color: var(--Cor_Segundaria_5_1);
/* Muda a cor do texto */
background-color: white;
/* Muda a cor de fundo */
transition: 1s ease;
/* Transição suave de 1 segundo */
}
.Pop_up_Config.PainelUser .PainelFechar {
border-radius: 12vh;
/* Define bordas arredondadas no elemento com um raio de 12% da altura da tela, criando bordas muito arredondadas, quase circulares. */
transition: 1s ease;
/* Aplica uma transição suave de 1 segundo, com um efeito de suavização "ease", o que significa que a mudança ocorrerá lentamente no início e no final da animação. */
font-family: var(--font_conteudo);
/* Define a fonte do texto usando uma variável CSS personalizada chamada --font_conteudo, permitindo flexibilidade na escolha da fonte. */
font-size: 0.8vw;
/* Define o tamanho da fonte como 0.8% da largura da janela de visualização, tornando o texto responsivo ao tamanho da tela. */
align-items: end;
/* Alinha os itens dentro do contêiner flex ao **final** do eixo transversal (em um contêiner com `flex-direction: row`, o eixo transversal é vertical). Ou seja, os itens são alinhados na parte inferior. */
display: flex;
/* Define o elemento como um contêiner flexível, permitindo que você organize os itens dentro dele usando as propriedades flexbox. */
flex-direction: row;
/* Organiza os itens dentro do contêiner de forma **horizontal** (em uma linha), ou seja, os itens serão dispostos da esquerda para a direita. Esse é o comportamento padrão de um contêiner flex. */
margin-top: 1vw;
/* Adiciona uma margem superior de 1% da largura da janela de visualização, criando um espaço acima do elemento. */
margin-left: 1vw;
/* Adiciona uma margem à esquerda do elemento de 1% da largura da janela de visualização, criando espaço à esquerda do elemento. */
margin-right: 1vw;
/* Adiciona uma margem à direita do elemento de 1% da largura da janela de visualização, criando espaço à direita do elemento. */
justify-content: space-between;
/* Define que os itens dentro do contêiner flex serão distribuídos ao longo do eixo principal (horizontal, neste caso), com espaço igual entre eles, deixando o primeiro item no início e o último no final do contêiner. */
}
.Pop_up_Config.PainelUser .PainelConteudo .TituloPopup {
gap: 1vw;
/* Define um espaço de 1% da largura da janela de visualização entre os itens dentro do contêiner flexível. Essa propriedade cria um espaço igual entre os elementos filhos do contêiner. */
width: 100%;
/* Define a largura do contêiner como 100% da largura da janela de visualização, fazendo com que ele ocupe toda a largura disponível da tela. */
display: flex;
/* Define o contêiner como um **flexbox**, permitindo usar as propriedades do flexbox para organizar os itens dentro dele de maneira flexível. */
align-items: center;
/* Alinha os itens dentro do contêiner **verticalmente** no centro do contêiner (no eixo transversal, ou seja, o eixo perpendicular à direção principal). */
justify-content: center;
/* Alinha os itens dentro do contêiner **horizontalmente** no centro do contêiner (ao longo do eixo principal, ou seja, o eixo de distribuição). */
font-family: var(--font_titulo);
/* Define a fonte do texto dentro do contêiner como uma variável CSS personalizada chamada --font_titulo. O valor real da variável será substituído, permitindo flexibilidade na escolha da fonte. */
}
.Pop_up_Config.PainelUser .PainelConteudo .TituloPopup {
color: var(--Cor_Segundaria_5_1);
/*define a cor com uma variavel no css*/
font-family: var(--font_titulo);
/* Define a fonte do texto dentro do contêiner como uma variável CSS personalizada chamada --font_titulo. O valor real da variável será substituído, permitindo flexibilidade na escolha da fonte. */
}
.Pop_up_Config.PainelUser .PainelConteudo {
flex-direction: column;
/* Define a direção dos itens dentro do contêiner flex como **coluna**, ou seja, os itens serão organizados **verticalmente** (um embaixo do outro). */
width: 100%;
/* Define a largura do contêiner como **100% da largura da janela de visualização**, fazendo com que o contêiner ocupe toda a largura disponível na tela. */
display: flex;
/* Define o elemento como um **contêiner flexível**, permitindo usar o layout flexbox para organizar os itens de forma dinâmica e flexível. */
align-items: center;
/* Alinha os itens **verticalmente** no centro do contêiner (no eixo transversal). Isso é útil quando os itens têm alturas variadas e você quer que eles fiquem centralizados na área disponível. */
justify-content: center;
/* Alinha os itens **horizontalmente** no centro do contêiner (ao longo do eixo principal, ou seja, o eixo de distribuição). Isso garante que os itens sejam centralizados na tela ou no contêiner disponível. */
}
.Pop_up_Config.PainelUser .PainelConteudo .Forme .CampoInsercao h2 {
font-family: var(--font_titulo);
/* Define a **família de fontes** do texto dentro do elemento utilizando uma variável CSS personalizada chamada --font_titulo. O valor real dessa variável será substituído, permitindo flexibilidade na escolha da fonte. */
color: rgb(0, 55, 100);
/* Define a **cor do texto** utilizando o modelo de cor RGB (vermelho, verde, azul). Neste caso, o texto será da cor **azul escuro**, com 0 de vermelho, 55 de verde e 100 de azul. */
font-size: 3vh;
/* Define o **tamanho da fonte** como 3% da altura da janela de visualização. Isso significa que o tamanho da fonte será adaptado com base na altura da tela, tornando o texto responsivo. */
width: 25vw;
/* Define a **largura** do elemento como 25% da largura da janela de visualização. Isso faz com que o elemento ocupe uma fração da largura da tela. */
height: 5vh;
/* Define a **altura** do elemento como 5% da altura da janela de visualização. Isso faz com que a altura do elemento seja adaptável ao tamanho da tela. */
}
.Pop_up_Config.PainelUser .PainelConteudo .Forme .CampoInsercao {
display: flex;
/* Define o elemento como um **contêiner flexível**, permitindo usar o layout flexbox para organizar os itens dentro dele de maneira flexível. */
align-items: center;
/* Alinha os itens **verticalmente** no centro do contêiner (no eixo transversal). Isso garante que, independentemente das alturas dos itens, todos fiquem centralizados no contêiner. */
justify-content: center;
/* Alinha os itens **horizontalmente** no centro do contêiner (ao longo do eixo principal). Isso garante que os itens sejam centralizados ao longo da linha ou coluna do contêiner flexível. */
flex-direction: column;
/* Define a direção dos itens dentro do contêiner flex como **coluna**. Isso significa que os itens serão organizados **verticalmente** (um embaixo do outro), ao invés de ficarem lado a lado, como é o padrão. */
}
.Pop_up_Config.PainelUser .PainelConteudo .Forme .CampoInsercao select {
width: 25vw;
/* Define a **largura** do elemento como 25% da **largura da janela de visualização** (tela). Isso faz com que o elemento ocupe uma fração da largura da tela, adaptando-se ao tamanho da janela. */
height: 4vh;
/* Define a **altura** do elemento como 4% da **altura da janela de visualização**. Isso significa que a altura do elemento será proporcional à altura da tela, tornando o layout responsivo. */
font-family: var(--font_conteudo);
/* Define a **família de fontes** do texto dentro do elemento usando uma variável CSS personalizada chamada `--font_conteudo`. Essa variável pode ser definida em outro lugar no código, permitindo flexibilidade no uso de fontes. */
font-size: 1vw;
/* Define o **tamanho da fonte** como 1% da **largura da janela de visualização**. Isso torna o tamanho do texto responsivo ao tamanho da tela, adaptando-se conforme a largura da janela. */
color: var(--Cor_Segundaria_5_1);
/* Define a **cor do texto** utilizando uma variável CSS personalizada chamada `--Cor_Segundaria_5_1`. A cor será substituída pela definição da variável em outro lugar no código. */
border-radius: 12vh;
/* Define o **raio de borda** como 12% da **altura da janela de visualização**, criando bordas **muito arredondadas**. Isso torna a borda do elemento extremamente curvada, criando um efeito de bordas quase circulares. */
}
.Pop_up_Config.PainelUser .PainelConteudo .Forme .CampoInsercao_criar button {
width: 25vw;
/* Define a **largura** do elemento como 25% da **largura da janela de visualização** (tela). Isso faz com que o elemento ocupe uma fração da largura da tela, adaptando-se ao tamanho da janela. */
height: 4vh;
/* Define a **altura** do elemento como 4% da **altura da janela de visualização**. Isso significa que a altura do elemento será proporcional à altura da tela, tornando o layout responsivo. */
font-family: var(--font_conteudo);
/* Define a **família de fontes** do texto dentro do elemento usando uma variável CSS personalizada chamada `--font_conteudo`. Essa variável pode ser definida em outro lugar no código, permitindo flexibilidade no uso de fontes. */
font-size: 1vw;
/* Define o **tamanho da fonte** como 1% da **largura da janela de visualização**. Isso torna o tamanho do texto responsivo ao tamanho da tela, adaptando-se conforme a largura da janela. */
color: var(--Cor_Segundaria_5_1);
/* Define a **cor do texto** utilizando uma variável CSS personalizada chamada `--Cor_Segundaria_5_1`. A cor será substituída pela definição da variável em outro lugar no código. */
border-radius: 12vh;
/* Define o **raio de borda** como 12% da **altura da janela de visualização**, criando bordas **muito arredondadas**. Isso torna a borda do elemento extremamente curvada, criando um efeito de bordas quase circulares. */
margin-right: 5vw;
}
.Pop_up_Config.PainelUser .PainelConteudo .Forme .CampoInsercao_criar button:hover {
color: white;
/* Muda a cor do texto */
background-color: var(--Cor_Segundaria_5_1);
/* Muda a cor de fundo */
transition: 1s ease;
/* Transição suave de 1 segundo */
}
.Pop_up_Config.PainelUser .PainelConteudo .Forme .CampoInsercao input {
background: none;
/* Remove o **fundo** do elemento, ou seja, o elemento não terá cor de fundo, imagem ou gradiente. Isso pode ser útil quando você não quer que o fundo do elemento sobrescreva outros estilos. */
outline: none;
/* Remove o **contorno** do elemento, geralmente usado para remover o contorno que aparece quando o elemento recebe foco, como no caso de campos de formulário. */
border: none;
/* Remove qualquer **borda** do elemento, deixando-o sem bordas visíveis. Isso é útil se você não quiser bordas padrão nos elementos. */
font-family: var(--font_conteudo);
/* Define a **família de fontes** do texto dentro do elemento usando uma variável CSS personalizada chamada `--font_conteudo`. A fonte será adaptada de acordo com a variável definida em outro lugar no código. */
border-bottom: 0.2vw solid var(--Cor_Segundaria_5_1);
/* Adiciona uma **borda inferior** ao elemento com espessura de **0.2% da largura da janela** (usando `vw`) e uma cor definida pela variável CSS `--Cor_Segundaria_5_1`. Isso cria uma linha na parte inferior do elemento, normalmente usada para campos de texto ou links. */
color: var(--Cor_Segundaria_5_1);
/* Define a **cor do texto** utilizando a variável CSS personalizada `--Cor_Segundaria_5_1`. O valor real dessa cor será substituído pela variável em outro lugar do código. */
font-size: var(--Matriz);
/* Define o **tamanho da fonte** utilizando uma variável CSS personalizada chamada `--Matriz`. Isso permite que o tamanho da fonte seja ajustado conforme o valor dessa variável em outro lugar do código. */
width: 25vw;
/* Define a **largura** do elemento como 25% da **largura da janela de visualização** (tela), o que faz o elemento se adaptar à largura da tela. */
height: 7vh;
/* Define a **altura** do elemento como 7% da **altura da janela de visualização** (tela), fazendo com que o elemento seja adaptável ao tamanho da tela. */
font-size: 1.8vw;
/* Define o **tamanho da fonte** como 1.8% da **largura da janela de visualização** (tela), tornando o tamanho da fonte responsivo. */
}
.Pop_up_Config.PainelUser .PainelConteudo .Forme .CampoInsercao_criar {
display: flex;
/* Define o elemento como um **contêiner flexível**, permitindo o uso do layout flexbox para organizar os itens dentro dele de maneira flexível e dinâmica. */
align-items: end;
/* Alinha os itens **ao final** do eixo transversal (vertical), ou seja, coloca os itens na **parte inferior** do contêiner se o `flex-direction` for `column`. Caso contrário, no eixo horizontal, eles seriam alinhados à direita. */
justify-content: center;
/* Alinha os itens **ao centro** ao longo do eixo principal (horizontal ou vertical, dependendo de `flex-direction`). No caso de `flex-direction: column`, isso significa que os itens serão centralizados verticalmente no contêiner. */
flex-direction: column;
/* Define que os itens dentro do contêiner flex serão organizados em **coluna**, ou seja, um embaixo do outro. Se fosse `row`, os itens seriam organizados horizontalmente, da esquerda para a direita. */
width: 35vw;
/* Define a **largura** do elemento como 35% da **largura da janela de visualização**. Isso faz com que o elemento ocupe uma parte proporcional da largura da tela, adaptando-se ao tamanho da janela. */
}
.Pop_up_Config.PainelUser .PainelConteudo .Forme .CampoInsercao p {
background: none;
/* Remove qualquer **fundo** do elemento, ou seja, o elemento não terá cor de fundo, imagem ou gradiente. Isso pode ser útil quando você não quer que o fundo do elemento sobrescreva outros estilos. */
outline: none;
/* Remove o **contorno** do elemento, que geralmente aparece quando um campo de formulário ou botão é selecionado ou recebe o foco. Isso pode ser usado para melhorar a aparência visual do elemento, especialmente quando não se deseja um contorno. */
border: none;
/* Remove qualquer **borda** visível do elemento, deixando-o sem bordas. Isso é útil quando você deseja um visual limpo e sem elementos de contorno padrão, como no caso de botões ou campos de texto. */
font-family: var(--font_conteudo);
/* Define a **família de fontes** do texto dentro do elemento utilizando uma variável CSS personalizada chamada `--font_conteudo`. Isso permite alterar facilmente a fonte de todo o projeto, utilizando um valor variável em vez de uma fonte fixa. */
color: var(--Cor_Segundaria_5_1);
/* Define a **cor do texto** utilizando uma variável CSS personalizada chamada `--Cor_Segundaria_5_1`. Isso permite controlar a cor do texto centralmente no projeto, alterando a variável em vez de ajustar cada instância de cor individualmente. */
font-size: var(--Matriz);
/* Define o **tamanho da fonte** utilizando uma variável CSS personalizada chamada `--Matriz`. Assim, o tamanho da fonte será adaptado conforme o valor dessa variável, facilitando ajustes de estilo em todo o projeto. */
font-size: 0.8vw;
/* Define o **tamanho da fonte** como 0.8% da **largura da janela de visualização** (tela). Isso torna o tamanho da fonte **responsivo**, adaptando-se ao tamanho da tela, o que é útil em layouts fluidos e adaptáveis a diferentes dispositivos. */
}
.Pop_up_Config.PainelUser .FormeApresente {
width: 35vw;
height: 40vh;
padding-top: 2vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: start;
align-items: center;
gap: 1vh;
border-top: solid var(--Cor_Segundaria_5_1) 0.6vh;
overflow-y: auto;
}
.Pop_up_Config.PainelUser .FormeApresente .CorpoPainelUser {
width: 26vw;
height: 5vh;
padding-left: 2vw;
padding-right: 2vw;
display: flex;
justify-content: space-between;
align-items: center;
border: 0.1vw solid var(--Cor_Segundaria_5_1);
border-radius: 2vw;
font-family: var(--font_titulo);
color: var(--Cor_Segundaria_5_1);
font-size: 1.2vw;
}
.Pop_up_Config.PainelUser .FormeApresente .CorpoPainelUser img {
width: 4vw;
}
.Pop_up_Config.PainelUser .FormeApresente .CorpoPainelUser button {
background: none;
border: none;
outline: none;
width: 2.5vw;
height: 1.5vw;
background-color: var(--Cor_Segundaria_5_1);
color: var(--Matriz);
font-size: 1.4vw;
border-radius: 2vw;
display: flex;
align-items: center;
justify-content: center;
}
Reference in New Issue View Git Blame Copy Permalink