1/* 2 * Copyright (C) 2013 Google Inc. All rights reserved. 3 * 4 * Redistribution and use in source and binary forms, with or without 5 * modification, are permitted provided that the following conditions are 6 * met: 7 * 8 * * Redistributions of source code must retain the above copyright 9 * notice, this list of conditions and the following disclaimer. 10 * * Redistributions in binary form must reproduce the above 11 * copyright notice, this list of conditions and the following disclaimer 12 * in the documentation and/or other materials provided with the 13 * distribution. 14 * * Neither the name of Google Inc. nor the names of its 15 * contributors may be used to endorse or promote products derived from 16 * this software without specific prior written permission. 17 * 18 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS 19 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT 20 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR 21 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT 22 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, 23 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT 24 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, 25 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY 26 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 27 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE 28 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 29 */ 30 31.screencast-navigation { 32 -webkit-flex-direction: row; 33 display: -webkit-flex; 34 height: 25px; 35 position: relative; 36} 37 38.screencast-navigation button { 39 -webkit-border-radius: 2px; 40 background-color: transparent; 41 background-image: -webkit-image-set( 42 url(Images/navigationControls.png) 1x, 43 url(Images/navigationControls_2x.png) 2x); 44 background-clip: content-box; 45 background-origin: content-box; 46 background-repeat: no-repeat; 47 border: 1px solid transparent; 48 height: 23px; 49 padding: 3px 2px 1px; 50 width: 23px; 51} 52 53.screencast-navigation button:hover { 54 border-color: #ccc; 55} 56 57.screencast-navigation button:active { 58 border-color: #aaa; 59} 60 61.screencast-navigation button[disabled] { 62 opacity: 0.5; 63} 64 65.screencast-navigation button.back { 66 background-position-x: -1px; 67} 68 69.screencast-navigation button.forward { 70 background-position-x: -18px; 71} 72 73.screencast-navigation button.reload { 74 background-position-x: -37px; 75} 76 77.screencast-navigation input { 78 -webkit-flex: 1; 79 border: 1px solid #aaa; 80 border-radius: 2px; 81 margin: 1px; 82 padding-left: 5px; 83} 84 85.screencast-navigation input:focus { 86 border: 1px solid #aaa; 87 outline: none !important; 88} 89 90.screencast-navigation .progress { 91 background-color: rgb(66, 129, 235); 92 height: 3px; 93 left: 0; 94 position: absolute; 95 top: 100%; /* Align with the bottom edge of the parent. */ 96 width: 0; 97 z-index: 2; /* Above .screencast-glasspane. */ 98} 99 100.screencast-viewport { 101 border: 20px solid #333; 102 border-radius: 20px; 103 position: absolute; 104 top: 36px; 105 left: 10px; 106 right: 10px; 107 bottom: 10px; 108} 109 110.screencast canvas { 111 position: absolute; 112 width: 100%; 113 height: 100%; 114} 115 116.screencast-px { 117 color: rgb(128, 128, 128); 118} 119 120.screencast-element-title { 121 position: absolute; 122 z-index: 10; 123} 124 125.screencast-tag-name { 126 /* Keep this in sync with view-source.css (.webkit-html-tag) */ 127 color: rgb(136, 18, 128); 128} 129 130.screencast-node-id { 131 /* Keep this in sync with view-source.css (.webkit-html-attribute-value) */ 132 color: rgb(26, 26, 166); 133} 134 135.screencast-class-name { 136 /* Keep this in sync with view-source.css (.webkit-html-attribute-name) */ 137 color: rgb(153, 69, 0); 138} 139 140.screencast-glasspane { 141 -webkit-box-orient: horizontal; 142 -webkit-box-align: center; 143 -webkit-box-pack: center; 144 background-color: rgba(255, 255, 255, 0.8); 145 bottom: 0; 146 display: -webkit-box; 147 left: 0; 148 position: absolute; 149 right: 0; 150 top: 25px; /* Align with the botton edge of .screencast .navigation. */ 151 font-size: 30px; 152} 153