diff --git a/eslint.config.js b/eslint.config.js
index 9444241c8..f363264de 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,7 +1,15 @@
-import antfu from '@antfu/eslint-config'
+import antfu from "@antfu/eslint-config";
 
 export default antfu({
-  rules: {
-    'eslint-comments/no-unlimited-disable': 'off',
-  },
-})
+    ignores: [
+        "**/hint.less",
+    ],
+    formatters: {
+        css: true,
+        html: true,
+        markdown: 'prettier',
+    },
+    rules: {
+        "eslint-comments/no-unlimited-disable": "off",
+    },
+});
diff --git a/package.json b/package.json
index bb6b8f563..351502993 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "dotenv": "^17.2.1",
     "esbuild": "^0.27.3",
     "eslint": "^9.32.0",
+    "eslint-plugin-format": "^2.0.1",
     "glob": "^13.0.6",
     "lerna": "^8.2.3",
     "less": "^4.5.1",
@@ -57,4 +58,4 @@
     "terser": "^5.46.0",
     "vite": "^7.3.1"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/artplayer-plugin-ads/src/style.less b/packages/artplayer-plugin-ads/src/style.less
index d3dc8e481..97a751f9e 100644
--- a/packages/artplayer-plugin-ads/src/style.less
+++ b/packages/artplayer-plugin-ads/src/style.less
@@ -1,80 +1,80 @@
 .artplayer-plugin-ads {
+  position: absolute;
+  z-index: 150;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  font-size: 13px;
+  line-height: 1;
+  color: #fff;
+  background-color: #000;
+
+  .artplayer-plugin-ads-html {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  .artplayer-plugin-ads-video {
+    width: 100%;
+    height: 100%;
+  }
+
+  .artplayer-plugin-ads-timer {
+    display: none;
+    position: absolute;
+    top: 10px;
+    right: 10px;
+
+    & > div {
+      display: flex;
+      align-items: center;
+      background-color: rgb(0 0 0 / 50%);
+      border-radius: 15px;
+      margin-left: 5px;
+      padding: 5px 10px;
+      cursor: pointer;
+    }
+  }
+
+  .artplayer-plugin-ads-control {
+    display: none;
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+
+    & > div {
+      display: flex;
+      align-items: center;
+      background-color: rgb(0 0 0 / 50%);
+      border-radius: 15px;
+      margin-left: 5px;
+      padding: 5px 10px;
+      cursor: pointer;
+    }
+
+    .art-icon svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .artplayer-plugin-ads-loading {
+    display: flex;
+    align-items: center;
+    justify-content: center;
     position: absolute;
-    z-index: 150;
     left: 0;
     top: 0;
     right: 0;
     bottom: 0;
     width: 100%;
     height: 100%;
-    overflow: hidden;
-    font-size: 13px;
-    line-height: 1;
-    color: #fff;
-    background-color: #000;
-
-    .artplayer-plugin-ads-html {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        height: 100%;
-    }
-
-    .artplayer-plugin-ads-video {
-        width: 100%;
-        height: 100%;
-    }
-
-    .artplayer-plugin-ads-timer {
-        display: none;
-        position: absolute;
-        top: 10px;
-        right: 10px;
-
-        & > div {
-            display: flex;
-            align-items: center;
-            background-color: rgb(0 0 0 / 50%);
-            border-radius: 15px;
-            margin-left: 5px;
-            padding: 5px 10px;
-            cursor: pointer;
-        }
-    }
-
-    .artplayer-plugin-ads-control {
-        display: none;
-        position: absolute;
-        bottom: 10px;
-        right: 10px;
-
-        & > div {
-            display: flex;
-            align-items: center;
-            background-color: rgb(0 0 0 / 50%);
-            border-radius: 15px;
-            margin-left: 5px;
-            padding: 5px 10px;
-            cursor: pointer;
-        }
-
-        .art-icon svg {
-            width: 20px;
-            height: 20px;
-        }
-    }
-
-    .artplayer-plugin-ads-loading {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        position: absolute;
-        left: 0;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        width: 100%;
-        height: 100%;
-    }
+  }
 }
diff --git a/packages/artplayer-plugin-asr/src/style.less b/packages/artplayer-plugin-asr/src/style.less
index 49e90b41d..3263799ed 100644
--- a/packages/artplayer-plugin-asr/src/style.less
+++ b/packages/artplayer-plugin-asr/src/style.less
@@ -1,31 +1,31 @@
 .art-video-player {
-    .art-layer-asr {
-        pointer-events: none !important;
-        position: absolute;
-        z-index: 150;
-        inset: 0px;
-        display: flex;
-        flex-direction: column;
-        justify-content: end;
-        padding: 0 2%;
-        font-size: 1rem;
-        gap: var(--art-subtitle-gap);
-        padding-bottom: var(--art-subtitle-bottom);
-        transition: padding-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-layer-asr {
+    pointer-events: none !important;
+    position: absolute;
+    z-index: 150;
+    inset: 0px;
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+    padding: 0 2%;
+    font-size: 1rem;
+    gap: var(--art-subtitle-gap);
+    padding-bottom: var(--art-subtitle-bottom);
+    transition: padding-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-control-show {
-        .art-layer-asr {
-            padding-bottom: calc(var(--art-control-height) + var(--art-subtitle-bottom));
-        }
+  &.art-control-show {
+    .art-layer-asr {
+      padding-bottom: calc(var(--art-control-height) + var(--art-subtitle-bottom));
     }
+  }
 }
diff --git a/packages/artplayer-plugin-chapter/src/style.less b/packages/artplayer-plugin-chapter/src/style.less
index 0f0d01295..36fa114b3 100644
--- a/packages/artplayer-plugin-chapter/src/style.less
+++ b/packages/artplayer-plugin-chapter/src/style.less
@@ -1,72 +1,74 @@
 .artplayer-plugin-chapter {
-    .art-control-progress-inner {
-        height: 100% !important;
-        background-color: transparent !important;
+  .art-control-progress-inner {
+    height: 100% !important;
+    background-color: transparent !important;
 
-        &>.art-progress-hover,
-        &>.art-progress-loaded,
-        &>.art-progress-played {
-            display: none !important;
-        }
+    & > .art-progress-hover,
+    & > .art-progress-loaded,
+    & > .art-progress-played {
+      display: none !important;
     }
+  }
 
-    .art-control-thumbnails {
-        bottom: calc(var(--art-bottom-gap) + 64px) !important;
-    }
+  .art-control-thumbnails {
+    bottom: calc(var(--art-bottom-gap) + 64px) !important;
+  }
 
-    .art-chapters {
-        position: absolute;
-        z-index: 0;
-        inset: 0;
-        display: flex;
-        align-items: center;
-        gap: 4px;
+  .art-chapters {
+    position: absolute;
+    z-index: 0;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    height: 100%;
+    transform: scaleY(1.25);
+
+    .art-chapter {
+      display: flex;
+      align-items: center;
+      height: 100%;
+
+      .art-chapter-inner {
+        position: relative;
+        cursor: pointer;
+        width: 100%;
+        height: 50%;
+        border-radius: 10px;
+        overflow: hidden;
+        transition: height var(--art-transition-duration) ease;
+        background-color: var(--art-progress-color);
+      }
+
+      &:hover .art-chapter-inner {
         height: 100%;
-        transform: scaleY(1.25);
-
-        .art-chapter {
-            display: flex;
-            align-items: center;
-            height: 100%;
-
-            .art-chapter-inner {
-                position: relative;
-                cursor: pointer;
-                width: 100%;
-                height: 50%;
-                border-radius: 10px;
-                overflow: hidden;
-                transition: height var(--art-transition-duration) ease;
-                background-color: var(--art-progress-color);
-            }
-
-            &:hover .art-chapter-inner {
-                height: 100%;
-            }
-        }
+      }
     }
+  }
 
+  .art-chapter-title {
+    transform-origin: bottom center;
+    transform: scale(0.5);
+    opacity: 0;
+    position: absolute;
+    z-index: 70;
+    top: -50px;
+    left: 0;
+    padding: 3px 5px;
+    line-height: 1;
+    font-size: 14px;
+    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-chapter-title {
-        transform-origin: bottom center;
-        transform: scale(0.5);
-        opacity: 0;
-        position: absolute;
-        z-index: 70;
-        top: -50px;
-        left: 0;
-        padding: 3px 5px;
-        line-height: 1;
-        font-size: 14px;
-        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;
+      transform: scale(1);
+      opacity: 1;
     }
-
-    &.art-progress-hover {
-        .art-chapter-title {
-            transform: scale(1);
-            opacity: 1;
-        }
-    }
-}
\ No newline at end of file
+  }
+}
diff --git a/packages/artplayer-plugin-danmuku/src/style.less b/packages/artplayer-plugin-danmuku/src/style.less
index 17f96d441..263a378cc 100644
--- a/packages/artplayer-plugin-danmuku/src/style.less
+++ b/packages/artplayer-plugin-danmuku/src/style.less
@@ -1,471 +1,471 @@
 @highlight: #00a1d6;
 
 .artplayer-plugin-danmuku {
+  display: flex;
+  position: relative;
+  z-index: 99;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  height: 32px;
+  width: 100%;
+  color: #fff;
+  font-weight: 300;
+  flex-shrink: 0;
+  gap: 10px;
+
+  .apd-icon {
+    cursor: pointer;
+    opacity: 0.75;
+    transition: all 0.2s ease;
+    fill: #fff;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  .apd-config {
     display: flex;
     position: relative;
-    z-index: 99;
+
+    .apd-config-panel {
+      position: absolute;
+      bottom: 24px;
+      left: 0;
+      width: 320px;
+      padding: 10px;
+      opacity: 0;
+      pointer-events: none;
+
+      .apd-config-panel-inner {
+        width: 100%;
+        border-radius: 3px;
+        background-color: rgba(0, 0, 0, 0.85);
+        padding: 10px;
+      }
+    }
+
+    &:hover {
+      .apd-config-panel {
+        opacity: 100;
+        pointer-events: all;
+      }
+    }
+  }
+
+  .apd-config-mode,
+  .apd-config-slider,
+  .apd-config-other,
+  .apd-style-mode {
+    margin-bottom: 15px;
+  }
+
+  .apd-modes {
+    display: flex;
+    align-items: center;
+    margin-top: 5px;
+    gap: 20px;
+
+    .apd-mode {
+      cursor: pointer;
+      text-align: center;
+
+      &:hover {
+        color: @highlight;
+      }
+    }
+  }
+
+  .apd-config-slider {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    .apd-value {
+      width: 32px;
+      text-align: right;
+    }
+  }
+
+  .apd-slider {
+    position: relative;
+    flex: 1;
+    display: flex;
+    height: 20px;
     align-items: center;
     justify-content: center;
-    font-size: 12px;
-    height: 32px;
-    width: 100%;
-    color: #fff;
-    font-weight: 300;
-    flex-shrink: 0;
-    gap: 10px;
+    cursor: pointer;
 
-    .apd-icon {
-        cursor: pointer;
-        opacity: 0.75;
-        transition: all 0.2s ease;
-        fill: #fff;
-
-        &:hover {
-            opacity: 1;
-        }
+    .apd-slider-line {
+      position: relative;
+      height: 2px;
+      width: 100%;
+      overflow: hidden;
+      border-radius: 3px;
+      background-color: rgba(255, 255, 255, 0.25);
     }
 
-    .apd-config {
-        display: flex;
-        position: relative;
+    .apd-slider-points {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
 
-        .apd-config-panel {
-            position: absolute;
-            bottom: 24px;
-            left: 0;
-            width: 320px;
-            padding: 10px;
-            opacity: 0;
-            pointer-events: none;
-
-            .apd-config-panel-inner {
-                width: 100%;
-                border-radius: 3px;
-                background-color: rgba(0, 0, 0, 0.85);
-                padding: 10px;
-            }
-        }
-
-        &:hover {
-            .apd-config-panel {
-                opacity: 100;
-                pointer-events: all;
-            }
-        }
+      .apd-slider-point {
+        width: 2px;
+        height: 2px;
+        border-radius: 50%;
+        background-color: rgba(255, 255, 255, 0.5);
+      }
     }
 
-    .apd-config-mode,
-    .apd-config-slider,
-    .apd-config-other,
-    .apd-style-mode {
-        margin-bottom: 15px;
+    .apd-slider-progress {
+      width: 0%;
+      height: 100%;
+      background-color: @highlight;
     }
 
-    .apd-modes {
-        display: flex;
-        align-items: center;
-        margin-top: 5px;
-        gap: 20px;
-
-        .apd-mode {
-            cursor: pointer;
-            text-align: center;
-
-            &:hover {
-                color: @highlight;
-            }
-        }
+    .apd-slider-dot {
+      position: absolute;
+      transform: translateX(-6px);
+      left: 0%;
+      width: 12px;
+      height: 12px;
+      border-radius: 50%;
+      background-color: @highlight;
     }
 
-    .apd-config-slider {
-        display: flex;
-        align-items: center;
-        gap: 12px;
+    .apd-slider-steps {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      position: absolute;
+      bottom: -12px;
+      width: calc(100% + 32px);
+      color: #777;
 
-        .apd-value {
-            width: 32px;
-            text-align: right;
-        }
-    }
-
-    .apd-slider {
-        position: relative;
-        flex: 1;
-        display: flex;
-        height: 20px;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-
-        .apd-slider-line {
-            position: relative;
-            height: 2px;
-            width: 100%;
-            overflow: hidden;
-            border-radius: 3px;
-            background-color: rgba(255, 255, 255, 0.25);
-        }
-
-        .apd-slider-points {
-            position: absolute;
-            inset: 0;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-
-            .apd-slider-point {
-                width: 2px;
-                height: 2px;
-                border-radius: 50%;
-                background-color: rgba(255, 255, 255, 0.5);
-            }
-        }
-
-        .apd-slider-progress {
-            width: 0%;
-            height: 100%;
-            background-color: @highlight;
-        }
-
-        .apd-slider-dot {
-            position: absolute;
-            transform: translateX(-6px);
-            left: 0%;
-            width: 12px;
-            height: 12px;
-            border-radius: 50%;
-            background-color: @highlight;
-        }
-
-        .apd-slider-steps {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            position: absolute;
-            bottom: -12px;
-            width: calc(100% + 32px);
-            color: #777;
-
-            .apd-slider-step {
-                flex-shrink: 0;
-                width: 36px;
-                text-align: center;
-                scale: 0.95;
-            }
-        }
-    }
-
-    .apd-config-other {
-        display: flex;
-        align-items: center;
-        gap: 20px;
-
-        .apd-check-off,
-        .apd-check-on {
-            width: 16px;
-            height: 16px;
-        }
-
-        .apd-other {
-            display: flex;
-            align-items: center;
-            cursor: pointer;
-            gap: 2px;
-
-            &:hover {
-                color: @highlight;
-            }
-        }
-    }
-
-    .apd-emitter {
-        display: flex;
-        flex: 1;
-        align-items: center;
-        height: 100%;
-        background-color: rgba(255, 255, 255, 0.25);
-        border-radius: 5px;
-    }
-
-    .apd-style {
-        position: relative;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        .apd-style-panel {
-            position: absolute;
-            bottom: 24px;
-            left: 0;
-            width: 200px;
-            padding: 10px;
-            opacity: 0;
-            pointer-events: none;
-
-            .apd-style-panel-inner {
-                width: 100%;
-                border-radius: 3px;
-                background-color: rgba(0, 0, 0, 0.85);
-                padding: 10px;
-            }
-        }
-
-        &:hover {
-            .apd-style-panel {
-                opacity: 100;
-                pointer-events: all;
-            }
-        }
-    }
-
-    .apd-colors {
-        display: flex;
-        flex-wrap: wrap;
-        margin-top: 5px;
-        gap: 8px;
-
-        .apd-color {
-            width: 16px;
-            height: 16px;
-            border-radius: 2px;
-            cursor: pointer;
-
-            &.apd-active {
-                border: 1px solid black;
-                box-shadow: 0 0 0 1px #fff;
-            }
-        }
-    }
-
-    .apd-input {
-        outline: none;
-        height: 100%;
-        flex: 1;
-        min-width: 0;
-        width: auto;
-        border: none;
-        line-height: 1;
-        color: #fff;
-        background-color: transparent;
-
-        &::placeholder {
-            color: rgba(255, 255, 255, 0.5);
-        }
-    }
-
-    .apd-send {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 100%;
-        width: 60px;
+      .apd-slider-step {
         flex-shrink: 0;
-        cursor: pointer;
-        text-shadow: none;
-        border-top-right-radius: 5px;
-        border-bottom-right-radius: 5px;
-        background-color: @highlight;
-
-        &.apd-lock {
-            cursor: not-allowed;
-            color: #666;
-            background-color: #e7e7e7;
-        }
+        width: 36px;
+        text-align: center;
+        scale: 0.95;
+      }
     }
+  }
+
+  .apd-config-other {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+
+    .apd-check-off,
+    .apd-check-on {
+      width: 16px;
+      height: 16px;
+    }
+
+    .apd-other {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      gap: 2px;
+
+      &:hover {
+        color: @highlight;
+      }
+    }
+  }
+
+  .apd-emitter {
+    display: flex;
+    flex: 1;
+    align-items: center;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.25);
+    border-radius: 5px;
+  }
+
+  .apd-style {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .apd-style-panel {
+      position: absolute;
+      bottom: 24px;
+      left: 0;
+      width: 200px;
+      padding: 10px;
+      opacity: 0;
+      pointer-events: none;
+
+      .apd-style-panel-inner {
+        width: 100%;
+        border-radius: 3px;
+        background-color: rgba(0, 0, 0, 0.85);
+        padding: 10px;
+      }
+    }
+
+    &:hover {
+      .apd-style-panel {
+        opacity: 100;
+        pointer-events: all;
+      }
+    }
+  }
+
+  .apd-colors {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 5px;
+    gap: 8px;
+
+    .apd-color {
+      width: 16px;
+      height: 16px;
+      border-radius: 2px;
+      cursor: pointer;
+
+      &.apd-active {
+        border: 1px solid black;
+        box-shadow: 0 0 0 1px #fff;
+      }
+    }
+  }
+
+  .apd-input {
+    outline: none;
+    height: 100%;
+    flex: 1;
+    min-width: 0;
+    width: auto;
+    border: none;
+    line-height: 1;
+    color: #fff;
+    background-color: transparent;
+
+    &::placeholder {
+      color: rgba(255, 255, 255, 0.5);
+    }
+  }
+
+  .apd-send {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    width: 60px;
+    flex-shrink: 0;
+    cursor: pointer;
+    text-shadow: none;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+    background-color: @highlight;
+
+    &.apd-lock {
+      cursor: not-allowed;
+      color: #666;
+      background-color: #e7e7e7;
+    }
+  }
 }
 
 .art-controls-center {
-    .apd-emitter {
-        width: 260px;
-        flex: none;
-    }
+  .apd-emitter {
+    width: 260px;
+    flex: none;
+  }
 }
 
 .art-fullscreen,
 .art-fullscreen-web {
-    .artplayer-plugin-danmuku {
-        height: 38px;
-        gap: 16px;
+  .artplayer-plugin-danmuku {
+    height: 38px;
+    gap: 16px;
 
-        .apd-config-icon,
-        .apd-toggle-off,
-        .apd-toggle-on {
-            width: 28px;
-            height: 28px;
-        }
-
-        .apd-emitter {
-            width: 400px;
-            flex: none;
-        }
+    .apd-config-icon,
+    .apd-toggle-off,
+    .apd-toggle-on {
+      width: 28px;
+      height: 28px;
     }
+
+    .apd-emitter {
+      width: 400px;
+      flex: none;
+    }
+  }
 }
 
 .art-video-player {
-    & > .artplayer-plugin-danmuku {
-        position: absolute;
-        left: 0;
-        right: 0;
-        bottom: -40px;
-        padding: 0 10px;
-    }
+  & > .artplayer-plugin-danmuku {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: -40px;
+    padding: 0 10px;
+  }
 
-    &:has(> .artplayer-plugin-danmuku) {
-        margin-bottom: 40px;
-    }
+  &:has(> .artplayer-plugin-danmuku) {
+    margin-bottom: 40px;
+  }
 }
 
 [data-danmuku-emitter='false'] {
-    .apd-emitter {
-        display: none !important;
-    }
+  .apd-emitter {
+    display: none !important;
+  }
 
+  .art-controls-center {
+    .artplayer-plugin-danmuku {
+      justify-content: flex-end;
+      gap: 18px;
+    }
+  }
+
+  &.art-fullscreen,
+  &.art-fullscreen-web {
     .art-controls-center {
-        .artplayer-plugin-danmuku {
-            justify-content: flex-end;
-            gap: 18px;
-        }
-    }
-
-    &.art-fullscreen,
-    &.art-fullscreen-web {
-        .art-controls-center {
-            .artplayer-plugin-danmuku {
-                gap: 24px;
-            }
-        }
+      .artplayer-plugin-danmuku {
+        gap: 24px;
+      }
     }
+  }
 }
 
 [data-danmuku-theme='light'] > .artplayer-plugin-danmuku {
-    .apd-icon {
-        fill: #333;
-    }
+  .apd-icon {
+    fill: #333;
+  }
 
-    .apd-emitter {
-        background-color: #f1f2f3;
-    }
+  .apd-emitter {
+    background-color: #f1f2f3;
+  }
 
-    .apd-input {
-        color: #000;
+  .apd-input {
+    color: #000;
 
-        &::placeholder {
-            color: rgba(0, 0, 0, 0.3);
-        }
+    &::placeholder {
+      color: rgba(0, 0, 0, 0.3);
     }
+  }
 }
 
 [data-danmuku-visible='false'] {
-    .apd-toggle-off {
-        display: block;
-    }
+  .apd-toggle-off {
+    display: block;
+  }
 
-    .apd-toggle-on {
-        display: none;
-    }
+  .apd-toggle-on {
+    display: none;
+  }
 }
 
 [data-danmuku-visible='true'] {
-    .apd-toggle-off {
-        display: none;
-    }
+  .apd-toggle-off {
+    display: none;
+  }
 
-    .apd-toggle-on {
-        display: block;
-    }
+  .apd-toggle-on {
+    display: block;
+  }
 }
 
 [data-danmuku-anti-overlap='false'] {
-    .apd-anti-overlap {
-        .apd-check-on {
-            display: none;
-        }
-
-        .apd-check-off {
-            display: block;
-        }
+  .apd-anti-overlap {
+    .apd-check-on {
+      display: none;
     }
+
+    .apd-check-off {
+      display: block;
+    }
+  }
 }
 
 [data-danmuku-anti-overlap='true'] {
-    .apd-anti-overlap {
-        .apd-check-on {
-            display: block;
-        }
-
-        .apd-check-off {
-            display: none;
-        }
+  .apd-anti-overlap {
+    .apd-check-on {
+      display: block;
     }
+
+    .apd-check-off {
+      display: none;
+    }
+  }
 }
 
 [data-danmuku-sync-video='false'] {
-    .apd-sync-video {
-        .apd-check-on {
-            display: none;
-        }
-
-        .apd-check-off {
-            display: block;
-        }
+  .apd-sync-video {
+    .apd-check-on {
+      display: none;
     }
+
+    .apd-check-off {
+      display: block;
+    }
+  }
 }
 
 [data-danmuku-sync-video='true'] {
-    .apd-sync-video {
-        .apd-check-on {
-            display: block;
-        }
-
-        .apd-check-off {
-            display: none;
-        }
+  .apd-sync-video {
+    .apd-check-on {
+      display: block;
     }
+
+    .apd-check-off {
+      display: none;
+    }
+  }
 }
 
 .generate-mode-styles(@index) when (@index >= 0) {
-    .generate-mode-styles(@index - 1);
+  .generate-mode-styles(@index - 1);
 
-    @mode: ~'data-danmuku-mode@{index}';
+  @mode: ~'data-danmuku-mode@{index}';
 
-    [@{mode}='false'] {
-        .apd-config-mode {
-            .apd-mode-@{index}-off {
-                display: block;
-            }
+  [@{mode}='false'] {
+    .apd-config-mode {
+      .apd-mode-@{index}-off {
+        display: block;
+      }
 
-            .apd-mode-@{index}-on {
-                display: none;
-            }
-        }
-
-        .art-danmuku [data-mode='@{index}'] {
-            opacity: 0 !important;
-        }
+      .apd-mode-@{index}-on {
+        display: none;
+      }
     }
 
-    [@{mode}='true'] {
-        .apd-config-mode {
-            .apd-mode-@{index}-off {
-                display: none;
-            }
-
-            .apd-mode-@{index}-on {
-                display: block;
-            }
-        }
+    .art-danmuku [data-mode='@{index}'] {
+      opacity: 0 !important;
     }
+  }
 
-    [data-danmuku-mode='@{index}'] {
-        .apd-style-mode {
-            [data-mode='@{index}'] {
-                color: @highlight;
-                path {
-                    fill: @highlight;
-                }
-            }
-        }
+  [@{mode}='true'] {
+    .apd-config-mode {
+      .apd-mode-@{index}-off {
+        display: none;
+      }
+
+      .apd-mode-@{index}-on {
+        display: block;
+      }
     }
+  }
+
+  [data-danmuku-mode='@{index}'] {
+    .apd-style-mode {
+      [data-mode='@{index}'] {
+        color: @highlight;
+        path {
+          fill: @highlight;
+        }
+      }
+    }
+  }
 }
 
 .generate-mode-styles(2);
diff --git a/packages/artplayer-plugin-document-pip/src/style.less b/packages/artplayer-plugin-document-pip/src/style.less
index 1083d2c54..ac421f452 100644
--- a/packages/artplayer-plugin-document-pip/src/style.less
+++ b/packages/artplayer-plugin-document-pip/src/style.less
@@ -1,4 +1,4 @@
-.artplayer-document-pip.art-video-player{
-    width: 100% !important;
-    height: 100% !important;
-}
\ No newline at end of file
+.artplayer-document-pip.art-video-player {
+  width: 100% !important;
+  height: 100% !important;
+}
diff --git a/packages/artplayer/src/style/artplayer.less b/packages/artplayer/src/style/artplayer.less
index 92f459814..26863680d 100644
--- a/packages/artplayer/src/style/artplayer.less
+++ b/packages/artplayer/src/style/artplayer.less
@@ -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;
+  }
 }
diff --git a/packages/artplayer/src/style/aspectRatio.less b/packages/artplayer/src/style/aspectRatio.less
index 846b5f681..32976492c 100644
--- a/packages/artplayer/src/style/aspectRatio.less
+++ b/packages/artplayer/src/style/aspectRatio.less
@@ -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;
     }
+  }
 }
diff --git a/packages/artplayer/src/style/backdrop.less b/packages/artplayer/src/style/backdrop.less
index b532c3ece..25706b839 100644
--- a/packages/artplayer/src/style/backdrop.less
+++ b/packages/artplayer/src/style/backdrop.less
@@ -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();
+  }
 }
diff --git a/packages/artplayer/src/style/bottom.less b/packages/artplayer/src/style/bottom.less
index e5f437b36..adfe67184 100644
--- a/packages/artplayer/src/style/bottom.less
+++ b/packages/artplayer/src/style/bottom.less
@@ -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);
+      }
     }
+  }
 }
diff --git a/packages/artplayer/src/style/contextmenu.less b/packages/artplayer/src/style/contextmenu.less
index c7ab3cd7c..53e7e9192 100644
--- a/packages/artplayer/src/style/contextmenu.less
+++ b/packages/artplayer/src/style/contextmenu.less
@@ -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;
     }
+  }
 }
diff --git a/packages/artplayer/src/style/controls.less b/packages/artplayer/src/style/controls.less
index 56836e432..cfcbbaeca 100644
--- a/packages/artplayer/src/style/controls.less
+++ b/packages/artplayer/src/style/controls.less
@@ -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;
+      }
+    }
+  }
+}
diff --git a/packages/artplayer/src/style/danmuku.less b/packages/artplayer/src/style/danmuku.less
index a5b63a6b5..1a5046660 100644
--- a/packages/artplayer/src/style/danmuku.less
+++ b/packages/artplayer/src/style/danmuku.less
@@ -1,5 +1,5 @@
 .art-danmuku {
-    .art-full(30);
-    pointer-events: none;
-    overflow: hidden;
+  .art-full(30);
+  pointer-events: none;
+  overflow: hidden;
 }
