|
|
@@ -1,1335 +1,11 @@
|
|
|
-@import '../../node_modules/balloon-css/balloon.css';
|
|
|
-
|
|
|
-.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-playing {
|
|
|
-
|
|
|
- .dplayer-danmaku .dplayer-danmaku-move {
|
|
|
- animation-play-state: running !important;
|
|
|
- }
|
|
|
-
|
|
|
- @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 !important;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &.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-volume,
|
|
|
- .dplayer-camera-icon {
|
|
|
- display: none !important;
|
|
|
- }
|
|
|
-
|
|
|
- .dplayer-full-in-icon {
|
|
|
- position: static !important;
|
|
|
- display: inline-block !important;
|
|
|
- }
|
|
|
-
|
|
|
- .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-input {
|
|
|
- width: 200px;
|
|
|
- }
|
|
|
-
|
|
|
- .dplayer-comment-setting-title {
|
|
|
- display: none;
|
|
|
- }
|
|
|
-
|
|
|
- .dplayer-controller .dplayer-icons .dplayer-comment .dplayer-comment-box .dplayer-comment-setting-box {
|
|
|
- left: 17px;
|
|
|
- }
|
|
|
-
|
|
|
- .dplayer-controller .dplayer-icons .dplayer-icon {
|
|
|
- width: 40px;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .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)
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .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-thumb {
|
|
|
- transform: scale(1) !important;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .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 !important;
|
|
|
-
|
|
|
- .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 !important;
|
|
|
- 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;
|
|
|
- box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- input:checked+span {
|
|
|
- box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
|
|
|
- border: none !important;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .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 !important;
|
|
|
- height: 100%;
|
|
|
-
|
|
|
- &:hover {
|
|
|
- .dplayer-volume-bar {
|
|
|
- width: 45px !important;
|
|
|
- }
|
|
|
-
|
|
|
- .dplayer-thumb {
|
|
|
- transform: scale(1) !important;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- &.dplayer-volume-active {
|
|
|
- .dplayer-volume-bar {
|
|
|
- width: 45px !important;
|
|
|
- }
|
|
|
-
|
|
|
- .dplayer-thumb {
|
|
|
- transform: scale(1) !important;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .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 !important;
|
|
|
- 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 !important;
|
|
|
- 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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- .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;
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-@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);
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-[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;
|
|
|
-}
|
|
|
-
|
|
|
-// To hide scroll bar, apply this class to <body>
|
|
|
-.dplayer-web-fullscreen-fix {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
-}
|
|
|
+@import './global';
|
|
|
+@import './player';
|
|
|
+@import './balloon';
|
|
|
+@import './bezel';
|
|
|
+@import './controller';
|
|
|
+@import './danmaku';
|
|
|
+@import './logo';
|
|
|
+@import './menu';
|
|
|
+@import './notice';
|
|
|
+@import './subtitle';
|
|
|
+@import './video';
|
DIYgod