|
|
|
|
|
// 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-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 |
|
|
|
|
|
.selectable_theme.theme_calm |
|
|
display: none |
|
|
|
|
|
/************************************* |
|
|
************ ACCOUNT MODAL *********** |
|
|
**************************************/ |
|
|
|
|
|
.account-modal |
|
|
&.modal-wrapper |
|
|
width: 580px |
|
|
height: 394px |
|
|
margin: -197px 0 0 -290px |
|
|
.modal-content |
|
|
padding: 0 |
|
|
.module |
|
|
margin: 4px |
|
|
> div |
|
|
margin: 4px 0 |
|
|
padding: 4px 12px |
|
|
input, textarea |
|
|
display: block |
|
|
border: 1px solid rgba(0, 0, 0, .1) |
|
|
width: 320px |
|
|
margin: 12px 16px |
|
|
padding: 2px 4px |
|
|
textarea |
|
|
width: 320px |
|
|
max-width: 320px |
|
|
min-width: 320px |
|
|
min-height: 28px |
|
|
input:focus, textarea:focus |
|
|
border-bottom: solid 1px $color-green |
|
|
.alias |
|
|
margin: 0px 16px |
|
|
.avatar |
|
|
position: absolute |
|
|
right: 12px |
|
|
top: 42px |
|
|
cursor: pointer |
|
|
width: 64px |
|
|
height: 64px |
|
|
overflow: hidden |
|
|
margin: 12px 16px |
|
|
img |
|
|
width: 64px |
|
|
height: auto |
|
|
border: 1px solid rgba(0, 0, 0, .1) |
|
|
.c-buttons |
|
|
text-align: right |
|
|
.toggle-secret-key |
|
|
float: left |
|
|
.secret-key-container |
|
|
text-align: center |
|
|
font-size: 12px |
|
|
.secret-key |
|
|
background-color: $bloc-background-color |
|
|
font-weight: bold
|
|
|
|
