blob: 9a3e5c678c747ae7c8098e0d4a3996c645873559 [file] [log] [blame]
Primiano Tucci21b91bf2018-08-06 16:42:07 +01001// 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.
Primiano Tuccif4a0c0a2019-10-29 10:39:52 +010014
Hector Dearman8002ca62023-03-06 16:58:43 +000015@import "widgets/theme";
16
Primiano Tucci21b91bf2018-08-06 16:42:07 +010017.sidebar {
Andrew Shulaev10955822022-11-28 15:53:59 +000018 --sidebar-padding-bottom: 40px;
19 --sidebar-timing: 0.15s;
20 grid-area: sidebar;
21 z-index: 4;
22 background-color: #262f3c;
23 overflow: hidden;
24 width: var(--sidebar-width);
25 display: flex;
26 position: relative;
27 flex-direction: column;
Primiano Tuccia9e44562024-06-28 18:19:45 +000028 transition:
29 margin-left var(--anim-easing) var(--sidebar-timing),
Andrew Shulaev10955822022-11-28 15:53:59 +000030 visibility linear var(--sidebar-timing);
31 > * {
32 border-bottom: 1px solid #404854;
33 }
34 input[type="file"] {
35 display: none;
36 }
37 > header {
38 font-family: "Roboto Condensed", sans-serif;
39 font-weight: 700;
40 font-size: 24px;
41 height: var(--topbar-height);
42 line-height: var(--topbar-height);
43 vertical-align: middle;
Hector Dearman8002ca62023-03-06 16:58:43 +000044 padding: 0 12px;
Andrew Shulaev10955822022-11-28 15:53:59 +000045 color: #fff;
46 overflow: visible;
47 .brand {
Hector Dearman8002ca62023-03-06 16:58:43 +000048 height: 36px;
Andrew Shulaev10955822022-11-28 15:53:59 +000049 margin-top: 4px;
Primiano Tucci21b91bf2018-08-06 16:42:07 +010050 }
Andrew Shulaev10955822022-11-28 15:53:59 +000051 &::before {
52 z-index: 10;
Primiano Tuccid3a99832020-02-12 18:35:15 +000053 }
Andrew Shulaev10955822022-11-28 15:53:59 +000054 &.canary::before,
55 &.autopush::before {
56 display: block;
Primiano Tuccif4a0c0a2019-10-29 10:39:52 +010057 position: absolute;
Andrew Shulaev10955822022-11-28 15:53:59 +000058 font-size: 10px;
Hector Dearman97510d52023-03-10 16:21:12 +000059 line-height: 5px;
Hector Dearman8002ca62023-03-06 16:58:43 +000060 font-family: "Roboto", sans-serif;
Andrew Shulaev10955822022-11-28 15:53:59 +000061 top: 7px;
Hector Dearman97510d52023-03-10 16:21:12 +000062 right: 48px;
Andrew Shulaev10955822022-11-28 15:53:59 +000063 }
64 &.canary::before {
65 content: "CANARY";
66 color: #ffd700;
67 }
68 &.autopush::before {
69 content: "AUTOPUSH";
70 color: #aed581;
71 }
72 }
73 .sidebar-button {
74 position: fixed;
75 z-index: 5;
76 background-color: #262f3c;
77 height: var(--topbar-height);
78 left: calc(var(--sidebar-width) - 50px);
79 border-radius: 0 5px 5px 0;
80 border-bottom: inherit;
81 visibility: visible; // So stays visible when the sidebar is hidden.
82 transition: left var(--anim-easing) var(--sidebar-timing);
83 width: 48px;
84 overflow: hidden;
85 > button {
86 vertical-align: middle;
87 }
88 }
89 &.hide-sidebar {
90 visibility: hidden;
91 margin-left: calc(var(--sidebar-width) * -1);
92 .sidebar-button {
93 left: 0;
94 background-color: transparent;
95 border-radius: unset;
96 border-bottom: none;
97 color: #aaaaaa;
98 }
99 }
100 .sidebar-scroll {
101 overflow-y: auto;
102 flex: 1;
103 &::-webkit-scrollbar {
104 width: 0.5em;
105 }
106 &::-webkit-scrollbar-track {
107 background-color: #19212b;
108 border-radius: 2px;
109 }
110 &::-webkit-scrollbar-thumb {
111 background: #b4b7ba6e;
112 border-radius: 2px;
113 }
114 > .sidebar-scroll-container {
115 position: relative;
116 min-height: 100%;
117 padding-bottom: var(--sidebar-padding-bottom);
Primiano Tuccif4a0c0a2019-10-29 10:39:52 +0100118
Andrew Shulaev10955822022-11-28 15:53:59 +0000119 > section {
120 @include transition();
121 padding: 20px 0;
122 max-height: 80px;
123 .section-header {
124 cursor: pointer;
125 > h1,
126 > h2 {
Andrew Shulaev10955822022-11-28 15:53:59 +0000127 letter-spacing: 0.25px;
128 overflow: hidden;
129 text-overflow: ellipsis;
130 white-space: nowrap;
Hector Dearman8002ca62023-03-06 16:58:43 +0000131 margin: 0 12px;
Andrew Shulaev10955822022-11-28 15:53:59 +0000132 }
133 > h1 {
134 color: #fff;
135 font-size: 15px;
Andrew Shulaev10955822022-11-28 15:53:59 +0000136 }
137 > h2 {
138 @include transition();
139 color: rgba(255, 255, 255, 0.5);
140 font-size: 12px;
141 margin-top: 8px;
142 font-weight: 400;
143 }
144 &:before {
145 @include material-icon("expand_more");
146 float: right;
147 color: rgba(255, 255, 255, 0.3);
148 margin-right: 12px;
149 margin-top: -4px;
150 }
Primiano Tuccif4a0c0a2019-10-29 10:39:52 +0100151 }
Primiano Tuccif4a0c0a2019-10-29 10:39:52 +0100152 &:hover {
Andrew Shulaev10955822022-11-28 15:53:59 +0000153 background-color: #373f4b;
154 }
155 &.expanded {
156 background-color: #19212b;
157 max-height: unset;
158 .section-header {
159 h2 {
160 opacity: 0;
161 }
162
163 &:before {
164 content: "expand_less";
165 }
166 }
167
168 .section-content {
169 pointer-events: inherit;
170 opacity: 1;
171 }
Primiano Tuccif4a0c0a2019-10-29 10:39:52 +0100172 }
173 }
174
Andrew Shulaev10955822022-11-28 15:53:59 +0000175 .section-content {
176 pointer-events: none;
177 @include transition();
178 opacity: 0;
179 color: #b4b7ba;
Primiano Tucciec590132020-11-16 14:16:44 +0100180 a {
Andrew Shulaev10955822022-11-28 15:53:59 +0000181 color: #b4b7ba;
Primiano Tucciec590132020-11-16 14:16:44 +0100182 }
Andrew Shulaev10955822022-11-28 15:53:59 +0000183 ul {
184 list-style-type: none;
185 margin: 0;
186 padding: 0;
187 }
188 li {
189 @include transition();
190 a {
191 line-height: 24px;
192 font-size: 14px;
Hector Dearman8002ca62023-03-06 16:58:43 +0000193 padding: 4px 12px;
Andrew Shulaev10955822022-11-28 15:53:59 +0000194 text-decoration: none;
195 display: block;
196 &.pending {
197 color: rgba(255, 255, 255, 0.3);
198 &::after {
199 content: " ";
200 display: inline-block;
201 vertical-align: middle;
202 box-sizing: border-box;
203 width: 18px;
204 height: 18px;
205 margin-left: 10px;
206 border-radius: 50%;
207 border: 2px solid #b4b7ba;
208 border-color: #b4b7ba transparent;
209 animation: pending-spinner 1.25s linear infinite;
210 }
211 @keyframes pending-spinner {
212 0% {
213 transform: rotate(0deg);
214 }
215 100% {
216 transform: rotate(360deg);
217 }
218 }
219 }
220 &[disabled] {
221 text-decoration: line-through;
222 }
223 }
224 .material-icons {
225 margin-right: 10px;
Steve Goltondf16d182023-03-17 10:50:24 +0000226 font-size: 20px;
Andrew Shulaev10955822022-11-28 15:53:59 +0000227 }
228 &:hover {
229 background-color: #373f4b;
230 }
231 .trace-file-name {
232 white-space: break-spaces;
233 font-family: "Roboto Condensed", sans-serif;
234 word-break: break-all;
235 font-weight: 300;
236 letter-spacing: 0;
237 margin-top: -10px;
238 color: #fff;
239 }
240 }
Primiano Tucciec590132020-11-16 14:16:44 +0100241 }
Primiano Tucci21b91bf2018-08-06 16:42:07 +0100242 }
Andrew Shulaev10955822022-11-28 15:53:59 +0000243 }
244
245 .sidebar-footer {
246 position: absolute;
247 bottom: 0;
248 width: 100%;
249 padding: 2px 10px;
250 display: grid;
251 height: -var(--sidebar-padding-bottom);
252 grid-template-columns: repeat(4, min-content);
253 grid-gap: 10px;
254
255 > button {
256 color: hsl(217, 39%, 94%);
257 i {
258 font-size: 24px;
259 }
260
261 &:hover {
262 color: hsl(45, 100%, 48%);
263 }
264 }
265
266 > .dbg-info-square {
Hector Dearman8002ca62023-03-06 16:58:43 +0000267 font-family: "Roboto Condensed", sans-serif;
Andrew Shulaev10955822022-11-28 15:53:59 +0000268 width: 24px;
Hector Dearman8002ca62023-03-06 16:58:43 +0000269 height: 24px;
270 line-height: 24px;
271 display: flex;
272 justify-content: center;
273 flex-direction: column;
274 align-items: center;
275
Andrew Shulaev10955822022-11-28 15:53:59 +0000276 margin: 1px 0;
277 background: #12161b;
278 color: #4e71b3;
Hector Dearman8002ca62023-03-06 16:58:43 +0000279 border-radius: $pf-border-radius;
Andrew Shulaev10955822022-11-28 15:53:59 +0000280 font-size: 12px;
281 text-align: center;
282 &.green {
283 background: #7aca75;
284 color: #12161b;
285 }
286 &.amber {
287 background: #ffc107;
288 color: #333;
289 }
290 &.red {
291 background: #d32f2f;
292 color: #fff;
293 }
294 > div {
295 font-size: 10px;
296 line-height: 11px;
297 }
298 }
299
300 .version {
301 position: absolute;
302 right: 8px;
303 bottom: 3px;
304 font-size: 12px;
305 font-family: "Roboto Condensed", sans-serif;
306 a {
307 color: rgba(255, 255, 255, 0.5);
308 text-decoration: none;
309 }
310 margin-top: 11px;
311 }
312 }
Hector Dearman250376b2018-08-07 11:15:52 +0100313}
Isabelle Taylorf41b7c72019-07-24 13:55:43 +0100314
Primiano Tucci8bcf6082021-06-11 17:15:22 +0100315// Hide the footer when running integration tests, as the version code and the
316// tiny text with pending queries can fail the screenshot diff test.
317body.testing .sidebar-footer {
318 visibility: hidden;
319}
320
Hector Dearmanf1f99eb2019-09-03 16:36:35 +0100321.keycap {
322 background-color: #fafbfc;
323 border: 1px solid #d1d5da;
324 border-bottom-color: #c6cbd1;
325 border-radius: 3px;
326 box-shadow: inset 0 -1px 0 #c6cbd1;
327 color: #444d56;
328 display: inline-block;
329 font-family: var(--monospace-font);
330 vertical-align: middle;
331
332 line-height: 20px;
333 padding: 3px 7px;
334}