mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-08 10:56:15 -08:00
Refactor styles in ArtPlayer components for improved readability and consistency
- 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
1 parent
b11f0eb99a
commit
740ac4cb24
39 files changed
+2043
-2030
No files matched your search
+13
-5
@@ -1,7 +1,15 @@
|
||||
import antfu from '@antfu/eslint-config'
|
||||
import antfu from "@antfu/eslint-config";
|
||||
|
||||
export default antfu({
|
||||
rules: {
|
||||
'eslint-comments/no-unlimited-disable': 'off',
|
||||
},
|
||||
})
|
||||
ignores: [
|
||||
"**/hint.less",
|
||||
],
|
||||
formatters: {
|
||||
css: true,
|
||||
html: true,
|
||||
markdown: 'prettier',
|
||||
},
|
||||
rules: {
|
||||
"eslint-comments/no-unlimited-disable": "off",
|
||||
},
|
||||
});
|
||||
+2
-1
@@ -48,6 +48,7 @@
|
||||
"dotenv": "^17.2.1",
|
||||
"esbuild": "^0.27.3",
|
||||
"eslint": "^9.32.0",
|
||||
"eslint-plugin-format": "^2.0.1",
|
||||
"glob": "^13.0.6",
|
||||
"lerna": "^8.2.3",
|
||||
"less": "^4.5.1",
|
||||
@@ -57,4 +58,4 @@
|
||||
"terser": "^5.46.0",
|
||||
"vite": "^7.3.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,80 +1,80 @@
|
||||
.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;
|
||||
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;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,31 +1,31 @@
|
||||
.art-video-player {
|
||||
.art-layer-asr {
|
||||
pointer-events: none !important;
|
||||
position: absolute;
|
||||
z-index: 150;
|
||||
inset: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: end;
|
||||
padding: 0 2%;
|
||||
font-size: 1rem;
|
||||
gap: var(--art-subtitle-gap);
|
||||
padding-bottom: var(--art-subtitle-bottom);
|
||||
transition: padding-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-layer-asr {
|
||||
pointer-events: none !important;
|
||||
position: absolute;
|
||||
z-index: 150;
|
||||
inset: 0px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: end;
|
||||
padding: 0 2%;
|
||||
font-size: 1rem;
|
||||
gap: var(--art-subtitle-gap);
|
||||
padding-bottom: var(--art-subtitle-bottom);
|
||||
transition: padding-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-control-show {
|
||||
.art-layer-asr {
|
||||
padding-bottom: calc(var(--art-control-height) + var(--art-subtitle-bottom));
|
||||
}
|
||||
&.art-control-show {
|
||||
.art-layer-asr {
|
||||
padding-bottom: calc(var(--art-control-height) + var(--art-subtitle-bottom));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,72 +1,74 @@
|
||||
.artplayer-plugin-chapter {
|
||||
.art-control-progress-inner {
|
||||
height: 100% !important;
|
||||
background-color: transparent !important;
|
||||
.art-control-progress-inner {
|
||||
height: 100% !important;
|
||||
background-color: transparent !important;
|
||||
|
||||
&>.art-progress-hover,
|
||||
&>.art-progress-loaded,
|
||||
&>.art-progress-played {
|
||||
display: none !important;
|
||||
}
|
||||
& > .art-progress-hover,
|
||||
& > .art-progress-loaded,
|
||||
& > .art-progress-played {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.art-control-thumbnails {
|
||||
bottom: calc(var(--art-bottom-gap) + 64px) !important;
|
||||
}
|
||||
.art-control-thumbnails {
|
||||
bottom: calc(var(--art-bottom-gap) + 64px) !important;
|
||||
}
|
||||
|
||||
.art-chapters {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
.art-chapters {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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%;
|
||||
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 {
|
||||
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;
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&.art-progress-hover {
|
||||
.art-chapter-title {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,471 +1,471 @@
|
||||
@highlight: #00a1d6;
|
||||
|
||||
.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;
|
||||
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;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
color: #fff;
|
||||
font-weight: 300;
|
||||
flex-shrink: 0;
|
||||
gap: 10px;
|
||||
cursor: pointer;
|
||||
|
||||
.apd-icon {
|
||||
cursor: pointer;
|
||||
opacity: 0.75;
|
||||
transition: all 0.2s ease;
|
||||
fill: #fff;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
.apd-slider-line {
|
||||
position: relative;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 3px;
|
||||
background-color: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.apd-config {
|
||||
display: flex;
|
||||
position: relative;
|
||||
.apd-slider-points {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.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-slider-point {
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.apd-config-mode,
|
||||
.apd-config-slider,
|
||||
.apd-config-other,
|
||||
.apd-style-mode {
|
||||
margin-bottom: 15px;
|
||||
.apd-slider-progress {
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
background-color: @highlight;
|
||||
}
|
||||
|
||||
.apd-modes {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 5px;
|
||||
gap: 20px;
|
||||
|
||||
.apd-mode {
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
color: @highlight;
|
||||
}
|
||||
}
|
||||
.apd-slider-dot {
|
||||
position: absolute;
|
||||
transform: translateX(-6px);
|
||||
left: 0%;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 50%;
|
||||
background-color: @highlight;
|
||||
}
|
||||
|
||||
.apd-config-slider {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
.apd-slider-steps {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
bottom: -12px;
|
||||
width: calc(100% + 32px);
|
||||
color: #777;
|
||||
|
||||
.apd-value {
|
||||
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;
|
||||
.apd-slider-step {
|
||||
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;
|
||||
}
|
||||
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;
|
||||
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 {
|
||||
.apd-emitter {
|
||||
width: 260px;
|
||||
flex: none;
|
||||
}
|
||||
.apd-emitter {
|
||||
width: 260px;
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
|
||||
.art-fullscreen,
|
||||
.art-fullscreen-web {
|
||||
.artplayer-plugin-danmuku {
|
||||
height: 38px;
|
||||
gap: 16px;
|
||||
.artplayer-plugin-danmuku {
|
||||
height: 38px;
|
||||
gap: 16px;
|
||||
|
||||
.apd-config-icon,
|
||||
.apd-toggle-off,
|
||||
.apd-toggle-on {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.apd-emitter {
|
||||
width: 400px;
|
||||
flex: none;
|
||||
}
|
||||
.apd-config-icon,
|
||||
.apd-toggle-off,
|
||||
.apd-toggle-on {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.apd-emitter {
|
||||
width: 400px;
|
||||
flex: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.art-video-player {
|
||||
& > .artplayer-plugin-danmuku {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -40px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
& > .artplayer-plugin-danmuku {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -40px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
&:has(> .artplayer-plugin-danmuku) {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
&:has(> .artplayer-plugin-danmuku) {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
[data-danmuku-emitter='false'] {
|
||||
.apd-emitter {
|
||||
display: none !important;
|
||||
}
|
||||
.apd-emitter {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.art-controls-center {
|
||||
.artplayer-plugin-danmuku {
|
||||
justify-content: flex-end;
|
||||
gap: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
&.art-fullscreen,
|
||||
&.art-fullscreen-web {
|
||||
.art-controls-center {
|
||||
.artplayer-plugin-danmuku {
|
||||
justify-content: flex-end;
|
||||
gap: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
&.art-fullscreen,
|
||||
&.art-fullscreen-web {
|
||||
.art-controls-center {
|
||||
.artplayer-plugin-danmuku {
|
||||
gap: 24px;
|
||||
}
|
||||
}
|
||||
.artplayer-plugin-danmuku {
|
||||
gap: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-danmuku-theme='light'] > .artplayer-plugin-danmuku {
|
||||
.apd-icon {
|
||||
fill: #333;
|
||||
}
|
||||
.apd-icon {
|
||||
fill: #333;
|
||||
}
|
||||
|
||||
.apd-emitter {
|
||||
background-color: #f1f2f3;
|
||||
}
|
||||
.apd-emitter {
|
||||
background-color: #f1f2f3;
|
||||
}
|
||||
|
||||
.apd-input {
|
||||
color: #000;
|
||||
.apd-input {
|
||||
color: #000;
|
||||
|
||||
&::placeholder {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
&::placeholder {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-danmuku-visible='false'] {
|
||||
.apd-toggle-off {
|
||||
display: block;
|
||||
}
|
||||
.apd-toggle-off {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.apd-toggle-on {
|
||||
display: none;
|
||||
}
|
||||
.apd-toggle-on {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
[data-danmuku-visible='true'] {
|
||||
.apd-toggle-off {
|
||||
display: none;
|
||||
}
|
||||
.apd-toggle-off {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.apd-toggle-on {
|
||||
display: block;
|
||||
}
|
||||
.apd-toggle-on {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
[data-danmuku-anti-overlap='false'] {
|
||||
.apd-anti-overlap {
|
||||
.apd-check-on {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.apd-check-off {
|
||||
display: block;
|
||||
}
|
||||
.apd-anti-overlap {
|
||||
.apd-check-on {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.apd-check-off {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-danmuku-anti-overlap='true'] {
|
||||
.apd-anti-overlap {
|
||||
.apd-check-on {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.apd-check-off {
|
||||
display: none;
|
||||
}
|
||||
.apd-anti-overlap {
|
||||
.apd-check-on {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.apd-check-off {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-danmuku-sync-video='false'] {
|
||||
.apd-sync-video {
|
||||
.apd-check-on {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.apd-check-off {
|
||||
display: block;
|
||||
}
|
||||
.apd-sync-video {
|
||||
.apd-check-on {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.apd-check-off {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-danmuku-sync-video='true'] {
|
||||
.apd-sync-video {
|
||||
.apd-check-on {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.apd-check-off {
|
||||
display: none;
|
||||
}
|
||||
.apd-sync-video {
|
||||
.apd-check-on {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.apd-check-off {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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'] {
|
||||
.apd-config-mode {
|
||||
.apd-mode-@{index}-off {
|
||||
display: block;
|
||||
}
|
||||
[@{mode}='false'] {
|
||||
.apd-config-mode {
|
||||
.apd-mode-@{index}-off {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.apd-mode-@{index}-on {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.art-danmuku [data-mode='@{index}'] {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
.apd-mode-@{index}-on {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
[@{mode}='true'] {
|
||||
.apd-config-mode {
|
||||
.apd-mode-@{index}-off {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.apd-mode-@{index}-on {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.art-danmuku [data-mode='@{index}'] {
|
||||
opacity: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
[data-danmuku-mode='@{index}'] {
|
||||
.apd-style-mode {
|
||||
[data-mode='@{index}'] {
|
||||
color: @highlight;
|
||||
path {
|
||||
fill: @highlight;
|
||||
}
|
||||
}
|
||||
}
|
||||
[@{mode}='true'] {
|
||||
.apd-config-mode {
|
||||
.apd-mode-@{index}-off {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.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);
|
||||
@@ -1,4 +1,4 @@
|
||||
.artplayer-document-pip.art-video-player{
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
.artplayer-document-pip.art-video-player {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
@@ -1,62 +1,62 @@
|
||||
.art-video-player {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
outline: 0;
|
||||
zoom: 1;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
direction: ltr;
|
||||
font-size: 14px;
|
||||
line-height: 1.3;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
outline: 0;
|
||||
zoom: 1;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
direction: ltr;
|
||||
font-size: 14px;
|
||||
line-height: 1.3;
|
||||
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;
|
||||
}
|
||||
|
||||
::-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);
|
||||
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;
|
||||
}
|
||||
|
||||
::-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;
|
||||
}
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@@ -1,9 +1,9 @@
|
||||
.art-video-player {
|
||||
&[data-aspect-ratio] {
|
||||
overflow: hidden;
|
||||
.art-video {
|
||||
object-fit: fill;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
&[data-aspect-ratio] {
|
||||
overflow: hidden;
|
||||
.art-video {
|
||||
object-fit: fill;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,10 +1,10 @@
|
||||
.art-video-player.art-backdrop {
|
||||
.art-contextmenus,
|
||||
.art-info,
|
||||
.art-settings,
|
||||
.art-layer-auto-playback,
|
||||
.art-selector-list,
|
||||
.art-volume-inner {
|
||||
.art-backdrop-filter();
|
||||
}
|
||||
.art-contextmenus,
|
||||
.art-info,
|
||||
.art-settings,
|
||||
.art-layer-auto-playback,
|
||||
.art-selector-list,
|
||||
.art-volume-inner {
|
||||
.art-backdrop-filter();
|
||||
}
|
||||
}
|
||||
@@ -1,32 +1,32 @@
|
||||
.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-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 {
|
||||
opacity: 1;
|
||||
.art-controls,
|
||||
.art-progress {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
opacity: 1;
|
||||
.art-controls,
|
||||
.art-progress {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,43 +1,43 @@
|
||||
.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 {
|
||||
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 {
|
||||
display: flex;
|
||||
}
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,55 +1,54 @@
|
||||
.art-video-player {
|
||||
.art-controls {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
pointer-events: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: var(--art-control-height);
|
||||
.art-controls {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
pointer-events: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: var(--art-control-height);
|
||||
|
||||
.art-controls-left,
|
||||
.art-controls-right {
|
||||
display: flex;
|
||||
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-left,
|
||||
.art-controls-right {
|
||||
display: flex;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
.art-danmuku {
|
||||
.art-full(30);
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
.art-full(30);
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -1,9 +1,9 @@
|
||||
.art-video-player {
|
||||
&[data-flip='horizontal'] .art-video {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
&[data-flip='horizontal'] .art-video {
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
|
||||
&[data-flip='vertical'] .art-video {
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
&[data-flip='vertical'] .art-video {
|
||||
transform: scaleY(-1);
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
.art-fullscreen {
|
||||
--art-progress-height: 8px;
|
||||
--art-indicator-size: 20px;
|
||||
--art-control-height: 60px;
|
||||
--art-control-icon-scale: 1.3;
|
||||
--art-progress-height: 8px;
|
||||
--art-indicator-size: 20px;
|
||||
--art-control-height: 60px;
|
||||
--art-control-icon-scale: 1.3;
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
.art-fullscreen-web {
|
||||
.art-fullscreen();
|
||||
.art-full(var(--art-fullscreen-web-index), fixed);
|
||||
.art-fullscreen();
|
||||
.art-full(var(--art-fullscreen-web-index), fixed);
|
||||
}
|
||||
@@ -1,3 +1,3 @@
|
||||
.art-hide-cursor * {
|
||||
cursor: none !important;
|
||||
cursor: none !important;
|
||||
}
|
||||
File diff suppressed because it is too large.
Load diff
@@ -1,4 +1,4 @@
|
||||
.art-icon {
|
||||
line-height: 1;
|
||||
.art-center();
|
||||
line-height: 1;
|
||||
.art-center();
|
||||
}
|
||||
@@ -1,49 +1,49 @@
|
||||
.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 {
|
||||
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 {
|
||||
display: flex;
|
||||
}
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,17 +1,17 @@
|
||||
.art-video-player {
|
||||
.art-layers {
|
||||
.art-full(40);
|
||||
display: none;
|
||||
pointer-events: none;
|
||||
|
||||
.art-layer {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.art-layer-show {
|
||||
.art-layers {
|
||||
.art-full(40);
|
||||
display: none;
|
||||
pointer-events: none;
|
||||
|
||||
.art-layer {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&.art-layer-show {
|
||||
.art-layers {
|
||||
display: flex;
|
||||
}
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,16 +1,16 @@
|
||||
.art-video-player {
|
||||
.art-loading {
|
||||
.art-center(none);
|
||||
.art-full(70);
|
||||
pointer-events: none;
|
||||
}
|
||||
.art-loading {
|
||||
.art-center(none);
|
||||
.art-full(70);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.art-loading-show {
|
||||
.art-loading {
|
||||
display: flex;
|
||||
}
|
||||
.art-mask {
|
||||
display: none;
|
||||
}
|
||||
&.art-loading-show {
|
||||
.art-loading {
|
||||
display: flex;
|
||||
}
|
||||
.art-mask {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,30 +1,30 @@
|
||||
.art-video-player {
|
||||
.art-mask {
|
||||
.art-center();
|
||||
.art-full(50);
|
||||
pointer-events: none;
|
||||
.art-mask {
|
||||
.art-center();
|
||||
.art-full(50);
|
||||
pointer-events: none;
|
||||
|
||||
.art-state {
|
||||
.art-center();
|
||||
opacity: 0;
|
||||
transform: scale(2);
|
||||
width: var(--art-state-size);
|
||||
height: var(--art-state-size);
|
||||
transition: all var(--art-transition-duration) ease;
|
||||
}
|
||||
.art-state {
|
||||
.art-center();
|
||||
opacity: 0;
|
||||
transform: scale(2);
|
||||
width: var(--art-state-size);
|
||||
height: var(--art-state-size);
|
||||
transition: all var(--art-transition-duration) ease;
|
||||
}
|
||||
}
|
||||
|
||||
&.art-mask-show {
|
||||
.art-state {
|
||||
pointer-events: auto;
|
||||
opacity: var(--art-state-opacity);
|
||||
transform: scale(1);
|
||||
}
|
||||
&.art-mask-show {
|
||||
.art-state {
|
||||
pointer-events: auto;
|
||||
opacity: var(--art-state-opacity);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
&.art-loading-show {
|
||||
.art-state {
|
||||
display: none;
|
||||
}
|
||||
&.art-loading-show {
|
||||
.art-state {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,63 +1,63 @@
|
||||
.art-mini-popup {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
width: 320px;
|
||||
height: 180px;
|
||||
background: #000;
|
||||
border-radius: var(--art-border-radius);
|
||||
cursor: move;
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
width: 320px;
|
||||
height: 180px;
|
||||
background: #000;
|
||||
border-radius: var(--art-border-radius);
|
||||
cursor: move;
|
||||
user-select: none;
|
||||
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;
|
||||
box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: #fff;
|
||||
.art-mini-state {
|
||||
.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 {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.art-mini-close {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
&.art-mini-dragging {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.art-mini-close,
|
||||
.art-mini-state {
|
||||
.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-mini-dragging {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.art-mini-close,
|
||||
.art-mini-state {
|
||||
opacity: 1;
|
||||
}
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,37 +1,37 @@
|
||||
.art-center(@display: flex) {
|
||||
display: @display;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: @display;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.art-full(@index: 0, @position: absolute) {
|
||||
position: @position;
|
||||
inset: 0;
|
||||
z-index: @index;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: @position;
|
||||
inset: 0;
|
||||
z-index: @index;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.art-bg-cover {
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.art-bottom-gradient {
|
||||
background-image: linear-gradient(to top, #000, rgb(0 0 0 / 40%), transparent);
|
||||
background-repeat: repeat-x;
|
||||
background-position: center bottom;
|
||||
background-image: linear-gradient(to top, #000, rgb(0 0 0 / 40%), transparent);
|
||||
background-repeat: repeat-x;
|
||||
background-position: center bottom;
|
||||
}
|
||||
|
||||
.art-backdrop-filter {
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
background-color: rgba(0, 0, 0, 0.75) !important;
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
background-color: rgba(0, 0, 0, 0.75) !important;
|
||||
}
|
||||
|
||||
.art-truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -1,18 +1,18 @@
|
||||
.art-video-player.art-mobile {
|
||||
--art-bottom-gap: 10px;
|
||||
--art-control-height: 38px;
|
||||
--art-control-icon-scale: 1;
|
||||
--art-state-size: 60px;
|
||||
--art-settings-max-height: 180px;
|
||||
--art-selector-max-height: 180px;
|
||||
--art-indicator-scale: 1;
|
||||
--art-control-opacity: 1;
|
||||
--art-bottom-gap: 10px;
|
||||
--art-control-height: 38px;
|
||||
--art-control-icon-scale: 1;
|
||||
--art-state-size: 60px;
|
||||
--art-settings-max-height: 180px;
|
||||
--art-selector-max-height: 180px;
|
||||
--art-indicator-scale: 1;
|
||||
--art-control-opacity: 1;
|
||||
|
||||
.art-controls-left {
|
||||
margin-left: calc(var(--art-padding) / -1);
|
||||
}
|
||||
.art-controls-left {
|
||||
margin-left: calc(var(--art-padding) / -1);
|
||||
}
|
||||
|
||||
.art-controls-right {
|
||||
margin-right: calc(var(--art-padding) / -1);
|
||||
}
|
||||
.art-controls-right {
|
||||
margin-right: calc(var(--art-padding) / -1);
|
||||
}
|
||||
}
|
||||
@@ -1,24 +1,24 @@
|
||||
.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 {
|
||||
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 {
|
||||
display: flex;
|
||||
}
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,74 +1,72 @@
|
||||
.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-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 {
|
||||
display: flex;
|
||||
}
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
.art-poster {
|
||||
.art-full(11);
|
||||
.art-bg-cover();
|
||||
pointer-events: none;
|
||||
.art-full(11);
|
||||
.art-bg-cover();
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -1,139 +1,144 @@
|
||||
.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;
|
||||
z-index: 0;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
padding-top: var(--art-progress-top-gap);
|
||||
padding-bottom: var(--art-bottom-gap);
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
transition: height var(--art-transition-duration) ease;
|
||||
background-color: var(--art-progress-color);
|
||||
|
||||
.art-control-progress {
|
||||
position: relative;
|
||||
.art-center();
|
||||
height: var(--art-progress-height);
|
||||
|
||||
.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-progress-hover {
|
||||
.art-full(0);
|
||||
width: 0%;
|
||||
background-color: var(--art-hover-color);
|
||||
}
|
||||
|
||||
.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);
|
||||
.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;
|
||||
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 {
|
||||
transform: scale(1.2) !important;
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: scale(1) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.art-control-progress .art-control-progress-inner {
|
||||
height: 100%;
|
||||
}
|
||||
.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 {
|
||||
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 {
|
||||
.art-progress .art-control-progress .art-control-progress-inner .art-progress-indicator {
|
||||
transform: scale(1);
|
||||
}
|
||||
.art-control-progress .art-control-progress-inner {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.art-progress .art-control-progress .art-control-progress-inner .art-progress-indicator {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.art-progress-hover {
|
||||
.art-bottom .art-progress {
|
||||
.art-control-progress .art-control-progress-inner .art-progress-tip, .art-control-thumbnails {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
.art-bottom .art-progress {
|
||||
.art-control-progress .art-control-progress-inner .art-progress-tip,
|
||||
.art-control-thumbnails {
|
||||
transform: scale(1);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,48 +1,48 @@
|
||||
.art-control-selector {
|
||||
position: relative;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.art-selector-list {
|
||||
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 {
|
||||
display: flex;
|
||||
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 {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,100 +1,100 @@
|
||||
.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 {
|
||||
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 {
|
||||
display: flex;
|
||||
}
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,37 +1,37 @@
|
||||
.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-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;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
&.art-subtitle-show {
|
||||
.art-subtitle {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
&.art-control-show {
|
||||
.art-subtitle {
|
||||
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));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,45 +1,45 @@
|
||||
.art-video-player {
|
||||
--art-theme: #f00;
|
||||
--art-font-color: #fff;
|
||||
--art-background-color: #000;
|
||||
--art-text-shadow-color: rgba(0, 0, 0, 0.5);
|
||||
--art-transition-duration: 0.2s;
|
||||
--art-padding: 10px;
|
||||
--art-border-radius: 3px;
|
||||
--art-progress-height: 6px;
|
||||
--art-progress-color: rgba(255, 255, 255, 0.25);
|
||||
--art-progress-top-gap: 10px;
|
||||
--art-hover-color: rgba(255, 255, 255, 0.25);
|
||||
--art-loaded-color: rgba(255, 255, 255, 0.25);
|
||||
--art-state-size: 80px;
|
||||
--art-state-opacity: 0.8;
|
||||
--art-bottom-height: 100px;
|
||||
--art-bottom-offset: 20px;
|
||||
--art-bottom-gap: 5px;
|
||||
--art-highlight-width: 8px;
|
||||
--art-highlight-color: rgba(255, 255, 255, 0.5);
|
||||
--art-control-height: 46px;
|
||||
--art-control-opacity: 0.75;
|
||||
--art-control-icon-size: 36px;
|
||||
--art-control-icon-scale: 1.1;
|
||||
--art-volume-height: 120px;
|
||||
--art-volume-handle-size: 14px;
|
||||
--art-lock-size: 36px;
|
||||
--art-indicator-scale: 0;
|
||||
--art-indicator-size: 16px;
|
||||
--art-fullscreen-web-index: 9999;
|
||||
--art-settings-icon-size: 24px;
|
||||
--art-settings-max-height: 300px;
|
||||
--art-selector-max-height: 300px;
|
||||
--art-contextmenus-min-width: 250px;
|
||||
--art-subtitle-font-size: 20px;
|
||||
--art-subtitle-gap: 5px;
|
||||
--art-subtitle-bottom: 15px;
|
||||
--art-subtitle-border: #000;
|
||||
--art-widget-background: rgba(0, 0, 0, 0.85);
|
||||
--art-tip-background: rgba(0, 0, 0, 0.7);
|
||||
--art-scrollbar-size: 4px;
|
||||
--art-scrollbar-background: rgba(255, 255, 255, 0.25);
|
||||
--art-scrollbar-background-hover: rgba(255, 255, 255, 0.5);
|
||||
--art-mini-progress-height: 2px;
|
||||
--art-theme: #f00;
|
||||
--art-font-color: #fff;
|
||||
--art-background-color: #000;
|
||||
--art-text-shadow-color: rgba(0, 0, 0, 0.5);
|
||||
--art-transition-duration: 0.2s;
|
||||
--art-padding: 10px;
|
||||
--art-border-radius: 3px;
|
||||
--art-progress-height: 6px;
|
||||
--art-progress-color: rgba(255, 255, 255, 0.25);
|
||||
--art-progress-top-gap: 10px;
|
||||
--art-hover-color: rgba(255, 255, 255, 0.25);
|
||||
--art-loaded-color: rgba(255, 255, 255, 0.25);
|
||||
--art-state-size: 80px;
|
||||
--art-state-opacity: 0.8;
|
||||
--art-bottom-height: 100px;
|
||||
--art-bottom-offset: 20px;
|
||||
--art-bottom-gap: 5px;
|
||||
--art-highlight-width: 8px;
|
||||
--art-highlight-color: rgba(255, 255, 255, 0.5);
|
||||
--art-control-height: 46px;
|
||||
--art-control-opacity: 0.75;
|
||||
--art-control-icon-size: 36px;
|
||||
--art-control-icon-scale: 1.1;
|
||||
--art-volume-height: 120px;
|
||||
--art-volume-handle-size: 14px;
|
||||
--art-lock-size: 36px;
|
||||
--art-indicator-scale: 0;
|
||||
--art-indicator-size: 16px;
|
||||
--art-fullscreen-web-index: 9999;
|
||||
--art-settings-icon-size: 24px;
|
||||
--art-settings-max-height: 300px;
|
||||
--art-selector-max-height: 300px;
|
||||
--art-contextmenus-min-width: 250px;
|
||||
--art-subtitle-font-size: 20px;
|
||||
--art-subtitle-gap: 5px;
|
||||
--art-subtitle-bottom: 15px;
|
||||
--art-subtitle-border: #000;
|
||||
--art-widget-background: rgba(0, 0, 0, 0.85);
|
||||
--art-tip-background: rgba(0, 0, 0, 0.7);
|
||||
--art-scrollbar-size: 4px;
|
||||
--art-scrollbar-background: rgba(255, 255, 255, 0.25);
|
||||
--art-scrollbar-background-hover: rgba(255, 255, 255, 0.5);
|
||||
--art-mini-progress-height: 2px;
|
||||
}
|
||||
@@ -1,3 +1,3 @@
|
||||
.art-video {
|
||||
.art-full(10);
|
||||
.art-full(10);
|
||||
}
|
||||
@@ -1,83 +1,83 @@
|
||||
.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-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 {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -80,7 +80,7 @@ async function askDeepSeek(prompt, text, tag, id) {
|
||||
|
||||
// 处理限流情况
|
||||
if (res.status === 429) {
|
||||
const delay = Math.pow(2, attempt) * 1000
|
||||
const delay = 2 ** attempt * 1000
|
||||
console.log(`⏳ [${tag}] Rate limited, waiting ${delay}ms...`)
|
||||
await new Promise(r => setTimeout(r, delay))
|
||||
continue
|
||||
|
||||
@@ -112,7 +112,7 @@ function cleanTranslation(text) {
|
||||
return text
|
||||
.replace(/^```(markdown|md)?/gi, '')
|
||||
.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, '')
|
||||
.trim()
|
||||
}
|
||||
@@ -141,7 +141,7 @@ async function callDeepSeekAPI(prompt, tag, chunkId) {
|
||||
|
||||
// 处理限流情况
|
||||
if (res.status === 429) {
|
||||
const delay = Math.pow(2, attempt) * 1000
|
||||
const delay = 2 ** attempt * 1000
|
||||
console.log(`⏳ [${tag}] Rate limited, waiting ${delay}ms...`)
|
||||
await new Promise(r => setTimeout(r, delay))
|
||||
continue
|
||||
|
||||
Reference in new issue
Block a user