← All changes | public/css/styles.css +95 -54 2.2.3 → 2.4.0 View file →

		@@ -1,15 +1,16 @@
1	1	.player {
2	2	background: #f09f8b;
3		- height: 220px;
	3	+ height: 200px;
4	4	position: relative;
5	5	width: 100%;
6	6	z-index: 2;
7	7	}
	8	+
8	9	.sc_radio .title,
9	10	.sc_radio .artist {
10	11	font-family: verdana;
11		- left: 167px;
	12	+ left: 133px;
12	13	position: absolute;
13	14
14	15	-moz-user-select: none;
15	16	-webkit-user-select: none;
		@@ -14,8 +15,9 @@
14	15	-moz-user-select: none;
15	16	-webkit-user-select: none;
16	17	-ms-user-select: none;
17	18	}
	19	+
18	20	.sc_radio .title {
19	21	color: #ffffff;
20	22	font-size: 14px;
21	23	font-weight: bold;
		@@ -20,14 +22,16 @@
20	22	font-size: 14px;
21	23	font-weight: bold;
22	24	top: 23px;
23	25	}
	26	+
24	27	.sc_radio .artist {
25	28	color: #eeeeee;
26	29	font-size: 12px;
27	30	top: 40px;
28	31	}
29		-.pl {
	32	+
	33	+.sc_radio .pl {
30	34	background: url(../images/playlist.png) no-repeat;
31	35	cursor: pointer;
32	36	height: 40px;
33	37	left: 330px;
		@@ -34,12 +38,14 @@
34	38	position: absolute;
35	39	top: 20px;
36	40	width: 39px;
37	41	}
38		-.pl:hover {
	42	+
	43	+.sc_radio .pl:hover {
39	44	top: 21px;
40	45	}
41		-.cover {
	46	+
	47	+.sc_radio .cover {
42	48	border-radius: 5px 5px 5px 5px;
43	49	height: 94px;
44	50	left: 20px;
45	51	position: absolute;
		@@ -45,9 +51,10 @@
45	51	position: absolute;
46	52	top: 30px;
47	53	width: 94px;
48	54	}
49		-.controls {
	55	+
	56	+.sc_radio .controls {
50	57	cursor: pointer;
51	58	left: 0px;
52	59	position: absolute;
53	60	top: 65px;
		@@ -52,53 +59,64 @@
52	59	position: absolute;
53	60	top: 65px;
54	61	left: 122px;
55	62	}
56		-.controls .play,
57		-.controls .pause {
	63	+
	64	+.sc_radio .controls .play,
	65	+.sc_radio .controls .pause {
58	66	width: 60px;
59	67	height: 60px;
60	68	margin: 0 5px 0px 5px;
61	69	}
62		-.controls .play,
63		-.controls .pause,
64		-.controls .rew,
65		-.controls .fwd,
66		-.controls .stop {
	70	+
	71	+.sc_radio .controls .play,
	72	+.sc_radio .controls .pause,
	73	+.sc_radio .controls .rew,
	74	+.sc_radio .controls .fwd,
	75	+.sc_radio .controls .stop {
67	76	text-indent: -10000px;
68	77	border: none;
69	78	float: left;
70	79	}
71		-.controls .rew,
72		-.controls .fwd,
73		-.controls .stop {
	80	+
	81	+.sc_radio .controls .rew,
	82	+.sc_radio .controls .fwd,
	83	+.sc_radio .controls .stop {
74	84	width: 50px;
75	85	height: 50px;
76	86	margin: 5px 5px 5px 5px;
77	87	}
78		-.controls .play {
	88	+
	89	+.sc_radio .controls .play {
79	90	background: url(../images/play.png) no-repeat;
80	91	}
81		-.controls .pause {
	92	+
	93	+.sc_radio .controls .pause {
82	94	background: url(../images/pause.png) no-repeat;
83	95	display: none;
84	96	}
85		-.controls .rew {
	97	+
	98	+.sc_radio .controls .rew {
86	99	background: url(../images/rewind.png) no-repeat;
87	100	}
88		-.controls .fwd {
	101	+
	102	+.sc_radio .controls .fwd {
89	103	background: url(../images/next.png) no-repeat;
90	104	}
91		-.controls .stop {
	105	+
	106	+.sc_radio .controls .stop {
92	107	background: url(../images/stop.png) no-repeat;
93	108	}
94		-.hidden {
	109	+
	110	+.sc_radio .hidden {
95	111	display: none;
96	112	}
97		-.controls .visible {
	113	+
	114	+.sc_radio .controls .visible {
98	115	display: block;
99	116	}
100		-.volume {
	117	+
	118	+.sc_radio .volume {
101	119	height: 11px;
102	120	left: 10px;
103	121	position: absolute;
104	122	top: 142px;
		@@ -103,12 +121,14 @@
103	121	position: absolute;
104	122	top: 142px;
105	123	width: 357px;
106	124	}
	125	+
107	126	.mute .volume-btn {
108	127	background: url(../images/volume-off.png) no-repeat;
109	128	}
110		-.volume-btn {
	129	+
	130	+.sc_radio .volume-btn {
111	131	background: url(../images/volume-up.png) no-repeat;
112	132	height: 20px;
113	133	width: 20px;
114	134	float: left;
		@@ -114,9 +134,10 @@
114	134	float: left;
115	135	position: relative;
116	136	top: -4px;
117	137	}
118		-.volume-adjust {
	138	+
	139	+.sc_radio .volume-adjust {
119	140	height: 11px;
120	141	position: relative;
121	142	width: 90%;
122	143	background: #fff;
		@@ -121,17 +142,20 @@
121	142	width: 90%;
122	143	background: #fff;
123	144	float: right;
124	145	}
125		-.volume-adjust > div > div {
	146	+
	147	+.volume-adjust>div>div {
126	148	height: 11px;
127	149	background: #151b48;
128	150	}
129		-.progressbar {
	151	+
	152	+.sc_radio .progressbar {
130	153	background-color: #fff;
131	154	cursor: pointer;
132	155	z-index: 1;
133		- right: 6.875em; /* 110 */
	156	+ right: 6.875em;
	157	+ /* 110 */
134	158	height: 15px;
135	159	left: 0px;
136	160	position: absolute;
137	161	width: 90%;
		@@ -137,12 +161,15 @@
137	161	width: 90%;
138	162	top: 170px;
139	163	margin: 0px 5%;
140	164	}
141		-.novolume .progressbar {
142		- right: 4.375em; /* 70 */
	165	+
	166	+.sc_radio .novolume .progressbar {
	167	+ right: 4.375em;
	168	+ /* 70 */
143	169	}
144		-.progressbar div {
	170	+
	171	+.sc_radio .progressbar div {
145	172	width: 0%;
146	173	height: 15px;
147	174	position: absolute;
148	175	left: 0;
		@@ -147,17 +174,20 @@
147	174	position: absolute;
148	175	left: 0;
149	176	top: 0;
150	177	}
151		-.bar-loaded {
	178	+
	179	+.sc_radio .bar-loaded {
152	180	background-color: #f1f1f1;
153	181	z-index: 1;
154	182	}
155		-.bar-played {
	183	+
	184	+.sc_radio .bar-played {
156	185	background: #151b48;
157	186	z-index: 2;
158	187	}
159		-.timeHolder {
	188	+
	189	+.sc_radio .timeHolder {
160	190	color: #ffffff;
161	191	font-size: 14px;
162	192	font-weight: bold;
163	193	bottom: 10px;
		@@ -164,52 +194,63 @@
164	194	position: absolute;
165	195	margin: 0px 5%;
166	196	width: 90%;
167	197	}
168		-.time-current,
169		-.time-duration,
170		-.time-separator {
	198	+
	199	+.sc_radio .time-current,
	200	+.sc_radio .time-duration,
	201	+.sc_radio .time-separator {
171	202	color: #ffffff;
172	203	font-size: 14px;
173	204	font-weight: bold;
174	205	text-align: center;
175	206	}
176		-.volume .ui-slider-handle {
	207	+
	208	+.sc_radio .volume .ui-slider-handle {
177	209	background: url("../images/spr.png") no-repeat scroll -201px -188px rgba(0, 0, 0, 0);
178	210	height: 13px;
179	211	width: 13px;
180	212	}
181		-.playlist {
	213	+
	214	+.sc_radio .playlist {
182	215	display: none;
183	216	}
184		-.playlist li,
185		-.playlist div {
	217	+
	218	+.sc_radio .playlist li,
	219	+.sc_radio .playlist div {
186	220	color: #151b48;
187	221	cursor: pointer;
188	222	margin: 0 0 5px 15px;
189	223	}
190		-.playlist li > a,
191		-.playlist div > a {
	224	+
	225	+.sc_radio .playlist li>a,
	226	+.sc_radio .playlist div>a {
192	227	color: #151b48;
193	228	text-decoration: none;
194	229	}
195		-.playlist li.active,
196		-.playlist div.active {
	230	+
	231	+.sc_radio .playlist li.active,
	232	+.sc_radio .playlist div.active {
197	233	font-weight: bold;
198	234	}
199		-.slick-dots {
	235	+
	236	+.sc_radio .slick-dots {
200	237	bottom: 5px !important;
201	238	}
202		-.slick-dots li button:before {
	239	+
	240	+.sc_radio .slick-dots li button:before {
203	241	font-size: 8px !important;
204	242	}
205		-.stp_custom_circle .plyr .plyr__control:hover,
206		-.stp_custom_circle .plyr .plyr__control:focus,
207		-.stp_custom_circle .plyr .plyr__control:focus-visible {
	243	+
	244	+.sc_radio .stp_custom_circle .plyr .plyr__control:hover,
	245	+.sc_radio .stp_custom_circle .plyr .plyr__control:focus,
	246	+.sc_radio .stp_custom_circle .plyr .plyr__control:focus-visible {
208	247	background: transparent;
209	248	}
210		-.stp_custom_circle .plyr {
	249	+
	250	+.sc_radio .stp_custom_circle .plyr {
211	251	width: fit-content;
212	252	}
213		-.stp_custom_circle .plyr .plyr__controls {
	253	+
	254	+.sc_radio .stp_custom_circle .plyr .plyr__controls {
214	255	background: transparent;
215		-}
	256	+}