twisterarmy
/
theme_nin
mirror of https://github.com/twisterarmy/theme_nin.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Cleaning .sass

nin-v2
Mylene 9 years ago
parent
c10d6892a2
commit
087d4f41d0
11 changed files with 194 additions and 212 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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 *******/

Write Preview
Loading…
Cancel
Save