Skip to content

Commit 7d549eb

Browse files
queadquead
committed
1.9.2 - Updating UX
1 parent 829d6e0 commit 7d549eb

File tree

6 files changed

+86
-30
lines changed

6 files changed

+86
-30
lines changed

‎dist/assets/css/main.css

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,9 @@
4242

4343
:root {
4444
--c-base: #1e232f;
45-
--c-primary: #d42222;
46-
--c-primary-active: #bb2222;
47-
--c-primary-active-focus: #9c1717;
45+
--c-primary: red;
46+
--c-primary-active: #d42222;
47+
--c-primary-active-focus: #bb2222;
4848
--c-primary-inverse: #27272d;
4949
--c-danger: red;
5050
--c-danger-active: #D30000;
@@ -166,11 +166,11 @@ a:active {
166166
}
167167

168168
.btn-primary:hover {
169-
background-color: var(--c-primary-active);
169+
box-shadow: 0 0 10px var(--c-primary);
170170
}
171171

172172
.btn-primary:active {
173-
background-color: var(--c-primary-active-focus);
173+
background-color: var(--c-primary-active);
174174
}
175175

176176
.btn-primary-inverse {
@@ -657,13 +657,17 @@ a:active {
657657
transform: translate(-50%, -50%);
658658
}
659659

660+
.player-buttons button:not(#play-song):hover {
661+
text-shadow: 0 0 10px var(--c-primary);
662+
}
663+
660664
.player-buttons button:not(#play-song):active {
661665
transform: scale(1.2);
662666
}
663667

664668
.player-buttons #play-song {
665669
background-color: var(--c-primary);
666-
color: var(--c-base);
670+
color: var(--c-white);
667671
border-radius: 50%;
668672
}
669673

@@ -675,6 +679,10 @@ a:active {
675679
margin-left: 0;
676680
}
677681

682+
.player-buttons #play-song:hover {
683+
box-shadow: 0 0 10px var(--c-primary);
684+
}
685+
678686
.player-buttons #play-song:active {
679687
transform: scale(1.1);
680688
}
@@ -726,6 +734,14 @@ a:active {
726734
cursor: pointer;
727735
}
728736

737+
.volume-range-value .fa {
738+
transition: all 0.1s ease-in-out;
739+
}
740+
741+
.volume-range-value .fa:hover {
742+
text-shadow: 0 0 10px var(--c-primary);
743+
}
744+
729745
.volume-range-value.inactive .volume-input {
730746
visibility: hidden;
731747
}
@@ -748,6 +764,8 @@ a:active {
748764
border-radius: 0;
749765
background-color: var(--c-primary);
750766
border-radius: 20px;
767+
box-shadow: 0 0 10px transparent;
768+
transition: box-shadow 0.2s ease-out;
751769
}
752770

