Skip to content

Commit 4058235

Browse files
mizokmizok
committed
fix a bunch of hover prob, and some autoplay issue
1 parent dbb9188 commit 4058235

15 files changed

+177
-82
lines changed

‎package-lock.json

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@
6363
"axios": "^1.1.3",
6464
"es6-promise": "^4.2.8",
6565
"gsap": "^3.11.3",
66+
"is-mobile": "^3.1.1",
6667
"lodash": "^4.17.21",
6768
"socket.io-client": "^4.5.2",
6869
"soundcloud-key-fetch": "^1.0.13",

‎src/scss/components/_author.scss

Lines changed: 18 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,39 @@
1-
.author{
1+
.author {
22
display: flex;
33
align-items: center;
4-
color:transparentize($white,0.5);
4+
color: transparentize($white, 0.5);
55
padding: 10px 20PX;
66
opacity: 0.75;
7-
&__former{
8-
flex:1;
7+
8+
&__former {
9+
flex: 1;
910
}
10-
&__latter{
11-
flex:none;
11+
12+
&__latter {
13+
flex: none;
1214
display: flex;
1315
align-items: center;
1416
}
1517

16-
&__link{
18+
&__link {
1719
width: 20px;
1820
height: 20px;
1921
opacity: 0.5;
20-
transition:opacity 500ms;
21-
img{
22+
transition: opacity 500ms;
23+
24+
img {
2225
width: 100%;
2326
}
2427
}
2528

26-
&__link:hover{
27-
opacity: 1;
29+
@include hasHover() {
30+
&__link:hover {
31+
opacity: 1;
32+
}
2833
}
2934

30-
&__link+&__link{
35+
36+
&__link+&__link {
3137
margin-left: 10px;
3238
}
3339
}

‎src/scss/components/_chat-block.scss

Lines changed: 45 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -82,8 +82,10 @@
8282
@include toggler();
8383
}
8484

85-
&__toggler:hover::before {
86-
opacity: 0.75;
85+
@include hasHover() {
86+
&__toggler:hover::before {
87+
opacity: 0.75;
88+
}
8789
}
8890

8991
&__rotation-lock {
@@ -184,8 +186,7 @@
184186
}
185187

186188

187-
&__rotation-lock--active,
188-
&__rotation-lock:hover {
189+
&__rotation-lock--active {
189190
background-color: gray;
190191
opacity: 0.5;
191192

@@ -197,14 +198,35 @@
197198
transform: rotate(-180deg)
198199
}
199200

200-
&:hover {
201-
opacity: 1;
201+
}
202+
203+
@include hasHover() {
204+
&__rotation-lock:hover {
205+
background-color: gray;
206+
opacity: 0.5;
207+
208+
&:before {
209+
opacity: 0;
210+
}
211+
212+
&:after {
213+
transform: rotate(-180deg)
214+
}
215+
}
216+
}
217+
218+
@include hasHover() {
219+
&__search-music-button:hover {
220+
221+
>*,
222+
&:before {
223+
opacity: 0.75;
224+
}
202225
}
203226
}
204227

205228

206-
&__search-music-button--active,
207-
&__search-music-button:hover {
229+
&__search-music-button--active {
208230

209231
>*,
210232
&:before {
@@ -276,10 +298,13 @@
276298
}
277299
}
278300

279-
&__avatar:hover {
280-
opacity: 0.75;
301+
@include hasHover() {
302+
&__avatar:hover {
303+
opacity: 0.75;
304+
}
281305
}
282306

307+
283308
&__avatar+&__name {
284309
margin-left: 20px;
285310
}
@@ -316,9 +341,12 @@
316341
margin-left: 15px;
317342
}
318343

319-
&:hover {
320-
opacity: 0.75;
344+
@include hasHover() {
345+
&:hover {
346+
opacity: 0.75;
347+
}
321348
}
349+
322350
}
323351
}
324352

@@ -411,9 +439,12 @@
411439
transition: opacity 500ms;
412440
word-break: break-all;
413441

414-
&:hover {
415-
opacity: 1;
442+
@include hasHover() {
443+
&:hover {
444+
opacity: 1;
445+
}
416446
}
447+
417448
}
418449

419450
&--cube &__bubble {

‎src/scss/components/_clock.scss

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
.clock {
2-
&:hover {
3-
opacity: 0.75;
2+
@include hasHover() {
3+
&:hover {
4+
opacity: 0.75;
5+
}
46
}
57

8+
69
* {
710
font-family: 'Silkscreen';
811
color: $white;

‎src/scss/components/_curtain-call.scss

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,12 @@
3636
opacity: 0.5;
3737
transition: opacity 500ms;
3838

39-
&:hover {
40-
opacity: 0.75;
39+
@include hasHover() {
40+
&:hover {
41+
opacity: 0.75;
42+
}
4143
}
44+
4245
}
4346

4447
&__img {

‎src/scss/components/_input-block.scss

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,8 +58,11 @@ $input-text-active: #BFD2FF;
5858
cursor: pointer;
5959
font-size: 0;
6060

61-
&:hover {
62-
opacity: 0.75;
61+
@include hasHover() {
62+
&:hover {
63+
opacity: 0.75;
64+
}
6365
}
66+
6467
}
6568
}

‎src/scss/components/_login-guide.scss

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,12 @@
2626
opacity: 0.5;
2727
cursor: pointer;
2828

29-
&:hover {
30-
opacity: 0.75;
29+
@include hasHover() {
30+
&:hover {
31+
opacity: 0.75;
32+
}
3133
}
34+
3235
}
3336

3437
}

‎src/scss/components/_login.scss

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -54,9 +54,11 @@
5454
cursor: pointer;
5555
font-family: 'Silkscreen';
5656

57-
&:hover {
58-
box-shadow: 10px 10px 30px 0px rgba(0, 0, 0, 0.75);
57+
@include hasHover() {
58+
&:hover {
59+
box-shadow: 10px 10px 30px 0px rgba(0, 0, 0, 0.75);
5960

61+
}
6062
}
6163

6264
}

‎src/scss/components/_modal.scss

Lines changed: 36 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -67,17 +67,22 @@ xpopup
6767
border-radius: 0 0 0 .25em;
6868
}
6969

70-
li:first-child a:hover {
71-
background-color: #656565;
70+
@include hasHover() {
71+
li:first-child a:hover {
72+
background-color: #656565;
73+
}
7274
}
7375

76+
7477
li:last-child a {
7578
background: #9b9b9b;
7679
border-radius: 0 0 .25em 0;
7780
}
7881

79-
li:last-child a:hover {
80-
background-color: #8d8d8d;
82+
@include hasHover() {
83+
li:last-child a:hover {
84+
background-color: #8d8d8d;
85+
}
8186
}
8287
}
8388
}
@@ -301,8 +306,10 @@ xpopup
301306
}
302307
}
303308

304-
&:hover &__img {
305-
opacity: 1;
309+
@include hasHover() {
310+
&:hover &__img {
311+
opacity: 1;
312+
}
306313
}
307314

308315
&__head {
@@ -346,8 +353,10 @@ xpopup
346353
cursor: pointer;
347354
}
348355

349-
&:hover &__play {
350-
opacity: 0.5;
356+
@include hasHover() {
357+
&:hover &__play {
358+
opacity: 0.5;
359+
}
351360
}
352361

353362

@@ -374,20 +383,23 @@ xpopup
374383
}
375384
}
376385

377-
378-
&:hover &__title {
379-
opacity: 0.75;
386+
@include hasHover() {
387+
&:hover &__title {
388+
opacity: 0.75;
389+
}
380390
}
381391

382-
&__title:hover {
383-
@include rwd($screen-pad-portrait) {
384-
span {
385-
text-overflow: clip;
386-
overflow: visible;
387-
display: inline-block;
388-
animation: marquee 10s linear infinite;
389-
}
392+
@include hasHover() {
393+
&__title:hover {
394+
@include rwd($screen-pad-portrait) {
395+
span {
396+
text-overflow: clip;
397+
overflow: visible;
398+
display: inline-block;
399+
animation: marquee 10s linear infinite;
400+
}
390401

402+
}
391403
}
392404
}
393405

@@ -421,10 +433,12 @@ xpopup
421433
}
422434

423435

436+
@include hasHover() {
424437

425-
&:hover &__artist,
426-
&:hover &__album-title {
427-
opacity: 0.75;
438+
&:hover &__artist,
439+
&:hover &__album-title {
440+
opacity: 0.75;
441+
}
428442
}
429443

430444
&__artist+&__album-title:not(:empty) {

0 commit comments

Comments
 (0)