Source/WebInspectorUI/UserInterface/Views/Main.css - WebKit - Git at Google

 /*
  * Copyright (C) 2013-2017 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: -webkit-system-font, 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;
     flex-direction: column;

     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;
     height: 100%; /* This reduces paint areas when typing in the console. http://webkit.org/b/145324 */
     flex: 1;
 }

 #tab-browser {
     flex: 1;
 }

 #details-sidebar {
     width: 300px;
     height: 100%;
 }

 .message-text-view {
     display: flex;
     flex-direction: column;
     z-index: var(--z-index-popover);

     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;

     justify-content: center;
     align-items: center;

     white-space: pre-wrap;
     text-align: center;
     font-size: 13px;
     color: var(--text-color-gray-medium);
 }

 .message-text-view > .message {
     display: inline-block;
     padding: 15px;
     font-size: var(--message-text-view-font-size);
 }

 .message-text-view .navigation-item-help {
     display: block;
     line-height: 22px;
 }

 .message-text-view .navigation-item-help .navigation-bar {
     display: inline-flex;
     height: 20px;
     padding: 0 4px;
     border-bottom: none;
     vertical-align: middle;
 }

 .message-text-view .navigation-item-help .navigation-bar > .item {
     height: 100%;
     padding: 0 4px;
     font-size: 11px;
     border-radius: 4px;
     border: solid 1px var(--border-color);
 }

 .message-text-view.error {
     color: var(--error-text-color);
 }

 .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;
     -webkit-user-select: none;
 }

 .go-to-link:not(.dont-float) {
     max-width: 100%;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;

     --go-to-link-margin-start: 5px;
 }

 body[dir=ltr] .go-to-link:not(.dont-float) {
     float: right;
     margin-left: var(--go-to-link-margin-start);
 }

 body[dir=rtl] .go-to-link:not(.dont-float) {
     float: left;
     margin-right: var(--go-to-link-margin-start);
 }

 .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);
 }

 body[dir=rtl] .go-to-arrow {
     transform: scaleX(-1);
 }

 :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;

     background-color: hsl(54, 93%, 70%);
     color: black !important;

     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;
     }
 }

 :matches(img, canvas).show-grid {
     background-image: linear-gradient(315deg, transparent 75%, hsl(0, 0%, 95%) 75%),
                       linear-gradient(45deg, transparent 75%, hsl(0, 0%, 95%) 75%),
                       linear-gradient(315deg, hsl(0, 0%, 95%) 25%, transparent 25%),
                       linear-gradient(45deg, hsl(0, 0%, 95%) 25%, transparent 25%);
     background-size: 20px 20px;
     background-position: 10px 10px, 10px 0px, 0 0, 0 10px;
 }
	/*
	* Copyright (C) 2013-2017 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: -webkit-system-font, 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;
	flex-direction: column;

	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;
	height: 100%; /* This reduces paint areas when typing in the console. http://webkit.org/b/145324 */
	flex: 1;
	}

	#tab-browser {
	flex: 1;
	}

	#details-sidebar {
	width: 300px;
	height: 100%;
	}

	.message-text-view {
	display: flex;
	flex-direction: column;
	z-index: var(--z-index-popover);

	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;

	justify-content: center;
	align-items: center;

	white-space: pre-wrap;
	text-align: center;
	font-size: 13px;
	color: var(--text-color-gray-medium);
	}

	.message-text-view > .message {
	display: inline-block;
	padding: 15px;
	font-size: var(--message-text-view-font-size);
	}

	.message-text-view .navigation-item-help {
	display: block;
	line-height: 22px;
	}

	.message-text-view .navigation-item-help .navigation-bar {
	display: inline-flex;
	height: 20px;
	padding: 0 4px;
	border-bottom: none;
	vertical-align: middle;
	}

	.message-text-view .navigation-item-help .navigation-bar > .item {
	height: 100%;
	padding: 0 4px;
	font-size: 11px;
	border-radius: 4px;
	border: solid 1px var(--border-color);
	}

	.message-text-view.error {
	color: var(--error-text-color);
	}

	.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;
	-webkit-user-select: none;
	}

	.go-to-link:not(.dont-float) {
	max-width: 100%;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;

	--go-to-link-margin-start: 5px;
	}

	body[dir=ltr] .go-to-link:not(.dont-float) {
	float: right;
	margin-left: var(--go-to-link-margin-start);
	}

	body[dir=rtl] .go-to-link:not(.dont-float) {
	float: left;
	margin-right: var(--go-to-link-margin-start);
	}

	.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);
	}

	body[dir=rtl] .go-to-arrow {
	transform: scaleX(-1);
	}

	: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;

	background-color: hsl(54, 93%, 70%);
	color: black !important;

	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;
	}
	}

	:matches(img, canvas).show-grid {
	background-image: linear-gradient(315deg, transparent 75%, hsl(0, 0%, 95%) 75%),
	linear-gradient(45deg, transparent 75%, hsl(0, 0%, 95%) 75%),
	linear-gradient(315deg, hsl(0, 0%, 95%) 25%, transparent 25%),
	linear-gradient(45deg, hsl(0, 0%, 95%) 25%, transparent 25%);
	background-size: 20px 20px;
	background-position: 10px 10px, 10px 0px, 0 0, 0 10px;
	}