diff --git a/packages/artplayer/src/style/flip.less b/packages/artplayer/src/style/flip.less
index 1c9e395ae..a98e6d21a 100644
--- a/packages/artplayer/src/style/flip.less
+++ b/packages/artplayer/src/style/flip.less
@@ -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);
+  }
 }
diff --git a/packages/artplayer/src/style/fullscreen.less b/packages/artplayer/src/style/fullscreen.less
index 66fe5d85a..230a98850 100644
--- a/packages/artplayer/src/style/fullscreen.less
+++ b/packages/artplayer/src/style/fullscreen.less
@@ -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;
 }
diff --git a/packages/artplayer/src/style/fullscreenWeb.less b/packages/artplayer/src/style/fullscreenWeb.less
index 562fd8e26..f63bd2062 100644
--- a/packages/artplayer/src/style/fullscreenWeb.less
+++ b/packages/artplayer/src/style/fullscreenWeb.less
@@ -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);
 }
diff --git a/packages/artplayer/src/style/hideCursor.less b/packages/artplayer/src/style/hideCursor.less
index dd696775a..887d7a74f 100644
--- a/packages/artplayer/src/style/hideCursor.less
+++ b/packages/artplayer/src/style/hideCursor.less
@@ -1,3 +1,3 @@
 .art-hide-cursor * {
-    cursor: none !important;
+  cursor: none !important;
 }
