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