modularized css
This commit is contained in:
DIYgod
parent
4395112b22
commit
3b675ea48a
|
|
@ -0,0 +1,14 @@
|
|||
@import '../../node_modules/balloon-css/balloon.css';
|
||||
|
||||
[data-balloon]:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[data-balloon]:after {
|
||||
padding: 0.3em 0.7em;
|
||||
background: rgba(17, 17, 17, 0.7);
|
||||
}
|
||||
|
||||
[data-balloon][data-balloon-pos="up"]:after {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
.dplayer-bezel {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
font-size: 22px;
|
||||
color: #fff;
|
||||
pointer-events: none;
|
||||
.dplayer-bezel-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -26px 0 0 -26px;
|
||||
height: 52px;
|
||||
width: 52px;
|
||||
padding: 12px;
|
||||
box-sizing: border-box;
|
||||
background: rgba(0, 0, 0, .5);
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
&.dplayer-bezel-transition {
|
||||
animation: bezel-hide .5s linear;
|
||||
}
|
||||
@keyframes bezel-hide {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
transform: scale(2);
|
||||
}
|
||||
}
|
||||
}
|
||||
.dplayer-danloading {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -7px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
line-height: 14px;
|
||||
animation: my-face 5s infinite ease-in-out;
|
||||
}
|
||||
.diplayer-loading-icon {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin: -18px 0 0 -18px;
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
pointer-events: none;
|
||||
.diplayer-loading-hide {
|
||||
display: none;
|
||||
}
|
||||
.diplayer-loading-dot {
|
||||
animation: diplayer-loading-dot-fade .8s ease infinite;
|
||||
opacity: 0;
|
||||
fill: #fff;
|
||||
transform-origin: 4px 4px;
|
||||
@for $i from 7 through 1 {
|
||||
&.diplayer-loading-dot-#{$i} {
|
||||
animation-delay: .1s * $i;
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes diplayer-loading-dot-fade {
|
||||
0% {
|
||||
opacity: .7;
|
||||
transform: scale(1.2, 1.2)
|
||||
}
|
||||
50% {
|
||||
opacity: .25;
|
||||
transform: scale(.9, .9)
|
||||
}
|
||||
to {
|
||||
opacity: .25;
|
||||
transform: scale(.85, .85)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,609 @@
|
|||
.dplayer-controller-mask {
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==) repeat-x bottom;
|
||||
height: 98px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.dplayer-controller {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 41px;
|
||||
padding: 0 20px;
|
||||
user-select: none;
|
||||
transition: all 0.3s ease;
|
||||
&.dplayer-controller-comment {
|
||||
.dplayer-icons {
|
||||
display: none;
|
||||
}
|
||||
.dplayer-icons.dplayer-comment-box {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.dplayer-bar-wrap {
|
||||
padding: 5px 0;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
bottom: 33px;
|
||||
width: calc(100% - 40px);
|
||||
height: 3px;
|
||||
&:hover {
|
||||
.dplayer-bar .dplayer-played .dplayer-thumb {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.dplayer-bar-preview {
|
||||
position: absolute;
|
||||
background: #fff;
|
||||
pointer-events: none;
|
||||
display: none;
|
||||
background-size: auto 100%;
|
||||
}
|
||||
.dplayer-bar-preview-canvas {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
.dplayer-bar-time {
|
||||
&.hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: -20px;
|
||||
width: 30px;
|
||||
border-radius: 4px;
|
||||
padding: 5px 7px;
|
||||
background-color: rgba(0, 0, 0, 0.62);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
opacity: 1;
|
||||
transition: opacity .1s ease-in-out;
|
||||
word-wrap: normal;
|
||||
word-break: normal;
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
}
|
||||
.dplayer-bar {
|
||||
position: relative;
|
||||
height: 3px;
|
||||
width: 100%;
|
||||
background: rgba(255, 255, 255, .2);
|
||||
cursor: pointer;
|
||||
.dplayer-loaded {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: rgba(255, 255, 255, .4);
|
||||
height: 3px;
|
||||
transition: all 0.5s ease;
|
||||
will-change: width;
|
||||
}
|
||||
.dplayer-played {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
height: 3px;
|
||||
will-change: width;
|
||||
.dplayer-thumb {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 5px;
|
||||
margin-top: -4px;
|
||||
margin-right: -10px;
|
||||
height: 11px;
|
||||
width: 11px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: all .3s ease-in-out;
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dplayer-icons {
|
||||
height: 38px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
&.dplayer-comment-box {
|
||||
display: none;
|
||||
position: absolute;
|
||||
transition: all .3s ease-in-out;
|
||||
z-index: 2;
|
||||
height: 38px;
|
||||
bottom: 0;
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
color: #fff;
|
||||
.dplayer-icon {
|
||||
padding: 7px;
|
||||
}
|
||||
.dplayer-comment-setting-icon {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.dplayer-send-icon {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.dplayer-comment-setting-box {
|
||||
position: absolute;
|
||||
background: rgba(28, 28, 28, 0.9);
|
||||
bottom: 41px;
|
||||
left: 0;
|
||||
box-shadow: 0 0 25px rgba(0, 0, 0, .3);
|
||||
border-radius: 4px;
|
||||
padding: 10px 10px 16px;
|
||||
font-size: 14px;
|
||||
width: 204px;
|
||||
transition: all .3s ease-in-out;
|
||||
transform: scale(0);
|
||||
&.dplayer-comment-setting-open {
|
||||
transform: scale(1);
|
||||
}
|
||||
input[type=radio] {
|
||||
display: none;
|
||||
}
|
||||
label {
|
||||
cursor: pointer;
|
||||
}
|
||||
.dplayer-comment-setting-title {
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
line-height: 30px;
|
||||
}
|
||||
.dplayer-comment-setting-type {
|
||||
font-size: 0;
|
||||
.dplayer-comment-setting-title {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
label {
|
||||
&:nth-child(2) {
|
||||
span {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
}
|
||||
&:nth-child(4) {
|
||||
span {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
span {
|
||||
width: 33%;
|
||||
padding: 4px 6px;
|
||||
line-height: 16px;
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
border: 1px solid #fff;
|
||||
margin-right: -1px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
input:checked+span {
|
||||
background: #E4E4E6;
|
||||
color: #1c1c1c;
|
||||
}
|
||||
}
|
||||
.dplayer-comment-setting-color {
|
||||
font-size: 0;
|
||||
label {
|
||||
font-size: 0;
|
||||
padding: 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
span {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
display: inline-block;
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
animation: my-face 5s infinite ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dplayer-comment-input {
|
||||
outline: none;
|
||||
border: none;
|
||||
padding: 8px 31px;
|
||||
font-size: 14px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
border-radius: 4px;
|
||||
background: none;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
&::placeholder {
|
||||
color: #fff;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.dplayer-icons-left {
|
||||
.dplayer-icon {
|
||||
padding: 7px;
|
||||
}
|
||||
}
|
||||
&.dplayer-icons-right {
|
||||
right: 20px;
|
||||
.dplayer-icon {
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
.dplayer-time,
|
||||
.dplayer-live-badge {
|
||||
line-height: 38px;
|
||||
color: #eee;
|
||||
text-shadow: 0 0 2px rgba(0, 0, 0, .5);
|
||||
vertical-align: middle;
|
||||
font-size: 13px;
|
||||
cursor: default;
|
||||
}
|
||||
.dplayer-live-dot {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
vertical-align: 4%;
|
||||
margin-right: 5px;
|
||||
content: '';
|
||||
border-radius: 6px;
|
||||
}
|
||||
.dplayer-icon {
|
||||
width: 40px;
|
||||
height: 100%;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
box-sizing: border-box;
|
||||
display: inline-block;
|
||||
.dplayer-icon-content {
|
||||
transition: all .2s ease-in-out;
|
||||
opacity: .8;
|
||||
}
|
||||
&:hover {
|
||||
.dplayer-icon-content {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&.dplayer-quality-icon {
|
||||
color: #fff;
|
||||
width: auto;
|
||||
line-height: 22px;
|
||||
font-size: 14px;
|
||||
}
|
||||
&.dplayer-comment-icon {
|
||||
padding: 10px 9px 9px;
|
||||
}
|
||||
&.dplayer-setting-icon {
|
||||
padding-top: 8.5px;
|
||||
}
|
||||
&.dplayer-volume-icon {
|
||||
width: 43px;
|
||||
}
|
||||
}
|
||||
.dplayer-volume {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
height: 100%;
|
||||
&:hover {
|
||||
.dplayer-volume-bar-wrap .dplayer-volume-bar {
|
||||
width: 45px;
|
||||
}
|
||||
.dplayer-volume-bar-wrap .dplayer-volume-bar .dplayer-volume-bar-inner .dplayer-thumb {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
&.dplayer-volume-active {
|
||||
.dplayer-volume-bar-wrap .dplayer-volume-bar {
|
||||
width: 45px;
|
||||
}
|
||||
.dplayer-volume-bar-wrap .dplayer-volume-bar .dplayer-volume-bar-inner .dplayer-thumb {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.dplayer-volume-bar-wrap {
|
||||
display: inline-block;
|
||||
margin: 0 10px 0 -5px;
|
||||
vertical-align: middle;
|
||||
height: 100%;
|
||||
.dplayer-volume-bar {
|
||||
position: relative;
|
||||
top: 17px;
|
||||
width: 0;
|
||||
height: 3px;
|
||||
background: #aaa;
|
||||
transition: all 0.3s ease-in-out;
|
||||
.dplayer-volume-bar-inner {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
transition: all 0.1s ease;
|
||||
will-change: width;
|
||||
.dplayer-thumb {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 5px;
|
||||
margin-top: -4px;
|
||||
margin-right: -10px;
|
||||
height: 11px;
|
||||
width: 11px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: all .3s ease-in-out;
|
||||
transform: scale(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dplayer-subtitle-btn {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
}
|
||||
.dplayer-setting {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
.dplayer-setting-box {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 50px;
|
||||
transform: scale(0);
|
||||
width: 150px;
|
||||
border-radius: 2px;
|
||||
background: rgba(28, 28, 28, 0.9);
|
||||
padding: 7px 0;
|
||||
transition: all .3s ease-in-out;
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
&>div {
|
||||
display: none;
|
||||
&.dplayer-setting-origin-panel {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&.dplayer-setting-box-open {
|
||||
transform: scale(1);
|
||||
}
|
||||
&.dplayer-setting-box-narrow {
|
||||
width: 70px;
|
||||
height: 180px;
|
||||
text-align: center;
|
||||
}
|
||||
&.dplayer-setting-box-speed {
|
||||
.dplayer-setting-origin-panel {
|
||||
display: none;
|
||||
}
|
||||
.dplayer-setting-speed-panel {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dplayer-setting-item,
|
||||
.dplayer-setting-speed-item {
|
||||
height: 30px;
|
||||
padding: 5px 10px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
}
|
||||
}
|
||||
.dplayer-setting-danmaku {
|
||||
padding: 5px 0;
|
||||
.dplayer-label {
|
||||
padding: 0 10px;
|
||||
display: inline;
|
||||
}
|
||||
&:hover {
|
||||
.dplayer-label {
|
||||
display: none;
|
||||
}
|
||||
.dplayer-danmaku-bar-wrap {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
&.dplayer-setting-danmaku-active {
|
||||
.dplayer-label {
|
||||
display: none;
|
||||
}
|
||||
.dplayer-danmaku-bar-wrap {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.dplayer-danmaku-bar-wrap {
|
||||
padding: 0 10px;
|
||||
box-sizing: border-box;
|
||||
display: none;
|
||||
vertical-align: middle;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
.dplayer-danmaku-bar {
|
||||
position: relative;
|
||||
top: 8.5px;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background: #fff;
|
||||
transition: all 0.3s ease-in-out;
|
||||
.dplayer-danmaku-bar-inner {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
transition: all 0.1s ease;
|
||||
background: #aaa;
|
||||
will-change: width;
|
||||
.dplayer-thumb {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 5px;
|
||||
margin-top: -4px;
|
||||
margin-right: -10px;
|
||||
height: 11px;
|
||||
width: 11px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: all .3s ease-in-out;
|
||||
background: #aaa;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.dplayer-full {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
&:hover {
|
||||
.dplayer-full-in-icon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.dplayer-full-in-icon {
|
||||
position: absolute;
|
||||
top: -30px;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.dplayer-quality {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
z-index: 2;
|
||||
&:hover {
|
||||
.dplayer-quality-list {
|
||||
display: block;
|
||||
}
|
||||
.dplayer-quality-mask {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.dplayer-quality-mask {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 38px;
|
||||
left: -18px;
|
||||
width: 80px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
.dplayer-quality-list {
|
||||
display: none;
|
||||
font-size: 12px;
|
||||
width: 80px;
|
||||
border-radius: 2px;
|
||||
background: rgba(28, 28, 28, 0.9);
|
||||
padding: 5px 0;
|
||||
transition: all .3s ease-in-out;
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.dplayer-quality-item {
|
||||
height: 25px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
line-height: 25px;
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
}
|
||||
}
|
||||
}
|
||||
.dplayer-comment {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
}
|
||||
.dplayer-label {
|
||||
color: #eee;
|
||||
font-size: 13px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.dplayer-toggle {
|
||||
width: 32px;
|
||||
height: 20px;
|
||||
text-align: center;
|
||||
font-size: 0;
|
||||
vertical-align: middle;
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 10px;
|
||||
input {
|
||||
max-height: 0;
|
||||
max-width: 0;
|
||||
display: none;
|
||||
}
|
||||
input+label {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
box-shadow: rgb(223, 223, 223) 0 0 0 0 inset;
|
||||
border: 1px solid rgb(223, 223, 223);
|
||||
height: 20px;
|
||||
width: 32px;
|
||||
border-radius: 10px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
transition: .2s ease-in-out;
|
||||
}
|
||||
input+label:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-radius: 15px;
|
||||
transition: .2s ease-in-out;
|
||||
}
|
||||
input+label:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
display: block;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border-radius: 15px;
|
||||
background: #fff;
|
||||
transition: .2s ease-in-out;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
}
|
||||
input:checked+label {
|
||||
border-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
input:checked+label:before {
|
||||
width: 30px;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
input:checked+label:after {
|
||||
left: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
.dplayer-danmaku {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
font-size: 22px;
|
||||
color: #fff;
|
||||
.dplayer-danmaku-item {
|
||||
display: inline-block;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
cursor: default;
|
||||
white-space: nowrap;
|
||||
text-shadow: .5px .5px .5px rgba(0, 0, 0, .5);
|
||||
&--demo {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
.dplayer-danmaku-right {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
transform: translateX(100%);
|
||||
&.dplayer-danmaku-move {
|
||||
will-change: transform;
|
||||
animation: danmaku 5s linear;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
@keyframes danmaku {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
.dplayer-danmaku-top,
|
||||
.dplayer-danmaku-bottom {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
visibility: hidden;
|
||||
&.dplayer-danmaku-move {
|
||||
will-change: visibility;
|
||||
animation: danmaku-center 4s linear;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
@keyframes danmaku-center {
|
||||
from {
|
||||
visibility: visible;
|
||||
}
|
||||
to {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,153 @@
|
|||
@keyframes my-face {
|
||||
2% {
|
||||
transform: translate(0, 1.5px) rotate(1.5deg);
|
||||
}
|
||||
4% {
|
||||
transform: translate(0, -1.5px) rotate(-0.5deg);
|
||||
}
|
||||
6% {
|
||||
transform: translate(0, 1.5px) rotate(-1.5deg);
|
||||
}
|
||||
8% {
|
||||
transform: translate(0, -1.5px) rotate(-1.5deg);
|
||||
}
|
||||
10% {
|
||||
transform: translate(0, 2.5px) rotate(1.5deg);
|
||||
}
|
||||
12% {
|
||||
transform: translate(0, -0.5px) rotate(1.5deg);
|
||||
}
|
||||
14% {
|
||||
transform: translate(0, -1.5px) rotate(1.5deg);
|
||||
}
|
||||
16% {
|
||||
transform: translate(0, -0.5px) rotate(-1.5deg);
|
||||
}
|
||||
18% {
|
||||
transform: translate(0, 0.5px) rotate(-1.5deg);
|
||||
}
|
||||
20% {
|
||||
transform: translate(0, -1.5px) rotate(2.5deg);
|
||||
}
|
||||
22% {
|
||||
transform: translate(0, 0.5px) rotate(-1.5deg);
|
||||
}
|
||||
24% {
|
||||
transform: translate(0, 1.5px) rotate(1.5deg);
|
||||
}
|
||||
26% {
|
||||
transform: translate(0, 0.5px) rotate(0.5deg);
|
||||
}
|
||||
28% {
|
||||
transform: translate(0, 0.5px) rotate(1.5deg);
|
||||
}
|
||||
30% {
|
||||
transform: translate(0, -0.5px) rotate(2.5deg);
|
||||
}
|
||||
32% {
|
||||
transform: translate(0, 1.5px) rotate(-0.5deg);
|
||||
}
|
||||
34% {
|
||||
transform: translate(0, 1.5px) rotate(-0.5deg);
|
||||
}
|
||||
36% {
|
||||
transform: translate(0, -1.5px) rotate(2.5deg);
|
||||
}
|
||||
38% {
|
||||
transform: translate(0, 1.5px) rotate(-1.5deg);
|
||||
}
|
||||
40% {
|
||||
transform: translate(0, -0.5px) rotate(2.5deg);
|
||||
}
|
||||
42% {
|
||||
transform: translate(0, 2.5px) rotate(-1.5deg);
|
||||
}
|
||||
44% {
|
||||
transform: translate(0, 1.5px) rotate(0.5deg);
|
||||
}
|
||||
46% {
|
||||
transform: translate(0, -1.5px) rotate(2.5deg);
|
||||
}
|
||||
48% {
|
||||
transform: translate(0, -0.5px) rotate(0.5deg);
|
||||
}
|
||||
50% {
|
||||
transform: translate(0, 0.5px) rotate(0.5deg);
|
||||
}
|
||||
52% {
|
||||
transform: translate(0, 2.5px) rotate(2.5deg);
|
||||
}
|
||||
54% {
|
||||
transform: translate(0, -1.5px) rotate(1.5deg);
|
||||
}
|
||||
56% {
|
||||
transform: translate(0, 2.5px) rotate(2.5deg);
|
||||
}
|
||||
58% {
|
||||
transform: translate(0, 0.5px) rotate(2.5deg);
|
||||
}
|
||||
60% {
|
||||
transform: translate(0, 2.5px) rotate(2.5deg);
|
||||
}
|
||||
62% {
|
||||
transform: translate(0, -0.5px) rotate(2.5deg);
|
||||
}
|
||||
64% {
|
||||
transform: translate(0, -0.5px) rotate(1.5deg);
|
||||
}
|
||||
66% {
|
||||
transform: translate(0, 1.5px) rotate(-0.5deg);
|
||||
}
|
||||
68% {
|
||||
transform: translate(0, -1.5px) rotate(-0.5deg);
|
||||
}
|
||||
70% {
|
||||
transform: translate(0, 1.5px) rotate(0.5deg);
|
||||
}
|
||||
72% {
|
||||
transform: translate(0, 2.5px) rotate(1.5deg);
|
||||
}
|
||||
74% {
|
||||
transform: translate(0, -0.5px) rotate(0.5deg);
|
||||
}
|
||||
76% {
|
||||
transform: translate(0, -0.5px) rotate(2.5deg);
|
||||
}
|
||||
78% {
|
||||
transform: translate(0, -0.5px) rotate(1.5deg);
|
||||
}
|
||||
80% {
|
||||
transform: translate(0, 1.5px) rotate(1.5deg);
|
||||
}
|
||||
82% {
|
||||
transform: translate(0, -0.5px) rotate(0.5deg);
|
||||
}
|
||||
84% {
|
||||
transform: translate(0, 1.5px) rotate(2.5deg);
|
||||
}
|
||||
86% {
|
||||
transform: translate(0, -1.5px) rotate(-1.5deg);
|
||||
}
|
||||
88% {
|
||||
transform: translate(0, -0.5px) rotate(2.5deg);
|
||||
}
|
||||
90% {
|
||||
transform: translate(0, 2.5px) rotate(-0.5deg);
|
||||
}
|
||||
92% {
|
||||
transform: translate(0, 0.5px) rotate(-0.5deg);
|
||||
}
|
||||
94% {
|
||||
transform: translate(0, 2.5px) rotate(0.5deg);
|
||||
}
|
||||
96% {
|
||||
transform: translate(0, -0.5px) rotate(1.5deg);
|
||||
}
|
||||
98% {
|
||||
transform: translate(0, -1.5px) rotate(-0.5deg);
|
||||
}
|
||||
0%,
|
||||
100% {
|
||||
transform: translate(0, 0) rotate(0deg);
|
||||
}
|
||||
}
|
||||
1346
src/css/index.scss
1346
src/css/index.scss
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,13 @@
|
|||
.dplayer-logo {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 20px;
|
||||
max-width: 50px;
|
||||
max-height: 50px;
|
||||
img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
.dplayer-menu {
|
||||
position: absolute;
|
||||
width: 170px;
|
||||
border-radius: 2px;
|
||||
background: rgba(28, 28, 28, 0.85);
|
||||
padding: 5px 0;
|
||||
overflow: hidden;
|
||||
z-index: 3;
|
||||
display: none;
|
||||
&.dplayer-menu-show {
|
||||
display: block;
|
||||
}
|
||||
.dplayer-menu-item {
|
||||
height: 30px;
|
||||
box-sizing: border-box;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, .1);
|
||||
}
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
line-height: 30px;
|
||||
color: #eee;
|
||||
font-size: 13px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
.dplayer-notice {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
bottom: 60px;
|
||||
left: 20px;
|
||||
font-size: 14px;
|
||||
border-radius: 2px;
|
||||
background: rgba(28, 28, 28, 0.9);
|
||||
padding: 7px 20px;
|
||||
transition: all .3s ease-in-out;
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,163 @@
|
|||
.dplayer {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
line-height: 1;
|
||||
|
||||
* {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
&:-webkit-full-screen {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
position: fixed;
|
||||
z-index: 100000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
.dplayer-danmaku {
|
||||
.dplayer-danmaku-top,
|
||||
.dplayer-danmaku-bottom {
|
||||
&.dplayer-danmaku-move {
|
||||
animation: danmaku-center 6s linear;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
|
||||
.dplayer-danmaku-right {
|
||||
&.dplayer-danmaku-move {
|
||||
animation: danmaku 8s linear;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.dplayer-no-danmaku {
|
||||
.dplayer-controller .dplayer-icons .dplayer-setting .dplayer-setting-box {
|
||||
.dplayer-setting-showdan,
|
||||
.dplayer-setting-danmaku,
|
||||
.dplayer-setting-danunlimit {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.dplayer-controller .dplayer-icons .dplayer-comment {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dplayer-danmaku {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.dplayer-live {
|
||||
.dplayer-time {
|
||||
display: none;
|
||||
}
|
||||
.dplayer-bar-wrap {
|
||||
display: none;
|
||||
}
|
||||
.dplayer-setting-speed {
|
||||
display: none;
|
||||
}
|
||||
.dplayer-setting-loop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.dplayer-arrow {
|
||||
.dplayer-danmaku {
|
||||
font-size: 18px
|
||||
}
|
||||
.dplayer-icon {
|
||||
margin: 0 -3px;
|
||||
}
|
||||
}
|
||||
|
||||
&.dplayer-playing {
|
||||
|
||||
.dplayer-danmaku .dplayer-danmaku-move {
|
||||
animation-play-state: running;
|
||||
}
|
||||
|
||||
@media (min-width: 900px) {
|
||||
.dplayer-controller-mask {
|
||||
opacity: 0;
|
||||
}
|
||||
.dplayer-controller {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.dplayer-controller-mask {
|
||||
opacity: 1;
|
||||
}
|
||||
.dplayer-controller {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.dplayer-loading {
|
||||
.dplayer-bezel .diplayer-loading-icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dplayer-danmaku .dplayer-danmaku-move {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
}
|
||||
|
||||
&.dplayer-hide-controller {
|
||||
cursor: none;
|
||||
|
||||
.dplayer-controller-mask {
|
||||
opacity: 0;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
.dplayer-controller {
|
||||
opacity: 0;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
&.dplayer-show-controller {
|
||||
.dplayer-controller-mask {
|
||||
opacity: 1;
|
||||
}
|
||||
.dplayer-controller {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
&.dplayer-fulled {
|
||||
position: fixed;
|
||||
z-index: 100000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
&.dplayer-mobile .dplayer-controller .dplayer-icons {
|
||||
.dplayer-volume,
|
||||
.dplayer-camera-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dplayer-full .dplayer-full-in-icon {
|
||||
position: static;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// To hide scroll bar, apply this class to <body>
|
||||
.dplayer-web-fullscreen-fix {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
.dplayer-subtitle {
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
width: 90%;
|
||||
left: 5%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
text-shadow: 0.5px 0.5px 0.5px rgba(0, 0, 0, 0.5);
|
||||
font-size: 20px;
|
||||
&.dplayer-subtitle-hide {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
.dplayer-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1;
|
||||
display: none;
|
||||
&.dplayer-mask-show {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.dplayer-video-wrap {
|
||||
position: relative;
|
||||
background: #000;
|
||||
font-size: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.dplayer-video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: none;
|
||||
}
|
||||
.dplayer-video-current {
|
||||
display: block;
|
||||
}
|
||||
.dplayer-video-prepare {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue