사용자:Hsl0/연구소/숫자야구 live/채팅.css

참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.

파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.

.chat-client {
    height: 70vh;
    display: grid;
    grid-template-areas:
        "log header"
        "footer footer";
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;
}

.chat-header {
    grid-area: header;
    width: 20em;
    border: 1px solid #a2a9b1;
    border-radius: 2px;
    padding: 0.5em;
}

ul.chat-user-options {
    margin-left: 0.25em;
    list-style: none;
    display: inline;
}
.chat-user-options:not(:empty)::before {
    content: "(";
}
.chat-user-options:not(:empty)::after {
    content: ")";
}

.chat-user-option + .chat-user-option::before {
    content: "|";
    margin: 0 0.2em;
}

.chat-log {
    grid-area: log;
}

.chat-message-sender {
    margin-right: 0.25em;
    font-weight: bold;
}
.chat-message-sender::after {
    content: ":";
    font-weight: normal;
}

.chat-message-time {
    color: #808080;
    margin-left: 0.25em;
}
.chat-message-time::before {
    content: "(";
}
.chat-message-time::after {
    content: ")";
}

.chat-field {
    max-width: none;
}

.chat-footer {
    grid-area: footer;
}