Web Inspector: Layer summary should be bottom sticky
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / LayerTreeDetailsSidebarPanel.css
1 /*
2  * Copyright (C) 2013 Apple Inc. All rights reserved.
3  *
4  * Redistribution and use in source and binary forms, with or without
5  * modification, are permitted provided that the following conditions
6  * are met:
7  * 1. Redistributions of source code must retain the above copyright
8  *    notice, this list of conditions and the following disclaimer.
9  * 2. Redistributions in binary form must reproduce the above copyright
10  *    notice, this list of conditions and the following disclaimer in the
11  *    documentation and/or other materials provided with the distribution.
12  *
13  * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
14  * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
15  * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
16  * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
17  * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
18  * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
19  * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
20  * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
21  * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
22  * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
23  * THE POSSIBILITY OF SUCH DAMAGE.
24  */
25
26 .sidebar > .panel.details.layer-tree > .content {
27     bottom: 28px;
28 }
29
30 body.mac-platform.legacy .sidebar > .panel.details.layer-tree > .content {
31     bottom: 22px;
32 }
33
34 .panel.details.layer-tree .data-grid {
35     border-right: none;
36     border-left: none;
37     border-bottom: none;
38 }
39
40 .panel.details.layer-tree .name-column .icon {
41     content: url(../Images/DOMElement.svg);
42 }
43
44 .panel.details.layer-tree tr.reflection .name-column .icon {
45     content: url(../Images/Reflection.svg);
46 }
47
48 .panel.details.layer-tree tr.pseudo-element .name-column .icon {
49     content: url(../Images/PseudoElement.svg);
50 }
51
52 .panel.details.layer-tree .name-column .pseudo-element,
53 .panel.details.layer-tree .name-column .reflection {
54     color: rgb(128, 128, 128);
55 }
56
57 .panel.details.layer-tree tr.selected .name-column .pseudo-element,
58 .panel.details.layer-tree tr.selected .name-column .reflection {
59     color: rgba(255, 255, 255, 0.75);
60 }
61
62 .panel.details.layer-tree .bottom-bar {
63     position: absolute;
64     display: flex;
65     bottom: 0;
66     width: 100%;
67     border-top: 1px solid rgb(179, 179, 179);
68     background-color: white;
69 }
70
71 body.mac-platform.legacy .panel.details.layer-tree .bottom-bar {
72     height: 23px;
73 }
74
75 .panel.details.layer-tree .bottom-bar > div {
76     padding: 4px 6px;
77
78     line-height: 20px;
79
80     white-space: nowrap;
81     overflow: hidden;
82     text-overflow: ellipsis;
83
84     display: flex;
85     flex: 1;
86 }
87
88 body.mac-platform.legacy .panel.details.layer-tree .bottom-bar > div {
89     line-height: inherit;
90     text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
91 }
92
93 .panel.details.layer-tree .layers-memory-label {
94     justify-content: flex-end;
95 }
96
97 .layer-tree-popover {
98     padding: 5px;
99 }
100
101 body.mac-platform.legacy .layer-tree-popover {
102     text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
103 }
104
105 .layer-tree-popover p {
106     margin: 0;
107 }
108
109 .layer-tree-popover ul {
110     list-style-type: none;
111     margin: 10px 0 0 0;
112     padding-left: 10px;
113 }
114
115 .layer-tree-popover li {
116     line-height: 1.3em;
117 }