diff --git a/css/fonts/ionicons/ionicons.eot b/css/fonts/ionicons/ionicons.eot new file mode 100644 index 0000000..92a3f20 Binary files /dev/null and b/css/fonts/ionicons/ionicons.eot differ diff --git a/css/fonts/ionicons/ionicons.svg b/css/fonts/ionicons/ionicons.svg new file mode 100644 index 0000000..49fc8f3 --- /dev/null +++ b/css/fonts/ionicons/ionicons.svg @@ -0,0 +1,2230 @@ + + + + + +Created by FontForge 20120731 at Thu Dec 4 09:51:48 2014 + By Adam Bradley +Created by Adam Bradley with FontForge 2.0 (http://fontforge.sf.net) + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/css/fonts/ionicons/ionicons.ttf b/css/fonts/ionicons/ionicons.ttf new file mode 100644 index 0000000..c4e4632 Binary files /dev/null and b/css/fonts/ionicons/ionicons.ttf differ diff --git a/css/fonts/ionicons/ionicons.woff b/css/fonts/ionicons/ionicons.woff new file mode 100644 index 0000000..5f3a14e Binary files /dev/null and b/css/fonts/ionicons/ionicons.woff differ diff --git a/css/style.css b/css/style.css index e94511a..44f3894 100644 --- a/css/style.css +++ b/css/style.css @@ -4,7 +4,7 @@ h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, -b, u, i, center, +b, u, i, .profile-bio, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, @@ -99,149 +99,92 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, font-weight: 700; font-style: italic; } -/******* fontello ****** */ +/* ICONS */ @font-face { - font-family: "fontello"; - src: url("fonts/fontello/fontello.eot?7584488"); - src: url("fonts/fontello/fontello.eot?7584488#iefix") format("embedded-opentype"), url("fonts/fontello/fontello.woff?7584488") format("woff"), url("fonts/fontello/fontello.ttf?7584488") format("truetype"), url("fonts/fontello/fontello.svg?7584488#fontello") format("svg"); + font-family: "Ionicons"; + src: url("fonts/ionicons/ionicons.eot?v=2.0.0"); + src: url("fonts/ionicons/ionicons.eot?v=2.0.0#iefix") format("embedded-opentype"), url("fonts/ionicons/ionicons.ttf?v=2.0.0") format("truetype"), url("fonts/ionicons/ionicons.woff?v=2.0.0") format("woff"), url("fonts/ionicons/ionicons.svg?v=2.0.0#Ionicons") format("svg"); font-weight: normal; font-style: normal; } -[class^="icon-"]:before, [class*=" icon-"]:before, .extend-icon:before, .userMenu li.userMenu-config > a:before, .modal-header span:before, .prompt-wrapper .modal-header span:before, .postboard-posts .post .show-more:before, .post-context span:before, .post-interactions span:before, .post-stats li.stat-count:before, ul.userMenu-search-profiles button:before, .mini-profile-indicators .userMenu-connections a:before, .mini-profile-indicators .userMenu-messages a:before, .mini-profile-indicators .userMenu-user a:before, .twister-user-remove:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before, .icon-down-after:after { - font-family: "fontello"; - font-style: normal; - font-weight: normal; - speak: none; +.ion:before, .userMenu > ul li > a:before, .modal-header span:before, .prompt-wrapper .modal-header span:before, .post-context span:before, .post-interactions span:before, .post-stats li.stat-count:before, ul.userMenu-search-profiles button:before, ul.userMenu-search-profiles .show-more-followers:before, .mini-profile-indicators .userMenu-connections a:before, .mini-profile-indicators .userMenu-messages a:before, .mini-profile-indicators .userMenu-user a:before, .twister-user-remove:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before, .ion-after:after, .isFollowing:after { display: inline-block; - text-decoration: inherit; - width: 1em; - margin-right: 3px; - text-align: center; - font-variant: normal; - text-transform: none; - line-height: 1em; - margin-left: 2px; -} - -.icon-search:before { - content: ""; -} - -/* '' */ -.icon-mail:before, .mini-profile-indicators .userMenu-messages a:before { - content: ""; -} - -/* '' */ -.icon-heart:before { - content: ""; -} - -/* '' */ -.icon-star:before, .post-interactions span.post-favorite:before { - content: ""; -} - -/* '' */ -.icon-user:before, .mini-profile-indicators .userMenu-user a:before { - content: ""; -} - -/* '' */ -.icon-camera:before { - content: ""; -} - -/* '' */ -.icon-ok:before, .modal-header span.mark-all-as-read:before { - content: ""; -} - -/* '' */ -.icon-cancel:before, .modal-header span.modal-close:before, .twister-user-remove:before { - content: ""; + font-family: "Ionicons"; + speak: none; + font-style: inherit; + font-weight: inherit; + font-variant: inherit; + text-transform: normal; + text-rendering: auto; + line-height: inherit; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } -/* '' */ -.icon-plus:before { - content: ""; +.ion:after, .userMenu > ul li > a:after, .modal-header span:after, .prompt-wrapper .modal-header span:after, .post-context span:after, .post-interactions span:after, .post-stats li.stat-count:after, ul.userMenu-search-profiles button:after, ul.userMenu-search-profiles .show-more-followers:after, .mini-profile-indicators .userMenu-connections a:after, .mini-profile-indicators .userMenu-messages a:after, .mini-profile-indicators .userMenu-user a:after, .twister-user-remove:after, .refresh-toptrends:after, .twistday-reminder .refresh:after, .refresh-users:after, .ion-after:before, .isFollowing:before { + display: none; } -/* '' */ -.icon-minus:before { - content: ""; +.ion-alert:before, .post-interactions span.post-favorite:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before { + content: ""; } -/* '' */ -.icon-down:before { - content: ""; +.ion-checkmark:after, .isFollowing:after, .modal-header span.mark-all-as-read:after, .ion-checkmark:before, .isFollowing:before, .modal-header span.mark-all-as-read:before { + content: ""; } -.icon-down-after:after { - content: ""; +.ion-gear:before, .userMenu li.userMenu-config > a:before { + content: ""; } -/* '' */ -.icon-lock:before { - content: ""; +.ion-shuffle:before, .post-context span:before, .post-interactions span.post-propagate:before, .post-stats li.stat-count:before { + content: ""; } -/* '' */ -.icon-quote:before { - content: ""; +.ion-mention:before, .mini-profile-indicators .userMenu-connections a:before { + content: ""; } -/* '' */ -.icon-comment:before, .post-interactions span.post-reply:before { - content: ""; +.ion-chatbox:before, .mini-profile-indicators .userMenu-messages a:before { + content: ""; } -/* '' */ -.icon-chat:before, .postboard-posts .post .show-more:before { - content: ""; +.ion-profile:before, .userMenu li.userMenu-profile a:before, .mini-profile-indicators .userMenu-user a:before { + content: ""; } -/* '' */ -.icon-left:before, .modal-header span.modal-back:before { - content: ""; +.ion-plus:before, .post-interactions span.post-reply:before { + content: ""; } -/* '' */ -.icon-right:before { - content: ""; +.ion-reply:before { + content: ""; } -/* '' */ -.icon-up:before { - content: ""; +.ion-close:before, .modal-header span.modal-close:before, .twister-user-remove:before { + content: ""; } -/* '' */ -.icon-cog:before, .userMenu li.userMenu-config > a:before { - content: ""; +.ion-back:before, .modal-header span.modal-back:before { + content: ""; } -/* '' */ -.icon-doc:before { - content: ""; +.ion-post-promo:before { + content: ""; } -/* '' */ -.icon-arrows:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before { - content: ""; +.ion-post-normal:before { + content: ""; } -/* '' */ -.icon-twistagain:before, .post-context span:before, .post-interactions span.post-propagate:before, .post-stats li.stat-count:before { - content: ""; +.ion-home:before, .userMenu li.userMenu-home a:before { + content: ""; } -/* '' */ -.icon-bell:before, .mini-profile-indicators .userMenu-connections a:before { - content: ""; +.ion-network:before, .userMenu li.userMenu-network a:before { + content: ""; } -/* '' */ /* FONTS */ * { outline: none !important; @@ -252,30 +195,25 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, } html, body { - height: 100%; min-height: 100%; - color: #444; + color: #3E3C42; position: absolute; width: 100%; } html { - font-size: 14px; - background-color: #E2E1DD; - background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjEwMCUiIHI9IjEwMCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlMmUxZGQiLz48c3RvcCBvZmZzZXQ9IjMzLjMzMzMzJSIgc3RvcC1jb2xvcj0iI2UyZTFkZCIvPjxzdG9wIG9mZnNldD0iNjYuNjY2NjclIiBzdG9wLWNvbG9yPSIjZTJlMWRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZDJkMGNhIi8+PC9yYWRpYWxHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); - background-size: 100%; - background-image: -moz-radial-gradient(50% 100%, #e2e1dd, #e2e1dd, #e2e1dd, #d2d0ca); - background-image: -webkit-radial-gradient(50% 100%, #e2e1dd, #e2e1dd, #e2e1dd, #d2d0ca); - background-image: radial-gradient(50% 100%, #e2e1dd, #e2e1dd, #e2e1dd, #d2d0ca); - background-attachment: fixed; + font-size: 15px; + background-color: #ddd; } body { font-size: 1rem; - line-height: 1.4rem; + line-height: 1.3rem; font-family: "Roboto", sans-serif; font-weight: 400; - overflow-y: scroll; + overflow-y: scroll !important; + background-image: url('../img/bg.png?1438449671'); + background-attachment: fixed; } a { @@ -286,13 +224,15 @@ a:hover, a:active { color: #A1B775; text-decoration: underline; } -a i { +a i, a .profile-bio { text-decoration: underline; font-style: normal; } -i, em { +i, .profile-bio, em { font-style: italic; + font-family: "Droid", serif; + letter-spacing: 0; } strong, b { @@ -334,35 +274,35 @@ textarea, input { } samp { - background: #eee; - font-size: 0.9rem; - line-height: 0.9rem; + background: #3E3C42; + color: white; + font-size: 11px; + line-height: 11px; display: inline-block; - padding: 5px 8px; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - border-radius: 2px; - color: #333; + padding: 5px; + -moz-border-radius: 1px; + -webkit-border-radius: 1px; + border-radius: 1px; font-weight: 500; font-family: monospace; + word-wrap: break-word; } /* isFollowing */ .isFollowing:after { color: #A1B775; - content: ""; - font-family: "fontello"; - padding-left: 2px; + padding-left: 3px; display: inline; - font-size: 10px; + font-size: 11px; vertical-align: top; line-height: 10px; } -.isFollowing:after:hover { - text-decoration: none !important; + +h3 .isFollowing:before { + display: none !important; } h3 .isFollowing:after { - display: none; + display: none !important; } .box-shadow, .modal-wrapper, ul.dropdown-menu { @@ -371,14 +311,14 @@ h3 .isFollowing:after { box-shadow: 0 8px 13px rgba(17, 17, 17, 0); } -.clear-fix:after, .userMenu > ul:after, .wrapper:after, .dashboard > .module:after, .modal-wrapper.following-modal a:after, .modal-wrapper .modal-content:after, .modal-header:after, .prompt-wrapper .modal-header:after, .twister-user:after, .direct-messages-thread .post:after, .forEdition.profile-card:after, #postboard-top:after, #postboard-top .post-area:after, .expanded-content:after, .following .following-list li a:after, .network.singleBlock:after, .options .tab-content:after, ul.userMenu-search-profiles li:after, .mini-profile .post-area:after, .mini-profile-indicators:after, .profile-data:after, .who-to-follow ol:after { +.clear-fix:after, .userMenu > ul:after, .wrapper:after, .dashboard > .module:after, .dashboard > .module ol:after, .modal-wrapper.following-modal a:after, .modal-wrapper .modal-content:after, .modal-header:after, .prompt-wrapper .modal-header:after, .twister-user:after, .direct-messages-thread .post:after, .forEdition.profile-card:after, #postboard-top:after, #postboard-top .post-area:after, .expanded-content:after, .following .following-list li a:after, .network.singleBlock:after, .options .tab-content:after, ul.userMenu-search-profiles li:after, .mini-profile .post-area:after, .mini-profile-indicators:after, .profile-data:after { content: ""; display: table; clear: both; } /************** BUTTONS *********** */ -button, a.button { +button, .show-more-followers, a.button { padding: 0.6rem 1rem; display: inline-block; line-height: 0.75rem; @@ -395,67 +335,69 @@ button, a.button { -o-transition-duration: 0.1s; -webkit-transition-duration: 0.1s; transition-duration: 0.1s; - color: #444; + color: #3E3C42; background: #F8F8F8; border: 1px solid #ebebeb; - font-family: "fontello", "Roboto", sans-serif; + font-family: "Ionicons", "Roboto", sans-serif; cursor: pointer; } -button:hover, a.button:hover { +button:hover, .show-more-followers:hover, a.button:hover { border-color: #d2d2d2; + text-decoration: none; + color: #3E3C42; } -button.disabled, a.button.disabled { +button.disabled, .disabled.show-more-followers, a.button.disabled { opacity: 0.5; color: #999; background-color: #F3F2F0; } -button.disabled:hover, a.button.disabled:hover { +button.disabled:hover, .disabled.show-more-followers:hover, a.button.disabled:hover { color: #666; -moz-box-shadow: 1px 1px 0 rgba(68, 68, 68, 0.3); -webkit-box-shadow: 1px 1px 0 rgba(68, 68, 68, 0.3); box-shadow: 1px 1px 0 rgba(68, 68, 68, 0.3); } -button.color-1, .modal-wrapper .modal-content button.postboard-news, button.follow, a.button.color-1, .modal-wrapper .modal-content a.button.postboard-news, a.button.follow { +button.color-1, .modal-wrapper .modal-content button.postboard-news, .modal-wrapper .modal-content .postboard-news.show-more-followers, button.follow, .follow.show-more-followers, .forEdition.profile-card button.submit-changes, .forEdition.profile-card .submit-changes.show-more-followers, .color-1.show-more-followers, a.button.color-1, .modal-wrapper .modal-content a.button.postboard-news, a.button.follow { background: #A1B775; border-color: #96ae64; color: white; font-weight: 500; } -button.color-1:hover, .modal-wrapper .modal-content button.postboard-news:hover, button.follow:hover, a.button.color-1:hover, .modal-wrapper .modal-content a.button.postboard-news:hover, a.button.follow:hover { +button.color-1:hover, .modal-wrapper .modal-content button.postboard-news:hover, .modal-wrapper .modal-content .postboard-news.show-more-followers:hover, button.follow:hover, .follow.show-more-followers:hover, .forEdition.profile-card button.submit-changes:hover, .forEdition.profile-card .submit-changes.show-more-followers:hover, .color-1.show-more-followers:hover, a.button.color-1:hover, .modal-wrapper .modal-content a.button.postboard-news:hover, a.button.follow:hover { border-color: #687b40; } -button.color-2, button.unfollow, a.button.color-2, a.button.unfollow { +button.color-2, button.unfollow, .unfollow.show-more-followers, .forEdition.profile-card button.toggle-priv-key, .forEdition.profile-card .toggle-priv-key.show-more-followers, .color-2.show-more-followers, a.button.color-2, a.button.unfollow { background: #64676C; border-color: #585a5f; color: white; font-weight: 500; } -button.color-2:hover, button.unfollow:hover, a.button.color-2:hover, a.button.unfollow:hover { +button.color-2:hover, button.unfollow:hover, .unfollow.show-more-followers:hover, .forEdition.profile-card button.toggle-priv-key:hover, .forEdition.profile-card .toggle-priv-key.show-more-followers:hover, .color-2.show-more-followers:hover, a.button.color-2:hover, a.button.unfollow:hover { border-color: #3f4144; } -button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module li button, a.button.small { +button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-follow-modal .show-more-followers, .show-more-followers, .who-to-follow.module li button, .who-to-follow.module li .show-more-followers, a.button.small, a.button.show-more-followers { padding: 0.5rem; font-weight: 700; font-size: 0.7rem; line-height: 0.7rem; } -button.light, a.button.light { +button.light, .light.show-more-followers, a.button.light { background: #eee; border-color: #e1e1e1; color: #222; font-weight: 500; } -button.light:hover, a.button.light:hover { +button.light:hover, .light.show-more-followers:hover, a.button.light:hover { border-color: #aeaeae; } .userMenu { width: 100%; position: fixed; - height: 42px; + height: 52px; left: 0; margin: 0; - background-color: #67686C; + background-color: #3E3C42; z-index: 2; } .userMenu > ul { @@ -469,53 +411,55 @@ button.light:hover, a.button.light:hover { background-size: 20px; } .userMenu > ul li { - float: left; - margin: 0 20px 0 0; position: relative; - display: block; + display: inline-block; + margin-right: 20px; } .userMenu > ul li > a { - line-height: 42px; - padding: 0 0.5em; + line-height: 52px; display: inline-block; - color: rgba(255, 255, 255, 0.7) !important; - font-size: 1.1em; + color: rgba(255, 255, 255, 0.5) !important; + font-size: 1rem; position: relative; - font-weight: 400; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; + font-size: 1rem; } .userMenu > ul li > a:hover { color: white !important; text-decoration: none; } +.userMenu > ul li > a:before { + padding-right: 5px; + font-size: 1.5rem; + line-height: 1rem; +} +.userMenu > ul li > a span { + display: inline-block; +} .userMenu > ul li.current a { color: white !important; } /* Menu specific entries */ -.userMenu li.userMenu-home a span.label { - display: block !important; - text-align: center; +.userMenu li.userMenu-home a .label { + display: inline-block !important; } .userMenu li.userMenu-home .menu-news { position: absolute; text-align: center; display: none; - top: 4px; - right: -7px; + top: 5px; + right: -12px; background: #A1B775; width: 15px; height: 15px; line-height: 15px; font-size: 10px; padding: 1px; + margin: 0; font-weight: 900; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; - letter-spacing: -0.01em; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; @@ -537,14 +481,18 @@ button.light:hover, a.button.light:hover { color: #222; } .userMenu li.userMenu-search > input { - border: 1px solid #dedede; - line-height: 21px; + border: 1px solid rgba(255, 255, 255, 0.3); + line-height: 26px; font-size: 12px; padding: 0 7px; - background: white; + background: rgba(255, 255, 255, 0.1); + color: white; + -moz-border-radius: 7px; + -webkit-border-radius: 7px; + border-radius: 7px; } .userMenu li.userMenu-search > input:focus { - border-color: #222; + border-color: rgba(255, 255, 255, 0.7); } .userMenu li.userMenu-config > a { font-size: 1.5rem; @@ -555,27 +503,27 @@ button.light:hover, a.button.light:hover { width: 1200px; max-width: 100%; margin: auto; - padding-top: 52px; + padding-top: 62px; position: relative; z-index: 1; } .dashboard.left { - top: 42px; + top: 52px; float: left; - width: 140px; + width: 170px; min-height: 700px; } .dashboard.left > .module { - width: 120px; + width: 150px; position: fixed; - top: 52px; + top: 62px; } .dashboard.right { float: left; - top: 42px; + top: 52px; overflow: hidden; - width: 360px; + width: 330px; padding-left: 20px; padding-right: 3px; } @@ -584,9 +532,14 @@ button.light:hover, a.button.light:hover { margin-bottom: 20px; background: #FDFCFA; width: 100%; + min-height: 48px; -moz-box-shadow: 1px 2px 2px rgba(17, 17, 17, 0.1); -webkit-box-shadow: 1px 2px 2px rgba(17, 17, 17, 0.1); box-shadow: 1px 2px 2px rgba(17, 17, 17, 0.1); + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + border-radius: 3px; + overflow: hidden; } .dashboard > .module h3 { float: left; @@ -594,13 +547,16 @@ button.light:hover, a.button.light:hover { } .dashboard > .module h4 { clear: left; - border-top: 1px solid #E2E1DD; - padding: 7px 10px; + padding: 10px 10px 5px 10px; font-size: 90%; } .dashboard > .module small { display: none; } +.dashboard > .module ol { + clear: both; + position: relative; +} /*********** POPUP MODAL ************* */ .modal-blackout { @@ -622,6 +578,17 @@ button.light:hover, a.button.light:hover { -moz-box-shadow: -8px 0 13px rgba(17, 17, 17, 0.2); -webkit-box-shadow: -8px 0 13px rgba(17, 17, 17, 0.2); box-shadow: -8px 0 13px rgba(17, 17, 17, 0.2); + -moz-transition-property: top, bottom; + -o-transition-property: top, bottom; + -webkit-transition-property: top, bottom; + transition-property: top, bottom; + -moz-transition-duration: 1s; + -o-transition-duration: 1s; + -webkit-transition-duration: 1s; + transition-duration: 1s; +} +.modal-wrapper.remove { + bottom: 300%; } .modal-wrapper.new-user .modal-content { padding: 25px; @@ -646,14 +613,14 @@ button.light:hover, a.button.light:hover { display: none; } .modal-wrapper.following-modal .mini-following-info { - border-bottom: 1px solid #E2E1DD; - line-height: 42px; + border-bottom: 1px solid #eee; + line-height: 48px; } .modal-wrapper.following-modal a { display: block; padding: 10px; width: 100%; - color: #444; + color: #3E3C42; background: #FDFCFA; } .modal-wrapper.following-modal a:hover { @@ -662,8 +629,8 @@ button.light:hover, a.button.light:hover { font-weight: 500; } .modal-wrapper.following-modal .mini-profile-photo { - width: 42px; - min-height: 42px; + width: 48px; + min-height: 48px; overflow-x: hidden; line-height: 0; margin: 0 1rem 0 0; @@ -686,9 +653,9 @@ button.light:hover, a.button.light:hover { font-size: 0.8rem; line-height: 1rem; width: 80%; - padding-left: 62px; + padding-left: 68px; } -.modal-wrapper.who-to-follow-modal button { +.modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-follow-modal .show-more-followers { position: absolute; right: 10px; top: 10px; @@ -720,21 +687,21 @@ button.light:hover, a.button.light:hover { position: fixed; display: block; right: 2px; - top: 44px; + top: 54px; z-index: 2000; } .modal-header, .prompt-wrapper .modal-header { position: relative; background: #212121; - height: 42px; + height: 52px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .modal-header h3, .prompt-wrapper .modal-header h3 { padding-left: 20px; - line-height: 42px; + line-height: 52px; font-weight: 500; font-size: 1rem; color: white; @@ -742,7 +709,7 @@ button.light:hover, a.button.light:hover { .modal-header span, .prompt-wrapper .modal-header span { position: absolute; top: 0; - line-height: 42px; + line-height: 52px; font-size: 1rem; cursor: pointer; color: rgba(255, 255, 255, 0.7); @@ -758,7 +725,6 @@ button.light:hover, a.button.light:hover { right: 10px; } .modal-header span.mark-all-as-read { - display: none; right: 70px; } .modal-header span.modal-back { @@ -770,12 +736,22 @@ button.light:hover, a.button.light:hover { position: relative; box-sizing: border-box; background: #FDFCFA; - border-top: 1px solid #E2E1DD; + border-bottom: 1px solid #eee; width: 100%; min-height: auto; padding: 7px; clear: left; } +.twister-user:first-child { + border-top: 1px solid #eee; + border-bottom: 1px solid #eee !important; +} +.twister-user:last-child { + border-bottom: 0; +} +.twister-user small { + display: none; +} /*********** POPUP PROMPT ************ */ /*********** POPUP PROMPT ************ */ @@ -889,10 +865,10 @@ button.light:hover, a.button.light:hover { width: 100%; } .modal-wrapper.directMessages .post-photo { - width: 42px; + width: 48px; } .modal-wrapper.directMessages .post-text { - margin-left: 52px; + margin-left: 58px; font-size: 0.9rem; } .modal-wrapper.directMessages .post-info-name { @@ -918,7 +894,7 @@ button.light:hover, a.button.light:hover { } .direct-messages-list .post:after { content: ""; - font-family: "fontello"; + font-family: "Ionicons"; position: absolute; right: 5px; top: 50%; @@ -936,7 +912,7 @@ button.light:hover, a.button.light:hover { } .direct-messages-list li { position: relative; - border-bottom: 1px solid #E2E1DD; + border-bottom: 1px solid #eee; background: #FDFCFA; } @@ -965,7 +941,7 @@ button.light:hover, a.button.light:hover { position: static; } .direct-messages-thread .post .post-info-time:hover { - color: #aaa; + color: #000; } .direct-messages-thread .post .post-text:after, .direct-messages-thread .post .post-text:nth-child(2n):after { content: ""; @@ -994,7 +970,7 @@ button.light:hover, a.button.light:hover { float: left; word-wrap: break-word; max-width: 70%; - min-height: 42px; + min-height: 48px; } .direct-messages-thread .post .post-photo { position: absolute; @@ -1042,7 +1018,7 @@ button.light:hover, a.button.light:hover { .profile-modal .modal-content .profile-card { margin: 0; padding: 0; - border-bottom: 1px solid #E2E1DD; + border-bottom: 1px solid #eee; } .profile-modal .modal-content .profile-data { background: none; @@ -1052,7 +1028,7 @@ button.light:hover, a.button.light:hover { display: block; letter-spacing: 0; text-transform: none; - color: #919191; + color: #8a8691; padding: 5px 0; margin: 0; font-size: 13px; @@ -1070,7 +1046,6 @@ button.light:hover, a.button.light:hover { position: relative; text-align: left; word-wrap: break-word; - transition: all 0.2s linear; background: none !important; padding: 10px; } @@ -1083,7 +1058,6 @@ button.light:hover, a.button.light:hover { .profile-card-main:before { content: ""; border: solid 0px #fff; - transition: all 0.2s linear; position: absolute; left: 1px; top: 1px; @@ -1109,9 +1083,8 @@ button.light:hover, a.button.light:hover { } .profile-bio { - font-style: italic; text-align: left; - font-size: 1rem; + font-size: 0.9rem; margin-left: 74px; } @@ -1157,7 +1130,7 @@ button.light:hover, a.button.light:hover { } .bitmessage-ctc:after, .tox-ctc:after { - font-family: "fontello"; + font-family: "Ionicons"; content: ""; font-style: normal; font-weight: normal; @@ -1186,61 +1159,62 @@ button.light:hover, a.button.light:hover { } .forEdition.profile-card { - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - width: auto; + margin: 0; + width: 700px; + background: none; + padding: 0; } .forEdition.profile-card .profile-card-main { - margin: 0; - width: 330px; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; - box-sizing: border-box; - padding: 10px; + padding: 10px 0; } .forEdition.profile-card .profile-card-main input { display: block; - margin: 5px auto; - background: white; - border: 1px solid #c4c4c4; + margin: 0 0 10px 100px; + width: 600px; + background: #F3F2F0; + border: 1px solid #FDFCFA; padding: 6px 4px; margin-bottom: 4px; - text-align: center; - transition: all 0.2s linear; + font-size: 1rem; + font-weight: 400; } .forEdition.profile-card .profile-card-main input:hover, .forEdition.profile-card .profile-card-main input:focus { background: white; - border-color: #aaa; + border-color: #000; } - -.input-description { - width: 90%; +.forEdition.profile-card img { + width: 70px; + float: left; } - -.input-name { - font-size: 20px; +.forEdition.profile-card h2 { + font-weight: 400; + padding: 1rem 2rem; + color: white; } - -.forEdition .profile-card-main .input-website, .forEdition .profile-card-main .input-city { - display: inline-block; +.forEdition.profile-card button, .forEdition.profile-card .show-more-followers { + float: right; + margin: 10px; } -.forEdition .profile-card-main .input-tox, .forEdition .profile-card-main .input-bitmessage { - width: 90%; - margin-top: 10px; +.forEdition.profile-card button.last-child, .forEdition.profile-card .last-child.show-more-followers { + margin-right: 0; } -.forEdition .profile-card-main h2 { - text-transform: none; - font-weight: 700; - font-size: 0.9em; +.forEdition.profile-card .secret-key-container { + text-align: left !important; + font-size: 1rem !important; } - -.profile-edition-buttons { - text-align: right; +.forEdition.profile-card .secret-key { + clear: both; + margin: 20px 0; + background: white; + text-align: left !important; + font-size: 1rem !important; + padding: 10px; } - -.selectable_theme.theme_calm { - display: none; +.forEdition.profile-card .label { + clear: both; + display: block; + font-weight: 500; + margin: 20px 0; } /************* TOP TEXTAREA ************ */ @@ -1264,6 +1238,9 @@ button.light:hover, a.button.light:hover { -o-transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; + -moz-border-radius: 11px; + -webkit-border-radius: 11px; + border-radius: 11px; top: 0; z-index: 120; } @@ -1274,14 +1251,14 @@ button.light:hover, a.button.light:hover { } #postboard-top.fixed { position: fixed; - width: 360px; - top: 42px; + width: 330px; + top: 52px; } #postboard-top .profile-photo { position: absolute; top: 10px; left: 10px; - width: 42px; + width: 48px; } #postboard-top .profile-photo img { width: 100%; @@ -1337,7 +1314,7 @@ button.light:hover, a.button.light:hover { -o-transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; - color: #5e5e5e; + color: #3E3C42; cursor: pointer; } .postboard-posts .post:hover { @@ -1346,25 +1323,26 @@ button.light:hover, a.button.light:hover { .postboard-posts .post .show-more { display: inline-block; float: right; - font-size: 12px; - color: #919191; + font-size: 0.8rem; + color: #8a8691; } .postboard-posts .post .show-more:hover { - color: #515151; + color: #4b484f; } .postboard-posts .post .post-expand { - color: #919191; + color: #8a8691; + background: #FDFCFA; cursor: pointer; - font-size: 12px; + font-size: 0.8rem; position: absolute; left: 10px; bottom: 10px; } .postboard-posts .post .post-expand:hover { - color: #515151; + color: #4b484f; } .postboard-posts .post .post-data { - padding: 10px; + padding: 12px 15px; background: #FDFCFA; } .postboard-posts > .post { @@ -1380,7 +1358,7 @@ button.light:hover, a.button.light:hover { box-shadow: 1px 2px 2px rgba(17, 17, 17, 0); } .postboard-posts > .post.open .post, #postboard-top .post-area .postboard-posts > .post.post-area-new .post, .mini-profile .postboard-posts > .post.post-area-new .post { - color: #1e1e1e; + color: #18181a; -moz-box-shadow: 1px 2px 2px rgba(17, 17, 17, 0.1); -webkit-box-shadow: 1px 2px 2px rgba(17, 17, 17, 0.1); box-shadow: 1px 2px 2px rgba(17, 17, 17, 0.1); @@ -1397,7 +1375,7 @@ button.light:hover, a.button.light:hover { float: left; vertical-align: middle; overflow: hidden; - width: 42px; + width: 48px; } .post-photo img { width: 100%; @@ -1418,7 +1396,7 @@ button.light:hover, a.button.light:hover { } .post-info-tag { - font-size: 12px; + font-size: 0.8rem; opacity: 0.6; margin-top: 4px; display: inline-block; @@ -1426,21 +1404,21 @@ button.light:hover, a.button.light:hover { .post-info-time { position: absolute; - font-size: 11px; - line-height: 14px; + font-size: 0.8rem; + line-height: 0.8rem; text-decoration: none; - top: 11px; - right: 11px; - color: #919191; + top: 12px; + right: 15px; + color: #8a8691; } .post-info-time:hover { - color: #515151; + color: #4b484f; } .post-text { - margin: 0 0 0 52px; + margin: 0 0 0 58px; word-wrap: break-word; - min-height: 22px; + min-height: 28px; padding: 0; } .post-text a:hover { @@ -1448,43 +1426,43 @@ button.light:hover, a.button.light:hover { } .post-context { - font-size: 11px; - line-height: 11px; - margin: 0 0 1em 0; - color: #919191; + font-size: 0.8rem; + line-height: 0.8rem; + margin: 0 0 0.8rem 0; + color: #8a8691; } .post-context span:before { display: block; float: left; - background: #A1B775; - text-align: center; - padding: 1px 2px 2px 2px; - line-height: 9px; - font-size: 9px; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - border-radius: 3px; - color: white; + color: #A1B775; + line-height: 0.8rem; + font-size: 0.8rem; margin-right: 0.4em; } .post-interactions { margin: 10px 0 3px 0; text-align: right; - height: 12px; - line-height: 12px; + height: 0.8rem; + line-height: 0.8rem; } .post-interactions span { - color: #919191; + color: #8a8691; cursor: pointer; - font-size: 12px; - line-height: 12px; + font-size: 0.8rem; + line-height: 0.8rem; position: relative; margin-left: 7px; display: none; } +.open .original .post-interactions span, #postboard-top .post-area .post-area-new .original .post-interactions span, .mini-profile .post-area-new .original .post-interactions span { + display: inline-block !important; +} .post-interactions span:hover { - color: #515151; + color: #4b484f; +} +.post-interactions span:before { + padding: 3px; } .post-interactions span.post-favorite { display: none !important; @@ -1528,6 +1506,7 @@ button.light:hover, a.button.light:hover { text-align: center; overflow-y: auto; background: black; + clear: both; } .post-stats { @@ -1600,15 +1579,14 @@ button.light:hover, a.button.light:hover { } .following { - width: 55%; - margin-left: 15%; - padding: 7px 20px; + width: 700px; + float: left; } .following h2 { display: none; } .following .following-list li { - border-bottom: 1px solid #E2E1DD; + border-bottom: 1px solid #eee; line-height: 45px; background: #FDFCFA; position: relative; @@ -1628,10 +1606,10 @@ button.light:hover, a.button.light:hover { display: block; padding: 1rem; width: 100%; - color: #444; + color: #3E3C42; } .following .mini-profile-photo { - width: 42px; + width: 48px; line-height: 0; margin: 0 1rem 0 0; float: left; @@ -1818,7 +1796,7 @@ button.light:hover, a.button.light:hover { .options { position: relative; } -.options button, .options input, .options select { +.options button, .options .show-more-followers, .options input, .options select { font-size: 13px; } .options label { @@ -1870,7 +1848,7 @@ button.light:hover, a.button.light:hover { display: inline-block !important; margin: 0 5px 0 0; padding: 5px 15px; - color: #aaa; + color: #000; } .options label.tabs:hover { color: #222; @@ -1887,24 +1865,28 @@ button.light:hover, a.button.light:hover { cursor: pointer; display: block; margin: 0; - padding: 5px; - border-bottom: 1px solid #E2E1DD; + width: 50%; + padding: 0.5rem; + float: left; text-align: center; - font-size: 0.9em; transition: color 0.1s linear; + position: relative; + border-left: 1px solid #eee; +} +.promoted-posts-only li span { + font-size: 0.8rem; + line-height: 0.8rem; + display: block; } .promoted-posts-only li.disabled { background: #F3F2F0; + color: rgba(62, 60, 66, 0.3); + z-index: 3; } -.promoted-posts-only li.active, .promoted-posts-only li.active span { - color: #444; +.promoted-posts-only li.active { + color: #3E3C42; cursor: default; -} -.promoted-posts-only li:hover span, .promoted-posts-only li.disabled:hover span { - color: #444; -} -.promoted-posts-only li.disabled span { - color: rgba(68, 68, 68, 0.3); + z-index: 5; } /********** CONFIG SUBMENU & SEARCH RESULTS *********** */ @@ -1912,7 +1894,7 @@ button.light:hover, a.button.light:hover { display: none; background: #222; position: absolute; - top: 38px; + top: 48px; right: 0; width: 320px; overflow: hidden; @@ -1941,7 +1923,7 @@ ul.userMenu-search-profiles li { margin: 0; cursor: pointer; background: #FDFCFA; - border-bottom: 1px solid #E2E1DD; + border-bottom: 1px solid #eee; } ul.userMenu-search-profiles li:hover { background: white; @@ -1951,15 +1933,15 @@ ul.userMenu-search-profiles li a { width: 100%; font-size: 12px; font-weight: 400; - line-height: 42px; + line-height: 32px; display: block; margin: 0; padding: 0; - color: #444; + color: #3E3C42; } ul.userMenu-search-profiles li a span, ul.userMenu-search-profiles li a b, ul.userMenu-search-profiles li a span:hover, ul.userMenu-search-profiles li a b:hover { display: inline-block; - color: #444; + color: #3E3C42; font-weight: 400; font-size: 12px; } @@ -1968,9 +1950,10 @@ ul.userMenu-search-profiles .mini-screen-name { font-weight: 500; } ul.userMenu-search-profiles .mini-profile-photo { - width: 42px; + width: 32px; height: auto; - min-height: 42px; + height: 32px; + overflow: hidden; margin: 5px; float: left; overflow-x: hidden; @@ -1979,20 +1962,20 @@ ul.userMenu-search-profiles .mini-profile-info { width: 100%; float: none; } -ul.userMenu-search-profiles button { - font-size: 1.4rem; - line-height: 27px; +ul.userMenu-search-profiles .mini-profile-name { + padding: 5px 0 0 0; +} +ul.userMenu-search-profiles button, ul.userMenu-search-profiles .show-more-followers { + font-size: 13px; + line-height: 24px; height: 32px; - width: 42px; + width: 32px; text-align: center; - font-weight: 500; + font-weight: 700; padding: 0; - -moz-border-radius: 2px; - -webkit-border-radius: 2px; - border-radius: 2px; position: absolute; - top: 10px; - right: 10px; + top: 5px; + right: 5px; } .userMenu-search input[type="text"] { @@ -2016,7 +1999,7 @@ ul.userMenu-search-profiles button { text-decoration: none; } .mini-profile a.button { - background: #aaa; + background: #000; margin: 1em auto; } .mini-profile .post-area { @@ -2038,7 +2021,7 @@ ul.userMenu-search-profiles button { .mini-profile-indicators { margin: 0; text-align: center; - border-top: 1px solid #E2E1DD; + border-top: 1px solid #eee; background: #F3F2F0; } .mini-profile-indicators li { @@ -2049,15 +2032,15 @@ ul.userMenu-search-profiles button { position: relative; font-size: 0.8em; text-align: center; - border-bottom: 1px solid #E2E1DD; + border-bottom: 1px solid #eee; } .mini-profile-indicators li a { - color: #777777; + color: #57545d; display: block; padding: 1rem 0; } .mini-profile-indicators li a:hover { - color: #444; + color: #3E3C42; background: #FDFCFA; } .mini-profile-indicators li a:before { @@ -2088,11 +2071,11 @@ ul.userMenu-search-profiles button { } .left .mini-profile-info { - padding-top: 32px; + padding-top: 20px; } .mini-profile-name { - color: #444; + color: #3E3C42; font-size: 1em; font-weight: 500; padding: 10px 0; @@ -2101,7 +2084,7 @@ ul.userMenu-search-profiles button { margin: auto; } .mini-profile-name:hover { - color: #aaa; + color: #000; } .mini-profile-photo img { @@ -2126,13 +2109,13 @@ ul.userMenu-search-profiles button { float: none; } .profile-data li a { - color: #444; + color: #3E3C42; display: inline-block; font-size: 13px; padding-bottom: 3px; } .profile-data li a:hover { - color: #aaa; + color: #000; } .profile-data li a span.posts-count, .profile-data li a span.following-count, .profile-data li a span.followers-count { display: inline-block; @@ -2143,10 +2126,10 @@ ul.userMenu-search-profiles button { display: block; font-weight: 900; font-size: 1.2rem; - color: #777777; + color: #706d77; } .mini-profile a:hover span.following-count { - color: #444; + color: #3E3C42; } .mini-profile-info a:hover { @@ -2157,38 +2140,33 @@ ul.userMenu-search-profiles button { display: block; position: absolute; bottom: 10px; - text-align: center; padding: 10px; + width: 100%; + background: #FDFCFA; font-size: 12px; z-index: 10; -moz-transition: all 0.2s linear; -o-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; + -moz-box-shadow: -8px 0 13px rgba(17, 17, 17, 0.2); + -webkit-box-shadow: -8px 0 13px rgba(17, 17, 17, 0.2); + box-shadow: -8px 0 13px rgba(17, 17, 17, 0.2); } .show-more-followers { - font-weight: 700; - display: block; - cursor: pointer; float: right; - color: #444; + margin-right: 5px; } .mini-follower-link, .followed-by { display: inline-block; - margin: 1px; + margin: 1px 5px; line-height: 12px; } .mini-follower-link.isFollowing:after, .followed-by.isFollowing:after { display: none; } -.mini-follower-link:after, .followed-by:after { - content: ""; - font-weight: 900; - color: #222; - margin-left: 1px; -} /***************** POST AREA ************** */ .post-area-new textarea { @@ -2203,7 +2181,7 @@ ul.userMenu-search-profiles button { -moz-transition: height 0.3s linear; -o-transition: height 0.3s linear; -ms-transition: height 0.3s linear; - height: 42px; + height: 48px; border: none; background: white; border: 1px solid rgba(0, 0, 0, 0.1); @@ -2219,7 +2197,7 @@ ul.userMenu-search-profiles button { } #post-preview { - border: 1px solid #E2E1DD; + border: 1px solid #eee; border-bottom: 0; padding: 5px; -moz-transition-property: all; @@ -2272,31 +2250,21 @@ textarea.splited-post { } /******** WHO TO FOLLOW ******* */ -.who-to-follow.module li button { +.who-to-follow.module li button, .who-to-follow.module li .show-more-followers { position: absolute; right: 10px; top: 10px; display: none; } -.who-to-follow.module li:hover button { +.who-to-follow.module li:hover button, .who-to-follow.module li:hover .show-more-followers { display: block; } -.who-to-follow small { - display: none; -} -.who-to-follow h3 { - float: left; - padding: 20px; -} -.who-to-follow ol { - clear: both; -} img.twister-user-photo { float: left; display: block; float: left; - width: 42px; + width: 32px; height: auto; margin: 0 10px 0 0; } @@ -2335,14 +2303,14 @@ img.twister-user-photo { .twister-user-remove { font-size: 13px; - opacity: 0.2; + opacity: 0.5; text-decoration: none; cursor: pointer; position: absolute; padding: 5px; - top: -5px; - right: -5px; - display: inline-block; + top: 0; + right: 0; + display: block; } .twister-user:hover .twister-user-remove { @@ -2389,14 +2357,14 @@ img.twister-user-photo { .toptrends-list { margin: 0; clear: both; - border-top: 1px solid #E2E1DD; + border-top: 1px solid #eee; padding: 10px; } .toptrends-list li { display: inline-block; } .toptrends-list a { - color: #aaa; + color: #000; padding: 3px 8px; display: inline-block; text-transform: uppercase; @@ -2413,31 +2381,12 @@ img.twister-user-photo { } /********* TWISTDAY REMINDER ****** */ -.twistday-reminder small { - display: none; -} -.twistday-reminder .twister-user { - background: #FDFCFA; - position: relative; - -moz-transition-property: background; - -o-transition-property: background; - -webkit-transition-property: background; - transition-property: background; - -moz-transition-duration: 0.1s; - -o-transition-duration: 0.1s; - -webkit-transition-duration: 0.1s; - transition-duration: 0.1s; -} -.twistday-reminder .twister-user:hover { - background: white; -} .twistday-reminder .twister-user-full, .twistday-reminder .twister-user-tag { - font-size: 1rem; + font-size: 0.9rem; line-height: 1rem; - color: #444; + color: #3E3C42; font-weight: 500; opacity: 1; - letter-spacing: 0; display: inline-block; } .twistday-reminder .twisterday { diff --git a/js/theme_option.js b/js/theme_option.js index 3487501..1a52707 100644 --- a/js/theme_option.js +++ b/js/theme_option.js @@ -6,20 +6,17 @@ $(window).resize(function() $(document).ready(function() { var windowHeight = $(window).height(); - + prout(); reOrganizeTemplates() $('#postboard-top textarea').on('blur',function(){$('#postboard-top').removeClass('on');}); $('#postboard-top textarea').on('focus',function(){$('#postboard-top').addClass('on');}); - $( '.userMenu-home.current a' ).on( 'click', function() { $('html, body').animate({scrollTop:0},300); return false }); - - // modify the way promoted posts are shown $( ".promoted-posts-only").click(function() { //active promoted posts tab @@ -32,8 +29,6 @@ $(document).ready(function() $('#postboard-top').addClass(promotedPostsOnly ? "hide" : "show"); }); - - $(".userMenu-search-profiles .follow") .on("eventToggleFollow", function() { $(this).text('+').attr('title', polyglot.t('Follow')); @@ -45,9 +40,6 @@ $(document).ready(function() if (/\/options.html$/i.test(document.location)) $(document).ready(localizeLabels); - - - $(window).scroll(function(){ window_scrollY = window.pageYOffset; // declare variable here for screen not to scroll when closing modals }); @@ -55,14 +47,28 @@ $(document).ready(function() $(window).scroll(function(){ window_scrollY = window.pageYOffset; // declare variable here for screen not to scroll when closing modals - if ($(document).scrollTop() >= 142) { + if ($(document).scrollTop() >= 142) { // fixe the textarea on top while scrolling (could be useful) if (this.css('position') === 'relative') this.addClass('onTop'); }else if (this.css('position') === 'fixed') this.removeClass('onTop'); }).bind($('#postboard-top')));*/ +}); + + +function prout() { + + var modulWrap = + + $(document).on( 'click', 'h3', function() { + var thisList = $(this).parents('.module').find('ol'); + var thisListTitle = $(this).parents('.module').find('h4'); + if (thisList.css('display') === 'none') {thisList.slideDown();thisListTitle.slideDown()} + else {thisList.slideUp();thisListTitle.slideUp()} + }); } -); + + function reOrganizeTemplates() { // for nin's templating @@ -82,6 +88,12 @@ function reOrganizeTemplates() { // for nin's templating $('.mini-profile-indicators').detach().insertAfter($('.dashboard.left .profile-data')); $('.post-context').each(function(){ $(this).prependTo($(this).parent()); }); // puts context on top of post + // menu + $('.userMenu li > a').wrapInner(''); + + ///// page following + $('.forEdition h2').detach().prependTo($('.forEdition')); + //loader newLoader() } @@ -128,7 +140,7 @@ function openModal(modal) { modal.content = modal.self.find('.modal-content'); modal.postboard = modal.self.find('.postboard-posts'); - modal.self.prependTo('body').fadeIn('slow'); + modal.self.prependTo('body').slideDown(); if (modal.classBase === '.modal-wrapper') { diff --git a/sass/base/_commons.sass b/sass/base/_commons.sass index 10c479b..4043056 100644 --- a/sass/base/_commons.sass +++ b/sass/base/_commons.sass @@ -6,7 +6,6 @@ html, body - height: 100% min-height: 100% color: $defaut-font-color position: absolute @@ -14,16 +13,15 @@ html, body html font-size: $global-font-size - background-color: $main-background-color - //+background-image(linear-gradient(to top right, #fff, $main-background-color, #fff) ) - +background-image(radial-gradient(50% 100% , $main-background-color,$main-background-color,$main-background-color, darken($main-background-color, 7%)) ) - background-attachment: fixed + background-color: #ddd body font-size: $main-font-size line-height : $main-line-height font-family : $main-font-family font-weight: 400 - overflow-y: scroll + overflow-y: scroll!important + background-image: image-url("bg.png") + background-attachment: fixed @@ -39,6 +37,8 @@ a i, em font-style: italic + font-family: $serif-font-family + letter-spacing: 0 strong, b font-weight: 600 @@ -73,29 +73,33 @@ textarea, input samp - background: #eee - font-size: .9rem - line-height: .9rem - display: inline-block - padding: 5px 8px - +border-radius(2px) - color: #333 + background: $dark-grey + color: white + font-size: 11px + line-height: 11px + display: inline-block + padding: 5px + +border-radius(1px) font-weight: 500 font-family: monospace + word-wrap: break-word /* isFollowing */ -.isFollowing:after - color: $main-color-color - content: '\e806' - font-family: $symbol-font-family - padding-left: 2px - display: inline - font-size: 10px - vertical-align: top - line-height: 10px - &:hover - text-decoration: none!important - h3 & - display: none + +.isFollowing + @extend .ion-checkmark + @extend .ion-after + &:after + color: $main-color-color + padding-left: 3px + display: inline + font-size: 11px + vertical-align: top + line-height: 10px +h3 + .isFollowing:before + display: none!important + .isFollowing:after + display: none!important diff --git a/sass/base/_fonts.sass b/sass/base/_fonts.sass index 47f005c..bcec10a 100644 --- a/sass/base/_fonts.sass +++ b/sass/base/_fonts.sass @@ -1,193 +1,120 @@ @font-face - font-family: "Roboto" - src: url("fonts/roboto/Roboto-Regular.ttf") - font-weight: 400 + font-family: "Roboto" + src: url("fonts/roboto/Roboto-Regular.ttf") + font-weight: 400 @font-face - font-family: "Roboto" - src: url("fonts/roboto/Roboto-Medium.ttf") - font-weight: 500 + font-family: "Roboto" + src: url("fonts/roboto/Roboto-Medium.ttf") + font-weight: 500 @font-face - font-family: "Roboto" - src: url("fonts/roboto/Roboto-Bold.ttf") - font-weight: 700 + font-family: "Roboto" + src: url("fonts/roboto/Roboto-Bold.ttf") + font-weight: 700 @font-face - font-family: "Roboto" - src: url("fonts/roboto/Roboto-Black.ttf") - font-weight: 900 + font-family: "Roboto" + src: url("fonts/roboto/Roboto-Black.ttf") + font-weight: 900 @font-face - font-family: "Roboto" - src: url("fonts/roboto/Roboto-Italic.ttf") - font-weight: 400 - font-style: italic + font-family: "Roboto" + src: url("fonts/roboto/Roboto-Italic.ttf") + font-weight: 400 + font-style: italic @font-face - font-family: "Droid" - src: url("fonts/DroidSerif-Italic.ttf") - font-weight: 400 - font-style: italic + font-family: "Droid" + src: url("fonts/DroidSerif-Italic.ttf") + font-weight: 400 + font-style: italic @font-face - font-family: "Roboto" - src: url("fonts/roboto/Roboto-MediumItalic.ttf") - font-weight: 500 - font-style: italic + font-family: "Roboto" + src: url("fonts/roboto/Roboto-MediumItalic.ttf") + font-weight: 500 + font-style: italic @font-face - font-family: "Roboto" - src: url("fonts/roboto/Roboto-BoldItalic.ttf") - font-weight: 700 - font-style: italic + font-family: "Roboto" + src: url("fonts/roboto/Roboto-BoldItalic.ttf") + font-weight: 700 + font-style: italic +/* ICONS */ -/******* fontello *******/ @font-face - font-family: "fontello" - src: url('fonts/fontello/fontello.eot?7584488') - src: url('fonts/fontello/fontello.eot?7584488#iefix') format("embedded-opentype"), url('fonts/fontello/fontello.woff?7584488') format("woff"), url('fonts/fontello/fontello.ttf?7584488') format("truetype"), url('fonts/fontello/fontello.svg?7584488#fontello') format("svg") - font-weight: normal - font-style: normal + font-family: "Ionicons" + src: url("fonts/ionicons/ionicons.eot?v=2.0.0") + src: url("fonts/ionicons/ionicons.eot?v=2.0.0#iefix") format("embedded-opentype"), url("fonts/ionicons/ionicons.ttf?v=2.0.0") format("truetype"), url("fonts/ionicons/ionicons.woff?v=2.0.0") format("woff"), url("fonts/ionicons/ionicons.svg?v=2.0.0#Ionicons") format("svg") + font-weight: normal + font-style: normal -[class^="icon-"]:before, [class*=" icon-"]:before, .extend-icon:before, .icon-down-after:after - font-family: "fontello" - font-style: normal - font-weight: normal - speak: none - display: inline-block - text-decoration: inherit - width: 1em - margin-right: 3px - text-align: center - font-variant: normal - text-transform: none - line-height: 1em - margin-left: 2px +.ion:before, .ion-after:after + display: inline-block + font-family: "Ionicons" + speak: none + font-style: inherit + font-weight: inherit + font-variant: inherit + text-transform: normal + text-rendering: auto + line-height: inherit + -webkit-font-smoothing: antialiased + -moz-osx-font-smoothing: grayscale +.ion:after, .ion-after:before + display: none -.icon-search:before - content: '\e800' +.ion-alert:before + content: "\f101" -/* ''*/ +.ion-checkmark:after, .ion-checkmark:before + content: "\f122" -.icon-mail:before - content: '\e801' +.ion-gear:before + content: "\f13d" -/* ''*/ +.ion-shuffle:before + content: "\f3a8" -.icon-heart:before - content: '\e802' +.ion-mention:before + content: "\f39b" -/* ''*/ +.ion-chatbox:before + content: "\f11c" -.icon-star:before - content: '\e803' +.ion-profile:before + content: "\f2d8" -/* ''*/ +.ion-plus:before + content: "\f11d" -.icon-user:before - content: '\e804' +.ion-reply:before + content: "\f2d4" -/* ''*/ +.ion-close:before + content: "\f12a" -.icon-camera:before - content: '\e805' +.ion-back:before + content: "\f124" -/* ''*/ +.ion-post-promo:before + content: "\f470" -.icon-ok:before - content: '\e806' +.ion-post-normal:before + content: "\f1fd" -/* ''*/ +.ion-home:before + content: "\f144" -.icon-cancel:before - content: '\e807' - -/* ''*/ - -.icon-plus:before - content: '\e808' - -/* ''*/ - -.icon-minus:before - content: '\e809' - -/* ''*/ - -.icon-down:before - content: '\e80a' - -.icon-down-after:after - content: '\e80a' - -/* ''*/ - -.icon-lock:before - content: '\e80b' - -/* ''*/ - -.icon-quote:before - content: '\e80c' - -/* ''*/ - -.icon-comment:before - content: '\e80d' - -/* ''*/ - -.icon-chat:before - content: '\e80e' - -/* ''*/ - -.icon-left:before - content: '\e80f' - -/* ''*/ - -.icon-right:before - content: '\e810' - -/* ''*/ - -.icon-up:before - content: '\e811' - -/* ''*/ - -.icon-cog:before - content: '\e812' - -/* ''*/ - -.icon-doc:before - content: '\e813' - -/* ''*/ - -.icon-arrows:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before - content: '\e814' - -/* ''*/ - -.icon-twistagain:before - content: '\e815' - -/* ''*/ - -.icon-bell:before - content: '\e816' - -/* '' */ +.ion-network:before + content: "\f2b5" diff --git a/sass/base/_utils.sass b/sass/base/_utils.sass index 9dfee13..43943fc 100644 --- a/sass/base/_utils.sass +++ b/sass/base/_utils.sass @@ -26,13 +26,15 @@ button, a.button text-transform: uppercase +transition-property(background, border-color) +transition-duration(.1s) - color: #444 + color: $dark-grey background: #F8F8F8 border: 1px solid darken( #F8F8F8 , 5%) font-family: $symbol-font-family, $main-font-family cursor: pointer &:hover border-color: darken( #F8F8F8 , 15%) + text-decoration: none + color: $dark-grey &.disabled opacity: .5 color: #999 diff --git a/sass/base/_var.sass b/sass/base/_var.sass index 8141bab..aa2a573 100644 --- a/sass/base/_var.sass +++ b/sass/base/_var.sass @@ -3,11 +3,12 @@ $site-width : 1200px $gut : 20 $postboardWidth : 700px -$miniProfileWidth : $site-width/10 +$miniProfileWidth : $site-width/8 $leftWidth : $miniProfileWidth + $gut $rightWidth : $site-width - ($leftWidth + $postboardWidth) -$mini-usr-img : 42px +$micro-usr-img : 32px +$mini-usr-img : 48px $usr-img : 64px $space : 1rem @@ -15,31 +16,32 @@ $space : 1rem // colors - $light-grey: #C3C3C3 $color-green: #A1B775 $color-red: #EF5D43 $color-blue: #39434F -$dark-grey : #444 +$dark-grey : #3E3C42 -$main-color-light: #aaa +$main-color-light: #000 $main-color-dark: #222 $main-color-color: $color-green -$main-background-color: #E2E1DD +$main-background-color: #eee $bloc-light-color : #FDFCFA -$bloc-background-color: #F3F2F0 +$bloc-background-color: #F3F2F0 + + $defaut-font-color: $dark-grey -$global-font-size : 14px +$global-font-size : 15px $main-font-size : 1rem -$main-line-height : 1.4rem +$main-line-height : 1.3rem /* FONTS */ $main-font-family: "Roboto", sans-serif -$symbol-font-family: "fontello" +$symbol-font-family: "Ionicons" $serif-font-family: "Droid", serif diff --git a/sass/layout/_menu.sass b/sass/layout/_menu.sass index a1aa1bd..82854e7 100644 --- a/sass/layout/_menu.sass +++ b/sass/layout/_menu.sass @@ -1,8 +1,8 @@ // vars for the menu -$menu-height : 42px +$menu-height : 52px $menu-font-color: white -$menuBgColor : #67686C +$menuBgColor : $dark-grey .userMenu width: 100% position: fixed @@ -22,22 +22,27 @@ $menuBgColor : #67686C background: image-url("logo.png") no-repeat 50% 50% background-size: 20px li - float: left - margin: 0 20px 0 0 position: relative - display: block + display: inline-block + margin-right: 20px > a - line-height: $menu-height - padding: 0 .5em + line-height: $menu-height display: inline-block - color: rgba($menu-font-color, 0.7)!important - font-size: 1.1em + color: rgba($menu-font-color, 0.5)!important + font-size: 1rem position: relative - font-weight: 400 - +box-sizing(border-box) + font-size: 1rem + @extend .ion &:hover color: $menu-font-color!important text-decoration: none + + &:before + padding-right: 5px + font-size: 1.5rem + line-height: 1rem + span + display: inline-block &.current a @@ -49,28 +54,35 @@ $menuBgColor : #67686C .userMenu li &.userMenu-home - a span.label - display: block!important - text-align: center + a + @extend .ion-home + .label + display: inline-block!important + .menu-news position: absolute text-align: center display: none - top: 4px - right: -7px + top: 5px + right: -12px background: $main-color-color width: 15px height: 15px line-height: 15px font-size: 10px padding: 1px + margin: 0 font-weight: 900 +border-radius(50%) - letter-spacing: -0.01em +box-sizing(content-box) color: white &.show display: block + &.userMenu-network a + @extend .ion-network + + &.userMenu-profile a + @extend .ion-profile &.userMenu-dhtindicator, &.userMenu-connections, &.userMenu-messages display: none!important @@ -84,15 +96,16 @@ $menuBgColor : #67686C color: $main-color-dark &.userMenu-search > input - border: 1px solid #dedede + border: 1px solid rgba(white,.3) line-height: $menu-height/2 font-size: 12px padding: 0 7px - background: white + background: rgba(white,.1) + color: white + +border-radius(7px) &:focus - border-color: $main-color-dark + border-color: rgba(white,.7) &.userMenu-config > a - @extend .icon-cog - @extend .extend-icon + @extend .ion-gear font-size: 1.5rem diff --git a/sass/layout/_modal.sass b/sass/layout/_modal.sass index 0f2844f..272d427 100644 --- a/sass/layout/_modal.sass +++ b/sass/layout/_modal.sass @@ -23,7 +23,10 @@ $header-modal-height : $menu-height bottom: 0 overflow: hidden +box-shadow(-8px 0 13px rgba(#111, 0.2)) - + +transition-property(top, bottom) + +transition-duration(1s) + &.remove + bottom: 300% // NEW USER MODAL // &.new-user @@ -151,7 +154,8 @@ $header-modal-height : $menu-height font-size: 1rem color: white span - @extend .extend-icon + + @extend .ion position: absolute top: 0 line-height: $header-modal-height @@ -166,14 +170,13 @@ $header-modal-height : $menu-height display: none &.modal-close - @extend .icon-cancel + @extend .ion-close right: 10px &.mark-all-as-read - display: none - @extend .icon-ok + @extend .ion-checkmark right: 70px &.modal-back - @extend .icon-left + @extend .ion-back right: 35px @@ -188,12 +191,18 @@ $header-modal-height : $menu-height box-sizing: border-box background: $bloc-light-color @extend .clear-fix - border-top: 1px solid $main-background-color + border-bottom: 1px solid $main-background-color width: 100% min-height: auto padding: 7px clear: left - + &:first-child + border-top: 1px solid $main-background-color + border-bottom: 1px solid $main-background-color !important + &:last-child + border-bottom: 0 + small + display: none /*********** POPUP PROMPT *************/ diff --git a/sass/layout/_postboard.sass b/sass/layout/_postboard.sass index 249c13f..1088dad 100755 --- a/sass/layout/_postboard.sass +++ b/sass/layout/_postboard.sass @@ -12,6 +12,7 @@ +transition-property( top) +transition-duration(.1s) +transition-timing-function(ease-out) + +border-radius(11px) top: 0 &.on +box-shadow(1px 2px 2px rgba(#111, 0.1)) @@ -69,7 +70,7 @@ +transition-property(margin) +transition-duration(.5s) +transition-timing-function(ease-out) - color: lighten($defaut-font-color, 10%) + color: $defaut-font-color cursor: pointer &:hover color: #000 @@ -77,23 +78,23 @@ .show-more display: inline-block float: right - font-size: 12px + font-size: .8rem color: lighten($dark-grey,30%) - @extend .extend-icon - @extend .icon-chat + &:hover color: lighten($dark-grey,5%) .post-expand color: lighten($dark-grey,30%) + background: $bloc-light-color cursor: pointer - font-size: 12px + font-size: .8rem position: absolute left: 10px bottom: 10px &:hover color: lighten($dark-grey,5%) .post-data - padding: 10px + padding: 12px 15px background: $bloc-light-color @@ -116,11 +117,6 @@ .post-expand display: none margin: 0 - - - - - .post-photo margin: 0 @@ -145,18 +141,18 @@ color: black .post-info-tag - font-size: 12px + font-size: .8rem opacity: .6 margin-top: 4px display: inline-block .post-info-time position: absolute - font-size: 11px - line-height: 14px + font-size: .8rem + line-height: .8rem text-decoration: none - top: 11px - right: 11px + top: 12px + right: 15px color: lighten($dark-grey,30%) &:hover color: lighten($dark-grey,5%) @@ -171,23 +167,21 @@ .post-context - font-size: 11px - line-height: 11px - margin: 0 0 1em 0 + font-size: .8rem + line-height: .8rem + margin: 0 0 .8rem 0 color: lighten($dark-grey,30%) span - @extend .icon-twistagain - @extend .extend-icon + @extend .ion-shuffle + @extend .ion &:before display: block float: left - background: $main-color-color - text-align: center - padding: 1px 2px 2px 2px - line-height: 9px - font-size: 9px - +border-radius(3px) - color: white + color: $main-color-color + + line-height: .8rem + font-size: .8rem + margin-right: .4em @@ -197,32 +191,37 @@ .post-interactions margin: 10px 0 3px 0 text-align: right - height: 12px - line-height: 12px + height: .8rem + line-height: .8rem span color: lighten($dark-grey,30%) cursor: pointer - font-size: 12px - line-height: 12px - @extend .extend-icon + font-size: .8rem + line-height: .8rem + @extend .ion position: relative margin-left: 7px display: none + .open .original & + display: inline-block!important + &:hover color: lighten($dark-grey,5%) - + &:before + padding: 3px &.post-reply - @extend .icon-comment + @extend .ion-plus &.post-propagate - @extend .icon-twistagain + @extend .ion-shuffle &.post-favorite display: none!important //maybe one day - @extend .icon-star + @extend .ion-alert .post:hover & .post-reply, .post-propagate //, .post-favorite maybe one day display: inline-block + .open .related .post-reply, .post-propagate, @@ -252,6 +251,7 @@ text-align: center overflow-y: auto background: black + clear: both .post-stats float: left @@ -261,8 +261,8 @@ font-size: 12px float: left line-height: 20px - @extend .extend-icon - @extend .icon-twistagain + @extend .ion-shuffle + @extend .ion &:before margin-right: 0 span:last-child diff --git a/sass/layout/_profile.sass b/sass/layout/_profile.sass index 682040a..9feb052 100644 --- a/sass/layout/_profile.sass +++ b/sass/layout/_profile.sass @@ -64,7 +64,6 @@ $modal-postboard-post-height: 100% position: relative text-align: left word-wrap: break-word - transition: all .2s linear background: none!important padding: 10px h1, h2 @@ -74,7 +73,6 @@ $modal-postboard-post-height: 100% &:before content: "" border: solid 0px #fff - transition: all .2s linear position: absolute left: 1px top: 1px @@ -95,9 +93,10 @@ $modal-postboard-post-height: 100% float: none .profile-bio - font-style: italic + @extend i text-align: left - font-size: 1rem + font-size: .9rem + margin-left: $usr-img + 10 .profile-card-buttons text-align: center @@ -171,46 +170,58 @@ $modal-postboard-post-height: 100% /* EDITION PROFILE*/ .forEdition.profile-card - +box-sizing(border-box) @extend .clear-fix - width: auto + margin: 0 + width: $postboardWidth + background: none + padding: 0 .profile-card-main - margin: 0 - width: 330px - +box-sizing(border-box) - padding: 10px + padding: 10px 0 input display: block - margin: 5px auto - background: white - border: 1px solid lighten($dark-grey, 50%) + margin: 0 0 10px 100px + width: 600px + + background: $bloc-background-color + border: 1px solid $bloc-light-color padding: 6px 4px margin-bottom: 4px - text-align: center - transition: all .2s linear + font-size: 1rem + font-weight: 400 &:hover, &:focus background: white border-color: $main-color-light -.input-description - width: 90% - -.input-name - font-size: 20px - -.forEdition .profile-card-main - .input-website, .input-city - display: inline-block - .input-tox, .input-bitmessage - width: 90% - margin-top: 10px - h2 - text-transform: none - font-weight: 700 - font-size: .9em - -.profile-edition-buttons - text-align: right - -.selectable_theme.theme_calm - display: none + img + width: 70px + float: left + h2 + font-weight: 400 + padding: 1rem 2rem + color: white + + + button + float: right + margin: 10px + &.last-child + margin-right: 0 + &.submit-changes + @extend button.color-1 + &.toggle-priv-key + @extend button.color-2 + .secret-key-container + text-align: left !important + font-size: 1rem!important + .secret-key + clear: both + margin: 20px 0 + background: white + text-align: left !important + font-size: 1rem!important + padding: 10px + .label + clear: both + display: block + font-weight: 500 + margin: 20px 0 diff --git a/sass/layout/_wrapper.sass b/sass/layout/_wrapper.sass index cd73375..82562ef 100644 --- a/sass/layout/_wrapper.sass +++ b/sass/layout/_wrapper.sass @@ -33,16 +33,21 @@ margin-bottom: 20px background: $bloc-light-color width: 100% - + min-height: $mini-usr-img +box-shadow(1px 2px 2px rgba(#111, 0.1)) + +border-radius(3px) @extend .clear-fix + overflow: hidden h3 float: left padding: 10px h4 clear: left - border-top: 1px solid $main-background-color - padding: 7px 10px + padding: 10px 10px 5px 10px font-size: 90% small - display: none \ No newline at end of file + display: none + ol + @extend .clear-fix + clear: both + position: relative \ No newline at end of file diff --git a/sass/pages/_following.sass b/sass/pages/_following.sass index 3adfdba..84f105d 100644 --- a/sass/pages/_following.sass +++ b/sass/pages/_following.sass @@ -1,8 +1,7 @@ .following - width: 55% - margin-left: 15% - padding: 7px 20px + width: $postboardWidth + float: left h2 display: none .following-list li diff --git a/sass/style.sass b/sass/style.sass index 149628b..7facae0 100755 --- a/sass/style.sass +++ b/sass/style.sass @@ -1,3 +1,4 @@ +@charset "UTF-8" @import compass @import 'compass/reset' @import 'compass/utilities' @@ -33,23 +34,26 @@ cursor: pointer display: block margin: 0 - padding: 5px - border-bottom: 1px solid $main-background-color + width: 50% + padding: .5rem + float: left text-align: center - font-size: .9em transition: color .1s linear + position: relative + border-left: 1px solid $main-background-color + span + font-size: .8rem + line-height: .8rem + display: block &.disabled background: $bloc-background-color - &.active, &.active span + color: rgba($defaut-font-color, .3) + z-index: 3 + &.active color: $defaut-font-color cursor: default - &:hover span, &.disabled:hover span - color: $defaut-font-color - &.disabled span - color: rgba($defaut-font-color, .3) - - - + + z-index: 5 @@ -99,7 +103,7 @@ ul.userMenu-search-profiles width: 100% font-size: 12px font-weight: 400 - line-height: $mini-usr-img + line-height: $mini-usr-img / 1.5 display: block margin: 0 padding: 0 @@ -114,30 +118,31 @@ ul.userMenu-search-profiles .mini-screen-name font-weight: 500 .mini-profile-photo - width: $mini-usr-img + width: $mini-usr-img / 1.5 height: auto - min-height: $mini-usr-img + height: $mini-usr-img / 1.5 + overflow: hidden margin: 5px float: left overflow-x: hidden .mini-profile-info width: 100% float: none + .mini-profile-name + padding: 5px 0 0 0 button - font-size: 1.4rem - line-height: $mini-usr-img - 15 - height: $mini-usr-img - 10 - width: $mini-usr-img + font-size: 13px + line-height: $mini-usr-img / 2 + height: $mini-usr-img / 1.5 + width: $mini-usr-img / 1.5 text-align: center - font-weight: 500 + font-weight: 700 padding: 0 - +border-radius(2px) - @extend .extend-icon - + @extend .ion position: absolute - top: 10px - right: 10px + top: 5px + right: 5px @@ -199,7 +204,7 @@ ul.userMenu-search-profiles border-bottom: 1px solid $main-background-color a - color: lighten($dark-grey,20%) + color: lighten($dark-grey,10%) display: block padding: 1rem 0 &:hover @@ -211,14 +216,14 @@ ul.userMenu-search-profiles font-size: 1.4rem!important .userMenu-connections a - @extend .icon-bell - @extend .extend-icon + @extend .ion-mention + @extend .ion .userMenu-messages a - @extend .icon-mail - @extend .extend-icon + @extend .ion-chatbox + @extend .ion .userMenu-user a - @extend .icon-user - @extend .extend-icon + @extend .ion-profile + @extend .ion .messages-qtd position: absolute @@ -237,7 +242,7 @@ ul.userMenu-search-profiles .mini-profile-view display: none .left .mini-profile-info - padding-top: 32px + padding-top: 20px .mini-profile-name color: $dark-grey @@ -299,30 +304,28 @@ ul.userMenu-search-profiles display: block position: absolute bottom: 10px - text-align: center padding: 10px + width: 100% + background: $bloc-light-color font-size: 12px z-index: 10 +transition(all .2s linear) + +box-shadow(-8px 0 13px rgba(#111, 0.2)) + .show-more-followers - font-weight: 700 - display: block - cursor: pointer + @extend button + @extend .small float: right - color: $dark-grey + margin-right: 5px .mini-follower-link, .followed-by display: inline-block - margin: 1px + margin: 1px 5px line-height: 12px &.isFollowing:after display: none - &:after - content: '' - font-weight: 900 - color: $main-color-dark - margin-left: 1px + @@ -416,23 +419,13 @@ textarea.splited-post &:hover button display: block - small - display: none - h3 - float: left - padding: 20px - ol - @extend .clear-fix - clear: both - - img.twister-user-photo float: left display: block float: left - width: $mini-usr-img + width: $micro-usr-img height: auto margin: 0 10px 0 0 @@ -467,16 +460,16 @@ img.twister-user-photo .twister-user-remove font-size: 13px - opacity: .2 + opacity: .5 text-decoration: none cursor: pointer position: absolute padding: 5px - top: -5px - right: -5px - display: inline-block - @extend .icon-cancel - @extend .extend-icon + top: 0 + right: 0 + display: block + @extend .ion-close + @extend .ion .twister-user:hover .twister-user-remove text-decoration: none @@ -485,8 +478,8 @@ img.twister-user-photo opacity: 1 .refresh-toptrends, .twistday-reminder .refresh, .refresh-users - @extend .icon-arrows - @extend .extend-icon + @extend .ion-alert + @extend .ion color: $main-color-dark cursor: pointer font-size: 11px @@ -542,26 +535,14 @@ img.twister-user-photo /********* TWISTDAY REMINDER *******/ .twistday-reminder - - - small - display: none - .twister-user - - background: $bloc-light-color - position: relative - +transition-property(background) - +transition-duration(.1s) - &:hover - background: white + .twister-user-full, .twister-user-tag - font-size: 1rem + font-size: .9rem line-height: 1rem color: $defaut-font-color font-weight: 500 opacity: 1 - letter-spacing: 0 display: inline-block .twisterday font-size: 12px