650 lines
13 KiB
CSS
650 lines
13 KiB
CSS
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
|
|
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
|
|
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
|
|
|
|
* {
|
|
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
|
margin: 0px;
|
|
padding: 0px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.greenBackground{
|
|
background: rgba(247,120,36,1);
|
|
background: -moz-linear-gradient(45deg, rgba(247,120,36,1) 0%, rgba(247,120,36,1) 23%, rgba(250,217,97,1) 100%);
|
|
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(247,120,36,1)), color-stop(23%, rgba(247,120,36,1)), color-stop(100%, rgba(250,217,97,1)));
|
|
background: -webkit-linear-gradient(45deg, rgba(247,120,36,1) 0%, rgba(247,120,36,1) 23%, rgba(250,217,97,1) 100%);
|
|
background: -o-linear-gradient(45deg, rgba(247,120,36,1) 0%, rgba(247,120,36,1) 23%, rgba(250,217,97,1) 100%);
|
|
background: -ms-linear-gradient(45deg, rgba(247,120,36,1) 0%, rgba(247,120,36,1) 23%, rgba(250,217,97,1) 100%);
|
|
background: linear-gradient(45deg, rgba(247,120,36,1) 0%, rgba(247,120,36,1) 23%, rgba(250,217,97,1) 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f77824', endColorstr='#fad961', GradientType=1 );
|
|
}
|
|
|
|
.blueBackground{
|
|
background: #282828;
|
|
|
|
}
|
|
|
|
html{
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
body {
|
|
background: #000;
|
|
padding: 0px;
|
|
-webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */
|
|
-webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */
|
|
-webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */
|
|
|
|
|
|
font-family:'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
|
|
font-size:12px;
|
|
|
|
margin:0px;
|
|
|
|
|
|
color: #fff;
|
|
|
|
-webkit-transition: background 2s; /* Safari */
|
|
transition: background 2s;
|
|
|
|
}
|
|
p{
|
|
text-align: center;
|
|
font-size: 1.2em;
|
|
}
|
|
.contentPhoto{
|
|
width: 100%;
|
|
padding: 25px 0px;
|
|
}
|
|
.blackground{
|
|
background: #242424;
|
|
}
|
|
#photo{
|
|
max-width: 100%;
|
|
|
|
}
|
|
.btns{
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
.cancelar{
|
|
background: #ddd;
|
|
}
|
|
#logomini{
|
|
float: left;
|
|
width: 28px;
|
|
margin: 0px 10px;
|
|
}
|
|
.menubtn{
|
|
width: 100%;
|
|
margin-top: 0px;
|
|
overflow: hidden;
|
|
position: fixed;
|
|
bottom: 0;
|
|
background: #000;
|
|
height: 50px;
|
|
padding: 5px 0;
|
|
left: 0;
|
|
}
|
|
.btnmin{
|
|
float: left;
|
|
width: 33.3333%;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
padding: 10px 0;
|
|
height: 100%;
|
|
}
|
|
.selected{
|
|
border-bottom: 3px solid #2A9CD3;
|
|
}
|
|
.btnlogout{
|
|
width: 50px;
|
|
height: 50px;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
background-image: url(../img/logout.png);
|
|
background-position: center;
|
|
background-size: 25px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
#logo{
|
|
margin: auto;
|
|
display: block;
|
|
width: 80px;
|
|
margin-top: 50px;
|
|
margin-bottom: 50px;
|
|
}
|
|
h1{
|
|
color: #fff;
|
|
font-weight: normal;
|
|
margin: 13px 10px 0px 10px;
|
|
font-size: 1.5em;
|
|
text-align: left;
|
|
}
|
|
h2{
|
|
font-size: 2.5em;
|
|
}
|
|
h3{
|
|
font-weight: lighter;
|
|
font-size: 2.8em;
|
|
margin-bottom: -5px;
|
|
color: rgba(255,255,255,.5);
|
|
}
|
|
h4{
|
|
font-weight: lighter;
|
|
font-size: 2em;
|
|
}
|
|
h5{
|
|
font-size: 1.5em;
|
|
}
|
|
spam{
|
|
color: #BABABA;
|
|
font-size: 1.2em;
|
|
font-weight: bold;
|
|
}
|
|
.menu{
|
|
padding: 2%;
|
|
top: 0;
|
|
left: 0;
|
|
position: fixed;
|
|
z-index: 999;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #000;
|
|
}
|
|
.btnbarcode{
|
|
margin-bottom: 10px;
|
|
background-color: #D4D2D4;
|
|
background-image: url(../img/barcode.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 25px;
|
|
background-position-y: center;
|
|
background-position-x: 10px;
|
|
width: 100%;
|
|
height: 50px;
|
|
border-radius: 26px;
|
|
padding-left: 43px;
|
|
font-size: 1.2em;
|
|
padding-top: 14px;
|
|
}
|
|
.btnsalix{
|
|
margin-bottom: 10px;
|
|
background-color: #8DD202;
|
|
background-image: url(../img/salix.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 25px;
|
|
background-position-y: center;
|
|
background-position-x: 10px;
|
|
width: 100%;
|
|
height: 50px;
|
|
border-radius: 26px;
|
|
padding-left: 43px;
|
|
font-size: 1.2em;
|
|
padding-top: 14px;
|
|
}
|
|
label{
|
|
font-size: 1.5em;
|
|
margin-bottom: 5px;
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
.btnlogout{
|
|
position: fixed;
|
|
width: 50px;
|
|
height: 50px;
|
|
top: 0;
|
|
right: 0;
|
|
background-image: url(../img/logout.png);
|
|
background-repeat: no-repeat;
|
|
background-size: 25px;
|
|
background-position: center;
|
|
}
|
|
input::placeholder{
|
|
color: #000;
|
|
}
|
|
.input{
|
|
background: #fff;
|
|
padding: 14px;
|
|
overflow: hidden;
|
|
margin-bottom: 10px;
|
|
border-radius: 26px;
|
|
color: #000;
|
|
}
|
|
|
|
|
|
.input img{
|
|
width: 25px;
|
|
float: left;
|
|
}
|
|
.input input{
|
|
width: calc(100% - 38px);
|
|
height: 25px;
|
|
display: block;
|
|
float: left;
|
|
border: none;
|
|
background: none;
|
|
margin-left: 8px;
|
|
color: #000;
|
|
font-size: 1.2em;
|
|
|
|
}
|
|
input.middle:focus {
|
|
outline-width: 0;
|
|
}
|
|
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
|
|
color: #fff;
|
|
opacity: 1; /* Firefox */
|
|
}
|
|
:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
|
color: #fff;
|
|
}
|
|
::-ms-input-placeholder { /* Microsoft Edge */
|
|
color: #fff;
|
|
}
|
|
.target{
|
|
position: fixed;
|
|
bottom: -20px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 270px;
|
|
background: #fff;
|
|
border-radius: 30px;
|
|
}
|
|
.btn{
|
|
width: 100%;
|
|
text-align: center;
|
|
background: #8DD202;
|
|
color: #000;
|
|
font-weight: bold;
|
|
font-size: 1.2em;
|
|
padding: 10px;
|
|
}
|
|
.loginbtn{
|
|
border-radius: 31px;
|
|
position: fixed;
|
|
bottom: 15px;
|
|
left: 0;
|
|
width: 200px;
|
|
margin: auto;
|
|
right: 0;
|
|
padding: 18px;
|
|
}
|
|
.mainheader{
|
|
width: 100%;
|
|
text-align: center;
|
|
padding-top: 30px;
|
|
}
|
|
.mainheader img{
|
|
width: 100px;
|
|
border-radius: 50%;
|
|
border: 4px solid #199BA6;
|
|
|
|
}
|
|
.progress{
|
|
margin-top: 10px;
|
|
text-align: left;
|
|
width: 100%;
|
|
}
|
|
.progress label{
|
|
font-size: 1.2em;
|
|
margin-bottom: 5px;
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
.progress .progressbar{
|
|
width: 100%;
|
|
height: 20px;
|
|
background: #DCDCDC;
|
|
border-radius: 20px;
|
|
}
|
|
.progress .progressbar .progresscontent{
|
|
height: 100%;
|
|
/*background: #0ECC80;*/
|
|
width: 70%;
|
|
border-radius: 20px;
|
|
border: 1px solid rgba(255,255,255,.3);
|
|
}
|
|
.progress .progressbar .progresscontent span{
|
|
display: block;
|
|
width: 100%;
|
|
text-align: right;
|
|
font-weight: bold;
|
|
font-size: 1.2em;
|
|
padding-right: 20px;
|
|
}
|
|
.target ul{
|
|
width: 100%;
|
|
}
|
|
.target ul li{
|
|
width: 100%;
|
|
padding: 30px 30px 0 30px;
|
|
color: #000;
|
|
overflow: hidden;
|
|
margin-bottom: 0px;
|
|
}
|
|
.floatl {
|
|
float: left;
|
|
}
|
|
.target ul li div img{
|
|
width: 30px;
|
|
margin-right: 20px;
|
|
}
|
|
header{
|
|
background: #000;
|
|
overflow: hidden;
|
|
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
}
|
|
header h1{
|
|
float: left;
|
|
margin-bottom: 0px;
|
|
font-size: 1.4em;
|
|
margin-top: 2px;
|
|
margin-left: 0px;
|
|
font-weight: normal;
|
|
}
|
|
.btnback{
|
|
width: 50px;
|
|
height: 50px;
|
|
background-image: url(../img/back.png);
|
|
float: left;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 10px;
|
|
}
|
|
.btnsave{
|
|
width: 50px;
|
|
height: 50px;
|
|
background-image: url(../img/shared.png);
|
|
float: right;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 17px;
|
|
}
|
|
ul{
|
|
list-style: none;
|
|
}
|
|
nav{
|
|
width: 100%;
|
|
height: auto;
|
|
overflow: hidden;
|
|
padding-top: 20px;
|
|
margin-bottom: 10px;
|
|
}
|
|
nav ul {
|
|
width: inherit;
|
|
height: inherit;
|
|
}
|
|
nav ul li{
|
|
float: left;
|
|
height: 50px;
|
|
width: 50px;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: cover;
|
|
margin-right: 20px;
|
|
cursor: pointer;
|
|
}
|
|
.navsemana{
|
|
padding-top: 0px;
|
|
margin-bottom: 0;
|
|
}
|
|
nav .misemanatab li{
|
|
width: 33.333333%;
|
|
margin: 0;
|
|
padding: 5px;
|
|
height: auto;
|
|
cursor: pointer;
|
|
}
|
|
nav .misemanatab li h5{
|
|
font-weight: normal;
|
|
font-size: 1.3em;
|
|
text-align: center;
|
|
}
|
|
nav .misemanatab li p{
|
|
font-weight: bold;
|
|
font-size: 1.4em;
|
|
}
|
|
nav .misemanatab li:not(:last-child){
|
|
border-right: 1px solid rgba(255,255,255,0);
|
|
}
|
|
nav ul li:hover{
|
|
/* height: 55px;
|
|
width: 55px;*/
|
|
}
|
|
nav .misemanatab li:hover{
|
|
width: 33.333333%;
|
|
height: auto;
|
|
}
|
|
.btnsemana{
|
|
background-image: url(../img/semana.png);
|
|
}
|
|
.btnsemanaselected{
|
|
background-image: url(../img/semanag.png);
|
|
}
|
|
.btnmes{
|
|
background-image: url(../img/mes.png);
|
|
}
|
|
.btnmesselected{
|
|
background-image: url(../img/mesg.png);
|
|
}
|
|
.btnano{
|
|
background-image: url(../img/ano.png);
|
|
}
|
|
.btnanoselected{
|
|
background-image: url(../img/anog.png);
|
|
}
|
|
.viewhoras{
|
|
margin: 20px 0;
|
|
width: 100%;
|
|
padding: 20px;
|
|
background: rgba(38,211,141,.46);
|
|
overflow: hidden;
|
|
}
|
|
.viewhoras img{
|
|
width: 40px;
|
|
float: left;
|
|
margin-top: 10px;
|
|
}
|
|
.viewhoras .infohoras{
|
|
float: right;
|
|
}
|
|
.viewhoras .infohoras h3{
|
|
margin: 0;
|
|
}
|
|
.viewhoras .infohoras p{
|
|
font-size: 2.5em;
|
|
font-weight: bold;
|
|
}
|
|
.bad{
|
|
color: #FF5947;
|
|
}
|
|
.good{
|
|
color: #007742;
|
|
}
|
|
.green{
|
|
color: #26D38D
|
|
}
|
|
.listsemana {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.listsemana .header{
|
|
background: #fff;
|
|
padding: 5px;
|
|
height: auto;
|
|
}
|
|
.listsemana .header h3{
|
|
color: #000;
|
|
font-size: 1.3em;
|
|
margin: 0;
|
|
}
|
|
.listsemana .registro{
|
|
border-bottom: 1px solid rgba(255,255,255,1);
|
|
padding: 10px 5px;
|
|
overflow: hidden;
|
|
}
|
|
.listsemana .registro img{
|
|
width: 30px;
|
|
float: left;
|
|
}
|
|
.listsemana .registro p{
|
|
font-weight: bold;
|
|
float: left;
|
|
font-size: 1.3em;
|
|
margin-top: 3px;
|
|
margin-left: 20px;
|
|
}
|
|
#txtNombre{
|
|
padding-bottom: 20px;
|
|
border-bottom: 1px solid rgba(255,255,255,0.3);
|
|
margin-bottom: 20px;
|
|
}
|
|
.workingHours{
|
|
text-align: center;
|
|
font-size: 2.5em!important;
|
|
font-weight: bold;
|
|
}
|
|
.rotateAnimation{
|
|
-webkit-animation:spin 4s linear infinite;
|
|
-moz-animation:spin 4s linear infinite;
|
|
animation:spin 4s linear infinite;
|
|
}
|
|
|
|
|
|
|
|
.loading{
|
|
display: none;
|
|
top: 0;
|
|
left: 0;
|
|
position: fixed;
|
|
z-index: 999;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(247,120,36,1);
|
|
background: -moz-linear-gradient(45deg, rgba(247,120,36,1) 0%, rgba(247,120,36,1) 23%, rgba(250,217,97,1) 100%);
|
|
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(247,120,36,1)), color-stop(23%, rgba(247,120,36,1)), color-stop(100%, rgba(250,217,97,1)));
|
|
background: -webkit-linear-gradient(45deg, rgba(247,120,36,1) 0%, rgba(247,120,36,1) 23%, rgba(250,217,97,1) 100%);
|
|
background: -o-linear-gradient(45deg, rgba(247,120,36,1) 0%, rgba(247,120,36,1) 23%, rgba(250,217,97,1) 100%);
|
|
background: -ms-linear-gradient(45deg, rgba(247,120,36,1) 0%, rgba(247,120,36,1) 23%, rgba(250,217,97,1) 100%);
|
|
background: linear-gradient(45deg, rgba(247,120,36,1) 0%, rgba(247,120,36,1) 23%, rgba(250,217,97,1) 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f77824', endColorstr='#fad961', GradientType=1 );
|
|
}
|
|
|
|
|
|
.loadingcontent{
|
|
position: fixed;
|
|
height: 50px;
|
|
width: 100%;
|
|
margin: auto;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
|
|
|
|
.sk-cube-grid {
|
|
width: 40px;
|
|
height: 40px;
|
|
margin: auto;
|
|
}
|
|
|
|
.sk-cube-grid .sk-cube {
|
|
width: 33%;
|
|
height: 33%;
|
|
background-color: #fff;
|
|
float: left;
|
|
-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
|
|
animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
|
|
}
|
|
.sk-cube-grid .sk-cube1 {
|
|
-webkit-animation-delay: 0.2s;
|
|
animation-delay: 0.2s; }
|
|
.sk-cube-grid .sk-cube2 {
|
|
-webkit-animation-delay: 0.3s;
|
|
animation-delay: 0.3s; }
|
|
.sk-cube-grid .sk-cube3 {
|
|
-webkit-animation-delay: 0.4s;
|
|
animation-delay: 0.4s; }
|
|
.sk-cube-grid .sk-cube4 {
|
|
-webkit-animation-delay: 0.1s;
|
|
animation-delay: 0.1s; }
|
|
.sk-cube-grid .sk-cube5 {
|
|
-webkit-animation-delay: 0.2s;
|
|
animation-delay: 0.2s; }
|
|
.sk-cube-grid .sk-cube6 {
|
|
-webkit-animation-delay: 0.3s;
|
|
animation-delay: 0.3s; }
|
|
.sk-cube-grid .sk-cube7 {
|
|
-webkit-animation-delay: 0s;
|
|
animation-delay: 0s; }
|
|
.sk-cube-grid .sk-cube8 {
|
|
-webkit-animation-delay: 0.1s;
|
|
animation-delay: 0.1s; }
|
|
.sk-cube-grid .sk-cube9 {
|
|
-webkit-animation-delay: 0.2s;
|
|
animation-delay: 0.2s; }
|
|
|
|
@-webkit-keyframes sk-cubeGridScaleDelay {
|
|
0%, 70%, 100% {
|
|
-webkit-transform: scale3D(1, 1, 1);
|
|
transform: scale3D(1, 1, 1);
|
|
} 35% {
|
|
-webkit-transform: scale3D(0, 0, 1);
|
|
transform: scale3D(0, 0, 1);
|
|
}
|
|
}
|
|
|
|
@keyframes sk-cubeGridScaleDelay {
|
|
0%, 70%, 100% {
|
|
-webkit-transform: scale3D(1, 1, 1);
|
|
transform: scale3D(1, 1, 1);
|
|
} 35% {
|
|
-webkit-transform: scale3D(0, 0, 1);
|
|
transform: scale3D(0, 0, 1);
|
|
}
|
|
}
|
|
|
|
|
|
@media screen and (max-height:518px){
|
|
h3 {
|
|
font-size: 1.8em;
|
|
font-weight: bold;
|
|
}
|
|
.workingHours {
|
|
font-size: 2em!important;
|
|
}
|
|
h4 {
|
|
font-size: 1.2em;
|
|
font-weight: bold;
|
|
}
|
|
#logo{
|
|
width: 40px;
|
|
|
|
}
|
|
.loginbtn {
|
|
position: relative;
|
|
top: 5px;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-height:477px){
|
|
#txtNombre {
|
|
padding-bottom: 8px;
|
|
margin-bottom: 8px;
|
|
}
|
|
h2 {
|
|
font-size: 1.9em;
|
|
font-weight: bold;
|
|
}
|
|
} |