diff --git a/css/converse.css b/css/converse.css index 37a958179..c2f0c75bb 100644 --- a/css/converse.css +++ b/css/converse.css @@ -649,32 +649,6 @@ #conversejs a.close-chatbox-button:active { position: relative; top: 1px; } - #conversejs .chatroom-form-container { - height: 100%; - color: #6C4C44; - overflow-y: auto; - border-bottom-right-radius: 4px; - border-bottom-left-radius: 4px; } - #conversejs .chatroom-form { - padding: 1em; } - #conversejs .chatroom-form .instructions { - color: gray; - font-size: 95%; } - #conversejs .chatroom-form input { - width: 100%; - padding: 5px; - text-align: center; } - #conversejs .chatroom-form legend { - font-size: 16px; - font-weight: bold; - margin: 10px 0 15px 0; } - #conversejs .chatroom-form label { - height: 30px; - font-weight: bold; - display: block; - clear: both; } - #conversejs .chatroom-form label label input, #conversejs .chatroom-form label label select { - float: right; } #conversejs .requesting-xmpp-contact .request-actions { margin-left: 0.5em; float: right; } @@ -873,78 +847,6 @@ cursor: pointer; display: block; padding: 4px 7px 0 5px; } - #conversejs .chatroom { - width: 300px; } - @media screen and (max-width: 480px) { - #conversejs .chatroom { - width: 100%; } - #conversejs .chatroom .box-flyout { - min-width: 100%; - width: 100%; } } - #conversejs .chatroom .box-flyout { - min-width: 300px; - width: 300px; } - #conversejs .chatroom .box-flyout .chatroom-body { - height: 289px; - border-bottom-left-radius: 4px; - border-bottom-right-radius: 4px; - height: -webkit-calc(100% - 44px); - height: calc(100% - 44px); - background-color: white; - border-top: 0; - display: table; - table-layout: fixed; - width: 100%; } - #conversejs .chatroom .box-flyout .chatroom-body .chat-area { - word-wrap: break-word; - display: table-cell; - height: 100%; - min-width: 200px; } - #conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content { - padding: 0.5em 0.5em 0 0.5em; } - #conversejs .chatroom .box-flyout .chatroom-body .participants { - display: table-cell; - vertical-align: top; - background-color: white; - overflow-y: auto; - overflow-x: hidden; - border-left: 1px solid #AAA; - border-bottom-right-radius: 4px; - width: 100px; - height: 100%; } - #conversejs .chatroom .box-flyout .chatroom-body .participants.hidden { - display: none; } - #conversejs .chatroom .box-flyout .chatroom-body .participants .participant-list { - list-style: none; } - #conversejs .chatroom .box-flyout .chatroom-body .participants .participant-list li { - cursor: default; - display: block; - font-size: 12px; - font-weight: bold; - overflow: hidden; - padding: 2px 5px; - text-overflow: ellipsis; - white-space: nowrap; - width: 100px; } - #conversejs .chatroom .box-flyout .chatroom-body .participants .participant-list li.moderator { - color: #8f2831; } - #conversejs .chatroom .box-flyout .chatroom-body .participants label { - font-size: 12px; - font-style: italic; - margin: 5px; - display: block; } - #conversejs .chatroom label { - margin-left: 2px; - font-size: 12px; } - #conversejs .chatroom .chat-textarea { - border-bottom-right-radius: 0; } - #conversejs .chatroom .invited-contact { - margin: -1px 0 0 -1px; - width: 100px; - border: 1px solid #999; } - #conversejs .chatroom .invited-contact.tt-input { - background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC) no-repeat right 3px center; } - #conversejs .chatroom-form, #conversejs .controlbox-pane { background-color: white; border-bottom-left-radius: 4px; @@ -1315,4 +1217,115 @@ top: 0; left: 0; } +#conversejs .chatroom { + width: 300px; } + @media screen and (max-width: 480px) { + #conversejs .chatroom { + width: 100%; } + #conversejs .chatroom .box-flyout { + min-width: 100%; + width: 100%; } } + #conversejs .chatroom .box-flyout { + min-width: 300px; + width: 300px; } + #conversejs .chatroom .box-flyout .chatroom-body { + height: 289px; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + height: -webkit-calc(100% - 44px); + height: calc(100% - 44px); + background-color: white; + border-top: 0; + display: table; + table-layout: fixed; + width: 100%; } + #conversejs .chatroom .box-flyout .chatroom-body .chat-area { + word-wrap: break-word; + display: table-cell; + height: 100%; + min-width: 200px; } + #conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content { + padding: 0.5em 0.5em 0 0.5em; } + #conversejs .chatroom .box-flyout .chatroom-body .participants { + display: table-cell; + vertical-align: top; + background-color: white; + overflow-y: auto; + overflow-x: hidden; + border-left: 1px solid #AAA; + border-bottom-right-radius: 4px; + width: 100px; + height: 100%; } + #conversejs .chatroom .box-flyout .chatroom-body .participants.hidden { + display: none; } + #conversejs .chatroom .box-flyout .chatroom-body .participants .participant-list { + list-style: none; } + #conversejs .chatroom .box-flyout .chatroom-body .participants .participant-list li { + cursor: default; + display: block; + font-size: 12px; + font-weight: bold; + overflow: hidden; + padding: 2px 5px; + text-overflow: ellipsis; + white-space: nowrap; + width: 100px; } + #conversejs .chatroom .box-flyout .chatroom-body .participants .participant-list li.moderator { + color: #8f2831; } + #conversejs .chatroom .box-flyout .chatroom-body label { + display: block; + font-size: 12px; + font-style: italic; + margin-left: 2px; + margin: 0.5em; } + #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container { + background-color: white; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; + border: 0; + color: #6C4C44; + font-size: 14px; + height: 289px; + height: -webkit-calc(100% - 44px); + height: calc(100% - 44px); + overflow-y: auto; + position: absolute; + text-align: center; + width: 100%; } + #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form { + padding: 1em; } + #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form .instructions { + color: gray; + font-size: 95%; } + #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input { + width: 100%; + padding: 0.5em; + text-align: left; } + #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=checkbox] { + width: auto; + margin: auto; } + #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=submit], #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=button] { + width: 50%; + margin-top: 1em; + text-align: center; } + #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form legend { + font-size: 16px; + font-weight: bold; + margin: 10px 0 15px 0; } + #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label { + font-weight: bold; + display: block; + clear: both; + margin-top: 1em; } + #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label label input, #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label label select { + float: right; } + #conversejs .chatroom .chat-textarea { + border-bottom-right-radius: 0; } + #conversejs .chatroom .invited-contact { + margin: -1px 0 0 -1px; + width: 100px; + border: 1px solid #999; } + #conversejs .chatroom .invited-contact.tt-input { + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkBCjE0uzKkOgAAAidJREFUKM+N0k+IEnEUB/D3cyscdagkWpHV0WGWREXm0AgOGkSJ07kh2UXYU5cOewm6Bp0KXG/tpSCv6hyEFQIhMEaE3yERYfwTOoqKGLQxDAbqYadLgu7J7/XxeY/3ez8EACDLsgljfMfj8ZxUKhXXYDAAnueBoqgyAMipVOovXAuSZdnUaDQeDofDs16vFyUIAjRNUwmCoG02G1AUdZ5IJN7GYrHfm3AvEAjcnUwmX0ajUdRqtV74fL6sruufKYoa6bp+fzabPUMI7ZfL5eImNHk8npNerxc1m80XHMe98fv9H3K5XDkSibxjWfb1arWaYoyPMMbCFqxUKi6CIODw8LDmdDq7oigaAACiKK5omv7KcdylpmlIkiTHFlRVFTRNUxVFqa/ROqIoGoqi5A3DgFartfU4Jp7ngSAI2uVyPZIk6dZmUZKk2w6H4xghBPF4HK7vWLbZbDCdTp+rqvpUkiS0RvV6/bTf7x8wDHMViURqm/AGAMgURZ232+1X1Wr102KxuEwmk3lZlo/7/f7BcrkkSZKs2e12tHXH/x/gHsY4jTE+0jQNGYYBCCFgGOaKJMkfjUaDZximGQ6HXzSbzZ+ZTMbY6oIxFgqFgqPT6YAgCMBxXM1ut6N0Op0fj8chi8XyjWXZ98Fg8DuCHZLNZh+USqWP8/n8idvt/hUKhV7u7QK9Xu8fmqanAJBQVXUfAGY7TQQAKBaLN8fjsdDtdh/run72Dzhf7XLe2UevAAAAAElFTkSuQmCC) no-repeat right 3px center; } + /*# sourceMappingURL=converse.css.map */ diff --git a/mockup/chatroom2.html b/mockup/chatroom2.html index a574a7e6a..fa0604c64 100644 --- a/mockup/chatroom2.html +++ b/mockup/chatroom2.html @@ -116,7 +116,7 @@
-