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.
 
 
 
 

824 lines
14 KiB

@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/_modal'
@import 'layout/_profile'
@import 'layout/_postboard'
// pages
@import 'pages/_following'
@import 'pages/_login'
@import 'pages/_network'
@import 'layout/_tabs'
.promoted-posts-only
margin: 0 0
li
cursor: pointer
display: block
margin: 0
padding: 5px
border-bottom: 1px solid $main-background-color
text-align: center
font-size: .9em
transition: color .1s linear
&.disabled
background: #F4F3F2
&.active, &.active span
color: $defaut-font-color
cursor: default
&:hover span, &.disabled:hover span
color: $defaut-font-color
&.disabled span
color: rgba($defaut-font-color, .3)
/* Wrapper and blocks */
.wrapper
width: 100%
max-width: 100%
margin: auto
padding-top: $menu-height
position: relative
z-index: 1
.dashboard
&.left
position: absolute
top: $menu-height
left: 0
width: 15%
> .module
float: right
width: $usr-img * 2
&.right
position: fixed
right: 0
top: $menu-height
overflow: hidden
width: 30%
> .module
max-width: 320px
margin-bottom: 20px
background: $bloc-light-color
width: 100%
@extend .box-shadow
@extend .clear-fix
h3
float: left
padding: 20px
h4
clear: left
border-top: 1px solid $main-background-color
padding: 10px
small
display: none
/********** 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
a
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, 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
height: auto
margin: 10px
float: left
.mini-profile-info
width: 100%
float: none
button
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)
@extend .extend-icon
position: absolute
top: 10px
right: 10px
.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)
padding: 10x 20px
display: block
clear: both
/***************** MINI PROFILE *******************************/
.mini-profile
@extend .box-shadow
a.button
background: $main-color-light
margin: 1em auto
.post-area
margin-top: 1px
margin-bottom: 20px
padding: .5em
@extend .clear-fix
.post-area-new
@extend .open
+box-shadow(none)
padding: 0
margin: 0
textarea
width: 100%
.mini-profile-indicators
margin: 0
text-align: center
@extend .clear-fix
border-top: 1px solid $main-background-color
background: #F4F3F2
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,20%)
display: block
padding: 1rem 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 .icon-bell
@extend .extend-icon
.userMenu-messages a
@extend .icon-mail
@extend .extend-icon
.userMenu-user a
@extend .icon-user
@extend .extend-icon
.messages-qtd
position: absolute
top: 50%
margin-top: -11px
right: 11px
background: $main-color-color
+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
.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: 32px auto 0 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
text-align: center
padding: 10px
font-size: 12px
z-index: 10
+transition(all .2s linear)
.show-more-followers
font-weight: 700
display: block
cursor: pointer
float: right
color: $dark-grey
.mini-follower-link
display: inline-block
margin: 1px
line-height: 12px
&.isFollowing:after
display: none
&:after
content: '·'
font-weight: 900
color: $main-color-dark
margin-left: 1px
/***************** 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
#postboard-top
clear: both
position: relative
@extend .clear-fix
margin-bottom: 10px
transition: height .3s linear
padding: 10px
background: white
overflow: hidden
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
&.hide
display: none!important
&.show
display: block
.profile-photo
position: absolute
top: 10px
left: 10px
width: $mini-usr-img
img
width: 100%
.post-area
overflow: hidden
@extend .clear-fix
width: 100%
padding-left: 58px
padding-right: 0
display: inline
+box-sizing(border-box)
background: none
float: right
.post-area-new
@extend .open
+box-shadow(none)
textarea
margin: 0 0 10px 0
#post-preview
background: $bloc-background-color
border: 1px solid $main-background-color
padding: 15px
+transition-property(all)
+transition-duration(.1s)
width: 100%!important
.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: 10px
top: 10px
@extend .small
display: none
&:hover button
display: block
.bio
text-align: left!important
small
display: none
h3
float: left
padding: 20px
ol
@extend .clear-fix
clear: both
.twister-user
position: relative
box-sizing: border-box
background: $bloc-light-color
@extend .clear-fix
border-top: 1px solid $main-background-color
width: 100%
min-height: auto
padding: 10px 0
clear: left
+transition-property(background)
+transition-duration(.1s)
@extend .clear-fix
&:hover
background: white
img.twister-user-photo
float: left
display: block
float: left
width: $mini-usr-img
height: auto
margin: 0 10px
background: $main-background-color
.followers
font-size: 12px
color: $dark-grey
label, a
display: inline-block
.followed-by
color: $main-color-light
font-size: 12px
cursor: pointer
display: block
.twister-user-name, .twister-by-user-name
font-weight: bold
font-size: 14px
color: $main-color-light
text-decoration: none
.twister-user-tag
font-size: 12px
line-height: 14px
opacity: .8
display: inline-block
letter-spacing: 0px
.twister-user-remove
font-size: 13px
opacity: .2
text-decoration: none
cursor: pointer
position: absolute
padding: 5px
top: -5px
right: -5px
display: inline-block
@extend .icon-cancel
@extend .extend-icon
.twister-user:hover .twister-user-remove
text-decoration: none
.twister-user-remove:hover
opacity: 1
.refresh-toptrends, .twistday-reminder .refresh, .refresh-users
@extend .icon-arrows
@extend .extend-icon
color: $main-color-dark
cursor: pointer
font-size: 11px
font-weight: 500
text-transform: none
letter-spacing: 0
float: right
display: block
margin: 5px
position: relative
.view-all-users
color: $main-color-dark
cursor: pointer
font-size: 11px
font-weight: 500
text-transform: none
letter-spacing: 0
float: right
display: block
margin: 5px
position: relative
.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
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
line-height: 1rem
color: $defaut-font-color
font-weight: 500
opacity: 1
letter-spacing: 0
display: inline-block
.twisterday
font-size: 12px
/******* 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 #B4C669
@extend .box-shadow
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: #B4C669
@import 'layout/_responsive'