mirror of
https://github.com/twisterarmy/theme_nin.git
synced 2025-03-13 05:51:12 +00:00
Lot of fixes + templating
This commit is contained in:
myleneb
parent
d70646b533
commit
997b629fba
1015
css/style.css
1015
css/style.css
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 3.2 KiB After Width: | Height: | Size: 3.2 KiB |
@ -1,43 +1,18 @@
|
||||
|
||||
|
||||
|
||||
|
||||
$(window).resize(function()
|
||||
{
|
||||
$('.module.toptrends').detach().appendTo($('.dashboard.right'));
|
||||
$('.module.who-to-follow').detach().appendTo($('.dashboard.right'));
|
||||
$('.module.twistday-reminder').detach().appendTo($('.dashboard.right'));
|
||||
reAppendModules();
|
||||
});
|
||||
|
||||
|
||||
|
||||
$(document).ready(function()
|
||||
{
|
||||
$('.module.toptrends').detach().appendTo($('.dashboard.right'));
|
||||
$('.module.who-to-follow').detach().appendTo($('.dashboard.right'));
|
||||
$('.module.twistday-reminder').detach().appendTo($('.dashboard.right'));
|
||||
var windowHeight = $(window).height();
|
||||
|
||||
reOrganizeTemplates()
|
||||
|
||||
$('#postboard-top textarea').on('blur',function(){$('#postboard-top').removeClass('on');});
|
||||
$('#postboard-top textarea').on('focus',function(){$('#postboard-top').addClass('on');});
|
||||
|
||||
|
||||
|
||||
var windowHeight = $(window).height();
|
||||
$('.modal-close').html('');
|
||||
$('.mini-profile .open-following-page').parent('li').detach().appendTo($('.mini-profile-indicators'));
|
||||
|
||||
$('.modal-back').html('');
|
||||
$('.twister-user-remove').html('');
|
||||
$('.profile-card-main').attr('style', '');
|
||||
$('.userMenu-search-profiles button').html('+').attr('title',polyglot.t('Follow'));
|
||||
$('.mini-profile-actions span').html('');
|
||||
$('.promoted-posts-only').detach().appendTo($('.left .mini-profile'));
|
||||
$('.mini-profile-indicators').detach().insertAfter($('.dashboard.left .profile-data'));
|
||||
$('.post-context').each(function(){
|
||||
$(this).prependTo($(this).parent());
|
||||
});
|
||||
|
||||
|
||||
$( '.userMenu-home.current a' ).on( 'click', function() {
|
||||
$('html, body').animate({scrollTop:0},300);
|
||||
return false
|
||||
@ -45,9 +20,8 @@ $(document).ready(function()
|
||||
|
||||
|
||||
|
||||
|
||||
$( ".promoted-posts-only").click(function() {
|
||||
// modify the way promoted posts are shown
|
||||
$( ".promoted-posts-only").click(function() {
|
||||
//active promoted posts tab
|
||||
$(this).children('.promoted-posts').addClass(promotedPostsOnly ? "active" : "disabled");
|
||||
$(this).children('.normal-posts').addClass(promotedPostsOnly ? "disabled" : "active");
|
||||
@ -72,16 +46,58 @@ $(document).ready(function()
|
||||
$(document).ready(localizeLabels);
|
||||
|
||||
|
||||
|
||||
|
||||
$(window).scroll(function(){
|
||||
window_scrollY = window.pageYOffset; // declare variable here for screen not to scroll when closing modals
|
||||
});
|
||||
/*
|
||||
$(window).scroll(function(){
|
||||
window_scrollY = window.pageYOffset; // declare variable here for screen not to scroll when closing modals
|
||||
|
||||
if ($(document).scrollTop() >= 142) {
|
||||
if (this.css('position') === 'relative')
|
||||
this.addClass('onTop');
|
||||
}else if (this.css('position') === 'fixed')
|
||||
this.removeClass('onTop');
|
||||
}).bind($('#postboard-top')));*/
|
||||
}
|
||||
);
|
||||
|
||||
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', '');
|
||||
$('.userMenu-search-profiles button').html('+').attr('title',polyglot.t('Follow'));
|
||||
$('.mini-profile-actions span').html('');
|
||||
|
||||
//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'));
|
||||
$('.post-context').each(function(){ $(this).prependTo($(this).parent()); }); // puts context on top of post
|
||||
|
||||
//loader
|
||||
newLoader()
|
||||
}
|
||||
|
||||
function reAppendModules() { // avoid w1200 things
|
||||
$('.module.toptrends').detach().appendTo($('.dashboard.right'));
|
||||
$('.module.who-to-follow').detach().appendTo($('.dashboard.right'));
|
||||
$('.module.twistday-reminder').detach().appendTo($('.dashboard.right'));
|
||||
}
|
||||
|
||||
|
||||
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[for=tab_language]").text(polyglot.t("Language"));
|
||||
@ -93,8 +109,8 @@ function localizeLabels() {
|
||||
}
|
||||
|
||||
function openModal(modal) {
|
||||
window_scrollY = window.pageYOffset;
|
||||
|
||||
|
||||
var windowHeight = $(window).height();
|
||||
if (!modal.classBase)
|
||||
modal.classBase = '.modal-wrapper';
|
||||
|
||||
@ -118,7 +134,6 @@ function openModal(modal) {
|
||||
if (modal.classBase === '.modal-wrapper') {
|
||||
modal.content.outerHeight(modal.self.height() - modal.self.find('.modal-header').outerHeight());
|
||||
|
||||
var windowHeight = $(window).height();
|
||||
if (modal.self.outerHeight() > windowHeight) {
|
||||
modal.content.outerHeight(modal.content.outerHeight() - modal.self.outerHeight() + windowHeight);
|
||||
modal.self.outerHeight(windowHeight);
|
||||
@ -129,3 +144,4 @@ function openModal(modal) {
|
||||
|
||||
return modal;
|
||||
}
|
||||
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
outline: none!important
|
||||
+box-sizing(border-box)
|
||||
list-style: none
|
||||
color: $defaut-font-color
|
||||
|
||||
|
||||
|
||||
html, body
|
||||
@ -16,6 +16,7 @@ html
|
||||
font-size: $global-font-size
|
||||
background-color: $main-background-color
|
||||
//+background-image(linear-gradient(to top right, #fff, $main-background-color, #fff) )
|
||||
+background-image(radial-gradient(50% 100% , $main-background-color,$main-background-color,$main-background-color, darken($main-background-color, 7%)) )
|
||||
background-attachment: fixed
|
||||
body
|
||||
font-size: $main-font-size
|
||||
@ -23,15 +24,15 @@ body
|
||||
font-family : $main-font-family
|
||||
font-weight: 400
|
||||
overflow-y: scroll
|
||||
|
||||
|
||||
|
||||
a
|
||||
|
||||
a
|
||||
text-decoration: none
|
||||
color: $main-color-color
|
||||
&:hover, &:active
|
||||
color: $main-color-color
|
||||
text-decoration: none
|
||||
text-decoration: underline
|
||||
i
|
||||
text-decoration: underline
|
||||
font-style: normal
|
||||
@ -43,12 +44,10 @@ strong, b
|
||||
font-weight: 600
|
||||
|
||||
img
|
||||
background: $bloc-light-color
|
||||
background: $bloc-background-color
|
||||
|
||||
h1
|
||||
font-size: 1.1em
|
||||
text-transform: uppercase
|
||||
letter-spacing: 0.07em
|
||||
font-weight: 700
|
||||
line-height: 1.1em
|
||||
|
||||
|
||||
@ -41,12 +41,12 @@ button, a.button
|
||||
color: #666
|
||||
+box-shadow(1px 1px 0 rgba(#444, .3))
|
||||
&.color-1
|
||||
background: #5E80A2
|
||||
border-color: darken(#5E80A2, 5%)
|
||||
background: $main-color-color
|
||||
border-color: darken($main-color-color, 5%)
|
||||
color: white
|
||||
font-weight: 500
|
||||
&:hover
|
||||
border-color: darken(#5E80A2, 15%)
|
||||
border-color: darken($main-color-color, 22%)
|
||||
&.color-2
|
||||
background: #64676C
|
||||
border-color: darken(#64676C, 5%)
|
||||
|
||||
@ -1,11 +1,19 @@
|
||||
//these are the main variables used in the sass file
|
||||
|
||||
$site-width : 1200px
|
||||
$gut : 20
|
||||
$postboardWidth : 700px
|
||||
$miniProfileWidth : $site-width/10
|
||||
$leftWidth : $miniProfileWidth + $gut
|
||||
$rightWidth : $site-width - ($leftWidth + $postboardWidth)
|
||||
|
||||
$mini-usr-img : 42px
|
||||
$usr-img : 64px
|
||||
|
||||
|
||||
$site-width : 100%
|
||||
$gut-width : 2.5%
|
||||
$space : 1rem
|
||||
|
||||
|
||||
|
||||
// colors
|
||||
|
||||
$light-grey: #C3C3C3
|
||||
@ -18,10 +26,9 @@ $dark-grey : #444
|
||||
$main-color-light: #aaa
|
||||
$main-color-dark: #222
|
||||
$main-color-color: $color-green
|
||||
$main-background-color: #EBEBEB
|
||||
$main-background-color: #E2E1DD
|
||||
$bloc-light-color : #FDFCFA
|
||||
|
||||
$bloc-background-color: #EBEBEB
|
||||
$bloc-background-color: #F3F2F0
|
||||
|
||||
$defaut-font-color: $dark-grey
|
||||
|
||||
@ -36,8 +43,3 @@ $main-font-family: "Roboto", sans-serif
|
||||
$symbol-font-family: "fontello"
|
||||
$serif-font-family: "Droid", serif
|
||||
|
||||
|
||||
/* usefull vars */
|
||||
|
||||
$mini-usr-img : 40px
|
||||
$usr-img : 64px
|
||||
@ -28,7 +28,6 @@
|
||||
.modal-content
|
||||
+box-sizing(border-box)
|
||||
width: 100%
|
||||
background: #f0f0f0
|
||||
|
||||
.post-photo
|
||||
width: $mini-usr-img
|
||||
|
||||
@ -1,24 +1,25 @@
|
||||
// vars for the menu
|
||||
|
||||
$menu-height : 50px
|
||||
$menu-height : 42px
|
||||
$menu-font-color: white
|
||||
|
||||
$menuBgColor : #67686C
|
||||
.userMenu
|
||||
width: 100%
|
||||
position: fixed
|
||||
height: $menu-height
|
||||
left: 0
|
||||
margin: 0
|
||||
background-color: #64676C
|
||||
//+background-image(linear-gradient(to left , $color-green, $color-green, #5E80A2) )
|
||||
|
||||
//background-color: #FFAF1C
|
||||
//+background-image(linear-gradient(to right , $color-green, #5E80A2) )
|
||||
background-color: $menuBgColor
|
||||
z-index: 2
|
||||
> ul
|
||||
@extend .clear-fix
|
||||
+box-sizing(border-box)
|
||||
width: 100%
|
||||
padding: 0 30% 0 15%
|
||||
background: image-url("logo.png") no-repeat 50% 50%
|
||||
max-width: 100%
|
||||
width: $site-width
|
||||
margin: auto
|
||||
background: image-url("logo.png") no-repeat 50% 50%
|
||||
background-size: 20px
|
||||
li
|
||||
float: left
|
||||
@ -30,17 +31,17 @@ $menu-font-color: white
|
||||
padding: 0 .5em
|
||||
display: inline-block
|
||||
color: rgba($menu-font-color, 0.7)!important
|
||||
font-size: 1em
|
||||
font-size: 1.1em
|
||||
position: relative
|
||||
font-weight: 500
|
||||
font-weight: 400
|
||||
+box-sizing(border-box)
|
||||
&:hover
|
||||
color: $menu-font-color!important
|
||||
> a span
|
||||
color: rgba($menu-font-color, 0.7)!important
|
||||
&.current a, &.current a span
|
||||
text-decoration: none
|
||||
|
||||
|
||||
&.current a
|
||||
color: $menu-font-color!important
|
||||
//+text-shadow(1px 1px 0 rgba(#000,.2))
|
||||
|
||||
|
||||
/* Menu specific entries */
|
||||
@ -55,19 +56,19 @@ $menu-font-color: white
|
||||
position: absolute
|
||||
text-align: center
|
||||
display: none
|
||||
top: 6px
|
||||
right: -6px
|
||||
top: 4px
|
||||
right: -7px
|
||||
background: $main-color-color
|
||||
color: #fff
|
||||
width: 15px
|
||||
height: 15px
|
||||
line-height: 15px
|
||||
font-size: 10px
|
||||
padding: 3px
|
||||
padding: 1px
|
||||
font-weight: 900
|
||||
+border-radius(50%)
|
||||
letter-spacing: -0.01em
|
||||
+box-sizing(content-box)
|
||||
+text-shadow(1px 1px 0 rgba(#000, .3))
|
||||
color: white
|
||||
&.show
|
||||
display: block
|
||||
|
||||
@ -82,13 +83,12 @@ $menu-font-color: white
|
||||
+ a
|
||||
color: $main-color-dark
|
||||
&.userMenu-search
|
||||
margin: 3px
|
||||
|
||||
> input
|
||||
border: 1px solid $main-color-light
|
||||
line-height: 12px
|
||||
border: 1px solid #dedede
|
||||
line-height: $menu-height/2
|
||||
font-size: 12px
|
||||
padding: 7px
|
||||
padding: 0 7px
|
||||
background: white
|
||||
&:focus
|
||||
border-color: $main-color-dark
|
||||
&.userMenu-config > a
|
||||
|
||||
@ -1,17 +1,20 @@
|
||||
|
||||
|
||||
/*********** POPUP MODAL **************/
|
||||
|
||||
|
||||
// vars modal
|
||||
|
||||
$header-modal-height : $menu-height
|
||||
|
||||
|
||||
// style
|
||||
|
||||
.modal-blackout
|
||||
display: none
|
||||
|
||||
|
||||
.modal-wrapper
|
||||
background: $bloc-background-color
|
||||
z-index: 3000
|
||||
width: 30%
|
||||
z-index: 4
|
||||
width: 34%
|
||||
position: fixed
|
||||
+box-sizing(border-box)
|
||||
@extend .box-shadow
|
||||
@ -19,37 +22,116 @@ $header-modal-height : $menu-height
|
||||
right: 0
|
||||
bottom: 0
|
||||
overflow: hidden
|
||||
+box-shadow(0 8px 13px rgba(#111, 0.2))
|
||||
.postboard
|
||||
border: none
|
||||
padding: 0
|
||||
+box-shadow(-8px 0 13px rgba(#111, 0.2))
|
||||
|
||||
.post-area-new
|
||||
padding: 10px
|
||||
// NEW USER MODAL //
|
||||
|
||||
.modal-blackout
|
||||
background: rgba(0, 0, 0, 0)
|
||||
z-index: -1
|
||||
position: fixed
|
||||
left: 0
|
||||
top: 0
|
||||
width: 0
|
||||
height: 0
|
||||
&.new-user
|
||||
|
||||
.modal-content
|
||||
@extend .clear-fix
|
||||
overflow: hidden
|
||||
overflow-y: auto
|
||||
.postboard-news
|
||||
position: fixed
|
||||
display: block
|
||||
right: 2px
|
||||
top: $header-modal-height +2
|
||||
z-index: 2000
|
||||
@extend .color-1
|
||||
h2 span
|
||||
display: none
|
||||
background: $bloc-background-color
|
||||
.modal-content
|
||||
padding: 25px
|
||||
.modal-close
|
||||
display: none
|
||||
.text
|
||||
margin: 0 0 15px 0
|
||||
.emphasis
|
||||
text-align: center
|
||||
.secret-key
|
||||
display: block
|
||||
margin-top: 8px
|
||||
color: rgba(0.5, 0, 0, 1)
|
||||
font-weight: bold
|
||||
font-size: 110%
|
||||
|
||||
|
||||
// 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
|
||||
@extend .small
|
||||
.bio
|
||||
color: rgba(0, 0, 0, 0.6)
|
||||
font-style: italic
|
||||
padding: .25rem 0
|
||||
|
||||
|
||||
.modal-content
|
||||
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
|
||||
@extend .color-1
|
||||
|
||||
|
||||
|
||||
@ -57,7 +139,7 @@ $header-modal-height : $menu-height
|
||||
|
||||
.modal-header
|
||||
position: relative
|
||||
background: darken(#64676C,12%)
|
||||
background: darken($main-color-dark,.3)
|
||||
height: $header-modal-height
|
||||
+box-sizing(border-box)
|
||||
@extend .clear-fix
|
||||
@ -99,190 +181,26 @@ $header-modal-height : $menu-height
|
||||
|
||||
|
||||
|
||||
/* MODAL */
|
||||
.modal-content
|
||||
/* Composants */
|
||||
|
||||
.twister-user
|
||||
position: relative
|
||||
box-sizing: border-box
|
||||
background: $bloc-light-color
|
||||
@extend .clear-fix
|
||||
border-top: 1px solid $main-background-color
|
||||
width: 100%
|
||||
.postboard
|
||||
padding: 0
|
||||
clear: none!important
|
||||
position: relative
|
||||
width: 100%
|
||||
margin: auto
|
||||
background: $bloc-background-color
|
||||
|
||||
h2
|
||||
display: block
|
||||
|
||||
|
||||
|
||||
min-height: auto
|
||||
padding: 7px
|
||||
clear: left
|
||||
|
||||
|
||||
/*********** POPUP PROMPT *************/
|
||||
|
||||
.prompt-wrapper
|
||||
background: $bloc-light-color
|
||||
z-index: 5
|
||||
position: fixed
|
||||
top: 50%
|
||||
left: 50%
|
||||
width: 600px
|
||||
margin-left: -300px
|
||||
+box-shadow(0 8px 33px rgba(#000, .3))
|
||||
.modal-buttons
|
||||
padding: 10px
|
||||
text-align: right
|
||||
.modal-content
|
||||
background: $bloc-light-color
|
||||
padding: 10px 10px 30px 10px
|
||||
text-align: center
|
||||
|
||||
|
||||
/************ FOLLOWING-CONFIG MODAL **********/
|
||||
|
||||
.prompt-wrapper.following-config-modal
|
||||
margin-top: -100px
|
||||
|
||||
.modal-buttons
|
||||
display: none
|
||||
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: -110px
|
||||
.modal-content
|
||||
padding: 20px 15px
|
||||
|
||||
.post-expand, .post-interactions
|
||||
display: none
|
||||
.post-info-time
|
||||
position: static
|
||||
float: right
|
||||
.post-text
|
||||
margin-top: 10px
|
||||
margin-bottom: 10px
|
||||
|
||||
/********* REPLY POSTS MODAL***************/
|
||||
|
||||
.prompt-wrapper.reply
|
||||
&.prompt-wrapper
|
||||
margin-top: -110px
|
||||
.modal-buttons, .post-expand, .post-interactions
|
||||
display: none
|
||||
.post-area
|
||||
padding-bottom: 6px
|
||||
@import '_prompt'
|
||||
|
||||
/********* DIRECT MESSAGES MODAL ***********/
|
||||
|
||||
@import '_dm'
|
||||
|
||||
|
||||
|
||||
/********* NEW USER MODAL**************/
|
||||
|
||||
.modal-wrapper.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: 110%
|
||||
|
||||
/******** HASHTAG MODAL***********/
|
||||
|
||||
.modal-wrapper.hashtag-modal
|
||||
|
||||
.postboard
|
||||
padding: 0
|
||||
|
||||
/****** CONVERSATION MODAL***********/
|
||||
|
||||
.modal-wrapper.conversation-modal
|
||||
|
||||
.postboard
|
||||
padding: 0
|
||||
|
||||
/****** FOLLOWING MODAL*******/
|
||||
|
||||
|
||||
.modal-wrapper.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
|
||||
.mini-profile-photo
|
||||
width: $mini-usr-img
|
||||
line-height: 0
|
||||
margin: 0 $space 0 0
|
||||
float: left
|
||||
.mini-screen-name
|
||||
display: none
|
||||
|
||||
|
||||
|
||||
|
||||
/******* WHO TO FOLLOW MODAL*******/
|
||||
|
||||
.modal-wrapper.who-to-follow-modal
|
||||
|
||||
.open-profile-modal
|
||||
&:hover
|
||||
text-decoration: none
|
||||
|
||||
a.twister-user-name
|
||||
color: $defaut-font-color
|
||||
span
|
||||
padding-bottom: .5rem
|
||||
font-size: 1rem
|
||||
line-height: 1rem
|
||||
color: $defaut-font-color
|
||||
font-weight: 500
|
||||
opacity: 1
|
||||
letter-spacing: 0
|
||||
.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
|
||||
@extend .small
|
||||
.bio
|
||||
color: rgba(0, 0, 0, 0.6)
|
||||
font-style: italic
|
||||
padding-bottom: .5rem
|
||||
|
||||
@ -1,79 +1,127 @@
|
||||
/************* POST BOARD *************/
|
||||
/************* TOP TEXTAREA *************/
|
||||
#postboard-top
|
||||
position: relative
|
||||
@extend .clear-fix
|
||||
margin-bottom: 10px
|
||||
transition: height .3s linear
|
||||
padding: 10px
|
||||
background: white
|
||||
overflow: hidden
|
||||
background: $bloc-light-color
|
||||
@extend .on
|
||||
+transition-property( top)
|
||||
+transition-duration(.1s)
|
||||
+transition-timing-function(ease-out)
|
||||
top: 0
|
||||
&.on
|
||||
+box-shadow(1px 2px 2px rgba(#111, 0.1))
|
||||
z-index: 120
|
||||
|
||||
&.fixed
|
||||
position: fixed
|
||||
width: $rightWidth
|
||||
top: $menu-height
|
||||
@extend .on
|
||||
.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
|
||||
|
||||
|
||||
// vars for postboard
|
||||
|
||||
/************* POSTBOARD *************/
|
||||
|
||||
|
||||
.postboard
|
||||
width: 55%
|
||||
margin-left: 15%
|
||||
padding: 7px 20px
|
||||
h2
|
||||
display: none
|
||||
.postboard-posts
|
||||
position: relative
|
||||
z-index: 1
|
||||
clear: both
|
||||
|
||||
.postboard-news
|
||||
width: $postboardWidth
|
||||
float: left
|
||||
|
||||
h2, .postboard-news
|
||||
display: none
|
||||
|
||||
.postboard-posts
|
||||
position: relative
|
||||
z-index: 1
|
||||
clear: both
|
||||
|
||||
|
||||
.post
|
||||
background: $bloc-light-color
|
||||
|
||||
position: relative
|
||||
margin-bottom: 1px
|
||||
@extend .box-shadow
|
||||
+transition-property(margin)
|
||||
+transition-duration(.5s)
|
||||
+transition-timing-function(ease-out)
|
||||
.post, .original.post, .post.open
|
||||
position: relative
|
||||
+transition-timing-function(ease-out)
|
||||
color: lighten($defaut-font-color, 10%)
|
||||
cursor: pointer
|
||||
&:hover
|
||||
color: #000
|
||||
|
||||
.show-more
|
||||
display: inline-block
|
||||
float: right
|
||||
font-size: 12px
|
||||
color: lighten($dark-grey,30%)
|
||||
@extend .extend-icon
|
||||
@extend .icon-chat
|
||||
&:hover
|
||||
color: lighten($dark-grey,5%)
|
||||
.post-expand
|
||||
color: lighten($dark-grey,30%)
|
||||
cursor: pointer
|
||||
font-size: 12px
|
||||
position: absolute
|
||||
left: 10px
|
||||
bottom: 10px
|
||||
&:hover
|
||||
color: lighten($dark-grey,5%)
|
||||
.post-data
|
||||
padding: 10px
|
||||
background: $bloc-light-color
|
||||
|
||||
|
||||
.module.open
|
||||
.post
|
||||
color: darken($defaut-font-color, 15%)
|
||||
|
||||
.post:hover
|
||||
color: darken($defaut-font-color, 15%)
|
||||
|
||||
.post-data
|
||||
padding: $space
|
||||
|
||||
|
||||
.post.open
|
||||
.original, .related
|
||||
margin-bottom: 1px
|
||||
|
||||
/*********** EVERYTHING SPECIFIC TO OPEN POSTS **************/
|
||||
|
||||
.postboard-posts > .post
|
||||
+border-radius(2px)
|
||||
&.open
|
||||
margin-top: $space
|
||||
margin-bottom: $space
|
||||
+border-radius(2px)
|
||||
|
||||
&:after
|
||||
content: ""
|
||||
position: absolute
|
||||
right: 0
|
||||
top: 0
|
||||
width: 0
|
||||
height: 100%
|
||||
transition: all .2s linear
|
||||
&.open:after
|
||||
width: 5px
|
||||
|
||||
|
||||
.post:hover
|
||||
cursor: pointer
|
||||
|
||||
|
||||
.open
|
||||
background: none!important
|
||||
> .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
|
||||
@ -92,11 +140,9 @@
|
||||
display: inline-block
|
||||
float: left
|
||||
margin-left: 10px
|
||||
|
||||
|
||||
.post-info-name:hover
|
||||
text-decoration: none
|
||||
color: black
|
||||
&:hover
|
||||
text-decoration: none
|
||||
color: black
|
||||
|
||||
.post-info-tag
|
||||
font-size: 12px
|
||||
@ -132,24 +178,21 @@
|
||||
span
|
||||
@extend .icon-twistagain
|
||||
@extend .extend-icon
|
||||
&:before
|
||||
display: block
|
||||
float: left
|
||||
background: $main-color-color
|
||||
text-align: center
|
||||
padding: 1px 2px 2px 2px
|
||||
line-height: 9px
|
||||
font-size: 9px
|
||||
+border-radius(3px)
|
||||
color: white
|
||||
margin-right: .4em
|
||||
&:before
|
||||
display: block
|
||||
float: left
|
||||
background: $main-color-color
|
||||
text-align: center
|
||||
padding: 1px 2px 2px 2px
|
||||
line-height: 9px
|
||||
font-size: 9px
|
||||
+border-radius(3px)
|
||||
color: white
|
||||
margin-right: .4em
|
||||
|
||||
.mini-screen-name
|
||||
font-size: 13px
|
||||
color: $dark-grey
|
||||
|
||||
.post-retransmited-icon
|
||||
display: none
|
||||
|
||||
// .post-interactions (reply, retransmit, fav)
|
||||
|
||||
.post-interactions
|
||||
margin: 10px 0 3px 0
|
||||
@ -161,79 +204,42 @@
|
||||
cursor: pointer
|
||||
font-size: 12px
|
||||
line-height: 12px
|
||||
|
||||
.post-expand
|
||||
color: lighten($dark-grey,30%)
|
||||
cursor: pointer
|
||||
font-size: 12px
|
||||
position: absolute
|
||||
left: 10px
|
||||
bottom: 10px
|
||||
&:hover
|
||||
color: lighten($dark-grey,5%)
|
||||
|
||||
.post-reply, .post-propagate, .post-favorite
|
||||
@extend .extend-icon
|
||||
padding-left: 10px
|
||||
display: none
|
||||
&:hover
|
||||
color: lighten($dark-grey,5%)
|
||||
|
||||
.post-reply
|
||||
@extend .icon-comment
|
||||
|
||||
.post-propagate
|
||||
@extend .icon-twistagain
|
||||
|
||||
.post-favorite
|
||||
display: none!important
|
||||
@extend .icon-star
|
||||
|
||||
.post
|
||||
.show-more
|
||||
display: inline-block
|
||||
float: right
|
||||
font-size: 12px
|
||||
color: lighten($dark-grey,30%)
|
||||
@extend .extend-icon
|
||||
@extend .icon-chat
|
||||
position: relative
|
||||
margin-left: 7px
|
||||
display: none
|
||||
&:hover
|
||||
color: lighten($dark-grey,5%)
|
||||
|
||||
&.post-reply
|
||||
@extend .icon-comment
|
||||
&.post-propagate
|
||||
@extend .icon-twistagain
|
||||
&.post-favorite
|
||||
display: none!important //maybe one day
|
||||
@extend .icon-star
|
||||
|
||||
.expanded-content.show-pic
|
||||
display: block
|
||||
|
||||
.expanded-post
|
||||
|
||||
.post-expand, .post-reply, .post-propagate, .post-favorite
|
||||
color: lighten($dark-grey,30%)
|
||||
&:hover
|
||||
color: lighten($dark-grey,5%)
|
||||
|
||||
.related .post-expand
|
||||
display: none
|
||||
margin: 0
|
||||
|
||||
|
||||
.post:hover, .original.open .post-interactions, .post:hover .original .post-interactions, .related.post:hover
|
||||
.post-reply, .post-propagate, .post-favorite
|
||||
display: inline-block
|
||||
.post:hover &
|
||||
.post-reply, .post-propagate //, .post-favorite maybe one day
|
||||
display: inline-block
|
||||
|
||||
.open .related
|
||||
.post-reply, .post-propagate, .post-favorite
|
||||
.post-reply,
|
||||
.post-propagate,
|
||||
.post-favorite
|
||||
display: none!important
|
||||
&:hover
|
||||
.post-reply, .post-propagate/*, .post-favorite*/
|
||||
.post-reply,
|
||||
.post-propagate/*, .post-favorite*/
|
||||
display: inline-block!important
|
||||
|
||||
|
||||
|
||||
.expanded-content
|
||||
display: none
|
||||
padding: 5px 5px 0 5px
|
||||
//display: none
|
||||
padding: 0
|
||||
@extend .clear-fix
|
||||
|
||||
textarea
|
||||
clear: left
|
||||
|
||||
.image-preview
|
||||
max-width: 100%
|
||||
@ -252,48 +258,64 @@
|
||||
li
|
||||
display: inline-block
|
||||
&.stat-count
|
||||
font-weight: 700
|
||||
font-size: 11px
|
||||
font-size: 12px
|
||||
float: left
|
||||
line-height: 20px
|
||||
color: llighten($dark-grey,30%)
|
||||
span:last-child
|
||||
padding-right: 5px
|
||||
@extend .extend-icon
|
||||
@extend .icon-twistagain
|
||||
&:before
|
||||
margin-right: 0
|
||||
span:last-child
|
||||
display: none
|
||||
|
||||
a
|
||||
position: relative
|
||||
text-decoration: none
|
||||
display: inline-block
|
||||
width: 20px
|
||||
height: 20px
|
||||
margin: 0 1px 0 0
|
||||
margin: 0 2px 0 0
|
||||
|
||||
img
|
||||
width: 20px
|
||||
height: 20px
|
||||
+border-radius(3px)
|
||||
|
||||
|
||||
.user-name-tooltip
|
||||
display: none
|
||||
position: absolute
|
||||
background: lighten($main-color-dark,3%)
|
||||
font-size: 12px
|
||||
white-space: nowrap
|
||||
padding: 3px 5px
|
||||
color: #fff
|
||||
top: -42px
|
||||
left: 0px
|
||||
&:after
|
||||
content: ""
|
||||
|
||||
|
||||
//what appears on top of .avatar-row img on hover
|
||||
|
||||
.avatar-row
|
||||
margin-left: 5px
|
||||
a:hover
|
||||
.user-name-tooltip
|
||||
display: block
|
||||
|
||||
.user-name-tooltip
|
||||
display: none
|
||||
position: absolute
|
||||
width: 0
|
||||
left: 4px
|
||||
bottom: -5px
|
||||
border-top: solid 5px lighten($main-color-dark,3%)
|
||||
border-left: solid 5px transparent
|
||||
border-right: solid 5px transparent
|
||||
background: $main-color-dark
|
||||
font-size: 11px
|
||||
line-height: 11px
|
||||
white-space: nowrap
|
||||
padding: 5px
|
||||
+border-radius(3px)
|
||||
color: #fff
|
||||
top: -32px
|
||||
left: -10px
|
||||
&:after
|
||||
content: ""
|
||||
position: absolute
|
||||
width: 0
|
||||
left: 13px
|
||||
bottom: -5px
|
||||
border-top: solid 5px $main-color-dark
|
||||
border-left: solid 5px transparent
|
||||
border-right: solid 5px transparent
|
||||
|
||||
.post-stats a:hover .user-name-tooltip
|
||||
display: inline-block
|
||||
// Posts replies get left border to show threads
|
||||
|
||||
.post-replies .sub-replies
|
||||
border-left: solid 18px $main-background-color
|
||||
border-left: solid 18px transparent
|
||||
|
||||
|
||||
@ -34,11 +34,7 @@ $modal-postboard-post-height: 100%
|
||||
height: $modal-postboard-post-height
|
||||
overflow: auto
|
||||
|
||||
.postboard-posts .post
|
||||
padding: 0
|
||||
margin-bottom: 1px
|
||||
.post-interactions
|
||||
margin: 2px 10px 3px 60px
|
||||
|
||||
.profile-card
|
||||
margin: 0
|
||||
padding: 0
|
||||
@ -109,8 +105,9 @@ $modal-postboard-post-height: 100%
|
||||
|
||||
|
||||
.isFollowing:after
|
||||
font-size: 15px
|
||||
position: absolute
|
||||
font-size: 10px
|
||||
|
||||
|
||||
|
||||
.follow
|
||||
@extend .color-1
|
||||
|
||||
73
sass/layout/_prompt.sass
Normal file
73
sass/layout/_prompt.sass
Normal file
@ -0,0 +1,73 @@
|
||||
/*********** POPUP PROMPT *************/
|
||||
|
||||
.prompt-wrapper
|
||||
background: $bloc-light-color
|
||||
|
||||
z-index: 5
|
||||
position: fixed
|
||||
top: 50%
|
||||
left: 50%
|
||||
width: 600px
|
||||
margin-left: -300px
|
||||
+box-shadow(0 8px 33px rgba(#000, .3))
|
||||
.modal-buttons, .following-config-method-buttons
|
||||
padding: 0 20px 20px 0
|
||||
float: right
|
||||
.modal-content
|
||||
padding: 20px
|
||||
.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
|
||||
|
||||
|
||||
|
||||
/************ FOLLOWING-CONFIG MODAL **********/
|
||||
|
||||
.prompt-wrapper.following-config-modal
|
||||
margin-top: -100px
|
||||
.modal-buttons
|
||||
display: none
|
||||
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: -110px
|
||||
|
||||
.post-expand, .post-interactions
|
||||
display: none
|
||||
.post-info-time
|
||||
position: static
|
||||
float: right
|
||||
|
||||
|
||||
/********* REPLY POSTS MODAL***************/
|
||||
|
||||
.prompt-wrapper.reply
|
||||
&.prompt-wrapper
|
||||
margin-top: -110px
|
||||
.modal-buttons, .post-expand, .post-interactions
|
||||
display: none
|
||||
.post-area
|
||||
padding-bottom: 6px
|
||||
@ -1,15 +1,23 @@
|
||||
|
||||
@media (max-width:1200px)
|
||||
|
||||
@media (max-width: $site-width)
|
||||
.right
|
||||
display: none
|
||||
.userMenu
|
||||
ul
|
||||
padding: 0
|
||||
.postboard
|
||||
width: 85%
|
||||
.postboard, #postboard-top.onTop
|
||||
position: absolute
|
||||
left: 135px
|
||||
right: 20px
|
||||
width: auto
|
||||
|
||||
.modal-wrapper
|
||||
width: 85%
|
||||
.postboard
|
||||
width: $postboardWidth
|
||||
float: left
|
||||
position: relative
|
||||
left: 0
|
||||
|
||||
@media (max-width: 600px)
|
||||
|
||||
|
||||
48
sass/layout/_wrapper.sass
Normal file
48
sass/layout/_wrapper.sass
Normal file
@ -0,0 +1,48 @@
|
||||
|
||||
|
||||
|
||||
/* Wrapper and blocks */
|
||||
.wrapper
|
||||
width: $site-width
|
||||
max-width: 100%
|
||||
margin: auto
|
||||
padding-top: $menu-height + $gut/2
|
||||
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/2
|
||||
|
||||
&.right
|
||||
float: left
|
||||
top: $menu-height
|
||||
overflow: hidden
|
||||
width: $rightWidth
|
||||
padding-left: 20px
|
||||
padding-right: 3px
|
||||
> .module
|
||||
width: 100%
|
||||
margin-bottom: 20px
|
||||
background: $bloc-light-color
|
||||
width: 100%
|
||||
|
||||
+box-shadow(1px 2px 2px rgba(#111, 0.1))
|
||||
@extend .clear-fix
|
||||
h3
|
||||
float: left
|
||||
padding: 10px
|
||||
h4
|
||||
clear: left
|
||||
border-top: 1px solid $main-background-color
|
||||
padding: 7px 10px
|
||||
font-size: 90%
|
||||
small
|
||||
display: none
|
||||
@ -1,8 +1,8 @@
|
||||
|
||||
.following
|
||||
width: 40%
|
||||
margin-left: 30%
|
||||
padding: 20px
|
||||
width: 55%
|
||||
margin-left: 15%
|
||||
padding: 7px 20px
|
||||
h2
|
||||
display: none
|
||||
.following-list li
|
||||
|
||||
154
sass/style.sass
154
sass/style.sass
@ -10,6 +10,7 @@
|
||||
|
||||
// layout
|
||||
@import 'layout/_menu'
|
||||
@import 'layout/_wrapper'
|
||||
@import 'layout/_modal'
|
||||
@import 'layout/_profile'
|
||||
@import 'layout/_postboard'
|
||||
@ -38,7 +39,7 @@
|
||||
font-size: .9em
|
||||
transition: color .1s linear
|
||||
&.disabled
|
||||
background: #F4F3F2
|
||||
background: $bloc-background-color
|
||||
&.active, &.active span
|
||||
color: $defaut-font-color
|
||||
cursor: default
|
||||
@ -52,50 +53,6 @@
|
||||
|
||||
|
||||
|
||||
/* Wrapper and blocks */
|
||||
.wrapper
|
||||
width: 100%
|
||||
max-width: 100%
|
||||
margin: auto
|
||||
padding-top: $menu-height
|
||||
position: relative
|
||||
z-index: 1
|
||||
|
||||
.dashboard
|
||||
&.left
|
||||
position: absolute
|
||||
top: $menu-height
|
||||
left: 0
|
||||
width: 15%
|
||||
> .module
|
||||
float: right
|
||||
width: $usr-img * 2
|
||||
&.right
|
||||
position: fixed
|
||||
right: 0
|
||||
top: $menu-height
|
||||
overflow: hidden
|
||||
width: 30%
|
||||
|
||||
> .module
|
||||
max-width: 320px
|
||||
margin-bottom: 20px
|
||||
background: $bloc-light-color
|
||||
width: 100%
|
||||
@extend .box-shadow
|
||||
@extend .clear-fix
|
||||
h3
|
||||
float: left
|
||||
padding: 20px
|
||||
h4
|
||||
clear: left
|
||||
border-top: 1px solid $main-background-color
|
||||
padding: 10px
|
||||
small
|
||||
display: none
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/********** CONFIG SUBMENU & SEARCH RESULTS ************/
|
||||
@ -159,8 +116,10 @@ ul.userMenu-search-profiles
|
||||
.mini-profile-photo
|
||||
width: $mini-usr-img
|
||||
height: auto
|
||||
margin: 10px
|
||||
min-height: $mini-usr-img
|
||||
margin: 5px
|
||||
float: left
|
||||
overflow-x: hidden
|
||||
.mini-profile-info
|
||||
width: 100%
|
||||
float: none
|
||||
@ -204,8 +163,10 @@ ul.userMenu-search-profiles
|
||||
/***************** MINI PROFILE *******************************/
|
||||
|
||||
.mini-profile
|
||||
@extend .box-shadow
|
||||
|
||||
|
||||
a:hover
|
||||
text-decoration: none
|
||||
|
||||
a.button
|
||||
background: $main-color-light
|
||||
margin: 1em auto
|
||||
@ -227,7 +188,7 @@ ul.userMenu-search-profiles
|
||||
text-align: center
|
||||
@extend .clear-fix
|
||||
border-top: 1px solid $main-background-color
|
||||
background: #F4F3F2
|
||||
background: $bloc-background-color
|
||||
|
||||
li
|
||||
+box-sizing(border-box)
|
||||
@ -261,9 +222,8 @@ ul.userMenu-search-profiles
|
||||
|
||||
.messages-qtd
|
||||
position: absolute
|
||||
top: 50%
|
||||
margin-top: -11px
|
||||
right: 11px
|
||||
top: 5px
|
||||
right: 5px
|
||||
background: $main-color-color
|
||||
+text-shadow(1px 1px 0 rgba(#000,.2))
|
||||
color: #fff
|
||||
@ -276,6 +236,8 @@ ul.userMenu-search-profiles
|
||||
|
||||
.mini-profile-view
|
||||
display: none
|
||||
.left .mini-profile-info
|
||||
padding-top: 32px
|
||||
|
||||
.mini-profile-name
|
||||
color: $dark-grey
|
||||
@ -293,7 +255,7 @@ ul.userMenu-search-profiles
|
||||
width: $usr-img
|
||||
height: auto
|
||||
display: block
|
||||
margin: 32px auto 0 auto
|
||||
margin: auto
|
||||
|
||||
|
||||
|
||||
@ -350,14 +312,14 @@ ul.userMenu-search-profiles
|
||||
float: right
|
||||
color: $dark-grey
|
||||
|
||||
.mini-follower-link
|
||||
.mini-follower-link, .followed-by
|
||||
display: inline-block
|
||||
margin: 1px
|
||||
line-height: 12px
|
||||
&.isFollowing:after
|
||||
display: none
|
||||
&:after
|
||||
content: '·'
|
||||
content: ''
|
||||
font-weight: 900
|
||||
color: $main-color-dark
|
||||
margin-left: 1px
|
||||
@ -390,60 +352,19 @@ ul.userMenu-search-profiles
|
||||
.mini-profile .post-area
|
||||
display: none
|
||||
|
||||
#postboard-top
|
||||
clear: both
|
||||
position: relative
|
||||
@extend .clear-fix
|
||||
margin-bottom: 10px
|
||||
transition: height .3s linear
|
||||
padding: 10px
|
||||
background: white
|
||||
overflow: hidden
|
||||
background: $bloc-light-color
|
||||
+box-shadow(0 0 13px rgba(#111, 0))
|
||||
+transition-property(box-shadow)
|
||||
+transition-duration(.2s)
|
||||
+transition-timing-function(ease-out)
|
||||
&.on
|
||||
+box-shadow(0 8px 13px rgba(#111, 0.2))
|
||||
z-index: 120
|
||||
&.hide
|
||||
display: none!important
|
||||
&.show
|
||||
display: block
|
||||
|
||||
.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
|
||||
|
||||
|
||||
#post-preview
|
||||
background: $bloc-background-color
|
||||
border: 1px solid $main-background-color
|
||||
padding: 15px
|
||||
border-bottom: 0
|
||||
padding: 5px
|
||||
+transition-property(all)
|
||||
+transition-duration(.1s)
|
||||
width: 100%!important
|
||||
font-size: 90%
|
||||
word-wrap: break-word
|
||||
clear: left
|
||||
|
||||
|
||||
|
||||
@ -494,9 +415,6 @@ textarea.splited-post
|
||||
display: none
|
||||
&:hover button
|
||||
display: block
|
||||
.bio
|
||||
text-align: left!important
|
||||
|
||||
|
||||
small
|
||||
display: none
|
||||
@ -507,21 +425,6 @@ textarea.splited-post
|
||||
@extend .clear-fix
|
||||
clear: both
|
||||
|
||||
.twister-user
|
||||
position: relative
|
||||
box-sizing: border-box
|
||||
background: $bloc-light-color
|
||||
@extend .clear-fix
|
||||
border-top: 1px solid $main-background-color
|
||||
width: 100%
|
||||
min-height: auto
|
||||
padding: 10px 0
|
||||
clear: left
|
||||
+transition-property(background)
|
||||
+transition-duration(.1s)
|
||||
@extend .clear-fix
|
||||
&:hover
|
||||
background: white
|
||||
|
||||
|
||||
|
||||
@ -531,29 +434,29 @@ img.twister-user-photo
|
||||
float: left
|
||||
width: $mini-usr-img
|
||||
height: auto
|
||||
margin: 0 10px
|
||||
background: $main-background-color
|
||||
margin: 0 10px 0 0
|
||||
|
||||
|
||||
|
||||
|
||||
.followers
|
||||
font-size: 12px
|
||||
color: $dark-grey
|
||||
label, a
|
||||
display: inline-block
|
||||
|
||||
.followed-by
|
||||
color: $main-color-light
|
||||
font-size: 12px
|
||||
cursor: pointer
|
||||
display: block
|
||||
|
||||
.twister-user-name, .twister-by-user-name
|
||||
font-weight: bold
|
||||
font-weight: 500
|
||||
font-size: 14px
|
||||
color: $main-color-light
|
||||
text-decoration: none
|
||||
color: $main-color-dark
|
||||
.twister-user-name
|
||||
font-weight: 700
|
||||
|
||||
|
||||
.twister-user-tag
|
||||
font-size: 12px
|
||||
@ -666,9 +569,6 @@ img.twister-user-photo
|
||||
|
||||
/******* LOADER *************/
|
||||
|
||||
|
||||
|
||||
|
||||
.postboard-loading, .loading-roller
|
||||
font-size: 100px
|
||||
width: .4em
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user