diff --git a/packages/artplayer/src/style/hint.less b/packages/artplayer/src/style/hint.less
index 1d4e17634..40d5fe9b5 100644
--- a/packages/artplayer/src/style/hint.less
+++ b/packages/artplayer/src/style/hint.less
@@ -1,19 +1,19 @@
 .art-video-player {
-    /*! Hint.css - v2.7.0 - 2021-10-01
+  /*! Hint.css - v2.7.0 - 2021-10-01
     * https://kushagra.dev/lab/hint/
     * Copyright (c) 2021 Kushagra Gour */
 
-    /*-------------------------------------*\
+  /*-------------------------------------*\
         HINT.css - A CSS tooltip library
     \*-------------------------------------*/
-    /**
+  /**
     * HINT.css is a tooltip library made in pure CSS.
     *
     * Source: https://github.com/chinchang/hint.css
     * Demo: http://kushagragour.in/lab/hint/
     *
     */
-    /**
+  /**
     * source: hint-core.scss
     *
     * Defines the basic styling for the tooltip.
@@ -24,76 +24,76 @@
     * Classes added:
     * 	1) hint
     */
-    [class*='hint--'] {
-        position: relative;
-        display: inline-block;
-        font-style: normal;
-        /**
+  [class*='hint--'] {
+    position: relative;
+    display: inline-block;
+    font-style: normal;
+    /**
         * tooltip arrow
         */
-        /**
+    /**
         * tooltip body
         */
-    }
-    [class*='hint--']:before,
-    [class*='hint--']:after {
-        position: absolute;
-        -webkit-transform: translate3d(0, 0, 0);
-        -moz-transform: translate3d(0, 0, 0);
-        transform: translate3d(0, 0, 0);
-        visibility: hidden;
-        opacity: 0;
-        z-index: 1000000;
-        pointer-events: none;
-        -webkit-transition: 0.3s ease;
-        -moz-transition: 0.3s ease;
-        transition: 0.3s ease;
-        -webkit-transition-delay: 0ms;
-        -moz-transition-delay: 0ms;
-        transition-delay: 0ms;
-    }
-    [class*='hint--']:hover:before,
-    [class*='hint--']:hover:after {
-        visibility: visible;
-        opacity: 1;
-    }
-    [class*='hint--']:hover:before,
-    [class*='hint--']:hover:after {
-        -webkit-transition-delay: 100ms;
-        -moz-transition-delay: 100ms;
-        transition-delay: 100ms;
-    }
-    [class*='hint--']:before {
-        content: '';
-        position: absolute;
-        background: transparent;
-        border: 6px solid transparent;
-        z-index: 1000001;
-    }
-    [class*='hint--']:after {
-        background: #000000;
-        color: white;
-        padding: 8px 10px;
-        font-size: 12px;
-        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
-        line-height: 12px;
-        white-space: nowrap;
-    }
-    [class*='hint--'][aria-label]:after {
-        content: attr(aria-label);
-    }
-    [class*='hint--'][data-hint]:after {
-        content: attr(data-hint);
-    }
+  }
+  [class*='hint--']:before,
+  [class*='hint--']:after {
+    position: absolute;
+    -webkit-transform: translate3d(0, 0, 0);
+    -moz-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    visibility: hidden;
+    opacity: 0;
+    z-index: 1000000;
+    pointer-events: none;
+    -webkit-transition: 0.3s ease;
+    -moz-transition: 0.3s ease;
+    transition: 0.3s ease;
+    -webkit-transition-delay: 0ms;
+    -moz-transition-delay: 0ms;
+    transition-delay: 0ms;
+  }
+  [class*='hint--']:hover:before,
+  [class*='hint--']:hover:after {
+    visibility: visible;
+    opacity: 1;
+  }
+  [class*='hint--']:hover:before,
+  [class*='hint--']:hover:after {
+    -webkit-transition-delay: 100ms;
+    -moz-transition-delay: 100ms;
+    transition-delay: 100ms;
+  }
+  [class*='hint--']:before {
+    content: '';
+    position: absolute;
+    background: transparent;
+    border: 6px solid transparent;
+    z-index: 1000001;
+  }
+  [class*='hint--']:after {
+    background: #000000;
+    color: white;
+    padding: 8px 10px;
+    font-size: 12px;
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    line-height: 12px;
+    white-space: nowrap;
+  }
+  [class*='hint--'][aria-label]:after {
+    content: attr(aria-label);
+  }
+  [class*='hint--'][data-hint]:after {
+    content: attr(data-hint);
+  }
 
