Fossil SCM

Teach stylesheet_url_var() to use the style_set_current_page() value, if set, instead of g.zPage, so that style_set_current_page() can be used to force closely-related pages (namely /chat and /chat-search) to use the same style.CurrentPageName.css, to avoid having to duplicate style sheets. Remove the now-unnecessary style.chat-search.css and port its handful of additions into style.chat.css. Adjust the /chat-search 'mark' CSS class to behave nicely in dark-mode themes.

stephan 2024-06-30 11:25 fts5-chat-search
Commit 3bf2275393d213f674bbf54016305004f45e4f084a3be7d94e9fd20849de82f1
Parent cdbdaee6421987b…
7 files changed +1 -1 +3 -2 -677 +31 +1 +2
~ src/chat.c ~ src/main.mk ~ src/style.c - src/style.chat-search.css ~ src/style.chat.css ~ win/Makefile.mingw ~ win/Makefile.msc
M src/chat.c
+1
--- src/chat.c
+++ src/chat.c
@@ -284,10 +284,11 @@
284284
 login_needed(g.anon.Chat);
285285
 return;
286286
 }
287287
288288
 style_set_current_feature("chat");
289
+ style_set_current_page("chat") /* so that we use style.chat.css */;
289290
 style_header("Chat Search");
290291
 @
291292
 @ <div id=results>
292293
 @ </div>
293294
 @ <div class='searchForm'>
294295
--- src/chat.c
+++ src/chat.c
@@ -284,10 +284,11 @@
284 login_needed(g.anon.Chat);
285 return;
286 }
287
288 style_set_current_feature("chat");
 
289 style_header("Chat Search");
290 @
291 @ <div id=results>
292 @ </div>
293 @ <div class='searchForm'>
294
--- src/chat.c
+++ src/chat.c
@@ -284,10 +284,11 @@
284 login_needed(g.anon.Chat);
285 return;
286 }
287
288 style_set_current_feature("chat");
289 style_set_current_page("chat") /* so that we use style.chat.css */;
290 style_header("Chat Search");
291 @
292 @ <div id=results>
293 @ </div>
294 @ <div class='searchForm'>
295
M src/main.mk
-1
--- src/main.mk
+++ src/main.mk
@@ -270,11 +270,10 @@
270270
 $(SRCDIR)/sounds/d.wav \
271271
 $(SRCDIR)/sounds/e.wav \
272272
 $(SRCDIR)/sounds/f.wav \
273273
 $(SRCDIR)/style.admin_log.css \
274274
 $(SRCDIR)/style.chat.css \
275
- $(SRCDIR)/style.chat-search.css \
276275
 $(SRCDIR)/style.fileedit.css \
277276
 $(SRCDIR)/style.pikchrshow.css \
278277
 $(SRCDIR)/style.wikiedit.css \
279278
 $(SRCDIR)/tree.js \
280279
 $(SRCDIR)/useredit.js \
281280
--- src/main.mk
+++ src/main.mk
@@ -270,11 +270,10 @@
270 $(SRCDIR)/sounds/d.wav \
271 $(SRCDIR)/sounds/e.wav \
272 $(SRCDIR)/sounds/f.wav \
273 $(SRCDIR)/style.admin_log.css \
274 $(SRCDIR)/style.chat.css \
275 $(SRCDIR)/style.chat-search.css \
276 $(SRCDIR)/style.fileedit.css \
277 $(SRCDIR)/style.pikchrshow.css \
278 $(SRCDIR)/style.wikiedit.css \
279 $(SRCDIR)/tree.js \
280 $(SRCDIR)/useredit.js \
281
--- src/main.mk
+++ src/main.mk
@@ -270,11 +270,10 @@
270 $(SRCDIR)/sounds/d.wav \
271 $(SRCDIR)/sounds/e.wav \
272 $(SRCDIR)/sounds/f.wav \
273 $(SRCDIR)/style.admin_log.css \
274 $(SRCDIR)/style.chat.css \
 
275 $(SRCDIR)/style.fileedit.css \
276 $(SRCDIR)/style.pikchrshow.css \
277 $(SRCDIR)/style.wikiedit.css \
278 $(SRCDIR)/tree.js \
279 $(SRCDIR)/useredit.js \
280
M src/style.c
+3 -2
--- src/style.c
+++ src/style.c
@@ -419,10 +419,11 @@
419419
 ** or after a change to the stylesheet.
420420
 */
