/* Chat-related */
body.chat span.at-name { /* for @USERNAME references */
text-decoration: underline;
font-weight: bold;
}
/* A wrapper for a single single chat message (one row of the UI) */
body.chat .message-widget {
margin-bottom: 0.75em;
border: none;
display: flex;
flex-direction: column;
border: none;
align-items: flex-start;
}
body.chat.my-messages-right .message-widget.mine {
/* Right-aligns a user's own chat messages, similar to how
most mobile messaging apps do it. */
align-items: flex-end;
}
body.chat.my-messages-right .message-widget.notification {
/* Center-aligns a system-level notification message. */
align-items: center;
}
/* The content area of a message. */
body.chat .message-widget-content {
display: inline-block;
border-radius: 0.25em;
border: 1px solid rgba(0,0,0,0.2);
box-shadow: 0.2em 0.2em 0.2em rgba(0, 0, 0, 0.29);
padding: 0.25em 0.5em;
margin-top: 0;
min-width: 9em /*avoid unsightly "underlap" with the neighboring
.message-widget-tab element*/;
white-space: normal;
}
body.chat.monospace-messages .message-widget-content,
body.chat.monospace-messages textarea,
body.chat.monospace-messages input[type=text]{
font-family: monospace;
}
body.chat .message-widget-content > * {
margin: 0;
padding: 0;
}
body.chat .message-widget-content > pre {
white-space: pre-wrap;
}
body.chat .message-widget-content > .markdown > *:first-child {
margin-top: 0;
}
body.chat .message-widget-content > .markdown > *:last-child {
margin-bottom: 0;
}
/* User name and timestamp (a LEGEND-like element) */
body.chat .message-widget .message-widget-tab {
border-radius: 0.25em 0.25em 0 0;
margin: 0 0.25em 0em 0.15em;
padding: 0 0.5em 0.15em 0.5em;
cursor: pointer;
white-space: nowrap;
}
body.chat .fossil-tooltip.help-buttonlet-content {
font-size: 80%;
}
body.chat .message-widget .message-widget-tab .xfrom {
/* Element which holds the "this message is from user X" part
of the message banner. */
font-style: italic;
font-weight: bold;
}
/* The popup element for displaying message timestamps
and deletion controls. */
body.chat .chat-message-popup {
font-family: monospace;
font-size: 0.9em;
text-align: left;
display: flex;
flex-direction: column;
align-items: stretch;
padding: 0.25em;
margin-top: 0.25em;
}
/* Full message timestamps. */
body.chat .chat-message-popup > span { white-space: nowrap; }
/* Container for the message deletion buttons. */
body.chat .chat-message-popup > .toolbar {
padding: 0;
margin: 0;
border: 2px inset rgba(0,0,0,0.3);
border-radius: 0.25em;
display: flex;
flex-direction: row;
justify-content: stretch;
flex-wrap: wrap;
align-items: center;
}
body.chat .chat-message-popup > .toolbar > * {
margin: 0.35em;
}
body.chat .chat-message-popup > .toolbar > button {
flex: 1 1 auto;
}
/* The widget for loading more/older chat messages. */
body.chat #load-msg-toolbar {
border-radius: 0.25em;
padding: 0.1em 0.2em;
margin-bottom: 1em;
}
/* .all-done is set when chat has loaded all of the available
historical messages */
body.chat #load-msg-toolbar.all-done {
opacity: 0.5;
}
body.chat #load-msg-toolbar > div {
display: flex;
flex-direction: row;
justify-content: stretch;
flex-wrap: wrap;
}
body.chat #load-msg-toolbar > div > button {
flex: 1 1 auto;
}
/* "Chat-only mode" hides the site header/footer, showing only
the chat app. */
body.chat.chat-only-mode{}
body.chat #chat-settings-button {}
/** Popup widget for the /chat settings. */
body.chat .chat-settings-popup {
font-size: 0.8em;
text-align: left;
display: flex;
flex-direction: column;
align-items: stretch;
padding: 0.25em;
z-index: 200;
}
body.chat .chat-settings-popup > span {
vertical-align: middle;
}
body.chat .chat-settings-popup > span.menu-entry{
white-space: nowrap;
cursor: pointer;
border: 1px solid;
border-radius: 0.25em;
padding: 0.25em 0.5em;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
body.chat .chat-settings-popup > span.menu-entry:hover {
}
body.chat .chat-settings-popup > span.menu-entry > .help-buttonlet {
vertical-align: middle;
}
body.chat .chat-settings-popup > span.menu-entry > span.button {
margin: 0.25em 0.2em;
padding: 0.25em;
flex: 1 1 auto/*eliminates dead no-click zones on the right*/;
}
body.chat .chat-settings-popup > span.menu-entry > input[type=checkbox] {
cursor: inherit;
}
body.chat .chat-settings-popup > select.menu-entry {
flex: 1 1 auto;
padding: 0;
cursor: pointer;
min-height: 2.5em;
border-radius: 0.25em;
}
body.chat .chat-settings-popup > select.menu-entry > option {
/*Recall that many browsers don't allow styling of OPTION
elements, or allow only very limited styling.*/
}
/** Container for the list of /chat messages. */
body.chat #chat-messages-wrapper {
overflow: auto;
flex: 2 1 auto;
padding: 0 0.25em;
}
body.chat #chat-messages-wrapper.loading > * {
/* An attempt at reducing flicker when loading lots of messages. */
visibility: hidden;
}
body.chat div.content {
margin: 0;
padding: 0;
display: flex;
flex-direction: column-reverse;
/* ^^^^ In order to get good automatic scrolling of new messages on
the BOTTOM in bottom-up chat mode, such that they scroll up
instead of down, we have to use column-reverse layout, which
changes #chat-messages-wrapper's "gravity" for purposes of
scrolling! If we instead use flex-direction:column then each new
message pushes #chat-input-area down further off the screen!
*/
align-items: stretch;
}
/* Wrapper for /chat user input controls */
body.chat #chat-input-area {
display: flex;
flex-direction: column;
padding: 0.5em 0 0 0;
border-bottom: none;
border-top: 1px solid black;
margin: 0.5em 0;
position: initial /*sticky currently disabled due to scrolling-related issues*/;
bottom: 0;
}
body.chat:not(.chat-only-mode) #chat-input-area{
/* Safari user reports that 2em is necessary to keep the file selection
widget from overlapping the page footer, whereas a margin of 0 is fine
for FF/Chrome (and 2em is a *huge* waste of space for those). */
margin-bottom: 0;
}
/* Widget holding the chat message input field, send button, and
settings button. */
body.chat #chat-input-line {
display: flex;
flex-direction: row;
align-items: stretch;
}
body.chat #chat-input-line.single-line {
flex-wrap: wrap;
}
body.chat #chat-edit-buttons {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: space-between;
}
body.chat #chat-input-line.single-line #chat-edit-buttons {
flex-direction: row;
}
body.chat #chat-edit-buttons > * {
flex: 1 1 auto;
}
body.chat #chat-input-line:not(.single-line) #chat-edit-buttons > * {
max-width: 4em;
margin: 0.25em;
}
body.chat #chat-input-line.single-line #chat-edit-buttons > * {
margin: 0 0.25em;
}
body.chat #chat-input-line > button {
max-width: 4em;
}
body.chat #chat-input-line > #chat-settings-button{
margin: 0 0 0 0.25em;
max-width: 2em;
}
body.chat #chat-input-line > input[type=text],
body.chat #chat-input-line > textarea {
flex: 20 1 auto;
max-width: revert;
min-width: 20em;
}
body.chat #chat-input-line.single-line > input[type=text] {
margin: 0 0 0.25em 0/* gap for if/when buttons wrap*/;
}
/* Widget holding the file selection control and preview */
body.chat #chat-input-file-area {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
margin-bottom: 0.25em 0 0 0 /* avoid nudging input area */;
}
body.chat #chat-input-file-area > .file-selection-wrapper {
align-self: flex-start;
margin-right: 0.5em;
flex: 0 1 auto;
padding: 0.25em 0.25em 0.25em 0;
white-space: nowrap;
}
body.chat #chat-input-file-area .file-selection-wrapper > * {
vertical-align: middle;
margin: 0;
}
body.chat #chat-input-file {
border:1px solid rgba(0,0,0,0);/*avoid UI shift during drop-targeting*/
border-radius: 0.25em;
padding: 0.25em;
}
body.chat #chat-input-file > input {
flex: 1 0 auto;
}
/* Indicator when a drag/drop is in progress */
body.chat #chat-input-file.dragover {
border: 1px dashed green;
}
/* Widget holding the details of a selected/dropped file/image. */
body.chat #chat-drop-details {
flex: 0 1 auto;
padding: 0.5em 1em;
margin-left: 0.5em;
white-space: pre;
font-family: monospace;
}
body.chat #chat-drop-details img {
max-width: 45%;
max-height: 45%;
}
body.chat #chat-config,
body.chat #chat-preview {
/* /chat configuration widget */
display: flex;
flex-direction: column;
overflow: auto;
flex: 2 1 auto;
padding: 0;
margin: 0;
align-items: stretch;
min-height: 6em;
}
body.chat #chat-config #chat-config-options {
/* /chat config options go here */
flex: 1 1 auto;
display: flex;
flex-direction: column-reverse;
overflow: auto;
}
body.chat #chat-config #chat-config-options .menu-entry {
display: flex;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
padding: 1em;
}
body.chat #chat-config #chat-config-options .menu-entry > *:first-child {
margin-right: 1em;
}
body.chat #chat-preview #chat-preview-content {
overflow: auto;
flex: 1 1 auto;
padding: 0.5em;
border: 1px dotted;
}
body.chat #chat-preview #chat-preview-content > * {
margin: 0;
padding: 0;
}
body.chat #chat-preview #chat-preview-buttons {
flex: 0 1 auto;
display: flex;
flex-direction: column;
}
body.chat #chat-config > button,
body.chat #chat-preview #chat-preview-buttons > button {
padding: 0.5em;
flex: 0 1 auto;
margin: 0.25em 0;
}