1 2 html {3 font-size: 25px;4 position: absolute;5 top: 0;6 left: 0;7 bottom: 0;8 right: 0;9 overflow: hidden;10 }11 12 .centered {13 position: absolute;14 left: 50%;15 top: 50%;16 17 transform: translate(-50%, -50%);18 }19 20 @keyframes breeth {21 0% {22 width: 10rem;23 height: 10rem;24 background-color: #AAAAFF;25 }26 60% {27 width: 11rem;28 height: 11rem;29 background-color: #EEEEFF;30 }31 100% {32 width: 10rem;33 height: 10rem;34 background-color: #AAAAFF;35 }36 }37 38 @-webkit-keyframes breeth {39 0% {40 width: 10rem;41 height: 10rem;42 background-color: #AAAAFF;43 }44 60% {45 width: 11rem;46 height: 11rem;47 background-color: #EEEEFF;48 }49 100% {50 width: 10rem;51 height: 10rem;52 background-color: #AAAAFF;53 }54 }55 56 /* *** *** *** record-button *** *** *** */57 #record-button {58 width: 10rem;59 height: 10rem;60 display: none;61 border-radius: 50%;62 border-width: 0;63 cursor: pointer;64 -webkit-animation: breeth 5s infinite;65 animation: breeth 5s infinite;66 }67 68 body[flow="waiting"] #record-button,69 body[flow="recording"] #record-button,70 body[flow="recording-canstop"] #record-button,71 body[flow="uploading"] #record-button,72 body[flow="result"] #record-button {73 display: block;74 }75 76 body[flow="waiting"] #record-button:hover {77 background-color: #FFAAAA !important;78 -webkit-animation: none;79 animation: none;80 }81 82 body[flow="recording"] #record-button,83 body[flow="recording-canstop"] #record-button {84 width: 11rem;85 height: 11rem;86 background-color: #FF0000 !important;87 -webkit-animation: none;88 animation: none;89 }90 91 /* *** *** *** must-accept *** *** *** */92 #must-accept {93 display: none;94 }95 96 body[flow="blocked"] #must-accept {97 display: block;98 border: solid black;99 border-radius: 1rem;100 padding: 1rem;101 margin: 1rem;102 text-align: center;103 }104 105 106 /* *** *** *** face *** *** *** */107 #face {108 display: none;109 position: absolute;110 left: 0;111 right: 0;112 top: 0;113 bottom: 0;114 background-color: yellow;115 border-radius:50%;116 }117 118 body[flow="uploading"] #face,119 body[flow="result"] #face {120 display: block;121 }122 123 #left-eye,124 #right-eye {125 position: absolute;126 top: 50%;127 left: 50%;128 background: black;129 width: 12%;130 height: 12%;131 margin-top: -15%;132 transform: translate(-50%, -50%);133 border-radius: 50%;134 135 transition: all 0.4s ease;136 }137 138 #left-eye {139 margin-left: -15%;140 }141 142 #right-eye {143 margin-left: 15%;144 }145 146 #mouth {147 position: absolute;148 top: 50%;149 left: 50%;150 height: 0%;151 width: 40%;152 transform: translate(-50%, -50%);153 margin-top: 15%;154 border: solid 0.3rem transparent;155 border-radius: 50%;156 border-bottom-color: black;157 158 transition: all 0.4s ease;159 }160 161 /* mood amusement */162 #face[mood="amusement"] #mouth {163 border-bottom-color: black;164 height: 25%;165 }166 167 /* mood sadness */168 #face[mood="sadness"] #mouth {169 border-bottom-color: black;170 height: 15%;171 transform: translate(-50%, 15%) rotate(180deg);172 }173 174 #face[mood="sadness"] #left-eye,175 #face[mood="sadness"] #right-eye {176 border-bottom: 0.5rem solid lightblue;177 border-bottom-left-radius: 0;178 border-bottom-right-radius: 0;179 }180 181 182 /* mood hot_anger */183 #face[mood="hot_anger"] {184 background-color: #FF6600;185 }186 187 #face[mood="hot_anger"] #mouth {188 border-bottom-color: black;189 height: 10%;190 transform: translate(-50%, -40%) rotate(180deg);191 }192 193 #face[mood="hot_anger"] #left-eye,194 #face[mood="hot_anger"] #right-eye {195 height: 5%;196 width: 15%;197 }198 199 #face[mood="hot_anger"] #left-eye {200 transform: translate(-50%, -50%) rotate(10deg);201 }202 203 #face[mood="hot_anger"] #right-eye {204 transform: translate(-50%, -50%) rotate(-10deg);205 }206 207 /* mood panic_fear */208 #face[mood="panic_fear"] #mouth {209 background-color: black;210 height: 15%;211 width: 15%;212 margin-top: 30%;213 }214 215 #face[mood="panic_fear"] #left-eye,216 #face[mood="panic_fear"] #right-eye {217 width: 15%;218 height: 25%;219 }220 221 #face[mood="panic_fear"] #left-eye {222 transform: translate(-50%, -50%) rotate(10deg);223 }224 225 #face[mood="panic_fear"] #right-eye {226 transform: translate(-50%, -50%) rotate(-10deg);227 }228 229 /* machometer *//*230 male color: #00b1cf;231 female color: #f063a5;232 */233 234 .machometer {235 position: absolute;236 top: -3rem;237 left: 10%;238 right: 10%;239 }240 241 body[flow="result"] .machometer {242 top: 1.5rem;243 transition: top 0.3s ease;244 }245 246 .machometer .border {247 position: absolute;248 left: 2rem;249 right: 2rem;250 border-radius: 0.3rem;251 height: 1.2rem;252 margin-top: 0.4rem;253 overflow: hidden;254 255 background: -moz-linear-gradient(left, #f063a5 0%, #00b1cf 100%); /* FF3.6+ */256 background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f063a5), color-stop(100%,#00b1cf)); /* Chrome,Safari4+ */257 background: -webkit-linear-gradient(left, #f063a5 0%,#00b1cf 100%); /* Chrome10+,Safari5.1+ */258 background: -o-linear-gradient(left, #f063a5 0%,#00b1cf 100%); /* Opera 11.10+ */259 background: -ms-linear-gradient(left, #f063a5 0%,#00b1cf 100%); /* IE10+ */260 background: linear-gradient(to right, #f063a5 0%,#00b1cf 100%); /* W3C */261 }262 263 .machometer .indicator {264 position: absolute;265 margin-left: 50%;266 top: 0;267 bottom: 0;268 transition: margin-left 2.4s ease-in-out;269 }270 271 .machometer .indicator-icon {272 position: absolute;273 top: 0;274 bottom: 0;275 /*margin-left: -1rem;*/276 /*width: 2rem;*/277 margin-left: -1px;278 width: 2px;279 background: black;280 }281 282 .machometer .male,283 .machometer .female {284 width: 2rem;285 height: 2rem;286 background-repeat: no-repeat;287 background-position: center center;288 background-size: contain;289 }290 291 .machometer .male {292 float: right;293 background-image: url('img/male.jpg');294 }295 296 .machometer .female {297 float: left;298 background-image: url('img/female.jpg');299 }300 301 /* feedback */302 .feedback {303 position: absolute;304 bottom: -5rem;305 left: 10%;306 right: 10%;307 }308 309 body[flow="result"] .feedback {310 bottom: 0.5rem;311 transition: bottom 0.5s ease;312 }313 314 .feedback .success,315 .feedback .error {316 width: 4rem;317 height: 4rem;318 border-radius: 50%;319 background-color: silver;320 }321 322 .feedback .success {323 background: #79a429;324 float: left;325 }326 327 .feedback .error {328 background: #dc503d;329 float: right;330 }331 332 Enlace
El enlace para compartir es: