@vtx/player 0.0.15 → 0.0.16

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

@@ -0,0 +1,166 @@
+@import (reference) '~antd/lib/style/themes/index.less';
+@prefix-cls: vtx-datagrid;
+
+.@{prefix-cls} {
+    position: relative;
+    overflow: hidden;
+    &-fit {
+        height: 100%;
+        .ant-table-header,
+        .ant-table-body {
+            &::-webkit-scrollbar {
+                width: 5px;
+                background-color: hsla(0, 0%, 80%, 0.08);
+            }
+            &::-webkit-scrollbar-thumb {
+                background-color: rgba(0, 0, 0, 0.05);
+                border-radius: 3px;
+            }
+        }
+
+        .ant-table-fixed-header .ant-table-scroll .ant-table-header {
+            min-width: 5px !important;
+        }
+        .ant-table-pagination {
+            position: absolute;
+            right: 0;
+            bottom: 0;
+        }
+        .ant-spin-nested-loading {
+            height: 100%;
+            .ant-spin-container {
+                position: relative;
+                height: 100%;
+                .ant-table {
+                    height: 100%;
+                }
+            }
+        }
+    }
+    // 固定列目前没有办法用细的滚动条
+    .ant-table-has-fix-right {
+        .ant-table-body {
+            &::-webkit-scrollbar {
+                width: 17px;
+            }
+        }
+    }
+    // mac 和 windows下有差异，window chrome下滚动条宽度17px，mac chrome下15px
+    &-userAgent-mac {
+        .ant-table-has-fix-right {
+            .ant-table-body {
+                &::-webkit-scrollbar {
+                    width: 15px;
+                }
+            }
+        }
+    }
+    .ant-table-thead > tr > th when(@theme=default) {
+        // antd4.0 半透明会重叠
+        // background-color: fade(#1890ff, 8);
+        background-color: rgba(237, 246, 255, 1);
+    }
+    .ant-table-tbody > tr {
+        &:nth-child(even) when(@theme=default) {
+            background: #f6f6f6;
+        }
+        &.ant-table-placeholder {
+            position: absolute;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            background-color: transparent;
+            border-top: none;
+            & > td.ant-table-cell {
+                display: table;
+                width: 100%;
+                border-right: none !important;
+            }
+        }
+    }
+    // fix: checkbox 选中时 固定列 最上面一层透明会 和下面重叠
+    // .ant-table-tbody > tr.ant-table-row-selected td {
+    //     background: transparent;
+    // }
+    &-alert {
+        margin-bottom: 8px;
+        &-message when(@theme=default) {
+            color: fade(@black, 65%);
+        }
+        &-message when(@theme=dark) {
+            color: @text-color;
+        }
+        &-info-content > strong {
+            margin: 0 4px;
+            color: #13c2c2;
+        }
+        &-info-option {
+            margin-left: 10px;
+        }
+    }
+    &-nodata {
+        .ant-table-scroll {
+            overflow-y: hidden;
+        }
+    }
+    &-toolbar {
+        display: table;
+        width: 100%;
+        margin: 16px 0;
+        color: @text-color;
+    }
+    &-toolbar-left,
+    &-toolbar-right {
+        display: inline-block;
+        display: table-cell;
+        vertical-align: middle;
+    }
+    &-toolbar-left {
+        color: @text-color;
+        font-size: 16px;
+    }
+    &-toolbar-right {
+        float: right;
+    }
+    &-toolbar-setting-item {
+        display: inline-block;
+        margin-left: 16px;
+        color: @icon-color;
+        font-size: 16px;
+        vertical-align: middle;
+        cursor: pointer;
+        &:hover {
+            color: @icon-color-hover;
+        }
+    }
+    &-column-setting-title {
+        height: 32px;
+        line-height: 32px;
+        a {
+            display: inline-block;
+            float: right;
+            vertical-align: middle;
+        }
+    }
+    &-column-setting-checkbox-wrapper {
+        color: @text-color;
+        vertical-align: middle;
+    }
+    &-space-item {
+        display: inline-block;
+        vertical-align: middle;
+    }
+    .react-resizable {
+        position: relative;
+        background-clip: padding-box;
+    }
+    .react-resizable-handle {
+        position: absolute;
+        right: -5px;
+        bottom: 0;
+        z-index: 1;
+        width: 10px;
+        height: 100%;
+        cursor: col-resize;
+    }
+}

