@social-mail/social-mail-client 1.4.161 → 1.4.163

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 (60) hide show
  1. package/dist/admin/AdminAppIndex.pack.global.less +8 -8
  2. package/dist/admin/AdminAppIndex.pack.global.less.css +252 -252
  3. package/dist/admin/AdminAppIndex.pack.global.less.css.map +1 -1
  4. package/dist/admin/AdminAppIndex.pack.js +3540 -3934
  5. package/dist/admin/AdminAppIndex.pack.js.map +1 -1
  6. package/dist/admin/AdminAppIndex.pack.local.less +1 -2
  7. package/dist/admin/AdminAppIndex.pack.local.less.css +6 -12
  8. package/dist/admin/AdminAppIndex.pack.local.less.css.map +1 -1
  9. package/dist/admin/AdminAppIndex.pack.min.js +1 -1
  10. package/dist/admin/AdminAppIndex.pack.min.js.map +1 -1
  11. package/dist/services/email-addresses/EmailAddressService.d.ts.map +1 -1
  12. package/dist/services/email-addresses/EmailAddressService.js +1 -1
  13. package/dist/services/email-addresses/EmailAddressService.js.map +1 -1
  14. package/dist/site-editor-app/SiteEditorApp.pack.global.less +4 -4
  15. package/dist/site-editor-app/SiteEditorApp.pack.global.less.css +171 -171
  16. package/dist/site-editor-app/SiteEditorApp.pack.global.less.css.map +1 -1
  17. package/dist/site-editor-app/SiteEditorApp.pack.js +2074 -2468
  18. package/dist/site-editor-app/SiteEditorApp.pack.js.map +1 -1
  19. package/dist/site-editor-app/SiteEditorApp.pack.local.less +0 -1
  20. package/dist/site-editor-app/SiteEditorApp.pack.local.less.css +0 -6
  21. package/dist/site-editor-app/SiteEditorApp.pack.local.less.css.map +1 -1
  22. package/dist/site-editor-app/SiteEditorApp.pack.min.js +2 -2
  23. package/dist/site-editor-app/SiteEditorApp.pack.min.js.map +1 -1
  24. package/dist/tsconfig.tsbuildinfo +1 -1
  25. package/dist/web/AppIndex.pack.global.less +9 -9
  26. package/dist/web/AppIndex.pack.global.less.css +273 -273
  27. package/dist/web/AppIndex.pack.global.less.css.map +1 -1
  28. package/dist/web/AppIndex.pack.js +4641 -5035
  29. package/dist/web/AppIndex.pack.js.map +1 -1
  30. package/dist/web/AppIndex.pack.local.less +1 -2
  31. package/dist/web/AppIndex.pack.local.less.css +6 -12
  32. package/dist/web/AppIndex.pack.local.less.css.map +1 -1
  33. package/dist/web/AppIndex.pack.min.js +1 -1
  34. package/dist/web/AppIndex.pack.min.js.map +1 -1
  35. package/dist/web/page/mails/ConversationPage.d.ts.map +1 -1
  36. package/dist/web/page/mails/ConversationPage.js +9 -37
  37. package/dist/web/page/mails/ConversationPage.js.map +1 -1
  38. package/dist/web/page/mails/MailboxContacts.d.ts +0 -2
  39. package/dist/web/page/mails/MailboxContacts.d.ts.map +1 -1
  40. package/dist/web/page/mails/MailboxContacts.js +2 -29
  41. package/dist/web/page/mails/MailboxContacts.js.map +1 -1
  42. package/dist/web/page/mails/mini-compose/MiniComposePage.js +1 -1
  43. package/package.json +1 -1
  44. package/src/services/email-addresses/EmailAddressService.ts +2 -1
  45. package/src/web/page/mails/ConversationPage.tsx +34 -30
  46. package/src/web/page/mails/MailboxContacts.tsx +1 -22
  47. package/src/web/page/mails/mini-compose/MiniComposePage.tsx +1 -1
  48. package/dist/web/page/mails/ComposeMailPage.d.ts +0 -27
  49. package/dist/web/page/mails/ComposeMailPage.d.ts.map +0 -1
  50. package/dist/web/page/mails/ComposeMailPage.js +0 -178
  51. package/dist/web/page/mails/ComposeMailPage.js.map +0 -1
  52. package/dist/web/page/mails/contact/AddMiniContactPage.d.ts +0 -9
  53. package/dist/web/page/mails/contact/AddMiniContactPage.d.ts.map +0 -1
  54. package/dist/web/page/mails/contact/AddMiniContactPage.js +0 -95
  55. package/dist/web/page/mails/contact/AddMiniContactPage.js.map +0 -1
  56. package/dist/web/page/mails/styles/compose-mail-page.local.less.css +0 -7
  57. package/dist/web/page/mails/styles/compose-mail-page.local.less.css.map +0 -1
  58. package/src/web/page/mails/ComposeMailPage.tsx +0 -151
  59. package/src/web/page/mails/contact/AddMiniContactPage.tsx +0 -71
  60. package/src/web/page/mails/styles/compose-mail-page.local.less +0 -14
