After Width: | Height: | Size: 8.7 KiB |
After Width: | Height: | Size: 326 KiB |
After Width: | Height: | Size: 11 KiB |
After Width: | Height: | Size: 3.5 KiB |
After Width: | Height: | Size: 2.9 KiB |
After Width: | Height: | Size: 3.2 KiB |
After Width: | Height: | Size: 3.1 KiB |
After Width: | Height: | Size: 2.8 KiB |
@ -0,0 +1,165 @@ |
|||||||
|
$(window).on('resize', function () { |
||||||
|
testRightSide(); |
||||||
|
reAppendModules(); |
||||||
|
}); |
||||||
|
|
||||||
|
$(window).on('load', function () { |
||||||
|
testRightSide(); |
||||||
|
}); |
||||||
|
|
||||||
|
$(function () { |
||||||
|
testRightSide(); |
||||||
|
reOrganizeTemplates(); |
||||||
|
|
||||||
|
// indirect eval call in hope to execute code globally
|
||||||
|
(1, eval)(postToElem.toString().replace(/postContext.append\(twister\.tmpl\.postRtBy/, |
||||||
|
'postContext.prependTo(postContext.parent()).append(twister.tmpl.postRtBy')); |
||||||
|
|
||||||
|
(1, eval)(openModal.toString().replace(/window_scrollY = window\.pageYOffset;/, '') |
||||||
|
.replace(/\$\('body'\)\.css\('overflow', 'hidden'\);/, '')); |
||||||
|
|
||||||
|
$('.userMenu-home.current a').on('click', function () { |
||||||
|
$('html, body').animate({scrollTop:0},300); |
||||||
|
return false |
||||||
|
}); |
||||||
|
|
||||||
|
// modify the way promoted posts are shown
|
||||||
|
$('.promoted-posts-only').on('click', function () { |
||||||
|
//active promoted posts tab
|
||||||
|
$(this).children('.promoted-posts').addClass(promotedPostsOnly ? "active" : "disabled"); |
||||||
|
$(this).children('.normal-posts').addClass(promotedPostsOnly ? "disabled" : "active"); |
||||||
|
$('#postboard-top').removeClass(promotedPostsOnly ? "show" : "hide"); |
||||||
|
//active normal posts
|
||||||
|
$(this).children('.promoted-posts').removeClass(promotedPostsOnly ? "disabled" : "active"); |
||||||
|
$(this).children('.normal-posts').removeClass(promotedPostsOnly ? "active" : "disabled"); |
||||||
|
$('#postboard-top').addClass(promotedPostsOnly ? "hide" : "show"); |
||||||
|
}); |
||||||
|
|
||||||
|
if (/\/options.html$/i.test(document.location)) |
||||||
|
localizeLabels(); |
||||||
|
|
||||||
|
$(window).on('scroll', function () { |
||||||
|
window_scrollY = window.pageYOffset; // declare variable here for screen not to scroll when closing modals
|
||||||
|
}); |
||||||
|
|
||||||
|
// Collapse all .post.open
|
||||||
|
var allPostButton = $('<li></li>').addClass('userMenu-collapsePosts').append('<a href="#">Collapse All</a>'); |
||||||
|
$('.mini-profile-indicators').append(allPostButton); |
||||||
|
$(allPostButton).children('a').on('click', function(e) { |
||||||
|
var allPost = $('#posts .post.open'); |
||||||
|
allPost.each(function(){ |
||||||
|
if (e.button === 0 && window.getSelection() == 0) |
||||||
|
postExpandFunction(e, $(this)); |
||||||
|
}); |
||||||
|
return false |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
function testRightSide() { // if rightside is empty, don't show it and engarge postboard
|
||||||
|
var container = $('.dashboard.right'); |
||||||
|
|
||||||
|
if (container.children('.module:not(:empty)').length) { |
||||||
|
container.show(); |
||||||
|
$('.wrapper .postboard').removeClass('large'); |
||||||
|
} else { |
||||||
|
container.hide(); |
||||||
|
$('.wrapper .postboard').addClass('large'); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function reOrganizeTemplates() { // for nin's templating
|
||||||
|
|
||||||
|
reAppendModules(); |
||||||
|
|
||||||
|
//removes unused html
|
||||||
|
$('.modal-close').html(''); |
||||||
|
$('.modal-back').html(''); |
||||||
|
$('.twister-user-remove').html(''); |
||||||
|
$('.profile-card-main').attr('style', ''); |
||||||
|
$('.mini-profile-actions span').html(''); |
||||||
|
|
||||||
|
//group chat
|
||||||
|
$('.mini-profile-indicators li.userMenu-groupmessages a span:last-child ').html('Group Msg'); |
||||||
|
|
||||||
|
$('button.invite').html('invite'); |
||||||
|
$('button.leave').html('leave'); |
||||||
|
$('.secret-key').attr('title', 'copy secret key'); |
||||||
|
|
||||||
|
//re-organizes
|
||||||
|
$('.promoted-posts-only').detach().appendTo($('.left .mini-profile')); |
||||||
|
$('.mini-profile .open-following-page').parent('li').detach().appendTo($('.mini-profile-indicators')); |
||||||
|
$('.mini-profile-indicators').detach().insertAfter($('.dashboard.left .profile-data')); |
||||||
|
|
||||||
|
twister.tmpl.accountMC.find('.alias') |
||||||
|
.insertBefore(twister.tmpl.accountMC.find('.avatar')); |
||||||
|
|
||||||
|
//loader
|
||||||
|
newLoader() |
||||||
|
|
||||||
|
// new post button
|
||||||
|
$('<li></li>') |
||||||
|
.addClass('userMenu-newPost') |
||||||
|
.prependTo('.mini-profile-indicators'); |
||||||
|
$('<a href="#">New post</a>') |
||||||
|
.addClass('ion') |
||||||
|
.addClass('ion-plus') |
||||||
|
.appendTo('.userMenu-newPost') |
||||||
|
.on('click', function () { |
||||||
|
if(!$('.mini-profile .post-area').hasClass('display')) {$('.mini-profile .post-area').addClass('display');} |
||||||
|
else {$('.mini-profile .post-area').removeClass('display');} |
||||||
|
return false; |
||||||
|
}); |
||||||
|
|
||||||
|
// new post prompt
|
||||||
|
$('<div><h3>New post</h3><span class="modal-close prompt-close"></span></div>') |
||||||
|
.addClass('modal-header') |
||||||
|
.prependTo('.mini-profile .post-area'); |
||||||
|
|
||||||
|
$('.mini-profile .post-area .post-submit').on('click', function () { |
||||||
|
$('.mini-profile .post-area').removeClass('display'); |
||||||
|
}); |
||||||
|
$('.mini-profile .post-area .modal-close').on('click', function () { |
||||||
|
$('.mini-profile .post-area').removeClass('display'); |
||||||
|
}); |
||||||
|
|
||||||
|
// button "follow" in search
|
||||||
|
// not very nice but works
|
||||||
|
$('li:not(.twister-user) button.follow').html('+').attr('title',polyglot.t('Follow')); |
||||||
|
$('li:not(.twister-user) button.follow') |
||||||
|
.on("eventToggleFollow", function() { |
||||||
|
$(this).text('+').attr('title', polyglot.t('Follow')); |
||||||
|
}) |
||||||
|
.on("eventToggleUnfollow", function() { |
||||||
|
$(this).text('-').attr('title', polyglot.t('Unfollow')); |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
|
// Close new post prompt with esc key
|
||||||
|
$(document).on('keyup', function (e) { |
||||||
|
if (e.keyCode == 27) { |
||||||
|
$('.mini-profile .post-area').removeClass('display'); |
||||||
|
closeModal(); |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
function reAppendModules() { // avoid w1200 things
|
||||||
|
$('.dashboard.right') |
||||||
|
.append($('.module.toptrends')) |
||||||
|
.append($('.module.who-to-follow')) |
||||||
|
.append($('.module.twistday-reminder')) |
||||||
|
.append($('.module.new-users')) |
||||||
|
; |
||||||
|
} |
||||||
|
|
||||||
|
function newLoader() { // create divs for new loader
|
||||||
|
$('<div></div>').appendTo('.postboard-loading'); |
||||||
|
$('<div></div>').appendTo('.postboard-loading'); |
||||||
|
$('<div></div>').appendTo('.postboard-loading'); |
||||||
|
} |
||||||
|
|
||||||
|
function localizeLabels() { |
||||||
|
$('label.tabs').each(function (i, elem) { |
||||||
|
var elem = $(elem); |
||||||
|
elem.text(polyglot.t(elem.text())); |
||||||
|
}); |
||||||
|
} |
@ -0,0 +1,107 @@ |
|||||||
|
* |
||||||
|
outline: none!important |
||||||
|
+box-sizing(border-box) |
||||||
|
list-style: none |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
html, body |
||||||
|
min-height: 100% |
||||||
|
color: $defaut-font-color |
||||||
|
position: absolute |
||||||
|
width: 100% |
||||||
|
|
||||||
|
html |
||||||
|
font-size: $global-font-size |
||||||
|
background-color: #ddd |
||||||
|
background-image: image-url("bg.png", false, false) |
||||||
|
background-attachment: fixed |
||||||
|
|
||||||
|
body |
||||||
|
font-size: $main-font-size |
||||||
|
line-height : $main-line-height |
||||||
|
font-family : $main-font-family, "Symbola" |
||||||
|
font-weight: 400 |
||||||
|
overflow-y: scroll!important |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
a |
||||||
|
text-decoration: none |
||||||
|
color: $main-color-color |
||||||
|
&:hover, &:active |
||||||
|
color: $main-color-color |
||||||
|
text-decoration: underline |
||||||
|
i |
||||||
|
text-decoration: underline |
||||||
|
font-style: normal |
||||||
|
|
||||||
|
i, em |
||||||
|
font-style: italic |
||||||
|
font-family: $serif-font-family |
||||||
|
letter-spacing: 0 |
||||||
|
|
||||||
|
strong, b |
||||||
|
font-weight: 600 |
||||||
|
|
||||||
|
img |
||||||
|
background: $bloc-background-color |
||||||
|
|
||||||
|
h1 |
||||||
|
font-size: 1.1em |
||||||
|
font-weight: 700 |
||||||
|
line-height: 1.1em |
||||||
|
|
||||||
|
h2 |
||||||
|
font-size: 1.1em |
||||||
|
text-transform: uppercase |
||||||
|
letter-spacing: 0.07em |
||||||
|
font-weight: 400 |
||||||
|
line-height: 1.1em |
||||||
|
|
||||||
|
h3 |
||||||
|
font-size: 1.1em |
||||||
|
font-weight: 400 |
||||||
|
line-height: 1.1em |
||||||
|
|
||||||
|
br |
||||||
|
display: block |
||||||
|
|
||||||
|
textarea, input |
||||||
|
background: white |
||||||
|
display: block |
||||||
|
border: none |
||||||
|
font-family: "Monospace", $main-font-family |
||||||
|
font-size: .8rem |
||||||
|
|
||||||
|
|
||||||
|
samp |
||||||
|
background: $dark-grey |
||||||
|
color: white |
||||||
|
font-size: 11px |
||||||
|
line-height: 11px |
||||||
|
display: inline-block |
||||||
|
padding: 5px |
||||||
|
+border-radius(1px) |
||||||
|
font-weight: 500 |
||||||
|
font-family: monospace |
||||||
|
word-wrap: break-word |
||||||
|
|
||||||
|
/* isFollowing */ |
||||||
|
|
||||||
|
|
||||||
|
.isFollowing |
||||||
|
@extend .ion-checkmark |
||||||
|
@extend .ion-after |
||||||
|
&:after |
||||||
|
color: $main-color-color |
||||||
|
padding-left: 3px |
||||||
|
display: inline |
||||||
|
font-size: 11px |
||||||
|
vertical-align: top |
||||||
|
line-height: 10px |
||||||
|
h3 |
||||||
|
.isFollowing:before |
||||||
|
display: none!important |
||||||
|
.isFollowing:after |
||||||
|
display: none!important |
@ -0,0 +1,159 @@ |
|||||||
|
@font-face |
||||||
|
font-family: "Roboto" |
||||||
|
src: url("fonts/roboto/Roboto-Regular.ttf") |
||||||
|
font-weight: 400 |
||||||
|
|
||||||
|
|
||||||
|
@font-face |
||||||
|
font-family: "Roboto" |
||||||
|
src: url("fonts/roboto/Roboto-Medium.ttf") |
||||||
|
font-weight: 500 |
||||||
|
|
||||||
|
|
||||||
|
@font-face |
||||||
|
font-family: "Roboto" |
||||||
|
src: url("fonts/roboto/Roboto-Bold.ttf") |
||||||
|
font-weight: 700 |
||||||
|
|
||||||
|
@font-face |
||||||
|
font-family: "Roboto" |
||||||
|
src: url("fonts/roboto/Roboto-Black.ttf") |
||||||
|
font-weight: 900 |
||||||
|
|
||||||
|
|
||||||
|
@font-face |
||||||
|
font-family: "Roboto" |
||||||
|
src: url("fonts/roboto/Roboto-Italic.ttf") |
||||||
|
font-weight: 400 |
||||||
|
font-style: italic |
||||||
|
|
||||||
|
@font-face |
||||||
|
font-family: "Droid" |
||||||
|
src: url("fonts/DroidSerif-Italic.ttf") |
||||||
|
font-weight: 400 |
||||||
|
font-style: italic |
||||||
|
|
||||||
|
|
||||||
|
@font-face |
||||||
|
font-family: "Roboto" |
||||||
|
src: url("fonts/roboto/Roboto-MediumItalic.ttf") |
||||||
|
font-weight: 500 |
||||||
|
font-style: italic |
||||||
|
|
||||||
|
|
||||||
|
@font-face |
||||||
|
font-family: "Roboto" |
||||||
|
src: url("fonts/roboto/Roboto-BoldItalic.ttf") |
||||||
|
font-weight: 700 |
||||||
|
font-style: italic |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* S Y M B O L A */ |
||||||
|
|
||||||
|
@font-face |
||||||
|
font-family: "Symbola" |
||||||
|
src: url("Symbola.ttf") |
||||||
|
font-weight: 400 |
||||||
|
font-style: normal |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* ICONS */ |
||||||
|
|
||||||
|
@font-face |
||||||
|
font-family: "Ionicons" |
||||||
|
src: url("fonts/ionicons/ionicons.eot?v=2.0.0") |
||||||
|
src: url("fonts/ionicons/ionicons.eot?v=2.0.0#iefix") format("embedded-opentype"), url("fonts/ionicons/ionicons.ttf?v=2.0.0") format("truetype"), url("fonts/ionicons/ionicons.woff?v=2.0.0") format("woff"), url("fonts/ionicons/ionicons.svg?v=2.0.0#Ionicons") format("svg") |
||||||
|
font-weight: normal |
||||||
|
font-style: normal |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.ion:before, .ion-after:after |
||||||
|
display: inline-block |
||||||
|
font-family: "Ionicons" |
||||||
|
speak: none |
||||||
|
font-style: inherit |
||||||
|
font-weight: inherit |
||||||
|
font-variant: inherit |
||||||
|
text-transform: normal |
||||||
|
text-rendering: auto |
||||||
|
line-height: inherit |
||||||
|
-webkit-font-smoothing: antialiased |
||||||
|
-moz-osx-font-smoothing: grayscale |
||||||
|
.ion:before |
||||||
|
padding: 0 3px |
||||||
|
|
||||||
|
.ion:after, .ion-after:before |
||||||
|
display: none |
||||||
|
|
||||||
|
.ion-alert:before |
||||||
|
content: "\f101" |
||||||
|
|
||||||
|
.ion-checkmark:after, .ion-checkmark:before |
||||||
|
content: "\f122" |
||||||
|
|
||||||
|
.ion-gear:before |
||||||
|
content: "\f13d" |
||||||
|
|
||||||
|
.ion-shuffle:before |
||||||
|
content: "\f3a8" |
||||||
|
|
||||||
|
.ion-mention:before |
||||||
|
content: "\f39b" |
||||||
|
|
||||||
|
.ion-chatbox:before |
||||||
|
content: "\f11c" |
||||||
|
|
||||||
|
.ion-profile:before |
||||||
|
content: "\f2d8" |
||||||
|
|
||||||
|
.ion-plus:before |
||||||
|
content: "\f11d" |
||||||
|
|
||||||
|
.ion-reply:before |
||||||
|
content: "\f2d4" |
||||||
|
|
||||||
|
.ion-close:before |
||||||
|
content: "\f12a" |
||||||
|
|
||||||
|
.ion-minus:before |
||||||
|
content: "\f123" |
||||||
|
|
||||||
|
|
||||||
|
.ion-back:before |
||||||
|
content: "\f124" |
||||||
|
|
||||||
|
.ion-post-promo:before |
||||||
|
content: "\f470" |
||||||
|
|
||||||
|
.ion-post-normal:before |
||||||
|
content: "\f1fd" |
||||||
|
|
||||||
|
.ion-home:before |
||||||
|
content: "\f144" |
||||||
|
|
||||||
|
.ion-network:before |
||||||
|
content: "\f2b5" |
||||||
|
|
||||||
|
.ion-eye:before |
||||||
|
content: "\f133" |
||||||
|
|
||||||
|
.ion-tox:before |
||||||
|
content: "\f200" |
||||||
|
|
||||||
|
.ion-copy:before |
||||||
|
content: "\f381" |
||||||
|
|
||||||
|
.ion-search:after |
||||||
|
content: "\f21f" |
||||||
|
|
||||||
|
.ion-right:after |
||||||
|
content: "\f125" |
||||||
|
|
||||||
|
.ion-android-contacts:before |
||||||
|
content: "\f2d9" |
||||||
|
|
||||||
|
.ion-arrow-shrink:before |
||||||
|
content: "\f267" |
@ -0,0 +1,79 @@ |
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.box-shadow |
||||||
|
+box-shadow(0 8px 13px rgba(#111, 0)) |
||||||
|
|
||||||
|
|
||||||
|
.clear-fix |
||||||
|
&:after // clearfix |
||||||
|
content: "" |
||||||
|
display: table |
||||||
|
clear: both |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/************** BUTTONS ************/ |
||||||
|
|
||||||
|
@mixin button-basic |
||||||
|
padding: .6rem 1rem |
||||||
|
display: inline-block |
||||||
|
line-height: .75rem |
||||||
|
letter-spacing: 0.07rem |
||||||
|
font-size: .75rem |
||||||
|
position: relative |
||||||
|
font-weight: 300 |
||||||
|
text-transform: uppercase |
||||||
|
+transition-property(background, border-color) |
||||||
|
+transition-duration(.1s) |
||||||
|
color: $dark-grey |
||||||
|
background: #F8F8F8 |
||||||
|
border: 1px solid darken( #F8F8F8 , 5%) |
||||||
|
font-family: $symbol-font-family, $main-font-family |
||||||
|
cursor: pointer |
||||||
|
&:hover |
||||||
|
border-color: darken( #F8F8F8 , 15%) |
||||||
|
text-decoration: none |
||||||
|
color: $dark-grey |
||||||
|
&.disabled |
||||||
|
opacity: .5 |
||||||
|
color: #999 |
||||||
|
background-color: $bloc-background-color |
||||||
|
&:hover |
||||||
|
color: #666 |
||||||
|
+box-shadow(1px 1px 0 rgba(#444, .3)) |
||||||
|
|
||||||
|
@mixin button-color-basic($type: 1) |
||||||
|
$color: $main-color-color |
||||||
|
$hover-border-color-darken-amount: 22% |
||||||
|
@if $type == 2 |
||||||
|
$color: #64676C |
||||||
|
$hover-border-color-darken-amount: 15% |
||||||
|
background: $color |
||||||
|
border-color: darken($color, 5%) |
||||||
|
color: white |
||||||
|
font-weight: 500 |
||||||
|
&:hover |
||||||
|
border-color: darken($color, $hover-border-color-darken-amount) |
||||||
|
|
||||||
|
@mixin button-small-basic |
||||||
|
padding: .5rem |
||||||
|
font-weight: 700 |
||||||
|
font-size: .7rem |
||||||
|
line-height: .7rem |
||||||
|
|
||||||
|
button, a.button |
||||||
|
@include button-basic |
||||||
|
&.color-1 |
||||||
|
@include button-color-basic |
||||||
|
&.color-2 |
||||||
|
@include button-color-basic(2) |
||||||
|
&.small |
||||||
|
@include button-small-basic |
||||||
|
&.light |
||||||
|
background: #eee |
||||||
|
border-color: darken(#eee, 5%) |
||||||
|
color: $main-color-dark |
||||||
|
font-weight: 500 |
||||||
|
&:hover |
||||||
|
border-color: darken(#eee, 25%) |
@ -0,0 +1,49 @@ |
|||||||
|
//these are the main variables used in the sass file |
||||||
|
|
||||||
|
$site-width : 1200px |
||||||
|
$gut : 18px |
||||||
|
$postboardWidth : 670px |
||||||
|
|
||||||
|
$miniProfileWidth : $site-width/8 |
||||||
|
$leftWidth : $miniProfileWidth + $gut |
||||||
|
$rightWidth : $site-width - ($leftWidth + $postboardWidth) |
||||||
|
|
||||||
|
$postboardLargeWidth : $postboardWidth + $rightWidth |
||||||
|
|
||||||
|
$micro-usr-img : 36px |
||||||
|
$mini-usr-img : 48px |
||||||
|
$usr-img : 64px |
||||||
|
|
||||||
|
$space : 1rem |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// colors |
||||||
|
$light-grey: #C3C3C3 |
||||||
|
$color-green: #A1B775 |
||||||
|
$color-red: #EF5D43 |
||||||
|
$color-blue: #39434F |
||||||
|
$dark-grey : #3E3C42 |
||||||
|
|
||||||
|
|
||||||
|
$main-color-light: #000 |
||||||
|
$main-color-dark: #222 |
||||||
|
$main-color-color: $color-green |
||||||
|
$main-background-color: #eee |
||||||
|
$bloc-light-color: #FDFCFA |
||||||
|
$bloc-background-color: #F3F2F0 |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$defaut-font-color: $dark-grey |
||||||
|
|
||||||
|
$global-font-size : 15px |
||||||
|
$main-font-size : 1rem |
||||||
|
$main-line-height : 1.3rem |
||||||
|
|
||||||
|
|
||||||
|
/* FONTS */ |
||||||
|
|
||||||
|
$main-font-family: "Roboto", sans-serif, "Symbola" |
||||||
|
$symbol-font-family: "Ionicons" |
||||||
|
$serif-font-family: "Droid", serif |
@ -0,0 +1,43 @@ |
|||||||
|
/********* ACCOUNT MODAL *********/ |
||||||
|
|
||||||
|
.account-modal |
||||||
|
.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 $main-color-color |
||||||
|
.alias |
||||||
|
margin: 0px 16px |
||||||
|
.avatar |
||||||
|
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: $color-green |
||||||
|
font-weight: bold |
@ -0,0 +1,167 @@ |
|||||||
|
/****** DIRECT MESSAGES MODAL**********/ |
||||||
|
|
||||||
|
.modal-wrapper.directMessages |
||||||
|
|
||||||
|
.post-area-new |
||||||
|
display: none |
||||||
|
z-index: 5 |
||||||
|
background: $bloc-light-color !important |
||||||
|
position: absolute |
||||||
|
bottom: 0px |
||||||
|
width: 100% !important |
||||||
|
padding: 10px 20px!important |
||||||
|
+box-shadow(0 -8px 13px rgba(#111, 0.1)) |
||||||
|
#post-preview |
||||||
|
background: none |
||||||
|
border: none |
||||||
|
padding: 5px |
||||||
|
width: 100%!important |
||||||
|
|
||||||
|
|
||||||
|
.modal-header |
||||||
|
h3 span |
||||||
|
display: inline-block!important |
||||||
|
padding-left: 5px |
||||||
|
color: white |
||||||
|
cursor: default |
||||||
|
|
||||||
|
.modal-content |
||||||
|
+box-sizing(border-box) |
||||||
|
width: 100% |
||||||
|
|
||||||
|
.post-photo |
||||||
|
width: $mini-usr-img |
||||||
|
.post-text |
||||||
|
margin-left: $mini-usr-img + 10px |
||||||
|
font-size: .9rem |
||||||
|
.post-info-name |
||||||
|
float: none |
||||||
|
.message.received, .message.sent |
||||||
|
.post-info-name |
||||||
|
display: none |
||||||
|
.post-info-tag |
||||||
|
line-height: 1em |
||||||
|
padding: 0 |
||||||
|
display: inline |
||||||
|
font-size: 80% |
||||||
|
margin: 0 0 0 1em |
||||||
|
.post-info-sent |
||||||
|
position: absolute |
||||||
|
left: 50% |
||||||
|
top: 10px |
||||||
|
display: none |
||||||
|
|
||||||
|
.direct-messages-list .post |
||||||
|
padding: 20px |
||||||
|
cursor: pointer |
||||||
|
@extend .ion-after |
||||||
|
@extend .ion-right |
||||||
|
&:after |
||||||
|
position: absolute |
||||||
|
right: 25px |
||||||
|
top: 50% |
||||||
|
font-size: 1.1em |
||||||
|
margin: -0.55em 0 0 0 |
||||||
|
color: rgba(0, 0, 0, 0.4) |
||||||
|
opacity: 0 |
||||||
|
+transition-property(right, opacity) |
||||||
|
+transition-duration(.2s) |
||||||
|
+transition-timing-function(ease-out) |
||||||
|
.direct-messages-list |
||||||
|
.post:hover:after |
||||||
|
opacity: 1 |
||||||
|
right: 5px |
||||||
|
.post:hover |
||||||
|
background: white |
||||||
|
|
||||||
|
.post .messages-qtd |
||||||
|
display: none |
||||||
|
top: 4px |
||||||
|
left: 56px |
||||||
|
|
||||||
|
li |
||||||
|
position: relative |
||||||
|
border-bottom: 1px solid $main-background-color |
||||||
|
background: $bloc-light-color |
||||||
|
.direct-messages-thread |
||||||
|
padding-bottom: 160px |
||||||
|
max-width: 420px |
||||||
|
margin: auto |
||||||
|
li |
||||||
|
position: relative!important |
||||||
|
|
||||||
|
.post |
||||||
|
@extend .clear-fix |
||||||
|
background: none |
||||||
|
left: 0 |
||||||
|
margin: 0px 10px 20px 10px |
||||||
|
cursor: default |
||||||
|
position: relative |
||||||
|
.post-info-time |
||||||
|
float: none |
||||||
|
display: block |
||||||
|
text-align: center |
||||||
|
font-size: 10px |
||||||
|
padding-top: 10px |
||||||
|
margin-bottom: 10px |
||||||
|
cursor: default |
||||||
|
position: static |
||||||
|
&: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: $mini-usr-img + 10 |
||||||
|
margin-left: $mini-usr-img + 10 |
||||||
|
position: relative |
||||||
|
display: inline-block |
||||||
|
max-width: 300px |
||||||
|
font-size: .9rem |
||||||
|
padding: 5px 10px |
||||||
|
z-index: 4 |
||||||
|
float: left |
||||||
|
word-wrap: break-word |
||||||
|
max-width: 70% |
||||||
|
min-height: $mini-usr-img |
||||||
|
|
||||||
|
.post-photo |
||||||
|
position: absolute |
||||||
|
left: 0 |
||||||
|
top: 30px |
||||||
|
float: none |
||||||
|
margin: 0 |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.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 |
@ -0,0 +1,83 @@ |
|||||||
|
/********** FOLLOWING OWN ***********/ |
||||||
|
|
||||||
|
.following-own-modal |
||||||
|
.modal-content |
||||||
|
padding: 0 |
||||||
|
.following-list |
||||||
|
display: flex |
||||||
|
flex-wrap: wrap |
||||||
|
justify-content: space-evenly |
||||||
|
> li |
||||||
|
width: 48% |
||||||
|
margin: 2px |
||||||
|
padding-top: 12px |
||||||
|
padding-bottom: 8px |
||||||
|
border: solid 1px rgba(69, 71, 77, .1) |
||||||
|
background: #FFF |
||||||
|
text-align: center |
||||||
|
> div |
||||||
|
position: relative |
||||||
|
&:hover |
||||||
|
border-bottom: solid 1px $main-color-color |
||||||
|
.mini-profile-actions |
||||||
|
display: block |
||||||
|
.mini-profile-photo |
||||||
|
width: 64px |
||||||
|
height: 64px |
||||||
|
margin: 2px |
||||||
|
.mini-profile-name |
||||||
|
padding: 4px |
||||||
|
.mini-screen-name |
||||||
|
display: none |
||||||
|
.following-config |
||||||
|
width: 100% |
||||||
|
text-align: center |
||||||
|
margin: 4px |
||||||
|
.following-config button |
||||||
|
display: inline-block |
||||||
|
.mini-profile-actions |
||||||
|
display: none |
||||||
|
position: absolute |
||||||
|
top: 0 |
||||||
|
right: 8px |
||||||
|
.mini-profile-actions |
||||||
|
span |
||||||
|
cursor: pointer |
||||||
|
display: inline-block |
||||||
|
position: relative |
||||||
|
top: -12px |
||||||
|
right: -8px |
||||||
|
z-index: 10 |
||||||
|
background: $main-color-color |
||||||
|
&:hover |
||||||
|
background: #AAA |
||||||
|
ul |
||||||
|
height: 0 |
||||||
|
overflow: hidden |
||||||
|
position: absolute |
||||||
|
z-index: 20 |
||||||
|
top: 8px |
||||||
|
right: -8px |
||||||
|
padding: 0 |
||||||
|
background: #FFF |
||||||
|
transition: height .2s linear |
||||||
|
> li |
||||||
|
text-align: left |
||||||
|
white-space: nowrap |
||||||
|
color: rgba(0, 0, 0, .7) |
||||||
|
font-size: 12px |
||||||
|
margin: 0 |
||||||
|
padding: 4px 16px 4px 8px |
||||||
|
border-bottom: solid 1px rgba(0, 0, 0, 0) |
||||||
|
background: #FFF |
||||||
|
&:hover |
||||||
|
border-bottom: solid 1px $main-color-color |
||||||
|
&:hover |
||||||
|
ul |
||||||
|
height: 57px |
||||||
|
box-shadow: 8px 10px 10px 0px rgba(0, 0, 0, .2) |
||||||
|
.swarm-status |
||||||
|
font-size: 11px |
||||||
|
display: block |
||||||
|
.latest-activity |
||||||
|
font-size: 11px |
@ -0,0 +1,150 @@ |
|||||||
|
// group messages |
||||||
|
|
||||||
|
|
||||||
|
.group-messages-join-group |
||||||
|
.modal-content |
||||||
|
padding: 20px |
||||||
|
button |
||||||
|
margin: 5px 0 |
||||||
|
.label |
||||||
|
font-weight: 700 |
||||||
|
padding: 5px 0 |
||||||
|
text-align: left |
||||||
|
input[type="text"] |
||||||
|
padding: 3px |
||||||
|
width: 100% |
||||||
|
margin-bottom: 10px |
||||||
|
input[type="checkbox"] |
||||||
|
float: left |
||||||
|
margin-right: 10px |
||||||
|
|
||||||
|
.groupMessages |
||||||
|
button |
||||||
|
margin: 5px |
||||||
|
|
||||||
|
.direct-messages-thread |
||||||
|
padding-bottom: 200px |
||||||
|
.post-area-new.open |
||||||
|
bottom: 40px |
||||||
|
.direct-messages-list |
||||||
|
li |
||||||
|
padding: 10px 20px |
||||||
|
|
||||||
|
.post-photo |
||||||
|
display: none |
||||||
|
|
||||||
|
.post-text |
||||||
|
display: none |
||||||
|
.post-info-time |
||||||
|
position: static |
||||||
|
display: block |
||||||
|
text-align: left |
||||||
|
padding: 5px 0 |
||||||
|
color: inherit |
||||||
|
|
||||||
|
&:hover |
||||||
|
text-decoration: none |
||||||
|
color: inherit |
||||||
|
|
||||||
|
.post .messages-qtd |
||||||
|
top: 50% |
||||||
|
left: unset |
||||||
|
right: 24px |
||||||
|
margin-top: -13px |
||||||
|
|
||||||
|
|
||||||
|
// new group |
||||||
|
.group-messages-new-group |
||||||
|
text-align: center!important |
||||||
|
.label |
||||||
|
font-weight: 700 |
||||||
|
padding: 5px 1% |
||||||
|
text-align: left |
||||||
|
textarea |
||||||
|
&.description, &.invite |
||||||
|
width: 98% |
||||||
|
margin: 5px auto |
||||||
|
padding: 5px |
||||||
|
text-align: left |
||||||
|
border: 1px solid darken( #F8F8F8 , 5%) |
||||||
|
|
||||||
|
|
||||||
|
// there is no special class for group DM profile modal window currently |
||||||
|
.profile-card[data-screen-name^=\*] |
||||||
|
.profile-bio |
||||||
|
text-align: center |
||||||
|
margin: 0 |
||||||
|
|
||||||
|
.group-description |
||||||
|
display: inline-block |
||||||
|
border: 1px solid rgba(0, 0, 0, 0) |
||||||
|
background: none |
||||||
|
text-align: center |
||||||
|
width: 58% |
||||||
|
padding: 4px |
||||||
|
vertical-align: middle |
||||||
|
|
||||||
|
&:focus |
||||||
|
border: 1px solid rgba(0, 0, 0, .1) |
||||||
|
background: white |
||||||
|
|
||||||
|
&:hover |
||||||
|
border: 1px solid rgba(0, 0, 0, .1) |
||||||
|
|
||||||
|
.save, .cancel |
||||||
|
display: none |
||||||
|
|
||||||
|
|
||||||
|
// messages control |
||||||
|
.group-messages-control |
||||||
|
text-align: left!important |
||||||
|
button |
||||||
|
margin: 3px 0 3px 3px |
||||||
|
textarea |
||||||
|
width: 98% |
||||||
|
margin: 5px auto |
||||||
|
padding: 5px |
||||||
|
text-align: left |
||||||
|
border: 1px solid darken( #F8F8F8 , 5%) |
||||||
|
.invite-form |
||||||
|
display: none |
||||||
|
div.profile-bio |
||||||
|
margin-left: 0 |
||||||
|
|
||||||
|
.secret-key |
||||||
|
display: none |
||||||
|
font-size: 10px |
||||||
|
padding: 5px |
||||||
|
margin: 3px |
||||||
|
cursor: pointer |
||||||
|
border: 1px solid darken( #F8F8F8 , 5%) |
||||||
|
color: $dark-grey |
||||||
|
background: #F8F8F8 |
||||||
|
overflow: hidden |
||||||
|
&:hover |
||||||
|
background: white |
||||||
|
|
||||||
|
|
||||||
|
.direct-messages-thread + .group-messages-control |
||||||
|
position: absolute |
||||||
|
bottom: 0 |
||||||
|
height: 40px |
||||||
|
overflow: hidden |
||||||
|
left: 0 |
||||||
|
width: 100% |
||||||
|
padding: 3px 10px |
||||||
|
text-align: right!important |
||||||
|
z-index: 200 |
||||||
|
background: $bloc-light-color |
||||||
|
+box-shadow(0 -8px 13px rgba(#111, 0.1)) |
||||||
|
.invite-form |
||||||
|
@include prompt-wrapper-basic |
||||||
|
bottom: 40px |
||||||
|
top: auto |
||||||
|
textarea |
||||||
|
min-height: 100px |
||||||
|
button |
||||||
|
float: none |
||||||
|
display: inline-block |
||||||
|
padding: 7px |
||||||
|
@include button-color-basic |
@ -0,0 +1,29 @@ |
|||||||
|
/****** LOGIN TO ACCOUNT MODAL ******/ |
||||||
|
|
||||||
|
.login-modal |
||||||
|
.module |
||||||
|
margin: 4px |
||||||
|
> div |
||||||
|
margin: 4px 0 |
||||||
|
padding: 4px 12px |
||||||
|
> div:last-child |
||||||
|
text-align: right |
||||||
|
margin: 8px 0 |
||||||
|
input |
||||||
|
border: 1px solid rgba(0, 0, 0, .1) |
||||||
|
width: 320px |
||||||
|
margin: 12px 16px |
||||||
|
padding: 2px 4px |
||||||
|
select |
||||||
|
border: 1px solid rgba(0, 0, 0, .1) |
||||||
|
width: 310px |
||||||
|
margin: 12px 16px |
||||||
|
padding: 2px 4px |
||||||
|
input:focus, select:focus |
||||||
|
border-bottom: solid 1px $main-color-color |
||||||
|
.secret-key |
||||||
|
width: 500px |
||||||
|
.availability |
||||||
|
color: #45474D |
||||||
|
display: inline-block |
||||||
|
margin-left: 16px |
@ -0,0 +1,118 @@ |
|||||||
|
// vars for the menu |
||||||
|
|
||||||
|
$menu-height : 52px |
||||||
|
$menu-font-color: white |
||||||
|
$menuBgColor : $dark-grey |
||||||
|
.userMenu |
||||||
|
width: 100% |
||||||
|
position: fixed |
||||||
|
height: $menu-height |
||||||
|
left: 0 |
||||||
|
margin: 0 |
||||||
|
//background-color: #FFAF1C |
||||||
|
//+background-image(linear-gradient(to right , $color-green, #5E80A2) ) |
||||||
|
background-color: $menuBgColor |
||||||
|
z-index: 20 |
||||||
|
> ul |
||||||
|
@extend .clear-fix |
||||||
|
+box-sizing(border-box) |
||||||
|
max-width: 100% |
||||||
|
width: $site-width |
||||||
|
margin: auto |
||||||
|
background: image-url("logo.png", false, false) no-repeat 50% 50% |
||||||
|
background-size: 20px |
||||||
|
li |
||||||
|
position: relative |
||||||
|
display: block |
||||||
|
float: left |
||||||
|
margin: 0 10px |
||||||
|
> a |
||||||
|
line-height: $menu-height |
||||||
|
display: inline-block |
||||||
|
color: rgba($menu-font-color, 0.5)!important |
||||||
|
font-size: 1rem |
||||||
|
position: relative |
||||||
|
font-size: 1rem |
||||||
|
&:hover |
||||||
|
color: $menu-font-color!important |
||||||
|
text-decoration: none |
||||||
|
|
||||||
|
&:before |
||||||
|
padding-right: 5px |
||||||
|
span |
||||||
|
display: inline-block |
||||||
|
|
||||||
|
|
||||||
|
&.current a |
||||||
|
color: $menu-font-color!important |
||||||
|
|
||||||
|
|
||||||
|
/* Menu specific entries */ |
||||||
|
|
||||||
|
.userMenu li |
||||||
|
|
||||||
|
&.userMenu-home |
||||||
|
a |
||||||
|
.label |
||||||
|
display: inline-block!important |
||||||
|
|
||||||
|
.menu-news |
||||||
|
position: absolute |
||||||
|
text-align: center |
||||||
|
display: none |
||||||
|
top: 5px |
||||||
|
right: -12px |
||||||
|
background: $main-color-color |
||||||
|
width: 15px |
||||||
|
height: 15px |
||||||
|
line-height: 15px |
||||||
|
font-size: 10px |
||||||
|
padding: 1px |
||||||
|
margin: 0 |
||||||
|
font-weight: 900 |
||||||
|
+border-radius(50%) |
||||||
|
+box-sizing(content-box) |
||||||
|
color: white |
||||||
|
&.show |
||||||
|
display: block |
||||||
|
|
||||||
|
|
||||||
|
&.userMenu-dhtindicator, &.userMenu-connections, &.userMenu-messages, &.userMenu-groupmessages |
||||||
|
display: none!important |
||||||
|
|
||||||
|
&.userMenu-config, &.userMenu-search |
||||||
|
float: right |
||||||
|
color: $menu-font-color |
||||||
|
+ a |
||||||
|
color: $main-color-dark |
||||||
|
&.userMenu-search |
||||||
|
> input |
||||||
|
border: 1px solid rgba(white,.3) |
||||||
|
line-height: $menu-height/2 |
||||||
|
margin-top: $menu-height/4 |
||||||
|
font-size: 12px |
||||||
|
padding: 0 7px |
||||||
|
background: rgba(white,.1) |
||||||
|
color: white |
||||||
|
+border-radius(7px) |
||||||
|
&:focus |
||||||
|
border-color: rgba(white,.7) |
||||||
|
&.userMenu-config > a |
||||||
|
@extend .ion |
||||||
|
@extend .ion-gear |
||||||
|
font-size: 1.5rem |
||||||
|
.config-menu.dialog-modal |
||||||
|
a |
||||||
|
background: $bloc-light-color |
||||||
|
border-top: 1px solid $main-background-color |
||||||
|
&:hover |
||||||
|
background: white |
||||||
|
text-decoration: none |
||||||
|
display: block |
||||||
|
width: 100% |
||||||
|
font-weight: 400 |
||||||
|
line-height: $mini-usr-img / 1.5 |
||||||
|
display: block |
||||||
|
margin: 0 |
||||||
|
padding: 5px |
||||||
|
color: $defaut-font-color!important |
@ -0,0 +1,351 @@ |
|||||||
|
/*********** POPUP MODAL **************/ |
||||||
|
|
||||||
|
// vars modal |
||||||
|
|
||||||
|
$header-modal-height : $menu-height |
||||||
|
|
||||||
|
|
||||||
|
// style |
||||||
|
|
||||||
|
@mixin modal-blackout |
||||||
|
display: block |
||||||
|
background: rgba(0,0,0, 0.6) |
||||||
|
z-index: -1 |
||||||
|
position: fixed |
||||||
|
left: 0 |
||||||
|
top: 0 |
||||||
|
width: 100% |
||||||
|
height: 100% |
||||||
|
|
||||||
|
.modal-blackout |
||||||
|
display: none |
||||||
|
|
||||||
|
|
||||||
|
.modal-wrapper |
||||||
|
background: $bloc-background-color |
||||||
|
z-index: 100 |
||||||
|
width: 34% |
||||||
|
position: fixed |
||||||
|
+box-sizing(border-box) |
||||||
|
@extend .box-shadow |
||||||
|
height: 100vh |
||||||
|
right: 0 |
||||||
|
bottom: 0 |
||||||
|
overflow: hidden |
||||||
|
+box-shadow(-8px 0 13px rgba(#111, 0.2)) |
||||||
|
+transition-property(top, bottom) |
||||||
|
+transition-duration(1s) |
||||||
|
&.remove |
||||||
|
bottom: 300% |
||||||
|
// NEW USER MODAL // |
||||||
|
|
||||||
|
&.new-user |
||||||
|
|
||||||
|
.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: 80% |
||||||
|
|
||||||
|
|
||||||
|
// FOLOWING MODAL // |
||||||
|
|
||||||
|
&.following-modal |
||||||
|
|
||||||
|
h2 |
||||||
|
display: none |
||||||
|
.mini-following-info |
||||||
|
border-bottom: 1px solid $main-background-color |
||||||
|
line-height: $mini-usr-img |
||||||
|
|
||||||
|
a |
||||||
|
display: block |
||||||
|
padding: 10px |
||||||
|
width: 100% |
||||||
|
|
||||||
|
@extend .clear-fix |
||||||
|
color: $defaut-font-color |
||||||
|
background: $bloc-light-color |
||||||
|
|
||||||
|
&:hover |
||||||
|
background: white |
||||||
|
text-decoration: none |
||||||
|
font-weight: 500 |
||||||
|
.mini-profile-photo |
||||||
|
width: $mini-usr-img |
||||||
|
min-height: $mini-usr-img |
||||||
|
overflow-x: hidden |
||||||
|
line-height: 0 |
||||||
|
margin: 0 $space 0 0 |
||||||
|
float: left |
||||||
|
.mini-following-name |
||||||
|
&:after |
||||||
|
line-height: 20px |
||||||
|
.mini-screen-name |
||||||
|
display: none |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
&.who-to-follow-modal |
||||||
|
a |
||||||
|
color: $main-color-dark |
||||||
|
&.twister-user-name |
||||||
|
&:hover |
||||||
|
text-decoration: none |
||||||
|
.twister-user-info |
||||||
|
text-align: left |
||||||
|
font-size: .8rem |
||||||
|
line-height: 1rem |
||||||
|
width: 80% |
||||||
|
padding-left: $mini-usr-img + 20 |
||||||
|
button |
||||||
|
position: absolute |
||||||
|
right: 10px |
||||||
|
top: 10px |
||||||
|
@include button-small-basic |
||||||
|
.bio |
||||||
|
color: rgba(0, 0, 0, 0.6) |
||||||
|
font-style: italic |
||||||
|
padding: .25rem 0 |
||||||
|
|
||||||
|
|
||||||
|
.modal-content |
||||||
|
background: $bloc-light-color |
||||||
|
width: 100% |
||||||
|
@extend .clear-fix |
||||||
|
overflow: hidden |
||||||
|
overflow-y: auto |
||||||
|
|
||||||
|
.postboard |
||||||
|
padding: 0 |
||||||
|
clear: none!important |
||||||
|
position: relative |
||||||
|
width: 100% |
||||||
|
margin: auto |
||||||
|
|
||||||
|
h2 |
||||||
|
display: block |
||||||
|
span |
||||||
|
display: none |
||||||
|
|
||||||
|
|
||||||
|
.postboard-news |
||||||
|
position: fixed |
||||||
|
display: block |
||||||
|
right: 2px |
||||||
|
top: $header-modal-height +2 |
||||||
|
z-index: 2000 |
||||||
|
@include button-color-basic |
||||||
|
|
||||||
|
|
||||||
|
&.new-users-modal |
||||||
|
a |
||||||
|
color: $main-color-dark |
||||||
|
&.twister-user-name |
||||||
|
&:hover |
||||||
|
text-decoration: none |
||||||
|
.twister-user-info |
||||||
|
text-align: left |
||||||
|
font-size: .8rem |
||||||
|
line-height: 1rem |
||||||
|
width: 80% |
||||||
|
padding-left: $mini-usr-img + 20 |
||||||
|
button |
||||||
|
position: absolute |
||||||
|
right: 10px |
||||||
|
top: 10px |
||||||
|
@include button-small-basic |
||||||
|
.bio |
||||||
|
color: rgba(0, 0, 0, 0.6) |
||||||
|
font-style: italic |
||||||
|
padding: .25rem 0 |
||||||
|
|
||||||
|
|
||||||
|
.modal-header |
||||||
|
position: relative |
||||||
|
background: darken($main-color-dark,.3) |
||||||
|
height: $header-modal-height |
||||||
|
+box-sizing(border-box) |
||||||
|
@extend .clear-fix |
||||||
|
|
||||||
|
h3 |
||||||
|
padding-left: 20px |
||||||
|
line-height: $header-modal-height |
||||||
|
font-weight: 500 |
||||||
|
font-size: 1rem |
||||||
|
float: left |
||||||
|
color: white |
||||||
|
span |
||||||
|
position: relative |
||||||
|
span |
||||||
|
|
||||||
|
@extend .ion |
||||||
|
position: absolute |
||||||
|
top: 0 |
||||||
|
line-height: $header-modal-height |
||||||
|
font-size: 1rem |
||||||
|
cursor: pointer |
||||||
|
color: rgba(white , 0.7) |
||||||
|
transition: color .1s linear |
||||||
|
&:hover |
||||||
|
color: white |
||||||
|
|
||||||
|
b |
||||||
|
display: none |
||||||
|
|
||||||
|
&.modal-close |
||||||
|
@extend .ion-close |
||||||
|
right: 10px |
||||||
|
&.mark-all-as-read |
||||||
|
@extend .ion-checkmark |
||||||
|
position: static |
||||||
|
float: left |
||||||
|
margin-left: 10px |
||||||
|
display: none |
||||||
|
&.modal-back |
||||||
|
@extend .ion-back |
||||||
|
right: 70px |
||||||
|
|
||||||
|
|
||||||
|
.inline-warn |
||||||
|
background-color: #FEFEDF |
||||||
|
padding: 10px |
||||||
|
.close |
||||||
|
float: right |
||||||
|
font-size: 1.2em |
||||||
|
color: #e34f42 |
||||||
|
cursor: pointer |
||||||
|
margin: -8px 2px 8px 8px |
||||||
|
.text |
||||||
|
font-size: 0.8em |
||||||
|
text-align: center |
||||||
|
.options |
||||||
|
font-size: 0.8em |
||||||
|
text-align: right |
||||||
|
margin-top: 4px |
||||||
|
div > * |
||||||
|
display: inline-block |
||||||
|
|
||||||
|
|
||||||
|
/* Composants */ |
||||||
|
|
||||||
|
.twister-peer |
||||||
|
margin: 0 |
||||||
|
min-height: 72px |
||||||
|
padding: 4px |
||||||
|
border-top: solid 1px $main-background-color |
||||||
|
border-bottom: solid 1px $main-background-color |
||||||
|
background: $bloc-light-color |
||||||
|
+ .twister-peer |
||||||
|
border-top: none |
||||||
|
.avatar |
||||||
|
float: left |
||||||
|
width: 48px |
||||||
|
height: 48px |
||||||
|
overflow: hidden |
||||||
|
margin: 4px |
||||||
|
img |
||||||
|
width: 48px |
||||||
|
height: auto |
||||||
|
&:hover |
||||||
|
cursor: pointer |
||||||
|
.name |
||||||
|
display: inline-block |
||||||
|
font-weight: 600 |
||||||
|
&:hover |
||||||
|
cursor: pointer |
||||||
|
.alias |
||||||
|
display: inline-block |
||||||
|
&:hover |
||||||
|
color: $main-color-color |
||||||
|
cursor: pointer |
||||||
|
.bio |
||||||
|
text-align: center |
||||||
|
padding: 4px |
||||||
|
|
||||||
|
.avatar.tiny |
||||||
|
width: 20px |
||||||
|
height: 20px |
||||||
|
+border-radius(3px) |
||||||
|
|
||||||
|
.twister-user |
||||||
|
position: relative |
||||||
|
box-sizing: border-box |
||||||
|
background: $bloc-light-color |
||||||
|
@extend .clear-fix |
||||||
|
border-bottom: 1px solid $main-background-color |
||||||
|
width: 100% |
||||||
|
min-height: auto |
||||||
|
padding: 7px |
||||||
|
clear: left |
||||||
|
&:first-child |
||||||
|
border-top: 1px solid $main-background-color |
||||||
|
border-bottom: 1px solid $main-background-color !important |
||||||
|
&:last-child |
||||||
|
border-bottom: 0 |
||||||
|
small |
||||||
|
display: none |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/* Minimized */ |
||||||
|
.minimize-modal |
||||||
|
@extend .ion |
||||||
|
@extend .ion-minus |
||||||
|
position: absolute |
||||||
|
top: 0 |
||||||
|
line-height: $header-modal-height |
||||||
|
font-size: 1rem |
||||||
|
cursor: pointer |
||||||
|
color: rgba(white , 0.7) |
||||||
|
transition: color .1s linear |
||||||
|
right: 35px!important |
||||||
|
&:hover |
||||||
|
color: white |
||||||
|
|
||||||
|
b |
||||||
|
display: none |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#modals-minimized |
||||||
|
position: fixed |
||||||
|
z-index: 2000 |
||||||
|
left: 0 |
||||||
|
bottom: 0 |
||||||
|
width: $leftWidth |
||||||
|
text-align: right |
||||||
|
li |
||||||
|
background: $dark-grey |
||||||
|
cursor: pointer |
||||||
|
margin-right: 10px |
||||||
|
font-weight: 600 |
||||||
|
font-size: .8rem |
||||||
|
padding: .5rem |
||||||
|
margin-bottom: 10px |
||||||
|
color: rgba(white, .8) |
||||||
|
+transition(margin .2s) |
||||||
|
&:hover |
||||||
|
color: white |
||||||
|
margin-right: 0 |
||||||
|
|
||||||
|
/*********** POPUP PROMPT *************/ |
||||||
|
|
||||||
|
@import '_prompt' |
||||||
|
|
||||||
|
/********* DIRECT MESSAGES MODAL ***********/ |
||||||
|
|
||||||
|
@import '_dm' |
||||||
|
|
||||||
|
@import '_groupchat' |
@ -0,0 +1,393 @@ |
|||||||
|
/************* TOP TEXTAREA *************/ |
||||||
|
#postboard-top |
||||||
|
position: relative |
||||||
|
@extend .clear-fix |
||||||
|
margin-bottom: 10px |
||||||
|
transition: height .3s linear |
||||||
|
padding: 15px |
||||||
|
background: white |
||||||
|
overflow: hidden |
||||||
|
background: $bloc-light-color |
||||||
|
+transition-property( top) |
||||||
|
+transition-duration(.1s) |
||||||
|
+transition-timing-function(ease-out) |
||||||
|
top: 0 |
||||||
|
+box-shadow(1px 2px 2px rgba(#111, 0.1)) |
||||||
|
z-index: 120 |
||||||
|
|
||||||
|
.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 |
||||||
|
|
||||||
|
&.onTop |
||||||
|
position: fixed |
||||||
|
bottom: 0 |
||||||
|
left: 0 |
||||||
|
top: auto |
||||||
|
margin-bottom: 0 |
||||||
|
z-index: 2000 |
||||||
|
+box-shadow(0 -5px 13px rgba(#111, 0.2)) |
||||||
|
width: 320px |
||||||
|
max-width: 100% |
||||||
|
.profile-photo |
||||||
|
display: none!important |
||||||
|
.post-area |
||||||
|
padding-left: 0 |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/************* POSTBOARD *************/ |
||||||
|
|
||||||
|
|
||||||
|
.postboard |
||||||
|
width: $postboardWidth |
||||||
|
float: left |
||||||
|
|
||||||
|
h2, .postboard-news |
||||||
|
display: none |
||||||
|
|
||||||
|
&.large |
||||||
|
width: $postboardLargeWidth |
||||||
|
|
||||||
|
.postboard-posts |
||||||
|
position: relative |
||||||
|
z-index: 1 |
||||||
|
clear: both |
||||||
|
|
||||||
|
|
||||||
|
.post |
||||||
|
|
||||||
|
position: relative |
||||||
|
margin-bottom: 1px |
||||||
|
+transition-property(margin) |
||||||
|
+transition-duration(.5s) |
||||||
|
+transition-timing-function(ease-out) |
||||||
|
color: $defaut-font-color |
||||||
|
cursor: pointer |
||||||
|
|
||||||
|
&:hover |
||||||
|
color: #000 |
||||||
|
|
||||||
|
.show-more |
||||||
|
display: inline-block |
||||||
|
float: right |
||||||
|
font-size: .8rem |
||||||
|
color: lighten($dark-grey,30%) |
||||||
|
|
||||||
|
&:hover |
||||||
|
color: lighten($dark-grey,5%) |
||||||
|
.post-expand |
||||||
|
color: lighten($dark-grey,30%) |
||||||
|
background: $bloc-light-color |
||||||
|
cursor: pointer |
||||||
|
font-size: .8rem |
||||||
|
position: absolute |
||||||
|
left: 10px |
||||||
|
bottom: 10px |
||||||
|
&:hover |
||||||
|
color: lighten($dark-grey,5%) |
||||||
|
.post-data |
||||||
|
padding: 15px |
||||||
|
background: $bloc-light-color |
||||||
|
|
||||||
|
&.promoted |
||||||
|
> .post-data |
||||||
|
.post-text::after |
||||||
|
font-size: 70% |
||||||
|
color: #FFF |
||||||
|
background-color: rgba($color-green, 0.75) |
||||||
|
margin: 0px 8px |
||||||
|
padding: 2px 4px |
||||||
|
content: attr(data-promoted) |
||||||
|
&:hover |
||||||
|
.post-text::after |
||||||
|
background-color: $color-green |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/*********** EVERYTHING SPECIFIC TO OPEN POSTS **************/ |
||||||
|
|
||||||
|
> .post |
||||||
|
+box-shadow(1px 2px 2px rgba(#111, 0.1)) |
||||||
|
&.open |
||||||
|
margin-top: $space |
||||||
|
margin-bottom: $space |
||||||
|
+box-shadow(1px 2px 2px rgba(#111, 0)) |
||||||
|
.post |
||||||
|
color: darken($defaut-font-color, 15%) |
||||||
|
+box-shadow(1px 2px 2px rgba(#111, 0.1)) |
||||||
|
margin-bottom: 1px |
||||||
|
&:not(.original) |
||||||
|
.post-expand |
||||||
|
display: none |
||||||
|
margin: 0 |
||||||
|
|
||||||
|
.post-photo |
||||||
|
margin: 0 |
||||||
|
display: inline-block |
||||||
|
float: left |
||||||
|
vertical-align: middle |
||||||
|
overflow: hidden |
||||||
|
width: $mini-usr-img |
||||||
|
margin: 0 15px 15px 0 |
||||||
|
max-height: $mini-usr-img |
||||||
|
clear: both |
||||||
|
img |
||||||
|
width: 100% |
||||||
|
height: auto!important |
||||||
|
|
||||||
|
.post-info-name |
||||||
|
font-weight: 500 |
||||||
|
color: inherit |
||||||
|
text-decoration: none |
||||||
|
display: inline-block |
||||||
|
font-size: 1rem |
||||||
|
float: left |
||||||
|
&:hover |
||||||
|
text-decoration: none |
||||||
|
color: black |
||||||
|
|
||||||
|
.post-info-tag |
||||||
|
font-size: .8rem |
||||||
|
opacity: .6 |
||||||
|
margin-top: 4px |
||||||
|
display: inline-block |
||||||
|
|
||||||
|
.post-info-sent |
||||||
|
display: block |
||||||
|
position: absolute |
||||||
|
top: -10px |
||||||
|
right: 0 |
||||||
|
font-size: 15px |
||||||
|
|
||||||
|
|
||||||
|
.post-info-time |
||||||
|
position: absolute |
||||||
|
font-size: .8rem |
||||||
|
line-height: .8rem |
||||||
|
text-decoration: none |
||||||
|
top: 12px |
||||||
|
right: 0 |
||||||
|
padding-right: 11px |
||||||
|
text-align: right |
||||||
|
color: lighten($dark-grey,30%) |
||||||
|
&:hover |
||||||
|
color: lighten($dark-grey,5%) |
||||||
|
|
||||||
|
.post-text |
||||||
|
margin: 0 0 0 ($mini-usr-img +15) |
||||||
|
word-wrap: break-word |
||||||
|
min-height: $mini-usr-img - 20 |
||||||
|
padding: 0 |
||||||
|
a:hover |
||||||
|
text-decoration: underline |
||||||
|
|
||||||
|
|
||||||
|
.post-context |
||||||
|
font-size: .8rem |
||||||
|
line-height: .8rem |
||||||
|
margin: 2px 0 4px 60px |
||||||
|
|
||||||
|
color: lighten($dark-grey,30%) |
||||||
|
|
||||||
|
|
||||||
|
.post-rt-by |
||||||
|
margin: 0 0 1em |
||||||
|
div |
||||||
|
display: inline |
||||||
|
.prep:before, .prep:after |
||||||
|
content: ' ' |
||||||
|
|
||||||
|
|
||||||
|
.post-rt-icon |
||||||
|
@extend .ion-shuffle |
||||||
|
@extend .ion |
||||||
|
&:before |
||||||
|
display: block |
||||||
|
float: left |
||||||
|
color: $main-color-color |
||||||
|
|
||||||
|
line-height: .8rem |
||||||
|
font-size: .8rem |
||||||
|
|
||||||
|
margin-right: .4em |
||||||
|
|
||||||
|
|
||||||
|
// .post-interactions (reply, retransmit, fav) |
||||||
|
|
||||||
|
.post-interactions |
||||||
|
margin: 10px 0 3px 0 |
||||||
|
text-align: right |
||||||
|
height: .8rem |
||||||
|
line-height: .8rem |
||||||
|
span |
||||||
|
color: lighten($dark-grey,30%) |
||||||
|
cursor: pointer |
||||||
|
font-size: .8rem |
||||||
|
line-height: .8rem |
||||||
|
@extend .ion |
||||||
|
position: relative |
||||||
|
margin-left: 7px |
||||||
|
display: none |
||||||
|
.open .original & |
||||||
|
display: inline-block!important |
||||||
|
|
||||||
|
&:hover |
||||||
|
color: lighten($dark-grey,5%) |
||||||
|
&:before |
||||||
|
padding: 3px |
||||||
|
&.post-reply |
||||||
|
@extend .ion-plus |
||||||
|
&.post-propagate |
||||||
|
@extend .ion-shuffle |
||||||
|
&.post-favorite |
||||||
|
@extend .ion-alert |
||||||
|
|
||||||
|
.post:hover & |
||||||
|
.post-reply, .post-propagate , .post-favorite |
||||||
|
display: inline-block |
||||||
|
|
||||||
|
|
||||||
|
.open .related |
||||||
|
.post-reply, |
||||||
|
.post-propagate, |
||||||
|
.post-favorite |
||||||
|
display: none!important |
||||||
|
&:hover |
||||||
|
.post-reply, |
||||||
|
.post-propagate, |
||||||
|
.post-favorite |
||||||
|
display: inline-block!important |
||||||
|
|
||||||
|
|
||||||
|
.expanded-content |
||||||
|
//display: none |
||||||
|
padding: 0 |
||||||
|
@extend .clear-fix |
||||||
|
textarea |
||||||
|
clear: left |
||||||
|
|
||||||
|
.image-preview |
||||||
|
max-width: 100% |
||||||
|
width: auto |
||||||
|
display: block |
||||||
|
margin: auto |
||||||
|
|
||||||
|
.preview-container |
||||||
|
width: 100% |
||||||
|
text-align: center |
||||||
|
overflow-y: auto |
||||||
|
background: black |
||||||
|
clear: both |
||||||
|
|
||||||
|
.post-stats |
||||||
|
display: flex |
||||||
|
float: left |
||||||
|
clear: left |
||||||
|
height: 34px |
||||||
|
> div |
||||||
|
line-height: 16px |
||||||
|
vertical-align: middle |
||||||
|
.stat-count |
||||||
|
font-size: 12px |
||||||
|
padding-right: 4px |
||||||
|
border-right: solid 1px $light-grey |
||||||
|
div:last-child |
||||||
|
display: none |
||||||
|
.avatar-row |
||||||
|
padding: 4px |
||||||
|
a |
||||||
|
display: inline-block |
||||||
|
position: relative |
||||||
|
margin-right: 2px |
||||||
|
|
||||||
|
.post |
||||||
|
.new-replies-available |
||||||
|
text-align: center |
||||||
|
margin-top: 8px |
||||||
|
button |
||||||
|
@include button-color-basic |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//what appears on top of .avatar-row img on hover |
||||||
|
|
||||||
|
.avatar-row |
||||||
|
a:hover |
||||||
|
.user-name-tooltip |
||||||
|
display: block |
||||||
|
|
||||||
|
.user-name-tooltip |
||||||
|
display: none |
||||||
|
position: absolute |
||||||
|
background: $main-color-dark |
||||||
|
font-size: 11px |
||||||
|
line-height: 11px |
||||||
|
white-space: nowrap |
||||||
|
padding: 5px |
||||||
|
+border-radius(3px) |
||||||
|
color: #fff |
||||||
|
top: -28px |
||||||
|
left: -10px |
||||||
|
&:after |
||||||
|
content: "" |
||||||
|
position: absolute |
||||||
|
width: 0 |
||||||
|
left: 13px |
||||||
|
bottom: -4px |
||||||
|
border-top: solid 5px $main-color-dark |
||||||
|
border-left: solid 5px transparent |
||||||
|
border-right: solid 5px transparent |
||||||
|
|
||||||
|
// Posts replies get left border to show threads |
||||||
|
|
||||||
|
.post-replies .sub-replies |
||||||
|
border-left: solid 18px transparent |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.post-rt-reference |
||||||
|
padding: 10px |
||||||
|
margin-top: 10px |
||||||
|
position: relative |
||||||
|
border: 1px solid #eee |
||||||
|
+border-radius(3px) |
||||||
|
&:hover |
||||||
|
background-color: #FFF |
||||||
|
cursor: pointer |
||||||
|
.post-photo |
||||||
|
display: none |
||||||
|
.post-info-name |
||||||
|
font-size: 12px |
||||||
|
.post-text |
||||||
|
margin: 5px 0 0 0 |
||||||
|
clear: both |
||||||
|
font-size: 12px |
||||||
|
line-height: 130% |
||||||
|
.post-info-time |
||||||
|
font-size: 80% |
||||||
|
.post-area |
||||||
|
padding-left: 0 |
@ -0,0 +1,156 @@ |
|||||||
|
|
||||||
|
// 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-content |
||||||
|
overflow: hidden |
||||||
|
padding: 0 |
||||||
|
position: relative |
||||||
|
#profile-posts |
||||||
|
padding: 0 |
||||||
|
|
||||||
|
.postboard |
||||||
|
width: 100% |
||||||
|
height: 100% |
||||||
|
position: absolute |
||||||
|
|
||||||
|
.postboard-posts |
||||||
|
display: block |
||||||
|
height: $modal-postboard-post-height |
||||||
|
overflow: auto |
||||||
|
|
||||||
|
.profile-card |
||||||
|
margin: 0 |
||||||
|
padding: 0 |
||||||
|
border-bottom: 1px solid $main-background-color |
||||||
|
.profile-data |
||||||
|
background: none |
||||||
|
|
||||||
|
.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 |
||||||
|
width: 100% |
||||||
|
background: $bloc-light-color |
||||||
|
padding: $modal-gut |
||||||
|
.profile-card-main |
||||||
|
position: relative |
||||||
|
text-align: left |
||||||
|
word-wrap: break-word |
||||||
|
background: none!important |
||||||
|
padding: 10px |
||||||
|
h1, h2 |
||||||
|
display: inline !important |
||||||
|
b |
||||||
|
font-weight: 400 |
||||||
|
&:before |
||||||
|
content: "" |
||||||
|
border: solid 0px #fff |
||||||
|
position: absolute |
||||||
|
left: 1px |
||||||
|
top: 1px |
||||||
|
right: 1px |
||||||
|
bottom: 1px |
||||||
|
z-index: 0 |
||||||
|
* |
||||||
|
position: relative |
||||||
|
z-index: 1 |
||||||
|
|
||||||
|
.profile-card-photo |
||||||
|
height: auto |
||||||
|
width: $usr-img |
||||||
|
margin: 0 10px 10px 0 |
||||||
|
display: block |
||||||
|
float: left |
||||||
|
|
||||||
|
.profile-bio |
||||||
|
@extend i |
||||||
|
text-align: left |
||||||
|
font-size: .9rem |
||||||
|
|
||||||
|
margin-left: $usr-img + 10 |
||||||
|
.profile-card-buttons |
||||||
|
text-align: center |
||||||
|
padding: 0 0 $space 0 |
||||||
|
|
||||||
|
|
||||||
|
.isFollowing:after |
||||||
|
font-size: 10px |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.follow |
||||||
|
@include button-color-basic |
||||||
|
.unfollow |
||||||
|
@include button-color-basic(2) |
||||||
|
|
||||||
|
|
||||||
|
.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 |
||||||
|
padding: 2px 8px 3px 8px |
||||||
|
+border-radius(2px) |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.bitmessage-ctc, .tox-ctc |
||||||
|
background: #999 |
||||||
|
color: white |
||||||
|
font-size: 1rem |
||||||
|
display: inline-block |
||||||
|
padding: 10px |
||||||
|
line-height: 1rem |
||||||
|
@extend .ion-copy |
||||||
|
@extend .ion |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.profile-modal |
||||||
|
.profile-tox, .profile-bitmessage |
||||||
|
display: inline-block |
||||||
|
margin-right: 5px |
||||||
|
font-size: 13px |
||||||
|
&:hover |
||||||
|
color: $main-color-color |
||||||
|
text-decoration: none |
||||||
|
@extend .ion-tox |
||||||
|
@extend .ion |
@ -0,0 +1,102 @@ |
|||||||
|
/*********** POPUP PROMPT *************/ |
||||||
|
|
||||||
|
@mixin prompt-wrapper-basic |
||||||
|
background: $bloc-light-color |
||||||
|
z-index: 200 |
||||||
|
position: fixed |
||||||
|
top: 50% |
||||||
|
left: 50% |
||||||
|
width: 600px |
||||||
|
margin-left: -300px |
||||||
|
+box-shadow(0 8px 33px rgba(#000, .3)) |
||||||
|
|
||||||
|
.prompt-wrapper |
||||||
|
@include prompt-wrapper-basic |
||||||
|
.following-config-method-buttons |
||||||
|
padding: 0 20px 20px 0 |
||||||
|
float: right |
||||||
|
.modal-content |
||||||
|
background: $bloc-light-color |
||||||
|
padding: 20px |
||||||
|
.post-area |
||||||
|
textarea |
||||||
|
clear: both |
||||||
|
.post-data |
||||||
|
border: 1px solid $bloc-background-color |
||||||
|
position: relative |
||||||
|
padding: 10px |
||||||
|
background: white |
||||||
|
.modal-header |
||||||
|
@extend .modal-header |
||||||
|
h3 span |
||||||
|
padding-left: 5px |
||||||
|
color: white |
||||||
|
&:hover |
||||||
|
cursor: default |
||||||
|
.modal-buttons |
||||||
|
margin: 4px 0 |
||||||
|
text-align: right |
||||||
|
.switch-mode |
||||||
|
display: inline-block |
||||||
|
float: left |
||||||
|
margin: 12px 4px 4px |
||||||
|
color: $main-color-color |
||||||
|
cursor: pointer |
||||||
|
font-size: .8rem |
||||||
|
line-height: .8rem |
||||||
|
@extend .ion |
||||||
|
@extend .ion-shuffle |
||||||
|
|
||||||
|
|
||||||
|
.confirm-popup.prompt-wrapper |
||||||
|
margin-top: -100px |
||||||
|
|
||||||
|
|
||||||
|
/******** NEW ACCOUNT POPUP **********/ |
||||||
|
|
||||||
|
.new-account-briefing |
||||||
|
&.prompt-wrapper |
||||||
|
margin-top: -184px |
||||||
|
.modal-blackout |
||||||
|
@include modal-blackout |
||||||
|
|
||||||
|
|
||||||
|
/************ FOLLOWING-CONFIG MODAL **********/ |
||||||
|
|
||||||
|
.prompt-wrapper.following-config-modal |
||||||
|
margin-top: -100px |
||||||
|
h2 |
||||||
|
text-transform: none |
||||||
|
display: inline-block!important |
||||||
|
font-size: 1rem |
||||||
|
font-weight: 400 |
||||||
|
padding: $space |
||||||
|
span |
||||||
|
display: inline-block!important |
||||||
|
b |
||||||
|
font-weight: 400 |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
/************ RETWIST POSTS MODAL **********/ |
||||||
|
|
||||||
|
.prompt-wrapper.reTwist |
||||||
|
&.prompt-wrapper |
||||||
|
margin-top: -150px |
||||||
|
|
||||||
|
.post-expand, .post-interactions |
||||||
|
display: none |
||||||
|
.post-info-time |
||||||
|
position: static |
||||||
|
float: right |
||||||
|
|
||||||
|
|
||||||
|
/********* REPLY POSTS MODAL***************/ |
||||||
|
|
||||||
|
.prompt-wrapper.reply |
||||||
|
&.prompt-wrapper |
||||||
|
margin-top: -110px |
||||||
|
.post-expand, .post-interactions |
||||||
|
display: none |
||||||
|
.post-area |
||||||
|
padding-bottom: 6px |
@ -0,0 +1,103 @@ |
|||||||
|
|
||||||
|
@media (max-width: $site-width) |
||||||
|
.right |
||||||
|
display: none |
||||||
|
.userMenu |
||||||
|
ul |
||||||
|
padding: 0 |
||||||
|
.postboard |
||||||
|
position: absolute |
||||||
|
left: $leftWidth |
||||||
|
right: 20px |
||||||
|
width: auto!important |
||||||
|
|
||||||
|
|
||||||
|
.modal-wrapper |
||||||
|
width: 85% |
||||||
|
.postboard |
||||||
|
width: $postboardWidth |
||||||
|
float: left |
||||||
|
position: relative |
||||||
|
left: 0 |
||||||
|
|
||||||
|
@media (max-width: 700px) |
||||||
|
|
||||||
|
.network |
||||||
|
&.singleBlock |
||||||
|
margin-top: $menu-height |
||||||
|
.module |
||||||
|
width: 100% |
||||||
|
margin: 0 !important |
||||||
|
float: none |
||||||
|
|
||||||
|
.userMenu |
||||||
|
> ul |
||||||
|
background-image: none |
||||||
|
|
||||||
|
|
||||||
|
.userMenu li.userMenu-search > input |
||||||
|
width: 150px |
||||||
|
|
||||||
|
.prompt-wrapper |
||||||
|
width: 98% |
||||||
|
left: 1% |
||||||
|
margin-left: 0 |
||||||
|
|
||||||
|
.dashboard |
||||||
|
&.left |
||||||
|
top: 0 |
||||||
|
margin-top: 0 |
||||||
|
min-height: $menu-height + 70px |
||||||
|
width: 100% |
||||||
|
> .module |
||||||
|
top: $menu-height |
||||||
|
float: none |
||||||
|
width: 100% |
||||||
|
position: fixed |
||||||
|
z-index: 10 |
||||||
|
|
||||||
|
.mini-profile-info |
||||||
|
display: none |
||||||
|
.mini-profile-indicators li |
||||||
|
width: 20% |
||||||
|
margin: 0 |
||||||
|
float: left |
||||||
|
|
||||||
|
&.userMenu-user, &.userMenu-collapsePosts |
||||||
|
display: none |
||||||
|
|
||||||
|
.who-follow |
||||||
|
display: none |
||||||
|
.promoted-posts-only |
||||||
|
display: none |
||||||
|
|
||||||
|
.wrapper |
||||||
|
padding-top: 0 |
||||||
|
.postboard |
||||||
|
width: 100% |
||||||
|
float: none |
||||||
|
left: 0 |
||||||
|
z-index: 5 |
||||||
|
top: 0 |
||||||
|
position: relative |
||||||
|
margin-top: 0 |
||||||
|
.modal-wrapper & |
||||||
|
top: auto |
||||||
|
#postboard-top |
||||||
|
display: none |
||||||
|
.modal-wrapper |
||||||
|
width: 90% |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@media (max-width: 360px) |
||||||
|
|
||||||
|
|
||||||
|
.userMenu li.userMenu-search > input |
||||||
|
width: 100px |
||||||
|
.dialog-modal |
||||||
|
right: -50px |
||||||
|
width: 290px |
@ -0,0 +1,72 @@ |
|||||||
|
.options |
||||||
|
position: relative |
||||||
|
|
||||||
|
input |
||||||
|
display: inline-block |
||||||
|
|
||||||
|
button, input, select |
||||||
|
font-size: 13px |
||||||
|
|
||||||
|
label |
||||||
|
cursor: pointer |
||||||
|
|
||||||
|
.label-h |
||||||
|
font-weight: 700 |
||||||
|
|
||||||
|
input[type=radio] |
||||||
|
display: none!important |
||||||
|
visibility: hidden |
||||||
|
opacity: 0 |
||||||
|
|
||||||
|
input[type='checkbox'] |
||||||
|
cursor: pointer |
||||||
|
vertical-align: sub |
||||||
|
|
||||||
|
input[type='range'] |
||||||
|
cursor: pointer |
||||||
|
vertical-align: -16px |
||||||
|
|
||||||
|
.container |
||||||
|
margin: 5px 0px 5px 12px |
||||||
|
|
||||||
|
.tab-content |
||||||
|
background: $bloc-background-color |
||||||
|
position: relative |
||||||
|
padding: 20px |
||||||
|
@extend .clear-fix |
||||||
|
> div |
||||||
|
position: absolute |
||||||
|
top: 0 |
||||||
|
left: 0 |
||||||
|
height: auto |
||||||
|
width: 100% |
||||||
|
z-index: -1 |
||||||
|
opacity: 0 |
||||||
|
visibility: hidden |
||||||
|
input |
||||||
|
&#tab_language:checked ~ .tab-content .language, |
||||||
|
&#t-2:checked ~ .tab-content .theme, |
||||||
|
&#t-3:checked ~ .tab-content .notifications, |
||||||
|
&#t-4:checked ~ .tab-content .keys, |
||||||
|
&#t-5:checked ~ .tab-content .appearance, |
||||||
|
&#t-6:checked ~ .tab-content .users, |
||||||
|
&#t-7:checked ~ .tab-content .webtorrent, |
||||||
|
&#t-8:checked ~ .tab-content .DMs |
||||||
|
position: relative |
||||||
|
z-index: 10 |
||||||
|
opacity: 1 |
||||||
|
visibility: visible |
||||||
|
|
||||||
|
label.tabs |
||||||
|
&:hover |
||||||
|
color: $main-color-dark |
||||||
|
text-align: center |
||||||
|
width: auto |
||||||
|
display: inline-block!important |
||||||
|
margin: 0 5px 0 0 |
||||||
|
padding: 5px 15px |
||||||
|
color: $main-color-light |
||||||
|
|
||||||
|
input:checked + label.tabs |
||||||
|
background: $bloc-background-color |
||||||
|
color: $main-color-dark |
@ -0,0 +1,51 @@ |
|||||||
|
/* Wrapper and blocks */ |
||||||
|
.wrapper |
||||||
|
width: $site-width |
||||||
|
max-width: 100% |
||||||
|
margin: auto |
||||||
|
padding-top: $menu-height + $gut |
||||||
|
position: relative |
||||||
|
z-index: 1 |
||||||
|
@extend .clear-fix |
||||||
|
.dashboard |
||||||
|
&.left |
||||||
|
top: $menu-height |
||||||
|
float: left |
||||||
|
width: $leftWidth |
||||||
|
min-height: 700px |
||||||
|
> .module |
||||||
|
width: $miniProfileWidth |
||||||
|
position: fixed |
||||||
|
top: $menu-height + $gut |
||||||
|
z-index: 2000 |
||||||
|
|
||||||
|
&.right |
||||||
|
float: left |
||||||
|
top: $menu-height |
||||||
|
overflow: hidden |
||||||
|
width: $rightWidth |
||||||
|
padding-left: $gut |
||||||
|
padding-right: 3px |
||||||
|
> .module |
||||||
|
width: 100% |
||||||
|
margin-bottom: 20px |
||||||
|
background: $bloc-light-color |
||||||
|
width: 100% |
||||||
|
min-height: $mini-usr-img |
||||||
|
+box-shadow(1px 2px 2px rgba(#111, 0.1)) |
||||||
|
+border-radius(3px) |
||||||
|
@extend .clear-fix |
||||||
|
overflow: hidden |
||||||
|
h3 |
||||||
|
float: left |
||||||
|
padding: 10px |
||||||
|
h4 |
||||||
|
clear: left |
||||||
|
padding: 10px 10px 5px 10px |
||||||
|
font-size: 90% |
||||||
|
small |
||||||
|
display: none |
||||||
|
ol |
||||||
|
@extend .clear-fix |
||||||
|
clear: both |
||||||
|
position: relative |
@ -0,0 +1,86 @@ |
|||||||
|
/********** LOGIN AND NETWORK PAGES *******/ |
||||||
|
.network |
||||||
|
&.singleBlock |
||||||
|
@extend .clear-fix |
||||||
|
|
||||||
|
|
||||||
|
ul |
||||||
|
line-height: 2rem |
||||||
|
padding: 1rem 2rem |
||||||
|
|
||||||
|
|
||||||
|
.module |
||||||
|
|
||||||
|
background: $bloc-background-color |
||||||
|
+box-shadow(0 1px 1px rgba(#555, .1)) |
||||||
|
margin-bottom: 50px |
||||||
|
width: 49% |
||||||
|
float: left |
||||||
|
margin-right: 1% |
||||||
|
@extend .clear-fix |
||||||
|
&:last-child |
||||||
|
margin-right: 0 |
||||||
|
|
||||||
|
&:last-child |
||||||
|
h2 |
||||||
|
+background-image(linear-gradient(to right , $color-green, #5E80A2) ) |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.spam-msg |
||||||
|
resize: none |
||||||
|
width: 100% |
||||||
|
display: block |
||||||
|
padding: $space |
||||||
|
height: 180px |
||||||
|
border: solid 1px rgba(0, 0, 0, 0.1) |
||||||
|
position: relative |
||||||
|
margin: $space 0 |
||||||
|
font-family: $main-font-family |
||||||
|
|
||||||
|
|
||||||
|
.highlight |
||||||
|
font-size: 1.2rem |
||||||
|
display: block |
||||||
|
margin: $space 0 |
||||||
|
|
||||||
|
span.connection-status |
||||||
|
font-weight: 500 |
||||||
|
&:before |
||||||
|
content: "" |
||||||
|
display: inline-block |
||||||
|
height: .8em |
||||||
|
width: .8em |
||||||
|
margin-right: .8em |
||||||
|
background: $color-red |
||||||
|
color: white |
||||||
|
&.connected:before |
||||||
|
background: $main-color-color |
||||||
|
|
||||||
|
.post-area-extras |
||||||
|
margin-right: 20px |
||||||
|
|
||||||
|
.connections span, .known-peers, .dht-nodes, .blocks, .last-block-time, .mining-difficulty |
||||||
|
color: $main-color-color |
||||||
|
font-weight: 700 |
||||||
|
font-family: Arial |
||||||
|
font-size: 95% |
||||||
|
h2 |
||||||
|
font-weight: 400 |
||||||
|
+background-image(linear-gradient(to left , $color-green, #5E80A2) ) |
||||||
|
padding: 1rem 2rem |
||||||
|
color: white |
||||||
|
|
||||||
|
|
||||||
|
h3 |
||||||
|
font-weight: 600 |
||||||
|
margin-top: 2*$space |
||||||
|
padding: 0 1.5rem |
||||||
|
+box-sizing(content-box) |
||||||
|
&:after |
||||||
|
display: block |
||||||
|
content: '' |
||||||
|
height: 1px |
||||||
|
width: 100% |
||||||
|
background: rgba(#5F81A1,.5) |
||||||
|
margin-top: $space |
@ -0,0 +1,752 @@ |
|||||||
|
@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/_account' |
||||||
|
@import 'layout/_login' |
||||||
|
@import 'layout/_profile' |
||||||
|
@import 'layout/_postboard' |
||||||
|
@import 'layout/_following' |
||||||
|
|
||||||
|
// pages |
||||||
|
|
||||||
|
@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' |