@vtx/player 0.0.14 → 0.0.17

package/lib/live-player/demo/src/components/lib/vtx-ztree-select/style/index.css

@@ -0,0 +1,66 @@
+.vtx-ztree-select {
+  position: relative;
+  display: inline-block;
+  width: 100%;
+}
+.vtx-ztree-select-close-icon {
+  display: none;
+  color: rgba(0, 0, 0, 0.25);
+  cursor: pointer;
+}
+.vtx-ztree-select-close-icon:hover {
+  color: rgba(0, 0, 0, 0.45);
+}
+.vtx-ztree-select:hover .vtx-ztree-select-close-icon {
+  display: block;
+}
+.vtx-ztree-select input {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.vtx-ztree-select-multiple {
+  position: relative;
+  padding-right: 18px;
+}
+.vtx-ztree-select-multiple-close-icon {
+  position: absolute;
+  top: 8px;
+  right: 5px;
+  display: none;
+  color: rgba(0, 0, 0, 0.25);
+  cursor: pointer;
+}
+.vtx-ztree-select-multiple-close-icon:hover {
+  color: rgba(0, 0, 0, 0.45);
+}
+.vtx-ztree-select-multiple:hover .vtx-ztree-select-multiple-close-icon {
+  display: block;
+}
+.vtx-ztree-select-multiple-disabled {
+  color: rgba(0, 0, 0, 0.25);
+  background-color: #f5f5f5;
+  cursor: not-allowed;
+  opacity: 1;
+}
+.vtx-ztree-select-multiple-disabled:hover {
+  border-color: #d9d9d9;
+}
+.vtx-ztree-select-popover {
+  min-width: 200px;
+  height: 300px;
+  overflow: auto;
+}
+.vtx-ztree-select-popover::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  background-color: hsla(0, 0%, 76%, 0.07);
+}
+.vtx-ztree-select-popover::-webkit-scrollbar-thumb {
+  background-color: rgba(193, 193, 193, 0.6);
+  border-radius: 3px;
+  -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.3);
+          box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.3);
+}
+.vtx-ztree-select-placeholder {
+  color: #bfbfbf;
+}

package/lib/live-player/demo/src/components/lib/vtx-ztree-select/style/index.less

@@ -0,0 +1,74 @@
+@import (reference) '~antd/lib/style/themes/index.less';
+@prefix-cls: vtx-ztree-select;
+
+.@{prefix-cls} {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    &-close-icon {
+        display: none;
+        color: @disabled-color;
+        cursor: pointer;
+        &:hover {
+            color: @text-color-secondary;
+        }
+    }
+    &:hover {
+        .vtx-ztree-select-close-icon {
+            display: block;
+        }
+    }
+    input {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    &-multiple {
+        position: relative;
+        padding-right: 18px;
+        &-close-icon {
+            position: absolute;
+            top: 8px;
+            right: 5px;
+            display: none;
+            color: @disabled-color;
+            cursor: pointer;
+            &:hover {
+                color: @text-color-secondary;
+            }
+        }
+        &:hover {
+            .vtx-ztree-select-multiple-close-icon {
+                display: block;
+            }
+        }
+    }
+    &-multiple-disabled {
+        color: @disabled-color;
+        background-color: @input-disabled-bg;
+        cursor: not-allowed;
+        opacity: 1;
+        &:hover {
+            border-color: #d9d9d9;
+        }
+    }
+}
+
+.vtx-ztree-select-popover {
+    min-width: 200px;
+    height: 300px;
+    overflow: auto;
+    &::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+        background-color: hsla(0, 0%, 76%, 0.07);
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: rgba(193, 193, 193, 0.6);
+        border-radius: 3px;
+        box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.3);
+    }
+}
+
+.vtx-ztree-select-placeholder {
+    color: @input-placeholder-color;
+}

package/lib/live-player/demo/src/components/vtxModals/lib/be-input/style/index.css

