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