Skip to content
Permalink
Browse files

mods for ui changes

  • Loading branch information
johnnycoyle committed May 23, 2017
2 parents a558f99 + 7cecac0 commit 6b944843fe6857a6d962eeb8d2b6ff50f1a1212d
@@ -2,9 +2,13 @@
"presets": [
["es2015", {"modules": false}],
["stage-2"],
["react"],
["env"]
["react"]
],
"env": {
"development": {
"presets": ["react-hmre"]
}
},
"plugins": [
"transform-class-properties",
"transform-object-rest-spread"
@@ -3,3 +3,4 @@
**/server.js
**/webpack.config*.js
**/webpack.config*.js
**
@@ -1,7 +1,7 @@
@keyframes enter {
0% {
opacity:0;
transform:translateX(-200%);
transform:translateX(200%);
}
100%{
transform:translateX(0%);
@@ -12,10 +12,10 @@
@keyframes leave {
0%{
opacity:1;
transform:translateX(0%);
transform:translateY(0%);
}
100%{
transform:translateX(-150%);
transform:translateY(-25%);
opacity:0;
}
}
@@ -1,40 +1,53 @@
@import url('https://fonts.googleapis.com/css?family=Karla|Lato');
#main_container{
position:absolute;
margin:0;
background: #ededed;
width:100%;
font-family: 'Open Sans', sans-serif;
min-width: 300px;
}

@keyframes bannerContainerEnterAnimation {
0% {
transform: translateY(-110%);

}
90% {
transform: translateY(-110%);

}
100% {
transform: translateY(0%);
}
}

#bannerContainer{
position:absolute;
display:block;
width:100%;
height:30px;
background: #fff;
background: rgba(245,245,245, 1);
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.26);
font-family: 'Open Sans', sans-serif;
color:#707070;
font-size:11px;
top:25%;
animation:bannerContainerEnterAnimation 2.5s ease-out;
text-align:center;
font-size: 10px;
color:#919191;
letter-spacing:6px;
text-justify: distribute-all-lines;
}

#bannerText {
margin-top:7px;
#bannerTitle {
letter-spacing:6px;
position:relative;
margin-left:2%;
font-size:13px;
}

@keyframes logoFadeIn {
0% {
/*transform: translateX(-100%);*/
visibility:none;
opacity:0;
}
100% {
visibility:visible;
opacity:1;
}
#bannerByLine {
letter-spacing:2px;
padding:0;
color:#919191;
margin-left:2%;
font-size:11px;
}

.message_container{
@@ -43,87 +56,196 @@
width:100%;
}

/*.message {
position:relative;
display:block;
margin-right:auto;
margin-left:auto;
font-size:14px;
width:fit-content;
height:fit-content;
background: rgba(202,202,202, .9);
box-shadow: 0 2px 5px 0 rgba(145, 145, 145, 0.46);
z-index:1;
border-radius:15px;
padding:10px;
}*/

#toggleMessage{
position:absolute;
text-align:center;
left: 0;
right:0;
top:30px;
top:40px;
margin-right:auto;
margin-left:auto;
font-size:14px;
width:fit-content;
font-size:45px;
font-weight:bolder;
font-family: 'Karla', sans-serif;
height:fit-content;
color:rgba(66,66,66,.7);
background: rgba(213,213,213, .3);
font-weight:bold;
box-shadow: 0 2px 5px 0 rgba(145, 145, 145, 0.96);
border-radius:5px;
padding:10px;
z-index:3;
transition: background 200ms ease-in-out;
box-shadow: 0px 2px 10px 0px rgba(145, 145, 145, 0.66);
padding:5px;
z-index:20;
letter-spacing:30px;
transition: letter-spacing .2s ease-in-out;
background: rgba(139, 237, 255, .25);
}

#toggleMessage:hover{
background: rgba(189,212,175, .5);
transition: background 200ms ease-in-out;
background: rgba(139, 237, 255, .46);
letter-spacing:32px;
}

@keyframes idleListeningAnimation {
0% {
opacity:1;
}
50% {
opacity:0;
}
100% {
opacity:1;
}
}

#listening{
position:absolute;
top:350px;
left: 0;
right:0;
margin-right:auto;
margin-left:auto;
font-size:13px;
width:fit-content;
height:fit-content;
background: rgba(255,127,93, .5);
font-weight:bold;
box-shadow: 0 2px 5px 0 rgba(145, 145, 145, 0.46);
border-radius:5px;
height:50px;
box-shadow: 0px 2px 10px 0px rgba(145, 145, 145, 0.66);
width:100%;
text-overflow: hidden;
overflow:hidden;
background: rgba(255,0,0, .5);
text-align:center;
z-index:99999999;
}

#listen_idle_container{
position:absolute;
font-size:17px;
font-family: 'Karla', sans-serif;
padding:8px;
margin-top:420px;
width:100%;
letter-spacing:5px;
color:rgba(255,255,255,.7);
overflow:hidden;
text-overflow: hidden;
z-index:2;
animation: idleListeningAnimation 2.5s infinite;
}

@keyframes logo_load {
@keyframes logoFadeIn {
0% {
/*transform: translateX(-100%);*/
visibility:none;
transform: translateY(100%);
opacity:0;
}
40% {
/*transform: translateX(-100%);*/
visibility:none;
transform: translateY(100%);
opacity:0;
}
70% {
86% {
visibility:visible;
transform: translateY(-1%);
opacity:1;
transition-timing-function: ease-out;
}
100% {
visibility:visible;
transform: translateY(0%);
opacity:1;
transition-timing-function: cubic-bezier(.42,.97,.44,1.5)
}
}

#rpm_logo{
position:absolute;
display:block;
top:0;
left:0;
right:0;
bottom:0;
margin-top:20%;
margin-right:auto;
margin-left:auto;
width:400px;
animation: logoFadeIn 3s;
z-index:10;
}

@keyframes slideDown {
0% {
/*transform: translateX(-100%);*/
transform: translateY(-100%);
opacity:0;
}
90% {
97%{
transform: translateY(-1%);
opacity:.7;
}
100% {
transform: translateY(0%);
opacity:1;
}
}

#divider{
position:absolute;
width:100%;
height:400px;
background:linear-gradient(#ededed, #e1e1e1);
animation:slideDown 1s ease-out;
}

@keyframes removeMask {
0% {
/*transform: translateX(-100%);*/
opacity:.5;
visibility:visible;
transform: translateY(0%);
opacity:1;
}
50% {
/*transform: translateX(-100%);*/
visibility:visible;
transform: translateY(0%);
opacity:1;
}
100% {
/*transform: translateX(0);*/
opacity:1
visibility:none;
transform: translateY(50%);

opacity:0;
transition-timing-function: cubic-bezier(1,.26,.44,1.11)
}
}

#rpm_logo{
position:fixed;
width:80%;
left:9%;
top:10%;
animation: logoFadeIn 3s ease-out;
#logoMask{
position:absolute;
display:inline-block;
bottom:0;
left:0;
right:0;
top:0;
width:100%;
height:400px;
margin-top:75%;
background:#ededed;
/*background: rgba(255,0,0,.3);*/
z-index:999999;
opacity:0;
/*opacity:0;*/
animation: removeMask 4.9s;
}

@keyframes logoExit {
0%{
opacity:1;
}
100%{
opacity:0;
}
}

.logoAnimOut{
transition: opacity 2s ease-in-out;
opacity: 0;
z-index:1;
/*left:-100%;*/
}


0 comments on commit 6b94484

Please sign in to comment.
You can’t perform that action at this time.