| /* Copyright 2015 The Chromium Authors. All rights reserved. |
| * Use of this source code is governed by a BSD-style license that can be |
| * found in the LICENSE file. */ |
| |
| :host { |
| align-items: center; |
| background: var(--md-toolbar-color); |
| color: white; |
| content-sizing: padding-box; |
| display: flex; |
| min-height: 56px; |
| } |
| |
| #title h1 { |
| -webkit-margin-end: 0; |
| -webkit-margin-start: 24px; |
| font-size: 123.1%; |
| font-weight: normal; |
| margin-bottom: 0; |
| margin-top: 0; |
| } |
| |
| #actions { |
| color: rgba(255, 255, 255, 0.9); |
| display: flex; |
| flex: none; |
| width: var(--downloads-item-width); |
| } |
| |
| :host-context([loading]) #actions { |
| visibility: hidden; |
| } |
| |
| :host(:not([downloads-showing])) #actions { |
| justify-content: center; |
| } |
| |
| #actions paper-button { |
| --paper-button-flat-keyboard-focus: { |
| color: rgba(255, 255, 255, 1); |
| }; |
| } |
| |
| #actions paper-button:first-of-type { |
| -webkit-margin-start: -0.57em; /* Matches paper-button padding. */ |
| } |
| |
| #actions paper-button:not(:last-of-type) { |
| -webkit-margin-end: 8px; /* Margin between items. */ |
| } |
| |
| #actions paper-button:last-of-type { |
| -webkit-margin-end: -0.57em; /* Matches paper-button padding. */ |
| } |
| |
| #search { |
| -webkit-padding-end: 10px; |
| box-sizing: border-box; |
| display: flex; |
| justify-content: flex-end; |
| } |
| |
| #title, |
| #search { |
| /* (1024 total width - 622 item width) / 2 = 201 room to play. */ |
| flex: 1 0 201px; |
| } |
| |
| paper-icon-button { |
| --iron-icon-height: 20px; |
| --iron-icon-width: 20px; |
| --paper-icon-button: { |
| height: 32px; |
| padding: 6px; |
| width: 32px; |
| }; |
| } |
| |
| #more { |
| --paper-menu-button: { |
| padding: 0; |
| }; |
| -webkit-margin-start: 16px; |
| } |
| |
| paper-item { |
| -webkit-user-select: none; |
| cursor: pointer; |
| font: inherit; |
| min-height: 40px; |
| } |
| |
| paper-item:hover { |
| background: #eaeaea; /* TODO(dbeam): real color? */ |
| } |
| |
| @media not all and (max-width: 1024px) { |
| /* Hide vertical dot menu when there's enough room for #actions. */ |
| paper-menu-button { |
| display: none; |
| } |
| } |
| |
| @media all and (max-width: 1024px) { |
| /* Hide #actions for narrow windows; they're shown in a vertical dot menu. */ |
| #actions { |
| display: none; |
| } |
| } |