j1-template 2024.3.19 → 2024.3.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (87) hide show
  1. checksums.yaml +4 -4
  2. data/assets/data/amplitude_app.html +174 -150
  3. data/assets/data/swiper_app.2.html +757 -0
  4. data/assets/data/swiper_app.4.html +769 -0
  5. data/assets/data/swiper_app.html +171 -27
  6. data/assets/theme/j1/adapter/js/amplitude.js +817 -165
  7. data/assets/theme/j1/adapter/js/swiper.js +63 -15
  8. data/assets/theme/j1/core/css/themes/bootstrap/bootstrap.css +111 -101
  9. data/assets/theme/j1/core/css/themes/bootstrap/bootstrap.min.css +1 -1
  10. data/assets/theme/j1/core/css/themes/unodark/bootstrap.css +111 -101
  11. data/assets/theme/j1/core/css/themes/unodark/bootstrap.min.css +1 -1
  12. data/assets/theme/j1/core/css/themes/unolight/bootstrap.css +111 -101
  13. data/assets/theme/j1/core/css/themes/unolight/bootstrap.min.css +1 -1
  14. data/assets/theme/j1/modules/amplitudejs/css/theme/uno/dark/amplitude.css +140 -219
  15. data/assets/theme/j1/modules/amplitudejs/css/theme/uno/dark/amplitude.min.css +1 -1
  16. data/assets/theme/j1/modules/amplitudejs/css/theme/uno/dark/player/compact.css +117 -23
  17. data/assets/theme/j1/modules/amplitudejs/css/theme/uno/dark/player/compact.min.css +1 -1
  18. data/assets/theme/j1/modules/amplitudejs/css/theme/uno/dark/player/large.css +323 -493
  19. data/assets/theme/j1/modules/amplitudejs/css/theme/uno/dark/player/large.min.css +1 -2
  20. data/assets/theme/j1/modules/amplitudejs/css/theme/uno/dark/player/mini.css +20 -73
  21. data/assets/theme/j1/modules/amplitudejs/css/theme/uno/dark/player/mini.min.css +1 -1
  22. data/assets/theme/j1/modules/amplitudejs/js/tech/ytp.js +2062 -843
  23. data/assets/theme/j1/modules/amplitudejs/scss/theme/uno/dark/player/large.scss +439 -264
  24. data/assets/theme/j1/modules/swiperjs/css/modules/layoutBase.css +16 -0
  25. data/assets/theme/j1/modules/swiperjs/css/modules/layoutBase.min.css +16 -0
  26. data/assets/theme/j1/modules/swiperjs/css/modules/layoutExpanding.css +24 -24
  27. data/assets/theme/j1/modules/swiperjs/css/modules/layoutExpanding.min.css +1 -235
  28. data/assets/theme/j1/modules/swiperjs/css/modules/layoutNeighbor.min.css +2 -2
  29. data/assets/theme/j1/modules/swiperjs/css/modules/layoutParallax.css +16 -0
  30. data/assets/theme/j1/modules/swiperjs/css/modules/layoutParallax.min.css +16 -0
  31. data/assets/theme/j1/modules/swiperjs/css/modules/layoutStacked.css +6 -7
  32. data/assets/theme/j1/modules/swiperjs/css/modules/layoutStacked.min.css +1 -82
  33. data/assets/theme/j1/modules/swiperjs/css/modules/layoutThumbs.min.css +2 -29
  34. data/assets/theme/j1/modules/swiperjs/css/theme/uno.css +29 -12
  35. data/assets/theme/j1/modules/swiperjs/css/theme/uno.min.css +1 -1
  36. data/assets/theme/j1/modules/swiperjs/js/modules/layoutBase.js +25 -0
  37. data/assets/theme/j1/modules/swiperjs/js/modules/layoutBase.min.js +25 -0
  38. data/assets/theme/j1/modules/swiperjs/js/modules/layoutExpanding.js +1 -5
  39. data/assets/theme/j1/modules/swiperjs/js/modules/layoutExpanding.min.js +1 -5
  40. data/assets/theme/j1/modules/swiperjs/js/modules/layoutNeighbor.js +12 -14
  41. data/assets/theme/j1/modules/swiperjs/js/modules/layoutNeighbor.min.js +1 -17
  42. data/assets/theme/j1/modules/swiperjs/js/modules/layoutPanorama.js +0 -1
  43. data/assets/theme/j1/modules/swiperjs/js/modules/layoutParallax.js +25 -0
  44. data/assets/theme/j1/modules/swiperjs/js/modules/layoutParallax.min.js +25 -0
  45. data/assets/theme/j1/modules/swiperjs/js/modules/layoutStacked.0.js +114 -0
  46. data/assets/theme/j1/modules/swiperjs/js/modules/layoutStacked.1.js +93 -0
  47. data/assets/theme/j1/modules/swiperjs/js/modules/layoutStacked.js +42 -13
  48. data/assets/theme/j1/modules/swiperjs/js/modules/layoutStacked.min.js +17 -0
  49. data/assets/theme/j1/modules/swiperjs/js/modules/layoutThumbs.js +76 -25
  50. data/assets/theme/j1/modules/swiperjs/js/modules/layoutThumbs.min.js +1 -17
  51. data/assets/theme/j1/modules/swiperjs/js/swiper-bundle.js +9152 -9131
  52. data/assets/theme/j1/modules/swiperjs/js/swiper-bundle.min.js +1 -1
  53. data/lib/j1/version.rb +1 -1
  54. data/lib/starter_web/README.md +5 -5
  55. data/lib/starter_web/_config.yml +1 -1
  56. data/lib/starter_web/_data/modules/amplitude_app.yml +206 -23
  57. data/lib/starter_web/_data/modules/amplitude_playlists.yml +1122 -19
  58. data/lib/starter_web/_data/modules/defaults/{amplitude_app.yml → amplitude.yml} +70 -26
  59. data/lib/starter_web/_data/modules/swiper_app.yml +289 -155
  60. data/lib/starter_web/_data/modules/swiper_playlists.yml +51 -1
  61. data/lib/starter_web/_data/resources.yml +6 -2
  62. data/lib/starter_web/_data/templates/feed.xml +1 -1
  63. data/lib/starter_web/_plugins/filter/filters.rb +1 -11
  64. data/lib/starter_web/_plugins/index/lunr.rb +1 -1
  65. data/lib/starter_web/assets/image/module/swiper/avatar/avatar-1.png +0 -0
  66. data/lib/starter_web/assets/image/module/swiper/avatar/avatar-2.png +0 -0
  67. data/lib/starter_web/assets/image/module/swiper/avatar/avatar-3.png +0 -0
  68. data/lib/starter_web/assets/image/module/swiper/avatar/avatar-4.png +0 -0
  69. data/lib/starter_web/assets/image/module/swiper/avatar/avatar-5.png +0 -0
  70. data/lib/starter_web/package.json +1 -1
  71. data/lib/starter_web/pages/public/tools/previewer/preview_amplitudejs.adoc +82 -34
  72. data/lib/starter_web/pages/public/tools/tester/app_tester_amplitudejs_yt.adoc +62 -15
  73. data/lib/starter_web/pages/public/tools/tester/app_tester_swiperjs.adoc +121 -36
  74. data/lib/starter_web/pages/public/tour/play_audio.adoc +60 -70
  75. data/lib/starter_web/pages/public/tour/play_video.adoc +1 -1
  76. metadata +29 -14
  77. data/assets/theme/j1/modules/swiperjs/js/highlightJS.js +0 -13376
  78. data/assets/theme/j1/modules/swiperjs/js/highlightJS.min.js +0 -1246
  79. data/assets/theme/j1/modules/swiperjs/js/modules/!readme +0 -3
  80. /data/lib/starter_web/assets/image/module/swiper/extended/{poster → stacked}/!info/!readme +0 -0
  81. /data/lib/starter_web/assets/image/module/swiper/extended/{poster → stacked}/image/!readme +0 -0
  82. /data/lib/starter_web/assets/image/module/swiper/extended/{poster → stacked}/image/1.jpg +0 -0
  83. /data/lib/starter_web/assets/image/module/swiper/extended/{poster → stacked}/image/2.jpg +0 -0
  84. /data/lib/starter_web/assets/image/module/swiper/extended/{poster → stacked}/image/3.jpg +0 -0
  85. /data/lib/starter_web/assets/image/module/swiper/extended/{poster → stacked}/image/4.jpg +0 -0
  86. /data/lib/starter_web/assets/image/module/swiper/extended/{poster → stacked}/image/5.jpg +0 -0
  87. /data/lib/starter_web/assets/image/module/swiper/extended/{poster → stacked}/image/6.jpg +0 -0
