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
@@ -13,121 +13,86 @@
13
13
  # -----------------------------------------------------------------------------
14
14
  */
15
15
 
16
- /* 1. Base
17
- # --------------------------------------------------------- */
18
-
19
- /* Colors
20
- # --------------------------------------------------------- */
21
16
  :root {
22
-
23
- /* Base colors
24
- # ------------------------------------------------------- */
25
- --ajs-theme-uno--blue: #2196F3;
26
- --ajs-theme-uno--blue-50: #E3F2FD;
27
- --ajs-theme-uno--blue-100: #BBDEFB;
28
- --ajs-theme-uno--blue-200: #90CAF9;
29
- --ajs-theme-uno--blue-300: #64B5F6;
30
- --ajs-theme-uno--blue-400: #42A5F5;
31
- --ajs-theme-uno--blue-500: #2196F3;
32
- --ajs-theme-uno--blue-600: #1E88E5;
33
- --ajs-theme-uno--blue-700: #1976D2;
34
- --ajs-theme-uno--blue-800: #1565C0;
35
- --ajs-theme-uno--blue-900: #0D47A1;
36
-
37
- --ajs-theme-uno--gray: #9E9E9E;
38
- --ajs-theme-uno--gray-50: #FAFAFA;
39
- --ajs-theme-uno--gray-100: #F5F5F5;
40
- --ajs-theme-uno--gray-200: #EEEEEE;
41
- --ajs-theme-uno--gray-300: #E0E0E0;
42
- --ajs-theme-uno--gray-400: #BDBDBD;
43
- --ajs-theme-uno--gray-500: #9E9E9E;
44
- --ajs-theme-uno--gray-600: #757575;
45
- --ajs-theme-uno--gray-700: #616161;
46
- --ajs-theme-uno--gray-800: #424242;
47
- --ajs-theme-uno--gray-900: #212121;
48
-
49
- --ajs-theme-uno--blue-gray: #607D8B;
50
- --ajs-theme-uno--blue-gray-50: #ECEFF1;
51
- --ajs-theme-uno--blue-gray-100: #CFD8DC;
52
- --ajs-theme-uno--blue-gray-200: #B0BEC5;
53
- --ajs-theme-uno--blue-gray-300: #90A4AE;
54
- --ajs-theme-uno--blue-gray-400: #78909C;
55
- --ajs-theme-uno--blue-gray-500: #607D8B;
56
- --ajs-theme-uno--blue-gray-600: #546E7A;
57
- --ajs-theme-uno--blue-gray-700: #455A64;
58
- --ajs-theme-uno--blue-gray-800: #37474F;
59
- --ajs-theme-uno--blue-gray-900: #263238;
60
-
61
- --ajs-theme-uno--silver-200: #748295;
62
- --ajs-theme-uno--silver-500: #586372;
63
- --ajs-theme-uno--silver-700: #141920;
64
- --ajs-theme-uno--silver-800: #242b33;
65
-
66
- --ajs-theme-uno--light-silver: #748295;
67
- --ajs-theme-uno--medium-silver: #586372;
68
- --ajs-theme-uno--dark-silver: #141920;
69
- --ajs-theme-uno--darker-silver: #242b33;
70
-
71
- --ajs-theme-uno--white: #FFFFFF;
72
- --ajs-theme-uno--black: #000000;
73
-
74
- /* Additional colors
75
- # ------------------------------------------------------- */
76
- --ajs-theme-uno--lighten-50: rgba(255, 255, 255, 0.05);
77
- --ajs-theme-uno--lighten-100: rgba(255, 255, 255, 0.1);
78
- --ajs-theme-uno--lighten-200: rgba(255, 255, 255, 0.2);
79
- --ajs-theme-uno--lighten-300: rgba(255, 255, 255, 0.3);
80
- --ajs-theme-uno--lighten-400: rgba(255, 255, 255, 0.4);
81
- --ajs-theme-uno--lighten-500: rgba(255, 255, 255, 0.5);
82
- --ajs-theme-uno--lighten-600: rgba(255, 255, 255, 0.6);
83
- --ajs-theme-uno--lighten-700: rgba(255, 255, 255, 0.7);
84
- --ajs-theme-uno--lighten-800: rgba(255, 255, 255, 0.8);
85
- --ajs-theme-uno--lighten-900: rgba(255, 255, 255, 0.9);
86
- --ajs-theme-uno--lighten: rgba(255, 255, 255, 0.5);
87
-
88
- --ajs-theme-uno--darken-50: rgba(0, 0, 0, 0.05);
89
- --ajs-theme-uno--darken-100: rgba(0, 0, 0, 0.1);
90
- --ajs-theme-uno--darken-200: rgba(0, 0, 0, 0.2);
91
- --ajs-theme-uno--darken-300: rgba(0, 0, 0, 0.3);
92
- --ajs-theme-uno--darken-400: rgba(0, 0, 0, 0.4);
93
- --ajs-theme-uno--darken-500: rgba(0, 0, 0, 0.5);
94
- --ajs-theme-uno--darken-600: rgba(0, 0, 0, 0.6);
95
- --ajs-theme-uno--darken-700: rgba(0, 0, 0, 0.7);
96
- --ajs-theme-uno--darken-800: rgba(0, 0, 0, 0.8);
97
- --ajs-theme-uno--darken-900: rgba(0, 0, 0, 0.9);
98
- --ajs-theme-uno--darken: rgba(0, 0, 0, 0.5);
17
+ --ajs-theme-uno--blue: #2196F3;
18
+ --ajs-theme-uno--blue-50: #E3F2FD;
19
+ --ajs-theme-uno--blue-100: #BBDEFB;
20
+ --ajs-theme-uno--blue-200: #90CAF9;
21
+ --ajs-theme-uno--blue-300: #64B5F6;
22
+ --ajs-theme-uno--blue-400: #42A5F5;
23
+ --ajs-theme-uno--blue-500: #2196F3;
24
+ --ajs-theme-uno--blue-600: #1E88E5;
25
+ --ajs-theme-uno--blue-700: #1976D2;
26
+ --ajs-theme-uno--blue-800: #1565C0;
27
+ --ajs-theme-uno--blue-900: #0D47A1;
28
+ --ajs-theme-uno--gray: #9E9E9E;
29
+ --ajs-theme-uno--gray-50: #FAFAFA;
30
+ --ajs-theme-uno--gray-100: #F5F5F5;
31
+ --ajs-theme-uno--gray-200: #EEEEEE;
32
+ --ajs-theme-uno--gray-300: #E0E0E0;
33
+ --ajs-theme-uno--gray-400: #BDBDBD;
34
+ --ajs-theme-uno--gray-500: #9E9E9E;
35
+ --ajs-theme-uno--gray-600: #757575;
36
+ --ajs-theme-uno--gray-700: #616161;
37
+ --ajs-theme-uno--gray-800: #424242;
38
+ --ajs-theme-uno--gray-900: #212121;
39
+ --ajs-theme-uno--blue-gray: #607D8B;
40
+ --ajs-theme-uno--blue-gray-50: #ECEFF1;
41
+ --ajs-theme-uno--blue-gray-100: #CFD8DC;
42
+ --ajs-theme-uno--blue-gray-200: #B0BEC5;
43
+ --ajs-theme-uno--blue-gray-300: #90A4AE;
44
+ --ajs-theme-uno--blue-gray-400: #78909C;
45
+ --ajs-theme-uno--blue-gray-500: #607D8B;
46
+ --ajs-theme-uno--blue-gray-600: #546E7A;
47
+ --ajs-theme-uno--blue-gray-700: #455A64;
48
+ --ajs-theme-uno--blue-gray-800: #37474F;
49
+ --ajs-theme-uno--blue-gray-900: #263238;
50
+ --ajs-theme-uno--silver-200: #748295;
51
+ --ajs-theme-uno--silver-500: #586372;
52
+ --ajs-theme-uno--silver-700: #141920;
53
+ --ajs-theme-uno--silver-800: #242b33;
54
+ --ajs-theme-uno--light-silver: #748295;
55
+ --ajs-theme-uno--medium-silver: #586372;
56
+ --ajs-theme-uno--dark-silver: #141920;
57
+ --ajs-theme-uno--darker-silver: #242b33;
58
+ --ajs-theme-uno--white: #FFFFFF;
59
+ --ajs-theme-uno--black: #000000;
60
+ --ajs-theme-uno--lighten-50: rgba(255, 255, 255, 0.05);
61
+ --ajs-theme-uno--lighten-100: rgba(255, 255, 255, 0.1);
62
+ --ajs-theme-uno--lighten-200: rgba(255, 255, 255, 0.2);
63
+ --ajs-theme-uno--lighten-300: rgba(255, 255, 255, 0.3);
64
+ --ajs-theme-uno--lighten-400: rgba(255, 255, 255, 0.4);
65
+ --ajs-theme-uno--lighten-500: rgba(255, 255, 255, 0.5);
66
+ --ajs-theme-uno--lighten-600: rgba(255, 255, 255, 0.6);
67
+ --ajs-theme-uno--lighten-700: rgba(255, 255, 255, 0.7);
68
+ --ajs-theme-uno--lighten-800: rgba(255, 255, 255, 0.8);
69
+ --ajs-theme-uno--lighten-900: rgba(255, 255, 255, 0.9);
70
+ --ajs-theme-uno--lighten: rgba(255, 255, 255, 0.5);
71
+ --ajs-theme-uno--darken-50: rgba(0, 0, 0, 0.05);
72
+ --ajs-theme-uno--darken-100: rgba(0, 0, 0, 0.1);
73
+ --ajs-theme-uno--darken-200: rgba(0, 0, 0, 0.2);
74
+ --ajs-theme-uno--darken-300: rgba(0, 0, 0, 0.3);
75
+ --ajs-theme-uno--darken-400: rgba(0, 0, 0, 0.4);
76
+ --ajs-theme-uno--darken-500: rgba(0, 0, 0, 0.5);
77
+ --ajs-theme-uno--darken-600: rgba(0, 0, 0, 0.6);
78
+ --ajs-theme-uno--darken-700: rgba(0, 0, 0, 0.7);
79
+ --ajs-theme-uno--darken-800: rgba(0, 0, 0, 0.8);
80
+ --ajs-theme-uno--darken-900: rgba(0, 0, 0, 0.9);
81
+ --ajs-theme-uno--darken: rgba(0, 0, 0, 0.5);
99
82
  }
