@cmstops/pro-compo 0.3.24 → 0.3.26

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 (35) hide show
  1. package/dist/index.css +52 -45
  2. package/dist/index.min.css +1 -1
  3. package/es/index.css +52 -45
  4. package/es/index.d.ts +1 -1
  5. package/es/index.js +1 -1
  6. package/es/index.less +1 -1
  7. package/es/{mediaGridList → resourceGridList}/component.js +41 -30
  8. package/es/{mediaGridList → resourceGridList}/components/FileTypeThumb/index.js +1 -1
  9. package/es/resourceGridList/index.d.ts +2 -0
  10. package/es/{mediaGridList → resourceGridList}/index.js +2 -2
  11. package/es/{mediaGridList → resourceGridList}/style/FileTypeThumb.less +5 -4
  12. package/es/{mediaGridList → resourceGridList}/style/index.css +49 -43
  13. package/es/{mediaGridList → resourceGridList}/style/index.less +6 -0
  14. package/es/resourceModal/style/FileTypeThumb.less +3 -2
  15. package/es/resourceModal/style/index.css +3 -2
  16. package/lib/index.css +52 -45
  17. package/lib/index.js +2 -2
  18. package/lib/index.less +1 -1
  19. package/lib/{mediaGridList → resourceGridList}/component.js +40 -29
  20. package/lib/{mediaGridList → resourceGridList}/components/FileTypeThumb/index.js +1 -1
  21. package/lib/{mediaGridList → resourceGridList}/index.js +2 -2
  22. package/lib/{mediaGridList → resourceGridList}/style/FileTypeThumb.less +5 -4
  23. package/lib/{mediaGridList → resourceGridList}/style/index.css +49 -43
  24. package/lib/{mediaGridList → resourceGridList}/style/index.less +6 -0
  25. package/lib/resourceModal/style/FileTypeThumb.less +3 -2
  26. package/lib/resourceModal/style/index.css +3 -2
  27. package/package.json +1 -1
  28. package/es/mediaGridList/index.d.ts +0 -2
  29. /package/es/{mediaGridList → resourceGridList}/component.d.ts +0 -0
  30. /package/es/{mediaGridList → resourceGridList}/components/FileTypeThumb/index.d.ts +0 -0
  31. /package/es/{mediaGridList → resourceGridList}/style/css.js +0 -0
  32. /package/es/{mediaGridList → resourceGridList}/style/index.d.ts +0 -0
  33. /package/es/{mediaGridList → resourceGridList}/style/index.js +0 -0
  34. /package/lib/{mediaGridList → resourceGridList}/style/css.js +0 -0
  35. /package/lib/{mediaGridList → resourceGridList}/style/index.js +0 -0
@@ -187,6 +187,12 @@
187
187
  line-height: 1em;
188
188
  opacity: 0.65;
189
189
  }
190
+
191
+ .menu-wrap {
192
+ position: absolute;
193
+ right: 10px;
194
+ bottom: 10px;
195
+ }
190
196
  }
191
197
  }
192
198
 
@@ -59,8 +59,9 @@
59
59
 
60
60
  .tag {
61
61
  position: absolute;
62
- top: 8px;
63
- left: 5px;
62
+ display: flex;
63
+ align-items: center;
64
+ justify-content: center;
64
65
  padding: 2px 8px;
65
66
  color: white;
66
67
  font-size: 12px;
@@ -379,8 +379,9 @@
379
379
  }
380
380
  .file-type-thumb .tag {
381
381
  position: absolute;
382
- top: 8px;
383
- left: 5px;
382
+ display: flex;
383
+ align-items: center;
384
+ justify-content: center;
384
385
  padding: 2px 8px;
385
386
  color: white;
386
387
  font-size: 12px;
package/lib/index.css CHANGED
@@ -887,8 +887,9 @@
887
887
  }
888
888
  .file-type-thumb .tag {
889
889
  position: absolute;
890
- top: 8px;
891
- left: 5px;
890
+ display: flex;
891
+ align-items: center;
892
+ justify-content: center;
892
893
  padding: 2px 8px;
893
894
  color: white;
894
895
  font-size: 12px;
@@ -3894,14 +3895,14 @@
3894
3895
  padding: 0 2px;
3895
3896
  border: none;
3896
3897
  }
