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

Refactor controls.less for improved readability and structure

Browse Source 
- Organized the control layout by grouping related styles together.
- Enhanced the alignment and spacing properties for better consistency.
- Maintained existing functionality while improving code clarity.
This commit is contained in:
Harvey Zhao committed 2026-01-12 22:10:34 +08:00
1 parent 8b5b366da3
commit 07a5b0c0f0
2 files changed
+48 -45
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/style/controls.less
+47 -44
View File
@@ -1,52 +1,55 @@
.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-left,
.art-controls-right {
position: relative;
z-index: 10;
pointer-events: auto;
display: flex;
height: 100%;
}
align-items: center;
justify-content: space-between;
height: var(--art-control-height);
.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));
}
.art-controls-left,
.art-controls-right {
display: flex;
height: 100%;
}
&:hover {
opacity: 1;
.art-controls-center {
.art-center(none);
flex: 1;
height: 100%;
padding: 0 10px;
}
.art-controls-right {
justify-content: flex-end;
}
.art-control {
.art-center();
flex-shrink: 0;
cursor: pointer;
white-space: nowrap;
opacity: var(--art-control-opacity);
min-height: var(--art-control-height);
min-width: var(--art-control-height);
transition: opacity var(--art-transition-duration) ease;
.art-icon {
height: var(--art-control-icon-size);
width: var(--art-control-icon-size);
transform: scale(var(--art-control-icon-scale));
transition: transform var(--art-transition-duration) ease;
&:active {
transform: scale(calc(var(--art-control-icon-scale) * 0.8));
}
}
&:hover {
opacity: 1;
}
}
}
}