xiaoxue_admin
/
DPlayer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improve style

This commit is contained in:
DIYgod 2016-05-20 14:25:52 +08:00
parent 5d3898c39a
commit f02f18ca4d
No known key found for this signature in database
GPG Key ID: F8797DD1088C6506
5 changed files with 39 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/DPlayer.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
dist/DPlayer.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/DPlayer.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

28
src/DPlayer.js
View File

@ -168,7 +168,9 @@
+ this.getSVG('comment')
+ ` </button>
<div class="dplayer-comment-box">
<div class="dplayer-comment-setting"></div>
<button class="dplayer-icon dplayer-comment-setting-icon">`
+ this.getSVG('setting')
+ ` </button>
<div class="dplayer-comment-setting-box">
<div class="dplayer-comment-setting-type">
<label>
@ -193,25 +195,25 @@
<input type="radio" name="dplayer-danmaku-color" value="#e54256">
<span style="background: #e54256"></span>
</label>
<label>
<input type="radio" name="dplayer-danmaku-color" value="#FFAB00">
<span style="background: #FFAB00"></span>
</label>
<label>
<input type="radio" name="dplayer-danmaku-color" value="#ffe133">
<span style="background: #ffe133"></span>
</label>
<label>
<input type="radio" name="dplayer-danmaku-color" value="#64DD17">
<span style="background: #64DD17"></span>
</label>
<label>
<input type="radio" name="dplayer-danmaku-color" value="#39ccff">
<span style="background: #39ccff"></span>
</label>
<label>
<input type="radio" name="dplayer-danmaku-color" value="#f424ff">
<span style="background: #f424ff"></span>
</label>
<label>
<input type="radio" name="dplayer-danmaku-color" value="#ff9d33">
<span style="background: #ff9d33"></span>
</label>
<label>
<input type="radio" name="dplayer-danmaku-color" value="#bde846">
<span style="background: #bde846"></span>
<input type="radio" name="dplayer-danmaku-color" value="#D500F9">
<span style="background: #D500F9"></span>
</label>
<label>
<input type="radio" name="dplayer-danmaku-color" value="#444">
@ -880,7 +882,7 @@
const commentInput = this.element.getElementsByClassName('dplayer-comment-input')[0];
const commentIcon = this.element.getElementsByClassName('dplayer-comment-icon')[0];
const commentBox = this.element.getElementsByClassName('dplayer-comment-box')[0];
const commentSettingIcon = this.element.getElementsByClassName('dplayer-comment-setting')[0];
const commentSettingIcon = this.element.getElementsByClassName('dplayer-comment-setting-icon')[0];
const commentSettingBox = this.element.getElementsByClassName('dplayer-comment-setting-box')[0];
const commentSendIcon = this.element.getElementsByClassName('dplayer-send-icon')[0];
@ -971,7 +973,7 @@
this.element.getElementsByClassName('dplayer-comment-setting-color')[0].addEventListener('click', () => {
const sele = this.element.querySelector('input[name="dplayer-danmaku-color"]:checked+span');
if (sele) {
commentSettingIcon.setAttribute('style', sele.getAttribute('style'));
commentSettingIcon.getElementsByClassName('dplayer-fill')[0].style.fill = this.element.querySelector('input[name="dplayer-danmaku-color"]:checked').value;
}
});

32
src/DPlayer.scss
View File

@ -583,20 +583,28 @@
transform: translateX(0);
}
.dplayer-comment-setting {
height: 20px;
width: 20px;
.dplayer-comment-setting-icon {
height: 24px;
width: 24px;
position: absolute;
top: 7px;
top: 5px;
left: 7px;
border-radius: 50%;
background: #ddd;
cursor: pointer;
transition: all .2s ease-in-out;
box-sizing: border-box;
padding: 0;
opacity: 1;
&:hover {
background: #aaa;
.dplayer-fill {
fill: #aaa;
}
}
.dplayer-fill {
transition: all .2s ease-in-out;
fill: #ddd;
}
.dplayer-svg-shadow {
stroke: none;
}
}
@ -604,7 +612,7 @@
position: absolute;
background: #fff;
bottom: 40px;
left: -60px;
left: -82.5px;
box-shadow: 0 0 25px rgba(0,0,0,.3);
border-radius: 4px;
padding: 5px;
@ -671,7 +679,7 @@
width: 24px;
height: 24px;
display: inline-block;
border-radius: 50%;
border-radius: 7px;
box-sizing: border-box;
cursor: pointer;