src/third_party/WebKit/Source/devtools/front_end/screencastView.css

   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     cursor: url(Images/touchCursor.png), default;
 120 }
 121
 122 @media (-webkit-min-device-pixel-ratio: 1.5) {
 123 .screencast-canvas-container {
 124     cursor: url(Images/touchCursor_2x.png), default;
 125 }
 126 } /* media */
 127
 128 .screencast canvas {
 129     flex: auto;
 130     position: relative;
 131 }
 132
 133 .screencast-px {
 134     color: rgb(128, 128, 128);
 135 }
 136
 137 .screencast-element-title {
 138     position: absolute;
 139     z-index: 10;
 140 }
 141
 142 .screencast-tag-name {
 143     /* Keep this in sync with view-source.css (.webkit-html-tag) */
 144     color: rgb(136, 18, 128);
 145 }
 146
 147 .screencast-node-id {
 148     /* Keep this in sync with view-source.css (.webkit-html-attribute-value) */
 149     color: rgb(26, 26, 166);
 150 }
 151
 152 .screencast-class-name {
 153     /* Keep this in sync with view-source.css (.webkit-html-attribute-name) */
 154     color: rgb(153, 69, 0);
 155 }
 156
 157 .screencast-glasspane {
 158   position: absolute;
 159   top: 0;
 160   right: 0;
 161   bottom: 0;
 162   left: 0;
 163   background-color: rgba(255, 255, 255, 0.8);
 164   font-size: 30px;
 165   z-index: 100;
 166   display: flex;
 167   justify-content: center;
 168   align-items: center;
 169 }