Web Inspector: UI fonts should pull from system fonts automatically to whatever degre...
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / TimelineRuler.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 .timeline-ruler {
27     position: relative;
28     pointer-events: none;
29 }
30
31 .timeline-ruler.allows-time-range-selection {
32     pointer-events: all;
33 }
34
35 .timeline-ruler > * {
36     pointer-events: none;
37 }
38
39 .timeline-ruler > .header {
40     border-bottom: 1px solid rgb(200, 200, 200);
41
42     position: absolute;
43     top: 0;
44     left: 0;
45     right: 0;
46     height: 22px;
47 }
48
49 .timeline-ruler > .header > .divider {
50     position: absolute;
51     width: 1px;
52     top: 0;
53     bottom: 0;
54     -webkit-transform: translateX(-1px);
55     background-image: linear-gradient(to bottom, rgba(200, 200, 200, 0), rgba(200, 200, 200, 1) 85%);
56 }
57
58 .timeline-ruler > .header > .divider > .label {
59     position: absolute;
60     top: 5px;
61     right: 5px;
62     font-size: 9px;
63     color: rgb(128, 128, 128);
64     white-space: nowrap;
65 }
66
67 .timeline-ruler > .markers {
68     position: absolute;
69     top: 22px;
70     left: 0;
71     right: 0;
72     bottom: 0;
73     z-index: 10;
74 }
75
76 .timeline-ruler > .markers > .divider {
77     position: absolute;
78     width: 1px;
79     top: 1px;
80     bottom: 0;
81     -webkit-transform: translateX(-1px);
82     background-color: rgba(0, 0, 0, 0.05);
83 }
84
85 .timeline-ruler > .markers > .marker {
86     position: absolute;
87     top: 0;
88     bottom: 0;
89
90     -webkit-transform: translateX(-1px);
91
92     border-left-width: 1px;
93     border-left-style: dashed;
94     border-left-color: rgba(128, 128, 128, 0.5);
95 }
96
97 .timeline-ruler > .markers > .marker.current-time {
98     border-left-color: red;
99     border-left-style: solid;
100 }
101
102 .timeline-ruler > .markers > .marker.current-time::before {
103     position: absolute;
104     top: -5px;
105     left: -5px;
106
107     width: 9px;
108     height: 9px;
109     border-radius: 5px;
110
111     background-color: red;
112
113     content: "";
114 }
115
116 .timeline-ruler > .markers > .marker.load-event {
117     border-left-color: rgba(255, 0, 0, 0.5);
118 }
119
120 .timeline-ruler > .markers > .marker.dom-content-event {
121     border-left-color: rgba(0, 0, 255, 0.5);
122 }
123
124 .timeline-ruler > .markers > .marker.timestamp {
125     border-left-color: rgba(0, 110, 0, 0.5);
126 }
127
128 .timeline-ruler > .selection-drag {
129     position: absolute;
130     top: 0;
131     height: 22px;
132     cursor: -webkit-grab;
133     pointer-events: all;
134 }
135
136 .timeline-ruler > .selection-drag:active {
137     cursor: -webkit-grabbing;
138 }
139
140 .timeline-ruler > .selection-handle {
141     position: absolute;
142     top: 0;
143     width: 8px;
144     height: 21px;
145     border-radius: 5px;
146     background-color: rgb(164, 164, 164);
147     border: 1px solid white;
148     cursor: col-resize;
149     pointer-events: all;
150     z-index: 15;
151 }
152
153 .timeline-ruler > .selection-handle.left {
154     -webkit-transform: translateX(-4px);
155 }
156
157 .timeline-ruler > .selection-handle.right {
158     -webkit-transform: translateX(4px);
159 }
160
161 .timeline-ruler > .shaded-area {
162     position: absolute;
163     top: 0;
164     bottom: 0;
165     background-color: rgba(0, 0, 0, 0.1);
166     z-index: 15;
167 }
168
169 .timeline-ruler > .shaded-area.left {
170     left: 0;
171 }
172
173 .timeline-ruler > .shaded-area.right {
174     right: 0;
175 }