xref: /aosp_15_r20/external/perfetto/ui/src/assets/topbar.scss (revision 6dbdd20afdafa5e3ca9b8809fa73465d530080dc) 
1// Copyright (C) 2018 The Android Open Source Project
2//
3// Licensed under the Apache License, Version 2.0 (the "License");
4// you may not use this file except in compliance with the License.
5// You may obtain a copy of the License at
6//
7//      http://www.apache.org/licenses/LICENSE-2.0
8//
9// Unless required by applicable law or agreed to in writing, software
10// distributed under the License is distributed on an "AS IS" BASIS,
11// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12// See the License for the specific language governing permissions and
13// limitations under the License.
14
15@import "widgets/theme";
16
17@mixin omnibox-width() {
18  width: 90%;
19  max-width: 600px;
20}
21
22.topbar {
23  grid-area: topbar;
24  position: relative;
25  z-index: 3;
26  overflow: visible;
27  background-color: hsl(215, 1%, 95%);
28  box-shadow: 0px 1px 2px 1px #00000026;
29  min-height: var(--topbar-height);
30  display: flex;
31  justify-content: center;
32  align-items: center;
33  .omnibox {
34    @include omnibox-width();
35    @include transition(0.25s);
36    display: grid;
37    grid-template-areas: "icon input stepthrough";
38    grid-template-columns: 34px auto max-content;
39    border-radius: $pf-border-radius;
40    background-color: white;
41    border: solid 1px transparent;
42    &:focus-within {
43      border-color: $pf-colour-thin-border;
44      box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.2);
45    }
46    line-height: 34px;
47    &:before {
48      @include material-icon("search");
49      margin: 5px;
50      color: #aaa;
51      grid-area: icon;
52    }
53    input {
54      grid-area: input;
55      border: 0;
56      padding: 0 10px;
57      font-size: 18px;
58      font-family: "Roboto Condensed", sans-serif;
59      font-weight: 300;
60      color: #666;
61      background-color: transparent;
62      &:focus {
63        outline: none;
64      }
65      &::placeholder {
66        color: #b4b7ba;
67        font-family: "Roboto Condensed", sans-serif;
68        font-weight: 400;
69      }
70    }
71    &.query-mode {
72      background-color: #111;
73      border-radius: 0;
74      width: 100%;
75      max-width: 100%;
76      margin-top: 0;
77      border-left: 1px solid #404854;
78      height: var(--topbar-height);
79      input {
80        color: #9ddc67;
81        font-family: var(--monospace-font);
82        padding-left: 0;
83      }
84      &:before {
85        content: "attach_money";
86        color: #9ddc67;
87        font-size: 26px;
88        padding-top: 5px;
89      }
90    }
91    &.command-mode {
92      &:before {
93        @include material-icon("chevron_right");
94        margin: 5px;
95        color: #aaa;
96        grid-area: icon;
97      }
98    }
99    &.prompt-mode {
100      &:before {
101        @include material-icon("question_mark");
102        margin: 5px;
103        color: #aaa;
104        grid-area: icon;
105      }
106    }
107    &.message-mode {
108      background-color: hsl(0, 0%, 89%);
109      border-radius: $pf-border-radius;
110      input::placeholder {
111        font-weight: 400;
112        font-family: var(--monospace-font);
113        color: hsl(213, 40%, 50%);
114      }
115      &:before {
116        content: "info";
117      }
118    }
119    .stepthrough {
120      grid-area: stepthrough;
121      display: flex;
122      font: inherit;
123      font-size: 14px;
124      font-family: "Roboto Condensed", sans-serif;
125      font-weight: 300;
126      color: #aaa;
127      .current {
128        padding-right: 10px;
129      }
130      .material-icons.left {
131        border-right: rgb(218, 217, 217) solid 1px;
132      }
133    }
134  }
135  .progress {
136    position: absolute;
137    bottom: 0;
138    height: 1px;
139    width: 100%;
140  }
141  .progress-anim {
142    &:before {
143      content: "";
144      position: absolute;
145      background-color: hsl(219, 50%, 50%);
146      top: 0;
147      left: 0;
148      bottom: 0;
149      will-change: left, right;
150      animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395)
151        infinite;
152    }
153    &:after {
154      content: "";
155      position: absolute;
156      background-color: hsl(219, 50%, 50%);
157      top: 0;
158      left: 0;
159      bottom: 0;
160      will-change: left, right;
161      animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1)
162        infinite;
163      animation-delay: 1.15s;
164    }
165  }
166  @keyframes indeterminate {
167    0% {
168      left: -35%;
169      right: 100%;
170    }
171    60% {
172      left: 100%;
173      right: -90%;
174    }
175    100% {
176      left: 100%;
177      right: -90%;
178    }
179  }
180  @keyframes indeterminate-short {
181    0% {
182      left: -35%;
183      right: 100%;
184    }
185    60% {
186      left: 100%;
187      right: -90%;
188    }
189    100% {
190      left: 100%;
191      right: -90%;
192    }
193  }
194
195  .notification-btn {
196    @include transition(0.25s);
197    font-size: 16px;
198    padding: 8px 10px;
199    margin: 0 10px;
200    border-radius: 2px;
201    background: hsl(210, 10%, 73%);
202    &:hover {
203      background: hsl(210, 10%, 83%);
204    }
205
206    &.preferred {
207      background: hsl(210, 98%, 53%);
208      color: #fff;
209      &:hover {
210        background: hsl(210, 98%, 63%);
211      }
212    }
213  }
214}
215
216.error-box {
217  position: absolute;
218  right: 10px;
219  display: flex;
220  align-items: center;
221  .error {
222    color: #ef6c00;
223    &:hover {
224      cursor: pointer;
225    }
226  }
227  .popup-trigger {
228    width: 0px;
229    height: 0px;
230  }
231}
232
233.error-popup {
234  width: 100px;
235  font-size: 14px;
236  font-family: "Roboto Condensed", sans-serif;
237}
238
239.hint-text {
240  padding-bottom: 5px;
241}
242
243.hint-dismiss-button {
244  color: #f4fafb;
245  background-color: #19212b;
246  width: fit-content;
247  padding: 3px;
248  border-radius: 3px;
249}
250
251.hide-sidebar {
252  .query-mode {
253    padding-left: 48px;
254  }
255}
256
257.pf-omnibox-dropdown {
258  font-family: $pf-font;
259
260  .pf-keycap {
261    font-size: smaller;
262  }
263
264  ul {
265    padding: 0;
266    margin: 0;
267  }
268
269  .pf-omnibox-options-container {
270    max-height: 450px;
271    overflow-y: auto;
272
273    .pf-omnibox-section-header {
274      font-size: smaller;
275      margin: 4px 0;
276      border-bottom: solid 1px $pf-colour-thin-border;
277    }
278
279    li {
280      list-style-type: none;
281      display: flex;
282      gap: 4px;
283      user-select: none;
284      font-family: $pf-font;
285      cursor: pointer;
286      padding: 4px 8px;
287      border-radius: $pf-border-radius;
288      align-items: center;
289      font-weight: lighter;
290      line-height: 1.2;
291
292      .pf-title {
293        flex-grow: 1;
294      }
295
296      .pf-tag {
297        border-radius: 10px;
298        background: $pf-minimal-background-hover;
299        padding: 0 6px;
300        font-size: smaller;
301      }
302
303      &:hover {
304        background-color: $pf-minimal-background-hover;
305      }
306
307      &.pf-highlighted {
308        background-color: $pf-primary-background;
309        color: white;
310      }
311    }
312  }
313
314  .pf-omnibox-dropdown-footer {
315    display: flex;
316    justify-content: center;
317    padding: 8px 0 6px 0;
318    gap: 12px;
319    border-top: solid 1px $pf-colour-thin-border;
320
321    section {
322      display: flex;
323      justify-content: center;
324      gap: 4px;
325
326      .pf-keycap {
327        margin: 0 2px;
328      }
329    }
330  }
331}
332