3897
- .file-type-thumb {
3898
+ .resource-grid-file-type-thumb {
3898
3899
  position: relative;
3899
3900
  width: 100%;
3900
3901
  }
3901
- .file-type-thumb:hover .mask {
3902
+ .resource-grid-file-type-thumb:hover .mask {
3902
3903
  display: flex;
3903
3904
  }
3904
- .file-type-thumb .mask {
3905
+ .resource-grid-file-type-thumb .mask {
3905
3906
  position: absolute;
3906
3907
  top: 0;
3907
3908
  display: none;
@@ -3913,56 +3914,57 @@
3913
3914
  font-size: 18px;
3914
3915
  background: rgba(0, 0, 0, 0.3);
3915
3916
  }
3916
- .file-type-thumb .mask i {
3917
+ .resource-grid-file-type-thumb .mask i {
3917
3918
  display: inline-block;
3918
3919
  cursor: pointer;
3919
3920
  }
3920
- .file-type-thumb .mask i:active {
3921
+ .resource-grid-file-type-thumb .mask i:active {
3921
3922
  opacity: 0.4;
3922
3923
  }
3923
- .file-type-thumb .mask .half {
3924
+ .resource-grid-file-type-thumb .mask .half {
3924
3925
  display: flex;
3925
3926
  align-items: center;
3926
3927
  justify-content: center;
3927
3928
  width: 48%;
3928
3929
  height: 100%;
3929
3930
  }
3930
- .file-type-thumb .mask .half:hover {
3931
+ .resource-grid-file-type-thumb .mask .half:hover {
3931
3932
  cursor: pointer;
3932
3933
  opacity: 0.7;
3933
3934
  }
3934
- .file-type-thumb .mask .el-divider {
3935
+ .resource-grid-file-type-thumb .mask .el-divider {
3935
3936
  margin: 0;
3936
3937
  opacity: 0.4;
3937
3938
  }
3938
- .file-type-thumb .transparent {
3939
+ .resource-grid-file-type-thumb .transparent {
3939
3940
  position: absolute;
3940
3941
  top: 0;
3941
3942
  width: 100%;
3942
3943
  height: 100%;
3943
3944
  }
3944
- .file-type-thumb .transparent:hover {
3945
+ .resource-grid-file-type-thumb .transparent:hover {
3945
3946
  cursor: pointer;
3946
3947
  }
3947
- .file-type-thumb .tag {
3948
+ .resource-grid-file-type-thumb .tag {
3948
3949
  position: absolute;
3949
- top: 8px;
3950
- left: 5px;
3950
+ display: flex;
3951
+ align-items: center;
3952
+ justify-content: center;
3951
3953
  padding: 2px 8px;
3952
3954
  color: white;
3953
3955
  font-size: 12px;
3954
- background-color: rgba(#000, #000, #000, 0.4);
3956
+ background-color: rgba(0, 0, 0, 0.2);
3955
3957
  border-radius: 12px;
3956
3958
  }
3957
- .file-type-thumb .rate-info-tag {
3959
+ .resource-grid-file-type-thumb .rate-info-tag {
3958
3960
  top: 8px;
3959
3961
  left: 5px;
3960
3962
  }
3961
- .file-type-thumb .ai-tag {
3963
+ .resource-grid-file-type-thumb .ai-tag {
3962
3964
  top: 8px;
3963
3965
  right: 5px;
3964
3966
  }
3965
- .file-type-thumb .pic {
3967
+ .resource-grid-file-type-thumb .pic {
3966
3968
  width: 100%;
3967
3969
  padding-top: 56.25%;
3968
3970
  background-color: #fff;
@@ -3972,83 +3974,83 @@
3972
3974
  background-position: top;
3973
3975
  background-size: cover;
3974
3976
  }
3975
- .file-type-thumb .pic:hover {
3977
+ .resource-grid-file-type-thumb .pic:hover {
3976
3978
  transform: scale(1.02);
3977
3979
  transition: ease-out 0.4s;
3978
3980
  }
3979
- .file-type-thumb .audio {
3981
+ .resource-grid-file-type-thumb .audio {
3980
3982
  background-image: url('../assets/images/music.png') !important;
3981
3983
  }
3982
- .file-type-thumb .audio.doc {
3984
+ .resource-grid-file-type-thumb .audio.doc {
3983
3985
  background-image: url('../assets/images/draf.png') !important;
3984
3986
  }
3985
- .file-type-thumb .project {
3987
+ .resource-grid-file-type-thumb .project {
3986
3988
  background-image: url('../assets/images/project1.png') !important;
3987
3989
  }
3988
- .file-type-thumb .doc {
3990
+ .resource-grid-file-type-thumb .doc {
3989
3991
  background-image: url('../assets/images/draf.png');
3990
3992
  }
3991
- .file-type-thumb .link {
3993
+ .resource-grid-file-type-thumb .link {
3992
3994
  background-image: url('../assets/images/link.png');
3993
3995
  }
3994
- .file-type-thumb .sp_topic {
3996
+ .resource-grid-file-type-thumb .sp_topic {
3995
3997
  background-image: url('../assets/images/link.png');
3996
3998
  }
3997
- .file-type-thumb .live {
3999
+ .resource-grid-file-type-thumb .live {
3998
4000
  background-image: url('../assets/images/live.png');
3999
4001
  }
4000
- .file-type-thumb .pdf {
4002
+ .resource-grid-file-type-thumb .pdf {
4001
4003
  background-image: url('../assets/images/pdf.png') !important;
4002
4004
  }
4003
- .file-type-thumb .officeexcel {
4005
+ .resource-grid-file-type-thumb .officeexcel {
4004
4006
  background-image: url('../assets/images/excel.png') !important;
4005
4007
  }
4006
- .file-type-thumb .officeppt {
4008
+ .resource-grid-file-type-thumb .officeppt {
4007
4009
  background-image: url('../assets/images/ppt.png') !important;
4008
4010
  }
4009
- .file-type-thumb .zip {
4011
+ .resource-grid-file-type-thumb .zip {
4010
4012
  background-image: url('../assets/images/zip.png') !important;
4011
4013
  }
4012
- .file-type-thumb .rar {
4014
+ .resource-grid-file-type-thumb .rar {
4013
4015
  background-image: url('../assets/images/rar.png') !important;
4014
4016
  }
4015
- .file-type-thumb .txt {
4017
+ .resource-grid-file-type-thumb .txt {
4016
4018
  background-image: url('../assets/images/txt.png') !important;
4017
4019
  }
4018
- .file-type-thumb .exe {
4020
+ .resource-grid-file-type-thumb .exe {
4019
4021
  background-image: url('../assets/images/exe.png') !important;
4020
4022
  }
4021
- .file-type-thumb .html {
4023
+ .resource-grid-file-type-thumb .html {
4022
4024
  background-image: url('../assets/images/html.png') !important;
4023
4025
  }
4024
- .file-type-thumb .officedoc {
4026
+ .resource-grid-file-type-thumb .officedoc {
4025
4027
  background-image: url('../assets/images/word.png') !important;
4026
4028
  }
4027
- .file-type-thumb .wechat {
4029
+ .resource-grid-file-type-thumb .wechat {
4028
4030
  background-image: url('../assets/images/wechat.png') !important;
4029
4031
  }
4030
- .file-type-thumb .h5 {
4032
+ .resource-grid-file-type-thumb .h5 {
4031
4033
  background-image: url('../assets/images/h5.png') !important;
4032
4034
  }
4033
- .file-type-thumb .ad {
4035
+ .resource-grid-file-type-thumb .ad {
4034
4036
  background-image: url('../assets/images/ad.png') !important;
4035
4037
  }
4036
- .file-type-thumb .booklink {
4038
+ .resource-grid-file-type-thumb .booklink {
4037
4039
  background-image: url('../assets/images/booklink.png') !important;
4038
4040
  }
4039
- .file-type-thumb .activity {
4041
+ .resource-grid-file-type-thumb .activity {
4040
4042
  background-image: url('../assets/images/activity.png') !important;
4041
4043
  }
4042
- .file-type-thumb .svideo {
4044
+ .resource-grid-file-type-thumb .svideo {
4043
4045
  background-image: url('../assets/images/svideo.png') !important;
4044
4046
  }
4045
- .file-type-thumb .cloud_lottery {
4047
+ .resource-grid-file-type-thumb .cloud_lottery {
4046
4048
  background-image: url('../assets/images/cloud_lottery.png') !important;
4047
4049
  }
4048
- .file-type-thumb .cloud_form {
4050
+ .resource-grid-file-type-thumb .cloud_form {
4049
4051
  background-image: url('../assets/images/cloud_form.png') !important;
4050
4052
  }
4051
- .file-type-thumb .illegal-media-warning {
4053
+ .resource-grid-file-type-thumb .illegal-media-warning {
4052
4054
  position: absolute;
4053
4055
  top: 0;
4054
4056
  width: 100%;
@@ -4228,6 +4230,11 @@
4228
4230
  line-height: 1em;
4229
4231
  opacity: 0.65;
4230
4232
  }
4233
+ .media-grid-list-scroll .file-wrap .file-list .item .shadow-wrap .menu-wrap {
4234
+ position: absolute;
4235
+ right: 10px;
4236
+ bottom: 10px;
4237
+ }
4231
4238
  .media-grid-list-scroll .file-wrap .file-list::after {
4232
4239
  height: 50px;
4233
4240
  }
package/lib/index.js CHANGED
@@ -22,7 +22,7 @@ var index$h = require("./editMetaInfo/index.js");
22
22
  var index$i = require("./baseFilter/index.js");
23
23
  var index$j = require("./dataTags/index.js");
24
24
  var index$k = require("./colorPalette/index.js");
25
- var index$l = require("./mediaGridList/index.js");
25
+ var index$l = require("./resourceGridList/index.js");
26
26
  var index$m = require("./mediaView/index.js");
27
27
  exports["default"] = components;
28
28
  exports.appCenter = index;
@@ -46,5 +46,5 @@ exports.editMetaInfo = index$h;
46
46
  exports.baseFilter = index$i;
47
47
  exports.dataTags = index$j;
48
48
  exports.colorPalette = index$k;
49
- exports.mediaGridList = index$l;
49
+ exports.resourceGridList = index$l;
50
50
  exports.mediaView = index$m;
package/lib/index.less CHANGED
@@ -20,5 +20,5 @@
20
20
  @import './baseFilter/style/index.less';
21
21
  @import './dataTags/style/index.less';
22
22
  @import './colorPalette/style/index.less';
23
- @import './mediaGridList/style/index.less';
23
+ @import './resourceGridList/style/index.less';
24
24
  @import './mediaView/style/index.less';
@@ -18,28 +18,30 @@ const _hoisted_7 = { class: "wrap" };
18
18
  const _hoisted_8 = { class: "thumb" };
19
19
  const _hoisted_9 = { class: "folder-more-wrap" };
20
20
  const _hoisted_10 = { class: "file-list clearfix" };
21
- const _hoisted_11 = { class: "thumb-wrap" };
22
- const _hoisted_12 = /* @__PURE__ */ vue.createElementVNode("div", { class: "transcoding-in-progress grid-mode" }, [
21
+ const _hoisted_11 = ["onClick"];
22
+ const _hoisted_12 = { class: "thumb-wrap" };
23
+ const _hoisted_13 = { class: "menu-wrap" };
24
+ const _hoisted_14 = /* @__PURE__ */ vue.createElementVNode("div", { class: "transcoding-in-progress grid-mode" }, [
23
25
  /* @__PURE__ */ vue.createElementVNode("div", { class: "transcoding-progress" }, "\u8F6C\u7801\u4E2D\u2026")
24
26
  ], -1);
25
- const _hoisted_13 = {
27
+ const _hoisted_15 = {
26
28
  key: 1,
27
29
  class: "load_more_title"
28
30
  };
29
- const _hoisted_14 = {
31
+ const _hoisted_16 = {
30
32
  key: 1,
31
33
  class: "nomore_tips"
32
34
  };
33
- const _hoisted_15 = {
35
+ const _hoisted_17 = {
34
36
  key: 2,
35
37
  class: "null-file"
36
38
  };
37
- const _hoisted_16 = /* @__PURE__ */ vue.createElementVNode("p", null, "\u6682\u65E0\u7D20\u6750", -1);
38
- const _hoisted_17 = [
39
- _hoisted_16
39
+ const _hoisted_18 = /* @__PURE__ */ vue.createElementVNode("p", null, "\u6682\u65E0\u7D20\u6750", -1);
40
+ const _hoisted_19 = [
41
+ _hoisted_18
40
42
  ];
41
43
  const _sfc_main = vue.defineComponent({
42
- ...{ name: "mediaGridList" },
44
+ ...{ name: "resourceGridList" },
43
45
  __name: "component",
44
46
  props: {
45
47
  folderList: {},
@@ -47,11 +49,9 @@ const _sfc_main = vue.defineComponent({
47
49
  fileListCount: {},
48
50
  isOver: { type: Boolean },
49
51
  showFolder: { type: Boolean },
50
- preview: { type: Boolean },
51
- changeDirectory: { type: Function },
52
- loadFileMore: { type: Function }
52
+ preview: { type: Boolean }
53
53
  },
54
- emits: ["confirm"],
54
+ emits: ["clickDir", "clickItem", "loadMore"],
55
55
  setup(__props, { emit: __emit }) {
56
56
  const props = __props;
57
57
  const isFold = vue.ref(true);
@@ -66,11 +66,17 @@ const _sfc_main = vue.defineComponent({
66
66
  { immediate: true }
67
67
  );
68
68
  const emit = __emit;
69
- const confirm = (itemData) => {
70
- selectedData.value = [itemData];
71
- emit("confirm", selectedData.value);
72
- };
73
69
  const selectedData = vue.ref([]);
70
+ const _changeDirectory = (item) => {
71
+ emit("clickDir", item);
72
+ };
73
+ const _clickFileItem = (item) => {
74
+ selectedData.value = [item];
75
+ emit("clickItem", item);
76
+ };
77
+ const _loadFileMore = () => {
78
+ emit("loadMore");
79
+ };
74
80
  return (_ctx, _cache) => {
75
81
  return vue.openBlock(), vue.createBlock(vue.unref(webVue.Scrollbar), { class: "media-grid-list-scroll" }, {
76
82
  default: vue.withCtx(() => {
@@ -84,7 +90,7 @@ const _sfc_main = vue.defineComponent({
84
90
  return vue.openBlock(), vue.createElementBlock("div", {
85
91
  key: index2,
86
92
  class: "item folder-item",
87
- onClick: ($event) => _ctx.changeDirectory(item)
93
+ onClick: ($event) => _changeDirectory(item)
88
94
  }, [
89
95
  vue.createElementVNode("div", _hoisted_4, [
90
96
  vue.createVNode(vue.unref(webVue.Tooltip), {
@@ -109,7 +115,7 @@ const _sfc_main = vue.defineComponent({
109
115
  return vue.openBlock(), vue.createElementBlock("div", {
110
116
  key: index2,
111
117
  class: "item folder-item",
112
- onClick: ($event) => _ctx.changeDirectory(item)
118
+ onClick: ($event) => _changeDirectory(item)
113
119
  }, [
114
120
  vue.createElementVNode("div", _hoisted_7, [
115
121
  vue.createVNode(vue.unref(webVue.Tooltip), {
@@ -151,13 +157,14 @@ const _sfc_main = vue.defineComponent({
151
157
  class: "item"
152
158
  }, [
153
159
  vue.createElementVNode("div", {
154
- class: vue.normalizeClass([{ active: selectedData.value.includes(item) }, "shadow-wrap"])
160
+ class: vue.normalizeClass([{ active: selectedData.value.includes(item) }, "shadow-wrap"]),
161
+ onClick: ($event) => _clickFileItem(item)
155
162
  }, [
156
- vue.createElementVNode("div", _hoisted_11, [
163
+ vue.createElementVNode("div", _hoisted_12, [
157
164
  vue.createVNode(index, {
158
165
  "item-data": item,
159
166
  preview: _ctx.preview,
160
- onConfirm: confirm
167
+ onConfirm: _clickFileItem
161
168
  }, null, 8, ["item-data", "preview"])
162
169
  ]),
163
170
  vue.createElementVNode("h4", null, [
@@ -180,6 +187,10 @@ const _sfc_main = vue.defineComponent({
180
187
  }, 1032, ["content"])
181
188
  ]),
182
189
  vue.createElementVNode("p", null, vue.toDisplayString(vue.unref(filter.timeFormat)(item.updated_at)), 1),
190
+ vue.createCommentVNode(" \u83DC\u5355\u63D2\u69FD "),
191
+ vue.createElementVNode("div", _hoisted_13, [
192
+ vue.renderSlot(_ctx.$slots, "menu", { item })
193
+ ]),
183
194
  vue.createCommentVNode(" \u89C6\u9891\u8F6C\u7801\u8FDB\u5EA6 "),
184
195
  item.task ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.Tooltip), {
185
196
  key: 0,
@@ -189,33 +200,33 @@ const _sfc_main = vue.defineComponent({
189
200
  placement: "bottom"
190
201
  }, {
191
202
  default: vue.withCtx(() => [
192
- _hoisted_12
203
+ _hoisted_14
193
204
  ]),
194
205
  _: 1
195
206
  })) : vue.createCommentVNode("v-if", true)
196
- ], 2)
207
+ ], 10, _hoisted_11)
197
208
  ]);
198
209
  }), 128))
199
210
  ]),
200
- _ctx.fileListCount ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13, [
211
+ _ctx.fileListCount ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15, [
201
212
  !_ctx.isOver ? (vue.openBlock(), vue.createBlock(vue.unref(webVue.Button), {
202
213
  key: 0,
203
214
  class: "loadmore_tips",
204
215
  size: "small",
205
216
  type: "text",
206
- onClick: _ctx.loadFileMore
217
+ onClick: _loadFileMore
207
218
  }, {
208
219
  default: vue.withCtx(() => [
209
220
  vue.createTextVNode("\u52A0\u8F7D\u66F4\u591A\u2026 ")
210
221
  ]),
211
222
  _: 1
212
- }, 8, ["onClick"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_14, "\u6CA1\u6709\u66F4\u591A\u4E86\u2026"))
223
+ })) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_16, "\u6CA1\u6709\u66F4\u591A\u4E86\u2026"))
213
224
  ])) : vue.createCommentVNode("v-if", true),
214
- !((_d = _ctx.fileList) == null ? void 0 : _d.length) && !((_e = _ctx.folderList) == null ? void 0 : _e.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_15, _hoisted_17)) : vue.createCommentVNode("v-if", true)
225
+ !((_d = _ctx.fileList) == null ? void 0 : _d.length) && !((_e = _ctx.folderList) == null ? void 0 : _e.length) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_17, _hoisted_19)) : vue.createCommentVNode("v-if", true)
215
226
  ])
216
227
  ];
217
228
  }),
218
- _: 1
229
+ _: 3
219
230
  });
220
231
  };
221
232
  }
@@ -3,7 +3,7 @@ var vue = require("vue");
3
3
  var webVue = require("@arco-design/web-vue");
4
4
  var icon = require("@arco-design/web-vue/es/icon");
5
5
  var component = require("../../../mediaView/component.js");
6
- const _hoisted_1 = { class: "file-type-thumb" };
6
+ const _hoisted_1 = { class: "resource-grid-file-type-thumb" };
7
7
  const _hoisted_2 = {
8
8
  key: 0,
9
9
  class: "rate-info-tag tag"
@@ -1,8 +1,8 @@
1
1
  "use strict";
2
2
  var component = require("./component.js");
3
- const mediaGridList = Object.assign(component, {
3
+ const resourceGridList = Object.assign(component, {
4
4
  install: (app) => {
5
5
  app.component(component.name, component);
6
6
  }
7
7
  });
8
- module.exports = mediaGridList;
8
+ module.exports = resourceGridList;
@@ -1,4 +1,4 @@
1
- .file-type-thumb {
1
+ .resource-grid-file-type-thumb {
2
2
  position: relative;
3
3
  width: 100%;
4
4
 
@@ -59,12 +59,13 @@
59
59
 
60
60
  .tag {
61
61
  position: absolute;
62
- top: 8px;
63
- left: 5px;
62
+ display: flex;
63
+ align-items: center;
64
+ justify-content: center;
64
65
  padding: 2px 8px;
65
66
  color: white;
66
67
  font-size: 12px;
67
- background-color: rgba(#000, #000, #000, 0.4);
68
+ background-color: rgba(0, 0, 0, 0.2);
68
69
  border-radius: 12px;
69
70
  }
70
71