421421
 static void stylesheet_url_var(void){
422422
 char *zBuiltin; /* Auxiliary page-specific CSS page */
423423
 Blob url; /* The URL */
424
+ const char * zPage = local_zCurrentPage ? local_zCurrentPage : g.zPath;
424425
425426
 /* Initialize the URL to its baseline */
426427
 url = empty_blob;
427428
 blob_appendf(&url, "%R/style.css");
428429
@@ -438,13 +439,13 @@
438439
 **
439440
 ** The /style.css page (implemented below) will detect this extra "wikiedit"
440441
 ** path information and include the page-specific CSS along with the
441442
 ** default CSS when it delivers the page.
442443
 */
443
- zBuiltin = mprintf("style.%s.css", g.zPath);
444
+ zBuiltin = mprintf("style.%s.css", zPage);
444445
 if( builtin_file(zBuiltin,0)!=0 ){
445
- blob_appendf(&url, "/%s", g.zPath);
446
+ blob_appendf(&url, "/%s", zPage);
446447
 }
447448
 fossil_free(zBuiltin);
448449
449450
 /* Add query parameters that will change whenever the skin changes
450451
 ** or after any updates to the CSS files
451452
452453
DELETED src/style.chat-search.css
--- src/style.c
+++ src/style.c
@@ -419,10 +419,11 @@
419 ** or after a change to the stylesheet.
420 */
421 static void stylesheet_url_var(void){
422 char *zBuiltin; /* Auxiliary page-specific CSS page */
423 Blob url; /* The URL */
 
424
425 /* Initialize the URL to its baseline */
426 url = empty_blob;
427 blob_appendf(&url, "%R/style.css");
428
@@ -438,13 +439,13 @@
438 **
439 ** The /style.css page (implemented below) will detect this extra "wikiedit"
440 ** path information and include the page-specific CSS along with the
441 ** default CSS when it delivers the page.
442 */
443 zBuiltin = mprintf("style.%s.css", g.zPath);
444 if( builtin_file(zBuiltin,0)!=0 ){
445 blob_appendf(&url, "/%s", g.zPath);
446 }
447 fossil_free(zBuiltin);
448
449 /* Add query parameters that will change whenever the skin changes
450 ** or after any updates to the CSS files
451
452 ELETED src/style.chat-search.css
--- src/style.c
+++ src/style.c
@@ -419,10 +419,11 @@
419 ** or after a change to the stylesheet.
420 */
421 static void stylesheet_url_var(void){
422 char *zBuiltin; /* Auxiliary page-specific CSS page */
423 Blob url; /* The URL */
424 const char * zPage = local_zCurrentPage ? local_zCurrentPage : g.zPath;
425
426 /* Initialize the URL to its baseline */
427 url = empty_blob;
428 blob_appendf(&url, "%R/style.css");
429
@@ -438,13 +439,13 @@
439 **
440 ** The /style.css page (implemented below) will detect this extra "wikiedit"
441 ** path information and include the page-specific CSS along with the
442 ** default CSS when it delivers the page.
443 */
444 zBuiltin = mprintf("style.%s.css", zPage);
445 if( builtin_file(zBuiltin,0)!=0 ){
446 blob_appendf(&url, "/%s", zPage);
447 }
448 fossil_free(zBuiltin);
449
450 /* Add query parameters that will change whenever the skin changes
451 ** or after any updates to the CSS files
452
453 ELETED src/style.chat-search.css
D src/style.chat-search.css
-677
--- a/src/style.chat-search.css
+++ b/src/style.chat-search.css
@@ -1,677 +0,0 @@
1
-/* Chat-related */
2
-body.chat span.at-name { /* for @USERNAME references */
3
- text-decoration: underline;
4
- font-weight: bold;
5
-}
6
-/* A wrapper for a single single chat message (one row of the UI) */
7
-body.chat .message-widget {
8
- margin-bottom: 0.75em;
9
- border: none;
10
- display: flex;
11
- flex-direction: column;
12
- border: none;
13
- align-items: flex-start;
14
-}
15
-body.chat button,
16
-body.chat input[type=button] {
17
- line-height: inherit/*undo skin-specific funkiness*/;
18
-}
19
-
20
-body.chat.my-messages-right .message-widget.mine {
21
- /* Right-aligns a user's own chat messages, similar to how
22
- most/some mobile messaging apps do it. */
23
- align-items: flex-end;
24
-}
25
-body.chat.my-messages-right .message-widget.notification {
26
- /* Center-aligns a system-level notification message. */
27
- align-items: center;
28
-}
29
-/* The content area of a message. */
30
-body.chat .message-widget-content {
31
- border-radius: 0.25em;
32
- border: 1px solid rgba(0,0,0,0.2);
33
- box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.29);
34
- padding: 0.25em 0.5em;
35
- margin-top: 0;
36
- min-width: 9em /*avoid unsightly "underlap" with the neighboring
37
- .message-widget-tab element*/;
38
- white-space: normal;
39
- word-break: break-word /* so that full hashes wrap on narrow screens */;
40
-}
41
-
42
-body.chat .message-widget-content.wide {
43
- /* Special case for when embedding content which we really want to
44
- expand, namely iframes. */
45
- width: 98%;
46
-}
47
-body.chat .message-widget-content label[for] {
48
- margin-left: 0.25em;
49
- cursor: pointer;
50
-}
51
-body.chat .message-widget-content > .attachment-link {
52
- display: flex;
53
- flex-direction: row;
54
-}
55
-body.chat .message-widget-content > .attachment-link > a {
56
- margin-right: 1em;
57
-}
58
-body.chat .message-widget-content > iframe {
59
- width: 100%;
60
- max-width: 100%;
61
- resize: both;
62
-}
63
-body.chat .message-widget-content> a {
64
- /* Cosmetic: keep skin-induced on-hover underlining from shifting
65
- content placed below this. */
66
- border-bottom: 1px transparent;
67
-}
68
-body.chat.monospace-messages .message-widget-content,
69
-body.chat.monospace-messages .chat-input-field{
70
- font-family: monospace;
71
-}
72
-body.chat .message-widget-content > * {
73
- margin: 0;
74
- padding: 0;
75
-}
76
-body.chat .message-widget-content > pre {
77
- white-space: pre-wrap;
78
-}
79
-body.chat .message-widget-content > .markdown > *:first-child {
80
- margin-top: 0;
81
-}
82
-body.chat .message-widget-content > .markdown > *:last-child {
83
- margin-bottom: 0;
84
-}
85
-body.chat .message-widget-content.error .buttons {
86
- display: flex;
87
- flex-direction: row;
88
- justify-content: space-around;
89
- flex-wrap: wrap;
90
-}
91
-body.chat .message-widget-content.error .buttons > button {
92
- margin: 0.25em;
93
-}
94
-
95
-body.chat .message-widget-content.error a {
96
- color: inherit;
97
-}
98
-body.chat .message-widget-content.error .failed-message {
99
- display: flex;
100
- flex-direction: column;
101
-}
102
-body.chat .message-widget-content.error .failed-message textarea {
103
- min-height: 5rem;
104
-}
105
-
106
-/* User name and timestamp (a LEGEND-like element) */
107
-body.chat .message-widget .message-widget-tab {
108
- border-radius: 0.25em 0.25em 0 0;
109
- margin: 0 0.25em 0em 0.15em;
110
- padding: 0 0.5em 0.15em 0.5em;
111
- cursor: pointer;
112
- white-space: nowrap;
113
-}
114
-body.chat .fossil-tooltip.help-buttonlet-content {
115
- font-size: 80%;
116
-}
117
-body.chat .message-widget .message-widget-tab .xfrom {
118
- /* Element which holds the "this message is from user X" part
119
- of the message banner. */
120
- font-style: italic;
121
- font-weight: bold;
122
-}
123
-/* The popup element for displaying message timestamps
124
- and deletion controls. */
125
-body.chat .chat-message-popup {
126
- font-family: monospace;
127
- font-size: 0.9em;
128
- text-align: left;
129
- display: flex;
130
- flex-direction: column;
131
- align-items: stretch;
132
- padding: 0.25em;
133
- margin-top: 0.25em;
134
- border: 1px outset;
135
- border-radius: 0.5em;
136
-}
137
-/* Full message timestamps. */
138
-body.chat .chat-message-popup > span { white-space: nowrap; }
139
-/* Container for the message deletion buttons. */
140
-body.chat .chat-message-popup > .toolbar {
141
- padding: 0;
142
- margin: 0;
143
- border: 2px inset rgba(0,0,0,0.3);
144
- border-radius: 0.25em;
145
- display: flex;
146
- flex-direction: row;
147
- justify-content: stretch;
148
- flex-wrap: wrap;
149
- align-items: center;
150
-}
151
-body.chat .chat-message-popup > .toolbar > * {
152
- margin: 0.35em;
153
-}
154
-body.chat .chat-message-popup > .toolbar > button {
155
- flex: 1 1 auto;
156
-}
157
-/* The widget for loading more/older chat messages. */
158
-body.chat #load-msg-toolbar {
159
- border-radius: 0.25em;
160
- padding: 0.1em 0.2em;
161
- margin-bottom: 1em;
162
-}
163
-/* .all-done is set when chat has loaded all of the available
164
- historical messages */
165
-body.chat #load-msg-toolbar.all-done {
166
- opacity: 0.5;
167
-}
168
-body.chat #load-msg-toolbar > div {
169
- display: flex;
170
- flex-direction: row;
171
- justify-content: stretch;
172
- flex-wrap: wrap;
173
-}
174
-body.chat #load-msg-toolbar > div > button {
175
- flex: 1 1 auto;
176
-}
177
-/* "Chat-only mode" hides the site header/footer, showing only
178
- the chat app. */
179
-body.chat.chat-only-mode{
180
- padding: 0;
181
- margin: 0 auto;
182
-}
183
-body.chat #chat-button-settings {}
184
-/** Popup widget for the /chat settings. */
185
-body.chat .chat-settings-popup {
186
- font-size: 0.8em;
187
- text-align: left;
188
- display: flex;
189
- flex-direction: column;
190
- align-items: stretch;
191
- padding: 0.25em;
192
- z-index: 200;
193
-}
194
-
195
-/** Container for the list of /chat messages. */
196
-body.chat #chat-messages-wrapper {
197
- overflow: auto;
198
- padding: 0 0.25em;
199
-}
200
-body.chat #chat-messages-wrapper.loading > * {
201
- /* An attempt at reducing flicker when loading lots of messages. */
202
- visibility: hidden;
203
-}
204
-body.chat div.content {
205
- margin: 0;
206
- padding: 0;
207
- display: block;
208
- flex-direction: column-reverse;
209
- /* ^^^^ In order to get good automatic scrolling of new messages on
210
- the BOTTOM in bottom-up chat mode, such that they scroll up
211
- instead of down, we have to use column-reverse layout, which
212
- changes #chat-messages-wrapper's "gravity" for purposes of
213
- scrolling! If we instead use flex-direction:column then each new
214
- message pushes #chat-input-area down further off the screen!
215
- */
216
- align-items: stretch;
217
-}
218
-/* Wrapper for /chat user input controls */
219
-body.chat #chat-input-area {
220
- display: flex;
221
- flex-direction: column;
222
- padding: 0;
223
- margin: 0;
224
- flex: 0 1 auto;
225
-}
226
-body.chat:not(.chat-only-mode) #chat-input-area{
227
- /* Safari user reports that 2em is necessary to keep the file selection
228
- widget from overlapping the page footer, whereas a margin of 0 is fine
229
- for FF/Chrome (and 2em is a *huge* waste of space for those). */
230
- margin-bottom: 0;
231
-}
232
-.chat-input-field {
233
- flex: 10 1 auto;
234
- margin: 0;
235
-}
236
-#chat-input-field-x,
237
-#chat-input-field-multi {
238
- overflow: auto;
239
- resize: vertical;
240
-}
241
-#chat-input-field-x {
242
- display: inline-block/*supposed workaround for Chrome weirdness*/;
243
- padding: 0.2em;
244
- background-color: rgba(156,156,156,0.3);
245
- white-space: pre-wrap;
246
- /* ^^^ Firefox, when pasting plain text into a contenteditable field,
247
- loses all newlines unless we explicitly set this. Chrome does not. */
248
- cursor: text;
249
- /* ^^^ In some browsers the cursor may not change for a contenteditable
250
- element until it has focus, causing potential confusion. */
251
-}
252
-#chat-input-field-x:empty::before {
253
- content: attr(data-placeholder);
254
- opacity: 0.6;
255
-}
256
-.chat-input-field:not(:focus){
257
- border-width: 1px;
258
- border-style: solid;
259
- border-radius: 0.25em;
260
-}
261
-.chat-input-field:focus{
262
- /* This transparent border helps avoid the text shifting around
263
- when the contenteditable attribute causes a border (which we
264
- apparently cannot style) to be added. */
265
- border-width: 1px;
266
- border-style: solid;
267
- border-color: transparent;
268
- border-radius: 0.25em;
269
-}
270
-/* Widget holding the chat message input field, send button, and
271
- settings button. */
272
-body.chat #chat-input-line-wrapper {
273
- display: flex;
274
- flex-direction: row;
275
- align-items: stretch;
276
- flex-wrap: nowrap;
277
-}
278
-body.chat.chat-only-mode #chat-input-line-wrapper {
279
- padding: 0 0.25em;
280
-}
281
-
282
-/*body.chat #chat-input-line-wrapper:not(.compact) {
283
- flex-wrap: nowrap;
284
-}*/
285
-body.chat #chat-input-line-wrapper.compact {
286
- /* "The problem" with wrapping, together with a contenteditable input
287
- field, is that the latter grows as the user types, so causes
288
- wrapping to happen while they type, then to unwrap as soon as the
289
- input field is cleared (when the message is sent). When we stay
290
- wrapped in compact mode, the wrapped buttons simply take up too
291
- much space. */
292
- /*flex-wrap: wrap;
293
- justify-content: flex-end;*/
294
- flex-direction: column;
295
- /**
296
- We "really do" need column orientation here because it's the
297
- only way to eliminate the possibility that (A) the buttons
298
- get truncated in very narrow windows and (B) that they keep
299
- stable positions.
300
- */
301
-}
302
-body.chat #chat-input-line-wrapper.compact #chat-input-field-x {
303
-}
304
-
305
-body.chat #chat-buttons-wrapper {
306
- flex: 0 1 auto;
307
- display: flex;
308
- flex-direction: column;
309
- align-items: center;
310
- min-width: 4em;
311
- min-height: 1.5em;
312
- align-self: flex-end
313
- /*keep buttons stable at bottom/right even when input field
314
- resizes */;
315
-}
316
-body.chat #chat-input-line-wrapper.compact #chat-buttons-wrapper {
317
- flex-direction: row;
318
- flex: 1 1 auto;
319
- align-self: stretch;
320
- justify-content: flex-end;
321
- /*flex-wrap: wrap;*/
322
- /* Wrapping would be ideal except that the edit widget
323
- grows in width as the user types, moving the buttons
324
- around */
325
-}
326
-body.chat #chat-buttons-wrapper > .cbutton {
327
- padding: 0;
328
- display: inline-block;
329
- border-width: 1px;
330
- border-style: solid;
331
- border-radius: 0.25em;
332
- min-width: 4ex;
333
- max-width: 4ex;
334
- min-height: 3ex;
335
- max-height: 3ex;
336
- margin: 0.125em;
337
- display: inline-flex;
338
- justify-content: center;
339
- align-items: center;
340
- cursor: pointer;
341
- font-size: 130%;
342
-}
343
-body.chat #chat-buttons-wrapper > .cbutton:hover {
344
- background-color: rgba(200,200,200,0.3);
345
-}
346
-body.chat #chat-input-line-wrapper.compact #chat-buttons-wrapper > .cbutton {
347
- margin: 2px 0.125em 0 0.125em;
348
- min-width: 6ex;
349
- max-width: 6ex;
350
- min-height: 2.3ex;
351
- max-height: 2.3ex;
352
- font-size: 120%;
353
-}
354
-body.chat #chat-input-line-wrapper.compact #chat-buttons-wrapper #chat-button-submit {
355
- min-width: 12ex;
356
-}
357
-.chat-input-field {
358
- font-family: inherit
359
-}
360
-body.chat #chat-input-line-wrapper:not(.compact) #chat-input-field-multi,
361
-body.chat #chat-input-line-wrapper:not(.compact) #chat-input-field-x {
362
- min-height: 4rem;
363
-/*
364
- Problems related to max-height:
365
-
366
- - If we do NOT set a max-height then pasting/typing a large amount
367
- of text can cause this element to grow without bounds, larger than
368
- the window, and there's no way to navigate it sensibly. In this
369
- case, manually resizing the element (desktop only - mobile doesn't
370
- offer that) will force it to stay at the selected size even if more
371
- content is added to it later.
372
-
373
- - If we DO set a max-height then its growth is bounded but it also
374
- cannot manually expanded by the user.
375
-
376
- The lesser of the two evils seems to be to rely on the browser
377
- feature that a manual resize of the element will pin its size.
378
-*/
379
-}
380
-
381
-body.chat #chat-input-line-wrapper > #chat-button-settings{
382
- margin: 0 0 0 0.25em;
383
- max-width: 2em;
384
-}
385
-body.chat #chat-input-line-wrapper > input[type=text],
386
-body.chat #chat-input-line-wrapper > textarea {
387
- flex: 20 1 auto;
388
- max-width: revert;
389
- min-width: 20em;
390
-}
391
-body.chat #chat-input-line-wrapper.compact > input[type=text] {
392
- margin: 0 0 0.25em 0/* gap for if/when buttons wrap*/;
393
-}
394
-/* Widget holding the file selection control and preview */
395
-body.chat #chat-input-file-area {
396
- display: flex;
397
- flex-direction: row;
398
- margin: 0;
399
-}
400
-body.chat #chat-input-file-area > .file-selection-wrapper {
401
- align-self: flex-start;
402
- margin-right: 0.5em;
403
- flex: 0 1 auto;
404
- padding: 0.25em 0.5em;
405
- white-space: nowrap;
406
-}
407
-body.chat #chat-input-file {
408
- border:1px solid rgba(0,0,0,0);/*avoid UI shift during drop-targeting*/
409
- border-radius: 0.25em;
410
- padding: 0.25em;
411
-}
412
-body.chat #chat-input-file > input {
413
- flex: 1 0 auto;
414
-}
415
-/* Indicator when a drag/drop is in progress */
416
-body.chat #chat-input-file.dragover {
417
- border: 1px dashed green;
418
-}
419
-/* Widget holding the details of a selected/dropped file/image. */
420
-body.chat #chat-drop-details {
421
- padding: 0 1em;
422
- white-space: pre;
423
- font-family: monospace;
424
- margin: auto;
425
- flex: 0;
426
-}
427
-body.chat #chat-drop-details:empty {
428
- padding: 0;
429
- margin: 0;
430
-}
431
-body.chat #chat-drop-details img {
432
- max-width: 45%;
433
- max-height: 45%;
434
-}
435
-body.chat .chat-view {
436
- flex: 20 1 auto
437
- /*ensure that these grow more than the non-.chat-view elements.
438
- Note that setting flex shrink to 0 breaks/disables scrolling!*/;
439
- margin-bottom: 0.2em;
440
-}
441
-body.chat #chat-config,
442
-body.chat #chat-preview {
443
- /* /chat configuration widget */
444
- display: flex;
445
- flex-direction: column;
446
- overflow: auto;
447
- padding: 0;
448
- margin: 0;
449
- align-items: stretch;
450
- min-height: 6em;
451
-}
452
-body.chat #chat-config #chat-config-options {
453
- /* /chat config options go here */
454
- flex: 1 1 auto;
455
- display: flex;
456
- flex-direction: column;
457
- overflow: auto;
458
- align-items: stretch;
459
-}
460
-body.chat #chat-config #chat-config-options .menu-entry {
461
- display: flex;
462
- align-items: center;
463
- flex-direction: row-reverse;
464
- flex-wrap: nowrap;
465
- padding: 1em;
466
- flex: 1 1 auto;
467
- align-self: stretch;
468
-}
469
-body.chat #chat-config #chat-config-options .menu-entry.parent{
470
- border-radius: 1em 1em 0 1em;
471
- margin-top: 1em;
472
-}
473
-body.chat #chat-config #chat-config-options .menu-entry.child {
474
- /*padding-left: 2.5em;*/
475
- margin-left: 2em;
476
-}
477
-body.chat #chat-config #chat-config-options .menu-entry:nth-of-type(even){
478
- background-color: rgba(175,175,175,0.15);
479
-}
480
-body.chat #chat-config #chat-config-options .menu-entry:nth-of-type(odd){
481
- background-color: rgba(175,175,175,0.35);
482
-}
483
-body.chat #chat-config #chat-config-options .menu-entry:first-child {
484
- /* Config list header */
485
- border-radius: 0 0 1em 1em;
486
-}
487
-body.chat #chat-config #chat-config-options .menu-entry:first-child .label-wrapper {
488
- align-items: start;
489
-}
490
-body.chat #chat-config #chat-config-options .menu-entry > .toggle-wrapper {
491
- /* Holder for a checkbox, if any */
492
- min-width: 1.5rem;
493
- margin-right: 1rem;
494
-}
495
-body.chat #chat-config #chat-config-options .menu-entry .label-wrapper {
496
- /* Wrapper for a LABEL and a .hint element. */
497
- display: flex;
498
- flex-direction: column;
499
- align-self: baseline;
500
- flex: 1 1 auto;
501
-}
502
-body.chat #chat-config #chat-config-options .menu-entry label {
503
- /* Config option label. */
504
- font-weight: bold;
505
- white-space: initial;
506
-}
507
-body.chat #chat-config #chat-config-options .menu-entry label[for] {
508
- cursor: pointer;
509
-}
510
-body.chat #chat-config #chat-config-options .menu-entry .hint {
511
- /* Config menu hint text */
512
- font-size: 85%;
513
- font-weight: normal;
514
- white-space: pre-wrap;
515
- display: inline-block;
516
- opacity: 0.85;
517
-}
518
-body.chat #chat-config #chat-config-options .menu-entry select {
519
-}
520
-body.chat #chat-preview #chat-preview-content {
521
- overflow: auto;
522
- flex: 1 1 auto;
523
- padding: 0.5em;
524
- border: 1px dotted;
525
-}
526
-body.chat #chat-preview #chat-preview-content > * {
527
- margin: 0;
528
- padding: 0;
529
-}
530
-body.chat #chat-preview #chat-preview-buttons {
531
- flex: 0 1 auto;
532
- display: flex;
533
- flex-direction: column;
534
-}
535
-body.chat #chat-config > button,
536
-body.chat #chat-preview #chat-preview-buttons > button {
537
- padding: 0.5em;
538
- flex: 0 1 auto;
539
- margin: 0.25em 0;
540
-}
541
-
542
-body.chat #chat-user-list-wrapper {
543
- /* Safari can't do fieldsets right, so we emulate one. */
544
- border-radius: 0.5em;
545
- margin: 1em 0 0.2em 0;
546
- padding: 0 0.5em;
547
- border-style: inset;
548
- border-width: 0 1px 1px 1px/*else collides with the LEGEND*/;
549
-}
550
-body.chat #chat-user-list-wrapper.collapsed {
551
- padding: 0;
552
-}
553
-body.chat #chat-user-list-wrapper > .legend {
554
- font-weight: initial;
555
- padding: 0 0.5em 0 0.5em;
556
- position: relative;
557
- top: -1.75ex/* place it like a fieldset legend */;
558
- cursor: pointer;
559
-}
560
-body.chat #chat-user-list-wrapper > .legend > * {
561
- vertical-align: middle;
562
-}
563
-body.chat #chat-user-list-wrapper > .legend > *:nth-child(2){
564
- /* Title label */
565
- opacity: 0.6;
566
- font-size: 0.8em;
567
-}
568
-body.chat #chat-user-list-wrapper.collapsed > .legend > *:nth-child(2)::after {
569
- content: " (tap to toggle)";
570
-}
571
-body.chat #chat-user-list-wrapper .help-buttonlet {
572
- margin: 0;
573
-}
574
-body.chat #chat-user-list-wrapper.collapsed #chat-user-list {
575
- position: absolute !important;
576
- opacity: 0 !important;
577
- pointer-events: none !important;
578
- display: none !important;
579
-}
580
-body.chat #chat-user-list {
581
- margin-top: -1.25ex;
582
- display: flex;
583
- flex-direction: row;
584
- flex-wrap: wrap;
585
- align-items: center;
586
-}
587
-body.chat #chat-user-list .chat-user {
588
- margin: 0.2em;
589
- padding: 0.1em 0.5em 0.2em 0.5em;
590
- border-radius: 0.5em;
591
- cursor: pointer;
592
- text-align: center;
593
- white-space: pre;
594
-}
595
-body.chat #chat-user-list .timestamp {
596
- font-size: 85%;
597
- font-family: monospace;
598
-}
599
-body.chat #chat-user-list:not(.timestamps) .timestamp {
600
- display: none;
601
-}
602
-body.chat #chat-user-list .chat-user.selected {
603
- font-weight: bold;
604
- text-decoration: underline;
605
-}
606
-
607
-body.chat.fossil-dark-style #chat-button-attach > svg {
608
- /* The black paperclip is barely visible in dark-mode
609
- skins when they have dark buttons */
610
- filter: invert(0.8);
611
-}
612
-
613
-body.chat .anim-rotate-360 {
614
- animation: rotate-360 750ms linear;
615
-}
616
-@keyframes rotate-360 {
617
- from { transform: rotate(0deg); }
618
- to { transform: rotate(360deg); }
619
-}
620
-body.chat .anim-flip-h {
621
- animation: flip-h 750ms linear;
622
-}
623
-@keyframes flip-h{
624
- from { transform: rotateY(0deg); }
625
- to { transform: rotateY(360deg); }
626
-}
627
-body.chat .anim-flip-v {
628
- animation: flip-v 750ms linear;
629
-}
630
-@keyframes flip-v{
631
- from { transform: rotateX(0deg); }
632
- to { transform: rotateX(360deg); }
633
-}
634
-body.chat .anim-fade-in {
635
- animation: fade-in 750ms linear;
636
-}
637
-body.chat .anim-fade-in-fast {
638
- animation: fade-in 350ms linear;
639
-}
640
-@keyframes fade-in {
641
- from { opacity: 0; }
642
- to { opacity: 1; }
643
-}
644
-body.chat .anim-fade-out-fast {
645
- animation: fade-out 250ms linear;
646
-}
647
-@keyframes fade-out {
648
- from { opacity: 1; }
649
- to { opacity: 0; }
650
-}
651
-
652
-/***********************/
653
-
654
-body.chat .message-widget .match {
655
- font-weight: bold;
656
- background-color: yellow;
657
-}
658
-
659
-body.chat .searchForm {
660
- margin-top: 1em;
661
-}
662
-body.chat .spacer-widget button {
663
- margin-left: 1ex;
664
- margin-right: 1ex;
665
-}
666
-
667
-body.chat .spacer-widget-buttons .up {
668
- margin-top: -0.75em;
669
- margin-bottom: 1em;
670
-}
671
-body.chat .spacer-widget-buttons .down {
672
- margin-top: 1em;
673
-}
674
-body.chat .spacer-widget-buttons .all {
675
- margin-bottom: 0.75em;
676
-}
677
-
--- a/src/style.chat-search.css
+++ b/src/style.chat-search.css
@@ -1,677 +0,0 @@
1 /* Chat-related */
2 body.chat span.at-name { /* for @USERNAME references */
3 text-decoration: underline;
4 font-weight: bold;
5 }
6 /* A wrapper for a single single chat message (one row of the UI) */
7 body.chat .message-widget {
8 margin-bottom: 0.75em;
9 border: none;
10 display: flex;
11 flex-direction: column;
12 border: none;
13 align-items: flex-start;
14 }
15 body.chat button,
16 body.chat input[type=button] {
17 line-height: inherit/*undo skin-specific funkiness*/;
18 }
19
20 body.chat.my-messages-right .message-widget.mine {
21 /* Right-aligns a user's own chat messages, similar to how
22 most/some mobile messaging apps do it. */
23 align-items: flex-end;
24 }
25 body.chat.my-messages-right .message-widget.notification {
26 /* Center-aligns a system-level notification message. */
27 align-items: center;
28 }
29 /* The content area of a message. */
30 body.chat .message-widget-content {
31 border-radius: 0.25em;
32 border: 1px solid rgba(0,0,0,0.2);
33 box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.29);
34 padding: 0.25em 0.5em;
35 margin-top: 0;
36 min-width: 9em /*avoid unsightly "underlap" with the neighboring
37 .message-widget-tab element*/;
38 white-space: normal;
39 word-break: break-word /* so that full hashes wrap on narrow screens */;
40 }
41
42 body.chat .message-widget-content.wide {
43 /* Special case for when embedding content which we really want to
44 expand, namely iframes. */
45 width: 98%;
46 }
47 body.chat .message-widget-content label[for] {
48 margin-left: 0.25em;
49 cursor: pointer;
50 }
51 body.chat .message-widget-content > .attachment-link {
52 display: flex;
53 flex-direction: row;
54 }
55 body.chat .message-widget-content > .attachment-link > a {
56 margin-right: 1em;
57 }
58 body.chat .message-widget-content > iframe {
59 width: 100%;
60 max-width: 100%;
61 resize: both;
62 }
63 body.chat .message-widget-content> a {
64 /* Cosmetic: keep skin-induced on-hover underlining from shifting
65 content placed below this. */
66 border-bottom: 1px transparent;
67 }
68 body.chat.monospace-messages .message-widget-content,
69 body.chat.monospace-messages .chat-input-field{
70 font-family: monospace;
71 }
72 body.chat .message-widget-content > * {
73 margin: 0;
74 padding: 0;
75 }
76 body.chat .message-widget-content > pre {
77 white-space: pre-wrap;
78 }
79 body.chat .message-widget-content > .markdown > *:first-child {
80 margin-top: 0;
81 }
82 body.chat .message-widget-content > .markdown > *:last-child {
83 margin-bottom: 0;
84 }
85 body.chat .message-widget-content.error .buttons {
86 display: flex;
87 flex-direction: row;
88 justify-content: space-around;
89 flex-wrap: wrap;
90 }
91 body.chat .message-widget-content.error .buttons > button {
92 margin: 0.25em;
93 }
94
95 body.chat .message-widget-content.error a {
96 color: inherit;
97 }
98 body.chat .message-widget-content.error .failed-message {
99 display: flex;
100 flex-direction: column;
101 }
102 body.chat .message-widget-content.error .failed-message textarea {
103 min-height: 5rem;
104 }
105
106 /* User name and timestamp (a LEGEND-like element) */
107 body.chat .message-widget .message-widget-tab {
108 border-radius: 0.25em 0.25em 0 0;
109 margin: 0 0.25em 0em 0.15em;
110 padding: 0 0.5em 0.15em 0.5em;
111 cursor: pointer;
112 white-space: nowrap;
113 }
114 body.chat .fossil-tooltip.help-buttonlet-content {
115 font-size: 80%;
116 }
117 body.chat .message-widget .message-widget-tab .xfrom {
118 /* Element which holds the "this message is from user X" part
119 of the message banner. */
120 font-style: italic;
121 font-weight: bold;
122 }
123 /* The popup element for displaying message timestamps
124 and deletion controls. */
125 body.chat .chat-message-popup {
126 font-family: monospace;
127 font-size: 0.9em;
128 text-align: left;
129 display: flex;
130 flex-direction: column;
131 align-items: stretch;
132 padding: 0.25em;
133 margin-top: 0.25em;
134 border: 1px outset;
135 border-radius: 0.5em;
136 }
137 /* Full message timestamps. */
138 body.chat .chat-message-popup > span { white-space: nowrap; }
139 /* Container for the message deletion buttons. */
140 body.chat .chat-message-popup > .toolbar {
141 padding: 0;
142 margin: 0;
143 border: 2px inset rgba(0,0,0,0.3);
144 border-radius: 0.25em;
145 display: flex;
146 flex-direction: row;
147 justify-content: stretch;
148 flex-wrap: wrap;
149 align-items: center;
150 }
151 body.chat .chat-message-popup > .toolbar > * {
152 margin: 0.35em;
153 }
154 body.chat .chat-message-popup > .toolbar > button {
155 flex: 1 1 auto;
156 }
157 /* The widget for loading more/older chat messages. */
158 body.chat #load-msg-toolbar {
159 border-radius: 0.25em;
160 padding: 0.1em 0.2em;
161 margin-bottom: 1em;
162 }
163 /* .all-done is set when chat has loaded all of the available
164 historical messages */
165 body.chat #load-msg-toolbar.all-done {
166 opacity: 0.5;
167 }
168 body.chat #load-msg-toolbar > div {
169 display: flex;
170 flex-direction: row;
171 justify-content: stretch;
172 flex-wrap: wrap;
173 }
174 body.chat #load-msg-toolbar > div > button {
175 flex: 1 1 auto;
176 }
177 /* "Chat-only mode" hides the site header/footer, showing only
178 the chat app. */
179 body.chat.chat-only-mode{
180 padding: 0;
181 margin: 0 auto;
182 }
183 body.chat #chat-button-settings {}
184 /** Popup widget for the /chat settings. */
185 body.chat .chat-settings-popup {
186 font-size: 0.8em;
187 text-align: left;
188 display: flex;
189 flex-direction: column;
190 align-items: stretch;
191 padding: 0.25em;
192 z-index: 200;
193 }
194
195 /** Container for the list of /chat messages. */
196 body.chat #chat-messages-wrapper {
197 overflow: auto;
198 padding: 0 0.25em;
199 }
200 body.chat #chat-messages-wrapper.loading > * {
201 /* An attempt at reducing flicker when loading lots of messages. */
202 visibility: hidden;
203 }
204 body.chat div.content {
205 margin: 0;
206 padding: 0;
207 display: block;
208 flex-direction: column-reverse;
209 /* ^^^^ In order to get good automatic scrolling of new messages on
210 the BOTTOM in bottom-up chat mode, such that they scroll up
211 instead of down, we have to use column-reverse layout, which
212 changes #chat-messages-wrapper's "gravity" for purposes of
213 scrolling! If we instead use flex-direction:column then each new
214 message pushes #chat-input-area down further off the screen!
215 */
216 align-items: stretch;
217 }
218 /* Wrapper for /chat user input controls */
219 body.chat #chat-input-area {
220 display: flex;
221 flex-direction: column;
222 padding: 0;
223 margin: 0;
224 flex: 0 1 auto;
225 }
226 body.chat:not(.chat-only-mode) #chat-input-area{
227 /* Safari user reports that 2em is necessary to keep the file selection
228 widget from overlapping the page footer, whereas a margin of 0 is fine
229 for FF/Chrome (and 2em is a *huge* waste of space for those). */
230 margin-bottom: 0;
231 }
232 .chat-input-field {
233 flex: 10 1 auto;
234 margin: 0;
235 }
236 #chat-input-field-x,
237 #chat-input-field-multi {
238 overflow: auto;
239 resize: vertical;
240 }
241 #chat-input-field-x {
242 display: inline-block/*supposed workaround for Chrome weirdness*/;
243 padding: 0.2em;
244 background-color: rgba(156,156,156,0.3);
245 white-space: pre-wrap;
246 /* ^^^ Firefox, when pasting plain text into a contenteditable field,
247 loses all newlines unless we explicitly set this. Chrome does not. */
248 cursor: text;
249 /* ^^^ In some browsers the cursor may not change for a contenteditable
250 element until it has focus, causing potential confusion. */
251 }
252 #chat-input-field-x:empty::before {
253 content: attr(data-placeholder);
254 opacity: 0.6;
255 }
256 .chat-input-field:not(:focus){
257 border-width: 1px;
258 border-style: solid;
259 border-radius: 0.25em;
260 }
261 .chat-input-field:focus{
262 /* This transparent border helps avoid the text shifting around
263 when the contenteditable attribute causes a border (which we
264 apparently cannot style) to be added. */
265 border-width: 1px;
266 border-style: solid;
267 border-color: transparent;
268 border-radius: 0.25em;
269 }
270 /* Widget holding the chat message input field, send button, and
271 settings button. */
272 body.chat #chat-input-line-wrapper {
273 display: flex;
274 flex-direction: row;
275 align-items: stretch;
276 flex-wrap: nowrap;
277 }
278 body.chat.chat-only-mode #chat-input-line-wrapper {
279 padding: 0 0.25em;
280 }
281
282 /*body.chat #chat-input-line-wrapper:not(.compact) {
283 flex-wrap: nowrap;
284 }*/
285 body.chat #chat-input-line-wrapper.compact {
286 /* "The problem" with wrapping, together with a contenteditable input
287 field, is that the latter grows as the user types, so causes
288 wrapping to happen while they type, then to unwrap as soon as the
289 input field is cleared (when the message is sent). When we stay
290 wrapped in compact mode, the wrapped buttons simply take up too
291 much space. */
292 /*flex-wrap: wrap;
293 justify-content: flex-end;*/
294 flex-direction: column;
295 /**
296 We "really do" need column orientation here because it's the
297 only way to eliminate the possibility that (A) the buttons
298 get truncated in very narrow windows and (B) that they keep
299 stable positions.
300 */
301 }
302 body.chat #chat-input-line-wrapper.compact #chat-input-field-x {
303 }
304
305 body.chat #chat-buttons-wrapper {
306 flex: 0 1 auto;
307 display: flex;
308 flex-direction: column;
309 align-items: center;
310 min-width: 4em;
311 min-height: 1.5em;
312 align-self: flex-end
313 /*keep buttons stable at bottom/right even when input field
314 resizes */;
315 }
316 body.chat #chat-input-line-wrapper.compact #chat-buttons-wrapper {
317 flex-direction: row;
318 flex: 1 1 auto;
319 align-self: stretch;
320 justify-content: flex-end;
321 /*flex-wrap: wrap;*/
322 /* Wrapping would be ideal except that the edit widget
323 grows in width as the user types, moving the buttons
324 around */
325 }
326 body.chat #chat-buttons-wrapper > .cbutton {
327 padding: 0;
328 display: inline-block;
329 border-width: 1px;
330 border-style: solid;
331 border-radius: 0.25em;
332 min-width: 4ex;
333 max-width: 4ex;
334 min-height: 3ex;
335 max-height: 3ex;
336 margin: 0.125em;
337 display: inline-flex;
338 justify-content: center;
339 align-items: center;
340 cursor: pointer;
341 font-size: 130%;
342 }
343 body.chat #chat-buttons-wrapper > .cbutton:hover {
344 background-color: rgba(200,200,200,0.3);
345 }
346 body.chat #chat-input-line-wrapper.compact #chat-buttons-wrapper > .cbutton {
347 margin: 2px 0.125em 0 0.125em;
348 min-width: 6ex;
349 max-width: 6ex;
350 min-height: 2.3ex;
351 max-height: 2.3ex;
352 font-size: 120%;
353 }
354 body.chat #chat-input-line-wrapper.compact #chat-buttons-wrapper #chat-button-submit {
355 min-width: 12ex;
356 }
357 .chat-input-field {
358 font-family: inherit
359 }
360 body.chat #chat-input-line-wrapper:not(.compact) #chat-input-field-multi,
361 body.chat #chat-input-line-wrapper:not(.compact) #chat-input-field-x {
362 min-height: 4rem;
363 /*
364 Problems related to max-height:
365
366 - If we do NOT set a max-height then pasting/typing a large amount
367 of text can cause this element to grow without bounds, larger than
368 the window, and there's no way to navigate it sensibly. In this
369 case, manually resizing the element (desktop only - mobile doesn't
370 offer that) will force it to stay at the selected size even if more
371 content is added to it later.
372
373 - If we DO set a max-height then its growth is bounded but it also
374 cannot manually expanded by the user.
375
376 The lesser of the two evils seems to be to rely on the browser
377 feature that a manual resize of the element will pin its size.
378 */
379 }
380
381 body.chat #chat-input-line-wrapper > #chat-button-settings{
382 margin: 0 0 0 0.25em;
383 max-width: 2em;
384 }
385 body.chat #chat-input-line-wrapper > input[type=text],
386 body.chat #chat-input-line-wrapper > textarea {
387 flex: 20 1 auto;
388 max-width: revert;
389 min-width: 20em;
390 }
391 body.chat #chat-input-line-wrapper.compact > input[type=text] {
392 margin: 0 0 0.25em 0/* gap for if/when buttons wrap*/;
393 }
394 /* Widget holding the file selection control and preview */
395 body.chat #chat-input-file-area {
396 display: flex;
397 flex-direction: row;
398 margin: 0;
399 }
400 body.chat #chat-input-file-area > .file-selection-wrapper {
401 align-self: flex-start;
402 margin-right: 0.5em;
403 flex: 0 1 auto;
404 padding: 0.25em 0.5em;
405 white-space: nowrap;
406 }
407 body.chat #chat-input-file {
408 border:1px solid rgba(0,0,0,0);/*avoid UI shift during drop-targeting*/
409 border-radius: 0.25em;
410 padding: 0.25em;
411 }
412 body.chat #chat-input-file > input {
413 flex: 1 0 auto;
414 }
415 /* Indicator when a drag/drop is in progress */
416 body.chat #chat-input-file.dragover {
417 border: 1px dashed green;
418 }
419 /* Widget holding the details of a selected/dropped file/image. */
420 body.chat #chat-drop-details {
421 padding: 0 1em;
422 white-space: pre;
423 font-family: monospace;
424 margin: auto;
425 flex: 0;
426 }
427 body.chat #chat-drop-details:empty {
428 padding: 0;
429 margin: 0;
430 }
431 body.chat #chat-drop-details img {
432 max-width: 45%;
433 max-height: 45%;
434 }
435 body.chat .chat-view {
436 flex: 20 1 auto
437 /*ensure that these grow more than the non-.chat-view elements.
438 Note that setting flex shrink to 0 breaks/disables scrolling!*/;
439 margin-bottom: 0.2em;
440 }
441 body.chat #chat-config,
442 body.chat #chat-preview {
443 /* /chat configuration widget */
444 display: flex;
445 flex-direction: column;
446 overflow: auto;
447 padding: 0;
448 margin: 0;
449 align-items: stretch;
450 min-height: 6em;
451 }
452 body.chat #chat-config #chat-config-options {
453 /* /chat config options go here */
454 flex: 1 1 auto;
455 display: flex;
456 flex-direction: column;
457 overflow: auto;
458 align-items: stretch;
459 }
460 body.chat #chat-config #chat-config-options .menu-entry {
461 display: flex;
462 align-items: center;
463 flex-direction: row-reverse;
464 flex-wrap: nowrap;
465 padding: 1em;
466 flex: 1 1 auto;
467 align-self: stretch;
468 }
469 body.chat #chat-config #chat-config-options .menu-entry.parent{
470 border-radius: 1em 1em 0 1em;
471 margin-top: 1em;
472 }
473 body.chat #chat-config #chat-config-options .menu-entry.child {
474 /*padding-left: 2.5em;*/
475 margin-left: 2em;
476 }
477 body.chat #chat-config #chat-config-options .menu-entry:nth-of-type(even){
478 background-color: rgba(175,175,175,0.15);
479 }
480 body.chat #chat-config #chat-config-options .menu-entry:nth-of-type(odd){
481 background-color: rgba(175,175,175,0.35);
482 }
483 body.chat #chat-config #chat-config-options .menu-entry:first-child {
484 /* Config list header */
485 border-radius: 0 0 1em 1em;
486 }
487 body.chat #chat-config #chat-config-options .menu-entry:first-child .label-wrapper {
488 align-items: start;
489 }
490 body.chat #chat-config #chat-config-options .menu-entry > .toggle-wrapper {
491 /* Holder for a checkbox, if any */
492 min-width: 1.5rem;
493 margin-right: 1rem;
494 }
495 body.chat #chat-config #chat-config-options .menu-entry .label-wrapper {
496 /* Wrapper for a LABEL and a .hint element. */
497 display: flex;
498 flex-direction: column;
499 align-self: baseline;
500 flex: 1 1 auto;
501 }
502 body.chat #chat-config #chat-config-options .menu-entry label {
503 /* Config option label. */
504 font-weight: bold;
505 white-space: initial;
506 }
507 body.chat #chat-config #chat-config-options .menu-entry label[for] {
508 cursor: pointer;
509 }
510 body.chat #chat-config #chat-config-options .menu-entry .hint {
511 /* Config menu hint text */
512 font-size: 85%;
513 font-weight: normal;
514 white-space: pre-wrap;
515 display: inline-block;
516 opacity: 0.85;
517 }
518 body.chat #chat-config #chat-config-options .menu-entry select {
519 }
520 body.chat #chat-preview #chat-preview-content {
521 overflow: auto;
522 flex: 1 1 auto;
523 padding: 0.5em;
524 border: 1px dotted;
525 }
526 body.chat #chat-preview #chat-preview-content > * {
527 margin: 0;
528 padding: 0;
529 }
530 body.chat #chat-preview #chat-preview-buttons {
531 flex: 0 1 auto;
532 display: flex;
533 flex-direction: column;
534 }
535 body.chat #chat-config > button,
536 body.chat #chat-preview #chat-preview-buttons > button {
537 padding: 0.5em;
538 flex: 0 1 auto;
539 margin: 0.25em 0;
540 }
541
542 body.chat #chat-user-list-wrapper {
543 /* Safari can't do fieldsets right, so we emulate one. */
544 border-radius: 0.5em;
545 margin: 1em 0 0.2em 0;
546 padding: 0 0.5em;
547 border-style: inset;
548 border-width: 0 1px 1px 1px/*else collides with the LEGEND*/;
549 }
550 body.chat #chat-user-list-wrapper.collapsed {
551 padding: 0;
552 }
553 body.chat #chat-user-list-wrapper > .legend {
554 font-weight: initial;
555 padding: 0 0.5em 0 0.5em;
556 position: relative;
557 top: -1.75ex/* place it like a fieldset legend */;
558 cursor: pointer;
559 }
560 body.chat #chat-user-list-wrapper > .legend > * {
561 vertical-align: middle;
562 }
563 body.chat #chat-user-list-wrapper > .legend > *:nth-child(2){
564 /* Title label */
565 opacity: 0.6;
566 font-size: 0.8em;
567 }
568 body.chat #chat-user-list-wrapper.collapsed > .legend > *:nth-child(2)::after {
569 content: " (tap to toggle)";
570 }
571 body.chat #chat-user-list-wrapper .help-buttonlet {
572 margin: 0;
573 }
574 body.chat #chat-user-list-wrapper.collapsed #chat-user-list {
575 position: absolute !important;
576 opacity: 0 !important;
577 pointer-events: none !important;
578 display: none !important;
579 }
580 body.chat #chat-user-list {
581 margin-top: -1.25ex;
582 display: flex;
583 flex-direction: row;
584 flex-wrap: wrap;
585 align-items: center;
586 }
587 body.chat #chat-user-list .chat-user {
588 margin: 0.2em;
589 padding: 0.1em 0.5em 0.2em 0.5em;
590 border-radius: 0.5em;
591 cursor: pointer;
592 text-align: center;
593 white-space: pre;
594 }
595 body.chat #chat-user-list .timestamp {
596 font-size: 85%;
597 font-family: monospace;
598 }
599 body.chat #chat-user-list:not(.timestamps) .timestamp {
600 display: none;
601 }
602 body.chat #chat-user-list .chat-user.selected {
603 font-weight: bold;
604 text-decoration: underline;
605 }
606
607 body.chat.fossil-dark-style #chat-button-attach > svg {
608 /* The black paperclip is barely visible in dark-mode
609 skins when they have dark buttons */
610 filter: invert(0.8);
611 }
612
613 body.chat .anim-rotate-360 {
614 animation: rotate-360 750ms linear;
615 }
616 @keyframes rotate-360 {
617 from { transform: rotate(0deg); }
618 to { transform: rotate(360deg); }
619 }
620 body.chat .anim-flip-h {
621 animation: flip-h 750ms linear;
622 }
623 @keyframes flip-h{
624 from { transform: rotateY(0deg); }
625 to { transform: rotateY(360deg); }
626 }
627 body.chat .anim-flip-v {
628 animation: flip-v 750ms linear;
629 }
630 @keyframes flip-v{
631 from { transform: rotateX(0deg); }
632 to { transform: rotateX(360deg); }
633 }
634 body.chat .anim-fade-in {
635 animation: fade-in 750ms linear;
636 }
637 body.chat .anim-fade-in-fast {
638 animation: fade-in 350ms linear;
639 }
640 @keyframes fade-in {
641 from { opacity: 0; }
642 to { opacity: 1; }
643 }
644 body.chat .anim-fade-out-fast {
645 animation: fade-out 250ms linear;
646 }
647 @keyframes fade-out {
648 from { opacity: 1; }
649 to { opacity: 0; }
650 }
651
652 /***********************/
653
654 body.chat .message-widget .match {
655 font-weight: bold;
656 background-color: yellow;
657 }
658
659 body.chat .searchForm {
660 margin-top: 1em;
661 }
662 body.chat .spacer-widget button {
663 margin-left: 1ex;
664 margin-right: 1ex;
665 }
666
667 body.chat .spacer-widget-buttons .up {
668 margin-top: -0.75em;
669 margin-bottom: 1em;
670 }
671 body.chat .spacer-widget-buttons .down {
672 margin-top: 1em;
673 }
674 body.chat .spacer-widget-buttons .all {
675 margin-bottom: 0.75em;
676 }
677
--- a/src/style.chat-search.css
+++ b/src/style.chat-search.css
@@ -1,677 +0,0 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
M src/style.chat.css
+31
--- src/style.chat.css
+++ src/style.chat.css
@@ -121,10 +121,20 @@
121121
 /* Element which holds the "this message is from user X" part
122122
 of the message banner. */
