vue-intergrall-plugins 0.0.191 → 0.0.194

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.
@@ -7794,7 +7794,7 @@ var dev = window.location.hostname == 'localhost' ? '&teste=levchat2' : '';var s
7794
7794
  return _context.abrupt("return", _this.$httpRequest({
7795
7795
  method: 'get',
7796
7796
  url: "".concat(baseURL, "/messages/").concat(type, "?token_cliente=").concat(token).concat(dev) // headers: {
7797
- // Authorization: "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdGQiOiJNS1VuNENMdFVlYTVZeDA4VmltQmgwQWN6Rkp0Y3pIUjZBTXd3eGI0NGF3d1ZTTTh2ZFhPS1pnIiwibWFuYWdlciI6Ik1LVVZkRm8zWmFreGJOUHd6bjNBRjVmVnF1MmVReFEyTUh2ZVloZ3V3SzJMbzU1IiwiaGFzX2luZm9zIjp0cnVlLCJucm9zIjpbIjEwIiwiMjYzIl0sImF1dGgiOiJNS1U3YzZNQnBJWTkyamFKbFZJTXQxd3dpbTRsNXd3Mjc4SU0wdkpRT0JnV3lTeHZZM3k0dmRYIiwiaWF0IjoxNjQ4MTQ2MzEwLCJleHAiOjE2NDgyMzI3MTB9.JSgv4e0DY0gkWaz6u9yBSH2P507zBZoTRKf9ki7TP_M"
7797
+ // Authorization: "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdGQiOiJNS1U5azQ3c2h2bGpOak9Db3dNMjJoMW94d3d4YjQ0YXd3allrbG1JVFNpMmV0aDI5ZTVIRXZNIiwibWFuYWdlciI6Ik1LVWVUQWlxWXBNTmk0M054bDVIeDM4aDdOOTNFQW9qUkN3d2ltNGw1d3dJbDdPdWpSTlV6V0ciLCJoYXNfaW5mb3MiOnRydWUsIm5yb3MiOlsiMjY3Il0sImF1dGgiOiJNS1VBbTNPaWhaaWJlQVRPQ2xaRnBYYUhFN3d3eGI0NGF3d1N1S1VwNG9lN3haTXRNcUJ1aVdIIiwiaWF0IjoxNjQ4MjE1NjE3LCJleHAiOjE2NDgzMDIwMTd9.EJZTSTac_SLgq9NFnLOctf-J06u3GY1L9ZTV_1zSQ7A"
7798
7798
  // }
7799
7799
 
7800
7800
  }).then(function (response) {
@@ -11151,6 +11151,7 @@ var InteratividadeBotoes = __vue_component__$8;var script$4 = {
11151
11151
  data: function data() {
11152
11152
  return {
11153
11153
  linkPreview: {
11154
+ author: "",
11154
11155
  description: "",
11155
11156
  imageSource: "",
11156
11157
  colorTheme: "",
@@ -11166,106 +11167,112 @@ var InteratividadeBotoes = __vue_component__$8;var script$4 = {
11166
11167
  });
11167
11168
  },
11168
11169
  methods: {
11170
+ returnURL: function returnURL() {
11171
+ if (!this.message) return "";
11172
+ var isSticker = this.message.indexOf("KSTICKERK") < 0 ? false : true;
11173
+ if (isSticker) return "";
11174
+ var regex = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/g;
11175
+ var url = regex.exec(this.message);
11176
+
11177
+ if (!url || !url[0]) {
11178
+ console.warn("URL invalida para gerar preview");
11179
+ return "";
11180
+ }
11181
+
11182
+ return url[0].replace(/["'*]/g, "");
11183
+ },
11169
11184
  gerarPreview: function gerarPreview() {
11170
11185
  var _this2 = this;
11171
11186
 
11172
11187
  return _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
11173
- var isSticker, regex, url, encodedURL, response, data, st_ret, msg_ret, raspagem, description, og, theme_color;
11188
+ var url, encodedURL, response, data, st_ret, msg_ret, raspagem, description, og, theme_color, image, site_name, title, author;
11174
11189
  return regeneratorRuntime.wrap(function _callee$(_context) {
11175
11190
  while (1) {
11176
11191
  switch (_context.prev = _context.next) {
11177
11192
  case 0:
11178
11193
  _context.prev = 0;
11194
+ url = _this2.returnURL();
11179
11195
 
11180
- if (_this2.message) {
11181
- _context.next = 3;
11182
- break;
11183
- }
11184
-
11185
- return _context.abrupt("return");
11186
-
11187
- case 3:
11188
- isSticker = _this2.message.indexOf("KSTICKERK") < 0 ? false : true;
11189
-
11190
- if (!isSticker) {
11191
- _context.next = 6;
11196
+ if (url) {
11197
+ _context.next = 4;
11192
11198
  break;
11193
11199
  }
11194
11200
 
11195
11201
  return _context.abrupt("return");
11196
11202
 
11197
- case 6:
11198
- regex = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/g;
11199
- url = regex.exec(_this2.message);
11200
-
11201
- if (!(!url || !url[0])) {
11202
- _context.next = 10;
11203
- break;
11204
- }
11205
-
11206
- return _context.abrupt("return", console.warn("URL invalida para gerar preview"));
11207
-
11208
- case 10:
11209
- encodedURL = Buffer(url[0]).toString("base64");
11210
- _context.next = 13;
11203
+ case 4:
11204
+ encodedURL = Buffer(url).toString("base64");
11205
+ _context.next = 7;
11211
11206
  return _this2.$httpRequest({
11212
11207
  method: 'get',
11213
- url: "".concat(baseURL, "/preview?url=").concat(encodedURL).concat(dev) // headers: {
11214
- // Authorization: "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdGQiOiJNS1VuNENMdFVlYTVZeDA4VmltQmgwQWN6Rkp0Y3pIUjZBTXd3eGI0NGF3d1ZTTTh2ZFhPS1pnIiwibWFuYWdlciI6Ik1LVVZkRm8zWmFreGJOUHd6bjNBRjVmVnF1MmVReFEyTUh2ZVloZ3V3SzJMbzU1IiwiaGFzX2luZm9zIjp0cnVlLCJucm9zIjpbIjEwIiwiMjYzIl0sImF1dGgiOiJNS1U3YzZNQnBJWTkyamFKbFZJTXQxd3dpbTRsNXd3Mjc4SU0wdkpRT0JnV3lTeHZZM3k0dmRYIiwiaWF0IjoxNjQ4MTQ2MzEwLCJleHAiOjE2NDgyMzI3MTB9.JSgv4e0DY0gkWaz6u9yBSH2P507zBZoTRKf9ki7TP_M"
11215
- // }
11216
-
11208
+ url: "".concat(baseURL, "/preview?url=").concat(encodedURL).concat(dev),
11209
+ headers: {
11210
+ Authorization: "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdGQiOiJNS1U5azQ3c2h2bGpOak9Db3dNMjJoMW94d3d4YjQ0YXd3allrbG1JVFNpMmV0aDI5ZTVIRXZNIiwibWFuYWdlciI6Ik1LVWVUQWlxWXBNTmk0M054bDVIeDM4aDdOOTNFQW9qUkN3d2ltNGw1d3dJbDdPdWpSTlV6V0ciLCJoYXNfaW5mb3MiOnRydWUsIm5yb3MiOlsiMjY3Il0sImF1dGgiOiJNS1VBbTNPaWhaaWJlQVRPQ2xaRnBYYUhFN3d3eGI0NGF3d1N1S1VwNG9lN3haTXRNcUJ1aVdIIiwiaWF0IjoxNjQ4MjE1NjE3LCJleHAiOjE2NDgzMDIwMTd9.EJZTSTac_SLgq9NFnLOctf-J06u3GY1L9ZTV_1zSQ7A"
11211
+ }
11217
11212
  });
11218
11213
 
11219
- case 13:
11214
+ case 7:
11220
11215
  response = _context.sent;
11221
11216
 
11222
11217
  if (!(_typeof(response) != "object" || _typeof(response.data) != "object")) {
11223
- _context.next = 16;
11218
+ _context.next = 10;
11224
11219
  break;
11225
11220
  }
11226
11221
 
11227
11222
  throw "Retorno incorreto";
11228
11223
 
11229
- case 16:
11224
+ case 10:
11230
11225
  data = response.data;
11231
11226
  st_ret = data.st_ret, msg_ret = data.msg_ret, raspagem = data.raspagem;
11232
11227
 
11233
11228
  if (!(st_ret != "OK")) {
11234
- _context.next = 20;
11229
+ _context.next = 14;
11235
11230
  break;
11236
11231
  }
11237
11232
 
11238
11233
  throw "".concat(st_ret, " - ").concat(msg_ret);
11239
11234
 
11240
- case 20:
11235
+ case 14:
11241
11236
  if (raspagem) {
11242
- _context.next = 22;
11237
+ _context.next = 16;
11243
11238
  break;
11244
11239
  }
11245
11240
 
11246
11241
  throw "".concat(st_ret, " - ").concat(msg_ret, " | (Raspagem nao encontrada no retorno)");
11247
11242
 
11248
- case 22:
11243
+ case 16:
11249
11244
  description = raspagem.description, og = raspagem.og, theme_color = raspagem.theme_color;
11250
11245
  if (description) _this2.linkPreview.description = description;
11251
- if (og && og.image) _this2.linkPreview.imageSource = og.image;
11246
+
11247
+ if (og) {
11248
+ image = og.image, site_name = og.site_name, title = og.title, author = og.author;
11249
+ if (image) _this2.linkPreview.imageSource = image;
11250
+ if (author || site_name || title) _this2.linkPreview.author = author ? author : site_name ? site_name : title;
11251
+ if (og.description) _this2.linkPreview.description = og.description;
11252
+ }
11253
+
11252
11254
  if (theme_color) _this2.linkPreview.colorTheme = theme_color;
11253
11255
  if (_this2.linkPreview.description || _this2.linkPreview.imageSource) _this2.linkPreview.isValid = true;
11254
- _context.next = 32;
11256
+ _context.next = 26;
11255
11257
  break;
11256
11258
 
11257
- case 29:
11258
- _context.prev = 29;
11259
+ case 23:
11260
+ _context.prev = 23;
11259
11261
  _context.t0 = _context["catch"](0);
11260
11262
  console.error("Erro ao gerar o preview do link: ", _context.t0);
11261
11263
 
11262
- case 32:
11264
+ case 26:
11263
11265
  case "end":
11264
11266
  return _context.stop();
11265
11267
  }
11266
11268
  }
11267
- }, _callee, null, [[0, 29]]);
11269
+ }, _callee, null, [[0, 23]]);
11268
11270
  }))();
11271
+ },
11272
+ openUrl: function openUrl() {
11273
+ var url = this.returnURL();
11274
+ if (!url) return;
11275
+ window.open(url, "_blank");
11269
11276
  }
11270
11277
  }
11271
11278
  };/* script */
@@ -11280,8 +11287,16 @@ var __vue_render__$4 = function __vue_render__() {
11280
11287
  var _c = _vm._self._c || _h;
11281
11288
 
11282
11289
  return _vm.linkPreview.isValid ? _c('div', {
11283
- staticClass: "link-preview"
11284
- }, [_vm._ssrNode((_vm.linkPreview.imageSource ? "<div class=\"link-preview-image\"" + _vm._ssrStyle(null, _vm.linkPreview.colorTheme ? "background-color: " + _vm.linkPreview.colorTheme : '', null) + " data-v-718e1ebf><img" + _vm._ssrAttr("src", _vm.linkPreview.imageSource) + " alt=\"Imagem referente ao link\" data-v-718e1ebf></div>" : "<!---->") + " " + (_vm.linkPreview.description ? "<div class=\"link-preview-infos\" data-v-718e1ebf>" + (_vm.linkPreview.description ? "<p data-v-718e1ebf>" + _vm._ssrEscape(_vm._s(_vm.linkPreview.description)) + "</p>" : "<!---->") + "</div>" : "<!---->"))]) : _vm._e();
11290
+ staticClass: "link-preview",
11291
+ attrs: {
11292
+ "title": "Abrir " + _vm.returnURL() + " em uma nova guia"
11293
+ },
11294
+ on: {
11295
+ "click": function click($event) {
11296
+ return _vm.openUrl();
11297
+ }
11298
+ }
11299
+ }, [_vm._ssrNode((_vm.linkPreview.imageSource ? "<div class=\"link-preview-image\"" + _vm._ssrStyle(null, _vm.linkPreview.colorTheme ? "background-color: " + _vm.linkPreview.colorTheme : '', null) + " data-v-0d92e314><img" + _vm._ssrAttr("src", _vm.linkPreview.imageSource) + " alt=\"Imagem referente ao link\" data-v-0d92e314></div>" : "<!---->") + " " + (_vm.linkPreview.author ? "<div class=\"link-preview-author\" data-v-0d92e314><h1 data-v-0d92e314>" + _vm._ssrEscape(_vm._s(_vm.linkPreview.author)) + "</h1></div>" : "<!---->") + " " + (_vm.linkPreview.description ? "<div class=\"link-preview-infos\" data-v-0d92e314>" + (_vm.linkPreview.description ? "<p data-v-0d92e314>" + _vm._ssrEscape(_vm._s(_vm.linkPreview.description)) + "</p>" : "<!---->") + "</div>" : "<!---->"))]) : _vm._e();
11285
11300
  };