100
83
 
101
- /* General styles
102
- # ------------------------------------------------------------------------------ */
103
-
104
- /* Links
105
- -------------------------------------------------------------------- */
106
84
  a {
107
85
  border-bottom: unset;
108
86
  }
109
-
110
- /* Cover Images
111
- -------------------------------------------------------------------- */
112
87
  .album-cover-image {
113
88
  display: block;
114
- /* max-height: 500px; */
115
- /* max-width: 500px; */
116
- /* object-fit: cover; */
117
89
  }
118
-
119
- /* Players
120
- -------------------------------------------------------------------- */
121
90
  .amplitude-player {
122
91
  max-width: max-content;
123
92
  }
124
-
125
93
  .audio-player-theme-uno {
126
94
  max-width: max-content;
127
95
  }
128
-
129
- /* Titles and Captions
130
- -------------------------------------------------------------------- */
131
96
  .amplitude-title {
132
97
  display: flex;
133
98
  align-items: center;
@@ -136,62 +101,55 @@ a {
136
101
  line-height: 1.25;
137
102
  font-size: 1.125rem;
138
103
  font-weight: 500;
139
- margin-bottom: .5rem;
104
+ margin-bottom: 0.5rem;
105
+ }
106
+ .amplitude-mute {
107
+ float: left;
108
+ cursor: pointer;
109
+ width: 25px;
110
+ height: 19px;
111
+ margin-left: 40px;
112
+ }
113
+ .amplitude-mute.amplitude-muted {
114
+ background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/mute.svg") no-repeat;
115
+ }
116
+ .amplitude-mute.amplitude-not-muted {
117
+ background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/volume.svg") no-repeat;
118
+ }
119
+ .title-number {
120
+ display: inline-flex;
121
+ opacity: 0.5;
122
+ font-family: "Lato", sans-serif;
123
+ font-size: 16px;
124
+ color: var(--ajs-theme-uno--gray-200);
140
125
  }
141
-
142
-
143
- /* 2. Components
144
- # ------------------------------------------------------------------------------ */
145
-
146
- /* Scroller styles
147
- ------------------------------------------------------------ */
148
126
  .amplitude-scroller::-webkit-scrollbar {
149
- width: 10px;
150
- background-color: var(--ajs-theme-uno--gray-100);
127
+ width: 10px;
128
+ background-color: var(--ajs-theme-uno--gray-100);
151
129
  }
152
-
153
130
  .amplitude-scroller::-webkit-scrollbar-track {
154
131
  border-radius: 0px;
155
- -webkit-box-shadow: inset 0 0 6px var(--ajs-theme-uno--darken-300);
156
- background-color: var(--ajs-theme-uno--gray-100);
132
+ -webkit-box-shadow: inset 0 0 6px var(--ajs-theme-uno--darken-300);
133
+ background-color: var(--ajs-theme-uno--gray-100);
157
134
  }
158
-
159
135
  .amplitude-scroller::-webkit-scrollbar-thumb {
160
136
  border-radius: 0px;
161
- background-color: var(--ajs-theme-uno--blue-gray-500);
162
- background-image: -webkit-gradient(
163
- linear,
164
- 0 0, 0 100%,
165
- color-stop(.5, var(--ajs-theme-uno--lighten-200)),
166
- color-stop(.5, transparent), to(transparent)
167
- );
137
+ background-color: var(--ajs-theme-uno--blue-gray-500);
138
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.5, var(--ajs-theme-uno--lighten-200)), color-stop(0.5, transparent), to(transparent));
168
139
  }