-    [aria-label='']:before,
-    [aria-label='']:after,
-    [data-hint='']:before,
-    [data-hint='']:after {
-        display: none !important;
-    }
+  [aria-label='']:before,
+  [aria-label='']:after,
+  [data-hint='']:before,
+  [data-hint='']:after {
+    display: none !important;
+  }
 
-    /**
+  /**
     * source: hint-position.scss
     *
     * Defines the positoning logic for the tooltips.
@@ -104,328 +104,328 @@
     * 	3) hint--left
     * 	4) hint--right
     */
-    /**
+  /**
     * set default color for tooltip arrows
     */
-    .hint--top-left:before {
-        border-top-color: #000000;
-    }
+  .hint--top-left:before {
+    border-top-color: #000000;
+  }
 
-    .hint--top-right:before {
-        border-top-color: #000000;
-    }
+  .hint--top-right:before {
+    border-top-color: #000000;
+  }
 
-    .hint--top:before {
-        border-top-color: #000000;
-    }
+  .hint--top:before {
+    border-top-color: #000000;
+  }
 
-    .hint--bottom-left:before {
-        border-bottom-color: #000000;
-    }
+  .hint--bottom-left:before {
+    border-bottom-color: #000000;
+  }
 
-    .hint--bottom-right:before {
-        border-bottom-color: #000000;
-    }
+  .hint--bottom-right:before {
+    border-bottom-color: #000000;
+  }
 
-    .hint--bottom:before {
-        border-bottom-color: #000000;
-    }
+  .hint--bottom:before {
+    border-bottom-color: #000000;
+  }
 
-    .hint--left:before {
-        border-left-color: #000000;
-    }
+  .hint--left:before {
+    border-left-color: #000000;
+  }
 
-    .hint--right:before {
-        border-right-color: #000000;
-    }
+  .hint--right:before {
+    border-right-color: #000000;
+  }
 
-    /**
+  /**
     * top tooltip
     */
-    .hint--top:before {
-        margin-bottom: -11px;
-    }
+  .hint--top:before {
+    margin-bottom: -11px;
+  }
 
-    .hint--top:before,
-    .hint--top:after {
-        bottom: 100%;
-        left: 50%;
-    }
+  .hint--top:before,
+  .hint--top:after {
+    bottom: 100%;
+    left: 50%;
+  }
 
-    .hint--top:before {
-        left: calc(50% - 6px);
-    }
+  .hint--top:before {
+    left: calc(50% - 6px);
+  }
 
-    .hint--top:after {
-        -webkit-transform: translateX(-50%);
-        -moz-transform: translateX(-50%);
-        transform: translateX(-50%);
-    }
+  .hint--top:after {
+    -webkit-transform: translateX(-50%);
+    -moz-transform: translateX(-50%);
+    transform: translateX(-50%);
+  }
 
-    .hint--top:hover:before {
-        -webkit-transform: translateY(-8px);
-        -moz-transform: translateY(-8px);
-        transform: translateY(-8px);
-    }
+  .hint--top:hover:before {
+    -webkit-transform: translateY(-8px);
+    -moz-transform: translateY(-8px);
+    transform: translateY(-8px);
+  }
 