package/lib/live-player/demo/src/components/lib/vtx-date-picker/style/index.css

@@ -0,0 +1,29 @@
+.vtx-qdate-wrap {
+  position: relative;
+}
+.vtx-qdate-wrap .ant-calendar-picker-input {
+  color: transparent;
+}
+.vtx-qdate-input-wrap {
+  position: absolute;
+  top: 50%;
+  left: 12px;
+  margin-top: -16px;
+}
+.vtx-qdate-extra-footer {
+  text-align: center;
+}
+.vtx-qdate-text-year:hover,
+.vtx-qdate-text-date:hover,
+.vtx-qdate-text-month:hover,
+.vtx-qdate-text-time:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
+.vtx-qdate-text-time::before {
+  content: ' ';
+}
+.vtx-qdate-text-month:not(:first-child)::before,
+.vtx-qdate-text-date:not(:first-child)::before {
+  content: '-';
+}

package/lib/live-player/demo/src/components/lib/vtx-date-picker/style/index.less

@@ -0,0 +1,39 @@
+@prefix-cls: vtx-qdate;
+
+.@{prefix-cls} {
+    &-wrap {
+        position: relative;
+
+        .ant-calendar-picker-input {
+            color: transparent;
+        }
+    }
+
+    &-input-wrap {
+        position: absolute;
+        top: 50%;
+        left: 12px;
+        margin-top: -16px;
+    }
+
+    &-extra-footer {
+        text-align: center;
+    }
+
+    &-text-year:hover,
+    &-text-date:hover,
+    &-text-month:hover,
+    &-text-time:hover {
+        text-decoration: underline;
+        cursor: pointer;
+    }
+
+    &-text-time::before {
+        content: ' ';
+    }
+
+    &-text-month:not(:first-child)::before,
+    &-text-date:not(:first-child)::before {
+        content: '-';
+    }
+}

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

@@ -0,0 +1,6 @@
+.vtx-editor {
+  border: 1px solid #d9d9d9;
+}
+.vtx-editor .bf-content {
+  height: 300px;
+}

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

@@ -0,0 +1,8 @@
+@import (reference) '~antd/lib/style/themes/index.less';
+
+.vtx-editor {
+    border: @border-width-base @border-style-base @border-color-base;
+    .bf-content {
+        height: 300px;
+    }
+}

package/lib/live-player/demo/src/components/lib/vtx-ellipsis-text/style/index.css

@@ -0,0 +1,13 @@
+.vtx-ellipsis-text {
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.vtx-ellipsis-text--single {
+  white-space: nowrap;
+}
+.vtx-ellipsis-text--multi {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}

package/lib/live-player/demo/src/components/lib/vtx-ellipsis-text/style/index.less

@@ -0,0 +1,13 @@
+.vtx-ellipsis-text {
+    margin: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    &--single {
+        white-space: nowrap;
+    }
+    &--multi {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+    }
+}

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

@@ -0,0 +1,8 @@
+.vtx-spin {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+      -ms-transform: translate(-50%, -50%);
+          transform: translate(-50%, -50%);
+}

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

@@ -0,0 +1,6 @@
+.vtx-spin {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}

package/lib/live-player/demo/src/components/lib/vtx-form-layout/demo/Modal.css

@@ -0,0 +1,42 @@
+.vtx-demo-modal {
+  position: relative;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  -webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  pointer-events: auto;
+}
+.vtx-demo-modal-header {
+  padding: 16px 24px;
+  color: rgba(0, 0, 0, 0.65);
+  background: #fff;
+  border-bottom: 1px solid #d9d9d9;
+  border-radius: 4px 4px 0 0;
+}
+.vtx-demo-modal-title {
+  margin: 0;
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 22px;
+  word-wrap: break-word;
+}
+.vtx-demo-modal-body {
+  padding: 20px 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  word-wrap: break-word;
+}
+.vtx-demo-modal-footer {
+  padding: 10px 16px;
+  text-align: right;
+  background: transparent;
+  border-top: 1px solid #d9d9d9;
+  border-radius: 0 0 4px 4px;
+}
+.vtx-demo-modal-footer button + button {
+  margin-bottom: 0;
+  margin-left: 8px;
+}

package/lib/live-player/demo/src/components/lib/vtx-form-layout/demo/Modal.less

@@ -0,0 +1,43 @@
+@import (reference) '~antd/lib/style/themes/index.less';
+
+.vtx-demo-modal {
+    position: relative;
+    background-color: @component-background;
+    background-clip: padding-box;
+    border: 1px solid @border-color-base;
+    border-radius: 4px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 15%);
+    pointer-events: auto;
+    &-header {
+        padding: 16px 24px;
+        color: rgba(0, 0, 0, 0.65);
+        background: @component-background;
+        border-bottom: 1px solid @border-color-base;
+        border-radius: 4px 4px 0 0;
+    }
+    &-title {
+        margin: 0;
+        color: @text-color;
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 22px;
+        word-wrap: break-word;
+    }
+    &-body {
+        padding: 20px 24px;
+        font-size: 14px;
+        line-height: 1.5;
+        word-wrap: break-word;
+    }
+    &-footer {
+        padding: 10px 16px;
+        text-align: right;
+        background: transparent;
+        border-top: 1px solid @border-color-base;
+        border-radius: 0 0 4px 4px;
+        button + button {
+            margin-bottom: 0;
+            margin-left: 8px;
+        }
+    }
+}

