twisterarmy/theme_nin
1
0
Fork 0
mirror of https://github.com/twisterarmy/theme_nin.git synced 2025-02-06 20:15:01 +00:00
Code Issues Projects Releases Wiki Activity

more fixes + changes

Browse Source
This commit is contained in:
myleneb 2015-08-01 22:52:31 +02:00
parent 997b629fba
commit 54c5c7197c
17 changed files with 2918 additions and 774 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
css/fonts/ionicons/ionicons.eot Normal file
View File

Binary file not shown.

2230
css/fonts/ionicons/ionicons.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 326 KiB

BIN
css/fonts/ionicons/ionicons.ttf Normal file
View File

Binary file not shown.

BIN
css/fonts/ionicons/ionicons.woff Normal file
View File

Binary file not shown.

723
css/style.css
View File

File diff suppressed because it is too large Load Diff

36
js/theme_option.js
View File

@ -6,20 +6,17 @@ $(window).resize(function()
$(document).ready(function()
{
var windowHeight = $(window).height();
prout();
reOrganizeTemplates()
$('#postboard-top textarea').on('blur',function(){$('#postboard-top').removeClass('on');});
$('#postboard-top textarea').on('focus',function(){$('#postboard-top').addClass('on');});
$( '.userMenu-home.current a' ).on( 'click', function() {
$('html, body').animate({scrollTop:0},300);
return false
});
// modify the way promoted posts are shown
$( ".promoted-posts-only").click(function() {
//active promoted posts tab
@ -32,8 +29,6 @@ $(document).ready(function()
$('#postboard-top').addClass(promotedPostsOnly ? "hide" : "show");
});
$(".userMenu-search-profiles .follow")
.on("eventToggleFollow", function() {
$(this).text('+').attr('title', polyglot.t('Follow'));
@ -45,9 +40,6 @@ $(document).ready(function()
if (/\/options.html$/i.test(document.location))
$(document).ready(localizeLabels);
$(window).scroll(function(){
window_scrollY = window.pageYOffset; // declare variable here for screen not to scroll when closing modals
});
@ -55,14 +47,28 @@ $(document).ready(function()
$(window).scroll(function(){
window_scrollY = window.pageYOffset; // declare variable here for screen not to scroll when closing modals
if ($(document).scrollTop() >= 142) {
if ($(document).scrollTop() >= 142) { // fixe the textarea on top while scrolling (could be useful)
if (this.css('position') === 'relative')
this.addClass('onTop');
}else if (this.css('position') === 'fixed')
this.removeClass('onTop');
}).bind($('#postboard-top')));*/
});
function prout() {
var modulWrap =
$(document).on( 'click', 'h3', function() {
var thisList = $(this).parents('.module').find('ol');
var thisListTitle = $(this).parents('.module').find('h4');
if (thisList.css('display') === 'none') {thisList.slideDown();thisListTitle.slideDown()}
else {thisList.slideUp();thisListTitle.slideUp()}
});
}
);
function reOrganizeTemplates() { // for nin's templating
@ -82,6 +88,12 @@ function reOrganizeTemplates() { // for nin's templating
$('.mini-profile-indicators').detach().insertAfter($('.dashboard.left .profile-data'));
$('.post-context').each(function(){ $(this).prependTo($(this).parent()); }); // puts context on top of post
// menu
$('.userMenu li > a').wrapInner('<span class="inner"></span>');
///// page following
$('.forEdition h2').detach().prependTo($('.forEdition'));
//loader
newLoader()
}
@ -128,7 +140,7 @@ function openModal(modal) {
modal.content = modal.self.find('.modal-content');
modal.postboard = modal.self.find('.postboard-posts');
modal.self.prependTo('body').fadeIn('slow');
modal.self.prependTo('body').slideDown();
if (modal.classBase === '.modal-wrapper') {

56
sass/base/_commons.sass
View File

@ -6,7 +6,6 @@
html, body
height: 100%
min-height: 100%
color: $defaut-font-color
position: absolute
@ -14,16 +13,15 @@ html, body
html
font-size: $global-font-size
background-color: $main-background-color
//+background-image(linear-gradient(to top right, #fff, $main-background-color, #fff) )
+background-image(radial-gradient(50% 100% , $main-background-color,$main-background-color,$main-background-color, darken($main-background-color, 7%)) )
background-attachment: fixed
background-color: #ddd
body
font-size: $main-font-size
line-height : $main-line-height
font-family : $main-font-family
font-weight: 400
overflow-y: scroll
overflow-y: scroll!important
background-image: image-url("bg.png")
background-attachment: fixed
@ -39,6 +37,8 @@ a
i, em
font-style: italic
font-family: $serif-font-family
letter-spacing: 0
strong, b
font-weight: 600
@ -73,29 +73,33 @@ textarea, input
samp
background: #eee
font-size: .9rem
line-height: .9rem
display: inline-block
padding: 5px 8px
+border-radius(2px)
color: #333
background: $dark-grey
color: white
font-size: 11px
line-height: 11px
display: inline-block
padding: 5px
+border-radius(1px)
font-weight: 500
font-family: monospace
word-wrap: break-word
/* isFollowing */
.isFollowing:after
color: $main-color-color
content: '\e806'
font-family: $symbol-font-family
padding-left: 2px
display: inline
font-size: 10px
vertical-align: top
line-height: 10px
&:hover
text-decoration: none!important
h3 &
display: none
.isFollowing
@extend .ion-checkmark
@extend .ion-after
&:after
color: $main-color-color
padding-left: 3px
display: inline
font-size: 11px
vertical-align: top
line-height: 10px
h3
.isFollowing:before
display: none!important
.isFollowing:after
display: none!important

229
sass/base/_fonts.sass
View File

@ -1,193 +1,120 @@
@font-face
font-family: "Roboto"
src: url("fonts/roboto/Roboto-Regular.ttf")
font-weight: 400
font-family: "Roboto"
src: url("fonts/roboto/Roboto-Regular.ttf")
font-weight: 400
@font-face
font-family: "Roboto"
src: url("fonts/roboto/Roboto-Medium.ttf")
font-weight: 500
font-family: "Roboto"
src: url("fonts/roboto/Roboto-Medium.ttf")
font-weight: 500
@font-face
font-family: "Roboto"
src: url("fonts/roboto/Roboto-Bold.ttf")
font-weight: 700
font-family: "Roboto"
src: url("fonts/roboto/Roboto-Bold.ttf")
font-weight: 700
@font-face
font-family: "Roboto"
src: url("fonts/roboto/Roboto-Black.ttf")
font-weight: 900
font-family: "Roboto"
src: url("fonts/roboto/Roboto-Black.ttf")
font-weight: 900
@font-face
font-family: "Roboto"
src: url("fonts/roboto/Roboto-Italic.ttf")
font-weight: 400
font-style: italic
font-family: "Roboto"
src: url("fonts/roboto/Roboto-Italic.ttf")
font-weight: 400
font-style: italic
@font-face
font-family: "Droid"
src: url("fonts/DroidSerif-Italic.ttf")
font-weight: 400
font-style: italic
font-family: "Droid"
src: url("fonts/DroidSerif-Italic.ttf")
font-weight: 400
font-style: italic
@font-face
font-family: "Roboto"
src: url("fonts/roboto/Roboto-MediumItalic.ttf")
font-weight: 500
font-style: italic
font-family: "Roboto"
src: url("fonts/roboto/Roboto-MediumItalic.ttf")
font-weight: 500
font-style: italic
@font-face
font-family: "Roboto"
src: url("fonts/roboto/Roboto-BoldItalic.ttf")
font-weight: 700
font-style: italic
font-family: "Roboto"
src: url("fonts/roboto/Roboto-BoldItalic.ttf")
font-weight: 700
font-style: italic
/* ICONS */
/******* fontello *******/
@font-face
font-family: "fontello"
src: url('fonts/fontello/fontello.eot?7584488')
src: url('fonts/fontello/fontello.eot?7584488#iefix') format("embedded-opentype"), url('fonts/fontello/fontello.woff?7584488') format("woff"), url('fonts/fontello/fontello.ttf?7584488') format("truetype"), url('fonts/fontello/fontello.svg?7584488#fontello') format("svg")
font-weight: normal
font-style: normal
font-family: "Ionicons"
src: url("fonts/ionicons/ionicons.eot?v=2.0.0")
src: url("fonts/ionicons/ionicons.eot?v=2.0.0#iefix") format("embedded-opentype"), url("fonts/ionicons/ionicons.ttf?v=2.0.0") format("truetype"), url("fonts/ionicons/ionicons.woff?v=2.0.0") format("woff"), url("fonts/ionicons/ionicons.svg?v=2.0.0#Ionicons") format("svg")
font-weight: normal
font-style: normal
[class^="icon-"]:before, [class*=" icon-"]:before, .extend-icon:before, .icon-down-after:after
font-family: "fontello"
font-style: normal
font-weight: normal
speak: none
display: inline-block
text-decoration: inherit
width: 1em
margin-right: 3px
text-align: center
font-variant: normal
text-transform: none
line-height: 1em
margin-left: 2px
.ion:before, .ion-after:after
display: inline-block
font-family: "Ionicons"
speak: none
font-style: inherit
font-weight: inherit
font-variant: inherit
text-transform: normal
text-rendering: auto
line-height: inherit
-webkit-font-smoothing: antialiased
-moz-osx-font-smoothing: grayscale
.ion:after, .ion-after:before
display: none
.icon-search:before
content: '\e800'
.ion-alert:before
content: "\f101"
/* ''*/
.ion-checkmark:after, .ion-checkmark:before
content: "\f122"
.icon-mail:before
content: '\e801'
.ion-gear:before
content: "\f13d"
/* ''*/
.ion-shuffle:before
content: "\f3a8"
.icon-heart:before
content: '\e802'
.ion-mention:before
content: "\f39b"
/* ''*/
.ion-chatbox:before
content: "\f11c"
.icon-star:before
content: '\e803'
.ion-profile:before
content: "\f2d8"
/* ''*/
.ion-plus:before
content: "\f11d"
.icon-user:before
content: '\e804'
.ion-reply:before
content: "\f2d4"
/* ''*/
.ion-close:before
content: "\f12a"
.icon-camera:before
content: '\e805'
.ion-back:before
content: "\f124"
/* ''*/
.ion-post-promo:before
content: "\f470"
.icon-ok:before
content: '\e806'
.ion-post-normal:before
content: "\f1fd"
/* ''*/
.ion-home:before
content: "\f144"
.icon-cancel:before
content: '\e807'
/* ''*/
.icon-plus:before
content: '\e808'
/* ''*/
.icon-minus:before
content: '\e809'
/* ''*/
.icon-down:before
content: '\e80a'
.icon-down-after:after
content: '\e80a'
/* ''*/
.icon-lock:before
content: '\e80b'
/* ''*/
.icon-quote:before
content: '\e80c'
/* ''*/
.icon-comment:before
content: '\e80d'
/* ''*/
.icon-chat:before
content: '\e80e'
/* ''*/
.icon-left:before
content: '\e80f'
/* ''*/
.icon-right:before
content: '\e810'
/* ''*/
.icon-up:before
content: '\e811'
/* ''*/
.icon-cog:before
content: '\e812'
/* ''*/
.icon-doc:before
content: '\e813'
/* ''*/
.icon-arrows:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before
content: '\e814'
/* ''*/
.icon-twistagain:before
content: '\e815'
/* ''*/
.icon-bell:before
content: '\e816'
/* '' */
.ion-network:before
content: "\f2b5"

4
sass/base/_utils.sass
View File

@ -26,13 +26,15 @@ button, a.button
text-transform: uppercase
+transition-property(background, border-color)
+transition-duration(.1s)
color: #444
color: $dark-grey
background: #F8F8F8
border: 1px solid darken( #F8F8F8 , 5%)
font-family: $symbol-font-family, $main-font-family
cursor: pointer
&:hover
border-color: darken( #F8F8F8 , 15%)
text-decoration: none
color: $dark-grey
&.disabled
opacity: .5
color: #999

22
sass/base/_var.sass
View File

@ -3,11 +3,12 @@
$site-width : 1200px
$gut : 20
$postboardWidth : 700px
$miniProfileWidth : $site-width/10
$miniProfileWidth : $site-width/8
$leftWidth : $miniProfileWidth + $gut
$rightWidth : $site-width - ($leftWidth + $postboardWidth)
$mini-usr-img : 42px
$micro-usr-img : 32px
$mini-usr-img : 48px
$usr-img : 64px
$space : 1rem
@ -15,31 +16,32 @@ $space : 1rem
// colors
$light-grey: #C3C3C3
$color-green: #A1B775
$color-red: #EF5D43
$color-blue: #39434F
$dark-grey : #444
$dark-grey : #3E3C42
$main-color-light: #aaa
$main-color-light: #000
$main-color-dark: #222
$main-color-color: $color-green
$main-background-color: #E2E1DD
$main-background-color: #eee
$bloc-light-color : #FDFCFA
$bloc-background-color: #F3F2F0
$bloc-background-color: #F3F2F0
$defaut-font-color: $dark-grey
$global-font-size : 14px
$global-font-size : 15px
$main-font-size : 1rem
$main-line-height : 1.4rem
$main-line-height : 1.3rem
/* FONTS */
$main-font-family: "Roboto", sans-serif
$symbol-font-family: "fontello"
$symbol-font-family: "Ionicons"
$serif-font-family: "Droid", serif

57
sass/layout/_menu.sass
View File

@ -1,8 +1,8 @@
// vars for the menu
$menu-height : 42px
$menu-height : 52px
$menu-font-color: white
$menuBgColor : #67686C
$menuBgColor : $dark-grey
.userMenu
width: 100%
position: fixed
@ -22,22 +22,27 @@ $menuBgColor : #67686C
background: image-url("logo.png") no-repeat 50% 50%
background-size: 20px
li
float: left
margin: 0 20px 0 0
position: relative
display: block
display: inline-block
margin-right: 20px
> a
line-height: $menu-height
padding: 0 .5em
line-height: $menu-height
display: inline-block
color: rgba($menu-font-color, 0.7)!important
font-size: 1.1em
color: rgba($menu-font-color, 0.5)!important
font-size: 1rem
position: relative
font-weight: 400
+box-sizing(border-box)
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
&.current a
@ -49,28 +54,35 @@ $menuBgColor : #67686C
.userMenu li
&.userMenu-home
a span.label
display: block!important
text-align: center
a
@extend .ion-home
.label
display: inline-block!important
.menu-news
position: absolute
text-align: center
display: none
top: 4px
right: -7px
top: 5px
right: -12px
background: $main-color-color
width: 15px
height: 15px
line-height: 15px
font-size: 10px
padding: 1px
margin: 0
font-weight: 900
+border-radius(50%)
letter-spacing: -0.01em
+box-sizing(content-box)
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
@ -84,15 +96,16 @@ $menuBgColor : #67686C
color: $main-color-dark
&.userMenu-search
> input
border: 1px solid #dedede
border: 1px solid rgba(white,.3)
line-height: $menu-height/2
font-size: 12px
padding: 0 7px
background: white
background: rgba(white,.1)
color: white
+border-radius(7px)
&:focus
border-color: $main-color-dark
border-color: rgba(white,.7)
&.userMenu-config > a
@extend .icon-cog
@extend .extend-icon
@extend .ion-gear
font-size: 1.5rem

25
sass/layout/_modal.sass
View File

@ -23,7 +23,10 @@ $header-modal-height : $menu-height
bottom: 0
overflow: hidden
+box-shadow(-8px 0 13px rgba(#111, 0.2))
+transition-property(top, bottom)
+transition-duration(1s)
&.remove
bottom: 300%
// NEW USER MODAL //
&.new-user
@ -151,7 +154,8 @@ $header-modal-height : $menu-height
font-size: 1rem
color: white
span
@extend .extend-icon
@extend .ion
position: absolute
top: 0
line-height: $header-modal-height
@ -166,14 +170,13 @@ $header-modal-height : $menu-height
display: none
&.modal-close
@extend .icon-cancel
@extend .ion-close
right: 10px
&.mark-all-as-read
display: none
@extend .icon-ok
@extend .ion-checkmark
right: 70px
&.modal-back
@extend .icon-left
@extend .ion-back
right: 35px
@ -188,12 +191,18 @@ $header-modal-height : $menu-height
box-sizing: border-box
background: $bloc-light-color
@extend .clear-fix
border-top: 1px solid $main-background-color
border-bottom: 1px solid $main-background-color
width: 100%
min-height: auto
padding: 7px
clear: left
&:first-child
border-top: 1px solid $main-background-color
border-bottom: 1px solid $main-background-color !important
&:last-child
border-bottom: 0
small
display: none
/*********** POPUP PROMPT *************/

78
sass/layout/_postboard.sass
View File

@ -12,6 +12,7 @@
+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))
@ -69,7 +70,7 @@
+transition-property(margin)
+transition-duration(.5s)
+transition-timing-function(ease-out)
color: lighten($defaut-font-color, 10%)
color: $defaut-font-color
cursor: pointer
&:hover
color: #000
@ -77,23 +78,23 @@
.show-more
display: inline-block
float: right
font-size: 12px
font-size: .8rem
color: lighten($dark-grey,30%)
@extend .extend-icon
@extend .icon-chat
&:hover
color: lighten($dark-grey,5%)
.post-expand
color: lighten($dark-grey,30%)
background: $bloc-light-color
cursor: pointer
font-size: 12px
font-size: .8rem
position: absolute
left: 10px
bottom: 10px
&:hover
color: lighten($dark-grey,5%)
.post-data
padding: 10px
padding: 12px 15px
background: $bloc-light-color
@ -116,11 +117,6 @@
.post-expand
display: none
margin: 0
.post-photo
margin: 0
@ -145,18 +141,18 @@
color: black
.post-info-tag
font-size: 12px
font-size: .8rem
opacity: .6
margin-top: 4px
display: inline-block
.post-info-time
position: absolute
font-size: 11px
line-height: 14px
font-size: .8rem
line-height: .8rem
text-decoration: none
top: 11px
right: 11px
top: 12px
right: 15px
color: lighten($dark-grey,30%)
&:hover
color: lighten($dark-grey,5%)
@ -171,23 +167,21 @@
.post-context
font-size: 11px
line-height: 11px
margin: 0 0 1em 0
font-size: .8rem
line-height: .8rem
margin: 0 0 .8rem 0
color: lighten($dark-grey,30%)
span
@extend .icon-twistagain
@extend .extend-icon
@extend .ion-shuffle
@extend .ion
&:before
display: block
float: left
background: $main-color-color
text-align: center
padding: 1px 2px 2px 2px
line-height: 9px
font-size: 9px
+border-radius(3px)
color: white
color: $main-color-color
line-height: .8rem
font-size: .8rem
margin-right: .4em
@ -197,32 +191,37 @@
.post-interactions
margin: 10px 0 3px 0
text-align: right
height: 12px
line-height: 12px
height: .8rem
line-height: .8rem
span
color: lighten($dark-grey,30%)
cursor: pointer
font-size: 12px
line-height: 12px
@extend .extend-icon
font-size: .8rem
line-height: .8rem
@extend .ion
position: relative
margin-left: 7px
display: none
.open .original &
display: inline-block!important
&:hover
color: lighten($dark-grey,5%)
&:before
padding: 3px
&.post-reply
@extend .icon-comment
@extend .ion-plus
&.post-propagate
@extend .icon-twistagain
@extend .ion-shuffle
&.post-favorite
display: none!important //maybe one day
@extend .icon-star
@extend .ion-alert
.post:hover &
.post-reply, .post-propagate //, .post-favorite maybe one day
display: inline-block
.open .related
.post-reply,
.post-propagate,
@ -252,6 +251,7 @@
text-align: center
overflow-y: auto
background: black
clear: both
.post-stats
float: left
@ -261,8 +261,8 @@
font-size: 12px
float: left
line-height: 20px
@extend .extend-icon
@extend .icon-twistagain
@extend .ion-shuffle
@extend .ion
&:before
margin-right: 0
span:last-child

81
sass/layout/_profile.sass
View File

@ -64,7 +64,6 @@ $modal-postboard-post-height: 100%
position: relative
text-align: left
word-wrap: break-word
transition: all .2s linear
background: none!important
padding: 10px
h1, h2
@ -74,7 +73,6 @@ $modal-postboard-post-height: 100%
&:before
content: ""
border: solid 0px #fff
transition: all .2s linear
position: absolute
left: 1px
top: 1px
@ -95,9 +93,10 @@ $modal-postboard-post-height: 100%
float: none
.profile-bio
font-style: italic
@extend i
text-align: left
font-size: 1rem
font-size: .9rem
margin-left: $usr-img + 10
.profile-card-buttons
text-align: center
@ -171,46 +170,58 @@ $modal-postboard-post-height: 100%
/* EDITION PROFILE*/
.forEdition.profile-card
+box-sizing(border-box)
@extend .clear-fix
width: auto
margin: 0
width: $postboardWidth
background: none
padding: 0
.profile-card-main
margin: 0
width: 330px
+box-sizing(border-box)
padding: 10px
padding: 10px 0
input
display: block
margin: 5px auto
background: white
border: 1px solid lighten($dark-grey, 50%)
margin: 0 0 10px 100px
width: 600px
background: $bloc-background-color
border: 1px solid $bloc-light-color
padding: 6px 4px
margin-bottom: 4px
text-align: center
transition: all .2s linear
font-size: 1rem
font-weight: 400
&:hover, &:focus
background: white
border-color: $main-color-light
.input-description
width: 90%
img
width: 70px
float: left
h2
font-weight: 400
padding: 1rem 2rem
color: white
.input-name
font-size: 20px
.forEdition .profile-card-main
.input-website, .input-city
display: inline-block
.input-tox, .input-bitmessage
width: 90%
margin-top: 10px
h2
text-transform: none
font-weight: 700
font-size: .9em
.profile-edition-buttons
text-align: right
.selectable_theme.theme_calm
display: none
button
float: right
margin: 10px
&.last-child
margin-right: 0
&.submit-changes
@extend button.color-1
&.toggle-priv-key
@extend button.color-2
.secret-key-container
text-align: left !important
font-size: 1rem!important
.secret-key
clear: both
margin: 20px 0
background: white
text-align: left !important
font-size: 1rem!important
padding: 10px
.label
clear: both
display: block
font-weight: 500
margin: 20px 0

13
sass/layout/_wrapper.sass
View File

@ -33,16 +33,21 @@
margin-bottom: 20px
background: $bloc-light-color
width: 100%
min-height: $mini-usr-img
+box-shadow(1px 2px 2px rgba(#111, 0.1))
+border-radius(3px)
@extend .clear-fix
overflow: hidden
h3
float: left
padding: 10px
h4
clear: left
border-top: 1px solid $main-background-color
padding: 7px 10px
padding: 10px 10px 5px 10px
font-size: 90%
small
display: none
display: none
ol
@extend .clear-fix
clear: both
position: relative

5
sass/pages/_following.sass
View File

@ -1,8 +1,7 @@
.following
width: 55%
margin-left: 15%
padding: 7px 20px
width: $postboardWidth
float: left
h2
display: none
.following-list li

133
sass/style.sass
View File

@ -1,3 +1,4 @@
@charset "UTF-8"
@import compass
@import 'compass/reset'
@import 'compass/utilities'
@ -33,23 +34,26 @@
cursor: pointer
display: block
margin: 0
padding: 5px
border-bottom: 1px solid $main-background-color
width: 50%
padding: .5rem
float: left
text-align: center
font-size: .9em
transition: color .1s linear
position: relative
border-left: 1px solid $main-background-color
span
font-size: .8rem
line-height: .8rem
display: block
&.disabled
background: $bloc-background-color
&.active, &.active span
color: rgba($defaut-font-color, .3)
z-index: 3
&.active
color: $defaut-font-color
cursor: default
&:hover span, &.disabled:hover span
color: $defaut-font-color
&.disabled span
color: rgba($defaut-font-color, .3)
z-index: 5
@ -99,7 +103,7 @@ ul.userMenu-search-profiles
width: 100%
font-size: 12px
font-weight: 400
line-height: $mini-usr-img
line-height: $mini-usr-img / 1.5
display: block
margin: 0
padding: 0
@ -114,30 +118,31 @@ ul.userMenu-search-profiles
.mini-screen-name
font-weight: 500
.mini-profile-photo
width: $mini-usr-img
width: $mini-usr-img / 1.5
height: auto
min-height: $mini-usr-img
height: $mini-usr-img / 1.5
overflow: hidden
margin: 5px
float: left
overflow-x: hidden
.mini-profile-info
width: 100%
float: none
.mini-profile-name
padding: 5px 0 0 0
button
font-size: 1.4rem
line-height: $mini-usr-img - 15
height: $mini-usr-img - 10
width: $mini-usr-img
font-size: 13px
line-height: $mini-usr-img / 2
height: $mini-usr-img / 1.5
width: $mini-usr-img / 1.5
text-align: center
font-weight: 500
font-weight: 700
padding: 0
+border-radius(2px)
@extend .extend-icon
@extend .ion
position: absolute
top: 10px
right: 10px
top: 5px
right: 5px
@ -199,7 +204,7 @@ ul.userMenu-search-profiles
border-bottom: 1px solid $main-background-color
a
color: lighten($dark-grey,20%)
color: lighten($dark-grey,10%)
display: block
padding: 1rem 0
&:hover
@ -211,14 +216,14 @@ ul.userMenu-search-profiles
font-size: 1.4rem!important
.userMenu-connections a
@extend .icon-bell
@extend .extend-icon
@extend .ion-mention
@extend .ion
.userMenu-messages a
@extend .icon-mail
@extend .extend-icon
@extend .ion-chatbox
@extend .ion
.userMenu-user a
@extend .icon-user
@extend .extend-icon
@extend .ion-profile
@extend .ion
.messages-qtd
position: absolute
@ -237,7 +242,7 @@ ul.userMenu-search-profiles
.mini-profile-view
display: none
.left .mini-profile-info
padding-top: 32px
padding-top: 20px
.mini-profile-name
color: $dark-grey
@ -299,30 +304,28 @@ ul.userMenu-search-profiles
display: block
position: absolute
bottom: 10px
text-align: center
padding: 10px
width: 100%
background: $bloc-light-color
font-size: 12px
z-index: 10
+transition(all .2s linear)
+box-shadow(-8px 0 13px rgba(#111, 0.2))
.show-more-followers
font-weight: 700
display: block
cursor: pointer
@extend button
@extend .small
float: right
color: $dark-grey
margin-right: 5px
.mini-follower-link, .followed-by
display: inline-block
margin: 1px
margin: 1px 5px
line-height: 12px
&.isFollowing:after
display: none
&:after
content: ''
font-weight: 900
color: $main-color-dark
margin-left: 1px
@ -416,23 +419,13 @@ textarea.splited-post
&:hover button
display: block
small
display: none
h3
float: left
padding: 20px
ol
@extend .clear-fix
clear: both
img.twister-user-photo
float: left
display: block
float: left
width: $mini-usr-img
width: $micro-usr-img
height: auto
margin: 0 10px 0 0
@ -467,16 +460,16 @@ img.twister-user-photo
.twister-user-remove
font-size: 13px
opacity: .2
opacity: .5
text-decoration: none
cursor: pointer
position: absolute
padding: 5px
top: -5px
right: -5px
display: inline-block
@extend .icon-cancel
@extend .extend-icon
top: 0
right: 0
display: block
@extend .ion-close
@extend .ion
.twister-user:hover .twister-user-remove
text-decoration: none
@ -485,8 +478,8 @@ img.twister-user-photo
opacity: 1
.refresh-toptrends, .twistday-reminder .refresh, .refresh-users
@extend .icon-arrows
@extend .extend-icon
@extend .ion-alert
@extend .ion
color: $main-color-dark
cursor: pointer
font-size: 11px
@ -542,26 +535,14 @@ img.twister-user-photo
/********* TWISTDAY REMINDER *******/
.twistday-reminder
small
display: none
.twister-user
background: $bloc-light-color
position: relative
+transition-property(background)
+transition-duration(.1s)
&:hover
background: white
.twister-user-full, .twister-user-tag
font-size: 1rem
font-size: .9rem
line-height: 1rem
color: $defaut-font-color
font-weight: 500
opacity: 1
letter-spacing: 0
display: inline-block
.twisterday
font-size: 12px