11286
11301
 
11287
11302
  var __vue_staticRenderFns__$4 = [];
@@ -11289,8 +11304,8 @@ var __vue_staticRenderFns__$4 = [];
11289
11304
 
11290
11305
  var __vue_inject_styles__$4 = function __vue_inject_styles__(inject) {
11291
11306
  if (!inject) return;
11292
- inject("data-v-718e1ebf_0", {
11293
- source: ".link-preview[data-v-718e1ebf]{display:flex;flex-direction:column}.link-preview-image[data-v-718e1ebf]{display:flex;justify-content:center;align-items:center;padding:10px}.link-preview-image img[data-v-718e1ebf]{max-width:250px}.link-preview-infos[data-v-718e1ebf]{background-color:rgba(0,0,0,.1);padding:10px;font-size:.8rem}",
11307
+ inject("data-v-0d92e314_0", {
11308
+ source: ".link-preview[data-v-0d92e314]{display:flex;flex-direction:column;background-color:#eee;color:#333;cursor:pointer;margin-bottom:5px;border-radius:5px}.link-preview-image[data-v-0d92e314]{display:flex;justify-content:center;align-items:center;padding:10px;margin-bottom:5px}.link-preview-author[data-v-0d92e314]{margin:5px;font-size:.625em}.link-preview-image img[data-v-0d92e314]{min-width:100px;max-width:200px}.link-preview-infos[data-v-0d92e314]{background-color:#2626261a;padding:5px;margin:0 5px 5px 5px;font-size:.8rem;border-radius:5px}",
11294
11309
  map: undefined,
11295
11310
  media: undefined
11296
11311
  });
@@ -11298,10 +11313,10 @@ var __vue_inject_styles__$4 = function __vue_inject_styles__(inject) {
11298
11313
  /* scoped */
11299
11314
 
11300
11315
 
11301
- var __vue_scope_id__$4 = "data-v-718e1ebf";
11316
+ var __vue_scope_id__$4 = "data-v-0d92e314";
11302
11317
  /* module identifier */
11303
11318
 
11304
- var __vue_module_identifier__$4 = "data-v-718e1ebf";
11319
+ var __vue_module_identifier__$4 = "data-v-0d92e314";
11305
11320
  /* functional template */
11306
11321
 
11307
11322
  var __vue_is_functional_template__$4 = false;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vue-intergrall-plugins",
3
- "version": "0.0.191",
3
+ "version": "0.0.194",
4
4
  "description": "",
5
5
  "main": "dist/vue-intergrall-plugins.ssr.js",
6
6
  "browser": "dist/vue-intergrall-plugins.esm.js",
@@ -1,5 +1,10 @@
1
1
  <template>
2
- <div v-if="linkPreview.isValid" class="link-preview">
2
+ <div
3
+ v-if="linkPreview.isValid"
4
+ class="link-preview"
5
+ @click="openUrl()"
6
+ :title="`Abrir ${returnURL()} em uma nova guia`"
7
+ >
3
8
  <div
4
9
  v-if="linkPreview.imageSource"
5
10
  :style="linkPreview.colorTheme ? `background-color: ${linkPreview.colorTheme}` : ''"
@@ -7,6 +12,9 @@
7
12
  >
8
13
  <img :src="linkPreview.imageSource" alt="Imagem referente ao link" />
9
14
  </div>
15
+ <div class="link-preview-author" v-if="linkPreview.author">
16
+ <h1 v-text="linkPreview.author"></h1>
17
+ </div>
10
18
  <div v-if="linkPreview.description" class="link-preview-infos">
11
19
  <p v-if="linkPreview.description" v-text="linkPreview.description"></p>
12
20
  </div>
@@ -26,6 +34,7 @@ export default {
26
34
  data() {
27
35
  return {
28
36
  linkPreview: {
37
+ author: "",
29
38
  description: "",
30
39
  imageSource: "",
31
40
  colorTheme: "",
@@ -37,22 +46,30 @@ export default {
37
46
  this.$nextTick(() => { this.gerarPreview() })
38
47
  },
39
48
  methods: {
40
- async gerarPreview() {
41
- try {
42
- if(!this.message) return
49
+ returnURL() {
50
+ if(!this.message) return ""
43
51
  const isSticker = this.message.indexOf("KSTICKERK") < 0 ? false : true
44
- if(isSticker) return
52
+ if(isSticker) return ""
45
53
  const regex = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/g
46
54
  const url = regex.exec(this.message)
47
- if(!url || !url[0]) return console.warn("URL invalida para gerar preview")
48
- const encodedURL = Buffer(url[0]).toString("base64")
55
+ if(!url || !url[0]) {
56
+ console.warn("URL invalida para gerar preview")
57
+ return ""
58
+ }
59
+ return url[0].replace(/["'*]/g, "")
60
+ },
61
+ async gerarPreview() {
62
+ try {
63
+ const url = this.returnURL()
64
+ if(!url) return
65
+ const encodedURL = Buffer(url).toString("base64")
49
66
  const response = await this.$httpRequest(
50
67
  {
51
68
  method: 'get',
52
69
  url: `${baseURL}/preview?url=${encodedURL}${dev}`,
53
- // headers: {
54
- // Authorization: "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdGQiOiJNS1VuNENMdFVlYTVZeDA4VmltQmgwQWN6Rkp0Y3pIUjZBTXd3eGI0NGF3d1ZTTTh2ZFhPS1pnIiwibWFuYWdlciI6Ik1LVVZkRm8zWmFreGJOUHd6bjNBRjVmVnF1MmVReFEyTUh2ZVloZ3V3SzJMbzU1IiwiaGFzX2luZm9zIjp0cnVlLCJucm9zIjpbIjEwIiwiMjYzIl0sImF1dGgiOiJNS1U3YzZNQnBJWTkyamFKbFZJTXQxd3dpbTRsNXd3Mjc4SU0wdkpRT0JnV3lTeHZZM3k0dmRYIiwiaWF0IjoxNjQ4MTQ2MzEwLCJleHAiOjE2NDgyMzI3MTB9.JSgv4e0DY0gkWaz6u9yBSH2P507zBZoTRKf9ki7TP_M"
55
- // }
70
+ headers: {
71
+ Authorization: "Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhdGQiOiJNS1U5azQ3c2h2bGpOak9Db3dNMjJoMW94d3d4YjQ0YXd3allrbG1JVFNpMmV0aDI5ZTVIRXZNIiwibWFuYWdlciI6Ik1LVWVUQWlxWXBNTmk0M054bDVIeDM4aDdOOTNFQW9qUkN3d2ltNGw1d3dJbDdPdWpSTlV6V0ciLCJoYXNfaW5mb3MiOnRydWUsIm5yb3MiOlsiMjY3Il0sImF1dGgiOiJNS1VBbTNPaWhaaWJlQVRPQ2xaRnBYYUhFN3d3eGI0NGF3d1N1S1VwNG9lN3haTXRNcUJ1aVdIIiwiaWF0IjoxNjQ4MjE1NjE3LCJleHAiOjE2NDgzMDIwMTd9.EJZTSTac_SLgq9NFnLOctf-J06u3GY1L9ZTV_1zSQ7A"
72
+ }
56
73
  })
57
74
  if(typeof response != "object" || typeof response.data != "object") throw "Retorno incorreto"
58
75
  const { data } = response
@@ -61,7 +78,12 @@ export default {
61
78
  if(!raspagem) throw `${st_ret} - ${msg_ret} | (Raspagem nao encontrada no retorno)`
62
79
  const { description, og, theme_color } = raspagem
63
80
  if(description) this.linkPreview.description = description
64
- if(og && og.image) this.linkPreview.imageSource = og.image
81
+ if(og) {
82
+ const { image, site_name, title, author } = og
83
+ if(image) this.linkPreview.imageSource = image
84
+ if(author || site_name || title) this.linkPreview.author = author ? author : site_name ? site_name : title
85
+ if(og.description) this.linkPreview.description = og.description
86
+ }
65
87
  if(theme_color) this.linkPreview.colorTheme = theme_color
66
88
 
67
89
  if(this.linkPreview.description || this.linkPreview.imageSource) this.linkPreview.isValid = true
@@ -69,7 +91,11 @@ export default {
69
91
  console.error("Erro ao gerar o preview do link: ", e)
70
92
  }
71
93
  },
72
-
94
+ openUrl() {
95
+ const url = this.returnURL()
96
+ if(!url) return
97
+ window.open(url, "_blank")
98
+ }
73
99
  }
74
100
  }
75
101
  </script>
@@ -78,6 +104,11 @@ export default {
78
104
  .link-preview {
79
105
  display: flex;
80
106
  flex-direction: column;
107
+ background-color: #EEE;
108
+ color: #333;
109
+ cursor: pointer;
110
+ margin-bottom: 5px;
111
+ border-radius: 5px;
81
112
  }
82
113
 
83
114
  .link-preview-image {
@@ -85,15 +116,24 @@ export default {
85
116
  justify-content: center;
86
117
  align-items: center;
87
118
  padding: 10px;
119
+ margin-bottom: 5px;
120
+ }
121
+
122
+ .link-preview-author {
123
+ margin: 5px;
124
+ font-size: .625em
88
125
  }
89
126
 
90
127
  .link-preview-image img {
91
- max-width: 250px;
128
+ min-width: 100px;
129
+ max-width: 200px;
92
130
  }
93
131
 
94
132
  .link-preview-infos {
95
- background-color: rgba(0, 0, 0, .1);
96
- padding: 10px;
133
+ background-color: #2626261a;
134
+ padding: 5px;
135
+ margin: 0 5px 5px 5px;
97
136
  font-size: .8rem;
137
+ border-radius: 5px;
98
138
  }
99
139
  </style>