Skip to content
Snippets Groups Projects
Commit 6cf206a9 authored by Julio Arrieta's avatar Julio Arrieta
Browse files

Mejoras esteticas AltaListaReproduccion

parent cd01d366
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
UyTube_web/web/css/contenido-alta-lista.css 0 → 100644
+ 106
− 0
View file @ 6cf206a9
.principal {
background-color: #f6f6f6;
min-height: 800px;
border-bottom: 2px solid #5aa1e3;
border-top: 2px solid #5aa1e3;
width: 100%; }
.contenido {
background-color: #f6f6f6;
padding: 16px;
margin-left: auto;
margin-right: auto;
width: 1070px;
height: 100%; }
.contenido .contenido-flexible {
background-color: #f6f6f6;
margin-bottom: 16px;
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
flex-grow: 0;
flex-shrink: 0; }
.contenido .contenido-flexible h3 {
width: 100%; }
@media (max-width: 340px) {
.container-fluid {
padding-left: 0px;
padding-right: 0px; }
.contenido {
width: 100%;
padding-left: 2px;
padding-right: 2px; }
.contenido .contenido-flexible {
width: 100%;
justify-content: flex-start; } }
@media (min-width: 341px) and (max-width: 387px) {
.container-fluid {
padding-left: 0px;
padding-right: 0px; }
.contenido {
width: 330px;
padding-left: 2px;
padding-right: 2px; }
.contenido .contenido-flexible {
width: 100%;
justify-content: flex-start; } }
@media (min-width: 388px) and (max-width: 500px) {
.container-fluid {
padding-left: 0px;
padding-right: 0px; }
.contenido {
width: 388px;
padding-left: 2px;
padding-right: 2px; }
.contenido .contenido-flexible {
width: 100%;
justify-content: flex-start; }
.contenido .h3 {
width: 90%; } }
@media (min-width: 501px) and (max-width: 575.98px) {
.container-fluid {
padding-left: 0px;
padding-right: 0px; }
.contenido {
width: 501px; }
.contenido .contenido-flexible {
width: 100%;
justify-content: flex-start; } }
@media (min-width: 576px) and (max-width: 767.98px) {
.container-fluid {
padding-left: 0px;
padding-right: 0px; }
.contenido {
width: 576px; }
.contenido .contenido-flexible {
width: 100%;
justify-content: flex-start; } }
@media (min-width: 768px) and (max-width: 991.98px) {
.container-fluid {
padding-left: 0px;
padding-right: 0px; }
.contenido {
width: 664px; }
.contenido .contenido-flexible {
width: 100%;
justify-content: flex-start; } }
@media (min-width: 992px) {
.container-fluid {
padding-left: 0px;
padding-right: 0px; }
.contenido {
width: 35%; }
.contenido .contenido-flexible {
width: 100%;
justify-content: flex-start; } }
/*# sourceMappingURL=contenido-alta-lista.css.map */
UyTube_web/web/css/contenido-alta-lista.css.map 0 → 100644
+ 7
− 0
View file @ 6cf206a9
{
"version": 3,
"mappings": "AAEA,UAAU;EACN,gBAAgB,ECUH,OAAO;EDTpB,UAAU,EAAE,KAAK;EACjB,aAAa,EAAE,iBAA4B;EAC3C,UAAU,EAAE,iBAA4B;EACxC,KAAK,EAAE,IAAI;;AAEf,UAAU;EACN,gBAAgB,ECGH,OAAO;EDFpB,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,IAAI;EACjB,YAAY,EAAE,IAAI;EAClB,KAAK,EAAE,MAAM;EACb,MAAM,EAAE,IAAI;EACZ,8BAAmB;IACf,gBAAgB,ECJP,OAAO;IDKhB,aAAa,EAAE,IAAI;IACnB,OAAO,EAAE,IAAI;IACb,cAAc,EAAE,GAAG;IACnB,eAAe,EAAE,aAAa;IAC9B,SAAS,EAAE,IAAI;IACf,SAAS,EAAE,CAAC;IACZ,WAAW,EAAE,CAAC;IACd,iCAAE;MACE,KAAK,EAAE,IAAI;;AAIvB,yBAAyB;EACrB,gBAAgB;IACZ,YAAY,EAAE,GAAG;IACjB,aAAa,EAAE,GAAG;;EAGtB,UAAU;IACN,KAAK,EAAE,IAAI;IACX,YAAY,EAAE,GAAG;IACjB,aAAa,EAAE,GAAG;IAClB,8BAAmB;MACf,KAAK,EAAE,IAAI;MACX,eAAe,EAAE,UAAU;AAIvC,gDAAgD;EAC5C,gBAAgB;IACZ,YAAY,EAAE,GAAG;IACjB,aAAa,EAAE,GAAG;;EAGtB,UAAU;IACN,KAAK,EAAE,KAAK;IACZ,YAAY,EAAE,GAAG;IACjB,aAAa,EAAE,GAAG;IAClB,8BAAmB;MACf,KAAK,EAAE,IAAI;MACX,eAAe,EAAE,UAAU;AAKvC,gDAAgD;EAC5C,gBAAgB;IACZ,YAAY,EAAE,GAAG;IACjB,aAAa,EAAE,GAAG;;EAGtB,UAAU;IACN,KAAK,EAAE,KAAK;IACZ,YAAY,EAAE,GAAG;IACjB,aAAa,EAAE,GAAG;IAClB,8BAAmB;MACf,KAAK,EAAE,IAAI;MACX,eAAe,EAAE,UAAU;IAE/B,cAAG;MACC,KAAK,EAAE,GAAG;AAItB,mDAAmD;EAC/C,gBAAgB;IACZ,YAAY,EAAE,GAAG;IACjB,aAAa,EAAE,GAAG;;EAGtB,UAAU;IACN,KAAK,EAAE,KAAK;IACZ,8BAAmB;MACf,KAAK,EAAE,IAAI;MACX,eAAe,EAAE,UAAU;AAIvC,mDAAmD;EAC/C,gBAAgB;IACZ,YAAY,EAAE,GAAG;IACjB,aAAa,EAAE,GAAG;;EAGtB,UAAU;IACN,KAAK,EAAE,KAAK;IACZ,8BAAmB;MACf,KAAK,EAAE,IAAI;MACX,eAAe,EAAE,UAAU;AAIvC,mDAAmD;EAC/C,gBAAgB;IACZ,YAAY,EAAE,GAAG;IACjB,aAAa,EAAE,GAAG;;EAGtB,UAAU;IACN,KAAK,EAAE,KAAK;IACZ,8BAAmB;MACf,KAAK,EAAE,IAAI;MACX,eAAe,EAAE,UAAU;AAIvC,yBAAyB;EACrB,gBAAgB;IACZ,YAAY,EAAE,GAAG;IACjB,aAAa,EAAE,GAAG;;EAEtB,UAAU;IACN,KAAK,EAAE,GAAG;IACV,8BAAmB;MACf,KAAK,EAAE,IAAI;MACX,eAAe,EAAE,UAAU",
"sources": ["contenido-alta-lista.sass","_colores.sass"],
"names": [],
"file": "contenido-alta-lista.css"
}
\ No newline at end of file
UyTube_web/web/css/contenido-alta-lista.sass 0 → 100644
+ 139
− 0
View file @ 6cf206a9
@import _colores
.principal
background-color: $colorGrisClaro
min-height: 800px
border-bottom: 2px solid $colorCelesteClaro
border-top: 2px solid $colorCelesteClaro
width: 100%
.contenido
background-color: $colorGrisClaro
padding: 16px
margin-left: auto
margin-right: auto
width: 1070px
height: 100%
.contenido-flexible
background-color: $colorGrisClaro
margin-bottom: 16px
display: flex
flex-direction: row
justify-content: space-between
flex-wrap: wrap
flex-grow: 0
flex-shrink: 0
h3
width: 100%
// Para un maximo de 340px ================================================================================
@media (max-width: 340px)
.container-fluid
padding-left: 0px
padding-right: 0px
//estilos del contenido principal
.contenido
width: 100%
padding-left: 2px
padding-right: 2px
.contenido-flexible
width: 100%
justify-content: flex-start
// Para dispositivos mayores a 340 y menores a 388 ==============================================================
@media (min-width: 341px) and (max-width: 387px)
.container-fluid
padding-left: 0px
padding-right: 0px
//estilos del contenido principal
.contenido
width: 330px
padding-left: 2px
padding-right: 2px
.contenido-flexible
width: 100%
justify-content: flex-start
// Para dispositivos mayores a 387 y menores a 500 ================================================================
@media (min-width: 388px) and (max-width: 500px)
.container-fluid
padding-left: 0px
padding-right: 0px
//estilos del contenido principal
.contenido
width: 388px
padding-left: 2px
padding-right: 2px
.contenido-flexible
width: 100%
justify-content: flex-start
.h3
width: 90%
// Extra small devices (portrait phones, less than 576px) =======================================================
@media (min-width: 501px) and (max-width: 575.98px)
.container-fluid
padding-left: 0px
padding-right: 0px
//Estilos del contenido principal
.contenido
width: 501px
.contenido-flexible
width: 100%
justify-content: flex-start
// Small devices (landscape phones, 576px and up) ================================================================
@media (min-width: 576px) and (max-width: 767.98px)
.container-fluid
padding-left: 0px
padding-right: 0px
//Estilos del contenido principal
.contenido
width: 576px
.contenido-flexible
width: 100%
justify-content: flex-start
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px)
.container-fluid
padding-left: 0px
padding-right: 0px
//Estilos del contenido principal
.contenido
width: 664px
.contenido-flexible
width: 100%
justify-content: flex-start
// Large devices (desktops, 992px and up) =======================================================================
@media (min-width: 992px)
.container-fluid
padding-left: 0px
padding-right: 0px
//Estilos del contenido principal
.contenido
width: 35%
.contenido-flexible
width: 100%
justify-content: flex-start
\ No newline at end of file
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment