body { font-family: sans-serif; margin: 0; overflow: hidden; } textarea { border: none; } input[type=checkbox] { background-color: #fcd363; } button, input[type=button] { border: none; padding: 10px; border-radius: 2px; background-color: #5bb2ec; color: #fff; } pre { margin: 0; } .note { margin-right: 5px; color: #888888; } #message { background-color: #f2f2f2; margin: 0; font-size: 20px; padding: 20px; height: 70vh; width: calc(100vw - 20px); color: #000; font-family: 'Fira Code', Consolas, monospace; overflow-y: scroll; word-wrap: break-word; } #send { background-color: #fff; margin: 0; font-size: 20px; padding: 30px; width: 100vw; height: 30vh; } .send-button { font-size: 20px; } .bottom-box { position: absolute; bottom: 30px; right: 30px; } .top-box { position: absolute; top: 20px; right: 20px; } .msg { margin-top: 15px; } .msg-content { color: #606266; } .msg-private::after { content: " PRIVATE"; color: #F7BA2A; } .msg-from { font-weight: 600; color: #303133; } .msg-time { font-weight: normal; color: #C0C4CC; } .msg-from::before { content: "@ "; } .msg-from-info { color: #5bb2ec; } .msg-from-cb { color: #000000; } #prompt-box { width: 300px; height: 120px; position: absolute; top: calc(50% - 180px); left: calc(45% - 150px); } #prompt-box-title { width: 100%; height: 30px; background-color: #606266; display: block; border-radius: 0px; color: white; font-size: 16px; } #prompt-box-title-text { margin-left: 10px; } #prompt-box-content { height: 90px; display: block; background-color: #C0C4CC; padding-top: 10px; } #prompt-data { width: calc(100% - 20px); margin: 0 auto; border-radius: 2px; border: 1px solid #606266; display: block; font-size: 18px; } #comfirm-prompt { float: right; margin-right: 10px; display: block; margin-top: 25px; padding-top: 5px; padding-bottom: 5px; }