OLD | NEW |
1 /* Copyright 2014 The Chromium Authors. All rights reserved. | 1 /* Copyright 2014 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 /* Controls bar. */ | 5 /* Controls bar. */ |
6 .controls { | 6 .controls { |
7 align-items: center; | 7 align-items: center; |
8 background-color: white; | 8 background-color: white; |
9 display: flex; | 9 display: flex; |
10 flex-direction: column; | 10 flex-direction: column; |
11 height: 96px; | 11 height: 96px; |
12 justify-content: center; | 12 justify-content: center; |
13 padding: 0; | 13 padding: 0; |
14 } | 14 } |
15 | 15 |
16 :host([volume-slider-shown]) .controls { | 16 .controls .upper-controls, |
17 height: 144px; | 17 .controls .lower-controls { |
18 } | |
19 | |
20 .controls .control-row { | |
21 box-sizing: border-box; | 18 box-sizing: border-box; |
22 height: 48px; | 19 height: 48px; |
23 padding: 8px; | 20 padding: 8px; |
24 width: 100%; | 21 width: 100%; |
25 } | 22 } |
26 | 23 |
27 .audio-controls { | 24 .audio-controls { |
28 align-items: center; | 25 align-items: center; |
29 display: flex; | 26 display: flex; |
30 flex-direction: row; | 27 flex-direction: row; |
(...skipping 68 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
99 } | 96 } |
100 | 97 |
101 .time-container > .time.disabled { | 98 .time-container > .time.disabled { |
102 opacity: 0; | 99 opacity: 0; |
103 } | 100 } |
104 | 101 |
105 .time-container > .time-spacer { | 102 .time-container > .time-spacer { |
106 opacity: 0; /* This class is intended to be used as invisible spacer. */ | 103 opacity: 0; /* This class is intended to be used as invisible spacer. */ |
107 } | 104 } |
108 | 105 |
109 paper-slider { | 106 .time-controls > paper-slider { |
110 --paper-slider-active-color: rgb(66, 133, 244); | 107 --paper-slider-active-color: rgb(66, 133, 244); |
111 --paper-slider-knob-color: rgb(64, 138, 241); | 108 --paper-slider-knob-color: rgb(64, 138, 241); |
112 flex: auto; | 109 flex: auto; |
113 } | 110 } |
114 | 111 |
115 .media-button.disabled, | 112 .media-button.disabled, |
116 paper-slider.disabled { | 113 paper-slider.disabled { |
117 pointer-events: none; | 114 pointer-events: none; |
118 } | 115 } |
119 | 116 |
(...skipping 114 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
234 .time-controls > .time > .current { | 231 .time-controls > .time > .current { |
235 align-items: center; | 232 align-items: center; |
236 display: flex; | 233 display: flex; |
237 flex-direction: row; | 234 flex-direction: row; |
238 height: 100%; | 235 height: 100%; |
239 justify-content: flex-end; | 236 justify-content: flex-end; |
240 position: absolute; | 237 position: absolute; |
241 top: -1px; | 238 top: -1px; |
242 } | 239 } |
243 | 240 |
244 .volume-controls { | 241 /* Volume controls: sound button and volume slider */ |
245 align-items: center; | 242 |
246 background-color: rgb(235, 235, 235); | 243 #volumeContainer { |
247 display: flex; | 244 border: 1px solid #ddd; |
248 flex-direction: row; | 245 border-radius: 2px; |
| 246 box-shadow: 0 2px 4px #777; |
| 247 height: 110px; |
| 248 position: fixed; |
| 249 width: 32px; |
249 } | 250 } |
250 | 251 |
251 .volume-controls paper-slider { | 252 #volumeContainer.default-hidden { |
252 width: 100%; | 253 visibility: hidden; |
253 } | 254 } |
OLD | NEW |