-    .hint--top:hover:after {
-        -webkit-transform: translateX(-50%) translateY(-8px);
-        -moz-transform: translateX(-50%) translateY(-8px);
-        transform: translateX(-50%) translateY(-8px);
-    }
+  .hint--top:hover:after {
+    -webkit-transform: translateX(-50%) translateY(-8px);
+    -moz-transform: translateX(-50%) translateY(-8px);
+    transform: translateX(-50%) translateY(-8px);
+  }
 
-    /**
+  /**
     * bottom tooltip
     */
-    .hint--bottom:before {
-        margin-top: -11px;
-    }
+  .hint--bottom:before {
+    margin-top: -11px;
+  }
 
-    .hint--bottom:before,
-    .hint--bottom:after {
-        top: 100%;
-        left: 50%;
-    }
+  .hint--bottom:before,
+  .hint--bottom:after {
+    top: 100%;
+    left: 50%;
+  }
 
-    .hint--bottom:before {
-        left: calc(50% - 6px);
-    }
+  .hint--bottom:before {
+    left: calc(50% - 6px);
+  }
 
-    .hint--bottom:after {
-        -webkit-transform: translateX(-50%);
-        -moz-transform: translateX(-50%);
-        transform: translateX(-50%);
-    }
+  .hint--bottom:after {
+    -webkit-transform: translateX(-50%);
+    -moz-transform: translateX(-50%);
+    transform: translateX(-50%);
+  }
 
-    .hint--bottom:hover:before {
-        -webkit-transform: translateY(8px);
-        -moz-transform: translateY(8px);
-        transform: translateY(8px);
-    }
+  .hint--bottom:hover:before {
+    -webkit-transform: translateY(8px);
+    -moz-transform: translateY(8px);
+    transform: translateY(8px);
+  }
 
-    .hint--bottom:hover:after {
-        -webkit-transform: translateX(-50%) translateY(8px);
-        -moz-transform: translateX(-50%) translateY(8px);
-        transform: translateX(-50%) translateY(8px);
-    }
+  .hint--bottom:hover:after {
+    -webkit-transform: translateX(-50%) translateY(8px);
+    -moz-transform: translateX(-50%) translateY(8px);
+    transform: translateX(-50%) translateY(8px);
+  }
 
-    /**
+  /**
     * right tooltip
     */
-    .hint--right:before {
-        margin-left: -11px;
-        margin-bottom: -6px;
-    }
+  .hint--right:before {
+    margin-left: -11px;
+    margin-bottom: -6px;
+  }
 
-    .hint--right:after {
-        margin-bottom: -14px;
-    }
+  .hint--right:after {
+    margin-bottom: -14px;
+  }
 
-    .hint--right:before,
-    .hint--right:after {
-        left: 100%;
-        bottom: 50%;
-    }
+  .hint--right:before,
+  .hint--right:after {
+    left: 100%;
+    bottom: 50%;
+  }
 
-    .hint--right:hover:before {
-        -webkit-transform: translateX(8px);
-        -moz-transform: translateX(8px);
-        transform: translateX(8px);
-    }
+  .hint--right:hover:before {
+    -webkit-transform: translateX(8px);
+    -moz-transform: translateX(8px);
+    transform: translateX(8px);
+  }
 
-    .hint--right:hover:after {
-        -webkit-transform: translateX(8px);
-        -moz-transform: translateX(8px);
-        transform: translateX(8px);
-    }
+  .hint--right:hover:after {
+    -webkit-transform: translateX(8px);
+    -moz-transform: translateX(8px);
+    transform: translateX(8px);
+  }
 
-    /**
+  /**
     * left tooltip
     */
-    .hint--left:before {
-        margin-right: -11px;
-        margin-bottom: -6px;
-    }
+  .hint--left:before {
+    margin-right: -11px;
+    margin-bottom: -6px;
+  }
 
-    .hint--left:after {
-        margin-bottom: -14px;
-    }
+  .hint--left:after {
+    margin-bottom: -14px;
+  }
 
-    .hint--left:before,
-    .hint--left:after {
-        right: 100%;
-        bottom: 50%;
-    }
+  .hint--left:before,
+  .hint--left:after {
+    right: 100%;
+    bottom: 50%;
+  }
 
-    .hint--left:hover:before {
-        -webkit-transform: translateX(-8px);
-        -moz-transform: translateX(-8px);
-        transform: translateX(-8px);
-    }
+  .hint--left:hover:before {
+    -webkit-transform: translateX(-8px);
+    -moz-transform: translateX(-8px);
+    transform: translateX(-8px);
+  }
 
-    .hint--left:hover:after {
-        -webkit-transform: translateX(-8px);
-        -moz-transform: translateX(-8px);
-        transform: translateX(-8px);
-    }
+  .hint--left:hover:after {
+    -webkit-transform: translateX(-8px);
+    -moz-transform: translateX(-8px);
+    transform: translateX(-8px);
+  }
 
-    /**
+  /**
     * top-left tooltip
     */
-    .hint--top-left:before {
-        margin-bottom: -11px;
-    }
+  .hint--top-left:before {
+    margin-bottom: -11px;
+  }
 
-    .hint--top-left:before,
-    .hint--top-left:after {
-        bottom: 100%;
-        left: 50%;
-    }
+  .hint--top-left:before,
+  .hint--top-left:after {
+    bottom: 100%;
+    left: 50%;
+  }
 
-    .hint--top-left:before {
-        left: calc(50% - 6px);
-    }
+  .hint--top-left:before {
+    left: calc(50% - 6px);
+  }
 
-    .hint--top-left:after {
-        -webkit-transform: translateX(-100%);
-        -moz-transform: translateX(-100%);
-        transform: translateX(-100%);
-    }
+  .hint--top-left:after {
+    -webkit-transform: translateX(-100%);
+    -moz-transform: translateX(-100%);
+    transform: translateX(-100%);
+  }
 
-    .hint--top-left:after {
-        margin-left: 12px;
-    }
+  .hint--top-left:after {
+    margin-left: 12px;
+  }
 
-    .hint--top-left:hover:before {
-        -webkit-transform: translateY(-8px);
-        -moz-transform: translateY(-8px);
-        transform: translateY(-8px);
-    }
+  .hint--top-left:hover:before {
+    -webkit-transform: translateY(-8px);
+    -moz-transform: translateY(-8px);
+    transform: translateY(-8px);
+  }
 
-    .hint--top-left:hover:after {
-        -webkit-transform: translateX(-100%) translateY(-8px);
-        -moz-transform: translateX(-100%) translateY(-8px);
-        transform: translateX(-100%) translateY(-8px);
-    }
+  .hint--top-left:hover:after {
+    -webkit-transform: translateX(-100%) translateY(-8px);
+    -moz-transform: translateX(-100%) translateY(-8px);
+    transform: translateX(-100%) translateY(-8px);
+  }
 
-    /**
+  /**
     * top-right tooltip
     */
-    .hint--top-right:before {
-        margin-bottom: -11px;
-    }
+  .hint--top-right:before {
+    margin-bottom: -11px;
+  }
 
-    .hint--top-right:before,
-    .hint--top-right:after {
-        bottom: 100%;
-        left: 50%;
-    }
+  .hint--top-right:before,
+  .hint--top-right:after {
+    bottom: 100%;
+    left: 50%;
+  }
 
-    .hint--top-right:before {
-        left: calc(50% - 6px);
-    }
+  .hint--top-right:before {
+    left: calc(50% - 6px);
+  }
 
-    .hint--top-right:after {
-        -webkit-transform: translateX(0);
-        -moz-transform: translateX(0);
-        transform: translateX(0);
-    }
+  .hint--top-right:after {
+    -webkit-transform: translateX(0);
+    -moz-transform: translateX(0);
+    transform: translateX(0);
+  }
 
-    .hint--top-right:after {
-        margin-left: -12px;
-    }
+  .hint--top-right:after {
+    margin-left: -12px;
+  }
 
-    .hint--top-right:hover:before {
-        -webkit-transform: translateY(-8px);
-        -moz-transform: translateY(-8px);
-        transform: translateY(-8px);
-    }
+  .hint--top-right:hover:before {
+    -webkit-transform: translateY(-8px);
+    -moz-transform: translateY(-8px);
+    transform: translateY(-8px);
+  }
 
-    .hint--top-right:hover:after {
-        -webkit-transform: translateY(-8px);
-        -moz-transform: translateY(-8px);
-        transform: translateY(-8px);
-    }
+  .hint--top-right:hover:after {
+    -webkit-transform: translateY(-8px);
+    -moz-transform: translateY(-8px);
+    transform: translateY(-8px);
+  }
 
-    /**
+  /**
     * bottom-left tooltip
     */
-    .hint--bottom-left:before {
-        margin-top: -11px;
-    }
+  .hint--bottom-left:before {
+    margin-top: -11px;
+  }
 
-    .hint--bottom-left:before,
-    .hint--bottom-left:after {
-        top: 100%;
-        left: 50%;
-    }
+  .hint--bottom-left:before,
+  .hint--bottom-left:after {
+    top: 100%;
+    left: 50%;
+  }
 
-    .hint--bottom-left:before {
-        left: calc(50% - 6px);
-    }
+  .hint--bottom-left:before {
+    left: calc(50% - 6px);
+  }
 
