html, body { margin: 0; padding: 0; height: 100%; width: 100%; } body { font-family: sans-serif; background-color: #eee; color: #222; line-height: 1.5; display: flex; } a button { color: #222; } * { box-sizing: border-box; } input, button, textarea { font: inherit; color: inherit; vertical-align: middle; margin: 0; } button, input[type=submit], input[type=button] { padding: 0 0.5em; cursor: pointer; font-size: 90%; font-variant: all-small-caps; background-color: #fff; border: 1px solid #aaa; } h1 { text-align: center; line-height: 1.2; margin: 0; } h1 img { width: 1em; height: 1em; vertical-align: middle; } .sidebar, .main-area { height: 100%; overflow-y: hidden; display: grid; } .sidebar { width: 300px; overflow: hidden; grid-template-rows: auto 1fr; border-right: 1px solid #aaa; } .main-area { flex-grow: 1; grid-template-rows: auto 1fr auto; position: relative; } .sidebar-head { background-color: #e5e5e5; padding: 0.5em; border-bottom: 1px solid #aaa; } #channel_list { padding: 0; height: 100%; overflow-x: hidden; overflow-y: scroll; } #channel_list a { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 300px; display: block; padding: 2px 10px; color: #333; text-decoration: none; } #channel_list a:hover { background-color: #e5e5e5; } #channel_list .active a { background-color: #ddd; } #channel_list :first-child a { padding-top: 5px; } #channel_list :last-child a { padding-bottom: 5px; } #channel_list .team-name { color: #888; } #channel_list .separator { color: #888; margin: 0 1px; } ul#channel_list, ul#server_selection_list { list-style: none; margin: 0; } ul#server_selection_list { padding-left: 0; font-size: 90%; } .centered { width: 100%; max-width: 700px; margin: 0 auto; position: relative; } #channel_header { box-sizing: content-box; min-height: 1em; padding: 10px; border-bottom: 1px solid #aaa; background-color: #e5e5e5; } #channel_header .team-name { color: #888; } #channel_header .separator { color: #888; margin: 0 3px; } #channel_contents_wrapper { overflow-x: hidden; overflow-y: scroll; padding-left: 12px; height: 100%; transition-property: background-position, border; transition-duration: 0.1s; background-position-y: calc(100% + 50px); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08)); background-size: 1px 50px; background-repeat: repeat-x; border-bottom: 1px solid rgba(170, 170, 170, 0); } #channel_contents_wrapper.new-messages { background-image: linear-gradient(to bottom, rgba(0, 0, 255, 0), rgba(0, 0, 255, 0.1)); } #channel_contents_wrapper.not-at-bottom { transition-duration: 1s; background-position-y: 100%; border-bottom-color: rgba(170, 170, 170, 0.5); } #channel_contents { text-rendering: optimizeLegibility; width: 100%; height: 100%; padding: 0 10px; } .compose-wrapper { padding: 5px 8px; } #compose { width: 100%; resize: none; overflow: hidden; padding: 0.2em 0.3em; } #login { display: none; text-align: center; } #login h2 { margin-bottom: 0.3em; } #login:target { display: block; } #login input[type=text], #login input[type=password] { width: 100%; } #login_server { margin-bottom: 1em; } .login-form { margin-bottom: 0.5em; } .post { margin: 1em 0; display: grid; grid-template-rows: auto auto; grid-template-columns: auto auto; } .post:first-child { margin-top: 8px; } .post:last-child { margin-bottom: 8px; } .post .author { grid-row: 1; grid-column: 1; color: #888; } .post .create_at { text-align: right; grid-row: 1; grid-column: 2; color: #888; } .post .message { grid-row: 2; grid-column-start: 1; grid-column-end: 3; }