@@ -15,182 +15,204 @@
15
15
 
16
16
  // Variables
17
17
  // ---------------------------------------------------------
18
- $font-family: "Lato", sans-serif;
19
18
 
20
- $color_1: var(--ajs-theme-uno--white);
21
- $color_2: var(--ajs-theme-uno--gray-200);
22
- $color_3: var(--ajs-theme-uno--gray-300);
23
- $color_4: var(--ajs-theme-uno--blue);
19
+ $font-family_1: "Lato", sans-serif;
24
20
 
25
- $background-color_1: var(--ajs-theme-uno--dark-silver);
26
- $background-color_2: var(--ajs-theme-uno--black);
27
- $background-color_3: var(--ajs-theme-uno--darker-silver);
28
- $background-color_4: var(--ajs-theme-uno--blue-gray-900);
29
- $background-color_5: var(--ajs-theme-uno--medium-silver);
21
+ $color_1: var(--ajs-theme-uno--white);
22
+ $color_2: var(--ajs-theme-uno--gray-200);
23
+ $color_3: var(--ajs-theme-uno--gray-300);
24
+ $color_4: var(--ajs-theme-uno--blue);
25
+ $color_5: var(--ajs-theme-uno--gray-400);
30
26
 
31
- $border-color_1: var(--ajs-theme-uno--medium-silver);
27
+ $background-color_1: var(--ajs-theme-uno--dark-silver);
28
+ $background-color_2: var(--ajs-theme-uno--black);
29
+ $background-color_3: var(--ajs-theme-uno--darker-silver);
30
+ $background-color_4: var(--ajs-theme-uno--blue-gray-900);
31
+ $background-color_5: var(--ajs-theme-uno--medium-silver);
32
32
 
