123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142 |
- #chat-host ul {
- margin: 0;
- padding: 0;
- }
- #chat-host ul li {
- list-style-type: none;
- }
- #chat-host input, #chat-host textarea, #chat-host button {
- font-family: inherit;
- font-size: inherit;
- border: none;
- }
- #chat-host input, #chat-host textarea {
- background-color: #ffffff;
- }
- #chat-host button {
- cursor: pointer;
- }
- #chat-host {
- position: fixed;
- left: 0;
- right: 0;
- top: 0;
- bottom: 0;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: stretch;
- padding: 1em;
- }
- #chat-host .login {
- align-self: center;
- display: flex;
- flex-direction: column;
- }
- #chat-host .login .loginError {
- margin-bottom: 2em;
- font-weight: bold;
- color: #ad2424;
- }
- #chat-host .login #chat-login-form {
- display: flex;
- flex-direction: column;
- }
- #chat-host .login #chat-login-form .inputWrapper {
- display: flex;
- margin: 0.5em;
- }
- #chat-host .login #chat-login-form .inputWrapper label {
- width: 10em;
- margin-right: 1em;
- }
- #chat-host .login #chat-login-form .inputWrapper input {
- flex-grow: 1;
- }
- #chat-host .login #chat-login-form button {
- margin-top: 2em;
- }
- #chat-host .main {
- flex-grow: 1;
- display: flex;
- overflow: hidden;
- }
- #chat-host .messages, #chat-host .userlistWrapper {
- padding: 0.3em;
- flex-grow: 1;
- }
- #chat-host .messages {
- flex-basis: 80%;
- overflow: auto;
- }
- #chat-host .messages .systemMsg {
- color: #666666;
- font-size: 85%;
- font-style: italic;
- }
- #chat-host .messages .userMsg {
- display: flex;
- align-items: baseline;
- }
- #chat-host .messages .userMsg .user {
- margin-right: 0.3em;
- font-weight: bold;
- }
- #chat-host .messages .userMsg .time {
- margin-right: 0.3em;
- font-size: 85%;
- font-style: italic;
- }
- #chat-host .messages .userMsg .message {
- white-space: pre-wrap;
- }
- #chat-host .userlistWrapper {
- text-align: right;
- flex-basis: 20%;
- min-width: 8em;
- }
- #chat-host .userlistWrapper button {
- width: 2em;
- height: 2em;
- padding: 0.3em;
- margin-left: 0.5em;
- border-radius: 50%;
- }
- #chat-host .messageForm {
- display: flex;
- margin-top: 1em;
- }
- #chat-host .messageForm textarea {
- flex-grow: 1;
- margin-right: 1em;
- resize: none;
- }
|