@vtx/player 0.0.15 → 0.0.16

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

@@ -0,0 +1,211 @@
+@import (reference) '~antd/lib/style/themes/index.less';
+
+@view-item-margin-bottom: 16px;
+
+.vtx-form-layout {
+    position: relative;
+    display: flex;
+    flex-flow: row wrap;
+    width: 100%;
+    padding: 0 @padding-lg;
+    overflow: hidden;
+    .vtx-form-item {
+        .ant-form-item-label {
+            text-overflow: ellipsis;
+            label::after {
+                content: '';
+            }
+        }
+        &-vertical {
+            flex-direction: column;
+            .ant-form-item-label,
+            .ant-form-item-control {
+                line-height: @line-height-base;
+            }
+            .ant-form-item-label {
+                margin-bottom: 8px;
+                padding: 0 !important;
+                white-space: initial;
+                text-align: left;
+                label {
+                    height: auto;
+                }
+            }
+        }
+        .ant-form-item-explain {
+            font-size: @font-size-sm;
+        }
+        &--inline {
+            flex: none;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            margin-right: 16px;
+            margin-bottom: @view-item-margin-bottom !important;
+            row-gap: 0;
+            .ant-form-item-control-input {
+                min-height: auto;
+            }
+            .ant-form-item-label {
+                flex: none;
+                margin-bottom: 0;
+                & > label {
+                    height: auto;
+                    color: fade(@black, 65%);
+                }
+                label::after {
+                    content: ':';
+                }
+            }
+        }
+        &--view {
+            .ant-form-item-label,
+            .ant-form-item-control {
+                line-height: @line-height-base;
+            }
+            .ant-form-item-label {
+                & > label {
+                    height: auto;
+                    color: fade(@black, 65%);
+                }
+                label::after {
+                    content: ':';
+                }
+            }
+            .ant-form-item-control {
+                color: @text-color;
+                .ant-form-item-control-input {
+                    min-height: auto;
+                }
+            }
+        }
+    }
+    .vtx-form-item-col {
+        .ant-form-item {
+            margin-bottom: 20px;
+        }
+        .vtx-form-item--view {
+            margin-bottom: 0;
+        }
+        .ant-form-item-with-help {
+            margin-bottom: 0;
+        }
+        .ant-form-item-explain {
+            min-height: 20px;
+        }
+    }
+    .vtx-form-card {
+        position: relative;
+        width: 100%;
+        overflow: hidden;
+        &-expand-icon {
+            color: fade(@black, 45%);
+            transition: transform 0.24s, -webkit-transform 0.24s;
+        }
+        .ant-card-body {
+            padding: 0;
+        }
+        .ant-card-head-wrapper,
+        .ant-card-head-title {
+            line-height: 1;
+        }
+        &-content {
+            display: flex;
+            flex-flow: row wrap;
+            padding: 20px 24px;
+            padding-bottom: 0;
+            &::after {
+                clear: both;
+            }
+            &::before,
+            &::after {
+                display: table;
+                content: '';
+            }
+        }
+        &-content-hide {
+            display: none;
+        }
+    }
+    .vtx-form-card + .vtx-form-card {
+        margin-top: 20px;
+    }
+    .vtx-form-pane {
+        position: relative;
+        box-sizing: border-box;
+        width: 100%;
+        &::after {
+            clear: both;
+        }
+        &::before,
+        &::after {
+            display: table;
+            content: '';
+        }
+        &-title {
+            margin-bottom: 16px;
+            overflow: hidden;
+            color: @text-color;
+            font-weight: 500;
+            line-height: @line-height-base;
+            list-style: none;
+        }
+        &-content {
+            display: flex;
+            flex-flow: row wrap;
+            &::after {
+                clear: both;
+            }
+            &::before,
+            &::after {
+                display: table;
+                content: '';
+            }
+        }
+    }
+    .vtx-form-divider {
+        margin: 0;
+        margin-bottom: 20px;
+        &--small {
+            margin-bottom: 16px;
+        }
+    }
+    .vtx-form-tabs {
+        width: 100%;
+        .ant-tabs-bar {
+            padding-right: @padding-sm;
+            padding-left: @padding-sm;
+            border-bottom: none;
+        }
+        .ant-tabs-tab {
+            padding: 5px 0 10px 0;
+        }
+    }
+    &-vertical {
+        padding: 0 @padding-sm;
+        .vtx-form-item-col {
+            padding-right: @padding-sm;
+            padding-left: @padding-sm;
+        }
+        .vtx-form-card-content {
+            padding: 20px @padding-sm;
+            padding-bottom: 0;
+        }
+        .vtx-form-pane-title {
+            padding: 0 @padding-sm;
+        }
+    }
+    &-has-card {
+        padding: 0;
+        .vtx-form-tabs .ant-tabs-bar {
+            padding: 0 @padding-lg;
+        }
+    }
+    &-view {
+        .vtx-form-item-col {
+            margin-bottom: @view-item-margin-bottom;
+        }
+        .vtx-form-divider {
+            margin-bottom: @view-item-margin-bottom;
+        }
+    }
+}

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

