From 3b675ea48af2c0fd88e4ee3e8742f80eaa2e52a9 Mon Sep 17 00:00:00 2001 From: DIYgod Date: Thu, 11 Jan 2018 16:04:07 +0800 Subject: [PATCH] modularized css --- src/css/balloon.scss | 14 + src/css/bezel.scss | 85 +++ src/css/controller.scss | 609 ++++++++++++++++++ src/css/danmaku.scss | 56 ++ src/css/global.scss | 153 +++++ src/css/index.scss | 1346 +-------------------------------------- src/css/logo.scss | 13 + src/css/menu.scss | 38 ++ src/css/notice.scss | 14 + src/css/player.scss | 163 +++++ src/css/subtitle.scss | 13 + src/css/video.scss | 31 + 12 files changed, 1200 insertions(+), 1335 deletions(-) create mode 100644 src/css/balloon.scss create mode 100644 src/css/bezel.scss create mode 100644 src/css/controller.scss create mode 100644 src/css/danmaku.scss create mode 100644 src/css/global.scss create mode 100644 src/css/logo.scss create mode 100644 src/css/menu.scss create mode 100644 src/css/notice.scss create mode 100644 src/css/player.scss create mode 100644 src/css/subtitle.scss create mode 100644 src/css/video.scss diff --git a/src/css/balloon.scss b/src/css/balloon.scss new file mode 100644 index 0000000..adb98b2 --- /dev/null +++ b/src/css/balloon.scss @@ -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; +} \ No newline at end of file diff --git a/src/css/bezel.scss b/src/css/bezel.scss new file mode 100644 index 0000000..83de5a2 --- /dev/null +++ b/src/css/bezel.scss @@ -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) + } + } + } +} \ No newline at end of file diff --git a/src/css/controller.scss b/src/css/controller.scss new file mode 100644 index 0000000..7f3b030 --- /dev/null +++ b/src/css/controller.scss @@ -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; + } + } + } +} \ No newline at end of file diff --git a/src/css/danmaku.scss b/src/css/danmaku.scss new file mode 100644 index 0000000..b1d21bc --- /dev/null +++ b/src/css/danmaku.scss @@ -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; + } + } +} \ No newline at end of file diff --git a/src/css/global.scss b/src/css/global.scss new file mode 100644 index 0000000..3717aab --- /dev/null +++ b/src/css/global.scss @@ -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); + } +} \ No newline at end of file diff --git a/src/css/index.scss b/src/css/index.scss index f75469d..f1a9099 100644 --- a/src/css/index.scss +++ b/src/css/index.scss @@ -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 -.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'; \ No newline at end of file diff --git a/src/css/logo.scss b/src/css/logo.scss new file mode 100644 index 0000000..2090ede --- /dev/null +++ b/src/css/logo.scss @@ -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; + } +} \ No newline at end of file diff --git a/src/css/menu.scss b/src/css/menu.scss new file mode 100644 index 0000000..bfb9d77 --- /dev/null +++ b/src/css/menu.scss @@ -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; + } + } + } +} \ No newline at end of file diff --git a/src/css/notice.scss b/src/css/notice.scss new file mode 100644 index 0000000..39b3414 --- /dev/null +++ b/src/css/notice.scss @@ -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; +} \ No newline at end of file diff --git a/src/css/player.scss b/src/css/player.scss new file mode 100644 index 0000000..761d896 --- /dev/null +++ b/src/css/player.scss @@ -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 +.dplayer-web-fullscreen-fix { + position: fixed; + top: 0; + left: 0; + margin: 0; + padding: 0; +} \ No newline at end of file diff --git a/src/css/subtitle.scss b/src/css/subtitle.scss new file mode 100644 index 0000000..31b7190 --- /dev/null +++ b/src/css/subtitle.scss @@ -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; + } +} \ No newline at end of file diff --git a/src/css/video.scss b/src/css/video.scss new file mode 100644 index 0000000..60784d7 --- /dev/null +++ b/src/css/video.scss @@ -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; + } +} \ No newline at end of file