Difference between revisions of "Team:SVCE Chennai/CSS"

Line 364: Line 364:
 
opacity: 0;
 
opacity: 0;
 
}
 
}
 +
}
 +
 +
footer{
 +
background: #fff;
 +
}
 +
 +
.speech-control,
 +
.speech-control-pulse {
 +
    background: #FFFFFF;
 +
    border-radius: 100%;
 +
    width: 100%;
 +
    height: 100%;
 +
}
 +
 +
.speech-control-container {
 +
    height: 190px;
 +
    width: 190px;
 +
    position:absolute;
 +
    top: 0;
 +
    bottom: 0;
 +
    right: 0;
 +
    left: 0;
 +
    margin:auto;
 +
}
 +
 +
.speech-control-pulse {
 +
    position: absolute;
 +
    top: 0;
 +
    z-index: 1;
 +
    background-color: rgba(255, 255, 255, 0.4);
 +
    -webkit-transform: scale(0.9);
 +
    transform: scale(0.9);
 +
}
 +
 +
.speech-control {
 +
    cursor: pointer;
 +
    background-color: rgba(255, 255, 255, 1);
 +
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
 +
    z-index: 2;
 +
    position: absolute;
 +
    transition: background-color 750ms;
 +
}
 +
 +
.speech-control-container.listen .speech-control {
 +
    background-color: #23507c;
 +
}
 +
 +
.speech-control .microphone-icon {
 +
    color: #23507c;
 +
    font-size: 100px;
 +
    margin: auto;
 +
    display: block;
 +
    text-align: center;
 +
    line-height: 2;
 +
    transition: color 750ms;
 +
}
 +
 +
.speech-control-container.listen .microphone-icon {
 +
    color: #FFF;
 +
}
 +
 +
.speech-control-container.listen .speech-control-pulse {
 +
    -webkit-animation: pulse 1.3s 2;
 +
    animation: pulse 1.3s 2;
 +
    -webkit-animation-delay: 1s;
 +
    animation-delay: 1s;
 +
}
 +
@-webkit-keyframes pulse {
 +
    0% {
 +
        -webkit-transform: scale(0.9);
 +
        transform: scale(0.9);
 +
    }
 +
    25% {
 +
        -webkit-transform: scale(1.3);
 +
        transform: scale(1.3);
 +
    }
 +
    50% {
 +
        -webkit-transform: scale(1);
 +
        transform: scale(1);
 +
    }
 +
    75% {
 +
        -webkit-transform: scale(1.2);
 +
        transform: scale(1.2);
 +
    }
 +
    100% {
 +
        -webkit-transform: scale(0.9);
 +
        transform: scale(0.9);
 +
    }
 +
}
 +
 +
@keyframes pulse {
 +
    0% {
 +
        -webkit-transform: scale(0.9);
 +
        transform: scale(0.9);
 +
    }
 +
    25% {
 +
        -webkit-transform: scale(1.3);
 +
        transform: scale(1.3);
 +
    }
 +
    50% {
 +
        -webkit-transform: scale(1);
 +
        transform: scale(1);
 +
    }
 +
    75% {
 +
        -webkit-transform: scale(1.2);
 +
        transform: scale(1.2);
 +
    }
 +
    100% {
 +
        -webkit-transform: scale(0.9);
 +
        transform: scale(0.9);
 +
    }
 +
}
 +
 +
.speech-control-loader {
 +
    display: none;
 +
    position: absolute;
 +
    top: -15px;
 +
    left: -15px;
 +
    height: 220px;
 +
}
 +
 +
.loading .speech-control-loader {
 +
    display: block;
 +
}
 +
 +
.speech-control-loader .circle {
 +
    -webkit-animation: load 2s ease-in-out;
 +
    animation: load 2s ease-in-out;
 +
    -webkit-transform: rotate(-90deg);
 +
    transform: rotate(-90deg);
 +
    -webkit-transform-origin: 110px 50%;
 +
    transform-origin: 110px 50%;
 +
    fill: transparent;
 +
    stroke: #ABABAB;
 +
    stroke-dasharray: 635px;
 +
}
 +
@-webkit-keyframes load {
 +
    from {
 +
        stroke-dashoffset: 635px;
 +
    }
 +
    to {
 +
        stroke-dashoffset: 0;
 +
    }
 +
}
 +
 +
@keyframes load {
 +
    from {
 +
        stroke-dashoffset: 635px;
 +
    }
 +
    to {
 +
        stroke-dashoffset: 0;
 +
    }
 
}
 
}

