Nin is a theme for twister-html
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

752 lines
12 KiB

@charset "UTF-8"
@import compass
@import 'compass/reset'
@import 'compass/utilities'
// base
@import 'base/_fonts'
@import 'base/_var'
@import 'base/_commons'
@import 'base/_utils'
// layout
@import 'layout/_menu'
@import 'layout/_wrapper'
@import 'layout/_modal'
@import 'layout/_login'
@import 'layout/_profile'
@import 'layout/_postboard'
@import 'layout/_following'
// pages
@import 'pages/_profile'
@import 'pages/_network'
@import 'layout/_tabs'
.promoted-posts-only
margin: 0 0
li
cursor: pointer
display: block
margin: 0
width: 50%
padding: .5rem
float: left
text-align: center
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
color: rgba($defaut-font-color, .3)
z-index: 3
&.active
color: $defaut-font-color
cursor: default
z-index: 5
/********** CONFIG SUBMENU & SEARCH RESULTS ************/
.dialog-modal
display: none
background: $main-color-dark
position: absolute
top: $menu-height - 4
right: 0
width: 320px
overflow: hidden
+box-shadow(0 8px 33px rgba(#000, .3))
.userMenu-search .dialog-modal:after
right: auto
left: 150px
.direct-messages, .dropdown-menu-item
display: block
padding: 10px
ul.userMenu-search-profiles
width: 100%
padding: 0
li
float: none
display: block
margin: 0
@extend .clear-fix
cursor: pointer
background: $bloc-light-color
border-bottom: 1px solid $main-background-color
&:hover
background: white
button
display: block
a
display: block
width: 100%
font-size: 12px
font-weight: 400
line-height: $mini-usr-img / 1.5
display: block
margin: 0
padding: 0
color: $defaut-font-color
span, b, span:hover, b:hover
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
width: $mini-usr-img / 1.5
height: auto
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
display: none
font-size: 0.7rem
line-height: 0.7rem
text-align: center
font-weight: 700
padding: 0.4rem
position: absolute
top: 8px
right: 8px
.userMenu-search-sugestions a
color: rgba(0, 0, 0, 0.7)
padding: 10x 20px
display: block
clear: both
/***************** MINI PROFILE *******************************/
.mini-profile
a:hover
text-decoration: none
a.button
background: $main-color-light
margin: 1em auto
.post-area
margin-top: 1px
margin-bottom: 20px
@extend .clear-fix
.modal-header
@extend .modal-header
h3
padding: 0 0 0 20px
.post-area-new
@extend .open
padding: 20px
+box-shadow(none)
margin: 0
textarea
width: 100%
.mini-profile-indicators
margin: 0
text-align: center
@extend .clear-fix
border-top: 1px solid $main-background-color
background: $bloc-background-color
li
+box-sizing(border-box)
display: block
position: relative
font-size: .8em
text-align: center
border-bottom: 1px solid $main-background-color
a
color: lighten($dark-grey,10%)
display: block
padding: .5rem 0
&:hover
color: $dark-grey
background: $bloc-light-color
&:before
display: block!important
width: 100%!important
font-size: 1.4rem!important
.userMenu-connections a
@extend .ion-mention
@extend .ion
.userMenu-messages a
@extend .ion-chatbox
@extend .ion
.userMenu-user a
@extend .ion-profile
@extend .ion
.userMenu-groupmessages a
@extend .ion-android-contacts
@extend .ion
.userMenu-collapsePosts a
@extend .ion
@extend .ion-arrow-shrink
.messages-qtd
position: absolute
top: 5px
right: 5px
background: $main-color-color
text-align: center
+text-shadow(1px 1px 0 rgba(#000,.2))
color: #fff
width: 25px
height: 25px
line-height: 25px
font-size: 10px
font-weight: 900
+border-radius(50%)
.mini-profile-view
display: none
.left .mini-profile-info
padding-top: 20px
.mini-profile-name
color: $dark-grey
font-size: 1em
font-weight: 500
padding: 10px 0
display: block
text-align: center
margin: auto
&:hover
color: $main-color-light
.mini-profile-photo img
width: $usr-img
height: auto
display: block
margin: auto
.profile-data
@extend .clear-fix
clear: both
padding: 0 0 1em 0
text-align: center
background: $bloc-background-color
.mini-profile &
display: none
li
display: inline
margin: 0 5px
float: none
a
color: $dark-grey
display: inline-block
font-size: 13px
padding-bottom: 3px
&:hover
color: $main-color-light
span
&.posts-count, &.following-count, &.followers-count
display: inline-block
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
text-decoration: none
.who-follow
display: block
position: absolute
bottom: 10px
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
@include button-basic
float: right
margin-right: 5px
.mini-follower-link, .followed-by
display: inline-block
margin: 1px 5px
line-height: 12px
&.isFollowing:after
display: none
.latest-activity
font-size: 12px
label
display: inline-block
.time
display: inline-block
cursor: pointer
font-size: 12px
line-height: 12px
margin: 1px 5px
/***************** POST AREA ***************/
.post-area-new
textarea
resize: none
+box-sizing(border-box)
width: 100%
display: block
transition: all .3s linear
-webkit-transition: height 0.3s linear
-moz-transition: height 0.3s linear
-o-transition: height 0.3s linear
-ms-transition: height 0.3s linear
height: $mini-usr-img
border: none
background: rgba(255, 255, 255, 1)
border: 1px solid rgba(0, 0, 0, 0.1)
padding: 5px
margin: 5px 0
&:focus
border-bottom: solid 1px $main-color-color
.mini-profile .post-area
display: none
&.display
display: block
@include prompt-wrapper-basic
margin-top: -110px
#post-preview
border: 1px solid $main-background-color
border-bottom: 0
padding: 5px
+transition-property(all)
+transition-duration(.1s)
width: 100%!important
font-size: 90%
line-height: normal
word-wrap: break-word
clear: left
#opt-form-post-preview
width: 100%
#post-preview
background-color: #FCFFF3
width: 76% !important
margin-left: 16px
padding: 8px
.preview-container
background-color: rgba(0,0,0, 0.05)
margin-top: 8px
.image-preview
width: auto
.post-area-new.open textarea
height: 80px
textarea.splited-post
box-shadow: none!important
height: 28px
.splited-post-counter
color: rgba(0, 0, 0, 0.3)
font-weight: bold
&:before
content: '\2026'
.post-area-extras
overflow: hidden
height: 0
text-align: right
.post-area-new.open > .post-area-extras
height: auto
transition: all .6s linear
.post-area-remaining
padding-right: 3px
&.warn
color: #ff0000
/******** WHO TO FOLLOW ********/
.who-to-follow
&.module
li
button
position: absolute
right: 30px
top: 10px
@include button-small-basic
display: none
padding: .4rem!important
&:hover button
display: block
img.twister-user-photo
float: left
display: block
float: left
width: $micro-usr-img
height: auto
margin: 0 10px 0 0
.followers
font-size: 12px
label, a
display: inline-block
.followed-by
font-size: 12px
cursor: pointer
display: block
.twister-user-name, .twister-by-user-name
font-weight: 500
font-size: 14px
text-decoration: none
color: $main-color-dark
.twister-user-name
font-weight: 700
.twister-user-tag
font-size: 12px
line-height: 14px
opacity: .8
display: inline-block
letter-spacing: 0px
.twister-user-remove
font-size: 13px
opacity: .5
text-decoration: none
cursor: pointer
position: absolute
padding: 5px
top: 0
right: 0
display: block
@extend .ion-close
@extend .ion
.twister-user:hover .twister-user-remove
text-decoration: none
.twister-user-remove:hover
opacity: 1
.refresh-toptrends, .twistday-reminder .refresh, .refresh-users
@extend .ion-shuffle
@extend .ion
color: lighten($main-color-dark,30%)
cursor: pointer
font-size: .7rem
font-weight: 500
text-transform: none
letter-spacing: 0
float: right
display: block
margin: 10px
position: relative
.view-all-users
color: lighten($main-color-dark,30%)
cursor: pointer
font-size: .7rem
font-weight: 500
text-transform: none
letter-spacing: 0
float: right
display: block
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
background-color: transparent
/***********TOP TRENDS***************/
.toptrends-list
margin: 0
clear: both
border-top: 1px solid $main-background-color
padding: 10px
li
display: inline-block
a
color: $main-color-light
padding: 3px 8px
display: inline-block
text-transform: uppercase
font-size: 11px
margin: 3px
font-weight: 500
background: white
+box-shadow(0 5px 8px rgba(#555, 0.2))
&:hover
color: $main-color-dark
/********* TWISTDAY REMINDER *******/
.twistday-reminder
.twister-user-full, .twister-user-tag
font-size: .9rem
line-height: 1rem
color: $defaut-font-color
font-weight: 500
opacity: 1
display: inline-block
.twisterday
font-size: 12px
/*********** NEWCOMERS ************/
.new-users
&.module
li
button
position: absolute
right: 30px
top: 10px
@include button-small-basic
display: none
padding: .4rem!important
&:hover button
display: block
/******* LOADER *************/
.postboard-loading, .loading-roller
font-size: 100px
width: .4em
height: .4em
position: relative
list-style: none
border-radius: 50%
margin: 100px auto
display: none
div
width: .1em
height: .1em
position: absolute
border-radius: 50%
&:nth-child(1)
background: #62839F
top: 0
left: 50%
margin-left: -.05em
transform-origin: 50% 250%
animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate
&:nth-child(2)
background: #749294
top: 50%
right: 0
margin-top: -.05em
transform-origin: -150% 50%
animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate
&:nth-child(3)
background: #94AC7E
bottom: 0
left: 50%
margin-left: -.05em
transform-origin: 50% -150%
animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate
&:nth-child(4)
background: #B4C669
top: 50%
left: 0
margin-top: -.05em
transform-origin: 250% 50%
animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate
@keyframes rota
to
transform: rotate(360deg)
@keyframes opa
12.0%
opacity: 0.80
19.5%
opacity: 0.88
37.2%
opacity: 0.64
40.5%
opacity: 0.52
52.7%
opacity: 0.69
60.2%
opacity: 0.60
66.6%
opacity: 0.52
70.0%
opacity: 0.63
79.9%
opacity: 0.60
84.2%
opacity: 0.75
91.0%
opacity: 0.87
/* Options*/
.options
.appearance div
clear: both
div
float: left
clear: none
padding: 10px
.label
font-weight: 400
#filterLangList
width: 90%
#filterLangListCont div, #TopTrendsCont div, #TwistdayReminderCont div
float: none
padding: 0px 4px
.suboptions
margin: 5px 30px
border: double 2px rgba(69, 71, 77, 0.1)
height: 0px
padding: 0!important
overflow: hidden
float: right
transition: height .3s linear
-webkit-transition: height .3s linear
-moz-transition: height .3s linear
-o-transition: height .3s linear
-ms-transition: height .3s linear
font-size: .9em
line-height: .9em
font-style: italic
div
float: none!important
span
font-style: normal
/********** AUTOCOMPLETING *********/
.textcomplete-wrapper textarea
display: inline
ul.dropdown-menu
min-width: 160px
padding: 5px 0 7px
margin: 2px 0 0
list-style: none
background-color: #fff
border: 1px solid rgba(0, 0, 0, 0.2)
border-bottom: solid 2px $main-color-color
@extend .box-shadow
z-index: 2000!important
li
> li > a
padding: 3px 20px
white-space: nowrap
transition: all 100ms
/* Language filter messages */
.langFilterSimData
color: rgba( 0, 0, 0, .7 )
font: 10px "Open Sans", sans-serif
text-align: center
.langFilterSimData em
color: $main-color-color
@import 'layout/_responsive'