@cloud-app-dev/vidc 3.0.44 → 3.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/.umirc.ts +2 -104
  2. package/es/Map/MapDrawSelect/demo.js +16 -2
  3. package/es/Map/MapDrawSelect/index.js +5 -3
  4. package/es/Player/segment_player.js +23 -0
  5. package/es/ThemeAntd/demo.d.ts +2 -0
  6. package/es/ThemeAntd/demo.js +60 -0
  7. package/es/ThemeAntd/index.css +117 -133
  8. package/es/ThemeAntd/style/checkbox.css +17 -17
  9. package/es/ThemeAntd/style/input.css +23 -17
  10. package/es/ThemeAntd/style/pagination.css +22 -12
  11. package/es/ThemeAntd/style/picker.css +14 -14
  12. package/es/ThemeAntd/style/radio.css +24 -21
  13. package/es/ThemeAntd/style/select.css +17 -16
  14. package/package.json +1 -1
  15. package/theme-config.ts +107 -0
  16. package/es/ThemeAntd/style/table.css +0 -36
package/es/ThemeAntd/style/pagination.css CHANGED
@@ -11,34 +11,44 @@ div .cloudapp-pagination-jump-next {
11
11
  div .cloudapp-pagination-prev .cloudapp-pagination-item-link,
12
12
  div .cloudapp-pagination-next .cloudapp-pagination-item-link {
13
13
  border-radius: var(--redius1);
14
+ background-color: var(--form-bg);
15
+ border-color: var(--form-bd);
16
+ }
17
+ div .cloudapp-pagination-jump-prev .cloudapp-pagination-item-container .cloudapp-pagination-item-link-icon,
18
+ div .cloudapp-pagination-jump-next .cloudapp-pagination-item-container .cloudapp-pagination-item-link-icon {
19
+ color: var(--form-active-bg);
14
20
  }
15
21
  div .cloudapp-pagination-item {
16
22
  border-radius: var(--redius1);
23
+ background-color: var(--form-bg);
24
+ border-color: var(--form-bd);
17
25
  }
18
26
  div .cloudapp-pagination-item-active {
19
- border-color: var(--primary);
27
+ border-color: var(--form-active-bg);
28
+ background-color: var(--form-active-bg);
20
29
  }
21
30
  div .cloudapp-pagination-item-active a {
22
- color: var(--primary);
31
+ color: #fff;
23
32
  }
24
33
  div .cloudapp-pagination-item:focus,
25
34
  div .cloudapp-pagination-item:hover {
26
- border-color: var(--primary);
35
+ border-color: var(--form-active-bg);
36
+ background-color: var(--form-active-bg);
27
37
  }
28
38
  div .cloudapp-pagination-item:focus a,
29
39
  div .cloudapp-pagination-item:hover a {
30
- color: var(--primary);
40
+ color: #fff;
31
41
  }
32
- div .cloudapp-pagination-prev:focus .cloudapp-pagination-item-link,
33
- div .cloudapp-pagination-next:focus .cloudapp-pagination-item-link,
34
- div .cloudapp-pagination-prev:hover .cloudapp-pagination-item-link,
35
- div .cloudapp-pagination-next:hover .cloudapp-pagination-item-link {
36
- color: var(--primary);
37
- border-color: var(--primary);
42
+ div .cloudapp-pagination-prev:focus:not(.cloudapp-pagination-disabled) .cloudapp-pagination-item-link,
43
+ div .cloudapp-pagination-next:focus:not(.cloudapp-pagination-disabled) .cloudapp-pagination-item-link,
44
+ div .cloudapp-pagination-prev:hover:not(.cloudapp-pagination-disabled) .cloudapp-pagination-item-link,
45
+ div .cloudapp-pagination-next:hover:not(.cloudapp-pagination-disabled) .cloudapp-pagination-item-link {
46
+ background-color: var(--form-active-bg);
47
+ border-color: var(--form-active-bg);
48
+ color: #fff;
38
49
  }
39
50
  div .cloudapp-pagination-disabled .cloudapp-pagination-item-link,
40
51
  div .cloudapp-pagination-disabled:hover .cloudapp-pagination-item-link,
41
52
  div .cloudapp-pagination-disabled:focus .cloudapp-pagination-item-link {
42
- border-color: var(--gray8);
43
- color: var(--gray8);
53
+ border-color: var(--form-bd);
44
54
  }
package/es/ThemeAntd/style/picker.css CHANGED
@@ -1,31 +1,31 @@
1
1
  div .cloudapp-picker {
2
- background-color: var(--gray1);
2
+ background-color: var(--form-bg);
3
3
  border-radius: var(--radius1);
4
4
  color: inherit;
5
5
  }
6
6
  div .cloudapp-picker:hover,
7
7
  div .cloudapp-picker-focused {
8
- border-color: var(--primary);
8
+ border-color: var(--form-active-bg);
9
9
  }
10
10
  div .cloudapp-picker-suffix {
11
11
  color: inherit;
12
12
  }
13
13
  div .cloudapp-picker-panel {
14
- background-color: var(--gray1);
15
- border-color: var(--gray3);
14
+ background-color: var(--form-bg);
15
+ border-color: var(--form-bd);
16
16
  }
17
17
  div .cloudapp-picker-panel .cloudapp-picker-footer {
18
- border-color: var(--gray3);
18
+ border-color: var(--form-bd);
19
19
  }
20
20
  div .cloudapp-picker-header {
21
- border-bottom-color: var(--gray3);
21
+ border-bottom-color: var(--form-bd);
22
22
  color: inherit;
23
23
  }
24
24
  div .cloudapp-picker-header button {
25
25
  color: inherit;
26
26
  }
27
27
  div .cloudapp-picker-panel-container {
28
- background-color: var(--gray1);
28
+ background-color: var(--form-bg);
29
29
  }
30
30
  div .cloudapp-picker-dropdown {
31
31
  color: inherit;
@@ -43,7 +43,7 @@ div .cloudapp-picker-content th {
43
43
  color: inherit;
44
44
  }
45
45
  div .cloudapp-picker-today-btn {
46
- color: var(--primary);
46
+ color: var(--form-active-bg);
47
47
  }
48
48
  div .cloudapp-picker-cell .cloudapp-picker-cell-inner {
49
49
  border-radius: var(--radius1);
@@ -53,26 +53,26 @@ div .cloudapp-picker-cell-in-view.cloudapp-picker-cell-today .cloudapp-picker-ce
53
53
  }
54
54
  div .cloudapp-picker-cell:hover:not(.cloudapp-picker-cell-in-view) .cloudapp-picker-cell-inner,
55
55
  div .cloudapp-picker-cell:hover:not(.cloudapp-picker-cell-selected):not(.cloudapp-picker-cell-range-start):not(.cloudapp-picker-cell-range-end):not(.cloudapp-picker-cell-range-hover-start):not(.cloudapp-picker-cell-range-hover-end) .cloudapp-picker-cell-inner {
56
- background-color: var(--form-bg-dark);
56
+ background-color: var(--form-bg);
57
57
  }
58
58
  div .cloudapp-picker-input > input {
59
59
  color: inherit;
60
60
  }
61
61
  div .cloudapp-picker-range-arrow::after {
62
- border-color: var(--gray1);
62
+ border-color: var(--form-bd);
63
63
  }
64
64
  div .cloudapp-picker-cell-in-view.cloudapp-picker-cell-selected .cloudapp-picker-cell-inner,
65
65
  div .cloudapp-picker-cell-in-view.cloudapp-picker-cell-range-start .cloudapp-picker-cell-inner,
66
66
  div .cloudapp-picker-cell-in-view.cloudapp-picker-cell-range-end .cloudapp-picker-cell-inner {
67
- background-color: var(--primary);
67
+ background-color: var(--form-active-bg);
68
68
  }
69
69
  div .cloudapp-picker-cell-in-view.cloudapp-picker-cell-range-start:not(.cloudapp-picker-cell-range-start-single)::before,
70
70
  div .cloudapp-picker-cell-in-view.cloudapp-picker-cell-range-end:not(.cloudapp-picker-cell-range-end-single)::before {
71
- background-color: var(--primary);
71
+ background-color: var(--form-active-bg);
72
72
  opacity: 0.8;
73
73
  }
74
74
  div .cloudapp-picker-cell-in-view.cloudapp-picker-cell-in-range::before {
75
- background-color: var(--primary);
75
+ background-color: var(--form-active-bg);
76
76
  opacity: 0.8;
77
77
  }
78
78
  div .cloudapp-picker-focused .cloudapp-picker-separator {
@@ -82,5 +82,5 @@ div .cloudapp-picker-separator {
82
82
  color: inherit;
83
83
  }
84
84
  div .cloudapp-picker-range .cloudapp-picker-active-bar {
85
- background-color: var(--primary);
85
+ background-color: var(--form-active-bg);
86
86
  }
package/es/ThemeAntd/style/radio.css CHANGED
@@ -2,38 +2,38 @@ div .cloudapp-radio-button-wrapper {
2
2
  outline: unset;
3
3
  }
4
4
  div .cloudapp-radio-button-wrapper-checked:not(.cloudapp-radio-button-wrapper-disabled):hover {
5
- border-color: var(--primary);
6
- color: var(--primary);
5
+ border-color: var(--form-active-bg);
6
+ color: var(--form-active-bg);
7
7
  }
8
8
  div .cloudapp-radio-button-wrapper-checked:not(.cloudapp-radio-button-wrapper-disabled) {
9
- border-color: var(--primary);
10
- color: var(--primary);
11
- box-shadow: -1px 0 0 0 var(--primary);
9
+ border-color: var(--form-active-bg);
10
+ color: var(--form-active-bg);
11
+ box-shadow: -1px 0 0 0 var(--form-active-bg);
12
12
  }
13
13
  div .cloudapp-radio-button-wrapper-checked:not(.cloudapp-radio-button-wrapper-disabled):first-child {
14
- border-color: var(--primary);
14
+ border-color: var(--form-active-bg);
15
15
  }
16
16
  div .cloudapp-radio-disabled .cloudapp-radio-inner::after {
17
- background-color: var(--gray3);
17
+ background-color: var(--form-bg);
18
18
  }
19
19
  div .cloudapp-radio-disabled .cloudapp-radio-inner {
20
- background-color: var(--gray1);
20
+ background-color: var(--form-bg);
21
21
  opacity: 0.8;
22
22
  }
23
23
  div .cloudapp-radio-button-wrapper:hover {
24
- color: var(--primary);
24
+ color: var(--form-active-bg);
25
25
  }
26
26
  div .cloudapp-radio-checked .cloudapp-radio-inner {
27
- border-color: var(--primary);
27
+ border-color: var(--form-active-bg);
28
28
  }
29
29
  div .cloudapp-radio-inner {
30
- background-color: var(--gray1);
30
+ background-color: var(--form-bg);
31
31
  }
32
32
  div .cloudapp-radio-inner::after {
33
- background-color: var(--primary);
33
+ background-color: var(--form-active-bg);
34
34
  }
35
35
  div .cloudapp-radio-checked::after {
36
- border-color: var(--primary);
36
+ border-color: var(--form-active-bg);
37
37
  }
38
38
  div .cloudapp-radio-wrapper {
39
39
  color: inherit;
@@ -45,23 +45,23 @@ div .cloudapp-radio-disabled + span {
45
45
  div .cloudapp-radio-wrapper:hover .cloudapp-radio,
46
46
  div .cloudapp-radio:hover .cloudapp-radio-inner,
47
47
  div .cloudapp-radio-input:focus + .cloudapp-radio-inner {
48
- border-color: var(--primary);
48
+ border-color: var(--form-active-bg);
49
49
  }
50
50
  div .cloudapp-radio-button-wrapper-checked:not(.cloudapp-radio-button-wrapper-disabled)::before {
51
- background-color: var(--primary) !important;
51
+ background-color: var(--form-active-bg) !important;
52
52
  opacity: unset;
53
53
  }
54
54
  div .cloudapp-radio-group-solid .cloudapp-radio-button-wrapper-checked:not(.cloudapp-radio-button-wrapper-disabled) {
55
- background-color: var(--primary);
56
- border-color: var(--primary);
55
+ background-color: var(--form-active-bg);
56
+ border-color: var(--form-active-bg);
57
57
  }
58
58
  div .cloudapp-radio-group-solid .cloudapp-radio-button-wrapper-checked:not(.cloudapp-radio-button-wrapper-disabled):hover {
59
- background-color: var(--primary-dark);
60
- border-color: var(--primary-dark);
61
- box-shadow: -1px 0 0 0 var(--primary);
59
+ background-color: var(--form-active-bg-dark);
60
+ border-color: var(--form-active-bg-dark);
61
+ box-shadow: -1px 0 0 0 var(--form-active-bg);
62
62
  }
63
63
  div .cloudapp-radio-button-wrapper-checked:not([class*=' cloudapp-radio-button-wrapper-disabled']).cloudapp-radio-button-wrapper:first-child {
64
- border-right-color: var(--primary);
64
+ border-right-color: var(--form-active-bg);
65
65
  }
66
66
  div .cloudapp-radio-button-wrapper:last-child {
67
67
  border-radius: 0 var(--form-redius) var(--form-redius) 0;
@@ -69,3 +69,6 @@ div .cloudapp-radio-button-wrapper:last-child {
69
69
  div .cloudapp-radio-button-wrapper:first-child {
70
70
  border-radius: var(--form-redius) 0 0 var(--redius1);
71
71
  }
72
+ div .cloudapp-radio-input:focus + .cloudapp-radio-inner {
73
+ box-shadow: unset;
74
+ }
package/es/ThemeAntd/style/select.css CHANGED
@@ -1,32 +1,32 @@
1
1
  div .cloudapp-select-single:not(.cloudapp-select-customize-input) .cloudapp-select-selector {
2
2
  border-radius: var(--redius1);
3
- border-color: var(--gray3);
4
- background-color: var(--gray1);
3
+ border-color: var(--form-bd);
4
+ background-color: var(--form-bg);
5
5
  }
6
6
  div .cloudapp-select-multiple .cloudapp-select-selector {
7
7
  border-radius: var(--redius1);
8
- border-color: var(--gray3);
9
- background-color: var(--gray1);
8
+ border-color: var(--form-bd);
9
+ background-color: var(--form-bg);
10
10
  }
11
11
  div .cloudapp-select-multiple .cloudapp-select-selection-item {
12
12
  border-radius: var(--redius1);
13
- border-color: var(--gray3);
14
- background-color: var(--gray1);
13
+ border-color: var(--form-bd);
14
+ background-color: var(--form-bg);
15
15
  }
16
16
  div .cloudapp-select:not(.cloudapp-select-disabled):hover .cloudapp-select-selector {
17
- border-color: var(--primary);
17
+ border-color: var(--form-active-bg);
18
18
  }
19
19
  div .cloudapp-select-focused.cloudapp-select-single:not(.cloudapp-select-customize-input) .cloudapp-select-selector {
20
- border-color: var(--primary);
20
+ border-color: var(--form-active-bg);
21
21
  }
22
22
  div .cloudapp-select-focused.cloudapp-select-multiple .cloudapp-select-selector {
23
- border-color: var(--primary);
23
+ border-color: var(--form-active-bg);
24
24
  }
25
25
  div .cloudapp-select-multiple .cloudapp-select-selection-item-remove {
26
26
  color: inherit;
27
27
  }
28
28
  div .cloudapp-select-multiple .cloudapp-select-selection-item-remove:hover {
29
- color: var(--primary);
29
+ color: var(--form-active-bg);
30
30
  }
31
31
  div .cloudapp-select {
32
32
  color: inherit;
@@ -36,22 +36,23 @@ div .cloudapp-select-arrow {
36
36
  color: inherit;
37
37
  }
38
38
  div .cloudapp-select-dropdown {
39
- background-color: var(--gray1);
39
+ background-color: var(--form-bg);
40
40
  color: inherit;
41
41
  }
42
42
  div .cloudapp-select-item {
43
43
  color: inherit;
44
44
  }
45
45
  div .cloudapp-select-item-option-active:not(.cloudapp-select-item-option-disabled) {
46
- background-color: var(--form-bg-dark);
46
+ background-color: var(--form-bg);
47
47
  }
48
48
  div .cloudapp-select-item-option-selected:not(.cloudapp-select-item-option-disabled) .cloudapp-select-item-option-state {
49
- color: var(--primary);
49
+ color: var(--form-active-bg);
50
50
  }
51
51
  div .cloudapp-select-item-option-selected:not(.cloudapp-select-item-option-disabled) {
52
- color: var(--primary);
53
- background-color: var(--gray8);
52
+ color: var(--form-active-bg);
53
+ background-color: transparent;
54
54
  }
55
55
  div .cloudapp-select-focused:not(.cloudapp-select-disabled).cloudapp-select-single:not(.cloudapp-select-customize-input) .cloudapp-select-selector {
56
- border-color: var(--primary);
56
+ border-color: var(--form-active-bg);
57
+ box-shadow: unset;
57
58
  }
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "private": false,
3
3
  "name": "@cloud-app-dev/vidc",
4
4
  "description": "Video Image Data Componennts",
5
- "version": "3.0.44",
5
+ "version": "3.1.0",
6
6
  "scripts": {
7
7
  "start": "dumi dev",
8
8
  "docs:build": "dumi build",
package/theme-config.ts ADDED
@@ -0,0 +1,107 @@
1
+ export const themeConfig = `
2
+ :root{
3
+ --primary: #248FFA;
4
+ --primary-light: #248FFA;
5
+ --primary-dark: #227BD5;
6
+ --secondary1: #6D8EFB;
7
+ --secondary1-light: #86A2FF;
8
+ --secondary1-dark: #5D7FF0;
9
+ --secondary2: #33AAFF;
10
+ --secondary2-light: #61BDFF;
11
+ --secondary2-dark: #2194E5;
12
+ --secondary3: #F3A75F;
13
+ --secondary3-light: #F8B578;
14
+ --secondary3-dark: #DC914C;
15
+ --danger: #F32D37;
16
+ --danger-light: #FF4D4F;
17
+ --danger-dark: #DC1B2A;
18
+ --warn: #FD8535;
19
+ --warn-light: #FF9F5E;
20
+ --warn-dark: #DC1B2A;
21
+ --success: #35BD77;
22
+ --success-light: #55C98D;
23
+ --success-dark: #21965A;
24
+ --gray1: #FFFFFF;
25
+ --gray2: #F3F3F3;
26
+ --gray3: #EEEEEE;
27
+ --gray4: #E7E7E7;
28
+ --gray5: #DCDCDC;
29
+ --gray6: #C5C5C5;
30
+ --gray7: #A6A6A6;
31
+ --gray8: #8B8B8B;
32
+ --gray9: #777777;
33
+ --gray10: #5E5E5E;
34
+ --gray11: #4B4B4B;
35
+ --gray12: #383838;
36
+ --background: #348fe2;
37
+ --content-bg: #ffffff;
38
+ --form-bg:#fff;
39
+ --form-bd:#eee;
40
+ --form-active-bg:#248FFA;
41
+ --icon:#62708B;
42
+ --fs: 14px;
43
+ --fs-small: 12px;
44
+ --fs-large: 20px;
45
+ --color: rgba(0,0,0,1);
46
+ --color-dark: #000000;
47
+ --color-light: rgba(255,255,255,1);
48
+ --color-disabled: rgba(0,0,0,0.26);
49
+ --shadow1: 2px 0 10px 0 rgba(0,0,0,0.06);
50
+ --shadow2: 2px 0 10px 0 rgba(0,0,0,0.06);
51
+ --shadow3: 2px 0 10px 0 rgba(0,0,0,0.06);
52
+ --radius1: 4px;
53
+ --radius2: 8px;
54
+ --radius3: 16px;
55
+ --header-color: #FFFFFF;
56
+ --header-bg: #348fe2;
57
+ --header-height: 66px;
58
+ --nav-height: 66px;
59
+ --nav-bg: #348fe2;
60
+ --nav-sub-bg: rgba(255,255,255,1);
61
+ --nav-sub-bg2: rgba(241,244,247,0.8);
62
+ --nav-item-bg-selected: #FFFFFF;
63
+ --nav-item-color: #FFFFFF;
64
+ --nav-icon-color: rgba(255, 255, 255, 0.4);
65
+ --nav-icon-color-selected: #3495EF;
66
+ --nav-item-bg: #348fe2;
67
+ --nav-item-color-selected: rgba(0, 0, 0, 0.9);
68
+ --nav-sub-item-bg-selected: #F3F5F6;
69
+ --nav-sub-item-color-selected: #348fe2;
70
+ --nav-sub-item-color: rgba(0, 0, 0, 0.9);
71
+ --nav-bd-color: rgba(0,0,0,0);
72
+ --tab-height: 34px;
73
+ --tab-bg: #348fe2;
74
+ --tab-item-bg: #348fe2;
75
+ --tab-item-height: 34px;
76
+ --tab-item-color: #FFFFFF;
77
+ --tab-item-selected-bg: #F3F5F6;
78
+ --tab-item-selected-color: rgba(0, 0, 0, 0.9);
79
+ --drawer-title-height: 48px;
80
+ --drawer-title-bg: rgba(255,255,255,1);
81
+ --drawer-divider-color: rgba(219,225,234,1);
82
+ --drawer-footer-height: 44px;
83
+ --drawer-footer-bg: rgba(255,255,255,1);
84
+ --drawer-content-bg: rgba(243,246,249,1);
85
+ --modal-title-height: 44px;
86
+ --modal-title-bg: #ffffff;
87
+ --modal-divider-color: rgba(219,225,234,1);
88
+ --modal-footer-height: 44px;
89
+ --modal-footer-bg: rgba(243,246,249,1);
90
+ --modal-content-bg: rgba(243,246,249,1);
91
+ --card-image-radius: 4px;
92
+ --card-image-bg: rgba(219,225,234,1);
93
+ --card-radius: 4px;
94
+ --card-content-bg: rgba(255,255,255,1);
95
+ --card-shadow: 0 0 4px 0 rgba(0,0,0,0.2);
96
+ --card-bd-color: rgba(219,225,234,1);
97
+ --card-hover-bd-color: rgba(18,122,255,1);
98
+ --card-footer-bg: rgba(219,225,234,1);
99
+
100
+ --scrollbar-width: 8px;
101
+ --scrollbar-track-bg: rgba(239,241,244,1);
102
+ --scrollbar-thumb-bg: rgba(185,193,203,1);
103
+ --scrollbar-thumb-hover-bg: rgba(195,209,229,1);
104
+ --scrollbar-track-shadow: 0 0 3px 0 rgba(255, 255, 255, 0.1) inset;
105
+ --scrollbar-thumb-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3) inset;
106
+ }
107
+ `;
package/es/ThemeAntd/style/table.css DELETED
@@ -1,36 +0,0 @@
1
- div .cloudapp-table {
2
- background-color: var(--table-bg);
3
- color: inherit;
4
- font-size: var(--fs);
5
- }
6
- div .cloudapp-table-tbody > tr.cloudapp-table-row:hover > td {
7
- background: var(--table-row-hover-color);
8
- }
9
- div .cloudapp-table-thead > tr > th:not(.cloudapp-table-cell-scrollbar) {
10
- background-color: var(--table-head-bg);
11
- border-bottom-color: var(--table-bd);
12
- color: inherit;
13
- }
14
- div .cloudapp-table-thead > tr > th.cloudapp-table-cell-scrollbar {
15
- box-shadow: none;
16
- background-color: var(--table-head-bg);
17
- }
18
- div .cloudapp-table-cell-fix-left,
19
- div .cloudapp-table-cell-fix-right {
20
- background-color: var(--table-bg);
21
- }
22
- div .cloudapp-table-tbody > tr > td {
23
- border-bottom-color: var(--table-bd);
24
- }
25
- div tr.cloudapp-table-expanded-row > td,
26
- div tr.cloudapp-table-expanded-row:hover > td {
27
- background-color: var(--table-row-hover-color);
28
- }
29
- div .cloudapp-table-row-expand-icon {
30
- border-radius: var(--redius1);
31
- color: var(--primary);
32
- }
33
- div .cloudapp-table-row-expand-icon:focus,
34
- div .cloudapp-table-row-expand-icon:hover {
35
- color: var(--primary-dark);
36
- }