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.sidebar { 18 --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; 28 transition: margin-left var(--anim-easing) var(--sidebar-timing), 29 visibility linear var(--sidebar-timing); 30 > * { 31 border-bottom: 1px solid #404854; 32 } 33 input[type="file"] { 34 display: none; 35 } 36 > header { 37 font-family: "Roboto Condensed", sans-serif; 38 font-weight: 700; 39 font-size: 24px; 40 height: var(--topbar-height); 41 line-height: var(--topbar-height); 42 vertical-align: middle; 43 padding: 0 12px; 44 color: #fff; 45 overflow: visible; 46 .brand { 47 height: 36px; 48 margin-top: 4px; 49 } 50 &::before { 51 z-index: 10; 52 } 53 &.canary::before, 54 &.autopush::before { 55 display: block; 56 position: absolute; 57 font-size: 10px; 58 line-height: 5px; 59 font-family: "Roboto", sans-serif; 60 top: 7px; 61 right: 48px; 62 } 63 &.canary::before { 64 content: "CANARY"; 65 color: #ffd700; 66 } 67 &.autopush::before { 68 content: "AUTOPUSH"; 69 color: #aed581; 70 } 71 } 72 .sidebar-button { 73 position: fixed; 74 z-index: 5; 75 background-color: #262f3c; 76 height: var(--topbar-height); 77 left: calc(var(--sidebar-width) - 50px); 78 border-radius: 0 5px 5px 0; 79 border-bottom: inherit; 80 visibility: visible; // So stays visible when the sidebar is hidden. 81 transition: left var(--anim-easing) var(--sidebar-timing); 82 width: 48px; 83 overflow: hidden; 84 > button { 85 vertical-align: middle; 86 } 87 } 88 &.hide-sidebar { 89 visibility: hidden; 90 margin-left: calc(var(--sidebar-width) * -1); 91 .sidebar-button { 92 left: 0; 93 background-color: transparent; 94 border-radius: unset; 95 border-bottom: none; 96 color: #aaaaaa; 97 } 98 } 99 .sidebar-scroll { 100 overflow-y: auto; 101 flex: 1; 102 &::-webkit-scrollbar { 103 width: 0.5em; 104 } 105 &::-webkit-scrollbar-track { 106 background-color: #19212b; 107 border-radius: 2px; 108 } 109 &::-webkit-scrollbar-thumb { 110 background: #b4b7ba6e; 111 border-radius: 2px; 112 } 113 > .sidebar-scroll-container { 114 position: relative; 115 min-height: 100%; 116 padding-bottom: var(--sidebar-padding-bottom); 117 118 > section { 119 @include transition(); 120 padding: 20px 0; 121 max-height: 80px; 122 .section-header { 123 cursor: pointer; 124 > h1, 125 > h2 { 126 letter-spacing: 0.25px; 127 overflow: hidden; 128 text-overflow: ellipsis; 129 white-space: nowrap; 130 margin: 0 12px; 131 } 132 > h1 { 133 color: #fff; 134 font-size: 15px; 135 } 136 > h2 { 137 @include transition(); 138 color: rgba(255, 255, 255, 0.5); 139 font-size: 12px; 140 margin-top: 8px; 141 font-weight: 400; 142 } 143 &:before { 144 @include material-icon("expand_more"); 145 float: right; 146 color: rgba(255, 255, 255, 0.3); 147 margin-right: 12px; 148 margin-top: -4px; 149 } 150 } 151 &:hover { 152 background-color: #373f4b; 153 } 154 &.expanded { 155 background-color: #19212b; 156 max-height: unset; 157 .section-header { 158 h2 { 159 opacity: 0; 160 } 161 162 &:before { 163 content: "expand_less"; 164 } 165 } 166 167 .section-content { 168 pointer-events: inherit; 169 opacity: 1; 170 } 171 } 172 } 173 174 .section-content { 175 pointer-events: none; 176 @include transition(); 177 opacity: 0; 178 color: #b4b7ba; 179 a { 180 color: #b4b7ba; 181 } 182 ul { 183 list-style-type: none; 184 margin: 0; 185 padding: 0; 186 } 187 li { 188 @include transition(); 189 a { 190 line-height: 24px; 191 font-size: 14px; 192 padding: 4px 12px; 193 text-decoration: none; 194 display: block; 195 &.pending { 196 color: rgba(255, 255, 255, 0.3); 197 &::after { 198 content: " "; 199 display: inline-block; 200 vertical-align: middle; 201 box-sizing: border-box; 202 width: 18px; 203 height: 18px; 204 margin-left: 10px; 205 border-radius: 50%; 206 border: 2px solid #b4b7ba; 207 border-color: #b4b7ba transparent; 208 animation: pending-spinner 1.25s linear infinite; 209 } 210 @keyframes pending-spinner { 211 0% { 212 transform: rotate(0deg); 213 } 214 100% { 215 transform: rotate(360deg); 216 } 217 } 218 } 219 &[disabled] { 220 text-decoration: line-through; 221 } 222 } 223 .material-icons { 224 margin-right: 10px; 225 font-size: 20px; 226 } 227 &:hover { 228 background-color: #373f4b; 229 } 230 .trace-file-name { 231 white-space: break-spaces; 232 font-family: "Roboto Condensed", sans-serif; 233 word-break: break-all; 234 font-weight: 300; 235 letter-spacing: 0; 236 margin-top: -10px; 237 color: #fff; 238 } 239 } 240 } 241 } 242 } 243 244 .sidebar-footer { 245 position: absolute; 246 bottom: 0; 247 width: 100%; 248 padding: 2px 10px; 249 display: grid; 250 height: -var(--sidebar-padding-bottom); 251 grid-template-columns: repeat(4, min-content); 252 grid-gap: 10px; 253 254 > button { 255 color: hsl(217, 39%, 94%); 256 i { 257 font-size: 24px; 258 } 259 260 &:hover { 261 color: hsl(45, 100%, 48%); 262 } 263 } 264 265 > .dbg-info-square { 266 font-family: "Roboto Condensed", sans-serif; 267 width: 24px; 268 height: 24px; 269 line-height: 24px; 270 display: flex; 271 justify-content: center; 272 flex-direction: column; 273 align-items: center; 274 275 margin: 1px 0; 276 background: #12161b; 277 color: #4e71b3; 278 border-radius: $pf-border-radius; 279 font-size: 12px; 280 text-align: center; 281 &.green { 282 background: #7aca75; 283 color: #12161b; 284 } 285 &.amber { 286 background: #ffc107; 287 color: #333; 288 } 289 &.red { 290 background: #d32f2f; 291 color: #fff; 292 } 293 > div { 294 font-size: 10px; 295 line-height: 11px; 296 } 297 } 298 299 .version { 300 position: absolute; 301 right: 8px; 302 bottom: 3px; 303 font-size: 12px; 304 font-family: "Roboto Condensed", sans-serif; 305 a { 306 color: rgba(255, 255, 255, 0.5); 307 text-decoration: none; 308 } 309 margin-top: 11px; 310 } 311 } 312} 313 314// Hide the footer when running integration tests, as the version code and the 315// tiny text with pending queries can fail the screenshot diff test. 316body.testing .sidebar-footer { 317 visibility: hidden; 318} 319 320.keycap { 321 background-color: #fafbfc; 322 border: 1px solid #d1d5da; 323 border-bottom-color: #c6cbd1; 324 border-radius: 3px; 325 box-shadow: inset 0 -1px 0 #c6cbd1; 326 color: #444d56; 327 display: inline-block; 328 font-family: var(--monospace-font); 329 vertical-align: middle; 330 331 line-height: 20px; 332 padding: 3px 7px; 333} 334