Mercurial > libervia-templates

comparison sat_templates/templates/bulma/static/chat.css @ 405:5016fb0ff62f default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Blog redesign: work in progress redesign of the blog. Some templates have been moved from chat to components to be re-used in other features, like blog here. Blog follows same global design as chat with a left panel to search/open blogs.
author Goffi <goffi@goffi.org>
date Wed, 21 May 2025 15:41:00 +0200
parents 66f98ee041d8
children
comparison
equal deleted inserted replaced
404:66f98ee041d8 405:5016fb0ff62f
11 11
12 /* Message colors */ 12 /* Message colors */
13 --message-background: #f5f5f5; 13 --message-background: #f5f5f5;
14 --message-hover-background: #e8e8e8; 14 --message-hover-background: #e8e8e8;
15 15
16 /* Reaction colors */
17 --reaction-background: #ffffff;
18 --reaction-hover-background: #f5f5f5;
19 --reaction-border: #dbdbdb;
20
21 /* User reaction colors */
22 --reaction-user-background: #eef6fc;
23 --reaction-user-hover-background: #e3f1fc;
24 --reaction-user-border: #3273dc;
25
26 /* Spacing */
27 --reaction-padding: 0.25rem 0.5rem;
28 --reaction-gap: 0.5rem;
29 --reaction-margin-top: 0.5rem;
30
31 /* Typography */
32 --reaction-font-size: 0.875rem;
33 --reaction-counter-font-size: 0.75rem;
34 } 16 }
35 17
36 [data-theme="dark"] .chat-main { 18 [data-theme="dark"] .chat-main {
37 --color-background: #2c2c2c; 19 --color-background: #2c2c2c;
38 --color-text: #ffffff; 20 --color-text: #ffffff;
39 21
40 --message-background: #363636; 22 --message-background: #363636;
41 --message-hover-background: #404040; 23 --message-hover-background: #404040;
42 24
43 --reaction-background: #2c2c2c;
44 --reaction-hover-background: #404040;
45 --reaction-border: #4a4a4a;
46
47 --reaction-user-background: #1a3b5c;
48 --reaction-user-hover-background: #234875;
49 --reaction-user-border: #3273dc;
50 } 25 }
51 26
52 .chat-container { 27 .chat-container {
53 height: 100%; 28 height: 100%;
54 overflow-y: auto; 29 overflow-y: auto;
56 31
57 .chat-main { 32 .chat-main {
58 height: 100%; 33 height: 100%;
59 display: flex; 34 display: flex;
60 flex-direction: column; 35 flex-direction: column;
61 }
62
63 .chat-header {
64 border-bottom: 1px solid #dbdbdb;
65 padding: 0.5rem 1rem;
66 }
67
68
69 /* Sidebar toggle transitions */
70 .chat-sidebar, .chat-details {
71 transition: transform 0.3s ease, max-width 0.3s ease, opacity 0.3s ease;
72 overflow-x: hidden;
73 }
74
75 .chat-sidebar.is-collapsed {
76 transform: translateX(-100%);
77 max-width: 0;
78 padding: 0;
79 margin: 0;
80 opacity: 0;
81 }
82
83 .chat-details.is-collapsed {
84 transform: translateX(100%);
85 max-width: 0;
86 padding: 0;
87 margin: 0;
88 opacity: 0;
89 }
90
91 .chat-main.is-expanded-left {
92 margin-left: 0;
93 }
94
95 .chat-main.is-expanded-right {
96 margin-right: 0;
97 } 36 }
98 37
99 .columns.is-gapless.chat-container { 38 .columns.is-gapless.chat-container {
100 flex-wrap: nowrap; 39 flex-wrap: nowrap;
101 } 40 }
109 padding: 1rem; 48 padding: 1rem;
110 } 49 }
111 50
112 #left_panel a { 51 #left_panel a {
113 background-color: inherit; 52 background-color: inherit;
114 }
115
116 #left_panel a:hover {
117 background-color: #444;
118 } 53 }
119 54
120 .chat-input { 55 .chat-input {
121 border-top: 1px solid #dbdbdb; 56 border-top: 1px solid #dbdbdb;
122 padding: 1rem; 57 padding: 1rem;
150 .message-core:hover .message-actions, 85 .message-core:hover .message-actions,
151 .message-core.has-popup-focus .message-actions 86 .message-core.has-popup-focus .message-actions
152 { 87 {
153 display: flex; 88 display: flex;
154 } 89 }
155
156 .reactions-container {
157 gap: var(--reaction-gap);
158 margin-top: var(--reaction-margin-top);
159 }
160 .reaction {
161 padding: var(--reaction-padding);
162 border-radius: 1rem;
163 background-color: var(--reaction-background);
164 font-size: var(--reaction-font-size);
165 cursor: pointer;
166 transition: all 0.2s ease;
167 border: 1px solid var(--reaction-border);
168 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
169 }
170
171 .reaction:hover {
172 background-color: var(--reaction-hover-background);
173 }
174
175 .reaction .counter {
176 margin-left: 0.25rem;
177 font-size: var(--reaction-counter-font-size);
178 color: var(--color-text);
179 }
180
181 .reaction.own-reaction {
182 background-color: var(--reaction-user-background);
183 border-color: var(--reaction-user-border);
184 }
185
186 .reaction.own-reaction:hover {
187 background-color: var(--reaction-user-hover-background);
188 }
189
190 90
191 #attachments { 91 #attachments {
192 overflow-x: auto; 92 overflow-x: auto;
193 white-space: nowrap; 93 white-space: nowrap;
194 } 94 }