j1-template 2024.3.19 → 2024.3.21

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 (113) hide show
  1. checksums.yaml +4 -4
  2. data/_layouts/page.html +1 -0
  3. data/assets/data/amplitude_app.html +192 -163
  4. data/assets/data/swiper_app.2.html +757 -0
  5. data/assets/data/swiper_app.4.html +769 -0
  6. data/assets/data/swiper_app.html +171 -27
  7. data/assets/theme/j1/adapter/js/amplitude.js +1104 -216
  8. data/assets/theme/j1/adapter/js/swiper.js +63 -15
  9. data/assets/theme/j1/core/css/themes/bootstrap/bootstrap.css +111 -101
  10. data/assets/theme/j1/core/css/themes/bootstrap/bootstrap.min.css +1 -1
  11. data/assets/theme/j1/core/css/themes/unodark/bootstrap.css +111 -101
  12. data/assets/theme/j1/core/css/themes/unodark/bootstrap.min.css +1 -1
  13. data/assets/theme/j1/core/css/themes/unolight/bootstrap.css +111 -101
  14. data/assets/theme/j1/core/css/themes/unolight/bootstrap.min.css +1 -1
  15. data/assets/theme/j1/modules/amplitudejs/css/theme/uno/dark/amplitude.css +177 -216
  16. data/assets/theme/j1/modules/amplitudejs/css/theme/uno/dark/amplitude.min.css +1 -1
  17. data/assets/theme/j1/modules/amplitudejs/css/theme/uno/dark/player/compact.css +220 -339
  18. data/assets/theme/j1/modules/amplitudejs/css/theme/uno/dark/player/compact.min.css +1 -2
  19. data/assets/theme/j1/modules/amplitudejs/css/theme/uno/dark/player/large.css +324 -491
  20. data/assets/theme/j1/modules/amplitudejs/css/theme/uno/dark/player/large.min.css +1 -2
  21. data/assets/theme/j1/modules/amplitudejs/css/theme/uno/dark/player/mini.css +70 -60
  22. data/assets/theme/j1/modules/amplitudejs/css/theme/uno/dark/player/mini.min.css +2 -1
  23. data/assets/theme/j1/modules/amplitudejs/js/tech/ytp.js +2074 -843
  24. data/assets/theme/j1/modules/amplitudejs/scss/theme/uno/dark/player/large.scss +439 -264
  25. data/assets/theme/j1/modules/swiperjs/css/modules/layoutBase.css +16 -0
  26. data/assets/theme/j1/modules/swiperjs/css/modules/layoutBase.min.css +16 -0
  27. data/assets/theme/j1/modules/swiperjs/css/modules/layoutExpanding.css +24 -24
  28. data/assets/theme/j1/modules/swiperjs/css/modules/layoutExpanding.min.css +1 -235
  29. data/assets/theme/j1/modules/swiperjs/css/modules/layoutNeighbor.min.css +2 -2
  30. data/assets/theme/j1/modules/swiperjs/css/modules/layoutParallax.css +16 -0
  31. data/assets/theme/j1/modules/swiperjs/css/modules/layoutParallax.min.css +16 -0
  32. data/assets/theme/j1/modules/swiperjs/css/modules/layoutStacked.css +6 -7
  33. data/assets/theme/j1/modules/swiperjs/css/modules/layoutStacked.min.css +1 -82
  34. data/assets/theme/j1/modules/swiperjs/css/modules/layoutThumbs.min.css +2 -29
  35. data/assets/theme/j1/modules/swiperjs/css/theme/uno.css +29 -12
  36. data/assets/theme/j1/modules/swiperjs/css/theme/uno.min.css +1 -1
  37. data/assets/theme/j1/modules/swiperjs/js/modules/layoutBase.js +25 -0
  38. data/assets/theme/j1/modules/swiperjs/js/modules/layoutBase.min.js +25 -0
  39. data/assets/theme/j1/modules/swiperjs/js/modules/layoutExpanding.js +1 -5
  40. data/assets/theme/j1/modules/swiperjs/js/modules/layoutExpanding.min.js +1 -5
  41. data/assets/theme/j1/modules/swiperjs/js/modules/layoutNeighbor.js +12 -14
  42. data/assets/theme/j1/modules/swiperjs/js/modules/layoutNeighbor.min.js +1 -17
  43. data/assets/theme/j1/modules/swiperjs/js/modules/layoutPanorama.js +0 -1
  44. data/assets/theme/j1/modules/swiperjs/js/modules/layoutParallax.js +25 -0
  45. data/assets/theme/j1/modules/swiperjs/js/modules/layoutParallax.min.js +25 -0
  46. data/assets/theme/j1/modules/swiperjs/js/modules/layoutStacked.0.js +114 -0
  47. data/assets/theme/j1/modules/swiperjs/js/modules/layoutStacked.1.js +93 -0
  48. data/assets/theme/j1/modules/swiperjs/js/modules/layoutStacked.js +42 -13
  49. data/assets/theme/j1/modules/swiperjs/js/modules/layoutStacked.min.js +17 -0
  50. data/assets/theme/j1/modules/swiperjs/js/modules/layoutThumbs.js +76 -25
  51. data/assets/theme/j1/modules/swiperjs/js/modules/layoutThumbs.min.js +1 -17
  52. data/assets/theme/j1/modules/swiperjs/js/swiper-bundle.js +9152 -9131
  53. data/assets/theme/j1/modules/swiperjs/js/swiper-bundle.min.js +1 -1
  54. data/lib/j1/version.rb +1 -1
  55. data/lib/starter_web/README.md +5 -5
  56. data/lib/starter_web/_config.yml +1 -1
  57. data/lib/starter_web/_data/modules/amplitude_app.yml +206 -23
  58. data/lib/starter_web/_data/modules/amplitude_playlists.yml +1122 -19
  59. data/lib/starter_web/_data/modules/defaults/{amplitude_app.yml → amplitude.yml} +73 -26
  60. data/lib/starter_web/_data/modules/swiper_app.yml +356 -155
  61. data/lib/starter_web/_data/modules/swiper_playlists.yml +77 -1
  62. data/lib/starter_web/_data/resources.yml +6 -2
  63. data/lib/starter_web/_data/templates/feed.xml +1 -1
  64. data/lib/starter_web/_includes/attributes.asciidoc +5 -4
  65. data/lib/starter_web/_plugins/filter/filters.rb +1 -11
  66. data/lib/starter_web/_plugins/index/lunr.rb +1 -1
  67. data/lib/starter_web/assets/image/icon/bokeh/bokeh-32x32.ico +0 -0
  68. data/lib/starter_web/assets/image/icon/bokeh/bokeh.ico +0 -0
  69. data/lib/starter_web/assets/image/icon/bokeh/logo-160x160.png +0 -0
  70. data/lib/starter_web/assets/image/icon/hyvor-talk/hyvore-talk.ico +0 -0
  71. data/lib/starter_web/assets/image/icon/hyvor-talk/jpg/hyvor-logo.512x512.jpg +0 -0
  72. data/lib/starter_web/assets/image/icon/hyvor-talk/png/hyvor-logo.24x24.jpg +0 -0
  73. data/lib/starter_web/assets/image/icon/hyvor-talk/png/hyvor-logo.24x24.png +0 -0
  74. data/lib/starter_web/assets/image/icon/hyvor-talk/png/hyvor-logo.512x512.png +0 -0
  75. data/lib/starter_web/assets/image/icon/hyvor-talk/scalable/hyvor-logo.svg +81 -0
  76. data/lib/starter_web/assets/image/icon/jupyter/jupyter-32x32.ico +0 -0
  77. data/lib/starter_web/assets/image/icon/jupyter/jupyter.ico +0 -0
  78. data/lib/starter_web/assets/image/icon/jupyter/logo.png +0 -0
  79. data/lib/starter_web/assets/image/icon/mdi/mdi.svg +1 -0
  80. data/lib/starter_web/assets/image/icon/mdi/mdil.svg +1 -0
  81. data/lib/starter_web/assets/image/icon/scalable/facebook.svg +34 -0
  82. data/lib/starter_web/assets/image/icon/scalable/google.svg +35 -0
  83. data/lib/starter_web/assets/image/icon/scalable/ibm.svg +24 -0
  84. data/lib/starter_web/assets/image/icon/scalable/microsoft.svg +42 -0
  85. data/lib/starter_web/assets/image/module/swiper/avatar/avatar-1.png +0 -0
  86. data/lib/starter_web/assets/image/module/swiper/avatar/avatar-2.png +0 -0
  87. data/lib/starter_web/assets/image/module/swiper/avatar/avatar-3.png +0 -0
  88. data/lib/starter_web/assets/image/module/swiper/avatar/avatar-4.png +0 -0
  89. data/lib/starter_web/assets/image/module/swiper/avatar/avatar-5.png +0 -0
  90. data/lib/starter_web/assets/image/module/swiper/simple/test/image/diana_krall.jpg +0 -0
  91. data/lib/starter_web/index.html +3 -3
  92. data/lib/starter_web/package.json +1 -1
  93. data/lib/starter_web/pages/public/learn/where_to_go.adoc +1 -1
  94. data/lib/starter_web/pages/public/tools/previewer/preview_amplitudejs.adoc +69 -36
  95. data/lib/starter_web/pages/public/tools/tester/app_tester_amplitudejs_yt.adoc +65 -18
  96. data/lib/starter_web/pages/public/tools/tester/app_tester_swiper.adoc +87 -0
  97. data/lib/starter_web/pages/public/tools/tester/app_tester_swiperjs.adoc +121 -36
  98. data/lib/starter_web/pages/public/tour/_includes/attributes.asciidoc +3 -3
  99. data/lib/starter_web/pages/public/tour/{play_audio.adoc → audio_data.adoc} +51 -86
  100. data/lib/starter_web/pages/public/tour/{present_images.adoc → image_data.adoc} +4 -5
  101. data/lib/starter_web/pages/public/tour/{play_video.adoc → video_data.adoc} +18 -17
  102. metadata +52 -17
  103. data/assets/theme/j1/modules/swiperjs/js/highlightJS.js +0 -13376
  104. data/assets/theme/j1/modules/swiperjs/js/highlightJS.min.js +0 -1246
  105. data/assets/theme/j1/modules/swiperjs/js/modules/!readme +0 -3
  106. /data/lib/starter_web/assets/image/module/swiper/extended/{poster → stacked}/!info/!readme +0 -0
  107. /data/lib/starter_web/assets/image/module/swiper/extended/{poster → stacked}/image/!readme +0 -0
  108. /data/lib/starter_web/assets/image/module/swiper/extended/{poster → stacked}/image/1.jpg +0 -0
  109. /data/lib/starter_web/assets/image/module/swiper/extended/{poster → stacked}/image/2.jpg +0 -0
  110. /data/lib/starter_web/assets/image/module/swiper/extended/{poster → stacked}/image/3.jpg +0 -0
  111. /data/lib/starter_web/assets/image/module/swiper/extended/{poster → stacked}/image/4.jpg +0 -0
  112. /data/lib/starter_web/assets/image/module/swiper/extended/{poster → stacked}/image/5.jpg +0 -0
  113. /data/lib/starter_web/assets/image/module/swiper/extended/{poster → stacked}/image/6.jpg +0 -0