@@ -0,0 +1,13 @@
+.be-input-textarea::after {
+  float: right;
+  color: rgba(0, 0, 0, 0.45);
+  white-space: nowrap;
+  content: attr(data-count);
+  pointer-events: none;
+}
+.ant-input-affix-wrapper .ant-input-suffix {
+  color: rgba(0, 0, 0, 0.45);
+}
+.ant-input-affix-wrapper .ant-input:not(:last-child) {
+  padding-right: 48px;
+}

package/lib/live-player/demo/src/components/vtxModals/lib/be-input/style/index.less

@@ -0,0 +1,16 @@
+.be-input-textarea {
+    &::after {
+        float: right;
+        color: rgba(0, 0, 0, 0.45);
+        white-space: nowrap;
+        content: attr(data-count);
+        pointer-events: none;
+    }
+}
+
+.ant-input-affix-wrapper .ant-input-suffix {
+    color: rgba(0, 0, 0, 0.45);
+}
+.ant-input-affix-wrapper .ant-input:not(:last-child) {
+    padding-right: 48px;
+}

package/lib/live-player/demo/src/components/vtxModals/lib/theme/dark.css

@@ -0,0 +1,17 @@
+.vtx-business-modal-wrap.dark {
+  --bg-color: linear-gradient(0deg, #081e21cc, #000c);
+  --sub-bg-color: #ffffff0d;
+  --title-bg-color: #1a292bff;
+  --title-border: 1px solid transparent;
+  --title-color: white;
+  --sub-title-color: #82d3d0ff;
+  --label-color: #cafdffff;
+  --info-color: #e6e6e6ff;
+  --border-color: '#3C7073FF';
+  --scroll-bar-bg: #39cbc3aa;
+  --scroll-bar-hover-bg: #39cbc3ff;
+  --scroll-bar-track-bg: transparent;
+  --button-checked-color: linear-gradient(to bottom, #fff0, #fff4 50%, #fff0) 1 100%;
+  --button-color: #d4fcf2;
+  --arrow-icon-color: #355e5f;
+}

package/lib/live-player/demo/src/components/vtxModals/lib/theme/dark.less

@@ -0,0 +1,19 @@
+.vtx-business-modal-wrap {
+    &.dark {
+        --bg-color: linear-gradient(0deg, #081e21cc, #000c);
+        --sub-bg-color: #ffffff0d;
+        --title-bg-color: #1a292bff;
+        --title-border: 1px solid transparent;
+        --title-color: white;
+        --sub-title-color: #82d3d0ff;
+        --label-color: #cafdffff;
+        --info-color: #e6e6e6ff;
+        --border-color: '#3C7073FF';
+        --scroll-bar-bg: #39cbc3aa;
+        --scroll-bar-hover-bg: #39cbc3ff;
+        --scroll-bar-track-bg: transparent;
+        --button-checked-color: linear-gradient(to bottom, #fff0, #fff4 50%, #fff0) 1 100%;
+        --button-color: #d4fcf2;
+        --arrow-icon-color: #355e5f;
+    }
+}

package/lib/live-player/demo/src/components/vtxModals/lib/theme/default.css

@@ -0,0 +1,16 @@
+.vtx-business-modal-wrap {
+  --bg-color: white;
+  --sub-bg-color: #f3f3f380;
+  --title-bg-color: white;
+  --title-border: 1px solid #dbdbdbff;
+  --title-color: #222;
+  --sub-title-color: #222;
+  --label-color: #7f7f7f;
+  --info-color: #222;
+  --border-color: '#DADADAFF';
+  --scroll-bar-bg: #c0c0c0;
+  --scroll-bar-hover-bg: #adadad;
+  --scroll-bar-track-bg: #fafafa;
+  --button-checked-color: #1890ff;
+  --button-color: '#222';
+}

package/lib/live-player/demo/src/components/vtxModals/lib/theme/default.less

@@ -0,0 +1,16 @@
+.vtx-business-modal-wrap {
+    --bg-color: white;
+    --sub-bg-color: #f3f3f380;
+    --title-bg-color: white;
+    --title-border: 1px solid #dbdbdbff;
+    --title-color: #222;
+    --sub-title-color: #222;
+    --label-color: #7f7f7f;
+    --info-color: #222;
+    --border-color: '#DADADAFF';
+    --scroll-bar-bg: #c0c0c0;
+    --scroll-bar-hover-bg: #adadad;
+    --scroll-bar-track-bg: #fafafa;
+    --button-checked-color: #1890ff;
+    --button-color: '#222';
+}

package/lib/live-player/demo/src/components/vtxModals/lib/theme/global.css

@@ -0,0 +1,18 @@
+*::-webkit-scrollbar {
+  width: 10px;
+  height: 10px;
+}
+*::-webkit-scrollbar-track {
+  background: var(--scroll-bar-track-bg);
+  border-radius: 5px;
+}
+*::-webkit-scrollbar-thumb {
+  background: var(--scroll-bar-bg);
+  border-radius: 5px;
+}
+*::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--scroll-bar-hover-bg);
+}

package/lib/live-player/demo/src/components/vtxModals/lib/theme/global.less

@@ -0,0 +1,61 @@
+// @font-face {
+//     font-weight: normal;
+//     font-family: PingFangSC-Regular;
+//     font-style: normal;
+//     src: url('./fonts/pingfangsc-regular/PingFangSC.woff2') format('woff2');
+//     src: url('./fonts/pingfangsc-regular/PingFangSC.woff2') format('woff2'),
+//         url('./fonts/pingfangsc-regular/PingFangSC.woff') format('woff');
+//     font-display: swap;
+// }
+
+// @font-face {
+//     font-weight: bold;
+//     font-family: DIN-Bold;
+//     font-style: normal;
+//     src: url('./fonts/DIN/DIN-Bold.woff2') format('woff2'),
+//         url('./fonts/DIN/DIN-Bold.woff') format('woff');
+//     font-display: swap;
+// }
+
+// @font-face {
+//     font-weight: normal;
+//     font-family: DIN-Regular;
+//     font-style: normal;
+//     src: url('./fonts/DIN/DIN-Regular.woff2') format('woff2'),
+//         url('./fonts/DIN/DIN-Regular.woff') format('woff');
+//     font-display: swap;
+// }
+
+// @font-face {
+//     font-weight: 500;
+//     font-family: DIN-light;
+//     font-style: normal;
+//     src: url('./fonts/DIN/DIN-Medium.woff2') format('woff2'),
+//         url('./fonts/DIN/DIN-Medium.woff') format('woff');
+//     font-display: swap;
+// }
+
+* {
+    &::-webkit-scrollbar {
+        width: 10px;
+        height: 10px;
+    }
+
+    &::-webkit-scrollbar-track {
+        background: var(--scroll-bar-track-bg);
+        border-radius: 5px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: var(--scroll-bar-bg);
+        border-radius: 5px;
+    }
+
+    &::-webkit-scrollbar-corner {
+        background-color: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+        background: var(--scroll-bar-hover-bg);
+    }
+}

package/lib/live-player/demo/src/components/vtxModals/lib/vm-car-history/style/index.css

@@ -0,0 +1,3 @@
+.modal-view-wrap .ant-modal-close {
+  color: #fff;
+}

package/lib/live-player/demo/src/components/vtxModals/lib/vm-car-history/style/index.less

@@ -0,0 +1,5 @@
+.modal-view-wrap {
+    .ant-modal-close {
+        color: #fff;
+    }
+}

package/lib/live-player/demo/src/components/vtxModals/lib/vm-chart/style/index.css

@@ -0,0 +1,9 @@
+.chart-title {
+  --color: #666;
+  color: var(--color);
+  font-weight: bold;
+  font-size: 14px;
+}
+.chart-title.dark {
+  --color: #95fff9ff;
+}

package/lib/live-player/demo/src/components/vtxModals/lib/vm-chart/style/index.less

@@ -0,0 +1,10 @@
+.chart-title {
+    --color: #666;
+
+    &.dark {
+        --color: #95fff9ff;
+    }
+    color: var(--color);
+    font-weight: bold;
+    font-size: 14px;
+}

package/lib/live-player/demo/src/components/vtxModals/lib/vm-filter/style/index.css

@@ -0,0 +1,109 @@
+.vm-range-picker {
+  --color: #222;
+  --border: 1px solid #dadadaff;
+  --hover-color: #40a9ff;
+  background-color: var(--bg-color) !important;
+  border: var(--border) !important;
+}
+.vm-range-picker.dark {
+  --color: #a9d5d3ff;
+  --border: 1px solid #3c7073ff;
+  --bg-color: #0d1a1b;
+  --hover-color: white;
+}
+.vm-range-picker.dark .ant-picker-active-bar {
+  background: #59ffe2;
+}
+.vm-range-picker .ant-picker-suffix {
+  color: var(--color);
+}
+.vm-range-picker:hover {
+  border-color: var(--hover-color);
+}
+.vm-range-picker .ant-picker-input input {
+  color: var(--color);
+}
+.vm-range-picker .ant-picker-separator {
+  color: var(--color);
+}
+.vm-range-picker .ant-picker-clear {
+  color: var(--color);
+  background: transparent;
+}
+.vm-select.dark .ant-select-selector {
+  background-color: #0d1a1b !important;
+  border: 1px solid #3c7073 !important;
+}
+.vm-select.dark .ant-select-selector .ant-select-selection-item {
+  color: #a9d5d3;
+}
+.vm-select.dark:hover .ant-select-selector {
+  border: 1px solid #6cc9ce !important;
+}
+.vm-select-dropdown.dark {
+  background: #0d1a1b;
+}
+.vm-select-dropdown.dark .ant-select-item {
+  color: white;
+}
+.vm-select-dropdown.dark .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+  background-color: #2d575a;
+}
+.vm-select-dropdown.dark .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
+  background-color: #1c3436;
+}
+.vm-range-picker-dropdown.dark .ant-picker-range-arrow {
+  background: none;
+}
+.vm-range-picker-dropdown.dark .ant-picker-range-arrow::before {
+  background: #0d1a1be6;
+}
+.vm-range-picker-dropdown.dark .ant-picker-panel-container {
+  background: #0d1a1be6;
+  -webkit-box-shadow: 0 3px 6px -4px #ffffff1f, 0 6px 16px #ffffff14, 0 9px 28px 8px #5454540d;
+          box-shadow: 0 3px 6px -4px #ffffff1f, 0 6px 16px #ffffff14, 0 9px 28px 8px #5454540d;
+}
+.vm-range-picker-dropdown.dark .ant-picker-panel-container .ant-picker-header button {
+  color: white;
+}
+.vm-range-picker-dropdown.dark .ant-picker-panel-container .ant-picker-header button:hover {
+  color: #95fff9;
+}
+.vm-range-picker-dropdown.dark .ant-picker-panel-container .ant-picker-content th {
+  color: white;
+}
+.vm-range-picker-dropdown.dark .ant-picker-panel-container .ant-picker-content .ant-picker-cell-inner {
+  color: white;
+}
+.vm-range-picker-dropdown.dark .ant-picker-panel-container .ant-picker-content .ant-picker-cell-in-view.ant-picker-cell-in-range::before {
+  background: #6cff2340;
+}
+.vm-range-picker-dropdown.dark .ant-picker-panel-container .ant-picker-content .ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before,
+.vm-range-picker-dropdown.dark .ant-picker-panel-container .ant-picker-content .ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before {
+  background: #6cff2340;
+}
+.vm-range-picker-dropdown.dark .ant-picker-panel-container .ant-picker-content .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner,
+.vm-range-picker-dropdown.dark .ant-picker-panel-container .ant-picker-content .ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner,
+.vm-range-picker-dropdown.dark .ant-picker-panel-container .ant-picker-content .ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner {
+  background: #52c41a;
+}
+.vm-range-picker-dropdown.dark .ant-picker-panel-container .ant-picker-content .ant-picker-cell:hover:not(.ant-picker-cell-in-view) .ant-picker-cell-inner,
+.vm-range-picker-dropdown.dark .ant-picker-panel-container .ant-picker-content .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end) .ant-picker-cell-inner {
+  background: #f5f5f55e;
+}
+.vm-range-picker-dropdown.dark .ant-picker-panel-container .ant-picker-content .ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::before {
+  border: 1px solid #52c41a;
+}
+.vm-range-picker-dropdown.dark .ant-picker-panel-container .ant-picker-content .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover::before,
+.vm-range-picker-dropdown.dark .ant-picker-panel-container .ant-picker-content .ant-picker-cell-in-view.ant-picker-cell-range-start.ant-picker-cell-range-hover::before,
+.vm-range-picker-dropdown.dark .ant-picker-panel-container .ant-picker-content .ant-picker-cell-in-view.ant-picker-cell-range-end.ant-picker-cell-range-hover::before,
+.vm-range-picker-dropdown.dark .ant-picker-panel-container .ant-picker-content .ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single).ant-picker-cell-range-hover-start::before,
+.vm-range-picker-dropdown.dark .ant-picker-panel-container .ant-picker-content .ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single).ant-picker-cell-range-hover-end::before,
+.vm-range-picker-dropdown.dark .ant-picker-panel-container .ant-picker-content .ant-picker-panel > :not(.ant-picker-date-panel) .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start::before,
+.vm-range-picker-dropdown.dark .ant-picker-panel-container .ant-picker-content .ant-picker-panel > :not(.ant-picker-date-panel) .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end::before {
+  background: #52c41abb;
+}
+.vm-range-picker-dropdown.dark .ant-picker-panel-container .ant-picker-content .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start .ant-picker-cell-inner::after,
+.vm-range-picker-dropdown.dark .ant-picker-panel-container .ant-picker-content .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end .ant-picker-cell-inner::after {
+  background: #52c41abb !important;
+}

