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