169
-
170
140
  .amplitude-scroller-gradient::-webkit-scrollbar {
171
- width: 10px;
172
- background-color: var(--ajs-theme-uno--gray-100);
141
+ width: 10px;
142
+ background-color: var(--ajs-theme-uno--gray-100);
173
143
  }
174
-
175
144
  .amplitude-scroller-gradient::-webkit-scrollbar-track {
176
145
  border-radius: 0px;
177
- -webkit-box-shadow: inset 0 0 6px var(--ajs-theme-uno--darken-300);
178
- background-color: var(--ajs-theme-uno--gray-100);
146
+ -webkit-box-shadow: inset 0 0 6px var(--ajs-theme-uno--darken-300);
147
+ background-color: var(--ajs-theme-uno--gray-100);
179
148
  }
180
-
181
149
  .amplitude-scroller-gradient::-webkit-scrollbar-thumb {
182
- border-radius: 0px;
183
- background-image: -webkit-gradient(
184
- linear,
185
- left bottom,
186
- left top,
187
- color-stop(0.44, var(--ajs-theme-uno--blue-300)),
188
- color-stop(0.72, var(--ajs-theme-uno--blue)),
189
- color-stop(0.86, var(--ajs-theme-uno--blue-900))
190
- )
150
+ border-radius: 0px;
151
+ background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, var(--ajs-theme-uno--blue-300)), color-stop(0.72, var(--ajs-theme-uno--blue)), color-stop(0.86, var(--ajs-theme-uno--blue-900)));
191
152
  }