package/lib/live-player/demo/src/components/vtxModals/lib/vm-filter/style/index.less

@@ -0,0 +1,142 @@
+.vm-range-picker {
+    --color: #222;
+    --border: 1px solid #dadadaff;
+    --hover-color: #40a9ff;
+
+    &.dark {
+        --color: #a9d5d3ff;
+        --border: 1px solid #3c7073ff;
+        --bg-color: #0d1a1b;
+        --hover-color: white;
+        .ant-picker-active-bar {
+            background: #59ffe2;
+        }
+    }
+    background-color: var(--bg-color) !important;
+    border: var(--border) !important;
+
+    .ant-picker-suffix {
+        color: var(--color);
+    }
+
+    &:hover {
+        border-color: var(--hover-color);
+    }
+
+    .ant-picker-input {
+        input {
+            color: var(--color);
+        }
+    }
+
+    .ant-picker-separator {
+        color: var(--color);
+    }
+
+    .ant-picker-clear {
+        color: var(--color);
+        background: transparent;
+    }
+}
+.vm-select {
+    &.dark {
+        .ant-select-selector {
+            background-color: #0d1a1b !important;
+            border: 1px solid #3c7073 !important;
+            .ant-select-selection-item {
+                color: #a9d5d3;
+            }
+        }
+        &:hover {
+            .ant-select-selector {
+                border: 1px solid #6cc9ce !important;
+            }
+        }
+    }
+}
+
+.vm-select-dropdown {
+    &.dark {
+        background: #0d1a1b;
+        .ant-select-item {
+            color: white;
+        }
+        .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+            background-color: #2d575a;
+        }
+        .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
+            background-color: #1c3436;
+        }
+    }
+}
+.vm-range-picker-dropdown {
+    &.dark {
+        .ant-picker-range-arrow {
+            background: none;
+            &::before {
+                background: #0d1a1be6;
+            }
+        }
+        .ant-picker-panel-container {
+            background: #0d1a1be6;
+            box-shadow: 0 3px 6px -4px #ffffff1f, 0 6px 16px #ffffff14, 0 9px 28px 8px #5454540d;
+            .ant-picker-header {
+                button {
+                    color: white;
+                    &:hover {
+                        color: #95fff9;
+                    }
+                }
+            }
+            .ant-picker-content {
+                th {
+                    color: white;
+                }
+                .ant-picker-cell-inner {
+                    color: white;
+                }
+                .ant-picker-cell-in-view.ant-picker-cell-in-range::before {
+                    background: #6cff2340;
+                }
+                .ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single)::before,
+                .ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single)::before {
+                    background: #6cff2340;
+                }
+                .ant-picker-cell-in-view.ant-picker-cell-selected .ant-picker-cell-inner,
+                .ant-picker-cell-in-view.ant-picker-cell-range-start .ant-picker-cell-inner,
+                .ant-picker-cell-in-view.ant-picker-cell-range-end .ant-picker-cell-inner {
+                    background: #52c41a;
+                }
+                .ant-picker-cell:hover:not(.ant-picker-cell-in-view) .ant-picker-cell-inner,
+                .ant-picker-cell:hover:not(.ant-picker-cell-selected):not(.ant-picker-cell-range-start):not(.ant-picker-cell-range-end):not(.ant-picker-cell-range-hover-start):not(.ant-picker-cell-range-hover-end)
+                    .ant-picker-cell-inner {
+                    background: #f5f5f55e;
+                }
+                .ant-picker-cell-in-view.ant-picker-cell-today .ant-picker-cell-inner::before {
+                    border: 1px solid #52c41a;
+                }
+
+                .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover::before,
+                .ant-picker-cell-in-view.ant-picker-cell-range-start.ant-picker-cell-range-hover::before,
+                .ant-picker-cell-in-view.ant-picker-cell-range-end.ant-picker-cell-range-hover::before,
+                .ant-picker-cell-in-view.ant-picker-cell-range-start:not(.ant-picker-cell-range-start-single).ant-picker-cell-range-hover-start::before,
+                .ant-picker-cell-in-view.ant-picker-cell-range-end:not(.ant-picker-cell-range-end-single).ant-picker-cell-range-hover-end::before,
+                .ant-picker-panel
+                    > :not(.ant-picker-date-panel)
+                    .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start::before,
+                .ant-picker-panel
+                    > :not(.ant-picker-date-panel)
+                    .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end::before {
+                    background: #52c41abb;
+                }
+
+                .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-start
+                    .ant-picker-cell-inner::after,
+                .ant-picker-cell-in-view.ant-picker-cell-in-range.ant-picker-cell-range-hover-end
+                    .ant-picker-cell-inner::after {
+                    background: #52c41abb !important;
+                }
+            }
+        }
+    }
+}

package/lib/live-player/demo/src/components/vtxModals/lib/vm-info-collection/style/index.css

@@ -0,0 +1,22 @@
+.info-collection {
+  width: -webkit-fit-content;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+.info-collection .info-line {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: top;
+      -ms-flex-align: top;
+          align-items: top;
+  font-size: 12px;
+}
+.info-collection .info-line .label {
+  color: var(--label-color);
+  white-space: nowrap;
+}
+.info-collection .info-line .value {
+  color: var(--info-color);
+  font-weight: 400;
+}

package/lib/live-player/demo/src/components/vtxModals/lib/vm-info-collection/style/index.less

@@ -0,0 +1,18 @@
+.info-collection {
+    width: fit-content;
+    .info-line {
+        display: flex;
+        align-items: top;
+        font-size: 12px;
+
+        .label {
+            color: var(--label-color);
+            white-space: nowrap;
+        }
+
+        .value {
+            color: var(--info-color);
+            font-weight: 400;
+        }
+    }
+}