549 lines
9.3 KiB
CSS
549 lines
9.3 KiB
CSS
/* INICIO CONTENEDOR DE FORMULARIO */
|
|
|
|
#containerIndicadores {
|
|
font-size: 14.5px;
|
|
}
|
|
|
|
|
|
/* FIN CONTENEDOR DE FORMULARIO */
|
|
|
|
|
|
/* inicio sección btns */
|
|
|
|
#layoutContainer {
|
|
width: 95%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
#btnsreportes {
|
|
text-align: center;
|
|
margin-bottom: 2%;
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
column-gap: 2%;
|
|
}
|
|
|
|
#btnsreportes button>a:link {
|
|
text-decoration: none;
|
|
}
|
|
|
|
|
|
/* fin sección btns */
|
|
|
|
h4 {
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
/* inicio encabezado */
|
|
|
|
|
|
/* INICIO | Fecha Doc. | Código GID | No. Indicadores */
|
|
|
|
#first_row {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, auto);
|
|
align-items: center;
|
|
justify-items: center;
|
|
}
|
|
|
|
|
|
/* FIN */
|
|
|
|
|
|
/* INICIO | Aldea Inteligente | Sitio */
|
|
|
|
#second_row {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, auto);
|
|
align-items: center;
|
|
justify-items: center;
|
|
}
|
|
|
|
|
|
/* FIN */
|
|
|
|
|
|
/* INICIO | Estado | Municipio | Localidad */
|
|
|
|
#third_row {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, auto);
|
|
justify-items: center;
|
|
align-items: center;
|
|
}
|
|
|
|
|
|
/* FIN */
|
|
|
|
#fourth_row {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, auto);
|
|
justify-items: center;
|
|
align-items: center;
|
|
}
|
|
|
|
#fourth_row>input {
|
|
text-align: center;
|
|
}
|
|
|
|
.lTrim {
|
|
justify-self: flex-end;
|
|
}
|
|
|
|
.lInicio {
|
|
justify-self: flex-end;
|
|
}
|
|
|
|
#inicioTrim {
|
|
justify-self: flex-start;
|
|
}
|
|
|
|
.lTermino {
|
|
justify-self: flex-end;
|
|
}
|
|
|
|
#finTrim {
|
|
justify-self: flex-start;
|
|
}
|
|
|
|
|
|
/* FIN ENCABEZADO */
|
|
|
|
|
|
/* INICIO SECCIÓN DE INDICADORES */
|
|
|
|
|
|
/* Dentro de .contenedor almacenan cada uno de los indicadores */
|
|
|
|
.contenedor {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
|
|
/* INICIO | Indicador 1, 2, 3... */
|
|
|
|
.headerIndicador {
|
|
width: 95%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
border-radius: 5px;
|
|
display: grid;
|
|
align-items: center;
|
|
justify-items: center;
|
|
background-color: #691c32;
|
|
color: white;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.headerIndicador>h6 {
|
|
font-weight: bold;
|
|
margin: 5px;
|
|
}
|
|
|
|
|
|
/* FIN */
|
|
|
|
|
|
/* INICIO | Nombre Indicador | Definición | Meta | ODS Impactados | ( y sus variables)*/
|
|
|
|
.datosGlobalesIndicador {
|
|
width: 95%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
display: grid;
|
|
row-gap: 4px;
|
|
grid-template-columns: auto auto;
|
|
column-gap: 5px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.datosGlobalesIndicador p {
|
|
text-align: justify;
|
|
text-justify: inter-word;
|
|
}
|
|
|
|
.lNombreIndicador,
|
|
.lDefinicion,
|
|
.lMeta,
|
|
.lODS {
|
|
justify-self: flex-end;
|
|
}
|
|
|
|
|
|
/* FIN */
|
|
|
|
|
|
/* INICIO | Dimensión a medir | Unidad de medida | Tipo de reporte | Tipo de meta */
|
|
|
|
.dimensionAmedir {
|
|
width: 95%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
|
|
.cajasDAM {
|
|
display: grid;
|
|
border: 1px dotted gray;
|
|
}
|
|
|
|
.cajaItem1 {
|
|
justify-self: center;
|
|
}
|
|
|
|
.cajaItem2 {
|
|
justify-self: center;
|
|
}
|
|
|
|
|
|
/* FIN */
|
|
|
|
|
|
/* INICIO Datos para el cálculo | var a | var b */
|
|
|
|
.datosCalculo {
|
|
margin-top: 8px;
|
|
margin-bottom: 8px;
|
|
width: 95%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.datosCalculo input {
|
|
margin-left: 5%;
|
|
text-align: center;
|
|
}
|
|
|
|
.varCalculo {
|
|
display: grid;
|
|
grid-template-columns: 15% auto;
|
|
row-gap: 3px;
|
|
}
|
|
|
|
.varCalculo input {
|
|
justify-self: flex-end;
|
|
align-self: center;
|
|
}
|
|
|
|
.varCalculo span {
|
|
padding-left: 5px;
|
|
align-self: center;
|
|
}
|
|
|
|
.titleDatosCalc {
|
|
font-size: medium;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
/* FIN */
|
|
|
|
|
|
/* INICIO | SEMÁFORO | TABLA SEMAFORIZACIÓN */
|
|
|
|
.semaforo {
|
|
width: 95%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
display: grid;
|
|
grid-template-columns: auto auto;
|
|
align-items: center;
|
|
}
|
|
|
|
.circle {
|
|
border: 3px solid black;
|
|
height: 125px;
|
|
width: 125px;
|
|
border-radius: 50%;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
display: grid;
|
|
align-items: center;
|
|
justify-self: flex-end;
|
|
margin-right: 30%;
|
|
}
|
|
|
|
.semaforo table {
|
|
margin-left: 30%;
|
|
}
|
|
|
|
table,
|
|
th,
|
|
td {
|
|
border: 1px solid black;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
text-align: center;
|
|
padding: 2px;
|
|
}
|
|
|
|
.thMain {
|
|
background-color: #111;
|
|
color: white;
|
|
}
|
|
|
|
|
|
/* FIN */
|
|
|
|
|
|
/* INICIO | OBSERVACIONES | INFORMACIÓN DE SOPORTE QUE SE ANEXARA */
|
|
|
|
textarea {
|
|
display: block;
|
|
width: 95%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
border-radius: 5px;
|
|
resize: none;
|
|
border: 1px solid black;
|
|
padding: 10px;
|
|
text-align: justify;
|
|
white-space: normal;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
|
|
/* FIN */
|
|
|
|
|
|
/* INICIO | Firma representante AI | Firma representante CSICT */
|
|
|
|
#firmas {
|
|
width: 95%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
justify-items: center;
|
|
text-align: center;
|
|
padding-top: 15px;
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
#firmas>div {
|
|
width: 98%;
|
|
}
|
|
|
|
|
|
/* FIN */
|
|
|
|
|
|
/* leyenda proyecto aldeas inteligentes */
|
|
|
|
#leyendaProyecto {
|
|
margin-top: 25px;
|
|
text-align: center;
|
|
width: 95%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
#leyenda {
|
|
text-align: justify;
|
|
}
|
|
|
|
|
|
/* fin sección indicadores */
|
|
|
|
|
|
/* INICIO grilla de links */
|
|
|
|
.link_container {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
justify-items: center;
|
|
}
|
|
|
|
|
|
/* FIN */
|
|
|
|
|
|
/* inicio de grid imágenes */
|
|
|
|
#myGallery {
|
|
display: grid;
|
|
grid-template-columns: repeat(9, 1fr);
|
|
width: 90%;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
#myGallery img {
|
|
max-width: 100%;
|
|
}
|
|
|
|
|
|
/* fin de grid imágenes */
|
|
|
|
|
|
/* CELULAR - MOVIL */
|
|
|
|
@media screen and (min-width: 0px) and (max-width:720px) {
|
|
#btnsreportes {
|
|
grid-template-rows: repeat(3, 1fr);
|
|
row-gap: 2px;
|
|
grid-template-areas: "btnLimpiar btnLimpiar btnLimpiar" "btnCambiarGid btnCambiarGid btnCambiarGid" "btnPrint btnPrint btnPrint";
|
|
}
|
|
#btnLimpiar {
|
|
grid-area: btnLimpiar;
|
|
}
|
|
#btnCambiarGid {
|
|
grid-area: btnCambiarGid;
|
|
}
|
|
#btnPrint {
|
|
grid-area: btnPrint;
|
|
}
|
|
/* INICIO | Fecha Doc. | Código GID | No. Indicadores */
|
|
#first_row {
|
|
grid-template-columns: 1fr;
|
|
justify-items: flex-start;
|
|
row-gap: 2px;
|
|
}
|
|
/* FIN*/
|
|
/* INICIO | Aldea Inteligente| Sitio */
|
|
#second_row {
|
|
grid-template-columns: 1fr;
|
|
justify-items: flex-start;
|
|
}
|
|
/* FIN*/
|
|
/* INICIO | Estado | Municipio | Localidad */
|
|
#third_row {
|
|
grid-template-columns: 1fr;
|
|
justify-items: flex-start;
|
|
}
|
|
/* FIN */
|
|
/* INICIO | Trimestre | Inicio | Inp. Inicio | Término | Inp. Término */
|
|
#fourth_row {
|
|
grid-template-columns: repeat(3, auto);
|
|
grid-template-rows: repeat(2, 1fr);
|
|
row-gap: 3px;
|
|
grid-template-areas: "lTrim lInicio InputInicio" "lTrim lTermino InputFin";
|
|
}
|
|
.lTrim {
|
|
grid-area: lTrim;
|
|
}
|
|
.lInicio {
|
|
grid-area: lInicio;
|
|
}
|
|
#inicioTrim {
|
|
grid-area: InputInicio;
|
|
}
|
|
.lTermino {
|
|
grid-area: lTermino;
|
|
}
|
|
#finTrim {
|
|
grid-area: InputFin;
|
|
}
|
|
/* FIN */
|
|
/* INICIO | Nombre Indicador | Definición | Meta | ODS Impactadis */
|
|
.datosGlobalesIndicador {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.lNombreIndicador,
|
|
.lDefinicion,
|
|
.lMeta,
|
|
.lODS {
|
|
justify-self: flex-start;
|
|
}
|
|
/* FIN */
|
|
/* INICIO | Dimsensión a medir | Unidad de medida | Tipo de reporte | Tipo de meta */
|
|
.dimensionAmedir {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
/* FIN */
|
|
/* INICIO Datos para el cálculo | var a | var b */
|
|
.varCalculo {
|
|
grid-template-columns: 1fr;
|
|
grid-template-areas: "varA" "inputVarA" "varB" "inputVarB";
|
|
}
|
|
.inputVarA {
|
|
grid-area: inputVarA;
|
|
}
|
|
.inputVarB {
|
|
grid-area: inputVarB;
|
|
}
|
|
.varA {
|
|
grid-area: varA;
|
|
}
|
|
.varB {
|
|
grid-area: varB;
|
|
margin-top: 8px;
|
|
}
|
|
.varCalculo input {
|
|
justify-self: flex-start;
|
|
margin-left: 0px;
|
|
padding-left: 0px;
|
|
}
|
|
/* FIN */
|
|
/* INICIO | SEMÁFORO | TABLA SEMAFORIZACIÓN */
|
|
.circle {
|
|
justify-self: center;
|
|
margin-right: 0%;
|
|
}
|
|
.semaforo table {
|
|
justify-self: center;
|
|
margin-left: 0%;
|
|
}
|
|
/* FIN */
|
|
/* INICIO | Firmas |*/
|
|
#firmas {
|
|
grid-template-columns: 1fr;
|
|
row-gap: 10px;
|
|
}
|
|
/* FIN */
|
|
/* INICIO GRID GALLERIA IMGS ODS*/
|
|
#myGallery {
|
|
grid-template-columns: repeat(6, 1fr);
|
|
}
|
|
/* FIN */
|
|
/* INICIO LINK CONTAINER */
|
|
.link_container {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
/* FIN */
|
|
}
|
|
|
|
|
|
/*inicio elementos a ocultar en la impresión del documento*/
|
|
|
|
|
|
/*help: https://stackoverflow.com/questions/21485581/css-hide-placeholder-on-print*/
|
|
|
|
@media print {
|
|
/*inicio ocultar navbar, sección de botones de reportes, leyenda y el aŕea de notificaciones*/
|
|
.navbar,
|
|
#btnsreportes,
|
|
.leyenda,
|
|
#notification-area>*,
|
|
.link_container {
|
|
display: none;
|
|
}
|
|
/* fin */
|
|
::-webkit-input-placeholder {
|
|
/* WebKit browsers */
|
|
color: transparent;
|
|
}
|
|
:-moz-placeholder {
|
|
/* Mozilla Firefox 4 to 18 */
|
|
color: transparent;
|
|
}
|
|
::-moz-placeholder {
|
|
/* Mozilla Firefox 19+ */
|
|
color: transparent;
|
|
}
|
|
:-ms-input-placeholder {
|
|
/* Internet Explorer 10+ */
|
|
color: transparent;
|
|
}
|
|
}
|
|
|
|
|
|
/* fin */ |