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.

266 lines
4.8 KiB

// variables for width
$modal-width: 980px
$modal-height: 580px
$modal-gut: 15px
$modal-postboard-height: $modal-height - 3*$modal-gut
$modal-left-col: 400px
$modal-right-col: ($modal-width - 2*$modal-gut) - $modal-left-col - $modal-gut
$modal-postboard-post-height: 100%
/*************************************
******************* PROFILE MODAL
***************************************/
.profile-modal
.modal-wrapper
width: $modal-width
max-width: 98%
+box-sizing(border-box)
height: $modal-height
margin: 0-($modal-height/2) 0 0 0-($modal-width/2)
h3
display: none
.profile-data
display: block
margin: auto
padding-top: 0
@extend .clear-fix
li
display: inline
margin: 0 5px
float: none
a
display: inline
span
&.posts-count, &.following-count, &.followers-count
display: inline-block
padding-right: 5px
.modal-content
overflow: hidden
padding: 0
position: relative
#profile-posts
padding: 0
.postboard
margin-left: 0
height: 100%
bottom: 0
position: relative
float: right
width: $modal-right-col!important
.postboard-posts
display: block
height: $modal-postboard-post-height
overflow-y: auto
.postboard-posts .post
padding: 0
.post-interactions
margin: 2px 10px 3px 60px
.profile-card
margin: 0
padding: 0
.members
overflow-y: auto
.profile-modal
h2.profile-screen-name
display: block
letter-spacing: 0
text-transform: none
color: lighten($dark-grey, 30%)
padding: 5px 0
margin: 0
font-size: 13px
line-height: 13px
/* Profile card*/
.profile-card
height: 100%
background: white
.profile-card-main
position: relative
text-align: center
word-wrap: break-word
transition: all .2s linear
background: none!important
padding: 10px
h1
font-size: 22px
font-weight: bold
display: inline-block
padding-top: 10px
&:before
content: ""
border: solid 0px #fff
transition: all .2s linear
position: absolute
left: 1px
top: 1px
right: 1px
bottom: 1px
z-index: 0
*
position: relative
z-index: 1
.profile-card-photo
height: 75px
margin: 0 auto
display: block
width: auto
.profile-card-photo.forEdition
+border-radius(50%)
height: 75px
margin: 0 auto
display: block
width: 75px
.profile-bio
padding: 10px
font-style: italic
text-align: center
.profile-card
float: left
width: $modal-left-col
position: relative
padding: $modal-gut
.direct-messages-with-user, .follow, .unfollow
display: inline-block
position: static
.isFollowing:after
font-size: 15px
position: absolute
.unfollow
background: $main-color-light
.twister-user-info
@extend .clear-fix
text-align: center
width: 100%
padding: 0
.follow
background: $main-color-color
.known-followers
text-align: center
clear: both
width: 100%
#msngrswr
display: none
text-align: center
margin: 10px 0
.profile-extra-contact
display: none
margin: 0 15px 0 0
font-weight: 500
background: $background-light
padding: 2px 8px 3px 8px
+border-radius(2px)
.bitmessage-ctc, .tox-ctc
font-size: 13px
line-height: 15px
cursor: pointer
color: $main-color-dark
&:hover
color: $main-color-color
.bitmessage-ctc:after, .tox-ctc:after
font-family: $symbol-font-family
content: ''
font-style: normal
font-weight: normal
speak: none
display: inline-block
text-decoration: inherit
width: 1em
text-align: center
font-variant: normal
text-transform: none
line-height: 1em
.profile-modal
.profile-tox, .profile-bitmessage
display: inline-block
margin-right: 5px
font-size: 13px
&:hover
color: $main-color-color
.profile-modal .modal-buttons
display: none
/* EDITION PROFILE*/
.forEdition.profile-card
+box-sizing(border-box)
@extend .clear-fix
width: auto
background: $background-light
.profile-card-main
margin: 0
width: 330px
+box-sizing(border-box)
padding: 10px
background: $background-light
input
display: block
margin: 5px auto
background: white
border: 1px solid lighten($dark-grey, 50%)
padding: 6px 4px
margin-bottom: 4px
text-align: center
transition: all .2s linear
&:hover, &:focus
background: white
border-color: $main-color-light
.input-description
width: 90%
.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