@@ -14,24 +14,133 @@
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);
29
+ }
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;
27
44
  }
28
45
 
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;
46
+ .large-player-previous {
47
+ display: inline-block;
48
+ user-select: none;
49
+ height: 24px;
50
+ width: 24px;
51
+ cursor: pointer;
52
+ vertical-align: middle;
53
+ margin-right: 20px;
54
+ }
55
+ .large-player-previous:hover {
56
+ opacity: 0.5;
57
+ }
58
+ .large-player-previous:focus:not(:focus-visible) {
59
+ outline: none;
60
+ }
61
+ .large-player-skip-backward {
62
+ display: inline-block;
63
+ user-select: none;
64
+ cursor: pointer;
65
+ height: 24px;
66
+ width: 24px;
67
+ margin-right: 20px;
68
+ vertical-align: middle;
69
+ }
70
+ .large-player-skip-backward:focus:not(:focus-visible) {
71
+ outline: none;
72
+ }
73
+ .large-player-skip-backward:hover {
74
+ opacity: 0.5;
75
+ }
76
+ .large-player-play-pause {
77
+ display: inline-block;
78
+ user-select: none;
79
+ width: 60px;
80
+ height: 60px;
81
+ cursor: pointer;
82
+ vertical-align: middle;
83
+ }
84
+ .large-player-play-pause:hover {
85
+ opacity: 0.5;
86
+ }
87
+ .large-player-play-pause:focus:not(:focus-visible) {
88
+ outline: none;
89
+ }
90
+
91
+ .large-player-play-pause.amplitude-paused {
92
+ background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/play.svg") no-repeat;
93
+ }
94
+ .large-player-play-pause.amplitude-playing {
95
+ background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/pause.svg") no-repeat;
96
+ }
97
+
98
+ .large-player-skip-forward {
99
+ display: inline-block;
100
+ user-select: none;
101
+ cursor: pointer;
102
+ height: 24px;
103
+ width: 24px;
104
+ margin-left: 20px;
105
+ vertical-align: middle;
106
+ }
107
+ .large-player-skip-forward:focus:not(:focus-visible) {
108
+ outline: none;
109
+ }
110
+ .large-player-skip-forward:hover {
111
+ opacity: 0.5;
112
+ }
113
+
114
+ .large-player-next {
115
+ display: inline-block;
116
+ user-select: none;
117
+ height: 24px;
118
+ width: 24px;
119
+ cursor: pointer;
120
+ vertical-align: middle;
121
+ margin-right: 25px;
122
+ margin-left: 20px;
123
+ }
124
+ .large-player-next:focus:not(:focus-visible) {
125
+ outline: none;
126
+ }
127
+ .large-player-next:hover {
128
+ opacity: 0.5;
129
+ }
130
+
131
+ .amplitude-repeat {
132
+ display: inline-block;
133
+ user-select: none;
134
+ width: 24px;
135
+ height: 24px;
136
+ cursor: pointer;
137
+ vertical-align: middle;
138
+ }
139
+ .amplitude-repeat:focus:not(:focus-visible) {
140
+ outline: none;
141
+ }
142
+ .amplitude-repeat:hover {
143
+ opacity: 0.5;
35
144
  }
