twisterarmy/theme_nin
1
0
Fork 0
mirror of https://github.com/twisterarmy/theme_nin.git synced 2025-01-30 16:44:31 +00:00
Code Issues Projects Releases Wiki Activity

modals views in fixed sidebar

Browse Source
This commit is contained in:
myleneb 2015-07-29 06:05:10 +02:00
parent 35d34708b6
commit a2d3ce178d
8 changed files with 164 additions and 130 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
css/style.css
View File

@ -364,13 +364,13 @@ h3 .isFollowing:after {
display: none; display: none;
} }
.box-shadow, .modal-wrapper, .postboard .post, .dashboard > .module, .mini-profile, ol.toptrends-list a, ul.dropdown-menu { .box-shadow, .modal-wrapper, .postboard .post, .dashboard > .module, .mini-profile, ul.dropdown-menu {
-moz-box-shadow: 0 8px 13px rgba(17, 17, 17, 0); -moz-box-shadow: 0 8px 13px rgba(17, 17, 17, 0);
-webkit-box-shadow: 0 8px 13px rgba(17, 17, 17, 0); -webkit-box-shadow: 0 8px 13px rgba(17, 17, 17, 0);
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, .modal-content:after, .modal-header:after, .direct-messages-thread .post:after, .mini-following-info a:after, .forEdition.profile-card:after, .expanded-content:after, .following .following-list li a:after, .network.singleBlock:after, .options .tab-content:after, .promoted-posts-only:after, ul.userMenu-search-profiles li:after, .mini-profile .post-area:after, .mini-profile-indicators:after, .profile-data:after, #postboard-top:after, #postboard-top .post-area:after, .who-to-follow ol:after, .twister-user:after { .clear-fix:after, .userMenu > ul:after, .modal-content:after, .modal-header:after, .direct-messages-thread .post:after, .mini-following-info a:after, .forEdition.profile-card:after, .expanded-content:after, .following .following-list li a:after, .network.singleBlock:after, .options .tab-content:after, .dashboard > .module:after, ul.userMenu-search-profiles li:after, .mini-profile .post-area:after, .mini-profile-indicators:after, .profile-data:after, #postboard-top:after, #postboard-top .post-area:after, .who-to-follow ol:after, .twister-user:after {
content: ""; content: "";
display: table; display: table;
clear: both; clear: both;
@ -462,8 +462,10 @@ button.light:hover, a.button.light:hover {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
width: 100%; width: 100%;
max-width: 70%; max-width: 100%;
padding: 0 20px;
margin: 0; margin: 0;
margin: auto;
background: url('../img/logo.png?1437893891') no-repeat 50% 50%; background: url('../img/logo.png?1437893891') no-repeat 50% 50%;
background-size: 20px; background-size: 20px;
} }
@ -566,12 +568,9 @@ button.light:hover, a.button.light:hover {
right: 0; right: 0;
bottom: 0; bottom: 0;
overflow: hidden; overflow: hidden;
-moz-border-radius: 20px 0 0 0; -moz-box-shadow: 0 8px 13px rgba(17, 17, 17, 0.2);
-webkit-border-radius: 20px; -webkit-box-shadow: 0 8px 13px rgba(17, 17, 17, 0.2);
border-radius: 20px 0 0 0; box-shadow: 0 8px 13px rgba(17, 17, 17, 0.2);
-moz-box-shadow: -8px 0 13px rgba(17, 17, 17, 0.2);
-webkit-box-shadow: -8px 0 13px rgba(17, 17, 17, 0.2);
box-shadow: -8px 0 13px rgba(17, 17, 17, 0.2);
} }
.modal-wrapper .postboard { .modal-wrapper .postboard {
border: none; border: none;
@ -743,7 +742,7 @@ button.light:hover, a.button.light:hover {
.modal-wrapper.directMessages .post-area-new { .modal-wrapper.directMessages .post-area-new {
display: none; display: none;
z-index: 5; z-index: 5;
background: #EBEBEB !important; background: #FDFCFA !important;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100% !important; width: 100% !important;
@ -758,9 +757,6 @@ button.light:hover, a.button.light:hover {
padding: 5px; padding: 5px;
width: 100% !important; width: 100% !important;
} }
.modal-wrapper.directMessages .post-area-extras span {
color: white;
}
.modal-wrapper.directMessages .modal-header h3 span { .modal-wrapper.directMessages .modal-header h3 span {
display: inline-block !important; display: inline-block !important;
padding-left: 5px; padding-left: 5px;
@ -1227,9 +1223,9 @@ button.light:hover, a.button.light:hover {
/************* POST BOARD ************ */ /************* POST BOARD ************ */
.postboard { .postboard {
width: 40%; width: 55%;
margin-left: 30%; margin-left: 15%;
padding: 20px; padding: 7px 20px;
} }
.postboard h2 { .postboard h2 {
display: none; display: none;
@ -1317,6 +1313,7 @@ button.light:hover, a.button.light:hover {
display: inline-block; display: inline-block;
float: left; float: left;
vertical-align: middle; vertical-align: middle;
overflow: hidden;
width: 40px; width: 40px;
} }
.post-photo img { .post-photo img {
@ -1833,27 +1830,29 @@ button.light:hover, a.button.light:hover {
.promoted-posts-only { .promoted-posts-only {
margin: 0 0; margin: 0 0;
float: right;
} }
.promoted-posts-only li { .promoted-posts-only li {
cursor: pointer; cursor: pointer;
display: block; display: block;
margin: 0; margin: 0;
padding: 5px 15px; padding: 5px;
border-bottom: 1px solid #EBEBEB;
text-align: center;
font-size: 0.9em; font-size: 0.9em;
transition: color 0.1s linear; transition: color 0.1s linear;
} }
.promoted-posts-only li.active { .promoted-posts-only li.disabled {
color: #222; background: #F4F3F2;
background: white; }
.promoted-posts-only li.active, .promoted-posts-only li.active span {
color: #444;
cursor: default; cursor: default;
} }
.promoted-posts-only li:hover, .promoted-posts-only li.disabled:hover { .promoted-posts-only li:hover span, .promoted-posts-only li.disabled:hover span {
color: #222; color: #444;
} }
.promoted-posts-only li.disabled { .promoted-posts-only li.disabled span {
color: #aaa; color: rgba(68, 68, 68, 0.3);
background: #C3C3C3;
} }
/* Wrapper and blocks */ /* Wrapper and blocks */
@ -1870,10 +1869,11 @@ button.light:hover, a.button.light:hover {
position: absolute; position: absolute;
top: 50px; top: 50px;
left: 0; left: 0;
width: 30%; width: 15%;
} }
.dashboard.left > .module { .dashboard.left > .module {
float: right; float: right;
width: 128px;
} }
.dashboard.right { .dashboard.right {
position: fixed; position: fixed;
@ -1951,7 +1951,7 @@ ul.userMenu-search-profiles li a {
padding: 0; padding: 0;
color: #444; color: #444;
} }
ul.userMenu-search-profiles li a span, ul.userMenu-search-profiles li a b { ul.userMenu-search-profiles li a span, ul.userMenu-search-profiles li a b, ul.userMenu-search-profiles li a span:hover, ul.userMenu-search-profiles li a b:hover {
display: inline-block; display: inline-block;
color: #444; color: #444;
font-weight: 400; font-weight: 400;
@ -2028,8 +2028,7 @@ ul.userMenu-search-profiles button {
margin: 0; margin: 0;
text-align: center; text-align: center;
border-top: 1px solid #EBEBEB; border-top: 1px solid #EBEBEB;
border-bottom: 1px solid #EBEBEB; background: #F4F3F2;
background: white;
} }
.mini-profile-indicators li { .mini-profile-indicators li {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
@ -2038,13 +2037,8 @@ ul.userMenu-search-profiles button {
display: block; display: block;
position: relative; position: relative;
font-size: 0.8em; font-size: 0.8em;
width: 25%;
float: left;
text-align: center; text-align: center;
border-right: 1px solid #EBEBEB; border-bottom: 1px solid #EBEBEB;
}
.mini-profile-indicators li:last-child {
border: none;
} }
.mini-profile-indicators li a { .mini-profile-indicators li a {
color: #777777; color: #777777;
@ -2053,6 +2047,7 @@ ul.userMenu-search-profiles button {
} }
.mini-profile-indicators li a:hover { .mini-profile-indicators li a:hover {
color: #444; color: #444;
background: #FDFCFA;
} }
.mini-profile-indicators li a:before { .mini-profile-indicators li a:before {
display: block !important; display: block !important;
@ -2084,24 +2079,22 @@ ul.userMenu-search-profiles button {
.mini-profile-name { .mini-profile-name {
color: #444; color: #444;
font-size: 1.3em; font-size: 1em;
font-weight: 700; font-weight: 500;
padding: 10px 0; padding: 10px 0;
display: block; display: block;
text-align: center;
margin: auto; margin: auto;
} }
.mini-profile-name:hover { .mini-profile-name:hover {
color: #aaa; color: #aaa;
} }
.mini-profile-photo { .mini-profile-photo img {
width: 64px; width: 64px;
height: auto; height: auto;
display: block; display: block;
margin: auto; margin: 32px auto 0 auto;
}
.mini-profile-photo img {
width: 100%;
} }
.profile-data { .profile-data {
@ -2132,6 +2125,16 @@ ul.userMenu-search-profiles button {
padding-right: 5px; padding-right: 5px;
} }
.mini-profile a span.following-count {
display: block;
font-weight: 900;
font-size: 1.2rem;
color: #777777;
}
.mini-profile a:hover span.following-count {
color: #444;
}
.mini-profile-info a:hover { .mini-profile-info a:hover {
text-decoration: none; text-decoration: none;
} }
@ -2197,20 +2200,41 @@ ul.userMenu-search-profiles button {
border-bottom: solid 1px #A1B775; border-bottom: solid 1px #A1B775;
} }
.mini-profile .post-area {
display: none;
}
#postboard-top { #postboard-top {
clear: both; clear: both;
position: fixed; position: relative;
top: 50px; margin-bottom: 10px;
width: 30%;
margin-bottom: 1px;
left: 0;
transition: height 0.3s linear; transition: height 0.3s linear;
padding: 10px 10px 5px 10px; padding: 10px;
background: white; background: white;
overflow: hidden; overflow: hidden;
display: none; background: #FDFCFA;
-moz-box-shadow: 0 0 13px rgba(17, 17, 17, 0);
-webkit-box-shadow: 0 0 13px rgba(17, 17, 17, 0);
box-shadow: 0 0 13px rgba(17, 17, 17, 0);
-moz-transition-property: box-shadow;
-o-transition-property: box-shadow;
-webkit-transition-property: box-shadow;
transition-property: box-shadow;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
-webkit-transition-duration: 0.2s;
transition-duration: 0.2s;
-moz-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
z-index: 120; z-index: 120;
} }
#postboard-top.on, #postboard-top {
-moz-box-shadow: 0 8px 13px rgba(17, 17, 17, 0.2);
-webkit-box-shadow: 0 8px 13px rgba(17, 17, 17, 0.2);
box-shadow: 0 8px 13px rgba(17, 17, 17, 0.2);
}
#postboard-top.hide { #postboard-top.hide {
display: none !important; display: none !important;
} }
@ -2235,6 +2259,7 @@ ul.userMenu-search-profiles button {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
background: none;
float: right; float: right;
} }
#postboard-top .post-area .post-area-new { #postboard-top .post-area .post-area-new {
@ -2411,8 +2436,7 @@ img.twister-user-photo {
letter-spacing: 0; letter-spacing: 0;
float: right; float: right;
display: block; display: block;
padding: 4px; margin: 5px;
margin: 0 0 0 15px;
position: relative; position: relative;
} }
@ -2425,8 +2449,7 @@ img.twister-user-photo {
letter-spacing: 0; letter-spacing: 0;
float: right; float: right;
display: block; display: block;
padding: 4px; margin: 5px;
margin: 0 0 0 15px;
position: relative; position: relative;
} }
@ -2437,15 +2460,16 @@ img.twister-user-photo {
} }
/***********TOP TRENDS************** */ /***********TOP TRENDS************** */
ol.toptrends-list { .toptrends-list {
margin: 0; margin: 0;
margin-bottom: 10px;
clear: both; clear: both;
border-top: 1px solid #EBEBEB;
padding: 10px;
} }
ol.toptrends-list li { .toptrends-list li {
display: inline-block; display: inline-block;
} }
ol.toptrends-list a { .toptrends-list a {
color: #aaa; color: #aaa;
padding: 3px 8px; padding: 3px 8px;
display: inline-block; display: inline-block;
@ -2454,9 +2478,11 @@ ol.toptrends-list a {
margin: 3px; margin: 3px;
font-weight: 500; font-weight: 500;
background: white; background: white;
-moz-box-shadow: 0 5px 8px rgba(85, 85, 85, 0.2);
-webkit-box-shadow: 0 5px 8px rgba(85, 85, 85, 0.2);
box-shadow: 0 5px 8px rgba(85, 85, 85, 0.2);
} }
ol.toptrends-list a:hover { .toptrends-list a:hover {
background: rgba(255, 255, 255, 0.4);
color: #222; color: #222;
} }

20
js/theme_option.js
View File

@ -4,30 +4,34 @@
$(window).resize(function() $(window).resize(function()
{ {
$('.module.toptrends').detach().appendTo($('.dashboard.right'));
$('.module.who-to-follow').detach().appendTo($('.dashboard.right')); $('.module.who-to-follow').detach().appendTo($('.dashboard.right'));
$('.module.twistday-reminder').detach().appendTo($('.dashboard.right')); $('.module.twistday-reminder').detach().appendTo($('.dashboard.right'));
}); });
$(document).ready(function() $(document).ready(function()
{ {
$('.module.toptrends').detach().appendTo($('.dashboard.right'));
$('.module.who-to-follow').detach().appendTo($('.dashboard.right')); $('.module.who-to-follow').detach().appendTo($('.dashboard.right'));
$('.module.twistday-reminder').detach().appendTo($('.dashboard.right')); $('.module.twistday-reminder').detach().appendTo($('.dashboard.right'));
$('#postboard-top textarea').on('blur',function(){$('#postboard-top').removeClass('on');});
$('#postboard-top textarea').on('focus',function(){$('#postboard-top').addClass('on');});
var windowHeight = $(window).height(); var windowHeight = $(window).height();
$('.modal-close').html(''); $('.modal-close').html('');
//$('.mini-profile .open-following-page').parent('li').detach().appendTo($('.mini-profile-indicators')); $('.mini-profile .open-following-page').parent('li').detach().appendTo($('.mini-profile-indicators'));
$('.modal-back').html(''); $('.modal-back').html('');
$('.twister-user-remove').html(''); $('.twister-user-remove').html('');
$('.profile-card-main').attr('style', ''); $('.profile-card-main').attr('style', '');
$('.userMenu-search-profiles button').html('+').attr('title',polyglot.t('Follow')); $('.userMenu-search-profiles button').html('+').attr('title',polyglot.t('Follow'));
$('.mini-profile-actions span').html(''); $('.mini-profile-actions span').html('');
$('.promoted-posts-only').detach().appendTo($('.dashboard.left')); $('.promoted-posts-only').detach().appendTo($('.left .mini-profile'));
$('.mini-profile-indicators').detach().insertAfter($('.dashboard.left .profile-data')); $('.mini-profile-indicators').detach().insertAfter($('.dashboard.left .profile-data'));
$('.post-context').each(function(){ $('.post-context').each(function(){
$(this).prependTo($(this).parent()); $(this).prependTo($(this).parent());
@ -47,11 +51,11 @@ $(document).ready(function()
//active promoted posts tab //active promoted posts tab
$(this).children('.promoted-posts').addClass(promotedPostsOnly ? "active" : "disabled"); $(this).children('.promoted-posts').addClass(promotedPostsOnly ? "active" : "disabled");
$(this).children('.normal-posts').addClass(promotedPostsOnly ? "disabled" : "active"); $(this).children('.normal-posts').addClass(promotedPostsOnly ? "disabled" : "active");
//$('#postboard-top').removeClass(promotedPostsOnly ? "show" : "hide"); $('#postboard-top').removeClass(promotedPostsOnly ? "show" : "hide");
//active normal posts //active normal posts
$(this).children('.promoted-posts').removeClass(promotedPostsOnly ? "disabled" : "active"); $(this).children('.promoted-posts').removeClass(promotedPostsOnly ? "disabled" : "active");
$(this).children('.normal-posts').removeClass(promotedPostsOnly ? "active" : "disabled"); $(this).children('.normal-posts').removeClass(promotedPostsOnly ? "active" : "disabled");
//$('#postboard-top').addClass(promotedPostsOnly ? "hide" : "show"); $('#postboard-top').addClass(promotedPostsOnly ? "hide" : "show");
}); });

1
sass/base/_commons.sass
View File

@ -17,7 +17,6 @@ html
background-color: $main-background-color background-color: $main-background-color
//+background-image(linear-gradient(to top right, #fff, $main-background-color, #fff) ) //+background-image(linear-gradient(to top right, #fff, $main-background-color, #fff) )
background-attachment: fixed 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

6
sass/layout/_dm.sass
View File

@ -5,7 +5,7 @@
.post-area-new .post-area-new
display: none display: none
z-index: 5 z-index: 5
background: $bloc-background-color !important background: $bloc-light-color !important
position: absolute position: absolute
bottom: 0 bottom: 0
width: 100% !important width: 100% !important
@ -17,10 +17,6 @@
padding: 5px padding: 5px
width: 100%!important width: 100%!important
.post-area-extras
span
color: white
.modal-header .modal-header
h3 span h3 span

4
sass/layout/_menu.sass
View File

@ -17,8 +17,10 @@ $menu-font-color: white
@extend .clear-fix @extend .clear-fix
+box-sizing(border-box) +box-sizing(border-box)
width: 100% width: 100%
max-width: 70% max-width: 100%
padding: 0 20px
margin: 0 margin: 0
margin: auto
background: image-url("logo.png") no-repeat 50% 50% background: image-url("logo.png") no-repeat 50% 50%
background-size: 20px background-size: 20px
li li

3
sass/layout/_modal.sass
View File

@ -19,8 +19,7 @@ $header-modal-height : $menu-height
right: 0 right: 0
bottom: 0 bottom: 0
overflow: hidden overflow: hidden
+border-radius(20px 0 0 0) +box-shadow(0 8px 13px rgba(#111, 0.2))
+box-shadow(-8px 0 13px rgba(#111, 0.2))
.postboard .postboard
border: none border: none
padding: 0 padding: 0

7
sass/layout/_postboard.sass
View File

@ -6,9 +6,9 @@
.postboard .postboard
width: 40% width: 55%
margin-left: 30% margin-left: 15%
padding: 20px padding: 7px 20px
h2 h2
display: none display: none
.postboard-posts .postboard-posts
@ -79,6 +79,7 @@
display: inline-block display: inline-block
float: left float: left
vertical-align: middle vertical-align: middle
overflow: hidden
width: $mini-usr-img width: $mini-usr-img
img img
width: 100% width: 100%

107
sass/style.sass
View File

@ -27,25 +27,25 @@
.promoted-posts-only .promoted-posts-only
margin: 0 0 margin: 0 0
@extend .clear-fix
float: right
li li
cursor: pointer cursor: pointer
display: block display: block
margin: 0 margin: 0
padding: 5px 15px padding: 5px
border-bottom: 1px solid $main-background-color
text-align: center
font-size: .9em font-size: .9em
transition: color .1s linear transition: color .1s linear
&.active &.disabled
color: $main-color-dark background: #F4F3F2
background: white &.active, &.active span
color: $defaut-font-color
cursor: default cursor: default
&:hover, &.disabled:hover &:hover span, &.disabled:hover span
color: $main-color-dark color: $defaut-font-color
&.disabled &.disabled span
color: $main-color-light color: rgba($defaut-font-color, .3)
background: $light-grey
@ -66,9 +66,10 @@
position: absolute position: absolute
top: $menu-height top: $menu-height
left: 0 left: 0
width: 30% width: 15%
> .module > .module
float: right float: right
width: $usr-img * 2
&.right &.right
position: fixed position: fixed
right: 0 right: 0
@ -82,6 +83,7 @@
background: $bloc-light-color background: $bloc-light-color
width: 100% width: 100%
@extend .box-shadow @extend .box-shadow
@extend .clear-fix
h3 h3
float: left float: left
padding: 20px padding: 20px
@ -145,7 +147,7 @@ ul.userMenu-search-profiles
margin: 0 margin: 0
padding: 0 padding: 0
color: $defaut-font-color color: $defaut-font-color
span, b span, b, span:hover, b:hover
display: inline-block display: inline-block
color: $defaut-font-color color: $defaut-font-color
font-weight: 400 font-weight: 400
@ -154,7 +156,7 @@ ul.userMenu-search-profiles
.mini-screen-name b, .mini-screen-name b,
.mini-screen-name .mini-screen-name
font-weight: 500 font-weight: 500
.mini-profile-photo .mini-profile-photo
width: $mini-usr-img width: $mini-usr-img
height: auto height: auto
margin: 10px margin: 10px
@ -203,9 +205,7 @@ ul.userMenu-search-profiles
.mini-profile .mini-profile
@extend .box-shadow @extend .box-shadow
.mini-profile-info
a.button a.button
background: $main-color-light background: $main-color-light
margin: 1em auto margin: 1em auto
@ -227,20 +227,15 @@ ul.userMenu-search-profiles
text-align: center text-align: center
@extend .clear-fix @extend .clear-fix
border-top: 1px solid $main-background-color border-top: 1px solid $main-background-color
border-bottom: 1px solid $main-background-color background: #F4F3F2
background: white
li li
+box-sizing(border-box) +box-sizing(border-box)
display: block display: block
position: relative position: relative
font-size: .8em font-size: .8em
width: 25%
float: left
text-align: center text-align: center
border-right: 1px solid $main-background-color border-bottom: 1px solid $main-background-color
&:last-child
border: none
a a
color: lighten($dark-grey,20%) color: lighten($dark-grey,20%)
@ -248,6 +243,7 @@ ul.userMenu-search-profiles
padding: 1rem 0 padding: 1rem 0
&:hover &:hover
color: $dark-grey color: $dark-grey
background: $bloc-light-color
&:before &:before
display: block!important display: block!important
width: 100%!important width: 100%!important
@ -283,22 +279,21 @@ ul.userMenu-search-profiles
.mini-profile-name .mini-profile-name
color: $dark-grey color: $dark-grey
font-size: 1.3em font-size: 1em
font-weight: 700 font-weight: 500
padding: 10px 0 padding: 10px 0
display: block display: block
text-align: center
margin: auto margin: auto
&:hover &:hover
color: $main-color-light color: $main-color-light
.mini-profile-photo .mini-profile-photo img
width: $usr-img width: $usr-img
height: auto height: auto
display: block display: block
margin: auto margin: 32px auto 0 auto
img
width: 100%
@ -325,7 +320,15 @@ ul.userMenu-search-profiles
&.posts-count, &.following-count, &.followers-count &.posts-count, &.following-count, &.followers-count
display: inline-block display: inline-block
padding-right: 5px padding-right: 5px
.mini-profile
a
span.following-count
display: block
font-weight: 900
font-size: 1.2rem
color: lighten($dark-grey,20%)
&:hover span.following-count
color: $dark-grey
.mini-profile-info a:hover .mini-profile-info a:hover
text-decoration: none text-decoration: none
@ -364,6 +367,7 @@ ul.userMenu-search-profiles
/***************** POST AREA ***************/ /***************** POST AREA ***************/
.post-area-new .post-area-new
textarea textarea
resize: none resize: none
+box-sizing(border-box) +box-sizing(border-box)
@ -383,19 +387,26 @@ ul.userMenu-search-profiles
&:focus &:focus
border-bottom: solid 1px $main-color-color border-bottom: solid 1px $main-color-color
.mini-profile .post-area
display: none
#postboard-top #postboard-top
clear: both clear: both
position: fixed position: relative
top: $menu-height
width: 30%
@extend .clear-fix @extend .clear-fix
margin-bottom: 1px margin-bottom: 10px
left: 0
transition: height .3s linear transition: height .3s linear
padding: 10px 10px 5px 10px padding: 10px
background: white background: white
overflow: hidden overflow: hidden
display: none background: $bloc-light-color
+box-shadow(0 0 13px rgba(#111, 0))
+transition-property(box-shadow)
+transition-duration(.2s)
+transition-timing-function(ease-out)
@extend .on
&.on
+box-shadow(0 8px 13px rgba(#111, 0.2))
z-index: 120 z-index: 120
&.hide &.hide
display: none!important display: none!important
@ -417,6 +428,7 @@ ul.userMenu-search-profiles
padding-right: 0 padding-right: 0
display: inline display: inline
+box-sizing(border-box) +box-sizing(border-box)
background: none
float: right float: right
.post-area-new .post-area-new
@extend .open @extend .open
@ -580,8 +592,7 @@ img.twister-user-photo
letter-spacing: 0 letter-spacing: 0
float: right float: right
display: block display: block
padding: 4px margin: 5px
margin: 0 0 0 15px
position: relative position: relative
.view-all-users .view-all-users
@ -593,8 +604,7 @@ img.twister-user-photo
letter-spacing: 0 letter-spacing: 0
float: right float: right
display: block display: block
padding: 4px margin: 5px
margin: 0 0 0 15px
position: relative position: relative
.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
@ -604,13 +614,11 @@ img.twister-user-photo
/***********TOP TRENDS***************/ /***********TOP TRENDS***************/
.toptrends .toptrends-list
ol.toptrends-list
margin: 0 margin: 0
margin-bottom: 10px
clear: both clear: both
border-top: 1px solid $main-background-color
padding: 10px
li li
display: inline-block display: inline-block
@ -624,9 +632,8 @@ ol.toptrends-list
margin: 3px margin: 3px
font-weight: 500 font-weight: 500
background: white background: white
@extend .box-shadow +box-shadow(0 5px 8px rgba(#555, 0.2))
&:hover &:hover
background: rgba(white,.4)
color: $main-color-dark color: $main-color-dark
/********* TWISTDAY REMINDER *******/ /********* TWISTDAY REMINDER *******/