@@ -0,0 +1,46 @@
+.center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -ms-transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+.vtx-image-aspectFit {
+  position: relative;
+  height: 100%;
+  min-height: 36px;
+  background: #595959;
+}
+.vtx-image-aspectFit img {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -ms-transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  max-width: 100%;
+  max-height: 100%;
+}
+.vtx-image-preview img {
+  cursor: pointer;
+}
+.vtx-image-nodata,
+.vtx-image-error {
+  position: relative;
+  height: 100%;
+  min-height: 36px;
+  background: #fbfbfb;
+  border: 1px solid #f0f0f0;
+  cursor: default;
+}
+.vtx-image-nodata p,
+.vtx-image-error p {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -ms-transform: translate(-50%, -50%);
+  -webkit-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+  color: rgba(0, 0, 0, 0.45);
+}

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

@@ -0,0 +1,63 @@
+@import (reference) '~antd/lib/style/themes/index.less';
+
+@prefix-cls: vtx-image;
+@min-height: 36px;
+@aspectFit-background: #595959;
+
+.center {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    -ms-transform: translate(-50%, -50%);
+    -o-transform: translate(-50%, -50%);
+    -moz-transform: translate(-50%, -50%);
+    -webkit-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+}
+
+.@{prefix-cls} {
+    &-aspectFit {
+        position: relative;
+        height: 100%;
+        min-height: @min-height;
+        background: @aspectFit-background;
+        img {
+            .center();
+            max-width: 100%;
+            max-height: 100%;
+        }
+    }
+    &-preview {
+        img {
+            cursor: pointer;
+        }
+    }
+    &-nodata,
+    &-error {
+        position: relative;
+        height: 100%;
+        min-height: @min-height;
+        background: @table-expanded-row-bg;
+        border: @border-width-base @border-style-base @border-color-split;
+        cursor: default;
+        p {
+            .center();
+            color: @text-color-secondary;
+        }
+    }
+}
+.@{prefix-cls} when(@theme=dark) {
+    &-nodata,
+    &-error {
+        position: relative;
+        height: 100%;
+        min-height: @min-height;
+        background: @aspectFit-background;
+        border: @border-width-base @border-style-base @border-color-split;
+        cursor: default;
+        p {
+            .center();
+            color: @text-color-secondary;
+        }
+    }
+}

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

@@ -0,0 +1,3 @@
+.vtx-datagrid-modal {
+  background-color: '#f8f8f8';
+}

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

@@ -0,0 +1,8 @@
+@import (reference) '~antd/lib/style/themes/index.less';
+@prefix-cls: vtx-datagrid;
+
+.@{prefix-cls} when(@theme=default) {
+    &-modal {
+        background-color: '#f8f8f8';
+    }
+}

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

