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 { 32 overflow: hidden; 33 } 34 35 .screencast-navigation { 36 flex-direction: row; 37 display: flex; 38 flex: 24px 0 0; 39 position: relative; 40 } 41 42 .screencast-navigation button { 43 border-radius: 2px; 44 background-color: transparent; 45 background-image: -webkit-image-set( 46 url(Images/navigationControls.png) 1x, 47 url(Images/navigationControls_2x.png) 2x); 48 background-clip: content-box; 49 background-origin: content-box; 50 background-repeat: no-repeat; 51 border: 1px solid transparent; 52 height: 23px; 53 padding: 2px; 54 width: 23px; 55 } 56 57 .screencast-navigation button:hover { 58 border-color: #ccc; 59 } 60 61 .screencast-navigation button:active { 62 border-color: #aaa; 63 } 64 65 .screencast-navigation button[disabled] { 66 opacity: 0.5; 67 } 68 69 .screencast-navigation button.back { 70 background-position-x: -1px; 71 } 72 73 .screencast-navigation button.forward { 74 background-position-x: -18px; 75 } 76 77 .screencast-navigation button.reload { 78 background-position-x: -37px; 79 } 80 81 .screencast-navigation input { 82 -webkit-flex: 1; 83 border: 1px solid #aaa; 84 border-radius: 2px; 85 margin: 1px; 86 padding-left: 5px; 87 } 88 89 .screencast-navigation input:focus { 90 border: 1px solid #aaa; 91 outline: none !important; 92 } 93 94 .screencast-navigation .progress { 95 background-color: rgb(66, 129, 235); 96 height: 3px; 97 left: 0; 98 position: absolute; 99 top: 100%; /* Align with the bottom edge of the parent. */ 100 width: 0; 101 z-index: 2; /* Above .screencast-glasspane. */ 102 } 103 104 .screencast-viewport { 105 display: flex; 106 border: 1px solid #999; 107 border-radius: 20px; 108 flex: none; 109 padding: 20px; 110 margin: 10px; 111 background-color: #eee; 112 } 113 114 .screencast-canvas-container { 115 flex: auto; 116 display: flex; 117 border: 1px solid #999; 118 position: relative; 119 } 120 121 .screencast canvas { 122 flex: auto; 123 position: relative; 124 } 125 126 .screencast-px { 127 color: rgb(128, 128, 128); 128 } 129 130 .screencast-element-title { 131 position: absolute; 132 z-index: 10; 133 } 134 135 .screencast-tag-name { 136 /* Keep this in sync with view-source.css (.webkit-html-tag) */ 137 color: rgb(136, 18, 128); 138 } 139 140 .screencast-node-id { 141 /* Keep this in sync with view-source.css (.webkit-html-attribute-value) */ 142 color: rgb(26, 26, 166); 143 } 144 145 .screencast-class-name { 146 /* Keep this in sync with view-source.css (.webkit-html-attribute-name) */ 147 color: rgb(153, 69, 0); 148 } 149 150 .screencast-glasspane { 151 position: absolute; 152 top: 0; 153 right: 0; 154 bottom: 0; 155 left: 0; 156 background-color: rgba(255, 255, 255, 0.8); 157 font-size: 30px; 158 z-index: 100; 159 display: flex; 160 justify-content: center; 161 align-items: center; 162 } 163