2cd2008809504bb4036b41483792b19f2d19364f
[WebKit-https.git] / Source / WebCore / inspector / front-end / dataGrid.css
1 .data-grid {
2     position: relative;
3     border: 1px solid #aaa;
4 }
5
6 .data-grid .highlight {
7     background-color: rgb(255, 230, 179);
8 }
9
10 .data-grid tr.selected .highlight {
11     background-color: transparent;
12 }
13
14 .data-grid table {
15     table-layout: fixed;
16     border-spacing: 0;
17     border-collapse: collapse;
18     width: 100%;
19     font-size: 11px;
20     font-family: Lucida Grande, sans-serif;
21 }
22
23 .data-grid .data-container {
24     position: absolute;
25     top: 16px;
26     bottom: 0;
27     left: 0;
28     right: 0;
29     overflow-x: hidden;
30     overflow-y: overlay;
31 }
32
33 .data-grid.inline {
34     border-right: none;
35 }
36
37 .data-grid.inline .data-container {
38     position: static;
39 }
40
41 .data-grid.inline th.corner,
42 .data-grid.inline td.corner {
43     display: none;
44 }
45
46 .data-grid th {
47     text-align: left;
48     background-image: url(Images/glossyHeader.png);
49     background-repeat: repeat-x;
50     border-right: 1px solid rgb(179, 179, 179);
51     border-bottom: 1px solid rgb(179, 179, 179);
52     height: 15px;
53     font-weight: normal;
54     vertical-align: middle;
55     padding: 0 4px;
56     white-space: nowrap;
57 }
58
59 .data-grid th.corner,
60 .data-grid td.corner {
61     width: 14px;
62     padding-right: 0px;
63     padding-left: 0px;
64     border-right: 0 none transparent !important;
65 }
66
67 .data-grid tr.filler {
68     display: table-row !important;
69     height: auto !important;
70 }
71
72 .data-grid tr.filler td {
73     height: auto !important;
74     padding: 0 !important;
75 }
76
77 .data-grid table.data {
78     position: absolute;
79     left: 0;
80     top: 0;
81     right: 0;
82     bottom: 0;
83     height: 100%;
84     border-top: 0 none transparent;
85     background-image: -webkit-gradient(linear, left top, left bottom, from(white), color-stop(0.5, white), color-stop(0.5, rgb(234, 243, 255)), to(rgb(234, 243, 255)));
86     -webkit-background-size: 1px 32px;
87     table-layout: fixed;
88 }
89
90 .data-grid.inline table.data {
91     position: static;
92 }
93
94 .data-grid table.data tr {
95     display: none;
96 }
97
98 .data-grid table.data tr.revealed {
99     display: table-row;
100 }
101
102 .data-grid td {
103     vertical-align: top;
104     height: 16px; /* Keep in sync with .data-grid table.data @ -webkit-background-size */
105     line-height: 12px;
106     padding: 2px 4px;
107     white-space: nowrap;
108     overflow: hidden;
109     border-right: 1px solid #aaa;
110     -webkit-user-select: text;
111 }
112
113 .data-grid td > div, .data-grid th > div {
114     white-space: nowrap;
115     text-overflow: ellipsis;
116     overflow: hidden;
117 }
118
119 .data-grid td.editing > div {
120     text-overflow: clip;
121 }
122
123 .data-grid .center div {
124     text-align: center;
125 }
126
127 .data-grid .right div {
128     text-align: right;
129 }
130
131 .data-grid th.sortable div {
132     position: relative;
133 }
134
135 .data-grid th.sortable:active {
136     background-image: url(Images/glossyHeaderPressed.png);
137 }
138 .data-grid th.sort-ascending, .data-grid th.sort-descending {
139     border-right: 1px solid rgb(107, 140, 196);
140     border-bottom: 1px solid rgb(107, 140, 196);
141     background-image: url(Images/glossyHeaderSelected.png);
142     background-repeat: repeat-x;
143 }
144
145 .data-grid th.sortable.sort-ascending:active, .data-grid th.sortable.sort-descending:active {
146     background-image: url(Images/glossyHeaderSelectedPressed.png);
147 }
148
149 .data-grid th.sort-ascending > div::after {
150     position: absolute;
151     top: 0;
152     bottom: 0;
153     right: 0;
154     height: 12px;
155     margin-bottom: auto;
156     margin-top: auto;
157     width: 8px;
158     content: url(Images/treeUpTriangleBlack.png);
159 }
160
161 .data-grid th.sort-descending > div::after {
162     position: absolute;
163     top: 0;
164     bottom: 0;
165     right: 0;
166     height: 8px;
167     margin-bottom: auto;
168     margin-top: auto;
169     width: 8px;
170     content: url(Images/treeDownTriangleBlack.png);
171 }
172
173 .data-grid button {
174     line-height: 18px;
175 }
176
177 body.inactive .data-grid th.sort-ascending, body.inactive .data-grid th.sort-descending {
178     background-image: url(Images/glossyHeader.png);
179     border-right: 1px solid rgb(179, 179, 179);
180     border-bottom: 1px solid rgb(179, 179, 179);
181 }
182
183 .data-grid tr.parent td.disclosure::before {
184     float: left;
185     content: url(Images/treeRightTriangleBlack.png);
186     width: 8px;
187     height: 8px;
188     margin-right: 2px;
189     -webkit-user-select: none;
190 }
191
192 .data-grid tr.expanded td.disclosure::before {
193     content: url(Images/treeDownTriangleBlack.png);
194     width: 8px;
195     height: 8px;
196     margin-top: 1px;
197 }
198
199 .data-grid tr.selected {
200     background-color: rgb(212, 212, 212);
201     color: inherit;
202 }
203
204 .data-grid:focus tr.selected {
205     background-color: rgb(56, 121, 217);
206     color: white;
207 }
208
209 .data-grid:focus tr.selected a {
210     color: white;
211 }
212
213 .data-grid:focus tr.parent.selected td.disclosure::before {
214     content: url(Images/treeRightTriangleWhite.png);
215 }
216
217 .data-grid:focus tr.expanded.selected td.disclosure::before {
218     content: url(Images/treeDownTriangleWhite.png);
219 }
220
221 .data-grid tr:not(.parent) td.disclosure {
222     text-indent: 10px;
223 }
224
225 .data-grid-resizer {
226     position: absolute;
227     top: 0;
228     bottom: 0;
229     width: 5px;
230     z-index: 500;
231     cursor: col-resize;
232 }