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. 26
      sass/style.sass

237
css/style.css

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

5
sass/base/_commons.sass

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

15
sass/base/_fonts.sass

@ -58,6 +58,7 @@ @@ -58,6 +58,7 @@
font-style: normal
.ion:before, .ion-after:after
display: inline-block
font-family: "Ionicons"
@ -70,6 +71,8 @@ @@ -70,6 +71,8 @@
line-height: inherit
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
.ion:before
padding: 0 3px
.ion:after, .ion-after:before
display: none
@ -118,3 +121,15 @@ @@ -118,3 +121,15 @@
.ion-network:before
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 @@ @@ -1,13 +1,13 @@
//these are the main variables used in the sass file
$site-width : 1200px
$gut : 20
$postboardWidth : 700px
$gut : 18px
$postboardWidth : 670px
$miniProfileWidth : $site-width/8
$leftWidth : $miniProfileWidth + $gut
$rightWidth : $site-width - ($leftWidth + $postboardWidth)
$micro-usr-img : 32px
$micro-usr-img : 36px
$mini-usr-img : 48px
$usr-img : 64px

9
sass/layout/_dm.sass

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

15
sass/layout/_menu.sass

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

6
sass/layout/_modal.sass

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

21
sass/layout/_postboard.sass

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

33
sass/layout/_profile.sass

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

51
sass/layout/_responsive.sass

@ -7,7 +7,7 @@ @@ -7,7 +7,7 @@
padding: 0
.postboard, #postboard-top.onTop
position: absolute
left: 135px
left: $leftWidth
right: 20px
width: auto
@ -19,5 +19,52 @@ @@ -19,5 +19,52 @@
position: relative
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 @@ @@ -6,7 +6,7 @@
width: $site-width
max-width: 100%
margin: auto
padding-top: $menu-height + $gut/2
padding-top: $menu-height + $gut
position: relative
z-index: 1
@extend .clear-fix
@ -19,14 +19,14 @@ @@ -19,14 +19,14 @@
> .module
width: $miniProfileWidth
position: fixed
top: $menu-height + $gut/2
top: $menu-height + $gut
&.right
float: left
top: $menu-height
overflow: hidden
width: $rightWidth
padding-left: 20px
padding-left: $gut
padding-right: 3px
> .module
width: 100%

11
sass/pages/_network.sass

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

26
sass/style.sass

@ -81,7 +81,6 @@ @@ -81,7 +81,6 @@
ul.userMenu-search-profiles
width: 100%
padding: 0
@ -146,13 +145,7 @@ ul.userMenu-search-profiles @@ -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
color: rgba(0, 0, 0, 0.7)
@ -478,31 +471,32 @@ img.twister-user-photo @@ -478,31 +471,32 @@ img.twister-user-photo
opacity: 1
.refresh-toptrends, .twistday-reminder .refresh, .refresh-users
@extend .ion-alert
@extend .ion-shuffle
@extend .ion
color: $main-color-dark
color: lighten($main-color-dark,30%)
cursor: pointer
font-size: 11px
font-size: .7rem
font-weight: 500
text-transform: none
letter-spacing: 0
float: right
display: block
margin: 5px
margin: 10px
position: relative
.view-all-users
color: $main-color-dark
color: lighten($main-color-dark,30%)
cursor: pointer
font-size: 11px
font-size: .7rem
font-weight: 500
text-transform: none
letter-spacing: 0
float: right
display: block
margin: 5px
margin: 10px
position: relative
@extend .ion-eye
@extend .ion
.refresh-toptrends:hover, .twistday-reminder .refresh:hover, .refresh-users:hover, .view-all-users:hover
color: $main-color-color
text-decoration: none

Loading…
Cancel
Save