diff --git a/css/style.css b/css/style.css
index 4d8b7e2..e94511a 100644
--- a/css/style.css
+++ b/css/style.css
@@ -107,7 +107,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
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, .post-context span:before, .post-reply:before, .post-propagate:before, .post-favorite:before, .post .show-more: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 {
+[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;
@@ -138,7 +138,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
}
/* '' */
-.icon-star:before, .post-favorite:before {
+.icon-star:before, .post-interactions span.post-favorite:before {
content: "";
}
@@ -192,12 +192,12 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
}
/* '' */
-.icon-comment:before, .post-reply:before {
+.icon-comment:before, .post-interactions span.post-reply:before {
content: "";
}
/* '' */
-.icon-chat:before, .post .show-more:before {
+.icon-chat:before, .postboard-posts .post .show-more:before {
content: "";
}
@@ -232,7 +232,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
}
/* '' */
-.icon-twistagain:before, .post-context span:before, .post-propagate:before {
+.icon-twistagain:before, .post-context span:before, .post-interactions span.post-propagate:before, .post-stats li.stat-count:before {
content: "";
}
@@ -243,14 +243,12 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
/* '' */
/* FONTS */
-/* usefull vars */
* {
outline: none !important;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
list-style: none;
- color: #444;
}
html, body {
@@ -263,7 +261,12 @@ html, body {
html {
font-size: 14px;
- background-color: #EBEBEB;
+ 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;
}
@@ -281,7 +284,7 @@ a {
}
a:hover, a:active {
color: #A1B775;
- text-decoration: none;
+ text-decoration: underline;
}
a i {
text-decoration: underline;
@@ -297,13 +300,11 @@ strong, b {
}
img {
- background: #FDFCFA;
+ background: #F3F2F0;
}
h1 {
font-size: 1.1em;
- text-transform: uppercase;
- letter-spacing: 0.07em;
font-weight: 700;
line-height: 1.1em;
}
@@ -364,13 +365,13 @@ h3 .isFollowing:after {
display: none;
}
-.box-shadow, .modal-wrapper, .postboard .post, .dashboard > .module, .mini-profile, ul.dropdown-menu {
+.box-shadow, .modal-wrapper, ul.dropdown-menu {
-moz-box-shadow: 0 8px 13px rgba(17, 17, 17, 0);
-webkit-box-shadow: 0 8px 13px rgba(17, 17, 17, 0);
box-shadow: 0 8px 13px rgba(17, 17, 17, 0);
}
-.clear-fix:after, .userMenu > ul:after, .modal-content:after, .modal-header:after, .direct-messages-thread .post:after, .mini-following-info a:after, .forEdition.profile-card:after, .expanded-content:after, .following .following-list li a:after, .network.singleBlock:after, .options .tab-content:after, .dashboard > .module:after, ul.userMenu-search-profiles li:after, .mini-profile .post-area:after, .mini-profile-indicators:after, .profile-data:after, #postboard-top:after, #postboard-top .post-area:after, .who-to-follow ol:after, .twister-user:after {
+.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 {
content: "";
display: table;
clear: both;
@@ -406,7 +407,7 @@ button:hover, a.button:hover {
button.disabled, a.button.disabled {
opacity: 0.5;
color: #999;
- background-color: #EBEBEB;
+ background-color: #F3F2F0;
}
button.disabled:hover, a.button.disabled:hover {
color: #666;
@@ -414,14 +415,14 @@ button.disabled:hover, a.button.disabled:hover {
-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-content button.postboard-news, button.follow, a.button.color-1, .modal-content a.button.postboard-news, a.button.follow {
- background: #5E80A2;
- border-color: #547392;
+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 {
+ background: #A1B775;
+ border-color: #96ae64;
color: white;
font-weight: 500;
}
-button.color-1:hover, .modal-content button.postboard-news:hover, button.follow:hover, a.button.color-1:hover, .modal-content a.button.postboard-news:hover, a.button.follow:hover {
- border-color: #425a72;
+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 {
+ border-color: #687b40;
}
button.color-2, button.unfollow, a.button.color-2, a.button.unfollow {
background: #64676C;
@@ -451,18 +452,19 @@ button.light:hover, a.button.light:hover {
.userMenu {
width: 100%;
position: fixed;
- height: 50px;
+ height: 42px;
left: 0;
margin: 0;
- background-color: #64676C;
+ background-color: #67686C;
z-index: 2;
}
.userMenu > ul {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
- width: 100%;
- padding: 0 30% 0 15%;
+ max-width: 100%;
+ width: 1200px;
+ margin: auto;
background: url('../img/logo.png?1437893891') no-repeat 50% 50%;
background-size: 20px;
}
@@ -473,24 +475,22 @@ button.light:hover, a.button.light:hover {
display: block;
}
.userMenu > ul li > a {
- line-height: 50px;
+ line-height: 42px;
padding: 0 0.5em;
display: inline-block;
color: rgba(255, 255, 255, 0.7) !important;
- font-size: 1em;
+ font-size: 1.1em;
position: relative;
- font-weight: 500;
+ font-weight: 400;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.userMenu > ul li > a:hover {
color: white !important;
+ text-decoration: none;
}
-.userMenu > ul li > a span {
- color: rgba(255, 255, 255, 0.7) !important;
-}
-.userMenu > ul li.current a, .userMenu > ul li.current a span {
+.userMenu > ul li.current a {
color: white !important;
}
@@ -503,23 +503,23 @@ button.light:hover, a.button.light:hover {
position: absolute;
text-align: center;
display: none;
- top: 6px;
- right: -6px;
+ top: 4px;
+ right: -7px;
background: #A1B775;
- color: #fff;
width: 15px;
height: 15px;
line-height: 15px;
font-size: 10px;
- padding: 3px;
+ padding: 1px;
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;
- text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
+ color: white;
}
.userMenu li.userMenu-home .menu-news.show {
display: block;
@@ -536,14 +536,12 @@ button.light:hover, a.button.light:hover {
.userMenu li.userMenu-config + a, .userMenu li.userMenu-search + a {
color: #222;
}
-.userMenu li.userMenu-search {
- margin: 3px;
-}
.userMenu li.userMenu-search > input {
- border: 1px solid #aaa;
- line-height: 12px;
+ border: 1px solid #dedede;
+ line-height: 21px;
font-size: 12px;
- padding: 7px;
+ padding: 0 7px;
+ background: white;
}
.userMenu li.userMenu-search > input:focus {
border-color: #222;
@@ -552,11 +550,67 @@ button.light:hover, a.button.light:hover {
font-size: 1.5rem;
}
+/* Wrapper and blocks */
+.wrapper {
+ width: 1200px;
+ max-width: 100%;
+ margin: auto;
+ padding-top: 52px;
+ position: relative;
+ z-index: 1;
+}
+
+.dashboard.left {
+ top: 42px;
+ float: left;
+ width: 140px;
+ min-height: 700px;
+}
+.dashboard.left > .module {
+ width: 120px;
+ position: fixed;
+ top: 52px;
+}
+.dashboard.right {
+ float: left;
+ top: 42px;
+ overflow: hidden;
+ width: 360px;
+ padding-left: 20px;
+ padding-right: 3px;
+}
+.dashboard > .module {
+ width: 100%;
+ margin-bottom: 20px;
+ background: #FDFCFA;
+ width: 100%;
+ -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);
+}
+.dashboard > .module h3 {
+ float: left;
+ padding: 10px;
+}
+.dashboard > .module h4 {
+ clear: left;
+ border-top: 1px solid #E2E1DD;
+ padding: 7px 10px;
+ font-size: 90%;
+}
+.dashboard > .module small {
+ display: none;
+}
+
/*********** POPUP MODAL ************* */
+.modal-blackout {
+ display: none;
+}
+
.modal-wrapper {
- background: #EBEBEB;
- z-index: 3000;
- width: 30%;
+ background: #F3F2F0;
+ z-index: 4;
+ width: 34%;
position: fixed;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
@@ -565,63 +619,130 @@ button.light:hover, a.button.light:hover {
right: 0;
bottom: 0;
overflow: hidden;
- -moz-box-shadow: 0 8px 13px rgba(17, 17, 17, 0.2);
- -webkit-box-shadow: 0 8px 13px rgba(17, 17, 17, 0.2);
- box-shadow: 0 8px 13px rgba(17, 17, 17, 0.2);
+ -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);
}
-.modal-wrapper .postboard {
- border: none;
- padding: 0;
+.modal-wrapper.new-user .modal-content {
+ padding: 25px;
+}
+.modal-wrapper.new-user .modal-close {
+ display: none;
+}
+.modal-wrapper.new-user .text {
+ margin: 0 0 15px 0;
+}
+.modal-wrapper.new-user .emphasis {
+ text-align: center;
+}
+.modal-wrapper.new-user .secret-key {
+ display: block;
+ margin-top: 8px;
+ color: black;
+ font-weight: bold;
+ font-size: 110%;
+}
+.modal-wrapper.following-modal h2 {
+ display: none;
}
-.modal-wrapper .post-area-new {
+.modal-wrapper.following-modal .mini-following-info {
+ border-bottom: 1px solid #E2E1DD;
+ line-height: 42px;
+}
+.modal-wrapper.following-modal a {
+ display: block;
padding: 10px;
+ width: 100%;
+ color: #444;
+ background: #FDFCFA;
}
-
-.modal-blackout {
- background: transparent;
- z-index: -1;
- position: fixed;
- left: 0;
- top: 0;
- width: 0;
- height: 0;
+.modal-wrapper.following-modal a:hover {
+ background: white;
+ text-decoration: none;
+ font-weight: 500;
}
-
-.modal-content {
+.modal-wrapper.following-modal .mini-profile-photo {
+ width: 42px;
+ min-height: 42px;
+ overflow-x: hidden;
+ line-height: 0;
+ margin: 0 1rem 0 0;
+ float: left;
+}
+.modal-wrapper.following-modal .mini-following-name:after {
+ line-height: 20px;
+}
+.modal-wrapper.following-modal .mini-screen-name {
+ display: none;
+}
+.modal-wrapper.who-to-follow-modal a {
+ color: #222;
+}
+.modal-wrapper.who-to-follow-modal a.twister-user-name:hover {
+ text-decoration: none;
+}
+.modal-wrapper.who-to-follow-modal .twister-user-info {
+ text-align: left;
+ font-size: 0.8rem;
+ line-height: 1rem;
+ width: 80%;
+ padding-left: 62px;
+}
+.modal-wrapper.who-to-follow-modal button {
+ position: absolute;
+ right: 10px;
+ top: 10px;
+}
+.modal-wrapper.who-to-follow-modal .bio {
+ color: rgba(0, 0, 0, 0.6);
+ font-style: italic;
+ padding: 0.25rem 0;
+}
+.modal-wrapper .modal-content {
+ width: 100%;
overflow: hidden;
overflow-y: auto;
- background: #EBEBEB;
}
-.modal-content .postboard-news {
+.modal-wrapper .modal-content .postboard {
+ padding: 0;
+ clear: none !important;
+ position: relative;
+ width: 100%;
+ margin: auto;
+}
+.modal-wrapper .modal-content .postboard h2 {
+ display: block;
+}
+.modal-wrapper .modal-content .postboard h2 span {
+ display: none;
+}
+.modal-wrapper .modal-content .postboard-news {
position: fixed;
display: block;
right: 2px;
- top: 52px;
+ top: 44px;
z-index: 2000;
}
-.modal-content h2 span {
- display: none;
-}
-.modal-header {
+.modal-header, .prompt-wrapper .modal-header {
position: relative;
- background: #47494c;
- height: 50px;
+ background: #212121;
+ height: 42px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
-.modal-header h3 {
+.modal-header h3, .prompt-wrapper .modal-header h3 {
padding-left: 20px;
- line-height: 50px;
+ line-height: 42px;
font-weight: 500;
font-size: 1rem;
color: white;
}
-.modal-header span {
+.modal-header span, .prompt-wrapper .modal-header span {
position: absolute;
top: 0;
- line-height: 50px;
+ line-height: 42px;
font-size: 1rem;
cursor: pointer;
color: rgba(255, 255, 255, 0.7);
@@ -630,7 +751,7 @@ button.light:hover, a.button.light:hover {
.modal-header span:hover {
color: white;
}
-.modal-header span b {
+.modal-header span b, .prompt-wrapper .modal-header span b {
display: none;
}
.modal-header span.modal-close {
@@ -644,22 +765,19 @@ button.light:hover, a.button.light:hover {
right: 35px;
}
-/* MODAL */
-.modal-content {
- width: 100%;
-}
-.modal-content .postboard {
- padding: 0;
- clear: none !important;
+/* Composants */
+.twister-user {
position: relative;
+ box-sizing: border-box;
+ background: #FDFCFA;
+ border-top: 1px solid #E2E1DD;
width: 100%;
- margin: auto;
- background: #EBEBEB;
-}
-.modal-content .postboard h2 {
- display: block;
+ min-height: auto;
+ padding: 7px;
+ clear: left;
}
+/*********** POPUP PROMPT ************ */
/*********** POPUP PROMPT ************ */
.prompt-wrapper {
background: #FDFCFA;
@@ -673,14 +791,25 @@ button.light:hover, a.button.light:hover {
-webkit-box-shadow: 0 8px 33px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 33px rgba(0, 0, 0, 0.3);
}
-.prompt-wrapper .modal-buttons {
- padding: 10px;
- text-align: right;
+.prompt-wrapper .modal-buttons, .prompt-wrapper .following-config-method-buttons {
+ padding: 0 20px 20px 0;
+ float: right;
}
.prompt-wrapper .modal-content {
- background: #FDFCFA;
- padding: 10px 10px 30px 10px;
- text-align: center;
+ padding: 20px;
+}
+.prompt-wrapper .post-data {
+ border: 1px solid #F3F2F0;
+ position: relative;
+ padding: 10px;
+ background: white;
+}
+.prompt-wrapper .modal-header h3 span {
+ padding-left: 5px;
+ color: white;
+}
+.prompt-wrapper .modal-header h3 span:hover {
+ cursor: default;
}
/************ FOLLOWING-CONFIG MODAL ********* */
@@ -708,9 +837,6 @@ button.light:hover, a.button.light:hover {
.prompt-wrapper.reTwist.prompt-wrapper {
margin-top: -110px;
}
-.prompt-wrapper.reTwist .modal-content {
- padding: 20px 15px;
-}
.prompt-wrapper.reTwist .post-expand, .prompt-wrapper.reTwist .post-interactions {
display: none;
}
@@ -718,10 +844,6 @@ button.light:hover, a.button.light:hover {
position: static;
float: right;
}
-.prompt-wrapper.reTwist .post-text {
- margin-top: 10px;
- margin-bottom: 10px;
-}
/********* REPLY POSTS MODAL************** */
.prompt-wrapper.reply.prompt-wrapper {
@@ -765,13 +887,12 @@ button.light:hover, a.button.light:hover {
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
- background: #f0f0f0;
}
.modal-wrapper.directMessages .post-photo {
- width: 40px;
+ width: 42px;
}
.modal-wrapper.directMessages .post-text {
- margin-left: 50px;
+ margin-left: 52px;
font-size: 0.9rem;
}
.modal-wrapper.directMessages .post-info-name {
@@ -815,7 +936,7 @@ button.light:hover, a.button.light:hover {
}
.direct-messages-list li {
position: relative;
- border-bottom: 1px solid #EBEBEB;
+ border-bottom: 1px solid #E2E1DD;
background: #FDFCFA;
}
@@ -873,7 +994,7 @@ button.light:hover, a.button.light:hover {
float: left;
word-wrap: break-word;
max-width: 70%;
- min-height: 40px;
+ min-height: 42px;
}
.direct-messages-thread .post .post-photo {
position: absolute;
@@ -897,100 +1018,6 @@ button.light:hover, a.button.light:hover {
left: auto;
}
-/********* NEW USER MODAL************* */
-.modal-wrapper.new-user .modal-content {
- padding: 25px;
-}
-.modal-wrapper.new-user .modal-close {
- display: none;
-}
-.modal-wrapper.new-user .text {
- margin: 0 0 15px 0;
-}
-.modal-wrapper.new-user .emphasis {
- text-align: center;
-}
-.modal-wrapper.new-user .secret-key {
- display: block;
- margin-top: 8px;
- color: black;
- font-weight: bold;
- font-size: 110%;
-}
-
-/******** HASHTAG MODAL********** */
-.modal-wrapper.hashtag-modal .postboard {
- padding: 0;
-}
-
-/****** CONVERSATION MODAL********** */
-.modal-wrapper.conversation-modal .postboard {
- padding: 0;
-}
-
-/****** FOLLOWING MODAL****** */
-.modal-wrapper.following-modal h2 {
- display: none;
-}
-
-.mini-following-info {
- border-bottom: 1px solid #EBEBEB;
- line-height: 40px;
-}
-.mini-following-info a {
- display: block;
- padding: 10px;
- width: 100%;
- color: #444;
- background: #FDFCFA;
-}
-.mini-following-info a:hover {
- background: white;
-}
-.mini-following-info .mini-profile-photo {
- width: 40px;
- line-height: 0;
- margin: 0 1rem 0 0;
- float: left;
-}
-.mini-following-info .mini-screen-name {
- display: none;
-}
-
-/******* WHO TO FOLLOW MODAL****** */
-.modal-wrapper.who-to-follow-modal .open-profile-modal:hover {
- text-decoration: none;
-}
-.modal-wrapper.who-to-follow-modal a.twister-user-name {
- color: #444;
-}
-.modal-wrapper.who-to-follow-modal a.twister-user-name span {
- padding-bottom: 0.5rem;
- font-size: 1rem;
- line-height: 1rem;
- color: #444;
- font-weight: 500;
- opacity: 1;
- letter-spacing: 0;
-}
-.modal-wrapper.who-to-follow-modal .twister-user-info {
- text-align: left;
- font-size: 0.8rem;
- line-height: 1rem;
- width: 80%;
- padding-left: 60px;
-}
-.modal-wrapper.who-to-follow-modal button {
- position: absolute;
- right: 10px;
- top: 10px;
-}
-.modal-wrapper.who-to-follow-modal .bio {
- color: rgba(0, 0, 0, 0.6);
- font-style: italic;
- padding-bottom: 0.5rem;
-}
-
/*************************************
******************* PROFILE MODAL
************************************** */
@@ -1012,17 +1039,10 @@ button.light:hover, a.button.light:hover {
height: 100%;
overflow: auto;
}
-.profile-modal .modal-content .postboard-posts .post {
- padding: 0;
- margin-bottom: 1px;
-}
-.profile-modal .modal-content .post-interactions {
- margin: 2px 10px 3px 60px;
-}
.profile-modal .modal-content .profile-card {
margin: 0;
padding: 0;
- border-bottom: 1px solid #EBEBEB;
+ border-bottom: 1px solid #E2E1DD;
}
.profile-modal .modal-content .profile-data {
background: none;
@@ -1101,8 +1121,7 @@ button.light:hover, a.button.light:hover {
}
.isFollowing:after {
- font-size: 15px;
- position: absolute;
+ font-size: 10px;
}
.known-followers {
@@ -1224,25 +1243,86 @@ button.light:hover, a.button.light:hover {
display: none;
}
-/************* POST BOARD ************ */
+/************* TOP TEXTAREA ************ */
+#postboard-top {
+ position: relative;
+ margin-bottom: 10px;
+ transition: height 0.3s linear;
+ padding: 10px;
+ background: white;
+ overflow: hidden;
+ background: #FDFCFA;
+ -moz-transition-property: top;
+ -o-transition-property: top;
+ -webkit-transition-property: top;
+ transition-property: top;
+ -moz-transition-duration: 0.1s;
+ -o-transition-duration: 0.1s;
+ -webkit-transition-duration: 0.1s;
+ transition-duration: 0.1s;
+ -moz-transition-timing-function: ease-out;
+ -o-transition-timing-function: ease-out;
+ -webkit-transition-timing-function: ease-out;
+ transition-timing-function: ease-out;
+ top: 0;
+ z-index: 120;
+}
+#postboard-top.on, #postboard-top, #postboard-top.fixed {
+ -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);
+}
+#postboard-top.fixed {
+ position: fixed;
+ width: 360px;
+ top: 42px;
+}
+#postboard-top .profile-photo {
+ position: absolute;
+ top: 10px;
+ left: 10px;
+ width: 42px;
+}
+#postboard-top .profile-photo img {
+ width: 100%;
+}
+#postboard-top .post-area {
+ overflow: hidden;
+ width: 100%;
+ padding-left: 58px;
+ padding-right: 0;
+ display: inline;
+ -moz-box-sizing: border-box;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box;
+ background: none;
+ float: right;
+}
+#postboard-top .post-area .post-area-new {
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+#postboard-top .post-area .post-area-new textarea {
+ margin: 0 0 10px 0;
+}
+
+/************* POSTBOARD ************ */
.postboard {
- width: 55%;
- margin-left: 15%;
- padding: 7px 20px;
+ width: 700px;
+ float: left;
}
-.postboard h2 {
+.postboard h2, .postboard .postboard-news {
display: none;
}
-.postboard .postboard-posts {
+
+.postboard-posts {
position: relative;
z-index: 1;
clear: both;
+ /*********** EVERYTHING SPECIFIC TO OPEN POSTS ************* */
}
-.postboard .postboard-news {
- display: none;
-}
-.postboard .post {
- background: #FDFCFA;
+.postboard-posts .post {
position: relative;
margin-bottom: 1px;
-moz-transition-property: margin;
@@ -1257,58 +1337,58 @@ 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;
+ cursor: pointer;
+}
+.postboard-posts .post:hover {
+ color: #000;
}
-.postboard .post .post, .postboard .post .original.post, .postboard .post .post.open, .postboard .post .mini-profile .post.post-area-new, .mini-profile .postboard .post .post.post-area-new, .postboard .post #postboard-top .post-area .post.post-area-new, #postboard-top .post-area .postboard .post .post.post-area-new {
- position: relative;
+.postboard-posts .post .show-more {
+ display: inline-block;
+ float: right;
+ font-size: 12px;
+ color: #919191;
}
-
-.module.open .post, .mini-profile .module.post-area-new .post, #postboard-top .post-area .module.post-area-new .post {
- color: #1e1e1e;
+.postboard-posts .post .show-more:hover {
+ color: #515151;
}
-
-.post:hover {
- color: #1e1e1e;
+.postboard-posts .post .post-expand {
+ color: #919191;
+ cursor: pointer;
+ font-size: 12px;
+ position: absolute;
+ left: 10px;
+ bottom: 10px;
}
-
-.post-data {
- padding: 1rem;
+.postboard-posts .post .post-expand:hover {
+ color: #515151;
}
-
-.post.open .original, .mini-profile .post.post-area-new .original, #postboard-top .post-area .post.post-area-new .original, .post.open .related, .mini-profile .post.post-area-new .related, #postboard-top .post-area .post.post-area-new .related {
- margin-bottom: 1px;
+.postboard-posts .post .post-data {
+ padding: 10px;
+ background: #FDFCFA;
}
-
.postboard-posts > .post {
- -moz-border-radius: 2px;
- -webkit-border-radius: 2px;
- border-radius: 2px;
+ -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);
}
-.postboard-posts > .post.open, .mini-profile .postboard-posts > .post.post-area-new, #postboard-top .post-area .postboard-posts > .post.post-area-new {
+.postboard-posts > .post.open, #postboard-top .post-area .postboard-posts > .post.post-area-new, .mini-profile .postboard-posts > .post.post-area-new {
margin-top: 1rem;
margin-bottom: 1rem;
- -moz-border-radius: 2px;
- -webkit-border-radius: 2px;
- border-radius: 2px;
-}
-.postboard-posts > .post:after {
- content: "";
- position: absolute;
- right: 0;
- top: 0;
- width: 0;
- height: 100%;
- transition: all 0.2s linear;
+ -moz-box-shadow: 1px 2px 2px rgba(17, 17, 17, 0);
+ -webkit-box-shadow: 1px 2px 2px rgba(17, 17, 17, 0);
+ box-shadow: 1px 2px 2px rgba(17, 17, 17, 0);
}
-.postboard-posts > .post.open:after, .mini-profile .postboard-posts > .post.post-area-new:after, #postboard-top .post-area .postboard-posts > .post.post-area-new:after {
- width: 5px;
-}
-
-.post:hover {
- cursor: pointer;
+.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;
+ -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);
+ margin-bottom: 1px;
}
-
-.open, .mini-profile .post-area-new, #postboard-top .post-area .post-area-new {
- background: none !important;
+.postboard-posts > .post.open .post:not(.original) .post-expand, #postboard-top .post-area .postboard-posts > .post.post-area-new .post:not(.original) .post-expand, .mini-profile .postboard-posts > .post.post-area-new .post:not(.original) .post-expand {
+ display: none;
+ margin: 0;
}
.post-photo {
@@ -1317,7 +1397,7 @@ button.light:hover, a.button.light:hover {
float: left;
vertical-align: middle;
overflow: hidden;
- width: 40px;
+ width: 42px;
}
.post-photo img {
width: 100%;
@@ -1332,7 +1412,6 @@ button.light:hover, a.button.light:hover {
float: left;
margin-left: 10px;
}
-
.post-info-name:hover {
text-decoration: none;
color: black;
@@ -1359,9 +1438,9 @@ button.light:hover, a.button.light:hover {
}
.post-text {
- margin: 0 0 0 50px;
+ margin: 0 0 0 52px;
word-wrap: break-word;
- min-height: 20px;
+ min-height: 22px;
padding: 0;
}
.post-text a:hover {
@@ -1374,7 +1453,7 @@ button.light:hover, a.button.light:hover {
margin: 0 0 1em 0;
color: #919191;
}
-.post-context:before {
+.post-context span:before {
display: block;
float: left;
background: #A1B775;
@@ -1389,15 +1468,6 @@ button.light:hover, a.button.light:hover {
margin-right: 0.4em;
}
-.mini-screen-name {
- font-size: 13px;
- color: #444;
-}
-
-.post-retransmited-icon {
- display: none;
-}
-
.post-interactions {
margin: 10px 0 3px 0;
text-align: right;
@@ -1409,72 +1479,41 @@ button.light:hover, a.button.light:hover {
cursor: pointer;
font-size: 12px;
line-height: 12px;
-}
-
-.post-expand {
- color: #919191;
- cursor: pointer;
- font-size: 12px;
- position: absolute;
- left: 10px;
- bottom: 10px;
-}
-.post-expand:hover {
- color: #515151;
-}
-
-.post-reply, .post-propagate, .post-favorite {
- padding-left: 10px;
+ position: relative;
+ margin-left: 7px;
display: none;
}
-.post-reply:hover, .post-propagate:hover, .post-favorite:hover {
+.post-interactions span:hover {
color: #515151;
}
-
-.post-favorite {
+.post-interactions span.post-favorite {
display: none !important;
}
-
-.post .show-more {
- display: inline-block;
- float: right;
- font-size: 12px;
- color: #919191;
-}
-.post .show-more:hover {
- color: #515151;
-}
-
-.expanded-content.show-pic {
- display: block;
-}
-
-.expanded-post .post-expand, .expanded-post .post-reply, .expanded-post .post-propagate, .expanded-post .post-favorite {
- color: #919191;
-}
-.expanded-post .post-expand:hover, .expanded-post .post-reply:hover, .expanded-post .post-propagate:hover, .expanded-post .post-favorite:hover {
- color: #515151;
-}
-
-.related .post-expand {
- display: none;
- margin: 0;
-}
-
-.post:hover .post-reply, .post:hover .post-propagate, .post:hover .post-favorite, .original.open .post-interactions .post-reply, .mini-profile .original.post-area-new .post-interactions .post-reply, #postboard-top .post-area .original.post-area-new .post-interactions .post-reply, .original.open .post-interactions .post-propagate, .mini-profile .original.post-area-new .post-interactions .post-propagate, #postboard-top .post-area .original.post-area-new .post-interactions .post-propagate, .original.open .post-interactions .post-favorite, .mini-profile .original.post-area-new .post-interactions .post-favorite, #postboard-top .post-area .original.post-area-new .post-interactions .post-favorite, .post:hover .original .post-interactions .post-reply, .post:hover .original .post-interactions .post-propagate, .post:hover .original .post-interactions .post-favorite, .related.post:hover .post-reply, .related.post:hover .post-propagate, .related.post:hover .post-favorite {
+.post:hover .post-interactions .post-reply, .post:hover .post-interactions .post-propagate {
display: inline-block;
}
-.open .related .post-reply, .mini-profile .post-area-new .related .post-reply, #postboard-top .post-area .post-area-new .related .post-reply, .open .related .post-propagate, .mini-profile .post-area-new .related .post-propagate, #postboard-top .post-area .post-area-new .related .post-propagate, .open .related .post-favorite, .mini-profile .post-area-new .related .post-favorite, #postboard-top .post-area .post-area-new .related .post-favorite {
+.open .related .post-reply, #postboard-top .post-area .post-area-new .related .post-reply, .mini-profile .post-area-new .related .post-reply,
+.open .related .post-propagate,
+#postboard-top .post-area .post-area-new .related .post-propagate,
+.mini-profile .post-area-new .related .post-propagate,
+.open .related .post-favorite,
+#postboard-top .post-area .post-area-new .related .post-favorite,
+.mini-profile .post-area-new .related .post-favorite {
display: none !important;
}
-.open .related:hover .post-reply, .mini-profile .post-area-new .related:hover .post-reply, #postboard-top .post-area .post-area-new .related:hover .post-reply, .open .related:hover .post-propagate, .mini-profile .post-area-new .related:hover .post-propagate, #postboard-top .post-area .post-area-new .related:hover .post-propagate {
+.open .related:hover .post-reply, #postboard-top .post-area .post-area-new .related:hover .post-reply, .mini-profile .post-area-new .related:hover .post-reply,
+.open .related:hover .post-propagate,
+#postboard-top .post-area .post-area-new .related:hover .post-propagate,
+.mini-profile .post-area-new .related:hover .post-propagate {
display: inline-block !important;
}
.expanded-content {
- display: none;
- padding: 5px 5px 0 5px;
+ padding: 0;
+}
+.expanded-content textarea {
+ clear: left;
}
.image-preview {
@@ -1498,14 +1537,15 @@ button.light:hover, a.button.light:hover {
display: inline-block;
}
.post-stats li.stat-count {
- font-weight: 700;
- font-size: 11px;
+ font-size: 12px;
float: left;
line-height: 20px;
- color: llighten(#444, 30%);
+}
+.post-stats li.stat-count:before {
+ margin-right: 0;
}
.post-stats li.stat-count span:last-child {
- padding-right: 5px;
+ display: none;
}
.post-stats a {
position: relative;
@@ -1513,53 +1553,62 @@ button.light:hover, a.button.light:hover {
display: inline-block;
width: 20px;
height: 20px;
- margin: 0 1px 0 0;
+ margin: 0 2px 0 0;
}
.post-stats a img {
width: 20px;
height: 20px;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
}
-.user-name-tooltip {
+.avatar-row {
+ margin-left: 5px;
+}
+.avatar-row a:hover .user-name-tooltip {
+ display: block;
+}
+.avatar-row .user-name-tooltip {
display: none;
position: absolute;
- background: #2a2a2a;
- font-size: 12px;
+ background: #222;
+ font-size: 11px;
+ line-height: 11px;
white-space: nowrap;
- padding: 3px 5px;
+ padding: 5px;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
color: #fff;
- top: -42px;
- left: 0px;
+ top: -32px;
+ left: -10px;
}
-.user-name-tooltip:after {
+.avatar-row .user-name-tooltip:after {
content: "";
position: absolute;
width: 0;
- left: 4px;
+ left: 13px;
bottom: -5px;
- border-top: solid 5px #2a2a2a;
+ border-top: solid 5px #222;
border-left: solid 5px transparent;
border-right: solid 5px transparent;
}
-.post-stats a:hover .user-name-tooltip {
- display: inline-block;
-}
-
.post-replies .sub-replies {
- border-left: solid 18px #EBEBEB;
+ border-left: solid 18px transparent;
}
.following {
- width: 40%;
- margin-left: 30%;
- padding: 20px;
+ width: 55%;
+ margin-left: 15%;
+ padding: 7px 20px;
}
.following h2 {
display: none;
}
.following .following-list li {
- border-bottom: 1px solid #EBEBEB;
+ border-bottom: 1px solid #E2E1DD;
line-height: 45px;
background: #FDFCFA;
position: relative;
@@ -1582,7 +1631,7 @@ button.light:hover, a.button.light:hover {
color: #444;
}
.following .mini-profile-photo {
- width: 40px;
+ width: 42px;
line-height: 0;
margin: 0 1rem 0 0;
float: left;
@@ -1683,7 +1732,7 @@ button.light:hover, a.button.light:hover {
padding: 2rem;
}
.network.singleBlock .module {
- background: #EBEBEB;
+ background: #F3F2F0;
-moz-box-shadow: 0 1px 1px rgba(85, 85, 85, 0.1);
-webkit-box-shadow: 0 1px 1px rgba(85, 85, 85, 0.1);
box-shadow: 0 1px 1px rgba(85, 85, 85, 0.1);
@@ -1795,7 +1844,7 @@ button.light:hover, a.button.light:hover {
margin: 5px 0px 5px 12px;
}
.options .tab-content {
- background: #EBEBEB;
+ background: #F3F2F0;
position: relative;
padding: 20px;
}
@@ -1827,7 +1876,7 @@ button.light:hover, a.button.light:hover {
color: #222;
}
.options input:checked + label.tabs {
- background: #EBEBEB;
+ background: #F3F2F0;
color: #222;
}
@@ -1839,13 +1888,13 @@ button.light:hover, a.button.light:hover {
display: block;
margin: 0;
padding: 5px;
- border-bottom: 1px solid #EBEBEB;
+ border-bottom: 1px solid #E2E1DD;
text-align: center;
font-size: 0.9em;
transition: color 0.1s linear;
}
.promoted-posts-only li.disabled {
- background: #F4F3F2;
+ background: #F3F2F0;
}
.promoted-posts-only li.active, .promoted-posts-only li.active span {
color: #444;
@@ -1858,58 +1907,12 @@ button.light:hover, a.button.light:hover {
color: rgba(68, 68, 68, 0.3);
}
-/* Wrapper and blocks */
-.wrapper {
- width: 100%;
- max-width: 100%;
- margin: auto;
- padding-top: 50px;
- position: relative;
- z-index: 1;
-}
-
-.dashboard.left {
- position: absolute;
- top: 50px;
- left: 0;
- width: 15%;
-}
-.dashboard.left > .module {
- float: right;
- width: 128px;
-}
-.dashboard.right {
- position: fixed;
- right: 0;
- top: 50px;
- overflow: hidden;
- width: 30%;
-}
-.dashboard > .module {
- max-width: 320px;
- margin-bottom: 20px;
- background: #FDFCFA;
- width: 100%;
-}
-.dashboard > .module h3 {
- float: left;
- padding: 20px;
-}
-.dashboard > .module h4 {
- clear: left;
- border-top: 1px solid #EBEBEB;
- padding: 10px;
-}
-.dashboard > .module small {
- display: none;
-}
-
/********** CONFIG SUBMENU & SEARCH RESULTS *********** */
.dialog-modal {
display: none;
background: #222;
position: absolute;
- top: 46px;
+ top: 38px;
right: 0;
width: 320px;
overflow: hidden;
@@ -1938,7 +1941,7 @@ ul.userMenu-search-profiles li {
margin: 0;
cursor: pointer;
background: #FDFCFA;
- border-bottom: 1px solid #EBEBEB;
+ border-bottom: 1px solid #E2E1DD;
}
ul.userMenu-search-profiles li:hover {
background: white;
@@ -1948,7 +1951,7 @@ ul.userMenu-search-profiles li a {
width: 100%;
font-size: 12px;
font-weight: 400;
- line-height: 40px;
+ line-height: 42px;
display: block;
margin: 0;
padding: 0;
@@ -1965,10 +1968,12 @@ ul.userMenu-search-profiles .mini-screen-name {
font-weight: 500;
}
ul.userMenu-search-profiles .mini-profile-photo {
- width: 40px;
+ width: 42px;
height: auto;
- margin: 10px;
+ min-height: 42px;
+ margin: 5px;
float: left;
+ overflow-x: hidden;
}
ul.userMenu-search-profiles .mini-profile-info {
width: 100%;
@@ -1976,9 +1981,9 @@ ul.userMenu-search-profiles .mini-profile-info {
}
ul.userMenu-search-profiles button {
font-size: 1.4rem;
- line-height: 25px;
- height: 30px;
- width: 40px;
+ line-height: 27px;
+ height: 32px;
+ width: 42px;
text-align: center;
font-weight: 500;
padding: 0;
@@ -1995,7 +2000,7 @@ ul.userMenu-search-profiles button {
padding: 3px 10px;
margin: 10px 20px 0 0;
border: none;
- background: #EBEBEB;
+ background: #F3F2F0;
box-sizing: border-box;
}
@@ -2007,6 +2012,9 @@ ul.userMenu-search-profiles button {
}
/***************** MINI PROFILE ****************************** */
+.mini-profile a:hover {
+ text-decoration: none;
+}
.mini-profile a.button {
background: #aaa;
margin: 1em auto;
@@ -2030,8 +2038,8 @@ ul.userMenu-search-profiles button {
.mini-profile-indicators {
margin: 0;
text-align: center;
- border-top: 1px solid #EBEBEB;
- background: #F4F3F2;
+ border-top: 1px solid #E2E1DD;
+ background: #F3F2F0;
}
.mini-profile-indicators li {
-moz-box-sizing: border-box;
@@ -2041,7 +2049,7 @@ ul.userMenu-search-profiles button {
position: relative;
font-size: 0.8em;
text-align: center;
- border-bottom: 1px solid #EBEBEB;
+ border-bottom: 1px solid #E2E1DD;
}
.mini-profile-indicators li a {
color: #777777;
@@ -2060,9 +2068,8 @@ ul.userMenu-search-profiles button {
.messages-qtd {
position: absolute;
- top: 50%;
- margin-top: -11px;
- right: 11px;
+ top: 5px;
+ right: 5px;
background: #A1B775;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
color: #fff;
@@ -2080,6 +2087,10 @@ ul.userMenu-search-profiles button {
display: none;
}
+.left .mini-profile-info {
+ padding-top: 32px;
+}
+
.mini-profile-name {
color: #444;
font-size: 1em;
@@ -2097,14 +2108,14 @@ ul.userMenu-search-profiles button {
width: 64px;
height: auto;
display: block;
- margin: 32px auto 0 auto;
+ margin: auto;
}
.profile-data {
clear: both;
padding: 0 0 1em 0;
text-align: center;
- background: #EBEBEB;
+ background: #F3F2F0;
}
.mini-profile .profile-data {
display: none;
@@ -2164,16 +2175,16 @@ ul.userMenu-search-profiles button {
color: #444;
}
-.mini-follower-link {
+.mini-follower-link, .followed-by {
display: inline-block;
margin: 1px;
line-height: 12px;
}
-.mini-follower-link.isFollowing:after {
+.mini-follower-link.isFollowing:after, .followed-by.isFollowing:after {
display: none;
}
-.mini-follower-link:after {
- content: "·";
+.mini-follower-link:after, .followed-by:after {
+ content: "";
font-weight: 900;
color: #222;
margin-left: 1px;
@@ -2192,7 +2203,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: 40px;
+ height: 42px;
border: none;
background: white;
border: 1px solid rgba(0, 0, 0, 0.1);
@@ -2207,77 +2218,10 @@ ul.userMenu-search-profiles button {
display: none;
}
-#postboard-top {
- clear: both;
- position: relative;
- margin-bottom: 10px;
- transition: height 0.3s linear;
- padding: 10px;
- background: white;
- overflow: hidden;
- background: #FDFCFA;
- -moz-box-shadow: 0 0 13px rgba(17, 17, 17, 0);
- -webkit-box-shadow: 0 0 13px rgba(17, 17, 17, 0);
- box-shadow: 0 0 13px rgba(17, 17, 17, 0);
- -moz-transition-property: box-shadow;
- -o-transition-property: box-shadow;
- -webkit-transition-property: box-shadow;
- transition-property: box-shadow;
- -moz-transition-duration: 0.2s;
- -o-transition-duration: 0.2s;
- -webkit-transition-duration: 0.2s;
- transition-duration: 0.2s;
- -moz-transition-timing-function: ease-out;
- -o-transition-timing-function: ease-out;
- -webkit-transition-timing-function: ease-out;
- transition-timing-function: ease-out;
- z-index: 120;
-}
-#postboard-top.on {
- -moz-box-shadow: 0 8px 13px rgba(17, 17, 17, 0.2);
- -webkit-box-shadow: 0 8px 13px rgba(17, 17, 17, 0.2);
- box-shadow: 0 8px 13px rgba(17, 17, 17, 0.2);
-}
-#postboard-top.hide {
- display: none !important;
-}
-#postboard-top.show {
- display: block;
-}
-#postboard-top .profile-photo {
- position: absolute;
- top: 10px;
- left: 10px;
- width: 40px;
-}
-#postboard-top .profile-photo img {
- width: 100%;
-}
-#postboard-top .post-area {
- overflow: hidden;
- width: 100%;
- padding-left: 58px;
- padding-right: 0;
- display: inline;
- -moz-box-sizing: border-box;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- background: none;
- float: right;
-}
-#postboard-top .post-area .post-area-new {
- -moz-box-shadow: none;
- -webkit-box-shadow: none;
- box-shadow: none;
-}
-#postboard-top .post-area .post-area-new textarea {
- margin: 0 0 10px 0;
-}
-
#post-preview {
- background: #EBEBEB;
- border: 1px solid #EBEBEB;
- padding: 15px;
+ border: 1px solid #E2E1DD;
+ border-bottom: 0;
+ padding: 5px;
-moz-transition-property: all;
-o-transition-property: all;
-webkit-transition-property: all;
@@ -2287,10 +2231,12 @@ ul.userMenu-search-profiles button {
-webkit-transition-duration: 0.1s;
transition-duration: 0.1s;
width: 100% !important;
+ font-size: 90%;
word-wrap: break-word;
+ clear: left;
}
-.post-area-new.open textarea, .mini-profile .post-area-new textarea, #postboard-top .post-area .post-area-new textarea {
+.post-area-new.open textarea, #postboard-top .post-area .post-area-new textarea, .mini-profile .post-area-new textarea {
height: 80px;
}
@@ -2313,7 +2259,7 @@ textarea.splited-post {
text-align: right;
}
-.post-area-new.open > .post-area-extras, .mini-profile .post-area-new > .post-area-extras, #postboard-top .post-area .post-area-new > .post-area-extras {
+.post-area-new.open > .post-area-extras, #postboard-top .post-area .post-area-new > .post-area-extras, .mini-profile .post-area-new > .post-area-extras {
height: auto;
transition: all 0.6s linear;
}
@@ -2335,9 +2281,6 @@ textarea.splited-post {
.who-to-follow.module li:hover button {
display: block;
}
-.who-to-follow.module .bio {
- text-align: left !important;
-}
.who-to-follow small {
display: none;
}
@@ -2349,58 +2292,37 @@ textarea.splited-post {
clear: both;
}
-.twister-user {
- position: relative;
- box-sizing: border-box;
- background: #FDFCFA;
- border-top: 1px solid #EBEBEB;
- width: 100%;
- min-height: auto;
- padding: 10px 0;
- clear: left;
- -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;
-}
-.twister-user:hover {
- background: white;
-}
-
img.twister-user-photo {
float: left;
display: block;
float: left;
- width: 40px;
+ width: 42px;
height: auto;
- margin: 0 10px;
- background: #EBEBEB;
+ margin: 0 10px 0 0;
}
.followers {
font-size: 12px;
- color: #444;
}
.followers label, .followers a {
display: inline-block;
}
.followed-by {
- color: #aaa;
font-size: 12px;
cursor: pointer;
display: block;
}
.twister-user-name, .twister-by-user-name {
- font-weight: bold;
+ font-weight: 500;
font-size: 14px;
- color: #aaa;
text-decoration: none;
+ color: #222;
+}
+
+.twister-user-name {
+ font-weight: 700;
}
.twister-user-tag {
@@ -2467,7 +2389,7 @@ img.twister-user-photo {
.toptrends-list {
margin: 0;
clear: both;
- border-top: 1px solid #EBEBEB;
+ border-top: 1px solid #E2E1DD;
padding: 10px;
}
.toptrends-list li {
@@ -2695,11 +2617,20 @@ ul.dropdown-menu li > li > a {
padding: 0;
}
- .postboard {
- width: 85%;
+ .postboard, #postboard-top.onTop {
+ position: absolute;
+ left: 135px;
+ right: 20px;
+ width: auto;
}
.modal-wrapper {
width: 85%;
}
+ .modal-wrapper .postboard {
+ width: 700px;
+ float: left;
+ position: relative;
+ left: 0;
+ }
}
diff --git a/img/tornado_avatar.png b/img/tornado_avatar.png
index e5a44e5..887bbca 100644
Binary files a/img/tornado_avatar.png and b/img/tornado_avatar.png differ
diff --git a/js/theme_option.js b/js/theme_option.js
index 4dd9760..3487501 100644
--- a/js/theme_option.js
+++ b/js/theme_option.js
@@ -1,43 +1,18 @@
-
-
-
-
$(window).resize(function()
{
- $('.module.toptrends').detach().appendTo($('.dashboard.right'));
- $('.module.who-to-follow').detach().appendTo($('.dashboard.right'));
- $('.module.twistday-reminder').detach().appendTo($('.dashboard.right'));
+ reAppendModules();
});
-
-
$(document).ready(function()
{
- $('.module.toptrends').detach().appendTo($('.dashboard.right'));
- $('.module.who-to-follow').detach().appendTo($('.dashboard.right'));
- $('.module.twistday-reminder').detach().appendTo($('.dashboard.right'));
+ var windowHeight = $(window).height();
+
+ reOrganizeTemplates()
$('#postboard-top textarea').on('blur',function(){$('#postboard-top').removeClass('on');});
$('#postboard-top textarea').on('focus',function(){$('#postboard-top').addClass('on');});
-
- var windowHeight = $(window).height();
- $('.modal-close').html('');
- $('.mini-profile .open-following-page').parent('li').detach().appendTo($('.mini-profile-indicators'));
-
- $('.modal-back').html('');
- $('.twister-user-remove').html('');
- $('.profile-card-main').attr('style', '');
- $('.userMenu-search-profiles button').html('+').attr('title',polyglot.t('Follow'));
- $('.mini-profile-actions span').html('');
- $('.promoted-posts-only').detach().appendTo($('.left .mini-profile'));
- $('.mini-profile-indicators').detach().insertAfter($('.dashboard.left .profile-data'));
- $('.post-context').each(function(){
- $(this).prependTo($(this).parent());
- });
-
-
$( '.userMenu-home.current a' ).on( 'click', function() {
$('html, body').animate({scrollTop:0},300);
return false
@@ -45,9 +20,8 @@ $(document).ready(function()
-
- $( ".promoted-posts-only").click(function() {
// modify the way promoted posts are shown
+ $( ".promoted-posts-only").click(function() {
//active promoted posts tab
$(this).children('.promoted-posts').addClass(promotedPostsOnly ? "active" : "disabled");
$(this).children('.normal-posts').addClass(promotedPostsOnly ? "disabled" : "active");
@@ -72,16 +46,58 @@ $(document).ready(function()
$(document).ready(localizeLabels);
- $('').appendTo('.postboard-loading');
- $('').appendTo('.postboard-loading');
- $('').appendTo('.postboard-loading');
+ $(window).scroll(function(){
+ window_scrollY = window.pageYOffset; // declare variable here for screen not to scroll when closing modals
+ });
+ /*
+ $(window).scroll(function(){
+ window_scrollY = window.pageYOffset; // declare variable here for screen not to scroll when closing modals
+
+ if ($(document).scrollTop() >= 142) {
+ if (this.css('position') === 'relative')
+ this.addClass('onTop');
+ }else if (this.css('position') === 'fixed')
+ this.removeClass('onTop');
+ }).bind($('#postboard-top')));*/
+}
+);
+
+function reOrganizeTemplates() { // for nin's templating
-});
+ reAppendModules();
+
+ //removes unused html
+ $('.modal-close').html('');
+ $('.modal-back').html('');
+ $('.twister-user-remove').html('');
+ $('.profile-card-main').attr('style', '');
+ $('.userMenu-search-profiles button').html('+').attr('title',polyglot.t('Follow'));
+ $('.mini-profile-actions span').html('');
+
+ //re-organizes
+ $('.promoted-posts-only').detach().appendTo($('.left .mini-profile'));
+ $('.mini-profile .open-following-page').parent('li').detach().appendTo($('.mini-profile-indicators'));
+ $('.mini-profile-indicators').detach().insertAfter($('.dashboard.left .profile-data'));
+ $('.post-context').each(function(){ $(this).prependTo($(this).parent()); }); // puts context on top of post
+
+ //loader
+ newLoader()
+}
+function reAppendModules() { // avoid w1200 things
+ $('.module.toptrends').detach().appendTo($('.dashboard.right'));
+ $('.module.who-to-follow').detach().appendTo($('.dashboard.right'));
+ $('.module.twistday-reminder').detach().appendTo($('.dashboard.right'));
+}
+function newLoader() { // create divs for new loader
+ $('').appendTo('.postboard-loading');
+ $('').appendTo('.postboard-loading');
+ $('').appendTo('.postboard-loading');
+}
function localizeLabels() {
$("label[for=tab_language]").text(polyglot.t("Language"));
@@ -93,8 +109,8 @@ function localizeLabels() {
}
function openModal(modal) {
- window_scrollY = window.pageYOffset;
-
+
+ var windowHeight = $(window).height();
if (!modal.classBase)
modal.classBase = '.modal-wrapper';
@@ -118,7 +134,6 @@ function openModal(modal) {
if (modal.classBase === '.modal-wrapper') {
modal.content.outerHeight(modal.self.height() - modal.self.find('.modal-header').outerHeight());
- var windowHeight = $(window).height();
if (modal.self.outerHeight() > windowHeight) {
modal.content.outerHeight(modal.content.outerHeight() - modal.self.outerHeight() + windowHeight);
modal.self.outerHeight(windowHeight);
@@ -129,3 +144,4 @@ function openModal(modal) {
return modal;
}
+
diff --git a/sass/base/_commons.sass b/sass/base/_commons.sass
index 3e058d1..10c479b 100644
--- a/sass/base/_commons.sass
+++ b/sass/base/_commons.sass
@@ -2,7 +2,7 @@
outline: none!important
+box-sizing(border-box)
list-style: none
- color: $defaut-font-color
+
html, body
@@ -16,6 +16,7 @@ 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
body
font-size: $main-font-size
@@ -23,15 +24,15 @@ body
font-family : $main-font-family
font-weight: 400
overflow-y: scroll
-
-a
+
+a
text-decoration: none
color: $main-color-color
&:hover, &:active
color: $main-color-color
- text-decoration: none
+ text-decoration: underline
i
text-decoration: underline
font-style: normal
@@ -43,12 +44,10 @@ strong, b
font-weight: 600
img
- background: $bloc-light-color
+ background: $bloc-background-color
h1
font-size: 1.1em
- text-transform: uppercase
- letter-spacing: 0.07em
font-weight: 700
line-height: 1.1em
diff --git a/sass/base/_utils.sass b/sass/base/_utils.sass
index c916406..9dfee13 100644
--- a/sass/base/_utils.sass
+++ b/sass/base/_utils.sass
@@ -41,12 +41,12 @@ button, a.button
color: #666
+box-shadow(1px 1px 0 rgba(#444, .3))
&.color-1
- background: #5E80A2
- border-color: darken(#5E80A2, 5%)
+ background: $main-color-color
+ border-color: darken($main-color-color, 5%)
color: white
font-weight: 500
&:hover
- border-color: darken(#5E80A2, 15%)
+ border-color: darken($main-color-color, 22%)
&.color-2
background: #64676C
border-color: darken(#64676C, 5%)
diff --git a/sass/base/_var.sass b/sass/base/_var.sass
index 8da9ad7..8141bab 100644
--- a/sass/base/_var.sass
+++ b/sass/base/_var.sass
@@ -1,11 +1,19 @@
//these are the main variables used in the sass file
+$site-width : 1200px
+$gut : 20
+$postboardWidth : 700px
+$miniProfileWidth : $site-width/10
+$leftWidth : $miniProfileWidth + $gut
+$rightWidth : $site-width - ($leftWidth + $postboardWidth)
+$mini-usr-img : 42px
+$usr-img : 64px
-
-$site-width : 100%
-$gut-width : 2.5%
$space : 1rem
+
+
+
// colors
$light-grey: #C3C3C3
@@ -18,10 +26,9 @@ $dark-grey : #444
$main-color-light: #aaa
$main-color-dark: #222
$main-color-color: $color-green
-$main-background-color: #EBEBEB
+$main-background-color: #E2E1DD
$bloc-light-color : #FDFCFA
-
-$bloc-background-color: #EBEBEB
+$bloc-background-color: #F3F2F0
$defaut-font-color: $dark-grey
@@ -36,8 +43,3 @@ $main-font-family: "Roboto", sans-serif
$symbol-font-family: "fontello"
$serif-font-family: "Droid", serif
-
-/* usefull vars */
-
-$mini-usr-img : 40px
-$usr-img : 64px
\ No newline at end of file
diff --git a/sass/layout/_dm.sass b/sass/layout/_dm.sass
index 31cef58..7a512e2 100644
--- a/sass/layout/_dm.sass
+++ b/sass/layout/_dm.sass
@@ -28,7 +28,6 @@
.modal-content
+box-sizing(border-box)
width: 100%
- background: #f0f0f0
.post-photo
width: $mini-usr-img
diff --git a/sass/layout/_menu.sass b/sass/layout/_menu.sass
index ea8c431..a1aa1bd 100644
--- a/sass/layout/_menu.sass
+++ b/sass/layout/_menu.sass
@@ -1,24 +1,25 @@
// vars for the menu
-$menu-height : 50px
+$menu-height : 42px
$menu-font-color: white
-
+$menuBgColor : #67686C
.userMenu
width: 100%
position: fixed
height: $menu-height
left: 0
margin: 0
- background-color: #64676C
- //+background-image(linear-gradient(to left , $color-green, $color-green, #5E80A2) )
-
+ //background-color: #FFAF1C
+ //+background-image(linear-gradient(to right , $color-green, #5E80A2) )
+ background-color: $menuBgColor
z-index: 2
> ul
@extend .clear-fix
+box-sizing(border-box)
- width: 100%
- padding: 0 30% 0 15%
- background: image-url("logo.png") no-repeat 50% 50%
+ max-width: 100%
+ width: $site-width
+ margin: auto
+ background: image-url("logo.png") no-repeat 50% 50%
background-size: 20px
li
float: left
@@ -30,17 +31,17 @@ $menu-font-color: white
padding: 0 .5em
display: inline-block
color: rgba($menu-font-color, 0.7)!important
- font-size: 1em
+ font-size: 1.1em
position: relative
- font-weight: 500
+ font-weight: 400
+box-sizing(border-box)
&:hover
color: $menu-font-color!important
- > a span
- color: rgba($menu-font-color, 0.7)!important
- &.current a, &.current a span
+ text-decoration: none
+
+
+ &.current a
color: $menu-font-color!important
- //+text-shadow(1px 1px 0 rgba(#000,.2))
/* Menu specific entries */
@@ -55,19 +56,19 @@ $menu-font-color: white
position: absolute
text-align: center
display: none
- top: 6px
- right: -6px
+ top: 4px
+ right: -7px
background: $main-color-color
- color: #fff
width: 15px
height: 15px
line-height: 15px
font-size: 10px
- padding: 3px
+ padding: 1px
font-weight: 900
+border-radius(50%)
+ letter-spacing: -0.01em
+box-sizing(content-box)
- +text-shadow(1px 1px 0 rgba(#000, .3))
+ color: white
&.show
display: block
@@ -82,13 +83,12 @@ $menu-font-color: white
+ a
color: $main-color-dark
&.userMenu-search
- margin: 3px
-
> input
- border: 1px solid $main-color-light
- line-height: 12px
+ border: 1px solid #dedede
+ line-height: $menu-height/2
font-size: 12px
- padding: 7px
+ padding: 0 7px
+ background: white
&:focus
border-color: $main-color-dark
&.userMenu-config > a
diff --git a/sass/layout/_modal.sass b/sass/layout/_modal.sass
index bd5bb74..0f2844f 100644
--- a/sass/layout/_modal.sass
+++ b/sass/layout/_modal.sass
@@ -1,17 +1,20 @@
-
-
/*********** POPUP MODAL **************/
-
// vars modal
$header-modal-height : $menu-height
+// style
+
+.modal-blackout
+ display: none
+
+
.modal-wrapper
background: $bloc-background-color
- z-index: 3000
- width: 30%
+ z-index: 4
+ width: 34%
position: fixed
+box-sizing(border-box)
@extend .box-shadow
@@ -19,37 +22,116 @@ $header-modal-height : $menu-height
right: 0
bottom: 0
overflow: hidden
- +box-shadow(0 8px 13px rgba(#111, 0.2))
- .postboard
- border: none
- padding: 0
+ +box-shadow(-8px 0 13px rgba(#111, 0.2))
- .post-area-new
- padding: 10px
+ // NEW USER MODAL //
-.modal-blackout
- background: rgba(0, 0, 0, 0)
- z-index: -1
- position: fixed
- left: 0
- top: 0
- width: 0
- height: 0
+ &.new-user
-.modal-content
- @extend .clear-fix
- overflow: hidden
- overflow-y: auto
- .postboard-news
- position: fixed
- display: block
- right: 2px
- top: $header-modal-height +2
- z-index: 2000
- @extend .color-1
- h2 span
- display: none
- background: $bloc-background-color
+ .modal-content
+ padding: 25px
+ .modal-close
+ display: none
+ .text
+ margin: 0 0 15px 0
+ .emphasis
+ text-align: center
+ .secret-key
+ display: block
+ margin-top: 8px
+ color: rgba(0.5, 0, 0, 1)
+ font-weight: bold
+ font-size: 110%
+
+
+ // FOLOWING MODAL //
+
+ &.following-modal
+
+ h2
+ display: none
+ .mini-following-info
+ border-bottom: 1px solid $main-background-color
+ line-height: $mini-usr-img
+
+ a
+ display: block
+ padding: 10px
+ width: 100%
+
+ @extend .clear-fix
+ color: $defaut-font-color
+ background: $bloc-light-color
+
+ &:hover
+ background: white
+ text-decoration: none
+ font-weight: 500
+ .mini-profile-photo
+ width: $mini-usr-img
+ min-height: $mini-usr-img
+ overflow-x: hidden
+ line-height: 0
+ margin: 0 $space 0 0
+ float: left
+ .mini-following-name
+ &:after
+ line-height: 20px
+ .mini-screen-name
+ display: none
+
+
+
+
+ &.who-to-follow-modal
+ a
+ color: $main-color-dark
+ &.twister-user-name
+ &:hover
+ text-decoration: none
+ .twister-user-info
+ text-align: left
+ font-size: .8rem
+ line-height: 1rem
+ width: 80%
+ padding-left: $mini-usr-img + 20
+ button
+ position: absolute
+ right: 10px
+ top: 10px
+ @extend .small
+ .bio
+ color: rgba(0, 0, 0, 0.6)
+ font-style: italic
+ padding: .25rem 0
+
+
+ .modal-content
+ width: 100%
+ @extend .clear-fix
+ overflow: hidden
+ overflow-y: auto
+
+ .postboard
+ padding: 0
+ clear: none!important
+ position: relative
+ width: 100%
+ margin: auto
+
+ h2
+ display: block
+ span
+ display: none
+
+
+ .postboard-news
+ position: fixed
+ display: block
+ right: 2px
+ top: $header-modal-height +2
+ z-index: 2000
+ @extend .color-1
@@ -57,7 +139,7 @@ $header-modal-height : $menu-height
.modal-header
position: relative
- background: darken(#64676C,12%)
+ background: darken($main-color-dark,.3)
height: $header-modal-height
+box-sizing(border-box)
@extend .clear-fix
@@ -99,190 +181,26 @@ $header-modal-height : $menu-height
-/* MODAL */
-.modal-content
- width: 100%
- .postboard
- padding: 0
- clear: none!important
- position: relative
- width: 100%
- margin: auto
- background: $bloc-background-color
-
- h2
- display: block
-
-
-
-
-
-/*********** POPUP PROMPT *************/
+/* Composants */
-.prompt-wrapper
+.twister-user
+ position: relative
+ box-sizing: border-box
background: $bloc-light-color
- z-index: 5
- position: fixed
- top: 50%
- left: 50%
- width: 600px
- margin-left: -300px
- +box-shadow(0 8px 33px rgba(#000, .3))
- .modal-buttons
- padding: 10px
- text-align: right
- .modal-content
- background: $bloc-light-color
- padding: 10px 10px 30px 10px
- text-align: center
-
-
-/************ FOLLOWING-CONFIG MODAL **********/
-
-.prompt-wrapper.following-config-modal
- margin-top: -100px
-
- .modal-buttons
- display: none
- h2
- text-transform: none
- display: inline-block!important
- font-size: 1rem
- font-weight: 400
- padding: $space
- span
- display: inline-block!important
- b
- font-weight: 400
-
+ @extend .clear-fix
+ border-top: 1px solid $main-background-color
+ width: 100%
+ min-height: auto
+ padding: 7px
+ clear: left
-/************ RETWIST POSTS MODAL **********/
+/*********** POPUP PROMPT *************/
-.prompt-wrapper.reTwist
- &.prompt-wrapper
- margin-top: -110px
- .modal-content
- padding: 20px 15px
-
- .post-expand, .post-interactions
- display: none
- .post-info-time
- position: static
- float: right
- .post-text
- margin-top: 10px
- margin-bottom: 10px
-
-/********* REPLY POSTS MODAL***************/
-
-.prompt-wrapper.reply
- &.prompt-wrapper
- margin-top: -110px
- .modal-buttons, .post-expand, .post-interactions
- display: none
- .post-area
- padding-bottom: 6px
+@import '_prompt'
/********* DIRECT MESSAGES MODAL ***********/
@import '_dm'
-
-/********* NEW USER MODAL**************/
-
-.modal-wrapper.new-user
-
- .modal-content
- padding: 25px
- .modal-close
- display: none
- .text
- margin: 0 0 15px 0
- .emphasis
- text-align: center
- .secret-key
- display: block
- margin-top: 8px
- color: rgba(0.5, 0, 0, 1)
- font-weight: bold
- font-size: 110%
-
-/******** HASHTAG MODAL***********/
-
-.modal-wrapper.hashtag-modal
-
- .postboard
- padding: 0
-
-/****** CONVERSATION MODAL***********/
-
-.modal-wrapper.conversation-modal
-
- .postboard
- padding: 0
-
-/****** FOLLOWING MODAL*******/
-
-
-.modal-wrapper.following-modal
- h2
- display: none
-.mini-following-info
- border-bottom: 1px solid $main-background-color
- line-height: $mini-usr-img
-
- a
- display: block
- padding: 10px
- width: 100%
- @extend .clear-fix
- color: $defaut-font-color
- background: $bloc-light-color
- &:hover
- background: white
- .mini-profile-photo
- width: $mini-usr-img
- line-height: 0
- margin: 0 $space 0 0
- float: left
- .mini-screen-name
- display: none
-
-
-
-
-/******* WHO TO FOLLOW MODAL*******/
-
-.modal-wrapper.who-to-follow-modal
-
- .open-profile-modal
- &:hover
- text-decoration: none
-
- a.twister-user-name
- color: $defaut-font-color
- span
- padding-bottom: .5rem
- font-size: 1rem
- line-height: 1rem
- color: $defaut-font-color
- font-weight: 500
- opacity: 1
- letter-spacing: 0
- .twister-user-info
- text-align: left
- font-size: .8rem
- line-height: 1rem
- width: 80%
- padding-left: $mini-usr-img + 20
- button
- position: absolute
- right: 10px
- top: 10px
- @extend .small
- .bio
- color: rgba(0, 0, 0, 0.6)
- font-style: italic
- padding-bottom: .5rem
diff --git a/sass/layout/_postboard.sass b/sass/layout/_postboard.sass
index 3c16313..249c13f 100755
--- a/sass/layout/_postboard.sass
+++ b/sass/layout/_postboard.sass
@@ -1,78 +1,126 @@
-/************* POST BOARD *************/
-
+/************* TOP TEXTAREA *************/
+#postboard-top
+ position: relative
+ @extend .clear-fix
+ margin-bottom: 10px
+ transition: height .3s linear
+ padding: 10px
+ background: white
+ overflow: hidden
+ background: $bloc-light-color
+ @extend .on
+ +transition-property( top)
+ +transition-duration(.1s)
+ +transition-timing-function(ease-out)
+ top: 0
+ &.on
+ +box-shadow(1px 2px 2px rgba(#111, 0.1))
+ z-index: 120
+
+ &.fixed
+ position: fixed
+ width: $rightWidth
+ top: $menu-height
+ @extend .on
+ .profile-photo
+ position: absolute
+ top: 10px
+ left: 10px
+ width: $mini-usr-img
+ img
+ width: 100%
+ .post-area
+ overflow: hidden
+ @extend .clear-fix
+ width: 100%
+ padding-left: 58px
+ padding-right: 0
+ display: inline
+ +box-sizing(border-box)
+ background: none
+ float: right
+ .post-area-new
+ @extend .open
+ +box-shadow(none)
+ textarea
+ margin: 0 0 10px 0
-// vars for postboard
+/************* POSTBOARD *************/
.postboard
- width: 55%
- margin-left: 15%
- padding: 7px 20px
- h2
- display: none
- .postboard-posts
- position: relative
- z-index: 1
- clear: both
-
- .postboard-news
+ width: $postboardWidth
+ float: left
+
+ h2, .postboard-news
display: none
+.postboard-posts
+ position: relative
+ z-index: 1
+ clear: both
+
+
.post
- background: $bloc-light-color
+
position: relative
margin-bottom: 1px
- @extend .box-shadow
+transition-property(margin)
+transition-duration(.5s)
- +transition-timing-function(ease-out)
- .post, .original.post, .post.open
- position: relative
-
-
-.module.open
- .post
- color: darken($defaut-font-color, 15%)
-
-.post:hover
- color: darken($defaut-font-color, 15%)
-
-.post-data
- padding: $space
-
-
-.post.open
- .original, .related
- margin-bottom: 1px
-
-
-.postboard-posts > .post
- +border-radius(2px)
- &.open
- margin-top: $space
- margin-bottom: $space
- +border-radius(2px)
-
- &:after
- content: ""
- position: absolute
- right: 0
- top: 0
- width: 0
- height: 100%
- transition: all .2s linear
- &.open:after
- width: 5px
+ +transition-timing-function(ease-out)
+ color: lighten($defaut-font-color, 10%)
+ cursor: pointer
+ &:hover
+ color: #000
+
+ .show-more
+ display: inline-block
+ float: right
+ font-size: 12px
+ color: lighten($dark-grey,30%)
+ @extend .extend-icon
+ @extend .icon-chat
+ &:hover
+ color: lighten($dark-grey,5%)
+ .post-expand
+ color: lighten($dark-grey,30%)
+ cursor: pointer
+ font-size: 12px
+ position: absolute
+ left: 10px
+ bottom: 10px
+ &:hover
+ color: lighten($dark-grey,5%)
+ .post-data
+ padding: 10px
+ background: $bloc-light-color
+
+
+
+
+
+ /*********** EVERYTHING SPECIFIC TO OPEN POSTS **************/
+
+ > .post
+ +box-shadow(1px 2px 2px rgba(#111, 0.1))
+ &.open
+ margin-top: $space
+ margin-bottom: $space
+ +box-shadow(1px 2px 2px rgba(#111, 0))
+ .post
+ color: darken($defaut-font-color, 15%)
+ +box-shadow(1px 2px 2px rgba(#111, 0.1))
+ margin-bottom: 1px
+ &:not(.original)
+ .post-expand
+ display: none
+ margin: 0
+
-.post:hover
- cursor: pointer
-.open
- background: none!important
-
.post-photo
margin: 0
@@ -92,11 +140,9 @@
display: inline-block
float: left
margin-left: 10px
-
-
-.post-info-name:hover
- text-decoration: none
- color: black
+ &:hover
+ text-decoration: none
+ color: black
.post-info-tag
font-size: 12px
@@ -132,24 +178,21 @@
span
@extend .icon-twistagain
@extend .extend-icon
- &: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
- margin-right: .4em
+ &: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
+ margin-right: .4em
-.mini-screen-name
- font-size: 13px
- color: $dark-grey
-.post-retransmited-icon
- display: none
+
+// .post-interactions (reply, retransmit, fav)
.post-interactions
margin: 10px 0 3px 0
@@ -161,79 +204,42 @@
cursor: pointer
font-size: 12px
line-height: 12px
-
-.post-expand
- color: lighten($dark-grey,30%)
- cursor: pointer
- font-size: 12px
- position: absolute
- left: 10px
- bottom: 10px
- &:hover
- color: lighten($dark-grey,5%)
-
-.post-reply, .post-propagate, .post-favorite
- @extend .extend-icon
- padding-left: 10px
- display: none
- &:hover
- color: lighten($dark-grey,5%)
-
-.post-reply
- @extend .icon-comment
-
-.post-propagate
- @extend .icon-twistagain
-
-.post-favorite
- display: none!important
- @extend .icon-star
-
-.post
- .show-more
- display: inline-block
- float: right
- font-size: 12px
- color: lighten($dark-grey,30%)
@extend .extend-icon
- @extend .icon-chat
- &:hover
- color: lighten($dark-grey,5%)
-
-
-.expanded-content.show-pic
- display: block
-
-.expanded-post
-
- .post-expand, .post-reply, .post-propagate, .post-favorite
- color: lighten($dark-grey,30%)
+ position: relative
+ margin-left: 7px
+ display: none
&:hover
color: lighten($dark-grey,5%)
-.related .post-expand
- display: none
- margin: 0
+ &.post-reply
+ @extend .icon-comment
+ &.post-propagate
+ @extend .icon-twistagain
+ &.post-favorite
+ display: none!important //maybe one day
+ @extend .icon-star
-
-.post:hover, .original.open .post-interactions, .post:hover .original .post-interactions, .related.post:hover
- .post-reply, .post-propagate, .post-favorite
- display: inline-block
+ .post:hover &
+ .post-reply, .post-propagate //, .post-favorite maybe one day
+ display: inline-block
.open .related
- .post-reply, .post-propagate, .post-favorite
+ .post-reply,
+ .post-propagate,
+ .post-favorite
display: none!important
&:hover
- .post-reply, .post-propagate/*, .post-favorite*/
+ .post-reply,
+ .post-propagate/*, .post-favorite*/
display: inline-block!important
-
.expanded-content
- display: none
- padding: 5px 5px 0 5px
+ //display: none
+ padding: 0
@extend .clear-fix
-
+ textarea
+ clear: left
.image-preview
max-width: 100%
@@ -252,48 +258,64 @@
li
display: inline-block
&.stat-count
- font-weight: 700
- font-size: 11px
+ font-size: 12px
float: left
line-height: 20px
- color: llighten($dark-grey,30%)
- span:last-child
- padding-right: 5px
+ @extend .extend-icon
+ @extend .icon-twistagain
+ &:before
+ margin-right: 0
+ span:last-child
+ display: none
+
a
position: relative
text-decoration: none
display: inline-block
width: 20px
height: 20px
- margin: 0 1px 0 0
+ margin: 0 2px 0 0
+
img
width: 20px
height: 20px
+ +border-radius(3px)
-.user-name-tooltip
- display: none
- position: absolute
- background: lighten($main-color-dark,3%)
- font-size: 12px
- white-space: nowrap
- padding: 3px 5px
- color: #fff
- top: -42px
- left: 0px
- &:after
- content: ""
+
+
+//what appears on top of .avatar-row img on hover
+
+.avatar-row
+ margin-left: 5px
+ a:hover
+ .user-name-tooltip
+ display: block
+
+ .user-name-tooltip
+ display: none
position: absolute
- width: 0
- left: 4px
- bottom: -5px
- border-top: solid 5px lighten($main-color-dark,3%)
- border-left: solid 5px transparent
- border-right: solid 5px transparent
-
-.post-stats a:hover .user-name-tooltip
- display: inline-block
+ background: $main-color-dark
+ font-size: 11px
+ line-height: 11px
+ white-space: nowrap
+ padding: 5px
+ +border-radius(3px)
+ color: #fff
+ top: -32px
+ left: -10px
+ &:after
+ content: ""
+ position: absolute
+ width: 0
+ left: 13px
+ bottom: -5px
+ border-top: solid 5px $main-color-dark
+ border-left: solid 5px transparent
+ border-right: solid 5px transparent
+
+// Posts replies get left border to show threads
.post-replies .sub-replies
- border-left: solid 18px $main-background-color
+ border-left: solid 18px transparent
diff --git a/sass/layout/_profile.sass b/sass/layout/_profile.sass
index 335ceb6..682040a 100644
--- a/sass/layout/_profile.sass
+++ b/sass/layout/_profile.sass
@@ -34,11 +34,7 @@ $modal-postboard-post-height: 100%
height: $modal-postboard-post-height
overflow: auto
- .postboard-posts .post
- padding: 0
- margin-bottom: 1px
- .post-interactions
- margin: 2px 10px 3px 60px
+
.profile-card
margin: 0
padding: 0
@@ -109,8 +105,9 @@ $modal-postboard-post-height: 100%
.isFollowing:after
- font-size: 15px
- position: absolute
+ font-size: 10px
+
+
.follow
@extend .color-1
diff --git a/sass/layout/_prompt.sass b/sass/layout/_prompt.sass
new file mode 100644
index 0000000..f193a09
--- /dev/null
+++ b/sass/layout/_prompt.sass
@@ -0,0 +1,73 @@
+/*********** POPUP PROMPT *************/
+
+.prompt-wrapper
+ background: $bloc-light-color
+
+ z-index: 5
+ position: fixed
+ top: 50%
+ left: 50%
+ width: 600px
+ margin-left: -300px
+ +box-shadow(0 8px 33px rgba(#000, .3))
+ .modal-buttons, .following-config-method-buttons
+ padding: 0 20px 20px 0
+ float: right
+ .modal-content
+ padding: 20px
+ .post-data
+ border: 1px solid $bloc-background-color
+ position: relative
+ padding: 10px
+ background: white
+ .modal-header
+ @extend .modal-header
+ h3 span
+ padding-left: 5px
+ color: white
+ &:hover
+ cursor: default
+
+
+
+/************ FOLLOWING-CONFIG MODAL **********/
+
+.prompt-wrapper.following-config-modal
+ margin-top: -100px
+ .modal-buttons
+ display: none
+ h2
+ text-transform: none
+ display: inline-block!important
+ font-size: 1rem
+ font-weight: 400
+ padding: $space
+ span
+ display: inline-block!important
+ b
+ font-weight: 400
+
+
+
+/************ RETWIST POSTS MODAL **********/
+
+.prompt-wrapper.reTwist
+ &.prompt-wrapper
+ margin-top: -110px
+
+ .post-expand, .post-interactions
+ display: none
+ .post-info-time
+ position: static
+ float: right
+
+
+/********* REPLY POSTS MODAL***************/
+
+.prompt-wrapper.reply
+ &.prompt-wrapper
+ margin-top: -110px
+ .modal-buttons, .post-expand, .post-interactions
+ display: none
+ .post-area
+ padding-bottom: 6px
\ No newline at end of file
diff --git a/sass/layout/_responsive.sass b/sass/layout/_responsive.sass
index 62bc41f..69a1554 100644
--- a/sass/layout/_responsive.sass
+++ b/sass/layout/_responsive.sass
@@ -1,15 +1,23 @@
-@media (max-width:1200px)
-
+@media (max-width: $site-width)
.right
display: none
.userMenu
ul
padding: 0
- .postboard
- width: 85%
+ .postboard, #postboard-top.onTop
+ position: absolute
+ left: 135px
+ right: 20px
+ width: auto
+
.modal-wrapper
width: 85%
+ .postboard
+ width: $postboardWidth
+ float: left
+ position: relative
+ left: 0
@media (max-width: 600px)
diff --git a/sass/layout/_wrapper.sass b/sass/layout/_wrapper.sass
new file mode 100644
index 0000000..cd73375
--- /dev/null
+++ b/sass/layout/_wrapper.sass
@@ -0,0 +1,48 @@
+
+
+
+/* Wrapper and blocks */
+.wrapper
+ width: $site-width
+ max-width: 100%
+ margin: auto
+ padding-top: $menu-height + $gut/2
+ position: relative
+ z-index: 1
+ @extend .clear-fix
+.dashboard
+ &.left
+ top: $menu-height
+ float: left
+ width: $leftWidth
+ min-height: 700px
+ > .module
+ width: $miniProfileWidth
+ position: fixed
+ top: $menu-height + $gut/2
+
+ &.right
+ float: left
+ top: $menu-height
+ overflow: hidden
+ width: $rightWidth
+ padding-left: 20px
+ padding-right: 3px
+ > .module
+ width: 100%
+ margin-bottom: 20px
+ background: $bloc-light-color
+ width: 100%
+
+ +box-shadow(1px 2px 2px rgba(#111, 0.1))
+ @extend .clear-fix
+ h3
+ float: left
+ padding: 10px
+ h4
+ clear: left
+ border-top: 1px solid $main-background-color
+ padding: 7px 10px
+ font-size: 90%
+ small
+ display: none
\ No newline at end of file
diff --git a/sass/pages/_following.sass b/sass/pages/_following.sass
index d407076..3adfdba 100644
--- a/sass/pages/_following.sass
+++ b/sass/pages/_following.sass
@@ -1,8 +1,8 @@
.following
- width: 40%
- margin-left: 30%
- padding: 20px
+ width: 55%
+ margin-left: 15%
+ padding: 7px 20px
h2
display: none
.following-list li
diff --git a/sass/style.sass b/sass/style.sass
index cbd211e..149628b 100755
--- a/sass/style.sass
+++ b/sass/style.sass
@@ -10,6 +10,7 @@
// layout
@import 'layout/_menu'
+@import 'layout/_wrapper'
@import 'layout/_modal'
@import 'layout/_profile'
@import 'layout/_postboard'
@@ -38,7 +39,7 @@
font-size: .9em
transition: color .1s linear
&.disabled
- background: #F4F3F2
+ background: $bloc-background-color
&.active, &.active span
color: $defaut-font-color
cursor: default
@@ -52,50 +53,6 @@
-/* Wrapper and blocks */
-.wrapper
- width: 100%
- max-width: 100%
- margin: auto
- padding-top: $menu-height
- position: relative
- z-index: 1
-
-.dashboard
- &.left
- position: absolute
- top: $menu-height
- left: 0
- width: 15%
- > .module
- float: right
- width: $usr-img * 2
- &.right
- position: fixed
- right: 0
- top: $menu-height
- overflow: hidden
- width: 30%
-
- > .module
- max-width: 320px
- margin-bottom: 20px
- background: $bloc-light-color
- width: 100%
- @extend .box-shadow
- @extend .clear-fix
- h3
- float: left
- padding: 20px
- h4
- clear: left
- border-top: 1px solid $main-background-color
- padding: 10px
- small
- display: none
-
-
-
/********** CONFIG SUBMENU & SEARCH RESULTS ************/
@@ -159,8 +116,10 @@ ul.userMenu-search-profiles
.mini-profile-photo
width: $mini-usr-img
height: auto
- margin: 10px
+ min-height: $mini-usr-img
+ margin: 5px
float: left
+ overflow-x: hidden
.mini-profile-info
width: 100%
float: none
@@ -204,8 +163,10 @@ ul.userMenu-search-profiles
/***************** MINI PROFILE *******************************/
.mini-profile
- @extend .box-shadow
-
+
+ a:hover
+ text-decoration: none
+
a.button
background: $main-color-light
margin: 1em auto
@@ -227,7 +188,7 @@ ul.userMenu-search-profiles
text-align: center
@extend .clear-fix
border-top: 1px solid $main-background-color
- background: #F4F3F2
+ background: $bloc-background-color
li
+box-sizing(border-box)
@@ -261,9 +222,8 @@ ul.userMenu-search-profiles
.messages-qtd
position: absolute
- top: 50%
- margin-top: -11px
- right: 11px
+ top: 5px
+ right: 5px
background: $main-color-color
+text-shadow(1px 1px 0 rgba(#000,.2))
color: #fff
@@ -276,6 +236,8 @@ ul.userMenu-search-profiles
.mini-profile-view
display: none
+.left .mini-profile-info
+ padding-top: 32px
.mini-profile-name
color: $dark-grey
@@ -293,7 +255,7 @@ ul.userMenu-search-profiles
width: $usr-img
height: auto
display: block
- margin: 32px auto 0 auto
+ margin: auto
@@ -350,14 +312,14 @@ ul.userMenu-search-profiles
float: right
color: $dark-grey
-.mini-follower-link
+.mini-follower-link, .followed-by
display: inline-block
margin: 1px
line-height: 12px
&.isFollowing:after
display: none
&:after
- content: '·'
+ content: ''
font-weight: 900
color: $main-color-dark
margin-left: 1px
@@ -390,60 +352,19 @@ ul.userMenu-search-profiles
.mini-profile .post-area
display: none
-#postboard-top
- clear: both
- position: relative
- @extend .clear-fix
- margin-bottom: 10px
- transition: height .3s linear
- padding: 10px
- background: white
- overflow: hidden
- background: $bloc-light-color
- +box-shadow(0 0 13px rgba(#111, 0))
- +transition-property(box-shadow)
- +transition-duration(.2s)
- +transition-timing-function(ease-out)
- &.on
- +box-shadow(0 8px 13px rgba(#111, 0.2))
- z-index: 120
- &.hide
- display: none!important
- &.show
- display: block
- .profile-photo
- position: absolute
- top: 10px
- left: 10px
- width: $mini-usr-img
- img
- width: 100%
- .post-area
- overflow: hidden
- @extend .clear-fix
- width: 100%
- padding-left: 58px
- padding-right: 0
- display: inline
- +box-sizing(border-box)
- background: none
- float: right
- .post-area-new
- @extend .open
- +box-shadow(none)
- textarea
- margin: 0 0 10px 0
#post-preview
- background: $bloc-background-color
border: 1px solid $main-background-color
- padding: 15px
+ border-bottom: 0
+ padding: 5px
+transition-property(all)
+transition-duration(.1s)
width: 100%!important
+ font-size: 90%
word-wrap: break-word
+ clear: left
@@ -494,9 +415,6 @@ textarea.splited-post
display: none
&:hover button
display: block
- .bio
- text-align: left!important
-
small
display: none
@@ -507,21 +425,6 @@ textarea.splited-post
@extend .clear-fix
clear: both
-.twister-user
- position: relative
- box-sizing: border-box
- background: $bloc-light-color
- @extend .clear-fix
- border-top: 1px solid $main-background-color
- width: 100%
- min-height: auto
- padding: 10px 0
- clear: left
- +transition-property(background)
- +transition-duration(.1s)
- @extend .clear-fix
- &:hover
- background: white
@@ -531,29 +434,29 @@ img.twister-user-photo
float: left
width: $mini-usr-img
height: auto
- margin: 0 10px
- background: $main-background-color
+ margin: 0 10px 0 0
.followers
font-size: 12px
- color: $dark-grey
label, a
display: inline-block
.followed-by
- color: $main-color-light
font-size: 12px
cursor: pointer
display: block
.twister-user-name, .twister-by-user-name
- font-weight: bold
+ font-weight: 500
font-size: 14px
- color: $main-color-light
text-decoration: none
+ color: $main-color-dark
+.twister-user-name
+ font-weight: 700
+
.twister-user-tag
font-size: 12px
@@ -666,9 +569,6 @@ img.twister-user-photo
/******* LOADER *************/
-
-
-
.postboard-loading, .loading-roller
font-size: 100px
width: .4em