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