ajuste css

Implementación Html Manuel
Sin ultimos ajustes solicitados.
parent f6cc8102
...@@ -16,54 +16,54 @@ article, aside, canvas, details, embed, ...@@ -16,54 +16,54 @@ article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, menu, nav, output, ruby, section, summary,
time, mark, audio, video { time, mark, audio, video {
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;
font-size: 100%; font-size: 100%;
font: inherit; font: inherit;
vertical-align: baseline; vertical-align: baseline;
} }
/* HTML5 display-role reset for older browsers */ /* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { footer, header, hgroup, menu, nav, section {
display: block; display: block;
} }
body { body {
line-height: 1; line-height: 1;
} }
ol, ul { ol, ul {
list-style: none; list-style: none;
} }
blockquote, q { blockquote, q {
quotes: none; quotes: none;
} }
blockquote:before, blockquote:after, blockquote:before, blockquote:after,
q:before, q:after { q:before, q:after {
content: ''; content: '';
content: none; content: none;
} }
table { table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; border-spacing: 0;
} }
/*** CSS Reset ***/ /*** CSS Reset ***/
html { html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
} }
.img-responsive { .img-responsive {
width: 100%; width: 100%;
height: auto; height: auto;
display: block; display: block;
} }
body { body {
font-family: 'Open Sans', sans-serif; font-family: 'Open Sans', sans-serif;
} }
h1 { h1 {
...@@ -72,9 +72,9 @@ h1 { ...@@ -72,9 +72,9 @@ h1 {
} }
p { p {
font-size: 16px; font-size: 16px;
line-height: 1.5em; line-height: 1.5em;
color: #333333; color: #333333;
} }
strong { strong {
...@@ -106,8 +106,8 @@ strong { ...@@ -106,8 +106,8 @@ strong {
.header-top { .header-top {
height: auto; height: auto;
} }
.logo-app { .logo-app {
...@@ -252,7 +252,7 @@ button.subirFoto { ...@@ -252,7 +252,7 @@ button.subirFoto {
} }
.btn-guardar { .btn-guardar {
cursor: pointer; cursor: pointer;
border: none; border: none;
border-radius: 6px; border-radius: 6px;
font-size: 1em; font-size: 1em;
...@@ -266,10 +266,10 @@ button.subirFoto { ...@@ -266,10 +266,10 @@ button.subirFoto {
width:100%; width:100%;
box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); box-shadow: 0 1px 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1); transition: all 0.3s cubic-bezier(.25,.8,.25,1);
} }
.btn-guardar:hover { .btn-guardar:hover {
border:none; border:none;
...@@ -294,7 +294,7 @@ button.subirFoto { ...@@ -294,7 +294,7 @@ button.subirFoto {
flex-flow: row nowrap; flex-flow: row nowrap;
position: relative; position: relative;
z-index: 5; z-index: 5;
margin-top: -20em; margin-top: -25em;
margin-bottom: 1em; margin-bottom: 1em;
} }
...@@ -427,10 +427,10 @@ div .txt-center { ...@@ -427,10 +427,10 @@ div .txt-center {
.alert-box { .alert-box {
color:#555; color:#555;
font-family:Tahoma,Geneva,Arial,sans-serif; font-family:Tahoma,Geneva,Arial,sans-serif;
font-size:13px; font-size:13px;
padding:1.7em 40px; padding:1.7em 40px;
margin:0 0; margin:0 0;
width:-webkit-fill-available; width:-webkit-fill-available;
...@@ -441,127 +441,132 @@ div .txt-center { ...@@ -441,127 +441,132 @@ div .txt-center {
justify-content: center; justify-content: center;
} }
.alert-box span { .alert-box span {
font-weight:bold; font-weight:bold;
text-transform:uppercase; text-transform:uppercase;
padding-right: 5px; padding-right: 5px;
} }
.error { .error {
background:#ffecec; background:#ffecec;
/* border:1px solid #f5aca6; */ /* border:1px solid #f5aca6; */
} }
.success { .success {
background:#e9ffd9; background:#e9ffd9;
/* border:1px solid #a6ca8a; */ /* border:1px solid #a6ca8a; */
} }
.warning { .warning {
background:#fff8c4 url('images/warning.png') no-repeat 10px 50%; background:#fff8c4 url('images/warning.png') no-repeat 10px 50%;
/* border:1px solid #f2c779; */ /* border:1px solid #f2c779; */
} }
.notice { .notice {
background:#e3f7fc url('images/notice.png') no-repeat 10px 50%; background:#e3f7fc url('images/notice.png') no-repeat 10px 50%;
/* border:1px solid #8ed9f6; */ /* border:1px solid #8ed9f6; */
} }
.icp { margin-right:8px; .icp { margin-right:8px;
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
/*** MEDIA QUERIES ***/ /*** MEDIA QUERIES ***/
@media (max-width : 468px){
.container-c{margin-top:-10em};
}
@media(max-width:768px){ @media(max-width:768px){
.contenedor-compara-fotos { .contenedor-compara-fotos {
flex-flow: column nowrap; flex-flow: column nowrap;
} }
.btn-guardar {
margin: 1em 0 3em 0;
}
.container-c {
z-index: 5;
margin-top: -8em;
}
img.desafio-inovage { .btn-guardar {
width: 250px; margin: 1em 0 3em 0;
} }
.app-container { .container-c {
margin: 0 auto; z-index: 5;
padding: 0 1em; margin-top: -8em;
} }
.container-datanombre {
display: flex;
flex-flow: column nowrap;
}
.grilla-datos {
flex-flow: column nowrap;
}
.grilla-datos div:nth-child(1) {
text-align: center;
padding: 0 0 1em 0;
flex: 1;
}
.grilla-datos div:nth-child(2) {
text-align: center;
padding: 0 0 0 0;
flex: 1;
}
.barra-comentario {
margin-bottom:1em;
}
.logo-app { img.desafio-inovage {
max-width: 200px; width: 250px;
} }
.marco-foto {
width: 100%;
max-width: 320px;
height: auto;
min-height: 240px;
overflow: hidden;
}
.botonera-fotos div:nth-child(1) { .app-container {
padding: 0 0.5em 0 0; margin: 0 auto;
} padding: 0 1em;
.botonera-fotos div:nth-child(2) { }
padding: 0 0 0 0.5em; .container-datanombre {
} display: flex;
flex-flow: column nowrap;
}
.grilla-datos {
flex-flow: column nowrap;
}
.grilla-datos div:nth-child(1) {
text-align: center;
padding: 0 0 1em 0;
flex: 1;
}
.grilla-datos div:nth-child(2) {
text-align: center;
padding: 0 0 0 0;
flex: 1;
}
.barra-comentario {
margin-bottom:1em;
}
button.subirFoto, button.tomarFoto { .logo-app {
padding: 0.8em 1em; max-width: 200px;
font-size: 0.8em; }
} .marco-foto {
width: 100%;
max-width: 320px;
height: auto;
min-height: 240px;
overflow: hidden;
}
.contenedor-compara-fotos div { .botonera-fotos div:nth-child(1) {
margin: 0 auto; padding: 0 0.5em 0 0;
width: 100%; }
flex: 1; .botonera-fotos div:nth-child(2) {
} padding: 0 0 0 0.5em;
}
.fondo-adaptable { button.subirFoto, button.tomarFoto {
margin-top: -4em; padding: 0.8em 1em;
} font-size: 0.8em;
/* .contenedor-compara-fotos { }
margin-top: -8em;
} */
.txt-foto-anterior {
font-size: 0.8em;
}
button.subirFoto-adaptable { .contenedor-compara-fotos div {
font-size: 0.8em; margin: 0 auto;
margin:0 0 1em 0; width: 100%;
} flex: 1;
}
.fondo-adaptable {
margin-top: -4em;
}
/* .contenedor-compara-fotos {
margin-top: -8em;
} */
.txt-foto-anterior {
font-size: 0.8em;
}
button.subirFoto-adaptable {
font-size: 0.8em;
margin:0 0 1em 0;
}
} }
...@@ -577,5 +582,6 @@ button.subirFoto-adaptable { ...@@ -577,5 +582,6 @@ button.subirFoto-adaptable {
.alargador-marco-foto{ .alargador-marco-foto{
width: 100% !important; width: 100% !important;
} }
\ No newline at end of file
Markdown is supported
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