Browse Source

more stuff

nin-v2
myleneb 9 years ago
parent
commit
8d70e256bd
  1. 237
      css/style.css
  2. 13
      js/theme_option.js
  3. 5
      sass/base/_commons.sass
  4. 15
      sass/base/_fonts.sass
  5. 6
      sass/base/_var.sass
  6. 9
      sass/layout/_dm.sass
  7. 15
      sass/layout/_menu.sass
  8. 6
      sass/layout/_modal.sass
  9. 21
      sass/layout/_postboard.sass
  10. 33
      sass/layout/_profile.sass
  11. 51
      sass/layout/_responsive.sass
  12. 6
      sass/layout/_wrapper.sass
  13. 11
      sass/pages/_network.sass
  14. 28
      sass/style.sass

237
css/style.css

@ -107,7 +107,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
font-weight: normal; font-weight: normal;
font-style: normal; font-style: normal;
} }
.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 { .ion:before, .userMenu li.userMenu-config > a:before, .modal-header span:before, .prompt-wrapper .modal-header span:before, .bitmessage-ctc:before, .tox-ctc:before, .profile-modal .profile-tox:before, .profile-modal .profile-bitmessage: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, .view-all-users:before, .ion-after:after, .isFollowing:after {
display: inline-block; display: inline-block;
font-family: "Ionicons"; font-family: "Ionicons";
speak: none; speak: none;
@ -121,11 +121,15 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.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 { .ion:before, .userMenu li.userMenu-config > a:before, .modal-header span:before, .prompt-wrapper .modal-header span:before, .bitmessage-ctc:before, .tox-ctc:before, .profile-modal .profile-tox:before, .profile-modal .profile-bitmessage: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, .view-all-users:before {
padding: 0 3px;
}
.ion:after, .userMenu li.userMenu-config > a:after, .modal-header span:after, .prompt-wrapper .modal-header span:after, .bitmessage-ctc:after, .tox-ctc:after, .profile-modal .profile-tox:after, .profile-modal .profile-bitmessage: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, .view-all-users:after, .ion-after:before, .isFollowing:before {
display: none; display: none;
} }
.ion-alert:before, .post-interactions span.post-favorite:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before { .ion-alert:before, .post-interactions span.post-favorite:before {
content: ""; content: "";
} }
@ -137,7 +141,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
content: ""; content: "";
} }
.ion-shuffle:before, .post-context span:before, .post-interactions span.post-propagate:before, .post-stats li.stat-count:before { .ion-shuffle:before, .post-context span:before, .post-interactions span.post-propagate:before, .post-stats li.stat-count:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before {
content: ""; content: "";
} }
@ -149,7 +153,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
content: ""; content: "";
} }
.ion-profile:before, .userMenu li.userMenu-profile a:before, .mini-profile-indicators .userMenu-user a:before { .ion-profile:before, .mini-profile-indicators .userMenu-user a:before {
content: ""; content: "";
} }
@ -177,14 +181,30 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
content: ""; content: "";
} }
.ion-home:before, .userMenu li.userMenu-home a:before { .ion-home:before {
content: ""; content: "";
} }
.ion-network:before, .userMenu li.userMenu-network a:before { .ion-network:before {
content: ""; content: "";
} }
.ion-eye:before, .view-all-users:before {
content: "";
}
.ion-tox:before, .profile-modal .profile-tox:before, .profile-modal .profile-bitmessage:before {
content: "";
}
.ion-copy:before, .bitmessage-ctc:before, .tox-ctc:before {
content: "";
}
.ion-search:after {
content: "";
}
/* FONTS */ /* FONTS */
* { * {
outline: none !important; outline: none !important;
@ -204,6 +224,8 @@ html, body {
html { html {
font-size: 15px; font-size: 15px;
background-color: #ddd; background-color: #ddd;
background-image: url('../img/bg.png?1438449671');
background-attachment: fixed;
} }
body { body {
@ -212,8 +234,6 @@ body {
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;
font-weight: 400; font-weight: 400;
overflow-y: scroll !important; overflow-y: scroll !important;
background-image: url('../img/bg.png?1438449671');
background-attachment: fixed;
} }
a { a {
@ -311,7 +331,7 @@ h3 .isFollowing:after {
box-shadow: 0 8px 13px rgba(17, 17, 17, 0); box-shadow: 0 8px 13px rgba(17, 17, 17, 0);
} }
.clear-fix:after, .userMenu > ul:after, .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 { .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, .network.singleBlock .module:after, .options .tab-content:after, ul.userMenu-search-profiles li:after, .mini-profile .post-area:after, .mini-profile-indicators:after, .profile-data:after {
content: ""; content: "";
display: table; display: table;
clear: both; clear: both;
@ -398,7 +418,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
left: 0; left: 0;
margin: 0; margin: 0;
background-color: #3E3C42; background-color: #3E3C42;
z-index: 2; z-index: 40;
} }
.userMenu > ul { .userMenu > ul {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
@ -407,13 +427,13 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
max-width: 100%; max-width: 100%;
width: 1200px; width: 1200px;
margin: auto; margin: auto;
background: url('../img/logo.png?1437893891') no-repeat 50% 50%; background: url('../img/logo.png?1438462463') no-repeat 50% 50%;
background-size: 20px; background-size: 20px;
} }
.userMenu > ul li { .userMenu > ul li {
position: relative; position: relative;
display: inline-block; display: inline-block;
margin-right: 20px; margin: 0 10px;
} }
.userMenu > ul li > a { .userMenu > ul li > a {
line-height: 52px; line-height: 52px;
@ -429,8 +449,6 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
} }
.userMenu > ul li > a:before { .userMenu > ul li > a:before {
padding-right: 5px; padding-right: 5px;
font-size: 1.5rem;
line-height: 1rem;
} }
.userMenu > ul li > a span { .userMenu > ul li > a span {
display: inline-block; display: inline-block;
@ -474,7 +492,6 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
.userMenu li.userMenu-config, .userMenu li.userMenu-search { .userMenu li.userMenu-config, .userMenu li.userMenu-search {
float: right; float: right;
position: relative; position: relative;
margin-right: 0;
color: white; color: white;
} }
.userMenu li.userMenu-config + a, .userMenu li.userMenu-search + a { .userMenu li.userMenu-config + a, .userMenu li.userMenu-search + a {
@ -483,6 +500,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
.userMenu li.userMenu-search > input { .userMenu li.userMenu-search > input {
border: 1px solid rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.3);
line-height: 26px; line-height: 26px;
margin-top: 13px;
font-size: 12px; font-size: 12px;
padding: 0 7px; padding: 0 7px;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
@ -503,7 +521,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
width: 1200px; width: 1200px;
max-width: 100%; max-width: 100%;
margin: auto; margin: auto;
padding-top: 62px; padding-top: 70px;
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
@ -511,20 +529,20 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
.dashboard.left { .dashboard.left {
top: 52px; top: 52px;
float: left; float: left;
width: 170px; width: 168px;
min-height: 700px; min-height: 700px;
} }
.dashboard.left > .module { .dashboard.left > .module {
width: 150px; width: 150px;
position: fixed; position: fixed;
top: 62px; top: 70px;
} }
.dashboard.right { .dashboard.right {
float: left; float: left;
top: 52px; top: 52px;
overflow: hidden; overflow: hidden;
width: 330px; width: 362px;
padding-left: 20px; padding-left: 18px;
padding-right: 3px; padding-right: 3px;
} }
.dashboard > .module { .dashboard > .module {
@ -704,6 +722,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
line-height: 52px; line-height: 52px;
font-weight: 500; font-weight: 500;
font-size: 1rem; font-size: 1rem;
float: left;
color: white; color: white;
} }
.modal-header span, .prompt-wrapper .modal-header span { .modal-header span, .prompt-wrapper .modal-header span {
@ -725,7 +744,10 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
right: 10px; right: 10px;
} }
.modal-header span.mark-all-as-read { .modal-header span.mark-all-as-read {
right: 70px; position: static;
float: left;
margin-left: 10px;
display: none;
} }
.modal-header span.modal-back { .modal-header span.modal-back {
right: 35px; right: 35px;
@ -929,6 +951,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
left: 0; left: 0;
margin: 0px 10px 20px 10px; margin: 0px 10px 20px 10px;
cursor: default; cursor: default;
position: relative;
} }
.direct-messages-thread .post .post-info-time { .direct-messages-thread .post .post-info-time {
float: none; float: none;
@ -959,8 +982,8 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
} }
.direct-messages-thread .post .post-text { .direct-messages-thread .post .post-text {
background: white; background: white;
margin-right: 60px; margin-right: 58px;
margin-left: 60px; margin-left: 58px;
position: relative; position: relative;
display: inline-block; display: inline-block;
max-width: 300px; max-width: 300px;
@ -975,7 +998,9 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
.direct-messages-thread .post .post-photo { .direct-messages-thread .post .post-photo {
position: absolute; position: absolute;
left: 0; left: 0;
top: 35px; top: 30px;
float: none;
margin: 0;
} }
.direct-messages-thread .post.sent .post-text:after { .direct-messages-thread .post.sent .post-text:after {
border-top: solid 7px transparent; border-top: solid 7px transparent;
@ -1120,28 +1145,12 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
} }
.bitmessage-ctc, .tox-ctc { .bitmessage-ctc, .tox-ctc {
font-size: 13px; background: #999;
line-height: 15px; color: white;
cursor: pointer; font-size: 1rem;
color: #222;
}
.bitmessage-ctc:hover, .tox-ctc:hover {
color: #A1B775;
}
.bitmessage-ctc:after, .tox-ctc:after {
font-family: "Ionicons";
content: "";
font-style: normal;
font-weight: normal;
speak: none;
display: inline-block; display: inline-block;
text-decoration: inherit; padding: 10px;
width: 1em; line-height: 1rem;
text-align: center;
font-variant: normal;
text-transform: none;
line-height: 1em;
} }
.profile-modal .profile-tox, .profile-modal .profile-bitmessage { .profile-modal .profile-tox, .profile-modal .profile-bitmessage {
@ -1151,6 +1160,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
} }
.profile-modal .profile-tox:hover, .profile-modal .profile-bitmessage:hover { .profile-modal .profile-tox:hover, .profile-modal .profile-bitmessage:hover {
color: #A1B775; color: #A1B775;
text-decoration: none;
} }
.profile-modal .modal-buttons { .profile-modal .modal-buttons {
@ -1160,7 +1170,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
.forEdition.profile-card { .forEdition.profile-card {
margin: 0; margin: 0;
width: 700px; width: 670px;
background: none; background: none;
padding: 0; padding: 0;
} }
@ -1222,7 +1232,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
position: relative; position: relative;
margin-bottom: 10px; margin-bottom: 10px;
transition: height 0.3s linear; transition: height 0.3s linear;
padding: 10px; padding: 15px;
background: white; background: white;
overflow: hidden; overflow: hidden;
background: #FDFCFA; background: #FDFCFA;
@ -1238,9 +1248,6 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
-o-transition-timing-function: ease-out; -o-transition-timing-function: ease-out;
-webkit-transition-timing-function: ease-out; -webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out; transition-timing-function: ease-out;
-moz-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;
top: 0; top: 0;
z-index: 120; z-index: 120;
} }
@ -1251,7 +1258,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
} }
#postboard-top.fixed { #postboard-top.fixed {
position: fixed; position: fixed;
width: 330px; width: 362px;
top: 52px; top: 52px;
} }
#postboard-top .profile-photo { #postboard-top .profile-photo {
@ -1286,7 +1293,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
/************* POSTBOARD ************ */ /************* POSTBOARD ************ */
.postboard { .postboard {
width: 700px; width: 670px;
float: left; float: left;
} }
.postboard h2, .postboard .postboard-news { .postboard h2, .postboard .postboard-news {
@ -1342,7 +1349,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
color: #4b484f; color: #4b484f;
} }
.postboard-posts .post .post-data { .postboard-posts .post .post-data {
padding: 12px 15px; padding: 15px;
background: #FDFCFA; background: #FDFCFA;
} }
.postboard-posts > .post { .postboard-posts > .post {
@ -1376,6 +1383,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
vertical-align: middle; vertical-align: middle;
overflow: hidden; overflow: hidden;
width: 48px; width: 48px;
margin: 0 15px 15px 0;
} }
.post-photo img { .post-photo img {
width: 100%; width: 100%;
@ -1383,12 +1391,12 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
} }
.post-info-name { .post-info-name {
font-weight: 600; font-weight: 500;
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
font-size: 1rem;
float: left; float: left;
margin-left: 10px;
} }
.post-info-name:hover { .post-info-name:hover {
text-decoration: none; text-decoration: none;
@ -1402,6 +1410,14 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
display: inline-block; display: inline-block;
} }
.post-info-sent {
display: block;
position: absolute;
top: 0;
left: 3px;
font-size: 15px;
}
.post-info-time { .post-info-time {
position: absolute; position: absolute;
font-size: 0.8rem; font-size: 0.8rem;
@ -1464,10 +1480,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
.post-interactions span:before { .post-interactions span:before {
padding: 3px; padding: 3px;
} }
.post-interactions span.post-favorite { .post:hover .post-interactions .post-reply, .post:hover .post-interactions .post-propagate, .post:hover .post-interactions .post-favorite {
display: none !important;
}
.post:hover .post-interactions .post-reply, .post:hover .post-interactions .post-propagate {
display: inline-block; display: inline-block;
} }
@ -1579,7 +1592,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
} }
.following { .following {
width: 700px; width: 670px;
float: left; float: left;
} }
.following h2 { .following h2 {
@ -1707,7 +1720,7 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
/********** LOGIN AND NETWORK PAGES ****** */ /********** LOGIN AND NETWORK PAGES ****** */
.network.singleBlock ul { .network.singleBlock ul {
line-height: 2rem; line-height: 2rem;
padding: 2rem; padding: 1rem 2rem;
} }
.network.singleBlock .module { .network.singleBlock .module {
background: #F3F2F0; background: #F3F2F0;
@ -1715,6 +1728,12 @@ button.light:hover, .light.show-more-followers:hover, a.button.light:hover {
-webkit-box-shadow: 0 1px 1px rgba(85, 85, 85, 0.1); -webkit-box-shadow: 0 1px 1px rgba(85, 85, 85, 0.1);
box-shadow: 0 1px 1px rgba(85, 85, 85, 0.1); box-shadow: 0 1px 1px rgba(85, 85, 85, 0.1);
margin-bottom: 50px; margin-bottom: 50px;
width: 49%;
float: left;
margin-right: 1%;
}
.network.singleBlock .module:last-child {
margin-right: 0;
} }
.network.singleBlock .module:last-child h2 { .network.singleBlock .module:last-child h2 {
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ExYjc3NSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzVlODBhMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ExYjc3NSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzVlODBhMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
@ -1978,15 +1997,6 @@ ul.userMenu-search-profiles button, ul.userMenu-search-profiles .show-more-follo
right: 5px; right: 5px;
} }
.userMenu-search input[type="text"] {
float: right;
padding: 3px 10px;
margin: 10px 20px 0 0;
border: none;
background: #F3F2F0;
box-sizing: border-box;
}
.userMenu-search-sugestions a { .userMenu-search-sugestions a {
color: rgba(0, 0, 0, 0.7); color: rgba(0, 0, 0, 0.7);
padding: 10x 20px; padding: 10x 20px;
@ -2264,7 +2274,7 @@ img.twister-user-photo {
float: left; float: left;
display: block; display: block;
float: left; float: left;
width: 32px; width: 36px;
height: auto; height: auto;
margin: 0 10px 0 0; margin: 0 10px 0 0;
} }
@ -2322,28 +2332,28 @@ img.twister-user-photo {
} }
.refresh-toptrends, .twistday-reminder .refresh, .refresh-users { .refresh-toptrends, .twistday-reminder .refresh, .refresh-users {
color: #222; color: #6f6f6f;
cursor: pointer; cursor: pointer;
font-size: 11px; font-size: 0.7rem;
font-weight: 500; font-weight: 500;
text-transform: none; text-transform: none;
letter-spacing: 0; letter-spacing: 0;
float: right; float: right;
display: block; display: block;
margin: 5px; margin: 10px;
position: relative; position: relative;
} }
.view-all-users { .view-all-users {
color: #222; color: #6f6f6f;
cursor: pointer; cursor: pointer;
font-size: 11px; font-size: 0.7rem;
font-weight: 500; font-weight: 500;
text-transform: none; text-transform: none;
letter-spacing: 0; letter-spacing: 0;
float: right; float: right;
display: block; display: block;
margin: 5px; margin: 10px;
position: relative; position: relative;
} }
@ -2568,7 +2578,7 @@ ul.dropdown-menu li > li > a {
.postboard, #postboard-top.onTop { .postboard, #postboard-top.onTop {
position: absolute; position: absolute;
left: 135px; left: 168px;
right: 20px; right: 20px;
width: auto; width: auto;
} }
@ -2577,9 +2587,76 @@ ul.dropdown-menu li > li > a {
width: 85%; width: 85%;
} }
.modal-wrapper .postboard { .modal-wrapper .postboard {
width: 700px; width: 670px;
float: left; float: left;
position: relative; position: relative;
left: 0; left: 0;
} }
} }
@media (max-width: 700px) {
.network.singleBlock .module {
margin-bottom: 50px;
width: 98%;
margin: 0 auto 50px auto;
float: none;
margin-right: auto;
}
.dashboard.left {
top: 52px;
float: none;
width: 100%;
}
.dashboard.left > .module {
width: 100%;
position: fixed;
top: 52px;
z-index: 2;
}
.promoted-posts-only {
display: none;
}
.postboard {
float: none;
width: 100%;
margin: 0;
top: 122px;
left: 0;
z-index: 1;
}
.modal-wrapper .postboard {
top: auto;
}
.mini-profile-info {
display: none;
}
.mini-profile-indicators li {
width: 25%;
float: left;
position: relative;
z-index: 2;
}
#postboard-top {
position: fixed;
bottom: 0;
width: 100%;
top: auto;
margin: 0;
-moz-box-shadow: 0px -5px 13px rgba(17, 17, 17, 0.2);
-webkit-box-shadow: 0px -5px 13px rgba(17, 17, 17, 0.2);
box-shadow: 0px -5px 13px rgba(17, 17, 17, 0.2);
}
.userMenu .userMenu-profile {
display: none;
}
.userMenu ul {
background-image: none;
}
}

13
js/theme_option.js

@ -6,7 +6,10 @@ $(window).resize(function()
$(document).ready(function() $(document).ready(function()
{ {
var windowHeight = $(window).height(); var windowHeight = $(window).height();
prout();
// make right modules expendables
//slideUpModules();
reOrganizeTemplates() reOrganizeTemplates()
$('#postboard-top textarea').on('blur',function(){$('#postboard-top').removeClass('on');}); $('#postboard-top textarea').on('blur',function(){$('#postboard-top').removeClass('on');});
@ -56,9 +59,7 @@ $(document).ready(function()
}); });
function prout() { function slideUpModules() {
var modulWrap =
$(document).on( 'click', 'h3', function() { $(document).on( 'click', 'h3', function() {
var thisList = $(this).parents('.module').find('ol'); var thisList = $(this).parents('.module').find('ol');
@ -89,9 +90,9 @@ function reOrganizeTemplates() { // for nin's templating
$('.post-context').each(function(){ $(this).prependTo($(this).parent()); }); // puts context on top of post $('.post-context').each(function(){ $(this).prependTo($(this).parent()); }); // puts context on top of post
// menu // menu
$('.userMenu li > a').wrapInner('<span class="inner"></span>'); //$('.userMenu li > a').wrapInner('<span class="inner"></span>');
///// page following ///// page profile
$('.forEdition h2').detach().prependTo($('.forEdition')); $('.forEdition h2').detach().prependTo($('.forEdition'));
//loader //loader

5
sass/base/_commons.sass

@ -14,14 +14,15 @@ html, body
html html
font-size: $global-font-size font-size: $global-font-size
background-color: #ddd background-color: #ddd
background-image: image-url("bg.png")
background-attachment: fixed
body body
font-size: $main-font-size font-size: $main-font-size
line-height : $main-line-height line-height : $main-line-height
font-family : $main-font-family font-family : $main-font-family
font-weight: 400 font-weight: 400
overflow-y: scroll!important overflow-y: scroll!important
background-image: image-url("bg.png")
background-attachment: fixed

15
sass/base/_fonts.sass

@ -58,6 +58,7 @@
font-style: normal font-style: normal
.ion:before, .ion-after:after .ion:before, .ion-after:after
display: inline-block display: inline-block
font-family: "Ionicons" font-family: "Ionicons"
@ -70,6 +71,8 @@
line-height: inherit line-height: inherit
-webkit-font-smoothing: antialiased -webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale -moz-osx-font-smoothing: grayscale
.ion:before
padding: 0 3px
.ion:after, .ion-after:before .ion:after, .ion-after:before
display: none display: none
@ -118,3 +121,15 @@
.ion-network:before .ion-network:before
content: "\f2b5" content: "\f2b5"
.ion-eye:before
content: "\f133"
.ion-tox:before
content: "\f200"
.ion-copy:before
content: "\f381"
.ion-search:after
content: "\f21f"

6
sass/base/_var.sass

@ -1,13 +1,13 @@
//these are the main variables used in the sass file //these are the main variables used in the sass file
$site-width : 1200px $site-width : 1200px
$gut : 20 $gut : 18px
$postboardWidth : 700px $postboardWidth : 670px
$miniProfileWidth : $site-width/8 $miniProfileWidth : $site-width/8
$leftWidth : $miniProfileWidth + $gut $leftWidth : $miniProfileWidth + $gut
$rightWidth : $site-width - ($leftWidth + $postboardWidth) $rightWidth : $site-width - ($leftWidth + $postboardWidth)
$micro-usr-img : 32px $micro-usr-img : 36px
$mini-usr-img : 48px $mini-usr-img : 48px
$usr-img : 64px $usr-img : 64px

9
sass/layout/_dm.sass

@ -85,6 +85,7 @@
left: 0 left: 0
margin: 0px 10px 20px 10px margin: 0px 10px 20px 10px
cursor: default cursor: default
position: relative
.post-info-time .post-info-time
float: none float: none
display: block display: block
@ -116,8 +117,8 @@
.post-text .post-text
background: white background: white
margin-right: 60px margin-right: $mini-usr-img + 10
margin-left: 60px margin-left: $mini-usr-img + 10
position: relative position: relative
display: inline-block display: inline-block
max-width: 300px max-width: 300px
@ -132,7 +133,9 @@
.post-photo .post-photo
position: absolute position: absolute
left: 0 left: 0
top: 35px top: 30px
float: none
margin: 0

15
sass/layout/_menu.sass

@ -12,7 +12,7 @@ $menuBgColor : $dark-grey
//background-color: #FFAF1C //background-color: #FFAF1C
//+background-image(linear-gradient(to right , $color-green, #5E80A2) ) //+background-image(linear-gradient(to right , $color-green, #5E80A2) )
background-color: $menuBgColor background-color: $menuBgColor
z-index: 2 z-index: 40
> ul > ul
@extend .clear-fix @extend .clear-fix
+box-sizing(border-box) +box-sizing(border-box)
@ -24,7 +24,7 @@ $menuBgColor : $dark-grey
li li
position: relative position: relative
display: inline-block display: inline-block
margin-right: 20px margin: 0 10px
> a > a
line-height: $menu-height line-height: $menu-height
display: inline-block display: inline-block
@ -32,15 +32,12 @@ $menuBgColor : $dark-grey
font-size: 1rem font-size: 1rem
position: relative position: relative
font-size: 1rem font-size: 1rem
@extend .ion
&:hover &:hover
color: $menu-font-color!important color: $menu-font-color!important
text-decoration: none text-decoration: none
&:before &:before
padding-right: 5px padding-right: 5px
font-size: 1.5rem
line-height: 1rem
span span
display: inline-block display: inline-block
@ -55,7 +52,6 @@ $menuBgColor : $dark-grey
&.userMenu-home &.userMenu-home
a a
@extend .ion-home
.label .label
display: inline-block!important display: inline-block!important
@ -78,11 +74,7 @@ $menuBgColor : $dark-grey
color: white color: white
&.show &.show
display: block display: block
&.userMenu-network a
@extend .ion-network
&.userMenu-profile a
@extend .ion-profile
&.userMenu-dhtindicator, &.userMenu-connections, &.userMenu-messages &.userMenu-dhtindicator, &.userMenu-connections, &.userMenu-messages
display: none!important display: none!important
@ -90,7 +82,6 @@ $menuBgColor : $dark-grey
&.userMenu-config, &.userMenu-search &.userMenu-config, &.userMenu-search
float: right float: right
position: relative position: relative
margin-right: 0
color: $menu-font-color color: $menu-font-color
+ a + a
color: $main-color-dark color: $main-color-dark
@ -98,6 +89,7 @@ $menuBgColor : $dark-grey
> input > input
border: 1px solid rgba(white,.3) border: 1px solid rgba(white,.3)
line-height: $menu-height/2 line-height: $menu-height/2
margin-top: $menu-height/4
font-size: 12px font-size: 12px
padding: 0 7px padding: 0 7px
background: rgba(white,.1) background: rgba(white,.1)
@ -106,6 +98,7 @@ $menuBgColor : $dark-grey
&:focus &:focus
border-color: rgba(white,.7) border-color: rgba(white,.7)
&.userMenu-config > a &.userMenu-config > a
@extend .ion
@extend .ion-gear @extend .ion-gear
font-size: 1.5rem font-size: 1.5rem

6
sass/layout/_modal.sass

@ -152,6 +152,7 @@ $header-modal-height : $menu-height
line-height: $header-modal-height line-height: $header-modal-height
font-weight: 500 font-weight: 500
font-size: 1rem font-size: 1rem
float: left
color: white color: white
span span
@ -174,7 +175,10 @@ $header-modal-height : $menu-height
right: 10px right: 10px
&.mark-all-as-read &.mark-all-as-read
@extend .ion-checkmark @extend .ion-checkmark
right: 70px position: static
float: left
margin-left: 10px
display: none
&.modal-back &.modal-back
@extend .ion-back @extend .ion-back
right: 35px right: 35px

21
sass/layout/_postboard.sass

@ -4,7 +4,7 @@
@extend .clear-fix @extend .clear-fix
margin-bottom: 10px margin-bottom: 10px
transition: height .3s linear transition: height .3s linear
padding: 10px padding: 15px
background: white background: white
overflow: hidden overflow: hidden
background: $bloc-light-color background: $bloc-light-color
@ -12,7 +12,6 @@
+transition-property( top) +transition-property( top)
+transition-duration(.1s) +transition-duration(.1s)
+transition-timing-function(ease-out) +transition-timing-function(ease-out)
+border-radius(11px)
top: 0 top: 0
&.on &.on
+box-shadow(1px 2px 2px rgba(#111, 0.1)) +box-shadow(1px 2px 2px rgba(#111, 0.1))
@ -94,7 +93,7 @@
&:hover &:hover
color: lighten($dark-grey,5%) color: lighten($dark-grey,5%)
.post-data .post-data
padding: 12px 15px padding: 15px
background: $bloc-light-color background: $bloc-light-color
@ -125,17 +124,18 @@
vertical-align: middle vertical-align: middle
overflow: hidden overflow: hidden
width: $mini-usr-img width: $mini-usr-img
margin: 0 15px 15px 0
img img
width: 100% width: 100%
height: auto!important height: auto!important
.post-info-name .post-info-name
font-weight: 600 font-weight: 500
color: inherit color: inherit
text-decoration: none text-decoration: none
display: inline-block display: inline-block
font-size: 1rem
float: left float: left
margin-left: 10px
&:hover &:hover
text-decoration: none text-decoration: none
color: black color: black
@ -146,6 +146,14 @@
margin-top: 4px margin-top: 4px
display: inline-block display: inline-block
.post-info-sent
display: block
position: absolute
top: 0
left: 3px
font-size: 15px
.post-info-time .post-info-time
position: absolute position: absolute
font-size: .8rem font-size: .8rem
@ -214,11 +222,10 @@
&.post-propagate &.post-propagate
@extend .ion-shuffle @extend .ion-shuffle
&.post-favorite &.post-favorite
display: none!important //maybe one day
@extend .ion-alert @extend .ion-alert
.post:hover & .post:hover &
.post-reply, .post-propagate //, .post-favorite maybe one day .post-reply, .post-propagate , .post-favorite
display: inline-block display: inline-block

33
sass/layout/_profile.sass

@ -133,27 +133,18 @@ $modal-postboard-post-height: 100%
+border-radius(2px) +border-radius(2px)
.bitmessage-ctc, .tox-ctc .bitmessage-ctc, .tox-ctc
font-size: 13px background: #999
line-height: 15px color: white
cursor: pointer font-size: 1rem
color: $main-color-dark
&:hover
color: $main-color-color
.bitmessage-ctc:after, .tox-ctc:after
font-family: $symbol-font-family
content: ''
font-style: normal
font-weight: normal
speak: none
display: inline-block display: inline-block
text-decoration: inherit padding: 10px
width: 1em line-height: 1rem
text-align: center @extend .ion-copy
font-variant: normal @extend .ion
text-transform: none
line-height: 1em
.profile-modal .profile-modal
.profile-tox, .profile-bitmessage .profile-tox, .profile-bitmessage
@ -162,7 +153,9 @@ $modal-postboard-post-height: 100%
font-size: 13px font-size: 13px
&:hover &:hover
color: $main-color-color color: $main-color-color
text-decoration: none
@extend .ion-tox
@extend .ion
.profile-modal .modal-buttons .profile-modal .modal-buttons
display: none display: none

51
sass/layout/_responsive.sass

@ -7,7 +7,7 @@
padding: 0 padding: 0
.postboard, #postboard-top.onTop .postboard, #postboard-top.onTop
position: absolute position: absolute
left: 135px left: $leftWidth
right: 20px right: 20px
width: auto width: auto
@ -19,5 +19,52 @@
position: relative position: relative
left: 0 left: 0
@media (max-width: 600px) @media (max-width: 700px)
.network
&.singleBlock
.module
margin-bottom: 50px
width: 98%
margin: 0 auto 50px auto
float: none
margin-right: auto
.dashboard
&.left
top: $menu-height
float: none
width: 100%
> .module
width: 100%
position: fixed
top: $menu-height
z-index: 2
.promoted-posts-only
display: none
.postboard
float: none
width: 100%
margin: 0
top: $menu-height +70
left: 0
z-index: 1
.modal-wrapper &
top: auto
.mini-profile-info
display: none
.mini-profile-indicators li
width: 25%
float: left
position: relative
z-index: 2
#postboard-top
position: fixed
bottom: 0
width: 100%
top: auto
margin: 0
+box-shadow(0px -5px 13px rgba(17, 17, 17, 0.2))
.userMenu .userMenu-profile
display: none
.userMenu ul
background-image: none

6
sass/layout/_wrapper.sass

@ -6,7 +6,7 @@
width: $site-width width: $site-width
max-width: 100% max-width: 100%
margin: auto margin: auto
padding-top: $menu-height + $gut/2 padding-top: $menu-height + $gut
position: relative position: relative
z-index: 1 z-index: 1
@extend .clear-fix @extend .clear-fix
@ -19,14 +19,14 @@
> .module > .module
width: $miniProfileWidth width: $miniProfileWidth
position: fixed position: fixed
top: $menu-height + $gut/2 top: $menu-height + $gut
&.right &.right
float: left float: left
top: $menu-height top: $menu-height
overflow: hidden overflow: hidden
width: $rightWidth width: $rightWidth
padding-left: 20px padding-left: $gut
padding-right: 3px padding-right: 3px
> .module > .module
width: 100% width: 100%

11
sass/pages/_network.sass

@ -3,9 +3,10 @@
&.singleBlock &.singleBlock
@extend .clear-fix @extend .clear-fix
ul ul
line-height: 2rem line-height: 2rem
padding: 2rem padding: 1rem 2rem
.module .module
@ -13,11 +14,19 @@
background: $bloc-background-color background: $bloc-background-color
+box-shadow(0 1px 1px rgba(#555, .1)) +box-shadow(0 1px 1px rgba(#555, .1))
margin-bottom: 50px margin-bottom: 50px
width: 49%
float: left
margin-right: 1%
@extend .clear-fix
&:last-child
margin-right: 0
&:last-child &:last-child
h2 h2
+background-image(linear-gradient(to right , $color-green, #5E80A2) ) +background-image(linear-gradient(to right , $color-green, #5E80A2) )
.spam-msg .spam-msg
resize: none resize: none
width: 100% width: 100%

28
sass/style.sass

@ -79,8 +79,7 @@
display: block display: block
padding: 10px padding: 10px
ul.userMenu-search-profiles ul.userMenu-search-profiles
width: 100% width: 100%
@ -146,13 +145,7 @@ ul.userMenu-search-profiles
.userMenu-search input[type="text"]
float: right
padding: 3px 10px
margin: 10px 20px 0 0
border: none
background: $bloc-background-color
box-sizing: border-box
.userMenu-search-sugestions a .userMenu-search-sugestions a
color: rgba(0, 0, 0, 0.7) color: rgba(0, 0, 0, 0.7)
@ -478,31 +471,32 @@ img.twister-user-photo
opacity: 1 opacity: 1
.refresh-toptrends, .twistday-reminder .refresh, .refresh-users .refresh-toptrends, .twistday-reminder .refresh, .refresh-users
@extend .ion-alert @extend .ion-shuffle
@extend .ion @extend .ion
color: $main-color-dark color: lighten($main-color-dark,30%)
cursor: pointer cursor: pointer
font-size: 11px font-size: .7rem
font-weight: 500 font-weight: 500
text-transform: none text-transform: none
letter-spacing: 0 letter-spacing: 0
float: right float: right
display: block display: block
margin: 5px margin: 10px
position: relative position: relative
.view-all-users .view-all-users
color: $main-color-dark color: lighten($main-color-dark,30%)
cursor: pointer cursor: pointer
font-size: 11px font-size: .7rem
font-weight: 500 font-weight: 500
text-transform: none text-transform: none
letter-spacing: 0 letter-spacing: 0
float: right float: right
display: block display: block
margin: 5px margin: 10px
position: relative position: relative
@extend .ion-eye
@extend .ion
.refresh-toptrends:hover, .twistday-reminder .refresh:hover, .refresh-users:hover, .view-all-users:hover .refresh-toptrends:hover, .twistday-reminder .refresh:hover, .refresh-users:hover, .view-all-users:hover
color: $main-color-color color: $main-color-color
text-decoration: none text-decoration: none

Loading…
Cancel
Save