33
+ $border-color_1: var(--ajs-theme-uno--medium-silver);
33
34
 
34
- // Styles
35
- // ---------------------------------------------------------
36
- div#large-player {
35
+ .large-player {
36
+ -webkit-font-smoothing: antialiased;
37
+ }
38
+ .large-player-container {
37
39
  display: flex;
38
40
  max-width: fit-content;
39
41
  background: var(--ajs-theme-uno--white);
40
42
  }
41
- div#playlist-header.player-expanded {
42
- position: sticky;
43
- cursor: default;
43
+ .player-left-top {
44
+ img {
45
+ width: 500px;
46
+ height: 500px;
47
+ object-fit: cover;
48
+ }
49
+ }
50
+ .large-player-playlist-header {
51
+ cursor: pointer;
44
52
  top: 0;
45
- width: 100%;
53
+ position: sticky;
46
54
  padding: 15px;
47
- font-family: $font-family;
55
+ font-family: $font-family_1;
48
56
  text-align: center;
49
57
  color: $color_1;
50
58
  background-color: $background-color_1;
51
59
  }
52
- div#amplitude-left {
60
+ .large-player-title-list {
61
+ display: block;
62
+ max-height: 600px;
63
+ overflow-y: scroll;
64
+ }
65
+ .meta-container.large-player {
66
+ height: 120px;
67
+ }
68
+ .playlist-screen-meta-container {
69
+ width: calc(100% - 80px);
70
+ float: left;
71
+ }
72
+ .playlist-screen-controls {
73
+ cursor: default;
74
+ height: 100px;
75
+ padding: 15px;
76
+ max-width: -webkit-fill-available;
77
+ max-width: -moz-available;
78
+ font-family: $font-family_1;
79
+ color: $color_1;
80
+ background-color: $background-color_2;
81
+ }
82
+ div#large_player_left {
83
+ display: flex;
84
+ flex: 1;
85
+ flex-direction: column;
86
+ width: 50vw;
87
+ max-width: fit-content;
88
+ border: solid 1px;
89
+ border-color: $border-color_1;
90
+ background-color: $background-color_3 !important;
53
91
  img.album-art {
54
92
  width: 100%;
55
93
  }
56
94
  div#player-left-bottom {
57
95
  flex: 1;
58
- background-color: $background-color_2;
59
- div#volume-container {
60
- &:after {
61
- content: "";
62
- display: table;
63
- clear: both;
64
- }
65
- }
96
+ background-color: $background-color_4;
66
97
  }
98
+ }
99
+ div#large_player_right {
67
100
  display: flex;
101
+ flex: 1;
68
102
  flex-direction: column;
69
- overflow-y: clip;
70
- padding: 0px;
71
- width: 50%;
103
+ flex-grow: 1;
104
+ width: 50vw;
105
+ border-top: solid 1px;
106
+ border-right: solid 1px;
107
+ border-bottom: solid 1px;
108
+ border-color: $border-color_1;
72
109
  background-color: $background-color_3 !important;
