Fossil SCM
Chat style tweaks.
Commit
3e956a2354c2003f8ad29a638a7e2a535cca5009b5292203d8a93bc318d33e56
Parent
4c0146f180ef15b…
1 file changed
+5
-4
+5
-4
| --- src/chat.c | ||
| +++ src/chat.c | ||
| @@ -84,17 +84,19 @@ | ||
| 84 | 84 | @ #chat-input-file { |
| 85 | 85 | @ display: flex; |
| 86 | 86 | @ flex-direction: row; |
| 87 | 87 | @ align-items: center; |
| 88 | 88 | @ } |
| 89 | - @ #chat-input-file > span, | |
| 90 | 89 | @ #chat-input-file > input[type=file] { |
| 91 | 90 | @ align-self: flex-start; |
| 91 | + @ flex: 1 1 auto; | |
| 92 | 92 | @ } |
| 93 | 93 | @ #chat-input-file > input { |
| 94 | 94 | @ flex: 1 0 auto; |
| 95 | 95 | @ } |
| 96 | + @ #chat-input-file > *:nth-child(1) { margin-right: 0.5em; } | |
| 97 | + @ #chat-input-file > *:nth-child(2) { margin-left: 0.5em; } | |
| 96 | 98 | @ .chat-timestamp { |
| 97 | 99 | @ font-family: monospace; |
| 98 | 100 | @ font-size: 0.8em; |
| 99 | 101 | @ white-space: pre; |
| 100 | 102 | @ text-align: left; |
| @@ -101,11 +103,11 @@ | ||
| 101 | 103 | @ opacity: 0.8; |
| 102 | 104 | @ } |
| 103 | 105 | @ #chat-drop-zone { |
| 104 | 106 | @ box-sizing: content-box; |
| 105 | 107 | @ background-color: #e0e0e0; |
| 106 | - @ flex: 3 1 auto; | |
| 108 | + @ flex: 2 1 auto; | |
| 107 | 109 | @ padding: 0.5em 1em; |
| 108 | 110 | @ border: 1px solid #808080; |
| 109 | 111 | @ border-radius: 0.25em; |
| 110 | 112 | @ } |
| 111 | 113 | @ #chat-drop-zone.dragover { |
| @@ -122,14 +124,13 @@ | ||
| 122 | 124 | @ <input type="text" name="msg" id="sbox" \ |
| 123 | 125 | @ placeholder="Type message here."> |
| 124 | 126 | @ <input type="submit" value="Send"> |
| 125 | 127 | @ </div> |
| 126 | 128 | @ <div id='chat-input-file'> |
| 127 | - @ <span>File:</span> | |
| 128 | 129 | @ <input type="file" name="file"> |
| 129 | 130 | @ <div id="chat-drop-zone"> |
| 130 | - @ Or drag/drop a file in this spot, or paste an image from | |
| 131 | + @ Drag/drop a file into this spot, or paste an image from | |
| 131 | 132 | @ the clipboard if supported by your environment. |
| 132 | 133 | @ <div id="chat-drop-details"></div> |
| 133 | 134 | @ </div> |
| 134 | 135 | @ </div> |
| 135 | 136 | @ </div> |
| 136 | 137 |
| --- src/chat.c | |
| +++ src/chat.c | |
| @@ -84,17 +84,19 @@ | |
| 84 | @ #chat-input-file { |
| 85 | @ display: flex; |
| 86 | @ flex-direction: row; |
| 87 | @ align-items: center; |
| 88 | @ } |
| 89 | @ #chat-input-file > span, |
| 90 | @ #chat-input-file > input[type=file] { |
| 91 | @ align-self: flex-start; |
| 92 | @ } |
| 93 | @ #chat-input-file > input { |
| 94 | @ flex: 1 0 auto; |
| 95 | @ } |
| 96 | @ .chat-timestamp { |
| 97 | @ font-family: monospace; |
| 98 | @ font-size: 0.8em; |
| 99 | @ white-space: pre; |
| 100 | @ text-align: left; |
| @@ -101,11 +103,11 @@ | |
| 101 | @ opacity: 0.8; |
| 102 | @ } |
| 103 | @ #chat-drop-zone { |
| 104 | @ box-sizing: content-box; |
| 105 | @ background-color: #e0e0e0; |
| 106 | @ flex: 3 1 auto; |
| 107 | @ padding: 0.5em 1em; |
| 108 | @ border: 1px solid #808080; |
| 109 | @ border-radius: 0.25em; |
| 110 | @ } |
| 111 | @ #chat-drop-zone.dragover { |
| @@ -122,14 +124,13 @@ | |
| 122 | @ <input type="text" name="msg" id="sbox" \ |
| 123 | @ placeholder="Type message here."> |
| 124 | @ <input type="submit" value="Send"> |
| 125 | @ </div> |
| 126 | @ <div id='chat-input-file'> |
| 127 | @ <span>File:</span> |
| 128 | @ <input type="file" name="file"> |
| 129 | @ <div id="chat-drop-zone"> |
| 130 | @ Or drag/drop a file in this spot, or paste an image from |
| 131 | @ the clipboard if supported by your environment. |
| 132 | @ <div id="chat-drop-details"></div> |
| 133 | @ </div> |
| 134 | @ </div> |
| 135 | @ </div> |
| 136 |
| --- src/chat.c | |
| +++ src/chat.c | |
| @@ -84,17 +84,19 @@ | |
| 84 | @ #chat-input-file { |
| 85 | @ display: flex; |
| 86 | @ flex-direction: row; |
| 87 | @ align-items: center; |
| 88 | @ } |
| 89 | @ #chat-input-file > input[type=file] { |
| 90 | @ align-self: flex-start; |
| 91 | @ flex: 1 1 auto; |
| 92 | @ } |
| 93 | @ #chat-input-file > input { |
| 94 | @ flex: 1 0 auto; |
| 95 | @ } |
| 96 | @ #chat-input-file > *:nth-child(1) { margin-right: 0.5em; } |
| 97 | @ #chat-input-file > *:nth-child(2) { margin-left: 0.5em; } |
| 98 | @ .chat-timestamp { |
| 99 | @ font-family: monospace; |
| 100 | @ font-size: 0.8em; |
| 101 | @ white-space: pre; |
| 102 | @ text-align: left; |
| @@ -101,11 +103,11 @@ | |
| 103 | @ opacity: 0.8; |
| 104 | @ } |
| 105 | @ #chat-drop-zone { |
| 106 | @ box-sizing: content-box; |
| 107 | @ background-color: #e0e0e0; |
| 108 | @ flex: 2 1 auto; |
| 109 | @ padding: 0.5em 1em; |
| 110 | @ border: 1px solid #808080; |
| 111 | @ border-radius: 0.25em; |
| 112 | @ } |
| 113 | @ #chat-drop-zone.dragover { |
| @@ -122,14 +124,13 @@ | |
| 124 | @ <input type="text" name="msg" id="sbox" \ |
| 125 | @ placeholder="Type message here."> |
| 126 | @ <input type="submit" value="Send"> |
| 127 | @ </div> |
| 128 | @ <div id='chat-input-file'> |
| 129 | @ <input type="file" name="file"> |
| 130 | @ <div id="chat-drop-zone"> |
| 131 | @ Drag/drop a file into this spot, or paste an image from |
| 132 | @ the clipboard if supported by your environment. |
| 133 | @ <div id="chat-drop-details"></div> |
| 134 | @ </div> |
| 135 | @ </div> |
| 136 | @ </div> |
| 137 |