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