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 @@
+
+
+
+
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