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
@@ -14,26 +14,148 @@
14
14
  */
15
15
 
16
16
  /* 1. Base
17
- # ------------------------------------------------------------------------------ */
18
-
17
+ # --------------------------------------------------------- */
19
18
  .large-player {
20
- -webkit-font-smoothing: antialiased; /* Chrome, Safari, Edge */
19
+ -webkit-font-smoothing: antialiased;
21
20
  }
22
21
 
22
+ /* 2. Components
23
+ # --------------------------------------------------------- */
24
+
23
25
  .large-player-container {
24
- display: flex;
25
- max-width: fit-content;
26
- background: var(--ajs-theme-uno--white);
26
+ display: flex;
27
+ max-width: fit-content;
28
+ background: var(--ajs-theme-uno--white);
27
29
  }
28
-
29
- /* jadams, 2024-11-04: Overload user agent styles (img) for width|height */
30
- .player-left-top img {
31
- width: 500px;
32
- /* height: auto; */
33
- height: 500px;
34
- object-fit: cover;
30
+ .large-player-controls-container {
31
+ text-align: center;
32
+ }
33
+ .amplitude-shuffle {
34
+ display: inline-block;
35
+ user-select: none;
36
+ width: 24px;
37
+ height: 24px;
38
+ cursor: pointer;
39
+ vertical-align: middle;
40
+ margin-right: 25px;
41
+ }
42
+ .amplitude-shuffle:hover {
43
+ opacity: 0.5;
44
+ }
45
+ .amplitude-shuffle-on {
46
+ background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/shuffle-on.svg") no-repeat;
47
+ }
48
+ .amplitude-shuffle-off {
49
+ background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/shuffle-off.svg") no-repeat;
50
+ }
51
+ .large-player-previous {
52
+ display: inline-block;
53
+ user-select: none;
54
+ height: 24px;
55
+ width: 24px;
56
+ cursor: pointer;
57
+ vertical-align: middle;
58
+ margin-right: 20px;
59
+ background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/previous.svg") no-repeat;
60
+ }
61
+ .large-player-previous:hover {
62
+ opacity: 0.5;
63
+ }
64
+ .large-player-previous:focus:not(:focus-visible) {
65
+ outline: none;
66
+ }
67
+ .large-player-skip-backward {
68
+ display: inline-block;
69
+ user-select: none;
70
+ cursor: pointer;
71
+ height: 24px;
72
+ width: 24px;
73
+ margin-right: 20px;
74
+ vertical-align: middle;
75
+ background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/skip-backward.svg") no-repeat;
76
+ }
77
+ .large-player-skip-backward:focus:not(:focus-visible) {
78
+ outline: none;
79
+ }
80
+ .large-player-skip-backward:hover {
81
+ opacity: 0.5;
82
+ }
83
+ .large-player-play-pause {
84
+ display: inline-block;
85
+ user-select: none;
86
+ width: 60px;
87
+ height: 60px;
88
+ cursor: pointer;
89
+ vertical-align: middle;
90
+ }
91
+ .large-player-play-pause:hover {
92
+ opacity: 0.5;
93
+ }
94
+ .large-player-play-pause:focus:not(:focus-visible) {
95
+ outline: none;
96
+ }
97
+ div.large-player-play-pause.amplitude-paused {
98
+ background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/play.svg") no-repeat;
99
+ }
100
+ div.large-player-play-pause.amplitude-playing {
101
+ background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/pause.svg") no-repeat;
102
+ }
103
+ .large-player-skip-forward {
104
+ display: inline-block;
105
+ user-select: none;
106
+ cursor: pointer;
107
+ height: 24px;
108
+ width: 24px;
109
+ margin-left: 20px;
110
+ vertical-align: middle;
111
+ background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/skip-forward.svg") no-repeat;
112
+ }
113
+ .large-player-skip-forward:focus:not(:focus-visible) {
114
+ outline: none;
115
+ }
116
+ .large-player-skip-forward:hover {
117
+ opacity: 0.5;
118
+ }
119
+ .large-player-skip-forward.amplitude-playing {
120
+ background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/pause.svg") no-repeat;
121
+ }
122
+ .large-player-next {
123
+ display: inline-block;
124
+ user-select: none;
125
+ height: 24px;
126
+ width: 24px;
127
+ cursor: pointer;
128
+ vertical-align: middle;
129
+ margin-right: 25px;
130
+ margin-left: 20px;
131
+ background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/next.svg") no-repeat;
132
+ }
133
+ .large-player-next:focus:not(:focus-visible) {
134
+ outline: none;
135
+ }
136
+ .large-player-next:hover {
137
+ opacity: 0.5;
138
+ }
139
+ .amplitude-repeat {
140
+ display: inline-block;
141
+ user-select: none;
142
+ width: 24px;
143
+ height: 24px;
144
+ cursor: pointer;
145
+ vertical-align: middle;
146
+ }
147
+ .amplitude-repeat:focus:not(:focus-visible) {
148
+ outline: none;
149
+ }
150
+ .amplitude-repeat:hover {
151
+ opacity: 0.5;
152
+ }
153
+ .amplitude-repeat-off {
154
+ background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/repeat-off.svg") no-repeat;
155
+ }
156
+ .amplitude-repeat-on {
157
+ background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/repeat-on.svg") no-repeat;
35
158
  }
36
-
37
159
  .large-player-playlist-header {
38
160
  cursor: pointer;
39
161
  top: 0;
@@ -44,22 +166,27 @@
44
166
  color: var(--ajs-theme-uno--white);
45
167
  background-color: var(--ajs-theme-uno--dark-silver);
46
168
  }
47
-
48
169
  .large-player-title-list {
49
170
  display: block;
50
- max-height: 600px;
171
+ /* max-height: 600px; */
172
+ max-height: 540px;
51
173
  overflow-y: scroll;
52
174
  }
53
-
175
+ .large-player-control-container {
176
+ margin-top: 25px;
177
+ margin-bottom: 25px;
178
+ }
179
+ .large-player-volume-container {
180
+ margin-top: 20px;
181
+ margin-bottom: 20px;
182
+ }
54
183
  .meta-container.large-player {
55
184
  height: 120px;
56
185
  }
57
-
58
186
  .playlist-screen-meta-container {
59
187
  width: calc(100% - 80px);
60
188
  float: left;
61
189
  }
62
-
63
190
  .playlist-screen-controls {
64
191
  cursor: default;
65
192
  height: 100px;
@@ -70,93 +197,74 @@
70
197
  color: var(--ajs-theme-uno--white);
71
198
  background-color: var(--ajs-theme-uno--black);
72
199
  }
73
-
74
- /* 2. Components
75
- # ------------------------------------------------------------------------------ */
76
-
77
- div#large_player_left {
200
+ .large-player-left {
78
201
  display: flex;
79
202
  flex: 1;
80
203
  flex-direction: column;
81
- /* jadams, 2014-11-07: width (overall) DISABLED on the left */
82
- /* width: 50%; */
204
+ width: 50vw;
83
205
  max-width: fit-content;
84
206
  border: solid 1px;
85
207
  border-color: var(--ajs-theme-uno--medium-silver);
86
208
  background-color: var(--ajs-theme-uno--darker-silver) !important;
87
209
  }
88
-
89
- div#large_player_left
90
- img.album-art {
91
- width: 100%;
210
+ .large-player-left-top img {
211
+ width: 500px;
212
+ height: 500px;
213
+ object-fit: cover;
92
214
  }
93
-
94
- div#large_player_left
95
- div#player-left-bottom {
96
- flex: 1;
97
- background-color: var(--ajs-theme-uno--blue-gray-900);
215
+ .large-player-left-middle {
216
+ margin-top: 10px;
217
+ margin-bottom: 20px;
218
+ margin-left: 40px;
98
219
  }
99
-
100
- div#large_player_right {
220
+ .large-player-left-bottom {
221
+ background-color: var(--ajs-theme-uno--black);
222
+ }
223
+ .large-player-right {
101
224
  display: flex;
102
225
  flex: 1;
103
226
  flex-direction: column;
104
227
  flex-grow: 1;
105
- width: 50%; /* make flex colums same in width (overall) */
106
- min-width: 500px;
228
+ width: 50vw;
107
229
  border-top: solid 1px;
108
230
  border-right: solid 1px;
109
231
  border-bottom: solid 1px;
110
232
  border-color: var(--ajs-theme-uno--medium-silver);
111
233
  background-color: var(--ajs-theme-uno--darker-silver) !important;
112
234
  }
113
-
114
- div#large_player_right
115
- div.song.amplitude-active-song-container:hover
116
- div.play-button-container {
235
+ .amplitude-song-container img.now-playing {
117
236
  display: none;
118
237
  }
119
-
120
- div#large_player_right
121
- div.song.amplitude-active-song-container
122
- div.song-number-now-playing
123
- span.number {
124
- display: inline-flex;
125
- opacity: 0.5;
126
- font-family: "Lato", sans-serif;
127
- font-size: 16px;
128
- color: var(--ajs-theme-uno--gray-200);
238
+ .amplitude-active-song-container {
239
+ background-color: var(--ajs-theme-uno--medium-silver) !important;
129
240
  }
130
-
131
- div#large_player_right
132
- div.song.amplitude-active-song-container
133
- div.song-number-now-playing
134
- img.now-playing {
241
+ .amplitude-active-song-container img.now-playing {
135
242
  display: block;
136
243
  margin-top: 5px;
244
+ margin-right: 8px;
137
245
  margin-left: 4px;
138
246
  height: 16px;
139
247
  width: 16px;
140
248
  }
141
249
 
142
- div#large_player_right
143
- div.song {
250
+
251
+ .amplitude-song {
144
252
  cursor: pointer;
145
253
  padding: 12px;
146
254
  background-color: var(--ajs-theme-uno--darker-silver);
147
255
  }
256
+ .amplitude-song:after {
257
+ content: "";
258
+ display: table;
259
+ clear: both;
260
+ }
261
+
148
262
 
149
- div#large_player_right
150
- div.song
151
- div.audio-meta-data {
263
+ .audio-meta-data {
152
264
  float: left;
153
265
  width: calc(100% - 145px);
154
266
  }
155
-
156
- div#large_player_right
157
- div.song
158
- div.audio-meta-data
159
- span.audio-artist {
267
+ .audio-artist {
160
268
  font-size: 16px;
161
269
  line-height: 18px;
162
270
  white-space: nowrap;
@@ -164,11 +272,7 @@ span.audio-artist {
164
272
  text-overflow: ellipsis;
165
273
  color: var(--ajs-theme-uno--gray-300);
166
274
  }
167
-
168
- div#large_player_right
169
- div.song
170
- div.audio-meta-data
171
- span.audio-title {
275
+ .audio-title {
172
276
  display: block;
173
277
  width: calc(100% - 25px);
174
278
  font-family: "Lato", sans-serif;
@@ -179,68 +283,21 @@ span.audio-title {
179
283
  text-overflow: ellipsis;
180
284
  color: var(--ajs-theme-uno--blue);
181
285
  }
182
-
183
- /*
184
- div#large_player_right
185
- div.song
186
- div.audio-meta-data
187
- span.audio-rating {
188
- display: flex;
189
- align-items: center;
190
- float: right;
191
- font-size: 16px;
192
- margin-top: -24px;
193
- margin-right: -20px;
194
- color: var(--ajs-theme-uno--gray-400);
195
- }
196
- */
197
-
198
- /* div#large_player_right
199
- div.song
200
- div.audio-meta-data
201
- span.audio-info {
202
- float: right;
203
- margin-right: -80px;
204
- } */
205
-
206
- /* clearfix */
207
- div#large_player_right
208
- div.song:after {
209
- content: "";
210
- display: table;
211
- clear: both;
212
- }
213
-
214
- div#large_player_right
215
- div.song
216
- div.song-number-now-playing {
286
+ .song-number-now-playing {
217
287
  float: left;
218
288
  width: 40px;
219
289
  height: 20px;
220
290
  margin-top: 8px;
221
291
  margin-right: 12px;
222
292
  }
223
-
224
- div#large_player_right
225
- div.song
226
- div.song-number-now-playing
227
- img.now-playing {
228
- display: none;
229
- }
230
-
231
- div#large_player_right
232
- div.song span.audio-duration {
233
- float: left;
234
- margin-left: 28px;
293
+ .audio-duration {
294
+ float: right;
295
+ /* margin-left: 103px; */
235
296
  font-family: "Lato", sans-serif;
236
297
  font-size: 16px;
237
298
  color: var(--ajs-theme-uno--gray-300);
238
299
  }
239
-
240
- div#large_player_right
241
- div.playlist-screen-controls
242
- div.playlist-screen-meta-container
243
- span.song-name {
300
+ .song-name {
244
301
  line-height: 24px;
245
302
  white-space: nowrap;
246
303
  overflow: hidden;
@@ -250,52 +307,37 @@ span.song-name {
250
307
  color: var(--ajs-theme-uno--white);
251
308
  }
252
309
 
253
- div#large_player_right
254
- div.playlist-screen-controls
310
+ div.screen-controls-large-player
255
311
  div.playlist-screen-meta-container
256
312
  span.audio-rating {
257
313
  display: flex;
258
- align-items: center;
259
314
  float: right;
260
- margin-top: 4px;
315
+ margin-top: 10px;
261
316
  margin-right: -48px;
262
- font-family: "Lato", sans-serif;
263
- font-size: 18px;
264
- color: var(--ajs-theme-uno--gray-400);
265
- }
266
-
267
- div#large_player_right
268
- div.playlist-screen-controls
269
- div.playlist-screen-meta-container
270
- span.audio-info {
271
- float: right;
272
- margin-right: -80px;
273
317
  }
274
318
 
275
- div#large_player_right
276
- div.playlist-screen-controls
277
- div.playlist-screen-meta-container
278
- div.song-artist-album {
319
+ div.playlist-screen-meta-container .song-artist-album {
279
320
  opacity: 0.5;
280
321
  font-family: "Lato", sans-serif;
281
322
  font-size: 16px;
282
323
  line-height: 18px;
283
324
  color: var(--ajs-theme-uno--white);
284
325
  }
285
-
286
- div#large_player_right
287
- div.playlist-screen-controls
288
- div.list-controls {
326
+ .audio-rating {
327
+ float: left;
328
+ padding-left: 65px;
329
+ }
330
+ .amplitude-audio-info {
331
+ float: right;
332
+ margin-right: -80px;
333
+ }
334
+ div.playlist-screen-controls div.list-controls {
289
335
  float: right;
290
336
  width: 90px;
291
- margin-top: 50px;
337
+ margin-top: 45px;
292
338
  margin-right: -12px;
293
339
  }
294
-
295
- div#large_player_right
296
- div.playlist-screen-controls
297
- div.list-controls
298
- div.list-previous {
340
+ div.playlist-screen-controls div.list-controls div.list-previous {
299
341
  float: left;
300
342
  cursor: pointer;
301
343
  width: 15px;
@@ -304,329 +346,55 @@ div.list-previous {
304
346
  margin-top: 4px;
305
347
  background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/previous.svg") no-repeat;
306
348
  }
307
-
308
- div#large_player_right
309
- div.playlist-screen-controls
310
- div.list-controls
311
- div.list-previous:hover {
312
- opacity: .5;
349
+ div.playlist-screen-controls div.list-controls div.list-previous:hover {
350
+ opacity: 0.5;
313
351
  }
314
-
315
- div#large_player_right
316
- div.playlist-screen-controls
317
- div.list-controls
318
- div.list-play-pause.amplitude-paused {
352
+ div.playlist-screen-controls div.list-controls div.list-play-pause.amplitude-paused {
319
353
  background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/play.svg") no-repeat;
320
354
  }
321
-
322
- div#large_player_right
323
- div.playlist-screen-controls
324
- div.list-controls
325
- div.list-play-pause {
355
+ div.playlist-screen-controls div.list-controls div.list-play-pause {
326
356
  float: left;
327
357
  cursor: pointer;
328
358
  width: 17px;
329
359
  height: 24px;
330
360
  }
331
-
332
- div#large_player_right
333
- div.playlist-screen-controls
334
- div.list-controls
335
- div.list-play-pause:hover {
336
- opacity: .5;
361
+ div.playlist-screen-controls div.list-controls div.list-play-pause:hover {
362
+ opacity: 0.5;
337
363
  }
338
-
339
- div#large_player_right
340
- div.playlist-screen-controls
341
- div.list-controls
342
- div.list-play-pause.amplitude-playing {
364
+ div.playlist-screen-controls div.list-controls div.list-play-pause.amplitude-playing {
343
365
  background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/pause.svg") no-repeat;
344
366
  }
345
-
346
- div#large_player_right
347
- div.playlist-screen-controls
348
- div.list-controls
349
- div.list-next {
367
+ div.playlist-screen-controls div.list-controls div.list-next {
350
368
  float: left;
351
369
  cursor: pointer;
352
370
  width: 15px;
353
371
  height: 17px;
354
372
  margin-left: 15px;
355
373
  margin-top: 4px;
356
- background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/next.svg")no-repeat;
357
- }
358
-
359
- div#large_player_right
360
- div.playlist-screen-controls
361
- div.list-controls
362
- div.list-next:hover {
363
- opacity: .5;
364
- }
365
-
366
- div#large_player_right
367
- div.song.amplitude-song-container.amplitude-play-pause.amplitude-active-song-container {
368
- background-color: var(--ajs-theme-uno--medium-silver) !important;
369
- }
370
-
371
- div#large_player_control_container {
372
- margin-top: 20px;
373
- margin-bottom: 20px;
374
- }
375
-
376
- /* clearfix */
377
- div#large_player_control_container:after {
378
- content: "";
379
- display: table;
380
- clear: both;
381
- }
382
-
383
- div#large_player_control_container
384
- div.volume-container {
385
- float: left;
386
- width: 88%;
387
- margin-top: 20px;
388
- margin-left: 12px;
389
- }
390
-
391
- /* clearfix */
392
- div#large_player_control_container
393
- div.volume-container:after {
394
- content: "";
395
- display: table;
396
- clear: both;
397
- }
398
-
399
- div#large_player_control_container
400
- div.volume-container
401
- div.volume-controls
402
- input[type=range] {
403
- width: calc(100% - 45px);
404
- }
405
-
406
- div#large_player_control_container
407
- div.amplitude-mute {
408
- float: left;
409
- cursor: pointer;
410
- width: 25px;
411
- height: 19px;
412
- margin-left: 40px;
413
- }
414
-
415
- div#large_player_control_container
416
- div.amplitude-mute.amplitude-muted {
417
- background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/mute.svg") no-repeat;
418
- }
419
-
420
- div#large_player_control_container
421
- div.amplitude-mute.amplitude-not-muted {
422
- background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/volume.svg") no-repeat;
423
- }
424
-
425
- span.title-number {
426
- display: inline-flex;
427
- opacity: 0.5;
428
- font-family: "Lato", sans-serif;
429
- font-size: 16px;
430
- color: var(--ajs-theme-uno--gray-200);
431
- }
432
-
433
- div#large_player_controls {
434
- height: 65px;
435
- }
436
-
437
- div#large_player_controls
438
- div.large-player-controls-container {
439
- text-align: center;
440
- }
441
-
442
- div#large_player_controls
443
- div.large-player-controls-container
444
- div#large_player_shuffle {
445
- display: inline-block;
446
- width: 24px;
447
- height: 24px;
448
- cursor: pointer;
449
- vertical-align: middle;
450
- margin-right: 25px;
451
- }
452
-
453
- div#large_player_controls
454
- div.large-player-controls-container
455
- div#large_player_shuffle:hover {
456
- opacity: .5;
457
- }
458
-
459
- div#large_player_controls
460
- div.large-player-controls-container
461
- div#large_player_shuffle.amplitude-shuffle-on {
462
- background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/shuffle-on.svg") no-repeat;
463
- }
464
-
465
- div#large_player_controls
466
- div.large-player-controls-container
467
- div#large_player_shuffle.amplitude-shuffle-off {
468
- background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/shuffle-off.svg") no-repeat;
469
- }
470
-
471
- div#large_player_controls
472
- div.large-player-controls-container
473
- div#large_player_previous {
474
- display: inline-block;
475
- height: 24px;
476
- width: 24px;
477
- cursor: pointer;
478
- vertical-align: middle;
479
- margin-right: 20px;
480
- background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/previous.svg") no-repeat;
374
+ background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/next.svg") no-repeat;
481
375
  }
482
-
483
- div#large_player_controls
484
- div.large-player-controls-container
485
- div#large_player_previous:hover {
486
- opacity: .5;
487
- }
488
-
489
- div#large_player_controls
490
- div.large-player-controls-container
491
- div.large-player-skip-backward {
492
- display: inline-block;
493
- cursor: pointer;
494
- height: 24px;
495
- width: 24px;
496
- margin-right: 20px;
497
- vertical-align: middle;
498
- background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/skip-backward.svg") no-repeat;
499
- }
500
-
501
- div#large_player_controls
502
- div.large-player-controls-container
503
- div.large-player-skip-backward:hover {
376
+ div.playlist-screen-controls div.list-controls div.list-next:hover {
504
377
  opacity: 0.5;
505
378
  }
506
379
 
507
- div#large_player_controls
508
- div.large-player-controls-container
509
- div#large_player_play_pause {
510
- display: inline-block;
511
- width: 60px;
512
- height: 60px;
513
- cursor: pointer;
514
- vertical-align: middle;
515
- }
516
-
517
- /* jadams, 2024-12-05: add play_pause button as a class */
518
- /*
519
- .amplitude-play-pause {
520
- display: inline-block;
521
- width: 60px;
522
- height: 60px;
523
- cursor: pointer;
524
- vertical-align: middle;
525
- }
526
- */
527
-
528
- div#large_player_controls
529
- div.large-player-controls-container
530
- div#large_player_play_pause:hover {
531
- opacity: .5;
532
- }
533
-
534
- /* jadams, 2024-12-05: add play_pause button as a class */
535
- /* .amplitude-play-pause:hover {
536
- opacity: .5;
537
- } */
538
-
539
- div#large_player_controls
540
- div.large-player-controls-container
541
- div#large_player_play_pause.amplitude-paused {
542
- background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/play.svg") no-repeat;
543
- }
544
-
545
- /* jadams, 2024-12-05: add play_pause button as a class */
546
- /* .amplitude-play-pause {
547
- background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/play.svg") no-repeat;
548
- } */
549
- /* /assets/theme/j1/modules/amplitudejs/icons/player/dark/now-playing.svg*/
550
-
551
- div#large_player_controls
552
- div.large-player-controls-container
553
- div.large-player-skip-forward {
554
- display: inline-block;
555
- cursor: pointer;
556
- height: 24px;
557
- width: 24px;
558
- margin-left: 20px;
559
- vertical-align: middle;
560
- background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/skip-forward.svg") no-repeat;
561
- }
562
-
563
- div#large_player_controls
564
- div.large-player-controls-container
565
- div.large-player-skip-forward:hover {
566
- opacity: .5;
567
- }
568
-
569
- div#large_player_controls
570
- div.large-player-controls-container
571
- div#large_player_play_pause.amplitude-playing {
572
- background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/pause.svg") no-repeat;
573
- }
574
-
575
- div#large_player_controls
576
- div.large-player-controls-container
577
- div#large_player_next {
578
- display: inline-block;
579
- height: 24px;
580
- width: 24px;
581
- cursor: pointer;
582
- vertical-align: middle;
583
- margin-right: 25px;
584
- margin-left: 20px;
585
- background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/next.svg") no-repeat;
586
- }
587
-
588
- div#large_player_controls
589
- div.large-player-controls-container
590
- div#large_player_next:hover {
591
- opacity: .5;
592
- }
593
-
594
- div#large_player_controls
595
- div.large-player-controls-container
596
- div#large_player_repeat {
597
- display: inline-block;
598
- width: 24px;
599
- height: 24px;
600
- cursor: pointer;
601
- vertical-align: middle;
602
- }
603
-
604
- div#large_player_controls
605
- div.large-player-controls-container
606
- div#large_player_repeat:hover {
607
- opacity: .5;
608
- }
609
-
610
- div#large_player_controls
611
- div.large-player-controls-container
612
- div#large_player_repeat.amplitude-repeat-off {
613
- background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/repeat-off.svg") no-repeat;
614
- }
615
-
616
- div#large_player_controls
617
- div.large-player-controls-container
618
- div#large_player_repeat.amplitude-repeat-on {
619
- background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/repeat-on.svg") no-repeat;
620
- }
380
+ div.large-player-volume-container
381
+ input[type=range].amplitude-volume-slider {
382
+ float: left;
383
+ height: 1px;
384
+ margin-top: 10px;
385
+ margin-left: 5px;
386
+ width: calc(100% - 165px);
387
+ background: transparent;
388
+ }
621
389
 
622
390
  /* 3. Layout
623
391
  # ------------------------------------------------------------------------------ */
624
392
 
625
393
  /*
626
- Bootstrap grid breakpoints
394
+ Bootstrap (BS) grid breakpoints
627
395
  SN: 576px Mobile
628
396
  MD: 768px Small Desktop|Tablet
629
- LG: 992px Default Desktop
397
+ LG: 992px Desktop
630
398
  XL: 1200px Large Desktop
631
399
  XXL: 1400px X Large Desktop
632
400
  */
@@ -635,79 +403,141 @@ Bootstrap grid breakpoints
635
403
  /* max-width: -moz-available; Firefox */
636
404
 
637
405
 
638
- /* BS LG|MD|SM
406
+ /* BS LG (Desktop)
639
407
  # --------------------------------------------------------- */
408
+ @media (orientation: portrait) and (max-width: 992px) {
409
+ .large-player-left {
410
+ width: 35vw;
411
+ }
412
+ .large-player-left-top img {
413
+ width: 45vw;
414
+ object-fit: cover;
415
+ }
640
416
 
641
- @media screen and (max-width: 992px),
642
- screen and (max-width: 768px),
643
- screen and (max-width: 576px) {
417
+ input[type="range"].amplitude-volume-slider::-webkit-slider-thumb {
418
+ background-color: var(--ajs-theme-uno--blue-500);
419
+ width: 25px;
420
+ height: 25px;
421
+ }
644
422
 
645
- .large-player {
646
- max-width: -webkit-fill-available; /* Chrome, Safari, Edge */
647
- max-width: -moz-available; /* Firefox */
423
+ input[type="range"].amplitude-volume-slider::-moz-slider-thumb {
424
+ background-color: var(--ajs-theme-uno--blue-500);
425
+ width: 25px;
426
+ height: 25px;
648
427
  }
649
428
 
650
- /* .compact-player-title-list {
651
- max-height: 500px;
652
- } */
429
+ }
653
430
 
654
- div#large_player_left {
655
- max-width: unset;
656
- border: solid 1px;
657
- border-color: var(--ajs-theme-uno--medium-silver);
431
+ /* BS MD (Desktop)
432
+ # --------------------------------------------------------- */
433
+ @media (orientation: portrait) and (max-width: 768px) {
434
+ .large-player-left {
435
+ width: 35vw;
658
436
  }
659
-
660
- div.large-player-container {
661
- position: relative;
662
- flex-direction: column;
663
- max-height: fit-content;
664
- max-width: fit-content;
437
+ .large-player-left-top img {
438
+ width: 45vw;
439
+ object-fit: cover;
665
440
  }
441
+ }
666
442
 
667
- div.large-player-container
668
- div#large_player_right {
669
- width: auto;
670
- min-width: unset;
443
+ /* BS LG (Desktop)
444
+ # --------------------------------------------------------- */
445
+ @media (orientation: landscape) and (max-width: 992px) {
446
+ .large-player-left {
447
+ width: 35vw;
671
448
  }
449
+ .large-player-left-top img {
450
+ width: 95vw;
451
+ object-fit: cover;
452
+ }
453
+ }
672
454
 
673
- .player-left-top img {
674
- height: 700px;
675
- width: -webkit-fill-available; /* Chrome, Safari, Edge */
676
- width: -moz-available; /* Firefox */
455
+ /* BS MD (Desktop)
456
+ # --------------------------------------------------------- */
457
+ @media (orientation: landscape) and (max-width: 768px) {
458
+ .large-player-left {
459
+ width: 35vw;
677
460
  }
461
+ .large-player-left-top img {
462
+ width: 95vw;
463
+ object-fit: cover;
464
+ }
465
+ }
466
+
467
+ /* BS SM (Mobile)
468
+ # --------------------------------------------------------- */
469
+
470
+ @media screen and (max-width: 576px) {
678
471
 
679
- div#large_player_control_container {
472
+ .large-player {
473
+ max-width: -webkit-fill-available;
474
+ max-width: -moz-available;
475
+ }
476
+
477
+ .large-player-container {
478
+ position: relative;
479
+ flex-direction: column;
480
+ max-height: fit-content;
481
+ max-width: fit-content;
482
+ }
483
+ .large-player-control-container {
680
484
  margin-top: 25px;
681
485
  margin-bottom: 25px;
682
486
  }
683
-
684
- div#large_player_right
685
- div.playlist-screen-controls
686
- div.playlist-screen-meta-container
687
- span.song-name {
688
- font-size: 16px;
689
- }
690
-
691
487
  .playlist-screen-controls.large-player {
692
488
  display: none;
693
489
  }
694
-
695
- div#large_player_right {
490
+ .large-player-title-list {
491
+ border-bottom: 1px solid;
492
+ border-color: var(--ajs-theme-uno--medium-silver);
493
+ }
494
+ .large-player-left {
495
+ width: auto;
496
+ max-width: unset;
497
+ border: solid 1px;
498
+ border-color: var(--ajs-theme-uno--medium-silver);
499
+ }
500
+ .large-player-left-top img {
501
+ width: 93vw;
502
+ object-fit: cover;
503
+ }
504
+ .large-player-right {
505
+ width: auto;
506
+ min-width: unset;
696
507
  border-top: 0px;
697
508
  border-right: 1px solid;
698
509
  border-bottom: 1px solid;
699
510
  border-left: 1px solid;
700
511
  border-color: var(--ajs-theme-uno--medium-silver);
701
512
  }
513
+ .amplitude-mute {
514
+ margin-left: 14px;
515
+ }
702
516
 
703
- .large-player-title-list {
704
- border-bottom: 1px solid;
705
- border-color: var(--ajs-theme-uno--medium-silver);
517
+ div.large-player-volume-container
518
+ input[type=range].amplitude-volume-slider {
519
+ appearance: none;
520
+ width: calc(100% - 106px);
706
521
  }
707
522
 
523
+ div.large-player-volume-container
524
+ input[type="range"].amplitude-volume-slider::-webkit-slider-thumb {
525
+ width: 30px;
526
+ height: 30px;
527
+ border-radius: 30px;
528
+ margin-top: -15px;
529
+ background-color: var(--ajs-theme-uno--blue-500);
530
+ }
531
+ div.large-player-volume-container
532
+ input[type="range"].amplitude-volume-slider::-moz-slider-thumb {
533
+ width: 30px;
534
+ height: 30px;
535
+ border-radius: 30px;
536
+ margin-top: -15px;
537
+ background-color: var(--ajs-theme-uno--blue-500);
538
+ }
708
539
  }
709
540
 
710
-
711
541
  /* 4. Pages
712
542
  # ------------------------------------------------------------------------------ */
713
543
 
@@ -721,4 +551,4 @@ screen and (max-width: 576px) {
721
551
  # ------------------------------------------------------------------------------ */
722
552
 
723
553
  /* 8. Animations
724
- # ------------------------------------------------------------------------------ */
554
+ # ------------------------------------------------------------------------------ */