123123
 font-style: italic;
124124
 font-weight: bold;
125125
 }
126
+
127
+body.chat .message-widget .match {
128
+ font-weight: bold;
129
+ background-color: yellow;
130
+}
131
+
132
+body.chat.fossil-dark-style .message-widget .match {
133
+ background-color: #ff4800;
134
+}
135
+
126136
 /* The popup element for displaying message timestamps
127137
 and deletion controls. */
128138
 body.chat .chat-message-popup {
129139
 font-family: monospace;
130140
 font-size: 0.9em;
@@ -610,10 +620,30 @@
610620
 body.chat.fossil-dark-style #chat-button-attach > svg {
611621
 /* The black paperclip is barely visible in dark-mode
612622
 skins when they have dark buttons */
613623
 filter: invert(0.8);
614624
 }
625
+
626
+body.cpage-chat-search .searchForm {
627
+ margin-top: 1em;
628
+}
629
+body.cpage-chat-search .spacer-widget button {
630
+ margin-left: 1ex;
631
+ margin-right: 1ex;
632
+}
633
+
634
+body.cpage-chat-search .spacer-widget-buttons .up {
635
+ margin-top: -0.75em;
636
+ margin-bottom: 1em;
637
+}
638
+body.cpage-chat-search .spacer-widget-buttons .down {
639
+ margin-top: 1em;
640
+}
641
+body.cpage-chat-search .spacer-widget-buttons .all {
642
+ margin-bottom: 0.75em;
643
+}
644
+
615645
616646
 body.chat .anim-rotate-360 {
617647
 animation: rotate-360 750ms linear;
618648
 }