-    .hint--bottom-left:after {
-        -webkit-transform: translateX(-100%);
-        -moz-transform: translateX(-100%);
-        transform: translateX(-100%);
-    }
+  .hint--bottom-left:after {
+    -webkit-transform: translateX(-100%);
+    -moz-transform: translateX(-100%);
+    transform: translateX(-100%);
+  }
 
-    .hint--bottom-left:after {
-        margin-left: 12px;
-    }
+  .hint--bottom-left:after {
+    margin-left: 12px;
+  }
 
-    .hint--bottom-left:hover:before {
-        -webkit-transform: translateY(8px);
-        -moz-transform: translateY(8px);
-        transform: translateY(8px);
-    }
+  .hint--bottom-left:hover:before {
+    -webkit-transform: translateY(8px);
+    -moz-transform: translateY(8px);
+    transform: translateY(8px);
+  }
 
-    .hint--bottom-left:hover:after {
-        -webkit-transform: translateX(-100%) translateY(8px);
-        -moz-transform: translateX(-100%) translateY(8px);
-        transform: translateX(-100%) translateY(8px);
-    }
+  .hint--bottom-left:hover:after {
+    -webkit-transform: translateX(-100%) translateY(8px);
+    -moz-transform: translateX(-100%) translateY(8px);
+    transform: translateX(-100%) translateY(8px);
+  }
 
-    /**
+  /**
     * bottom-right tooltip
     */
-    .hint--bottom-right:before {
-        margin-top: -11px;
-    }
+  .hint--bottom-right:before {
+    margin-top: -11px;
+  }
 
-    .hint--bottom-right:before,
-    .hint--bottom-right:after {
-        top: 100%;
-        left: 50%;
-    }
+  .hint--bottom-right:before,
+  .hint--bottom-right:after {
+    top: 100%;
+    left: 50%;
+  }
 
-    .hint--bottom-right:before {
-        left: calc(50% - 6px);
-    }
+  .hint--bottom-right:before {
+    left: calc(50% - 6px);
+  }
 
-    .hint--bottom-right:after {
-        -webkit-transform: translateX(0);
-        -moz-transform: translateX(0);
-        transform: translateX(0);
-    }
+  .hint--bottom-right:after {
+    -webkit-transform: translateX(0);
+    -moz-transform: translateX(0);
+    transform: translateX(0);
+  }
 
-    .hint--bottom-right:after {
-        margin-left: -12px;
-    }
+  .hint--bottom-right:after {
+    margin-left: -12px;
+  }
 
-    .hint--bottom-right:hover:before {
-        -webkit-transform: translateY(8px);
-        -moz-transform: translateY(8px);
-        transform: translateY(8px);
-    }
+  .hint--bottom-right:hover:before {
+    -webkit-transform: translateY(8px);
+    -moz-transform: translateY(8px);
+    transform: translateY(8px);
+  }
 
-    .hint--bottom-right:hover:after {
-        -webkit-transform: translateY(8px);
-        -moz-transform: translateY(8px);
-        transform: translateY(8px);
-    }
+  .hint--bottom-right:hover:after {
+    -webkit-transform: translateY(8px);
+    -moz-transform: translateY(8px);
+    transform: translateY(8px);
+  }
 
-    /**
+  /**
     * source: hint-sizes.scss
     *
     * Defines width restricted tooltips that can span
@@ -437,43 +437,43 @@
     * 	3) hint--large
     *
     */
-    .hint--small:after,
-    .hint--medium:after,
-    .hint--large:after {
-        white-space: normal;
-        line-height: 1.4em;
-        word-wrap: break-word;
-    }
+  .hint--small:after,
+  .hint--medium:after,
+  .hint--large:after {
+    white-space: normal;
+    line-height: 1.4em;
+    word-wrap: break-word;
+  }
 
-    .hint--small:after {
-        width: 80px;
-    }
+  .hint--small:after {
+    width: 80px;
+  }
 
-    .hint--medium:after {
-        width: 150px;
-    }
+  .hint--medium:after {
+    width: 150px;
+  }
 
-    .hint--large:after {
-        width: 300px;
-    }
+  .hint--large:after {
+    width: 300px;
+  }
 
-    /**
+  /**
     * source: hint-theme.scss
     *
     * Defines basic theme for tooltips.
     *
     */
-    [class*='hint--'] {
-        /**
+  [class*='hint--'] {
+    /**
         * tooltip body
         */
-    }
-    [class*='hint--']:after {
-        text-shadow: 0 -1px 0px black;
-        box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
-    }
+  }
+  [class*='hint--']:after {
+    text-shadow: 0 -1px 0px black;
+    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
+  }
 
-    /**
+  /**
     * source: hint-color-types.scss
     *
     * Contains tooltips of various types based on color differences.
@@ -485,167 +485,167 @@
     * 	4) hint--success
     *
     */
-    /**
+  /**
     * Error
     */
-    .hint--error:after {
-        background-color: #b34e4d;
-        text-shadow: 0 -1px 0px #592726;
-    }
+  .hint--error:after {
+    background-color: #b34e4d;
+    text-shadow: 0 -1px 0px #592726;
+  }
 
-    .hint--error.hint--top-left:before {
-        border-top-color: #b34e4d;
-    }
+  .hint--error.hint--top-left:before {
+    border-top-color: #b34e4d;
+  }
 
-    .hint--error.hint--top-right:before {
-        border-top-color: #b34e4d;
-    }
+  .hint--error.hint--top-right:before {
+    border-top-color: #b34e4d;
+  }
 
-    .hint--error.hint--top:before {
-        border-top-color: #b34e4d;
-    }
+  .hint--error.hint--top:before {
+    border-top-color: #b34e4d;
+  }
 
-    .hint--error.hint--bottom-left:before {
-        border-bottom-color: #b34e4d;
-    }
+  .hint--error.hint--bottom-left:before {
+    border-bottom-color: #b34e4d;
+  }
 
-    .hint--error.hint--bottom-right:before {
-        border-bottom-color: #b34e4d;
-    }
+  .hint--error.hint--bottom-right:before {
+    border-bottom-color: #b34e4d;
+  }
 
-    .hint--error.hint--bottom:before {
-        border-bottom-color: #b34e4d;
-    }
+  .hint--error.hint--bottom:before {
+    border-bottom-color: #b34e4d;
+  }
 
-    .hint--error.hint--left:before {
-        border-left-color: #b34e4d;
-    }
+  .hint--error.hint--left:before {
+    border-left-color: #b34e4d;
+  }
 
-    .hint--error.hint--right:before {
-        border-right-color: #b34e4d;
-    }
+  .hint--error.hint--right:before {
+    border-right-color: #b34e4d;
+  }
 
-    /**
+  /**
     * Warning
     */
-    .hint--warning:after {
-        background-color: #c09854;
-        text-shadow: 0 -1px 0px #6c5328;
-    }
+  .hint--warning:after {
+    background-color: #c09854;
+    text-shadow: 0 -1px 0px #6c5328;
+  }
 
-    .hint--warning.hint--top-left:before {
-        border-top-color: #c09854;
-    }
+  .hint--warning.hint--top-left:before {
+    border-top-color: #c09854;
+  }
 
-    .hint--warning.hint--top-right:before {
-        border-top-color: #c09854;
-    }
+  .hint--warning.hint--top-right:before {
+    border-top-color: #c09854;
+  }
 
-    .hint--warning.hint--top:before {
-        border-top-color: #c09854;
-    }
+  .hint--warning.hint--top:before {
+    border-top-color: #c09854;
+  }
 
-    .hint--warning.hint--bottom-left:before {
-        border-bottom-color: #c09854;
-    }
+  .hint--warning.hint--bottom-left:before {
+    border-bottom-color: #c09854;
+  }
 
-    .hint--warning.hint--bottom-right:before {
-        border-bottom-color: #c09854;
-    }
+  .hint--warning.hint--bottom-right:before {
+    border-bottom-color: #c09854;
+  }
 
-    .hint--warning.hint--bottom:before {
-        border-bottom-color: #c09854;
-    }
+  .hint--warning.hint--bottom:before {
+    border-bottom-color: #c09854;
+  }
 
-    .hint--warning.hint--left:before {
-        border-left-color: #c09854;
-    }
+  .hint--warning.hint--left:before {
+    border-left-color: #c09854;
+  }
 
-    .hint--warning.hint--right:before {
-        border-right-color: #c09854;
-    }
+  .hint--warning.hint--right:before {
+    border-right-color: #c09854;
+  }
 
-    /**
+  /**
     * Info
     */
-    .hint--info:after {
-        background-color: #3986ac;
-        text-shadow: 0 -1px 0px #1a3c4d;
-    }
+  .hint--info:after {
+    background-color: #3986ac;
+    text-shadow: 0 -1px 0px #1a3c4d;
+  }
 
-    .hint--info.hint--top-left:before {
-        border-top-color: #3986ac;
-    }
+  .hint--info.hint--top-left:before {
+    border-top-color: #3986ac;
+  }
 
-    .hint--info.hint--top-right:before {
-        border-top-color: #3986ac;
-    }
+  .hint--info.hint--top-right:before {
+    border-top-color: #3986ac;
+  }
 
-    .hint--info.hint--top:before {
-        border-top-color: #3986ac;
-    }
+  .hint--info.hint--top:before {
+    border-top-color: #3986ac;
+  }
 
-    .hint--info.hint--bottom-left:before {
-        border-bottom-color: #3986ac;
-    }
+  .hint--info.hint--bottom-left:before {
+    border-bottom-color: #3986ac;
+  }
 
