51 changed files with 8812 additions and 0 deletions
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 326 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
Load Diff
|
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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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 @@
@@ -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' |
||||
Loading…
Reference in new issue