619649
 @keyframes rotate-360 {
@@ -649,5 +679,6 @@
649679
 }
650680
 @keyframes fade-out {
651681
 from { opacity: 1; }
652682
 to { opacity: 0; }
653683
 }
684
+
654685
--- src/style.chat.css
+++ src/style.chat.css
@@ -121,10 +121,20 @@
121 /* Element which holds the "this message is from user X" part
122 of the message banner. */
123 font-style: italic;
124 font-weight: bold;
125 }
 
 
 
 
 
 
 
 
 
 
126 /* The popup element for displaying message timestamps
127 and deletion controls. */
128 body.chat .chat-message-popup {
129 font-family: monospace;
130 font-size: 0.9em;
@@ -610,10 +620,30 @@
610 body.chat.fossil-dark-style #chat-button-attach > svg {
611 /* The black paperclip is barely visible in dark-mode
612 skins when they have dark buttons */
613 filter: invert(0.8);
614 }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
615
616 body.chat .anim-rotate-360 {
617 animation: rotate-360 750ms linear;
618 }
619 @keyframes rotate-360 {
@@ -649,5 +679,6 @@
649 }
650 @keyframes fade-out {
651 from { opacity: 1; }
652 to { opacity: 0; }
653 }
 
654
--- src/style.chat.css
+++ src/style.chat.css
@@ -121,10 +121,20 @@
121 /* Element which holds the "this message is from user X" part
122 of the message banner. */
123 font-style: italic;
124 font-weight: bold;
125 }
126
127 body.chat .message-widget .match {
128 font-weight: bold;
129 background-color: yellow;
130 }
131
132 body.chat.fossil-dark-style .message-widget .match {
133 background-color: #ff4800;
134 }
135
136 /* The popup element for displaying message timestamps
137 and deletion controls. */
138 body.chat .chat-message-popup {
139 font-family: monospace;
140 font-size: 0.9em;
@@ -610,10 +620,30 @@
620 body.chat.fossil-dark-style #chat-button-attach > svg {
621 /* The black paperclip is barely visible in dark-mode
622 skins when they have dark buttons */
623 filter: invert(0.8);
624 }
625
626 body.cpage-chat-search .searchForm {
627 margin-top: 1em;
628 }
629 body.cpage-chat-search .spacer-widget button {
630 margin-left: 1ex;
631 margin-right: 1ex;
632 }
633
634 body.cpage-chat-search .spacer-widget-buttons .up {
635 margin-top: -0.75em;
636 margin-bottom: 1em;
637 }
638 body.cpage-chat-search .spacer-widget-buttons .down {
639 margin-top: 1em;
640 }
641 body.cpage-chat-search .spacer-widget-buttons .all {
642 margin-bottom: 0.75em;
643 }
644
645
646 body.chat .anim-rotate-360 {
647 animation: rotate-360 750ms linear;
648 }
649 @keyframes rotate-360 {
@@ -649,5 +679,6 @@
679 }
680 @keyframes fade-out {
681 from { opacity: 1; }
682 to { opacity: 0; }
683 }
684
685
M win/Makefile.mingw
+1
--- win/Makefile.mingw
+++ win/Makefile.mingw
@@ -617,10 +617,11 @@
617617
 $(SRCDIR)/fossil.dom.js \
