testes/Css/page/Ambiente/Home/Iten_chamados.css

243 lines
6.1 KiB
CSS

.Capitulo_1 .linha_1 .Corpo .MensangemERRO {
animation: SurgimentoDias 1s ease;
}
.CorpoPainelChamado {
width: 85%;
height: 5vh;
border-radius: 1.5vw;
padding-right: 1.5vw;
padding-left: 1.5vw;
gap: 1vw;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-color: var(--Cor_Segundaria_5_1);
color: var(--Matriz);
font-family: var(--font_titulo);
font-size: 1vw;
transform: scale(1);
transition: 1s ease;
animation: SurgimentoDias 1s ease;
}
.CorpoPainelChamado:hover {
background-color: var(--Cor_Segundaria_5_2);
transform: scale(0.9);
transition: 1s ease;
}
.Capitulo_1 .linha_1 .Corpo .IconChamado {
width: 0.5vw;
height: 0.5vw;
border-radius: 100%;
}
.Capitulo_1 .linha_1 .Corpo .CodeChamado {
overflow: hidden;
}
.Capitulo_1 .linha_1 .Corpo .TituloChamado {
flex-wrap: nowrap;
overflow: hidden;
}
/*Estilos do Pop*/
.PopUpHome.Chamado {
/* Define bordas arredondadas com 2% da largura da viewport (tela) */
border-radius: 2vw;
/* Define a altura do elemento como 40% da altura da viewport (tela) */
height: 60vh;
/* Inicialmente, o elemento não será exibido na página */
display: none;
/* A posição do elemento será absoluta em relação ao contêiner pai posicionado */
position: absolute;
/* Define a distância entre a parte superior do elemento e o topo da viewport (10% da altura da tela) */
top: 10vh;
/* Define a distância entre a parte esquerda do elemento e o lado esquerdo da viewport (60% da largura da tela) */
left: 60vh;
/* Define a distância entre a parte direita do elemento e o lado direito da viewport (60% da largura da tela) */
right: 60vh;
/* Define uma borda de 0.3% da largura da viewport, com a cor definida por uma variável CSS */
border: 0.3vw solid var(--Cor_Segundaria_5_1);
/* Define a cor de fundo do elemento como um tom muito claro de cinza (quase branco) */
background-color: rgb(250, 250, 250);
/* Define a direção do layout flexível para coluna (elementos dentro do container serão empilhados verticalmente) */
flex-direction: column;
/* Define que o display do elemento será flexível, permitindo o uso de propriedades flexbox */
display: flex;
}
.PopUpHome.Chamado .PainelConteudo {
color: var(--Cor_Segundaria_5_1);
/*muda a cor do painel */
height: 65%;
/*muda o tamanho do painel*/
display: flex;
/*o display utilizado*/
font-family: var(--font_titulo);
/*a fonte usada */
flex-direction: column;
/*muda a direção do objeto*/
justify-content: start;
/*alinha onde fica o objeto*/
align-items: center;
/*alinha onde fica o objeto*/
font-size: 1.2vw;
}
.PopUpHome.Chamado .PainelConteudo h2 {
text-align: center;
}
.PopUpHome.Chamado .PainelFechar {
height: 15%;
/* Define a altura do elemento como 15% da altura do elemento pai */
/* Ativa o modelo de layout flexbox para o elemento */
display: flex;
/* Alinha os itens no eixo principal (horizontal, por padrão) no centro */
justify-content: center;
/* Organiza os itens na direção da coluna (vertical) */
flex-direction: row;
/* Alinha os itens no início do eixo transversal (o eixo vertical, no caso de flex-direction: column) */
align-items: center;
}
.PopUpHome.Chamado .PainelFechar button {
border-radius: 2vh;
/* Isso dá ao botão bordas arredondadas */
color: var(--Cor_Segundaria_5_1);
/* Define a cor do texto do botão como um tom de branco suave (#fffefe) */
font-family: var(--font_titulo);
/* Define a fonte do texto como Arial */
/* Define a borda do botão com uma espessura de 0.1vw e cor branca (#ffffff) */
border: 0.1vw solid #ffffff;
/* Adiciona uma transição suave de 1 segundo para mudanças de estilo, como cor e tamanho */
transition: 1s ease;
width: 2vw;
/* Define a largura do botão como 1.5% da largura da viewport (tela) */
height: 4.5vh;
/* Define a altura do botão como 1.5% da largura da viewport (tela) */
/* Alinha o conteúdo do botão (texto ou elementos) no centro, horizontalmente */
display: flex;
font-size: 1.2vw;
/* Alinha o conteúdo do botão (texto ou elementos) no centro, verticalmente */
}
.PopUpHome.Chamado .PainelFechar button:hover {
color: #D9D9D9;
/*muda a cor do button */
background-color: var(--Cor_Segundaria_5_1);
/*muda a cor do fundo */
transition: 1s ease;
/*cria a transição */
}
.PopUpHome.Chamado .PainelEstado {
font-size: 0.8vw;
font-family: var(--font_titulo);
/* Define a fonte do texto com a variável --font_titulo */
width: 90%;
height: 20%;
/* Define a altura do elemento como 20% da altura do elemento pai */
color: var(--Cor_Segundaria_5_1);
/* Define a cor do texto com a variável --Cor_Segundaria_5_1 */
/* Altera a cor de fundo ou a cor do painel usando a variável --Cor_Segundaria_5_1 */
display: flex;
/* Torna o elemento um contêiner flexível (flexbox) */
flex-direction: column;
/* Organiza os itens no contêiner de forma vertical (coluna) */
align-items: center;
/* Alinha os itens no final do eixo transversal (vertical, no caso de flex-direction: column) */
justify-content: center;
/* Alinha os itens no centro do eixo principal (horizontal, por padrão) */
/* Aplica uma margem à direita de 0.9% da largura da tela (viewport) */
margin-top: 1vw;
}
.PopUpHome.Chamado .Direcionamento {
width: 100%;
height: 10vh;
display: flex;
justify-content: space-around;
align-items: center;
}
.PopUpHome.Chamado .Direcionamento a {
text-decoration: none;
color: var(--Cor_Segundaria_5_1);
padding: 0.8vw;
border-radius: 20vw;
border: 0.2vw solid var(--Cor_Segundaria_5_1);
font-size: 1.2vw;
font-family: var(--font_titulo);
transition: 1s ease;
}
.PopUpHome.Chamado .Direcionamento a:hover {
background-color: var(--Cor_Segundaria_5_1);
color: var(--Matriz);
transition: 1s ease;
}