@mobilon-dev/chotto 0.0.2 → 0.0.4

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 (8) hide show
  1. package/dist/dark.css +78 -0
  2. package/dist/global.css +45 -0
  3. package/dist/light.css +78 -0
  4. package/dist/style.css +1 -1
  5. package/dist/variables.css +132 -0
  6. package/dist/vuessages.es.js +356 -243
  7. package/dist/vuessages.umd.js +1 -1
  8. package/package.json +48 -46
package/dist/dark.css ADDED
@@ -0,0 +1,78 @@
1
+ @import url("variables.css");
2
+
3
+ :root {
4
+
5
+ /* Inputs */
6
+ --d-inputtext-background: var(transparent);
7
+ --d-inputtext-color: var(--neutral-200);
8
+ --d-inputtext-border: 1px solid var(--neutral-200);
9
+ --d-inputtext-placeholder-color: var(--neutral-400);
10
+
11
+ --d-inputtext-hover-border-color: var(--neutral-400);
12
+ --d-inputtext-focus-border-color: var(--neutral-600);
13
+
14
+ /* Avatars */
15
+
16
+ --d-avatar-background-color: var(--neutral-300);
17
+ --d-avatar-icon-color: var(--neutral-500);
18
+
19
+ /* Icons */
20
+
21
+ --d-icon-color: var(--neutral-300);
22
+
23
+ /* Modals */
24
+
25
+ --d-modal-background-color: var(--neutral-900);
26
+
27
+ /* _____________________________________________ */
28
+
29
+ /* Chat Item */
30
+
31
+ /* Info Container */
32
+ --d-chat-item-selected: var(--neutral-700);
33
+ --d-chat-item-color-last-name: var(--neutral-400);
34
+
35
+ /* Details Container */
36
+ --d-chat-item-color-unread: var(--neutral-900);
37
+ --d-chat-item-background-color-unread: var(--emerald-500);
38
+
39
+ /* _____________________________________________ */
40
+
41
+ /* Text Message */
42
+
43
+ --d-text-message-right-background-color: var(--emerald-800);
44
+ --d-text-message-left-background-color: var(--neutral-700);
45
+ --d-text-message-text-color: var(--neutral-200);
46
+
47
+ /* File Message */
48
+
49
+ --d-file-message-background-color: var(--neutral-700);
50
+ --d-file-message-link-color: var(--neutral-200);
51
+
52
+ /* _____________________________________________ */
53
+
54
+ /* Audio Message */
55
+
56
+ --d-audio-message-background-left: var(--neutral-700);
57
+ --d-audio-message-background-right: var(--emerald-800);
58
+
59
+ --d-audio-message-button-background-color-left: var(--neutral-400);
60
+ --d-audio-message-button-background-color-right: var(--neutral-400);
61
+ --d-audio-message-button-icon-color-left: var(--neutral-800);
62
+ --d-audio-message-button-icon-color-right: var(--neutral-800);
63
+
64
+
65
+ /* progress-bar-container -> pbc */
66
+
67
+ --d-audio-message-pbc-background-color: var(--neutral-400);
68
+
69
+ /* progress-bar -> pb */
70
+
71
+ --d-audio-message-pb-background-color: var(--emerald-600);
72
+
73
+ /* _____________________________________________ */
74
+
75
+
76
+ /* Chat Input */
77
+ --d-chat-input-background: var(--neutral-700);
78
+ }
package/dist/global.css ADDED
@@ -0,0 +1,45 @@
1
+ @import url("variables.css");
2
+ @import url("light.css");
3
+ @import url("dark.css");
4
+
5
+ *,
6
+ *::before,
7
+ *::after {
8
+ box-sizing: border-box;
9
+ }
10
+
11
+ body {
12
+ margin: 0;
13
+ }
14
+
15
+ #app {
16
+ position: relative;
17
+ width: 100%;
18
+ display: flex;
19
+ flex-direction: column;
20
+ min-height: 100vh;
21
+ font-family: 'Montserrat', sans-serif;
22
+ font-weight: 400;
23
+ color: var(--neutral-900);
24
+ }
25
+
26
+ .dark #app {
27
+ color: var(--neutral-100);
28
+ background-color: var(--neutral-900);
29
+ }
30
+
31
+ ul {
32
+ margin: 0;
33
+ padding: 0;
34
+ list-style-type: none;
35
+ }
36
+
37
+ p,
38
+ h1,
39
+ h2 {
40
+ margin: 0;
41
+ }
42
+
43
+ a {
44
+ text-decoration: none;
45
+ }
package/dist/light.css ADDED
@@ -0,0 +1,78 @@
1
+ @import url("variables.css");
2
+
3
+ :root {
4
+
5
+ /* Inputs */
6
+ --inputtext-background: var(transparent);
7
+ --inputtext-color: var(--neutral-700);
8
+ --inputtext-border: 1px solid var(--neutral-400);
9
+ --inputtext-placeholder-color: var(--neutral-500);
10
+
11
+ --inputtext-hover-border-color: var(--neutral-500);
12
+ --inputtext-focus-border-color: var(--neutral-700);
13
+
14
+ /* Avatars */
15
+
16
+ --avatar-background-color: var(--neutral-300);
17
+ --avatar-icon-color: var(--neutral-500);
18
+
19
+ /* Icons */
20
+
21
+ --icon-color: var(--neutral-600);
22
+
23
+ /* Modals */
24
+
25
+ --modal-background-color: var(--default-white);
26
+
27
+ /* _____________________________________________ */
28
+
29
+ /* Chat Item */
30
+
31
+ /* Info Container */
32
+ --chat-item-selected: var(--neutral-200);
33
+ --chat-item-color-last-name: var(--neutral-400);
34
+
35
+ /* Details Container */
36
+ --chat-item-color-unread: var(--neutral-100);
37
+ --chat-item-background-color-unread: var(--emerald-500);
38
+
39
+ /* _____________________________________________ */
40
+
41
+ /* Text Message */
42
+
43
+ --text-message-right-background-color: var(--emerald-200);
44
+ --text-message-left-background-color: var(--neutral-200);
45
+ --text-message-text-color: var(--neutral-700);
46
+
47
+ /* File Message */
48
+
49
+ --file-message-background-color: var(--neutral-200);
50
+ --file-message-link-color: var(--neutral-700);
51
+
52
+ /* _____________________________________________ */
53
+
54
+ /* Audio Message */
55
+
56
+ --audio-message-background-left: var(--neutral-200);
57
+ --audio-message-background-right: var(--emerald-200);
58
+
59
+ --audio-message-button-background-color-left: var(--neutral-400);
60
+ --audio-message-button-background-color-right: var(--neutral-100);
61
+ --audio-message-button-icon-color-left: var(--neutral-100);
62
+ --audio-message-button-icon-color-right: var(--neutral-500);
63
+
64
+
65
+ /* progress-bar-container -> pbc */
66
+
67
+ --audio-message-pbc-background-color: var(--neutral-400);
68
+
69
+ /* progress-bar -> pb */
70
+
71
+ --audio-message-pb-background-color: var(--emerald-500);
72
+
73
+ /* _____________________________________________ */
74
+
75
+
76
+ /* Chat Input */
77
+ --chat-input-background: var(--neutral-200);
78
+ }
package/dist/style.css CHANGED
@@ -1 +1 @@
1
- .chat[data-v-77b8ac34]{cursor:pointer;padding:8px;border-bottom:1px solid #ccc}.chat-item[data-v-b194d366]{display:flex;align-items:center;padding:15px;border-bottom:1px solid #eee;cursor:pointer}.chat-item-selected[data-v-b194d366]{display:flex;align-items:center;padding:15px;background:#bbb;border-bottom:1px solid #a09d9d;cursor:pointer}.avatar[data-v-b194d366]{width:50px;height:50px;border-radius:50%;background-size:cover;margin-right:15px}.chat-info[data-v-b194d366]{flex-grow:1;margin-right:15px}.name[data-v-b194d366]{font-weight:700;font-size:16px;margin-bottom:5px}.last-message[data-v-b194d366]{font-size:14px;color:#888}.chat-details[data-v-b194d366]{display:flex;align-items:center}.unread[data-v-b194d366]{background-color:red;color:#fff;padding:5px 8px;border-radius:50%;font-size:12px;margin-right:10px}.time[data-v-b194d366]{font-size:12px;color:#888}.file-message a[data-v-18efd407]{color:#00f;text-decoration:underline}.image-message[data-v-1f459534]{max-width:300px;max-height:240px;height:auto;border-radius:5px}.image-message-left[data-v-1f459534]{background-color:#c3e8ba;max-height:50px;min-width:300px;border-radius:10px;padding:10px;margin-bottom:10px;max-width:70%;text-align:left;position:relative;justify-content:flex-start;flex-basis:200px;flex-grow:2;align-self:flex-start}.image-message-right[data-v-1f459534]{background-color:#f5f5f5;max-height:50px;min-width:300px;border-radius:10px;padding:10px;margin-bottom:10px;max-width:70%;position:relative;justify-content:flex-end;flex-basis:500px;flex-grow:2;align-self:flex-end}.message-time[data-v-1f459534]{font-size:12px;color:#777;margin-left:10px}.text-message-left[data-v-c807c835]{background-color:#c3e8ba;max-height:50px;min-width:300px;border-radius:10px;padding:10px;margin-bottom:10px;max-width:70%;text-align:left;position:relative;justify-content:flex-start;flex-basis:200px;flex-grow:2;align-self:flex-start}.text-message-right[data-v-c807c835]{background-color:#f5f5f5;max-height:50px;min-width:300px;border-radius:10px;padding:10px;margin-bottom:10px;max-width:70%;position:relative;justify-content:flex-end;flex-basis:500px;flex-grow:2;align-self:flex-end}.message-time[data-v-c807c835]{font-size:12px;color:#777;margin-left:10px}.chat-info[data-v-7ca4835c]{padding:16px}.chat-input[data-v-07719b64]{padding:10px}.chat-input input[data-v-07719b64]{flex:1;width:500px;padding:10px;border:1px solid #ece5dd;border-radius:20px}.chat-input button[data-v-07719b64]{padding:10px;margin-left:10px;border:none;background-color:#25d366;color:#fff;border-radius:20px;cursor:pointer}.chat-input button[data-v-07719b64]:hover{background-color:#128c7e}.chat-list[data-v-fafd9097],.chat-list[data-v-1fd0e46c]{max-height:400px;overflow-y:auto;grid-column:span 1}.message-container{display:flex;align-items:center;margin-bottom:10px;padding:8px 12px;border-radius:10px}.message-container.sent{background-color:#e0f2f7;color:#333;margin-left:auto}.message-container.received{background-color:#f5f5f5;color:#000;margin-right:auto}.message-content{margin-right:10px}.chat-image{max-width:200px;max-height:150px;cursor:pointer}.preview-container{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;padding:20px;border-radius:10px;z-index:100}.preview-image{max-width:80%;max-height:80vh}.message-info{display:flex;align-items:center;margin-left:10px}.message-status{font-size:12px}.status{margin-left:5px}.status.read{color:#34a853}.status.delivered{color:#333}.status.sending{color:#777}.message-time{font-size:12px;color:#777;margin-left:10px}.dateMessage[data-v-2d53fb22]{display:flex;align-items:center;justify-content:center;margin:0 auto;padding:15px 0;width:150px;height:40px}.dateMessage__text[data-v-2d53fb22]{width:100%;padding:10px 15px;border-radius:15px;background-color:#fff;-webkit-box-shadow:0 2px 5px 0 rgba(193,193,193,.26),0 2px 10px 0 rgba(193,193,193,.16);-moz-box-shadow:0 2px 5px 0 rgba(193,193,193,.26),0 2px 10px 0 rgba(193,193,193,.16);box-shadow:0 2px 5px #c1c1c142,0 2px 10px #c1c1c129;font-size:16px;font-weight:600;color:#000000b3;text-align:center}.audio-message-left[data-v-127acb40]{background-color:#c3e8ba;max-height:50px;min-width:300px;border-radius:10px;padding:10px;margin-bottom:10px;max-width:70%;text-align:left;position:relative;justify-content:flex-start;flex-basis:200px;flex-grow:2;align-self:flex-start}.audio-message-right[data-v-127acb40]{background-color:#f5f5f5;max-height:50px;min-width:300px;border-radius:10px;padding:10px;margin-bottom:10px;max-width:70%;position:relative;justify-content:flex-end;flex-basis:500px;flex-grow:2;align-self:flex-end}.message-time[data-v-127acb40]{font-size:12px;color:#777;margin-left:10px}.message-feed[data-v-37208651]{flex:1;max-height:600px;height:500px;max-width:800px;overflow:auto;display:flex;flex-direction:column;gap:5px}.profile[data-v-e1bf37ef]{padding:16px}
1
+ .chat[data-v-77b8ac34]{cursor:pointer;padding:8px;border-bottom:1px solid #ccc}.chat-item__container[data-v-abade668]{display:flex;align-items:center;padding:15px;cursor:pointer}.chat-item__selected[data-v-abade668]{border-radius:6px;cursor:pointer;background:var(--chat-item-selected)}.chat-item__avatar-container[data-v-abade668]{display:flex;justify-content:center;align-items:center;object-fit:cover;margin-right:15px;background-color:var(--avatar-background-color);width:var(--avatar-width);height:var(--avatar-height);border-radius:var(--avatar-border-radius)}.chat-item__avatar-container span[data-v-abade668]{font-size:var(--avatar-icon-size);color:var(--avatar-icon-color)}.chat-item__info-container[data-v-abade668]{flex-grow:1;margin-right:15px}.chat-item__name[data-v-abade668]{margin-bottom:5px;font-weight:600;font-size:var(--chat-item-font-size-name)}.chat-item__last-message[data-v-abade668]{font-weight:500;font-size:var(--chat-item-font-size-last-message);color:var(--chat-item-color-last-name)}.chat-item__details-container[data-v-abade668]{margin-bottom:auto}.chat-item__unread[data-v-abade668]{display:flex;justify-content:center;align-items:center;border-radius:50%;font-weight:400;margin-left:auto;min-width:var(--chat-item-min-width-unread);min-height:var(--chat-item-min-height-unread);color:var(--chat-item-color-unread);background-color:var(--chat-item-background-color-unread);font-size:var(--chat-item-font-size-unread)}.chat-item__time[data-v-abade668]{font-size:12px;color:var(--neutral-400);font-weight:500;margin-bottom:8px}.dark .chat-item__selected[data-v-abade668]{background:var(--d-chat-item-selected)}.dark .chat-item__avatar-container[data-v-abade668]{background-color:var(--d-avatar-background-color)}.dark .chat-item__avatar-container span[data-v-abade668]{color:var(--d-avatar-icon-color)}.dark .chat-item__last-message[data-v-abade668]{color:var(--d-chat-item-color-last-name)}.dark .chat-item__unread[data-v-abade668]{background-color:var(--d-chat-item-background-color-unread);color:var(--d-chat-item-color-unread)}.file-message__container[data-v-d65084f4]{position:relative;width:fit-content;margin:var(--file-message-margin);border-radius:var(--file-message-border-radius);background-color:var(--file-message-background-color)}.file-message__link[data-v-d65084f4]{display:flex;justify-content:flex-start;align-items:center;column-gap:var(--file-message-gap);color:var(--file-message-link-color);padding:var(--file-message-padding)}.file-message__link span[data-v-d65084f4]{font-size:var(--icon-font-size-medium);color:var(--icon-color)}.file-message__time[data-v-d65084f4]{font-size:12px;position:absolute;bottom:4px;right:8px}.dark .file-message__container[data-v-d65084f4]{background-color:var(--d-file-message-background-color)}.dark .file-message__link[data-v-d65084f4]{color:var(--d-file-message-link-color)}.dark .file-message__link span[data-v-d65084f4]{color:var(--d-icon-color)}.image-message[data-v-9abe971c]{max-width:300px;max-height:240px;height:auto;border-radius:5px}.image-message-left[data-v-9abe971c]{background-color:#c3e8ba;max-height:50px;min-width:300px;border-radius:10px;padding:10px;margin-bottom:10px;max-width:70%;text-align:left;position:relative;justify-content:flex-start;flex-basis:200px;flex-grow:2;align-self:flex-start}.image-message-right[data-v-9abe971c]{background-color:#f5f5f5;max-height:50px;min-width:300px;border-radius:10px;padding:10px;margin-bottom:10px;max-width:70%;position:relative;justify-content:flex-end;flex-basis:500px;flex-grow:2;align-self:flex-end}.message-time[data-v-9abe971c]{font-size:12px;color:#777;margin-left:10px}.text-message__time[data-v-a831158c]{font-size:12px;position:absolute;bottom:4px;right:8px}.text-message__left[data-v-a831158c],.text-message__right[data-v-a831158c]{position:relative;width:fit-content;word-wrap:break-word;padding:var(--text-message-padding);margin:var(--text-message-margin);max-width:var(--text-message-max-width);border-radius:var(--text-message-border-radius)}.text-message__left[data-v-a831158c]{background-color:var(--text-message-left-background-color);color:var(--text-message-text-color)}.text-message__right[data-v-a831158c]{margin-left:auto;background-color:var(--text-message-right-background-color);color:var(--text-message-text-color)}.dark .text-message__left[data-v-a831158c]{background-color:var(--d-text-message-left-background-color);color:var(--d-text-message-text-color)}.dark .text-message__right[data-v-a831158c]{background-color:var(--d-text-message-right-background-color);color:var(--d-text-message-text-color)}.chat-info__container[data-v-798557ec]{padding:20px 15px 20px 40px;display:grid;grid-template-columns:min-content auto;column-gap:20px;border-bottom:1px solid var(--neutral-300)}.chat-info__avatar-container[data-v-798557ec]{display:flex;justify-content:center;align-items:center;background-color:var(--neutral-300);width:var(--avatar-width);height:var(--avatar-height);border-radius:var(--avatar-border-radius);background-size:cover;grid-row:1/3}.chat-info__avatar-container span[data-v-798557ec]{font-size:var(--avatar-icon-size);color:var(--avatar-icon-color)}.chat-info__title[data-v-798557ec]{font-size:18px;font-weight:700;grid-column:2}.chat-info__time[data-v-798557ec]{font-size:14px;font-weight:500;color:var(--neutral-400);grid-column:2}.dark .chat-info__container[data-v-798557ec]{border-bottom:1px solid var(--neutral-500)}.dark .chat-info__avatar-container[data-v-798557ec]{background-color:var(--d-avatar-background-color)}.dark .chat-info__avatar-container span[data-v-798557ec]{color:var(--d-avatar-icon-color)}.chat-input[data-v-07719b64]{padding:10px}.chat-input input[data-v-07719b64]{flex:1;width:500px;padding:10px;border:1px solid #ece5dd;border-radius:20px}.chat-input button[data-v-07719b64]{padding:10px;margin-left:10px;border:none;background-color:#25d366;color:#fff;border-radius:20px;cursor:pointer}.chat-input button[data-v-07719b64]:hover{background-color:#128c7e}.chat-list[data-v-fafd9097]{max-height:400px;overflow-y:auto;grid-column:span 1}.chat-filter__input[data-v-bacb0798]{width:var(--inputtext-width);color:var(--inputtext-color);background-color:var(--inputtext-background);font-family:Montserrat,sans-serif;font-weight:400;padding:var(--inputtext-padding);border:var(--inputtext-border);border-radius:var(--inputtext-border-radius);font-size:var(--inputtext-font-size);transition:border-color var(--inputtext-transition-duration)}.chat-filter__input[data-v-bacb0798]::placeholder{color:var(--inputtext-placeholder-color)}.chat-filter__input[data-v-bacb0798]:hover{border-color:var(--inputtext-hover-border-color)}.chat-filter__input[data-v-bacb0798]:focus-visible{border-color:var(--inputtext-focus-border-color);outline:none}.dark .chat-filter__input[data-v-bacb0798]{color:var(--d-inputtext-color);background-color:var(--d-inputtext-background);border:var(--d-inputtext-border)}.dark .chat-filter__input[data-v-bacb0798]::placeholder{color:var(--d-inputtext-placeholder-color)}.dark .chat-filter__input[data-v-bacb0798]:hover{border-color:var(--d-inputtext-hover-border-color)}.dark .chat-filter__input[data-v-bacb0798]:focus-visible{border-color:var(--d-inputtext-focus-border-color)}.chat-list[data-v-69ebd00b]{background-color:transparent}.chat-list__container[data-v-69ebd00b]{padding:30px 0;height:100vh;display:flex;flex-direction:column}.chat-list__filter[data-v-69ebd00b]{margin:0 30px 30px 0}.chat-list__items[data-v-69ebd00b]{overflow:auto;padding-right:20px}.chat-list__items[data-v-69ebd00b]::-webkit-scrollbar{width:6px;background-color:var(--neutral-50)}.chat-list__items[data-v-69ebd00b]::-webkit-scrollbar-thumb{border-radius:10px;background-color:var(--neutral-300)}.chat-list__items[data-v-69ebd00b]::-webkit-scrollbar-track{border-radius:10px}.chat-list__title[data-v-69ebd00b]{font-size:var(--h2-font-size);font-weight:var(--h2-font-weight);margin-bottom:20px}.dark .chat-list[data-v-69ebd00b]::-webkit-scrollbar{background-color:var(--neutral-500)}.dark .chat-list[data-v-69ebd00b]::-webkit-scrollbar-thumb{background-color:var(--neutral-200)}.image-message__container[data-v-85d6dbfc]{position:relative;margin-bottom:var(--image-message-margin);max-width:var(--image-message-max-width)}.image-message__time[data-v-85d6dbfc]{font-size:12px;position:absolute;bottom:8px;right:8px}.image-message__button[data-v-85d6dbfc]{border:none;background-color:transparent;cursor:pointer;padding:0}.image-message__preview-image[data-v-85d6dbfc]{width:100%;border-radius:5px}.image-message__modal-image[data-v-85d6dbfc]{width:100%;height:100%;object-fit:cover;border-radius:5px}.image-message__modal[data-v-85d6dbfc]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:101;background-color:var(--modal-background-color);border-radius:var(--modal-border-radius);padding:var(--modal-padding);width:var(--modal-width);box-shadow:var(--modal-overlay-shadow)}.image-message__modal-overlay[data-v-85d6dbfc]{position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--modal-mask-background);z-index:100}.image-message__modal-close-button[data-v-85d6dbfc]{display:block;background-color:transparent;border:none;padding:4px;margin:0 0 14px auto;cursor:pointer}.image-message__modal-close-button span[data-v-85d6dbfc]{color:var(--icon-color);font-size:var(--icon-font-size-medium)}.modal-fade-enter-active[data-v-85d6dbfc],.modal-fade-leave-active[data-v-85d6dbfc]{transition:opacity .2s ease}.modal-fade-enter-from[data-v-85d6dbfc],.modal-fade-leave-to[data-v-85d6dbfc]{opacity:0}.modal-fade-enter-to[data-v-85d6dbfc],.modal-fade-leave-from[data-v-85d6dbfc]{opacity:1}.dark .image-message__time[data-v-85d6dbfc]{color:var(--neutral-200)}.dark .image-message__modal[data-v-85d6dbfc]{background-color:var(--d-modal-background-color);border:1px solid var(--neutral-500)}.dark .image-message__modal-close-button span[data-v-85d6dbfc]{color:var(--d-icon-color)}.date-message__container[data-v-3b340776]{display:flex;align-items:center;justify-content:center;margin:0 auto 18px;padding:8px 14px;width:fit-content}.date-message__text[data-v-3b340776]{font-size:12px;font-weight:500;color:var(--neutral-700)}.dark .date-message__text[data-v-3b340776]{color:var(--neutral-200)}.audio-message__container[data-v-8b044fcf]{position:relative;display:grid;grid-template-columns:min-content 1fr;column-gap:var(--audio-message-gap);padding:var(--audio-message-padding);max-width:var(--audio-message-max-width);margin:var(--audio-message-margin);border-radius:var(--audio-message-border-radius)}.audio-message__play[data-v-8b044fcf],.audio-message__pause[data-v-8b044fcf]{border:none;cursor:pointer;position:relative;grid-row:1/3;width:var(--audio-message-button-width);height:var(--audio-message-button-height);border-radius:var(--audio-message-button-border-radius)}.audio-message__play span[data-v-8b044fcf],.audio-message__pause span[data-v-8b044fcf]{display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:var(--icon-font-size-medium)}.audio-message__progress-bar-container[data-v-8b044fcf]{position:relative;width:100%;height:var(--audio-message-pbc-height);border-radius:var(--audio-message-pbc-border-radius);margin:var(--audio-message-pbc-margin);background-color:var(--audio-message-pbc-background-color)}.audio-message__progress-bar[data-v-8b044fcf]{position:absolute;left:0;top:0;bottom:0;transition:width .2s ease-in-out;border-radius:var(--audio-message-pb-border-radius);background-color:var(--audio-message-pb-background-color)}.audio-message__remaining-time[data-v-8b044fcf]{font-size:12px;grid-column:2;margin-bottom:-10px}.audio-message__time[data-v-8b044fcf]{font-size:12px;position:absolute;bottom:4px;right:8px}.audio-message__left .audio-message__container[data-v-8b044fcf]{background-color:var(--audio-message-background-left)}.audio-message__left .audio-message__play[data-v-8b044fcf],.audio-message__left .audio-message__pause[data-v-8b044fcf]{background-color:var(--audio-message-button-background-color-left)}.audio-message__left .audio-message__play span[data-v-8b044fcf],.audio-message__left .audio-message__pause span[data-v-8b044fcf]{color:var(--audio-message-button-icon-color-left)}.audio-message__right .audio-message__container[data-v-8b044fcf]{background-color:var(--audio-message-background-right)}.audio-message__right .audio-message__play[data-v-8b044fcf],.audio-message__right .audio-message__pause[data-v-8b044fcf]{background-color:var(--audio-message-button-background-color-right)}.audio-message__right .audio-message__play span[data-v-8b044fcf],.audio-message__right .audio-message__pause span[data-v-8b044fcf]{color:var(--audio-message-button-icon-color-right)}.dark .audio-message__left .audio-message__container[data-v-8b044fcf]{background-color:var(--d-audio-message-background-left)}.dark .audio-message__left .audio-message__play[data-v-8b044fcf],.dark .audio-message__left .audio-message__pause[data-v-8b044fcf]{background-color:var(--d-audio-message-button-background-color-left)}.dark .audio-message__left .audio-message__play span[data-v-8b044fcf],.dark .audio-message__left .audio-message__pause span[data-v-8b044fcf]{color:var(--d-audio-message-button-icon-color-left)}.dark .audio-message__right .audio-message__container[data-v-8b044fcf]{background-color:var(--d-audio-message-background-right)}.dark .audio-message__right .audio-message__play[data-v-8b044fcf],.dark .audio-message__right .audio-message__pause[data-v-8b044fcf]{background-color:var(--d-audio-message-button-background-color-right)}.dark .audio-message__right .audio-message__play span[data-v-8b044fcf],.dark .audio-message__right .audio-message__pause span[data-v-8b044fcf]{color:var(--d-audio-message-button-icon-color-right)}.dark .audio-message__progress-bar-container[data-v-8b044fcf]{background-color:var(--d-audio-message-pbc-background-color)}.dark .audio-message__progress-bar[data-v-8b044fcf]{background-color:var(--d-audio-message-pb-background-color)}.message-feed[data-v-bab826c9]{height:fit-content;margin-top:auto;padding:0 80px 50px;overflow-y:auto}.message-feed[data-v-bab826c9]::-webkit-scrollbar{width:6px;background-color:var(--neutral-50)}.message-feed[data-v-bab826c9]::-webkit-scrollbar-thumb{border-radius:10px;background-color:var(--neutral-300)}.message-feed[data-v-bab826c9]::-webkit-scrollbar-track{border-radius:10px}.dark .message-feed[data-v-bab826c9]::-webkit-scrollbar{background-color:var(--neutral-500)}.dark .message-feed[data-v-bab826c9]::-webkit-scrollbar-thumb{background-color:var(--neutral-200)}.profile[data-v-e1bf37ef]{padding:16px}
package/dist/variables.css ADDED
@@ -0,0 +1,132 @@
1
+ /* Colors */
2
+
3
+ :root {
4
+
5
+ /* General */
6
+
7
+ --emerald-50: #ecfdf5;
8
+ --emerald-100: #d1fae5;
9
+ --emerald-200: #a7f3d0;
10
+ --emerald-300: #6ee7b7;
11
+ --emerald-400: #34d399;
12
+ --emerald-500: #10b981;
13
+ --emerald-600: #059669;
14
+ --emerald-700: #047857;
15
+ --emerald-800: #065f46;
16
+ --emerald-900: #064e3b;
17
+ --emerald-950: #022c22;
18
+
19
+ --neutral-50: #fafafa;
20
+ --neutral-100: #f5f5f5;
21
+ --neutral-200: #e5e5e5;
22
+ --neutral-300: #d4d4d4;
23
+ --neutral-400: #a3a3a3;
24
+ --neutral-500: #737373;
25
+ --neutral-600: #525252;
26
+ --neutral-700: #404040;
27
+ --neutral-800: #262626;
28
+ --neutral-900: #171717;
29
+ --neutral-950: #0a0a0a;
30
+
31
+ --default-white: #ffffff;
32
+
33
+
34
+ /* Inputs */
35
+
36
+ --inputtext-font-size: 1rem;
37
+ --inputtext-padding: 0.5rem 0.75rem;
38
+ --inputtext-width: 100%;
39
+ --inputtext-border-radius: 6px;
40
+
41
+ --inputtext-transition-duration: 0.2s;
42
+
43
+ /* Titles */
44
+
45
+ --h2-font-size: 28px;
46
+ --h2-font-weight: 600;
47
+
48
+ /* Avatars */
49
+
50
+ --avatar-width: 48px;
51
+ --avatar-height: 48px;
52
+ --avatar-border-radius: 50%;
53
+ --avatar-icon-size: 1.5rem;
54
+
55
+ /* Icons */
56
+
57
+ --icon-font-size-medium: 1.3rem;
58
+ --icon-font-size-large: 1.6rem;
59
+
60
+ /* Modals */
61
+
62
+ --modal-padding: 20px;
63
+ --modal-width: 45%;
64
+ --modal-border-radius: 12px;
65
+ --modal-mask-background: rgba(0, 0, 0, 0.4);
66
+ --modal-overlay-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px 8px 10px -6px rgba(0, 0, 0, 0.1);
67
+
68
+ /* Chat Item */
69
+
70
+ /* Info Container */
71
+ --chat-item-font-size-name: 16px;
72
+ --chat-item-font-size-last-message: 14px;
73
+
74
+ /* Details Container */
75
+ --chat-item-min-width-unread: 24px;
76
+ --chat-item-min-height-unread: 24px;
77
+ --chat-item-font-size-unread: 14px;
78
+
79
+
80
+ /* Text Message */
81
+
82
+ --text-message-border-radius: 14px;
83
+ --text-message-max-width: 40%;
84
+ --text-message-margin: 0 0 10px 0;
85
+ --text-message-padding: 12px 60px 12px 16px;
86
+
87
+ /* File Message */
88
+
89
+ --file-message-border-radius: 14px;
90
+ --file-message-gap: 12px;
91
+ --file-message-margin: 0 0 10px 0;
92
+ --file-message-padding: 12px 60px 12px 16px;
93
+
94
+ /* Image Message */
95
+
96
+ --image-message-max-width: 40%;
97
+ --image-message-margin: 0 0 10px 0;
98
+
99
+ /* _____________________________________________ */
100
+
101
+ /* Audio Message */
102
+
103
+ --audio-message-gap: 12px;
104
+ --audio-message-max-width: 40%;
105
+ --audio-message-border-radius: 14px;
106
+ --audio-message-padding: 12px 16px;
107
+ --audio-message-margin: 0 0 10px 0;
108
+
109
+ --audio-message-button-width: 38px;
110
+ --audio-message-button-height: 38px;
111
+ --audio-message-button-border-radius: 50%;
112
+
113
+
114
+ /* progress-bar-container -> pbc */
115
+
116
+ --audio-message-pbc-border-radius: 10px;
117
+ --audio-message-pbc-height: 8px;
118
+ --audio-message-pbc-background-color: var(--neutral-400);
119
+ --audio-message-pbc-margin: 8px 0 0 0;
120
+
121
+ /* progress-bar -> pb */
122
+
123
+ --audio-message-pb-border-radius: 10px;
124
+
125
+ /* remaining-time -> rt */
126
+
127
+ --audio-message-rt-font-size: 12px;
128
+ /* _____________________________________________ */
129
+
130
+ /* Chat Input */
131
+ --chat-input-button-padding: 14px;
132
+ }