Revision as of 10:20, 10 September 2015

  1. content, html, body, #globalWrapper {
   width: 100%;
   height: 100%;

} body{ background: #fff; } .firstHeading{ display:none; } .hide { display:none; }

.loading { 

 position: absolute;
   left: 50%;
   top: 50%;
   margin: -60px 0 0 -100px;
   background: #fff;
   width: 150px;
   height: 150px;
   border-radius: 100%;

} .animateClassIntro{ 

animation: moveToCorner 2s 1 linear forwards;

} .loading:after { 

 content: ;
 background: trasparent;
 width: 140%;
 height: 140%;
 position: absolute;
 border-radius: 100%;
 top: -20%;
 left: -20%;
 opacity: 0.7;
 box-shadow: rgba(255, 255, 255, 0.6) -4px -5px 3px -3px;

} .talktext p { font-size: 15px; display: inline; 

   padding-right: 5px;

}

@keyframes rotate { 

 0% {
   box-shadow: 0px 0px 129px -18px rgba(0,0,0,1);
 }
 50%{
box-shadow: none;
 }
 }
 100% {
  box-shadow: 0px 0px 129px -18px rgba(0,0,0,1);
 }

}

.minioImg{ width: 150px; }


/* CSS talk bubble */ .talk-bubble { margin: 40px; 

   display: inline-block;
   position: absolute;
   left: 96px;
   width: 200px;
   height: auto;
   background-color: #5FC2EA;

bottom: 90px; color:#fff; } .border{ 

 border: 8px solid #666;

} .round{ 

 border-radius: 30px;

-webkit-border-radius: 30px; -moz-border-radius: 30px;

}

