Web Inspector: UI fonts should pull from system fonts automatically to whatever degre...
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / TimelineSidebarPanel.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 .sidebar > .panel.navigation.timeline > .status-bar {
27     position: absolute;
28     top: 0;
29     left: 0;
30     right: 0;
31     height: 22px;
32     border-bottom: 1px solid rgb(179, 179, 179);
33 }
34
35 .sidebar > .panel.navigation.timeline > .status-bar > .record-glyph {
36     position: absolute;
37     top: 0;
38     left: 5px;
39     width: 21px;
40     height: 21px;
41     padding: 0;
42     border: none;
43     outline: none;
44     color: transparent;
45     overflow: hidden;
46
47     -webkit-appearance: none;
48
49     background-color: transparent;
50     background-image: -webkit-image-set(url(../Images/RecordingStopped.png) 1x, url(../Images/RecordingStopped@2x.png) 2x);
51     background-repeat: no-repeat;
52     background-size: 21px 21px;
53 }
54
55 .sidebar > .panel.navigation.timeline > .status-bar > .record-glyph.recording {
56     background-image: -webkit-image-set(url(../Images/Recording.png) 1x, url(../Images/Recording@2x.png) 2x);
57 }
58
59 .sidebar > .panel.navigation.timeline > .status-bar > .record-glyph:hover {
60     background-image: -webkit-image-set(url(../Images/RecordingHovered.png) 1x, url(../Images/RecordingHovered@2x.png) 2x);
61 }
62
63 .sidebar > .panel.navigation.timeline > .status-bar > .record-glyph.recording:hover {
64     background-image: -webkit-image-set(url(../Images/RecordingStopped.png) 1x, url(../Images/RecordingStopped@2x.png) 2x);
65 }
66
67 .sidebar > .panel.navigation.timeline > .status-bar > .record-glyph.forced {
68     background-image: -webkit-image-set(url(../Images/RecordingStopped.png) 1x, url(../Images/RecordingStopped@2x.png) 2x) !important;
69 }
70
71 .sidebar > .panel.navigation.timeline > .status-bar > .record-glyph.recording.forced {
72     background-image: -webkit-image-set(url(../Images/Recording.png) 1x, url(../Images/Recording@2x.png) 2x) !important;
73 }
74
75 .sidebar > .panel.navigation.timeline > .status-bar > .record-status {
76     position: absolute;
77     top: 0;
78     right: 21px;
79     left: 21px;
80
81     text-align: center;
82
83     line-height: 20px;
84     font-weight: bold;
85
86     color: rgb(76, 76, 76);
87     text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
88 }
89
90 .sidebar > .panel.navigation.timeline > .title-bar {
91     position: absolute;
92     left: 0;
93     right: 0;
94
95     height: 22px;
96
97     border-bottom: 1px solid rgb(179, 179, 179);
98     background-image: linear-gradient(to bottom, rgb(238, 240, 244), rgb(224, 226, 230));
99
100     color: rgb(57, 57, 57);
101     text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
102
103     white-space: nowrap;
104     overflow: hidden;
105     text-overflow: ellipsis;
106
107     font-weight: bold;
108
109     padding: 4px 9px;
110
111     white-space: nowrap;
112     overflow: hidden;
113 }
114
115 .sidebar > .panel.navigation.timeline > .title-bar.timelines {
116     top: 22px;
117 }
118
119 .sidebar > .panel.navigation.timeline > .title-bar.timeline-events {
120     height: 23px;
121     border-top: 1px solid rgb(179, 179, 179);
122     top: 152px;
123 }
124
125 .sidebar > .panel.navigation.timeline > .timelines-content {
126     position: absolute;
127     top: 44px;
128     height: 108px;
129     left: 0;
130     right: 0;
131
132     overflow: hidden;
133 }
134
135 .sidebar > .panel.navigation.timeline > .timelines-content .close-button {
136     margin-top: 2px;
137     width: 12px;
138     height: 12px;
139
140     content: -webkit-image-set(url(../Images/CloseTimeline.png) 1x, url(../Images/CloseTimeline@2x.png) 2x);
141
142     visibility: hidden;
143 }
144
145 .sidebar > .panel.navigation.timeline > .timelines-content li.item .icon {
146     width: 24px;
147     height: 24px;
148     margin-top: 5px;
149 }
150
151 .sidebar > .panel.navigation.timeline > .timelines-content li.item.selected .close-button {
152     visibility: visible;
153 }
154
155 .sidebar > .panel.navigation.timeline > .timelines-content li.item:not(.selected):nth-child(even) {
156     background-color: rgba(0, 0, 0, 0.03);
157     background-clip: padding-box;
158 }
159
160 .sidebar > .panel.navigation.timeline > .timelines-content li.item:not(.selected):not(:first-child) {
161     border-top: 1px solid rgba(0, 0, 0, 0.09);
162 }
163
164 .sidebar > .panel.navigation.timeline > .timelines-content li.item.selected + li.item {
165     border-top-color: rgb(120, 139, 168);
166 }
167
168 .sidebar > .panel.navigation.timeline > .timelines-content :focus li.item.selected + li.item {
169     border-top-color: rgb(107, 130, 164);
170 }
171
172 .sidebar > .panel.navigation.timeline > .timelines-content .close-button:active {
173     opacity: 0.8;
174 }
175
176 .sidebar > .panel.navigation.timeline > .content,
177 .sidebar > .panel.navigation.timeline > .empty-content-placeholder {
178     top: 175px;
179 }
180
181 .sidebar > .panel.navigation.timeline.timeline-content-view-showing > .content {
182  /* This hides the scrollbar. The view shows a scrollbar, we don't need two. */
183     padding-right: 16px;
184     right: -16px;
185 }
186
187 .sidebar > .panel.navigation.timeline > .content > .stripe-background {
188     position: absolute;
189     top: 0;
190     left: 0;
191     right: 0;
192     min-height: 100%;
193
194     background-image: linear-gradient(to bottom, transparent, transparent 50%, rgba(0, 0, 0, 0.03) 50%, rgba(0, 0, 0, 0.03));
195     background-size: 100% 40px;
196
197     pointer-events: none;
198     display: none;
199 }
200
201 .sidebar > .panel.navigation.timeline.timeline-content-view-showing > .content > .stripe-background {
202     display: block;
203 }