Fossil SCM

Eliminated some of the new layout quirks caused by the change in /chat input field type.

stephan 2021-09-30 02:11 chat-input-rework
Commit bcfb758dc38b434c2e91616802e122b3dc4f412fc4fc7cfe7f67b579ccaccaeb
Parent c24d2bb67c7e5e0…
1 file changed +31 -9
~ src/style.chat.css
M src/style.chat.css
+31 -9
--- src/style.chat.css
+++ src/style.chat.css
@@ -37,11 +37,12 @@
3737
 .message-widget-tab element*/;
3838
 white-space: normal;
3939
 }
4040
 body.chat.monospace-messages .message-widget-content,
4141
 body.chat.monospace-messages textarea,
42
-body.chat.monospace-messages input[type=text]{
42
+body.chat.monospace-messages input[type=text],
43
+body.chat.monospace-messages #chat-input-field{
4344
 font-family: monospace;
4445
 }
4546
 body.chat .message-widget-content > * {
4647
 margin: 0;
4748
 padding: 0;
@@ -178,31 +179,55 @@
178179
 for FF/Chrome (and 2em is a *huge* waste of space for those). */
179180
 margin-bottom: 0;
180181
 }
181182
 #chat-input-field {
182183
 padding: 0.2em;
183
- flex: 50 1 auto;
184
+ flex: 50 1 85%;
185
+ background-color: rgba(156,156,156,0.3);
186
+ overflow: auto;
187
+ max-height: 8rem /*arbitrary!*/;
188
+}
189
+#chat-input-field:not(:focus){
190
+ border-width: 1px;
191
+ border-style: solid;
192
+ border-radius: 0.25em;
193
+}
194
+#chat-input-field:focus{
195
+ /* This transparent border helps avoid the text shifting around
196
+ when the contenteditable attribute causes a border (which we
197
+ apparently cannot style) to be added. */
184198
 border-width: 1px;
185199
 border-style: solid;
200
+ border-color: transparent;
201
+ border-radius: 0.25em;
186202
 }
187
-
188203
 /* Widget holding the chat message input field, send button, and
189204
 settings button. */
190205
 body.chat #chat-input-line {
191206
 display: flex;
192207
 flex-direction: row;
193208
 align-items: stretch;
194
- flex-wrap: wrap;
209
+ flex-wrap: nowrap;
210
+}
211
+/*body.chat #chat-input-line:not(.single-line) {
212
+ flex-wrap: nowrap;
213
+}*/
214
+body.chat #chat-input-line.single-line #chat-input-field {
215
+ max-height: 2rem /*arbitrary*/;
195216
 }
217
+
196218
 body.chat #chat-edit-buttons {
197219
 flex: 1 1 auto;
198220
 display: flex;
199221
 flex-direction: column;
200222
 justify-content: space-between;
223
+ min-width: 4em;
224
+ min-height: 1.5em;
201225
 }
202226
 body.chat #chat-input-line.single-line #chat-edit-buttons {
203227
 flex-direction: row;
228
+ margin-top: 0.25em;
204229
 }
205230
 body.chat #chat-edit-buttons > * {
206231
 flex: 1 1 auto;
207232
 padding: initial/*some skins mess this up for buttons*/;
208233
 }
@@ -210,17 +235,14 @@
210235
 max-width: 4em;
211236
 margin: 0.25em;
212237
 min-height: 2em;
213238
 }
214239
 body.chat #chat-input-line:not(.single-line) #chat-input-field {
215
- border-left-style: double;
240
+ /*border-left-style: double;
216241
 border-left-width: 3px;
217242
 border-right-style: double;
218
- border-right-width: 3px;
219
- max-height: 10em/*arbitrary!*/;
220
- overflow: auto;
221
- font-family: monospace;
243
+ border-right-width: 3px;*/
222244
 }
223245
224246
 body.chat #chat-input-line.single-line #chat-edit-buttons > * {
225247
 margin: 0 0.25em;
226248
 min-width: 2em;
227249
--- src/style.chat.css
+++ src/style.chat.css
@@ -37,11 +37,12 @@
37 .message-widget-tab element*/;
38 white-space: normal;
39 }
40 body.chat.monospace-messages .message-widget-content,
41 body.chat.monospace-messages textarea,
42 body.chat.monospace-messages input[type=text]{
 
43 font-family: monospace;
44 }
45 body.chat .message-widget-content > * {
46 margin: 0;
47 padding: 0;
@@ -178,31 +179,55 @@
178 for FF/Chrome (and 2em is a *huge* waste of space for those). */
179 margin-bottom: 0;
180 }
181 #chat-input-field {
182 padding: 0.2em;
183 flex: 50 1 auto;
 
 
 
 
 
 
 
 
 
 
 
 
 