/* Right triangle placed top left flush. */ .tri-right.border.left-top:before { content: ' '; position: absolute; width: 0; height: 0; 

 left: -40px;

right: auto; 

 top: -8px;

bottom: auto; border: 32px solid; border-color: #666 transparent transparent transparent; } .tri-right.left-top:after{ content: ' '; position: absolute; width: 0; height: 0; 

 left: -20px;

right: auto; 

 top: 0px;

bottom: auto; border: 22px solid; border-color: #5FC2EA transparent transparent transparent; }

/* Right triangle, left side slightly down */ .tri-right.border.left-in:before { content: ' '; position: absolute; width: 0; height: 0; 

 left: -40px;

right: auto; 

 top: 30px;

bottom: auto; border: 20px solid; border-color: #666 #666 transparent transparent; } .tri-right.left-in:after{ content: ' '; position: absolute; width: 0; height: 0; 

 left: -20px;

right: auto; 

 top: 38px;

bottom: auto; border: 12px solid; border-color: #5FC2EA #5FC2EA transparent transparent; }

/*Right triangle, placed bottom left side slightly in*/ .tri-right.border.btm-left:before { content: ' '; position: absolute; width: 0; height: 0; left: -8px; 

 right: auto;
 top: auto;

bottom: -40px; border: 32px solid; border-color: transparent transparent transparent #666; } .tri-right.btm-left:after{ content: ' '; position: absolute; width: 0; height: 0; left: 0px; 

 right: auto;
 top: auto;

bottom: -20px; border: 22px solid; border-color: transparent transparent transparent #5FC2EA; }

/*Right triangle, placed bottom left side slightly in*/ .tri-right.border.btm-left-in:before { content: ' '; position: absolute; width: 0; height: 0; left: 30px; 

 right: auto;
 top: auto;

bottom: -40px; border: 20px solid; border-color: #666 transparent transparent #666; } .tri-right.btm-left-in:after{ content: ' '; position: absolute; width: 0; height: 0; left: 38px; 

 right: auto;
 top: auto;

bottom: -20px; border: 12px solid; border-color: #5FC2EA transparent transparent #5FC2EA; }

/*Right triangle, placed bottom right side slightly in*/ .tri-right.border.btm-right-in:before { content: ' '; position: absolute; width: 0; height: 0; 

 left: auto;

right: 30px; bottom: -40px; border: 20px solid; border-color: #666 #666 transparent transparent; } .tri-right.btm-right-in:after{ content: ' '; position: absolute; width: 0; height: 0; 

 left: auto;

right: 38px; bottom: -20px; border: 12px solid; border-color: #5FC2EA #5FC2EA transparent transparent; } /* left: -8px; 

 right: auto;
 top: auto;

bottom: -40px; border: 32px solid; border-color: transparent transparent transparent #666; left: 0px; 

 right: auto;
 top: auto;

bottom: -20px; border: 22px solid; border-color: transparent transparent transparent #5FC2EA;

/*Right triangle, placed bottom right side slightly in*/ .tri-right.border.btm-right:before { content: ' '; position: absolute; width: 0; height: 0; 

 left: auto;

right: -8px; bottom: -40px; border: 20px solid; border-color: #666 #666 transparent transparent; } .tri-right.btm-right:after{ content: ' '; position: absolute; width: 0; height: 0; 

 left: auto;

right: 0px; bottom: -20px; border: 12px solid; border-color: #5FC2EA #5FC2EA transparent transparent; }

/* Right triangle, right side slightly down*/ .tri-right.border.right-in:before { content: ' '; position: absolute; width: 0; height: 0; 

 left: auto;

right: -40px; 

 top: 30px;

bottom: auto; border: 20px solid; border-color: #666 transparent transparent #666; } .tri-right.right-in:after{ content: ' '; position: absolute; width: 0; height: 0; 

 left: auto;

right: -20px; 

 top: 38px;

bottom: auto; border: 12px solid; border-color: #5FC2EA transparent transparent #5FC2EA; }

/* Right triangle placed top right flush. */ .tri-right.border.right-top:before { content: ' '; position: absolute; width: 0; height: 0; 

 left: auto;

right: -40px; 

 top: -8px;

bottom: auto; border: 32px solid; border-color: #666 transparent transparent transparent; } .tri-right.right-top:after{ content: ' '; position: absolute; width: 0; height: 0; 

 left: auto;

right: -20px; 

 top: 0px;

bottom: auto; border: 20px solid; border-color: #5FC2EA transparent transparent transparent; }

/* talk bubble contents */ .talktext{ 

 padding: 1em;

text-align: left; 

 line-height: 1.5em;

} .talktext p{ 

 /* remove webkit p margins */
 -webkit-margin-before: 0em;
 -webkit-margin-after: 0em;

} .typed-cursor{ 

   opacity: 1;
   -webkit-animation: blink 0.7s infinite;
   -moz-animation: blink 0.7s infinite;
   animation: blink 0.7s infinite;

} @keyframes blink{ 

   0% { opacity:1; }
   50% { opacity:0; }
   100% { opacity:1; }

} @-webkit-keyframes blink{ 

   0% { opacity:1; }
   50% { opacity:0; }
   100% { opacity:1; }

} @-moz-keyframes blink{ 

   0% { opacity:1; }
   50% { opacity:0; }
   100% { opacity:1; }

}

.footer { 

 position: absolute;
 bottom: 0;
 width: 100%;
 /* Set the fixed height of the footer here */
 height: 60px;
 background-color: #f5f5f5;

} .container{ width: 100% } .navBarIGEM{ margin-top: 15px;}

@keyframes moveToCorner { 

    0% {

opacity: 1;

} 


   100% {
  left:80px;

top: 98%; opacity: 0; } }

footer{ background: #fff; }

.speech-control, .speech-control-pulse { 

   background: #FFFFFF;
   border-radius: 100%;
   width: 100%;
   height: 100%;

}

.speech-control-container { 

   height: 190px;
   width: 190px;
   position:absolute;
   top: 0;
   bottom: 0;
   right: 0;
   left: 0;
   margin:auto;

}

.speech-control-pulse { 

   position: absolute;
   top: 0;
   z-index: 1;
   background-color: rgba(255, 255, 255, 0.4);
   -webkit-transform: scale(0.9);
   transform: scale(0.9);

}

.speech-control { 

   cursor: pointer;
   background-color: rgba(255, 255, 255, 1);
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
   z-index: 2;
   position: absolute;
   transition: background-color 750ms;

}

.speech-control-container.listen .speech-control { 

   background-color: #23507c;

}

.speech-control .microphone-icon { 

   color: #23507c;
   font-size: 100px;
   margin: auto;
   display: block;
   text-align: center;
   line-height: 2;
   transition: color 750ms;

}

.speech-control-container.listen .microphone-icon { 

   color: #FFF;

}

.speech-control-container.listen .speech-control-pulse { 

   -webkit-animation: pulse 1.3s 2;
   animation: pulse 1.3s 2;
   -webkit-animation-delay: 1s;
   animation-delay: 1s;

} @-webkit-keyframes pulse { 

   0% {
       -webkit-transform: scale(0.9);
       transform: scale(0.9);
   }
   25% {
       -webkit-transform: scale(1.3);
       transform: scale(1.3);
   }
   50% {
       -webkit-transform: scale(1);
       transform: scale(1);
   }
   75% {
       -webkit-transform: scale(1.2);
       transform: scale(1.2);
   }
   100% {
       -webkit-transform: scale(0.9);
       transform: scale(0.9);
   }

}

@keyframes pulse { 

   0% {
       -webkit-transform: scale(0.9);
       transform: scale(0.9);
   }
   25% {
       -webkit-transform: scale(1.3);
       transform: scale(1.3);
   }
   50% {
       -webkit-transform: scale(1);
       transform: scale(1);
   }
   75% {
       -webkit-transform: scale(1.2);
       transform: scale(1.2);
   }
   100% {
       -webkit-transform: scale(0.9);
       transform: scale(0.9);
   }

}

.speech-control-loader { 

   display: none;
   position: absolute;
   top: -15px;
   left: -15px;
   height: 220px;

}

.loading .speech-control-loader { 

   display: block;

}

.speech-control-loader .circle { 

   -webkit-animation: load 2s ease-in-out;
   animation: load 2s ease-in-out;
   -webkit-transform: rotate(-90deg);
   transform: rotate(-90deg);
   -webkit-transform-origin: 110px 50%;
   transform-origin: 110px 50%;
   fill: transparent;
   stroke: #ABABAB;
   stroke-dasharray: 635px;

} @-webkit-keyframes load { 

   from {
       stroke-dashoffset: 635px;
   }
   to {
       stroke-dashoffset: 0;
   }

}

@keyframes load { 

   from {
       stroke-dashoffset: 635px;
   }
   to {
       stroke-dashoffset: 0;
   }

}