Mercurial > libervia-templates

comparison sat_templates/templates/bulma/static/chat.css @ 362:b2b859a62e70

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
bulma (chat): new templates and CSS for chat page.
author Goffi <goffi@goffi.org>
date Wed, 28 Jun 2023 10:40:50 +0200
parents 6a26c8a43d10
children 095bd5b34080
comparison
equal deleted inserted replaced
361:e44c0627d00b 362:b2b859a62e70
1 #chat-panel { 1 #chat-panel {
2 height: calc(100vh - 3.25rem); 2 height: calc(100vh - 3.25rem);
3 padding-top: 1rem;
4 display: flex;
5 flex-direction: column;
6 } 3 }
7 4
8 #messages { 5 #messages {
9 overflow: auto; 6 overflow-y: auto;
10 } 7 }
8
9 #attachments {
10 overflow-x: auto;
11 white-space: nowrap;
12 }
13
14 #message_input {
15 resize: None;
16 max-height: 20rem;
17 min-height: 48px;
18 }
19
20 .is-chat-message {
21 transition: all 0.3s ease;
22 padding-left: 1.5em;
23 }
24
25 .is-chat-message:hover {
26 background-color: #f5f5f5;
27 box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
28 }
29
30 .message-attachment {
31 max-width: 20rem;
32 }
33
34 .status-icons {
35 padding-bottom: 0.4rem;
36 }
37
38 .actions {
39 position: absolute;
40 right: 5px;
41 bottom: 5px;
42 opacity: 0;
43 }
44
45 .is-chat-message:hover .actions {
46 opacity: 1;
47 }
48
49 .action-button {
50 box-sizing: border-box;
51 margin: 0 0.2rem;
52 }
53
54 .action-button:hover {
55 box-shadow: 0 0 0 10px rgba(0,0,0,0.1);
56 border-radius: 50%;
57 transition: box-shadow 0.3s ease;
58 }
59
60 .has-padding-left {
61 padding-left: 0.5em;
62 }
63
64 #attach_button, #send_button {
65 height: 100%;
66 }
67
68 /* attachments */
69
70 #attachments {
71 opacity: 1;
72 max-height: 1000px;
73 transition: opacity 0.5s ease-in-out, max-height 0.5s ease-in-out, padding 0.5s ease-in-out, margin 0.5s ease-in-out;
74 overflow-x: auto;
75 overflow-y: hidden;
76 padding: 1.25rem 0;
77 margin: 0;
78 }
79
80 #attachments.is-contracted {
81 opacity: 0;
82 max-height: 0;
83 padding: 0;
84 }
85
86 .attachment-preview {
87 position: relative;
88 border: 1px solid #dbdbdb;
89 padding: 0.3rem 0.5rem;
90 border-radius: 4px;
91 background-color: #f5f5f5;
92 width: 9rem;
93 height: 6rem;
94 }
95
96 .thumbnail-container {
97 width: 150px;
98 height: 80px;
99 overflow: hidden;
100 position: relative;
101 }
102 .icon {
103 width: 60px;
104 height: 60px;
105 }
106
107 .thumbnail-image {
108 position: absolute;
109 left: 50%;
110 top: 50%;
111 height: 100%;
112 width: auto;
113 transform: translate(-50%, -50%);
114 }
115
116 .attachment-name {
117 text-overflow: ellipsis;
118 overflow: hidden;
119 white-space: nowrap;
120 max-width: 100%;
121 font-size: 0.8em;
122 letter-spacing: 0.02em;
123 text-align: center;
124 margin-top: auto;
125 }
126
127 .thumbnail-image:empty {
128 left: 50%;
129 top: 50%;
130 width: 8rem;
131 height: auto;
132 transform: translate(-50%, -50%);
133 }
134
135 .attachment-delete-button {
136 position: absolute;
137 top: -10px;
138 right: -10px;
139 }