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

update style

Browse Source
This commit is contained in:
Harvey Zack committed 2023-04-19 09:04:18 +08:00
1 parent 677c99aa38
commit 4848b9e48c
17 files changed
+38 -31
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/control/progress.js
+1 -1
View File
@@ -89,7 +89,7 @@ export default function progress(options) {
if (type === 'played') {
setStyle($played, 'width', `${percentage * 100}%`);
setStyle($indicator, 'left', `calc(${percentage * 100}% - var(--art-indicator-size) / 2)`);
setStyle($indicator, 'left', `${percentage * 100}%`);
}
}
packages/artplayer/src/style/autoSize.less
+1 -1
View File
@@ -2,6 +2,6 @@
.art-center();
.art-video-player {
transition: width, height var(--art-duration) ease;
transition: width, height var(--art-transition-duration) ease;
}
}
packages/artplayer/src/style/bottom.less
+2 -2
View File
@@ -8,10 +8,10 @@
gap: var(--art-bottom-gap);
bottom: var(--art-bottom-offset);
height: var(--art-bottom-height);
padding: 0 var(--art-padding);
padding: 0 var(--art-player-padding);
opacity: 0;
pointer-events: none;
transition: all var(--art-duration) ease;
transition: all var(--art-transition-duration) ease;
.art-bottom-gradient();
}
packages/artplayer/src/style/controls.less
+2 -2
View File
@@ -32,13 +32,13 @@
opacity: var(--art-control-opacity);
min-height: var(--art-control-height);
min-width: var(--art-control-height);
transition: opacity var(--art-duration) ease;
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-duration) ease;
transition: transform var(--art-transition-duration) ease;
&:active {
transform: scale(calc(var(--art-control-icon-scale) * 0.8));
packages/artplayer/src/style/info.less
+2 -2
View File
@@ -2,8 +2,8 @@
.art-info {
display: none;
position: absolute;
left: var(--art-padding);
top: var(--art-padding);
left: var(--art-player-padding);
top: var(--art-player-padding);
z-index: 100;
padding: 10px;
font-size: 12px;
packages/artplayer/src/style/mask.less
+1 -1
View File
@@ -10,7 +10,7 @@
transform: scale(2);
width: var(--art-state-size);
height: var(--art-state-size);
transition: all var(--art-duration) ease;
transition: all var(--art-transition-duration) ease;
}
}
packages/artplayer/src/style/mobile.less
+1
View File
@@ -2,4 +2,5 @@
--art-control-height: 38px;
--art-control-icon-scale: 1;
--art-state-size: 60px;
--art-settings-scale: 0.75;
}
packages/artplayer/src/style/notice.less
+1 -1
View File
@@ -4,7 +4,7 @@
.art-full(80);
height: auto;
bottom: auto;
padding: var(--art-padding);
padding: var(--art-player-padding);
pointer-events: none;
.art-notice-inner {
packages/artplayer/src/style/plugins.less
+6 -5
View File
@@ -10,11 +10,12 @@
.art-layer-lock {
.art-center(none);
position: absolute;
left: 15px;
top: calc(50% - 17px);
height: 34px;
width: 34px;
top: 50%;
border-radius: 50%;
transform: translateY(-50%);
height: var(--art-lock-size);
width: var(--art-lock-size);
left: var(--art-player-padding);
background-color: var(--art-tip-background);
}
@@ -26,7 +27,7 @@
border-radius: 3px;
padding: 10px;
line-height: 1;
left: var(--art-padding);
left: var(--art-player-padding);
bottom: calc(var(--art-control-height) + var(--art-bottom-gap) + 10px);
background-color: var(--art-widget-background);
packages/artplayer/src/style/progress.less
+6 -5
View File
@@ -16,7 +16,7 @@
position: relative;
height: 50%;
width: 100%;
transition: height var(--art-duration) ease;
transition: height var(--art-transition-duration) ease;
background-color: var(--art-progress-color);
.art-progress-hover {
@@ -56,12 +56,13 @@
.art-center();
position: absolute;
z-index: 40;
left: calc(var(--art-indicator-size) / -2);
left: 0;
transform: scale(0);
border-radius: 50%;
width: var(--art-indicator-size);
height: var(--art-indicator-size);
border-radius: 50%;
transform: scale(0);
transition: transform var(--art-duration) ease;
margin-left: calc(var(--art-indicator-size) / -2);
transition: transform var(--art-transition-duration) ease;
.art-icon {
width: 100%;
packages/artplayer/src/style/selector.less
+1 -1
View File
@@ -13,7 +13,7 @@
opacity: 0;
transform: translateY(10px);
pointer-events: none;
transition: all var(--art-duration) ease;
transition: all var(--art-transition-duration) ease;
.art-selector-item {
.art-center();
packages/artplayer/src/style/setting.less
+4 -2
View File
@@ -7,9 +7,11 @@
left: auto;
overflow: hidden;
border-radius: 3px;
right: var(--art-padding);
transform-origin: bottom right;
right: var(--art-player-padding);
bottom: var(--art-control-height);
transition: all var(--art-duration) ease;
transform: scale(var(--art-settings-scale));
transition: all var(--art-transition-duration) ease;
background-color: var(--art-widget-background);
.art-setting-panel {
packages/artplayer/src/style/subtitle.less
+1 -1
View File
@@ -10,7 +10,7 @@
bottom: var(--art-subtitle-bottom);
font-size: var(--art-subtitle-font-size);
pointer-events: none;
transition: bottom var(--art-duration) ease;
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;
packages/artplayer/src/style/variables.less
+4 -2
View File
@@ -1,7 +1,7 @@
.art-video-player {
--art-theme: #f00;
--art-duration: 0.2s;
--art-padding: 10px;
--art-transition-duration: 0.2s;
--art-player-padding: 10px;
--art-state-size: 80px;
--art-state-opacity: 0.8;
--art-subtitle-font-size: 20px;
@@ -17,7 +17,9 @@
--art-control-opacity: 0.75;
--art-control-icon-size: 36px;
--art-control-icon-scale: 1.1;
--art-settings-scale: 1;
--art-volume-handle-size: 14px;
--art-lock-size: 36px;
--art-indicator-size: 16px;
--art-subtitle-border: #000;
--art-widget-background: rgba(0, 0, 0, 0.85);
packages/artplayer/src/style/volume.less
+2 -2
View File
@@ -16,7 +16,7 @@
opacity: 0;
transform: translateY(10px);
pointer-events: none;
transition: all var(--art-duration) ease;
transition: all var(--art-transition-duration) ease;
.art-volume-inner {
display: flex;
@@ -62,7 +62,7 @@
transform: scale(1);
border-radius: 100%;
background-color: var(--art-theme);
transition: transform var(--art-duration) ease;
transition: transform var(--art-transition-duration) ease;
}
&:active {