Mercurial > nebulaweb3

comparison default/assets/scss/components/_chats.scss @ 0:1d038bc9b3d2 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
1 // main: ../style.scss
2 /********************************
3 *********************************
4 Chats
5 *********************************
6 *********************************/
7 .chatbox {
8 color: #444;
9 small {
10 color: #444;
11 }
12
13 > [class*="col"] {
14 height: 100%;
15 display: flex;
16 flex-direction: column;
17 }
18 }
19
20 .chatbox-body {
21 flex: 1;
22 }
23
24 .chatbox-header {
25 @extend %border-bottom;
26 height: rem(110);
27 display: flex;
28 align-items: center;
29 }
30
31 .chatbox-user-list {
32 .user-name {
33 line-height: 1;
34 }
35 small {
36 font-size: em(10);
37 }
38 .icon-box header a {
39 border: 1px solid rgba($content-color, .2);
40 }
41 .user-list-single {
42 padding: 0 ($spacer * 1);
43 position: relative;
44 margin-bottom: ($spacer * 1.5);
45 }
46 }
47
48 .chatbox-messages {
49 padding: $spacer;
50 .message {
51 margin-bottom: $spacer;
52 flex-flow: row-reverse;
53 align-items: flex-start;
54 figure {
55 margin-left: $spacer;
56 }
57 .media-body {
58 display: flex;
59 flex-direction: column;
60 align-items: flex-end;
61 }
62 p {
63 max-width: 50%;
64 margin-bottom: .5em;
65 padding: .5em 1em;
66 background: $color-scheme;
67 color: #fff;
68 border-radius: 3px;
69 position: relative;
70 &:first-child {
71 margin-top: .5em;
72 &::after,
73 &::before {
74 content: '';
75 @include position(absolute, 50% -7px null null);
76 @include size(0);
77 display: block;
78 border-style: solid;
79 border-width: 5px 0 5px 7px;
80 border-color: transparent transparent transparent $color-scheme;
81 transform: translateY(-50%);
82 border-radius: 0;
83 border-top-left-radius: 3px;
84 border-bottom-left-radius: 3px;
85 }
86 }
87 }
88 &.reply {
89 flex-flow: row;
90 align-items: flex-start;
91 .media-body {
92 align-items: flex-start;
93 }
94 figure {
95 margin-left: auto;
96 margin-right: $spacer;
97 }
98 p {
99 color: $content-color;
100 background: #fff;
101 border: 1px solid $theme-border-color;
102 border-radius: 3px;
103 &:first-child {
104 border-top-right-radius: 3px;
105 border-bottom-right-radius: 3px;
106 &::before {
107 @include position(null, null auto null -8px);
108 border-width: 5px 7px 5px 0;
109 border-color: transparent $theme-border-color transparent transparent;
110 }
111 &::after {
112 @include position(null, null auto null -7px);
113 border-width: 5px 7px 5px 0;
114 border-color: transparent #fff transparent transparent;
115 }
116 }
117 }
118 }
119 }
120
121 body.rtl & {
122 .message {
123 figure {
124 margin-left: 0;
125 margin-right: $spacer;
126 }
127 p {
128 &:first-child {
129 border-radius: 0;
130 border-top-right-radius: 3px;
131 border-bottom-right-radius: 3px;
132 &::before,
133 &::after {
134 right: auto;
135 left: -7px;
136 border-width: 5px 7px 5px 0;
137 border-color: transparent $color-scheme transparent transparent;
138 }
139 }
140 }
141 &.reply {
142 p {
143 &:first-child {
144 border-radius: 0;
145 border-top-left-radius: 3px;
146 border-bottom-left-radius: 3px;
147 &::before,
148 &::after {
149 left: auto;
150 right: -7px;
151 border-width: 5px 0 5px 7px;
152 border-color: transparent transparent transparent $theme-border-color;
153 }
154
155 &::after {
156 right: -6px;
157 border-color: transparent transparent transparent #fff;
158 }
159 }
160 }
161
162 figure {
163 margin-right: 0;
164 margin-left: $spacer;
165 }
166 }
167 }
168 }
169 }