184 border-width: 1px;
185 border-style: solid;
 
 
186 }
187
188 /* Widget holding the chat message input field, send button, and
189 settings button. */
190 body.chat #chat-input-line {
191 display: flex;
192 flex-direction: row;
193 align-items: stretch;
194 flex-wrap: wrap;
 
 
 
 
 
 
195 }
 
196 body.chat #chat-edit-buttons {
197 flex: 1 1 auto;
198 display: flex;
199 flex-direction: column;
200 justify-content: space-between;
 
 
201 }
202 body.chat #chat-input-line.single-line #chat-edit-buttons {
203 flex-direction: row;
 
204 }
205 body.chat #chat-edit-buttons > * {
206 flex: 1 1 auto;
207 padding: initial/*some skins mess this up for buttons*/;
208 }
@@ -210,17 +235,14 @@
210 max-width: 4em;
211 margin: 0.25em;
212 min-height: 2em;
213 }
214 body.chat #chat-input-line:not(.single-line) #chat-input-field {
215 border-left-style: double;
216 border-left-width: 3px;
217 border-right-style: double;
218 border-right-width: 3px;
219 max-height: 10em/*arbitrary!*/;
220 overflow: auto;
221 font-family: monospace;
222 }
223
224 body.chat #chat-input-line.single-line #chat-edit-buttons > * {
225 margin: 0 0.25em;
226 min-width: 2em;
227
--- src/style.chat.css
+++ src/style.chat.css
@@ -37,11 +37,12 @@
37 .message-widget-tab element*/;
38 white-space: normal;
39 }
40 body.chat.monospace-messages .message-widget-content,
41 body.chat.monospace-messages textarea,
42 body.chat.monospace-messages input[type=text],
43 body.chat.monospace-messages #chat-input-field{
44 font-family: monospace;
45 }
46 body.chat .message-widget-content > * {
47 margin: 0;
48 padding: 0;
@@ -178,31 +179,55 @@
179 for FF/Chrome (and 2em is a *huge* waste of space for those). */
180 margin-bottom: 0;
181 }
182 #chat-input-field {
183 padding: 0.2em;
184 flex: 50 1 85%;
185 background-color: rgba(156,156,156,0.3);
186 overflow: auto;
187 max-height: 8rem /*arbitrary!*/;
188 }
189 #chat-input-field:not(:focus){
190 border-width: 1px;
191 border-style: solid;
192 border-radius: 0.25em;
193 }
194 #chat-input-field:focus{
195 /* This transparent border helps avoid the text shifting around
196 when the contenteditable attribute causes a border (which we
197 apparently cannot style) to be added. */
198 border-width: 1px;
199 border-style: solid;
200 border-color: transparent;
201 border-radius: 0.25em;
202 }
 
203 /* Widget holding the chat message input field, send button, and
204 settings button. */
205 body.chat #chat-input-line {
206 display: flex;
207 flex-direction: row;
208 align-items: stretch;
209 flex-wrap: nowrap;
210 }
211 /*body.chat #chat-input-line:not(.single-line) {
212 flex-wrap: nowrap;
213 }*/
214 body.chat #chat-input-line.single-line #chat-input-field {
215 max-height: 2rem /*arbitrary*/;
216 }
217
218 body.chat #chat-edit-buttons {
219 flex: 1 1 auto;
220 display: flex;
221 flex-direction: column;
222 justify-content: space-between;
223 min-width: 4em;
224 min-height: 1.5em;
225 }
226 body.chat #chat-input-line.single-line #chat-edit-buttons {
227 flex-direction: row;
228 margin-top: 0.25em;
229 }
230 body.chat #chat-edit-buttons > * {
231 flex: 1 1 auto;
232 padding: initial/*some skins mess this up for buttons*/;
233 }
@@ -210,17 +235,14 @@
235 max-width: 4em;
236 margin: 0.25em;
237 min-height: 2em;
238 }
239 body.chat #chat-input-line:not(.single-line) #chat-input-field {
240 /*border-left-style: double;
241 border-left-width: 3px;
242 border-right-style: double;
243 border-right-width: 3px;*/
 
 
 
244 }
245
246 body.chat #chat-input-line.single-line #chat-edit-buttons > * {
247 margin: 0 0.25em;
248 min-width: 2em;
249

Keyboard Shortcuts

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