@@ -19,21 +19,21 @@
19
19
  @import (less) "../../node_modules/@web-atoms/web-controls/src/mobile-app/master-detail.global.less";
20
20
  @import (less) "../../src/common/controls/collection-editor/CollectionEditor.global.less";
21
21
  @import (less) "../../src/common/controls/collection-editor/CollectionEditorEx.global.less";
22
- @import (less) "../../node_modules/@web-atoms/web-controls/src/styles/inline-html-editor.global.less";
23
- @import (less) "../../node_modules/@web-atoms/web-controls/src/styles/html-editor-toolbar.global.less";
24
- @import (less) "../../node_modules/@web-atoms/web-controls/src/basic/styles/popup-button.global.less";
25
- @import (less) "../../node_modules/@web-atoms/web-controls/src/html-editor/commands/Separator.global.less";
26
- @import (less) "../../node_modules/@web-atoms/web-controls/src/basic/styles/title-editor.global.less";
27
- @import (less) "../../node_modules/@web-atoms/web-controls/src/basic/styles/chip.global.less";
28
- @import (less) "../../node_modules/@web-atoms/web-controls/src/basic/styles/chips.global.less";
29
- @import (less) "../../node_modules/@web-atoms/web-controls/src/basic/styles/item-suggestion.global.less";
30
22
  @import (less) "../../node_modules/@web-atoms/web-controls/src/styles/limited-text.global.less";
23
+ @import (less) "../../node_modules/@web-atoms/web-controls/src/basic/styles/popup-button.global.less";
31
24
  @import (less) "../../src/common/controls/file-preview/FilePreview.global.less";
32
25
  @import (less) "../../node_modules/@web-atoms/web-controls/src/animations/Animations.global.less";
33
26
  @import (less) "../../node_modules/@web-atoms/web-controls/src/mobile-app/bottom-popup.global.less";
34
27
  @import (less) "../../src/common/controls/buttons/round/RoundButton.global.less";
35
28
  @import (less) "../../src/common/controls/audio/AudioRecorder.global.less";
29
+ @import (less) "../../node_modules/@web-atoms/web-controls/src/styles/inline-html-editor.global.less";
30
+ @import (less) "../../node_modules/@web-atoms/web-controls/src/styles/html-editor-toolbar.global.less";
31
+ @import (less) "../../node_modules/@web-atoms/web-controls/src/html-editor/commands/Separator.global.less";
36
32
  @import (less) "../../node_modules/@web-atoms/web-controls/src/styles/atom-html-editor.global.less";
33
+ @import (less) "../../node_modules/@web-atoms/web-controls/src/basic/styles/title-editor.global.less";
34
+ @import (less) "../../node_modules/@web-atoms/web-controls/src/basic/styles/chip.global.less";
35
+ @import (less) "../../node_modules/@web-atoms/web-controls/src/basic/styles/chips.global.less";
36
+ @import (less) "../../node_modules/@web-atoms/web-controls/src/basic/styles/item-suggestion.global.less";
37
37
  @import (less) "../../node_modules/@web-atoms/core/src/web/services/NotifcationPopup.global.less";
38
38
  @import (less) "../../node_modules/@web-atoms/web-controls/src/basic/styles/toggle-button-bar.global.less";
39
39
  @import (less) "../../node_modules/@web-atoms/web-controls/src/styles/resizable.global.less";
@@ -1026,51 +1026,36 @@ div[data-collection-editor] {
1026
1026
  [data-collection-editor-ex][data-collection-editor-ex][data-collection-editor-ex][data-collection-editor-ex] {
1027
1027
  overflow: visible;
1028
1028
  }
1029
- [data-inline-editor=inline-editor] {
1030
- display: grid;
1031
- grid-template-rows: auto 1fr;
1032
- }
1033
- [data-inline-editor=inline-editor] > [data-element=editor] {
1034
- padding: var(--spacing, 5px);
1035
- border: solid 1px lightgray;
1036
- border-radius: var(--spacing, 5px);
1037
- margin: var(--spacing, 5px);
1038
- overflow: auto;
1039
- }
1040
- [data-inline-editor=inline-editor] > [data-element=editor] > * {
1041
- outline: none;
1042
- }
1043
- [data-inline-editor=inline-editor] > [data-element=toolbar] {
1044
- flex-direction: column;
1045
- align-items: center;
1046
- justify-content: space-around;
1047
- gap: 4px;
1048
- display: flex;
1029
+ [data-limited-text] {
1030
+ position: relative;
1031
+ overflow: hidden;
1032
+ contain: content;
1049
1033
  }
1050
- [data-inline-editor=inline-editor] > [data-element=toolbar] > .toolbar {
1051
- flex-direction: row;
1052
- align-items: center;
1053
- justify-content: space-around;
1054
- gap: 4px;
1055
- display: flex;
1034
+ [data-limited-text][data-mode=collapsed] > [data-element=more] {
1035
+ cursor: pointer;
1036
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 19%, #ffffff 65%, #ffffff 100%);
1056
1037
  }
1057
- [data-inline-editor=inline-editor] > [data-element=toolbar] > .toolbar .command.pressed {
1058
- font-weight: bold;
1038
+ [data-limited-text][data-mode=collapsed] > [data-element=more] > button {
1039
+ transform: rotate(180deg);
1059
1040
  }
1060
- [data-html-editor-element=toolbar] {
1041
+ [data-limited-text] > [data-element=more] {
1061
1042
  display: flex;
1062
- flex-wrap: wrap;
1063
- align-items: center;
1064
- align-content: center;
1065
- justify-content: center;
1066
- gap: var(--spacing, 5px);
1043
+ justify-content: flex-end;
1044
+ width: 100%;
1045
+ right: 0;
1046
+ left: 0;
1047
+ position: absolute;
1048
+ transform: translateY(-100%);
1067
1049
  }
1068
- [data-html-editor-element=toolbar] .command {
1069
- display: flex;
1070
- align-content: center;
1071
- justify-content: center;
1072
- align-items: center;
1073
- justify-items: center;
1050
+ [data-limited-text] > [data-element=more] > button {
1051
+ padding: 1px;
1052
+ padding-left: 10px;
1053
+ padding-right: 10px;
1054
+ border-radius: 9999px;
1055
+ border: none;
1056
+ outline: none;
1057
+ box-shadow: 0 0 6px 6px white;
1058
+ transition: transform 0.5s ease-out;
1074
1059
  }
1075
1060
  *[data-menu-item=menu-item] {
1076
1061
  padding: 5px;
@@ -1100,218 +1085,6 @@ div[data-collection-editor] {
1100
1085
  justify-content: stretch;
1101
1086
  gap: 4px;
1102
1087
  }
1103
- [data-toolbar-item=separator] {
1104
- background-color: #a9a9a9;
1105
- margin-left: 4px;
1106
- margin-right: 4px;
1107
- display: inline-block;
1108
- margin-top: 4px;
1109
- height: 1rem;
1110
- width: 2px;
1111
- padding: 0;
1112
- }
1113
- [data-title-editor=title-editor] {
1114
- display: inline-grid;
1115
- grid-template-rows: 1fr auto;
1116
- grid-template-columns: 1fr 40px;
1117
- column-gap: 5px;
1118
- }
1119
- [data-title-editor=title-editor] > input {
1120
- grid-row: 1 / span 2;
1121
- grid-column: 1;
1122
- }
1123
- [data-title-editor=title-editor] > i {
1124
- grid-row: 1;
1125
- grid-column: 2;
1126
- font-size: smaller;
1127
- padding-left: 5px;
1128
- padding-right: 5px;
1129
- align-self: stretch;
1130
- justify-self: stretch;
1131
- text-align: center;
1132
- }
1133
- [data-title-editor=title-editor] > span {
1134
- grid-row: 2;
1135
- grid-column: 2;
1136
- font-size: xx-small;
1137
- align-self: stretch;
1138
- justify-self: stretch;
1139
- text-align: center;
1140
- }
1141
- *[data-item-chip] {
1142
- padding: 2px;
1143
- padding-left: 10px;
1144
- padding-right: 10px;
1145
- border-radius: 9999px;
1146
- display: grid;
1147
- align-items: center;
1148
- grid-template-rows: auto 1fr;
1149
- grid-template-columns: auto 1fr auto;
1150
- }
1151
- *[data-item-chip] > [data-content] {
1152
- grid-row-start: 2;
1153
- grid-column-start: 2;
1154
- }
1155
- *[data-item-chip] > .icon {
1156
- grid-column-start: 1;
1157
- grid-row-start: 1;
1158
- grid-row-end: span 2;
1159
- padding: 2px;
1160
- padding-right: 4px;
1161
- align-self: center;
1162
- }
1163
- *[data-item-chip] > .delete {
1164
- grid-column-start: 3;
1165
- grid-row-start: 1;
1166
- grid-row-end: span 2;
1167
- align-self: center;
1168
- font-size: small;
1169
- background-color: transparent;
1170
- border-radius: 4px;
1171
- padding: 2px;
1172
- padding-left: 4px;
1173
- color: gray;
1174
- }
1175
- *[data-item-chip] > .delete:hover {
1176
- background-color: lightgray;
1177
- color: red;
1178
- }
1179
- *[data-item-chip] > .header {
1180
- font-size: x-small;
1181
- grid-row-start: 1;
1182
- grid-column-start: 2;
1183
- text-align: center;
1184
- }
1185
- *[data-item-chip] > .label {
1186
- grid-row-start: 2;
1187
- grid-column-start: 2;
1188
- }
1189
- *[data-item-chip] > .delete-strike {
1190
- grid-row: 1 / span 2;
1191
- grid-column: 1 / span 2;
1192
- height: 2px;
1193
- background-color: red;
1194
- align-self: center;
1195
- }
1196
- *[data-item-chip][data-deleted=false] > .delete-strike {
1197
- display: none;
1198
- }
1199
- *[data-item-chip][data-deleted=true] {
1200
- border: solid 1px red;
1201
- background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M100 0 L0 100 ' stroke='red' stroke-width='1'/><path d='M0 0 L100 100 ' stroke='red' stroke-width='1'/></svg>");
1202
- }
1203
- div[data-atom-chips] {
1204
- flex-direction: row;
1205
- align-items: center;
1206
- justify-content: stretch;
1207
- gap: 4px;
1208
- display: flex;
1209
- flex-flow: wrap;
1210
- padding: 5px;
1211
- }
1212
- div[data-atom-chips] > .search {
1213
- border: none;
1214
- outline: none;
1215
- flex: 1 1;
1216
- }
1217
- div[data-atom-chips] > .footer {
1218
- margin-left: auto;
1219
- }
1220
- div[data-atom-chips] > .presenter {
1221
- flex-direction: row;
1222
- align-items: center;
1223
- justify-content: flex-start;
1224
- gap: 4px;
1225
- display: inline-flex;
1226
- flex-flow: wrap;
1227
- }
1228
- div[data-atom-chips] > .presenter > * {
1229
- background-color: rgba(211, 211, 211, 0.3);
1230
- color: var(--text-color, CanvasText);
1231
- }
1232
- div[data-atom-chips][data-mode=search] > .search {
1233
- color: inherit;
1234
- padding-left: 20px;
1235
- background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 1px center;
1236
- }
1237
- div[data-atom-chips][data-mode=search] > .search::placeholder {
1238
- color: inherit;
1239
- opacity: 0.7;
1240
- }
1241
- *[data-item-suggestion] {
1242
- padding: 1px;
1243
- padding-left: 5px;
1244
- padding-right: 5px;
1245
- border-radius: 10px;
1246
- display: grid;
1247
- align-items: center;
1248
- grid-template-rows: auto 1fr;
1249
- grid-template-columns: auto 1fr auto;
1250
- max-width: 100%;
1251
- overflow-x: hidden;
1252
- }
1253
- *[data-item-suggestion] > [data-content] {
1254
- grid-row-start: 2;
1255
- grid-column-start: 2;
1256
- }
1257
- *[data-item-suggestion] > .icon {
1258
- grid-column-start: 1;
1259
- grid-row-start: 1;
1260
- grid-row-end: span 2;
1261
- align-self: center;
1262
- margin-right: 5px;
1263
- }
1264
- *[data-item-suggestion] > .delete {
1265
- grid-column-start: 3;
1266
- grid-row-start: 1;
1267
- grid-row-end: span 2;
1268
- align-self: center;
1269
- color: #ff0000;
1270
- }
1271
- *[data-item-suggestion] > .header {
1272
- font-size: x-small;
1273
- grid-row-start: 1;
1274
- grid-column-start: 2;
1275
- overflow: hidden;
1276
- text-overflow: ellipsis;
1277
- }
1278
- *[data-item-suggestion] > .label {
1279
- grid-row-start: 2;
1280
- grid-column-start: 2;
1281
- overflow: hidden;
1282
- text-overflow: ellipsis;
1283
- }
1284
- [data-limited-text] {
1285
- position: relative;
1286
- overflow: hidden;
1287
- contain: content;
1288
- }
1289
- [data-limited-text][data-mode=collapsed] > [data-element=more] {
1290
- cursor: pointer;
1291
- background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 19%, #ffffff 65%, #ffffff 100%);
1292
- }
1293
- [data-limited-text][data-mode=collapsed] > [data-element=more] > button {
1294
- transform: rotate(180deg);
1295
- }
1296
- [data-limited-text] > [data-element=more] {
1297
- display: flex;
1298
- justify-content: flex-end;
1299
- width: 100%;
1300
- right: 0;
1301
- left: 0;
1302
- position: absolute;
1303
- transform: translateY(-100%);
1304
- }
1305
- [data-limited-text] > [data-element=more] > button {
1306
- padding: 1px;
1307
- padding-left: 10px;
1308
- padding-right: 10px;
1309
- border-radius: 9999px;
1310
- border: none;
1311
- outline: none;
1312
- box-shadow: 0 0 6px 6px white;
1313
- transition: transform 0.5s ease-out;
1314
- }
1315
1088
  [data-file-preview=file-preview] {
1316
1089
  border: solid 2px lightgray;
1317
1090
  display: inline-grid;
@@ -1476,6 +1249,62 @@ button[data-round-button=round-button] {
1476
1249
  gap: 4px;
1477
1250
  display: flex;
1478
1251
  }
1252
+ [data-inline-editor=inline-editor] {
1253
+ display: grid;
1254
+ grid-template-rows: auto 1fr;
1255
+ }
1256
+ [data-inline-editor=inline-editor] > [data-element=editor] {
1257
+ padding: var(--spacing, 5px);
1258
+ border: solid 1px lightgray;
1259
+ border-radius: var(--spacing, 5px);
1260
+ margin: var(--spacing, 5px);
1261
+ overflow: auto;
1262
+ }
1263
+ [data-inline-editor=inline-editor] > [data-element=editor] > * {
1264
+ outline: none;
1265
+ }
1266
+ [data-inline-editor=inline-editor] > [data-element=toolbar] {
1267
+ flex-direction: column;
1268
+ align-items: center;
1269
+ justify-content: space-around;
1270
+ gap: 4px;
1271
+ display: flex;
1272
+ }
1273
+ [data-inline-editor=inline-editor] > [data-element=toolbar] > .toolbar {
1274
+ flex-direction: row;
1275
+ align-items: center;
1276
+ justify-content: space-around;
1277
+ gap: 4px;
1278
+ display: flex;
1279
+ }
1280
+ [data-inline-editor=inline-editor] > [data-element=toolbar] > .toolbar .command.pressed {
1281
+ font-weight: bold;
1282
+ }
1283
+ [data-html-editor-element=toolbar] {
1284
+ display: flex;
1285
+ flex-wrap: wrap;
1286
+ align-items: center;
1287
+ align-content: center;
1288
+ justify-content: center;
1289
+ gap: var(--spacing, 5px);
1290
+ }
1291
+ [data-html-editor-element=toolbar] .command {
1292
+ display: flex;
1293
+ align-content: center;
1294
+ justify-content: center;
1295
+ align-items: center;
1296
+ justify-items: center;
1297
+ }
1298
+ [data-toolbar-item=separator] {
1299
+ background-color: #a9a9a9;
1300
+ margin-left: 4px;
1301
+ margin-right: 4px;
1302
+ display: inline-block;
1303
+ margin-top: 4px;
1304
+ height: 1rem;
1305
+ width: 2px;
1306
+ padding: 0;
1307
+ }
1479
1308
  .atom-control-html-editor {
1480
1309
  display: flex;
1481
1310
  flex-direction: column;
@@ -1530,6 +1359,177 @@ button[data-round-button=round-button] {
1530
1359
  .atom-control-html-editor .toolbar > .command .ri-bold {
1531
1360
  font-weight: bold;
1532
1361
  }
1362
+ [data-title-editor=title-editor] {
1363
+ display: inline-grid;
1364
+ grid-template-rows: 1fr auto;
1365
+ grid-template-columns: 1fr 40px;
1366
+ column-gap: 5px;
1367
+ }
1368
+ [data-title-editor=title-editor] > input {
1369
+ grid-row: 1 / span 2;
1370
+ grid-column: 1;
1371
+ }
1372
+ [data-title-editor=title-editor] > i {
1373
+ grid-row: 1;
1374
+ grid-column: 2;
1375
+ font-size: smaller;
1376
+ padding-left: 5px;
1377
+ padding-right: 5px;
1378
+ align-self: stretch;
1379
+ justify-self: stretch;
1380
+ text-align: center;
1381
+ }
1382
+ [data-title-editor=title-editor] > span {
1383
+ grid-row: 2;
1384
+ grid-column: 2;
1385
+ font-size: xx-small;
1386
+ align-self: stretch;
1387
+ justify-self: stretch;
1388
+ text-align: center;
1389
+ }
1390
+ *[data-item-chip] {
1391
+ padding: 2px;
1392
+ padding-left: 10px;
1393
+ padding-right: 10px;
1394
+ border-radius: 9999px;
1395
+ display: grid;
1396
+ align-items: center;
1397
+ grid-template-rows: auto 1fr;
1398
+ grid-template-columns: auto 1fr auto;
1399
+ }
1400
+ *[data-item-chip] > [data-content] {
1401
+ grid-row-start: 2;
1402
+ grid-column-start: 2;
1403
+ }
1404
+ *[data-item-chip] > .icon {
1405
+ grid-column-start: 1;
1406
+ grid-row-start: 1;
1407
+ grid-row-end: span 2;
1408
+ padding: 2px;
1409
+ padding-right: 4px;
1410
+ align-self: center;
1411
+ }
1412
+ *[data-item-chip] > .delete {
1413
+ grid-column-start: 3;
1414
+ grid-row-start: 1;
1415
+ grid-row-end: span 2;
1416
+ align-self: center;
1417
+ font-size: small;
1418
+ background-color: transparent;
1419
+ border-radius: 4px;
1420
+ padding: 2px;
1421
+ padding-left: 4px;
1422
+ color: gray;
1423
+ }
1424
+ *[data-item-chip] > .delete:hover {
1425
+ background-color: lightgray;
1426
+ color: red;
1427
+ }
1428
+ *[data-item-chip] > .header {
1429
+ font-size: x-small;
1430
+ grid-row-start: 1;
1431
+ grid-column-start: 2;
1432
+ text-align: center;
1433
+ }
1434
+ *[data-item-chip] > .label {
1435
+ grid-row-start: 2;
1436
+ grid-column-start: 2;
1437
+ }
1438
+ *[data-item-chip] > .delete-strike {
1439
+ grid-row: 1 / span 2;
1440
+ grid-column: 1 / span 2;
1441
+ height: 2px;
1442
+ background-color: red;
1443
+ align-self: center;
1444
+ }
1445
+ *[data-item-chip][data-deleted=false] > .delete-strike {
1446
+ display: none;
1447
+ }
1448
+ *[data-item-chip][data-deleted=true] {
1449
+ border: solid 1px red;
1450
+ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' preserveAspectRatio='none' viewBox='0 0 100 100'><path d='M100 0 L0 100 ' stroke='red' stroke-width='1'/><path d='M0 0 L100 100 ' stroke='red' stroke-width='1'/></svg>");
1451
+ }
1452
+ div[data-atom-chips] {
1453
+ flex-direction: row;
1454
+ align-items: center;
1455
+ justify-content: stretch;
1456
+ gap: 4px;
1457
+ display: flex;
1458
+ flex-flow: wrap;
1459
+ padding: 5px;
1460
+ }
1461
+ div[data-atom-chips] > .search {
1462
+ border: none;
1463
+ outline: none;
1464
+ flex: 1 1;
1465
+ }
1466
+ div[data-atom-chips] > .footer {
1467
+ margin-left: auto;
1468
+ }
1469
+ div[data-atom-chips] > .presenter {
1470
+ flex-direction: row;
1471
+ align-items: center;
1472
+ justify-content: flex-start;
1473
+ gap: 4px;
1474
+ display: inline-flex;
1475
+ flex-flow: wrap;
1476
+ }
1477
+ div[data-atom-chips] > .presenter > * {
1478
+ background-color: rgba(211, 211, 211, 0.3);
1479
+ color: var(--text-color, CanvasText);
1480
+ }
1481
+ div[data-atom-chips][data-mode=search] > .search {
1482
+ color: inherit;
1483
+ padding-left: 20px;
1484
+ background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' class='bi bi-search' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'%3E%3C/path%3E%3C/svg%3E") no-repeat 1px center;
1485
+ }
1486
+ div[data-atom-chips][data-mode=search] > .search::placeholder {
1487
+ color: inherit;
1488
+ opacity: 0.7;
1489
+ }
1490
+ *[data-item-suggestion] {
1491
+ padding: 1px;
1492
+ padding-left: 5px;
1493
+ padding-right: 5px;
1494
+ border-radius: 10px;
1495
+ display: grid;
1496
+ align-items: center;
1497
+ grid-template-rows: auto 1fr;
1498
+ grid-template-columns: auto 1fr auto;
1499
+ max-width: 100%;
1500
+ overflow-x: hidden;
1501
+ }
1502
+ *[data-item-suggestion] > [data-content] {
1503
+ grid-row-start: 2;
1504
+ grid-column-start: 2;
1505
+ }
1506
+ *[data-item-suggestion] > .icon {
1507
+ grid-column-start: 1;
1508
+ grid-row-start: 1;
1509
+ grid-row-end: span 2;
1510
+ align-self: center;
1511
+ margin-right: 5px;
1512
+ }
1513
+ *[data-item-suggestion] > .delete {
1514
+ grid-column-start: 3;
1515
+ grid-row-start: 1;
1516
+ grid-row-end: span 2;
1517
+ align-self: center;
1518
+ color: #ff0000;
1519
+ }
1520
+ *[data-item-suggestion] > .header {
1521
+ font-size: x-small;
1522
+ grid-row-start: 1;
1523
+ grid-column-start: 2;
1524
+ overflow: hidden;
1525
+ text-overflow: ellipsis;
1526
+ }
1527
+ *[data-item-suggestion] > .label {
1528
+ grid-row-start: 2;
1529
+ grid-column-start: 2;
1530
+ overflow: hidden;
1531
+ text-overflow: ellipsis;
1532
+ }
1533
1533
  .web-atoms-notification-popup {
1534
1534
  padding: 5px;
1535
1535
  font-size: larger;