3a64e61aaece6ea6d0b5a623f5ef1c077a793d15
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / SourcesNavigationSidebarPanel.css
1 /*
2  * Copyright (C) 2018 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.sources > .content {
27     top: var(--navigation-bar-height);
28 }
29
30 .sidebar > .panel.navigation.sources > .navigation-bar {
31     position: absolute;
32     top: 0;
33     left: 0;
34     right: 0;
35 }
36
37 .sidebar > .panel.navigation.sources > .navigation-bar .debugger-breakpoints {
38     fill: none;
39     stroke: var(--glyph-color);
40 }
41
42 .sidebar > .panel.navigation.sources > .navigation-bar .debugger-breakpoints.activated {
43     fill: var(--glyph-color-active);
44     stroke: var(--glyph-color-active);
45 }
46
47 .sidebar > .panel.navigation.sources > .navigation-bar .debugger-pause-resume {
48     fill: none;
49     stroke: var(--glyph-color);
50 }
51
52 .sidebar > .panel.navigation.sources > .navigation-bar .debugger-pause-resume.activated {
53     stroke: var(--glyph-color-active);
54 }
55
56 .sidebar > .panel.navigation.sources > .content > .warning-banner {
57     margin-bottom: 6px;
58     padding: 11px 6px;
59     font-size: 11px;
60     text-align: center;
61     background-color: hsl(50, 100%, 94%);
62     border-bottom: 1px solid var(--border-color);
63 }
64
65 .sidebar > .panel.navigation.sources > .content > .warning-banner + .warning-banner {
66     display: none;
67 }
68
69 .sidebar > .panel.navigation.sources > .content > .details-section {
70     padding-bottom: 1px;
71     font-size: 11px;
72     border-bottom-width: 1px !important;
73 }
74
75 .sidebar > .panel.navigation.sources > .content > .details-section:matches(.paused-reason, .breakpoins).collapsed > .header > .options,
76 .sidebar > .panel.navigation.sources > .content > .details-section > .content,
77 .sidebar > .panel.navigation.sources > .content > .details-section > .content > .group {
78     display: block;
79 }
80
81 .sidebar > .panel.navigation.sources > .content > .details-section.collapsed > .content {
82     display: none;
83 }
84
85 .sidebar > .panel.navigation.sources > .content > .details-section.breakpoints > .header > .options .create-breakpoint {
86     width: 15px;
87 }
88
89 .sidebar > .panel.navigation.sources > .content > .details-section:matches(.pause-reason, .call-stack, .breakpoints) > .content,
90 .sidebar > .panel.navigation.sources > .content > .tree-outline.resources {
91     overflow-y: auto;
92 }
93
94 .sidebar > .panel.navigation.sources > .content > .details-section:matches(.call-stack, .breakpoints) > .content {
95     /* Same calculation as below, but without var(--item-count) */
96     max-height: 110px;
97 }
98
99 .sidebar > .panel.navigation.sources > .content > .details-section:matches(.call-stack, .breakpoints):not(.collapsed) > .content {
100     /* 1px from .sidebar > .panel.navigation.sources > .content > .details-section (border-bottom) */
101     /* 5.5 to ensure that half of the next item is shown when overflowing */
102     min-height: calc(min(var(--item-count), 5.5) * 20px);
103 }
104
105 .sidebar > .panel.navigation.sources > .content > .details-section.call-stack {
106     --item-count: var(--call-stack-count);
107 }
108
109 .sidebar > .panel.navigation.sources > .content > .details-section.breakpoints {
110     --item-count: var(--breakpoints-count);
111 }
112
113 .sidebar > .panel.navigation.sources > .content > .details-section.breakpoints .create-breakpoint {
114     width: 15px;
115 }
116
117 .sidebar > .panel.navigation.sources > .content > .navigation-bar {
118     margin-bottom: 1px;
119 }
120
121 .sidebar > .panel.navigation.sources > .content .tree-outline.single-thread {
122     -webkit-margin-start: -10px;
123 }
124
125 .sidebar > .panel.navigation.sources > .content .tree-outline.single-thread > .item.thread {
126     display: none;
127 }
128
129 @media (min-height: 600px) {
130     .sidebar > .panel.navigation.sources > .content {
131         display: flex;
132         flex-direction: column;
133         overflow-y: hidden;
134     }
135
136     .sidebar > .panel.navigation.sources > .content > .pause-reason {
137         flex-shrink: 0;
138     }
139
140     .sidebar > .panel.navigation.sources > .content > .details-section:matches(.call-stack, .breakpoints):not(.collapsed) > .content,
141     .sidebar > .panel.navigation.sources > .content > .tree-outline.resources {
142         height: 100%;
143     }
144 }
145
146 .sidebar > .panel.navigation.sources > .content > .details-section.breakpoints .tree-outline .item.event-target-window .icon {
147     content: url(../Images/TypeObject.svg);
148 }
149
150 @media (prefers-dark-interface) {
151     .sidebar > .panel.navigation.sources > .content > .warning-banner {
152         color: var(--yellow-highlight-text-color);
153         background-color: var(--yellow-highlight-background-color);
154     }
155 }