diff --git a/css/profile.css b/css/profile.css index f0c2b39..16906a4 100644 --- a/css/profile.css +++ b/css/profile.css @@ -58,34 +58,14 @@ color: #fff; } -.profile-card-buttons -{ - position: absolute; - bottom: 30px; - right: 0; +.profile-card-buttons { + padding: 4px 0; } -.profile-card-buttons .direct-messages-with-user, -.profile-card-buttons .mentions-from-user, -.profile-card-buttons .follow, -.profile-card-buttons .unfollow -{ - display: inline; - padding: 4px 12px; - font-size: 12px; - width: auto; - text-align: center; - color: rgba( 0, 0, 0, .7 ); - background: rgba( 0, 0, 0, .1 ); - border: none; - transition: all .2s linear; -} - -.profile-card-buttons .direct-messages-with-user:hover, -.profile-card-buttons .mentions-from-user:hover -{ - color: #fff; - background: #45474d; +.twister-user-info .profile-card-buttons { + position: absolute; + top: 0; + right: 0; } .profile-card.forEdition @@ -308,3 +288,27 @@ h1.profile-name { h2.profile-screen-name { display: block; } + +.group-messages-control .invite-form, .group-messages-control .secret-key { + display: none; + font-size: 12px; + text-align: center; + padding: 4px 0; +} + +.group-messages-control .invite-form input { + vertical-align: middle; + width: 73%; + margin: 0 4px; +} + +.group-messages-control .invite-form button { + color: #DDD; + background-color: #45474D; + border: medium none; + vertical-align: middle; +} + +.group-messages-control .invite-form button:hover { + color: #FFF; +} diff --git a/css/style.css b/css/style.css index 8a5b111..f9de08b 100644 --- a/css/style.css +++ b/css/style.css @@ -96,28 +96,24 @@ h3 ************** BUTTONS *************** **************************************/ -button -{ +button { + color: rgba(255, 255, 255, .8); background: #45474d; - color: rgba( 255, 255, 255, .8 ); border: none; padding: 5px 10px; cursor: pointer; } -button:hover -{ +button:hover { color: #fff; } -button.disabled -{ +button:disabled, button.disabled { opacity: .4; } -button.disabled:hover -{ - color: rgba( 255, 255, 255, .8 ); +button:disabled:hover, button.disabled:hover { + color: rgba(255, 255, 255, .8); } button.follow, button.unfollow, .following-list button.private { @@ -151,11 +147,32 @@ button.follow:hover, button.unfollow:hover, .following-list button.private:hover margin-right: 10px; } +.b-buttons { + text-align: right; + padding: 4px; +} + +.b-buttons button { + color: rgba(0, 0, 0, .7); + background-color: rgba(0, 0, 0, .08); + border: none; + font-size: 12px; + text-align: center; + width: auto; + padding: 4px 12px; + transition: all .1s linear; +} + +.b-buttons button:hover { + color: #FFF; + background: #45474D; +} + /************************************* -**************************** MENU ***** +**************** MENU **************** **************************************/ -.userMenu -{ + +.userMenu { width: 900px; position: fixed; left: 50%; @@ -164,12 +181,13 @@ button.follow:hover, button.unfollow:hover, .following-list button.private:hover background: #45474d; z-index: 2; } + .userMenu.w1200 { width: 1200px; margin-left: -600px; } -.userMenu:after -{ + +.userMenu:after { content: ""; position: absolute; right: 0; @@ -177,16 +195,14 @@ button.follow:hover, button.unfollow:hover, .following-list button.private:hover height: 54px; background: url(../img/twister_mini.png) no-repeat right 5px; } -.userMenu > ul -{ -} -.userMenu > ul > li -{ + +.userMenu > ul > li { float: left; + height: 40px; margin: 0; } -.userMenu > ul > li > a -{ + +.userMenu > ul > li > a { line-height: 40px; height: 40px; padding: 0 20px 0 45px; @@ -198,115 +214,89 @@ button.follow:hover, button.unfollow:hover, .following-list button.private:hover transition: all .2s linear; position: relative; } -.userMenu li > a:hover -{ + +.userMenu li:hover, .userMenu li:active { + background-color: rgba(0, 0, 0 , .4); +} + +.userMenu li:hover > a, .userMenu li:active > a { text-decoration: none; opacity: 1; } -.userMenu li.current > a -{ + +.userMenu li.current { + background-color: #B43E34; +} + +.userMenu li.current > a { color: #fff; opacity: 1; } -.userMenu li.userMenu-home > a -{ + +.userMenu li.userMenu-home > a { background: url(../img/home.png) no-repeat 5px center; } -.userMenu li.userMenu-home:hover > a -{ - background: url(../img/home.png) no-repeat 5px center rgba( 0, 0, 0 , .4 ); -} -.userMenu li.userMenu-home.current > a -{ - background: url(../img/home.png) no-repeat 5px center #b43e34; -} -.userMenu li.userMenu-connections > a -{ + +.userMenu li.userMenu-connections > a { background: url(../img/connections.png) no-repeat 5px center; - padding: 0 30px 0 20px; + padding: 0 24px; opacity: 1; } -.userMenu li.userMenu-connections:hover > a -{ - background: url(../img/connections.png) no-repeat 5px center rgba( 0, 0, 0 , .4 ); -} -.userMenu li.userMenu-connections.current > a -{ - background: url(../img/connections.png) no-repeat 5px center #b43e34; -} -.userMenu li.userMenu-network > a -{ + +.userMenu li.userMenu-network > a { background: url(../img/network.png) no-repeat 5px center; } -.userMenu li.userMenu-network:hover > a -{ - background: url(../img/network.png) no-repeat 5px center rgba( 0, 0, 0 , .4 ); -} -.userMenu li.userMenu-network.current > a -{ - background: url(../img/network.png) no-repeat 5px center #b43e34; -} -.userMenu li.userMenu-messages > a -{ + +.userMenu li.userMenu-messages > a { background: url(../img/messages.png) no-repeat center center; - padding: 0 25px 0 35px; + padding: 0 24px; opacity: 1; } -.userMenu li.userMenu-messages:hover > a -{ - background: url(../img/messages.png) no-repeat center center rgba( 0, 0, 0 , .4 ); + +.userMenu li.userMenu-messages > a:empty { + padding: 0 20px 0 30px; + opacity: .7; } -.userMenu li.userMenu-messages.current > a -{ - background: url(../img/messages.png) no-repeat center center #b43e34; + +.userMenu li.userMenu-groupmessages > a { + background: url(../img/groupmessages.png) no-repeat center center; + background-size: 22px 22px; + padding: 0 24px; + opacity: 0.9; } -.userMenu li.userMenu-profile > a -{ + +.userMenu li.userMenu-profile > a { background: url(../img/profile.png) no-repeat 5px center; } -.userMenu li.userMenu-profile:hover > a -{ - background: url(../img/profile.png) no-repeat 5px center rgba( 0, 0, 0 , .4 ); -} -.userMenu li.userMenu-profile.current > a -{ - background: url(../img/profile.png) no-repeat 5px center #b43e34; -} -.userMenu li.userMenu-config -{ + +.userMenu li.userMenu-config { float: right; position: relative; margin-right: 40px; } -.userMenu li.userMenu-search -{ + +.userMenu li.userMenu-search { float: right; position: relative; } -.userMenu li.userMenu-config > a -{ + +.userMenu li.userMenu-search:hover { + background-color: transparent; +} + +.userMenu li.userMenu-config > a { background: url(../img/config.png) no-repeat 5px center; padding: 0 30px 0 45px; } -.userMenu li.userMenu-config > a:after -{ + +.userMenu li.userMenu-config > a:after { content: "▼"; position: absolute; font-size: 10px; transition: all .2 linear; } -.userMenu li.userMenu-config:hover > a, -.userMenu li.userMenu-config:active > a -{ - background: url(../img/config.png) no-repeat 5px center rgba( 0, 0, 0 , .4 ); -} -.userMenu li.userMenu-messages > a:empty -{ - padding: 0 20px 0 30px; - opacity: .7; -} -.wrapper -{ + +.wrapper { width: 900px; margin: 0 auto; background: #f8f5ee; @@ -315,10 +305,12 @@ button.follow:hover, button.unfollow:hover, .following-list button.private:hover z-index: 1; min-height: 100%; } + .wrapper.w1200 { width: 1200px; padding: 55px 7px 15px 7px; } + .dashboard.left { width: 320px; position: fixed; @@ -332,8 +324,7 @@ button.follow:hover, button.unfollow:hover, .following-list button.private:hover margin-left: 864px; } -.module -{ +.module { border: solid 1px rgba( 69, 71, 77, .1 ); background: #fff; } @@ -342,8 +333,7 @@ button.follow:hover, button.unfollow:hover, .following-list button.private:hover margin: 0 0 3%; } -.messages-qtd -{ +.messages-qtd { position: absolute; background: #b43e34; color: #fff; @@ -352,10 +342,11 @@ button.follow:hover, button.unfollow:hover, .following-list button.private:hover font-size: 8px; margin-top: 4px; } -.userMenu-connections .messages-qtd -{ + +.userMenu-connections .messages-qtd { margin: 4px 0 0 10px; } + /******************************************************* ****************** CONFIG SUBMENU & SEARCH RESULTS ***** *******************************************************/ @@ -1581,6 +1572,98 @@ ol.toptrends-list { content: '\2714'; } +/************************************* +****** GM NEW GROUP SETUP MODAL ****** +**************************************/ + +.group-messages-new-group.modal-wrapper { + height: auto; /*about 320px*/ + margin-top: -160px; +} + +.group-messages-new-group .modal-content .module { + margin: 4px; +} + +.group-messages-new-group .modal-content div div { + width: 100%; + margin: 4px 0; + padding: 4px 12px; +} + +.group-messages-new-group .modal-content div div:last-child { + text-align: right; +} + +.group-messages-new-group .modal-content div div:last-child button { + margin: 8px 4px; +} + +.group-messages-new-group .modal-content textarea { + border: solid 1px rgba(0, 0, 0, .3); + border-radius: 3px; + width: 500px; + height: 56px; + resize: none; + margin: 12px 16px; + padding: 2px 4px; +} + +.group-messages-new-group .modal-content textarea:focus { + border: solid 1px rgba(227, 79, 66, .5); +} + +/************************************* +****** GM JOIN GROUP SETUP MODAL ***** +**************************************/ + +.group-messages-join-group.modal-wrapper { + height: auto; /*about 360px*/ + margin-top: -240px; +} + +.group-messages-join-group .modal-content .module { + margin: 4px; +} + +.group-messages-join-group .modal-content div div { + width: 100%; + margin: 4px 0; + padding: 4px 12px; +} + +.group-messages-join-group .modal-content div div:last-child { + text-align: right; +} + +.group-messages-join-group .modal-content div div:last-child button { + margin: 8px 4px; +} + +.group-messages-join-group .modal-content input { + border: solid 1px rgba(0, 0, 0, .3); + border-radius: 3px; + width: 500px; + margin: 12px 16px; + padding: 2px 4px; +} + +.group-messages-join-group .modal-content input:focus { + border: solid 1px rgba(227, 79, 66, .5); +} + +.group-messages-join-group .modal-content input[type='checkbox'] { + display: inline; + width: auto; + margin: 2px; +} + +.group-messages-join-group .modal-content .groups-list { + height: 120px; + overflow-y: auto; + margin: 8px 8px 0; +} + /************************************* *********** NEW USER MODAL *********** **************************************/ @@ -1693,6 +1776,7 @@ ol.toptrends-list { .prompt-wrapper { background: #fff; + font-size: 13px; z-index: 5; position: fixed; top: 50%; @@ -1713,6 +1797,20 @@ ol.toptrends-list { margin: 4px; } +/************************************* +*********** CONFIRM POPUP ************ +**************************************/ + +.confirm-popup .message { + text-align: center; + margin: 12px; +} + +.confirm-popup .modal-buttons { + text-align: center; + padding: 4px; +} + /************************************* ****** FOLLOWING-CONFIG PROMPT ******* **************************************/ diff --git a/following.html b/following.html index 30ee04a..0ca6122 100644 --- a/following.html +++ b/following.html @@ -36,7 +36,7 @@
Group description
+ +Peers to invite
+ +Select group(s)
+Import secret key
+ +With group alias
+ +Group description
+ +Peers to invite
+ +Select group(s)
+Import secret key
+ +With group alias
+ +