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