-    .hint--info.hint--bottom-right:before {
-        border-bottom-color: #3986ac;
-    }
+  .hint--info.hint--bottom-right:before {
+    border-bottom-color: #3986ac;
+  }
 
-    .hint--info.hint--bottom:before {
-        border-bottom-color: #3986ac;
-    }
+  .hint--info.hint--bottom:before {
+    border-bottom-color: #3986ac;
+  }
 
-    .hint--info.hint--left:before {
-        border-left-color: #3986ac;
-    }
+  .hint--info.hint--left:before {
+    border-left-color: #3986ac;
+  }
 
-    .hint--info.hint--right:before {
-        border-right-color: #3986ac;
-    }
+  .hint--info.hint--right:before {
+    border-right-color: #3986ac;
+  }
 
-    /**
+  /**
     * Success
     */
-    .hint--success:after {
-        background-color: #458746;
-        text-shadow: 0 -1px 0px #1a321a;
-    }
+  .hint--success:after {
+    background-color: #458746;
+    text-shadow: 0 -1px 0px #1a321a;
+  }
 
-    .hint--success.hint--top-left:before {
-        border-top-color: #458746;
-    }
+  .hint--success.hint--top-left:before {
+    border-top-color: #458746;
+  }
 
-    .hint--success.hint--top-right:before {
-        border-top-color: #458746;
-    }
+  .hint--success.hint--top-right:before {
+    border-top-color: #458746;
+  }
 
-    .hint--success.hint--top:before {
-        border-top-color: #458746;
-    }
+  .hint--success.hint--top:before {
+    border-top-color: #458746;
+  }
 
-    .hint--success.hint--bottom-left:before {
-        border-bottom-color: #458746;
-    }
+  .hint--success.hint--bottom-left:before {
+    border-bottom-color: #458746;
+  }
 
-    .hint--success.hint--bottom-right:before {
-        border-bottom-color: #458746;
-    }
+  .hint--success.hint--bottom-right:before {
+    border-bottom-color: #458746;
+  }
 
-    .hint--success.hint--bottom:before {
-        border-bottom-color: #458746;
-    }
+  .hint--success.hint--bottom:before {
+    border-bottom-color: #458746;
+  }
 
-    .hint--success.hint--left:before {
-        border-left-color: #458746;
-    }
+  .hint--success.hint--left:before {
+    border-left-color: #458746;
+  }
 
-    .hint--success.hint--right:before {
-        border-right-color: #458746;
-    }
+  .hint--success.hint--right:before {
+    border-right-color: #458746;
+  }
 
-    /**
+  /**
     * source: hint-always.scss
     *
     * Defines a persisted tooltip which shows always.
@@ -654,109 +654,109 @@
     * 	1) hint--always
     *
     */
-    .hint--always:after,
-    .hint--always:before {
-        opacity: 1;
-        visibility: visible;
-    }
+  .hint--always:after,
+  .hint--always:before {
+    opacity: 1;
+    visibility: visible;
+  }
 
-    .hint--always.hint--top:before {
-        -webkit-transform: translateY(-8px);
-        -moz-transform: translateY(-8px);
-        transform: translateY(-8px);
-    }
+  .hint--always.hint--top:before {
+    -webkit-transform: translateY(-8px);
+    -moz-transform: translateY(-8px);
+    transform: translateY(-8px);
+  }
 
-    .hint--always.hint--top:after {
-        -webkit-transform: translateX(-50%) translateY(-8px);
-        -moz-transform: translateX(-50%) translateY(-8px);
-        transform: translateX(-50%) translateY(-8px);
-    }
+  .hint--always.hint--top:after {
+    -webkit-transform: translateX(-50%) translateY(-8px);
+    -moz-transform: translateX(-50%) translateY(-8px);
+    transform: translateX(-50%) translateY(-8px);
+  }
 
-    .hint--always.hint--top-left:before {
-        -webkit-transform: translateY(-8px);
-        -moz-transform: translateY(-8px);
-        transform: translateY(-8px);
-    }
+  .hint--always.hint--top-left:before {
+    -webkit-transform: translateY(-8px);
+    -moz-transform: translateY(-8px);
+    transform: translateY(-8px);
+  }
 
-    .hint--always.hint--top-left:after {
-        -webkit-transform: translateX(-100%) translateY(-8px);
-        -moz-transform: translateX(-100%) translateY(-8px);
-        transform: translateX(-100%) translateY(-8px);
-    }
+  .hint--always.hint--top-left:after {
+    -webkit-transform: translateX(-100%) translateY(-8px);
+    -moz-transform: translateX(-100%) translateY(-8px);
+    transform: translateX(-100%) translateY(-8px);
+  }
 
-    .hint--always.hint--top-right:before {
-        -webkit-transform: translateY(-8px);
-        -moz-transform: translateY(-8px);
-        transform: translateY(-8px);
-    }
+  .hint--always.hint--top-right:before {
+    -webkit-transform: translateY(-8px);
+    -moz-transform: translateY(-8px);
+    transform: translateY(-8px);
+  }
 
-    .hint--always.hint--top-right:after {
-        -webkit-transform: translateY(-8px);
-        -moz-transform: translateY(-8px);
-        transform: translateY(-8px);
-    }
+  .hint--always.hint--top-right:after {
+    -webkit-transform: translateY(-8px);
+    -moz-transform: translateY(-8px);
+    transform: translateY(-8px);
+  }
 
-    .hint--always.hint--bottom:before {
-        -webkit-transform: translateY(8px);
-        -moz-transform: translateY(8px);
-        transform: translateY(8px);
-    }
+  .hint--always.hint--bottom:before {
+    -webkit-transform: translateY(8px);
+    -moz-transform: translateY(8px);
+    transform: translateY(8px);
+  }
 
-    .hint--always.hint--bottom:after {
-        -webkit-transform: translateX(-50%) translateY(8px);
-        -moz-transform: translateX(-50%) translateY(8px);
-        transform: translateX(-50%) translateY(8px);
-    }
+  .hint--always.hint--bottom:after {
+    -webkit-transform: translateX(-50%) translateY(8px);
+    -moz-transform: translateX(-50%) translateY(8px);
+    transform: translateX(-50%) translateY(8px);
+  }
 
-    .hint--always.hint--bottom-left:before {
-        -webkit-transform: translateY(8px);
-        -moz-transform: translateY(8px);
-        transform: translateY(8px);
-    }
+  .hint--always.hint--bottom-left:before {
+    -webkit-transform: translateY(8px);
+    -moz-transform: translateY(8px);
+    transform: translateY(8px);
+  }
 
-    .hint--always.hint--bottom-left:after {
-        -webkit-transform: translateX(-100%) translateY(8px);
-        -moz-transform: translateX(-100%) translateY(8px);
-        transform: translateX(-100%) translateY(8px);
-    }
+  .hint--always.hint--bottom-left:after {
+    -webkit-transform: translateX(-100%) translateY(8px);
+    -moz-transform: translateX(-100%) translateY(8px);
+    transform: translateX(-100%) translateY(8px);
+  }
 
-    .hint--always.hint--bottom-right:before {
-        -webkit-transform: translateY(8px);
-        -moz-transform: translateY(8px);
-        transform: translateY(8px);
-    }
+  .hint--always.hint--bottom-right:before {
+    -webkit-transform: translateY(8px);
+    -moz-transform: translateY(8px);
+    transform: translateY(8px);
+  }
 
-    .hint--always.hint--bottom-right:after {
-        -webkit-transform: translateY(8px);
-        -moz-transform: translateY(8px);
-        transform: translateY(8px);
-    }
+  .hint--always.hint--bottom-right:after {
+    -webkit-transform: translateY(8px);
+    -moz-transform: translateY(8px);
+    transform: translateY(8px);
+  }
 
-    .hint--always.hint--left:before {
-        -webkit-transform: translateX(-8px);
-        -moz-transform: translateX(-8px);
-        transform: translateX(-8px);
-    }
+  .hint--always.hint--left:before {
+    -webkit-transform: translateX(-8px);
+    -moz-transform: translateX(-8px);
+    transform: translateX(-8px);
+  }
 
-    .hint--always.hint--left:after {
-        -webkit-transform: translateX(-8px);
-        -moz-transform: translateX(-8px);
-        transform: translateX(-8px);
-    }
+  .hint--always.hint--left:after {
+    -webkit-transform: translateX(-8px);
+    -moz-transform: translateX(-8px);
+    transform: translateX(-8px);
+  }
 
-    .hint--always.hint--right:before {
-        -webkit-transform: translateX(8px);
-        -moz-transform: translateX(8px);
-        transform: translateX(8px);
-    }
+  .hint--always.hint--right:before {
+    -webkit-transform: translateX(8px);
+    -moz-transform: translateX(8px);
+    transform: translateX(8px);
+  }
 
-    .hint--always.hint--right:after {
-        -webkit-transform: translateX(8px);
-        -moz-transform: translateX(8px);
-        transform: translateX(8px);
-    }
+  .hint--always.hint--right:after {
+    -webkit-transform: translateX(8px);
+    -moz-transform: translateX(8px);
+    transform: translateX(8px);
+  }
 
-    /**
+  /**
     * source: hint-rounded.scss
     *
     * Defines rounded corner tooltips.
@@ -765,11 +765,11 @@
     * 	1) hint--rounded
     *
     */
-    .hint--rounded:after {
-        border-radius: 4px;
-    }
+  .hint--rounded:after {
+    border-radius: 4px;
+  }
 
