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@mixin omnibox-width() { 18 width: 90%; 19 max-width: 600px; 20} 21 22.topbar { 23 grid-area: topbar; 24 position: relative; 25 z-index: 3; 26 overflow: visible; 27 background-color: hsl(215, 1%, 95%); 28 box-shadow: 0px 1px 2px 1px #00000026; 29 min-height: var(--topbar-height); 30 display: flex; 31 justify-content: center; 32 align-items: center; 33 .omnibox { 34 @include omnibox-width(); 35 @include transition(0.25s); 36 display: grid; 37 grid-template-areas: "icon input stepthrough"; 38 grid-template-columns: 34px auto max-content; 39 border-radius: $pf-border-radius; 40 background-color: #fcfcfc; 41 border: 0; 42 line-height: 34px; 43 &:before { 44 @include material-icon("search"); 45 margin: 5px; 46 color: #aaa; 47 grid-area: icon; 48 } 49 input { 50 grid-area: input; 51 border: 0; 52 padding: 0 10px; 53 font-size: 18px; 54 font-family: "Roboto Condensed", sans-serif; 55 font-weight: 300; 56 color: #666; 57 background-color: transparent; 58 &:focus { 59 outline: none; 60 } 61 &::placeholder { 62 color: #b4b7ba; 63 font-family: "Roboto Condensed", sans-serif; 64 font-weight: 400; 65 } 66 } 67 &.command-mode { 68 background-color: #111; 69 border-radius: 0; 70 width: 100%; 71 max-width: 100%; 72 margin-top: 0; 73 border-left: 1px solid #404854; 74 height: var(--topbar-height); 75 input { 76 color: #9ddc67; 77 font-family: var(--monospace-font); 78 padding-left: 0; 79 } 80 &:before { 81 content: "attach_money"; 82 color: #9ddc67; 83 font-size: 26px; 84 padding-top: 5px; 85 } 86 } 87 &.message-mode { 88 background-color: hsl(0, 0%, 89%); 89 border-radius: $pf-border-radius; 90 input::placeholder { 91 font-weight: 400; 92 font-family: var(--monospace-font); 93 color: hsl(213, 40%, 50%); 94 } 95 &:before { 96 content: "info"; 97 } 98 } 99 .stepthrough { 100 grid-area: stepthrough; 101 display: flex; 102 font: inherit; 103 font-size: 14px; 104 font-family: "Roboto Condensed", sans-serif; 105 font-weight: 300; 106 color: #aaa; 107 .current { 108 padding-right: 10px; 109 } 110 .material-icons.left { 111 border-right: rgb(218, 217, 217) solid 1px; 112 } 113 } 114 } 115 .progress { 116 position: absolute; 117 bottom: 0; 118 height: 1px; 119 width: 100%; 120 } 121 .progress-anim { 122 &:before { 123 content: ""; 124 position: absolute; 125 background-color: hsl(219, 50%, 50%); 126 top: 0; 127 left: 0; 128 bottom: 0; 129 will-change: left, right; 130 animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) 131 infinite; 132 } 133 &:after { 134 content: ""; 135 position: absolute; 136 background-color: hsl(219, 50%, 50%); 137 top: 0; 138 left: 0; 139 bottom: 0; 140 will-change: left, right; 141 animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) 142 infinite; 143 animation-delay: 1.15s; 144 } 145 } 146 @keyframes indeterminate { 147 0% { 148 left: -35%; 149 right: 100%; 150 } 151 60% { 152 left: 100%; 153 right: -90%; 154 } 155 100% { 156 left: 100%; 157 right: -90%; 158 } 159 } 160 @keyframes indeterminate-short { 161 0% { 162 left: -35%; 163 right: 100%; 164 } 165 60% { 166 left: 100%; 167 right: -90%; 168 } 169 100% { 170 left: 100%; 171 right: -90%; 172 } 173 } 174 175 .notification-btn { 176 @include transition(0.25s); 177 font-size: 16px; 178 padding: 8px 10px; 179 margin: 0 10px; 180 border-radius: 2px; 181 background: hsl(210, 10%, 73%); 182 &:hover { 183 background: hsl(210, 10%, 83%); 184 } 185 186 &.preferred { 187 background: hsl(210, 98%, 53%); 188 color: #fff; 189 &:hover { 190 background: hsl(210, 98%, 63%); 191 } 192 } 193 } 194} 195 196.error { 197 position: absolute; 198 right: 10px; 199 color: #ef6c00; 200 &:hover { 201 cursor: pointer; 202 } 203} 204 205.helpful-hint { 206 position: absolute; 207 z-index: 10; 208 right: 5px; 209 top: 5px; 210 width: 300px; 211 background-color: white; 212 font-size: 12px; 213 color: #3f4040; 214 display: grid; 215 border-radius: 5px; 216 padding: 8px; 217 box-shadow: 1px 3px 15px rgba(23, 32, 44, 0.3); 218} 219 220.hint-text { 221 padding-bottom: 5px; 222} 223 224.hint-dismiss-button { 225 color: #f4fafb; 226 background-color: #19212b; 227 width: fit-content; 228 padding: 3px; 229 border-radius: 3px; 230} 231 232.hide-sidebar { 233 .command-mode { 234 padding-left: 48px; 235 } 236} 237