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

Refactor styles in ArtPlayer components for improved readability and consistency

Browse Source 
- Consolidated loading styles in loading.less for better structure.
- Updated mask styles in mask.less to enhance clarity.
- Refined mini popup styles in mini.less, adding transition effects.
- Improved mixins in mixins.less for consistent styling across components.
- Adjusted mobile styles in mobile.less for better responsiveness.
- Enhanced notice styles in notice.less for improved visibility.
- Streamlined plugin styles in plugins.less for better organization.
- Simplified poster styles in poster.less for clarity.
- Refined progress styles in progress.less, enhancing hover effects.
- Updated selector styles in selector.less for better interaction.
- Improved settings styles in setting.less for better usability.
- Enhanced subtitle styles in subtitle.less for better visibility.
- Updated variable definitions in variables.less for consistency.
- Refined video styles in video.less for improved layout.
- Enhanced volume control styles in volume.less for better user experience.
- Optimized rate limiting logic in build-llm.js and trans-docs.js for better performance.
This commit is contained in:
Harvey Zhao committed 2026-03-08 15:03:43 +08:00
1 parent b11f0eb99a
commit 740ac4cb24
39 files changed
+2043 -2030
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

eslint.config.js
+13 -5
View File
@@ -1,7 +1,15 @@
import antfu from '@antfu/eslint-config' import antfu from "@antfu/eslint-config";
export default antfu({ export default antfu({
rules: { ignores: [
'eslint-comments/no-unlimited-disable': 'off', "**/hint.less",
}, ],
}) formatters: {
css: true,
html: true,
markdown: 'prettier',
},
rules: {
"eslint-comments/no-unlimited-disable": "off",
},
});
package.json
+2 -1
View File
@@ -48,6 +48,7 @@
"dotenv": "^17.2.1", "dotenv": "^17.2.1",
"esbuild": "^0.27.3", "esbuild": "^0.27.3",
"eslint": "^9.32.0", "eslint": "^9.32.0",
"eslint-plugin-format": "^2.0.1",
"glob": "^13.0.6", "glob": "^13.0.6",
"lerna": "^8.2.3", "lerna": "^8.2.3",
"less": "^4.5.1", "less": "^4.5.1",
@@ -57,4 +58,4 @@
"terser": "^5.46.0", "terser": "^5.46.0",
"vite": "^7.3.1" "vite": "^7.3.1"
} }
} }
packages/artplayer-plugin-ads/src/style.less
+71 -71
View File
@@ -1,80 +1,80 @@
.artplayer-plugin-ads { .artplayer-plugin-ads {
position: absolute;
z-index: 150;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
font-size: 13px;
line-height: 1;
color: #fff;
background-color: #000;
.artplayer-plugin-ads-html {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.artplayer-plugin-ads-video {
width: 100%;
height: 100%;
}
.artplayer-plugin-ads-timer {
display: none;
position: absolute;
top: 10px;
right: 10px;
& > div {
display: flex;
align-items: center;
background-color: rgb(0 0 0 / 50%);
border-radius: 15px;
margin-left: 5px;
padding: 5px 10px;
cursor: pointer;
}
}
.artplayer-plugin-ads-control {
display: none;
position: absolute;
bottom: 10px;
right: 10px;
& > div {
display: flex;
align-items: center;
background-color: rgb(0 0 0 / 50%);
border-radius: 15px;
margin-left: 5px;
padding: 5px 10px;
cursor: pointer;
}
.art-icon svg {
width: 20px;
height: 20px;
}
}
.artplayer-plugin-ads-loading {
display: flex;
align-items: center;
justify-content: center;
position: absolute; position: absolute;
z-index: 150;
left: 0; left: 0;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; }
font-size: 13px;
line-height: 1;
color: #fff;
background-color: #000;
.artplayer-plugin-ads-html {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.artplayer-plugin-ads-video {
width: 100%;
height: 100%;
}
.artplayer-plugin-ads-timer {
display: none;
position: absolute;
top: 10px;
right: 10px;
& > div {
display: flex;
align-items: center;
background-color: rgb(0 0 0 / 50%);
border-radius: 15px;
margin-left: 5px;
padding: 5px 10px;
cursor: pointer;
}
}
.artplayer-plugin-ads-control {
display: none;
position: absolute;
bottom: 10px;
right: 10px;
& > div {
display: flex;
align-items: center;
background-color: rgb(0 0 0 / 50%);
border-radius: 15px;
margin-left: 5px;
padding: 5px 10px;
cursor: pointer;
}
.art-icon svg {
width: 20px;
height: 20px;
}
}
.artplayer-plugin-ads-loading {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
} }
packages/artplayer-plugin-asr/src/style.less
+27 -27
View File
@@ -1,31 +1,31 @@
.art-video-player { .art-video-player {
.art-layer-asr { .art-layer-asr {
pointer-events: none !important; pointer-events: none !important;
position: absolute; position: absolute;
z-index: 150; z-index: 150;
inset: 0px; inset: 0px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: end; justify-content: end;
padding: 0 2%; padding: 0 2%;
font-size: 1rem; font-size: 1rem;
gap: var(--art-subtitle-gap); gap: var(--art-subtitle-gap);
padding-bottom: var(--art-subtitle-bottom); padding-bottom: var(--art-subtitle-bottom);
transition: padding-bottom var(--art-transition-duration) ease; transition: padding-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,
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,
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,
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;
} }
&.art-control-show { &.art-control-show {
.art-layer-asr { .art-layer-asr {
padding-bottom: calc(var(--art-control-height) + var(--art-subtitle-bottom)); padding-bottom: calc(var(--art-control-height) + var(--art-subtitle-bottom));
}
} }
}
} }
packages/artplayer-plugin-chapter/src/style.less
+64 -62
View File
@@ -1,72 +1,74 @@
.artplayer-plugin-chapter { .artplayer-plugin-chapter {
.art-control-progress-inner { .art-control-progress-inner {
height: 100% !important; height: 100% !important;
background-color: transparent !important; background-color: transparent !important;
&>.art-progress-hover, & > .art-progress-hover,
&>.art-progress-loaded, & > .art-progress-loaded,
&>.art-progress-played { & > .art-progress-played {
display: none !important; display: none !important;
}
} }
}
.art-control-thumbnails { .art-control-thumbnails {
bottom: calc(var(--art-bottom-gap) + 64px) !important; bottom: calc(var(--art-bottom-gap) + 64px) !important;
} }
.art-chapters { .art-chapters {
position: absolute; position: absolute;
z-index: 0; z-index: 0;
inset: 0; inset: 0;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 4px; gap: 4px;
height: 100%;
transform: scaleY(1.25);
.art-chapter {
display: flex;
align-items: center;
height: 100%;
.art-chapter-inner {
position: relative;
cursor: pointer;
width: 100%;
height: 50%;
border-radius: 10px;
overflow: hidden;
transition: height var(--art-transition-duration) ease;
background-color: var(--art-progress-color);
}
&:hover .art-chapter-inner {
height: 100%; height: 100%;
transform: scaleY(1.25); }
.art-chapter {
display: flex;
align-items: center;
height: 100%;
.art-chapter-inner {
position: relative;
cursor: pointer;
width: 100%;
height: 50%;
border-radius: 10px;
overflow: hidden;
transition: height var(--art-transition-duration) ease;
background-color: var(--art-progress-color);
}
&:hover .art-chapter-inner {
height: 100%;
}
}
} }
}
.art-chapter-title {
transform-origin: bottom center;
transform: scale(0.5);
opacity: 0;
position: absolute;
z-index: 70;
top: -50px;
left: 0;
padding: 3px 5px;
line-height: 1;
font-size: 14px;
border-radius: var(--art-border-radius);
white-space: nowrap;
background-color: var(--art-tip-background);
transition:
transform var(--art-transition-duration) ease,
opacity var(--art-transition-duration) ease;
}
&.art-progress-hover {
.art-chapter-title { .art-chapter-title {
transform-origin: bottom center; transform: scale(1);
transform: scale(0.5); opacity: 1;
opacity: 0;
position: absolute;
z-index: 70;
top: -50px;
left: 0;
padding: 3px 5px;
line-height: 1;
font-size: 14px;
border-radius: var(--art-border-radius);
white-space: nowrap;
background-color: var(--art-tip-background);
transition: transform var(--art-transition-duration) ease, opacity var(--art-transition-duration) ease;
} }
}
&.art-progress-hover { }
.art-chapter-title {
transform: scale(1);
opacity: 1;
}
}
}
packages/artplayer-plugin-danmuku/src/style.less
+387 -387
View File
@@ -1,471 +1,471 @@
@highlight: #00a1d6; @highlight: #00a1d6;
.artplayer-plugin-danmuku { .artplayer-plugin-danmuku {
display: flex;
position: relative;
z-index: 99;
align-items: center;
justify-content: center;
font-size: 12px;
height: 32px;
width: 100%;
color: #fff;
font-weight: 300;
flex-shrink: 0;
gap: 10px;
.apd-icon {
cursor: pointer;
opacity: 0.75;
transition: all 0.2s ease;
fill: #fff;
&:hover {
opacity: 1;
}
}
.apd-config {
display: flex; display: flex;
position: relative; position: relative;
z-index: 99;
.apd-config-panel {
position: absolute;
bottom: 24px;
left: 0;
width: 320px;
padding: 10px;
opacity: 0;
pointer-events: none;
.apd-config-panel-inner {
width: 100%;
border-radius: 3px;
background-color: rgba(0, 0, 0, 0.85);
padding: 10px;
}
}
&:hover {
.apd-config-panel {
opacity: 100;
pointer-events: all;
}
}
}
.apd-config-mode,
.apd-config-slider,
.apd-config-other,
.apd-style-mode {
margin-bottom: 15px;
}
.apd-modes {
display: flex;
align-items: center;
margin-top: 5px;
gap: 20px;
.apd-mode {
cursor: pointer;
text-align: center;
&:hover {
color: @highlight;
}
}
}
.apd-config-slider {
display: flex;
align-items: center;
gap: 12px;
.apd-value {
width: 32px;
text-align: right;
}
}
.apd-slider {
position: relative;
flex: 1;
display: flex;
height: 20px;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 12px; cursor: pointer;
height: 32px;
width: 100%;
color: #fff;
font-weight: 300;
flex-shrink: 0;
gap: 10px;
.apd-icon { .apd-slider-line {
cursor: pointer; position: relative;
opacity: 0.75; height: 2px;
transition: all 0.2s ease; width: 100%;
fill: #fff; overflow: hidden;
border-radius: 3px;
&:hover { background-color: rgba(255, 255, 255, 0.25);
opacity: 1;
}
} }
.apd-config { .apd-slider-points {
display: flex; position: absolute;
position: relative; inset: 0;
display: flex;
align-items: center;
justify-content: space-between;
.apd-config-panel { .apd-slider-point {
position: absolute; width: 2px;
bottom: 24px; height: 2px;
left: 0; border-radius: 50%;
width: 320px; background-color: rgba(255, 255, 255, 0.5);
padding: 10px; }
opacity: 0;
pointer-events: none;
.apd-config-panel-inner {
width: 100%;
border-radius: 3px;
background-color: rgba(0, 0, 0, 0.85);
padding: 10px;
}
}
&:hover {
.apd-config-panel {
opacity: 100;
pointer-events: all;
}
}
} }
.apd-config-mode, .apd-slider-progress {
.apd-config-slider, width: 0%;
.apd-config-other, height: 100%;
.apd-style-mode { background-color: @highlight;
margin-bottom: 15px;
} }
.apd-modes { .apd-slider-dot {
display: flex; position: absolute;
align-items: center; transform: translateX(-6px);
margin-top: 5px; left: 0%;
gap: 20px; width: 12px;
height: 12px;
.apd-mode { border-radius: 50%;
cursor: pointer; background-color: @highlight;
text-align: center;
&:hover {
color: @highlight;
}
}
} }
.apd-config-slider { .apd-slider-steps {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; justify-content: space-between;
position: absolute;
bottom: -12px;
width: calc(100% + 32px);
color: #777;
.apd-value { .apd-slider-step {
width: 32px;
text-align: right;
}
}
.apd-slider {
position: relative;
flex: 1;
display: flex;
height: 20px;
align-items: center;
justify-content: center;
cursor: pointer;
.apd-slider-line {
position: relative;
height: 2px;
width: 100%;
overflow: hidden;
border-radius: 3px;
background-color: rgba(255, 255, 255, 0.25);
}
.apd-slider-points {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: space-between;
.apd-slider-point {
width: 2px;
height: 2px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
}
}
.apd-slider-progress {
width: 0%;
height: 100%;
background-color: @highlight;
}
.apd-slider-dot {
position: absolute;
transform: translateX(-6px);
left: 0%;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: @highlight;
}
.apd-slider-steps {
display: flex;
align-items: center;
justify-content: space-between;
position: absolute;
bottom: -12px;
width: calc(100% + 32px);
color: #777;
.apd-slider-step {
flex-shrink: 0;
width: 36px;
text-align: center;
scale: 0.95;
}
}
}
.apd-config-other {
display: flex;
align-items: center;
gap: 20px;
.apd-check-off,
.apd-check-on {
width: 16px;
height: 16px;
}
.apd-other {
display: flex;
align-items: center;
cursor: pointer;
gap: 2px;
&:hover {
color: @highlight;
}
}
}
.apd-emitter {
display: flex;
flex: 1;
align-items: center;
height: 100%;
background-color: rgba(255, 255, 255, 0.25);
border-radius: 5px;
}
.apd-style {
position: relative;
display: flex;
align-items: center;
justify-content: center;
.apd-style-panel {
position: absolute;
bottom: 24px;
left: 0;
width: 200px;
padding: 10px;
opacity: 0;
pointer-events: none;
.apd-style-panel-inner {
width: 100%;
border-radius: 3px;
background-color: rgba(0, 0, 0, 0.85);
padding: 10px;
}
}
&:hover {
.apd-style-panel {
opacity: 100;
pointer-events: all;
}
}
}
.apd-colors {
display: flex;
flex-wrap: wrap;
margin-top: 5px;
gap: 8px;
.apd-color {
width: 16px;
height: 16px;
border-radius: 2px;
cursor: pointer;
&.apd-active {
border: 1px solid black;
box-shadow: 0 0 0 1px #fff;
}
}
}
.apd-input {
outline: none;
height: 100%;
flex: 1;
min-width: 0;
width: auto;
border: none;
line-height: 1;
color: #fff;
background-color: transparent;
&::placeholder {
color: rgba(255, 255, 255, 0.5);
}
}
.apd-send {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 60px;
flex-shrink: 0; flex-shrink: 0;
cursor: pointer; width: 36px;
text-shadow: none; text-align: center;
border-top-right-radius: 5px; scale: 0.95;
border-bottom-right-radius: 5px; }
background-color: @highlight;
&.apd-lock {
cursor: not-allowed;
color: #666;
background-color: #e7e7e7;
}
} }
}
.apd-config-other {
display: flex;
align-items: center;
gap: 20px;
.apd-check-off,
.apd-check-on {
width: 16px;
height: 16px;
}
.apd-other {
display: flex;
align-items: center;
cursor: pointer;
gap: 2px;
&:hover {
color: @highlight;
}
}
}
.apd-emitter {
display: flex;
flex: 1;
align-items: center;
height: 100%;
background-color: rgba(255, 255, 255, 0.25);
border-radius: 5px;
}
.apd-style {
position: relative;
display: flex;
align-items: center;
justify-content: center;
.apd-style-panel {
position: absolute;
bottom: 24px;
left: 0;
width: 200px;
padding: 10px;
opacity: 0;
pointer-events: none;
.apd-style-panel-inner {
width: 100%;
border-radius: 3px;
background-color: rgba(0, 0, 0, 0.85);
padding: 10px;
}
}
&:hover {
.apd-style-panel {
opacity: 100;
pointer-events: all;
}
}
}
.apd-colors {
display: flex;
flex-wrap: wrap;
margin-top: 5px;
gap: 8px;
.apd-color {
width: 16px;
height: 16px;
border-radius: 2px;
cursor: pointer;
&.apd-active {
border: 1px solid black;
box-shadow: 0 0 0 1px #fff;
}
}
}
.apd-input {
outline: none;
height: 100%;
flex: 1;
min-width: 0;
width: auto;
border: none;
line-height: 1;
color: #fff;
background-color: transparent;
&::placeholder {
color: rgba(255, 255, 255, 0.5);
}
}
.apd-send {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 60px;
flex-shrink: 0;
cursor: pointer;
text-shadow: none;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
background-color: @highlight;
&.apd-lock {
cursor: not-allowed;
color: #666;
background-color: #e7e7e7;
}
}
} }
.art-controls-center { .art-controls-center {
.apd-emitter { .apd-emitter {
width: 260px; width: 260px;
flex: none; flex: none;
} }
} }
.art-fullscreen, .art-fullscreen,
.art-fullscreen-web { .art-fullscreen-web {
.artplayer-plugin-danmuku { .artplayer-plugin-danmuku {
height: 38px; height: 38px;
gap: 16px; gap: 16px;
.apd-config-icon, .apd-config-icon,
.apd-toggle-off, .apd-toggle-off,
.apd-toggle-on { .apd-toggle-on {
width: 28px; width: 28px;
height: 28px; height: 28px;
}
.apd-emitter {
width: 400px;
flex: none;
}
} }
.apd-emitter {
width: 400px;
flex: none;
}
}
} }
.art-video-player { .art-video-player {
& > .artplayer-plugin-danmuku { & > .artplayer-plugin-danmuku {
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
bottom: -40px; bottom: -40px;
padding: 0 10px; padding: 0 10px;
} }
&:has(> .artplayer-plugin-danmuku) { &:has(> .artplayer-plugin-danmuku) {
margin-bottom: 40px; margin-bottom: 40px;
} }
} }
[data-danmuku-emitter='false'] { [data-danmuku-emitter='false'] {
.apd-emitter { .apd-emitter {
display: none !important; display: none !important;
} }
.art-controls-center {
.artplayer-plugin-danmuku {
justify-content: flex-end;
gap: 18px;
}
}
&.art-fullscreen,
&.art-fullscreen-web {
.art-controls-center { .art-controls-center {
.artplayer-plugin-danmuku { .artplayer-plugin-danmuku {
justify-content: flex-end; gap: 24px;
gap: 18px; }
}
}
&.art-fullscreen,
&.art-fullscreen-web {
.art-controls-center {
.artplayer-plugin-danmuku {
gap: 24px;
}
}
} }
}
} }
[data-danmuku-theme='light'] > .artplayer-plugin-danmuku { [data-danmuku-theme='light'] > .artplayer-plugin-danmuku {
.apd-icon { .apd-icon {
fill: #333; fill: #333;
} }
.apd-emitter { .apd-emitter {
background-color: #f1f2f3; background-color: #f1f2f3;
} }
.apd-input { .apd-input {
color: #000; color: #000;
&::placeholder { &::placeholder {
color: rgba(0, 0, 0, 0.3); color: rgba(0, 0, 0, 0.3);
}
} }
}
} }
[data-danmuku-visible='false'] { [data-danmuku-visible='false'] {
.apd-toggle-off { .apd-toggle-off {
display: block; display: block;
} }
.apd-toggle-on { .apd-toggle-on {
display: none; display: none;
} }
} }
[data-danmuku-visible='true'] { [data-danmuku-visible='true'] {
.apd-toggle-off { .apd-toggle-off {
display: none; display: none;
} }
.apd-toggle-on { .apd-toggle-on {
display: block; display: block;
} }
} }
[data-danmuku-anti-overlap='false'] { [data-danmuku-anti-overlap='false'] {
.apd-anti-overlap { .apd-anti-overlap {
.apd-check-on { .apd-check-on {
display: none; display: none;
}
.apd-check-off {
display: block;
}
} }
.apd-check-off {
display: block;
}
}
} }
[data-danmuku-anti-overlap='true'] { [data-danmuku-anti-overlap='true'] {
.apd-anti-overlap { .apd-anti-overlap {
.apd-check-on { .apd-check-on {
display: block; display: block;
}
.apd-check-off {
display: none;
}
} }
.apd-check-off {
display: none;
}
}
} }
[data-danmuku-sync-video='false'] { [data-danmuku-sync-video='false'] {
.apd-sync-video { .apd-sync-video {
.apd-check-on { .apd-check-on {
display: none; display: none;
}
.apd-check-off {
display: block;
}
} }
.apd-check-off {
display: block;
}
}
} }
[data-danmuku-sync-video='true'] { [data-danmuku-sync-video='true'] {
.apd-sync-video { .apd-sync-video {
.apd-check-on { .apd-check-on {
display: block; display: block;
}
.apd-check-off {
display: none;
}
} }
.apd-check-off {
display: none;
}
}
} }
.generate-mode-styles(@index) when (@index >= 0) { .generate-mode-styles(@index) when (@index >= 0) {
.generate-mode-styles(@index - 1); .generate-mode-styles(@index - 1);
@mode: ~'data-danmuku-mode@{index}'; @mode: ~'data-danmuku-mode@{index}';
[@{mode}='false'] { [@{mode}='false'] {
.apd-config-mode { .apd-config-mode {
.apd-mode-@{index}-off { .apd-mode-@{index}-off {
display: block; display: block;
} }
.apd-mode-@{index}-on { .apd-mode-@{index}-on {
display: none; display: none;
} }
}
.art-danmuku [data-mode='@{index}'] {
opacity: 0 !important;
}
} }
[@{mode}='true'] { .art-danmuku [data-mode='@{index}'] {
.apd-config-mode { opacity: 0 !important;
.apd-mode-@{index}-off {
display: none;
}
.apd-mode-@{index}-on {
display: block;
}
}
} }
}
[data-danmuku-mode='@{index}'] { [@{mode}='true'] {
.apd-style-mode { .apd-config-mode {
[data-mode='@{index}'] { .apd-mode-@{index}-off {
color: @highlight; display: none;
path { }
fill: @highlight;
} .apd-mode-@{index}-on {
} display: block;
} }
} }
}
[data-danmuku-mode='@{index}'] {
.apd-style-mode {
[data-mode='@{index}'] {
color: @highlight;
path {
fill: @highlight;
}
}
}
}
} }
.generate-mode-styles(2); .generate-mode-styles(2);
packages/artplayer-plugin-document-pip/src/style.less
+4 -4
View File
@@ -1,4 +1,4 @@
.artplayer-document-pip.art-video-player{ .artplayer-document-pip.art-video-player {
width: 100% !important; width: 100% !important;
height: 100% !important; height: 100% !important;
} }
packages/artplayer/src/style/artplayer.less
+58 -58
View File
@@ -1,62 +1,62 @@
.art-video-player { .art-video-player {
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
width: 100%; width: 100%;
height: 100%; height: 100%;
outline: 0; outline: 0;
zoom: 1; zoom: 1;
padding: 0; padding: 0;
text-align: left; text-align: left;
direction: ltr; direction: ltr;
font-size: 14px; font-size: 14px;
line-height: 1.3; line-height: 1.3;
user-select: none; user-select: none;
box-sizing: border-box;
color: var(--art-font-color);
background-color: var(--art-background-color);
text-shadow: 0 0 2px var(--art-text-shadow-color);
font-family:
PingFang SC,
Helvetica Neue,
Microsoft YaHei,
Roboto,
Arial,
sans-serif;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-ms-touch-action: manipulation;
touch-action: manipulation;
-ms-high-contrast-adjust: none;
*,
*::before,
*::after {
box-sizing: border-box; box-sizing: border-box;
}
::-webkit-scrollbar {
width: var(--art-scrollbar-size);
height: var(--art-scrollbar-size);
}
::-webkit-scrollbar-thumb {
background-color: var(--art-scrollbar-background);
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--art-scrollbar-background-hover);
}
img {
max-width: 100%;
vertical-align: top;
}
svg {
fill: var(--art-font-color);
}
a {
color: var(--art-font-color); color: var(--art-font-color);
background-color: var(--art-background-color); text-decoration: none;
text-shadow: 0 0 2px var(--art-text-shadow-color); }
font-family:
PingFang SC,
Helvetica Neue,
Microsoft YaHei,
Roboto,
Arial,
sans-serif;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-ms-touch-action: manipulation;
touch-action: manipulation;
-ms-high-contrast-adjust: none;
*,
*::before,
*::after {
box-sizing: border-box;
}
::-webkit-scrollbar {
width: var(--art-scrollbar-size);
height: var(--art-scrollbar-size);
}
::-webkit-scrollbar-thumb {
background-color: var(--art-scrollbar-background);
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--art-scrollbar-background-hover);
}
img {
max-width: 100%;
vertical-align: top;
}
svg {
fill: var(--art-font-color);
}
a {
color: var(--art-font-color);
text-decoration: none;
}
} }
packages/artplayer/src/style/aspectRatio.less
+6 -6
View File
@@ -1,9 +1,9 @@
.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
+8 -8
View File
@@ -1,10 +1,10 @@
.art-video-player.art-backdrop { .art-video-player.art-backdrop {
.art-contextmenus, .art-contextmenus,
.art-info, .art-info,
.art-settings, .art-settings,
.art-layer-auto-playback, .art-layer-auto-playback,
.art-selector-list, .art-selector-list,
.art-volume-inner { .art-volume-inner {
.art-backdrop-filter(); .art-backdrop-filter();
} }
} }
packages/artplayer/src/style/bottom.less
+28 -28
View File
@@ -1,32 +1,32 @@
.art-video-player { .art-video-player {
.art-bottom {
.art-full(60);
display: flex;
flex-direction: column;
justify-content: flex-end;
opacity: 0;
overflow: hidden;
pointer-events: none;
padding: 0 var(--art-padding);
transition: all var(--art-transition-duration) ease;
background-size: 100% var(--art-bottom-height);
.art-bottom-gradient();
.art-controls,
.art-progress {
transform: translateY(var(--art-bottom-offset));
transition: transform var(--art-transition-duration) ease;
}
}
&.art-control-show,
&.art-hover {
.art-bottom { .art-bottom {
.art-full(60); opacity: 1;
display: flex; .art-controls,
flex-direction: column; .art-progress {
justify-content: flex-end; transform: translateY(0);
opacity: 0; }
overflow: hidden;
pointer-events: none;
padding: 0 var(--art-padding);
transition: all var(--art-transition-duration) ease;
background-size: 100% var(--art-bottom-height);
.art-bottom-gradient();
.art-controls,
.art-progress {
transform: translateY(var(--art-bottom-offset));
transition: transform var(--art-transition-duration) ease;
}
}
&.art-control-show,
&.art-hover {
.art-bottom {
opacity: 1;
.art-controls,
.art-progress {
transform: translateY(0);
}
}
} }
}
} }
packages/artplayer/src/style/contextmenu.less
+39 -39
View File
@@ -1,43 +1,43 @@
.art-video-player { .art-video-player {
.art-contextmenus {
display: none;
flex-direction: column;
position: absolute;
z-index: 120;
padding: 5px 0;
border-radius: var(--art-border-radius);
font-size: 12px;
background-color: var(--art-widget-background);
min-width: var(--art-contextmenus-min-width);
.art-contextmenu {
cursor: pointer;
display: flex;
padding: 10px 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
span {
padding: 0 8px;
&:hover,
&.art-current {
color: var(--art-theme);
}
}
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
&:last-child {
border-bottom: none;
}
}
}
&.art-contextmenu-show {
.art-contextmenus { .art-contextmenus {
display: none; display: flex;
flex-direction: column;
position: absolute;
z-index: 120;
padding: 5px 0;
border-radius: var(--art-border-radius);
font-size: 12px;
background-color: var(--art-widget-background);
min-width: var(--art-contextmenus-min-width);
.art-contextmenu {
cursor: pointer;
display: flex;
padding: 10px 15px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
span {
padding: 0 8px;
&:hover,
&.art-current {
color: var(--art-theme);
}
}
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
&:last-child {
border-bottom: none;
}
}
}
&.art-contextmenu-show {
.art-contextmenus {
display: flex;
}
} }
}
} }
packages/artplayer/src/style/controls.less
+50 -51
View File
@@ -1,55 +1,54 @@
.art-video-player { .art-video-player {
.art-controls { .art-controls {
position: relative; position: relative;
z-index: 10; z-index: 10;
pointer-events: auto; pointer-events: auto;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: var(--art-control-height); height: var(--art-control-height);
.art-controls-left, .art-controls-left,
.art-controls-right { .art-controls-right {
display: flex; display: flex;
height: 100%; height: 100%;
}
.art-controls-center {
.art-center(none);
flex: 1;
height: 100%;
padding: 0 10px;
}
.art-controls-right {
justify-content: flex-end;
}
.art-control {
.art-center();
flex-shrink: 0;
cursor: pointer;
white-space: nowrap;
opacity: var(--art-control-opacity);
min-height: var(--art-control-height);
min-width: var(--art-control-height);
transition: opacity var(--art-transition-duration) ease;
.art-icon {
height: var(--art-control-icon-size);
width: var(--art-control-icon-size);
transform: scale(var(--art-control-icon-scale));
transition: transform var(--art-transition-duration) ease;
&:active {
transform: scale(calc(var(--art-control-icon-scale) * 0.8));
}
}
&:hover {
opacity: 1;
}
}
} }
}
.art-controls-center {
.art-center(none);
flex: 1;
height: 100%;
padding: 0 10px;
}
.art-controls-right {
justify-content: flex-end;
}
.art-control {
.art-center();
flex-shrink: 0;
cursor: pointer;
white-space: nowrap;
opacity: var(--art-control-opacity);
min-height: var(--art-control-height);
min-width: var(--art-control-height);
transition: opacity var(--art-transition-duration) ease;
.art-icon {
height: var(--art-control-icon-size);
width: var(--art-control-icon-size);
transform: scale(var(--art-control-icon-scale));
transition: transform var(--art-transition-duration) ease;
&:active {
transform: scale(calc(var(--art-control-icon-scale) * 0.8));
}
}
&:hover {
opacity: 1;
}
}
}
}
packages/artplayer/src/style/danmuku.less
+3 -3
View File
@@ -1,5 +1,5 @@
.art-danmuku { .art-danmuku {
.art-full(30); .art-full(30);
pointer-events: none; pointer-events: none;
overflow: hidden; overflow: hidden;
} }
packages/artplayer/src/style/flip.less
+6 -6
View File
@@ -1,9 +1,9 @@
.art-video-player { .art-video-player {
&[data-flip='horizontal'] .art-video { &[data-flip='horizontal'] .art-video {
transform: scaleX(-1); transform: scaleX(-1);
} }
&[data-flip='vertical'] .art-video { &[data-flip='vertical'] .art-video {
transform: scaleY(-1); transform: scaleY(-1);
} }
} }
packages/artplayer/src/style/fullscreen.less
+4 -4
View File
@@ -1,6 +1,6 @@
.art-fullscreen { .art-fullscreen {
--art-progress-height: 8px; --art-progress-height: 8px;
--art-indicator-size: 20px; --art-indicator-size: 20px;
--art-control-height: 60px; --art-control-height: 60px;
--art-control-icon-scale: 1.3; --art-control-icon-scale: 1.3;
} }
packages/artplayer/src/style/fullscreenWeb.less
+2 -2
View File
@@ -1,4 +1,4 @@
.art-fullscreen-web { .art-fullscreen-web {
.art-fullscreen(); .art-fullscreen();
.art-full(var(--art-fullscreen-web-index), fixed); .art-full(var(--art-fullscreen-web-index), fixed);
} }
packages/artplayer/src/style/hideCursor.less
+1 -1
View File
@@ -1,3 +1,3 @@
.art-hide-cursor * { .art-hide-cursor * {
cursor: none !important; cursor: none !important;
} }
packages/artplayer/src/style/hint.less
+576 -576
View File
File diff suppressed because it is too large. Load diff
packages/artplayer/src/style/icon.less
+2 -2
View File
@@ -1,4 +1,4 @@
.art-icon { .art-icon {
line-height: 1; line-height: 1;
.art-center(); .art-center();
} }
packages/artplayer/src/style/info.less
+45 -45
View File
@@ -1,49 +1,49 @@
.art-video-player { .art-video-player {
.art-info {
display: none;
position: absolute;
left: var(--art-padding);
top: var(--art-padding);
z-index: 100;
padding: 10px;
font-size: 12px;
border-radius: var(--art-border-radius);
background-color: var(--art-widget-background);
.art-info-panel {
display: flex;
flex-direction: column;
gap: 5px;
.art-info-item {
display: flex;
align-items: center;
gap: 5px;
.art-info-title {
width: 100px;
text-align: right;
}
.art-info-content {
width: 250px;
.art-truncate();
user-select: all;
}
}
}
.art-info-close {
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}
}
&.art-info-show {
.art-info { .art-info {
display: none; display: flex;
position: absolute;
left: var(--art-padding);
top: var(--art-padding);
z-index: 100;
padding: 10px;
font-size: 12px;
border-radius: var(--art-border-radius);
background-color: var(--art-widget-background);
.art-info-panel {
display: flex;
flex-direction: column;
gap: 5px;
.art-info-item {
display: flex;
align-items: center;
gap: 5px;
.art-info-title {
width: 100px;
text-align: right;
}
.art-info-content {
width: 250px;
.art-truncate();
user-select: all;
}
}
}
.art-info-close {
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
}
}
&.art-info-show {
.art-info {
display: flex;
}
} }
}
} }
packages/artplayer/src/style/layers.less
+13 -13
View File
@@ -1,17 +1,17 @@
.art-video-player { .art-video-player {
.art-layers {
.art-full(40);
display: none;
pointer-events: none;
.art-layer {
pointer-events: auto;
}
}
&.art-layer-show {
.art-layers { .art-layers {
.art-full(40); display: flex;
display: none;
pointer-events: none;
.art-layer {
pointer-events: auto;
}
}
&.art-layer-show {
.art-layers {
display: flex;
}
} }
}
} }
packages/artplayer/src/style/loading.less
+12 -12
View File
@@ -1,16 +1,16 @@
.art-video-player { .art-video-player {
.art-loading { .art-loading {
.art-center(none); .art-center(none);
.art-full(70); .art-full(70);
pointer-events: none; pointer-events: none;
} }
&.art-loading-show { &.art-loading-show {
.art-loading { .art-loading {
display: flex; display: flex;
}
.art-mask {
display: none;
}
} }
.art-mask {
display: none;
}
}
} }
packages/artplayer/src/style/mask.less
+22 -22
View File
@@ -1,30 +1,30 @@
.art-video-player { .art-video-player {
.art-mask { .art-mask {
.art-center(); .art-center();
.art-full(50); .art-full(50);
pointer-events: none; pointer-events: none;
.art-state { .art-state {
.art-center(); .art-center();
opacity: 0; opacity: 0;
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) ease; transition: all var(--art-transition-duration) ease;
}
} }
}
&.art-mask-show { &.art-mask-show {
.art-state { .art-state {
pointer-events: auto; pointer-events: auto;
opacity: var(--art-state-opacity); opacity: var(--art-state-opacity);
transform: scale(1); transform: scale(1);
}
} }
}
&.art-loading-show { &.art-loading-show {
.art-state { .art-state {
display: none; display: none;
}
} }
}
} }
packages/artplayer/src/style/mini.less
+54 -54
View File
@@ -1,63 +1,63 @@
.art-mini-popup { .art-mini-popup {
position: fixed; position: fixed;
z-index: 9999; z-index: 9999;
width: 320px; width: 320px;
height: 180px; height: 180px;
background: #000; background: #000;
border-radius: var(--art-border-radius); border-radius: var(--art-border-radius);
cursor: move; cursor: move;
user-select: none; user-select: none;
overflow: hidden; overflow: hidden;
transition: opacity 0.2s ease;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
svg {
fill: #fff;
}
.art-video {
pointer-events: none;
}
.art-mini-close {
position: absolute;
z-index: 20;
right: 10px;
top: 10px;
cursor: pointer;
opacity: 0;
transition: opacity 0.2s ease; transition: opacity 0.2s ease;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); }
svg { .art-mini-state {
fill: #fff; .art-full(30);
.art-center();
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease;
background-color: rgba(0, 0, 0, 0.25);
.art-icon {
opacity: 0.75;
cursor: pointer;
transform: scale(3);
pointer-events: auto;
transition: transform 0.2s ease;
&:active {
transform: scale(2.5);
}
} }
}
.art-video { &.art-mini-dragging {
pointer-events: none; opacity: 0.9;
} }
.art-mini-close {
position: absolute;
z-index: 20;
right: 10px;
top: 10px;
cursor: pointer;
opacity: 0;
transition: opacity 0.2s ease;
}
&:hover {
.art-mini-close,
.art-mini-state { .art-mini-state {
.art-full(30); opacity: 1;
.art-center();
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease;
background-color: rgba(0, 0, 0, 0.25);
.art-icon {
opacity: 0.75;
cursor: pointer;
transform: scale(3);
pointer-events: auto;
transition: transform 0.2s ease;
&:active {
transform: scale(2.5);
}
}
}
&.art-mini-dragging {
opacity: 0.9;
}
&:hover {
.art-mini-close,
.art-mini-state {
opacity: 1;
}
} }
}
} }
packages/artplayer/src/style/mixins.less
+20 -20
View File
@@ -1,37 +1,37 @@
.art-center(@display: flex) { .art-center(@display: flex) {
display: @display; display: @display;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.art-full(@index: 0, @position: absolute) { .art-full(@index: 0, @position: absolute) {
position: @position; position: @position;
inset: 0; inset: 0;
z-index: @index; z-index: @index;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.art-bg-cover { .art-bg-cover {
background-position: center center; background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
} }
.art-bottom-gradient { .art-bottom-gradient {
background-image: linear-gradient(to top, #000, rgb(0 0 0 / 40%), transparent); background-image: linear-gradient(to top, #000, rgb(0 0 0 / 40%), transparent);
background-repeat: repeat-x; background-repeat: repeat-x;
background-position: center bottom; background-position: center bottom;
} }
.art-backdrop-filter { .art-backdrop-filter {
-webkit-backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
background-color: rgba(0, 0, 0, 0.75) !important; background-color: rgba(0, 0, 0, 0.75) !important;
} }
.art-truncate { .art-truncate {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
packages/artplayer/src/style/mobile.less
+14 -14
View File
@@ -1,18 +1,18 @@
.art-video-player.art-mobile { .art-video-player.art-mobile {
--art-bottom-gap: 10px; --art-bottom-gap: 10px;
--art-control-height: 38px; --art-control-height: 38px;
--art-control-icon-scale: 1; --art-control-icon-scale: 1;
--art-state-size: 60px; --art-state-size: 60px;
--art-settings-max-height: 180px; --art-settings-max-height: 180px;
--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-controls-left { .art-controls-left {
margin-left: calc(var(--art-padding) / -1); margin-left: calc(var(--art-padding) / -1);
} }
.art-controls-right { .art-controls-right {
margin-right: calc(var(--art-padding) / -1); margin-right: calc(var(--art-padding) / -1);
} }
} }
packages/artplayer/src/style/notice.less
+20 -20
View File
@@ -1,24 +1,24 @@
.art-video-player { .art-video-player {
.art-notice {
display: none;
.art-full(80);
height: auto;
bottom: auto;
padding: var(--art-padding);
pointer-events: none;
.art-notice-inner {
display: inline-flex;
padding: 5px;
line-height: 1;
border-radius: var(--art-border-radius);
background-color: var(--art-tip-background);
}
}
&.art-notice-show {
.art-notice { .art-notice {
display: none; display: flex;
.art-full(80);
height: auto;
bottom: auto;
padding: var(--art-padding);
pointer-events: none;
.art-notice-inner {
display: inline-flex;
padding: 5px;
line-height: 1;
border-radius: var(--art-border-radius);
background-color: var(--art-tip-background);
}
}
&.art-notice-show {
.art-notice {
display: flex;
}
} }
}
} }
packages/artplayer/src/style/plugins.less
+68 -70
View File
@@ -1,74 +1,72 @@
.art-video-player { .art-video-player {
.art-layer-lock {
.art-center(none);
position: absolute;
top: 50%;
border-radius: 50%;
transform: translateY(-50%);
height: var(--art-lock-size);
width: var(--art-lock-size);
left: var(--art-padding);
background-color: var(--art-tip-background);
}
.art-layer-auto-playback {
display: none;
gap: 10px;
align-items: center;
position: absolute;
border-radius: var(--art-border-radius);
padding: 10px;
line-height: 1;
left: var(--art-padding);
bottom: calc(var(--art-control-height) + var(--art-bottom-gap) + 10px);
background-color: var(--art-widget-background);
.art-auto-playback-close {
.art-center();
cursor: pointer;
svg {
width: 15px;
height: 15px;
fill: var(--art-theme);
}
}
.art-auto-playback-jump {
color: var(--art-theme);
cursor: pointer;
}
}
&.art-lock {
.art-subtitle {
bottom: var(--art-subtitle-bottom) !important;
}
}
&.art-mini-progress-bar,
&.art-lock {
.art-bottom {
opacity: 1;
padding: 0;
background-image: none;
.art-controls,
.art-progress {
transform: translateY(calc(var(--art-control-height) + var(--art-bottom-gap) + var(--art-progress-height) / 4));
}
.art-progress-indicator {
display: none !important;
}
}
}
&.art-control-show {
.art-layer-lock { .art-layer-lock {
.art-center(none); display: flex;
position: absolute;
top: 50%;
border-radius: 50%;
transform: translateY(-50%);
height: var(--art-lock-size);
width: var(--art-lock-size);
left: var(--art-padding);
background-color: var(--art-tip-background);
}
.art-layer-auto-playback {
display: none;
gap: 10px;
align-items: center;
position: absolute;
border-radius: var(--art-border-radius);
padding: 10px;
line-height: 1;
left: var(--art-padding);
bottom: calc(var(--art-control-height) + var(--art-bottom-gap) + 10px);
background-color: var(--art-widget-background);
.art-auto-playback-close {
.art-center();
cursor: pointer;
svg {
width: 15px;
height: 15px;
fill: var(--art-theme);
}
}
.art-auto-playback-jump {
color: var(--art-theme);
cursor: pointer;
}
}
&.art-lock {
.art-subtitle {
bottom: var(--art-subtitle-bottom) !important;
}
}
&.art-mini-progress-bar,
&.art-lock {
.art-bottom {
opacity: 1;
padding: 0;
background-image: none;
.art-controls,
.art-progress {
transform: translateY(
calc(var(--art-control-height) + var(--art-bottom-gap) + var(--art-progress-height) / 4)
);
}
.art-progress-indicator {
display: none !important;
}
}
}
&.art-control-show {
.art-layer-lock {
display: flex;
}
} }
}
} }
packages/artplayer/src/style/poster.less
+3 -3
View File
@@ -1,5 +1,5 @@
.art-poster { .art-poster {
.art-full(11); .art-full(11);
.art-bg-cover(); .art-bg-cover();
pointer-events: none; pointer-events: none;
} }
packages/artplayer/src/style/progress.less
+127 -122
View File
@@ -1,139 +1,144 @@
.art-bottom { .art-bottom {
.art-progress { .art-progress {
position: relative;
z-index: 0;
cursor: pointer;
pointer-events: auto;
padding-top: var(--art-progress-top-gap);
padding-bottom: var(--art-bottom-gap);
.art-control-progress {
position: relative;
.art-center();
height: var(--art-progress-height);
.art-control-progress-inner {
display: flex;
align-items: center;
position: relative; position: relative;
z-index: 0; height: 50%;
cursor: pointer; width: 100%;
pointer-events: auto; transition: height var(--art-transition-duration) ease;
padding-top: var(--art-progress-top-gap); background-color: var(--art-progress-color);
padding-bottom: var(--art-bottom-gap);
.art-control-progress { .art-progress-hover {
position: relative; .art-full(0);
.art-center(); width: 0%;
height: var(--art-progress-height); background-color: var(--art-hover-color);
.art-control-progress-inner {
display: flex;
align-items: center;
position: relative;
height: 50%;
width: 100%;
transition: height var(--art-transition-duration) ease;
background-color: var(--art-progress-color);
.art-progress-hover {
.art-full(0);
width: 0%;
background-color: var(--art-hover-color);
}
.art-progress-loaded {
.art-full(10);
width: 0%;
background-color: var(--art-loaded-color);
}
.art-progress-played {
.art-full(20);
width: 0%;
background-color: var(--art-theme);
}
.art-progress-highlight {
.art-full(30);
pointer-events: none;
span {
.art-full();
right: auto;
pointer-events: auto;
width: var(--art-highlight-width) !important;
transform: translateX(calc(var(--art-highlight-width) / -2));
background-color: var(--art-highlight-color);
}
}
.art-progress-indicator {
.art-center();
position: absolute;
z-index: 40;
left: 0;
border-radius: 50%;
width: var(--art-indicator-size);
height: var(--art-indicator-size);
transform: scale(var(--art-indicator-scale));
margin-left: calc(var(--art-indicator-size) / -2);
transition: transform var(--art-transition-duration) ease;
.art-icon {
width: 100%;
height: 100%;
pointer-events: none;
}
&:hover {
transform: scale(1.2) !important;
}
&:active {
transform: scale(1) !important;
}
}
.art-progress-tip {
transform-origin: bottom center;
transform: scale(0.5);
opacity: 0;
position: absolute;
z-index: 50;
top: -25px;
left: 0;
padding: 3px 5px;
line-height: 1;
font-size: 12px;
border-radius: var(--art-border-radius);
white-space: nowrap;
background-color: var(--art-tip-background);
transition: transform var(--art-transition-duration) ease, opacity var(--art-transition-duration) ease;
}
}
} }
.art-control-thumbnails { .art-progress-loaded {
transform-origin: bottom center; .art-full(10);
transform: scale(0.5); width: 0%;
opacity: 0; background-color: var(--art-loaded-color);
position: absolute; }
bottom: calc(var(--art-bottom-gap) + 10px);
left: 0; .art-progress-played {
border-radius: var(--art-border-radius); .art-full(20);
width: 0%;
background-color: var(--art-theme);
}
.art-progress-highlight {
.art-full(30);
pointer-events: none;
span {
.art-full();
right: auto;
pointer-events: auto;
width: var(--art-highlight-width) !important;
transform: translateX(calc(var(--art-highlight-width) / -2));
background-color: var(--art-highlight-color);
}
}
.art-progress-indicator {
.art-center();
position: absolute;
z-index: 40;
left: 0;
border-radius: 50%;
width: var(--art-indicator-size);
height: var(--art-indicator-size);
transform: scale(var(--art-indicator-scale));
margin-left: calc(var(--art-indicator-size) / -2);
transition: transform var(--art-transition-duration) ease;
.art-icon {
width: 100%;
height: 100%;
pointer-events: none; pointer-events: none;
background-color: var(--art-widget-background); }
transition: transform var(--art-transition-duration) ease, opacity var(--art-transition-duration) ease;
box-shadow: &:hover {
0 1px 3px 0 rgb(0 0 0 / 0.2), transform: scale(1.2) !important;
0 1px 2px -1px rgb(0 0 0 / 0.2); }
&:active {
transform: scale(1) !important;
}
} }
&:hover { .art-progress-tip {
.art-control-progress .art-control-progress-inner { transform-origin: bottom center;
height: 100%; transform: scale(0.5);
} opacity: 0;
position: absolute;
z-index: 50;
top: -25px;
left: 0;
padding: 3px 5px;
line-height: 1;
font-size: 12px;
border-radius: var(--art-border-radius);
white-space: nowrap;
background-color: var(--art-tip-background);
transition:
transform var(--art-transition-duration) ease,
opacity var(--art-transition-duration) ease;
} }
}
}
.art-control-thumbnails {
transform-origin: bottom center;
transform: scale(0.5);
opacity: 0;
position: absolute;
bottom: calc(var(--art-bottom-gap) + 10px);
left: 0;
border-radius: var(--art-border-radius);
pointer-events: none;
background-color: var(--art-widget-background);
transition:
transform var(--art-transition-duration) ease,
opacity var(--art-transition-duration) ease;
box-shadow:
0 1px 3px 0 rgb(0 0 0 / 0.2),
0 1px 2px -1px rgb(0 0 0 / 0.2);
} }
&:hover { &:hover {
.art-progress .art-control-progress .art-control-progress-inner .art-progress-indicator { .art-control-progress .art-control-progress-inner {
transform: scale(1); height: 100%;
} }
} }
}
&:hover {
.art-progress .art-control-progress .art-control-progress-inner .art-progress-indicator {
transform: scale(1);
}
}
} }
.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,
transform: scale(1); .art-control-thumbnails {
opacity: 1; transform: scale(1);
} opacity: 1;
} }
} }
}
packages/artplayer/src/style/selector.less
+42 -42
View File
@@ -1,48 +1,48 @@
.art-control-selector { .art-control-selector {
position: relative; position: relative;
display: flex;
justify-content: center;
.art-selector-list {
display: flex; display: flex;
justify-content: center; flex-direction: column;
align-items: center;
text-align: center;
position: absolute;
border-radius: var(--art-border-radius);
overflow-y: auto;
overflow-x: hidden;
opacity: 0;
transform: translateY(10px);
pointer-events: none;
bottom: var(--art-control-height);
max-height: var(--art-selector-max-height);
background-color: var(--art-widget-background);
transition: all var(--art-transition-duration) ease;
.art-selector-item {
.art-center();
width: 100%;
padding: 10px 15px;
flex-shrink: 0;
line-height: 1;
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
&:hover,
&.art-current {
color: var(--art-theme);
}
}
}
&:hover {
.art-selector-list { .art-selector-list {
display: flex; opacity: 1;
flex-direction: column; transform: translateY(0);
align-items: center; pointer-events: auto;
text-align: center;
position: absolute;
border-radius: var(--art-border-radius);
overflow-y: auto;
overflow-x: hidden;
opacity: 0;
transform: translateY(10px);
pointer-events: none;
bottom: var(--art-control-height);
max-height: var(--art-selector-max-height);
background-color: var(--art-widget-background);
transition: all var(--art-transition-duration) ease;
.art-selector-item {
.art-center();
width: 100%;
padding: 10px 15px;
flex-shrink: 0;
line-height: 1;
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
&:hover,
&.art-current {
color: var(--art-theme);
}
}
}
&:hover {
.art-selector-list {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
} }
}
} }
packages/artplayer/src/style/setting.less
+96 -96
View File
@@ -1,100 +1,100 @@
.art-video-player { .art-video-player {
.art-settings {
display: none;
flex-direction: column;
position: absolute;
z-index: 90;
left: auto;
overflow-y: auto;
overflow-x: hidden;
border-radius: var(--art-border-radius);
max-height: var(--art-settings-max-height);
right: var(--art-padding);
bottom: var(--art-control-height);
transition: all var(--art-transition-duration) ease;
background-color: var(--art-widget-background);
.art-setting-panel {
display: none;
flex-direction: column;
&.art-current {
display: flex;
}
.art-setting-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 5px;
cursor: pointer;
overflow: hidden;
transition: background-color var(--art-transition-duration) ease;
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
&.art-current {
color: var(--art-theme);
}
.art-icon-check {
visibility: hidden;
height: 15px;
}
&.art-current .art-icon-check {
visibility: visible;
}
.art-setting-item-left {
.art-center();
flex-shrink: 0;
gap: 5px;
.art-setting-item-left-icon {
.art-center();
height: var(--art-settings-icon-size);
width: var(--art-settings-icon-size);
}
}
.art-setting-item-right {
.art-center();
gap: 5px;
font-size: 12px;
.art-setting-item-right-tooltip {
white-space: nowrap;
color: rgba(255, 255, 255, 0.5);
}
.art-setting-item-right-icon {
.art-center();
min-width: 32px;
height: 24px;
}
.art-setting-range {
height: 3px;
width: 80px;
outline: none;
appearance: none;
background-color: rgba(255, 255, 255, 0.2);
}
}
}
.art-setting-item-back {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
}
}
&.art-setting-show {
.art-settings { .art-settings {
display: none; display: flex;
flex-direction: column;
position: absolute;
z-index: 90;
left: auto;
overflow-y: auto;
overflow-x: hidden;
border-radius: var(--art-border-radius);
max-height: var(--art-settings-max-height);
right: var(--art-padding);
bottom: var(--art-control-height);
transition: all var(--art-transition-duration) ease;
background-color: var(--art-widget-background);
.art-setting-panel {
display: none;
flex-direction: column;
&.art-current {
display: flex;
}
.art-setting-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 5px;
cursor: pointer;
overflow: hidden;
transition: background-color var(--art-transition-duration) ease;
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
&.art-current {
color: var(--art-theme);
}
.art-icon-check {
visibility: hidden;
height: 15px;
}
&.art-current .art-icon-check {
visibility: visible;
}
.art-setting-item-left {
.art-center();
flex-shrink: 0;
gap: 5px;
.art-setting-item-left-icon {
.art-center();
height: var(--art-settings-icon-size);
width: var(--art-settings-icon-size);
}
}
.art-setting-item-right {
.art-center();
gap: 5px;
font-size: 12px;
.art-setting-item-right-tooltip {
white-space: nowrap;
color: rgba(255, 255, 255, 0.5);
}
.art-setting-item-right-icon {
.art-center();
min-width: 32px;
height: 24px;
}
.art-setting-range {
height: 3px;
width: 80px;
outline: none;
appearance: none;
background-color: rgba(255, 255, 255, 0.2);
}
}
}
.art-setting-item-back {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
}
}
&.art-setting-show {
.art-settings {
display: flex;
}
} }
}
} }
packages/artplayer/src/style/subtitle.less
+31 -31
View File
@@ -1,37 +1,37 @@
.art-video-player { .art-video-player {
.art-subtitle {
.art-center(none);
flex-direction: column;
position: absolute;
z-index: 20;
width: 100%;
padding: 0 5%;
text-align: center;
pointer-events: none;
gap: var(--art-subtitle-gap);
bottom: var(--art-subtitle-bottom);
font-size: var(--art-subtitle-font-size);
transition: bottom var(--art-transition-duration) ease;
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;
}
&.art-subtitle-show {
.art-subtitle { .art-subtitle {
.art-center(none); display: flex;
flex-direction: column;
position: absolute;
z-index: 20;
width: 100%;
padding: 0 5%;
text-align: center;
pointer-events: none;
gap: var(--art-subtitle-gap);
bottom: var(--art-subtitle-bottom);
font-size: var(--art-subtitle-font-size);
transition: bottom var(--art-transition-duration) ease;
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;
} }
}
&.art-subtitle-show { &.art-control-show {
.art-subtitle { .art-subtitle {
display: flex; bottom: calc(var(--art-control-height) + var(--art-subtitle-bottom));
}
}
&.art-control-show {
.art-subtitle {
bottom: calc(var(--art-control-height) + var(--art-subtitle-bottom));
}
} }
}
} }
packages/artplayer/src/style/variables.less
+43 -43
View File
@@ -1,45 +1,45 @@
.art-video-player { .art-video-player {
--art-theme: #f00; --art-theme: #f00;
--art-font-color: #fff; --art-font-color: #fff;
--art-background-color: #000; --art-background-color: #000;
--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-padding: 10px; --art-padding: 10px;
--art-border-radius: 3px; --art-border-radius: 3px;
--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: 10px; --art-progress-top-gap: 10px;
--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-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;
--art-bottom-offset: 20px; --art-bottom-offset: 20px;
--art-bottom-gap: 5px; --art-bottom-gap: 5px;
--art-highlight-width: 8px; --art-highlight-width: 8px;
--art-highlight-color: rgba(255, 255, 255, 0.5); --art-highlight-color: rgba(255, 255, 255, 0.5);
--art-control-height: 46px; --art-control-height: 46px;
--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-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;
--art-indicator-scale: 0; --art-indicator-scale: 0;
--art-indicator-size: 16px; --art-indicator-size: 16px;
--art-fullscreen-web-index: 9999; --art-fullscreen-web-index: 9999;
--art-settings-icon-size: 24px; --art-settings-icon-size: 24px;
--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-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;
--art-subtitle-border: #000; --art-subtitle-border: #000;
--art-widget-background: rgba(0, 0, 0, 0.85); --art-widget-background: rgba(0, 0, 0, 0.85);
--art-tip-background: rgba(0, 0, 0, 0.7); --art-tip-background: rgba(0, 0, 0, 0.7);
--art-scrollbar-size: 4px; --art-scrollbar-size: 4px;
--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;
} }
packages/artplayer/src/style/video.less
+1 -1
View File
@@ -1,3 +1,3 @@
.art-video { .art-video {
.art-full(10); .art-full(10);
} }
packages/artplayer/src/style/volume.less
+78 -78
View File
@@ -1,83 +1,83 @@
.art-control-volume { .art-control-volume {
position: relative; position: relative;
.art-volume-panel {
.art-center(flex);
position: absolute;
left: 0;
right: 0;
padding: 0 5px;
font-size: 12px;
text-align: center;
cursor: default;
opacity: 0;
transform: translateY(10px);
pointer-events: none;
bottom: var(--art-control-height);
width: var(--art-control-height);
height: var(--art-volume-height);
transition: all var(--art-transition-duration) ease;
.art-volume-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
height: 100%;
width: 100%;
padding: 10px 0 12px;
border-radius: var(--art-border-radius);
background-color: var(--art-widget-background);
.art-volume-slider {
flex: 1;
width: 100%;
display: flex;
cursor: pointer;
position: relative;
justify-content: center;
.art-volume-handle {
position: relative;
display: flex;
justify-content: center;
width: 2px;
border-radius: var(--art-border-radius);
overflow: hidden;
background-color: rgba(255, 255, 255, 0.25);
.art-volume-loaded {
.art-full(0);
background-color: var(--art-theme);
}
}
.art-volume-indicator {
position: absolute;
width: var(--art-volume-handle-size);
height: var(--art-volume-handle-size);
margin-top: calc(var(--art-volume-handle-size) / -2);
flex-shrink: 0;
transform: scale(1);
border-radius: 100%;
background-color: var(--art-theme);
transition: transform var(--art-transition-duration) ease;
}
&:active {
.art-volume-indicator {
transform: scale(0.9);
}
}
}
}
}
&:hover {
.art-volume-panel { .art-volume-panel {
.art-center(flex); opacity: 1;
position: absolute; transform: translateY(0);
left: 0; pointer-events: auto;
right: 0;
padding: 0 5px;
font-size: 12px;
text-align: center;
cursor: default;
opacity: 0;
transform: translateY(10px);
pointer-events: none;
bottom: var(--art-control-height);
width: var(--art-control-height);
height: var(--art-volume-height);
transition: all var(--art-transition-duration) ease;
.art-volume-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
height: 100%;
width: 100%;
padding: 10px 0 12px;
border-radius: var(--art-border-radius);
background-color: var(--art-widget-background);
.art-volume-slider {
flex: 1;
width: 100%;
display: flex;
cursor: pointer;
position: relative;
justify-content: center;
.art-volume-handle {
position: relative;
display: flex;
justify-content: center;
width: 2px;
border-radius: var(--art-border-radius);
overflow: hidden;
background-color: rgba(255, 255, 255, 0.25);
.art-volume-loaded {
.art-full(0);
background-color: var(--art-theme);
}
}
.art-volume-indicator {
position: absolute;
width: var(--art-volume-handle-size);
height: var(--art-volume-handle-size);
margin-top: calc(var(--art-volume-handle-size) / -2);
flex-shrink: 0;
transform: scale(1);
border-radius: 100%;
background-color: var(--art-theme);
transition: transform var(--art-transition-duration) ease;
}
&:active {
.art-volume-indicator {
transform: scale(0.9);
}
}
}
}
}
&:hover {
.art-volume-panel {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
} }
}
} }
scripts/build-llm.js
+1 -1
View File
@@ -80,7 +80,7 @@ async function askDeepSeek(prompt, text, tag, id) {
// 处理限流情况 // 处理限流情况
if (res.status === 429) { if (res.status === 429) {
const delay = Math.pow(2, attempt) * 1000 const delay = 2 ** attempt * 1000
console.log(`⏳ [${tag}] Rate limited, waiting ${delay}ms...`) console.log(`⏳ [${tag}] Rate limited, waiting ${delay}ms...`)
await new Promise(r => setTimeout(r, delay)) await new Promise(r => setTimeout(r, delay))
continue continue
scripts/trans-docs.js
+2 -2
View File
@@ -112,7 +112,7 @@ function cleanTranslation(text) {
return text return text
.replace(/^```(markdown|md)?/gi, '') .replace(/^```(markdown|md)?/gi, '')
.replace(/```$/g, '') .replace(/```$/g, '')
.replace(/^(Here('|')s|Below is|Translation|The English version|Here is)[:：]?\s*/gi, '') .replace(/^(Here(')s|Below is|Translation|The English version|Here is)[:：]?\s*/gi, '')
.replace(/(Translation completed\.?|End of translation\.?)$/gi, '') .replace(/(Translation completed\.?|End of translation\.?)$/gi, '')
.trim() .trim()
} }
@@ -141,7 +141,7 @@ async function callDeepSeekAPI(prompt, tag, chunkId) {
// 处理限流情况 // 处理限流情况
if (res.status === 429) { if (res.status === 429) {
const delay = Math.pow(2, attempt) * 1000 const delay = 2 ** attempt * 1000
console.log(`⏳ [${tag}] Rate limited, waiting ${delay}ms...`) console.log(`⏳ [${tag}] Rate limited, waiting ${delay}ms...`)
await new Promise(r => setTimeout(r, delay)) await new Promise(r => setTimeout(r, delay))
continue continue