Web Inspector: Timeline record bars are not white when the row is selected from the...
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / TimelineRecordBar.css
1 /*
2  * Copyright (C) 2014 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 .timeline-record-bar {
27     position: absolute;
28     height: 12px;
29 }
30
31 .timeline-record-bar > .segment {
32     position: absolute;
33     height: 100%;
34     background-color: rgb(225, 225, 225);
35     border: 1px solid rgb(200, 200, 200);
36     border-radius: 3px;
37     min-width: 4px;
38     z-index: 1;
39 }
40
41 .timeline-record-bar:not(.has-inactive-segment) > .segment {
42     left: 0;
43     width: 100%;
44 }
45
46 .timeline-record-bar > .segment.inactive {
47     z-index: 0;
48 }
49
50 .timeline-record-bar > .segment.inactive,
51 .timeline-record-bar.unfinished > .segment {
52     border-top-right-radius: 0 !important;
53     border-bottom-right-radius: 0 !important;
54     border-right: none;
55 }
56
57 .timeline-record-bar.has-inactive-segment > .segment:not(.inactive) {
58     border-top-left-radius: 0 !important;
59     border-bottom-left-radius: 0 !important;
60 }
61
62 :matches(:focus, .force-focus) .selected .timeline-record-bar > .segment {
63     background-color: white !important;
64     border: none !important;
65 }
66
67 :matches(:focus, .force-focus) .selected .timeline-record-bar > .segment.inactive {
68     background-color: rgb(196, 215, 242) !important;
69 }
70
71 :matches(:focus, .force-focus) .selected .timeline-record-bar.has-inactive-segment > .segment:not(.inactive) {
72     border-left: 1px solid rgba(56, 121, 217, 0.7) !important;
73 }
74
75 .timeline-record-bar.timeline-record-type-network > .segment {
76     background-color: rgb(120, 176, 225);
77     border-color: rgb(61, 147, 200);
78 }
79
80 .timeline-record-bar.timeline-record-type-network > .segment.inactive {
81     background-color: rgb(167, 204, 237);
82     border-color: rgb(127, 185, 220);
83 }
84
85 .timeline-record-bar.timeline-record-type-layout > .segment {
86     background-color: rgb(234, 153, 153);
87     border-color: rgb(212, 108, 108);
88 }
89
90
91 .timeline-record-bar.timeline-record-type-layout.layout-timeline-record-paint > .segment,
92 .timeline-record-bar.timeline-record-type-layout.layout-timeline-record-composite > .segment {
93     background-color: rgb(176, 204, 105);
94     border-color: rgb(152, 188, 77);
95 }
96
97 .timeline-record-bar.timeline-record-type-script > .segment {
98     background-color: rgb(190, 148, 233);
99     border-color: rgb(153, 113, 185);
100 }