x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-23 13:51:20 -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

packages/artplayer/src/style/artplayer.less
+58 -58
View File
@@ -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;
}
}
packages/artplayer/src/style/aspectRatio.less
+6 -6
View File
@@ -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;
}
}
}
packages/artplayer/src/style/backdrop.less
+8 -8
View File
@@ -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();
}
}
packages/artplayer/src/style/bottom.less
+28 -28
View File
@@ -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);
}
}
}
}
packages/artplayer/src/style/contextmenu.less
+39 -39
View File
@@ -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;
}
}
}
packages/artplayer/src/style/controls.less
+50 -51
View File
@@ -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;
}
}
}
}
packages/artplayer/src/style/danmuku.less
+3 -3
View File
@@ -1,5 +1,5 @@
.art-danmuku {
.art-full(30);
pointer-events: none;
overflow: hidden;
.art-full(30);
pointer-events: none;
overflow: hidden;
}
packages/artplayer/src/style/flip.less
+6 -6
View File
@@ -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);
}
}
packages/artplayer/src/style/fullscreen.less
+4 -4
View File
@@ -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;
}
packages/artplayer/src/style/fullscreenWeb.less
+2 -2
View File
@@ -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);
}
packages/artplayer/src/style/hideCursor.less
+1 -1
View File
@@ -1,3 +1,3 @@
.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 {
line-height: 1;
.art-center();
line-height: 1;
.art-center();
}
packages/artplayer/src/style/info.less
+45 -45
View File
@@ -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;
}
}
}
packages/artplayer/src/style/layers.less
+13 -13
View File
@@ -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;
}
}
}
packages/artplayer/src/style/loading.less
+12 -12
View File
@@ -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;
}
}
}
packages/artplayer/src/style/mask.less
+22 -22
View File
@@ -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;
}
}
}
packages/artplayer/src/style/mini.less
+54 -54
View File
@@ -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;
}
}
}
packages/artplayer/src/style/mixins.less
+20 -20
View File
@@ -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;
}
packages/artplayer/src/style/mobile.less
+14 -14
View File
@@ -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);
}
}
packages/artplayer/src/style/notice.less
+20 -20
View File
@@ -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;
}
}
}
packages/artplayer/src/style/plugins.less
+68 -70
View File
@@ -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;
}
}
}
packages/artplayer/src/style/poster.less
+3 -3
View File
@@ -1,5 +1,5 @@
.art-poster {
.art-full(11);
.art-bg-cover();
pointer-events: none;
.art-full(11);
.art-bg-cover();
pointer-events: none;
}
packages/artplayer/src/style/progress.less
+127 -122
View File
@@ -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;
}
}
}
}
packages/artplayer/src/style/selector.less
+42 -42
View File
@@ -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;
}
}
}
packages/artplayer/src/style/setting.less
+96 -96
View File
@@ -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;
}
}
}
packages/artplayer/src/style/subtitle.less
+31 -31
View File
@@ -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));
}
}
}
packages/artplayer/src/style/variables.less
+43 -43
View File
@@ -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;
}
packages/artplayer/src/style/video.less
+1 -1
View File
@@ -1,3 +1,3 @@
.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 {
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;
}
}
}