@@ -0,0 +1,22 @@
+.vtx-input-textarea {
+  position: relative;
+}
+.vtx-input-textarea::after {
+  position: absolute;
+  right: 12px;
+  bottom: 8px;
+  color: rgba(0, 0, 0, 0.45);
+  line-height: 1.5715;
+  white-space: nowrap;
+  content: attr(data-count);
+  pointer-events: none;
+}
+.ant-input {
+  resize: 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/lib/vtx-input/style/index.less

@@ -0,0 +1,24 @@
+@import (reference) '~antd/lib/style/themes/index.less';
+
+.vtx-input-textarea {
+    position: relative;
+    &::after {
+        position: absolute;
+        right: 12px;
+        bottom: 8px;
+        color: @text-color-secondary;
+        line-height: @line-height-base;
+        white-space: nowrap;
+        content: attr(data-count);
+        pointer-events: none;
+    }
+}
+.ant-input {
+    resize: none;
+}
+.ant-input-affix-wrapper .ant-input-suffix {
+    color: @text-color-secondary;
+}
+.ant-input-affix-wrapper .ant-input:not(:last-child) {
+    padding-right: 48px;
+}

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

@@ -0,0 +1,80 @@
+.vtx-modal-maxClass .ant-modal {
+  top: 0 !important;
+  left: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  padding-bottom: 0 !important;
+  overflow: hidden;
+}
+.vtx-modal-maxClass .ant-modal-body {
+  height: calc(100% - 108px) !important;
+}
+.vtx-modal .ant-modal {
+  top: 10%;
+  padding-bottom: 0;
+}
+.vtx-modal .ant-modal .ant-modal-content {
+  height: 100%;
+}
+.vtx-modal .ant-modal .ant-modal-content .ant-modal-body {
+  max-height: calc(100% - 108px);
+  padding: 20px 24px;
+  overflow: auto;
+}
+.vtx-modal .vtx-modal-title {
+  position: relative;
+  width: 100%;
+}
+.vtx-modal .vtx-modal-title .vtx-modal-title_name {
+  width: 100%;
+  color: #1890ff;
+}
+.vtx-modal .vtx-modal-title .vtx-modal-close,
+.vtx-modal .vtx-modal-title .vtx-modal-maximizeIcon {
+  position: absolute;
+  top: -13px;
+  right: -16px;
+}
+.vtx-modal .vtx-modal-title .vtx-modal-close p,
+.vtx-modal .vtx-modal-title .vtx-modal-maximizeIcon p {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 10;
+  display: inline-block;
+  width: 36px;
+  height: 48px;
+  color: rgba(0, 0, 0, 0.45);
+  font-weight: 700;
+  line-height: 48px;
+  text-align: center;
+  text-decoration: none;
+  background: transparent;
+  border: 0;
+  outline: 0;
+  cursor: pointer;
+  -webkit-transition: color 0.3s ease;
+  transition: color 0.3s ease;
+}
+.vtx-modal .vtx-modal-title .vtx-modal-close p:hover,
+.vtx-modal .vtx-modal-title .vtx-modal-maximizeIcon p:hover {
+  color: rgba(0, 0, 0, 0.75);
+  text-decoration: none;
+}
+.vtx-modal .vtx-modal-title .vtx-modal-maximizeIcon {
+  right: 20px;
+}
+.vtx-modal-header-title .vtx-modal-header-text {
+  font-weight: 400;
+}
+.vtx-modal-header-title .vtx-modal-header-text {
+  color: rgba(0, 0, 0, 0.65);
+}
+.vtx-modal-header-title .vtx-modal-header-text + .vtx-modal-header-subtitle::before {
+  margin: 0 4px;
+  font-weight: 400;
+  content: '>';
+}
+.vtx-modal-header-title .vtx-modal-header-text + .vtx-modal-header-subtitle::before {
+  color: rgba(0, 0, 0, 0.65);
+}

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

@@ -0,0 +1,95 @@
+@import (reference) '~antd/lib/style/themes/index.less';
+
+.vtx-modal-maxClass {
+    .ant-modal {
+        top: 0 !important;
+        left: 0 !important;
+        width: 100% !important;
+        height: 100% !important;
+        padding-bottom: 0 !important;
+        overflow: hidden;
+    }
+    .ant-modal-body {
+        height: e('calc(100% - 108px)') !important;
+    }
+}
+.vtx-modal {
+    .ant-modal {
+        top: 10%;
+        padding-bottom: 0;
+        .ant-modal-content {
+            height: 100%;
+            .ant-modal-body {
+                max-height: e('calc(100% - 108px)');
+                padding: 20px 24px;
+                overflow: auto;
+            }
+        }
+    }
+    .vtx-modal-title {
+        position: relative;
+        width: 100%;
+        .vtx-modal-title_name {
+            width: 100%;
+            color: @primary-color;
+        }
+        .vtx-modal-close,
+        .vtx-modal-maximizeIcon {
+            position: absolute;
+            top: -13px;
+            right: -16px;
+            p {
+                position: absolute;
+                top: 0;
+                right: 0;
+                z-index: 10;
+                display: inline-block;
+                width: 36px;
+                height: 48px;
+                color: @text-color-secondary;
+                font-weight: 700;
+                line-height: 48px;
+                text-align: center;
+                text-decoration: none;
+                background: transparent;
+                border: 0;
+                outline: 0;
+                cursor: pointer;
+                -webkit-transition: color 0.3s ease;
+                transition: color 0.3s ease;
+                &:hover {
+                    color: @icon-color-hover;
+                    text-decoration: none;
+                }
+            }
+        }
+        .vtx-modal-maximizeIcon {
+            right: 20px;
+        }
+    }
+}
+
+.vtx-modal-header-title {
+    .vtx-modal-header-text {
+        font-weight: 400;
+    }
+    .vtx-modal-header-text when(@theme=dark) {
+        color: @text-color;
+    }
+    .vtx-modal-header-text when(@theme=default) {
+        color: fade(@black, 65%);
+    }
+    .vtx-modal-header-text + .vtx-modal-header-subtitle {
+        &::before {
+            margin: 0 4px;
+            font-weight: 400;
+            content: '>';
+        }
+        &::before when(@theme=dark) {
+            color: @text-color;
+        }
+        &::before when(@theme=default) {
+            color: fade(@black, 65%);
+        }
+    }
+}

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

@@ -0,0 +1,115 @@
+.overflow-y {
+  overflow: hidden;
+  overflow-y: auto;
+}
+.vtx-page {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  font-size: 14px;
+}
+.vtx-page .ant-table-footer {
+  padding: 0 !important;
+}
+.vtx-page .vtx-ui-date-normal {
+  width: 100%;
+}
+.vtx-page .vtx-ui-grid-normal {
+  z-index: 999;
+}
+.vtx-page .ant-tabs {
+  height: 100%;
+}
+.vtx-page .ant-tabs-content {
+  height: calc(100% - 56px);
+}
+.vtx-page .ant-tabs-tabpane {
+  height: 100%;
+}
+.vtx-page .td {
+  position: relative;
+}
+.vtx-button-wrap button + button {
+  margin-left: 8px;
+}
+.vtx-content-absolute {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+.vtx-content-relative {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.vtx-content-scroll-y {
+  overflow: hidden;
+  overflow-y: auto;
+}
+.vtx-table-wrapper-absolute {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 0 5px;
+}
+.vtx-table-wrapper-relative {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  max-height: 500px;
+  padding: 0 5px;
+}
+.vtx-page--table {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 16px 20px 16px 20px;
+  overflow-x: hidden;
+  font-size: 14px;
+  background-color: #f0f2f5;
+}
+.vtx-table-search {
+  margin-bottom: 16px;
+  background: #fff;
+  border-radius: 2px;
+}
+.vtx-table-content {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  right: 20px;
+  bottom: 16px;
+  left: 20px;
+  -webkit-transition-duration: 0.3s;
+          transition-duration: 0.3s;
+  -webkit-transition-property: top;
+  transition-property: top;
+}
+.vtx-table-wrap {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 0 24px;
+  background-color: #fff;
+}
+.vtx-table-card {
+  background: #fff;
+  border-radius: 2px;
+}
+.vtx-table-left,
+.vtx-table-right {
+  height: 100%;
+  overflow: hidden;
+}
+.vtx-table-left .vtx-ztree-search {
+  right: 0;
+}