36
145
 
37
146
  .large-player-playlist-header {
@@ -44,22 +153,26 @@
44
153
  color: var(--ajs-theme-uno--white);
45
154
  background-color: var(--ajs-theme-uno--dark-silver);
46
155
  }
47
-
48
156
  .large-player-title-list {
49
157
  display: block;
50
- max-height: 600px;
158
+ max-height: 540px;
51
159
  overflow-y: scroll;
52
160
  }
53
-
161
+ .large-player-control-container {
162
+ margin-top: 25px;
163
+ margin-bottom: 25px;
164
+ }
165
+ .large-player-volume-container {
166
+ margin-top: 20px;
167
+ margin-bottom: 20px;
168
+ }
54
169
  .meta-container.large-player {
55
170
  height: 120px;
56
171
  }
57
-
58
172
  .playlist-screen-meta-container {
59
173
  width: calc(100% - 80px);
60
174
  float: left;
61
175
  }
62
-
63
176
  .playlist-screen-controls {
64
177
  cursor: default;
65
178
  height: 100px;
@@ -70,93 +183,74 @@
70
183
  color: var(--ajs-theme-uno--white);
71
184
  background-color: var(--ajs-theme-uno--black);
72
185
  }
73
-
74
- /* 2. Components
75
- # ------------------------------------------------------------------------------ */
76
-
77
- div#large_player_left {
186
+ .large-player-left {
78
187
  display: flex;
79
188
  flex: 1;
80
189
  flex-direction: column;
81
- /* jadams, 2014-11-07: width (overall) DISABLED on the left */
82
- /* width: 50%; */
190
+ width: 50vw;
83
191
  max-width: fit-content;
84
192
  border: solid 1px;
85
193
  border-color: var(--ajs-theme-uno--medium-silver);
86
194
  background-color: var(--ajs-theme-uno--darker-silver) !important;
87
195
  }
