Web Inspector: UI fonts should pull from system fonts automatically to whatever degre...
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / DebuggerDashboardView.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 .toolbar .dashboard.debugger {
26     display: -webkit-flex;
27     -webkit-flex-wrap: nowrap;
28     -webkit-justify-content: center;
29     -webkit-align-items: center;
30
31     text-align: center;
32     text-shadow: rgba(255, 255, 255, 0.5) 0 1px 0;
33     color: rgb(60, 60, 60);
34     padding: 0 5px;
35 }
36
37 .dashboard.debugger > .message {
38     font-weight: bold;
39 }
40
41 .dashboard.debugger .navigation-bar {
42     border: 0;
43     margin: 0 5px 0 -5px;
44 }
45
46 .toolbar:not(.small-size) .dashboard.debugger .navigation-bar {
47     margin-top: 1px;
48 }
49
50 .dashboard.debugger .navigation-bar .item.button {
51     -webkit-flex-direction: row;
52     width: 16px;
53     cursor: pointer;
54     padding: 0;
55 }
56
57 .dashboard.debugger .navigation-bar .item.button > .glyph {
58     width: 16px;
59     height: 16px;
60     -webkit-animation-name: pulse-pause-button;
61     -webkit-animation-duration: 1s;
62     -webkit-animation-timing-function: ease-out;
63     -webkit-animation-iteration-count: infinite;
64     -webkit-animation-direction: alternate;
65     background-color: rgb(102, 155, 199) !important;
66 }
67
68 @-webkit-keyframes pulse-pause-button {
69     from { opacity: 0.7; -webkit-transform: scale(1); }
70     to { opacity: 1; -webkit-transform: scale(1.1); }
71 }
72
73 .dashboard.debugger > .divider {
74     width: 1px;
75     height: 100%;
76
77     margin: 0 10px;
78
79     background-image: linear-gradient(rgb(190, 190, 190), rgb(190, 190, 190));
80     background-size: 100% 66%;
81     background-repeat: no-repeat;
82     background-position: center;
83 }
84
85 .dashboard.debugger > div {
86     display: -webkit-flex;
87     -webkit-align-items: center;
88 }
89
90 .dashboard.debugger > .location > :first-child {
91     -webkit-align-self: center;
92     width: 16px;
93     height: 16px;
94     margin-right: 5px;
95 }
96
97 .toolbar:not(.small-size) .dashboard.debugger > .location :not(:first-child) {
98     margin-top: 1px;
99 }
100
101 .dashboard.debugger > .location img.icon {
102     width: 16px;
103     height: 16px;
104 }
105
106 .dashboard.debugger > .location .function-name {
107     color: rgb(30, 30, 30);
108 }
109
110 .dashboard.debugger > .location .function-name::after {
111     content: '\00A0\2014\00A0'; /*  —  */
112 }
113
114 .dashboard.debugger > .location .go-to-link {
115     padding-bottom: 1px;
116     -webkit-text-decoration-color: #aaa;
117 }
118
119 .toolbar.collapsed .dashboard.debugger > :not(.message):not(.navigation-bar ) {
120     display: none;
121 }
122
123 .toolbar.small-size .dashboard.debugger > .message {
124     font-size: 10px;
125 }
126
127 .toolbar.small-size .dashboard.debugger > .location img.icon,
128 .toolbar.small-size .dashboard.debugger > .location > :first-child {
129     width: 14px;
130     height: 14px;
131 }