| OLD | NEW |
|---|
| (Empty) |
| 1 <html> | |
| 2 <head> | |
| 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
| 4 <script> | |
| 5 | |
| 6 // | |
| 7 // INK EQUATIONS | |
| 8 // | |
| 9 | |
| 10 // Animation constants. | |
| 11 var globalSpeed = 1; | |
| 12 var waveOpacityDecayVelocity = 0.8 / globalSpeed; // opacity per second. | |
| 13 var waveInitialOpacity = 0.25; | |
| 14 var waveLingerOnTouchUp = 0.2; | |
| 15 var waveMaxRadius = 150; | |
| 16 | |
| 17 // TODOs: | |
| 18 // - rather than max distance to corner, use hypotenuos(sp) (diag) | |
| 19 // - use quadratic for the fall off, move fast at the beginning, | |
| 20 // - on cancel, immediately fade out, reverse the direction | |
| 21 | |
| 22 function waveRadiusFn(touchDownMs, touchUpMs, ww, hh) { | |
| 23 // Convert from ms to s. | |
| 24 var touchDown = touchDownMs / 1000; | |
| 25 var touchUp = touchUpMs / 1000; | |
| 26 var totalElapsed = touchDown + touchUp; | |
| 27 var waveRadius = Math.min(Math.max(ww, hh), waveMaxRadius) * 1.1 + 5; | |
| 28 var dduration = 1.1 - .2 * (waveRadius / waveMaxRadius); | |
| 29 var tt = (totalElapsed / dduration); | |
| 30 | |
| 31 var ssize = waveRadius * (1 - Math.pow(80, -tt)); | |
| 32 return Math.abs(ssize); | |
| 33 } | |
| 34 | |
| 35 function waveOpacityFn(td, tu) { | |
| 36 // Convert from ms to s. | |
| 37 var touchDown = td / 1000; | |
| 38 var touchUp = tu / 1000; | |
| 39 var totalElapsed = touchDown + touchUp; | |
| 40 | |
| 41 if (tu <= 0) { // before touch up | |
| 42 return waveInitialOpacity; | |
| 43 } | |
| 44 return Math.max(0, waveInitialOpacity - touchUp * waveOpacityDecayVelocity); | |
| 45 } | |
| 46 | |
| 47 function waveOuterOpacityFn(td, tu) { | |
| 48 // Convert from ms to s. | |
| 49 var touchDown = td / 1000; | |
| 50 var touchUp = tu / 1000; | |
| 51 | |
| 52 // Linear increase in background opacity, capped at the opacity | |
| 53 // of the wavefront (waveOpacity). | |
| 54 var outerOpacity = touchDown * 0.3; | |
| 55 var waveOpacity = waveOpacityFn(td, tu); | |
| 56 return Math.max(0, Math.min(outerOpacity, waveOpacity)); | |
| 57 | |
| 58 } | |
| 59 | |
| 60 function waveGravityToCenterPercentageFn(td, tu, r) { | |
| 61 // Convert from ms to s. | |
| 62 var touchDown = td / 1000; | |
| 63 var touchUp = tu / 1000; | |
| 64 var totalElapsed = touchDown + touchUp; | |
| 65 | |
| 66 return Math.min(1.0, touchUp * 6); | |
| 67 } | |
| 68 | |
| 69 | |
| 70 // Determines whether the wave should be completely removed. | |
| 71 function waveDidFinish(wave, radius) { | |
| 72 var waveOpacity = waveOpacityFn(wave.tDown, wave.tUp); | |
| 73 // Does not linger any more. | |
| 74 // var lingerTimeMs = waveLingerOnTouchUp * 1000; | |
| 75 | |
| 76 // If the wave opacity is 0 and the radius exceeds the bounds | |
| 77 // of the element, then this is finished. | |
| 78 if (waveOpacity < 0.01 && radius >= wave.maxRadius) { | |
| 79 return true; | |
| 80 } | |
| 81 return false; | |
| 82 }; | |
| 83 | |
| 84 // | |
| 85 // DRAWING | |
| 86 // | |
| 87 | |
| 88 function animateIcon() { | |
| 89 var el = document.getElementById('button_toolbar0'); | |
| 90 el.classList.add('animate'); | |
| 91 setTimeout(function(){ | |
| 92 el.classList.remove('animate'); | |
| 93 el.classList.toggle('selected'); | |
| 94 }, 500); | |
| 95 } | |
| 96 | |
| 97 | |
| 98 function drawRipple(canvas, x, y, radius, innerColor, outerColor, innerColorAlph
a, outerColorAlpha) { | |
| 99 var ctx = canvas.getContext('2d'); | |
| 100 if (outerColor) { | |
| 101 ctx.fillStyle = outerColor; | |
| 102 ctx.fillRect(0,0,canvas.width, canvas.height); | |
| 103 } | |
| 104 | |
| 105 ctx.beginPath(); | |
| 106 ctx.arc(x, y, radius, 0, 2 * Math.PI, false); | |
| 107 ctx.fillStyle = innerColor; | |
| 108 ctx.fill(); | |
| 109 } | |
| 110 | |
| 111 function drawLabel(canvas, label, fontSize, color, alignment) { | |
| 112 var ctx = canvas.getContext('2d'); | |
| 113 ctx.font= fontSize + 'px Helvetica'; | |
| 114 | |
| 115 var metrics = ctx.measureText(label); | |
| 116 var width = metrics.width; | |
| 117 var height = metrics.height; | |
| 118 ctx.fillStyle = color; | |
| 119 | |
| 120 var xPos = (canvas.width/2 - width)/2; | |
| 121 | |
| 122 if (alignment === 'left') { xPos = 16; } | |
| 123 | |
| 124 ctx.fillText(label, xPos, canvas.height/2 - (canvas.height/2 - fontSize +2) /
2); | |
| 125 } | |
| 126 | |
| 127 // | |
| 128 // BUTTON SETUP | |
| 129 // | |
| 130 | |
| 131 function createWave(elem) { | |
| 132 var elementStyle = window.getComputedStyle(elem); | |
| 133 var fgColor = elementStyle.color; | |
| 134 | |
| 135 var wave = { | |
| 136 waveColor: fgColor, | |
| 137 maxRadius: 0, | |
| 138 isMouseDown: false, | |
| 139 mouseDownStart: 0.0, | |
| 140 mouseUpStart: 0.0, | |
| 141 tDown: 0, | |
| 142 tUp: 0 | |
| 143 }; | |
| 144 return wave; | |
| 145 } | |
| 146 | |
| 147 function removeWaveFromScope(scope, wave) { | |
| 148 if (scope.waves) { | |
| 149 var pos = scope.waves.indexOf(wave); | |
| 150 scope.waves.splice(pos, 1); | |
| 151 } | |
| 152 }; | |
| 153 | |
| 154 | |
| 155 function setUpPaperByClass( classname ) { | |
| 156 var elems = document.querySelectorAll( classname ); | |
| 157 [].forEach.call( elems, function( el ) { | |
| 158 setUpPaper(el); | |
| 159 }); | |
| 160 } | |
| 161 | |
| 162 function setUpPaper(elem) { | |
| 163 var pixelDensity = 2; | |
| 164 | |
| 165 var elementStyle = window.getComputedStyle(elem); | |
| 166 var fgColor = elementStyle.color; | |
| 167 var bgColor = elementStyle.backgroundColor; | |
| 168 elem.width = elem.clientWidth; | |
| 169 elem.setAttribute('width', elem.clientWidth * pixelDensity + "px"); | |
| 170 elem.setAttribute('height', elem.clientHeight * pixelDensity + "px"); | |
| 171 | |
| 172 var isButton = elem.classList.contains( 'button' ) || elem.classList.contains(
'button_floating' ) | elem.classList.contains( 'button_menu' ); | |
| 173 var isToolbarButton = elem.classList.contains( 'button_toolbar' ); | |
| 174 | |
| 175 elem.getContext('2d').scale(pixelDensity, pixelDensity) | |
| 176 | |
| 177 var scope = { | |
| 178 backgroundFill: true, | |
| 179 element: elem, | |
| 180 label: 'Button', | |
| 181 waves: [], | |
| 182 }; | |
| 183 | |
| 184 | |
| 185 scope.label = elem.getAttribute('value') || elementStyle.content; | |
| 186 scope.labelFontSize = elementStyle.fontSize.split("px")[0]; | |
| 187 | |
| 188 drawLabel(elem, scope.label, scope.labelFontSize, fgColor, elem.style.textAlig
n); | |
| 189 | |
| 190 | |
| 191 // | |
| 192 // RENDER FOR EACH FRAME | |
| 193 // | |
| 194 var onFrame = function() { | |
| 195 var shouldRenderNextFrame = false; | |
| 196 | |
| 197 // Clear the canvas | |
| 198 var ctx = elem.getContext('2d'); | |
| 199 ctx.clearRect(0, 0, elem.width, elem.height); | |
| 200 | |
| 201 var deleteTheseWaves = []; | |
| 202 // The oldest wave's touch down duration | |
| 203 var longestTouchDownDuration = 0; | |
| 204 var longestTouchUpDuration = 0; | |
| 205 // Save the last known wave color | |
| 206 var lastWaveColor = null; | |
| 207 | |
| 208 for (var i = 0; i < scope.waves.length; i++) { | |
| 209 var wave = scope.waves[i]; | |
| 210 | |
| 211 if (wave.mouseDownStart > 0) { | |
| 212 wave.tDown = now() - wave.mouseDownStart; | |
| 213 } | |
| 214 if (wave.mouseUpStart > 0) { | |
| 215 wave.tUp = now() - wave.mouseUpStart; | |
| 216 } | |
| 217 | |
| 218 // Determine how long the touch has been up or down. | |
| 219 var tUp = wave.tUp; | |
| 220 var tDown = wave.tDown; | |
| 221 longestTouchDownDuration = Math.max(longestTouchDownDuration, tDown); | |
| 222 longestTouchUpDuration = Math.max(longestTouchUpDuration, tUp); | |
| 223 | |
| 224 // Obtain the instantenous size and alpha of the ripple. | |
| 225 var radius = waveRadiusFn(tDown, tUp, elem.width, elem.height); | |
| 226 var waveAlpha = waveOpacityFn(tDown, tUp); | |
| 227 var waveColor = cssColorWithAlpha(wave.waveColor, waveAlpha); | |
| 228 lastWaveColor = wave.waveColor; | |
| 229 | |
| 230 // Position of the ripple. | |
| 231 var x = wave.startPosition.x; | |
| 232 var y = wave.startPosition.y; | |
| 233 | |
| 234 // Ripple gravitational pull to the center of the canvas. | |
| 235 if (wave.endPosition) { | |
| 236 | |
| 237 var translateFraction = waveGravityToCenterPercentageFn(tDown, tUp, wave
.maxRadius); | |
| 238 | |
| 239 // This translates from the origin to the center of the view based on t
he max dimension of | |
| 240 var translateFraction = Math.min(1, radius / wave.containerSize * 2 / Ma
th.sqrt(2) ); | |
| 241 | |
| 242 x += translateFraction * (wave.endPosition.x - wave.startPosition.x); | |
| 243 y += translateFraction * (wave.endPosition.y - wave.startPosition.y); | |
| 244 } | |
| 245 | |
| 246 // If we do a background fill fade too, work out the correct color. | |
| 247 var bgFillColor = null; | |
| 248 if (scope.backgroundFill) { | |
| 249 var bgFillAlpha = waveOuterOpacityFn(tDown, tUp); | |
| 250 bgFillColor = cssColorWithAlpha(wave.waveColor, bgFillAlpha); | |
| 251 } | |
| 252 | |
| 253 // Draw the ripple. | |
| 254 drawRipple(elem, x, y, radius, waveColor, bgFillColor); | |
| 255 | |
| 256 // Determine whether there is any more rendering to be done. | |
| 257 var shouldRenderWaveAgain = !waveDidFinish(wave, radius); | |
| 258 shouldRenderNextFrame = shouldRenderNextFrame || shouldRenderWaveAgain; | |
| 259 if (!shouldRenderWaveAgain) { | |
| 260 deleteTheseWaves.push(wave); | |
| 261 } | |
| 262 } | |
| 263 | |
| 264 if (shouldRenderNextFrame) { | |
| 265 window.requestAnimationFrame(onFrame); | |
| 266 } else { | |
| 267 // If there is nothing to draw, clear any drawn waves now because | |
| 268 // we're not going to get another requestAnimationFrame any more. | |
| 269 var ctx = elem.getContext('2d'); | |
| 270 ctx.clearRect(0, 0, elem.width, elem.height); | |
| 271 } | |
| 272 | |
| 273 // Draw the label at the very last point so it is on top of everything. | |
| 274 drawLabel(elem, scope.label, scope.labelFontSize, fgColor, elem.style.textAl
ign); | |
| 275 | |
| 276 for (var i = 0; i < deleteTheseWaves.length; ++i) { | |
| 277 var wave = deleteTheseWaves[i]; | |
| 278 removeWaveFromScope(scope, wave); | |
| 279 } | |
| 280 }; | |
| 281 | |
| 282 // | |
| 283 // MOUSE DOWN HANDLER | |
| 284 // | |
| 285 | |
| 286 elem.addEventListener('mousedown', function(e) { | |
| 287 var wave = createWave(e.target); | |
| 288 var elem = scope.element; | |
| 289 | |
| 290 wave.isMouseDown = true; | |
| 291 wave.tDown = 0.0; | |
| 292 wave.tUp = 0.0; | |
| 293 wave.mouseUpStart = 0.0; | |
| 294 wave.mouseDownStart = now(); | |
| 295 | |
| 296 var width = e.target.width / 2; // Retina canvas | |
| 297 var height = e.target.height / 2; | |
| 298 var touchX = e.clientX - e.target.offsetLeft - e.target.offsetParent.offsetL
eft; | |
| 299 var touchY = e.clientY - e.target.offsetTop - e.target.offsetParent.offsetTo
p; | |
| 300 wave.startPosition = {x:touchX, y:touchY}; | |
| 301 | |
| 302 if (elem.classList.contains("recenteringTouch")) { | |
| 303 wave.endPosition = {x: width / 2, y: height / 2}; | |
| 304 wave.slideDistance = dist(wave.startPosition, wave.endPosition); | |
| 305 } | |
| 306 wave.containerSize = Math.max(width, height); | |
| 307 wave.maxRadius = distanceFromPointToFurthestCorner(wave.startPosition, {w: w
idth, h: height}); | |
| 308 elem.classList.add("activated"); | |
| 309 scope.waves.push(wave); | |
| 310 window.requestAnimationFrame(onFrame); | |
| 311 return false; | |
| 312 }); | |
| 313 | |
| 314 // | |
| 315 // MOUSE UP HANDLER | |
| 316 // | |
| 317 | |
| 318 elem.addEventListener('mouseup', function(e) { | |
| 319 elem.classList.remove("activated"); | |
| 320 | |
| 321 for (var i = 0; i < scope.waves.length; i++) { | |
| 322 // Declare the next wave that has mouse down to be mouse'ed up. | |
| 323 var wave = scope.waves[i]; | |
| 324 if (wave.isMouseDown) { | |
| 325 wave.isMouseDown = false | |
| 326 wave.mouseUpStart = now(); | |
| 327 wave.mouseDownStart = 0; | |
| 328 wave.tUp = 0.0; | |
| 329 break; | |
| 330 } | |
| 331 } | |
| 332 return false; | |
| 333 }); | |
| 334 | |
| 335 elem.addEventListener('mouseout', function(e) { | |
| 336 elem.classList.remove("activated"); | |
| 337 | |
| 338 for (var i = 0; i < scope.waves.length; i++) { | |
| 339 // Declare the next wave that has mouse down to be mouse'ed up. | |
| 340 var wave = scope.waves[i]; | |
| 341 if (wave.isMouseDown) { | |
| 342 wave.isMouseDown = false | |
| 343 wave.mouseUpStart = now(); | |
| 344 wave.mouseDownStart = 0; | |
| 345 wave.tUp = 0.0; | |
| 346 wave.cancelled = true; | |
| 347 break; | |
| 348 } | |
| 349 } | |
| 350 return false; | |
| 351 }); | |
| 352 | |
| 353 return scope; | |
| 354 }; | |
| 355 | |
| 356 // Shortcuts. | |
| 357 var pow = Math.pow; | |
| 358 var now = function() { return new Date().getTime(); }; | |
| 359 | |
| 360 // Quad beizer where t is between 0 and 1. | |
| 361 function quadBezier(t, p0, p1, p2, p3) { | |
| 362 return pow(1 - t, 3) * p0 + | |
| 363 3 * pow(1 - t, 2) * t * p1 + | |
| 364 (1 - t) * pow(t, 2) * p2 + | |
| 365 pow(t, 3) * p3; | |
| 366 } | |
| 367 | |
| 368 function easeIn(t) { | |
| 369 return quadBezier(t, 0.4, 0.0, 1, 1); | |
| 370 } | |
| 371 | |
| 372 function cssColorWithAlpha(cssColor, alpha) { | |
| 373 var parts = cssColor.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); | |
| 374 if (typeof alpha == 'undefined') { | |
| 375 alpha = 1; | |
| 376 } | |
| 377 if (!parts) { | |
| 378 return 'rgba(255, 255, 255, ' + alpha + ')'; | |
| 379 } | |
| 380 return 'rgba(' + parts[1] + ', ' + parts[2] + ', ' + parts[3] + ', ' + alpha
+ ')'; | |
| 381 } | |
| 382 | |
| 383 function dist(p1, p2) { | |
| 384 return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2)); | |
| 385 } | |
| 386 | |
| 387 function distanceFromPointToFurthestCorner(point, size) { | |
| 388 var tl_d = dist(point, {x: 0, y: 0}); | |
| 389 var tr_d = dist(point, {x: size.w, y: 0}); | |
| 390 var bl_d = dist(point, {x: 0, y: size.h}); | |
| 391 var br_d = dist(point, {x: size.w, y: size.h}); | |
| 392 return Math.max(Math.max(tl_d, tr_d), Math.max(bl_d, br_d)); | |
| 393 } | |
| 394 | |
| 395 | |
| 396 function toggleDialog() { | |
| 397 var el = document.getElementById('dialog'); | |
| 398 el.classList.toggle("visible"); | |
| 399 } | |
| 400 | |
| 401 function toggleMenu() { | |
| 402 var el = document.getElementById('menu'); | |
| 403 el.classList.toggle("visible"); | |
| 404 } | |
| 405 | |
| 406 | |
| 407 // Initialize | |
| 408 | |
| 409 function init() { | |
| 410 setUpPaperByClass( '.paper' ); | |
| 411 } | |
| 412 | |
| 413 window.addEventListener('DOMContentLoaded', init, false); | |
| 414 </script> | |
| 415 | |
| 416 <style type="text/css" media="screen"> | |
| 417 body { | |
| 418 background-color: #f9f9f9; | |
| 419 margin:0; padding:0; | |
| 420 font-family:sans-serif; | |
| 421 font-size:14px; | |
| 422 } | |
| 423 | |
| 424 * { | |
| 425 | |
| 426 -webkit-user-select: none; | |
| 427 cursor:default; | |
| 428 } | |
| 429 .toolbar { | |
| 430 background-color:#673AB7; | |
| 431 height:56px; | |
| 432 overflow:hidden; | |
| 433 } | |
| 434 | |
| 435 | |
| 436 #dialog { | |
| 437 width:250px; | |
| 438 height:120px; | |
| 439 opacity:0.0; | |
| 440 pointer-events:none; | |
| 441 -webkit-transform: scale(0.95) translate3d(0,100px,0);; | |
| 442 -webkit-transition: -webkit-transform 0.3s ease-out, height 0.2s ease-out, opa
city 0.2s ease-out, -webkit-box-shadow .5s ease-out; | |
| 443 | |
| 444 -webkit-box-shadow:0 10px 10px rgba(0,0,0,0.12), 0 5px 5px rgba(0,0,0,0.24); | |
| 445 -webkit-transition-delay:0.25s; | |
| 446 | |
| 447 } | |
| 448 | |
| 449 #dialog.visible { | |
| 450 pointer-events:all; | |
| 451 opacity:1.0; | |
| 452 -webkit-transform: scale(1.0) translate3d(0,0,0);; | |
| 453 width:250px; | |
| 454 height:160px; | |
| 455 -webkit-box-shadow:0 19px 19px rgba(0,0,0,0.30), 0 15px 6px rgba(0,0,0,0.2
2); | |
| 456 -webkit-transition-delay:0.0s; | |
| 457 | |
| 458 } | |
| 459 | |
| 460 | |
| 461 .dialog { | |
| 462 top:120px; | |
| 463 right: 0; | |
| 464 left: 50%; | |
| 465 margin-left:-125px; | |
| 466 padding:24px 16px 20px 24px; | |
| 467 position:absolute; | |
| 468 | |
| 469 background:white; | |
| 470 color:rgba(0,0,0,0.5); | |
| 471 margin-bottom:38px; | |
| 472 overflow:hidden; | |
| 473 } | |
| 474 .dialog h1 { | |
| 475 font-size:20px; | |
| 476 font-weight:normal; | |
| 477 padding:0; margin-top:0; | |
| 478 } | |
| 479 | |
| 480 .dialog .button { | |
| 481 position:absolute; | |
| 482 top:160px; | |
| 483 right:10px; | |
| 484 } | |
| 485 | |
| 486 /*#menu { | |
| 487 width:250px; | |
| 488 height:120px; | |
| 489 opacity:0.0; | |
| 490 pointer-events:none; | |
| 491 -webkit-transform: scale(0.95) translate3d(0,100px,0);; | |
| 492 -webkit-transition: -webkit-transform 0.3s ease-out, height 0.2s ease-out, opa
city 0.2s ease-out, -webkit-box-shadow .5s ease-out; | |
| 493 | |
| 494 -webkit-box-shadow:0 10px 10px rgba(0,0,0,0.12), 0 5px 5px rgba(0,0,0,0.24); | |
| 495 } | |
| 496 | |
| 497 #menu.visible { | |
| 498 pointer-events:all; | |
| 499 opacity:1.0; | |
| 500 -webkit-transform: scale(1.0) translate3d(0,0,0);; | |
| 501 width:250px; | |
| 502 height:160px; | |
| 503 -webkit-box-shadow:0 19px 19px rgba(0,0,0,0.30), 0 15px 6px rgba(0,0,0,0.2
2); | |
| 504 }*/ | |
| 505 | |
| 506 | |
| 507 | |
| 508 | |
| 509 .menu { | |
| 510 width:160px; | |
| 511 height:160px; | |
| 512 background:white; | |
| 513 position:absolute; | |
| 514 right:8px; | |
| 515 top: 8px; | |
| 516 padding:0; | |
| 517 | |
| 518 | |
| 519 opacity:0.0; | |
| 520 pointer-events:none; | |
| 521 -webkit-transform: scale(0.95) translate3d(0,0,0);; | |
| 522 -webkit-transition: -webkit-transform 0.3s ease-out, width 0.2s ease-out, heig
ht 0.3s ease-out, opacity 0.1s ease-out, -webkit-box-shadow .5s ease-out; | |
| 523 | |
| 524 -webkit-box-shadow:0 10px 10px rgba(0,0,0,0.12), 0 5px 5px rgba(0,0,0,0.24); | |
| 525 -webkit-transition-delay:0.35s; | |
| 526 overflow:hidden; | |
| 527 | |
| 528 | |
| 529 } | |
| 530 | |
| 531 .menu.visible { | |
| 532 width:180px; | |
| 533 height:192px; | |
| 534 pointer-events:all; | |
| 535 opacity:1.0; | |
| 536 -webkit-transform: scale(1.0) translate3d(0,0,0);; | |
| 537 -webkit-box-shadow:0 10px 10px rgba(0,0,0,0.12), 0 5px 5px rgba(0,0,0,0.24); | |
| 538 -webkit-transition-delay:0.15s; | |
| 539 | |
| 540 } | |
| 541 | |
| 542 | |
| 543 | |
| 544 .menu div { | |
| 545 height:48px; | |
| 546 padding:0; | |
| 547 | |
| 548 } | |
| 549 | |
| 550 .menu canvas { | |
| 551 height:48px; | |
| 552 width: 100%; | |
| 553 } | |
| 554 | |
| 555 | |
| 556 .button_floating { | |
| 557 width:56px; | |
| 558 height:56px; | |
| 559 color:#fff; | |
| 560 background-color:#039BE5; | |
| 561 border-radius:28px; | |
| 562 position:absolute; | |
| 563 top:388px; | |
| 564 right:40px; | |
| 565 } | |
| 566 | |
| 567 .container { | |
| 568 } | |
| 569 | |
| 570 | |
| 571 | |
| 572 | |
| 573 .button { | |
| 574 -webkit-border-radius: 2px; | |
| 575 -moz-border-radius: 2px; | |
| 576 border-radius: 2px; | |
| 577 } | |
| 578 | |
| 579 .button_menu.container { | |
| 580 margin: 0px; | |
| 581 height: 48px; | |
| 582 padding: 0; | |
| 583 } | |
| 584 | |
| 585 | |
| 586 | |
| 587 .button_menu { | |
| 588 -webkit-border-radius: 2px; | |
| 589 -moz-border-radius: 2px; | |
| 590 border-radius: 2px; | |
| 591 text-align:left !important; | |
| 592 color:rgb(100,100,100); | |
| 593 } | |
| 594 | |
| 595 .button_toolbar { | |
| 596 -webkit-border-radius: 84px; | |
| 597 | |
| 598 color: rgb(255,255,255); | |
| 599 width: 80px; | |
| 600 height: 80px; | |
| 601 float:left; | |
| 602 margin-right:-24px; | |
| 603 margin-top:-12px; | |
| 604 background-color: rgba(0, 0, 0, 0); | |
| 605 } | |
| 606 | |
| 607 #button_small { | |
| 608 color: rgb(100, 100, 100); | |
| 609 background-color: #ffffff; | |
| 610 width: 80px; | |
| 611 height: 32px; | |
| 612 | |
| 613 } | |
| 614 | |
| 615 #button_blue { | |
| 616 color: rgb(255, 255, 255); | |
| 617 background-color: #0277BD; | |
| 618 width: 80px; | |
| 619 height: 32px; | |
| 620 } | |
| 621 | |
| 622 #button_borderless_square { | |
| 623 color: #ffffff; | |
| 624 background-color: #f9f9f9; | |
| 625 border: 1px solid #f0f0f0; | |
| 626 width: 100px; | |
| 627 height: 100px; | |
| 628 background-color: rgb(255, 255, 255, 0); | |
| 629 background-image:url(http://wallpaperandbackground.com/wp-content/uploads/2014
/03/Field-Landscape.jpg); | |
| 630 background-size:cover; | |
| 631 | |
| 632 } | |
| 633 | |
| 634 #button_borderless { | |
| 635 color: #777777; | |
| 636 background-color: #ffffff; | |
| 637 width:80px; | |
| 638 height: 32px; | |
| 639 margin-right:72px; | |
| 640 content: "CANCEL"; | |
| 641 } | |
| 642 | |
| 643 #button_borderless_blue { | |
| 644 color: #4285F4; | |
| 645 background-color: #ffffff; | |
| 646 width: 64px; | |
| 647 height: 32px; | |
| 648 content:"OK"; | |
| 649 } | |
| 650 | |
| 651 #button_large { | |
| 652 color: rgb(255, 255, 255); | |
| 653 width: 100%; | |
| 654 height: 360px; | |
| 655 background-color:#81D4FA; | |
| 656 } | |
| 657 | |
| 658 #button_toolbar1 { | |
| 659 content: ''; | |
| 660 color:transparent; | |
| 661 margin-left:-4px; | |
| 662 | |
| 663 } | |
| 664 | |
| 665 #button_toolbar2 { | |
| 666 content: '★'; | |
| 667 float:right; | |
| 668 } | |
| 669 | |
| 670 #button_toolbar3 { | |
| 671 content: 'MENU'; | |
| 672 font-size: 14px; | |
| 673 width: 88px; | |
| 674 height:88px; | |
| 675 margin-top: -16px; | |
| 676 color:#7FFFFF; | |
| 677 float:right; | |
| 678 margin-right:0; | |
| 679 | |
| 680 } | |
| 681 | |
| 682 .caption { | |
| 683 z-index: 100; | |
| 684 background-color: red; | |
| 685 } | |
| 686 | |
| 687 #button_toolbar0.animate { | |
| 688 -webkit-animation: play 0.5s steps(16); | |
| 689 | |
| 690 } | |
| 691 | |
| 692 | |
| 693 .button.raised { | |
| 694 -webkit-transition: -webkit-box-shadow 0.2s; | |
| 695 -webkit-transition-delay: 0.2s; | |
| 696 -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.12), 0 1px 1px rgba(0,0,0,0.24); | |
| 697 } | |
| 698 | |
| 699 .button.raised.activated { | |
| 700 -webkit-box-shadow: 0px 10px 10px rgba(0,0,0,0.19), 0px 6px 3px rgba(0,0,0,0.2
3); | |
| 701 -webkit-transition-delay: 0.0s; | |
| 702 } | |
| 703 | |
| 704 | |
| 705 .floating { | |
| 706 -webkit-transition: -webkit-box-shadow 0.2s; | |
| 707 -webkit-transition-delay: 0.2s; | |
| 708 -webkit-box-shadow:0 3px 3px rgba(0,0,0,0.16), 0 3px 3px rgba(0,0,0,0.23); | |
| 709 } | |
| 710 | |
| 711 .floating.activated { | |
| 712 -webkit-box-shadow: 0px 14px 14px rgba(0,0,0,0.25), 0px 10px 5px rgba(0,0,0,0.
22); | |
| 713 -webkit-transition-delay: 0.0s; | |
| 714 } | |
| 715 | |
| 716 #title { | |
| 717 color:white; | |
| 718 font-size:20px; | |
| 719 line-height:58px; | |
| 720 margin-left:24px; | |
| 721 } | |
| 722 | |
| 723 .content { | |
| 724 padding-left:72px; padding-top:24px; padding-right:144px; | |
| 725 line-height:20px; | |
| 726 color:#666; | |
| 727 } | |
| 728 | |
| 729 @-webkit-keyframes play { | |
| 730 from { background-position: 0px 0px; } | |
| 731 to { background-position: 0px -384px; } | |
| 732 } | |
| 733 | |
| 734 #button_toolbar0 { | |
| 735 pointer-events: none; | |
| 736 position:absolute; | |
| 737 top:16px; | |
| 738 left: 24px; | |
| 739 content: "\00a0"; | |
| 740 width:24px; | |
| 741 height:24px; | |
| 742 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAGACA
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
n8mZYAAAAASUVORK5CYII=); | |
| 743 } | |
| 744 | |
| 745 #button_toolbar0.selected { | |
| 746 background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAGACA
YAAAC3NaJiAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAAAAAAAAB6mUWpAAAABx0RVh0U29mdHdhcm
UAQWRvYmUgRmlyZXdvcmtzIENTNui8sowAABjoSURBVHic7Z15nFxVlce/tzrpdGcle4CQhH0PhiVhBB
QVJS6oiDijgjgzbiMqo+I4g4rbuIyC4vhxGXc/47gg4DYgjjguCCg7CMRIBMKWECAhSXenO91Vv/njnN
vv1qtXVa86AdHp8/m8z6t69e75vXe387vnnPcqSOLxlMrjqv2JAKCTKpJ0jKQ3SprWTmfcSgO48lskbZ
P0XkkTywCUqiJJxwCfAZYCAZjg+1KFy1z5zTLZJumjO62KxqK8NEBO+YCkD0ua2k55HmBCkxOeBXwSOB
SoARcBXwemS9qlhe4qsMH3AARJhJC1l6TnAZ8G9oqHgEeAQVo3bAV4AHgRsC4erLsDv7qzE+W40rktFK
dSA7rSA3UAIYTHJJ0HLB7jHawjqZ4GAAe5TNIQWRsIuBz4ELCV1tNLbINMHu9e9KcbBzsC0vFklwMZlP
RBSd1lAEpNdiGEq4AzgVuxRh/xfXt50tgDgFqtFiS1veu2c1EzqVQqomzVxDKdnDwWGQfY+QC1Wq2csR
8LgKRpIYTXSTq2k0Jlz5st6XyfWW+QdHArnZ3ORXtI+k9J230+WiXpqTsFQNLBkn4sqebKr2mlvCMASc
dK+q0rrkm6VNJBJe64NYCkiqQXSfp9MkV/RdJu7ZTnARrmIkmTgb8D3gUswOaeXwDfAHolLcSm6xHMBt
ftQwh1Rr+OF0nqAd4NnAVE+ytgCzDkioaBAd/6gP7k+3qMU90XAfJ30IXRldS4B2BGmaoBHsIY4KjkeV
G/pHOA2cBz/PAwcDdWBVOBiV6uK7ef6Of0NwVwkHskvRH4rIN0ATcC53rhKb5NTj5PcfBhjKRl0qybSj
pI0pVJL/qwd4C20sk4OFLSjQ7SL+kcSZN2GoCf/DSfGiRps6Q3SWppascyFz1X0j0O8qik08oClF0EXg
68A+vnFaCnrF0oxSoqlYokXeLnV4ALnWG0lYYVTiuJV91OeVrtY+FFHcmTz+iPAzx5ACR1S5rfbtroaH
3g50+TdLykz0j6laRDi3R2NBf5wmM3Sa+S9EOfjyLTOKcVQLtZsRs4APM/vBg4GIjT9WbgWuAOSZUQQq
2ZkqJju/gM+iVJ90qq+hVX/fuXJK1UE89LyyqSdIKkK3zujzLshuefJR2iFkvYllUkKQAnAs/KldkGrA
HuBDbRyTqt4A6Ok/SgiqXfrduXJJ0maW8Zl2p6B0UAXZLeL2nElY7IKHteBiX9UdJ/SXqtpAPlpKBtN5
XR9atc0VZJF/h2k6Qtyph2lO2S7pP0bRkbKeUUfGnS0D+QNEc2cp8n6WOSfiPpsRzY/TK6Xwqg1+tako
YkvTlXjXMkPdOr8xeSNkm6UNLkUgCuaKmk1Q6yStIh+XN8lM+UrSWOKNUGucJnKVs6fUEFvabgwjoiXr
MlXeYAmyW9tBOAttN1COFR4BOYs68HOEztpui0vErQFtnUcCa2yLgwhLCp3R0Uf2ldaKJK+IqizriVv9
UQhsuem8qT1yaPAzxxAD7PtDWTrRQ0O94t40D/KOluSZ+WLQqbxs9SnWWm65Nlxn+9z0M1NyoXSFrWCq
gswFlqtFwRaK2k8yQVzktlAV6vzC5HqcooTAS6W9K/STpUUlenAH+b2IEoA5L+W+bqH0mA7pJ5Ag6WWb
tSAK+QMYeqzPDH6rpc0nIZCbs9B7RG0vtk5rSU0R9wBd/3Bpbf1dv9SveW9G6ZOY308gZJC8sAnCSpzw
v9i8y4RyV3STrKz6tI2tev/A5JbytbRScqoy3nSNpV0tVJe3xbSaDC72iJpFkpQKuRPIRF9gB6QgjrgP
Mw2g7wQuCv48khhGoI4Z4QwsZUSSuA7QlAnCYuA77pn3uBsyQd2EJH6TuY5Fc5iDn9bvPjhwBvUQsqU/
oO5PY4hLAKuACj9AAvB56/M+4gPfdC4If+eQbwZkmFEdtWRr8f+D3wKBYnHuU2IYStks4HjsJ8qd/BfK
gN0pQXyeaWWa54m6S+1Nsim+ROANZLuiX3W3uAHZEU4E9vMscBnjwAkqZLWvB4xtH+Hvh+COE1stXmfE
lHSTparRYkzexB7pz9JN3mdmBAtoS9VdJGST+TNDOvs63BSU7ukhn0IgojSQ9IOqAZQJkqWga8Epsyim
L5MzCfUqG0BJDFCl4HLMImtfUOApYlMoJFP5rG1trdwXHAyf55DXAdFqsBMzpb/PNBahK4aArgBv0fgD
lkU3JUWAWuIstjOYgmkapWd/BcskjUzcAlwO7+fRuWY/EH/77Qt3IAbp3egEWWtgNf9KtdlADcDqzy79
Np0g7N7uClwDH++SosBWseEPv7ZszK3YGFtiaVBpC0BHgtRlX6gM+5O2ExFjsDuB9b9a+ivqGntARw5n
A6cJgf+gmWvARWPb3++V4sY+pe4EE/diDQ4ObM38G+2KCqYBG9z4UQtvpveyTn3+cr/81YNYHlgaW5YY
UAm4HvYfV7MfBrv7Mesgau4tFWJ2IRYDrmGa6TfLB0vaRzMd6zOYQw5D9NTgAGsKqJcgfWq3qBQ7yaR9
3MRcHSYeCm3OGpQIyG5wFuB24AHvN9VwpQdrpeLukRnz1vl7Qg+a1L0jxJU6IxSmfTsu6cB4EPYJ1gAz
bRxTtuTH1LpCPi5fXbJWmkVUwtrZWOAnUeIyiOEzSRJw+r+MsCkHnnl5biSGXGQe78/WWe4JslrWimsz
RtyRU8XNIvE8ryK0n77xQAWejl+kR5v8ztf42kU5zpdXUM4B745yrLTJDMlXBHQsY2y6JU58u8YqXjB1
2SXqYsI0GSrpP0SRltlMwjEz+PyNIiSvkquiW9RplLTbJIx0u8WqJcK6OP8v1T2gLIwitvT64sZkcdKu
njyrwuqyV9SlmU6hK1C7HI1gEfkDmh4m1/R+YDeoGyQOmgpH+SJZdJ5mp7fctGlkU7PiVLvZWsl3xR0l
xJi1TvzrlI0gpZLE0y/90BTQEk7S7pa8r8dAMyz+IukibIQlvVRNmRsjaKTsJvyPlpM4AzkrrcIuk98j
RoSc9XZtG2y7xaUyVdnFTX6UlNFALM8up4SNKoi0Y278Q8I8kC1rvIQmCx96yWtGdLAP9hgSyc3u3fJ8
hWN7Fq1sqepkDSW5PjX1DiCW4KUNBdV0rakFTNO31kT1MW+uqXdEquXKmBtlA2sKJcKmmO/7YiAb5F0u
7NAFrZg2cBy/3z/cBHQwgxQewEskcGfk7yvEHRlTY7Pk/mzrzL93GmnJXc2RbZAxENOsu2wQTvLbOSYy
skrXOA30qaN2aAJqBzZPkV35Z0dpHZTAHG7PGSjZNKCGGgCCDKuEvt8QWQRWh7W53TEfmNUqvVQghhT8
yPUZX0QV9OFV5FR8p9oL1eRrxqMgu3Mq+z43EgqUdGX36szOJJZlrPU7JG7ghAFkJ5imxK3pgoHpKxvM
/KMkbOlrvWOpkqFkp6l89HkWTVZOnS75RZtjV+/BFJp0oKbQFkzOI0mW8u2lzJpugLZM7Ad0h6OPntPk
nfkhGvqYUAMrJ1vIzf9CeF+2WhruNluV6fzP1+o6SPyMjAgF/EjFEAv62D/IeHkoIjMqp4hsyK7SWjK2
lw7ieSXql6tvdTGRkeBZjuV6ik4N2SzpW0yO/uryT9OjlnSEZzlvsdR7lNVoUNrOJML7RJ0pdla4EuWS
86WVkevGSG5kOyTvBpZcb/AVmAr5C2zPVCL5QPfxnPfFOu2tbLniaaKutJcUxskfQGv6BCgCBpQuIOmC
V7cmtronyVLKu/S1bvkadu94uLXKptN10io4JpuPdKSUf778+QtZFk7fV1Je7llgCyCOtPE8XDkr4raV
///WBZz4pyhcwNR1mAPST93Av3y7ruXP9tN0k/SpTfKunwghpoW0VHyeaZd8gnMVlX/ryyHnO/pMIIYB
mAioynRjreLZuTYo/ZLMuta+Z37Wy6lo2DOJMOyVZATZPsxwKwzKusKumrygUkdhjAC+0jG1hLSpw7Nm
ZXNkCUAnTEKsZT0zsWHy+7S3q6mj2A0kkjJ2WmyNYJH5QxivskPS3VOZZuOkHSYkmvlvQ9GQFIY2sfH5
PnV9J04HDgJGAlsA9ZngVY7P82YG0IYTLtniRypROBJcCzsQyQ5VjwIY6DKhYC+BkWxBjxC+gDvlYIIE
uJngmscKUnYGGVNNVqCxaR+gHwU8yl/wrgZcCumHv/58Da9GpT2/tL1Sd0S2bV1kj6nCyhZqaMvrxP9Y
xPMiL2wqI26AKeB8SeICwecC3wI6+Ge7Cg3aux0O+BZN18APhf4LtYFGQrtn5uoC39Mmff+TIWN91/my
lLyfqN6u30kMxWv9LHwnf82NV+lw3+olNlBj+y5KkyH93/qJ6yj8jWB2d6132FLHARZZvMIDW1aD2yJP
uLZHwnSk3SnbK0q0Uy+31Brt3Wy6zfnAYA2ZpruSzf+hHVywOSPiHjsBVZzvWVymx0zatmpWxQFrLrfW
Tek1QelT0yucIL7iIzPGkC/lbZQmTPpGcWAvTIeGksdLGkZytjbId5tQ0mylfLOsDkRE9LXrRctpA4VZ
4kJvOjni7rYVGGZIz88LylawfQpfqQ1SJJ/676xo4NObuhh7QDiOKus5YNWViwLIAa0x3qGrKVlALwE/
eUPehwZ74hywK0defIUv6ryqVZtQOIMu4v+gsB8DHTXcRdx+SQApCtD+ZgFmwFMDeE8K/kYsulAXzkzs
Roy1G+HY5lK0zDEg5+CFxRCkC2PJqGMYsjEqV7YYkyXbkivZidLgaQ0ZbJGP14iitbjiUnzaKebIFxo8
eAP2Lk4HrgetczOhCCD4pJwBkYeToUy2PJexOFsYX7seyDa31bh7XF07Fsqg+RZe3UVdHTgBfklA5gT6
7fmij8nQPNdaVvxxJtYqbCtQ0AIYQhSdcBp2APtK3yE6/DcizWSRoKIcwBnopxqGdg7ZOvuiOx53UG83
dwKdbFbgPWStrqzyXPAI4OIazEuOr+WF5XWnWbvNouA67GqncQmkx2Pi0f4ApXYo0+g/r3F/X5nV7u2w
NYVs8ZWO7LO4GhvNFfLHO6fk8WhMhn7w/KXDqfkcXW4jNqp8lca9H1s06WQdjAKt6jei+j/Pu9kr4pM/
x7uLVbKCPMV6ue9dVkHOplRQAnKjPuD8tCWW+Rka1uGeHaX8bsblU9T63K4prny5wpPSpY4VyPvTbiYa
/X2zxDuRsbHy/HnjBdQjaSh4HVGLO+COuiI6Mac3cQZByo4t97ZSz7C37b6VpgUMa2z5IR5kqqU62Mvm
wVeZKMjuc5ap/My/VqNck/LQOwwhs2lY0y/+hLtKPeFplb+FJXvF7mgD1BO/MtWF5F58n6c9s3PDQDaJ
eaHkIII40q2gNEaWpw8m8vGav8ebCKv2yAMfMiGGUeUzD2sRB7rON3tEpFbKGsB0tJnINRl31829u3+c
CPgddgtrwYQEawpmAWbFFO0T5Y3u80jOLkq/gQ/60ewG91BcYs4tUtwZjcFBoN++j1YLa3D7PnN0B94n
dkFTVJJ2NvNmkmw5g3axPmeYmP1cf9RsxGbEsLpVV0L1njxFcHPeAK/pgougdjdFWMnuyJMcBlGMW8EH
sQCEhYhaQjgb/BmNsa3zYAfSGE7d42s7CMzWW+HYZxo12Si70YeJVfZN0d3ADcEEIQjPaaOcDhkpZh1G
Up1sjTaSS/YO0xB2u3BoAA7CFpqStbhvWK+Vj3zPcYYW3yMJY1exP2GqLbSfNRkyqaBnwFe3Cqh8aXRN
awdlmHDaabfItJ9r0YMXgm1mZfBurcAf1YnUdWPeIF78fI782ucBX2fBReXcdi3fsYrGtPw7KdLwE2jg
J4V70GW7XclihcA2wKIQy7ydwXS10/DltD7Er2kowoe2KNvzH/Fqxev4MtIYQRZQ9cLXWFx3o1zKK+/e
La4S6M/P4K86tubDCZTrJ286s7zm99b6znpO1SxQbX7V4lV3pVPkJCvIomuyOA//CqyD+Ktx17TON6V/
pr4E5Jm5s9LlYE8DDWLaPyPsxVfI1f5W+x3PeGpJkiKQKITu9DgV+60puADWN5lL7ZAmQe1u83Nn1dSg
tJq2jcnTMOsOOyQ7woipOGSRg56KfNVFEnng01ERvZk7BRPhczRPMxH8U83/cA7yV5xCN150zBZsnZSe
H5XjhVNBubcSe5wvQiB7AwVyMAcCrwPoxQxcITKfdmbmG0ZgibdUclBahg03TRKwpGMIM+5Ff5KObmeQ
ibXePnddj0XQhwHzZrDicFHsopWo/NtlsdsOoXNgmjLosxs/mI/1Zn9GPj9XvhbXH29F7SizXwAle0OF
G4GDOd07F42ul+EeSN/gjWBnMxCrM4p2wPjK9OdsCicbQfxosaAGYAH8FM5QKyVyu2exFGfFNlZCU30W
R9UMGo4BEFSmpYtQ1gvDS2V9zu8X18v9QoAc734TsxBrEZa9Co4N5EyYOYGd3mFzUFq/+lmLvtQCz2+S
2ob+SAcaKZrmwT0B9zGH21Px1bKu2fbPv5sWlYuwSM1b0BGEmJl4AbfGroxbrdfrJnPKKi/bD2SUlBkS
z0O9ucf4/XNOCt2GpnH4wpT6V5Q494dW3C+OhqzCF1CwXsGmwUn4j5RvOy3ZU9grVVVLYae3torNJqK1
60FSO3y73A+gJl92KdYKAM4yiijpElr8I40lZJ2zrJaxmnLeMA4wD10i7MNYHsJcFx343NnNN9Sz/vgi
2rRkNdKS/aC4t4zEwKpYXj9/i24hQ0XkgAPl4IgBmM86h/z/JYJPoxqnmAPnL/H4FNx8MF+35sYtyS2/
qwdfKopAD3AF+F0ddPp9tm30elgw4UtypWPbHTjM6yeZMZLduoyNKxun3r8SqY7dus3H4ONgOf6xdSB9
CDrex38wKzcgriNjkB7Kbxn2VWA8djtqSuimZif82xP9ZInc7hop5KkgcYwcxifmwM+/G4DWDWbiNGgv
P7dSTvvE6VbcP6790Ywc0XjNtmrJG3A0OSqiGEClkbTSZxt+UbuQdL0hiOJtJpTFwv9GJtsoD6RUr6fQ
b2YvRv1t1BCEHOsA8IISyQND+nJK52ppAtp7opbqslRVUE5q87j8zbW3YyrJItUIZp4RzfilVDytpqWH
0P+raFxsXJBrJFysO+FQKsxYb6IPVLow3J99jIg8BQETdqSlt81MbXqw+OJQLVEmBnyTgvGgf4MwNIaU
sFoyAVbLqt5D7H/QRsoku3OPn1YqP+N7hTKp0q9gXehpnFfMH0e5wEiy6iGwvWnY6/Wy0FmI3FBWaxY1
IX38lbtCFs5hzBZtGq7/Ofo/NpiGyajmVvJPHZpRZtFvY6oQrJbNlkP5yAVnOfRwoBoriJzP9LRvw8gc
zu5rfoT+rHYmn9dVXkd3A25tjoTQqlSqIfLwXtSraJWJjligYAV3Aa5nTaEYkXQR4g/ZOQ7WR1mv7fSv
y8jezvUQaS79swyzcaHUkbeTKW4zWNzB/Un+yjgm00+bMXSVVP26IBIBVv6Fin6SpnIlmIfWqyn5p878
I40R/qqsijracCR2PtkS841Y+noOkW+WwfFqWqByB7RKDlf3yUkAkkq6QUYJjshVM1snrObzHEnt+2+n
4L2asx66hjTdIPsODolqRAfhtsBh450jhtGQcYB3iCAfKTXWQEIdnSC4k0ZUKT/URsWl9NAS9agv357F
zqSVZ+H1psE7CkjlPwxXgKMBGLgMwfU11kEi+QPMAI5iLoxiyU2mx5qhI50xqa8KIeLFmmi3ob3Mw258
Hi5xFsJq7lAWI8JtZ/rNdKsk8dhXl/Xfwe34c3lK+iecDnMX9RM0VpDyu6iC7MnjwHf5lhCjABC3EVvm
GyA+lL9aYAVayRp5HVcVq36efYHtFfFx2GNcxfVNjI3ViYa2JSeKTgc9pjVLCvYjyqoZEDxkXjoMo3bl
xoRCfhxIKt2xVfixOItIqmAx/DnunoyhWKn9MeVnQRXdgIfjEW6moYycuwYOmOyBBNnILxkYs+rM5jvd
Zyn+MKJ93iqmgY8+uNvvs6bYN4B9O9QF5JqqgZeGzkAfIR8Z0p47xoHGAcoF5SXtSFhUjyEY28BIoTbK
KMYNasgRftjr2wuZ1FSwlZXipYDOck/P1qeZO5iOxltWOVEZrwoirmNa/Q+i2s0WwWSYXc/7nnZ9PoCG
kFEHlRq99H84vSO6hhhCmlJnmJ/LMoJToejzZh9GCUBdjjRruScZwiada1Y5kHsEhKQyMHrIp2lBcN08
RfFBs5Jb9F0qx9Ypn1adm0kWM3nUhGrPISyW0ReErKNlLQyDG1OdZ9UUPHVUz+WNQTXz4fs/vrAOZijb
wQq4bo6EulCDS/1FqH/TPi2jxAxZUvYcek5UjegHm1UqKbStGx6FuKF/kQLRo5PsgZGys/YouO5UGr2E
AbqQPYmTLOi8YBxgHqJc+L5tHckpWVOOU0zKbzsLf67E6H73ZPJPKiF1FgMrswe7yjvChO9eQBqo7ajh
e1kpa8KHLTndEGo7zoCc1SG29kGG/kEvL/oJF3+mwaUg7zeMifv0V73AH+D6kiv3uZmfIGAAAAAElFTk
SuQmCC); | |
| 747 } | |
| 748 </style> | |
| 749 </head> | |
| 750 | |
| 751 <body id=""> | |
| 752 <div class="toolbar"> | |
| 753 <div id="button_toolbar0" class="toolbar_icon"></div> | |
| 754 <span class="container"><canvas class="paper button_toolbar recenteringTouch
" id="button_toolbar1" onclick="animateIcon()"></canvas></span> | |
| 755 <span id="title" style="float:left">Ripple test</span> | |
| 756 <span class="container"><canvas onClick="toggleMenu()" class="paper button_t
oolbar recenteringTouch" id="button_toolbar3"></canvas></span> | |
| 757 <span class="container"><canvas class="paper button_toolbar recenteringTouch
" id="button_toolbar2"></canvas></span> | |
| 758 <span class="container"><canvas class="paper button_toolbar recenteringTouch
" id="button_toolbar2"></canvas></span> | |
| 759 | |
| 760 </div> | |
| 761 | |
| 762 <div id="dialog" class="dialog visible"> | |
| 763 <h1>Press mah buttons!</h1> Lorem ipsum dolor sit amet, consectetur adipisic
ing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam. | |
| 764 <span class="container"><canvas class="paper button" id="button_borderless"
value="CANCEL"></canvas></span> | |
| 765 <span class="container"><canvas class="paper button" id="button_borderless_b
lue" onclick="toggleDialog()" value="OK"></canvas></span> | |
| 766 </div> | |
| 767 | |
| 768 <div id="menu" class="menu visible"> | |
| 769 <div class="container button_menu"><canvas class="paper button_menu" value="
Fold" style="text-align:left"></canvas></div> | |
| 770 <div class="container button_menu"><canvas class="paper button_menu" value="
Spindle" style="text-align:left"></canvas></div> | |
| 771 <div class="container button_menu"><canvas class="paper button_menu" onClick
="" value="Mutilate" style="text-align:left"></canvas></div> | |
| 772 <div class="container button_menu"><canvas class="paper button_menu" onC
lick="toggleMenu()" value="Dismiss" style="text-align:left"></canvas></div> | |
| 773 | |
| 774 </div> | |
| 775 <div class="container"><canvas class="paper button recenteringTouch" id="button_
large"></canvas></div> | |
| 776 <div class="content" style=""> | |
| 777 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. sed do eiu
smod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam
, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo conseq
uat. | |
| 778 <p></p> | |
| 779 <span class="container" style="margin-right:8px;"><canvas class="paper button ra
ised" id="button_blue" value="ABORT"></canvas></span> | |
| 780 <span class="container" style="margin-right:8px;"><canvas class="paper button ra
ised" id="button_small" value="RETRY"></canvas></span> | |
| 781 <span class="container"><canvas class="paper button raised" id="button_small"
value="FAIL"></canvas></span> | |
| 782 | |
| 783 <p><p> | |
| 784 <canvas class="paper button" id="button_borderless_square"></canvas> | |
| 785 | |
| 786 | |
| 787 </div> | |
| 788 <div class="container"><canvas onClick="toggleDialog()" class="paper button_floa
ting floating recenteringTouch" id="button_floating" value="★"></canvas></div> | |
| 789 </body> | |
| 790 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 592603004:
Revert "Polymer elements added to third_party/polymer." (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master