third_party/WebKit/Source/devtools/front_end/screencast/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: -webkit-image-set(url(Images/touchCursor.png) 1x, url(Images/touchCursor_2x.png) 2x), default;
 120 }
 121
 122 .screencast canvas {
 123     flex: auto;
 124     position: relative;
 125 }
 126
 127 .screencast-px {
 128     color: rgb(128, 128, 128);
 129 }
 130
 131 .screencast-element-title {
 132     position: absolute;
 133     z-index: 10;
 134 }
 135
 136 .screencast-tag-name {
 137     /* Keep this in sync with view-source.css (.webkit-html-tag) */
 138     color: rgb(136, 18, 128);
 139 }
 140
 141 .screencast-node-id {
 142     /* Keep this in sync with view-source.css (.webkit-html-attribute-value) */
 143     color: rgb(26, 26, 166);
 144 }
 145
 146 .screencast-class-name {
 147     /* Keep this in sync with view-source.css (.webkit-html-attribute-name) */
 148     color: rgb(153, 69, 0);
 149 }
 150
 151 .screencast-glasspane {
 152     background-color: rgba(255, 255, 255, 0.8);
 153     font-size: 30px;
 154     z-index: 100;
 155     display: flex;
 156     justify-content: center;
 157     align-items: center;
 158 }