Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(75)

Side by Side Diff: ui/file_manager/audio_player/elements/track_info_panel.css

Issue 1657623002: Implement "expand/collapse artwork" button in audio player. (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: use 'box-sizing' instead of calc Created 4 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 /* Copyright 2016 The Chromium Authors. All rights reserved. 1 /* Copyright 2016 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 { 5 :host {
6 align-items: center; 6 align-items: center;
7 background: rgb(245, 245, 245); 7 background: rgb(245, 245, 245);
8 color: rgb(51, 51, 51); 8 color: rgb(51, 51, 51);
9 cursor: default; 9 cursor: default;
10 display: flex;
11 flex-direction: column;
12 font-size: 10pt; 10 font-size: 10pt;
13 justify-content: space-around;
14 overflow: hidden; 11 overflow: hidden;
15 } 12 }
16 13
17 /* Track item. */ 14 /* Track item. */
18 .track { 15 .track {
19 align-items: center; 16 align-items: center;
17 background-color: rgba(255, 255, 255, 0.9);
20 display: flex; 18 display: flex;
21 height: 48px; 19 height: 48px;
22 justify-content: space-between; 20 justify-content: space-between;
23 width: 100%; 21 width: 100%;
24 } 22 }
25 23
26 /* Track icon. */ 24 :host[expanded] .track {
25 bottom: 0px;
26 position: absolute;
27 }
28
29 /* artwork icon(expanded) */
27 .track .icon-wrapper { 30 .track .icon-wrapper {
28 flex: none; 31 flex: none;
29 height: 48px; 32 height: 48px;
30 width: 48px; 33 width: 48px;
31 } 34 }
32 35
33 .icon-wrapper .icon { 36 :host[expanded] .icon {
37 visibility: hidden;
38 }
39
40 :host(:not([expanded])) .icon {
34 background-position: center; 41 background-position: center;
35 background-repeat: no-repeat; 42 background-repeat: no-repeat;
36 background-size: contain; 43 background-size: contain;
37 height: 48px; 44 height: 48px;
38 pointer-events: none; 45 pointer-events: none;
39 position: absolute; 46 position: absolute;
40 width: 48px; 47 width: 48px;
41 } 48 }
42 49
43 .icon-wrapper .icon-background { 50 /* artwork icon(expanded) */
44 background: -webkit-image-set( 51
45 url(../assets/100/playlist_now_playing.png) 1x, 52 .track-wrapper {
46 url(../assets/200/playlist_now_playing.png) 2x) 53 background-color: rgb(32, 32, 34);
47 center 54 position: relative;
48 no-repeat; 55 }
49 height: 48px; 56
50 pointer-events: none; 57 :host:not([artwork-available])[expanded] .track-wrapper {
51 position: absolute; 58 height: 320px;
52 width: 48px; 59 position: relative;
60 width: 100%;
61 }
62
63 .icon-expanded {
64 background-size: 0 0;
65 }
66
67 :host:not([expanded]) .icon-unavailable-expanded {
68 background-size: 0 0;
69 }
70
71 :host:not([artwork-available])[expanded] .icon-unavailable-expanded {
72 background-image: -webkit-image-set(
73 url(../assets/100/player_no_artwork.png) 1x,
74 url(../assets/200/player_no_artwork.png) 2x);
75 background-position: center;
76 background-repeat: no-repeat;
77 height: calc(320px - 48px);
78 margin-left: auto;
79 margin-right: auto;
80 width: 320px;
81 }
82
83 :host[artwork-available][expanded] .icon-expanded {
84 background-position: center;
85 background-repeat: no-repeat;
86 background-size: contain;
87 height: 320px;
88 margin-left: auto;
89 margin-right: auto;
90 width: 320px;
53 } 91 }
54 92
55 /* expand icon. */ 93 /* expand icon. */
56 .track .expand { 94 .track .expand {
57 background-position: center; 95 background-position: center;
58 background-repeat: no-repeat; 96 background-repeat: no-repeat;
59 flex: none; 97 flex: none;
60 height: 48px; 98 height: 48px;
61 width: 48px; 99 width: 48px;
62 } 100 }
63 101
64 :host(:not([available])) > .track .expand { 102 :host:not([expanded]) .track .expand {
65 background-image: -webkit-image-set(
66 url(../assets/100/player_cover_open.png) 1x,
67 url(../assets/200/player_cover_open.png) 2x);
68 opacity: 0.1;
69 }
70
71 :host([available]:not([expanded])) > .track .expand {
72 background-image: -webkit-image-set( 103 background-image: -webkit-image-set(
73 url(../assets/100/player_cover_open.png) 1x, 104 url(../assets/100/player_cover_open.png) 1x,
74 url(../assets/200/player_cover_open.png) 2x); 105 url(../assets/200/player_cover_open.png) 2x);
75 } 106 }
76 107
77 :host([available][expanded]) > .track .expand { 108 :host[expanded] .track .expand {
78 background-image: -webkit-image-set( 109 background-image: -webkit-image-set(
79 url(../assets/100/player_cover_close.png) 1x, 110 url(../assets/100/player_cover_close.png) 1x,
80 url(../assets/200/player_cover_close.png) 2x); 111 url(../assets/200/player_cover_close.png) 2x);
81 } 112 }
82 113
83 /* Track data. */ 114 /* Track data. */
84 115
85 .track .data { 116 .track .data {
86 display: flex; 117 display: flex;
87 flex-direction: column; 118 flex-direction: column;
(...skipping 13 matching lines...) Expand all
101 .track .data .data-title { 132 .track .data .data-title {
102 color: rgb(51, 51, 51); 133 color: rgb(51, 51, 51);
103 font-size: 13px; 134 font-size: 13px;
104 font-weight: 500; 135 font-weight: 500;
105 } 136 }
106 137
107 .track .data .data-artist { 138 .track .data .data-artist {
108 color: rgb(100, 100, 100); 139 color: rgb(100, 100, 100);
109 font-size: 12px; 140 font-size: 12px;
110 } 141 }
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698