x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-20 04:01: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:39:52 +08:00
1 parent 89206e3924
commit 48268ef091
8 files changed
+65 -24
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/style/bottom.less
+1 -1
View File
@@ -10,7 +10,7 @@
gap: var(--art-bottom-gap);
bottom: var(--art-bottom-offset);
height: var(--art-bottom-height);
padding: 0 var(--art-player-padding);
padding: 0 var(--art-padding);
transition: all var(--art-transition-duration) ease;
.art-bottom-gradient();
}
packages/artplayer/src/style/info.less
+2 -2
View File
@@ -2,8 +2,8 @@
.art-info {
display: none;
position: absolute;
left: var(--art-player-padding);
top: var(--art-player-padding);
left: var(--art-padding);
top: var(--art-padding);
z-index: 100;
padding: 10px;
font-size: 12px;
packages/artplayer/src/style/notice.less
+1 -1
View File
@@ -4,7 +4,7 @@
.art-full(80);
height: auto;
bottom: auto;
padding: var(--art-player-padding);
padding: var(--art-padding);
pointer-events: none;
.art-notice-inner {
packages/artplayer/src/style/plugins.less
+3 -3
View File
@@ -3,7 +3,7 @@
display: flex;
.art-full();
top: auto;
height: 2px;
height: var(--art-mini-progress-height);
background-color: var(--art-theme);
}
@@ -15,7 +15,7 @@
transform: translateY(-50%);
height: var(--art-lock-size);
width: var(--art-lock-size);
left: var(--art-player-padding);
left: var(--art-padding);
background-color: var(--art-tip-background);
}
@@ -27,7 +27,7 @@
border-radius: 3px;
padding: 10px;
line-height: 1;
left: var(--art-player-padding);
left: var(--art-padding);
bottom: calc(var(--art-control-height) + var(--art-bottom-gap) + 10px);
background-color: var(--art-widget-background);
packages/artplayer/src/style/setting.less
+1 -1
View File
@@ -8,7 +8,7 @@
overflow: hidden;
border-radius: 3px;
transform-origin: bottom right;
right: var(--art-player-padding);
right: var(--art-padding);
bottom: var(--art-control-height);
transform: scale(var(--art-settings-scale));
transition: all var(--art-transition-duration) ease;
packages/artplayer/src/style/variables.less
+15 -14
View File
@@ -4,39 +4,40 @@
--art-background-color: #000;
--art-text-shadow-color: rgba(0, 0, 0, 0.5);
--art-transition-duration: 0.2s;
--art-player-padding: 10px;
--art-padding: 10px;
--art-progress-height: 6px;
--art-progress-color: rgba(255, 255, 255, 0.2);
--art-hover-color: rgba(255, 255, 255, 0.5);
--art-loaded-color: rgba(255, 255, 255, 0.2);
--art-loop-color: rgba(255, 255, 255, 0.75);
--art-state-size: 80px;
--art-state-opacity: 0.8;
--art-subtitle-font-size: 20px;
--art-subtitle-gap: 5px;
--art-subtitle-bottom: 15px;
--art-control-height: 46px;
--art-bottom-height: 100px;
--art-bottom-offset: -20px;
--art-bottom-gap: 5px;
--art-progress-height: 6px;
--art-highlight-width: 8px;
--art-highlight-color: rgba(255, 255, 255, 0.5);
--art-loop-width: 2px;
--art-control-height: 46px;
--art-control-opacity: 0.75;
--art-control-icon-size: 36px;
--art-control-icon-scale: 1.1;
--art-settings-scale: 1;
--art-volume-height: 120px;
--art-volume-handle-size: 14px;
--art-lock-size: 36px;
--art-indicator-size: 16px;
--art-fullscreen-web-index: 9999;
--art-settings-scale: 1;
--art-settings-icon-size: 24px;
--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.5);
--art-settings-icon-size: 24px;
--art-progress-color: rgba(255, 255, 255, 0.2);
--art-hover-color: rgba(255, 255, 255, 0.5);
--art-loaded-color: rgba(255, 255, 255, 0.2);
--art-highlight-color: rgba(255, 255, 255, 0.5);
--art-loop-color: rgba(255, 255, 255, 0.75);
--art-scrollbar-size: 5px;
--art-scrollbar-background: #666;
--art-scrollbar-background-hover: #ccc;
--art-contextmenus-min-width: 250px;
--art-mini-progress-height: 2px;
}
packages/artplayer/types/cssVar.d.ts
Vendored
+41 -1
View File
@@ -1,3 +1,43 @@
export type CssVar = {
//
'--art-theme': string;
'--art-font-color': string;
'--art-background-color': string;
'--art-text-shadow-color': string;
'--art-transition-duration': string;
'--art-padding': string;
'--art-progress-height': string;
'--art-progress-color': string;
'--art-hover-color': string;
'--art-loaded-color': string;
'--art-loop-color': string;
'--art-state-size': string;
'--art-state-opacity': number;
'--art-bottom-height': string;
'--art-bottom-offset': string;
'--art-bottom-gap': string;
'--art-highlight-width': string;
'--art-highlight-color': string;
'--art-loop-width': string;
'--art-control-height': string;
'--art-control-opacity': number;
'--art-control-icon-size': string;
'--art-control-icon-scale': number;
'--art-volume-height': string;
'--art-volume-handle-size': string;
'--art-lock-size': string;
'--art-indicator-size': string;
'--art-fullscreen-web-index': 9999;
'--art-settings-scale': number;
'--art-settings-icon-size': string;
'--art-contextmenus-min-width': string;
'--art-subtitle-font-size': string;
'--art-subtitle-gap': string;
'--art-subtitle-bottom': string;
'--art-subtitle-border': string;
'--art-widget-background': string;
'--art-tip-background': string;
'--art-scrollbar-size': string;
'--art-scrollbar-background': string;
'--art-scrollbar-background-hover': string;
'--art-mini-progress-height': string;
};