mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-26 17:01:20 -08:00
V5 (#500)
* update dep * Update package.json * update contextmenu * update d.ts * update onVttLoad * build artplayer * update style * --art-theme * update style * update style * update user-select * add getIcon * update style * update style * update style * update style * update style * update style * update style * update style * update style * update style * update style * update style * update style * update style * update style * add progress-hover * update mini * update style * update style * update style * update style * update style * update volume * update style * add art-backdrop * update style * update style * update style * update currentLevel * update artplayerPluginControl * update artplayerPluginDanmuku * Update package.json
This commit is contained in:
Harvey Zack authored and GitHub committed
1 parent
af12bd9634
commit
7b53de941d
80 files changed
+1393
-1362
No files matched your search
@@ -1,21 +1,22 @@
|
||||
.art-video-player {
|
||||
display: flex;
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
z-index: 20;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
outline: 0;
|
||||
zoom: 1;
|
||||
font-family: Roboto, Arial, Helvetica, sans-serif;
|
||||
color: #eee;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
direction: ltr;
|
||||
font-size: 14px;
|
||||
line-height: 1.3;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
background-color: #000;
|
||||
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
|
||||
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;
|
||||
|
||||
@@ -28,27 +29,17 @@
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
width: var(--art-scrollbar-size);
|
||||
height: var(--art-scrollbar-size);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: #666;
|
||||
background-color: var(--art-scrollbar-background);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.art-icon {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
line-height: 1.5;
|
||||
|
||||
svg {
|
||||
fill: #fff;
|
||||
}
|
||||
background-color: var(--art-scrollbar-background-hover);
|
||||
}
|
||||
|
||||
img {
|
||||
@@ -56,11 +47,12 @@
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
@supports ((-webkit-backdrop-filter: initial) or (backdrop-filter: initial)) {
|
||||
.art-backdrop-filter {
|
||||
-webkit-backdrop-filter: saturate(180%) blur(20px);
|
||||
backdrop-filter: saturate(180%) blur(20px);
|
||||
background-color: rgba(0, 0, 0, 0.7) !important;
|
||||
}
|
||||
svg {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@@ -1,9 +1,7 @@
|
||||
.art-auto-size {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.art-center();
|
||||
|
||||
.art-video-player {
|
||||
transition: all 0.2s ease;
|
||||
transition: width, height var(--art-duration) ease;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +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();
|
||||
}
|
||||
}
|
||||
@@ -2,338 +2,24 @@
|
||||
.art-bottom {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
position: absolute;
|
||||
z-index: 60;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 100px;
|
||||
padding: 50px 10px 0;
|
||||
justify-content: end;
|
||||
.art-full(60);
|
||||
top: auto;
|
||||
gap: var(--art-bottom-gap);
|
||||
bottom: var(--art-bottom-offset);
|
||||
height: var(--art-bottom-height);
|
||||
padding: 0 10px;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.2s ease-in-out;
|
||||
pointer-events: none;
|
||||
background-image: linear-gradient(to top, #000, rgb(0 0 0 / 40%), transparent);
|
||||
background-repeat: repeat-x;
|
||||
background-position: center bottom;
|
||||
|
||||
.art-progress {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
pointer-events: auto;
|
||||
|
||||
.art-control-progress {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 4px;
|
||||
cursor: pointer;
|
||||
|
||||
.art-control-progress-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
transition: all 0.2s ease;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
|
||||
.art-progress-loaded {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.art-progress-played {
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.art-progress-highlight {
|
||||
position: absolute;
|
||||
z-index: 30;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 7px;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.art-progress-indicator {
|
||||
visibility: hidden;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
z-index: 40;
|
||||
border-radius: 50%;
|
||||
transform: scale(0.1, 0.1);
|
||||
transition: transform 0.1s ease-in-out;
|
||||
|
||||
.art-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.2, 1.2) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.art-progress-tip {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 50;
|
||||
top: -25px;
|
||||
left: 0;
|
||||
height: 20px;
|
||||
padding: 0 5px;
|
||||
line-height: 20px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
border-radius: 3px;
|
||||
font-weight: bold;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.art-control-thumbnails {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
border-radius: 3px;
|
||||
pointer-events: none;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.2);
|
||||
}
|
||||
|
||||
.art-control-loop {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
|
||||
.art-loop-point {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -2px;
|
||||
width: 2px;
|
||||
height: 8px;
|
||||
background: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.art-controls {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
pointer-events: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 45px;
|
||||
|
||||
.art-controls-left,
|
||||
.art-controls-right {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.art-controls-center {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.art-controls-right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.art-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0.75;
|
||||
font-size: 12px;
|
||||
min-height: 36px;
|
||||
min-width: 36px;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
transition: opacity 0.1s ease-in-out;
|
||||
.art-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
float: left;
|
||||
height: 36px;
|
||||
width: 36px;
|
||||
transform: scale(1);
|
||||
transition: transform 0.2s ease-in-out;
|
||||
&:active {
|
||||
transform: scale(0.85);
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.art-control-volume {
|
||||
.art-volume-panel {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
transition: margin 0.2s cubic-bezier(0.4, 0, 1, 1), width 0.2s cubic-bezier(0.4, 0, 1, 1);
|
||||
overflow: hidden;
|
||||
|
||||
.art-volume-slider-handle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 12px;
|
||||
margin-top: -6px;
|
||||
background: #fff;
|
||||
|
||||
&::before {
|
||||
left: -54px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: 6px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 50%;
|
||||
height: 3px;
|
||||
margin-top: -2px;
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .art-volume-panel {
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.art-control-quality {
|
||||
position: relative;
|
||||
z-index: 30;
|
||||
.art-qualitys {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 35px;
|
||||
width: 100px;
|
||||
padding: 5px 0;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 3px;
|
||||
.art-quality-item {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover .art-qualitys {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.art-progress .art-control-progress .art-control-progress-inner {
|
||||
.art-progress-indicator {
|
||||
transform: scale(1, 1);
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
transition: all var(--art-duration) ease;
|
||||
.art-bottom-gradient();
|
||||
}
|
||||
|
||||
&.art-control-show,
|
||||
&.art-hover {
|
||||
.art-bottom {
|
||||
bottom: 0;
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
&.art-error,
|
||||
&.art-destroy {
|
||||
.art-progress-indicator,
|
||||
.art-progress-tip {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.art-mobile {
|
||||
.art-bottom {
|
||||
height: 105px;
|
||||
padding: 50px 7px 0;
|
||||
.art-controls {
|
||||
height: 40px;
|
||||
}
|
||||
.art-progress-indicator {
|
||||
transform: scale(1, 1) !important;
|
||||
visibility: visible !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -4,36 +4,24 @@
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
z-index: 120;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
min-width: 200px;
|
||||
padding: 5px 0;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
background-color: var(--art-background);
|
||||
min-width: var(--art-contextmenus-min-width);
|
||||
|
||||
.art-contextmenu {
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
display: block;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
padding: 10px 15px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
padding: 0 7px;
|
||||
padding: 0 8px;
|
||||
|
||||
&:hover,
|
||||
&.art-current {
|
||||
color: var(--theme);
|
||||
color: var(--art-theme);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,52 @@
|
||||
.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-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;
|
||||
|
||||
&:active {
|
||||
transform: scale(calc(var(--art-control-icon-scale) * 0.8));
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,14 +1,4 @@
|
||||
.art-video-player {
|
||||
.art-danmuku {
|
||||
position: absolute;
|
||||
z-index: 30;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
}
|
||||
.art-danmuku {
|
||||
.art-full(30);
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -1,12 +1,3 @@
|
||||
.art-video-player {
|
||||
&.art-fullscreen-web {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
.art-fullscreen-web {
|
||||
.art-full(9999, fixed);
|
||||
}
|
||||
@@ -1,7 +1,3 @@
|
||||
.art-video-player {
|
||||
&.art-hide-cursor {
|
||||
* {
|
||||
cursor: none !important;
|
||||
}
|
||||
}
|
||||
.art-hide-cursor * {
|
||||
cursor: none !important;
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
.art-icon {
|
||||
line-height: 1;
|
||||
.art-center();
|
||||
}
|
||||
@@ -1,4 +1,8 @@
|
||||
@import './variables.less';
|
||||
@import './mixins.less';
|
||||
@import './artplayer.less';
|
||||
@import './icon.less';
|
||||
@import './backdrop.less';
|
||||
@import './video.less';
|
||||
@import './poster.less';
|
||||
@import './subtitle.less';
|
||||
@@ -7,6 +11,9 @@
|
||||
@import './mask.less';
|
||||
@import './loading.less';
|
||||
@import './bottom.less';
|
||||
@import './progress.less';
|
||||
@import './controls.less';
|
||||
@import './volume.less';
|
||||
@import './notice.less';
|
||||
@import './contextmenu.less';
|
||||
@import './setting.less';
|
||||
@@ -20,3 +27,4 @@
|
||||
@import './plugins.less';
|
||||
@import './selector.less';
|
||||
@import './hint.less';
|
||||
@import './mobile.less';
|
||||
@@ -1,38 +1,35 @@
|
||||
.art-video-player {
|
||||
.art-info {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
top: 10px;
|
||||
z-index: 100;
|
||||
width: 350px;
|
||||
padding: 10px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-family: Noto Sans CJK SC DemiLight, Roboto, Segoe UI, Tahoma, Arial, Helvetica, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
border-radius: 3px;
|
||||
background-color: var(--art-background);
|
||||
|
||||
.art-info-item {
|
||||
.art-info-panel {
|
||||
display: flex;
|
||||
margin-bottom: 5px;
|
||||
.art-info-title {
|
||||
width: 100px;
|
||||
text-align: right;
|
||||
}
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
|
||||
.art-info-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
user-select: all;
|
||||
padding-left: 5px;
|
||||
}
|
||||
.art-info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
.art-info-title {
|
||||
width: 100px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.art-info-content {
|
||||
width: 250px;
|
||||
.art-truncate();
|
||||
user-select: all;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,17 +1,9 @@
|
||||
.art-video-player {
|
||||
.art-layers {
|
||||
.art-full(40);
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 40;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
|
||||
|
||||
.art-layer {
|
||||
pointer-events: auto;
|
||||
}
|
||||
@@ -19,7 +11,7 @@
|
||||
|
||||
&.art-layer-show {
|
||||
.art-layers {
|
||||
display: block;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,16 +1,7 @@
|
||||
.art-video-player {
|
||||
.art-loading {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 70;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.art-center(none);
|
||||
.art-full(70);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,43 +1,29 @@
|
||||
.art-video-player {
|
||||
.art-mask {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
z-index: 50;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
.art-center();
|
||||
.art-full(50);
|
||||
pointer-events: none;
|
||||
|
||||
.art-state {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
bottom: 65px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
opacity: 0.85;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
.art-center();
|
||||
opacity: 0;
|
||||
transform: scale(2);
|
||||
width: var(--art-state-size);
|
||||
height: var(--art-state-size);
|
||||
transition: all var(--art-duration) ease;
|
||||
}
|
||||
}
|
||||
|
||||
&.art-mask-show {
|
||||
.art-mask {
|
||||
display: flex;
|
||||
.art-state {
|
||||
opacity: var(--art-state-opacity);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
&.art-mobile {
|
||||
&.art-loading-show {
|
||||
.art-state {
|
||||
position: static;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,74 +1,62 @@
|
||||
.art-video-player {
|
||||
.art-mini-header {
|
||||
display: none;
|
||||
.art-mini-popup {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
width: 320px;
|
||||
height: 180px;
|
||||
background: #000;
|
||||
border-radius: 3px;
|
||||
cursor: move;
|
||||
user-select: none;
|
||||
overflow: hidden;
|
||||
transition: opacity 0.2s ease;
|
||||
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
|
||||
|
||||
svg {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.art-video {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.art-mini-close {
|
||||
position: absolute;
|
||||
z-index: 110;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
color: #fff;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
z-index: 20;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.2s ease-in-out;
|
||||
.art-mini-title {
|
||||
flex: 1;
|
||||
padding: 0 10px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
cursor: move;
|
||||
}
|
||||
.art-mini-close {
|
||||
width: 35px;
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.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;
|
||||
|
||||
&.art-is-dragging {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&.art-mini {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
width: 400px;
|
||||
height: 225px;
|
||||
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.2);
|
||||
|
||||
.art-mini-header {
|
||||
display: flex;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
&.art-hover {
|
||||
.art-mini-header {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
&:active {
|
||||
transform: scale(2.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.art-mask {
|
||||
.art-state {
|
||||
position: static;
|
||||
}
|
||||
}
|
||||
&.art-mini-droging {
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.art-contextmenu,
|
||||
.art-bottom,
|
||||
.art-danmu,
|
||||
.art-info,
|
||||
.art-layers,
|
||||
.art-notice,
|
||||
.art-settings,
|
||||
.art-subtitle {
|
||||
display: none !important;
|
||||
&:hover {
|
||||
.art-mini-close, .art-mini-state {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
.art-center(@display: flex) {
|
||||
display: @display;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.art-full(@index: 0, @position: absolute) {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: @index;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.art-bg-cover {
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.art-text-border {
|
||||
text-shadow: #000 1px 0 1px, #000 0 1px 1px, #000 -1px 0 1px, #000 0 -1px 1px, #000 1px 1px 1px, #000 -1px -1px 1px,
|
||||
#000 1px -1px 1px, #000 -1px 1px 1px;
|
||||
}
|
||||
|
||||
.art-bottom-gradient {
|
||||
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;
|
||||
}
|
||||
|
||||
.art-truncate {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
Whitespace-only changes.
@@ -1,7 +1,6 @@
|
||||
.art-video-player {
|
||||
.art-notice {
|
||||
display: none;
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
z-index: 80;
|
||||
left: 0;
|
||||
@@ -9,12 +8,13 @@
|
||||
padding: 10px;
|
||||
width: 100%;
|
||||
pointer-events: none;
|
||||
|
||||
.art-notice-inner {
|
||||
display: inline-block;
|
||||
padding: 5px 10px;
|
||||
color: #fff;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
display: inline-flex;
|
||||
padding: 5px;
|
||||
line-height: 1;
|
||||
border-radius: 3px;
|
||||
background-color: var(--art-background);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,58 +1,48 @@
|
||||
.art-video-player {
|
||||
.art-layer-miniProgressBar {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
.art-layer-mini-progress-bar {
|
||||
display: flex;
|
||||
.art-full();
|
||||
top: auto;
|
||||
height: 2px;
|
||||
background-color: var(--theme);
|
||||
background-color: var(--art-theme);
|
||||
}
|
||||
|
||||
.art-layer-lock {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
.art-center(none);
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: calc(50% - 17px);
|
||||
height: 34px;
|
||||
width: 34px;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
background-color: var(--art-background);
|
||||
}
|
||||
|
||||
.art-layer-autoPlayback {
|
||||
.art-layer-auto-playback {
|
||||
display: none;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
bottom: 60px;
|
||||
left: 10px;
|
||||
border-radius: 3px;
|
||||
padding: 10px;
|
||||
line-height: 1;
|
||||
background-color: rgb(0 0 0 / 80%);
|
||||
bottom: calc(var(--art-control-height) + var(--art-bottom-gap) + 10px);
|
||||
background-color: var(--art-background);
|
||||
|
||||
.art-autoPlayback-close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
.art-auto-playback-close {
|
||||
.art-center();
|
||||
cursor: pointer;
|
||||
|
||||
svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
fill: var(--theme);
|
||||
fill: var(--art-theme);
|
||||
}
|
||||
}
|
||||
|
||||
.art-autoPlayback-last {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.art-autoPlayback-jump {
|
||||
color: var(--theme);
|
||||
.art-auto-playback-jump {
|
||||
color: var(--art-theme);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@@ -63,16 +53,16 @@
|
||||
}
|
||||
|
||||
.art-subtitle {
|
||||
bottom: 10px !important;
|
||||
bottom: var(--art-subtitle-bottom) !important;
|
||||
}
|
||||
|
||||
.art-layer-miniProgressBar {
|
||||
display: block !important;
|
||||
.art-layer-mini-progress-bar {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
|
||||
&.art-control-show {
|
||||
.art-layer-miniProgressBar {
|
||||
.art-layer-mini-progress-bar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,17 +1,5 @@
|
||||
.art-video-player {
|
||||
.art-poster {
|
||||
position: absolute;
|
||||
z-index: 11;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
.art-poster {
|
||||
.art-full(11);
|
||||
.art-bg-cover();
|
||||
pointer-events: none;
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
.art-bottom {
|
||||
.art-progress {
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
pointer-events: auto;
|
||||
|
||||
.art-control-progress {
|
||||
position: relative;
|
||||
.art-center();
|
||||
cursor: pointer;
|
||||
height: var(--art-progress-height);
|
||||
|
||||
.art-control-progress-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
height: 50%;
|
||||
width: 100%;
|
||||
transition: height var(--art-duration) ease;
|
||||
background-color: var(--art-progress-color);
|
||||
|
||||
.art-progress-hover {
|
||||
display: none;
|
||||
.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%;
|
||||
}
|
||||
|
||||
.art-progress-highlight {
|
||||
.art-full(30);
|
||||
pointer-events: none;
|
||||
|
||||
span {
|
||||
.art-full();
|
||||
right: auto;
|
||||
pointer-events: auto;
|
||||
width: var(--art-highlight-width);
|
||||
transform: translateX(calc(var(--art-highlight-width) / -2));
|
||||
background-color: var(--art-highlight-color);
|
||||
}
|
||||
}
|
||||
|
||||
.art-progress-indicator {
|
||||
.art-center();
|
||||
position: absolute;
|
||||
z-index: 40;
|
||||
border-radius: 50%;
|
||||
transform: scale(0);
|
||||
transition: transform var(--art-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 {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 50;
|
||||
top: -25px;
|
||||
left: 0;
|
||||
padding: 3px 5px;
|
||||
line-height: 1;
|
||||
font-size: 12px;
|
||||
border-radius: 3px;
|
||||
white-space: nowrap;
|
||||
background-color: var(--art-background);
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.art-control-progress-inner {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.art-control-thumbnails {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
left: 0;
|
||||
border-radius: 3px;
|
||||
pointer-events: none;
|
||||
background-color: var(--art-background);
|
||||
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.2);
|
||||
}
|
||||
|
||||
.art-control-loop {
|
||||
.art-full();
|
||||
display: none;
|
||||
pointer-events: none;
|
||||
|
||||
.art-loop-point {
|
||||
.art-full();
|
||||
left: 0%;
|
||||
width: var(--art-loop-width);
|
||||
background-color: var(--art-loop-color);
|
||||
transform: translateX(calc(var(--art-loop-width) / -2)) scaleY(1.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.art-progress .art-control-progress .art-control-progress-inner .art-progress-indicator {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,38 +1,42 @@
|
||||
.art-video-player {
|
||||
.art-control-selector {
|
||||
position: relative;
|
||||
.art-selector-list {
|
||||
display: none;
|
||||
position: absolute;
|
||||
bottom: 35px;
|
||||
min-width: 100px;
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
overflow: auto;
|
||||
padding: 5px 0;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 3px;
|
||||
.art-selector-item {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding: 0 5px;
|
||||
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
|
||||
&:hover {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
&:hover,
|
||||
&.art-current {
|
||||
color: var(--theme);
|
||||
}
|
||||
.art-control-selector {
|
||||
position: relative;
|
||||
|
||||
.art-selector-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
border-radius: 3px;
|
||||
bottom: var(--art-control-height);
|
||||
background-color: var(--art-background);
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
pointer-events: none;
|
||||
transition: all var(--art-duration) ease;
|
||||
|
||||
.art-selector-item {
|
||||
.art-center();
|
||||
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: block;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.art-selector-list {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,23 +1,21 @@
|
||||
.art-video-player {
|
||||
.art-settings {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
z-index: 90;
|
||||
left: 0;
|
||||
bottom: 60px;
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
font-size: 13px;
|
||||
border-radius: 3px;
|
||||
max-height: 300px;
|
||||
transition: all 0.2s ease;
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
bottom: var(--art-control-height);
|
||||
transition: all var(--art-duration) ease;
|
||||
background-color: var(--art-background);
|
||||
|
||||
.art-setting-panel {
|
||||
display: none;
|
||||
flex-direction: column;
|
||||
|
||||
&.art-current {
|
||||
display: block;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.art-setting-item {
|
||||
@@ -29,7 +27,7 @@
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
@@ -37,15 +35,7 @@
|
||||
}
|
||||
|
||||
&.art-current {
|
||||
color: var(--theme);
|
||||
}
|
||||
|
||||
.art-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
color: var(--art-theme);
|
||||
}
|
||||
|
||||
.art-icon-check {
|
||||
@@ -58,35 +48,29 @@
|
||||
}
|
||||
|
||||
.art-setting-item-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
white-space: nowrap;
|
||||
.art-center();
|
||||
gap: 5px;
|
||||
|
||||
.art-setting-item-left-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
margin-right: 10px;
|
||||
.art-center();
|
||||
height: var(--art-settings-icon-size);
|
||||
width: var(--art-settings-icon-size);
|
||||
}
|
||||
}
|
||||
|
||||
.art-setting-item-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.art-center();
|
||||
gap: 5px;
|
||||
font-size: 12px;
|
||||
|
||||
.art-setting-item-right-tooltip {
|
||||
font-size: 12px;
|
||||
margin-right: 5px;
|
||||
white-space: nowrap;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.art-setting-item-right-icon {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.art-center();
|
||||
min-width: 32px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
@@ -108,13 +92,7 @@
|
||||
|
||||
&.art-setting-show {
|
||||
.art-settings {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.art-mobile {
|
||||
.art-settings {
|
||||
max-height: 200px;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,36 +1,33 @@
|
||||
.art-video-player {
|
||||
.art-subtitle {
|
||||
display: none;
|
||||
.art-center(none);
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
z-index: 20;
|
||||
bottom: 10px;
|
||||
width: 100%;
|
||||
padding: 0 20px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
padding: 0 5%;
|
||||
gap: var(--art-subtitle-gap);
|
||||
bottom: var(--art-subtitle-bottom);
|
||||
font-size: var(--art-subtitle-font-size);
|
||||
pointer-events: none;
|
||||
transition: bottom 0.2s ease;
|
||||
text-shadow: #000 1px 0 1px, #000 0 1px 1px, #000 -1px 0 1px, #000 0 -1px 1px, #000 1px 1px 1px,
|
||||
#000 -1px -1px 1px, #000 1px -1px 1px, #000 -1px 1px 1px;
|
||||
transition: bottom var(--art-duration) ease;
|
||||
.art-text-border();
|
||||
|
||||
p {
|
||||
word-break: break-all;
|
||||
height: fit-content;
|
||||
margin: 5px 0 0;
|
||||
line-height: 1.2;
|
||||
}
|
||||
}
|
||||
|
||||
&.art-subtitle-show {
|
||||
.art-subtitle {
|
||||
display: block;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
&.art-control-show {
|
||||
.art-subtitle {
|
||||
bottom: 50px;
|
||||
bottom: calc(var(--art-control-height) + var(--art-subtitle-bottom));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
.art-video-player {
|
||||
--art-theme: #f00;
|
||||
--art-duration: 0.2s;
|
||||
--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-loop-width: 2px;
|
||||
--art-control-opacity: 0.75;
|
||||
--art-control-icon-size: 36px;
|
||||
--art-control-icon-scale: 1.1;
|
||||
--art-volume-handle-size: 14px;
|
||||
--art-background: rgba(0, 0, 0, 0.85);
|
||||
--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;
|
||||
}
|
||||
@@ -1,14 +1,4 @@
|
||||
.art-video-player {
|
||||
.art-video {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
left: 0;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #000;
|
||||
cursor: pointer;
|
||||
}
|
||||
.art-video {
|
||||
.art-full(10);
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
.art-control-volume {
|
||||
position: relative;
|
||||
|
||||
.art-volume-panel {
|
||||
.art-center(flex);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: var(--art-control-height);
|
||||
width: var(--art-control-height);
|
||||
height: 120px;
|
||||
padding: 0 5px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
pointer-events: none;
|
||||
transition: all var(--art-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: 3px;
|
||||
background-color: var(--art-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: 3px;
|
||||
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-duration) ease;
|
||||
}
|
||||
|
||||
&:active {
|
||||
.art-volume-indicator {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.art-volume-panel {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user