| 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 |