From f7052c4573fa264ccafc037edd38728bfdca6082 Mon Sep 17 00:00:00 2001 From: h4ckypurpl3 Date: Tue, 5 May 2020 10:38:14 -0500 Subject: [PATCH] organizando el entorno para mejorar el panel consulta relacionando con el issue #38 Mejorar usabilidad paner consulta --- css/carousel.css | 161 +++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 142 insertions(+), 19 deletions(-) diff --git a/css/carousel.css b/css/carousel.css index 3e02cca..470011d 100644 --- a/css/carousel.css +++ b/css/carousel.css @@ -1,27 +1,150 @@ -/* GLOBAL STYLES +/*HOJA DE ESTILOS complementaria para sacar los estilos del archivo PHP y centralizarlos +Se propone usar esta hoja de estilos existentes asociado previamente a Portal.php para no crear una hoja +de estilos css adicional, pero se propone la posibilidad de crear y migrar a una hoja de estilos ejmplo: +*/ +body { + background: url("") no-repeat center center fixed; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + color: gray; + background-color: black; +} + +.alert-info { + color: #341208; + border-color: #341208; + background-image: url(""); +} + +.jumbotron { + /* background-image: url("milfs/images/secure/?file=full/"); */ + background-size: cover; + background-position: center; + /* text-shadow: 1px 1px 1px rgba(255,255,255,0.8) ; */ + background-color: black; +} + +.navbar-header>p { + font-size: 20px; + color: white; + font-family: "Open Sans", sans-serif; + font-weight: normal; + display: inline +} + +.navbar-header>strong { + font-size: 20px; + color: #802a2a; + font-weight: normal; + font-family: "Open Sans", sans-serif; + ; + display: inline +} + +.navbar-header { + width: 50%; +} + +.div_aplicacion { + background-color: #f0eee1 !important; +} + +.div_aplicacion:hover { + -webkit-animation: animatedBackground 1s ease-out 1; + -moz-animation: animatedBackground 1s ease-out 1; + animation: animatedBackground 1s ease-out 1; + -webkit-animation-fill-mode: forwards; + animation-fill-mode: forwards; + z-index: 10000; +} + +#muestraInfo>modal-body { + background-color: red; +} + +@-webkit-keyframes animatedBackground { + 0% { + -webkit-transform: scale(1, 1); + -moz-transform: scale(1, 1); + -ms-transform: scale(1, 1); + -o-transform: scale(1, 1); + transform: scale(1, 1) + } + + 100% { + -webkit-transform: scale(1.1, 1.1); + -moz-transform: scale(1.1, 1.1); + -ms-transform: scale(1.1, 1.1); + -o-transform: scale(1.1, 1.1); + transform: scale(1.1, 1.1) + } +} + +@-moz-keyframes animatedBackground { + 0% { + -webkit-transform: scale(1, 1); + -moz-transform: scale(1, 1); + -ms-transform: scale(1, 1); + -o-transform: scale(1, 1); + transform: scale(1, 1) + } + + 100% { + -webkit-transform: scale(1.1, 1.1); + -moz-transform: scale(1.1, 1.1); + -ms-transform: scale(1.1, 1.1); + -o-transform: scale(1.1, 1.1); + transform: scale(1.1, 1.1) + } +} + +@keyframes animatedBackground { + 0% { + -webkit-transform: scale(1, 1); + -moz-transform: scale(1, 1); + -ms-transform: scale(1, 1); + -o-transform: scale(1, 1); + transform: scale(1, 1) + } + + 100% { + -webkit-transform: scale(1.1, 1.1); + -moz-transform: scale(1.1, 1.1); + -ms-transform: scale(1.1, 1.1); + -o-transform: scale(1.1, 1.1); + transform: scale(1.1, 1.1) + } +} + +.pie { + position: fixed; z-index: 10000; +bottom: 0; +width: 100%; +/* Set the fixed height of the footer here */ +height: 50px; +background-color: white; +background-image: url('milfs/images/menosmicos/background.jpg'); + + +/* GLOBAL STYLES FOR CAROUSEL -------------------------------------------------- */ /* Padding below the footer and lighter body text */ - - /* CUSTOMIZE THE NAVBAR -------------------------------------------------- */ - /* Special class on .container surrounding .navbar, used for positioning it into place. */ - - - /* CUSTOMIZE THE CAROUSEL -------------------------------------------------- */ - /* Carousel base class */ .carousel { height: 500px; margin-bottom: 60px; } + /* Since positioning the image, we need to help out the caption */ .carousel-caption { z-index: 10; - } /* Declare heights because of positioning of img element */ @@ -29,37 +152,36 @@ height: 500px; background-color: black; } -.carousel-inner > .item > img { + +.carousel-inner>.item>img { position: absolute; top: 0; margin-left: auto; - height: 500px; } - /* MARKETING CONTENT -------------------------------------------------- */ - /* Center align the text within the three columns below the carousel */ .marketing .col-lg-4 { margin-bottom: 20px; text-align: center; } + .marketing h2 { font-weight: normal; } + .marketing .col-lg-4 p { margin-right: 10px; margin-left: 10px; } - /* Featurettes ------------------------- */ - .featurette-divider { - margin: 80px 0; /* Space out the Bootstrap
more */ + margin: 80px 0; + /* Space out the Bootstrap
more */ } /* Thin out the marketing headings */ @@ -69,19 +191,20 @@ letter-spacing: -1px; } - /* RESPONSIVE CSS -------------------------------------------------- */ - @media (min-width: 768px) { + /* Navbar positioning foo */ .navbar-wrapper { margin-top: 20px; } + .navbar-wrapper .container { padding-right: 15px; padding-left: 15px; } + .navbar-wrapper .navbar { padding-right: 0; padding-left: 0; @@ -108,4 +231,4 @@ .featurette-heading { margin-top: 120px; } -} \ No newline at end of file +}