/* * Copyright (C) 2006, 2007, 2008 Apple Inc. All rights reserved. * Copyright (C) 2009 Anthony Ricaud <rik@webkit.org> * * Redistribution and use in source and binary forms, with or without * modification, are permitted provided that the following conditions * are met: * * 1. Redistributions of source code must retain the above copyright * notice, this list of conditions and the following disclaimer. * 2. Redistributions in binary form must reproduce the above copyright * notice, this list of conditions and the following disclaimer in the * documentation and/or other materials provided with the distribution. * 3. Neither the name of Apple Computer, Inc. ("Apple") nor the names of * its contributors may be used to endorse or promote products derived * from this software without specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY APPLE AND ITS CONTRIBUTORS "AS IS" AND ANY * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED * WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE * DISCLAIMED. IN NO EVENT SHALL APPLE OR ITS CONTRIBUTORS BE LIABLE FOR ANY * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND * ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. */ #elements-content.nowrap { white-space: nowrap; } #elements-content { padding-left: 0; } #elements-content > ol { display: inline-block; } #elements-content .editing { margin-left: 8px; } .elements-tree-editor { -webkit-user-select: text; -webkit-user-modify: read-write-plaintext-only; } .crumbs { display: inline-block; font-size: 11px; line-height: 19px; text-shadow: rgba(255, 255, 255, 0.75) 0 1px 0; color: rgb(20, 20, 20); margin-left: -1px; padding-right: 12px; } .crumbs .crumb { height: 24px; border-width: 0 12px 0 2px; -webkit-border-image: url(Images/segment.png) 0 12 0 2; margin-right: -12px; padding-left: 18px; padding-right: 2px; white-space: nowrap; line-height: 23px; float: right; } .crumbs .crumb.collapsed > * { display: none; } .crumbs .crumb.collapsed::before { content: "\2026"; font-weight: bold; } .crumbs .crumb.compact .extra { display: none; } .crumbs .crumb.dimmed { color: rgba(0, 0, 0, 0.45); } .crumbs .crumb.start { padding-left: 7px; } .crumbs .crumb.end { border-width: 0 2px 0 2px; padding-right: 6px; -webkit-border-image: url(Images/segmentEnd.png) 0 2 0 2; } .crumbs .crumb.selected { -webkit-border-image: url(Images/segmentSelected.png) 0 12 0 2; color: black; text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0; } .crumbs .crumb.selected:hover { -webkit-border-image: url(Images/segmentSelected.png) 0 12 0 2; } .crumbs .crumb.selected.end, .crumbs .crumb.selected.end:hover { -webkit-border-image: url(Images/segmentSelectedEnd.png) 0 2 0 2; } .crumbs .crumb:hover { -webkit-border-image: url(Images/segmentHover.png) 0 12 0 2; color: black; } .crumbs .crumb.dimmed:hover { -webkit-border-image: url(Images/segmentHover.png) 0 12 0 2; color: rgba(0, 0, 0, 0.75); } .crumbs .crumb.end:hover { -webkit-border-image: url(Images/segmentHoverEnd.png) 0 2 0 2; } .metrics { padding: 8px; font-size: 10px; text-align: center; white-space: nowrap; } .metrics .label { position: absolute; font-size: 10px; color: black; margin-left: 3px; padding-left: 2px; padding-right: 2px; } .metrics .position { border: 1px rgb(66%, 66%, 66%) dotted; background-color: white; display: inline-block; text-align: center; padding: 3px; margin: 3px; } .metrics .margin { border: 1px dashed; background-color: white; display: inline-block; text-align: center; vertical-align: middle; padding: 3px; margin: 3px; } .metrics .border { border: 1px black solid; background-color: white; display: inline-block; text-align: center; vertical-align: middle; padding: 3px; margin: 3px; } .metrics .padding { border: 1px grey dashed; background-color: white; display: inline-block; text-align: center; vertical-align: middle; padding: 3px; margin: 3px; } .metrics .content { position: static; border: 1px gray solid; background-color: white; display: inline-block; text-align: center; vertical-align: middle; padding: 3px; margin: 3px; min-width: 80px; text-align: center; overflow: visible; } .metrics .content span { display: inline-block; } .metrics .editing { position: relative; z-index: 100; } .metrics .left { display: inline-block; vertical-align: middle; } .metrics .right { display: inline-block; vertical-align: middle; } .metrics .top { display: inline-block; } .metrics .bottom { display: inline-block; } .styles-section { padding: 2px 2px 4px 4px; min-height: 18px; white-space: nowrap; -webkit-background-origin: padding; -webkit-background-clip: padding; -webkit-user-select: text; } .styles-section:not(.first-styles-section) { border-top: 1px solid rgb(191, 191, 191); } .styles-section.read-only { background-color: rgb(240, 240, 240); } .styles-section .properties li.not-parsed-ok { margin-left: 0px; } .styles-section .properties li.not-parsed-ok img.exclamation-mark { content: url(Images/warningIcon.png); opacity: 0.75; width: 12px; height: 10px; margin: 0 6px 0 0; padding: 0 1px; vertical-align: baseline; -webkit-user-select: none; cursor: default; } .styles-section .header { white-space: nowrap; -webkit-background-origin: padding; -webkit-background-clip: padding; } .styles-section .header .title { word-wrap: break-word; white-space: normal; } .styles-section .header .title .media, .styles-section .header .title .media .subtitle { color: rgb(128, 128, 128); overflow: hidden; } .styles-section .header .subtitle { color: rgb(85, 85, 85); float: right; margin-left: 5px; max-width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .styles-section .header .subtitle a { color: inherit; } .styles-section a[data-uncopyable] { display: inline-block; } .styles-section a[data-uncopyable]::before { content: attr(data-uncopyable); text-decoration: underline; } .styles-section .properties { display: none; margin: 0; padding: 2px 4px 0 6px; list-style: none; clear: both; } .styles-section.matched-styles .properties { padding-left: 0; } .styles-section.no-affect .properties li { opacity: 0.5; } .styles-section.no-affect .properties li.editing { opacity: 1.0; } .styles-section.expanded .properties { display: block; } .styles-section .properties li { margin-left: 12px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; cursor: auto; } .styles-section.matched-styles .properties li { margin-left: 0 !important; } .styles-section .properties li.child-editing { word-wrap: break-word !important; white-space: normal !important; } .styles-section .properties ol { display: none; margin: 0; -webkit-padding-start: 12px; list-style: none; } .styles-section .properties ol.expanded { display: block; } .styles-section .properties li.parent::before { content: none; } .styles-section .properties li.parent.expanded::before { content: none; } .styles-section.matched-styles .properties li.parent .expand-element { content: url(Images/treeRightTriangleBlack.png); margin-right: 1px; margin-left: -5px; opacity: 0.6; } .styles-section.matched-styles .properties li.parent.expanded .expand-element { content: url(Images/treeDownTriangleBlack.png); } .styles-section.computed-style .properties li.parent::before { content: url(Images/treeRightTriangleBlack.png); opacity: 0.75; float: left; width: 8px; height: 8px; margin-top: 0; padding-right: 3px; -webkit-user-select: none; cursor: default; } .styles-section.computed-style .properties li.parent.expanded::before { content: url(Images/treeDownTriangleBlack.png); margin-top: 1px; } .styles-section .properties li .info { padding-top: 4px; padding-bottom: 3px; } .styles-section.matched-styles:not(.read-only):hover .properties .enabled-button { visibility: visible; } .styles-section.matched-styles:not(.read-only) .properties li.disabled .enabled-button { visibility: visible; } .styles-section .properties .enabled-button { visibility: hidden; float: left; font-size: 10px; margin: 0; vertical-align: top; position: relative; z-index: 1; width: 18px; left: -2px; } .styles-section.matched-styles .properties ol.expanded { margin-left: 16px; } .styles-section .properties .overloaded, .styles-section .properties .inactive, .styles-section .properties .disabled { text-decoration: line-through; } .styles-section.computed-style .properties .disabled { text-decoration: none; opacity: 0.5; } .styles-section .properties .implicit, .styles-section .properties .inherited { opacity: 0.5; } .styles-element-state-pane { background-color: rgb(240, 240, 240); overflow: hidden; margin-top: -38px; -webkit-transition: margin-top 0.1s ease-in-out; padding-left: 2px; } .styles-element-state-pane.expanded { border-bottom: 1px solid rgb(189, 189, 189); margin-top: 0; } .styles-element-state-pane > table { width: 100%; border-spacing: 0; } .styles-element-state-pane input { margin: 2px; vertical-align: -2px; } .styles-selector { cursor: text; } .body .styles-section .properties .inherited { display: none; } .body.show-inherited .styles-section .properties .inherited { display: block; } .add-attribute { margin-left: 1px; margin-right: 1px; white-space: nowrap; } .section .event-bars { display: none; } .section.expanded .event-bars { display: block; } .event-bar { position: relative; margin-left: 10px; } .event-bar:first-child { margin-top: 1px; } .event-bars .event-bar .header { padding: 0 8px 0 18px; min-height: 16px; opacity: 1.0; white-space: nowrap; -webkit-background-origin: padding; -webkit-background-clip: padding; } .event-bars .event-bar .header .title { font-weight: normal; color: black; text-shadow: white 0 1px 0; } .event-bars .event-bar .header .subtitle { color: rgba(90, 90, 90, 0.75); } .event-bars .event-bar .header::before { position: absolute; top: 2px; left: 7px; width: 8px; height: 8px; opacity: 0.75; content: url(Images/treeRightTriangleBlack.png) !important; } .event-bars .event-bar.expanded .header::before { content: url(Images/treeDownTriangleBlack.png) !important; } .image-preview-container { background: transparent; text-align: center; padding-left: 11px; } .image-preview-container img { margin: 2px auto; background-image: url(Images/checker.png); -webkit-user-select: text; -webkit-user-drag: auto; } /* https://github.com/bgrins/spectrum */ .spectrum-container { position: absolute; top: 0; left: 0; display: inline-block; background: rgba(230, 230, 230, 1) !important; border: 1px solid #646464; padding: 10px; width: 220px; z-index: 10; -webkit-user-select: none; } .spectrum-top { position: relative; width: 100%; display: inline-block; } .spectrum-color { position: absolute; top: 0; left: 0; bottom: 0; right: 40px; } .spectrum-display-value { -webkit-user-select: text; position: relative; left: 2px; top: -6px; } .spectrum-hue { position: absolute; top: 0; right: 0; bottom: 0; left: 170px; -webkit-box-reflect: right -28px; } .spectrum-fill { /* Same as spectrum-color width to force aspect ratio. */ margin-top: 150px; } .spectrum-range-container { position: relative; padding-bottom: 5px; } .spectrum-range-container * { font-size: 11px; vertical-align: middle; } .spectrum-range-container label { display: inline-block; padding-right: 4px; } .spectrum-range-container input { position: absolute; left: 15px; right: 40px; margin: 3px 0 0 0; } .swatch, .spectrum-dragger, .spectrum-slider { -webkit-user-select: none; } .spectrum-sat { background-image: -webkit-linear-gradient(left, white, rgba(204, 154, 129, 0)); } .spectrum-val { background-image: -webkit-linear-gradient(bottom, black, rgba(204, 154, 129, 0)); } .spectrum-hue { background: -webkit-linear-gradient(top, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%); } .spectrum-dragger { border-radius: 5px; height: 5px; width: 5px; border: 1px solid white; cursor: pointer; position: absolute; top: 0; left: 0; background: black; } .spectrum-slider { position: absolute; top: 0; cursor: pointer; border: 1px solid black; height: 4px; left: -1px; right: -1px; } .spectrum-container .swatch { width: 20px; height:20px; margin: 0; }