618618
 $(SRCDIR)/fossil.fetch.js \
619619
 $(SRCDIR)/fossil.numbered-lines.js \
620620
 $(SRCDIR)/fossil.page.brlist.js \
621621
 $(SRCDIR)/fossil.page.chat.js \
622
+ $(SRCDIR)/fossil.page.chatsearch.js \
622623
 $(SRCDIR)/fossil.page.fileedit.js \
623624
 $(SRCDIR)/fossil.page.forumpost.js \
624625
 $(SRCDIR)/fossil.page.pikchrshow.js \
625626
 $(SRCDIR)/fossil.page.pikchrshowasm.js \
626627
 $(SRCDIR)/fossil.page.whistory.js \
627628
--- win/Makefile.mingw
+++ win/Makefile.mingw
@@ -617,10 +617,11 @@
617 $(SRCDIR)/fossil.dom.js \
618 $(SRCDIR)/fossil.fetch.js \
619 $(SRCDIR)/fossil.numbered-lines.js \
620 $(SRCDIR)/fossil.page.brlist.js \
621 $(SRCDIR)/fossil.page.chat.js \
 
622 $(SRCDIR)/fossil.page.fileedit.js \
623 $(SRCDIR)/fossil.page.forumpost.js \
624 $(SRCDIR)/fossil.page.pikchrshow.js \
625 $(SRCDIR)/fossil.page.pikchrshowasm.js \
626 $(SRCDIR)/fossil.page.whistory.js \
627
--- win/Makefile.mingw
+++ win/Makefile.mingw
@@ -617,10 +617,11 @@
617 $(SRCDIR)/fossil.dom.js \
618 $(SRCDIR)/fossil.fetch.js \
619 $(SRCDIR)/fossil.numbered-lines.js \
620 $(SRCDIR)/fossil.page.brlist.js \
621 $(SRCDIR)/fossil.page.chat.js \
622 $(SRCDIR)/fossil.page.chatsearch.js \
623 $(SRCDIR)/fossil.page.fileedit.js \
624 $(SRCDIR)/fossil.page.forumpost.js \
625 $(SRCDIR)/fossil.page.pikchrshow.js \
626 $(SRCDIR)/fossil.page.pikchrshowasm.js \
627 $(SRCDIR)/fossil.page.whistory.js \
628
M win/Makefile.msc
+2
--- win/Makefile.msc
+++ win/Makefile.msc
@@ -575,10 +575,11 @@
575575
 "$(SRCDIR)\fossil.dom.js" \