73
- flex: 1;
74
- }
75
- div#amplitude-right {
76
110
  div.song.amplitude-active-song-container {
77
111
  &:hover {
78
112
  div.play-button-container {
79
113
  display: none;
80
114
  }
81
115
  }
82
- div.song-now-playing-icon-container {
116
+ div.song-number-now-playing {
83
117
  span.number {
84
118
  display: inline-flex;
85
119
  opacity: 0.5;
86
- font-family: $font-family;
120
+ font-family: $font-family_1;
87
121
  font-size: 16px;
88
- color: $color_7;
89
- letter-spacing: 0.5px;
122
+ color: $color_2;
90
123
  }
91
124
  img.now-playing {
92
125
  display: block;
93
126
  margin-top: 5px;
94
- margin-left: 8px;
127
+ margin-left: 4px;
95
128
  height: 16px;
96
129
  width: 16px;
97
130
  }
98
131
  }
99
132
  }
100
133
  div.song {
134
+ cursor: pointer;
135
+ padding: 12px;
136
+ background-color: $background-color_3;
101
137
  div.audio-meta-data {
102
138
  float: left;
103
139
  width: calc(100% - 145px);
104
140
  span.audio-artist {
105
- display: block;
106
141
  font-size: 16px;
142
+ line-height: 18px;
107
143
  white-space: nowrap;
108
144
  overflow: hidden;
109
145
  text-overflow: ellipsis;
110
- color: $color_2;
146
+ color: $color_3;
111
147
  }
112
148
  span.audio-title {
113
- font-family: $font-family;
114
- font-size: 20px;
115
- line-height: 20px;
116
- letter-spacing: 0.47px;
149
+ display: block;
150
+ width: calc(100% - 25px);
151
+ font-family: $font-family_1;
152
+ font-size: 18px;
153
+ line-height: 24px;
117
154
  white-space: nowrap;
118
- color: $color_6;
155
+ overflow: hidden;
156
+ text-overflow: ellipsis;
157
+ color: $color_4;
119
158
  }
120
159
  }
121
- img.audio-info-blue {
122
- float: right;
123
- display: block;
124
- margin-top: 10px;
125
- margin-right: 10px;
126
- }
127
- img.audio-info-white {
128
- float: right;
129
- display: none;
130
- margin-top: 10px;
131
- margin-right: 10px;
132
- }
133
- &:after {
134
- content: "";
135
- display: table;
136
- clear: both;
137
- }
138
- cursor: pointer;
139
- padding: 12px;
140
- background-color: $background-color_3;
141
- div.song-now-playing-icon-container {
160
+ div.song-number-now-playing {
161
+ float: left;
162
+ width: 40px;
163
+ height: 20px;
164
+ margin-top: 8px;
165
+ margin-right: 12px;
142
166
  img.now-playing {
143
167
  display: none;
144
168
  }
145
- float: left;
146
- width: 26px;
147
- height: 20px;
148
- margin-top: 12px;
149
- margin-right: 20px;
150
169
  }
151
170
  span.audio-duration {
152
171
  float: left;
153
- margin-left: 5px;
154
- width: 50px;
155
- font-family: $font-family;
156
- text-align: center;
157
- line-height: 45px;
172
+ margin-left: 28px;
173
+ font-family: $font-family_1;
158
174
  font-size: 16px;
159
- font-weight: 500;
160
- color: $color_2;
175
+ color: $color_3;
161
176
  }
162
177
  }
163
- display: flex;
164
- flex-direction: column;
165
- padding: 0px;
166
- overflow-y: scroll;
167
- width: 50%;
168
- background-color: $background-color_3 !important;
169
- flex: 1;
170
- div#playlist-screen-controls {
171
- div#playlist-screen-meta-container {
178
+ div.playlist-screen-controls {
179
+ div.playlist-screen-meta-container {
172
180
  span.song-name {
173
- font-family: $font-family;
174
- font-size: 22px;
175
- color: $color_1;
176
- letter-spacing: 0.5px;
177
181
  line-height: 24px;
178
- margin-left: 38px;
182
+ white-space: nowrap;
183
+ overflow: hidden;
184
+ text-overflow: ellipsis;
185
+ font-family: $font-family_1;
186
+ font-size: 18px;
187
+ color: $color_1;
188
+ }
189
+ span.audio-rating {
190
+ display: flex;
191
+ align-items: center;
192
+ float: right;
193
+ margin-top: 4px;
194
+ margin-right: -48px;
195
+ font-family: $font-family_1;
196
+ font-size: 18px;
197
+ color: $color_5;
198
+ }
199
+ span.audio-info {
200
+ float: right;
201
+ margin-right: -80px;
179
202
  }
180
203
  div.song-artist-album {
181
204
  opacity: 0.5;
182
- font-family: $font-family;
205
+ font-family: $font-family_1;
183
206
  font-size: 16px;
207
+ line-height: 18px;
184
208
  color: $color_1;
185
- letter-spacing: 0.5px;
186
- line-height: 16px;
187
- margin-left: 38px;
188
209
  }
189
210
  }
190
211
  div.list-controls {
191
212
  float: right;
192
213
  width: 90px;
193
- margin-top: -32px;
214
+ margin-top: 50px;
215
+ margin-right: -12px;
194
216
  div.list-previous {
195
217
  float: left;
196
218
  cursor: pointer;
@@ -198,15 +220,13 @@ div#amplitude-right {
198
220
  height: 17px;
199
221
  margin-right: 15px;
200
222
  margin-top: 4px;
201
- background-repeat: no-repeat;
202
- background-image: url(/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/previous.svg);
223
+ background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/previous.svg") no-repeat;
203
224
  &:hover {
204
225
  opacity: .5;
205
226
  }
206
227
  }
207
228
  div.list-play-pause.amplitude-paused {
208
- background-repeat: no-repeat;
209
- background-image: url(/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/play.svg);
229
+ background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/play.svg") no-repeat;
210
230
  }
211
231
  div.list-play-pause {
212
232
  float: left;
@@ -218,8 +238,7 @@ div#amplitude-right {
218
238
  }
219
239
  }
220
240
  div.list-play-pause.amplitude-playing {
221
- background-repeat: no-repeat;
222
- background-image: url(/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/pause.svg);
241
+ background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/pause.svg") no-repeat;
223
242
  }
224
243
  div.list-next {
225
244
  float: left;
@@ -228,8 +247,7 @@ div#amplitude-right {
228
247
  height: 17px;
229
248
  margin-left: 15px;
230
249
  margin-top: 4px;
231
- background-repeat: no-repeat;
232
- background-image: url(/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/next.svg);
250
+ background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/next.svg")no-repeat;
233
251
  &:hover {
234
252
  opacity: .5;
235
253
  }
@@ -237,209 +255,366 @@ div#amplitude-right {
237
255
  }
238
256
  }
239
257
  div.song.amplitude-song-container.amplitude-play-pause.amplitude-active-song-container {
240
- background-color: $background-color_4 !important;
258
+ background-color: $background-color_5 !important;
241
259
  }
242
260
  }
243
- div#control-container {
244
- margin-top: 40px;
261
+ div#large_player_control_container {
262
+ margin-top: 20px;
245
263
  margin-bottom: 20px;
246
- div#repeat-container {
247
- width: 25%;
248
- float: left;
249
- padding-top: 20px;
264
+ &:after {
265
+ content: "";
266
+ display: table;
267
+ clear: both;
250
268
  }
251
- div#volume-container {
252
- width: 88%;
269
+ div.volume-container {
253
270
  float: left;
271
+ width: 88%;
254
272
  margin-top: 20px;
255
273
  margin-left: 12px;
274
+ &:after {
275
+ content: "";
276
+ display: table;
277
+ clear: both;
278
+ }
256
279
  div.volume-controls {
257
280
  input[type=range] {
258
281
  width: calc(100% - 45px);
259
282
  }
260
283
  }
261
284
  }
262
- div.amplitude-mute {
263
- cursor: pointer;
264
- width: 25px;
265
- height: 19px;
266
- float: left;
285
+ div.amplitude-mute.amplitude-muted {
286
+ background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/mute.svg") no-repeat;
267
287
  }
268
288
  div.amplitude-mute.amplitude-not-muted {
269
289
  background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/volume.svg") no-repeat;
270
290
  }
271
- div.amplitude-mute.amplitude-muted {
272
- background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/mute.svg") no-repeat;
291
+ }
292
+ .amplitude-mute {
293
+ float: left;
294
+ cursor: pointer;
295
+ width: 25px;
296
+ height: 19px;
297
+ margin-left: 40px;
298
+ }
299
+ .title-number {
300
+ display: inline-flex;
301
+ opacity: 0.5;
302
+ font-family: $font-family_1;
303
+ font-size: 16px;
304
+ color: $color_2;
305
+ }
306
+ div#large_player_controls {
307
+ height: 65px;
308
+ div.large-player-controls-container {
309
+ text-align: center;
273
310
  }
274
- &:after {
275
- content: "";
276
- display: table;
277
- clear: both;
311
+ }
312
+ .large-player-shuffle {
313
+ display: inline-block;
314
+ user-select: none;
315
+ width: 24px;
316
+ height: 24px;
317
+ cursor: pointer;
318
+ vertical-align: middle;
319
+ margin-right: 25px;
320
+ &:focus {
321
+ &:not(:focus-visible) {
322
+ outline: none;
323
+ }
278
324
  }
279
325
  }
280
- div#time-container {
281
- margin-top: 30px;
282
- span.current-time {
283
- color: $color_3;
284
- font-size: 14px;
285
- font-weight: bold;
286
- float: left;
287
- width: 15%;
288
- text-align: center;
326
+ .large-player-shufflee {
327
+ &::hover {
328
+ opacity: .5;
289
329
  }
290
- span.duration {
291
- color: $color_3;
292
- font-size: 14px;
293
- font-weight: bold;
294
- float: left;
295
- width: 15%;
296
- text-align: center;
330
+ }
331
+ .large-player-shuffle.eamplitude-shuffle-on {
332
+ background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/shuffle-on.svg") no-repeat;
333
+ }
334
+ .large-player-shuffle..amplitude-shuffle-off {
335
+ background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/shuffle-off.svg") no-repeat;
336
+ }
337
+ .large-player-previous {
338
+ display: inline-block;
339
+ user-select: none;
340
+ height: 24px;
341
+ width: 24px;
342
+ cursor: pointer;
343
+ vertical-align: middle;
344
+ margin-right: 20px;
345
+ background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/previous.svg") no-repeat;
346
+ &:hover {
347
+ opacity: .5;
297
348
  }
298
- &:after {
299
- content: "";
300
- display: table;
301
- clear: both;
349
+ &:focus {
350
+ &:not(:focus-visible) {
351
+ outline: none;
352
+ }
302
353
  }
303
354
  }
304
- div#meta-container {
305
- text-align: center;
306
- margin-top: 20px;
307
- span.song-name {
308
- display: block;
309
- color: $color_4;
310
- font-size: 24px;
311
- font-family: $font-family;
312
- white-space: nowrap;
313
- overflow: hidden;
314
- text-overflow: ellipsis;
315
- }
316
- div.song-artist-album {
317
- color: $color_5;
318
- font-size: 18px;
319
- font-weight: bold;
320
- font-family: $font-family;
321
- white-space: nowrap;
322
- overflow: hidden;
323
- text-overflow: ellipsis;
324
- span {
325
- display: block;
355
+ .large-player-skip-backward {
356
+ display: inline-block;
357
+ user-select: none;
358
+ cursor: pointer;
359
+ height: 24px;
360
+ width: 24px;
361
+ margin-right: 20px;
362
+ vertical-align: middle;
363
+ background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/skip-backward.svg") no-repeat;
364
+ &:focus {
365
+ &:not(:focus-visible) {
366
+ outline: none;
326
367
  }
327
368
  }
328
- div.audio-artist-album {
329
- color: $color_5;
330
- font-size: 18px;
331
- font-weight: bold;
332
- font-family: $font-family;
333
- white-space: nowrap;
334
- overflow: hidden;
335
- text-overflow: ellipsis;
336
- span {
337
- display: block;
369
+ &:hover {
370
+ opacity: 0.5;
371
+ }
372
+ }
373
+ .large-player-play-pause {
374
+ display: inline-block;
375
+ user-select: none;
376
+ width: 60px;
377
+ height: 60px;
378
+ cursor: pointer;
379
+ vertical-align: middle;
380
+ &:hover {
381
+ opacity: .5;
382
+ }
383
+ &:focus {
384
+ &:not(:focus-visible) {
385
+ outline: none;
338
386
  }
339
387
  }
340
388
  }
341
- span.title-number {
342
- display: inline-flex;
343
- opacity: 0.5;
344
- font-family: $font-family;
345
- font-size: 16px;
346
- color: $color_7;
347
- letter-spacing: 0.5px;
389
+ div.large-player-play-pause.amplitude-paused {
390
+ background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/play.svg") no-repeat;
348
391
  }
349
- div#large-player-controls {
350
- height: 65px;
351
- div.large-player-controls-container {
352
- text-align: center;
353
- div#shuffle-black {
354
- display: inline-block;
355
- width: 24px;
356
- height: 24px;
357
- cursor: pointer;
358
- vertical-align: middle;
359
- margin-right: 25px;
360
- margin-left: -16px;
361
- &:hover {
362
- opacity: .5;
363
- }
364
- }
365
- div#shuffle-black.amplitude-shuffle-off {
366
- background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/shuffle-disabled.svg") no-repeat;
367
- }
368
- div#shuffle-black.amplitude-shuffle-on {
369
- background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/shuffle-enabled.svg") no-repeat;
392
+ div.large-player-play-pause.amplitude-playing {
393
+ background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/pause.svg") no-repeat;
394
+ }
395
+ .large-player-skip-forward {
396
+ display: inline-block;
397
+ user-select: none;
398
+ cursor: pointer;
399
+ height: 24px;
400
+ width: 24px;
401
+ margin-left: 20px;
402
+ vertical-align: middle;
403
+ background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/skip-forward.svg") no-repeat;
404
+ &:focus {
405
+ &:not(:focus-visible) {
406
+ outline: none;
370
407
  }
371
- div#previous-black {
372
- display: inline-block;
373
- height: 24px;
374
- width: 24px;
375
- cursor: pointer;
376
- vertical-align: middle;
377
- margin-right: 20px;
378
- background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/previous-hover.svg") no-repeat;
379
- &:hover {
380
- opacity: .5;
381
- }
408
+ }
409
+ &:hover {
410
+ opacity: .5;
411
+ }
412
+ }
413
+ .large-player-skip-forward.amplitude-playing {
414
+ background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/pause.svg") no-repeat;
415
+ }
416
+ .large-player-next {
417
+ display: inline-block;
418
+ user-select: none;
419
+ height: 24px;
420
+ width: 24px;
421
+ cursor: pointer;
422
+ vertical-align: middle;
423
+ margin-right: 25px;
424
+ margin-left: 20px;
425
+ background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/next.svg") no-repeat;
426
+ &:focus {
427
+ &:not(:focus-visible) {
428
+ outline: none;
382
429
  }
383
- div#play-pause-black {
384
- display: inline-block;
385
- width: 60px;
386
- height: 60px;
387
- cursor: pointer;
388
- vertical-align: middle;
389
- margin-right: 10px;
390
- &:hover {
391
- opacity: .5;
392
- }
430
+ }
431
+ &:hover {
432
+ opacity: .5;
433
+ }
434
+ }
435
+ .large-player-repeat {
436
+ display: inline-block;
437
+ user-select: none;
438
+ width: 24px;
439
+ height: 24px;
440
+ cursor: pointer;
441
+ vertical-align: middle;
442
+ }
443
+ .large_player_repeat {
444
+ &:focus {
445
+ &:not(:focus-visible) {
446
+ outline: none;
393
447
  }
394
- div#play-pause-black.amplitude-paused {
395
- background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/black-play.svg") no-repeat;
448
+ }
449
+ &::hover {
450
+ opacity: .5;
451
+ }
452
+ }
453
+ .large_player_repeat.amplitude-repeat-off {
454
+ background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/repeat-off.svg") no-repeat;
455
+ }
456
+ .large_player_repeat.amplitude-repeat-on {
457
+ background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/repeat-on.svg") no-repeat;
458
+ }
459
+ @media screen and (max-width: 992px) {
460
+ .large-player {
461
+ max-width: -webkit-fill-available;
462
+ max-width: -moz-available;
463
+ }
464
+ div#large_player_left {
465
+ width: auto;
466
+ max-width: unset;
467
+ border: solid 1px;
468
+ border-color: $border-color_1;
469
+ }
470
+ div.large-player-container {
471
+ position: relative;
472
+ flex-direction: column;
473
+ max-height: fit-content;
474
+ max-width: fit-content;
475
+ div#large_player_right {
476
+ width: auto;
477
+ min-width: unset;
396
478
  }
397
- div#play-pause-black.amplitude-playing {
398
- background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/black-pause.svg") no-repeat;
479
+ }
480
+ .player-left-top {
481
+ img {
482
+ height: 700px;
483
+ width: -webkit-fill-available;
484
+ width: -moz-available;
399
485
  }
400
- div#next-black {
401
- display: inline-block;
402
- height: 24px;
403
- width: 25px;
404
- cursor: pointer;
405
- vertical-align: middle;
406
- margin-right: 25px;
407
- margin-left: 20px;
408
- background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/next-hover.svg") no-repeat;
409
- &:hover {
410
- opacity: .5;
486
+ }
487
+ div#large_player_control_container {
488
+ margin-top: 25px;
489
+ margin-bottom: 25px;
490
+ }
491
+ div#large_player_right {
492
+ div.playlist-screen-controls {
493
+ div.playlist-screen-meta-container {
494
+ span.song-name {
495
+ font-size: 16px;
496
+ }
411
497
  }
412
498
  }
413
- div#repeat-black {
414
- display: inline-block;
415
- width: 24px;
416
- height: 24px;
417
- cursor: pointer;
418
- vertical-align: middle;
419
- &:hover {
420
- opacity: .5;
421
- }
499
+ border-top: 0px;
500
+ border-right: 1px solid;
501
+ border-bottom: 1px solid;
502
+ border-left: 1px solid;
503
+ border-color: $border-color_1;
504
+ }
505
+ .playlist-screen-controls.large-player {
506
+ display: none;
507
+ }
508
+ .large-player-title-list {
509
+ border-bottom: 1px solid;
510
+ border-color: $border-color_1;
511
+ }
512
+ }
513
+ @media screen and (max-width: 768px) {
514
+ .large-player {
515
+ max-width: -webkit-fill-available;
516
+ max-width: -moz-available;
517
+ }
518
+ div#large_player_left {
519
+ width: auto;
520
+ max-width: unset;
521
+ border: solid 1px;
522
+ border-color: $border-color_1;
523
+ }
524
+ div.large-player-container {
525
+ position: relative;
526
+ flex-direction: column;
527
+ max-height: fit-content;
528
+ max-width: fit-content;
529
+ div#large_player_right {
530
+ width: auto;
531
+ min-width: unset;
422
532
  }
423
- div#repeat-black.amplitude-repeat-off {
424
- background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/repeat-disabled.svg") no-repeat;
533
+ }
534
+ .player-left-top {
535
+ img {
536
+ height: 700px;
537
+ width: -webkit-fill-available;
538
+ width: -moz-available;
425
539
  }
426
- div#repeat-black.amplitude-repeat-on {
427
- background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/repeat-enabled.svg") no-repeat;
540
+ }
541
+ div#large_player_control_container {
542
+ margin-top: 25px;
543
+ margin-bottom: 25px;
544
+ }
545
+ div#large_player_right {
546
+ div.playlist-screen-controls {
547
+ div.playlist-screen-meta-container {
548
+ span.song-name {
549
+ font-size: 16px;
550
+ }
551
+ }
428
552
  }
553
+ border-top: 0px;
554
+ border-right: 1px solid;
555
+ border-bottom: 1px solid;
556
+ border-left: 1px solid;
557
+ border-color: $border-color_1;
558
+ }
559
+ .playlist-screen-controls.large-player {
560
+ display: none;
561
+ }
562
+ .large-player-title-list {
563
+ border-bottom: 1px solid;
564
+ border-color: $border-color_1;
429
565
  }
430
566
  }
431
- @media screen and (max-width: 39.9375em) {
432
- div#large-player {
567
+ @media screen and (max-width: 576px) {
568
+ .large-player {
569
+ max-width: -webkit-fill-available;
570
+ max-width: -moz-available;
571
+ }
572
+ div#large_player_left {
573
+ width: auto;
574
+ max-width: unset;
575
+ border: solid 1px;
576
+ border-color: $border-color_1;
577
+ }
578
+ div.large-player-container {
579
+ position: relative;
433
580
  flex-direction: column;
434
- div#amplitude-right {
435
- width: 100%;
581
+ max-height: fit-content;
582
+ max-width: fit-content;
583
+ div#large_player_right {
584
+ width: auto;
585
+ min-width: unset;
586
+ }
587
+ }
588
+ .player-left-top {
589
+ img {
590
+ height: 700px;
591
+ width: -webkit-fill-available;
592
+ width: -moz-available;
436
593
  }
437
- div#amplitude-left {
438
- width: 100%;
439
- img[amplitude-song-info="cover_art_url"] {
440
- width: auto;
441
- height: auto;
594
+ }
595
+ div#large_player_control_container {
596
+ margin-top: 25px;
597
+ margin-bottom: 25px;
598
+ }
599
+ div#large_player_right {
600
+ div.playlist-screen-controls {
601
+ div.playlist-screen-meta-container {
602
+ span.song-name {
603
+ font-size: 16px;
604
+ }
442
605
  }
443
606
  }
607
+ border-top: 0px;
608
+ border-right: 1px solid;
609
+ border-bottom: 1px solid;
610
+ border-left: 1px solid;
611
+ border-color: $border-color_1;
612
+ }
613
+ .playlist-screen-controls.large-player {
614
+ display: none;
615
+ }
616
+ .large-player-title-list {
617
+ border-bottom: 1px solid;
618
+ border-color: $border-color_1;
444
619
  }
445
620
  }