diff --git a/client/css/bootstrap.css b/client/css/bootstrap.css index 27faec8..253f179 100644 --- a/client/css/bootstrap.css +++ b/client/css/bootstrap.css @@ -960,322 +960,6 @@ address { margin-left: 0%; } } -@media (min-width: 992px) { - .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { - float: left; - } - .col-md-12 { - width: 100%; - } - .col-md-11 { - width: 91.66666667%; - } - .col-md-10 { - width: 83.33333333%; - } - .col-md-9 { - width: 75%; - } - .col-md-8 { - width: 66.66666667%; - } - .col-md-7 { - width: 58.33333333%; - } - .col-md-6 { - width: 50%; - } - .col-md-5 { - width: 41.66666667%; - } - .col-md-4 { - width: 33.33333333%; - } - .col-md-3 { - width: 25%; - } - .col-md-2 { - width: 16.66666667%; - } - .col-md-1 { - width: 8.33333333%; - } - .col-md-pull-12 { - right: 100%; - } - .col-md-pull-11 { - right: 91.66666667%; - } - .col-md-pull-10 { - right: 83.33333333%; - } - .col-md-pull-9 { - right: 75%; - } - .col-md-pull-8 { - right: 66.66666667%; - } - .col-md-pull-7 { - right: 58.33333333%; - } - .col-md-pull-6 { - right: 50%; - } - .col-md-pull-5 { - right: 41.66666667%; - } - .col-md-pull-4 { - right: 33.33333333%; - } - .col-md-pull-3 { - right: 25%; - } - .col-md-pull-2 { - right: 16.66666667%; - } - .col-md-pull-1 { - right: 8.33333333%; - } - .col-md-pull-0 { - right: 0%; - } - .col-md-push-12 { - left: 100%; - } - .col-md-push-11 { - left: 91.66666667%; - } - .col-md-push-10 { - left: 83.33333333%; - } - .col-md-push-9 { - left: 75%; - } - .col-md-push-8 { - left: 66.66666667%; - } - .col-md-push-7 { - left: 58.33333333%; - } - .col-md-push-6 { - left: 50%; - } - .col-md-push-5 { - left: 41.66666667%; - } - .col-md-push-4 { - left: 33.33333333%; - } - .col-md-push-3 { - left: 25%; - } - .col-md-push-2 { - left: 16.66666667%; - } - .col-md-push-1 { - left: 8.33333333%; - } - .col-md-push-0 { - left: 0%; - } - .col-md-offset-12 { - margin-left: 100%; - } - .col-md-offset-11 { - margin-left: 91.66666667%; - } - .col-md-offset-10 { - margin-left: 83.33333333%; - } - .col-md-offset-9 { - margin-left: 75%; - } - .col-md-offset-8 { - margin-left: 66.66666667%; - } - .col-md-offset-7 { - margin-left: 58.33333333%; - } - .col-md-offset-6 { - margin-left: 50%; - } - .col-md-offset-5 { - margin-left: 41.66666667%; - } - .col-md-offset-4 { - margin-left: 33.33333333%; - } - .col-md-offset-3 { - margin-left: 25%; - } - .col-md-offset-2 { - margin-left: 16.66666667%; - } - .col-md-offset-1 { - margin-left: 8.33333333%; - } - .col-md-offset-0 { - margin-left: 0%; - } -} -@media (min-width: 1200px) { - .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { - float: left; - } - .col-lg-12 { - width: 100%; - } - .col-lg-11 { - width: 91.66666667%; - } - .col-lg-10 { - width: 83.33333333%; - } - .col-lg-9 { - width: 75%; - } - .col-lg-8 { - width: 66.66666667%; - } - .col-lg-7 { - width: 58.33333333%; - } - .col-lg-6 { - width: 50%; - } - .col-lg-5 { - width: 41.66666667%; - } - .col-lg-4 { - width: 33.33333333%; - } - .col-lg-3 { - width: 25%; - } - .col-lg-2 { - width: 16.66666667%; - } - .col-lg-1 { - width: 8.33333333%; - } - .col-lg-pull-12 { - right: 100%; - } - .col-lg-pull-11 { - right: 91.66666667%; - } - .col-lg-pull-10 { - right: 83.33333333%; - } - .col-lg-pull-9 { - right: 75%; - } - .col-lg-pull-8 { - right: 66.66666667%; - } - .col-lg-pull-7 { - right: 58.33333333%; - } - .col-lg-pull-6 { - right: 50%; - } - .col-lg-pull-5 { - right: 41.66666667%; - } - .col-lg-pull-4 { - right: 33.33333333%; - } - .col-lg-pull-3 { - right: 25%; - } - .col-lg-pull-2 { - right: 16.66666667%; - } - .col-lg-pull-1 { - right: 8.33333333%; - } - .col-lg-pull-0 { - right: 0%; - } - .col-lg-push-12 { - left: 100%; - } - .col-lg-push-11 { - left: 91.66666667%; - } - .col-lg-push-10 { - left: 83.33333333%; - } - .col-lg-push-9 { - left: 75%; - } - .col-lg-push-8 { - left: 66.66666667%; - } - .col-lg-push-7 { - left: 58.33333333%; - } - .col-lg-push-6 { - left: 50%; - } - .col-lg-push-5 { - left: 41.66666667%; - } - .col-lg-push-4 { - left: 33.33333333%; - } - .col-lg-push-3 { - left: 25%; - } - .col-lg-push-2 { - left: 16.66666667%; - } - .col-lg-push-1 { - left: 8.33333333%; - } - .col-lg-push-0 { - left: 0%; - } - .col-lg-offset-12 { - margin-left: 100%; - } - .col-lg-offset-11 { - margin-left: 91.66666667%; - } - .col-lg-offset-10 { - margin-left: 83.33333333%; - } - .col-lg-offset-9 { - margin-left: 75%; - } - .col-lg-offset-8 { - margin-left: 66.66666667%; - } - .col-lg-offset-7 { - margin-left: 58.33333333%; - } - .col-lg-offset-6 { - margin-left: 50%; - } - .col-lg-offset-5 { - margin-left: 41.66666667%; - } - .col-lg-offset-4 { - margin-left: 33.33333333%; - } - .col-lg-offset-3 { - margin-left: 25%; - } - .col-lg-offset-2 { - margin-left: 16.66666667%; - } - .col-lg-offset-1 { - margin-left: 8.33333333%; - } - .col-lg-offset-0 { - margin-left: 0%; - } -} .clearfix:before, .clearfix:after, .container:before, diff --git a/client/css/fonts/octicons.svg b/client/css/fonts/octicons.svg new file mode 100644 index 0000000..ea3e0f1 --- /dev/null +++ b/client/css/fonts/octicons.svg @@ -0,0 +1,198 @@ + + + diff --git a/client/css/fonts/octicons.woff b/client/css/fonts/octicons.woff index c1e76ab..3c0e36a 100644 Binary files a/client/css/fonts/octicons.woff and b/client/css/fonts/octicons.woff differ diff --git a/client/css/style.css b/client/css/style.css index baabdcc..393fb0d 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -3,7 +3,7 @@ ); @font-face { font-family: "Octicons"; - src: url("fonts/octicons.woff") format("woff"); + src: url("fonts/octicons.svg") format("svg"), url("fonts/octicons.woff") format("woff"); } html, @@ -29,21 +29,62 @@ h2 { line-height: inherit; margin: 0; } -button { - background: 0; - border: none; - color: #33b0f7; +input { outline: 0; +} +button { + border: none; + background: none; + margin: 0; + outline: none; padding: 0; } +.btn { + border: 2px solid #95a5a6; + border: 2px solid #84d1ff; + border-radius: 5px; + color: #95a5a6; + color: #84d1ff; + 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: #95a5a6; + background: #84d1ff; + color: #fff; +} +.btn:active { + box-shadow: none; + opacity: .8; +} +.btn:disabled { + opacity: .6; +} .container { margin: 10% auto; - max-width: 480px; + max-width: 420px; overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 30px; } +::-moz-placeholder { + color: rgba(0, 0, 0, .5); + opacity: 1; +} +::-webkit-input-placeholder { + color: rgba(0, 0, 0, .5); +} +:-ms-input-placeholder { + color: rgba(0, 0, 0, .5) !important; +} #wrap { height: 100%; overflow: hidden; @@ -59,6 +100,7 @@ button { #sidebar { background: #262c36; bottom: 0; + color: #fff; left: 0; overflow: hidden; overflow-y: auto; @@ -85,11 +127,27 @@ button { } #sidebar .networks { min-height: 100%; - padding: 30px 40px 80px; + padding: 25px 40px 80px; } #sidebar .network + .network { margin-top: 30px; } +#sidebar .empty { + color: #7c838d; + line-height: 1.6; + font-size: 12px; + text-align: center; + width: 140px; +} +#sidebar .empty:before { + content: "\f085"; + display: block; + margin-top: 20px; + font: 64px Octicons; + opacity: .4; + margin-bottom: 24px; + text-align: center; +} #sidebar .chan { display: block; margin: 1px -10px; @@ -131,12 +189,13 @@ button { } #footer button { font: 18px Octicons; - padding: 8px 12px; + line-height: 34px; + padding: 0px 12px; } -#footer #btn-1:before { +#footer .connect:before { content: "\f085"; } -#footer #btn-2:before { +#footer .settings:before { content: "\f02f"; } #main { @@ -161,8 +220,6 @@ button { text-align: center; } #header button { - border: 1px solid #bdc3c7; - border-radius: 2px; color: #666; font: 16px Octicons; height: 32px; @@ -170,17 +227,20 @@ button { position: absolute; top: 4px; transition: opacity .2s; - width: 32px; + padding: 0 10px; + width: 64px; } #header button:hover { - border-color: #bdc3c7; opacity: 1; } #header #lt { left: 4px; + text-align: left; } #header #rt { + display: none; right: 4px; + text-align: right; } #header #lt:before { content: "\f05e"; @@ -194,26 +254,48 @@ button { top: 0px; width: 100%; } -#windows > div, -#windows .chan { +#windows .chan, +#windows .window { background: #fff; bottom: 0; + display: none; left: 0; position: absolute; right: 0; top: 0; } -#windows .chan, -#settings, -#connect { - display: none; +#windows .window { + overflow-y: auto; +} +#windows .window h1 { + font: 36px Lato; +} +#windows .window input { + border: 2px solid #e9ecef; + border-radius: 4px; + color: #222; + font-size: 14px; + margin: 2px 0; + outline: 0; + padding: 8px 10px; + transition: border-color .2s; + -webkit-appearance: none; + width: 100%; +} +#windows .window input:hover, +#windows .window input:focus { + border-color: #bdc3c7; } #windows .active { display: block; } #chat { + bottom: 0; font: 13px Consolas, monospace; - position: relative; + left: 0; + position: absolute; + right: 0; + top: 0; } #chat button:hover { opacity: .6; @@ -236,6 +318,9 @@ button { top: 0; width: 180px; } +#chat .sidebar button { + color: #33b0f7; +} #chat .messages { display: table; height: 100%; @@ -359,12 +444,31 @@ button { display: block; line-height: 1.6em; } +#connect input { + width: 100%; +} +#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: 30px; +} #form { bottom: 0; height: 40px; left: 0; position: absolute; right: 0px; + z-index: 1; } #form input { border: 0; @@ -418,6 +522,9 @@ button { #sidebar { left: -220px; } + #sidebar .empty:before { + margin-top: 0; + } #main { left: 0; } @@ -442,4 +549,7 @@ button { #chat .time { display: none; } + #windows .title { + display: none; + } } \ No newline at end of file diff --git a/client/index.html b/client/index.html index bcd4ee0..d963803 100644 --- a/client/index.html +++ b/client/index.html @@ -20,42 +20,81 @@