576576
 "$(SRCDIR)\fossil.fetch.js" \
577577
 "$(SRCDIR)\fossil.numbered-lines.js" \
578578
 "$(SRCDIR)\fossil.page.brlist.js" \
579579
 "$(SRCDIR)\fossil.page.chat.js" \
580
+ "$(SRCDIR)\fossil.page.chatsearch.js" \
580581
 "$(SRCDIR)\fossil.page.fileedit.js" \
581582
 "$(SRCDIR)\fossil.page.forumpost.js" \
582583
 "$(SRCDIR)\fossil.page.pikchrshow.js" \
583584
 "$(SRCDIR)\fossil.page.pikchrshowasm.js" \
584585
 "$(SRCDIR)\fossil.page.whistory.js" \
@@ -1204,10 +1205,11 @@
12041205
 echo "$(SRCDIR)\fossil.dom.js" >> $@
12051206
 echo "$(SRCDIR)\fossil.fetch.js" >> $@
12061207
 echo "$(SRCDIR)\fossil.numbered-lines.js" >> $@
12071208
 echo "$(SRCDIR)\fossil.page.brlist.js" >> $@
12081209
 echo "$(SRCDIR)\fossil.page.chat.js" >> $@
1210
+ echo "$(SRCDIR)\fossil.page.chatsearch.js" >> $@
12091211
 echo "$(SRCDIR)\fossil.page.fileedit.js" >> $@
