diff --git a/css/style.css b/css/style.css index 44f3894..c33155d 100644 --- a/css/style.css +++ b/css/style.css @@ -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, -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, 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, 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, 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 { html { font-size: 15px; background-color: #ddd; + background-image: url('../img/bg.png?1438449671'); + background-attachment: fixed; } 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 { 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 { 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 { 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 { } .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 { .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 { .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 { 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 { .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 { 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 { 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 { 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 { } .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 { .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 { } .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 { } .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 { .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 { 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 { -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 { } #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 { /************* 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 { 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 { 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 { } .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 { 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 { .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 { } .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 { /********** 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 { -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 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 { 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 { } .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 { .postboard, #postboard-top.onTop { position: absolute; - left: 135px; + left: 168px; right: 20px; width: auto; } @@ -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; + } +} diff --git a/js/theme_option.js b/js/theme_option.js index 1a52707..afdb305 100644 --- a/js/theme_option.js +++ b/js/theme_option.js @@ -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() }); -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 $('.post-context').each(function(){ $(this).prependTo($(this).parent()); }); // puts context on top of post // menu - $('.userMenu li > a').wrapInner(''); + //$('.userMenu li > a').wrapInner(''); - ///// page following + ///// page profile $('.forEdition h2').detach().prependTo($('.forEdition')); //loader diff --git a/sass/base/_commons.sass b/sass/base/_commons.sass index 4043056..a0942d6 100644 --- a/sass/base/_commons.sass +++ b/sass/base/_commons.sass @@ -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 diff --git a/sass/base/_fonts.sass b/sass/base/_fonts.sass index bcec10a..ccfe776 100644 --- a/sass/base/_fonts.sass +++ b/sass/base/_fonts.sass @@ -58,6 +58,7 @@ font-style: normal + .ion:before, .ion-after:after display: inline-block font-family: "Ionicons" @@ -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 @@ .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" diff --git a/sass/base/_var.sass b/sass/base/_var.sass index aa2a573..36f5d61 100644 --- a/sass/base/_var.sass +++ b/sass/base/_var.sass @@ -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 diff --git a/sass/layout/_dm.sass b/sass/layout/_dm.sass index 7a512e2..a8b039e 100644 --- a/sass/layout/_dm.sass +++ b/sass/layout/_dm.sass @@ -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 @@ .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 @@ .post-photo position: absolute left: 0 - top: 35px + top: 30px + float: none + margin: 0 diff --git a/sass/layout/_menu.sass b/sass/layout/_menu.sass index 82854e7..ba6eedf 100644 --- a/sass/layout/_menu.sass +++ b/sass/layout/_menu.sass @@ -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 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 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 &.userMenu-home a - @extend .ion-home .label display: inline-block!important @@ -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 &.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 > 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 &:focus border-color: rgba(white,.7) &.userMenu-config > a + @extend .ion @extend .ion-gear font-size: 1.5rem diff --git a/sass/layout/_modal.sass b/sass/layout/_modal.sass index 272d427..2f3480b 100644 --- a/sass/layout/_modal.sass +++ b/sass/layout/_modal.sass @@ -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 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 diff --git a/sass/layout/_postboard.sass b/sass/layout/_postboard.sass index 1088dad..787dbde 100755 --- a/sass/layout/_postboard.sass +++ b/sass/layout/_postboard.sass @@ -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 @@ +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 @@ &:hover color: lighten($dark-grey,5%) .post-data - padding: 12px 15px + padding: 15px background: $bloc-light-color @@ -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 @@ 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 @@ &.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 diff --git a/sass/layout/_profile.sass b/sass/layout/_profile.sass index 9feb052..34f5931 100644 --- a/sass/layout/_profile.sass +++ b/sass/layout/_profile.sass @@ -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 + 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% font-size: 13px &:hover color: $main-color-color - + text-decoration: none + @extend .ion-tox + @extend .ion .profile-modal .modal-buttons display: none diff --git a/sass/layout/_responsive.sass b/sass/layout/_responsive.sass index 69a1554..3cc0de2 100644 --- a/sass/layout/_responsive.sass +++ b/sass/layout/_responsive.sass @@ -7,7 +7,7 @@ padding: 0 .postboard, #postboard-top.onTop position: absolute - left: 135px + left: $leftWidth right: 20px width: auto @@ -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 \ No newline at end of file diff --git a/sass/layout/_wrapper.sass b/sass/layout/_wrapper.sass index 82562ef..595ca69 100644 --- a/sass/layout/_wrapper.sass +++ b/sass/layout/_wrapper.sass @@ -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 @@ > .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% diff --git a/sass/pages/_network.sass b/sass/pages/_network.sass index de7fb8c..3dd3869 100644 --- a/sass/pages/_network.sass +++ b/sass/pages/_network.sass @@ -3,9 +3,10 @@ &.singleBlock @extend .clear-fix + ul line-height: 2rem - padding: 2rem + padding: 1rem 2rem .module @@ -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% diff --git a/sass/style.sass b/sass/style.sass index 7facae0..8f7bc9b 100755 --- a/sass/style.sass +++ b/sass/style.sass @@ -79,8 +79,7 @@ display: block padding: 10px - - + ul.userMenu-search-profiles 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 color: rgba(0, 0, 0, 0.7) @@ -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