OLD | NEW |
1 /* Copyright 2015 The Chromium Authors. All rights reserved. | 1 /* Copyright 2015 The Chromium Authors. All rights reserved. |
2 * Use of this source code is governed by a BSD-style license that can be | 2 * Use of this source code is governed by a BSD-style license that can be |
3 * found in the LICENSE file. */ | 3 * found in the LICENSE file. */ |
4 | 4 |
5 :host ::selection { | 5 :host ::selection { |
6 background: rgba(255, 255, 255, 0.3); | 6 background: rgba(255, 255, 255, 0.3); |
7 } | 7 } |
8 | 8 |
9 /* We introduce a wrapper aligner element to help with laying out the main | 9 /* We introduce a wrapper aligner element to help with laying out the main |
10 * toolbar content without changing the bottom-aligned progress bar. */ | 10 * toolbar content without changing the bottom-aligned progress bar. */ |
11 #aligner { | 11 #aligner { |
12 @apply(--layout-horizontal); | 12 @apply(--layout-horizontal); |
13 @apply(--layout-center); | 13 @apply(--layout-center); |
14 padding: 0 16px; | 14 padding: 0 8px; |
15 width: 100%; | 15 width: 100%; |
16 } | 16 } |
17 | 17 |
18 #title { | 18 #title { |
19 @apply(--layout-flex-5); | 19 @apply(--layout-flex-5); |
20 font-size: 77.8%; | 20 font-size: 107%; |
21 font-weight: 500; | 21 font-weight: 500; |
22 overflow: hidden; | 22 overflow: hidden; |
23 text-overflow: ellipsis; | 23 text-overflow: ellipsis; |
24 white-space: nowrap; | 24 white-space: nowrap; |
25 } | 25 } |
26 | 26 |
27 #pageselector-container { | 27 #pageselector-container { |
28 @apply(--layout-flex-1); | 28 @apply(--layout-flex-1); |
29 text-align: center; | 29 text-align: center; |
30 /* The container resizes according to the width of the toolbar. On small | 30 /* The container resizes according to the width of the toolbar. On small |
(...skipping 22 matching lines...) Expand all Loading... |
53 --paper-progress-height: 3px; | 53 --paper-progress-height: 3px; |
54 transition: opacity 150ms; | 54 transition: opacity 150ms; |
55 width: 100%; | 55 width: 100%; |
56 } | 56 } |
57 | 57 |
58 paper-toolbar { | 58 paper-toolbar { |
59 --paper-toolbar-background: rgb(50, 54, 57); | 59 --paper-toolbar-background: rgb(50, 54, 57); |
60 --paper-toolbar-height: 48px; | 60 --paper-toolbar-height: 48px; |
61 @apply(--shadow-elevation-2dp); | 61 @apply(--shadow-elevation-2dp); |
62 color: rgb(241, 241, 241); | 62 color: rgb(241, 241, 241); |
63 font-size: 1.5em; | |
64 } | 63 } |
65 | 64 |
66 .invisible { | 65 .invisible { |
67 visibility: hidden; | 66 visibility: hidden; |
68 } | 67 } |
69 | 68 |
70 @media(max-width: 675px) { | 69 @media(max-width: 675px) { |
71 #bookmarks, | 70 #bookmarks, |
72 #rotate-left { | 71 #rotate-left { |
73 display: none; | 72 display: none; |
74 } | 73 } |
75 | 74 |
76 #pageselector-container { | 75 #pageselector-container { |
77 flex: 2; | 76 flex: 2; |
78 } | 77 } |
79 } | 78 } |
80 | 79 |
81 @media(max-width: 450px) { | 80 @media(max-width: 450px) { |
82 #rotate-right { | 81 #rotate-right { |
83 display: none; | 82 display: none; |
84 } | 83 } |
85 } | 84 } |
86 | 85 |
87 @media(max-width: 400px) { | 86 @media(max-width: 400px) { |
88 #buttons, | 87 #buttons, |
89 #pageselector-container { | 88 #pageselector-container { |
90 display: none; | 89 display: none; |
91 } | 90 } |
92 } | 91 } |
OLD | NEW |