From 966b2a01e5472e735e940ba77824e3ed6beae793 Mon Sep 17 00:00:00 2001 From: Evert Date: Fri, 23 Sep 2016 10:38:47 +0300 Subject: [PATCH] some interface work --- public/css/main.css | 144 ++++++++++++++++++++++ public/index.html | 23 +++- public/js/main.js | 291 ++++++++++++++++++++++++++++++++++++-------- public/main.styl | 126 +++++++++++++++++++ teemant.js | 12 +- 5 files changed, 543 insertions(+), 53 deletions(-) diff --git a/public/css/main.css b/public/css/main.css index 84f5561..d1e6dab 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -90,3 +90,147 @@ body { background: -webkit-linear-gradient(top, #c4effc 0%, #7fd5ef 40%, #39b7dd 100%); background: linear-gradient(to bottom, #c4effc 0%, #7fd5ef 40%, #39b7dd 100%); } +.ircclient #chat .ircwrapper { + position: absolute; + width: 100%; + height: 100%; +} +.ircclient #chat .ircwrapper .toolbar { + height: 56px; + background-color: #00c7e0; + position: relative; + z-index: 10; + box-shadow: 2px 2px 4px #cecece; +} +.ircclient #chat .ircwrapper .toolbar .logo { + width: 56px; + height: 56px; + display: inline-block; + margin: 0 5px; +} +.ircclient #chat .ircwrapper .toolbar .tabby { + display: inline-block; + height: 56px; + position: absolute; + left: 60px; + right: 0; +} +.ircclient #chat .ircwrapper .toolbar .tabby .tab { + display: inline-block; + min-width: 60px; + height: 25px; + margin: 5px; + margin-right: 0; + padding: 10px; + line-height: 25px; + background-color: #29e1ff; + border-radius: 5px; + border: 1px solid #00d0ea; + box-shadow: inset 4px 4px 8px #44ebff; + color: #fff; + cursor: pointer; + font-weight: 600; +} +.ircclient #chat .ircwrapper .toolbar .tabby .tab #close { + display: inline-block; + width: 12px; + text-align: center; + color: #ff3d3d; + float: right; +} +.ircclient #chat .ircwrapper .toolbar .tabby .tab:hover { + background-color: #63e9ff; + box-shadow: inset 4px 4px 8px #86f2ff; +} +.ircclient #chat .ircwrapper .toolbar .tabby .tab.active { + background-color: #00b9d8; + border: 1px solid #009aad; + box-shadow: inset 4px 4px 8px #009caf; + color: #fff; +} +.ircclient #chat .ircwrapper .toolbar .tabby .tab.active:hover { + background-color: #00c7e8; +} +.ircclient #chat .ircwrapper .chatarea { + position: absolute; + top: 56px; + width: 100%; + bottom: 46px; +} +.ircclient #chat .ircwrapper .chatarea .topicbar { + position: absolute; + top: 0; + height: 20px; + right: 0; + left: 0; + background-color: #fff; + border-bottom: 1px solid #ddd; + padding: 12px; + display: none; +} +.ircclient #chat .ircwrapper .chatarea .letterbox { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; +} +.ircclient #chat .ircwrapper .chatarea .nicklist { + width: 280px; + position: absolute; + right: 0; + border-left: 1px solid #ddd; + padding: 10px; + top: 0; + bottom: 0; + display: none; +} +.ircclient #chat .ircwrapper .chatarea.vnicks .nicklist { + display: block; +} +.ircclient #chat .ircwrapper .chatarea.vnicks .letterbox { + right: 301px; +} +.ircclient #chat .ircwrapper .chatarea.vnicks .topicbar { + right: 301px; +} +.ircclient #chat .ircwrapper .chatarea.vtopic .topicbar { + display: block; +} +.ircclient #chat .ircwrapper .chatarea.vtopic .letterbox { + top: 45px; +} +.ircclient #chat .ircwrapper .input { + position: absolute; + bottom: 0; + height: 46px; + width: 100%; + background-color: #00c7e0; +} +.ircclient #chat .ircwrapper .input .nickname { + background-color: #00efef; + margin: 5px; + padding: 7px; + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; + padding-right: 20px; + margin-right: 0; + width: 183px; + text-overflow: clip; +} +.ircclient #chat .ircwrapper .input .inputwrapper { + display: inline-block; + position: absolute; + margin: 5px 0; + left: 210px; + right: 46px; + top: 0; +} +.ircclient #chat .ircwrapper .input .inputwrapper input { + width: 100%; + padding: 6px; + font-size: 120%; + border: 1px solid #929292; + border-left: 0; + box-shadow: inset 4px 4px 8px #d8d8d8; +} diff --git a/public/index.html b/public/index.html index 08a63db..78b2260 100644 --- a/public/index.html +++ b/public/index.html @@ -30,8 +30,27 @@ -