-    /**
+  /**
     * source: hint-effects.scss
     *
     * Defines various transition effects for the tooltips.
@@ -779,36 +779,36 @@
     * 	2) hint--bounce
     *
     */
-    .hint--no-animate:before,
-    .hint--no-animate:after {
-        -webkit-transition-duration: 0ms;
-        -moz-transition-duration: 0ms;
-        transition-duration: 0ms;
-    }
+  .hint--no-animate:before,
+  .hint--no-animate:after {
+    -webkit-transition-duration: 0ms;
+    -moz-transition-duration: 0ms;
+    transition-duration: 0ms;
+  }
 
-    .hint--bounce:before,
-    .hint--bounce:after {
-        -webkit-transition:
-            opacity 0.3s ease,
-            visibility 0.3s ease,
-            -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-        -moz-transition:
-            opacity 0.3s ease,
-            visibility 0.3s ease,
-            -moz-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-        transition:
-            opacity 0.3s ease,
-            visibility 0.3s ease,
-            transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
-    }
+  .hint--bounce:before,
+  .hint--bounce:after {
+    -webkit-transition:
+      opacity 0.3s ease,
+      visibility 0.3s ease,
+      -webkit-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
+    -moz-transition:
+      opacity 0.3s ease,
+      visibility 0.3s ease,
+      -moz-transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
+    transition:
+      opacity 0.3s ease,
+      visibility 0.3s ease,
+      transform 0.3s cubic-bezier(0.71, 1.7, 0.77, 1.24);
+  }
 
-    .hint--no-shadow:before,
-    .hint--no-shadow:after {
-        text-shadow: initial;
-        box-shadow: initial;
-    }
+  .hint--no-shadow:before,
+  .hint--no-shadow:after {
+    text-shadow: initial;
+    box-shadow: initial;
+  }
 
-    .hint--no-arrow:before {
-        display: none;
-    }
-}
\ No newline at end of file
+  .hint--no-arrow:before {
+    display: none;
+  }
+}
diff --git a/packages/artplayer/src/style/icon.less b/packages/artplayer/src/style/icon.less
index 816870ffc..4d68494e2 100644
--- a/packages/artplayer/src/style/icon.less
+++ b/packages/artplayer/src/style/icon.less
@@ -1,4 +1,4 @@
 .art-icon {
-    line-height: 1;
-    .art-center();
+  line-height: 1;
+  .art-center();
 }
diff --git a/packages/artplayer/src/style/info.less b/packages/artplayer/src/style/info.less
index c6b70c730..9bc0c896d 100644
--- a/packages/artplayer/src/style/info.less
+++ b/packages/artplayer/src/style/info.less
@@ -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;
     }
+  }
 }
diff --git a/packages/artplayer/src/style/layers.less b/packages/artplayer/src/style/layers.less
index ae3aaba6a..447b8ee50 100644
--- a/packages/artplayer/src/style/layers.less
+++ b/packages/artplayer/src/style/layers.less
@@ -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;
     }
+  }
 }
diff --git a/packages/artplayer/src/style/loading.less b/packages/artplayer/src/style/loading.less
index 36f29e643..0fad2055d 100644
--- a/packages/artplayer/src/style/loading.less
+++ b/packages/artplayer/src/style/loading.less
@@ -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;
+    }
+  }
 }
diff --git a/packages/artplayer/src/style/mask.less b/packages/artplayer/src/style/mask.less
index fc4a6a6b6..6f397a66a 100644
--- a/packages/artplayer/src/style/mask.less
+++ b/packages/artplayer/src/style/mask.less
@@ -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;
     }
+  }
 }
diff --git a/packages/artplayer/src/style/mini.less b/packages/artplayer/src/style/mini.less
index 08d9f28f7..a5cfd536e 100644
--- a/packages/artplayer/src/style/mini.less
+++ b/packages/artplayer/src/style/mini.less
@@ -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;
     }
+  }
 }
diff --git a/packages/artplayer/src/style/mixins.less b/packages/artplayer/src/style/mixins.less
index 74a2b7ff4..88f04d21b 100644
--- a/packages/artplayer/src/style/mixins.less
+++ b/packages/artplayer/src/style/mixins.less
@@ -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;
 }
diff --git a/packages/artplayer/src/style/mobile.less b/packages/artplayer/src/style/mobile.less
index 1cf56b0cb..980969384 100644
--- a/packages/artplayer/src/style/mobile.less
+++ b/packages/artplayer/src/style/mobile.less
@@ -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);
+  }
 }
diff --git a/packages/artplayer/src/style/notice.less b/packages/artplayer/src/style/notice.less
index 3d41925ad..aa54d528a 100644
--- a/packages/artplayer/src/style/notice.less
+++ b/packages/artplayer/src/style/notice.less
@@ -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;
     }
+  }
 }
diff --git a/packages/artplayer/src/style/plugins.less b/packages/artplayer/src/style/plugins.less
index 27fca6086..4e6d50d8c 100644
--- a/packages/artplayer/src/style/plugins.less
+++ b/packages/artplayer/src/style/plugins.less
@@ -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;
     }
+  }
 }
diff --git a/packages/artplayer/src/style/poster.less b/packages/artplayer/src/style/poster.less
index 7554fb2b2..e6d386df7 100644
--- a/packages/artplayer/src/style/poster.less
+++ b/packages/artplayer/src/style/poster.less
@@ -1,5 +1,5 @@
 .art-poster {
-    .art-full(11);
-    .art-bg-cover();
-    pointer-events: none;
+  .art-full(11);
+  .art-bg-cover();
+  pointer-events: none;
 }
diff --git a/packages/artplayer/src/style/progress.less b/packages/artplayer/src/style/progress.less
index 21851bde2..f866fbb0d 100644
--- a/packages/artplayer/src/style/progress.less
+++ b/packages/artplayer/src/style/progress.less
@@ -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;
     }
-}
\ No newline at end of file
+  }
+}
diff --git a/packages/artplayer/src/style/selector.less b/packages/artplayer/src/style/selector.less
index f91d08041..effa96802 100644
--- a/packages/artplayer/src/style/selector.less
+++ b/packages/artplayer/src/style/selector.less
@@ -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;
     }
+  }
 }
diff --git a/packages/artplayer/src/style/setting.less b/packages/artplayer/src/style/setting.less
index eb818dd9c..03ddb0095 100644
--- a/packages/artplayer/src/style/setting.less
+++ b/packages/artplayer/src/style/setting.less
@@ -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;
     }
+  }
 }
diff --git a/packages/artplayer/src/style/subtitle.less b/packages/artplayer/src/style/subtitle.less
index 1641241c9..1a0d596da 100644
--- a/packages/artplayer/src/style/subtitle.less
+++ b/packages/artplayer/src/style/subtitle.less
@@ -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));
     }
+  }
 }
diff --git a/packages/artplayer/src/style/variables.less b/packages/artplayer/src/style/variables.less
index 545a6d268..e13d8c5f8 100644
--- a/packages/artplayer/src/style/variables.less
+++ b/packages/artplayer/src/style/variables.less
@@ -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;
 }
diff --git a/packages/artplayer/src/style/video.less b/packages/artplayer/src/style/video.less
index cdf866807..fb387d478 100644
--- a/packages/artplayer/src/style/video.less
+++ b/packages/artplayer/src/style/video.less
@@ -1,3 +1,3 @@
 .art-video {
-    .art-full(10);
+  .art-full(10);
 }
diff --git a/packages/artplayer/src/style/volume.less b/packages/artplayer/src/style/volume.less
index f3cc7b865..50529124c 100644
--- a/packages/artplayer/src/style/volume.less
+++ b/packages/artplayer/src/style/volume.less
@@ -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;
     }
+  }
 }
diff --git a/scripts/build-llm.js b/scripts/build-llm.js
index c2832edd6..e70ef72f9 100644
--- a/scripts/build-llm.js
+++ b/scripts/build-llm.js
@@ -80,7 +80,7 @@ async function askDeepSeek(prompt, text, tag, id) {
 
       // 处理限流情况
       if (res.status === 429) {
-        const delay = Math.pow(2, attempt) * 1000
+        const delay = 2 ** attempt * 1000
         console.log(`⏳ [${tag}] Rate limited, waiting ${delay}ms...`)
         await new Promise(r => setTimeout(r, delay))
         continue
diff --git a/scripts/trans-docs.js b/scripts/trans-docs.js
index 406d8fe35..297a4bc16 100644
--- a/scripts/trans-docs.js
+++ b/scripts/trans-docs.js
@@ -112,7 +112,7 @@ function cleanTranslation(text) {
   return text
     .replace(/^```(markdown|md)?/gi, '')
     .replace(/```$/g, '')
-    .replace(/^(Here('|')s|Below is|Translation|The English version|Here is)[:：]?\s*/gi, '')
+    .replace(/^(Here(')s|Below is|Translation|The English version|Here is)[:：]?\s*/gi, '')
     .replace(/(Translation completed\.?|End of translation\.?)$/gi, '')
     .trim()
 }
@@ -141,7 +141,7 @@ async function callDeepSeekAPI(prompt, tag, chunkId) {
 
       // 处理限流情况
       if (res.status === 429) {
-        const delay = Math.pow(2, attempt) * 1000
+        const delay = 2 ** attempt * 1000
         console.log(`⏳ [${tag}] Rate limited, waiting ${delay}ms...`)
         await new Promise(r => setTimeout(r, delay))
         continue