12101212
 echo "$(SRCDIR)\fossil.page.forumpost.js" >> $@
12111213
 echo "$(SRCDIR)\fossil.page.pikchrshow.js" >> $@
12121214
 echo "$(SRCDIR)\fossil.page.pikchrshowasm.js" >> $@
12131215
 echo "$(SRCDIR)\fossil.page.whistory.js" >> $@
12141216
--- win/Makefile.msc
+++ win/Makefile.msc
@@ -575,10 +575,11 @@
575 "$(SRCDIR)\fossil.dom.js" \
576 "$(SRCDIR)\fossil.fetch.js" \
577 "$(SRCDIR)\fossil.numbered-lines.js" \
578 "$(SRCDIR)\fossil.page.brlist.js" \
579 "$(SRCDIR)\fossil.page.chat.js" \
 
580 "$(SRCDIR)\fossil.page.fileedit.js" \
581 "$(SRCDIR)\fossil.page.forumpost.js" \
582 "$(SRCDIR)\fossil.page.pikchrshow.js" \
583 "$(SRCDIR)\fossil.page.pikchrshowasm.js" \
584 "$(SRCDIR)\fossil.page.whistory.js" \
@@ -1204,10 +1205,11 @@
1204 echo "$(SRCDIR)\fossil.dom.js" >> $@
1205 echo "$(SRCDIR)\fossil.fetch.js" >> $@
1206 echo "$(SRCDIR)\fossil.numbered-lines.js" >> $@
1207 echo "$(SRCDIR)\fossil.page.brlist.js" >> $@
1208 echo "$(SRCDIR)\fossil.page.chat.js" >> $@
 