88
-
89
- div#large_player_left
90
- img.album-art {
91
- width: 100%;
196
+ .large-player-left-top img {
197
+ width: 500px;
198
+ height: 500px;
199
+ object-fit: cover;
92
200
  }
93
-
94
- div#large_player_left
95
- div#player-left-bottom {
96
- flex: 1;
97
- background-color: var(--ajs-theme-uno--blue-gray-900);
201
+ .large-player-left-middle {
202
+ margin-top: 10px;
203
+ margin-bottom: 20px;
204
+ margin-left: 40px;
98
205
  }
99
-
100
- div#large_player_right {
206
+ .large-player-left-bottom {
207
+ background-color: var(--ajs-theme-uno--black);
208
+ }
209
+ .large-player-right {
101
210
  display: flex;
102
211
  flex: 1;
103
212
  flex-direction: column;
104
213
  flex-grow: 1;
105
- width: 50%; /* make flex colums same in width (overall) */
106
- min-width: 500px;
214
+ width: 50vw;
107
215
  border-top: solid 1px;
108
216
  border-right: solid 1px;
109
217
  border-bottom: solid 1px;
110
218
  border-color: var(--ajs-theme-uno--medium-silver);
111
219
  background-color: var(--ajs-theme-uno--darker-silver) !important;
112
220
  }
113
-
114
- div#large_player_right
115
- div.song.amplitude-active-song-container:hover
116
- div.play-button-container {
221
+ .amplitude-song-container img.now-playing {
117
222
  display: none;
118
223
  }
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);
224
+ .amplitude-active-song-container {
225
+ background-color: var(--ajs-theme-uno--medium-silver) !important;
129
226
  }
130
-
131
- div#large_player_right
132
- div.song.amplitude-active-song-container
133
- div.song-number-now-playing
134
- img.now-playing {
227
+ .amplitude-active-song-container img.now-playing {
135
228
  display: block;
136
229
  margin-top: 5px;
230
+ margin-right: 8px;
137
231
  margin-left: 4px;
138
232
  height: 16px;
139
233
  width: 16px;
140
234
  }
141
235
 
142
- div#large_player_right
143
- div.song {
236
+
237
+ .amplitude-song {
144
238
  cursor: pointer;
145
239
  padding: 12px;
146
240
  background-color: var(--ajs-theme-uno--darker-silver);
147
241
  }
242
+ .amplitude-song:after {
243
+ content: "";
244
+ display: table;
245
+ clear: both;
246
+ }
148
247
 
149
- div#large_player_right
150
- div.song
151
- div.audio-meta-data {
248
+
249
+ .audio-meta-data {
152
250
  float: left;
153
251
  width: calc(100% - 145px);
154
252
  }
155
-
156
- div#large_player_right
157
- div.song
158
- div.audio-meta-data
159
- span.audio-artist {
253
+ .audio-artist {
160
254
  font-size: 16px;
161
255
  line-height: 18px;
162
256
  white-space: nowrap;
@@ -164,11 +258,7 @@ span.audio-artist {
164
258
  text-overflow: ellipsis;
165
259
  color: var(--ajs-theme-uno--gray-300);
166
260
  }
167
-
168
- div#large_player_right
169
- div.song
170
- div.audio-meta-data
171
- span.audio-title {
261
+ .audio-title {
172
262
  display: block;
173
263
  width: calc(100% - 25px);
174
264
  font-family: "Lato", sans-serif;
@@ -179,68 +269,21 @@ span.audio-title {
179
269
  text-overflow: ellipsis;
180
270
  color: var(--ajs-theme-uno--blue);
181
271
  }
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 {
272
+ .song-number-now-playing {
217
273
  float: left;
218
274
  width: 40px;
219
275
  height: 20px;
220
276
  margin-top: 8px;
221
277
  margin-right: 12px;
222
278
  }
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;
279
+ .audio-duration {
280
+ float: right;
281
+ /* margin-left: 103px; */
235
282
  font-family: "Lato", sans-serif;
236
283
  font-size: 16px;
237
284
  color: var(--ajs-theme-uno--gray-300);
238
285
  }
239
-
240
- div#large_player_right
241
- div.playlist-screen-controls
242
- div.playlist-screen-meta-container
243
- span.song-name {
286
+ .song-name {
244
287
  line-height: 24px;
245
288
  white-space: nowrap;
246
289
  overflow: hidden;
@@ -250,52 +293,37 @@ span.song-name {
250
293
  color: var(--ajs-theme-uno--white);
251
294
  }
252
295
 
253
- div#large_player_right
254
- div.playlist-screen-controls
296
+ div.screen-controls-large-player
255
297
  div.playlist-screen-meta-container
256
298
  span.audio-rating {
257
299
  display: flex;
258
- align-items: center;
259
- float: right;
260
- margin-top: 4px;
261
- 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
300
  float: right;
272
- margin-right: -80px;
301
+ margin-top: 10px;
302
+ /* margin-right: -48px; */
273
303
  }
274
304
 
275
- div#large_player_right
276
- div.playlist-screen-controls
277
- div.playlist-screen-meta-container
278
- div.song-artist-album {
305
+ div.playlist-screen-meta-container .song-artist-album {
279
306
  opacity: 0.5;
280
307
  font-family: "Lato", sans-serif;
281
308
  font-size: 16px;
282
309
  line-height: 18px;
283
310
  color: var(--ajs-theme-uno--white);
284
311
  }
285
-
286
- div#large_player_right
287
- div.playlist-screen-controls
288
- div.list-controls {
312
+ .audio-rating {
313
+ float: left;
314
+ padding-left: 65px;
315
+ }
316
+ .amplitude-audio-info {
317
+ float: right;
318
+ margin-right: -80px;
319
+ }
320
+ div.playlist-screen-controls div.list-controls {
289
321
  float: right;
290
322
  width: 90px;
291
- margin-top: 50px;
323
+ margin-top: 45px;
292
324
  margin-right: -12px;
293
325
  }
294
-
295
- div#large_player_right
296
- div.playlist-screen-controls
297
- div.list-controls
298
- div.list-previous {
326
+ div.playlist-screen-controls div.list-controls div.list-previous {
299
327
  float: left;
300
328
  cursor: pointer;
301
329
  width: 15px;
@@ -304,329 +332,55 @@ div.list-previous {
304
332
  margin-top: 4px;
305
333
  background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/previous.svg") no-repeat;
306
334
  }
307
-
308
- div#large_player_right
309
- div.playlist-screen-controls
310
- div.list-controls
311
- div.list-previous:hover {
312
- opacity: .5;
335
+ div.playlist-screen-controls div.list-controls div.list-previous:hover {
336
+ opacity: 0.5;
313
337
  }
314
-
315
- div#large_player_right
316
- div.playlist-screen-controls
317
- div.list-controls
318
- div.list-play-pause.amplitude-paused {
338
+ div.playlist-screen-controls div.list-controls div.list-play-pause.amplitude-paused {
319
339
  background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/play.svg") no-repeat;
320
340
  }
321
-
322
- div#large_player_right
323
- div.playlist-screen-controls
324
- div.list-controls
325
- div.list-play-pause {
341
+ div.playlist-screen-controls div.list-controls div.list-play-pause {
326
342
  float: left;
327
343
  cursor: pointer;
328
344
  width: 17px;
329
345
  height: 24px;
330
346
  }
331
-
332
- div#large_player_right
333
- div.playlist-screen-controls
334
- div.list-controls
335
- div.list-play-pause:hover {
336
- opacity: .5;
347
+ div.playlist-screen-controls div.list-controls div.list-play-pause:hover {
348
+ opacity: 0.5;
337
349
  }
338
-
339
- div#large_player_right
340
- div.playlist-screen-controls
341
- div.list-controls
342
- div.list-play-pause.amplitude-playing {
350
+ div.playlist-screen-controls div.list-controls div.list-play-pause.amplitude-playing {
343
351
  background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/pause.svg") no-repeat;
344
352
  }
345
-
346
- div#large_player_right
347
- div.playlist-screen-controls
348
- div.list-controls
349
- div.list-next {
353
+ div.playlist-screen-controls div.list-controls div.list-next {
350
354
  float: left;
351
355
  cursor: pointer;
352
356
  width: 15px;
353
357
  height: 17px;
354
358
  margin-left: 15px;
355
359
  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;
481
- }
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;
360
+ background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/small/next.svg") no-repeat;
499
361
  }
500
-
501
- div#large_player_controls
502
- div.large-player-controls-container
503
- div.large-player-skip-backward:hover {
362
+ div.playlist-screen-controls div.list-controls div.list-next:hover {
504
363
  opacity: 0.5;
505
364
  }
506
365
 
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
- }
366
+ div.large-player-volume-container
367
+ input[type=range].amplitude-volume-slider {
368
+ float: left;
369
+ height: 1px;
370
+ margin-top: 10px;
371
+ margin-left: 5px;
372
+ width: calc(100% - 86px);
373
+ background: transparent;
374
+ }
621
375
 
622
376
  /* 3. Layout
623
377
  # ------------------------------------------------------------------------------ */
624
378
 
625
379
  /*
626
- Bootstrap grid breakpoints
380
+ Bootstrap (BS) grid breakpoints
627
381
  SN: 576px Mobile
628
382
  MD: 768px Small Desktop|Tablet
629
- LG: 992px Default Desktop
383
+ LG: 992px Desktop
630
384
  XL: 1200px Large Desktop
631
385
  XXL: 1400px X Large Desktop
632
386
  */
@@ -635,64 +389,122 @@ Bootstrap grid breakpoints
635
389
  /* max-width: -moz-available; Firefox */
636
390
 
637
391
 
638
- /* BS LG|MD|SM
392
+ /* BS LG (Desktop)
639
393
  # --------------------------------------------------------- */
394
+ /* @media (orientation: portrait) and (max-width: 992px) { */
395
+ @media (orientation: portrait) and (max-width: 1024px) {
396
+ .large-player-left {
397
+ width: 35vw;
398
+ }
399
+ .large-player-left-top img {
400
+ width: 45vw;
401
+ object-fit: cover;
402
+ }
403
+ .playlist-screen-controls {
404
+ display: none;
405
+ }
640
406
 
641
- @media screen and (max-width: 992px),
642
- screen and (max-width: 768px),
643
- screen and (max-width: 576px) {
407
+ input[type="range"].amplitude-volume-slider::-webkit-slider-thumb {
408
+ background-color: var(--ajs-theme-uno--blue-500);
409
+ width: 25px;
410
+ height: 25px;
411
+ }
412
+ input[type="range"].amplitude-volume-slider::-moz-slider-thumb {
413
+ background-color: var(--ajs-theme-uno--blue-500);
414
+ width: 25px;
415
+ height: 25px;
416
+ }
644
417
 
645
- .large-player {
646
- max-width: -webkit-fill-available; /* Chrome, Safari, Edge */
647
- max-width: -moz-available; /* Firefox */
418
+ }
419
+
420
+ /* BS MD (Desktop)
421
+ # --------------------------------------------------------- */
422
+ @media (orientation: portrait) and (max-width: 768px) {
423
+ .large-player-left {
424
+ width: 35vw;
648
425
  }
426
+ .playlist-screen-controls {
427
+ display: none;
428
+ }
429
+ .large-player-left-top img {
430
+ width: 45vw;
431
+ object-fit: cover;
432
+ }
433
+ }
649
434
 
650
- /* .compact-player-title-list {
651
- max-height: 500px;
435
+ /* BS LG (Desktop)
436
+ # --------------------------------------------------------- */
437
+ /* @media (orientation: landscape) and (max-width: 992px) { */
438
+ @media (orientation: landscape) and (max-width: 1024px) {
439
+
440
+ /* .large-player-left {
441
+ width: 35vw;
442
+ } */
443
+ /* .large-player-left-top img {
444
+ width: 95vw;
445
+ object-fit: cover;
652
446
  } */
653
447
 
654
- div#large_player_left {
655
- max-width: unset;
656
- border: solid 1px;
657
- border-color: var(--ajs-theme-uno--medium-silver);
448
+ .playlist-screen-controls {
449
+ display: none;
450
+ }
451
+ }
452
+
453
+ /* BS MD (Desktop)
454
+ # --------------------------------------------------------- */
455
+ @media (orientation: landscape) and (max-width: 768px) {
456
+ .large-player-left {
457
+ width: 35vw;
458
+ }
459
+ .large-player-left-top img {
460
+ width: 95vw;
461
+ object-fit: cover;
658
462
  }
463
+ .playlist-screen-controls {
464
+ display: none;
465
+ }
466
+ }
467
+
468
+ /* BS SM (Mobile)
469
+ # --------------------------------------------------------- */
659
470
 
660
- div.large-player-container {
471
+ @media screen and (max-width: 576px) {
472
+
473
+ .large-player {
474
+ max-width: -webkit-fill-available;
475
+ max-width: -moz-available;
476
+ }
477
+
478
+ .large-player-container {
661
479
  position: relative;
662
480
  flex-direction: column;
663
481
  max-height: fit-content;
664
482
  max-width: fit-content;
665
483
  }
666
-
667
- div.large-player-container
668
- div#large_player_right {
669
- width: auto;
670
- min-width: unset;
671
- }
672
-
673
- .player-left-top img {
674
- height: 700px;
675
- width: -webkit-fill-available; /* Chrome, Safari, Edge */
676
- width: -moz-available; /* Firefox */
677
- }
678
-
679
- div#large_player_control_container {
484
+ .large-player-control-container {
680
485
  margin-top: 25px;
681
486
  margin-bottom: 25px;
682
487
  }
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
488
  .playlist-screen-controls.large-player {
692
489
  display: none;
693
490
  }
694
-
695
- div#large_player_right {
491
+ .large-player-title-list {
492
+ border-bottom: 1px solid;
493
+ border-color: var(--ajs-theme-uno--medium-silver);
494
+ }
495
+ .large-player-left {
496
+ width: auto;
497
+ max-width: unset;
498
+ border: solid 1px;
499
+ border-color: var(--ajs-theme-uno--medium-silver);
500
+ }
501
+ .large-player-left-top img {
502
+ width: 93vw;
503
+ object-fit: cover;
504
+ }
505
+ .large-player-right {
506
+ width: auto;
507
+ min-width: unset;
696
508
  border-top: 0px;
697
509
  border-right: 1px solid;
698
510
  border-bottom: 1px solid;
@@ -700,13 +512,34 @@ screen and (max-width: 576px) {
700
512
  border-color: var(--ajs-theme-uno--medium-silver);
701
513
  }
702
514
 
703
- .large-player-title-list {
704
- border-bottom: 1px solid;
705
- border-color: var(--ajs-theme-uno--medium-silver);
515
+ div.large-player-volume-container
516
+ .large-player-amplitude-mute {
517
+ margin-left: 4px;
706
518
  }
707
519
 
708
- }
520
+ div.large-player-volume-container
521
+ input[type=range].amplitude-volume-slider {
522
+ appearance: none;
523
+ width: calc(100% - 106px);
524
+ }
709
525
 
526
+ div.large-player-volume-container
527
+ input[type="range"].amplitude-volume-slider::-webkit-slider-thumb {
528
+ width: 30px;
529
+ height: 30px;
530
+ border-radius: 30px;
531
+ margin-top: -15px;
532
+ background-color: var(--ajs-theme-uno--blue-500);
533
+ }
534
+ div.large-player-volume-container
535
+ input[type="range"].amplitude-volume-slider::-moz-slider-thumb {
536
+ width: 30px;
537
+ height: 30px;
538
+ border-radius: 30px;
539
+ margin-top: -15px;
540
+ background-color: var(--ajs-theme-uno--blue-500);
541
+ }
542
+ }
710
543
 
711
544
  /* 4. Pages
712
545
  # ------------------------------------------------------------------------------ */
@@ -721,4 +554,4 @@ screen and (max-width: 576px) {
721
554
  # ------------------------------------------------------------------------------ */
722
555
 
723
556
  /* 8. Animations
724
- # ------------------------------------------------------------------------------ */
557
+ # ------------------------------------------------------------------------------ */