package/lib/live-player/demo/src/components/lib/vtx-form-layout/style/index.css

@@ -0,0 +1,224 @@
+.vtx-form-layout {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-flow: row wrap;
+          flex-flow: row wrap;
+  width: 100%;
+  padding: 0 24px;
+  overflow: hidden;
+}
+.vtx-form-layout .vtx-form-item .ant-form-item-label {
+  text-overflow: ellipsis;
+}
+.vtx-form-layout .vtx-form-item .ant-form-item-label label::after {
+  content: '';
+}
+.vtx-form-layout .vtx-form-item-vertical {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+.vtx-form-layout .vtx-form-item-vertical .ant-form-item-label,
+.vtx-form-layout .vtx-form-item-vertical .ant-form-item-control {
+  line-height: 1.5715;
+}
+.vtx-form-layout .vtx-form-item-vertical .ant-form-item-label {
+  margin-bottom: 8px;
+  padding: 0 !important;
+  white-space: initial;
+  text-align: left;
+}
+.vtx-form-layout .vtx-form-item-vertical .ant-form-item-label label {
+  height: auto;
+}
+.vtx-form-layout .vtx-form-item .ant-form-item-explain {
+  font-size: 12px;
+}
+.vtx-form-layout .vtx-form-item--inline {
+  -webkit-box-flex: 0;
+      -ms-flex: none;
+          flex: none;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+  -ms-flex-wrap: nowrap;
+      flex-wrap: nowrap;
+  margin-right: 16px;
+  margin-bottom: 16px !important;
+  row-gap: 0;
+}
+.vtx-form-layout .vtx-form-item--inline .ant-form-item-control-input {
+  min-height: auto;
+}
+.vtx-form-layout .vtx-form-item--inline .ant-form-item-label {
+  -webkit-box-flex: 0;
+      -ms-flex: none;
+          flex: none;
+  margin-bottom: 0;
+}
+.vtx-form-layout .vtx-form-item--inline .ant-form-item-label > label {
+  height: auto;
+  color: rgba(0, 0, 0, 0.65);
+}
+.vtx-form-layout .vtx-form-item--inline .ant-form-item-label label::after {
+  content: ':';
+}
+.vtx-form-layout .vtx-form-item--view .ant-form-item-label,
+.vtx-form-layout .vtx-form-item--view .ant-form-item-control {
+  line-height: 1.5715;
+}
+.vtx-form-layout .vtx-form-item--view .ant-form-item-label > label {
+  height: auto;
+  color: rgba(0, 0, 0, 0.65);
+}
+.vtx-form-layout .vtx-form-item--view .ant-form-item-label label::after {
+  content: ':';
+}
+.vtx-form-layout .vtx-form-item--view .ant-form-item-control {
+  color: rgba(0, 0, 0, 0.85);
+}
+.vtx-form-layout .vtx-form-item--view .ant-form-item-control .ant-form-item-control-input {
+  min-height: auto;
+}
+.vtx-form-layout .vtx-form-item-col .ant-form-item {
+  margin-bottom: 20px;
+}
+.vtx-form-layout .vtx-form-item-col .vtx-form-item--view {
+  margin-bottom: 0;
+}
+.vtx-form-layout .vtx-form-item-col .ant-form-item-with-help {
+  margin-bottom: 0;
+}
+.vtx-form-layout .vtx-form-item-col .ant-form-item-explain {
+  min-height: 20px;
+}
+.vtx-form-layout .vtx-form-card {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+}
+.vtx-form-layout .vtx-form-card-expand-icon {
+  color: rgba(0, 0, 0, 0.45);
+  transition: transform 0.24s, -webkit-transform 0.24s;
+}
+.vtx-form-layout .vtx-form-card .ant-card-body {
+  padding: 0;
+}
+.vtx-form-layout .vtx-form-card .ant-card-head-wrapper,
+.vtx-form-layout .vtx-form-card .ant-card-head-title {
+  line-height: 1;
+}
+.vtx-form-layout .vtx-form-card-content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-flow: row wrap;
+          flex-flow: row wrap;
+  padding: 20px 24px;
+  padding-bottom: 0;
+}
+.vtx-form-layout .vtx-form-card-content::after {
+  clear: both;
+}
+.vtx-form-layout .vtx-form-card-content::before,
+.vtx-form-layout .vtx-form-card-content::after {
+  display: table;
+  content: '';
+}
+.vtx-form-layout .vtx-form-card-content-hide {
+  display: none;
+}
+.vtx-form-layout .vtx-form-card + .vtx-form-card {
+  margin-top: 20px;
+}
+.vtx-form-layout .vtx-form-pane {
+  position: relative;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 100%;
+}
+.vtx-form-layout .vtx-form-pane::after {
+  clear: both;
+}
+.vtx-form-layout .vtx-form-pane::before,
+.vtx-form-layout .vtx-form-pane::after {
+  display: table;
+  content: '';
+}
+.vtx-form-layout .vtx-form-pane-title {
+  margin-bottom: 16px;
+  overflow: hidden;
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: 500;
+  line-height: 1.5715;
+  list-style: none;
+}
+.vtx-form-layout .vtx-form-pane-content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-flow: row wrap;
+          flex-flow: row wrap;
+}
+.vtx-form-layout .vtx-form-pane-content::after {
+  clear: both;
+}
+.vtx-form-layout .vtx-form-pane-content::before,
+.vtx-form-layout .vtx-form-pane-content::after {
+  display: table;
+  content: '';
+}
+.vtx-form-layout .vtx-form-divider {
+  margin: 0;
+  margin-bottom: 20px;
+}
+.vtx-form-layout .vtx-form-divider--small {
+  margin-bottom: 16px;
+}
+.vtx-form-layout .vtx-form-tabs {
+  width: 100%;
+}
+.vtx-form-layout .vtx-form-tabs .ant-tabs-bar {
+  padding-right: 12px;
+  padding-left: 12px;
+  border-bottom: none;
+}
+.vtx-form-layout .vtx-form-tabs .ant-tabs-tab {
+  padding: 5px 0 10px 0;
+}
+.vtx-form-layout-vertical {
+  padding: 0 12px;
+}
+.vtx-form-layout-vertical .vtx-form-item-col {
+  padding-right: 12px;
+  padding-left: 12px;
+}
+.vtx-form-layout-vertical .vtx-form-card-content {
+  padding: 20px 12px;
+  padding-bottom: 0;
+}
+.vtx-form-layout-vertical .vtx-form-pane-title {
+  padding: 0 12px;
+}
+.vtx-form-layout-has-card {
+  padding: 0;
+}
+.vtx-form-layout-has-card .vtx-form-tabs .ant-tabs-bar {
+  padding: 0 24px;
+}
+.vtx-form-layout-view .vtx-form-item-col {
+  margin-bottom: 16px;
+}
+.vtx-form-layout-view .vtx-form-divider {
+  margin-bottom: 16px;
+}