update demo svg

docs/assets/css/style.css

@@ -73,6 +73,7 @@ img {
     align-items: center;
     margin-left: 20px;
     height: 100%;
+    line-height: 1;
 }
 
 .header .menus .has-sub-menu {
@@ -118,6 +119,7 @@ img {
     align-items: center;
     width: 100px;
     height: 100%;
+    line-height: 1;
     cursor: pointer;
     color: #f1fa8c;
     border-left: 1px solid rgb(17, 21, 24);
@@ -138,13 +140,13 @@ img {
 }
 
 .main .part-left .libs {
-    height: 50px;
+    height: 55px;
 }
 
 .main .part-left .libsInput {
     height: 100%;
     width: 100%;
-    padding: 5px 10px;
+    padding: 10px;
     outline: none;
     resize: none;
     border: none;
@@ -179,7 +181,7 @@ img {
     height: 70%;
     align-items: center;
     justify-content: center;
-    border-bottom: 1px solid rgb(17, 21, 24);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 }
 
 .part-right .video-wrap .artplayer-app {
@@ -189,7 +191,8 @@ img {
     font-size: 20px;
     width: 90%;
     height: 65%;
-    border: 1px solid rgba(255, 255, 255, 0.05);
+    background-color: rgb(0 0 0 / 20%);
+    border: 1px dashed rgba(255, 255, 255, 0.1);
 }
 
 .part-right .console {

docs/assets/example/index.js

@@ -25,8 +25,7 @@ var art = new Artplayer({
     localSubtitle: true,
     mutex: true,
     backdrop: true,
-    log: true,
-    theme: '#ffad00',
+    theme: '#23ade5',
     lang: navigator.language.toLowerCase(),
     moreVideoAttr: {
         crossOrigin: 'anonymous',
@@ -122,8 +121,8 @@ var art = new Artplayer({
         },
     ],
     icons: {
-        indicator: '<img src="/assets/img/indicator.svg">',
+        indicator: '<img width="16" heigth="16" src="/assets/img/indicator.svg">',
         loading: '<img src="/assets/img/ploading.gif">',
-        state: '<img src="/assets/img/state.png">',
+        state: '<img width="150" heigth="150" src="/assets/img/state.svg">',
     },
 });

docs/assets/img/state.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="pid-64-svgo-a" d="M0 0h80v80H0z"></path><path d="M52.546 8.014a3.998 3.998 0 014.222 3.077c.104.446.093.808.039 1.138a2.74 2.74 0 01-.312.881c-.073.132-.16.254-.246.376l-.257.366-.521.73c-.7.969-1.415 1.926-2.154 2.866l-.015.02a240.945 240.945 0 015.986.341l1.643.123.822.066.41.034.206.018.103.008.115.012c1.266.116 2.516.45 3.677.975a11.663 11.663 0 013.166 2.114c.931.87 1.719 1.895 2.321 3.022a11.595 11.595 0 011.224 3.613c.03.157.046.316.068.474l.015.119.013.112.022.206.085.822.159 1.646c.1 1.098.19 2.198.27 3.298.315 4.4.463 8.829.36 13.255a166.489 166.489 0 01-.843 13.213c-.012.127-.034.297-.053.454a7.589 7.589 0 01-.072.475l-.04.237-.05.236a11.762 11.762 0 01-.74 2.287 11.755 11.755 0 01-5.118 5.57 11.705 11.705 0 01-3.623 1.263c-.158.024-.316.052-.475.072l-.477.053-.821.071-1.644.134c-1.096.086-2.192.16-3.288.23a260.08 260.08 0 01-6.578.325c-8.772.324-17.546.22-26.313-.302a242.458 242.458 0 01-3.287-.22l-1.643-.129-.822-.069-.41-.035-.206-.018c-.068-.006-.133-.01-.218-.02a11.566 11.566 0 01-3.7-.992 11.732 11.732 0 01-5.497-5.178 11.73 11.73 0 01-1.215-3.627c-.024-.158-.051-.316-.067-.475l-.026-.238-.013-.119-.01-.103-.07-.823-.132-1.648a190.637 190.637 0 01-.22-3.298c-.256-4.399-.358-8.817-.258-13.233.099-4.412.372-8.811.788-13.197a11.65 11.65 0 013.039-6.835 11.585 11.585 0 016.572-3.563c.157-.023.312-.051.47-.07l.47-.05.82-.07 1.643-.13a228.493 228.493 0 016.647-.405l-.041-.05a88.145 88.145 0 01-2.154-2.867l-.52-.73-.258-.366c-.086-.122-.173-.244-.246-.376a2.74 2.74 0 01-.312-.881 2.808 2.808 0 01.04-1.138 3.998 3.998 0 014.22-3.077 2.8 2.8 0 011.093.313c.294.155.538.347.742.568.102.11.19.23.28.35l.27.359.532.72a88.059 88.059 0 012.06 2.936 73.036 73.036 0 011.929 3.03c.187.313.373.628.556.945 2.724-.047 5.447-.056 8.17-.038.748.006 1.496.015 2.244.026.18-.313.364-.624.549-.934a73.281 73.281 0 011.93-3.03 88.737 88.737 0 012.059-2.935l.533-.72.268-.359c.09-.12.179-.24.281-.35a2.8 2.8 0 011.834-.881zM30.13 34.631a4 4 0 00-.418 1.42 91.157 91.157 0 00-.446 9.128c0 2.828.121 5.656.364 8.483l.11 1.212a4 4 0 005.858 3.143c2.82-1.498 5.55-3.033 8.193-4.606a177.41 177.41 0 005.896-3.666l1.434-.942a4 4 0 00.047-6.632 137.703 137.703 0 00-7.377-4.708 146.88 146.88 0 00-6.879-3.849l-1.4-.725a4 4 0 00-5.382 1.742z" id="pid-64-svgo-d"></path><filter x="-15.4%" y="-16.3%" width="130.9%" height="132.5%" filterUnits="objectBoundingBox" id="pid-64-svgo-c"><feOffset dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset><feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix><feOffset in="SourceAlpha" result="shadowOffsetOuter2"></feOffset><feGaussianBlur stdDeviation="3.5" in="shadowOffsetOuter2" result="shadowBlurOuter2"></feGaussianBlur><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0" in="shadowBlurOuter2" result="shadowMatrixOuter2"></feColorMatrix><feMerge><feMergeNode in="shadowMatrixOuter1"></feMergeNode><feMergeNode in="shadowMatrixOuter2"></feMergeNode></feMerge></filter></defs><g fill="none" fill-rule="evenodd" opacity=".8"><mask id="pid-64-svgo-b" fill="#fff"><use xlink:href="#pid-64-svgo-a"></use></mask><g mask="url(#pid-64-svgo-b)"><use fill="#000" filter="url(#pid-64-svgo-c)" xlink:href="#pid-64-svgo-d"></use><use fill="#FFF" xlink:href="#pid-64-svgo-d"></use></g></g></svg>