Browse Source

Cleaning .sass

nin-v2
Mylene 9 years ago
parent
commit
087d4f41d0
  1. 235
      css/style.css
  2. 6
      sass/base/_commons.sass
  3. 6
      sass/base/_utils.sass
  4. 16
      sass/base/_var.sass
  5. 4
      sass/layout/_menu.sass
  6. 56
      sass/layout/_modal.sass
  7. 10
      sass/layout/_postboard.sass
  8. 4
      sass/layout/_profile.sass
  9. 1
      sass/layout/_tabs.sass
  10. 16
      sass/pages/_following.sass
  11. 52
      sass/style.sass

235
css/style.css

@ -249,56 +249,56 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
.col.last, .following, .following-list li.last, .following-list li.following, .following-list li:nth-child(4n), .following-list li.dashboard.right, .following-list .network.singleBlock li.module:nth-child(4n), .network.singleBlock .following-list li.module:nth-child(4n), .login .last.module, .login .module.following, .login .module.dashboard.right, .network.singleBlock .last.module, .network.singleBlock .module.following, .network.singleBlock .module:last-child, .network.singleBlock .module.dashboard.right, .network.singleBlock .module.twister-user:nth-child(4n), .col.dashboard.right, .dashboard.right.following, .dashboard.right.twister-user, .last.twister-user, .twister-user:nth-child(4n) { .col.last, .following, .following-list li.last, .following-list li.following, .following-list li:nth-child(4n), .following-list .network.singleBlock li.module:nth-child(4n), .network.singleBlock .following-list li.module:nth-child(4n), .login .last.module, .login .module.following, .network.singleBlock .last.module, .network.singleBlock .module.following, .network.singleBlock .module:last-child, .network.singleBlock .module.twister-user:nth-child(4n), .last.twister-user, .twister-user:nth-child(4n) {
margin-right: 0; margin-right: 0;
} }
.col-1 { .col-1 {
width: 6.04167%; width: 1.875%;
} }
.col-2 { .col-2 {
width: 14.58333%; width: 6.25%;
} }
.col-3, .following-list li, .twister-user { .col-3, .following-list li, .twister-user {
width: 23.125%; width: 10.625%;
} }
.col-4 { .col-4 {
width: 31.66667%; width: 15%;
} }
.col-5 { .col-5 {
width: 40.20833%; width: 19.375%;
} }
.col-6, .login .module, .network.singleBlock .module { .col-6, .login .module, .network.singleBlock .module {
width: 48.75%; width: 23.75%;
} }
.col-7 { .col-7 {
width: 57.29167%; width: 28.125%;
} }
.col-8 { .col-8 {
width: 65.83333%; width: 32.5%;
} }
.col-9, .following { .col-9, .following {
width: 74.375%; width: 36.875%;
} }
.col-10 { .col-10 {
width: 82.91667%; width: 41.25%;
} }
.col-11 { .col-11 {
width: 91.45833%; width: 45.625%;
} }
.col-12 { .col-12 {
width: 100%; width: 50%;
} }
/* FONTS */ /* FONTS */
@ -307,6 +307,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
list-style: none;
} }
html, body { html, body {
@ -319,13 +320,13 @@ html, body {
html { html {
font-size: 15px; font-size: 15px;
background-color: #e9e9e9; background-color: #dddddd;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIvPjxzdG9wIG9mZnNldD0iMjUlIiBzdG9wLWNvbG9yPSIjZTllOWU5Ii8+PHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNlOWU5ZTkiLz48c3RvcCBvZmZzZXQ9Ijc1JSIgc3RvcC1jb2xvcj0iI2U5ZTllOSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2FhYWFhYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjEuMCIgeDI9IjEuMCIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjxzdG9wIG9mZnNldD0iNTAlIiBzdG9wLWNvbG9yPSIjZGRkZGRkIi8+PHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g');
background-size: 100%; background-size: 100%;
background-image: -webkit-gradient(linear, 0% 100%, 100% 0%, color-stop(0%, #aaaaaa), color-stop(25%, #e9e9e9), color-stop(50%, #e9e9e9), color-stop(75%, #e9e9e9), color-stop(100%, #aaaaaa)); background-image: -webkit-gradient(linear, 0% 100%, 100% 0%, color-stop(0%, #ffffff), color-stop(50%, #dddddd), color-stop(100%, #ffffff));
background-image: -moz-linear-gradient(bottom, #aaaaaa, #e9e9e9, #e9e9e9, #e9e9e9, #aaaaaa); background-image: -moz-linear-gradient(bottom, #ffffff, #dddddd, #ffffff);
background-image: -webkit-linear-gradient(bottom, #aaaaaa, #e9e9e9, #e9e9e9, #e9e9e9, #aaaaaa); background-image: -webkit-linear-gradient(bottom, #ffffff, #dddddd, #ffffff);
background-image: linear-gradient(to top right, #aaaaaa, #e9e9e9, #e9e9e9, #e9e9e9, #aaaaaa); background-image: linear-gradient(to top right, #ffffff, #dddddd, #ffffff);
background-attachment: fixed; background-attachment: fixed;
} }
@ -357,6 +358,10 @@ strong, b {
font-weight: 600; font-weight: 600;
} }
img {
background: #222;
}
h1 { h1 {
font-size: 1.1em; font-size: 1.1em;
text-transform: uppercase; text-transform: uppercase;
@ -407,13 +412,13 @@ h3 .isFollowing:after {
display: none; display: none;
} }
.box-shadow, .modal-wrapper, .prompt-wrapper, .open, .mini-profile .post-area-new, #postboard-top .post-area .post-area-new, .dialog-modal, .mini-profile, .who-to-follow.module, .toptrends.module, .twistday-reminder, ul.dropdown-menu { .box-shadow, .modal-wrapper, .prompt-wrapper, .open, .mini-profile .post-area-new, #postboard-top .post-area .post-area-new, .dialog-modal, .mini-profile, .who-to-follow.module, ol.toptrends-list a, .twistday-reminder, ul.dropdown-menu {
-moz-box-shadow: 0 8px 13px rgba(51, 51, 51, 0.1); -moz-box-shadow: 0 8px 13px rgba(51, 51, 51, 0.1);
-webkit-box-shadow: 0 8px 13px rgba(51, 51, 51, 0.1); -webkit-box-shadow: 0 8px 13px rgba(51, 51, 51, 0.1);
box-shadow: 0 8px 13px rgba(51, 51, 51, 0.1); box-shadow: 0 8px 13px rgba(51, 51, 51, 0.1);
} }
.clear-fix:after, .col:after, .following:after, .following-list li:after, .login .module:after, .network.singleBlock .module:after, .twister-user:after, .userMenu ul:after, .modal-content:after, .modal-header:after, .direct-messages-thread .post:after, .twister-user-info:after, .forEdition.profile-card:after, .expanded-content:after, .mini-following-info:after, .network.singleBlock:after, .options .tab-content:after, .promoted-posts-only: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.module li:after, .who-to-follow ol:after, .twistday-reminder:after { .clear-fix:after, .col:after, .following:after, .following-list li:after, .login .module:after, .network.singleBlock .module:after, .twister-user:after, .userMenu ul:after, .modal-content:after, .modal-header:after, .direct-messages-thread .post:after, .mini-following-info a:after, .twister-user-info:after, .forEdition.profile-card:after, .expanded-content:after, .network.singleBlock:after, .options .tab-content:after, .promoted-posts-only: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.module li:after, .who-to-follow ol:after, .twistday-reminder:after {
content: ""; content: "";
display: table; display: table;
clear: both; clear: both;
@ -460,13 +465,13 @@ button.disabled:hover, .mini-profile-actions span.disabled:hover, a.button.disab
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, .modal-content .mini-profile-actions span.postboard-news, .mini-profile-actions .modal-content span.postboard-news, button.follow, .mini-profile-actions span.follow, .mini-profile-actions span.color-1, a.button.color-1, .modal-content a.button.postboard-news, a.button.follow { button.color-1, .modal-content button.postboard-news, .modal-content .mini-profile-actions span.postboard-news, .mini-profile-actions .modal-content span.postboard-news, button.follow, .mini-profile-actions span.follow, .mini-profile-actions span.color-1, a.button.color-1, .modal-content a.button.postboard-news, a.button.follow {
background: #00AA8B; background: #B4C669;
border-color: #009076; border-color: #abbf57;
color: white; color: white;
font-weight: 500; font-weight: 500;
} }
button.color-1:hover, .modal-content button.postboard-news:hover, .modal-content .mini-profile-actions span.postboard-news:hover, .mini-profile-actions .modal-content span.postboard-news:hover, button.follow:hover, .mini-profile-actions span.follow:hover, .mini-profile-actions span.color-1:hover, a.button.color-1:hover, .modal-content a.button.postboard-news:hover, a.button.follow:hover { button.color-1:hover, .modal-content button.postboard-news:hover, .modal-content .mini-profile-actions span.postboard-news:hover, .mini-profile-actions .modal-content span.postboard-news:hover, button.follow:hover, .mini-profile-actions span.follow:hover, .mini-profile-actions span.color-1:hover, a.button.color-1:hover, .modal-content a.button.postboard-news:hover, a.button.follow:hover {
border-color: #005d4c; border-color: #90a43e;
} }
button.color-2, button.unfollow, .mini-profile-actions span.unfollow, .mini-profile-actions span.color-2, a.button.color-2, a.button.unfollow { button.color-2, button.unfollow, .mini-profile-actions span.unfollow, .mini-profile-actions span.color-2, a.button.color-2, a.button.unfollow {
background: #C3C3C3; background: #C3C3C3;
@ -490,7 +495,7 @@ button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-f
height: 50px; height: 50px;
left: 0; left: 0;
margin: 0; margin: 0;
background-color: #F5F5F5; background-color: #555555;
z-index: 2; z-index: 2;
} }
.userMenu ul { .userMenu ul {
@ -513,7 +518,7 @@ button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-f
line-height: 50px; line-height: 50px;
padding: 0 0.5em; padding: 0 0.5em;
display: inline-block; display: inline-block;
color: rgba(68, 68, 68, 0.7) !important; color: rgba(255, 255, 255, 0.7) !important;
font-size: 1em; font-size: 1em;
position: relative; position: relative;
font-weight: 500; font-weight: 500;
@ -522,10 +527,10 @@ button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-f
box-sizing: border-box; box-sizing: border-box;
} }
.userMenu ul li > a:hover { .userMenu ul li > a:hover {
color: #444 !important; color: white !important;
} }
.userMenu ul li.current a { .userMenu ul li.current a {
color: #444 !important; color: white !important;
} }
/* Menu specific entries */ /* Menu specific entries */
@ -565,10 +570,10 @@ button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-f
float: right; float: right;
position: relative; position: relative;
margin-right: 0; margin-right: 0;
color: #444; color: white;
} }
.userMenu li.userMenu-config + a, .userMenu li.userMenu-search + a { .userMenu li.userMenu-config + a, .userMenu li.userMenu-search + a {
color: #596073; color: #222;
} }
.userMenu li.userMenu-search { .userMenu li.userMenu-search {
margin: 3px; margin: 3px;
@ -580,7 +585,7 @@ button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-f
padding: 7px; padding: 7px;
} }
.userMenu li.userMenu-search > input:focus { .userMenu li.userMenu-search > input:focus {
border-color: #596073; border-color: #222;
} }
.userMenu li.userMenu-config > a { .userMenu li.userMenu-config > a {
font-size: 1.5rem; font-size: 1.5rem;
@ -595,7 +600,7 @@ button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-f
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
height: 100%; height: 100vh;
right: 0; right: 0;
bottom: 0; bottom: 0;
overflow: hidden; overflow: hidden;
@ -615,8 +620,9 @@ button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-f
} }
.modal-content { .modal-content {
background: #f3f3f3; overflow: hidden;
overflow-y: auto; overflow-y: auto;
background: #f6f6f6;
} }
.modal-content .postboard-news { .modal-content .postboard-news {
position: absolute; position: absolute;
@ -630,12 +636,11 @@ button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-f
.modal-header { .modal-header {
position: relative; position: relative;
background: #00AA8B; background: #222;
height: 50px; height: 50px;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1px solid #f3f3f3;
} }
.modal-header h3 { .modal-header h3 {
padding-left: 20px; padding-left: 20px;
@ -702,6 +707,7 @@ button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-f
position: relative; position: relative;
width: 100%; width: 100%;
margin: auto; margin: auto;
background: #dddddd;
} }
.modal-content .postboard h2 { .modal-content .postboard h2 {
display: block; display: block;
@ -751,12 +757,6 @@ button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-f
text-transform: none; text-transform: none;
} }
.following-config-method-buttons .public-following {
background-color: #B4C669;
margin: 0px 2px;
padding: 6px 16px;
}
/************ RETWIST POSTS MODAL ********* */ /************ RETWIST POSTS MODAL ********* */
.prompt-wrapper.reTwist.prompt-wrapper { .prompt-wrapper.reTwist.prompt-wrapper {
margin-top: -110px; margin-top: -110px;
@ -764,9 +764,6 @@ button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-f
.prompt-wrapper.reTwist .modal-content { .prompt-wrapper.reTwist .modal-content {
padding: 20px 15px; padding: 20px 15px;
} }
.prompt-wrapper.reTwist .modal-buttons .modal-propagate {
background-color: #B4C669;
}
.prompt-wrapper.reTwist .post-expand, .prompt-wrapper.reTwist .post-interactions { .prompt-wrapper.reTwist .post-expand, .prompt-wrapper.reTwist .post-interactions {
display: none; display: none;
} }
@ -786,7 +783,7 @@ button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-f
.modal-wrapper.directMessages .post-area-new { .modal-wrapper.directMessages .post-area-new {
display: none; display: none;
z-index: 5; z-index: 5;
background: #e9e9e9; background: #dddddd;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
@ -949,16 +946,31 @@ button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-f
} }
/****** FOLLOWING MODAL****** */ /****** FOLLOWING MODAL****** */
.modal-wrapper.following-modal .modal-content { .modal-wrapper.following-modal h2 {
padding: 0; display: none;
} }
.modal-wrapper.following-modal ol {
margin: 5px; .mini-following-info {
border-bottom: 1px solid #dddddd;
line-height: 45px;
} }
.modal-wrapper.following-modal .open-profile-modal:hover { .mini-following-info a {
text-decoration: none; display: block;
padding: 10px;
width: 100%;
color: #444;
}
.mini-following-info a:hover {
background: white;
}
.mini-following-info .mini-profile-photo {
height: 48px;
width: 48px;
line-height: 0;
margin: 0 1rem 0 0;
float: left;
} }
.modal-wrapper.following-modal .postboard h2 { .mini-following-info .mini-screen-name {
display: none; display: none;
} }
@ -1044,7 +1056,6 @@ button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-f
.profile-card { .profile-card {
width: 100%; width: 100%;
background: white; background: white;
border-bottom: 1px solid #f3f3f3;
padding: 15px; padding: 15px;
} }
@ -1131,7 +1142,6 @@ button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-f
display: none; display: none;
margin: 0 15px 0 0; margin: 0 15px 0 0;
font-weight: 500; font-weight: 500;
background: #f3f3f3;
padding: 2px 8px 3px 8px; padding: 2px 8px 3px 8px;
-moz-border-radius: 2px; -moz-border-radius: 2px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
@ -1142,7 +1152,7 @@ button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-f
font-size: 13px; font-size: 13px;
line-height: 15px; line-height: 15px;
cursor: pointer; cursor: pointer;
color: #596073; color: #222;
} }
.bitmessage-ctc:hover, .tox-ctc:hover { .bitmessage-ctc:hover, .tox-ctc:hover {
color: #B4C669; color: #B4C669;
@ -1182,7 +1192,6 @@ button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-f
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
width: auto; width: auto;
background: #f3f3f3;
} }
.forEdition.profile-card .profile-card-main { .forEdition.profile-card .profile-card-main {
margin: 0; margin: 0;
@ -1191,7 +1200,6 @@ button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-f
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
padding: 10px; padding: 10px;
background: #f3f3f3;
} }
.forEdition.profile-card .profile-card-main input { .forEdition.profile-card .profile-card-main input {
display: block; display: block;
@ -1239,8 +1247,7 @@ button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-f
/************* POST BOARD ************ */ /************* POST BOARD ************ */
.postboard { .postboard {
float: left; width: 100%;
width: 50%;
padding: 20px; padding: 20px;
} }
.postboard h2 { .postboard h2 {
@ -1313,10 +1320,7 @@ button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-f
} }
.open, .mini-profile .post-area-new, #postboard-top .post-area .post-area-new { .open, .mini-profile .post-area-new, #postboard-top .post-area .post-area-new {
background: none; background: none !important;
}
.open:hover, .mini-profile .post-area-new:hover, #postboard-top .post-area .post-area-new:hover {
background: none;
} }
.post-photo { .post-photo {
@ -1374,7 +1378,7 @@ button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-f
padding: 0; padding: 0;
} }
.post-text samp { .post-text samp {
background: #f3f3f3; background: #eee;
font-size: 0.9rem; font-size: 0.9rem;
line-height: 0.9rem; line-height: 0.9rem;
display: inline-block; display: inline-block;
@ -1542,7 +1546,7 @@ button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-f
.user-name-tooltip { .user-name-tooltip {
display: none; display: none;
position: absolute; position: absolute;
background: #60677c; background: #2a2a2a;
font-size: 12px; font-size: 12px;
white-space: nowrap; white-space: nowrap;
padding: 3px 5px; padding: 3px 5px;
@ -1556,7 +1560,7 @@ button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-f
width: 0; width: 0;
left: 4px; left: 4px;
bottom: -5px; bottom: -5px;
border-top: solid 5px #60677c; border-top: solid 5px #2a2a2a;
border-left: solid 5px transparent; border-left: solid 5px transparent;
border-right: solid 5px transparent; border-right: solid 5px transparent;
} }
@ -1590,7 +1594,7 @@ button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-f
width: 64px; width: 64px;
height: 64px; height: 64px;
overflow: hidden; overflow: hidden;
background: #e9e9e9; background: #dddddd;
} }
.following .mini-profile-view { .following .mini-profile-view {
@ -1657,7 +1661,7 @@ button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-f
right: -2em; right: -2em;
transition: height 0.4s linear; transition: height 0.4s linear;
transition: padding-top 0.1s linear; transition: padding-top 0.1s linear;
background: #596073; background: #222;
z-index: 3; z-index: 3;
} }
.mini-profile-actions:hover ul { .mini-profile-actions:hover ul {
@ -1667,7 +1671,7 @@ button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-f
.mini-profile-actions ul li { .mini-profile-actions ul li {
text-align: left; text-align: left;
margin: 0; margin: 0;
background: #596073; background: #222;
white-space: nowrap; white-space: nowrap;
color: #aaa; color: #aaa;
font-size: 12px; font-size: 12px;
@ -1803,23 +1807,6 @@ button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-f
display: none !important; display: none !important;
} }
.mini-following-info {
width: 45px;
height: 45px;
text-align: center;
background: white;
margin: 1%;
float: left;
}
.mini-following-info .mini-screen-name, .mini-following-info .mini-following-name {
display: none;
}
.mini-following-info .mini-profile-photo {
height: 45px;
width: 45px;
border-radius: 0;
}
.login .header-bold { .login .header-bold {
display: block; display: block;
width: 720px; width: 720px;
@ -2018,14 +2005,13 @@ button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-f
margin: 0 5px 0 0; margin: 0 5px 0 0;
padding: 5px 15px; padding: 5px 15px;
color: #aaa; color: #aaa;
background: #f3f3f3;
} }
.options label.tabs:hover { .options label.tabs:hover {
color: #596073; color: #222;
} }
.options input:checked + label.tabs { .options input:checked + label.tabs {
background: white; background: white;
color: #596073; color: #222;
} }
.promoted-posts-only { .promoted-posts-only {
@ -2041,42 +2027,48 @@ button.small, .modal-wrapper.who-to-follow-modal button, .modal-wrapper.who-to-f
transition: color 0.1s linear; transition: color 0.1s linear;
} }
.promoted-posts-only li.active { .promoted-posts-only li.active {
color: #596073; color: #222;
background: white; background: white;
cursor: default; cursor: default;
} }
.promoted-posts-only li:hover, .promoted-posts-only li.disabled:hover { .promoted-posts-only li:hover, .promoted-posts-only li.disabled:hover {
color: #596073; color: #222;
} }
.promoted-posts-only li.disabled { .promoted-posts-only li.disabled {
color: #aaa; color: #aaa;
background: #f3f3f3; background: #C3C3C3;
} }
/* Wrapper and blocks */ /* Wrapper and blocks */
.wrapper { .wrapper {
width: 100%; width: 50%;
max-width: 100%; max-width: 100%;
margin: 0; margin: auto;
padding-top: 50px; padding-top: 50px;
position: relative; position: relative;
z-index: 1; z-index: 1;
min-height: 100%;
} }
.dashboard.left, .dashboard.right { .dashboard.left {
float: left; position: fixed;
top: 50px;
left: 0;
height: 100vh;
overflow: hidden;
width: 25%; width: 25%;
position: relative;
} }
.dashboard.right { .dashboard.right {
height: 0; position: fixed;
right: 0;
top: 50px;
overflow: hidden;
width: 25%;
} }
/********** CONFIG SUBMENU & SEARCH RESULTS *********** */ /********** CONFIG SUBMENU & SEARCH RESULTS *********** */
.dialog-modal { .dialog-modal {
display: none; display: none;
background: #596073; background: #222;
position: absolute; position: absolute;
top: 45px; top: 45px;
right: -10px; right: -10px;
@ -2104,7 +2096,7 @@ ul.userMenu-search-profiles li {
display: block; display: block;
padding: 5px 10px; padding: 5px 10px;
margin: 0; margin: 0;
border-bottom: 1px solid #e9e9e9; border-bottom: 1px solid #dddddd;
} }
ul.userMenu-search-profiles .mini-profile-name { ul.userMenu-search-profiles .mini-profile-name {
font-size: 12px; font-size: 12px;
@ -2141,7 +2133,7 @@ ul.userMenu-search-profiles button .follow, ul.userMenu-search-profiles .mini-pr
background-color: #B4C669; background-color: #B4C669;
} }
ul.userMenu-search-profiles button .unfollow, ul.userMenu-search-profiles .mini-profile-actions span .unfollow, .mini-profile-actions ul.userMenu-search-profiles span .unfollow { ul.userMenu-search-profiles button .unfollow, ul.userMenu-search-profiles .mini-profile-actions span .unfollow, .mini-profile-actions ul.userMenu-search-profiles span .unfollow {
background-color: #596073; background-color: #222;
} }
.userMenu-search input[type="text"] { .userMenu-search input[type="text"] {
@ -2175,7 +2167,6 @@ ul.userMenu-search-profiles button .unfollow, ul.userMenu-search-profiles .mini-
margin-top: 1px; margin-top: 1px;
margin-bottom: 20px; margin-bottom: 20px;
padding: 0.5em; padding: 0.5em;
background: #f3f3f3;
} }
.mini-profile .post-area-new { .mini-profile .post-area-new {
-moz-box-shadow: none; -moz-box-shadow: none;
@ -2191,7 +2182,9 @@ ul.userMenu-search-profiles button .unfollow, ul.userMenu-search-profiles .mini-
.mini-profile-indicators { .mini-profile-indicators {
margin: 0; margin: 0;
text-align: center; text-align: center;
background-color: #fdfdfd; border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
background: white;
} }
.mini-profile-indicators li { .mini-profile-indicators li {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
@ -2200,7 +2193,12 @@ ul.userMenu-search-profiles button .unfollow, ul.userMenu-search-profiles .mini-
display: block; display: block;
position: relative; position: relative;
font-size: 0.8em; font-size: 0.8em;
border-top: 1px solid #e9e9e9; width: 33.3%;
float: left;
border-right: 1px solid #dddddd;
}
.mini-profile-indicators li:last-child {
border: none;
} }
.mini-profile-indicators li a { .mini-profile-indicators li a {
color: #444; color: #444;
@ -2210,9 +2208,6 @@ ul.userMenu-search-profiles button .unfollow, ul.userMenu-search-profiles .mini-
.mini-profile-indicators li a:hover { .mini-profile-indicators li a:hover {
text-decoration: underline; text-decoration: underline;
} }
.mini-profile-indicators li a:before {
display: none !important;
}
.messages-qtd { .messages-qtd {
position: absolute; position: absolute;
@ -2288,9 +2283,6 @@ ul.userMenu-search-profiles button .unfollow, ul.userMenu-search-profiles .mini-
display: inline-block; display: inline-block;
padding-right: 5px; padding-right: 5px;
} }
.profile-data li a:last-child {
display: none;
}
.mini-profile-info a:hover { .mini-profile-info a:hover {
text-decoration: none; text-decoration: none;
@ -2303,7 +2295,6 @@ ul.userMenu-search-profiles button .unfollow, ul.userMenu-search-profiles .mini-
text-align: center; text-align: center;
padding: 10px; padding: 10px;
font-size: 12px; font-size: 12px;
background: white;
z-index: 10; z-index: 10;
-moz-transition: all 0.2s linear; -moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear; -o-transition: all 0.2s linear;
@ -2330,7 +2321,7 @@ ul.userMenu-search-profiles button .unfollow, ul.userMenu-search-profiles .mini-
.mini-follower-link:after { .mini-follower-link:after {
content: "·"; content: "·";
font-weight: 900; font-weight: 900;
color: #596073; color: #222;
margin-left: 1px; margin-left: 1px;
} }
@ -2450,7 +2441,7 @@ textarea.splited-post {
.who-to-follow.module li { .who-to-follow.module li {
width: 100%; width: 100%;
min-height: auto; min-height: auto;
border-bottom: 1px solid #e9e9e9; border-bottom: 1px solid #dddddd;
margin: 0; margin: 0;
padding-bottom: 10px; padding-bottom: 10px;
margin-top: 10px; margin-top: 10px;
@ -2479,7 +2470,6 @@ textarea.splited-post {
background: white; background: white;
width: 100%; width: 100%;
min-height: auto; min-height: auto;
border-bottom: 1px solid #f3f3f3;
} }
img.twister-user-photo { img.twister-user-photo {
@ -2494,7 +2484,7 @@ img.twister-user-photo {
width: 48px; width: 48px;
height: 48px; height: 48px;
margin: 10px; margin: 10px;
background: #e9e9e9; background: #dddddd;
} }
.followers { .followers {
@ -2548,7 +2538,7 @@ img.twister-user-photo {
} }
.refresh-toptrends, .twistday-reminder .refresh, .refresh-users { .refresh-toptrends, .twistday-reminder .refresh, .refresh-users {
color: #596073; color: #222;
cursor: pointer; cursor: pointer;
font-size: 11px; font-size: 11px;
font-weight: 500; font-weight: 500;
@ -2562,7 +2552,7 @@ img.twister-user-photo {
} }
.view-all-users { .view-all-users {
color: #596073; color: #222;
cursor: pointer; cursor: pointer;
font-size: 11px; font-size: 11px;
font-weight: 500; font-weight: 500;
@ -2584,8 +2574,7 @@ img.twister-user-photo {
/***********TOP TRENDS************** */ /***********TOP TRENDS************** */
.toptrends.module { .toptrends.module {
margin: 0 0 20px 0; margin: 0 0 20px 0;
background: white; padding: 0 20px;
padding: 20px;
} }
.toptrends small { .toptrends small {
display: none; display: none;
@ -2606,15 +2595,15 @@ ol.toptrends-list a {
color: #aaa; color: #aaa;
padding: 3px 8px; padding: 3px 8px;
display: inline-block; display: inline-block;
background: #f3f3f3;
text-transform: uppercase; text-transform: uppercase;
font-size: 11px; font-size: 11px;
margin: 3px; margin: 3px;
font-weight: 500; font-weight: 500;
background: white;
} }
ol.toptrends-list a:hover { ol.toptrends-list a:hover {
background: white; background: rgba(255, 255, 255, 0.4);
color: #596073; color: #222;
} }
/********* TWISTDAY REMINDER ****** */ /********* TWISTDAY REMINDER ****** */

6
sass/base/_commons.sass

@ -1,6 +1,7 @@
* *
outline: none!important outline: none!important
+box-sizing(border-box) +box-sizing(border-box)
list-style: none
html, body html, body
@ -13,7 +14,7 @@ html, body
html html
font-size: $global-font-size font-size: $global-font-size
background-color: $main-background-color background-color: $main-background-color
+background-image(linear-gradient(to top right, #aaa, $main-background-color,$main-background-color,$main-background-color, #aaa) ) +background-image(linear-gradient(to top right, #fff, $main-background-color, #fff) )
background-attachment: fixed background-attachment: fixed
body body
@ -40,6 +41,9 @@ i, em
strong, b strong, b
font-weight: 600 font-weight: 600
img
background: $main-color-dark
h1 h1
font-size: 1.1em font-size: 1.1em
text-transform: uppercase text-transform: uppercase

6
sass/base/_utils.sass

@ -42,12 +42,12 @@ button, a.button
color: #666 color: #666
+box-shadow(1px 1px 0 rgba(#444, .3)) +box-shadow(1px 1px 0 rgba(#444, .3))
&.color-1 &.color-1
background: $color-blue background: $main-color-color
border-color: darken($color-blue, 5%) border-color: darken($main-color-color, 5%)
color: white color: white
font-weight: 500 font-weight: 500
&:hover &:hover
border-color: darken($color-blue, 15%) border-color: darken($main-color-color, 15%)
&.color-2 &.color-2
background: #C3C3C3 background: #C3C3C3
border-color: darken(#C3C3C3, 5%) border-color: darken(#C3C3C3, 5%)

16
sass/base/_var.sass

@ -4,7 +4,7 @@
// G R I D // G R I D
$grid_width : 100% // grid width % $grid_width : 50% // grid width %
$grid_max_width : 100% // max width $grid_max_width : 100% // max width
$grid_cols : 12 // cols number $grid_cols : 12 // cols number
$grid_gut : 2.5% // gut width % $grid_gut : 2.5% // gut width %
@ -31,22 +31,20 @@ $gut-width : $grid_gut
$space : 1rem $space : 1rem
// colors // colors
$light-grey: #e9e9e9 $light-grey: #C3C3C3
$dark-blue: #38434E
$color-yellow: #E6953C
$color-pink: #BF6B6C
$color-green: #B4C669 $color-green: #B4C669
$color-red: #EF5D43 $color-red: #EF5D43
$color-blue: #00AA8B $color-blue: #39434F
$dark-grey : #444 $dark-grey : #444
$main-color-light: #aaa $main-color-light: #aaa
$main-color-dark: #596073 $main-color-dark: #222
$main-color-color: $color-green $main-color-color: $color-green
$main-background-color: $light-grey $main-background-color: lighten($light-grey, 10% )
$bloc-light-color : lighten($light-grey, 20% )
$bloc-background-color: white $bloc-background-color: white
$background-light: lighten($main-background-color, 4% )
$defaut-font-color: $dark-grey $defaut-font-color: $dark-grey

4
sass/layout/_menu.sass

@ -1,7 +1,7 @@
// vars for the menu // vars for the menu
$menu-height : 50px $menu-height : 50px
$menu-font-color: $defaut-font-color $menu-font-color: white
.userMenu .userMenu
width: 100% width: 100%
@ -9,7 +9,7 @@ $menu-font-color: $defaut-font-color
height: $menu-height height: $menu-height
left: 0 left: 0
margin: 0 margin: 0
background-color: #F5F5F5 background-color: lighten($main-color-dark,20%)
//+background-image(radial-gradient(at top , $color-green,$color-blue) ) //+background-image(radial-gradient(at top , $color-green,$color-blue) )
z-index: 2 z-index: 2

56
sass/layout/_modal.sass

@ -15,7 +15,7 @@ $header-modal-height : $menu-height
position: fixed position: fixed
+box-sizing(border-box) +box-sizing(border-box)
@extend .box-shadow @extend .box-shadow
height: 100% height: 100vh
right: 0 right: 0
bottom: 0 bottom: 0
overflow: hidden overflow: hidden
@ -33,7 +33,7 @@ $header-modal-height : $menu-height
.modal-content .modal-content
@extend .clear-fix @extend .clear-fix
background: $background-light overflow: hidden
overflow-y: auto overflow-y: auto
.postboard-news .postboard-news
position: absolute position: absolute
@ -43,6 +43,7 @@ $header-modal-height : $menu-height
@extend .color-1 @extend .color-1
h2 span h2 span
display: none display: none
background: $bloc-light-color
@ -50,11 +51,10 @@ $header-modal-height : $menu-height
.modal-header .modal-header
position: relative position: relative
background: $color-blue background: $main-color-dark
height: $header-modal-height height: $header-modal-height
+box-sizing(border-box) +box-sizing(border-box)
@extend .clear-fix @extend .clear-fix
border-bottom: 1px solid $background-light
h3 h3
padding-left: 20px padding-left: 20px
@ -124,8 +124,10 @@ $header-modal-height : $menu-height
position: relative position: relative
width: 100% width: 100%
margin: auto margin: auto
background: $main-background-color
h2 h2
display: block display: block
.post-text .post-text
margin: 0 0 0 40px margin: 0 0 0 40px
.post-photo .post-photo
@ -166,11 +168,7 @@ $header-modal-height : $menu-height
display: none display: none
h2 h2
text-transform: none text-transform: none
.following-config-method-buttons
.public-following
background-color: $color-green
margin: 0px 2px
padding: 6px 16px
/************ RETWIST POSTS MODAL **********/ /************ RETWIST POSTS MODAL **********/
@ -179,9 +177,7 @@ $header-modal-height : $menu-height
margin-top: -110px margin-top: -110px
.modal-content .modal-content
padding: 20px 15px padding: 20px 15px
.modal-buttons
.modal-propagate
background-color: $color-green
.post-expand, .post-interactions .post-expand, .post-interactions
display: none display: none
@ -363,18 +359,32 @@ $header-modal-height : $menu-height
/****** FOLLOWING MODAL*******/ /****** FOLLOWING MODAL*******/
.modal-wrapper.following-modal .modal-wrapper.following-modal
h2
display: none
.mini-following-info
border-bottom: 1px solid $main-background-color
line-height: 45px
.modal-content a
padding: 0 display: block
ol padding: 10px
margin: 5px width: 100%
.open-profile-modal @extend .clear-fix
&:hover color: $defaut-font-color
text-decoration: none &:hover
.postboard background: $bloc-background-color
h2 .mini-profile-photo
display: none height: 48px
width: 48px
line-height: 0
margin: 0 $space 0 0
float: left
.mini-screen-name
display: none
/******* WHO TO FOLLOW MODAL*******/ /******* WHO TO FOLLOW MODAL*******/

10
sass/layout/_postboard.sass

@ -7,8 +7,7 @@ $avatar-width : 48px
.postboard .postboard
float: left width: 100%
width: 50%
padding: 20px padding: 20px
h2 h2
display: none display: none
@ -71,12 +70,9 @@ $avatar-width : 48px
.open .open
background: none background: none!important
@extend .box-shadow @extend .box-shadow
&:hover
background: none
.post-photo .post-photo
margin: 0 margin: 0
display: inline-block display: inline-block
@ -127,7 +123,7 @@ $avatar-width : 48px
min-height: $avatar-width min-height: $avatar-width
padding: 0 padding: 0
samp samp
background: $background-light background: #eee
font-size: .9rem font-size: .9rem
line-height: .9rem line-height: .9rem
display: inline-block display: inline-block

4
sass/layout/_profile.sass

@ -59,7 +59,6 @@ $modal-postboard-post-height: 100%
.profile-card .profile-card
width: 100% width: 100%
background: white background: white
border-bottom: 1px solid $background-light
padding: $modal-gut padding: $modal-gut
.profile-card-main .profile-card-main
position: relative position: relative
@ -146,7 +145,6 @@ $modal-postboard-post-height: 100%
display: none display: none
margin: 0 15px 0 0 margin: 0 15px 0 0
font-weight: 500 font-weight: 500
background: $background-light
padding: 2px 8px 3px 8px padding: 2px 8px 3px 8px
+border-radius(2px) +border-radius(2px)
@ -191,13 +189,11 @@ $modal-postboard-post-height: 100%
+box-sizing(border-box) +box-sizing(border-box)
@extend .clear-fix @extend .clear-fix
width: auto width: auto
background: $background-light
.profile-card-main .profile-card-main
margin: 0 margin: 0
width: 330px width: 330px
+box-sizing(border-box) +box-sizing(border-box)
padding: 10px padding: 10px
background: $background-light
input input
display: block display: block
margin: 5px auto margin: 5px auto

1
sass/layout/_tabs.sass

@ -61,7 +61,6 @@
margin: 0 5px 0 0 margin: 0 5px 0 0
padding: 5px 15px padding: 5px 15px
color: $main-color-light color: $main-color-light
background: $background-light
input:checked + label.tabs input:checked + label.tabs
background: $bloc-background-color background: $bloc-background-color

16
sass/pages/_following.sass

@ -15,6 +15,7 @@
@extend .last @extend .last
.following .mini-profile .following .mini-profile
margin-bottom: 10px margin-bottom: 10px
@ -225,18 +226,3 @@
.swarm-status .swarm-status
display: none!important display: none!important
.mini-following-info
width: 45px
height: 45px
text-align: center
background: $bloc-background-color
margin: 1%
float: left
&:after
@extend .clear-fix
.mini-screen-name, .mini-following-name
display: none
.mini-profile-photo
height: 45px
width: 45px
border-radius: 0

52
sass/style.sass

@ -47,7 +47,7 @@
color: $main-color-dark color: $main-color-dark
&.disabled &.disabled
color: $main-color-light color: $main-color-light
background: $background-light background: $light-grey
@ -56,22 +56,28 @@
/* Wrapper and blocks */ /* Wrapper and blocks */
.wrapper .wrapper
width: $site-width width: 50%
max-width: 100% max-width: 100%
margin: 0 margin: auto
padding-top: $menu-height padding-top: $menu-height
position: relative position: relative
z-index: 1 z-index: 1
min-height: 100%
.dashboard .dashboard
&.left, &.right &.left
float: left position: fixed
top: $menu-height
left: 0
height: 100vh
overflow: hidden
width: 25% width: 25%
position: relative
&.right &.right
@extend .last position: fixed
height: 0 right: 0
top: $menu-height
overflow: hidden
width: 25%
@ -182,7 +188,6 @@ ul.userMenu-search-profiles
margin-top: 1px margin-top: 1px
margin-bottom: 20px margin-bottom: 20px
padding: .5em padding: .5em
background: $background-light
@extend .clear-fix @extend .clear-fix
.post-area-new .post-area-new
@extend .open @extend .open
@ -196,14 +201,20 @@ ul.userMenu-search-profiles
margin: 0 margin: 0
text-align: center text-align: center
@extend .clear-fix @extend .clear-fix
background-color: lighten($background-light,4%) border-top: 1px solid $main-background-color
border-bottom: 1px solid $main-background-color
background: white
li li
+box-sizing(border-box) +box-sizing(border-box)
display: block display: block
position: relative position: relative
font-size: .8em font-size: .8em
border-top: 1px solid $main-background-color width: 33.3%
float: left
border-right: 1px solid $main-background-color
&:last-child
border: none
a a
color: $dark-grey color: $dark-grey
@ -212,8 +223,6 @@ ul.userMenu-search-profiles
&:hover &:hover
text-decoration: underline text-decoration: underline
&:before
display: none!important
.userMenu-connections a .userMenu-connections a
@extend .icon-bell @extend .icon-bell
@ -290,8 +299,7 @@ ul.userMenu-search-profiles
&.posts-count, &.following-count, &.followers-count &.posts-count, &.following-count, &.followers-count
display: inline-block display: inline-block
padding-right: 5px padding-right: 5px
&:last-child
display: none
.mini-profile-info a:hover .mini-profile-info a:hover
text-decoration: none text-decoration: none
@ -303,7 +311,6 @@ ul.userMenu-search-profiles
text-align: center text-align: center
padding: 10px padding: 10px
font-size: 12px font-size: 12px
background: lighten($background-light, 5%)
z-index: 10 z-index: 10
+transition(all .2s linear) +transition(all .2s linear)
@ -468,7 +475,6 @@ textarea.splited-post
@extend .col-3 @extend .col-3
width: 100% width: 100%
min-height: auto min-height: auto
border-bottom: 1px solid $background-light
&:nth-child(4n) &:nth-child(4n)
@extend .last @extend .last
@ -571,9 +577,7 @@ img.twister-user-photo
.toptrends .toptrends
&.module &.module
margin: 0 0 20px 0 margin: 0 0 20px 0
background: white padding: 0 20px
padding: 20px
@extend .box-shadow
small small
display: none display: none
h3 h3
@ -591,14 +595,14 @@ ol.toptrends-list
color: $main-color-light color: $main-color-light
padding: 3px 8px padding: 3px 8px
display: inline-block display: inline-block
background: $background-light
text-transform: uppercase text-transform: uppercase
font-size: 11px font-size: 11px
margin: 3px margin: 3px
font-weight: 500 font-weight: 500
background: white
@extend .box-shadow
&:hover &:hover
background: white background: rgba(white,.4)
color: $main-color-dark color: $main-color-dark
/********* TWISTDAY REMINDER *******/ /********* TWISTDAY REMINDER *******/

Loading…
Cancel
Save