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

   1 /*
   2  * Copyright (C) 2006, 2007, 2008 Apple Inc.  All rights reserved.
   3  * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org>
   4  *
   5  * Redistribution and use in source and binary forms, with or without
   6  * modification, are permitted provided that the following conditions
   7  * are met:
   8  *
   9  * 1.  Redistributions of source code must retain the above copyright
  10  *     notice, this list of conditions and the following disclaimer.
  11  * 2.  Redistributions in binary form must reproduce the above copyright
  12  *     notice, this list of conditions and the following disclaimer in the
  13  *     documentation and/or other materials provided with the distribution.
  14  * 3.  Neither the name of Apple Computer, Inc. ("Apple") nor the names of
  15  *     its contributors may be used to endorse or promote products derived
  16  *     from this software without specific prior written permission.
  17  *
  18  * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY
  19  * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
  20  * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
  21  * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY
  22  * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
  23  * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
  24  * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
  25  * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  26  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
  27  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  28  */
  29
  30 .sidebar-pane {
  31     position: relative;
  32 }
  33
  34 .sidebar-pane > .body {
  35     position: relative;
  36     display: none;
  37 }
  38
  39 .sidebar-pane > .body .info {
  40     text-align: center;
  41     font-style: italic;
  42     font-size: 90%;
  43     padding: 6px;
  44     color: #888;
  45 }
  46
  47 .sidebar-pane > .body .placard.dimmed {
  48     opacity: 0.6;
  49     font-style: italic;
  50 }
  51
  52 .sidebar-pane > .body .placard + .info {
  53     border-top: 1px solid rgb(189, 189, 189);
  54     background-color: rgb(255, 255, 194);
  55 }
  56
  57 .sidebar-pane.visible > .body {
  58     display: block;
  59 }
  60
  61 .sidebar-pane .section .properties {
  62     padding-left: 16px;
  63 }
  64
  65 .sidebar-tabbed-pane .tabbed-pane-header {
  66     border-bottom: 1px solid rgb(202, 202, 202);
  67     background-color: rgb(236, 236, 236);
  68 }
  69
  70 .sidebar-pane-stack > .sidebar-pane.visible:nth-last-of-type(1) {
  71     border-bottom: 1px solid rgb(189, 189, 189);
  72 }
  73
  74 .sidebar-pane-title {
  75     position: relative;
  76     background: rgb(240, 240, 240);
  77     height: 20px;
  78     padding: 0 5px;
  79     border-top: 1px solid rgb(189, 189, 189);
  80     border-bottom: 1px solid rgb(189, 189, 189);
  81     line-height: 18px;
  82     background-origin: padding;
  83     background-clip: padding;
  84     margin-top: -1px;
  85     white-space: nowrap;
  86 }
  87
  88 .sidebar-pane-title:active {
  89     background-color: rgb(204, 204, 204);
  90     border-top: 1px solid rgb(178, 178, 178);
  91     border-bottom: 1px solid rgb(178, 178, 178);
  92 }
  93
  94 .sidebar-pane-title::before {
  95     background-image: url(Images/statusbarButtonGlyphs.png);
  96     background-size: 320px 144px;
  97     opacity: 0.5;
  98     float: left;
  99     width: 11px;
 100     height: 11px;
 101     margin-right: 2px;
 102     content: "a";
 103     color: transparent;
 104     position: relative;
 105     top: 3px;
 106 }
 107
 108 @media (-webkit-min-device-pixel-ratio: 1.5) {
 109 .sidebar-pane-title::before {
 110     background-image: url(Images/statusbarButtonGlyphs_2x.png);
 111 }
 112 } /* media */
 113
 114 .sidebar-pane-title::before {
 115     background-position: -4px -96px;
 116 }
 117
 118 .sidebar-pane-title.expanded::before {
 119     background-position: -20px -96px;
 120 }
 121
 122 .sidebar-pane-toolbar {
 123     line-height: 18px;
 124     left: 0;
 125     right: 4px;
 126     top: 0;
 127     height: 20px;
 128     position: absolute;
 129     pointer-events: none;
 130 }
 131
 132 .sidebar-pane-toolbar > * {
 133     pointer-events: auto;
 134 }
 135
 136 .sidebar-pane-toolbar > .pane-title-button,
 137 .sidebar-pane-toolbar > label {
 138     float: right;
 139     height: 16px;
 140     background-color: transparent;
 141     border: none;
 142     background-repeat: no-repeat;
 143     margin: 1px 0 0 0;
 144     padding: 0;
 145     border-radius: 0;
 146     -webkit-appearance: none;
 147 }
 148
 149 .sidebar-pane-toolbar > .pane-title-button {
 150     width: 23px;
 151     color: transparent;
 152 }
 153
 154 .sidebar-pane-toolbar > .pane-title-button:hover {
 155     background-position: -23px 0;
 156 }
 157
 158 .sidebar-pane-toolbar > .pane-title-button:active,
 159 .sidebar-pane-toolbar > .pane-title-button.toggled {
 160     background-position: -46px 0;
 161 }
 162
 163 .sidebar-pane-toolbar > .pane-title-button.add {
 164     background-image: url(Images/paneAddButtons.png);
 165 }
 166
 167 .sidebar-pane-toolbar > .pane-title-button.element-state {
 168     background-image: url(Images/paneElementStateButtons.png);
 169 }
 170
 171 .sidebar-pane-toolbar > .pane-title-button.refresh {
 172     background-image: url(Images/paneRefreshButtons.png);
 173 }
 174
 175 .sidebar-pane-toolbar > label.scripts-callstack-async {
 176     margin: auto;
 177     margin-right: 5px;
 178     display: flex;
 179 }
 180
 181 .section > .header input[type=checkbox] {
 182     height: 1em;
 183     width: 1em;
 184     margin-left: 0;
 185     margin-top: 0;
 186     margin-bottom: 0.25em;
 187     vertical-align: bottom;
 188 }
 189
 190 .hidden-placards-message {
 191     text-align: center;
 192     font-style: italic;
 193     padding: 4px;
 194     color: #888;
 195     background-color: #FFFFC2;
 196 }
 197
 198 .sidebar-pane-button-new-rule {
 199     background-image: url(Images/paneAddButtons.png);
 200     background-position: 0 0;
 201     position: absolute;
 202     height: 16px;
 203     width: 23px;
 204     right: 10px;
 205     bottom: 1px;
 206     visibility: hidden;
 207 }
 208
 209 .styles-section.matched-styles:not(.read-only):hover .sidebar-pane-button-new-rule {
 210     visibility: visible;
 211 }
 212
 213 .sidebar-pane-button-new-rule:hover {
 214     background-position: -23px 0;
 215 }