181 lines
3.2 KiB
CSS
181 lines
3.2 KiB
CSS
body {
|
|
font-family: "Montserrat", sans-serif;
|
|
/*height: 100vh;*/
|
|
height: 100%;
|
|
width: 98%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
|
|
/* INICIO DE NAVBAR */
|
|
|
|
.navbar {
|
|
background-color: #691C32;
|
|
font-weight: bold;
|
|
padding-left: 1em;
|
|
}
|
|
|
|
.navbar li:hover {
|
|
text-underline-offset: 5px;
|
|
text-decoration: underline overline;
|
|
color: white;
|
|
}
|
|
|
|
.custom-toggler .navbar-toggler-icon {
|
|
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(255,255,255)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
.custom-toggler.navbar-toggler {
|
|
border-color: rgb(255, 255, 255);
|
|
}
|
|
|
|
|
|
/* FIN DE NAVBAR */
|
|
|
|
|
|
/* INICIO HEADER LOGOS LAYOUT */
|
|
|
|
#topLogoContainer {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
grid-template-rows: repeat(2, auto);
|
|
column-gap: 5px;
|
|
background-color: #691c32;
|
|
padding-top: 10px;
|
|
}
|
|
|
|
.lc {
|
|
grid-row-start: 1;
|
|
grid-row-end: 3;
|
|
grid-column-start: 1;
|
|
grid-column-end: 3;
|
|
justify-self: flex-start;
|
|
margin-left: 2.5%;
|
|
}
|
|
|
|
.lai {
|
|
grid-row-start: 1;
|
|
grid-row-end: 3;
|
|
grid-column-start: 3;
|
|
grid-column-end: 5;
|
|
justify-self: flex-end;
|
|
margin-right: 2.5%;
|
|
}
|
|
|
|
#topLogoContainer>img {
|
|
max-height: 60px;
|
|
}
|
|
|
|
|
|
/* FIN HEADER LOGOS LAYOUT */
|
|
|
|
|
|
/* INICIO DE NOTIFICACIONES CSS */
|
|
|
|
#notification-area {
|
|
padding-left: 10px;
|
|
position: fixed;
|
|
top: 0px;
|
|
right: 10px;
|
|
width: 350px;
|
|
height: 0vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* flex-direction: row; */
|
|
/* justify-content: flex-end; */
|
|
justify-content: first baseline;
|
|
}
|
|
|
|
#notification-area .notification {
|
|
position: relative;
|
|
padding: 15px 10px;
|
|
background: #111;
|
|
color: #f5f5f5;
|
|
font-family: "Montserrat";
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
border-radius: 5px;
|
|
margin: 5px 0px;
|
|
opacity: 0;
|
|
left: 20px;
|
|
animation: showNotification 500ms ease-in-out forwards;
|
|
}
|
|
|
|
.notification {
|
|
border: 5px solid black;
|
|
}
|
|
|
|
@keyframes showNotification {
|
|
to {
|
|
opacity: 1;
|
|
left: 0px;
|
|
}
|
|
}
|
|
|
|
#notification-area .notification.warning {
|
|
background: #9f2241;
|
|
}
|
|
|
|
#notification-area .notification.success {
|
|
background: #235b4e;
|
|
}
|
|
|
|
#notification-area .notification.error {
|
|
background: orangered;
|
|
}
|
|
|
|
#notification-area .notification.info {
|
|
background: #fb8500;
|
|
color: #343a40;
|
|
}
|
|
|
|
|
|
/* FIN DE NOTIFICACIONES CSS */
|
|
|
|
|
|
/* TABLET y PC */
|
|
|
|
|
|
/*
|
|
@media screen and (min-width:0px) and (max-width:768px) {
|
|
body {
|
|
color: red;
|
|
}
|
|
/*
|
|
.lgid,
|
|
.lpass {
|
|
justify-self: flex-start;
|
|
align-self: flex-end;
|
|
}
|
|
.igid,
|
|
.ipass {
|
|
align-self: flex-start;
|
|
}
|
|
*/
|
|
|
|
|
|
/*}*/
|
|
|
|
|
|
/*CELULAR (MOVIL)*/
|
|
|
|
@media screen and (min-width: 0px) and (max-width:720px) {
|
|
.lc {
|
|
grid-row-start: 1;
|
|
grid-row-end: 2;
|
|
grid-column-start: 1;
|
|
grid-column-end: 5;
|
|
justify-self: center;
|
|
}
|
|
.lai {
|
|
grid-row-start: 2;
|
|
grid-row-end: 3;
|
|
grid-column-start: 1;
|
|
grid-column-end: 5;
|
|
justify-self: center;
|
|
}
|
|
#topLogoContainer>img {
|
|
max-width: 100%;
|
|
}
|
|
} |