html, body { margin: 0; padding: 0 } *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } body { color: #505053; font-family: sans-serif; font-size: 14px; } .hidden { display: none; } #templates { display: none; } ul { list-style: none; margin: 0; padding: 0; } .footer { display: none; font-style: italic; color: #9493A2; } .help-command { display: inline-block; width: 7em; } .content-item { white-space: nowrap; overflow-x: hidden; text-overflow: ellipsis; } #main { display: -webkit-box; -webkit-box-orient: horizontal; width: 100%; height: 100%; position: absolute; border-top: 1px solid rgba(0,0,0,0.15); } #main-top-border { position: absolute; top: 0; z-index: 100; width: 100%; height: 1px; background-color: rgba(0,0,0,0.05); pointer-events: none; } #rooms-and-nicks { background-color: #F7F5E4; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-flex: 0; width: 150px; height: inherit; padding: 4px 0px; border-right: 1px solid rgba(0, 0, 0, .15); overflow-y: auto; -webkit-overflow-scrolling: touch; } #rooms-and-nicks h1 { color: #406698; text-transform: uppercase; font-size: 12px; padding: 8px 0px 2px 8px; margin: 0px; } #rooms-and-nicks .nick, #rooms-and-nicks .room { padding: 0 8px; line-height: 26px; } #rooms-and-nicks .room { cursor: pointer; } #rooms-and-nicks .server.footer { display: block; } .dragbar:hover { width: 6px; transition: width .1s; } .dragbar { height: 100%; width: 1px; cursor: col-resize; } #ghostbar{ width:3px; background-color:#000; opacity:0.8; position:absolute; cursor: col-resize; z-index:999 } #rooms-container { -webkit-box-flex: 0; border-bottom: 1px solid #CCC; padding-bottom: 10px; } .no-nicks #rooms-container { border-bottom-style: none; padding-bottom: 0px; } #rooms-and-nicks.hidden { display: none; } #rooms-and-nicks .room.server { background-color: #F2EFD3; position: relative; } #rooms-and-nicks:hover .room.server .content-item { width: 130px; } #rooms-and-nicks .add-channel { position: absolute; right: 2px; top: -1px; cursor: pointer; font-size: 18px; display: none; } #rooms-and-nicks:hover .add-channel { display: block; } #rooms-and-nicks .add-channel:hover { color: #888; } #rooms-and-nicks .room.channel:first-child { padding-top: 3px; } #rooms-and-nicks .room.channel:first-child .content-item { padding-bottom: 3px; line-height: 20px; } #rooms-and-nicks not(.current-server) + .channels .room.channel:nth-last-child(2) { padding-bottom: 3px; } #rooms-and-nicks .room.channel:last-child { padding-bottom: 3px; } #rooms-and-nicks not(.current-server) + .channels .room.channel:nth-last-child(2) .content-item { padding-top: 3px; line-height: 20px; } #rooms-and-nicks .room.channel:last-child .content-item { padding-top: 3px; line-height: 20px; } #rooms-and-nicks not(.current-server) + .channels .room.channel:nth-last-child(2):first-child .content-item { line-height: 14px; } #rooms-and-nicks .room.channel:last-child:first-child .content-item { line-height: 14px; } #rooms-and-nicks .current-server:not(.always-empty) + .channels .footer { display: block; } #rooms-and-nicks .room.channel .content-item { border-left: 1px solid rgba(0, 0, 0, .5); padding-left: 7px; } #rooms-and-nicks .room.activity { font-weight: bold; } #rooms-and-nicks .room.mention { color: darkred; } #rooms-and-nicks .room.disconnected .content-item { color: #9493A2; font-style: italic; } #rooms-and-nicks .room.channel.disconnected .content-item { border-left: 1px solid #9493A2; } #rooms-and-nicks .room.selected { background-color: #F0E798; } #rooms-and-nicks .room { position: relative; } #rooms-and-nicks .room .remove-button { position: absolute; right: 6px; top: -1px; cursor: pointer; font-size: 30px; color: rgba(0, 0, 0, .25); display: none; } #rooms-and-nicks .room .remove-button:hover { color: rgba(0, 0, 0, .5); } #rooms-and-nicks .room.selected:not(.footer):not(.always-empty) .content-item { width: 123px; } #rooms-and-nicks .room:hover:not(.footer):not(.always-empty) .content-item { width: 123px; } #rooms-and-nicks .room.selected:not(.footer):not(.always-empty) .remove-button { display: inline-block; } #rooms-and-nicks .room:hover:not(.footer):not(.always-empty) .remove-button { display: inline-block; } #nicks-container { border-top: 1px solid #FFF; -webkit-box-flex: 1; } .no-nicks #nicks-container { display: none; } .rooms, .nicks { padding-top: 5px; } .nicks li:nth-child(odd) { background-color: #F2EFD3; } #notice { background-color: #406698; box-shadow: 0px 1px 4px #888; color: #FFF; position: absolute; width: 100%; -webkit-transition: 150ms; top: 0; padding: 2px 0; } #notice.hide { top: -38px; } #notice .content { display: inline; padding-left: 14px; text-overflow: ellipsis; white-space: nowrap; overflow-x: hidden; position: absolute; top: 50%; margin-top: -.5em; } #notice button { float: right; height: 22px; font-size: 14px; padding: 0px 4px; margin: 4px; border: none; background-color: #ECECEC; color: #505053; cursor: pointer; outline: none; } #notice button.close { margin-right: 8px; font-size: 12px; border-radius: 42px; width: 21px; height: 21px; } #messages-and-input { -webkit-box-flex: 1; display: -webkit-box; -webkit-box-orient: vertical; box-shadow: 0px 0px 8px #CCC; position: relative; } #messages-container { overflow-y: auto; -webkit-overflow-scrolling: touch; -webkit-box-flex: 1; border-bottom: 1px solid #CCC; } .messages { display: table; } .message { display: table-row; -webkit-user-select: initial; } .message.activity-marker .source-content-container { border-top: 1px solid rgb(224, 179, 179); } .message .timestamp { color: #6060C0; font-style: italic; font-size: smaller; white-space: nowrap; display: table-cell; text-align: right; padding: 0px 10px 0px 10px; border-right: 1px solid rgba(0,0,0,0.15); cursor: text; } .source-content-container { display: table-cell; padding: 1px 10px 1px 15px; width: 100%; } .message .source { font-weight: bold; padding-right: 5px; margin-left: -5px; white-space: nowrap; display: inline; text-align: right; cursor: text; } .message .source.empty { padding-right: 0; } .message .content { display: inline; white-space: pre-wrap; cursor: text; word-break: break-word; } #messages-container .messages .message:first-child .source-content-container { padding-top: 10px; } #messages-container .messages .message:last-child .source-content-container { padding-bottom: 8px; } .message.list { /* empty style for now */ } .longword { word-break: break-all; } #nick-and-input { border-top: 1px solid #F9F9F9; -webkit-box-flex: 0; display: -webkit-box; background-color: #ECECEC; padding: 5px 10px 5px 10px; } #nick { padding-top: 5px; } #nick > span { padding-right: 10px; } #nick > .name:before { font-weight: bold; content: "[ " } #nick > .name:after { font-weight: bold; content: " ]" } #nick .away:before { content: "(" } #nick .away:after { content: ")" } #input-bar { -webkit-box-flex: 1; display: -webkit-box; } #input { background-color: #F9F9F9; display: block; -webkit-box-flex: 1; width: 100%; height: 30px; border: 1px; border-radius: 5px; -webkit-box-shadow: 0px 0px 3px #888; color: #505053; font-size: 14px; padding: 0px 8px; outline: 0; } #input.blink { -webkit-box-shadow: 0px 0px 6px #406698; } ::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment { display: block; height: 0; } ::-webkit-scrollbar-track-piece { background-color: rgba(0,0,0,0.1); } ::-webkit-scrollbar-thumb:vertical { height: 50px; background-color: #999; border-radius: 8px; } ::-webkit-scrollbar-thumb:vertical:hover { background-color: #888; } ::-webkit-scrollbar-thumb:horizontal { width: 50px; background-color: #999; border-radius: 8px; }