@vtx/player 1.7.12 → 1.7.14

package/lib/history-control/style/index.less

@@ -1,252 +1,252 @@
-.history-dark {
-    .bottom-controls {
-        background-color: rgba(0, 59, 64, 0.3) !important;
-    }
-}
-
-.vtx-history-control {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    background-color: #2b3d51;
-    background-image: url('../images/empty.png');
-    background-repeat: no-repeat;
-    background-position: center;
-
-    .bottom-controls {
-        display: flex;
-        align-items: center;
-        width: 100%;
-        height: 32px;
-        padding: 0 12px;
-        background-color: #243241;
-    }
-
-    .collapse-controls {
-        position: absolute;
-        bottom: 32px;
-        width: 100%;
-        background-color: #131d27;
-
-        .action-bar {
-            display: flex;
-            justify-content: center;
-            cursor: pointer;
-        }
-
-        .collapse-panel-container {
-            .panels {
-                padding: 12px 20px;
-                margin: 0 14px 14px;
-                background-color: #141414;
-                border: 1px solid rgba(255, 255, 255, 0.2);
-                border-radius: 2px;
-
-                .time-panel {
-                    position: relative;
-
-                    .time-line-icon {
-                        position: absolute;
-                        top: -10px;
-                    }
-
-                    .segments {
-                        position: relative;
-                        height: 24px;
-                        overflow: hidden;
-                        .timeline {
-                            position: absolute;
-                            top: 0;
-                            bottom: 0;
-                            border: 0;
-                            width: 1px;
-                            background: #1890ff;
-                            z-index: 1;
-                        }
-                        .segment {
-                            position: absolute;
-                            height: 24px;
-                            background-color: rgba(186, 231, 255, 1);
-                            border-left: 1px solid #141414;
-                        }
-                    }
-
-                    .time-axis {
-                        position: relative;
-                        width: 100%;
-
-                        .split-lines {
-                            height: 30px;
-
-                            &::before {
-                                position: absolute;
-                                top: -1px;
-                                width: 100%;
-                                height: 1px;
-                                content: '';
-                                background-color: rgba(255, 255, 255, 0.65);
-                            }
-
-                            .line {
-                                position: absolute;
-                                color: white;
-
-                                .number {
-                                    position: absolute;
-                                    color: rgba(255, 255, 255, 0.65);
-                                    transform: translate(-50%, 6px);
-                                }
-
-                                &::before {
-                                    position: absolute;
-                                    width: 1px;
-                                    height: 8px;
-                                    content: '';
-                                    background-color: rgba(255, 255, 255, 0.65);
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    .player-container {
-        flex-grow: 1;
-        width: 100%;
-        height: 0;
-        padding-bottom: 13px;
-    }
-    .vtx-spin {
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-    }
-}
-
-.history-url-table {
-    width: calc(100% - 5px);
-    border-right: 1px solid #383838;
-    border-bottom: 1px solid #383838;
-
-    .ant-table {
-        background: var(--table-bg);
-
-        .ant-table-container {
-            &::before {
-                display: none;
-            }
-
-            &::after {
-                display: none;
-            }
-
-            .ant-table-header {
-                table {
-                    border-collapse: collapse;
-
-                    thead {
-                        th {
-                            padding: 8px;
-                            color: rgba(255, 255, 255, 0.85);
-                            white-space: no-wrap;
-                            background-color: rgba(255, 255, 255, 0.07);
-                            border: 1px solid #383838;
-
-                            &::before {
-                                display: none;
-                            }
-                        }
-                    }
-                }
-            }
-
-            .ant-table-body {
-                &::-webkit-scrollbar {
-                    width: 10px;
-                    height: 10px;
-                }
-
-                &::-webkit-scrollbar-track {
-                    background: transparent;
-                    border-radius: 5px;
-                }
-
-                &::-webkit-scrollbar-thumb {
-                    background: rgba(255, 255, 255, 0.45);
-                    border-radius: 5px;
-                }
-
-                &::-webkit-scrollbar-corner {
-                    background-color: transparent;
-                }
-
-                &::-webkit-scrollbar-thumb:hover {
-                    background: rgba(255, 255, 255, 0.65);
-                }
-
-                table {
-                    border-collapse: collapse;
-
-                    tbody {
-                        tr {
-                            td {
-                                padding: 6px 8px;
-                                font-size: 14px;
-                                color: rgba(255, 255, 255, 0.65);
-                                white-space: nowrap;
-                                background-color: transparent;
-                                border: 1px solid #383838;
-                            }
-
-                            &.active {
-                                td {
-                                    background-color: #102641;
-                                }
-                            }
-                        }
-                    }
-
-                    .play-btn {
-                        height: fit-content;
-                        padding: 0 8px;
-                        font-size: 14px;
-                        color: rgba(255, 255, 255, 0.65);
-                        background: rgba(255, 255, 255, 0.078);
-                        border: 1px solidrgba(255, 255, 255, 0.2);
-                        border-radius: 2px;
-
-                        &.active {
-                            color: #177ddc;
-                            border-color: #177ddc;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-.theme-body {
-    .bottom-controls {
-        background: var(--backgroundContainer) !important;
-    }
-    .vtx-history-control {
-        background: var(--backgroundContainer);
-    }
-    .vtx-player-header {
-        width: 100%;
-        padding: 5px 15px;
-        background: var(--backgroundContainer);
-        color: var(--borderColor);
-    }
-    .collapse-controls {
-        background: var(--backgroundTable);
-        .panels {
-            background: var(--backgroundContainer) !important;
-        }
-    }
-}
+.history-dark {
+    .bottom-controls {
+        background-color: rgba(0, 59, 64, 0.3) !important;
+    }
+}
+
+.vtx-history-control {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: #2b3d51;
+    background-image: url('../images/empty.png');
+    background-repeat: no-repeat;
+    background-position: center;
+
+    .bottom-controls {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        height: 32px;
+        padding: 0 12px;
+        background-color: #243241;
+    }
+
+    .collapse-controls {
+        position: absolute;
+        bottom: 32px;
+        width: 100%;
+        background-color: #131d27;
+
+        .action-bar {
+            display: flex;
+            justify-content: center;
+            cursor: pointer;
+        }
+
+        .collapse-panel-container {
+            .panels {
+                padding: 12px 20px;
+                margin: 0 14px 14px;
+                background-color: #141414;
+                border: 1px solid rgba(255, 255, 255, 0.2);
+                border-radius: 2px;
+
+                .time-panel {
+                    position: relative;
+
+                    .time-line-icon {
+                        position: absolute;
+                        top: -10px;
+                    }
+
+                    .segments {
+                        position: relative;
+                        height: 24px;
+                        overflow: hidden;
+                        .timeline {
+                            position: absolute;
+                            top: 0;
+                            bottom: 0;
+                            border: 0;
+                            width: 1px;
+                            background: #1890ff;
+                            z-index: 1;
+                        }
+                        .segment {
+                            position: absolute;
+                            height: 24px;
+                            background-color: rgba(186, 231, 255, 1);
+                            border-left: 1px solid #141414;
+                        }
+                    }
+
+                    .time-axis {
+                        position: relative;
+                        width: 100%;
+
+                        .split-lines {
+                            height: 30px;
+
+                            &::before {
+                                position: absolute;
+                                top: -1px;
+                                width: 100%;
+                                height: 1px;
+                                content: '';
+                                background-color: rgba(255, 255, 255, 0.65);
+                            }
+
+                            .line {
+                                position: absolute;
+                                color: white;
+
+                                .number {
+                                    position: absolute;
+                                    color: rgba(255, 255, 255, 0.65);
+                                    transform: translate(-50%, 6px);
+                                }
+
+                                &::before {
+                                    position: absolute;
+                                    width: 1px;
+                                    height: 8px;
+                                    content: '';
+                                    background-color: rgba(255, 255, 255, 0.65);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .player-container {
+        flex-grow: 1;
+        width: 100%;
+        height: 0;
+        padding-bottom: 13px;
+    }
+    .vtx-spin {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+}
+
+.history-url-table {
+    width: calc(100% - 5px);
+    border-right: 1px solid #383838;
+    border-bottom: 1px solid #383838;
+
+    .ant-table {
+        background: var(--table-bg);
+
+        .ant-table-container {
+            &::before {
+                display: none;
+            }
+
+            &::after {
+                display: none;
+            }
+
+            .ant-table-header {
+                table {
+                    border-collapse: collapse;
+
+                    thead {
+                        th {
+                            padding: 8px;
+                            color: rgba(255, 255, 255, 0.85);
+                            white-space: no-wrap;
+                            background-color: rgba(255, 255, 255, 0.07);
+                            border: 1px solid #383838;
+
+                            &::before {
+                                display: none;
+                            }
+                        }
+                    }
+                }
+            }
+
+            .ant-table-body {
+                &::-webkit-scrollbar {
+                    width: 10px;
+                    height: 10px;
+                }
+
+                &::-webkit-scrollbar-track {
+                    background: transparent;
+                    border-radius: 5px;
+                }
+
+                &::-webkit-scrollbar-thumb {
+                    background: rgba(255, 255, 255, 0.45);
+                    border-radius: 5px;
+                }
+
+                &::-webkit-scrollbar-corner {
+                    background-color: transparent;
+                }
+
+                &::-webkit-scrollbar-thumb:hover {
+                    background: rgba(255, 255, 255, 0.65);
+                }
+
+                table {
+                    border-collapse: collapse;
+
+                    tbody {
+                        tr {
+                            td {
+                                padding: 6px 8px;
+                                font-size: 14px;
+                                color: rgba(255, 255, 255, 0.65);
+                                white-space: nowrap;
+                                background-color: transparent;
+                                border: 1px solid #383838;
+                            }
+
+                            &.active {
+                                td {
+                                    background-color: #102641;
+                                }
+                            }
+                        }
+                    }
+
+                    .play-btn {
+                        height: fit-content;
+                        padding: 0 8px;
+                        font-size: 14px;
+                        color: rgba(255, 255, 255, 0.65);
+                        background: rgba(255, 255, 255, 0.078);
+                        border: 1px solidrgba(255, 255, 255, 0.2);
+                        border-radius: 2px;
+
+                        &.active {
+                            color: #177ddc;
+                            border-color: #177ddc;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+.theme-body {
+    .bottom-controls {
+        background: var(--backgroundContainer) !important;
+    }
+    .vtx-history-control {
+        background: var(--backgroundContainer);
+    }
+    .vtx-player-header {
+        width: 100%;
+        padding: 5px 15px;
+        background: var(--backgroundContainer);
+        color: var(--borderColor);
+    }
+    .collapse-controls {
+        background: var(--backgroundTable);
+        .panels {
+            background: var(--backgroundContainer) !important;
+        }
+    }
+}