192
-
193
- /* time container
194
- # --------------------------------------------------------- */
195
153
  .time-container {
196
154
  height: 40px;
197
155
  padding: 10px 20px 10px 20px;
@@ -200,28 +158,12 @@ a {
200
158
  font-size: 14px;
201
159
  color: var(--ajs-theme-uno--white);
202
160
  }
203
-
204
161
  .time-container span.current-time {
205
162
  float: left;
206
163
  }
207
-
208
164
  .time-container span.duration {
209
165
  float: right;
210
166
  }
211
-
212
- /* control container
213
- # --------------------------------------------------------- */
214
-
215
- /* jadams, 2024-12-05: add play_pause button as a class */
216
- /* .amplitude-play-pause:hover {
217
- opacity: .5;
218
- } */
219
-
220
- /* jadams, 2024-12-05: add play_pause button as a class */
221
- /* .amplitude-play-pause {
222
- background: url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/play.svg") no-repeat;
223
- } */
224
-
225
167
  .playlist-screen-controls {
226
168
  cursor: default;
227
169
  top: 0;
@@ -234,14 +176,10 @@ a {
234
176
  color: var(--ajs-theme-uno--white);
235
177
  background-color: var(--ajs-theme-uno--black);
236
178
  }
237
-
238
- /* meta (data) container
239
- # --------------------------------------------------------- */
240
179
  .meta-container {
241
180
  text-align: center;
242
181
  border-top: 0px !important;
243
182
  }
244
-
245
183
  .meta-container .song-name {
246
184
  display: block;
247
185
  margin: 0 15px 8px 15px;
@@ -252,7 +190,6 @@ a {
252
190
  text-overflow: ellipsis;
253
191
  color: var(--ajs-theme-uno--gray-100);
254
192
  }
255
-
256
193
  .meta-container .audio-artist-album {
257
194
  font-size: 18px;
258
195
  font-weight: bold;
@@ -262,40 +199,23 @@ a {
262
199
  text-overflow: ellipsis;
263
200
  color: var(--ajs-theme-uno--blue-gray-300);
264
201
  }
265
-
266
202
  .meta-container .audio-artist-album span {
267
203
  display: block;
268
204
  }
269
205
 
270
-
271
- /* input elements (range slider)
272
- # --------------------------------------------------------- */
273
206
  input[type=range].amplitude-volume-slider {
274
- -webkit-appearance: none; /* Disable default style for Chrome, Safari, Edge */
275
- -moz-appearance: none; /* Disable default style for Firefox */
276
207
  float: left;
277
208
  height: 1px;
278
209
  margin-top: 10px;
279
210
  margin-left: 5px;
280
- /* width: calc(100% - 100px); */
281
- width: calc(100% - 140px);
211
+ width: calc(100% - 144px);
282
212
  background: transparent;
283
213
  }
284
-
285
- input[type=range].amplitude-volume-slider.compact-player-volume-slider {
286
- width: calc(100% - 53px);
287
- margin-top: -12px;
288
- margin-left: 29px;
289
- }
290
-
291
- /* track|thumb
292
- # --------------------------------------------------------- */
293
214
  input[type=range].amplitude-volume-slider::-webkit-slider-runnable-track {
294
215
  width: 100%;
295
216
  height: 1px;
296
217
  background: var(--ajs-theme-uno--blue-gray-100);
297
218
  }
298
-
299
219
  input[type=range].amplitude-volume-slider::-webkit-slider-thumb {
300
220
  -webkit-appearance: none;
301
221
  cursor: pointer;
@@ -306,21 +226,17 @@ input[type=range].amplitude-volume-slider::-webkit-slider-thumb {
306
226
  border: none;
307
227
  background-color: var(--ajs-theme-uno--blue);
308
228
  }
309
-
310
229
  input[type=range].amplitude-volume-slider::-webkit-slider-thumb:focus {
311
230
  outline: none;
312
231
  }
313
-
314
232
  input[type=range].amplitude-volume-slider::-webkit-slider-thumb:hover {
315
233
  background-color: var(--ajs-theme-uno--blue-700);
316
234
  }
317
-
318
235
  input[type=range].amplitude-volume-slider::-moz-range-track {
319
236
  width: 100%;
320
237
  height: 1px;
321
238
  background-color: var(--ajs-theme-uno--blue-gray-100);
322
239
  }
323
-
324
240
  input[type=range].amplitude-volume-slider::-moz-range-thumb {
325
241
  cursor: pointer;
326
242
  width: 16px;
@@ -330,61 +246,61 @@ input[type=range].amplitude-volume-slider::-moz-range-thumb {
330
246
  border: none;
331
247
  background-color: var(--ajs-theme-uno--blue);
332
248
  }
333
-
334
249
  input[type=range].amplitude-volume-slider::-moz-range-thumb:focus {
335
250
  outline: none;
336
251
  }
337
-
338
252
  input[type=range].amplitude-volume-slider::-moz-range-thumb:hover {
339
253
  background-color: var(--ajs-theme-uno--blue-700);
340
254
  }
255
+ input[type=range].amplitude-volume-slider.compact-player-volume-slider {
256
+ width: calc(100% - 53px);
257
+ margin-top: -12px;
258
+ margin-left: 29px;
259
+ }
341
260
 
342
- /* progress bars
343
- # --------------------------------------------------------- */
344
- progress.mini-player-progress,
345
- progress.compact-player-progress,
261
+ progress.mini-player-progress {
262
+ display: block;
263
+ appearance: none;
264
+ -webkit-appearance: none;
265
+ -moz-appearance: none;
266
+ cursor: pointer;
267
+ width: 100%;
268
+ height: 12px;
269
+ border: none;
270
+ background-color: var(--ajs-theme-uno--silver-500);
271
+ }
272
+ progress.compact-player-progress {
273
+ display: block;
274
+ appearance: none;
275
+ -webkit-appearance: none;
276
+ -moz-appearance: none;
277
+ cursor: pointer;
278
+ width: 100%;
279
+ height: 12px;
280
+ border: none;
281
+ background-color: var(--ajs-theme-uno--silver-500);
282
+ }
346
283
  progress.large-player-progress {
347
284
  display: block;
285
+ appearance: none;
286
+ -webkit-appearance: none;
287
+ -moz-appearance: none;
348
288
  cursor: pointer;
349
289
  width: 100%;
350
- height: 8px;
290
+ height: 12px;
351
291
  border: none;
352
292
  background-color: var(--ajs-theme-uno--silver-500);
353
- -webkit-appearance: none; /* Disable default style for Chrome, Safari, Edge */
354
- -moz-appearance: none; /* Disable default style for Firefox */
355
293
  }
356
-
357
294
  progress::-webkit-progress-value {
358
295
  background-color: var(--ajs-theme-uno--blue);
359
296
  }
360
-
361
297
  progress::-moz-progress-bar {
362
298
  background-color: var(--ajs-theme-uno--blue);
363
299
  }
364
-
365
300
  progress::-ms-fill {
366
301
  background-color: var(--ajs-theme-uno--blue);
367
302
  }
368
303
 
369
-
370
- /* 3. Layout
371
- # ------------------------------------------------------------------------------ */
372
-
373
- /*
374
- Bootstrap grid breakpoints
375
- SN: 576px Mobile
376
- MD: 768px Small Desktop|Tablet
377
- LG: 992px Default Desktop
378
- XL: 1200px Large Desktop
379
- XXL: 1400px X Large Desktop
380
- */
381
-
382
- /* max-width: -webkit-fill-available; Chrome, Safari, Edge */
383
- /* max-width: -moz-available; Firefox */
384
-
385
- /* BS SM (Mobile)
386
- # --------------------------------------------------------- */
387
-
388
304
  @media screen and (max-width: 576px) {
389
305
 
390
306
  input[type=range].amplitude-volume-slider::-webkit-slider-thumb {
@@ -393,21 +309,26 @@ Bootstrap grid breakpoints
393
309
  border-radius: 30px;
394
310
  margin-top: -15px;
395
311
  }
396
-
397
312
  input[type=range].amplitude-volume-slider::-moz-range-thumb {
398
313
  width: 30px;
399
314
  height: 30px;
400
315
  margin-top: -15px;
401
316
  border-radius: 30px;
402
317
  }
403
-
404
- progress.mini-player-progress,
405
- progress.compact-player-progress,
318
+
319
+ progress.mini-player-progress {
320
+ height: 16px;
321
+ }
322
+ progress.compact-player-progress {
323
+ height: 16px;
324
+ }
406
325
  progress.large-player-progress {
407
326
  height: 16px;
408
327
  }
409
328
 
410
- .meta-container .song-name,
329
+ .meta-container .song-name {
330
+ font-size: 16px;
331
+ }
411
332
  .meta-container .audio-artist-album {
412
333
  font-size: 16px;
413
334
  }
@@ -13,4 +13,4 @@
13
13
  # -----------------------------------------------------------------------------
14
14
  */
15
15
 
16
- :root{--ajs-theme-uno--blue:#2196f3;--ajs-theme-uno--blue-50:#e3f2fd;--ajs-theme-uno--blue-100:#bbdefb;--ajs-theme-uno--blue-200:#90caf9;--ajs-theme-uno--blue-300:#64b5f6;--ajs-theme-uno--blue-400:#42a5f5;--ajs-theme-uno--blue-500:#2196f3;--ajs-theme-uno--blue-600:#1e88e5;--ajs-theme-uno--blue-700:#1976d2;--ajs-theme-uno--blue-800:#1565c0;--ajs-theme-uno--blue-900:#0d47a1;--ajs-theme-uno--gray:#9e9e9e;--ajs-theme-uno--gray-50:#fafafa;--ajs-theme-uno--gray-100:#f5f5f5;--ajs-theme-uno--gray-200:#eee;--ajs-theme-uno--gray-300:#e0e0e0;--ajs-theme-uno--gray-400:#bdbdbd;--ajs-theme-uno--gray-500:#9e9e9e;--ajs-theme-uno--gray-600:#757575;--ajs-theme-uno--gray-700:#616161;--ajs-theme-uno--gray-800:#424242;--ajs-theme-uno--gray-900:#212121;--ajs-theme-uno--blue-gray:#607d8b;--ajs-theme-uno--blue-gray-50:#eceff1;--ajs-theme-uno--blue-gray-100:#cfd8dc;--ajs-theme-uno--blue-gray-200:#b0bec5;--ajs-theme-uno--blue-gray-300:#90a4ae;--ajs-theme-uno--blue-gray-400:#78909c;--ajs-theme-uno--blue-gray-500:#607d8b;--ajs-theme-uno--blue-gray-600:#546e7a;--ajs-theme-uno--blue-gray-700:#455a64;--ajs-theme-uno--blue-gray-800:#37474f;--ajs-theme-uno--blue-gray-900:#263238;--ajs-theme-uno--silver-200:#748295;--ajs-theme-uno--silver-500:#586372;--ajs-theme-uno--silver-700:#141920;--ajs-theme-uno--silver-800:#242b33;--ajs-theme-uno--light-silver:#748295;--ajs-theme-uno--medium-silver:#586372;--ajs-theme-uno--dark-silver:#141920;--ajs-theme-uno--darker-silver:#242b33;--ajs-theme-uno--white:#fff;--ajs-theme-uno--black:#000;--ajs-theme-uno--lighten-50:rgba(255,255,255,0.05);--ajs-theme-uno--lighten-100:rgba(255,255,255,0.1);--ajs-theme-uno--lighten-200:rgba(255,255,255,0.2);--ajs-theme-uno--lighten-300:rgba(255,255,255,0.3);--ajs-theme-uno--lighten-400:rgba(255,255,255,0.4);--ajs-theme-uno--lighten-500:rgba(255,255,255,0.5);--ajs-theme-uno--lighten-600:rgba(255,255,255,0.6);--ajs-theme-uno--lighten-700:rgba(255,255,255,0.7);--ajs-theme-uno--lighten-800:rgba(255,255,255,0.8);--ajs-theme-uno--lighten-900:rgba(255,255,255,0.9);--ajs-theme-uno--lighten:rgba(255,255,255,0.5);--ajs-theme-uno--darken-50:rgba(0,0,0,0.05);--ajs-theme-uno--darken-100:rgba(0,0,0,0.1);--ajs-theme-uno--darken-200:rgba(0,0,0,0.2);--ajs-theme-uno--darken-300:rgba(0,0,0,0.3);--ajs-theme-uno--darken-400:rgba(0,0,0,0.4);--ajs-theme-uno--darken-500:rgba(0,0,0,0.5);--ajs-theme-uno--darken-600:rgba(0,0,0,0.6);--ajs-theme-uno--darken-700:rgba(0,0,0,0.7);--ajs-theme-uno--darken-800:rgba(0,0,0,0.8);--ajs-theme-uno--darken-900:rgba(0,0,0,0.9);--ajs-theme-uno--darken:rgba(0,0,0,0.5)}a{border-bottom:unset}.album-cover-image{display:block}.amplitude-player{max-width:max-content}.audio-player-theme-uno{max-width:max-content}.amplitude-title{display:flex;align-items:center;text-rendering:optimizeLegibility;text-align:left;line-height:1.25;font-size:1.125rem;font-weight:500;margin-bottom:.5rem}.amplitude-scroller::-webkit-scrollbar{width:10px;background-color:var(--ajs-theme-uno--gray-100)}.amplitude-scroller::-webkit-scrollbar-track{border-radius:0;-webkit-box-shadow:inset 0 0 6px var(--ajs-theme-uno--darken-300);background-color:var(--ajs-theme-uno--gray-100)}.amplitude-scroller::-webkit-scrollbar-thumb{border-radius:0;background-color:var(--ajs-theme-uno--blue-gray-500);background-image:-webkit-gradient(linear,0 0,0 100%,color-stop(.5,var(--ajs-theme-uno--lighten-200)),color-stop(.5,transparent),to(transparent))}.amplitude-scroller-gradient::-webkit-scrollbar{width:10px;background-color:var(--ajs-theme-uno--gray-100)}.amplitude-scroller-gradient::-webkit-scrollbar-track{border-radius:0;-webkit-box-shadow:inset 0 0 6px var(--ajs-theme-uno--darken-300);background-color:var(--ajs-theme-uno--gray-100)}.amplitude-scroller-gradient::-webkit-scrollbar-thumb{border-radius:0;background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0.44,var(--ajs-theme-uno--blue-300)),color-stop(0.72,var(--ajs-theme-uno--blue)),color-stop(0.86,var(--ajs-theme-uno--blue-900)))}.time-container{height:40px;padding:10px 20px 10px 20px;font-family:"Lato",sans-serif;font-weight:bold;font-size:14px;color:var(--ajs-theme-uno--white)}.time-container span.current-time{float:left}.time-container span.duration{float:right}.playlist-screen-controls{cursor:default;top:0;position:sticky;height:80px;padding:15px;max-width:-webkit-fill-available;max-width:-moz-available;font-family:"Lato",sans-serif;color:var(--ajs-theme-uno--white);background-color:var(--ajs-theme-uno--black)}.meta-container{text-align:center;border-top:0 !important}.meta-container .song-name{display:block;margin:0 15px 8px 15px;font-size:18px;font-family:"Lato",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ajs-theme-uno--gray-100)}.meta-container .audio-artist-album{font-size:18px;font-weight:bold;font-family:"Lato",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ajs-theme-uno--blue-gray-300)}.meta-container .audio-artist-album span{display:block}input[type=range].amplitude-volume-slider{-webkit-appearance:none;-moz-appearance:none;float:left;height:1px;margin-top:10px;margin-left:5px;width:calc(100% - 140px);background:transparent}input[type=range].amplitude-volume-slider.compact-player-volume-slider{width:calc(100% - 53px);margin-top:-12px;margin-left:29px}input[type=range].amplitude-volume-slider::-webkit-slider-runnable-track{width:100%;height:1px;background:var(--ajs-theme-uno--blue-gray-100)}input[type=range].amplitude-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;width:16px;height:16px;border-radius:16px;margin-top:-8px;border:0;background-color:var(--ajs-theme-uno--blue)}input[type=range].amplitude-volume-slider::-webkit-slider-thumb:focus{outline:0}input[type=range].amplitude-volume-slider::-webkit-slider-thumb:hover{background-color:var(--ajs-theme-uno--blue-700)}input[type=range].amplitude-volume-slider::-moz-range-track{width:100%;height:1px;background-color:var(--ajs-theme-uno--blue-gray-100)}input[type=range].amplitude-volume-slider::-moz-range-thumb{cursor:pointer;width:16px;height:16px;margin-top:-8px;border-radius:16px;border:0;background-color:var(--ajs-theme-uno--blue)}input[type=range].amplitude-volume-slider::-moz-range-thumb:focus{outline:0}input[type=range].amplitude-volume-slider::-moz-range-thumb:hover{background-color:var(--ajs-theme-uno--blue-700)}progress.mini-player-progress,progress.compact-player-progress,progress.large-player-progress{display:block;cursor:pointer;width:100%;height:8px;border:0;background-color:var(--ajs-theme-uno--silver-500);-webkit-appearance:none;-moz-appearance:none}progress::-webkit-progress-value{background-color:var(--ajs-theme-uno--blue)}progress::-moz-progress-bar{background-color:var(--ajs-theme-uno--blue)}progress::-ms-fill{background-color:var(--ajs-theme-uno--blue)}@media screen and (max-width:576px){input[type=range].amplitude-volume-slider::-webkit-slider-thumb{width:30px;height:30px;border-radius:30px;margin-top:-15px}input[type=range].amplitude-volume-slider::-moz-range-thumb{width:30px;height:30px;margin-top:-15px;border-radius:30px}progress.mini-player-progress,progress.compact-player-progress,progress.large-player-progress{height:16px}.meta-container .song-name,.meta-container .audio-artist-album{font-size:16px}}
16
+ :root{--ajs-theme-uno--blue:#2196f3;--ajs-theme-uno--blue-50:#e3f2fd;--ajs-theme-uno--blue-100:#bbdefb;--ajs-theme-uno--blue-200:#90caf9;--ajs-theme-uno--blue-300:#64b5f6;--ajs-theme-uno--blue-400:#42a5f5;--ajs-theme-uno--blue-500:#2196f3;--ajs-theme-uno--blue-600:#1e88e5;--ajs-theme-uno--blue-700:#1976d2;--ajs-theme-uno--blue-800:#1565c0;--ajs-theme-uno--blue-900:#0d47a1;--ajs-theme-uno--gray:#9e9e9e;--ajs-theme-uno--gray-50:#fafafa;--ajs-theme-uno--gray-100:#f5f5f5;--ajs-theme-uno--gray-200:#eee;--ajs-theme-uno--gray-300:#e0e0e0;--ajs-theme-uno--gray-400:#bdbdbd;--ajs-theme-uno--gray-500:#9e9e9e;--ajs-theme-uno--gray-600:#757575;--ajs-theme-uno--gray-700:#616161;--ajs-theme-uno--gray-800:#424242;--ajs-theme-uno--gray-900:#212121;--ajs-theme-uno--blue-gray:#607d8b;--ajs-theme-uno--blue-gray-50:#eceff1;--ajs-theme-uno--blue-gray-100:#cfd8dc;--ajs-theme-uno--blue-gray-200:#b0bec5;--ajs-theme-uno--blue-gray-300:#90a4ae;--ajs-theme-uno--blue-gray-400:#78909c;--ajs-theme-uno--blue-gray-500:#607d8b;--ajs-theme-uno--blue-gray-600:#546e7a;--ajs-theme-uno--blue-gray-700:#455a64;--ajs-theme-uno--blue-gray-800:#37474f;--ajs-theme-uno--blue-gray-900:#263238;--ajs-theme-uno--silver-200:#748295;--ajs-theme-uno--silver-500:#586372;--ajs-theme-uno--silver-700:#141920;--ajs-theme-uno--silver-800:#242b33;--ajs-theme-uno--light-silver:#748295;--ajs-theme-uno--medium-silver:#586372;--ajs-theme-uno--dark-silver:#141920;--ajs-theme-uno--darker-silver:#242b33;--ajs-theme-uno--white:#fff;--ajs-theme-uno--black:#000;--ajs-theme-uno--lighten-50:rgba(255,255,255,0.05);--ajs-theme-uno--lighten-100:rgba(255,255,255,0.1);--ajs-theme-uno--lighten-200:rgba(255,255,255,0.2);--ajs-theme-uno--lighten-300:rgba(255,255,255,0.3);--ajs-theme-uno--lighten-400:rgba(255,255,255,0.4);--ajs-theme-uno--lighten-500:rgba(255,255,255,0.5);--ajs-theme-uno--lighten-600:rgba(255,255,255,0.6);--ajs-theme-uno--lighten-700:rgba(255,255,255,0.7);--ajs-theme-uno--lighten-800:rgba(255,255,255,0.8);--ajs-theme-uno--lighten-900:rgba(255,255,255,0.9);--ajs-theme-uno--lighten:rgba(255,255,255,0.5);--ajs-theme-uno--darken-50:rgba(0,0,0,0.05);--ajs-theme-uno--darken-100:rgba(0,0,0,0.1);--ajs-theme-uno--darken-200:rgba(0,0,0,0.2);--ajs-theme-uno--darken-300:rgba(0,0,0,0.3);--ajs-theme-uno--darken-400:rgba(0,0,0,0.4);--ajs-theme-uno--darken-500:rgba(0,0,0,0.5);--ajs-theme-uno--darken-600:rgba(0,0,0,0.6);--ajs-theme-uno--darken-700:rgba(0,0,0,0.7);--ajs-theme-uno--darken-800:rgba(0,0,0,0.8);--ajs-theme-uno--darken-900:rgba(0,0,0,0.9);--ajs-theme-uno--darken:rgba(0,0,0,0.5)}a{border-bottom:unset}.album-cover-image{display:block}.amplitude-player{max-width:max-content}.audio-player-theme-uno{max-width:max-content}.amplitude-title{display:flex;align-items:center;text-rendering:optimizeLegibility;text-align:left;line-height:1.25;font-size:1.125rem;font-weight:500;margin-bottom:.5rem}.amplitude-mute{float:left;cursor:pointer;width:25px;height:19px;margin-left:40px}.amplitude-mute.amplitude-muted{background:url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/mute.svg") no-repeat}.amplitude-mute.amplitude-not-muted{background:url("/assets/theme/j1/modules/amplitudejs/icons/player/dark/volume.svg") no-repeat}.title-number{display:inline-flex;opacity:.5;font-family:"Lato",sans-serif;font-size:16px;color:var(--ajs-theme-uno--gray-200)}.amplitude-scroller::-webkit-scrollbar{width:10px;background-color:var(--ajs-theme-uno--gray-100)}.amplitude-scroller::-webkit-scrollbar-track{border-radius:0;-webkit-box-shadow:inset 0 0 6px var(--ajs-theme-uno--darken-300);background-color:var(--ajs-theme-uno--gray-100)}.amplitude-scroller::-webkit-scrollbar-thumb{border-radius:0;background-color:var(--ajs-theme-uno--blue-gray-500);background-image:-webkit-gradient(linear,0 0,0 100%,color-stop(0.5,var(--ajs-theme-uno--lighten-200)),color-stop(0.5,transparent),to(transparent))}.amplitude-scroller-gradient::-webkit-scrollbar{width:10px;background-color:var(--ajs-theme-uno--gray-100)}.amplitude-scroller-gradient::-webkit-scrollbar-track{border-radius:0;-webkit-box-shadow:inset 0 0 6px var(--ajs-theme-uno--darken-300);background-color:var(--ajs-theme-uno--gray-100)}.amplitude-scroller-gradient::-webkit-scrollbar-thumb{border-radius:0;background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0.44,var(--ajs-theme-uno--blue-300)),color-stop(0.72,var(--ajs-theme-uno--blue)),color-stop(0.86,var(--ajs-theme-uno--blue-900)))}.time-container{height:40px;padding:10px 20px 10px 20px;font-family:"Lato",sans-serif;font-weight:bold;font-size:14px;color:var(--ajs-theme-uno--white)}.time-container span.current-time{float:left}.time-container span.duration{float:right}.playlist-screen-controls{cursor:default;top:0;position:sticky;height:80px;padding:15px;max-width:-webkit-fill-available;max-width:-moz-available;font-family:"Lato",sans-serif;color:var(--ajs-theme-uno--white);background-color:var(--ajs-theme-uno--black)}.meta-container{text-align:center;border-top:0 !important}.meta-container .song-name{display:block;margin:0 15px 8px 15px;font-size:18px;font-family:"Lato",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ajs-theme-uno--gray-100)}.meta-container .audio-artist-album{font-size:18px;font-weight:bold;font-family:"Lato",sans-serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ajs-theme-uno--blue-gray-300)}.meta-container .audio-artist-album span{display:block}input[type=range].amplitude-volume-slider{float:left;height:1px;margin-top:10px;margin-left:5px;width:calc(100% - 144px);background:transparent}input[type=range].amplitude-volume-slider::-webkit-slider-runnable-track{width:100%;height:1px;background:var(--ajs-theme-uno--blue-gray-100)}input[type=range].amplitude-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;width:16px;height:16px;border-radius:16px;margin-top:-8px;border:0;background-color:var(--ajs-theme-uno--blue)}input[type=range].amplitude-volume-slider::-webkit-slider-thumb:focus{outline:0}input[type=range].amplitude-volume-slider::-webkit-slider-thumb:hover{background-color:var(--ajs-theme-uno--blue-700)}input[type=range].amplitude-volume-slider::-moz-range-track{width:100%;height:1px;background-color:var(--ajs-theme-uno--blue-gray-100)}input[type=range].amplitude-volume-slider::-moz-range-thumb{cursor:pointer;width:16px;height:16px;margin-top:-8px;border-radius:16px;border:0;background-color:var(--ajs-theme-uno--blue)}input[type=range].amplitude-volume-slider::-moz-range-thumb:focus{outline:0}input[type=range].amplitude-volume-slider::-moz-range-thumb:hover{background-color:var(--ajs-theme-uno--blue-700)}input[type=range].amplitude-volume-slider.compact-player-volume-slider{width:calc(100% - 53px);margin-top:-12px;margin-left:29px}progress.mini-player-progress{display:block;appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;width:100%;height:12px;border:0;background-color:var(--ajs-theme-uno--silver-500)}progress.compact-player-progress{display:block;appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;width:100%;height:12px;border:0;background-color:var(--ajs-theme-uno--silver-500)}progress.large-player-progress{display:block;appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;width:100%;height:12px;border:0;background-color:var(--ajs-theme-uno--silver-500)}progress::-webkit-progress-value{background-color:var(--ajs-theme-uno--blue)}progress::-moz-progress-bar{background-color:var(--ajs-theme-uno--blue)}progress::-ms-fill{background-color:var(--ajs-theme-uno--blue)}@media screen and (max-width:576px){input[type=range].amplitude-volume-slider::-webkit-slider-thumb{width:30px;height:30px;border-radius:30px;margin-top:-15px}input[type=range].amplitude-volume-slider::-moz-range-thumb{width:30px;height:30px;margin-top:-15px;border-radius:30px}progress.mini-player-progress{height:16px}progress.compact-player-progress{height:16px}progress.large-player-progress{height:16px}.meta-container .song-name{font-size:16px}.meta-container .audio-artist-album{font-size:16px}}