70a97559a3300bc3b4fb90521133440afd246033
[WebKit-https.git] / Source / WebInspectorUI / UserInterface / Views / Toolbar.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 .toolbar {
27     display: flex;
28
29     white-space: nowrap;
30     overflow: hidden;
31
32     background-image: linear-gradient(to bottom, hsl(0, 0%, 92%), hsl(0, 0%, 87%));
33     box-shadow: inset hsla(0, 0%, 100%, 0.5) 0 1px 1px;
34
35     outline: none;
36
37     padding-top: 3px;
38     padding-bottom: 3px;
39     height: 36px;
40 }
41
42 body.window-inactive .toolbar {
43     background-image: none;
44     background-color: hsl(0, 0%, 96%);
45 }
46
47 body.mac-platform:not(.docked) .toolbar {
48     padding-top: 21px;
49     height: 54px;
50 }
51
52 .toolbar .control-section {
53     display: flex;
54
55     flex-direction: column;
56     align-items: center;
57     justify-content: center;
58
59     padding-left: 6px;
60     padding-right: 2px;
61
62     min-width: -webkit-min-content;
63 }
64
65 .toolbar:matches(.icon-and-label-horizontal.small-size, .icon-only.small-size, .label-only) .control-section {
66     flex-direction: row;
67 }
68
69 .toolbar .item-section {
70     display: flex;
71     flex: 1;
72     min-width: -webkit-min-content;
73 }
74
75 .toolbar .item-section.left {
76     justify-content: flex-start;
77 }
78
79 .toolbar .item-section.center-left {
80     justify-content: flex-start;
81 }
82
83 .toolbar .item-section.center-right {
84     justify-content: center;
85 }
86
87 .toolbar .item-section.center {
88     justify-content: center;
89 }
90
91 .toolbar .item-section.right {
92     justify-content: flex-end;
93     padding-right: 4px;
94 }
95
96 .toolbar .item {
97     display: flex;
98     outline: none;
99 }
100
101 .toolbar .search-bar {
102     width: 100%;
103     min-width: 100px;
104 }
105
106 .toolbar .search-bar > input[type="search"] {
107     width: 100%;
108     font-size: 12px;
109     background-clip: initial;
110     margin: 4px;
111 }
112
113 .toolbar .search-bar > input[type="search"]::-webkit-textfield-decoration-container {
114     margin-left: 4px;
115 }
116
117 body.legacy-mac .toolbar .item.button,
118 body.legacy-mac .toolbar .search-bar > input[type="search"],
119 body.legacy-mac .toolbar .dashboard-container {
120     background-color: hsl(0, 0%, 99%);
121     border: 1px solid transparent;
122     border-top-color: hsl(0, 0%, 100%);
123     box-shadow: hsla(0, 0%, 0%, 0.15) 0 1px 0;
124     border-radius: 4px;
125 }
126
127 body.legacy-mac .toolbar .search-bar > input[type="search"] {
128     box-shadow: 0 0 0 7px hsla(211, 96%, 48%, 0);
129     transition: box-shadow .25s cubic-bezier(0.165, 0.840, 0.440, 1) /* easeOutQuart */;
130 }
131
132 body.legacy-mac .toolbar .search-bar > input[type="search"]:focus {
133     box-shadow: hsla(0, 0%, 0%, 0.15) 0 1px 0, 0 0 0 3px hsla(211, 96%, 48%, 0.4);
134 }
135
136 body.legacy-mac .toolbar .item.button:active {
137     border-top-color: hsl(0, 0%, 94%);
138     background-color: hsl(0, 0%, 89%);
139 }
140
141 body.window-inactive.legacy-mac .toolbar .item.button,
142 body.window-inactive.legacy-mac .toolbar .search-bar > input[type="search"],
143 body.window-inactive.legacy-mac .toolbar .dashboard-container {
144     border: 1px solid hsl(0, 0%, 86%);
145     background-color: hsl(0, 0%, 96%);
146     box-shadow: none;
147 }
148
149 body.latest-mac .toolbar .item.button,
150 body.latest-mac .toolbar .search-bar > input[type="search"],
151 body.latest-mac .toolbar .dashboard-container {
152     background-image: linear-gradient(hsl(0, 0%, 99%), hsl(0, 0%, 94%));
153     box-shadow: hsla(0, 0%, 0%, 0.3) 0 1px 1px -1px;
154
155     border-radius: 4px;
156     border: 1px solid hsl(0, 1%, 82%);
157     border-top-color: hsl(0, 0%, 83%);
158     border-bottom-color: hsl(0, 0%, 76%);
159 }
160
161 body.latest-mac .toolbar .search-bar > input[type="search"] {
162     box-shadow: hsla(0, 0%, 0%, 0.3) 0 1px 1px -1px, 0 0 0 7px hsla(211, 96%, 48%, 0);
163     transition: box-shadow .25s cubic-bezier(0.165, 0.840, 0.440, 1) /* easeOutQuart */;
164 }
165
166 body.latest-mac .toolbar .search-bar > input[type="search"]:focus {
167     box-shadow: hsla(0, 0%, 0%, 0.15) 0 1px 0, 0 0 0 3px hsla(211, 96%, 48%, 0.4);
168 }
169
170 @media (-webkit-min-device-pixel-ratio: 2) {
171     body.latest-mac .toolbar .item.button,
172     body.latest-mac .toolbar .search-bar > input[type="search"],
173     body.latest-mac .toolbar .dashboard-container {
174         border: 0.5px solid hsl(0, 0%, 78%);
175         border-top-color: hsl(0, 0%, 80%);
176         border-bottom-color: hsl(0, 0%, 65%);
177     }
178 }
179
180 body.latest-mac .toolbar .item.button:active {
181     background-image: linear-gradient(hsl(0, 0%, 89%), hsl(0, 0%, 86%));
182     box-shadow: hsla(0, 0%, 0%, 0.3) 0 1px 1px -1px, inset 0 1px 1px -1px white;
183 }
184
185 body.latest-mac.window-inactive .toolbar .item.button,
186 body.latest-mac.window-inactive .toolbar .search-bar > input[type="search"],
187 body.latest-mac.window-inactive .toolbar .dashboard-container {
188     opacity: 0.65;
189     border-color: hsla(0, 0%, 0%, 0.15);
190     background-color: transparent;
191     background-image: none;
192 }
193
194 @media (-webkit-min-device-pixel-ratio: 2) {
195     body.latest-mac.window-inactive .toolbar .item.button,
196     body.latest-mac.window-inactive .toolbar .search-bar > input[type="search"],
197     body.latest-mac.window-inactive .toolbar .dashboard-container {
198         box-shadow: inset 0 0 1px 0 hsla(0, 0%, 0%, 0.1);
199     }
200 }
201
202 @media (max-width: 539px) {
203     .toolbar .item.download {
204         display: none;
205     }
206 }