From e4d6f8f9abdbb5dd0651cc8d881d1884b3210d76 Mon Sep 17 00:00:00 2001 From: Mattias Erming Date: Fri, 15 Aug 2014 06:52:14 -0700 Subject: [PATCH] Fix responsive interface --- client/css/style.css | 1412 +++++++++++++++++++++--------------------- client/index.html | 17 +- client/js/chat.js | 7 +- 3 files changed, 703 insertions(+), 733 deletions(-) diff --git a/client/css/style.css b/client/css/style.css index e3a750f7..9406598b 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -1,719 +1,693 @@ -@import url( - http://fonts.googleapis.com/css?family=Lato:400,700 -); -@font-face { - font-family: "Octicons"; - src: url("fonts/octicons.svg") format("svg"), url("fonts/octicons.woff") format("woff"); -} -html, -body { - height: 100%; -} -body { - background: #505d70; - color: #222; - font: 16px Lato, sans-serif; - margin: 0; - min-width: 780px; -} -a { - transition: opacity .2s; -} -a:hover { - text-decoration: none; - opacity: .8; -} -h1, -h2 { - font: inherit; - line-height: inherit; - margin: 0; -} -input { - outline: 0; -} -button { - border: none; - background: none; - margin: 0; - outline: none; - padding: 0; -} -.tooltip-inner { - background: #fff; - border-radius: 2px; - color: #262c36; -} -.tooltip.top .tooltip-arrow { - border-top-color: #fff; -} -.btn { - border: 2px solid #84d1ff; - border: 2px solid #84ce88; - border-radius: 3px; - color: #84d1ff; - color: #84ce88; - display: inline-block; - font: bold 12px Lato, sans-serif; - letter-spacing: 1px; - margin-bottom: 10px; - padding: 9px 17px; - text-transform: uppercase; - transition: background .2s, border-color .2s, color .2s; - word-spacing: 3px; -} -.btn:disabled, -.btn:hover { - background: #84d1ff; - background: #84ce88; - color: #fff; -} -.btn:active { - box-shadow: none; - opacity: .8; -} -.btn:disabled { - opacity: .6; -} -.container { - margin: 10% auto; - max-width: 420px; - overflow: hidden; - overflow-y: auto; - -webkit-overflow-scrolling: touch; - padding: 0 30px; -} -::-moz-placeholder { - color: rgba(0, 0, 0, .25); - opacity: 1; -} -::-webkit-input-placeholder { - color: rgba(0, 0, 0, .25); -} -:-ms-input-placeholder { - color: rgba(0, 0, 0, .25) !important; -} -#wrap { - height: 100%; - overflow: hidden; -} -#viewport { - height: 100%; - transition: all .4s; - -webkit-transform: translateZ(0); - transform: translateZ(0); - -webkit-perspective: 1000; - perspective: 1000; -} -#sidebar { - bottom: 0; - left: 0; - overflow: hidden; - overflow-y: auto; - -webkit-overflow-scrolling: touch; - position: absolute; - top: 0; - width: 220px; - z-index: 2; -} -#sidebar button, -#sidebar .sign-out { - border: 1px solid transparent; - border-radius: 2px; - color: #bcc4d3; - font-size: 14px; -} -#sidebar button:hover, -#sidebar .active { - color: #fff; -} -#sidebar button.active { - color: #fff; -} -#sidebar .networks { - min-height: 100%; - padding: 25px 40px 80px; -} -#sidebar .network + .network { - margin-top: 30px; -} -#sidebar .empty { - color: #818b9e; - line-height: 1.6; - font-size: 12px; - margin-top: 20px; - padding: 20px 40px; - text-align: center; - position: absolute; - top: 0; -} -#sidebar .chan { - display: block; - margin: 1px -10px; - padding: 6px 10px 8px; - position: relative; - text-align: left; - transition: all .2s; - width: 160px; -} -#sidebar .chan:first-child { - color: #84ce88; - font-size: 15px; - font-weight: bold; -} -#sidebar .chan:first-child:hover, -#sidebar .chan:first-child.active { - color: #c0f8c3; -} -#sidebar .chan:hover .badge { - opacity: 0; -} -#sidebar .chan:hover .close { - opacity: .2; -} -#sidebar .badge { - background: rgba(255, 255, 255, .06); - border-radius: 3px; - color: #afb6c0; - font-size: 10px; - margin-top: 1px; - padding: 3px 6px; - position: absolute; - right: 10px; - transition: all .2s; -} -#sidebar .badge.highlight { - background: #fff; - color: #49505a; -} -#sidebar .badge:empty { - display: none; -} -#sidebar .close { - background: no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogPGc+DQogIDx0aXRsZT5MYXllciAxPC90aXRsZT4NCiAgPHBhdGggZmlsbD0iI2ZmZmZmZiIgaWQ9InN2Z18xIiBkPSJtMTIuODcyLDEuNTYyYzAuMTk1MDAxLDAuMTk0IDAuMTk1MDAxLDAuNTEzIDAsMC43MDdsLTMuODg5LDMuODkxYy0wLjE5MywwLjE5NCAtMC4xOTMsMC41MTMgMCwwLjcwOGwzLjg4NywzLjg5MmMwLjE5NSwwLjE5NCAwLjE5NSwwLjUxMyAwLDAuNzA3bC0xLjQxNTk5OSwxLjQxM2MtMC4xOTMwMDEsMC4xOTQgLTAuNTEyLDAuMTk0IC0wLjcwNzAwMSwwbC0zLjg4NSwtMy44OTJjLTAuMTk0LC0wLjE5NCAtMC41MTMsLTAuMTk0IC0wLjcwNywwbC0zLjg4OSwzLjg4OWMtMC4xOTQsMC4xOTUgLTAuNTEzLDAuMTk1IC0wLjcwNywwbC0xLjQxNCwtMS40MTU5OTljLTAuMTk0LC0wLjE5MzAwMSAtMC4xOTQsLTAuNTEyIDAsLTAuNzA3MDAxbDMuODksLTMuODg5YzAuMTk0LC0wLjE5NCAwLjE5NCwtMC41MTMgMCwtMC43MDhsLTMuODg3LC0zLjg5MWMtMC4xOTQsLTAuMTk1IC0wLjE5NCwtMC41MTMgMCwtMC43MDdsMS40MTUsLTEuNDE0YzAuMTk0LC0wLjE5NCAwLjUxMywtMC4xOTQgMC43MDcsMGwzLjg4NSwzLjg5MWMwLjE5NCwwLjE5NSAwLjUxMywwLjE5NSAwLjcwNywwLjAwMWwzLjg4OCwtMy44OWMwLjE5NSwtMC4xOTMgMC41MTQsLTAuMTkzIDAuNzA3LDBsMS40MTUsMS40MTV6Ii8+DQogPC9nPg0KPC9zdmc+); - background-size: 50%; - background-position: 5px 6px; - border-radius: 3px; - height: 18px; - margin-top: 1px; - margin-right: 10px; - opacity: 0; - position: absolute; - right: 0; - transition: all .2s; - width: 18px; -} -#sidebar .close:hover { - background-color: rgba(0, 0, 0, .1); - opacity: .7 !important; -} -#footer { - height: 70px; - line-height: 70px; - margin-top: -70px; - padding: 0 8px; - text-align: center; - width: 220px; -} -#footer button { - border: 0; -} -#footer button.active { - background: none; -} -#footer .icon { - color: #818b9e; - display: inline-block; - font: 16px Octicons; - line-height: 34px; - padding: 0px 12px; -} -.signed-out #footer .sign-in { - display: inline-block; -} -.signed-out #footer .connect, -.signed-out #footer .sign-out { - display: none; -} -.public #footer .sign-in, -.public #footer .sign-out { - display: none; -} -#footer .sign-in { - display: none; -} -#footer .sign-in:before { - content: "\f036"; -} -#footer .connect:before { - content: "\f085"; -} -#footer .settings:before { - content: "\f02f"; -} -#footer .sign-out:before { - content: "\f032"; -} -#main { - border-radius: 2px; - bottom: 4px; - left: 220px; - overflow: hidden; - position: absolute; - right: 5px; - top: 4px; -} -#header { - border-bottom: 1px solid #e9ecef; - display: none; - height: 40px; - position: absolute; - top: 0; - width: 100%; -} -#header h1 { - color: #222; - font-size: 15px; - line-height: 40px; - text-align: center; -} -#header button { - color: #666; - font: 16px Octicons; - height: 32px; - opacity: .5; - position: absolute; - top: 4px; - transition: opacity .2s; - padding: 0 10px; - width: 64px; -} -#header button:hover { - opacity: 1; -} -#header #lt { - left: 4px; - text-align: left; -} -#header #rt { - display: none; - right: 4px; - text-align: right; -} -#header #lt:before { - content: "\f05e"; -} -#header #rt:before { - content: "\f037"; -} -#windows { - bottom: 48px; - position: absolute; - top: 0px; - width: 100%; -} -#windows .input { - border: 1px solid #cdd3da; - border-radius: 3px; - color: #222; - font-size: 14px; - margin: 2px 0; - outline: 0; - padding: 8px 10px; - transition: border-color .2s; - -webkit-appearance: none; - width: 100%; -} -#windows .input:hover, -#windows .input:focus { - border-color: #79838c; -} -#windows .window:before, -#windows .chan:before { - background: #f4f4f4; - background-image: linear-gradient(#f4f4f4, #ececec); - border-bottom: 1px solid #ddd; - content: " "; - display: block; - height: 10px; - position: relative; - z-index: 10; -} -#windows .chan, -#windows .window { - background: #fff; - bottom: 0; - display: none; - left: 0; - position: absolute; - right: 0; - top: 0; -} -#windows .window { - overflow-y: auto; - -webkit-overflow-scrolling: touch; -} -#windows .window h1 { - font: 36px Lato; -} -#windows .active { - display: block; -} -#chat { - bottom: 0; - font: 12px Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Courier New, monospace; - left: 0; - position: absolute; - right: 0; - top: 0; -} -#chat button:hover { - opacity: .6; -} -#chat .chat { - bottom: 0; - left: 0; - overflow: auto; - -webkit-overflow-scrolling: touch; - position: absolute; - right: 180px; - top: 10px; -} -#chat .sidebar { - background: #fff; - border-left: 1px solid #e9ecef; - border-left: 1px solid #e4eaee; - bottom: 0; - position: absolute; - right: 0; - top: 10px; - width: 180px; -} -#chat .show-more { - color: #b1c3ce; - position: absolute; - width: 100%; - border-bottom: 1px solid #ddd; - height: 41px; - background: #fff; -} -#chat .show-more + .messages .msg:first-child span { - padding-top: 46px; -} -#chat .messages { - display: table; - height: 100%; - width: 100%; -} -#chat .msg { - display: table-row; - word-wrap: break-word; -} -#chat .msg:first-child > span { - padding-top: 10px; -} -#chat .msg:last-child { - height: 100%; -} -#chat .msg:last-child .text { - padding-bottom: 10px; -} -#chat .msg .type { - color: #ccc; - color: #d0dbe2; - display: none; -} -#chat .time, -#chat .from, -#chat .text { - display: table-cell; - padding: 4px 0; -} -#chat .time { - background: #fcfdfd; - color: #e4eaee; - text-align: right; - width: 46px; - min-width: 46px; -} -#chat .from { - background: #fcfdfd; - border-right: 1px solid #f6f8f9; - color: #b1c3ce; - padding-right: 10px; - text-align: right; - width: 134px; - min-width: 134px; -} -#chat a, -#chat .message .from button, -#chat .sidebar button { - color: #84ce88; -} -#chat .text { - padding-left: 10px; - padding-right: 6px; -} -#chat .text a { - word-break: break-all; -} -#chat .join .type, -#chat .part .type, -#chat .mode .type, -#chat .nick .type, -#chat .kick .type, -#chat .quit .type, -#chat .quit .type, -#chat .topic .type { - display: inline; -} -#chat .error, -#chat .error .from, -#chat .highlight, -#chat .highlight .from { - color: #f00; -} -#chat.hide-join .join, -#chat.hide-nick .nick, -#chat.hide-part .nick, -#chat.hide-mode .mode, -#chat.hide-quit .quit { - display: none !important; -} -#chat .notice .type { - display: none; -} -#chat .action, -#chat .action .user { - color: #f39c12; -} -#chat .action .user:before { - content: '* '; -} -#chat .meta { - font-family: "Lato"; - height: 80px; - padding: 25px 0 0 20px; -} -#chat .meta h1 { - color: #222; - font-size: 15px; -} -#chat .meta .type { - color: #ccc; - color: #b1c3ce; - font-size: 12px; - text-transform: capitalize; -} -#chat .count { - border-top: 1px dashed #e4eaee; - border-bottom: 1px solid #e4eaee; - height: 40px; - left: 0; - position: absolute; - right: 0; - top: 80px; -} -#chat .count:before { - color: #eee; - font: 16px Octicons; - content: "\f02e"; - position: absolute; - right: 18px; - line-height: 40px; - transition: color .2s; - z-index: 0; -} -#chat .search { - color: #222; - border: 0; - background: none; - font: inherit; - outline: 0; - padding: 12px 20px; - position: relative; - width: 100%; -} -#chat .names { - bottom: 0; - overflow: auto; - overflow-x: hidden; - -webkit-overflow-scrolling: touch; - padding: 15px 20px; - position: absolute; - top: 120px; - width: 100%; -} -#chat .names button { - display: block; - line-height: 1.8em; -} -#sign-in label { - display: block; - margin-top: 10px; -} -#sign-in .title { - margin-bottom: 10px; -} -#sign-in .btn { - margin-top: 25px; -} -#sign-in .error { - color: #e74c3c; - margin-top: 1em; -} -#connect label { - display: block; - margin-top: 10px; -} -#connect .title { - margin-bottom: 10px; -} -#connect .port:before { - content: ":"; - margin: 28px 0 0 -17px; - position: absolute; -} -#connect .btn { - margin-top: 25px; -} -#settings h2 { - border-bottom: 1px solid #eee; - color: #7f8c8d; - font-size: 22px; - margin: 30px 0 10px; - padding-bottom: 7px; -} -#settings .title { - margin-bottom: -10px; -} -#settings .opt { - display: block; - padding: 10px 0 10px 1px; -} -#settings .opt input { - float: left; - margin: 4px 10px 0 0; -} -#settings .about, -#settings #play { - color: #7f8c8d; -} -#settings #play:hover { - opacity: .8; -} -#settings #play:before { - content: "\f0ba"; - font: 16px Octicons; - margin-right: 9px; -} -#settings .about { - font-size: 14px; - padding-top: 2px; - line-height: 1.8; -} -#form { - background: #e4eaee; - border-top: 1px solid #cfdae1; - bottom: 0; - height: 48px; - left: 0; - position: absolute; - right: 0px; - z-index: 1; -} -#form input { - border: 1px solid #cfdae1; - font: 13px Consolas, monospace; - border-radius: 2px; - height: 100%; - outline: none; - padding: 0 12px; - -webkit-appearance: none; - width: 100%; -} -#form .inner { - bottom: 7px; - left: 7px; - position: absolute; - right: 7px; - top: 6px; -} -#form #submit { - height: 0; - margin-left: -9999px; - position: absolute; - width: 0; -} - -/* -@media (max-width: 768px) { - #viewport.rt { - -webkit-transform: translate3d(-180px, 0, 0); - transform: translate3d(-180px, 0, 0); - } - #header { - display: block; - } - #header #lt { - display: none; - } - #windows { - top: 40px; - } - #chat .chat { - right: 0; - } - #chat .sidebar { - bottom: -40px; - right: -180px; - top: -40px; - } -} - -@media (max-width: 480px) { - .title { - display: none; - } - .container { - margin-bottom: 5%; - } - #viewport.lt { - -webkit-transform: translate3d(220px, 0, 0); - transform: translate3d(220px, 0, 0); - } - #header #lt { - display: inherit; - } - #sidebar { - left: -220px; - } - #sidebar .empty:before { - margin-top: 0; - } - #main { - left: 0; - } - #chat .messages { - display: block; - padding: 5px 10px; - } - #chat .msg { - display: block; - padding: 2px 0; - } - #chat .msg:last-child { - height: auto; - } - #chat .from, - #chat .text { - background: none; - border: 0; - display: inline; - padding: 0; - } - #chat .time { - display: none; - } -} -*/ +@import url( + http://fonts.googleapis.com/css?family=Lato:400,700 +); +@font-face { + font-family: "Octicons"; + src: url("fonts/octicons.svg") format("svg"), url("fonts/octicons.woff") format("woff"); +} +html, +body { + height: 100%; +} +body { + background: #505d70; + color: #222; + font: 16px Lato, sans-serif; + margin: 0; +} +a { + /*transition: opacity .2s;*/ +} +a:hover { + text-decoration: none; + opacity: .8; +} +h1, +h2 { + font: inherit; + line-height: inherit; + margin: 0; +} +input { + outline: 0; +} +button { + border: none; + background: none; + margin: 0; + outline: none; + padding: 0; +} +.tooltip-inner { + background: #fff; + border-radius: 2px; + color: #262c36; +} +.tooltip.top .tooltip-arrow { + border-top-color: #fff; +} +.btn { + border: 2px solid #84d1ff; + border: 2px solid #84ce88; + border-radius: 3px; + color: #84d1ff; + color: #84ce88; + display: inline-block; + font: bold 12px Lato, sans-serif; + letter-spacing: 1px; + margin-bottom: 10px; + padding: 9px 17px; + text-transform: uppercase; + transition: background .2s, border-color .2s, color .2s; + word-spacing: 3px; +} +.btn:disabled, +.btn:hover { + background: #84d1ff; + background: #84ce88; + color: #fff; +} +.btn:active { + box-shadow: none; + opacity: .8; +} +.btn:disabled { + opacity: .6; +} +.container { + margin: 80px auto; + max-width: 420px; + overflow: hidden; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + padding: 0 30px; +} +::-moz-placeholder { + color: rgba(0, 0, 0, .25); + opacity: 1; +} +::-webkit-input-placeholder { + color: rgba(0, 0, 0, .25); +} +:-ms-input-placeholder { + color: rgba(0, 0, 0, .25) !important; +} +#wrap { + height: 100%; + overflow: hidden; +} +#viewport { + height: 100%; + transition: all .4s; + -webkit-transform: translateZ(0); + transform: translateZ(0); + -webkit-perspective: 1000; + perspective: 1000; +} +#sidebar { + bottom: 0; + left: 0; + overflow: hidden; + overflow-y: auto; + -webkit-overflow-scrolling: touch; + position: absolute; + top: 0; + width: 220px; +} +#sidebar button, +#sidebar .sign-out { + border: 1px solid transparent; + border-radius: 2px; + color: #bcc4d3; + font-size: 14px; +} +#sidebar button:hover, +#sidebar .active { + color: #fff; +} +#sidebar button.active { + color: #fff; +} +#sidebar .networks { + min-height: 100%; + padding: 25px 40px 80px; +} +#sidebar .network + .network { + margin-top: 30px; +} +#sidebar .empty { + color: #818b9e; + line-height: 1.6; + font-size: 12px; + margin-top: 20px; + padding: 20px 40px; + text-align: center; + position: absolute; + top: 0; +} +#sidebar .chan { + display: block; + margin: 1px -10px; + padding: 6px 10px 8px; + position: relative; + text-align: left; + transition: all .2s; + width: 160px; +} +#sidebar .chan:first-child { + color: #84ce88; + font-size: 15px; + font-weight: bold; +} +#sidebar .chan:first-child:hover, +#sidebar .chan:first-child.active { + color: #c0f8c3; +} +#sidebar .chan:hover .badge { + opacity: 0; +} +#sidebar .chan:hover .close { + opacity: .2; +} +#sidebar .badge { + background: rgba(255, 255, 255, .06); + border-radius: 3px; + color: #afb6c0; + font-size: 10px; + margin-top: 1px; + padding: 3px 6px; + position: absolute; + right: 10px; + transition: all .2s; +} +#sidebar .badge.highlight { + background: #fff; + color: #49505a; +} +#sidebar .badge:empty { + display: none; +} +#sidebar .close { + background: no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+DQogPGc+DQogIDx0aXRsZT5MYXllciAxPC90aXRsZT4NCiAgPHBhdGggZmlsbD0iI2ZmZmZmZiIgaWQ9InN2Z18xIiBkPSJtMTIuODcyLDEuNTYyYzAuMTk1MDAxLDAuMTk0IDAuMTk1MDAxLDAuNTEzIDAsMC43MDdsLTMuODg5LDMuODkxYy0wLjE5MywwLjE5NCAtMC4xOTMsMC41MTMgMCwwLjcwOGwzLjg4NywzLjg5MmMwLjE5NSwwLjE5NCAwLjE5NSwwLjUxMyAwLDAuNzA3bC0xLjQxNTk5OSwxLjQxM2MtMC4xOTMwMDEsMC4xOTQgLTAuNTEyLDAuMTk0IC0wLjcwNzAwMSwwbC0zLjg4NSwtMy44OTJjLTAuMTk0LC0wLjE5NCAtMC41MTMsLTAuMTk0IC0wLjcwNywwbC0zLjg4OSwzLjg4OWMtMC4xOTQsMC4xOTUgLTAuNTEzLDAuMTk1IC0wLjcwNywwbC0xLjQxNCwtMS40MTU5OTljLTAuMTk0LC0wLjE5MzAwMSAtMC4xOTQsLTAuNTEyIDAsLTAuNzA3MDAxbDMuODksLTMuODg5YzAuMTk0LC0wLjE5NCAwLjE5NCwtMC41MTMgMCwtMC43MDhsLTMuODg3LC0zLjg5MWMtMC4xOTQsLTAuMTk1IC0wLjE5NCwtMC41MTMgMCwtMC43MDdsMS40MTUsLTEuNDE0YzAuMTk0LC0wLjE5NCAwLjUxMywtMC4xOTQgMC43MDcsMGwzLjg4NSwzLjg5MWMwLjE5NCwwLjE5NSAwLjUxMywwLjE5NSAwLjcwNywwLjAwMWwzLjg4OCwtMy44OWMwLjE5NSwtMC4xOTMgMC41MTQsLTAuMTkzIDAuNzA3LDBsMS40MTUsMS40MTV6Ii8+DQogPC9nPg0KPC9zdmc+); + background-size: 50%; + background-position: 5px 6px; + border-radius: 3px; + height: 18px; + margin-top: 1px; + margin-right: 10px; + opacity: 0; + position: absolute; + right: 0; + transition: all .2s; + width: 18px; +} +#sidebar .close:hover { + background-color: rgba(0, 0, 0, .1); + opacity: .7 !important; +} +#footer { + height: 70px; + line-height: 70px; + margin-top: -70px; + padding: 0 8px; + text-align: center; + width: 220px; +} +#footer button { + border: 0; +} +#footer button.active { + background: none; +} +#footer .icon { + color: #818b9e; + display: inline-block; + font: 16px Octicons; + line-height: 34px; + padding: 0px 12px; +} +.signed-out #footer .sign-in { + display: inline-block; +} +.signed-out #footer .connect, +.signed-out #footer .sign-out { + display: none; +} +.public #footer .sign-in, +.public #footer .sign-out { + display: none; +} +#footer .sign-in { + display: none; +} +#footer .sign-in:before { + content: "\f036"; +} +#footer .connect:before { + content: "\f085"; +} +#footer .settings:before { + content: "\f02f"; +} +#footer .sign-out:before { + content: "\f032"; +} +#main { + background: #fff; + border-radius: 2px; + bottom: 4px; + left: 220px; + overflow: hidden; + position: absolute; + right: 5px; + top: 4px; +} +#header { + display: none; + height: 40px; + position: absolute; + top: 0; + width: 100%; +} +#windows { + bottom: 48px; + position: absolute; + top: 0px; + width: 100%; +} +#windows .input { + border: 1px solid #cdd3da; + border-radius: 3px; + color: #222; + font-size: 14px; + margin: 2px 0; + outline: 0; + padding: 8px 10px; + transition: border-color .2s; + -webkit-appearance: none; + width: 100%; +} +#windows .input:hover, +#windows .input:focus { + border-color: #79838c; +} +#windows .window:before, +#windows .chan:before { + background: #f4f4f4; + background-image: linear-gradient(#f4f4f4, #ececec); + border-bottom: 1px solid #d7d7d7; + content: " "; + display: block; + height: 10px; + position: relative; + z-index: 10; +} +#windows .chan, +#windows .window { + background: #fff; + bottom: 0; + display: none; + left: 0; + position: absolute; + right: 0; + top: 0; +} +#windows .window { + overflow-y: auto; + -webkit-overflow-scrolling: touch; +} +#windows .window h1 { + font: 36px Lato; +} +#windows .active { + display: block; +} +#chat { + bottom: 0; + font: 12px Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Courier New, monospace; + left: 0; + position: absolute; + right: 0; + top: 0; +} +#chat button:hover { + opacity: .6; +} +#chat .header { + border-bottom: 1px solid #e7e7e7; + line-height: 50px; + height: 48px; + padding: 0 20px; +} +#chat .header .lt, +#chat .header .rt { + color: #ccc; + display: none; + float: left; + line-height: 40px; + height: 36px; + margin: 6px 12px 0 -12px; + width: 36px; +} +#chat .header .lt:before { + font: 16px Octicons; + content: "\f05e"; +} +#chat .header .rt { + float: right; +} +#chat .header .title { + font: 16px Lato; +} +#chat .header .topic { + color: #777; + margin-left: 8px; + text-transform: capitalize; +} +#chat .chat, +#chat .sidebar { + top: 58px; +} +#chat .chat { + bottom: 0; + left: 0; + overflow: auto; + -webkit-overflow-scrolling: touch; + position: absolute; + right: 180px; +} +#chat .sidebar { + background: #fff; + border-left: 1px solid #e7e7e7; + bottom: 0; + position: absolute; + right: 0; + width: 180px; +} +#chat .lobby .chat, +#chat .query .chat { + right: 0; +} +#chat .lobby .sidebar, +#chat .query .sidebar { + display: none; +} +#chat .show-more { + color: #b1c3ce; + position: absolute; + width: 100%; + border-bottom: 1px solid #e7e7e7; + height: 41px; + background: #fff; +} +#chat .show-more + .messages .msg:first-child span { + padding-top: 46px; +} +#chat .messages { + display: table; + height: 100%; + width: 100%; +} +#chat .msg { + display: table-row; + word-wrap: break-word; +} +#chat .msg:first-child > span { + padding-top: 10px; +} +#chat .msg:last-child { + height: 100%; +} +#chat .msg:last-child .text { + padding-bottom: 10px; +} +#chat .msg .type { + color: #ccc; + color: #d0dbe2; + display: none; +} +#chat .time, +#chat .from, +#chat .text { + display: table-cell; + padding: 4px 0; +} +#chat .time { + background: #fcfdfd; + background: #fcfcfc; + color: #e4eaee; + text-align: right; + width: 46px; + min-width: 46px; +} +#chat .from { + background: #fcfdfd; + background: #fcfcfc; + border-right: 1px solid #f6f8f9; + border-right: 1px solid #f6f6f6; + color: #b1c3ce; + padding-right: 10px; + text-align: right; + width: 134px; + min-width: 134px; +} +#chat a, +#chat .from button, +#chat .sidebar button { + color: #84ce88; +} +#chat .text { + padding-left: 10px; + padding-right: 6px; +} +#chat .text a { + word-break: break-all; +} +#chat .join .type, +#chat .part .type, +#chat .mode .type, +#chat .nick .type, +#chat .kick .type, +#chat .quit .type, +#chat .quit .type, +#chat .topic .type { + display: inline; +} +#chat .error, +#chat .error .from, +#chat .highlight, +#chat .highlight .from { + color: #f00; +} +#chat.hide-join .join, +#chat.hide-nick .nick, +#chat.hide-part .nick, +#chat.hide-mode .mode, +#chat.hide-quit .quit { + display: none !important; +} +#chat .notice .type { + display: none; +} +#chat .action, +#chat .action .user { + color: #f39c12; +} +#chat .action .user:before { + content: '* '; +} +#chat .count { + background: #fcfcfc; + background: #fff; + border-bottom: 1px dashed #e7e7e7; + height: 48px; + left: 0; + position: absolute; + right: 0; + top: 0; +} +#chat .count:before { + color: #eee; + font: 16px Octicons; + content: "\f02e"; + position: absolute; + right: 18px; + line-height: 50px; + transition: color .2s; + z-index: 0; +} +#chat .search { + color: #222; + border: 0; + background: none; + font: inherit; + outline: 0; + padding: 18px 16px; + position: relative; + width: 100%; +} +#chat .names { + bottom: 0; + overflow: auto; + overflow-x: hidden; + -webkit-overflow-scrolling: touch; + padding: 12px 16px; + position: absolute; + top: 48px; + width: 100%; +} +#chat .names button { + display: block; + line-height: 1.8em; +} +#sign-in label { + display: block; + margin-top: 10px; +} +#sign-in .title { + margin-bottom: 10px; +} +#sign-in .btn { + margin-top: 25px; +} +#sign-in .error { + color: #e74c3c; + margin-top: 1em; +} +#connect label { + display: block; + margin-top: 10px; +} +#connect .title { + margin-bottom: 10px; +} +#connect .port:before { + content: ":"; + margin: 28px 0 0 -17px; + position: absolute; +} +#connect .btn { + margin-top: 25px; +} +#settings h2 { + border-bottom: 1px solid #eee; + color: #7f8c8d; + font-size: 22px; + margin: 30px 0 10px; + padding-bottom: 7px; +} +#settings .title { + margin-bottom: -10px; +} +#settings .opt { + display: block; + padding: 10px 0 10px 1px; +} +#settings .opt input { + float: left; + margin: 4px 10px 0 0; +} +#settings .about, +#settings #play { + color: #7f8c8d; +} +#settings #play:hover { + opacity: .8; +} +#settings #play:before { + content: "\f0ba"; + font: 16px Octicons; + margin-right: 9px; +} +#settings .about { + font-size: 14px; + padding-top: 2px; + line-height: 1.8; +} +#form { + background: #e4eaee; + border-top: 1px solid #cfdae1; + bottom: 0; + height: 48px; + left: 0; + position: absolute; + right: 0px; + z-index: 1; +} +#form input { + border: 1px solid #cfdae1; + font: 13px Consolas, monospace; + border-radius: 2px; + height: 100%; + outline: none; + padding: 0 12px; + -webkit-appearance: none; + width: 100%; +} +#form .inner { + bottom: 7px; + left: 7px; + position: absolute; + right: 7px; + top: 6px; +} +#form #submit { + height: 0; + margin-left: -9999px; + position: absolute; + width: 0; +} + +@media (max-width: 768px) { + #viewport.lt { + -webkit-transform: translate3d(220px, 0, 0); + transform: translate3d(220px, 0, 0); + } + #viewport.rt { + -webkit-transform: translate3d(-180px, 0, 0); + transform: translate3d(-180px, 0, 0); + } + #sidebar { + left: -220px; + } + #sidebar .empty:before { + margin-top: 0; + } + #main { + left: 5px; + right: 5px; + } + #chat .chat { + right: 0; + } + #chat .header .lt { + display: block; + } + #chat .sidebar { + right: -180px; + } +} + +@media (max-width: 480px) { + #chat .messages { + display: block; + padding: 5px 10px; + } + #chat .msg { + display: block; + padding: 2px 0; + } + #chat .msg:last-child { + height: auto; + } + #chat .from, + #chat .text { + background: none; + border: 0; + display: inline; + padding: 0; + } + #chat .time { + display: none; + } +} diff --git a/client/index.html b/client/index.html index 37b4cf2d..3e86b2f2 100644 --- a/client/index.html +++ b/client/index.html @@ -32,11 +32,6 @@
-
@@ -211,7 +206,13 @@