753771
.duration-range-container .player-range {
@@ -772,7 +790,7 @@ a:active {
772790
}
773791

774792
.duration-range-container .player-range:active + .duration-input-shadow, .duration-range-container .player-range:hover + .duration-input-shadow {
775-
background-color: var(--c-primary-active);
793+
box-shadow: 0 0 10px var(--c-primary);
776794
border-radius: 20px 0 0 20px;
777795
}
778796

@@ -800,6 +818,8 @@ a:active {
800818
height: 100%;
801819
border-radius: 20px;
802820
background-color: var(--c-primary);
821+
box-shadow: 0 0 10px transparent;
822+
transition: box-shadow 0.2s ease-out;
803823
}
804824

805825
.volume-input-container .volume-input-shadow.inactive {
@@ -834,7 +854,7 @@ a:active {
834854
}
835855

836856
.volume-input-container .volume-input:active + .volume-input-shadow, .volume-input-container .volume-input:hover + .volume-input-shadow {
837-
background-color: var(--c-primary-active);
857+
box-shadow: 0 0 10px var(--c-primary);
838858
border-radius: 20px 0 0 20px;
839859
}
840860

@@ -1447,11 +1467,11 @@ iframe {
14471467
}
14481468

14491469
.video-item-head-btn:hover {
1450-
background-color: var(--c-primary-active);
1470+
box-shadow: 0 0 10px var(--c-primary);
14511471
}
14521472

14531473
.video-item-head-btn:active {
1454-
background-color: var(--c-primary-active-focus);
1474+
background-color: var(--c-primary-active);
14551475
}
14561476

14571477
.video-item-head .fa {

‎scss/_buttons.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,10 +43,10 @@
4343
background-color: var(--c-primary);
4444
color: var(--c-white);
4545
&:hover {
46-
background-color: var(--c-primary-active);
46+
box-shadow: 0 0 10px var(--c-primary);
4747
}
4848
&:active {
49-
background-color: var(--c-primary-active-focus);
49+
background-color: var(--c-primary-active);
5050
}
5151
}
5252

‎scss/_controls.scss

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -99,20 +99,26 @@
9999
left: 50%;
100100
transform: translate(-50%, -50%);
101101
}
102+
&:not(#play-song):hover {
103+
text-shadow: 0 0 10px var(--c-primary);
104+
}
102105
&:not(#play-song):active {
103106
transform: scale(1.2);
104107
}
105108
}
106109
#play-song {
107110
background-color: var(--c-primary);
108-
color: var(--c-base);
111+
color: var(--c-white);
109112
border-radius: 50%;
110113
span {
111114
margin-left: 1px;
112115
&.fa-pause {
113116
margin-left: 0;
114117
}
115118
}
119+
&:hover {
120+
box-shadow: 0 0 10px var(--c-primary);
121+
}
116122
&:active {
117123
transform: scale(1.1);
118124
}
@@ -159,6 +165,12 @@
159165
margin-right: auto;
160166
cursor: pointer;
161167
}
168+
.fa {
169+
transition: all 0.1s ease-in-out;
170+
&:hover {
171+
text-shadow: 0 0 10px var(--c-primary);
172+
}
173+
}
162174
&.inactive .volume-input {
163175
visibility: hidden;
164176
}
@@ -180,6 +192,8 @@
180192
border-radius: 0;
181193
background-color: var(--c-primary);
182194
border-radius: 20px;
195+
box-shadow: 0 0 10px transparent;
196+
transition: box-shadow 0.2s ease-out;
183197
}
184198
.player-range {
185199
-webkit-appearance: none;
@@ -202,7 +216,7 @@
202216
&:active,
203217
&:hover {
204218
+ .duration-input-shadow {
205-
background-color: var(--c-primary-active);
219+
box-shadow: 0 0 10px var(--c-primary);
206220
border-radius: 20px 0 0 20px;
207221
}
208222
&::-webkit-slider-thumb {
@@ -231,6 +245,8 @@
231245
height: 100%;
232246
border-radius: 20px;
233247
background-color: var(--c-primary);
248+
box-shadow: 0 0 10px transparent;
249+
transition: box-shadow 0.2s ease-out;
234250
&.inactive {
235251
width: 0% !important;
236252
}
@@ -262,7 +278,7 @@
262278
&:active,
263279
&:hover {
264280
+ .volume-input-shadow {
265-
background-color: var(--c-primary-active);
281+
box-shadow: 0 0 10px var(--c-primary);
266282
border-radius: 20px 0 0 20px;
267283
}
268284
&::-webkit-slider-thumb {

‎scss/_variables.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -62,9 +62,9 @@ $f-32: 32px;
6262
:root {
6363
// un albastru smecher de tinut minte #1e232f old -> #17171d
6464
--c-base: #1e232f;
65-
--c-primary: #d42222;
66-
--c-primary-active: #bb2222;
67-
--c-primary-active-focus: #9c1717;
65+
--c-primary: red;
66+
--c-primary-active: #d42222;
67+
--c-primary-active-focus: #bb2222;
6868
--c-primary-inverse: #27272d;
6969

7070
--c-danger: red;

‎scss/_videos.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,10 +80,10 @@ iframe {
8080
display: block;
8181
user-select: none;
8282
&:hover {
83-
background-color: var(--c-primary-active);
83+
box-shadow: 0 0 10px var(--c-primary);
8484
}
8585
&:active {
86-
background-color: var(--c-primary-active-focus);
86+
background-color: var(--c-primary-active);
8787
}
8888
}
8989
.fa {

‎src/assets/css/main.css

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,9 @@
4242

4343
:root {
4444
--c-base: #1e232f;
45-
--c-primary: #d42222;
46-
--c-primary-active: #bb2222;
47-
--c-primary-active-focus: #9c1717;
45+
--c-primary: red;
46+
--c-primary-active: #d42222;
47+
--c-primary-active-focus: #bb2222;
4848
--c-primary-inverse: #27272d;
4949
--c-danger: red;
5050
--c-danger-active: #D30000;
@@ -166,11 +166,11 @@ a:active {
166166
}
167167

168168
.btn-primary:hover {
169-
background-color: var(--c-primary-active);
169+
box-shadow: 0 0 10px var(--c-primary);
170170
}
171171

172172
.btn-primary:active {
173-
background-color: var(--c-primary-active-focus);
173+
background-color: var(--c-primary-active);
174174
}
175175

176176
.btn-primary-inverse {
@@ -657,13 +657,17 @@ a:active {
657657
transform: translate(-50%, -50%);
658658
}
659659

660+
.player-buttons button:not(#play-song):hover {
661+
text-shadow: 0 0 10px var(--c-primary);
662+
}
663+
660664
.player-buttons button:not(#play-song):active {
661665
transform: scale(1.2);
662666
}
663667

664668
.player-buttons #play-song {
665669
background-color: var(--c-primary);
666-
color: var(--c-base);
670+
color: var(--c-white);
667671
border-radius: 50%;
668672
}
669673

@@ -675,6 +679,10 @@ a:active {
675679
margin-left: 0;
676680
}
677681

682+
.player-buttons #play-song:hover {
683+
box-shadow: 0 0 10px var(--c-primary);
684+
}
685+
678686
.player-buttons #play-song:active {
679687
transform: scale(1.1);
680688
}
@@ -726,6 +734,14 @@ a:active {
726734
cursor: pointer;
727735
}
728736

737+
.volume-range-value .fa {
738+
transition: all 0.1s ease-in-out;
739+
}
740+
741+
.volume-range-value .fa:hover {
742+
text-shadow: 0 0 10px var(--c-primary);
743+
}
744+
729745
.volume-range-value.inactive .volume-input {
730746
visibility: hidden;
731747
}
@@ -748,6 +764,8 @@ a:active {
748764
border-radius: 0;
749765
background-color: var(--c-primary);
750766
border-radius: 20px;
767+
box-shadow: 0 0 10px transparent;
768+
transition: box-shadow 0.2s ease-out;
751769
}
752770

753771
.duration-range-container .player-range {
@@ -772,7 +790,7 @@ a:active {
772790
}
773791

774792
.duration-range-container .player-range:active + .duration-input-shadow, .duration-range-container .player-range:hover + .duration-input-shadow {
775-
background-color: var(--c-primary-active);
793+
box-shadow: 0 0 10px var(--c-primary);
776794
border-radius: 20px 0 0 20px;
777795
}
778796

@@ -800,6 +818,8 @@ a:active {
800818
height: 100%;
801819
border-radius: 20px;
802820
background-color: var(--c-primary);
821+
box-shadow: 0 0 10px transparent;
822+
transition: box-shadow 0.2s ease-out;
803823
}
804824

805825
.volume-input-container .volume-input-shadow.inactive {
@@ -834,7 +854,7 @@ a:active {
834854
}
835855

836856
.volume-input-container .volume-input:active + .volume-input-shadow, .volume-input-container .volume-input:hover + .volume-input-shadow {
837-
background-color: var(--c-primary-active);
857+
box-shadow: 0 0 10px var(--c-primary);
838858
border-radius: 20px 0 0 20px;
839859
}
840860

@@ -1447,11 +1467,11 @@ iframe {
14471467
}
14481468

14491469
.video-item-head-btn:hover {
1450-
background-color: var(--c-primary-active);
1470+
box-shadow: 0 0 10px var(--c-primary);
14511471
}
14521472

14531473
.video-item-head-btn:active {
1454-
background-color: var(--c-primary-active-focus);
1474+
background-color: var(--c-primary-active);
14551475
}
14561476

14571477
.video-item-head .fa {

0 commit comments

Comments
 (0)