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

modal & search style

nin-v2
myleneb 9 years ago
parent
45b452aa92
commit
b98f4069aa
10 changed files with 211 additions and 133 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. 163
      css/style.css
  2. 10
      js/theme_option.js
  3. 9
      sass/base/_utils.sass
  4. 6
      sass/base/_var.sass
  5. 23
      sass/layout/_dm.sass
  6. 17
      sass/layout/_modal.sass
  7. 10
      sass/layout/_postboard.sass
  8. 13
      sass/layout/_profile.sass
  9. 6
      sass/pages/_following.sass
  10. 87
      sass/style.sass

163
css/style.css
Unescape View File

@ -243,6 +243,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
/* '' */ /* '' */
/* FONTS */ /* FONTS */
/* usefull vars */
* { * {
outline: none !important; outline: none !important;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
@ -437,6 +438,15 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
font-size: 0.7rem; font-size: 0.7rem;
line-height: 0.7rem; line-height: 0.7rem;
} }
button.light, a.button.light {
background: #eee;
border-color: #e1e1e1;
color: #222;
font-weight: 500;
}
button.light:hover, a.button.light:hover {
border-color: #aeaeae;
}
.userMenu { .userMenu {
width: 100%; width: 100%;
@ -556,6 +566,12 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
right: 0; right: 0;
bottom: 0; bottom: 0;
overflow: hidden; overflow: hidden;
-moz-border-radius: 20px 0 0 0;
-webkit-border-radius: 20px;
border-radius: 20px 0 0 0;
-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;
@ -727,11 +743,23 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
.modal-wrapper.directMessages .post-area-new { .modal-wrapper.directMessages .post-area-new {
display: none; display: none;
z-index: 5; z-index: 5;
background: #222 !important; background: #EBEBEB !important;
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100% !important; width: 100% !important;
padding: 20px !important; padding: 20px !important;
-moz-box-shadow: 0 -8px 13px rgba(17, 17, 17, 0.1);
-webkit-box-shadow: 0 -8px 13px rgba(17, 17, 17, 0.1);
box-shadow: 0 -8px 13px rgba(17, 17, 17, 0.1);
}
.modal-wrapper.directMessages #post-preview {
background: none;
border: none;
padding: 5px;
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;
@ -747,11 +775,10 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
background: #f0f0f0; background: #f0f0f0;
} }
.modal-wrapper.directMessages .post-photo { .modal-wrapper.directMessages .post-photo {
height: 48px; width: 40px;
width: 48px;
} }
.modal-wrapper.directMessages .post-text { .modal-wrapper.directMessages .post-text {
margin-left: 58px; margin-left: 50px;
font-size: 0.9rem; font-size: 0.9rem;
} }
.modal-wrapper.directMessages .post-info-name { .modal-wrapper.directMessages .post-info-name {
@ -796,6 +823,7 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
.direct-messages-list li { .direct-messages-list li {
position: relative; position: relative;
border-bottom: 1px solid #EBEBEB; border-bottom: 1px solid #EBEBEB;
background: #FDFCFA;
} }
.direct-messages-thread { .direct-messages-thread {
@ -852,7 +880,7 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
float: left; float: left;
word-wrap: break-word; word-wrap: break-word;
max-width: 70%; max-width: 70%;
min-height: 48px; min-height: 40px;
} }
.direct-messages-thread .post .post-photo { .direct-messages-thread .post .post-photo {
position: absolute; position: absolute;
@ -914,21 +942,20 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
.mini-following-info { .mini-following-info {
border-bottom: 1px solid #EBEBEB; border-bottom: 1px solid #EBEBEB;
line-height: 45px; line-height: 40px;
} }
.mini-following-info a { .mini-following-info a {
display: block; display: block;
padding: 10px; padding: 10px;
width: 100%; width: 100%;
color: #444; color: #444;
background: #EBEBEB; background: #FDFCFA;
} }
.mini-following-info a:hover { .mini-following-info a:hover {
background: #FDFCFA; background: white;
} }
.mini-following-info .mini-profile-photo { .mini-following-info .mini-profile-photo {
height: 48px; width: 40px;
width: 48px;
line-height: 0; line-height: 0;
margin: 0 1rem 0 0; margin: 0 1rem 0 0;
float: left; float: left;
@ -958,11 +985,12 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
font-size: 0.8rem; font-size: 0.8rem;
line-height: 1rem; line-height: 1rem;
width: 80%; width: 80%;
padding-left: 60px;
} }
.modal-wrapper.who-to-follow-modal button { .modal-wrapper.who-to-follow-modal button {
position: absolute; position: absolute;
right: 0; right: 10px;
top: 5%; top: 10px;
} }
.modal-wrapper.who-to-follow-modal .bio { .modal-wrapper.who-to-follow-modal .bio {
color: rgba(0, 0, 0, 0.6); color: rgba(0, 0, 0, 0.6);
@ -1050,23 +1078,15 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
} }
.profile-card-photo { .profile-card-photo {
height: 70px; height: auto;
width: 70px; width: 64px;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
margin: 0 auto; margin: 0 auto;
display: block; display: block;
float: left;
} }
.profile-card-photo.forEdition { .profile-card-photo.forEdition {
-moz-border-radius: 50%; float: none;
-webkit-border-radius: 50%;
border-radius: 50%;
height: 75px;
margin: 0 auto;
display: block;
width: 75px;
} }
.profile-bio { .profile-bio {
@ -1297,7 +1317,7 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
display: inline-block; display: inline-block;
float: left; float: left;
vertical-align: middle; vertical-align: middle;
width: 45px; width: 40px;
} }
.post-photo img { .post-photo img {
width: 100%; width: 100%;
@ -1339,11 +1359,14 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
} }
.post-text { .post-text {
margin: 0 0 0 55px; margin: 0 0 0 50px;
word-wrap: break-word; word-wrap: break-word;
min-height: 25px; min-height: 20px;
padding: 0; padding: 0;
} }
.post-text a:hover {
text-decoration: underline;
}
.post-context { .post-context {
font-size: 11px; font-size: 11px;
@ -1528,7 +1551,8 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
} }
.following { .following {
width: 100%; width: 40%;
margin-left: 30%;
padding: 20px; padding: 20px;
} }
.following h2 { .following h2 {
@ -1558,8 +1582,7 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
color: #444; color: #444;
} }
.following .mini-profile-photo { .following .mini-profile-photo {
height: 48px; width: 40px;
width: 48px;
line-height: 0; line-height: 0;
margin: 0 1rem 0 0; margin: 0 1rem 0 0;
float: left; float: left;
@ -1814,8 +1837,8 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
} }
.promoted-posts-only li { .promoted-posts-only li {
cursor: pointer; cursor: pointer;
display: inline-block; display: block;
margin: 0 0 0 5px; margin: 0;
padding: 5px 15px; padding: 5px 15px;
font-size: 0.9em; font-size: 0.9em;
transition: color 0.1s linear; transition: color 0.1s linear;
@ -1883,9 +1906,9 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
display: none; display: none;
background: #222; background: #222;
position: absolute; position: absolute;
top: 45px; top: 46px;
right: -10px; right: 0;
width: 250px; width: 320px;
overflow: hidden; overflow: hidden;
-moz-box-shadow: 0 8px 33px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 8px 33px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 8px 33px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 8px 33px rgba(0, 0, 0, 0.3);
@ -1905,23 +1928,42 @@ button.small, .modal-wrapper.who-to-follow-modal button, .who-to-follow.module l
ul.userMenu-search-profiles { ul.userMenu-search-profiles {
width: 100%; width: 100%;
padding: 0; padding: 0;
background: #FDFCFA;
} }
ul.userMenu-search-profiles li { ul.userMenu-search-profiles li {
float: none; float: none;
display: block; display: block;
margin: 0; margin: 0;
cursor: pointer;
background: #FDFCFA;
border-bottom: 1px solid #EBEBEB; border-bottom: 1px solid #EBEBEB;
} }
ul.userMenu-search-profiles .mini-profile-name { ul.userMenu-search-profiles li:hover {
background: white;
}
ul.userMenu-search-profiles li a {
display: block;
width: 100%;
font-size: 12px; font-size: 12px;
font-weight: 400;
line-height: 40px;
display: block; display: block;
margin: 0; margin: 0;
padding: 0; padding: 0;
color: #444;
}
ul.userMenu-search-profiles li a span, ul.userMenu-search-profiles li a b {
display: inline-block;
color: #444;
font-weight: 400;
font-size: 12px;
}
ul.userMenu-search-profiles .mini-screen-name b,
ul.userMenu-search-profiles .mini-screen-name {
font-weight: 500;
} }
ul.userMenu-search-profiles .mini-profile-photo { ul.userMenu-search-profiles .mini-profile-photo {
width: 30px; width: 40px;
height: 30px; height: auto;
margin: 10px; margin: 10px;
float: left; float: left;
} }
@ -1930,24 +1972,25 @@ ul.userMenu-search-profiles .mini-profile-info {
float: none; float: none;
} }
ul.userMenu-search-profiles button { ul.userMenu-search-profiles button {
padding: 3px 5px; font-size: 1.4rem;
line-height: 25px;
height: 30px;
width: 40px;
text-align: center;
font-weight: 500;
padding: 0;
-moz-border-radius: 2px; -moz-border-radius: 2px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
position: absolute; position: absolute;
bottom: 10px; top: 10px;
right: 10px; right: 10px;
} }
ul.userMenu-search-profiles button:after {
content: "";
font-family: "fontello";
font-size: 1.1rem;
}
.userMenu-search input[type="text"] { .userMenu-search input[type="text"] {
float: right; float: right;
padding: 3px 10px; padding: 3px 10px;
margin: 9px 20px 0 0; margin: 10px 20px 0 0;
border: none; border: none;
background: #EBEBEB; background: #EBEBEB;
box-sizing: border-box; box-sizing: border-box;
@ -2052,19 +2095,13 @@ ul.userMenu-search-profiles button:after {
} }
.mini-profile-photo { .mini-profile-photo {
width: 70px; width: 64px;
height: 70px; height: auto;
overflow: hidden;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
display: block; display: block;
margin: auto; margin: auto;
} }
.mini-profile-photo img { .mini-profile-photo img {
min-width: 100%; width: 100%;
min-height: 100%;
border-radius: 50%;
} }
.profile-data { .profile-data {
@ -2149,7 +2186,7 @@ ul.userMenu-search-profiles button:after {
-moz-transition: height 0.3s linear; -moz-transition: height 0.3s linear;
-o-transition: height 0.3s linear; -o-transition: height 0.3s linear;
-ms-transition: height 0.3s linear; -ms-transition: height 0.3s linear;
height: 48px; height: 40px;
border: none; border: none;
background: white; background: white;
border: 1px solid rgba(0, 0, 0, 0.1); border: 1px solid rgba(0, 0, 0, 0.1);
@ -2162,13 +2199,17 @@ ul.userMenu-search-profiles button:after {
#postboard-top { #postboard-top {
clear: both; clear: both;
position: relative; position: fixed;
top: 50px;
width: 30%;
margin-bottom: 1px; margin-bottom: 1px;
left: 0;
transition: height 0.3s linear; transition: height 0.3s linear;
padding: 10px 10px 5px 10px; padding: 10px 10px 5px 10px;
background: white; background: white;
overflow: hidden; overflow: hidden;
display: none; display: none;
z-index: 120;
} }
#postboard-top.hide { #postboard-top.hide {
display: none !important; display: none !important;
@ -2180,9 +2221,7 @@ ul.userMenu-search-profiles button:after {
position: absolute; position: absolute;
top: 10px; top: 10px;
left: 10px; left: 10px;
width: 48px; width: 40px;
height: 48px;
overflow: hidden;
} }
#postboard-top .profile-photo img { #postboard-top .profile-photo img {
width: 100%; width: 100%;
@ -2307,7 +2346,7 @@ img.twister-user-photo {
float: left; float: left;
display: block; display: block;
float: left; float: left;
width: 48px; width: 40px;
height: auto; height: auto;
margin: 0 10px; margin: 0 10px;
background: #EBEBEB; background: #EBEBEB;

10
js/theme_option.js
Unescape View File

@ -25,7 +25,7 @@ $(document).ready(function()
$('.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($('.dashboard.left'));
$('.mini-profile-indicators').detach().insertAfter($('.dashboard.left .profile-data')); $('.mini-profile-indicators').detach().insertAfter($('.dashboard.left .profile-data'));
@ -47,21 +47,21 @@ $(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");
}); });
$(".userMenu-search-profiles .follow") $(".userMenu-search-profiles .follow")
.on("eventToggleFollow", function() { .on("eventToggleFollow", function() {
$(this).text('').attr('title', polyglot.t('Follow')); $(this).text('+').attr('title', polyglot.t('Follow'));
}) })
.on("eventToggleUnfollow", function() { .on("eventToggleUnfollow", function() {
$(this).text('').attr('title', polyglot.t('Unfollow')); $(this).text('-').attr('title', polyglot.t('Unfollow'));
}); });
if (/\/options.html$/i.test(document.location)) if (/\/options.html$/i.test(document.location))

9
sass/base/_utils.sass
Unescape View File

@ -58,4 +58,11 @@ button, a.button
padding: .5rem padding: .5rem
font-weight: 700 font-weight: 700
font-size: .7rem font-size: .7rem
line-height: .7rem line-height: .7rem
&.light
background: #eee
border-color: darken(#eee, 5%)
color: $main-color-dark
font-weight: 500
&:hover
border-color: darken(#eee, 25%)

6
sass/base/_var.sass
Unescape View File

@ -35,3 +35,9 @@ $main-line-height : 1.4rem
$main-font-family: "Roboto", sans-serif $main-font-family: "Roboto", sans-serif
$symbol-font-family: "fontello" $symbol-font-family: "fontello"
$serif-font-family: "Droid", serif $serif-font-family: "Droid", serif
/* usefull vars */
$mini-usr-img : 40px
$usr-img : 64px

23
sass/layout/_dm.sass
Unescape View File

@ -2,15 +2,26 @@
.modal-wrapper.directMessages .modal-wrapper.directMessages
.post-area-new .post-area-new
display: none display: none
z-index: 5 z-index: 5
background: $main-color-dark !important background: $bloc-background-color !important
position: absolute position: absolute
bottom: 0 bottom: 0
width: 100% !important width: 100% !important
padding: 20px!important padding: 20px!important
+box-shadow(0 -8px 13px rgba(#111, 0.1))
#post-preview
background: none
border: none
padding: 5px
width: 100%!important
.post-area-extras
span
color: white
.modal-header .modal-header
h3 span h3 span
display: inline-block!important display: inline-block!important
@ -24,10 +35,9 @@
background: #f0f0f0 background: #f0f0f0
.post-photo .post-photo
height: 48px width: $mini-usr-img
width: 48px
.post-text .post-text
margin-left: 58px margin-left: $mini-usr-img + 10px
font-size: .9rem font-size: .9rem
.post-info-name .post-info-name
float: none float: none
@ -65,6 +75,7 @@
li li
position: relative position: relative
border-bottom: 1px solid $main-background-color border-bottom: 1px solid $main-background-color
background: $bloc-light-color
.direct-messages-thread .direct-messages-thread
padding-bottom: 180px padding-bottom: 180px
@ -121,7 +132,7 @@
float: left float: left
word-wrap: break-word word-wrap: break-word
max-width: 70% max-width: 70%
min-height: 48px min-height: $mini-usr-img
.post-photo .post-photo
position: absolute position: absolute

17
sass/layout/_modal.sass
Unescape View File

@ -19,7 +19,8 @@ $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(-8px 0 13px rgba(#111, 0.2))
.postboard .postboard
border: none border: none
padding: 0 padding: 0
@ -231,7 +232,7 @@ $header-modal-height : $menu-height
display: none display: none
.mini-following-info .mini-following-info
border-bottom: 1px solid $main-background-color border-bottom: 1px solid $main-background-color
line-height: 45px line-height: $mini-usr-img
a a
display: block display: block
@ -239,12 +240,11 @@ $header-modal-height : $menu-height
width: 100% width: 100%
@extend .clear-fix @extend .clear-fix
color: $defaut-font-color color: $defaut-font-color
background: $bloc-background-color background: $bloc-light-color
&:hover &:hover
background: $bloc-light-color background: white
.mini-profile-photo .mini-profile-photo
height: 48px width: $mini-usr-img
width: 48px
line-height: 0 line-height: 0
margin: 0 $space 0 0 margin: 0 $space 0 0
float: left float: left
@ -277,10 +277,11 @@ $header-modal-height : $menu-height
font-size: .8rem font-size: .8rem
line-height: 1rem line-height: 1rem
width: 80% width: 80%
padding-left: $mini-usr-img + 20
button button
position: absolute position: absolute
right: 0 right: 10px
top: 5% top: 10px
@extend .small @extend .small
.bio .bio
color: rgba(0, 0, 0, 0.6) color: rgba(0, 0, 0, 0.6)

10
sass/layout/_postboard.sass
Unescape View File

@ -3,7 +3,6 @@
// vars for postboard // vars for postboard
$avatar-width : 45px
.postboard .postboard
@ -80,7 +79,7 @@ $avatar-width : 45px
display: inline-block display: inline-block
float: left float: left
vertical-align: middle vertical-align: middle
width: $avatar-width width: $mini-usr-img
img img
width: 100% width: 100%
height: auto!important height: auto!important
@ -116,11 +115,12 @@ $avatar-width : 45px
color: lighten($dark-grey,5%) color: lighten($dark-grey,5%)
.post-text .post-text
margin: 0 0 0 ($avatar-width +10) margin: 0 0 0 ($mini-usr-img +10)
word-wrap: break-word word-wrap: break-word
min-height: $avatar-width - 20 min-height: $mini-usr-img - 20
padding: 0 padding: 0
a:hover
text-decoration: underline
.post-context .post-context

13
sass/layout/_profile.sass
Unescape View File

@ -89,18 +89,13 @@ $modal-postboard-post-height: 100%
z-index: 1 z-index: 1
.profile-card-photo .profile-card-photo
height: 70px height: auto
width: 70px width: $usr-img
+border-radius(50%)
margin: 0 auto margin: 0 auto
display: block display: block
float: left
.profile-card-photo.forEdition .profile-card-photo.forEdition
+border-radius(50%) float: none
height: 75px
margin: 0 auto
display: block
width: 75px
.profile-bio .profile-bio
padding: 10px padding: 10px

6
sass/pages/_following.sass
Unescape View File

@ -1,6 +1,7 @@
.following .following
width: 100% width: 40%
margin-left: 30%
padding: 20px padding: 20px
h2 h2
display: none display: none
@ -23,8 +24,7 @@
.mini-profile-photo .mini-profile-photo
height: 48px width: $mini-usr-img
width: 48px
line-height: 0 line-height: 0
margin: 0 $space 0 0 margin: 0 $space 0 0
float: left float: left

87
sass/style.sass
Unescape View File

@ -32,8 +32,8 @@
li li
cursor: pointer cursor: pointer
display: inline-block display: block
margin: 0 0 0 5px margin: 0
padding: 5px 15px padding: 5px 15px
font-size: .9em font-size: .9em
transition: color .1s linear transition: color .1s linear
@ -102,9 +102,9 @@
display: none display: none
background: $main-color-dark background: $main-color-dark
position: absolute position: absolute
top: 45px top: $menu-height - 4
right: -10px right: 0
width: 250px width: 320px
overflow: hidden overflow: hidden
+box-shadow(0 8px 33px rgba(#000, .3)) +box-shadow(0 8px 33px rgba(#000, .3))
@ -122,22 +122,41 @@
ul.userMenu-search-profiles ul.userMenu-search-profiles
width: 100% width: 100%
padding: 0 padding: 0
background: $bloc-light-color
li li
float: none float: none
display: block display: block
margin: 0 margin: 0
@extend .clear-fix @extend .clear-fix
cursor: pointer
background: $bloc-light-color
border-bottom: 1px solid $main-background-color border-bottom: 1px solid $main-background-color
.mini-profile-name &:hover
font-size: 12px background: white
display: block
margin: 0 a
padding: 0 display: block
width: 100%
font-size: 12px
font-weight: 400
line-height: $mini-usr-img
display: block
margin: 0
padding: 0
color: $defaut-font-color
span, b
display: inline-block
color: $defaut-font-color
font-weight: 400
font-size: 12px
.mini-screen-name b,
.mini-screen-name
font-weight: 500
.mini-profile-photo .mini-profile-photo
width: 30px width: $mini-usr-img
height: 30px height: auto
margin: 10px margin: 10px
float: left float: left
.mini-profile-info .mini-profile-info
@ -145,15 +164,18 @@ ul.userMenu-search-profiles
float: none float: none
button button
padding: 3px 5px font-size: 1.4rem
line-height: $mini-usr-img - 15
height: $mini-usr-img - 10
width: $mini-usr-img
text-align: center
font-weight: 500
padding: 0
+border-radius(2px) +border-radius(2px)
@extend .extend-icon @extend .extend-icon
&:after
content: ''
font-family: $symbol-font-family
font-size: 1.1rem
position: absolute position: absolute
bottom: 10px top: 10px
right: 10px right: 10px
@ -161,7 +183,7 @@ ul.userMenu-search-profiles
.userMenu-search input[type="text"] .userMenu-search input[type="text"]
float: right float: right
padding: 3px 10px padding: 3px 10px
margin: 9px 20px 0 0 margin: 10px 20px 0 0
border: none border: none
background: $bloc-background-color background: $bloc-background-color
box-sizing: border-box box-sizing: border-box
@ -271,16 +293,12 @@ ul.userMenu-search-profiles
.mini-profile-photo .mini-profile-photo
width: 70px width: $usr-img
height: 70px height: auto
overflow: hidden
+border-radius(50%)
display: block display: block
margin: auto margin: auto
img img
min-width: 100% width: 100%
min-height: 100%
border-radius: (50%)
@ -356,7 +374,7 @@ ul.userMenu-search-profiles
-moz-transition: height 0.3s linear -moz-transition: height 0.3s linear
-o-transition: height 0.3s linear -o-transition: height 0.3s linear
-ms-transition: height 0.3s linear -ms-transition: height 0.3s linear
height: 48px height: $mini-usr-img
border: none border: none
background: rgba(255, 255, 255, 1) background: rgba(255, 255, 255, 1)
border: 1px solid rgba(0, 0, 0, 0.1) border: 1px solid rgba(0, 0, 0, 0.1)
@ -367,14 +385,18 @@ ul.userMenu-search-profiles
#postboard-top #postboard-top
clear: both clear: both
position: relative position: fixed
top: $menu-height
width: 30%
@extend .clear-fix @extend .clear-fix
margin-bottom: 1px margin-bottom: 1px
left: 0
transition: height .3s linear transition: height .3s linear
padding: 10px 10px 5px 10px padding: 10px 10px 5px 10px
background: white background: white
overflow: hidden overflow: hidden
display: none display: none
z-index: 120
&.hide &.hide
display: none!important display: none!important
&.show &.show
@ -384,9 +406,7 @@ ul.userMenu-search-profiles
position: absolute position: absolute
top: 10px top: 10px
left: 10px left: 10px
width: 48px width: $mini-usr-img
height: 48px
overflow: hidden
img img
width: 100% width: 100%
.post-area .post-area
@ -497,8 +517,7 @@ img.twister-user-photo
float: left float: left
display: block display: block
float: left float: left
width: $mini-usr-img
width: 48px
height: auto height: auto
margin: 0 10px margin: 0 10px
background: $main-background-color background: $main-background-color

Write Preview
Loading…
Cancel
Save