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 overflow: hidden; 87} 88 89.sidebar-pane-title:active { 90 background-color: rgb(204, 204, 204); 91 border-top: 1px solid rgb(178, 178, 178); 92 border-bottom: 1px solid rgb(178, 178, 178); 93} 94 95.sidebar-pane-title::before { 96 background-image: url(Images/statusbarButtonGlyphs.png); 97 background-size: 320px 144px; 98 opacity: 0.5; 99 float: left; 100 width: 11px; 101 height: 11px; 102 margin-right: 2px; 103 content: "a"; 104 color: transparent; 105 position: relative; 106 top: 3px; 107} 108 109@media (-webkit-min-device-pixel-ratio: 1.5) { 110.sidebar-pane-title::before { 111 background-image: url(Images/statusbarButtonGlyphs_2x.png); 112} 113} /* media */ 114 115.sidebar-pane-title::before { 116 background-position: -4px -96px; 117} 118 119.sidebar-pane-title.expanded::before { 120 background-position: -20px -96px; 121} 122 123.sidebar-pane-toolbar { 124 line-height: 18px; 125 left: 0; 126 right: 4px; 127 top: 0; 128 height: 20px; 129 position: absolute; 130 pointer-events: none; 131} 132 133.sidebar-pane-toolbar > * { 134 pointer-events: auto; 135} 136 137.sidebar-pane-toolbar > .pane-title-button, 138.sidebar-pane-toolbar > label { 139 float: right; 140 height: 16px; 141 background-color: transparent; 142 border: none; 143 background-repeat: no-repeat; 144 margin: 1px 0 0 0; 145 padding: 0; 146 border-radius: 0; 147 -webkit-appearance: none; 148} 149 150.sidebar-pane-toolbar > .pane-title-button { 151 width: 23px; 152 color: transparent; 153} 154 155.sidebar-pane-toolbar > .pane-title-button:hover { 156 background-position: -23px 0; 157} 158 159.sidebar-pane-toolbar > .pane-title-button:active, 160.sidebar-pane-toolbar > .pane-title-button.toggled { 161 background-position: -46px 0; 162} 163 164.sidebar-pane-toolbar > .pane-title-button.add { 165 background-image: url(Images/paneAddButtons.png); 166 position: relative; 167} 168 169.sidebar-pane-toolbar > .pane-title-button.add .long-click-glyph { 170 background-color: rgba(135, 135, 135, 1); 171 -webkit-mask-image: url(Images/statusbarButtonGlyphs.png); 172 -webkit-mask-position: -298px -53px; 173 -webkit-mask-size: 320px 144px; 174} 175 176.sidebar-pane-toolbar > .pane-title-button.element-state { 177 background-image: url(Images/paneElementStateButtons.png); 178} 179 180.sidebar-pane-toolbar > .pane-title-button.refresh { 181 background-image: url(Images/paneRefreshButtons.png); 182} 183 184.sidebar-pane-toolbar > label.scripts-callstack-async { 185 margin: auto; 186 margin-right: 5px; 187 display: flex; 188} 189 190.section > .header input[type=checkbox] { 191 height: 1em; 192 width: 1em; 193 margin-left: 0; 194 margin-top: 0; 195 margin-bottom: 0.25em; 196 vertical-align: bottom; 197} 198 199.hidden-placards-message { 200 text-align: center; 201 font-style: italic; 202 padding: 4px; 203 color: #888; 204 background-color: #FFFFC2; 205} 206 207.sidebar-pane-button-new-rule { 208 background-image: url(Images/paneAddButtons.png); 209 background-position: 0 0; 210 position: absolute; 211 height: 16px; 212 width: 23px; 213 right: 10px; 214 bottom: 1px; 215 visibility: hidden; 216} 217 218.styles-section.matched-styles:not(.read-only):hover .sidebar-pane-button-new-rule { 219 visibility: visible; 220} 221 222.sidebar-pane-button-new-rule:hover { 223 background-position: -23px 0; 224} 225