Commit 511679cc authored by Ignacio Otero's avatar Ignacio Otero
Browse files

Cambios de CSS en FAQ y Auditoria

parent 756c651e
Pipeline #16196 failed with stages
in 6 minutes and 6 seconds
......@@ -144,12 +144,12 @@ body {
}
.container .box:nth-child(4):before,
.container .box:nth-child(4):after {
background: linear-gradient(315deg, #f7405e, #ffb6d8);
background: linear-gradient(315deg, #ee516b, #ee8ab8);
animation: init-diagonal-bottom-up 0.65s ease-in;
}
.container .box:nth-child(5):before,
.container .box:nth-child(5):after {
background: linear-gradient(315deg, #f2d4fc, #8808af);
background: linear-gradient(315deg, #e5bef1, #ad3df8);
animation: init-diagonal-top-down 0.8s ease-in;
}
......@@ -223,12 +223,12 @@ body {
background-clip: text;
}
.container .box:nth-child(4):hover .content h2 {
background: linear-gradient(90deg, #ffb6d8, #f7405e, #ffb6d8);
background: linear-gradient(90deg, #ee8ab8, #ee516b, #ee8ab8);
-webkit-text-fill-color: transparent;
background-clip: text;
}
.container .box:nth-child(5):hover .content h2 {
background: linear-gradient(90deg, #aa22d3, #e2b9f0, #aa22d3);
background: linear-gradient(90deg, #b755f8, #e2b9f0, #b05de7);
-webkit-text-fill-color: transparent;
background-clip: text;
}
......
table {
width: 100%;
}
.resultsTable {
margin-bottom: 20px;
margin-top: 10px;
}
section {
position: relative;
min-height: 100vh;
background: #ccfdff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
transition: 0.5s;
}
section.active {
background: #82cacc;
}
section .color {
position: absolute;
filter: blur(100px);
border-radius: 50%;
transition: 0.3s;
}
section .color:nth-child(1) {
top: -160px;
right: 50px;
width: 450px;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
table {
width: 100%;
}
.resultsTable {
margin-bottom: 20px;
margin-top: 10px;
}
section {
position: relative;
min-height: 1000px;
height: 100vh;
background: #ccfdff;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: 0.5s;
overflow: hidden;
}
section .color {
position: absolute;
border-radius: 10px;
background: linear-gradient(315deg, #e5bef1, #bd68f5);
transform: skewX(-20deg);
transition: 0.75s;
}
section .color:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
border-radius: 8px;
transition: 0.5s;
background: linear-gradient(315deg, #e5bef1, #bd68f5);
filter: blur(20px);
}
section .color:nth-child(1) {
top: -140px;
right: 80px;
width: 150px;
height: 550px;
animation: init-color1 0.5s ease-in;
}
section .color:nth-child(2) {
top: 100px;
left: -20px;
width: 180px;
height: 900px;
animation: init-color2 0.75s ease-in;
}
section .color:nth-child(3) {
bottom: -120px;
left: 180px;
width: 150px;
height: 550px;
animation: init-color3 0.8s ease-in;
}
@keyframes init-color1 {
0% {
top: -290px;
right: 20px;
height: 450px;
background: #78b1c7;
}
section.active .color:nth-child(1) {
background: #baf0f1;
100% {
top: -140px;
right: 80px;
height: 550px;
}
section .color:nth-child(2) {
top: 50px;
left: -150px;
width: 600px;
}
@keyframes init-color2 {
0% {
top: 300px;
left: -50px;
height: 600px;
background: #5fced6;
}
section.active .color:nth-child(2) {
background: #bfebec;
100% {
top: 100px;
left: -20px;
height: 900px;
}
}
@keyframes init-color3 {
0% {
bottom: -195px;
left: 150px;
height: 550px;
}
section .color:nth-child(3) {
100% {
bottom: -120px;
right: 300px;
width: 500px;
height: 500px;
background: #64c4f0;
left: 180px;
height: 550px;
}
}
section .fijo {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #3f51b5;
box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.3);
width: 90vw;
height: 140px;
max-width: 1000px;
top: 90px;
animation: init-title 0.35s ease-in;
}
@keyframes init-title {
0% {
transform: translateX(6vw);
}
100% {
transform: translateX(0);
}
}
section .logs {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #3f51b5;
box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.3);
border-radius: 10px;
width: 80vw;
max-width: 800px;
top: 260px;
transition: 0.5s;
animation: init-list 0.5s ease-in;
}
@keyframes init-list {
0% {
transform: translateY(3vw);
}
section.active .color:nth-child(3) {
background: #ccfdff;
100% {
transform: translateX(0);
}
}
section .fijo .titulo {
width: 100%;
text-align: center;
position: relative;
top: -72px;
}
section .fijo .titulo h1:nth-child(1) {
position: relative;
top: 45px;
left: -120px;
font-size: 80px;
font-weight: 700;
color: rgba(0, 0, 0, 0.4);
background: linear-gradient(315deg, #f4dbfc, #ae5ae6);
-webkit-text-fill-color: transparent;
background-clip: text;
transition: 0.5s;
animation: init-text 0.5s ease-in;
}
@keyframes init-text {
0% {
transform: translateY(-15vw);
}
100% {
transform: translateX(0);
}
}
section .fijo .titulo h1:nth-child(2) {
font-size: 120px;
position: relative;
left: 0px;
font-weight: 900;
letter-spacing: 5px;
color: #ccfdff;
transition: 0.5s;
}
section .vacio {
position: relative;
width: 80%;
top: -10px;
margin-top: 30px;
margin-bottom: 15px;
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
section .vacio h1 {
text-align: center;
font-size: 28px;
font-weight: 450;
letter-spacing: 2px;
}
section .vacio .logsVacio {
color: #c9fdff;
}
@media (max-width: 1435px) {
section .color {
display: none;
}
}
@media (max-width: 850px) {
section .fijo {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #3f51b5;
box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.3);
width: 90vw;
height: 140px;
max-width: 1000px;
top: 90px;
height: 100px;
top: 70px;
}
section .logs {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: #3f51b5;
box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.3);
border-radius: 10px;
width: 80vw;
max-width: 800px;
top: 285px;
transition: 0.6s;
top: 200px;
}
section .fijo .titulo {
width: 100%;
text-align: center;
position: relative;
top: -70px;
top: -50px;
}
section .fijo .titulo h1:nth-child(1) {
position: relative;
top: 40px;
left: -120px;
font-size: 80px;
font-weight: 700;
color: rgba(0, 0, 0, 0.3);
top: 25px;
left: -80px;
font-size: 45px;
}
section .fijo .titulo h1:nth-child(2) {
font-size: 100px;
position: relative;
left: 0px;
font-weight: 900;
letter-spacing: 5px;
color: #ccfdff;
transition: 0.5s;
}
section.active .fijo .titulo h1:nth-child(2) {
color: #82cacc;
font-size: 70px;
}
section .resultadoBusqueda {
position: relative;
width: 100%;
margin-bottom: 5px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
section .resultadoBusqueda h1 {
text-align: center;
font-size: 20px;
font-weight: 420;
letter-spacing: 1px;
}
section .resultadoBusqueda {
color: #ccfdff;
}
section .vacio {
position: relative;
width: 80%;
top: -10px;
margin-top: 30px;
margin-bottom: 15px;
box-sizing: border-box;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
section .vacio h1 {
text-align: center;
font-size: 28px;
font-weight: 450;
letter-spacing: 2px;
}
@media (max-width: 500px) {
section .fijo {
height: 100px;
top: 70px;
}
section .vacio .logsVacio {
color: #c9fdff;
}
@media (max-width: 850px) {
section .fijo .titulo {
top: -54px;
}
section .fijo .titulo h1:nth-child(1) {
top: 21px;
left: -80px;
font-size: 45px;
}
section .fijo .titulo h1:nth-child(2) {
font-size: 58px;
}
section .fijo .botones {
top: -40px;
}
}
@media (max-width: 520px) {
section .fijo .titulo h1:nth-child(1) {
top: 15px;
left: -40px;
font-size: 30px;
}
section .fijo .titulo h1:nth-child(2) {
font-size: 35px;
}
section .fijo .botones {
top: -30px;
}
section .logs {
top: 200px;
}
::ng-deep snack-bar-container.error-snack-bar {
background: #FF5252;
section .fijo .titulo {
top: -51px;
}
::ng-deep .error-snack-bar .mat-simple-snackbar {
color: #ffffff;
section .fijo .titulo h1:nth-child(1) {
top: 18px;
left: 0px;
font-size: 35px;
}
::ng-deep .error-snack-bar .mat-simple-snackbar-action {
color: #ffffff !important;
section .fijo .titulo h1:nth-child(2) {
font-size: 50px;
}
\ No newline at end of file
}
::ng-deep snack-bar-container.error-snack-bar {
background: #ff5252;
}
::ng-deep .error-snack-bar .mat-simple-snackbar {
color: #ffffff;
}
::ng-deep .error-snack-bar .mat-simple-snackbar-action {
color: #ffffff !important;
}
<section>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="fijo">
<div class="titulo">
<h1>AUDITORIA</h1>
<h1>DE CAMBIOS</h1>
<h1>AUDITORIA DE</h1>
<h1>CAMBIOS</h1>
</div>
</div>
<div class="logs" id="log">
......
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
section {
position: relative;
min-height: 100vh;
min-height: 1000px;
height: 100vh;
background: #ccfdff;
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
transition: 0.5s;
overflow: hidden;
}
section .color {
position: absolute;
border-radius: 10px;
background: linear-gradient(315deg, #ee8ab8, #e06277);
transform: skewX(-20deg);
transition: 0.75s;
}
section .color:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
border-radius: 8px;
transition: 0.5s;
background: linear-gradient(315deg, #ee8ab8, #e06277);
filter: blur(20px);
}
section .color:nth-child(1) {
top: -140px;
right: 80px;
width: 150px;
height: 550px;
animation: init-color1 0.5s ease-in;
}
section .color:nth-child(2) {
top: 100px;
left: -20px;
width: 180px;
height: 900px;
animation: init-color2 0.75s ease-in;
}
section .color:nth-child(3) {
bottom: -120px;
left: 180px;
width: 150px;
height: 550px;
animation: init-color3 0.8s ease-in;
}
@keyframes init-color1 {
0% {
top: -290px;
right: 20px;
height: 450px;
}
100% {
top: -140px;
right: 80px;
height: 550px;
}
}
@keyframes init-color2 {
0% {
top: 300px;
left: -50px;
height: 600px;
}
100% {
top: 100px;
left: -20px;
height: 900px;
}
}
@keyframes init-color3 {
0% {
bottom: -195px;
left: 150px;
height: 550px;
}
100% {
bottom: -120px;
left: 180px;
height: 550px;
}
}
section .fijo {
position: absolute;
display: flex;
......@@ -19,26 +102,48 @@ section .fijo {
background: #3f51b5;
box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.3);
width: 90vw;