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

more stuff

nin-v2
myleneb 9 years ago
parent
54c5c7197c
commit
8d70e256bd
14 changed files with 300 additions and 156 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. 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
Unescape View File

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

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

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

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

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

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

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

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

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

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

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

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

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

26
sass/style.sass
Unescape View File

@ -81,7 +81,6 @@
ul.userMenu-search-profiles ul.userMenu-search-profiles
width: 100% width: 100%
padding: 0 padding: 0
@ -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

Write Preview
Loading…
Cancel
Save