|
6c1ac83…
|
stephan
|
1 |
/* Chat-related */ |
|
6c1ac83…
|
stephan
|
2 |
body.chat span.at-name { /* for @USERNAME references */ |
|
6c1ac83…
|
stephan
|
3 |
text-decoration: underline; |
|
6c1ac83…
|
stephan
|
4 |
font-weight: bold; |
|
6c1ac83…
|
stephan
|
5 |
} |
|
6c1ac83…
|
stephan
|
6 |
/* A wrapper for a single single chat message (one row of the UI) */ |
|
6c1ac83…
|
stephan
|
7 |
body.chat .message-widget { |
|
6c1ac83…
|
stephan
|
8 |
margin-bottom: 0.75em; |
|
6c1ac83…
|
stephan
|
9 |
border: none; |
|
6c1ac83…
|
stephan
|
10 |
display: flex; |
|
6c1ac83…
|
stephan
|
11 |
flex-direction: column; |
|
6c1ac83…
|
stephan
|
12 |
border: none; |
|
6c1ac83…
|
stephan
|
13 |
align-items: flex-start; |
|
6c1ac83…
|
stephan
|
14 |
} |
|
469f1b0…
|
drh
|
15 |
body.chat button, |
|
469f1b0…
|
drh
|
16 |
body.chat input[type=button] { |
|
469f1b0…
|
drh
|
17 |
line-height: inherit/*undo skin-specific funkiness*/; |
|
469f1b0…
|
drh
|
18 |
} |
|
ce0d61b…
|
stephan
|
19 |
body.chat .message-widget:last-of-type { |
|
ce0d61b…
|
stephan
|
20 |
/* Latest message: reduce bottom gap */ |
|
ce0d61b…
|
stephan
|
21 |
margin-bottom: 0.1em; |
|
ce0d61b…
|
stephan
|
22 |
} |
|
6c1ac83…
|
stephan
|
23 |
body.chat.my-messages-right .message-widget.mine { |
|
6c1ac83…
|
stephan
|
24 |
/* Right-aligns a user's own chat messages, similar to how |
|
ce0d61b…
|
stephan
|
25 |
most/some mobile messaging apps do it. */ |
|
6c1ac83…
|
stephan
|
26 |
align-items: flex-end; |
|
6c1ac83…
|
stephan
|
27 |
} |
|
6c1ac83…
|
stephan
|
28 |
body.chat.my-messages-right .message-widget.notification { |
|
6c1ac83…
|
stephan
|
29 |
/* Center-aligns a system-level notification message. */ |
|
6c1ac83…
|
stephan
|
30 |
align-items: center; |
|
6c1ac83…
|
stephan
|
31 |
} |
|
6c1ac83…
|
stephan
|
32 |
/* The content area of a message. */ |
|
6c1ac83…
|
stephan
|
33 |
body.chat .message-widget-content { |
|
6c1ac83…
|
stephan
|
34 |
border-radius: 0.25em; |
|
6c1ac83…
|
stephan
|
35 |
border: 1px solid rgba(0,0,0,0.2); |
|
6c1ac83…
|
stephan
|
36 |
box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.29); |
|
6c1ac83…
|
stephan
|
37 |
padding: 0.25em 0.5em; |
|
6c1ac83…
|
stephan
|
38 |
margin-top: 0; |
|
6c1ac83…
|
stephan
|
39 |
min-width: 9em /*avoid unsightly "underlap" with the neighboring |
|
6c1ac83…
|
stephan
|
40 |
.message-widget-tab element*/; |
|
6c1ac83…
|
stephan
|
41 |
white-space: normal; |
|
8a401c2…
|
stephan
|
42 |
word-break: break-word /* so that full hashes wrap on narrow screens */; |
|
432ff8d…
|
stephan
|
43 |
} |
|
8a401c2…
|
stephan
|
44 |
|
|
432ff8d…
|
stephan
|
45 |
body.chat .message-widget-content.wide { |
|
432ff8d…
|
stephan
|
46 |
/* Special case for when embedding content which we really want to |
|
432ff8d…
|
stephan
|
47 |
expand, namely iframes. */ |
|
432ff8d…
|
stephan
|
48 |
width: 98%; |
|
432ff8d…
|
stephan
|
49 |
} |
|
432ff8d…
|
stephan
|
50 |
body.chat .message-widget-content label[for] { |
|
90d89f8…
|
stephan
|
51 |
margin-left: 0.25em; |
|
432ff8d…
|
stephan
|
52 |
cursor: pointer; |
|
432ff8d…
|
stephan
|
53 |
} |
|
432ff8d…
|
stephan
|
54 |
body.chat .message-widget-content > .attachment-link { |
|
432ff8d…
|
stephan
|
55 |
display: flex; |
|
432ff8d…
|
stephan
|
56 |
flex-direction: row; |
|
432ff8d…
|
stephan
|
57 |
} |
|
432ff8d…
|
stephan
|
58 |
body.chat .message-widget-content > .attachment-link > a { |
|
432ff8d…
|
stephan
|
59 |
margin-right: 1em; |
|
432ff8d…
|
stephan
|
60 |
} |
|
432ff8d…
|
stephan
|
61 |
body.chat .message-widget-content > iframe { |
|
432ff8d…
|
stephan
|
62 |
width: 100%; |
|
432ff8d…
|
stephan
|
63 |
max-width: 100%; |
|
432ff8d…
|
stephan
|
64 |
resize: both; |
|
432ff8d…
|
stephan
|
65 |
} |
|
432ff8d…
|
stephan
|
66 |
body.chat .message-widget-content> a { |
|
432ff8d…
|
stephan
|
67 |
/* Cosmetic: keep skin-induced on-hover underlining from shifting |
|
432ff8d…
|
stephan
|
68 |
content placed below this. */ |
|
432ff8d…
|
stephan
|
69 |
border-bottom: 1px transparent; |
|
6c1ac83…
|
stephan
|
70 |
} |
|
6c1ac83…
|
stephan
|
71 |
body.chat.monospace-messages .message-widget-content, |
|
db54f4b…
|
stephan
|
72 |
body.chat.monospace-messages .chat-input-field{ |
|
fc85382…
|
stephan
|
73 |
font-family: monospace; |
|
6c1ac83…
|
stephan
|
74 |
} |
|
6c1ac83…
|
stephan
|
75 |
body.chat .message-widget-content > * { |
|
6c1ac83…
|
stephan
|
76 |
margin: 0; |
|
6c1ac83…
|
stephan
|
77 |
padding: 0; |
|
6c1ac83…
|
stephan
|
78 |
} |
|
6c1ac83…
|
stephan
|
79 |
body.chat .message-widget-content > pre { |
|
6c1ac83…
|
stephan
|
80 |
white-space: pre-wrap; |
|
6c1ac83…
|
stephan
|
81 |
} |
|
6c1ac83…
|
stephan
|
82 |
body.chat .message-widget-content > .markdown > *:first-child { |
|
6c1ac83…
|
stephan
|
83 |
margin-top: 0; |
|
6c1ac83…
|
stephan
|
84 |
} |
|
6c1ac83…
|
stephan
|
85 |
body.chat .message-widget-content > .markdown > *:last-child { |
|
6c1ac83…
|
stephan
|
86 |
margin-bottom: 0; |
|
6c1ac83…
|
stephan
|
87 |
} |
|
9d693ef…
|
stephan
|
88 |
body.chat .message-widget-content.error .buttons { |
|
9d693ef…
|
stephan
|
89 |
display: flex; |
|
9d693ef…
|
stephan
|
90 |
flex-direction: row; |
|
9d693ef…
|
stephan
|
91 |
justify-content: space-around; |
|
9d693ef…
|
stephan
|
92 |
flex-wrap: wrap; |
|
9d693ef…
|
stephan
|
93 |
} |
|
9d693ef…
|
stephan
|
94 |
body.chat .message-widget-content.error .buttons > button { |
|
9d693ef…
|
stephan
|
95 |
margin: 0.25em; |
|
9d693ef…
|
stephan
|
96 |
} |
|
9d693ef…
|
stephan
|
97 |
|
|
9d693ef…
|
stephan
|
98 |
body.chat .message-widget-content.error a { |
|
9d693ef…
|
stephan
|
99 |
color: inherit; |
|
9d693ef…
|
stephan
|
100 |
} |
|
9d693ef…
|
stephan
|
101 |
body.chat .message-widget-content.error .failed-message { |
|
9d693ef…
|
stephan
|
102 |
display: flex; |
|
9d693ef…
|
stephan
|
103 |
flex-direction: column; |
|
9d693ef…
|
stephan
|
104 |
} |
|
9d693ef…
|
stephan
|
105 |
body.chat .message-widget-content.error .failed-message textarea { |
|
9d693ef…
|
stephan
|
106 |
min-height: 5rem; |
|
9d693ef…
|
stephan
|
107 |
} |
|
9d693ef…
|
stephan
|
108 |
|
|
6c1ac83…
|
stephan
|
109 |
/* User name and timestamp (a LEGEND-like element) */ |
|
6c1ac83…
|
stephan
|
110 |
body.chat .message-widget .message-widget-tab { |
|
6c1ac83…
|
stephan
|
111 |
border-radius: 0.25em 0.25em 0 0; |
|
6c1ac83…
|
stephan
|
112 |
margin: 0 0.25em 0em 0.15em; |
|
6c1ac83…
|
stephan
|
113 |
padding: 0 0.5em 0.15em 0.5em; |
|
6c1ac83…
|
stephan
|
114 |
cursor: pointer; |
|
6c1ac83…
|
stephan
|
115 |
white-space: nowrap; |
|
6c1ac83…
|
stephan
|
116 |
} |
|
6c1ac83…
|
stephan
|
117 |
body.chat .fossil-tooltip.help-buttonlet-content { |
|
6c1ac83…
|
stephan
|
118 |
font-size: 80%; |
|
6c1ac83…
|
stephan
|
119 |
} |
|
fc85382…
|
stephan
|
120 |
|
|
fc85382…
|
stephan
|
121 |
body.chat .message-widget .message-widget-tab { |
|
fc85382…
|
stephan
|
122 |
/* Element which renders the main metadata for a given message. */ |
|
fc85382…
|
stephan
|
123 |
} |
|
6c1ac83…
|
stephan
|
124 |
body.chat .message-widget .message-widget-tab .xfrom { |
|
fc85382…
|
stephan
|
125 |
/* xfrom part of the message tab */ |
|
6c1ac83…
|
stephan
|
126 |
font-style: italic; |
|
6c1ac83…
|
stephan
|
127 |
font-weight: bold; |
|
6c1ac83…
|
stephan
|
128 |
} |
|
fc85382…
|
stephan
|
129 |
|
|
fc85382…
|
stephan
|
130 |
body.chat .message-widget .message-widget-tab .mtime { |
|
fc85382…
|
stephan
|
131 |
/* mtime part of the message tab */ |
|
fc85382…
|
stephan
|
132 |
} |
|
fc85382…
|
stephan
|
133 |
|
|
fc85382…
|
stephan
|
134 |
body.chat .message-widget .message-widget-tab .msgid { |
|
fc85382…
|
stephan
|
135 |
/* msgid part of the message tab */ |
|
fc85382…
|
stephan
|
136 |
} |
|
fc85382…
|
stephan
|
137 |
|
|
fc85382…
|
stephan
|
138 |
body.chat .message-widget .match { |
|
fc85382…
|
stephan
|
139 |
font-weight: bold; |
|
fc85382…
|
stephan
|
140 |
background-color: yellow; |
|
fc85382…
|
stephan
|
141 |
} |
|
fc85382…
|
stephan
|
142 |
|
|
fc85382…
|
stephan
|
143 |
body.chat.fossil-dark-style .message-widget .match { |
|
fc85382…
|
stephan
|
144 |
background-color: #ff4800; |
|
fc85382…
|
stephan
|
145 |
} |
|
fc85382…
|
stephan
|
146 |
|
|
6c1ac83…
|
stephan
|
147 |
/* The popup element for displaying message timestamps |
|
6c1ac83…
|
stephan
|
148 |
and deletion controls. */ |
|
6c1ac83…
|
stephan
|
149 |
body.chat .chat-message-popup { |
|
6c1ac83…
|
stephan
|
150 |
font-family: monospace; |
|
fb9026e…
|
stephan
|
151 |
font-size: 0.9em; |
|
6c1ac83…
|
stephan
|
152 |
text-align: left; |
|
6c1ac83…
|
stephan
|
153 |
display: flex; |
|
6c1ac83…
|
stephan
|
154 |
flex-direction: column; |
|
6c1ac83…
|
stephan
|
155 |
align-items: stretch; |
|
6c1ac83…
|
stephan
|
156 |
padding: 0.25em; |
|
fb9026e…
|
stephan
|
157 |
margin-top: 0.25em; |
|
ce0d61b…
|
stephan
|
158 |
border: 1px outset; |
|
ce0d61b…
|
stephan
|
159 |
border-radius: 0.5em; |
|
6c1ac83…
|
stephan
|
160 |
} |
|
6c1ac83…
|
stephan
|
161 |
/* Full message timestamps. */ |
|
6c1ac83…
|
stephan
|
162 |
body.chat .chat-message-popup > span { white-space: nowrap; } |
|
6c1ac83…
|
stephan
|
163 |
/* Container for the message deletion buttons. */ |
|
6c1ac83…
|
stephan
|
164 |
body.chat .chat-message-popup > .toolbar { |
|
6c1ac83…
|
stephan
|
165 |
padding: 0; |
|
6c1ac83…
|
stephan
|
166 |
margin: 0; |
|
6c1ac83…
|
stephan
|
167 |
border: 2px inset rgba(0,0,0,0.3); |
|
6c1ac83…
|
stephan
|
168 |
border-radius: 0.25em; |
|
6c1ac83…
|
stephan
|
169 |
display: flex; |
|
6c1ac83…
|
stephan
|
170 |
flex-direction: row; |
|
6c1ac83…
|
stephan
|
171 |
justify-content: stretch; |
|
6c1ac83…
|
stephan
|
172 |
flex-wrap: wrap; |
|
6c1ac83…
|
stephan
|
173 |
align-items: center; |
|
6c1ac83…
|
stephan
|
174 |
} |
|
6c1ac83…
|
stephan
|
175 |
body.chat .chat-message-popup > .toolbar > * { |
|
6c1ac83…
|
stephan
|
176 |
margin: 0.35em; |
|
6c1ac83…
|
stephan
|
177 |
} |
|
6c1ac83…
|
stephan
|
178 |
body.chat .chat-message-popup > .toolbar > button { |
|
6c1ac83…
|
stephan
|
179 |
flex: 1 1 auto; |
|
6c1ac83…
|
stephan
|
180 |
} |
|
6c1ac83…
|
stephan
|
181 |
/* The widget for loading more/older chat messages. */ |
|
6c1ac83…
|
stephan
|
182 |
body.chat #load-msg-toolbar { |
|
6c1ac83…
|
stephan
|
183 |
border-radius: 0.25em; |
|
6c1ac83…
|
stephan
|
184 |
padding: 0.1em 0.2em; |
|
6c1ac83…
|
stephan
|
185 |
margin-bottom: 1em; |
|
6c1ac83…
|
stephan
|
186 |
} |
|
6c1ac83…
|
stephan
|
187 |
/* .all-done is set when chat has loaded all of the available |
|
6c1ac83…
|
stephan
|
188 |
historical messages */ |
|
6c1ac83…
|
stephan
|
189 |
body.chat #load-msg-toolbar.all-done { |
|
6c1ac83…
|
stephan
|
190 |
opacity: 0.5; |
|
6c1ac83…
|
stephan
|
191 |
} |
|
6c1ac83…
|
stephan
|
192 |
body.chat #load-msg-toolbar > div { |
|
6c1ac83…
|
stephan
|
193 |
display: flex; |
|
6c1ac83…
|
stephan
|
194 |
flex-direction: row; |
|
6c1ac83…
|
stephan
|
195 |
justify-content: stretch; |
|
6c1ac83…
|
stephan
|
196 |
flex-wrap: wrap; |
|
6c1ac83…
|
stephan
|
197 |
} |
|
6c1ac83…
|
stephan
|
198 |
body.chat #load-msg-toolbar > div > button { |
|
6c1ac83…
|
stephan
|
199 |
flex: 1 1 auto; |
|
6c1ac83…
|
stephan
|
200 |
} |
|
6c1ac83…
|
stephan
|
201 |
/* "Chat-only mode" hides the site header/footer, showing only |
|
6c1ac83…
|
stephan
|
202 |
the chat app. */ |
|
46ec28a…
|
stephan
|
203 |
body.chat.chat-only-mode{ |
|
46ec28a…
|
stephan
|
204 |
padding: 0; |
|
d3c0206…
|
george
|
205 |
margin: 0 auto; |
|
46ec28a…
|
stephan
|
206 |
} |
|
98b2cbe…
|
stephan
|
207 |
body.chat #chat-button-settings {} |
|
6c1ac83…
|
stephan
|
208 |
|
|
6c1ac83…
|
stephan
|
209 |
/** Container for the list of /chat messages. */ |
|
6c1ac83…
|
stephan
|
210 |
body.chat #chat-messages-wrapper { |
|
6c1ac83…
|
stephan
|
211 |
overflow: auto; |
|
6c1ac83…
|
stephan
|
212 |
padding: 0 0.25em; |
|
6c1ac83…
|
stephan
|
213 |
} |
|
6c1ac83…
|
stephan
|
214 |
body.chat #chat-messages-wrapper.loading > * { |
|
6c1ac83…
|
stephan
|
215 |
/* An attempt at reducing flicker when loading lots of messages. */ |
|
6c1ac83…
|
stephan
|
216 |
visibility: hidden; |
|
6c1ac83…
|
stephan
|
217 |
} |
|
160d269…
|
stephan
|
218 |
|
|
160d269…
|
stephan
|
219 |
/* Provide a visual cue when polling is offline. */ |
|
160d269…
|
stephan
|
220 |
body.chat.connection-error #chat-input-line-wrapper { |
|
160d269…
|
stephan
|
221 |
border-top: medium dotted red; |
|
160d269…
|
stephan
|
222 |
} |
|
160d269…
|
stephan
|
223 |
body.chat.fossil-dark-style.connection-error #chat-input-line-wrapper { |
|
160d269…
|
stephan
|
224 |
border-color: yellow; |
|
e3eb839…
|
stephan
|
225 |
} |
|
e3eb839…
|
stephan
|
226 |
|
|
6c1ac83…
|
stephan
|
227 |
body.chat div.content { |
|
6c1ac83…
|
stephan
|
228 |
margin: 0; |
|
6c1ac83…
|
stephan
|
229 |
padding: 0; |
|
6c1ac83…
|
stephan
|
230 |
display: flex; |
|
6c1ac83…
|
stephan
|
231 |
flex-direction: column-reverse; |
|
6c1ac83…
|
stephan
|
232 |
/* ^^^^ In order to get good automatic scrolling of new messages on |
|
6c1ac83…
|
stephan
|
233 |
the BOTTOM in bottom-up chat mode, such that they scroll up |
|
6c1ac83…
|
stephan
|
234 |
instead of down, we have to use column-reverse layout, which |
|
6c1ac83…
|
stephan
|
235 |
changes #chat-messages-wrapper's "gravity" for purposes of |
|
6c1ac83…
|
stephan
|
236 |
scrolling! If we instead use flex-direction:column then each new |
|
6c1ac83…
|
stephan
|
237 |
message pushes #chat-input-area down further off the screen! |
|
6c1ac83…
|
stephan
|
238 |
*/ |
|
6c1ac83…
|
stephan
|
239 |
align-items: stretch; |
|
6c1ac83…
|
stephan
|
240 |
} |
|
6c1ac83…
|
stephan
|
241 |
/* Wrapper for /chat user input controls */ |
|
6c1ac83…
|
stephan
|
242 |
body.chat #chat-input-area { |
|
6c1ac83…
|
stephan
|
243 |
display: flex; |
|
6c1ac83…
|
stephan
|
244 |
flex-direction: column; |
|
ce0d61b…
|
stephan
|
245 |
padding: 0; |
|
ce0d61b…
|
stephan
|
246 |
margin: 0; |
|
469f1b0…
|
drh
|
247 |
flex: 0 1 auto; |
|
6c1ac83…
|
stephan
|
248 |
} |
|
6c1ac83…
|
stephan
|
249 |
body.chat:not(.chat-only-mode) #chat-input-area{ |
|
6c1ac83…
|
stephan
|
250 |
/* Safari user reports that 2em is necessary to keep the file selection |
|
6c1ac83…
|
stephan
|
251 |
widget from overlapping the page footer, whereas a margin of 0 is fine |
|
6c1ac83…
|
stephan
|
252 |
for FF/Chrome (and 2em is a *huge* waste of space for those). */ |
|
6c1ac83…
|
stephan
|
253 |
margin-bottom: 0; |
|
6c1ac83…
|
stephan
|
254 |
} |
|
e3eb839…
|
stephan
|
255 |
|
|
e3eb839…
|
stephan
|
256 |
body.chat .chat-input-field { |
|
469f1b0…
|
drh
|
257 |
flex: 10 1 auto; |
|
db54f4b…
|
stephan
|
258 |
margin: 0; |
|
db54f4b…
|
stephan
|
259 |
} |
|
e3eb839…
|
stephan
|
260 |
body.chat #chat-input-field-x, |
|
e3eb839…
|
stephan
|
261 |
body.chat #chat-input-field-multi { |
|
469f1b0…
|
drh
|
262 |
overflow: auto; |
|
469f1b0…
|
drh
|
263 |
resize: vertical; |
|
db54f4b…
|
stephan
|
264 |
} |
|
e3eb839…
|
stephan
|
265 |
body.chat #chat-input-field-x { |
|
db54f4b…
|
stephan
|
266 |
display: inline-block/*supposed workaround for Chrome weirdness*/; |
|
db54f4b…
|
stephan
|
267 |
padding: 0.2em; |
|
db54f4b…
|
stephan
|
268 |
background-color: rgba(156,156,156,0.3); |
|
c7fa9f1…
|
stephan
|
269 |
white-space: pre-wrap; |
|
c7fa9f1…
|
stephan
|
270 |
/* ^^^ Firefox, when pasting plain text into a contenteditable field, |
|
c7fa9f1…
|
stephan
|
271 |
loses all newlines unless we explicitly set this. Chrome does not. */ |
|
5033957…
|
stephan
|
272 |
cursor: text; |
|
5033957…
|
stephan
|
273 |
/* ^^^ In some browsers the cursor may not change for a contenteditable |
|
5033957…
|
stephan
|
274 |
element until it has focus, causing potential confusion. */ |
|
c7fa9f1…
|
stephan
|
275 |
} |
|
e3eb839…
|
stephan
|
276 |
body.chat #chat-input-field-x:empty::before { |
|
469f1b0…
|
drh
|
277 |
content: attr(data-placeholder); |
|
469f1b0…
|
drh
|
278 |
opacity: 0.6; |
|
469f1b0…
|
drh
|
279 |
} |
|
e3eb839…
|
stephan
|
280 |
body.chat .chat-input-field:not(:focus){ |
|
469f1b0…
|
drh
|
281 |
border-width: 1px; |
|
469f1b0…
|
drh
|
282 |
border-style: solid; |
|
469f1b0…
|
drh
|
283 |
border-radius: 0.25em; |
|
469f1b0…
|
drh
|
284 |
} |
|
e3eb839…
|
stephan
|
285 |
body.chat .chat-input-field:focus{ |
|
469f1b0…
|
drh
|
286 |
/* This transparent border helps avoid the text shifting around |
|
469f1b0…
|
drh
|
287 |
when the contenteditable attribute causes a border (which we |
|
469f1b0…
|
drh
|
288 |
apparently cannot style) to be added. */ |
|
469f1b0…
|
drh
|
289 |
border-width: 1px; |
|
469f1b0…
|
drh
|
290 |
border-style: solid; |
|
469f1b0…
|
drh
|
291 |
border-color: transparent; |
|
469f1b0…
|
drh
|
292 |
border-radius: 0.25em; |
|
469f1b0…
|
drh
|
293 |
} |
|
6c1ac83…
|
stephan
|
294 |
/* Widget holding the chat message input field, send button, and |
|
6c1ac83…
|
stephan
|
295 |
settings button. */ |
|
db54f4b…
|
stephan
|
296 |
body.chat #chat-input-line-wrapper { |
|
6c1ac83…
|
stephan
|
297 |
display: flex; |
|
6c1ac83…
|
stephan
|
298 |
flex-direction: row; |
|
6c1ac83…
|
stephan
|
299 |
align-items: stretch; |
|
469f1b0…
|
drh
|
300 |
flex-wrap: nowrap; |
|
6c1ac83…
|
stephan
|
301 |
} |
|
46ec28a…
|
stephan
|
302 |
body.chat.chat-only-mode #chat-input-line-wrapper { |
|
46ec28a…
|
stephan
|
303 |
padding: 0 0.25em; |
|
46ec28a…
|
stephan
|
304 |
} |
|
46ec28a…
|
stephan
|
305 |
|
|
db54f4b…
|
stephan
|
306 |
/*body.chat #chat-input-line-wrapper:not(.compact) { |
|
469f1b0…
|
drh
|
307 |
flex-wrap: nowrap; |
|
469f1b0…
|
drh
|
308 |
}*/ |
|
db54f4b…
|
stephan
|
309 |
body.chat #chat-input-line-wrapper.compact { |
|
469f1b0…
|
drh
|
310 |
/* "The problem" with wrapping, together with a contenteditable input |
|
469f1b0…
|
drh
|
311 |
field, is that the latter grows as the user types, so causes |
|
469f1b0…
|
drh
|
312 |
wrapping to happen while they type, then to unwrap as soon as the |
|
469f1b0…
|
drh
|
313 |
input field is cleared (when the message is sent). When we stay |
|
469f1b0…
|
drh
|
314 |
wrapped in compact mode, the wrapped buttons simply take up too |
|
469f1b0…
|
drh
|
315 |
much space. */ |
|
469f1b0…
|
drh
|
316 |
/*flex-wrap: wrap; |
|
469f1b0…
|
drh
|
317 |
justify-content: flex-end;*/ |
|
469f1b0…
|
drh
|
318 |
flex-direction: column; |
|
469f1b0…
|
drh
|
319 |
/** |
|
469f1b0…
|
drh
|
320 |
We "really do" need column orientation here because it's the |
|
469f1b0…
|
drh
|
321 |
only way to eliminate the possibility that (A) the buttons |
|
469f1b0…
|
drh
|
322 |
get truncated in very narrow windows and (B) that they keep |
|
469f1b0…
|
drh
|
323 |
stable positions. |
|
469f1b0…
|
drh
|
324 |
*/ |
|
469f1b0…
|
drh
|
325 |
} |
|
db54f4b…
|
stephan
|
326 |
body.chat #chat-input-line-wrapper.compact #chat-input-field-x { |
|
469f1b0…
|
drh
|
327 |
} |
|
469f1b0…
|
drh
|
328 |
|
|
98b2cbe…
|
stephan
|
329 |
body.chat #chat-buttons-wrapper { |
|
469f1b0…
|
drh
|
330 |
flex: 0 1 auto; |
|
6c1ac83…
|
stephan
|
331 |
display: flex; |
|
6c1ac83…
|
stephan
|
332 |
flex-direction: column; |
|
469f1b0…
|
drh
|
333 |
align-items: center; |
|
469f1b0…
|
drh
|
334 |
min-width: 4em; |
|
469f1b0…
|
drh
|
335 |
min-height: 1.5em; |
|
469f1b0…
|
drh
|
336 |
align-self: flex-end |
|
469f1b0…
|
drh
|
337 |
/*keep buttons stable at bottom/right even when input field |
|
469f1b0…
|
drh
|
338 |
resizes */; |
|
6c1ac83…
|
stephan
|
339 |
} |
|
db54f4b…
|
stephan
|
340 |
body.chat #chat-input-line-wrapper.compact #chat-buttons-wrapper { |
|
6c1ac83…
|
stephan
|
341 |
flex-direction: row; |
|
469f1b0…
|
drh
|
342 |
flex: 1 1 auto; |
|
469f1b0…
|
drh
|
343 |
align-self: stretch; |
|
469f1b0…
|
drh
|
344 |
justify-content: flex-end; |
|
469f1b0…
|
drh
|
345 |
/*flex-wrap: wrap;*/ |
|
469f1b0…
|
drh
|
346 |
/* Wrapping would be ideal except that the edit widget |
|
469f1b0…
|
drh
|
347 |
grows in width as the user types, moving the buttons |
|
469f1b0…
|
drh
|
348 |
around */ |
|
469f1b0…
|
drh
|
349 |
} |
|
98b2cbe…
|
stephan
|
350 |
body.chat #chat-buttons-wrapper > .cbutton { |
|
98b2cbe…
|
stephan
|
351 |
padding: 0; |
|
98b2cbe…
|
stephan
|
352 |
display: inline-block; |
|
98b2cbe…
|
stephan
|
353 |
border-width: 1px; |
|
98b2cbe…
|
stephan
|
354 |
border-style: solid; |
|
98b2cbe…
|
stephan
|
355 |
border-radius: 0.25em; |
|
469f1b0…
|
drh
|
356 |
min-width: 4ex; |
|
98b2cbe…
|
stephan
|
357 |
max-width: 4ex; |
|
67e8599…
|
stephan
|
358 |
min-height: 3ex; |
|
67e8599…
|
stephan
|
359 |
max-height: 3ex; |
|
469f1b0…
|
drh
|
360 |
margin: 0.125em; |
|
98b2cbe…
|
stephan
|
361 |
display: inline-flex; |
|
98b2cbe…
|
stephan
|
362 |
justify-content: center; |
|
98b2cbe…
|
stephan
|
363 |
align-items: center; |
|
98b2cbe…
|
stephan
|
364 |
cursor: pointer; |
|
1fc2a26…
|
stephan
|
365 |
font-size: 130%; |
|
98b2cbe…
|
stephan
|
366 |
} |
|
98b2cbe…
|
stephan
|
367 |
body.chat #chat-buttons-wrapper > .cbutton:hover { |
|
7755c64…
|
stephan
|
368 |
background-color: rgba(200,200,200,0.3); |
|
98b2cbe…
|
stephan
|
369 |
} |
|
db54f4b…
|
stephan
|
370 |
body.chat #chat-input-line-wrapper.compact #chat-buttons-wrapper > .cbutton { |
|
98b2cbe…
|
stephan
|
371 |
margin: 2px 0.125em 0 0.125em; |
|
fc85382…
|
stephan
|
372 |
min-width: 4.5ex; |
|
fc85382…
|
stephan
|
373 |
max-width: 4.5ex; |
|
98b2cbe…
|
stephan
|
374 |
min-height: 2.3ex; |
|
98b2cbe…
|
stephan
|
375 |
max-height: 2.3ex; |
|
7755c64…
|
stephan
|
376 |
font-size: 120%; |
|
7755c64…
|
stephan
|
377 |
} |
|
db54f4b…
|
stephan
|
378 |
body.chat #chat-input-line-wrapper.compact #chat-buttons-wrapper #chat-button-submit { |
|
fc85382…
|
stephan
|
379 |
min-width: 10ex; |
|
db54f4b…
|
stephan
|
380 |
} |
|
db54f4b…
|
stephan
|
381 |
.chat-input-field { |
|
db54f4b…
|
stephan
|
382 |
font-family: inherit |
|
db54f4b…
|
stephan
|
383 |
} |
|
db54f4b…
|
stephan
|
384 |
body.chat #chat-input-line-wrapper:not(.compact) #chat-input-field-multi, |
|
db54f4b…
|
stephan
|
385 |
body.chat #chat-input-line-wrapper:not(.compact) #chat-input-field-x { |
|
db54f4b…
|
stephan
|
386 |
min-height: 4rem; |
|
469f1b0…
|
drh
|
387 |
/* |
|
469f1b0…
|
drh
|
388 |
Problems related to max-height: |
|
469f1b0…
|
drh
|
389 |
|
|
469f1b0…
|
drh
|
390 |
- If we do NOT set a max-height then pasting/typing a large amount |
|
469f1b0…
|
drh
|
391 |
of text can cause this element to grow without bounds, larger than |
|
469f1b0…
|
drh
|
392 |
the window, and there's no way to navigate it sensibly. In this |
|
469f1b0…
|
drh
|
393 |
case, manually resizing the element (desktop only - mobile doesn't |
|
469f1b0…
|
drh
|
394 |
offer that) will force it to stay at the selected size even if more |
|
469f1b0…
|
drh
|
395 |
content is added to it later. |
|
469f1b0…
|
drh
|
396 |
|
|
469f1b0…
|
drh
|
397 |
- If we DO set a max-height then its growth is bounded but it also |
|
469f1b0…
|
drh
|
398 |
cannot manually expanded by the user. |
|
469f1b0…
|
drh
|
399 |
|
|
469f1b0…
|
drh
|
400 |
The lesser of the two evils seems to be to rely on the browser |
|
db54f4b…
|
stephan
|
401 |
feature that a manual resize of the element will pin its size. |
|
469f1b0…
|
drh
|
402 |
*/ |
|
469f1b0…
|
drh
|
403 |
} |
|
469f1b0…
|
drh
|
404 |
|
|
db54f4b…
|
stephan
|
405 |
body.chat #chat-input-line-wrapper > #chat-button-settings{ |
|
6c1ac83…
|
stephan
|
406 |
margin: 0 0 0 0.25em; |
|
6c1ac83…
|
stephan
|
407 |
max-width: 2em; |
|
6c1ac83…
|
stephan
|
408 |
} |
|
db54f4b…
|
stephan
|
409 |
body.chat #chat-input-line-wrapper > input[type=text], |
|
db54f4b…
|
stephan
|
410 |
body.chat #chat-input-line-wrapper > textarea { |
|
cf81ddf…
|
stephan
|
411 |
flex: 20 1 auto; |
|
6c1ac83…
|
stephan
|
412 |
max-width: revert; |
|
03f33cd…
|
stephan
|
413 |
min-width: 20em; |
|
03f33cd…
|
stephan
|
414 |
} |
|
db54f4b…
|
stephan
|
415 |
body.chat #chat-input-line-wrapper.compact > input[type=text] { |
|
03f33cd…
|
stephan
|
416 |
margin: 0 0 0.25em 0/* gap for if/when buttons wrap*/; |
|
6c1ac83…
|
stephan
|
417 |
} |
|
6c1ac83…
|
stephan
|
418 |
/* Widget holding the file selection control and preview */ |
|
6c1ac83…
|
stephan
|
419 |
body.chat #chat-input-file-area { |
|
6c1ac83…
|
stephan
|
420 |
display: flex; |
|
6c1ac83…
|
stephan
|
421 |
flex-direction: row; |
|
469f1b0…
|
drh
|
422 |
margin: 0; |
|
6c1ac83…
|
stephan
|
423 |
} |
|
6c1ac83…
|
stephan
|
424 |
body.chat #chat-input-file-area > .file-selection-wrapper { |
|
6c1ac83…
|
stephan
|
425 |
align-self: flex-start; |
|
6c1ac83…
|
stephan
|
426 |
margin-right: 0.5em; |
|
6c1ac83…
|
stephan
|
427 |
flex: 0 1 auto; |
|
ce0d61b…
|
stephan
|
428 |
padding: 0.25em 0.5em; |
|
6c1ac83…
|
stephan
|
429 |
white-space: nowrap; |
|
6c1ac83…
|
stephan
|
430 |
} |
|
6c1ac83…
|
stephan
|
431 |
body.chat #chat-input-file { |
|
6c1ac83…
|
stephan
|
432 |
border:1px solid rgba(0,0,0,0);/*avoid UI shift during drop-targeting*/ |
|
6c1ac83…
|
stephan
|
433 |
border-radius: 0.25em; |
|
6c1ac83…
|
stephan
|
434 |
padding: 0.25em; |
|
6c1ac83…
|
stephan
|
435 |
} |
|
6c1ac83…
|
stephan
|
436 |
body.chat #chat-input-file > input { |
|
6c1ac83…
|
stephan
|
437 |
flex: 1 0 auto; |
|
6c1ac83…
|
stephan
|
438 |
} |
|
6c1ac83…
|
stephan
|
439 |
/* Indicator when a drag/drop is in progress */ |
|
6c1ac83…
|
stephan
|
440 |
body.chat #chat-input-file.dragover { |
|
6c1ac83…
|
stephan
|
441 |
border: 1px dashed green; |
|
6c1ac83…
|
stephan
|
442 |
} |
|
6c1ac83…
|
stephan
|
443 |
/* Widget holding the details of a selected/dropped file/image. */ |
|
6c1ac83…
|
stephan
|
444 |
body.chat #chat-drop-details { |
|
469f1b0…
|
drh
|
445 |
padding: 0 1em; |
|
6c1ac83…
|
stephan
|
446 |
white-space: pre; |
|
6c1ac83…
|
stephan
|
447 |
font-family: monospace; |
|
469f1b0…
|
drh
|
448 |
margin: auto; |
|
469f1b0…
|
drh
|
449 |
flex: 0; |
|
6c1ac83…
|
stephan
|
450 |
} |
|
db54f4b…
|
stephan
|
451 |
body.chat #chat-drop-details:empty { |
|
db54f4b…
|
stephan
|
452 |
padding: 0; |
|
db54f4b…
|
stephan
|
453 |
margin: 0; |
|
db54f4b…
|
stephan
|
454 |
} |
|
6c1ac83…
|
stephan
|
455 |
body.chat #chat-drop-details img { |
|
6c1ac83…
|
stephan
|
456 |
max-width: 45%; |
|
6c1ac83…
|
stephan
|
457 |
max-height: 45%; |
|
6c1ac83…
|
stephan
|
458 |
} |
|
ce0d61b…
|
stephan
|
459 |
body.chat .chat-view { |
|
ce0d61b…
|
stephan
|
460 |
flex: 20 1 auto |
|
469f1b0…
|
drh
|
461 |
/*ensure that these grow more than the non-.chat-view elements. |
|
469f1b0…
|
drh
|
462 |
Note that setting flex shrink to 0 breaks/disables scrolling!*/; |
|
ce0d61b…
|
stephan
|
463 |
margin-bottom: 0.2em; |
|
ce0d61b…
|
stephan
|
464 |
} |
|
6c1ac83…
|
stephan
|
465 |
body.chat #chat-config, |
|
fc85382…
|
stephan
|
466 |
body.chat #chat-search, |
|
72d93e8…
|
stephan
|
467 |
body.chat #chat-preview, |
|
72d93e8…
|
stephan
|
468 |
body.chat #chat-zoom { |
|
6c1ac83…
|
stephan
|
469 |
/* /chat configuration widget */ |
|
6c1ac83…
|
stephan
|
470 |
display: flex; |
|
6c1ac83…
|
stephan
|
471 |
flex-direction: column; |
|
6c1ac83…
|
stephan
|
472 |
overflow: auto; |
|
6c1ac83…
|
stephan
|
473 |
padding: 0; |
|
6c1ac83…
|
stephan
|
474 |
margin: 0; |
|
6c1ac83…
|
stephan
|
475 |
align-items: stretch; |
|
6c1ac83…
|
stephan
|
476 |
min-height: 6em; |
|
72d93e8…
|
stephan
|
477 |
} |
|
72d93e8…
|
stephan
|
478 |
body.chat #chat-zoom { |
|
72d93e8…
|
stephan
|
479 |
justify-content: space-between; |
|
72d93e8…
|
stephan
|
480 |
} |
|
72d93e8…
|
stephan
|
481 |
body.chat #chat-zoom-content { |
|
72d93e8…
|
stephan
|
482 |
display: flex; |
|
72d93e8…
|
stephan
|
483 |
overflow: auto; |
|
72d93e8…
|
stephan
|
484 |
} |
|
72d93e8…
|
stephan
|
485 |
body.chat #chat-zoom-content > .message-widget { |
|
72d93e8…
|
stephan
|
486 |
flex-grow: 1; |
|
72d93e8…
|
stephan
|
487 |
} |
|
24e050a…
|
stephan
|
488 |
body.chat #chat-zoom-content > .message-widget > .message-widget-content { |
|
5d71561…
|
stephan
|
489 |
width: 99%; |
|
1c75007…
|
stephan
|
490 |
} |
|
1c75007…
|
stephan
|
491 |
body.chat #chat-zoom-content > .message-widget .toolbar.hide-in-zoom { |
|
1c75007…
|
stephan
|
492 |
/* The various Delete buttons misinteract with zoom mode's moving-around |
|
1c75007…
|
stephan
|
493 |
of message widgets, so hide them in zoom mode. */ |
|
1c75007…
|
stephan
|
494 |
position: absolute !important; |
|
1c75007…
|
stephan
|
495 |
opacity: 0 !important; |
|
1c75007…
|
stephan
|
496 |
pointer-events: none !important; |
|
1c75007…
|
stephan
|
497 |
display: none !important; |
|
db54f4b…
|
stephan
|
498 |
} |
|
6c1ac83…
|
stephan
|
499 |
body.chat #chat-config #chat-config-options { |
|
6c1ac83…
|
stephan
|
500 |
/* /chat config options go here */ |
|
6c1ac83…
|
stephan
|
501 |
flex: 1 1 auto; |
|
6c1ac83…
|
stephan
|
502 |
display: flex; |
|
469f1b0…
|
drh
|
503 |
flex-direction: column; |
|
6c1ac83…
|
stephan
|
504 |
overflow: auto; |
|
db54f4b…
|
stephan
|
505 |
align-items: stretch; |
|
6c1ac83…
|
stephan
|
506 |
} |
|
6c1ac83…
|
stephan
|
507 |
body.chat #chat-config #chat-config-options .menu-entry { |
|
6c1ac83…
|
stephan
|
508 |
display: flex; |
|
db54f4b…
|
stephan
|
509 |
align-items: center; |
|
67e8599…
|
stephan
|
510 |
flex-direction: row-reverse; |
|
ce0d61b…
|
stephan
|
511 |
flex-wrap: nowrap; |
|
6c1ac83…
|
stephan
|
512 |
padding: 1em; |
|
db54f4b…
|
stephan
|
513 |
flex: 1 1 auto; |
|
db54f4b…
|
stephan
|
514 |
align-self: stretch; |
|
db54f4b…
|
stephan
|
515 |
} |
|
67e8599…
|
stephan
|
516 |
body.chat #chat-config #chat-config-options .menu-entry.parent{ |
|
67e8599…
|
stephan
|
517 |
border-radius: 1em 1em 0 1em; |
|
67e8599…
|
stephan
|
518 |
margin-top: 1em; |
|
67e8599…
|
stephan
|
519 |
} |
|
67e8599…
|
stephan
|
520 |
body.chat #chat-config #chat-config-options .menu-entry.child { |
|
67e8599…
|
stephan
|
521 |
/*padding-left: 2.5em;*/ |
|
67e8599…
|
stephan
|
522 |
margin-left: 2em; |
|
db54f4b…
|
stephan
|
523 |
} |
|
db54f4b…
|
stephan
|
524 |
body.chat #chat-config #chat-config-options .menu-entry:nth-of-type(even){ |
|
67e8599…
|
stephan
|
525 |
background-color: rgba(175,175,175,0.15); |
|
db54f4b…
|
stephan
|
526 |
} |
|
db54f4b…
|
stephan
|
527 |
body.chat #chat-config #chat-config-options .menu-entry:nth-of-type(odd){ |
|
67e8599…
|
stephan
|
528 |
background-color: rgba(175,175,175,0.35); |
|
db54f4b…
|
stephan
|
529 |
} |
|
db54f4b…
|
stephan
|
530 |
body.chat #chat-config #chat-config-options .menu-entry:first-child { |
|
db54f4b…
|
stephan
|
531 |
/* Config list header */ |
|
67e8599…
|
stephan
|
532 |
border-radius: 0 0 1em 1em; |
|
db54f4b…
|
stephan
|
533 |
} |
|
db54f4b…
|
stephan
|
534 |
body.chat #chat-config #chat-config-options .menu-entry:first-child .label-wrapper { |
|
db54f4b…
|
stephan
|
535 |
align-items: start; |
|
db54f4b…
|
stephan
|
536 |
} |
|
db54f4b…
|
stephan
|
537 |
body.chat #chat-config #chat-config-options .menu-entry > .toggle-wrapper { |
|
db54f4b…
|
stephan
|
538 |
/* Holder for a checkbox, if any */ |
|
db54f4b…
|
stephan
|
539 |
min-width: 1.5rem; |
|
67e8599…
|
stephan
|
540 |
margin-right: 1rem; |
|
db54f4b…
|
stephan
|
541 |
} |
|
db54f4b…
|
stephan
|
542 |
body.chat #chat-config #chat-config-options .menu-entry .label-wrapper { |
|
db54f4b…
|
stephan
|
543 |
/* Wrapper for a LABEL and a .hint element. */ |
|
db54f4b…
|
stephan
|
544 |
display: flex; |
|
db54f4b…
|
stephan
|
545 |
flex-direction: column; |
|
db54f4b…
|
stephan
|
546 |
align-self: baseline; |
|
db54f4b…
|
stephan
|
547 |
flex: 1 1 auto; |
|
db54f4b…
|
stephan
|
548 |
} |
|
db54f4b…
|
stephan
|
549 |
body.chat #chat-config #chat-config-options .menu-entry label { |
|
db54f4b…
|
stephan
|
550 |
/* Config option label. */ |
|
db54f4b…
|
stephan
|
551 |
font-weight: bold; |
|
db54f4b…
|
stephan
|
552 |
white-space: initial; |
|
ce0d61b…
|
stephan
|
553 |
} |
|
469f1b0…
|
drh
|
554 |
body.chat #chat-config #chat-config-options .menu-entry label[for] { |
|
ce0d61b…
|
stephan
|
555 |
cursor: pointer; |
|
ce0d61b…
|
stephan
|
556 |
} |
|
db54f4b…
|
stephan
|
557 |
body.chat #chat-config #chat-config-options .menu-entry .hint { |
|
469f1b0…
|
drh
|
558 |
/* Config menu hint text */ |
|
db54f4b…
|
stephan
|
559 |
font-size: 85%; |
|
67e8599…
|
stephan
|
560 |
font-weight: normal; |
|
469f1b0…
|
drh
|
561 |
white-space: pre-wrap; |
|
469f1b0…
|
drh
|
562 |
display: inline-block; |
|
db54f4b…
|
stephan
|
563 |
opacity: 0.85; |
|
ce0d61b…
|
stephan
|
564 |
} |
|
469f1b0…
|
drh
|
565 |
body.chat #chat-config #chat-config-options .menu-entry select { |
|
ce0d61b…
|
stephan
|
566 |
} |
|
fc85382…
|
stephan
|
567 |
body.chat #chat-preview #chat-preview-content, |
|
fc85382…
|
stephan
|
568 |
body.chat #chat-search #chat-search-content { |
|
6c1ac83…
|
stephan
|
569 |
overflow: auto; |
|
6c1ac83…
|
stephan
|
570 |
flex: 1 1 auto; |
|
6c1ac83…
|
stephan
|
571 |
padding: 0.5em; |
|
6c1ac83…
|
stephan
|
572 |
border: 1px dotted; |
|
6c1ac83…
|
stephan
|
573 |
} |
|
fc85382…
|
stephan
|
574 |
|
|
6c1ac83…
|
stephan
|
575 |
body.chat #chat-preview #chat-preview-content > * { |
|
6c1ac83…
|
stephan
|
576 |
margin: 0; |
|
6c1ac83…
|
stephan
|
577 |
padding: 0; |
|
6c1ac83…
|
stephan
|
578 |
} |
|
fc85382…
|
stephan
|
579 |
body.chat .chat-view .button-bar { |
|
6c1ac83…
|
stephan
|
580 |
flex: 0 1 auto; |
|
6c1ac83…
|
stephan
|
581 |
display: flex; |
|
6c1ac83…
|
stephan
|
582 |
flex-direction: column; |
|
6c1ac83…
|
stephan
|
583 |
} |
|
fc85382…
|
stephan
|
584 |
body.chat .chat-view .button-bar button { |
|
6c1ac83…
|
stephan
|
585 |
padding: 0.5em; |
|
fc85382…
|
stephan
|
586 |
flex: 1 1 auto; |
|
6c1ac83…
|
stephan
|
587 |
margin: 0.25em 0; |
|
fc85382…
|
stephan
|
588 |
} |
|
fc85382…
|
stephan
|
589 |
|
|
fc85382…
|
stephan
|
590 |
body.chat #chat-search .button-bar { |
|
fc85382…
|
stephan
|
591 |
flex: 0 1 auto; |
|
fc85382…
|
stephan
|
592 |
display: flex; |
|
fc85382…
|
stephan
|
593 |
flex-direction: row; |
|
ce0d61b…
|
stephan
|
594 |
} |
|
ce0d61b…
|
stephan
|
595 |
|
|
ce0d61b…
|
stephan
|
596 |
body.chat #chat-user-list-wrapper { |
|
ce0d61b…
|
stephan
|
597 |
/* Safari can't do fieldsets right, so we emulate one. */ |
|
ce0d61b…
|
stephan
|
598 |
border-radius: 0.5em; |
|
ce0d61b…
|
stephan
|
599 |
margin: 1em 0 0.2em 0; |
|
ce0d61b…
|
stephan
|
600 |
padding: 0 0.5em; |
|
ce0d61b…
|
stephan
|
601 |
border-style: inset; |
|
ce0d61b…
|
stephan
|
602 |
border-width: 0 1px 1px 1px/*else collides with the LEGEND*/; |
|
ce0d61b…
|
stephan
|
603 |
} |
|
ce0d61b…
|
stephan
|
604 |
body.chat #chat-user-list-wrapper.collapsed { |
|
ce0d61b…
|
stephan
|
605 |
padding: 0; |
|
ce0d61b…
|
stephan
|
606 |
} |
|
ce0d61b…
|
stephan
|
607 |
body.chat #chat-user-list-wrapper > .legend { |
|
ce0d61b…
|
stephan
|
608 |
font-weight: initial; |
|
ce0d61b…
|
stephan
|
609 |
padding: 0 0.5em 0 0.5em; |
|
ce0d61b…
|
stephan
|
610 |
position: relative; |
|
ce0d61b…
|
stephan
|
611 |
top: -1.75ex/* place it like a fieldset legend */; |
|
ce0d61b…
|
stephan
|
612 |
cursor: pointer; |
|
ce0d61b…
|
stephan
|
613 |
} |
|
ce0d61b…
|
stephan
|
614 |
body.chat #chat-user-list-wrapper > .legend > * { |
|
ce0d61b…
|
stephan
|
615 |
vertical-align: middle; |
|
ce0d61b…
|
stephan
|
616 |
} |
|
ce0d61b…
|
stephan
|
617 |
body.chat #chat-user-list-wrapper > .legend > *:nth-child(2){ |
|
ce0d61b…
|
stephan
|
618 |
/* Title label */ |
|
ce0d61b…
|
stephan
|
619 |
opacity: 0.6; |
|
ce0d61b…
|
stephan
|
620 |
font-size: 0.8em; |
|
ce0d61b…
|
stephan
|
621 |
} |
|
ce0d61b…
|
stephan
|
622 |
body.chat #chat-user-list-wrapper.collapsed > .legend > *:nth-child(2)::after { |
|
ce0d61b…
|
stephan
|
623 |
content: " (tap to toggle)"; |
|
ce0d61b…
|
stephan
|
624 |
} |
|
ce0d61b…
|
stephan
|
625 |
body.chat #chat-user-list-wrapper .help-buttonlet { |
|
ce0d61b…
|
stephan
|
626 |
margin: 0; |
|
ce0d61b…
|
stephan
|
627 |
} |
|
ce0d61b…
|
stephan
|
628 |
body.chat #chat-user-list-wrapper.collapsed #chat-user-list { |
|
ce0d61b…
|
stephan
|
629 |
position: absolute !important; |
|
ce0d61b…
|
stephan
|
630 |
opacity: 0 !important; |
|
ce0d61b…
|
stephan
|
631 |
pointer-events: none !important; |
|
ce0d61b…
|
stephan
|
632 |
display: none !important; |
|
ce0d61b…
|
stephan
|
633 |
} |
|
ce0d61b…
|
stephan
|
634 |
body.chat #chat-user-list { |
|
ce0d61b…
|
stephan
|
635 |
margin-top: -1.25ex; |
|
ce0d61b…
|
stephan
|
636 |
display: flex; |
|
ce0d61b…
|
stephan
|
637 |
flex-direction: row; |
|
ce0d61b…
|
stephan
|
638 |
flex-wrap: wrap; |
|
ce0d61b…
|
stephan
|
639 |
align-items: center; |
|
ce0d61b…
|
stephan
|
640 |
} |
|
ce0d61b…
|
stephan
|
641 |
body.chat #chat-user-list .chat-user { |
|
ce0d61b…
|
stephan
|
642 |
margin: 0.2em; |
|
ce0d61b…
|
stephan
|
643 |
padding: 0.1em 0.5em 0.2em 0.5em; |
|
ce0d61b…
|
stephan
|
644 |
border-radius: 0.5em; |
|
ce0d61b…
|
stephan
|
645 |
cursor: pointer; |
|
ce0d61b…
|
stephan
|
646 |
text-align: center; |
|
ce0d61b…
|
stephan
|
647 |
white-space: pre; |
|
ce0d61b…
|
stephan
|
648 |
} |
|
ce0d61b…
|
stephan
|
649 |
body.chat #chat-user-list .timestamp { |
|
ce0d61b…
|
stephan
|
650 |
font-size: 85%; |
|
ce0d61b…
|
stephan
|
651 |
font-family: monospace; |
|
ce0d61b…
|
stephan
|
652 |
} |
|
ce0d61b…
|
stephan
|
653 |
body.chat #chat-user-list:not(.timestamps) .timestamp { |
|
ce0d61b…
|
stephan
|
654 |
display: none; |
|
ce0d61b…
|
stephan
|
655 |
} |
|
ce0d61b…
|
stephan
|
656 |
body.chat #chat-user-list .chat-user.selected { |
|
ce0d61b…
|
stephan
|
657 |
font-weight: bold; |
|
ce0d61b…
|
stephan
|
658 |
text-decoration: underline; |
|
ce0d61b…
|
stephan
|
659 |
} |
|
ce0d61b…
|
stephan
|
660 |
|
|
fc85382…
|
stephan
|
661 |
body.chat .searchForm { |
|
fc85382…
|
stephan
|
662 |
margin-top: 1em; |
|
fc85382…
|
stephan
|
663 |
} |
|
fc85382…
|
stephan
|
664 |
body.chat .spacer-widget button { |
|
fc85382…
|
stephan
|
665 |
margin-left: 1ex; |
|
fc85382…
|
stephan
|
666 |
margin-right: 1ex; |
|
fc85382…
|
stephan
|
667 |
display: block; |
|
fc85382…
|
stephan
|
668 |
margin-top: 0.5em; |
|
fc85382…
|
stephan
|
669 |
margin-bottom: 0.5em; |
|
469f1b0…
|
drh
|
670 |
} |
|
469f1b0…
|
drh
|
671 |
|
|
ce0d61b…
|
stephan
|
672 |
body.chat .anim-rotate-360 { |
|
ce0d61b…
|
stephan
|
673 |
animation: rotate-360 750ms linear; |
|
ce0d61b…
|
stephan
|
674 |
} |
|
ce0d61b…
|
stephan
|
675 |
@keyframes rotate-360 { |
|
ce0d61b…
|
stephan
|
676 |
from { transform: rotate(0deg); } |
|
ce0d61b…
|
stephan
|
677 |
to { transform: rotate(360deg); } |
|
ce0d61b…
|
stephan
|
678 |
} |
|
ce0d61b…
|
stephan
|
679 |
body.chat .anim-flip-h { |
|
ce0d61b…
|
stephan
|
680 |
animation: flip-h 750ms linear; |
|
ce0d61b…
|
stephan
|
681 |
} |
|
ce0d61b…
|
stephan
|
682 |
@keyframes flip-h{ |
|
ce0d61b…
|
stephan
|
683 |
from { transform: rotateY(0deg); } |
|
ce0d61b…
|
stephan
|
684 |
to { transform: rotateY(360deg); } |
|
ce0d61b…
|
stephan
|
685 |
} |
|
ce0d61b…
|
stephan
|
686 |
body.chat .anim-flip-v { |
|
ce0d61b…
|
stephan
|
687 |
animation: flip-v 750ms linear; |
|
ce0d61b…
|
stephan
|
688 |
} |
|
ce0d61b…
|
stephan
|
689 |
@keyframes flip-v{ |
|
ce0d61b…
|
stephan
|
690 |
from { transform: rotateX(0deg); } |
|
ce0d61b…
|
stephan
|
691 |
to { transform: rotateX(360deg); } |
|
ce0d61b…
|
stephan
|
692 |
} |
|
ce0d61b…
|
stephan
|
693 |
body.chat .anim-fade-in { |
|
ce0d61b…
|
stephan
|
694 |
animation: fade-in 750ms linear; |
|
ce0d61b…
|
stephan
|
695 |
} |
|
ce0d61b…
|
stephan
|
696 |
body.chat .anim-fade-in-fast { |
|
ce0d61b…
|
stephan
|
697 |
animation: fade-in 350ms linear; |
|
ce0d61b…
|
stephan
|
698 |
} |
|
ce0d61b…
|
stephan
|
699 |
@keyframes fade-in { |
|
ce0d61b…
|
stephan
|
700 |
from { opacity: 0; } |
|
ce0d61b…
|
stephan
|
701 |
to { opacity: 1; } |
|
ce0d61b…
|
stephan
|
702 |
} |
|
ce0d61b…
|
stephan
|
703 |
body.chat .anim-fade-out-fast { |
|
ce0d61b…
|
stephan
|
704 |
animation: fade-out 250ms linear; |
|
ce0d61b…
|
stephan
|
705 |
} |
|
ce0d61b…
|
stephan
|
706 |
@keyframes fade-out { |
|
ce0d61b…
|
stephan
|
707 |
from { opacity: 1; } |
|
ce0d61b…
|
stephan
|
708 |
to { opacity: 0; } |
|
ce0d61b…
|
stephan
|
709 |
} |
|
fc85382…
|
stephan
|
710 |
|