| OLD | NEW |
| 1 /* | 1 /* Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| 2 * Copyright (c) 2012 The Chromium Authors. All rights reserved. | |
| 3 * 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 |
| 4 * found in the LICENSE file. | 3 * found in the LICENSE file. |
| 5 */ | 4 */ |
| 6 | 5 |
| 7 body { | 6 body { |
| 8 padding: 0; | |
| 9 -webkit-user-select: none; | 7 -webkit-user-select: none; |
| 10 overflow: hidden; | 8 overflow: hidden; |
| 9 padding: 0; |
| 11 } | 10 } |
| 12 | 11 |
| 13 .audio-player { | 12 .audio-player { |
| 13 background-color: #1d1d1d; |
| 14 bottom: 0; |
| 15 color: white; |
| 16 cursor: default; |
| 17 font-family: Open Sans, Droid Sans Fallback, sans-serif; |
| 18 font-size: 10pt; |
| 19 left: 0; |
| 14 position: absolute; | 20 position: absolute; |
| 15 left: 0; | |
| 16 right: 0; | 21 right: 0; |
| 17 top: 0; | 22 top: 0; |
| 18 bottom: 0; | |
| 19 | |
| 20 color: white; | |
| 21 background-color: #1d1d1d; | |
| 22 | |
| 23 font-family: Open Sans,Droid Sans Fallback,sans-serif; | |
| 24 font-size: 10pt; | |
| 25 | |
| 26 cursor: default; | |
| 27 } | 23 } |
| 28 | 24 |
| 29 /* Title buttons. | 25 /* Title buttons. |
| 30 In the collapsed/single-track mode they overlap the first track. */ | 26 * In the collapsed/single-track mode they overlap the first track. */ |
| 31 | 27 |
| 32 .title-button { | 28 .title-button { |
| 29 background-position: center center; |
| 30 background-repeat: no-repeat; |
| 31 cursor: pointer; |
| 32 height: 29px; |
| 33 opacity: 0.4; |
| 33 position: absolute; | 34 position: absolute; |
| 35 top: 0; |
| 34 width: 29px; | 36 width: 29px; |
| 35 height: 29px; | |
| 36 top: 0; | |
| 37 opacity: 0.4; | |
| 38 cursor: pointer; | |
| 39 background-repeat: no-repeat; | |
| 40 background-position: center center; | |
| 41 z-index: 2; | 37 z-index: 2; |
| 42 } | 38 } |
| 43 | 39 |
| 44 .title-button:hover { | 40 .title-button:hover { |
| 45 background-color: #3c7eff !important; | 41 background-color: rgb(60, 126, 255) !important; |
| 46 opacity: 1; | 42 opacity: 1; |
| 47 } | 43 } |
| 48 | 44 |
| 49 .audio-player:not(.collapsed):not(.single-track) > .title-button { | 45 .audio-player:not(.collapsed):not(.single-track) > .title-button { |
| 50 background-color: #1f1f1f; | 46 background-color: #1f1f1f; |
| 51 } | 47 } |
| 52 | 48 |
| 53 /* TODO(kaznacheev): Remove display: none when the audio player is title-less */ | 49 /* TODO(kaznacheev): Remove display: none when the audio player is title-less */ |
| 54 .title-button.close { | 50 .title-button.close { |
| 51 background-image: url(../images/media/media_close.png); |
| 55 display: none; | 52 display: none; |
| 56 right: 0; | 53 right: 0; |
| 57 background-image: url(../images/media/media_close.png); | |
| 58 } | 54 } |
| 59 | 55 |
| 60 /* TODO(kaznacheev): Set right: 29px when the audio player is title-less */ | 56 /* TODO(kaznacheev): Set right: 29px when the audio player is title-less */ |
| 61 .title-button.collapse { | 57 .title-button.collapse { |
| 58 background-image: url(../images/media/media_collapse.png); |
| 62 right: 0; | 59 right: 0; |
| 63 background-image: url(../images/media/media_collapse.png); | |
| 64 } | 60 } |
| 65 | 61 |
| 66 .collapsed .title-button.collapse { | 62 .collapsed .title-button.collapse { |
| 67 background-image: url(../images/media/media_expand.png); | 63 background-image: url(../images/media/media_expand.png); |
| 68 } | 64 } |
| 69 | 65 |
| 70 .single-track .title-button.collapse { | 66 .single-track .title-button.collapse { |
| 71 display: none; | 67 display: none; |
| 72 } | 68 } |
| 73 | 69 |
| 74 /* Common properties for track containers. */ | 70 /* Common properties for track containers. */ |
| 75 .audio-player > .track-list, | 71 .audio-player > .track-list, |
| 76 .audio-player > .track-stack { | 72 .audio-player > .track-stack { |
| 73 bottom: 35px; /* Room for the controls bar. */ |
| 74 left: 0; |
| 77 position: absolute; | 75 position: absolute; |
| 78 left: 0; | |
| 79 right: 0; | 76 right: 0; |
| 80 bottom: 35px; /* Room for the controls bar. */ | |
| 81 } | 77 } |
| 82 | 78 |
| 83 /* Scrollable list of tracks. | 79 /* Scrollable list of tracks. |
| 84 Displayed in expanded mode if there is more than one track. */ | 80 * Displayed in expanded mode if there is more than one track. */ |
| 85 .audio-player > .track-list { | 81 .audio-player > .track-list { |
| 82 -webkit-box-align: center; |
| 83 -webkit-box-orient: vertical; |
| 84 -webkit-box-pack: start; |
| 86 border-top: 1px solid rgba(255, 255, 255, 0.1); | 85 border-top: 1px solid rgba(255, 255, 255, 0.1); |
| 87 | |
| 88 display: -webkit-box; | 86 display: -webkit-box; |
| 89 -webkit-box-orient: vertical; | |
| 90 -webkit-box-align: center; | |
| 91 -webkit-box-pack: start; | |
| 92 | |
| 93 overflow-x: hidden; | 87 overflow-x: hidden; |
| 94 overflow-y: auto; | 88 overflow-y: auto; |
| 95 } | 89 } |
| 96 | 90 |
| 97 /* A single track container. | 91 /* A single track container. |
| 98 Displayed in the compact mode or when there is only one track. */ | 92 * Displayed in the compact mode or when there is only one track. */ |
| 99 .audio-player > .track-stack { | 93 .audio-player > .track-stack { |
| 100 height: 58px; | 94 height: 58px; |
| 101 } | 95 } |
| 102 | 96 |
| 103 .audio-player.collapsed > .track-list, | 97 .audio-player.collapsed > .track-list, |
| 104 .audio-player.single_track > .track-list, | 98 .audio-player.single_track > .track-list, |
| 105 .audio-player:not(.collapsed):not(.single-track) > .track-stack { | 99 .audio-player:not(.collapsed):not(.single-track) > .track-stack { |
| 106 opacity: 0; | 100 opacity: 0; |
| 107 pointer-events: none; | 101 pointer-events: none; |
| 108 } | 102 } |
| 109 | 103 |
| 110 /* Track item. */ | 104 /* Track item. */ |
| 111 .track { | 105 .track { |
| 106 -webkit-box-align: center; |
| 107 -webkit-box-orient: horizontal; |
| 108 -webkit-box-pack: start; |
| 109 display: -webkit-box; |
| 110 height: 58px; |
| 112 width: 100%; | 111 width: 100%; |
| 113 height: 58px; | |
| 114 | |
| 115 display: -webkit-box; | |
| 116 -webkit-box-orient: horizontal; | |
| 117 -webkit-box-align: center; | |
| 118 -webkit-box-pack: start; | |
| 119 } | 112 } |
| 120 | 113 |
| 121 /* In the expanded mode the selected track is highlighted. */ | 114 /* In the expanded mode the selected track is highlighted. */ |
| 122 .track-list .track.selected { | 115 .track-list .track.selected { |
| 123 background-color: #2d2d2d; | 116 background-color: #2d2d2d; |
| 124 } | 117 } |
| 125 | 118 |
| 126 .track-list .track:hover { | 119 .track-list .track:hover { |
| 127 background-color: #272727 !important; | 120 background-color: #272727 !important; |
| 128 } | 121 } |
| 129 | 122 |
| 130 .track-list .track:not(.selected) .data { | 123 .track-list .track:not(.selected) .data { |
| 131 opacity: 0.7; | 124 opacity: 0.7; |
| 132 } | 125 } |
| 133 | 126 |
| 134 /* In the compact mode all tracks are in the same position, only the selected | 127 /* In the compact mode all tracks are in the same position, only the selected |
| 135 is visible.*/ | 128 is visible.*/ |
| 136 .track-stack > .track { | 129 .track-stack > .track { |
| 137 position: absolute; | 130 position: absolute; |
| 138 top: 0; | 131 top: 0; |
| 139 } | 132 } |
| 140 | 133 |
| 141 .track-stack > .track.selected { | 134 .track-stack > .track.selected { |
| 142 z-index: 1; | 135 z-index: 1; |
| 143 } | 136 } |
| 144 | 137 |
| 145 /* Opacity transition is controlled differently for the text and the artwork. | 138 /* Opacity transition is controlled differently for the text and the artwork. |
| 146 Text transition looks better if fade-in and fade-out go in parallel. | 139 * Text transition looks better if fade-in and fade-out go in parallel. |
| 147 For the artwork we start fading out the old icon only after the new one | 140 * For the artwork we start fading out the old icon only after the new one |
| 148 is completely opaque (otherwise when transitioning between identical icons | 141 * is completely opaque (otherwise when transitioning between identical icons |
| 149 we see some fading because the background transpires). */ | 142 * we see some fading because the background transpires). */ |
| 150 .track-stack > .track:not(.selected) .data, | 143 .track-stack > .track:not(.selected) .data, |
| 151 .track-stack > .track:not(.visible) .art { | 144 .track-stack > .track:not(.visible) .art { |
| 152 -webkit-transition: opacity 220ms ease-out; | 145 -webkit-transition: opacity 220ms ease-out; |
| 153 opacity: 0; | 146 opacity: 0; |
| 154 } | 147 } |
| 155 | 148 |
| 156 /* Track data. */ | 149 /* Track data. */ |
| 157 | 150 |
| 158 .track .art { | 151 .track .art { |
| 152 -webkit-box-sizing: border-box; |
| 153 height: 48px; |
| 154 margin: 4px 0 6px 4px; |
| 159 position: relative; | 155 position: relative; |
| 160 width: 48px; | 156 width: 48px; |
| 161 height: 48px; | |
| 162 margin: 4px 0px 6px 4px; | |
| 163 -webkit-box-sizing: border-box; | |
| 164 } | 157 } |
| 165 | 158 |
| 166 .track .art.blank { | 159 .track .art.blank { |
| 160 background-color: #111; |
| 167 border: 1px solid #333; | 161 border: 1px solid #333; |
| 168 background-color: #111; | |
| 169 } | 162 } |
| 170 | 163 |
| 171 .track .art img { | 164 .track .art img { |
| 165 height: 100%; |
| 172 width: 100%; | 166 width: 100%; |
| 173 height: 100%; | |
| 174 } | 167 } |
| 175 | 168 |
| 176 .track .art.blank img { | 169 .track .art.blank img { |
| 177 display: none; | 170 display: none; |
| 178 } | 171 } |
| 179 | 172 |
| 180 .track .art.error { | 173 .track .art.error { |
| 181 background-image: url(../images/media/error.png); | 174 background-image: url(../images/media/error.png); |
| 175 background-position: center center; |
| 182 background-repeat: no-repeat; | 176 background-repeat: no-repeat; |
| 183 background-position: center center; | |
| 184 } | 177 } |
| 185 | 178 |
| 186 .noart .track .art { | 179 .noart .track .art { |
| 187 display: none; | 180 display: none; |
| 188 } | 181 } |
| 189 | 182 |
| 190 .track .data { | 183 .track .data { |
| 191 margin-right: 4px; | 184 -webkit-box-flex: 1; |
| 192 margin-left: 8px; | |
| 193 | |
| 194 display: -webkit-box; | |
| 195 -webkit-box-orient: vertical; | 185 -webkit-box-orient: vertical; |
| 196 -webkit-box-pack: center; | 186 -webkit-box-pack: center; |
| 197 -webkit-box-flex: 1; | 187 display: -webkit-box; |
| 188 margin-left: 8px; |
| 189 margin-right: 4px; |
| 198 } | 190 } |
| 199 | 191 |
| 200 .track .data .data-title, | 192 .track .data .data-title, |
| 201 .track .data .data-artist { | 193 .track .data .data-artist { |
| 202 white-space: nowrap; | |
| 203 overflow: hidden; | 194 overflow: hidden; |
| 204 text-overflow: ellipsis; | 195 text-overflow: ellipsis; |
| 196 white-space: nowrap; |
| 205 } | 197 } |
| 206 | 198 |
| 207 .track .data .data-title { | 199 .track .data .data-title { |
| 208 font-weight: bold; | 200 font-weight: bold; |
| 209 } | 201 } |
| 210 | 202 |
| 211 /* TODO(kaznacheev): Set to 20px when the audio player is title-less. */ | 203 /* TODO(kaznacheev): Set to 20px when the audio player is title-less. */ |
| 212 .single-track .data-title { | 204 .single-track .data-title { |
| 213 padding-right: 0; | 205 padding-right: 0; |
| 214 } | 206 } |
| 215 | 207 |
| 216 /* TODO(kaznacheev): Set to 50px when the audio player is title-less. */ | 208 /* TODO(kaznacheev): Set to 50px when the audio player is title-less. */ |
| 217 .collapsed:not(.single-track) .data-title { | 209 .collapsed:not(.single-track) .data-title { |
| 218 padding-right: 20px; | 210 padding-right: 20px; |
| 219 } | 211 } |
| 220 | 212 |
| 221 /* Controls bar. */ | 213 /* Controls bar. */ |
| 222 | 214 |
| 223 .audio-controls { | 215 .audio-controls { |
| 216 -webkit-box-align: center; |
| 217 -webkit-box-orient: horizontal; |
| 218 -webkit-box-pack: center; |
| 219 background-color: #2D2D2D; |
| 220 border-top: 1px solid rgba(255, 255, 255, 0.1); |
| 221 bottom: 0; |
| 222 display: -webkit-box; |
| 223 height: 30px; |
| 224 left: 0; |
| 225 padding: 0 0 4px 13px; |
| 224 position: absolute; | 226 position: absolute; |
| 225 | |
| 226 border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| 227 | |
| 228 left: 0; | |
| 229 right: 0; | 227 right: 0; |
| 230 bottom: 0; | |
| 231 height: 30px; | |
| 232 padding: 0 0 4px 13px; | |
| 233 | |
| 234 background-color: #2D2D2D; | |
| 235 | |
| 236 display: -webkit-box; | |
| 237 -webkit-box-orient: horizontal; | |
| 238 -webkit-box-align: center; | |
| 239 -webkit-box-pack: center; | |
| 240 } | 228 } |
| 241 | 229 |
| 242 .audio-controls .media-button { | 230 .audio-controls .media-button { |
| 243 width: 29px; | |
| 244 height: 29px; | 231 height: 29px; |
| 245 margin-top: 1px; | 232 margin-top: 1px; |
| 233 width: 29px; |
| 246 } | 234 } |
| 247 | 235 |
| 248 .audio-controls .media-button.play { | 236 .audio-controls .media-button.play { |
| 249 margin-left: -10px; | 237 margin-left: -10px; |
| 250 margin-right: -8px; | 238 margin-right: -8px; |
| 251 } | 239 } |
| 252 | 240 |
| 253 .audio-controls .media-button.play > .state0.normal{ | 241 .audio-controls .media-button.play > .state0.normal { |
| 254 background-image: url(../images/media/media_play_audio.png); | 242 background-image: url(../images/media/media_play_audio.png); |
| 255 } | 243 } |
| 256 | 244 |
| 257 .audio-controls .media-button.play > .state0.hover { | 245 .audio-controls .media-button.play > .state0.hover { |
| 258 background-image: url(../images/media/media_play_audio_hover.png); | 246 background-image: url(../images/media/media_play_audio_hover.png); |
| 259 } | 247 } |
| 260 | 248 |
| 261 .audio-controls .media-button.play > .state0.active { | 249 .audio-controls .media-button.play > .state0.active { |
| 262 background-image: url(../images/media/media_play_audio_down.png); | 250 background-image: url(../images/media/media_play_audio_down.png); |
| 263 } | 251 } |
| (...skipping 52 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 316 } | 304 } |
| 317 | 305 |
| 318 .single-track .media-button.next, | 306 .single-track .media-button.next, |
| 319 .single-track .media-button.previous { | 307 .single-track .media-button.previous { |
| 320 display: none; | 308 display: none; |
| 321 } | 309 } |
| 322 | 310 |
| 323 /* Customized scrollbar for the playlist. */ | 311 /* Customized scrollbar for the playlist. */ |
| 324 | 312 |
| 325 ::-webkit-scrollbar { | 313 ::-webkit-scrollbar { |
| 314 height: 16px; |
| 326 width: 16px; | 315 width: 16px; |
| 327 height: 16px; | |
| 328 } | 316 } |
| 329 | 317 |
| 330 ::-webkit-scrollbar-button { | 318 ::-webkit-scrollbar-button { |
| 331 height: 0px; | 319 height: 0; |
| 332 width: 0px; | 320 width: 0; |
| 333 } | 321 } |
| 334 | 322 |
| 335 ::-webkit-scrollbar-thumb { | 323 ::-webkit-scrollbar-thumb { |
| 324 -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.10), |
| 325 inset 0 -1px 0 rgba(0, 0, 0, 0.07); |
| 326 background-clip: padding-box; |
| 327 background-color: rgba(255, 255, 255, 0.15); |
| 336 min-height: 28px; | 328 min-height: 28px; |
| 337 padding-top: 100px; | 329 padding-top: 100px; |
| 338 background-clip: padding-box; | |
| 339 background-color: rgba(255,255,255,0.15); | |
| 340 -webkit-box-shadow: inset 1px 1px 0px rgba(0,0,0,0.10), | |
| 341 inset 0px -1px 0px rgba(0,0,0,0.07); | |
| 342 } | 330 } |
| 343 | 331 |
| 344 ::-webkit-scrollbar-thumb:hover { | 332 ::-webkit-scrollbar-thumb:hover { |
| 333 -webkit-box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.25); |
| 345 background-color: rgba(255,255,255,0.20); | 334 background-color: rgba(255,255,255,0.20); |
| 346 -webkit-box-shadow: inset 1px 1px 1px rgba(0,0,0,0.25); | |
| 347 } | 335 } |
| 348 | 336 |
| 349 ::-webkit-scrollbar-thumb:active { | 337 ::-webkit-scrollbar-thumb:active { |
| 350 background-color: rgba(255,255,255,0.25); | 338 -webkit-box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35); |
| 351 -webkit-box-shadow: inset 1px 1px 3px rgba(0,0,0,0.35); | 339 background-color: rgba(255, 255, 255, 0.25); |
| 352 } | 340 } |
| 353 | 341 |
| 354 ::-webkit-scrollbar-thumb:vertical { | 342 ::-webkit-scrollbar-thumb:vertical { |
| 355 border-top: 0px solid transparent; | 343 border-bottom: 0 solid transparent; |
| 356 border-bottom: 0px solid transparent; | |
| 357 border-right: 0px solid transparent; | |
| 358 border-left: 5px solid transparent; | 344 border-left: 5px solid transparent; |
| 345 border-right: 0 solid transparent; |
| 346 border-top: 0 solid transparent; |
| 359 } | 347 } |
| 360 | 348 |
| 361 ::-webkit-scrollbar-track:hover { | 349 ::-webkit-scrollbar-track:hover { |
| 362 background-color: rgba(0,0,0,0.05); | 350 -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.10); |
| 363 -webkit-box-shadow: inset 1px 0px 0px rgba(0,0,0,0.10); | 351 background-color: rgba(0, 0, 0, 0.05); |
| 364 } | 352 } |
| 365 | 353 |
| 366 ::-webkit-scrollbar-track:active { | 354 ::-webkit-scrollbar-track:active { |
| 367 background-color: rgba(0,0,0,0.05); | 355 -webkit-box-shadow: inset 1px 0 0 rgba(0, 0, 0, 0.14), |
| 368 -webkit-box-shadow: inset 1px 0px 0px rgba(0,0,0,0.14), | 356 inset -1px -1px 0 rgba(0, 0, 0, 0.07); |
| 369 inset -1px -1px 0px rgba(0,0,0,0.07); | 357 background-color: rgba(0, 0, 0, 0.05); |
| 370 } | 358 } |
| 371 | 359 |
| 372 ::-webkit-scrollbar-track:vertical { | 360 ::-webkit-scrollbar-track:vertical { |
| 373 border-right: 0px solid transparent; | |
| 374 border-left: 5px solid transparent; | |
| 375 background-clip: padding-box; | 361 background-clip: padding-box; |
| 376 background-color: transparent; | 362 background-color: transparent; |
| 363 border-left: 5px solid transparent; |
| 364 border-right: 0 solid transparent; |
| 377 } | 365 } |
| OLD | NEW |