diff options
author | Lorry Tar Creator <lorry-tar-importer@lorry> | 2017-06-27 06:07:23 +0000 |
---|---|---|
committer | Lorry Tar Creator <lorry-tar-importer@lorry> | 2017-06-27 06:07:23 +0000 |
commit | 1bf1084f2b10c3b47fd1a588d85d21ed0eb41d0c (patch) | |
tree | 46dcd36c86e7fbc6e5df36deb463b33e9967a6f7 /Source/WebInspectorUI/UserInterface/Views/Main.css | |
parent | 32761a6cee1d0dee366b885b7b9c777e67885688 (diff) | |
download | WebKitGtk-tarball-master.tar.gz |
webkitgtk-2.16.5HEADwebkitgtk-2.16.5master
Diffstat (limited to 'Source/WebInspectorUI/UserInterface/Views/Main.css')
-rw-r--r-- | Source/WebInspectorUI/UserInterface/Views/Main.css | 397 |
1 files changed, 397 insertions, 0 deletions
diff --git a/Source/WebInspectorUI/UserInterface/Views/Main.css b/Source/WebInspectorUI/UserInterface/Views/Main.css new file mode 100644 index 000000000..84aaa58b4 --- /dev/null +++ b/Source/WebInspectorUI/UserInterface/Views/Main.css @@ -0,0 +1,397 @@ +/* + * Copyright (C) 2013 Apple Inc. All rights reserved. + * + * 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. + * + * THIS SOFTWARE IS PROVIDED BY APPLE INC. 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 INC. 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. + */ + +* { + box-sizing: border-box; +} + +body { + font-family: -apple-system, sans-serif; + font-size: 11px; + + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + + padding: 0; + margin: 0; + + overflow: hidden; + + -webkit-user-select: none; + -webkit-user-drag: none; + + cursor: default; + + -webkit-font-smoothing: subpixel-antialiased; + + background-color: white; +} + +body.docked.bottom { + border-top: 1px solid var(--border-color); +} + +body.docked.right { + border-left: 1px solid var(--border-color); +} + +body.docked.left { + border-right: 1px solid var(--border-color); +} + +#docked-resizer { + display: none; + + z-index: var(--z-index-resizer); +} + +body.docked #docked-resizer { + display: block; + + position: absolute; + top: 0; +} + +body.docked.bottom #docked-resizer { + left: 0; + right: 0; + height: 3px; + + cursor: row-resize; +} + +body.docked.right #docked-resizer { + left: 0; + bottom: 0; + width: 3px; + + cursor: col-resize; +} + +body.docked.left #docked-resizer { + right: 0; + bottom: 0; + width: 3px; + + cursor: col-resize; +} + +body.docked.bottom #toolbar { + cursor: row-resize; +} + +body.docked.bottom #toolbar .item:not(.flexible-space) { + cursor: default; +} + +input[type=range] { + -webkit-appearance: none; +} + +input[type=range]::-webkit-slider-thumb { + margin-top: -7px; +} + +input[type=range]::-webkit-slider-runnable-track { + height: 1px; + margin-top: 1px; + background-color: var(--selected-background-color); +} + +#main { + position: absolute; + top: calc(var(--toolbar-height) + var(--tab-bar-height)); + left: 0; + right: 0; + bottom: 0; + + display: flex; + + background-color: white; + + /* The position and z-index are needed to make negative z-index work in the DOM tree. */ + z-index: 0; +} + +#navigation-sidebar { + width: 300px; + height: 100%; +} + +body.docked:matches(.right, .left) #navigation-sidebar.collapsed > .resizer { + pointer-events: none; +} + +#content { + display: flex; + flex-direction: column; + flex: 1; + + height: 100%; /* This reduces paint areas when typing in the console. http://webkit.org/b/145324 */ +} + +#tab-browser { + flex: 1; +} + +#split-content-browser { + border-top: 1px solid var(--border-color); +} + +#split-content-browser > .navigation-bar { + cursor: row-resize; + + background-color: var(--panel-background-color); +} + +#split-content-browser > .navigation-bar :matches(.find-banner, .find-banner + .divider) { + display: none; +} + +#split-content-browser > .navigation-bar .item { + height: 100%; +} + +#split-content-browser > .navigation-bar .item:not(.flexible-space) { + cursor: default; +} + +#split-content-browser .hierarchical-path-component.log-icon .icon { + margin-left: 6px; + margin-right: 6px; + opacity: 0.7; +} + +#split-content-browser .hierarchical-path-component.log-icon .title { + color: hsla(0, 0%, 0%, 0.75); +} + +#split-content-browser .hierarchical-path-component.log-icon select { + display: none; +} + +#split-content-browser > .navigation-bar > :matches(.hierarchical-path, .log-scope-bar) { + pointer-events: none; +} + +#split-content-browser > .navigation-bar > .log-scope-bar > li { + pointer-events: all; +} + +#details-sidebar { + width: 300px; + height: 100%; +} + +.message-text-view { + display: flex; + z-index: var(--z-index-popover); + + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + + padding-left: 20%; + padding-right: 20%; + + justify-content: center; + align-items: center; + + line-height: 20px; + white-space: pre-wrap; + text-align: center; + + font-size: 18px; + font-weight: bold; + + color: hsl(0, 0%, 74%); + background-color: white; +} + +.message-text-view.error { + color: hsl(0, 86%, 47%); +} + +.message-text-view.error::before { + display: inline-block; + + width: 20px; + height: 20px; + margin-right: 4px; + vertical-align: bottom; + + background-image: url(../Images/Error.svg); + background-size: 100% 100%; + content: ""; +} + +.resource-link { + display: block; +} + +.resource-link + .resource-link { + margin-top: 2px; +} + +.resource-link, +.go-to-link { + color: hsl(0, 0%, 33%); + text-decoration: underline; + cursor: pointer; +} + +.go-to-link:not(.dont-float) { + float: right; + margin-left: 5px; + max-width: 100%; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} + +.go-to-arrow { + -webkit-appearance: none; + + padding: 0; + margin: 0; + border: none; + + background-color: transparent; + background-image: url(../Images/GoToArrow.svg#normal); + background-repeat: no-repeat; + background-position: center; + background-size: 10px 10px; + + width: 16px; + height: 16px; + + /* Workaround: for text boxes overlapping float:right. Give go-to arrows a z-index to ensure they are clickable. + <rdar://problem/11536832> Cannot access content view from Instruments navigator if name of file is truncated */ + position: relative; + z-index: 1; +} + +.go-to-arrow:active { + background-image: url(../Images/GoToArrow.svg#active); +} + +:matches(:focus, .force-focus) .selected .go-to-arrow { + background-image: url(../Images/GoToArrow.svg#selected); +} + +:matches(:focus, .force-focus) .selected .go-to-arrow:active { + background-image: url(../Images/GoToArrow.svg#selected-active); +} + +.hidden { + display: none !important; +} + +.expand-list-button { + -webkit-appearance: none; + text-decoration: underline; + background-color: transparent; + padding: 0; + margin: 0; + border: 0; + cursor: pointer; + color: black; +} + +.node-link { + text-decoration: underline; + cursor: pointer; +} + +.node-link-list, .node-link-list li:not([hidden]) { + display: block; + margin: 0; + padding: 0; + line-height: 1.2; +} + +.node-link-list li { + margin: 0 0 0.4em; +} + +.node-link-list li:last-child { + margin: 0; +} + +.value-with-clarification .clarification { + color: hsl(0, 0%, 40%); +} + +.bouncy-highlight { + position: absolute; + z-index: var(--z-index-highlight); + + box-shadow: inset hsl(50, 91%, 76%) 0 -1px 0, hsl(52, 56%, 60%) 0 1px 1px, hsla(0, 0%, 0%, 0.33) 0 1px 2px 1px; + text-shadow: white 0 0 2px; + + background: linear-gradient(to bottom, hsl(54, 93%, 70%), hsl(50, 84%, 67%)); + border-radius: 7px; + + padding: 2px 4px; + margin-top: -2px; + margin-left: -4px; + + -webkit-user-select: none; + pointer-events: none; + + animation-name: bouncy-highlight-animation; + animation-duration: 750ms; + animation-timing-function: ease-in-out; + + opacity: 0; +} + +@keyframes bouncy-highlight-animation { + 0% { + transform: scale(1); + opacity: 1; + } + + 12.5% { + transform: scale(1.25); + } + + 25% { + transform: scale(1); + } + + 62.5% { + opacity: 1; + } + + 100% { + opacity: 0; + } +} |