1209 echo "$(SRCDIR)\fossil.page.fileedit.js" >> $@
1210 echo "$(SRCDIR)\fossil.page.forumpost.js" >> $@
1211 echo "$(SRCDIR)\fossil.page.pikchrshow.js" >> $@
1212 echo "$(SRCDIR)\fossil.page.pikchrshowasm.js" >> $@
1213 echo "$(SRCDIR)\fossil.page.whistory.js" >> $@
1214
--- win/Makefile.msc
+++ win/Makefile.msc
@@ -575,10 +575,11 @@
575 "$(SRCDIR)\fossil.dom.js" \
576 "$(SRCDIR)\fossil.fetch.js" \
577 "$(SRCDIR)\fossil.numbered-lines.js" \
578 "$(SRCDIR)\fossil.page.brlist.js" \
579 "$(SRCDIR)\fossil.page.chat.js" \
580 "$(SRCDIR)\fossil.page.chatsearch.js" \
581 "$(SRCDIR)\fossil.page.fileedit.js" \
582 "$(SRCDIR)\fossil.page.forumpost.js" \
583 "$(SRCDIR)\fossil.page.pikchrshow.js" \
584 "$(SRCDIR)\fossil.page.pikchrshowasm.js" \
585 "$(SRCDIR)\fossil.page.whistory.js" \
@@ -1204,10 +1205,11 @@
1205 echo "$(SRCDIR)\fossil.dom.js" >> $@
1206 echo "$(SRCDIR)\fossil.fetch.js" >> $@
1207 echo "$(SRCDIR)\fossil.numbered-lines.js" >> $@
1208 echo "$(SRCDIR)\fossil.page.brlist.js" >> $@
1209 echo "$(SRCDIR)\fossil.page.chat.js" >> $@
1210 echo "$(SRCDIR)\fossil.page.chatsearch.js" >> $@
1211 echo "$(SRCDIR)\fossil.page.fileedit.js" >> $@
1212 echo "$(SRCDIR)\fossil.page.forumpost.js" >> $@
1213 echo "$(SRCDIR)\fossil.page.pikchrshow.js" >> $@
1214 echo "$(SRCDIR)\fossil.page.pikchrshowasm.js" >> $@
1215 echo "$(SRCDIR)\fossil.page.whistory.js" >> $@
1216

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button