update

packages/artplayer/src/index.js

@@ -1,4 +1,4 @@
-import './style/index.scss';
+import './style/index.less';
 import validator from 'option-validator';
 import Emitter from './utils/emitter';
 import * as utils from './utils';

packages/artplayer/src/style/balloon.scss

@@ -1,123 +0,0 @@
-// https://github.com/kazzkiq/balloon.css
-// 1.0.3
-
-//
-// Variables
-// -----------------------------------------
-
-$balloon-bg: fade-out(#101010, 0.05) !default;
-$balloon-base-size: 12px !default;
-$balloon-arrow-size: 5px !default;
-$balloon-move: 4px !default;
-
-//
-// Mixins
-// -----------------------------------------
-
-@mixin arrow-down() {
-    width: 0;
-    height: 0;
-    border: $balloon-arrow-size solid transparent;
-    border-top-color: var(--balloon-color);
-}
-
-@mixin base-effects() {
-    opacity: 0;
-    pointer-events: none;
-    transition: all 0.18s ease-out 0.18s;
-}
-
-@mixin normalized-text() {
-    text-indent: 0;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
-        'Helvetica Neue', sans-serif;
-    font-weight: normal;
-    font-style: normal;
-    text-shadow: none;
-    font-size: var(--balloon-font-size);
-}
-
-//
-// Styles
-// -----------------------------------------
-
-:root {
-    --balloon-color: #{$balloon-bg};
-    --balloon-font-size: #{$balloon-base-size};
-    --balloon-move: #{$balloon-move};
-}
-
-// IE 11 button bugfix
-button[aria-label] {
-    &[data-balloon-pos] {
-        overflow: visible;
-    }
-}
-
-[aria-label] {
-    &[data-balloon-pos] {
-        position: relative; // alt. absolute or fixed
-
-        // Fixing iOS Safari event issue.
-        // More info at: https://goo.gl/w8JF4W
-        cursor: pointer;
-
-        &:after {
-            @include base-effects();
-            @include normalized-text();
-
-            background: var(--balloon-color);
-            border-radius: 2px;
-            color: #fff;
-            content: attr(aria-label);
-            padding: 0.5em 1em;
-            position: absolute;
-            white-space: nowrap;
-            line-height: 1.2;
-            z-index: 10;
-        }
-
-        &:before {
-            @include arrow-down();
-            @include base-effects();
-
-            content: '';
-            position: absolute;
-            z-index: 10;
-        }
-
-        &:hover {
-            &:before,
-            &:after {
-                opacity: 1;
-                pointer-events: none;
-            }
-        }
-
-        &[data-balloon-pos='up'] {
-            &:after {
-                bottom: 100%;
-                left: 50%;
-                margin-bottom: $balloon-arrow-size + 5px;
-                transform: translate(-50%, var(--balloon-move));
-                transform-origin: top;
-            }
-            &:before {
-                bottom: 100%;
-                left: 50%;
-                transform: translate(-50%, var(--balloon-move));
-                transform-origin: top;
-            }
-
-            &:hover {
-                &:after {
-                    transform: translate(-50%, 0);
-                }
-
-                &:before {
-                    transform: translate(-50%, 0);
-                }
-            }
-        }
-    }
-}

packages/artplayer/src/style/index.less

@@ -0,0 +1,22 @@
+@import './artplayer.less';
+@import './video.less';
+@import './poster.less';
+@import './subtitle.less';
+@import './danmuku.less';
+@import './layers.less';
+@import './mask.less';
+@import './loading.less';
+@import './bottom.less';
+@import './notice.less';
+@import './contextmenu.less';
+@import './setting.less';
+@import './info.less';
+@import './hideCursor.less';
+@import './aspectRatio.less';
+@import './fullscreenWeb.less';
+@import './fullscreenRotate.less';
+@import './mini.less';
+@import './autoSize.less';
+@import './flip.less';
+@import './plugins.less';
+@import './selector.less';

packages/artplayer/src/style/index.scss

@@ -1,23 +0,0 @@
-@import './artplayer.scss';
-@import './video.scss';
-@import './poster.scss';
-@import './subtitle.scss';
-@import './danmuku.scss';
-@import './layers.scss';
-@import './mask.scss';
-@import './loading.scss';
-@import './bottom.scss';
-@import './notice.scss';
-@import './contextmenu.scss';
-@import './setting.scss';
-@import './info.scss';
-@import './hideCursor.scss';
-@import './aspectRatio.scss';
-@import './fullscreenWeb.scss';
-@import './fullscreenRotate.scss';
-@import './mini.scss';
-@import './autoSize.scss';
-@import './flip.scss';
-@import './plugins.scss';
-@import './selector.scss';
-@import './balloon.scss';