x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-27 09:41:20 -08:00
Code Issues Packages Projects Releases Wiki Activity

Revert "feat(cssVar): add new CSS variables for font size and tooltip positioning"

Browse Source 
This reverts commit 59e9a32ecb.
This commit is contained in:
Harvey Zhao committed 2026-01-03 00:11:00 +08:00
1 parent 0bb4e1acdb
commit ae03670f9a
22 files changed
+92 -188
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/uncompiled/artplayer/index.js
+1 -1
View File
@@ -479,7 +479,7 @@ if (_utils.isBrowser) {
} }
},{"bundle-text:./style/index.less":"bFGMG","option-validator":"9hUEm","../package.json":"3r4tp","./config":"1dlGA","./contextmenu":"dx7Zz","./control":"cNVpy","./events":"dQzlM","./hotkey":"drylQ","./i18n":"3Jf1s","./icons":"avFu3","./info":"gvEup","./layer":"7Oas9","./loading":"glZdQ","./mask":"iGxU6","./notice":"jZEIz","./player":"iA4EC","./plugins":"6P64r","./scheme":"8YPbR","./setting":"7ATN8","./storage":"grHII","./subtitle":"hxr0l","./template":"5JwMQ","./utils":"gGxPm","./utils/emitter":"2qvfs","@parcel/transformer-js/src/esmodule-helpers.js":"8oCsH"}],"bFGMG":[function(require,module,exports,__globalThis) { },{"bundle-text:./style/index.less":"bFGMG","option-validator":"9hUEm","../package.json":"3r4tp","./config":"1dlGA","./contextmenu":"dx7Zz","./control":"cNVpy","./events":"dQzlM","./hotkey":"drylQ","./i18n":"3Jf1s","./icons":"avFu3","./info":"gvEup","./layer":"7Oas9","./loading":"glZdQ","./mask":"iGxU6","./notice":"jZEIz","./player":"iA4EC","./plugins":"6P64r","./scheme":"8YPbR","./setting":"7ATN8","./storage":"grHII","./subtitle":"hxr0l","./template":"5JwMQ","./utils":"gGxPm","./utils/emitter":"2qvfs","@parcel/transformer-js/src/esmodule-helpers.js":"8oCsH"}],"bFGMG":[function(require,module,exports,__globalThis) {
module.exports = ".art-video-player {\n --art-theme: red;\n --art-font-color: #fff;\n --art-background-color: #000;\n --art-font-size-sm: 12px;\n --art-text-shadow-color: #00000080;\n --art-transition-duration: .2s;\n --art-ease-standard: ease;\n --art-padding: 10px;\n --art-border-radius: 3px;\n --art-mobile-padding: 10px;\n --art-mobile-radius: 3px;\n --art-radius-sm: 3px;\n --art-space-xxs: 5px;\n --art-space-xs: 10px;\n --art-surface-hover-color: #ffffff1a;\n --art-surface-border-color: #ffffff1a;\n --art-surface-muted-color: #ffffff80;\n --art-surface-range-color: #fff3;\n --art-progress-height: 6px;\n --art-progress-color: #ffffff40;\n --art-progress-top-gap: 8px;\n --art-hover-color: #ffffff40;\n --art-loaded-color: #ffffff40;\n --art-tip-padding: 3px 5px;\n --art-tip-offset: -25px;\n --art-state-size: 80px;\n --art-state-opacity: .8;\n --art-bottom-height: 100px;\n --art-bottom-offset: 20px;\n --art-bottom-gap: 5px;\n --art-highlight-width: 8px;\n --art-highlight-color: #ffffff80;\n --art-control-height: 46px;\n --art-control-opacity: .75;\n --art-control-icon-size: 36px;\n --art-control-icon-scale: 1.1;\n --art-touch-hit-size: var(--art-control-height);\n --art-volume-height: 120px;\n --art-volume-handle-size: 14px;\n --art-lock-size: 36px;\n --art-indicator-scale: 0;\n --art-indicator-size: 16px;\n --art-fullscreen-web-index: 9999;\n --art-settings-icon-size: 24px;\n --art-settings-max-height: 300px;\n --art-selector-max-height: 300px;\n --art-contextmenus-min-width: 250px;\n --art-contextmenu-padding-x: 15px;\n --art-subtitle-font-size: 20px;\n --art-subtitle-gap: 5px;\n --art-subtitle-bottom: 15px;\n --art-subtitle-border: #000;\n --art-widget-background: #000000d9;\n --art-tip-background: #000000b3;\n --art-scrollbar-size: 4px;\n --art-scrollbar-background: #ffffff40;\n --art-scrollbar-background-hover: #ffffff80;\n --art-mini-progress-height: 2px;\n --art-shadow-low: 0 1px 2px 0 #0000001f;\n --art-shadow-medium: 0 1px 3px 0 #0003, 0 1px 2px -1px #0003;\n --art-shadow-high: 0 4px 10px 0 #00000040;\n --art-shadow-elevated: var(--art-shadow-medium);\n --art-icon-small-size: 15px;\n --art-overlay-dim: #00000040;\n --art-overlay-strong: #00000080;\n}\n\n.art-bg-cover {\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n}\n\n.art-bottom-gradient {\n background-image: linear-gradient(to top, #000, #0006, #0000);\n background-position: bottom;\n background-repeat: repeat-x;\n}\n\n.art-backdrop-filter {\n backdrop-filter: saturate(180%) blur(20px);\n background-color: #000000bf !important;\n}\n\n.art-truncate {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n\n.art-panel-surface {\n border-radius: var(--art-radius-sm);\n background-color: var(--art-widget-background);\n}\n\n.art-video-player {\n zoom: 1;\n text-align: left;\n user-select: none;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n color: var(--art-font-color);\n background-color: var(--art-background-color);\n text-shadow: 0 0 2px var(--art-text-shadow-color);\n -webkit-tap-highlight-color: #0000;\n -ms-touch-action: manipulation;\n touch-action: manipulation;\n -ms-high-contrast-adjust: none;\n direction: ltr;\n outline: 0;\n margin: 0 auto;\n padding: 0;\n font-family: PingFang SC, Helvetica Neue, Microsoft YaHei, Roboto, Arial, sans-serif;\n font-size: 14px;\n line-height: 1.3;\n position: relative;\n}\n\n.art-video-player *, .art-video-player :before, .art-video-player :after {\n box-sizing: border-box;\n}\n\n.art-video-player ::-webkit-scrollbar {\n width: var(--art-scrollbar-size);\n height: var(--art-scrollbar-size);\n}\n\n.art-video-player ::-webkit-scrollbar-thumb {\n background-color: var(--art-scrollbar-background);\n}\n\n.art-video-player ::-webkit-scrollbar-thumb:hover {\n background-color: var(--art-scrollbar-background-hover);\n}\n\n.art-video-player img {\n vertical-align: top;\n max-width: 100%;\n}\n\n.art-video-player svg {\n fill: var(--art-font-color);\n}\n\n.art-video-player a {\n color: var(--art-font-color);\n text-decoration: none;\n}\n\n.art-icon {\n justify-content: center;\n align-items: center;\n line-height: 1;\n display: flex;\n}\n\n.art-video-player.art-backdrop .art-contextmenus, .art-video-player.art-backdrop .art-info, .art-video-player.art-backdrop .art-settings, .art-video-player.art-backdrop .art-layer-auto-playback, .art-video-player.art-backdrop .art-selector-list, .art-video-player.art-backdrop .art-volume-inner {\n backdrop-filter: saturate(180%) blur(20px);\n background-color: #000000bf !important;\n}\n\n.art-video {\n z-index: 10;\n cursor: pointer;\n width: 100%;\n height: 100%;\n position: absolute;\n inset: 0;\n}\n\n.art-poster {\n z-index: 11;\n pointer-events: none;\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n width: 100%;\n height: 100%;\n positiLine truncated module.exports = ".art-video-player {\n --art-theme: red;\n --art-font-color: #fff;\n --art-background-color: #000;\n --art-text-shadow-color: #00000080;\n --art-transition-duration: .2s;\n --art-padding: 10px;\n --art-border-radius: 3px;\n --art-progress-height: 6px;\n --art-progress-color: #ffffff40;\n --art-progress-top-gap: 8px;\n --art-hover-color: #ffffff40;\n --art-loaded-color: #ffffff40;\n --art-state-size: 80px;\n --art-state-opacity: .8;\n --art-bottom-height: 100px;\n --art-bottom-offset: 20px;\n --art-bottom-gap: 5px;\n --art-highlight-width: 8px;\n --art-highlight-color: #ffffff80;\n --art-control-height: 46px;\n --art-control-opacity: .75;\n --art-control-icon-size: 36px;\n --art-control-icon-scale: 1.1;\n --art-volume-height: 120px;\n --art-volume-handle-size: 14px;\n --art-lock-size: 36px;\n --art-indicator-scale: 0;\n --art-indicator-size: 16px;\n --art-fullscreen-web-index: 9999;\n --art-settings-icon-size: 24px;\n --art-settings-max-height: 300px;\n --art-selector-max-height: 300px;\n --art-contextmenus-min-width: 250px;\n --art-subtitle-font-size: 20px;\n --art-subtitle-gap: 5px;\n --art-subtitle-bottom: 15px;\n --art-subtitle-border: #000;\n --art-widget-background: #000000d9;\n --art-tip-background: #000000b3;\n --art-scrollbar-size: 4px;\n --art-scrollbar-background: #ffffff40;\n --art-scrollbar-background-hover: #ffffff80;\n --art-mini-progress-height: 2px;\n}\n\n.art-bg-cover {\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n}\n\n.art-bottom-gradient {\n background-image: linear-gradient(to top, #000, #0006, #0000);\n background-position: bottom;\n background-repeat: repeat-x;\n}\n\n.art-backdrop-filter {\n backdrop-filter: saturate(180%) blur(20px);\n background-color: #000000bf !important;\n}\n\n.art-truncate {\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n}\n\n.art-video-player {\n zoom: 1;\n text-align: left;\n user-select: none;\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n color: var(--art-font-color);\n background-color: var(--art-background-color);\n text-shadow: 0 0 2px var(--art-text-shadow-color);\n -webkit-tap-highlight-color: #0000;\n -ms-touch-action: manipulation;\n touch-action: manipulation;\n -ms-high-contrast-adjust: none;\n direction: ltr;\n outline: 0;\n margin: 0 auto;\n padding: 0;\n font-family: PingFang SC, Helvetica Neue, Microsoft YaHei, Roboto, Arial, sans-serif;\n font-size: 14px;\n line-height: 1.3;\n position: relative;\n}\n\n.art-video-player *, .art-video-player :before, .art-video-player :after {\n box-sizing: border-box;\n}\n\n.art-video-player ::-webkit-scrollbar {\n width: var(--art-scrollbar-size);\n height: var(--art-scrollbar-size);\n}\n\n.art-video-player ::-webkit-scrollbar-thumb {\n background-color: var(--art-scrollbar-background);\n}\n\n.art-video-player ::-webkit-scrollbar-thumb:hover {\n background-color: var(--art-scrollbar-background-hover);\n}\n\n.art-video-player img {\n vertical-align: top;\n max-width: 100%;\n}\n\n.art-video-player svg {\n fill: var(--art-font-color);\n}\n\n.art-video-player a {\n color: var(--art-font-color);\n text-decoration: none;\n}\n\n.art-icon {\n justify-content: center;\n align-items: center;\n line-height: 1;\n display: flex;\n}\n\n.art-video-player.art-backdrop .art-contextmenus, .art-video-player.art-backdrop .art-info, .art-video-player.art-backdrop .art-settings, .art-video-player.art-backdrop .art-layer-auto-playback, .art-video-player.art-backdrop .art-selector-list, .art-video-player.art-backdrop .art-volume-inner {\n backdrop-filter: saturate(180%) blur(20px);\n background-color: #000000bf !important;\n}\n\n.art-video {\n z-index: 10;\n cursor: pointer;\n width: 100%;\n height: 100%;\n position: absolute;\n inset: 0;\n}\n\n.art-poster {\n z-index: 11;\n pointer-events: none;\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n width: 100%;\n height: 100%;\n position: absolute;\n inset: 0;\n}\n\n.art-video-player .art-subtitle {\n z-index: 20;\n text-align: center;\n pointer-events: none;\n justify-content: center;\n align-items: center;\n gap: var(--art-subtitle-gap);\n width: 100%;\n bottom: var(--art-subtitle-bottom);\n font-size: var(--art-subtitle-font-size);\n transition: bottom var(--art-transition-duration) ease;\n text-shadow: var(--art-subtitle-border) 1px 0 1px, var(--art-subtitle-border) 0 1px 1px, var(--art-subtitle-border) -1px 0 1px, var(--art-subtitle-border) 0 -1px 1px, var(--art-subtitle-border) 1px 1px 1px, var(--art-subtitle-border) -1px -1px 1px, var(--art-subtitle-border) 1px -1px 1px, var(--art-subtitle-border) -1px 1px 1px;\n flex-direction: column;\n padding: 0 5%;\n display: none;\n position: absolute;\n}\n\n.art-video-player.art-subtitle-show .art-subtitle {\n display: flex;\n}\n\n.art-video-player.art-control-show .art-subtitle {\n Line truncated
},{}],"9hUEm":[function(require,module,exports,__globalThis) { },{}],"9hUEm":[function(require,module,exports,__globalThis) {
!function(r, t) { !function(r, t) {
packages/artplayer/src/style/aspectRatio.less
-1
View File
@@ -1,7 +1,6 @@
.art-video-player { .art-video-player {
&[data-aspect-ratio] { &[data-aspect-ratio] {
overflow: hidden; overflow: hidden;
.art-video { .art-video {
object-fit: fill; object-fit: fill;
box-sizing: content-box; box-sizing: content-box;
packages/artplayer/src/style/backdrop.less
-1
View File
@@ -1,5 +1,4 @@
.art-video-player.art-backdrop { .art-video-player.art-backdrop {
.art-contextmenus, .art-contextmenus,
.art-info, .art-info,
.art-settings, .art-settings,
packages/artplayer/src/style/bottom.less
+2 -3
View File
@@ -8,14 +8,14 @@
overflow: hidden; overflow: hidden;
pointer-events: none; pointer-events: none;
padding: 0 var(--art-padding); padding: 0 var(--art-padding);
transition: all var(--art-transition-duration) var(--art-ease-standard); transition: all var(--art-transition-duration) ease;
background-size: 100% var(--art-bottom-height); background-size: 100% var(--art-bottom-height);
.art-bottom-gradient(); .art-bottom-gradient();
.art-controls, .art-controls,
.art-progress { .art-progress {
transform: translateY(var(--art-bottom-offset)); transform: translateY(var(--art-bottom-offset));
transition: transform var(--art-transition-duration) var(--art-ease-standard); transition: transform var(--art-transition-duration) ease;
} }
} }
@@ -23,7 +23,6 @@
&.art-hover { &.art-hover {
.art-bottom { .art-bottom {
opacity: 1; opacity: 1;
.art-controls, .art-controls,
.art-progress { .art-progress {
transform: translateY(0); transform: translateY(0);
packages/artplayer/src/style/contextmenu.less
+9 -6
View File
@@ -4,14 +4,17 @@
flex-direction: column; flex-direction: column;
position: absolute; position: absolute;
z-index: 120; z-index: 120;
padding: var(--art-space-xxs) 0; padding: 5px 0;
font-size: var(--art-font-size-sm); border-radius: var(--art-border-radius);
font-size: 12px;
background-color: var(--art-widget-background);
min-width: var(--art-contextmenus-min-width); min-width: var(--art-contextmenus-min-width);
.art-panel-surface();
.art-contextmenu { .art-contextmenu {
.art-menu-item-base(var(--art-space-xs), var(--art-contextmenu-padding-x), false); cursor: pointer;
border-bottom: 1px solid var(--art-surface-border-color); display: flex;
padding: 10px 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
span { span {
padding: 0 8px; padding: 0 8px;
@@ -23,7 +26,7 @@
} }
&:hover { &:hover {
background-color: var(--art-surface-hover-color); background-color: rgba(255, 255, 255, 0.1);
} }
&:last-child { &:last-child {
packages/artplayer/src/style/controls.less
+4 -4
View File
@@ -30,15 +30,15 @@
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
opacity: var(--art-control-opacity); opacity: var(--art-control-opacity);
min-height: var(--art-touch-hit-size); min-height: var(--art-control-height);
min-width: var(--art-touch-hit-size); min-width: var(--art-control-height);
transition: opacity var(--art-transition-duration) var(--art-ease-standard); transition: opacity var(--art-transition-duration) ease;
.art-icon { .art-icon {
height: var(--art-control-icon-size); height: var(--art-control-icon-size);
width: var(--art-control-icon-size); width: var(--art-control-icon-size);
transform: scale(var(--art-control-icon-scale)); transform: scale(var(--art-control-icon-scale));
transition: transform var(--art-transition-duration) var(--art-ease-standard); transition: transform var(--art-transition-duration) ease;
&:active { &:active {
transform: scale(calc(var(--art-control-icon-scale) * 0.8)); transform: scale(calc(var(--art-control-icon-scale) * 0.8));
packages/artplayer/src/style/hint.less
-8
View File
@@ -34,7 +34,6 @@
* tooltip body * tooltip body
*/ */
} }
[class*='hint--']:before, [class*='hint--']:before,
[class*='hint--']:after { [class*='hint--']:after {
position: absolute; position: absolute;
@@ -52,20 +51,17 @@
-moz-transition-delay: 0ms; -moz-transition-delay: 0ms;
transition-delay: 0ms; transition-delay: 0ms;
} }
[class*='hint--']:hover:before, [class*='hint--']:hover:before,
[class*='hint--']:hover:after { [class*='hint--']:hover:after {
visibility: visible; visibility: visible;
opacity: 1; opacity: 1;
} }
[class*='hint--']:hover:before, [class*='hint--']:hover:before,
[class*='hint--']:hover:after { [class*='hint--']:hover:after {
-webkit-transition-delay: 100ms; -webkit-transition-delay: 100ms;
-moz-transition-delay: 100ms; -moz-transition-delay: 100ms;
transition-delay: 100ms; transition-delay: 100ms;
} }
[class*='hint--']:before { [class*='hint--']:before {
content: ''; content: '';
position: absolute; position: absolute;
@@ -73,7 +69,6 @@
border: 6px solid transparent; border: 6px solid transparent;
z-index: 1000001; z-index: 1000001;
} }
[class*='hint--']:after { [class*='hint--']:after {
background: #000000; background: #000000;
color: white; color: white;
@@ -83,11 +78,9 @@
line-height: 12px; line-height: 12px;
white-space: nowrap; white-space: nowrap;
} }
[class*='hint--'][aria-label]:after { [class*='hint--'][aria-label]:after {
content: attr(aria-label); content: attr(aria-label);
} }
[class*='hint--'][data-hint]:after { [class*='hint--'][data-hint]:after {
content: attr(data-hint); content: attr(data-hint);
} }
@@ -474,7 +467,6 @@
* tooltip body * tooltip body
*/ */
} }
[class*='hint--']:after { [class*='hint--']:after {
text-shadow: 0 -1px 0px black; text-shadow: 0 -1px 0px black;
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3); box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
packages/artplayer/src/style/info.less
+4 -3
View File
@@ -5,9 +5,10 @@
left: var(--art-padding); left: var(--art-padding);
top: var(--art-padding); top: var(--art-padding);
z-index: 100; z-index: 100;
padding: var(--art-space-xs); padding: 10px;
font-size: var(--art-font-size-sm); font-size: 12px;
.art-panel-surface(); border-radius: var(--art-border-radius);
background-color: var(--art-widget-background);
.art-info-panel { .art-info-panel {
display: flex; display: flex;
packages/artplayer/src/style/loading.less
-1
View File
@@ -9,7 +9,6 @@
.art-loading { .art-loading {
display: flex; display: flex;
} }
.art-mask { .art-mask {
display: none; display: none;
} }
packages/artplayer/src/style/mask.less
+1 -1
View File
@@ -10,7 +10,7 @@
transform: scale(2); transform: scale(2);
width: var(--art-state-size); width: var(--art-state-size);
height: var(--art-state-size); height: var(--art-state-size);
transition: all var(--art-transition-duration) var(--art-ease-standard); transition: all var(--art-transition-duration) ease;
} }
} }
packages/artplayer/src/style/mini.less
+6 -7
View File
@@ -8,8 +8,8 @@
cursor: move; cursor: move;
user-select: none; user-select: none;
overflow: hidden; overflow: hidden;
transition: opacity var(--art-transition-duration) var(--art-ease-standard); transition: opacity 0.2s ease;
box-shadow: 0 0 5px var(--art-overlay-strong); box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
svg { svg {
fill: #fff; fill: #fff;
@@ -26,7 +26,7 @@
top: 10px; top: 10px;
cursor: pointer; cursor: pointer;
opacity: 0; opacity: 0;
transition: opacity var(--art-transition-duration) var(--art-ease-standard); transition: opacity 0.2s ease;
} }
.art-mini-state { .art-mini-state {
@@ -34,15 +34,15 @@
.art-center(); .art-center();
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
transition: opacity var(--art-transition-duration) var(--art-ease-standard); transition: opacity 0.2s ease;
background-color: var(--art-overlay-dim); background-color: rgba(0, 0, 0, 0.25);
.art-icon { .art-icon {
opacity: 0.75; opacity: 0.75;
cursor: pointer; cursor: pointer;
transform: scale(3); transform: scale(3);
pointer-events: auto; pointer-events: auto;
transition: transform var(--art-transition-duration) var(--art-ease-standard); transition: transform 0.2s ease;
&:active { &:active {
transform: scale(2.5); transform: scale(2.5);
@@ -55,7 +55,6 @@
} }
&:hover { &:hover {
.art-mini-close, .art-mini-close,
.art-mini-state { .art-mini-state {
opacity: 1; opacity: 1;
packages/artplayer/src/style/mixins.less
-63
View File
@@ -35,66 +35,3 @@
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
.art-panel-surface {
border-radius: var(--art-radius-sm);
background-color: var(--art-widget-background);
}
.art-flyout-hidden(@distance: 10px, @axis: y) {
opacity: 0;
pointer-events: none;
transition: all var(--art-transition-duration) var(--art-ease-standard);
& when (@axis =y) {
transform: translateY(@distance);
}
& when (@axis =x) {
transform: translateX(@distance);
}
}
.art-flyout-visible(@axis: y) {
opacity: 1;
pointer-events: auto;
& when (@axis =y) {
transform: translateY(0);
}
& when (@axis =x) {
transform: translateX(0);
}
}
.art-elevation(@level: medium) when (@level =low) {
box-shadow: var(--art-shadow-low);
}
.art-elevation(@level: medium) when (@level =medium) {
box-shadow: var(--art-shadow-medium);
}
.art-elevation(@level: medium) when (@level =high) {
box-shadow: var(--art-shadow-high);
}
.art-text-muted(@size: 12px) {
font-size: @size;
color: var(--art-surface-muted-color);
}
.art-menu-item-base(@padding-y, @padding-x, @animated: true) {
display: flex;
cursor: pointer;
padding: @padding-y @padding-x;
& when (@animated = true) {
transition: background-color var(--art-transition-duration) var(--art-ease-standard);
}
&:hover {
background-color: var(--art-surface-hover-color);
}
}
packages/artplayer/src/style/mobile.less
-2
View File
@@ -7,8 +7,6 @@
--art-selector-max-height: 180px; --art-selector-max-height: 180px;
--art-indicator-scale: 1; --art-indicator-scale: 1;
--art-control-opacity: 1; --art-control-opacity: 1;
--art-padding: var(--art-mobile-padding);
--art-border-radius: var(--art-mobile-radius);
.art-controls-left { .art-controls-left {
margin-left: calc(var(--art-padding) / -1); margin-left: calc(var(--art-padding) / -1);
packages/artplayer/src/style/notice.less
+1 -1
View File
@@ -9,7 +9,7 @@
.art-notice-inner { .art-notice-inner {
display: inline-flex; display: inline-flex;
padding: var(--art-space-xxs); padding: 5px;
line-height: 1; line-height: 1;
border-radius: var(--art-border-radius); border-radius: var(--art-border-radius);
background-color: var(--art-tip-background); background-color: var(--art-tip-background);
packages/artplayer/src/style/plugins.less
+8 -5
View File
@@ -16,19 +16,20 @@
gap: 10px; gap: 10px;
align-items: center; align-items: center;
position: absolute; position: absolute;
padding: var(--art-space-xs); border-radius: var(--art-border-radius);
padding: 10px;
line-height: 1; line-height: 1;
left: var(--art-padding); left: var(--art-padding);
bottom: calc(var(--art-control-height) + var(--art-bottom-gap) + 10px); bottom: calc(var(--art-control-height) + var(--art-bottom-gap) + 10px);
.art-panel-surface(); background-color: var(--art-widget-background);
.art-auto-playback-close { .art-auto-playback-close {
.art-center(); .art-center();
cursor: pointer; cursor: pointer;
svg { svg {
width: var(--art-icon-small-size); width: 15px;
height: var(--art-icon-small-size); height: 15px;
fill: var(--art-theme); fill: var(--art-theme);
} }
} }
@@ -54,7 +55,9 @@
.art-controls, .art-controls,
.art-progress { .art-progress {
transform: translateY(calc(var(--art-control-height) + var(--art-bottom-gap) + var(--art-progress-height) / 4)); transform: translateY(
calc(var(--art-control-height) + var(--art-bottom-gap) + var(--art-progress-height) / 4)
);
} }
.art-progress-indicator { .art-progress-indicator {
packages/artplayer/src/style/progress.less
+13 -14
View File
@@ -18,7 +18,7 @@
position: relative; position: relative;
height: 50%; height: 50%;
width: 100%; width: 100%;
transition: height var(--art-transition-duration) var(--art-ease-standard); transition: height var(--art-transition-duration) ease;
background-color: var(--art-progress-color); background-color: var(--art-progress-color);
.art-progress-hover { .art-progress-hover {
@@ -63,7 +63,7 @@
height: var(--art-indicator-size); height: var(--art-indicator-size);
transform: scale(var(--art-indicator-scale)); transform: scale(var(--art-indicator-scale));
margin-left: calc(var(--art-indicator-size) / -2); margin-left: calc(var(--art-indicator-size) / -2);
transition: transform var(--art-transition-duration) var(--art-ease-standard); transition: transform var(--art-transition-duration) ease;
.art-icon { .art-icon {
width: 100%; width: 100%;
@@ -86,16 +86,15 @@
opacity: 0; opacity: 0;
position: absolute; position: absolute;
z-index: 50; z-index: 50;
top: var(--art-tip-offset); top: -25px;
left: 0; left: 0;
padding: var(--art-tip-padding); padding: 3px 5px;
line-height: 1; line-height: 1;
font-size: var(--art-font-size-sm); font-size: 12px;
border-radius: var(--art-border-radius); border-radius: var(--art-border-radius);
white-space: nowrap; white-space: nowrap;
background-color: var(--art-tip-background); background-color: var(--art-tip-background);
transition: transform var(--art-transition-duration) var(--art-ease-standard), transition: transform var(--art-transition-duration) ease, opacity var(--art-transition-duration) ease;
opacity var(--art-transition-duration) var(--art-ease-standard);
} }
} }
@@ -113,11 +112,13 @@
position: absolute; position: absolute;
bottom: calc(var(--art-bottom-gap) + 10px); bottom: calc(var(--art-bottom-gap) + 10px);
left: 0; left: 0;
border-radius: var(--art-border-radius);
pointer-events: none; pointer-events: none;
.art-panel-surface(); background-color: var(--art-widget-background);
transition: transform var(--art-transition-duration) var(--art-ease-standard), transition: transform var(--art-transition-duration) ease, opacity var(--art-transition-duration) ease;
opacity var(--art-transition-duration) var(--art-ease-standard); box-shadow:
.art-elevation(medium); 0 1px 3px 0 rgb(0 0 0 / 0.2),
0 1px 2px -1px rgb(0 0 0 / 0.2);
} }
} }
@@ -130,9 +131,7 @@
.art-progress-hover { .art-progress-hover {
.art-bottom .art-progress { .art-bottom .art-progress {
.art-control-progress .art-control-progress-inner .art-progress-tip, .art-control-thumbnails {
.art-control-progress .art-control-progress-inner .art-progress-tip,
.art-control-thumbnails {
transform: scale(1); transform: scale(1);
opacity: 1; opacity: 1;
} }
packages/artplayer/src/style/selector.less
+10 -4
View File
@@ -9,12 +9,16 @@
align-items: center; align-items: center;
text-align: center; text-align: center;
position: absolute; position: absolute;
border-radius: var(--art-border-radius);
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
opacity: 0;
transform: translateY(10px);
pointer-events: none;
bottom: var(--art-control-height); bottom: var(--art-control-height);
max-height: var(--art-selector-max-height); max-height: var(--art-selector-max-height);
.art-panel-surface(); background-color: var(--art-widget-background);
.art-flyout-hidden(); transition: all var(--art-transition-duration) ease;
.art-selector-item { .art-selector-item {
.art-center(); .art-center();
@@ -24,7 +28,7 @@
line-height: 1; line-height: 1;
&:hover { &:hover {
background-color: var(--art-surface-hover-color); background-color: rgba(255, 255, 255, 0.1);
} }
&:hover, &:hover,
@@ -36,7 +40,9 @@
&:hover { &:hover {
.art-selector-list { .art-selector-list {
.art-flyout-visible(); opacity: 1;
transform: translateY(0);
pointer-events: auto;
} }
} }
} }
packages/artplayer/src/style/setting.less
+18 -10
View File
@@ -7,11 +7,12 @@
left: auto; left: auto;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
border-radius: var(--art-border-radius);
max-height: var(--art-settings-max-height); max-height: var(--art-settings-max-height);
right: var(--art-padding); right: var(--art-padding);
bottom: var(--art-control-height); bottom: var(--art-control-height);
transition: all var(--art-transition-duration) var(--art-ease-standard); transition: all var(--art-transition-duration) ease;
.art-panel-surface(); background-color: var(--art-widget-background);
.art-setting-panel { .art-setting-panel {
display: none; display: none;
@@ -22,10 +23,17 @@
} }
.art-setting-item { .art-setting-item {
.art-menu-item-base(0, var(--art-space-xxs)); display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0 5px;
cursor: pointer;
overflow: hidden; overflow: hidden;
transition: background-color var(--art-transition-duration) ease;
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
&.art-current { &.art-current {
color: var(--art-theme); color: var(--art-theme);
@@ -33,7 +41,7 @@
.art-icon-check { .art-icon-check {
visibility: hidden; visibility: hidden;
height: var(--art-icon-small-size); height: 15px;
} }
&.art-current .art-icon-check { &.art-current .art-icon-check {
@@ -43,7 +51,7 @@
.art-setting-item-left { .art-setting-item-left {
.art-center(); .art-center();
flex-shrink: 0; flex-shrink: 0;
gap: var(--art-space-xxs); gap: 5px;
.art-setting-item-left-icon { .art-setting-item-left-icon {
.art-center(); .art-center();
@@ -54,12 +62,12 @@
.art-setting-item-right { .art-setting-item-right {
.art-center(); .art-center();
gap: var(--art-space-xxs); gap: 5px;
font-size: var(--art-font-size-sm); font-size: 12px;
.art-setting-item-right-tooltip { .art-setting-item-right-tooltip {
white-space: nowrap; white-space: nowrap;
color: var(--art-surface-muted-color); color: rgba(255, 255, 255, 0.5);
} }
.art-setting-item-right-icon { .art-setting-item-right-icon {
@@ -73,13 +81,13 @@
width: 80px; width: 80px;
outline: none; outline: none;
appearance: none; appearance: none;
background-color: var(--art-surface-range-color); background-color: rgba(255, 255, 255, 0.2);
} }
} }
} }
.art-setting-item-back { .art-setting-item-back {
border-bottom: 1px solid var(--art-surface-border-color); border-bottom: 1px solid rgba(255, 255, 255, 0.1);
} }
} }
} }
packages/artplayer/src/style/subtitle.less
+1 -1
View File
@@ -11,7 +11,7 @@
gap: var(--art-subtitle-gap); gap: var(--art-subtitle-gap);
bottom: var(--art-subtitle-bottom); bottom: var(--art-subtitle-bottom);
font-size: var(--art-subtitle-font-size); font-size: var(--art-subtitle-font-size);
transition: bottom var(--art-transition-duration) var(--art-ease-standard); transition: bottom var(--art-transition-duration) ease;
text-shadow: text-shadow:
var(--art-subtitle-border) 1px 0 1px, var(--art-subtitle-border) 1px 0 1px,
var(--art-subtitle-border) 0 1px 1px, var(--art-subtitle-border) 0 1px 1px,
packages/artplayer/src/style/variables.less
-22
View File
@@ -2,28 +2,15 @@
--art-theme: #f00; --art-theme: #f00;
--art-font-color: #fff; --art-font-color: #fff;
--art-background-color: #000; --art-background-color: #000;
--art-font-size-sm: 12px;
--art-text-shadow-color: rgba(0, 0, 0, 0.5); --art-text-shadow-color: rgba(0, 0, 0, 0.5);
--art-transition-duration: 0.2s; --art-transition-duration: 0.2s;
--art-ease-standard: ease;
--art-padding: 10px; --art-padding: 10px;
--art-border-radius: 3px; --art-border-radius: 3px;
--art-mobile-padding: 10px;
--art-mobile-radius: 3px;
--art-radius-sm: 3px;
--art-space-xxs: 5px;
--art-space-xs: 10px;
--art-surface-hover-color: rgba(255, 255, 255, 0.1);
--art-surface-border-color: rgba(255, 255, 255, 0.1);
--art-surface-muted-color: rgba(255, 255, 255, 0.5);
--art-surface-range-color: rgba(255, 255, 255, 0.2);
--art-progress-height: 6px; --art-progress-height: 6px;
--art-progress-color: rgba(255, 255, 255, 0.25); --art-progress-color: rgba(255, 255, 255, 0.25);
--art-progress-top-gap: 8px; --art-progress-top-gap: 8px;
--art-hover-color: rgba(255, 255, 255, 0.25); --art-hover-color: rgba(255, 255, 255, 0.25);
--art-loaded-color: rgba(255, 255, 255, 0.25); --art-loaded-color: rgba(255, 255, 255, 0.25);
--art-tip-padding: 3px 5px;
--art-tip-offset: -25px;
--art-state-size: 80px; --art-state-size: 80px;
--art-state-opacity: 0.8; --art-state-opacity: 0.8;
--art-bottom-height: 100px; --art-bottom-height: 100px;
@@ -35,7 +22,6 @@
--art-control-opacity: 0.75; --art-control-opacity: 0.75;
--art-control-icon-size: 36px; --art-control-icon-size: 36px;
--art-control-icon-scale: 1.1; --art-control-icon-scale: 1.1;
--art-touch-hit-size: var(--art-control-height);
--art-volume-height: 120px; --art-volume-height: 120px;
--art-volume-handle-size: 14px; --art-volume-handle-size: 14px;
--art-lock-size: 36px; --art-lock-size: 36px;
@@ -46,7 +32,6 @@
--art-settings-max-height: 300px; --art-settings-max-height: 300px;
--art-selector-max-height: 300px; --art-selector-max-height: 300px;
--art-contextmenus-min-width: 250px; --art-contextmenus-min-width: 250px;
--art-contextmenu-padding-x: 15px;
--art-subtitle-font-size: 20px; --art-subtitle-font-size: 20px;
--art-subtitle-gap: 5px; --art-subtitle-gap: 5px;
--art-subtitle-bottom: 15px; --art-subtitle-bottom: 15px;
@@ -57,11 +42,4 @@
--art-scrollbar-background: rgba(255, 255, 255, 0.25); --art-scrollbar-background: rgba(255, 255, 255, 0.25);
--art-scrollbar-background-hover: rgba(255, 255, 255, 0.5); --art-scrollbar-background-hover: rgba(255, 255, 255, 0.5);
--art-mini-progress-height: 2px; --art-mini-progress-height: 2px;
--art-shadow-low: 0 1px 2px 0 rgb(0 0 0 / 0.12);
--art-shadow-medium: 0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.2);
--art-shadow-high: 0 4px 10px 0 rgb(0 0 0 / 0.25);
--art-shadow-elevated: var(--art-shadow-medium);
--art-icon-small-size: 15px;
--art-overlay-dim: rgba(0, 0, 0, 0.25);
--art-overlay-strong: rgba(0, 0, 0, 0.5);
} }
packages/artplayer/src/style/volume.less
+14 -8
View File
@@ -7,23 +7,27 @@
left: 0; left: 0;
right: 0; right: 0;
padding: 0 5px; padding: 0 5px;
.art-text-muted(12px); font-size: 12px;
text-align: center; text-align: center;
cursor: default; cursor: default;
opacity: 0;
transform: translateY(10px);
pointer-events: none;
bottom: var(--art-control-height); bottom: var(--art-control-height);
width: var(--art-control-height); width: var(--art-control-height);
height: var(--art-volume-height); height: var(--art-volume-height);
.art-flyout-hidden(); transition: all var(--art-transition-duration) ease;
.art-volume-inner { .art-volume-inner {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
gap: var(--art-space-xs); gap: 10px;
height: 100%; height: 100%;
width: 100%; width: 100%;
padding: var(--art-space-xs) 0 12px; padding: 10px 0 12px;
.art-panel-surface(); border-radius: var(--art-border-radius);
background-color: var(--art-widget-background);
.art-volume-slider { .art-volume-slider {
flex: 1; flex: 1;
@@ -40,7 +44,7 @@
width: 2px; width: 2px;
border-radius: var(--art-border-radius); border-radius: var(--art-border-radius);
overflow: hidden; overflow: hidden;
background-color: var(--art-hover-color); background-color: rgba(255, 255, 255, 0.25);
.art-volume-loaded { .art-volume-loaded {
.art-full(0); .art-full(0);
@@ -57,7 +61,7 @@
transform: scale(1); transform: scale(1);
border-radius: 100%; border-radius: 100%;
background-color: var(--art-theme); background-color: var(--art-theme);
transition: transform var(--art-transition-duration) var(--art-ease-standard); transition: transform var(--art-transition-duration) ease;
} }
&:active { &:active {
@@ -71,7 +75,9 @@
&:hover { &:hover {
.art-volume-panel { .art-volume-panel {
.art-flyout-visible(); opacity: 1;
transform: translateY(0);
pointer-events: auto;
} }
} }
} }
packages/artplayer/types/cssVar.d.ts
Vendored
-22
View File
@@ -2,28 +2,15 @@ export interface CssVar {
'--art-theme': string '--art-theme': string
'--art-font-color': string '--art-font-color': string
'--art-background-color': string '--art-background-color': string
'--art-font-size-sm': string
'--art-text-shadow-color': string '--art-text-shadow-color': string
'--art-transition-duration': string '--art-transition-duration': string
'--art-ease-standard': string
'--art-padding': string '--art-padding': string
'--art-border-radius': string '--art-border-radius': string
'--art-mobile-padding': string
'--art-mobile-radius': string
'--art-radius-sm': string
'--art-space-xxs': string
'--art-space-xs': string
'--art-surface-hover-color': string
'--art-surface-border-color': string
'--art-surface-muted-color': string
'--art-surface-range-color': string
'--art-progress-height': string '--art-progress-height': string
'--art-progress-color': string '--art-progress-color': string
'--art-progress-top-gap': string '--art-progress-top-gap': string
'--art-hover-color': string '--art-hover-color': string
'--art-loaded-color': string '--art-loaded-color': string
'--art-tip-padding': string
'--art-tip-offset': string
'--art-state-size': string '--art-state-size': string
'--art-state-opacity': number '--art-state-opacity': number
'--art-bottom-height': string '--art-bottom-height': string
@@ -35,7 +22,6 @@ export interface CssVar {
'--art-control-opacity': number '--art-control-opacity': number
'--art-control-icon-size': string '--art-control-icon-size': string
'--art-control-icon-scale': number '--art-control-icon-scale': number
'--art-touch-hit-size': string
'--art-volume-height': string '--art-volume-height': string
'--art-volume-handle-size': string '--art-volume-handle-size': string
'--art-lock-size': string '--art-lock-size': string
@@ -46,7 +32,6 @@ export interface CssVar {
'--art-settings-max-height': string '--art-settings-max-height': string
'--art-selector-max-height': string '--art-selector-max-height': string
'--art-contextmenus-min-width': string '--art-contextmenus-min-width': string
'--art-contextmenu-padding-x': string
'--art-subtitle-font-size': string '--art-subtitle-font-size': string
'--art-subtitle-gap': string '--art-subtitle-gap': string
'--art-subtitle-bottom': string '--art-subtitle-bottom': string
@@ -57,11 +42,4 @@ export interface CssVar {
'--art-scrollbar-background': string '--art-scrollbar-background': string
'--art-scrollbar-background-hover': string '--art-scrollbar-background-hover': string
'--art-mini-progress-height': string '--art-mini-progress-height': string
'--art-shadow-low': string
'--art-shadow-medium': string
'--art-shadow-high': string
'--art-shadow-elevated': string
'--art-icon-small-size': string
'--art-overlay-dim': string
'--art-overlay-strong': string
} }