twister HTML + Javascript User Interface
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.

1161 lines
21 KiB

@import _fonts
@import compass/reset
@import compass
@import "compass/utilities/"
@import _var
@import _utils
@import _menu
@import _profile
@import _postboard
@import _following
@import _login
@import _network
@import _commons
@import _tabs
.promoted-posts-only
margin: 0 0
@extend .clear-fix
float: right
li
cursor: pointer
display: inline-block
margin: 0 0 0 5px
padding: 5px 15px
font-size: .9em
transition: color .1s linear
&.active
color: $main-color-dark
background: white
cursor: default
&:hover, &.disabled:hover
color: $main-color-dark
&.disabled
color: $main-color-light
background: $background-light
/* Wrapper and blocks */
.wrapper
max-width: 100%
width: $site-width
margin: 0 auto
padding-top: 70px
position: relative
z-index: 1
min-height: 100%
.dashboard
&.left, &.right
width: $column-width
position: fixed
top: 0
padding-top: 70px
height: 100%
&.right
margin-left: 880px;
@extend .clear-fix
/********** CONFIG SUBMENU & SEARCH RESULTS ************/
.dialog-modal
display: none
background: $main-color-dark
position: absolute
top: 45px
right: -10px
width: 250px
overflow: hidden
border-bottom: solid 2px #B4C669
box-shadow: 8px 10px 15px 0px rgba(0,0,0, .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
background: white
li
float: none
display: block
padding: 5px 10px
margin: 0
@extend .clear-fix
border-bottom: 1px solid $main-background-color
.mini-profile-name
font-size: 12px
display: block
margin: 0
padding: 0
.mini-profile-photo
width: 30px
height: 30px
margin: 0 10px 0 0
float: left
.mini-profile-info
width: 100%
float: none
button
padding: 3px
@extend .extend-icon
&:after
content: ''
font-family: $symbol-font-family
.follow .unfollow
position: absolute
bottom: 10px
right: 10px
&:hover
background-color: $main-color-light
.follow
background-color: $main-color-color
@extend .icon-plus
.unfollow
background-color: $main-color-dark
@extend .icon-minus
.userMenu-search input[type="text"]
float: right
padding: 3px 10px
margin: 9px 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
.follow-suggestions
button
.follow .unfollow
position: absolute
bottom: 10px
right: 10px
&:hover
background-color: $main-color-light
.follow
background-color: $main-color-color
.unfollow
background-color: $main-color-dark
/***************** MINI PROFILE *******************************/
.mini-profile
.mini-profile-info
position: relative
text-align: center
background: $bloc-background-color
a.button
background: $main-color-light
margin: 1em auto
.post-area
margin-top: 1px
margin-bottom: 20px
padding: .5em
background: $background-light
@extend .clear-fix
.post-area-new
@extend .open
padding: 0
display: none
margin: 0
textarea
width: 100%
.mini-profile-indicators
margin: 0 0 1em 0
@extend .clear-fix
background-color: $background-light
li
+box-sizing(border-box)
display: block
width: $indicators-width
float: left
font-size: .8em
position: relative
padding: 0
a
position: relative
color: $dark-grey
display: block
+transition-property(color)
+transition-duration(.2s)
padding: 1em 0
&:hover
background-color: white
&:before
font-size: 2.2em
display: block!important
text-align: center!important
margin: auto!important
padding-top: .2em
.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: 10px
right: 25px
background: $main-color-color
color: #fff
padding: 1px 3px
line-height: 12px
font-size: .8em
font-weight: 700
border-radius: 2px
.mini-profile-view
display: none
.mini-profile-name
color: $dark-grey
font-size: 1.3em
font-weight: 700
padding: 10px 0
display: block
margin: auto
&:hover
color: $main-color-light
.mini-profile-photo
width: 80px
height: 80px
overflow: hidden
+border-radius(50%)
display: block
margin: auto
img
min-width: 100%
min-height: 100%
border-radius: (50%)
.profile-data
@extend .clear-fix
clear: both
padding: 1em 0
text-align: center
background: $bloc-background-color
li
display: block
float: left
width: $indicators-width
+box-sizing(border-box)
&.current a
border-bottom: 3px solid $main-color-color
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
font-weight: 900
display: block
line-height: 15px
.mini-profile-info a:hover
text-decoration: none
.who-follow
display: block
position: absolute
bottom: 10px
text-align: center
padding: 10px
font-size: 12px
background: lighten($background-light, 5%)
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-shadow: none!important
+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: 28px
border: none
background: rgba(255, 255, 255, 1)
border: 1px solid rgba(0, 0, 0, 0.1)
padding: 3px
margin: 5px 0
&:focus
border-bottom: solid 2px $color-green
#post-preview
background-color: #FCFFF3
border: solid 1px #ECEFE3
font-size: 12px
margin: 4px 0
padding: 4px
word-wrap: break-word
a
color: #AAA
a:hover
color: $color-green
samp
background-color: #EEE
#postboard-top
clear: both
position: relative
@extend .clear-fix
margin-bottom: 1px
transition: height .3s linear
padding: 10px 10px 5px 10px
background: white
overflow: hidden
&.hide
display: none!important
&.show
display: block
.profile-photo
position: absolute
top: 10px
left: 10px
width: 48px
height: 48px
overflow: hidden
img
width: 100%
.post-area
overflow: hidden
@extend .clear-fix
width: 100%
padding-left: 58px
padding-right: 0
display: inline
+box-sizing(border-box)
float: right
.post-area-new
@extend .open
textarea
margin: 0 0 5px 0
.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
width: inherit
margin-bottom: 20px
small
display: none
h3
float: left
ol
@extend .clear-fix
clear: both
.twister-user-info
margin-top: 8px
.twister-user
clear: both
width: 100%
position: relative
margin: 0 0 1px 0
width: 100%
box-sizing: border-box
float: right
background: $bloc-background-color
@extend .clear-fix
.twister-user-photo
display: inline-block
float: left
vertical-align: middle
width: 48px
height: auto
overflow: hidden
margin: 10px
background: $main-background-color
.twister-user-info
width: 80%
.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
padding: 4px
margin: 0 0 0 15px
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
padding: 4px
margin: 0 0 0 15px
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
&.module
margin-bottom: 20px
small
display: none
h3
float: left
ol.toptrends-list
margin: 0
margin-bottom: 10px
li
display: inline-block
a
color: $main-color-light
padding: 3px 8px
display: inline-block
background: $background-light
text-transform: uppercase
font-size: 11px
margin: 3px
font-weight: 500
&:hover
background: white
color: $main-color-dark
/********* TWISTDAY REMINDER *******/
.twistday-reminder
width: 300px
small
display: none
h3
font-size: 0.98em
float: left
h4
margin: 1% 1% 1% 16%
font-size: 0.84em
color: rgba(0, 0, 0, 0.5)
a:hover
text-decoration: none
.current .label, .upcoming .label
margin-right: 10%
.twister-user-info
margin-top: 1.2%
.twister-user-tag, .twister-user-full
display: block
margin: 0
text-align: center
img.twister-user-photo
margin: 0
.twisterday
font-size: 0.8em
margin-left: 8%
&.hover
cursor: pointer
/*********** POPUP MODAL **************/
.modal-wrapper
background: white
z-index: 3
position: fixed
top: 50%
left: 50%
overflow: hidden
.post-area-new
padding: 10px
.modal-blackout
background: rgba($main-color-light, 0.8)
z-index: -1
position: fixed
left: 0
top: 0
width: 100%
height: 100%
.modal-content
@extend .clear-fix
background: $background-light
overflow-y: auto
padding: 20px
.postboard h2
position: fixed
z-index: 2
margin-top: -60px
margin-left: -60px
width: $postboard-modal-width
span
display: none
.postboard-news
line-height: 30px
position: absolute
right: 0
top: 40px
font-weight: 900
display: block
padding: 0 20px
color: white
+text-shadow(1px 1px 1px rgba(black, .1))
background: $main-color-color
.modal-header
position: relative
background: $main-color-dark
height: 40px
+box-sizing(border-box)
@extend .clear-fix
h3
font-size: .8em
line-height: 40px
float: left
font-weight: 900
padding-left: 10px
color: white
display: block!important
.modal-close
@extend .extend-icon
@extend .icon-cancel
position: absolute
right: 10px
top: 0
font-size: 14px
line-height: 40px
cursor: pointer
color: rgba(white, 0.7)
&:hover
color: white
b
display: none
.mark-all-as-read
float: left
cursor: pointer
font-size: 1.3em
line-height: 40px
padding: 0 5px
color: $main-color-light
transition: all .1s linear
display: none
.modal-back:hover, .mark-all-as-read:hover
color: $main-color-color
.mark-all-as-read
@extend .extend-icon
@extend .icon-ok
.modal-back
@extend .extend-icon
@extend .icon-left
position: absolute
right: 35px
top: 0
font-size: 14px
line-height: 40px
cursor: pointer
color: rgba(white, 0.7)
&:hover
color: white
b
display: none
/*********** POPUP PROMPT *************/
.prompt-wrapper
background: rgba( 255, 255,255, 1.0 )
z-index: 5
position: fixed
top: 50%
left: 50%
width: 600px
margin-left: -300px
box-shadow: 0 0 30px rgba( 0, 0, 0, .6 )
.modal-buttons
padding: 10px
text-align: right
button:last-child
padding: 5px 20px;
/************ FOLLOWING-CONFIG MODAL **********/
.prompt-wrapper.following-config-modal
margin-top: -100px
.modal-content
padding: 10px
text-align: center
.modal-buttons
display: none
h2
text-transform: none
.following-config-method-buttons
.public-following
background-color: $color-green
margin: 0px 2px
padding: 6px 16px
/************ RETWIST POSTS MODAL **********/
.prompt-wrapper.reTwist
&.prompt-wrapper
margin-top: -110px
.modal-content
padding: 20px 15px
.modal-buttons
.modal-propagate
background-color: $color-green
.post-expand, .post-interactions
display: none
/********* REPLY POSTS MODAL***************/
.prompt-wrapper.reply
&.prompt-wrapper
margin-top: -110px
.modal-buttons, .post-expand, .post-interactions
display: none
.post-area
padding-bottom: 6px
/****** DIRECT MESSAGES MODAL**********/
.modal-wrapper.directMessages
width: $postboard-modal-width
height: 600px
margin: -300px 0 0 0-($postboard-modal-width/2)
.post-area-new
display: none
margin: 0 -20px
padding: 20px
z-index: 5
background: $main-background-color
.modal-header
h3 span
display: inline!important
.modal-content
+box-sizing(border-box)
width: $postboard-modal-width
.post-photo
height: 48px
width: 48px
.post-text
margin-left: 58px
font-size: .9em
.post-info-name
float: none
.post-info-tag
line-height: 1em
padding: 0
display: inline
font-size: 80%
margin: 0 0 0 1em
.direct-messages-list .post
padding: 10px 30px 10px 15px
cursor: pointer
&:after
content: ""
font-family: $symbol-font-family
position: absolute
right: 10px
top: 50%
font-size: 1.2em
margin: -6px 0 0 0
color: rgba(0, 0, 0, 0.4)
display: none
.direct-messages-list
.post:hover:after
display: block
.direct-messages-thread
.post
@extend .clear-fix
background: none
left: 0
margin: 0px 10px 20px 10px
cursor: default
.post-info-time
float: none
display: block
text-align: center
font-size: 10px
margin: 10px 0
cursor: default
&:hover
color: $main-color-light
.post-text:after, .post-text:nth-child(2n):after
content: ""
width: 1px
background: transparent
position: absolute
top: 10px
white-space: normal
.post-text:after
border-top: solid 7px transparent
border-bottom: solid 7px transparent
border-right: solid 7px white
left: -7px
.post-text
background: white
margin-right: 60px
margin-left: 60px
position: relative
display: inline-block
max-width: 300px
font-size: .9em
padding: 5px 10px
z-index: 4
float: left
word-wrap: break-word
max-width: 60%
min-height: 15px
.post-photo
position: absolute
left: 0
top: 10px
.post.sent
.post-text:after
border-top: solid 7px transparent
border-bottom: solid 7px transparent
border-right: none
border-left: solid 7px white
right: -7px
left: auto
.post-text
float: right
.post-photo
position: absolute
right: 0
left: auto
/********* NEW USER MODAL**************/
.modal-wrapper.new-user
width: 720px
height: 580px
margin: -290px 0 0 -360px
.modal-content
padding: 25px
.modal-close
display: none
.text
margin: 0 0 15px 0
.emphasis
text-align: center
.secret-key
display: block
margin-top: 8px
color: rgba(0.5, 0, 0, 1)
font-weight: bold
font-size: 110%
/******** HASHTAG MODAL***********/
.modal-wrapper.hashtag-modal
width: $postboard-modal-width
height: 600px
overflow: hidden
margin: -300px 0 0 0-($postboard-modal-width/2)
.postboard
padding: 0
/****** CONVERSATION MODAL***********/
.modal-wrapper.conversation-modal
background: white
width: $postboard-modal-width
height: 580px
margin: -290px 0 0 0-($postboard-modal-width/2)
.postboard
padding: 0
/****** FOLLOWING MODAL*******/
.modal-wrapper.following-modal
width: $postboard-modal-width
height: 400px
margin: -200px 0 0 0-($postboard-modal-width/2)
.modal-content
padding: 0
ol
margin: 5px
.open-profile-modal
&:hover
text-decoration: none
.postboard
h2
display: none
/******* WHO TO FOLLOW MODAL*******/
.modal-wrapper.who-to-follow-modal
width: $postboard-modal-width
height: 580px
margin: -290px 0 0 0-($postboard-modal-width/2)
.modal-content
padding: 15px
ol
margin: 5px
.open-profile-modal
&:hover
text-decoration: none
.twister-user
position: relative
padding: 5px
.twister-user-photo
position: relative
left: 0
float: left
display: block
.twister-user-info
position: relative
margin-top: 4px
padding-left: 70px
width: auto
.bio
color: rgba(0, 0, 0, 0.6)
font-style: italic
/******* LOADER *************/
.postboard-loading, .loading-roller
clear: both
text-align: center
div
display: inline-block
width: 120px
height: 10px
background-color: $main-color-light
position: relative
margin: 10px 0 0 0
&:after
content: ""
position: absolute
background-color: white
left: 2px
top: 2px
bottom: 2px
z-index: 999
animation-name: slide
animation-duration: 1.5s
animation-easing-function: linear
animation-iteration-count: infinite
-webkit-animation-name: slide
-webkit-animation-duration: 1.5s
-webkit-animation-easing-function: linear
-webkit-animation-iteration-count: infinite
-moz-animation-name: slide
-moz-animation-duration: 1.5s
-moz-animation-easing-function: linear
-moz-animation-iteration-count: infinite
@keyframes slide
0%
right: 60px
left: 2px
5%
left: 2px
50%
right: 2px
left: 60px
55%
right: 2px
100%
right: 60px
left: 2px
@-webkit-keyframes slide
0%
right: 100px
left: 2px
5%
left: 2px
50%
right: 2px
left: 100px
55%
right: 2px
100%
right: 100px
left: 2px
@-moz-keyframes slide
0%
right: 60px
left: 2px
5%
left: 2px
50%
right: 2px
left: 60px
55%
right: 2px
100%
right: 60px
left: 2px
/* 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
box-shadow: 8px 10px 10px 0px rgba(0,0,0, .2)
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 _responsive