1/*
2Copyright (c) 2011 The Chromium Authors. All rights reserved.
3Use of this source code is governed by a BSD-style license that can be
4found in the LICENSE file.
5*/
6
7* {
8  box-sizing: border-box;
9  -moz-box-sizing: border-box;
10}
11body {
12  font-family: sans-serif;
13}
14
15#filterBox {
16  background: #efefef;
17  padding: 5px;
18  border-bottom: 1px solid gray;
19  overflow: hidden;
20}
21
22#filterBox * {
23  white-space: nowrap;
24  font-family: sans-serif;
25  font-size: 12px;
26}
27
28#filterBox input {
29  width: 100%;
30}
31
32#actionBox {
33  background: #efefef;
34  white-space: nowrap;
35  border-top: 1px solid gray;
36  overflow: hidden;
37}
38
39#eventsBox {
40  overflow-x: hidden;
41  overflow-y: auto
42}
43
44#detailsBox {
45  overflow: auto;
46}
47
48#splitterBox {
49  background: #bfbfbf;
50  border-left: 1px inset black;
51  border-right: 1px solid black;
52  position:absolute;
53  width: 8px;
54  cursor: col-resize;
55  user-select: none;
56}
57
58#eventsListTable {
59  cursor: pointer;
60}
61
62#eventsListTable thead td {
63  text-align: left;
64  font-weight: bold;
65  background: rgb(229, 236, 249);
66}
67
68#eventsListTable td {
69  padding: 3px;
70  border-left: 1px solid #afafaf;
71  border-bottom: 1px solid #afafaf;
72  text-overflow: ellipsis;
73  font-size: 12px;
74  white-space: nowrap;
75}
76
77#eventsListTableBody .mouseover {
78  background: rgb(244,244,255);
79}
80
81#eventsListTableBody .selected,
82#eventsListTableBody .mouseover .selected {
83  background: #C3D9FF;
84}
85
86#eventsListTableBody .source_CONNECT_JOB {
87  color: blue;
88}
89
90#eventsListTableBody .source_HOST_RESOLVER_IMPL_JOB,
91#eventsListTableBody .source_HOST_RESOLVER_IMPL_REQUEST {
92  color: #308080;
93}
94
95#eventsListTableBody .source_DISK_CACHE_ENTRY,
96#eventsListTableBody .source_MEMORY_CACHE_ENTRY {
97  color: gray;
98}
99
100#eventsListTableBody .source_SOCKET {
101  color: purple;
102}
103
104#eventsListTableBody .source_INIT_PROXY_RESOLVER {
105  color: green;
106}
107
108#eventsListTableBody .source_NONE {
109  color: red;
110}
111
112.tabSwitcher {
113  margin-top: 10px;
114  margin-left: 10px;
115}
116
117.tabSwitcher th {
118  background: rgb(229,236,249);
119  cursor: pointer;
120  background-clip: border-box;
121  border-top-left-radius: 5px 5px;
122  border-top-right-radius: 5px 5px;
123  padding-left: 4px;
124  padding-top: 4px;
125  padding-right: 4px;
126  font-size: 12px;
127  margin-left: 30px;
128}
129
130.tabSwitcher th.selected, .tabSwitcherLine {
131  background: rgb(195,217,255);
132}
133
134.tabSwitcherLine {
135  height: 10px;
136}
137
138#detailsTabHandles {
139  border: 1px solid white;
140}
141
142.logSourceEntry {
143  margin: 5px;
144}
145
146.logSourceEntry * p {
147  font-weight: bold;
148  font-size: 12px;
149}
150
151.logSourceEntry * td {
152  font-size: 10px;
153}
154
155#detailsLogBox,
156#detailsTimelineBox,
157#httpCacheTabContent,
158#proxyTabContent,
159#dataTabContent,
160#dnsTabContent,
161#socketsTabContent,
162#spdyTabContent,
163#serviceProvidersTabContent,
164#testTabContent,
165#hstsTabContent,
166#httpThrottlingTabContent {
167  overflow: auto;
168  padding: 10px;
169}
170
171#proxyTabContent td,
172#proxyTabContent th {
173  font-size: 12px;
174}
175
176/*
177 * Styles for TABLE that uses a thin collapsed border.
178 */
179table.styledTable {
180  border-collapse:collapse;
181}
182
183table.styledTable,
184.styledTable th,
185.styledTable td {
186  border: 1px solid #777;
187  padding-right: 4px;
188  padding-left: 4px;
189}
190
191.styledTable th {
192  background: rgb(224,236,255);
193}
194
195.styledTable th.title {
196  background: rgb(255,217,217);
197}
198
199/*
200 * This is the box in the top right of the Data tab which shows how many
201 * events have been captured so far.
202 */
203.capturingBox {
204  border: 1px dashed black;
205  display: inline-block;
206  text-align: left;
207  padding: 5px;
208}
209
210/**
211 * Styling for an emphasized button.
212 */
213.bigButton {
214  font-size: 100%;
215  font-weight: bold;
216}
217
218/**
219 * Styling for text indicating a potential problem or error state.
220 */
221.warningText {
222  color: red;
223}
224