twisterarmy/theme_nin
1
0
Fork 0
mirror of https://github.com/twisterarmy/theme_nin.git synced 2025-02-06 20:15:01 +00:00
Code Issues Projects Releases Wiki Activity

more fixes + changes

Browse Source
This commit is contained in:
myleneb 2015-08-01 22:52:31 +02:00
parent 997b629fba
commit 54c5c7197c
17 changed files with 2918 additions and 774 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
css/fonts/ionicons/ionicons.eot Normal file
View File

Binary file not shown.

2230
css/fonts/ionicons/ionicons.svg Normal file
View File

File diff suppressed because it is too large Load Diff
Side by Side

After

Width:  |  Height:  |  Size: 326 KiB

BIN
css/fonts/ionicons/ionicons.ttf Normal file
View File

Binary file not shown.

BIN
css/fonts/ionicons/ionicons.woff Normal file
View File

Binary file not shown.

723
css/style.css
View File

File diff suppressed because it is too large Load Diff

36
js/theme_option.js
View File

@ -6,20 +6,17 @@ $(window).resize(function()
$(document).ready(function() $(document).ready(function()
{ {
var windowHeight = $(window).height(); var windowHeight = $(window).height();
prout();
reOrganizeTemplates() reOrganizeTemplates()
$('#postboard-top textarea').on('blur',function(){$('#postboard-top').removeClass('on');}); $('#postboard-top textarea').on('blur',function(){$('#postboard-top').removeClass('on');});
$('#postboard-top textarea').on('focus',function(){$('#postboard-top').addClass('on');}); $('#postboard-top textarea').on('focus',function(){$('#postboard-top').addClass('on');});
$( '.userMenu-home.current a' ).on( 'click', function() { $( '.userMenu-home.current a' ).on( 'click', function() {
$('html, body').animate({scrollTop:0},300); $('html, body').animate({scrollTop:0},300);
return false return false
}); });
// modify the way promoted posts are shown // modify the way promoted posts are shown
$( ".promoted-posts-only").click(function() { $( ".promoted-posts-only").click(function() {
//active promoted posts tab //active promoted posts tab
@ -32,8 +29,6 @@ $(document).ready(function()
$('#postboard-top').addClass(promotedPostsOnly ? "hide" : "show"); $('#postboard-top').addClass(promotedPostsOnly ? "hide" : "show");
}); });
$(".userMenu-search-profiles .follow") $(".userMenu-search-profiles .follow")
.on("eventToggleFollow", function() { .on("eventToggleFollow", function() {
$(this).text('+').attr('title', polyglot.t('Follow')); $(this).text('+').attr('title', polyglot.t('Follow'));
@ -45,9 +40,6 @@ $(document).ready(function()
if (/\/options.html$/i.test(document.location)) if (/\/options.html$/i.test(document.location))
$(document).ready(localizeLabels); $(document).ready(localizeLabels);
$(window).scroll(function(){ $(window).scroll(function(){
window_scrollY = window.pageYOffset; // declare variable here for screen not to scroll when closing modals window_scrollY = window.pageYOffset; // declare variable here for screen not to scroll when closing modals
}); });
@ -55,14 +47,28 @@ $(document).ready(function()
$(window).scroll(function(){ $(window).scroll(function(){
window_scrollY = window.pageYOffset; // declare variable here for screen not to scroll when closing modals window_scrollY = window.pageYOffset; // declare variable here for screen not to scroll when closing modals
if ($(document).scrollTop() >= 142) { if ($(document).scrollTop() >= 142) { // fixe the textarea on top while scrolling (could be useful)
if (this.css('position') === 'relative') if (this.css('position') === 'relative')
this.addClass('onTop'); this.addClass('onTop');
}else if (this.css('position') === 'fixed') }else if (this.css('position') === 'fixed')
this.removeClass('onTop'); this.removeClass('onTop');
}).bind($('#postboard-top')));*/ }).bind($('#postboard-top')));*/
});
function prout() {
var modulWrap =
$(document).on( 'click', 'h3', function() {
var thisList = $(this).parents('.module').find('ol');
var thisListTitle = $(this).parents('.module').find('h4');
if (thisList.css('display') === 'none') {thisList.slideDown();thisListTitle.slideDown()}
else {thisList.slideUp();thisListTitle.slideUp()}
});
} }
);
function reOrganizeTemplates() { // for nin's templating function reOrganizeTemplates() { // for nin's templating
@ -82,6 +88,12 @@ function reOrganizeTemplates() { // for nin's templating
$('.mini-profile-indicators').detach().insertAfter($('.dashboard.left .profile-data')); $('.mini-profile-indicators').detach().insertAfter($('.dashboard.left .profile-data'));
$('.post-context').each(function(){ $(this).prependTo($(this).parent()); }); // puts context on top of post $('.post-context').each(function(){ $(this).prependTo($(this).parent()); }); // puts context on top of post
// menu
$('.userMenu li > a').wrapInner('<span class="inner"></span>');
///// page following
$('.forEdition h2').detach().prependTo($('.forEdition'));
//loader //loader
newLoader() newLoader()
} }
@ -128,7 +140,7 @@ function openModal(modal) {
modal.content = modal.self.find('.modal-content'); modal.content = modal.self.find('.modal-content');
modal.postboard = modal.self.find('.postboard-posts'); modal.postboard = modal.self.find('.postboard-posts');
modal.self.prependTo('body').fadeIn('slow'); modal.self.prependTo('body').slideDown();
if (modal.classBase === '.modal-wrapper') { if (modal.classBase === '.modal-wrapper') {

56
sass/base/_commons.sass
View File

@ -6,7 +6,6 @@
html, body html, body
height: 100%
min-height: 100% min-height: 100%
color: $defaut-font-color color: $defaut-font-color
position: absolute position: absolute
@ -14,16 +13,15 @@ html, body
html html
font-size: $global-font-size font-size: $global-font-size
background-color: $main-background-color background-color: #ddd
//+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 body
font-size: $main-font-size font-size: $main-font-size
line-height : $main-line-height line-height : $main-line-height
font-family : $main-font-family font-family : $main-font-family
font-weight: 400 font-weight: 400
overflow-y: scroll overflow-y: scroll!important
background-image: image-url("bg.png")
background-attachment: fixed
@ -39,6 +37,8 @@ a
i, em i, em
font-style: italic font-style: italic
font-family: $serif-font-family
letter-spacing: 0
strong, b strong, b
font-weight: 600 font-weight: 600
@ -73,29 +73,33 @@ textarea, input
samp samp
background: #eee background: $dark-grey
font-size: .9rem color: white
line-height: .9rem font-size: 11px
display: inline-block line-height: 11px
padding: 5px 8px display: inline-block
+border-radius(2px) padding: 5px
color: #333 +border-radius(1px)
font-weight: 500 font-weight: 500
font-family: monospace font-family: monospace
word-wrap: break-word
/* isFollowing */ /* isFollowing */
.isFollowing:after
color: $main-color-color .isFollowing
content: '\e806' @extend .ion-checkmark
font-family: $symbol-font-family @extend .ion-after
padding-left: 2px &:after
display: inline color: $main-color-color
font-size: 10px padding-left: 3px
vertical-align: top display: inline
line-height: 10px font-size: 11px
&:hover vertical-align: top
text-decoration: none!important line-height: 10px
h3 & h3
display: none .isFollowing:before
display: none!important
.isFollowing:after
display: none!important

229
sass/base/_fonts.sass
View File

@ -1,193 +1,120 @@
@font-face @font-face
font-family: "Roboto" font-family: "Roboto"
src: url("fonts/roboto/Roboto-Regular.ttf") src: url("fonts/roboto/Roboto-Regular.ttf")
font-weight: 400 font-weight: 400
@font-face @font-face
font-family: "Roboto" font-family: "Roboto"
src: url("fonts/roboto/Roboto-Medium.ttf") src: url("fonts/roboto/Roboto-Medium.ttf")
font-weight: 500 font-weight: 500
@font-face @font-face
font-family: "Roboto" font-family: "Roboto"
src: url("fonts/roboto/Roboto-Bold.ttf") src: url("fonts/roboto/Roboto-Bold.ttf")
font-weight: 700 font-weight: 700
@font-face @font-face
font-family: "Roboto" font-family: "Roboto"
src: url("fonts/roboto/Roboto-Black.ttf") src: url("fonts/roboto/Roboto-Black.ttf")
font-weight: 900 font-weight: 900
@font-face @font-face
font-family: "Roboto" font-family: "Roboto"
src: url("fonts/roboto/Roboto-Italic.ttf") src: url("fonts/roboto/Roboto-Italic.ttf")
font-weight: 400 font-weight: 400
font-style: italic font-style: italic
@font-face @font-face
font-family: "Droid" font-family: "Droid"
src: url("fonts/DroidSerif-Italic.ttf") src: url("fonts/DroidSerif-Italic.ttf")
font-weight: 400 font-weight: 400
font-style: italic font-style: italic
@font-face @font-face
font-family: "Roboto" font-family: "Roboto"
src: url("fonts/roboto/Roboto-MediumItalic.ttf") src: url("fonts/roboto/Roboto-MediumItalic.ttf")
font-weight: 500 font-weight: 500
font-style: italic font-style: italic
@font-face @font-face
font-family: "Roboto" font-family: "Roboto"
src: url("fonts/roboto/Roboto-BoldItalic.ttf") src: url("fonts/roboto/Roboto-BoldItalic.ttf")
font-weight: 700 font-weight: 700
font-style: italic font-style: italic
/* ICONS */
/******* fontello *******/
@font-face @font-face
font-family: "fontello" font-family: "Ionicons"
src: url('fonts/fontello/fontello.eot?7584488') src: url("fonts/ionicons/ionicons.eot?v=2.0.0")
src: url('fonts/fontello/fontello.eot?7584488#iefix') format("embedded-opentype"), url('fonts/fontello/fontello.woff?7584488') format("woff"), url('fonts/fontello/fontello.ttf?7584488') format("truetype"), url('fonts/fontello/fontello.svg?7584488#fontello') format("svg") 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-weight: normal
font-style: normal font-style: normal
[class^="icon-"]:before, [class*=" icon-"]:before, .extend-icon:before, .icon-down-after:after .ion:before, .ion-after:after
font-family: "fontello" display: inline-block
font-style: normal font-family: "Ionicons"
font-weight: normal speak: none
speak: none font-style: inherit
display: inline-block font-weight: inherit
text-decoration: inherit font-variant: inherit
width: 1em text-transform: normal
margin-right: 3px text-rendering: auto
text-align: center line-height: inherit
font-variant: normal -webkit-font-smoothing: antialiased
text-transform: none -moz-osx-font-smoothing: grayscale
line-height: 1em
margin-left: 2px
.ion:after, .ion-after:before
display: none
.icon-search:before .ion-alert:before
content: '\e800' content: "\f101"
/* ''*/ .ion-checkmark:after, .ion-checkmark:before
content: "\f122"
.icon-mail:before .ion-gear:before
content: '\e801' content: "\f13d"
/* ''*/ .ion-shuffle:before
content: "\f3a8"
.icon-heart:before .ion-mention:before
content: '\e802' content: "\f39b"
/* ''*/ .ion-chatbox:before
content: "\f11c"
.icon-star:before .ion-profile:before
content: '\e803' content: "\f2d8"
/* ''*/ .ion-plus:before
content: "\f11d"
.icon-user:before .ion-reply:before
content: '\e804' content: "\f2d4"
/* ''*/ .ion-close:before
content: "\f12a"
.icon-camera:before .ion-back:before
content: '\e805' content: "\f124"
/* ''*/ .ion-post-promo:before
content: "\f470"
.icon-ok:before .ion-post-normal:before
content: '\e806' content: "\f1fd"
/* ''*/ .ion-home:before
content: "\f144"
.icon-cancel:before .ion-network:before
content: '\e807' content: "\f2b5"
/* ''*/
.icon-plus:before
content: '\e808'
/* ''*/
.icon-minus:before
content: '\e809'
/* ''*/
.icon-down:before
content: '\e80a'
.icon-down-after:after
content: '\e80a'
/* ''*/
.icon-lock:before
content: '\e80b'
/* ''*/
.icon-quote:before
content: '\e80c'
/* ''*/
.icon-comment:before
content: '\e80d'
/* ''*/
.icon-chat:before
content: '\e80e'
/* ''*/
.icon-left:before
content: '\e80f'
/* ''*/
.icon-right:before
content: '\e810'
/* ''*/
.icon-up:before
content: '\e811'
/* ''*/
.icon-cog:before
content: '\e812'
/* ''*/
.icon-doc:before
content: '\e813'
/* ''*/
.icon-arrows:before, .refresh-toptrends:before, .twistday-reminder .refresh:before, .refresh-users:before
content: '\e814'
/* ''*/
.icon-twistagain:before
content: '\e815'
/* ''*/
.icon-bell:before
content: '\e816'
/* '' */

4
sass/base/_utils.sass
View File

@ -26,13 +26,15 @@ button, a.button
text-transform: uppercase text-transform: uppercase
+transition-property(background, border-color) +transition-property(background, border-color)
+transition-duration(.1s) +transition-duration(.1s)
color: #444 color: $dark-grey
background: #F8F8F8 background: #F8F8F8
border: 1px solid darken( #F8F8F8 , 5%) border: 1px solid darken( #F8F8F8 , 5%)
font-family: $symbol-font-family, $main-font-family font-family: $symbol-font-family, $main-font-family
cursor: pointer cursor: pointer
&:hover &:hover
border-color: darken( #F8F8F8 , 15%) border-color: darken( #F8F8F8 , 15%)
text-decoration: none
color: $dark-grey
&.disabled &.disabled
opacity: .5 opacity: .5
color: #999 color: #999

22
sass/base/_var.sass
View File

@ -3,11 +3,12 @@
$site-width : 1200px $site-width : 1200px
$gut : 20 $gut : 20
$postboardWidth : 700px $postboardWidth : 700px
$miniProfileWidth : $site-width/10 $miniProfileWidth : $site-width/8
$leftWidth : $miniProfileWidth + $gut $leftWidth : $miniProfileWidth + $gut
$rightWidth : $site-width - ($leftWidth + $postboardWidth) $rightWidth : $site-width - ($leftWidth + $postboardWidth)
$mini-usr-img : 42px $micro-usr-img : 32px
$mini-usr-img : 48px
$usr-img : 64px $usr-img : 64px
$space : 1rem $space : 1rem
@ -15,31 +16,32 @@ $space : 1rem
// colors // colors
$light-grey: #C3C3C3 $light-grey: #C3C3C3
$color-green: #A1B775 $color-green: #A1B775
$color-red: #EF5D43 $color-red: #EF5D43
$color-blue: #39434F $color-blue: #39434F
$dark-grey : #444 $dark-grey : #3E3C42
$main-color-light: #aaa $main-color-light: #000
$main-color-dark: #222 $main-color-dark: #222
$main-color-color: $color-green $main-color-color: $color-green
$main-background-color: #E2E1DD $main-background-color: #eee
$bloc-light-color : #FDFCFA $bloc-light-color : #FDFCFA
$bloc-background-color: #F3F2F0 $bloc-background-color: #F3F2F0
$defaut-font-color: $dark-grey $defaut-font-color: $dark-grey
$global-font-size : 14px $global-font-size : 15px
$main-font-size : 1rem $main-font-size : 1rem
$main-line-height : 1.4rem $main-line-height : 1.3rem
/* FONTS */ /* FONTS */
$main-font-family: "Roboto", sans-serif $main-font-family: "Roboto", sans-serif
$symbol-font-family: "fontello" $symbol-font-family: "Ionicons"
$serif-font-family: "Droid", serif $serif-font-family: "Droid", serif

57
sass/layout/_menu.sass
View File

@ -1,8 +1,8 @@
// vars for the menu // vars for the menu
$menu-height : 42px $menu-height : 52px
$menu-font-color: white $menu-font-color: white
$menuBgColor : #67686C $menuBgColor : $dark-grey
.userMenu .userMenu
width: 100% width: 100%
position: fixed position: fixed
@ -22,22 +22,27 @@ $menuBgColor : #67686C
background: image-url("logo.png") no-repeat 50% 50% background: image-url("logo.png") no-repeat 50% 50%
background-size: 20px background-size: 20px
li li
float: left
margin: 0 20px 0 0
position: relative position: relative
display: block display: inline-block
margin-right: 20px
> a > a
line-height: $menu-height line-height: $menu-height
padding: 0 .5em
display: inline-block display: inline-block
color: rgba($menu-font-color, 0.7)!important color: rgba($menu-font-color, 0.5)!important
font-size: 1.1em font-size: 1rem
position: relative position: relative
font-weight: 400 font-size: 1rem
+box-sizing(border-box) @extend .ion
&:hover &:hover
color: $menu-font-color!important color: $menu-font-color!important
text-decoration: none text-decoration: none
&:before
padding-right: 5px
font-size: 1.5rem
line-height: 1rem
span
display: inline-block
&.current a &.current a
@ -49,28 +54,35 @@ $menuBgColor : #67686C
.userMenu li .userMenu li
&.userMenu-home &.userMenu-home
a span.label a
display: block!important @extend .ion-home
text-align: center .label
display: inline-block!important
.menu-news .menu-news
position: absolute position: absolute
text-align: center text-align: center
display: none display: none
top: 4px top: 5px
right: -7px right: -12px
background: $main-color-color background: $main-color-color
width: 15px width: 15px
height: 15px height: 15px
line-height: 15px line-height: 15px
font-size: 10px font-size: 10px
padding: 1px padding: 1px
margin: 0
font-weight: 900 font-weight: 900
+border-radius(50%) +border-radius(50%)
letter-spacing: -0.01em
+box-sizing(content-box) +box-sizing(content-box)
color: white color: white
&.show &.show
display: block display: block
&.userMenu-network a
@extend .ion-network
&.userMenu-profile a
@extend .ion-profile
&.userMenu-dhtindicator, &.userMenu-connections, &.userMenu-messages &.userMenu-dhtindicator, &.userMenu-connections, &.userMenu-messages
display: none!important display: none!important
@ -84,15 +96,16 @@ $menuBgColor : #67686C
color: $main-color-dark color: $main-color-dark
&.userMenu-search &.userMenu-search
> input > input
border: 1px solid #dedede border: 1px solid rgba(white,.3)
line-height: $menu-height/2 line-height: $menu-height/2
font-size: 12px font-size: 12px
padding: 0 7px padding: 0 7px
background: white background: rgba(white,.1)
color: white
+border-radius(7px)
&:focus &:focus
border-color: $main-color-dark border-color: rgba(white,.7)
&.userMenu-config > a &.userMenu-config > a
@extend .icon-cog @extend .ion-gear
@extend .extend-icon
font-size: 1.5rem font-size: 1.5rem

25
sass/layout/_modal.sass
View File

@ -23,7 +23,10 @@ $header-modal-height : $menu-height
bottom: 0 bottom: 0
overflow: hidden overflow: hidden
+box-shadow(-8px 0 13px rgba(#111, 0.2)) +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 //
&.new-user &.new-user
@ -151,7 +154,8 @@ $header-modal-height : $menu-height
font-size: 1rem font-size: 1rem
color: white color: white
span span
@extend .extend-icon
@extend .ion
position: absolute position: absolute
top: 0 top: 0
line-height: $header-modal-height line-height: $header-modal-height
@ -166,14 +170,13 @@ $header-modal-height : $menu-height
display: none display: none
&.modal-close &.modal-close
@extend .icon-cancel @extend .ion-close
right: 10px right: 10px
&.mark-all-as-read &.mark-all-as-read
display: none @extend .ion-checkmark
@extend .icon-ok
right: 70px right: 70px
&.modal-back &.modal-back
@extend .icon-left @extend .ion-back
right: 35px right: 35px
@ -188,12 +191,18 @@ $header-modal-height : $menu-height
box-sizing: border-box box-sizing: border-box
background: $bloc-light-color background: $bloc-light-color
@extend .clear-fix @extend .clear-fix
border-top: 1px solid $main-background-color border-bottom: 1px solid $main-background-color
width: 100% width: 100%
min-height: auto min-height: auto
padding: 7px padding: 7px
clear: left 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
/*********** POPUP PROMPT *************/ /*********** POPUP PROMPT *************/

78
sass/layout/_postboard.sass
View File

@ -12,6 +12,7 @@
+transition-property( top) +transition-property( top)
+transition-duration(.1s) +transition-duration(.1s)
+transition-timing-function(ease-out) +transition-timing-function(ease-out)
+border-radius(11px)
top: 0 top: 0
&.on &.on
+box-shadow(1px 2px 2px rgba(#111, 0.1)) +box-shadow(1px 2px 2px rgba(#111, 0.1))
@ -69,7 +70,7 @@
+transition-property(margin) +transition-property(margin)
+transition-duration(.5s) +transition-duration(.5s)
+transition-timing-function(ease-out) +transition-timing-function(ease-out)
color: lighten($defaut-font-color, 10%) color: $defaut-font-color
cursor: pointer cursor: pointer
&:hover &:hover
color: #000 color: #000
@ -77,23 +78,23 @@
.show-more .show-more
display: inline-block display: inline-block
float: right float: right
font-size: 12px font-size: .8rem
color: lighten($dark-grey,30%) color: lighten($dark-grey,30%)
@extend .extend-icon
@extend .icon-chat
&:hover &:hover
color: lighten($dark-grey,5%) color: lighten($dark-grey,5%)
.post-expand .post-expand
color: lighten($dark-grey,30%) color: lighten($dark-grey,30%)
background: $bloc-light-color
cursor: pointer cursor: pointer
font-size: 12px font-size: .8rem
position: absolute position: absolute
left: 10px left: 10px
bottom: 10px bottom: 10px
&:hover &:hover
color: lighten($dark-grey,5%) color: lighten($dark-grey,5%)
.post-data .post-data
padding: 10px padding: 12px 15px
background: $bloc-light-color background: $bloc-light-color
@ -116,11 +117,6 @@
.post-expand .post-expand
display: none display: none
margin: 0 margin: 0
.post-photo .post-photo
margin: 0 margin: 0
@ -145,18 +141,18 @@
color: black color: black
.post-info-tag .post-info-tag
font-size: 12px font-size: .8rem
opacity: .6 opacity: .6
margin-top: 4px margin-top: 4px
display: inline-block display: inline-block
.post-info-time .post-info-time
position: absolute position: absolute
font-size: 11px font-size: .8rem
line-height: 14px line-height: .8rem
text-decoration: none text-decoration: none
top: 11px top: 12px
right: 11px right: 15px
color: lighten($dark-grey,30%) color: lighten($dark-grey,30%)
&:hover &:hover
color: lighten($dark-grey,5%) color: lighten($dark-grey,5%)
@ -171,23 +167,21 @@
.post-context .post-context
font-size: 11px font-size: .8rem
line-height: 11px line-height: .8rem
margin: 0 0 1em 0 margin: 0 0 .8rem 0
color: lighten($dark-grey,30%) color: lighten($dark-grey,30%)
span span
@extend .icon-twistagain @extend .ion-shuffle
@extend .extend-icon @extend .ion
&:before &:before
display: block display: block
float: left float: left
background: $main-color-color color: $main-color-color
text-align: center
padding: 1px 2px 2px 2px line-height: .8rem
line-height: 9px font-size: .8rem
font-size: 9px
+border-radius(3px)
color: white
margin-right: .4em margin-right: .4em
@ -197,32 +191,37 @@
.post-interactions .post-interactions
margin: 10px 0 3px 0 margin: 10px 0 3px 0
text-align: right text-align: right
height: 12px height: .8rem
line-height: 12px line-height: .8rem
span span
color: lighten($dark-grey,30%) color: lighten($dark-grey,30%)
cursor: pointer cursor: pointer
font-size: 12px font-size: .8rem
line-height: 12px line-height: .8rem
@extend .extend-icon @extend .ion
position: relative position: relative
margin-left: 7px margin-left: 7px
display: none display: none
.open .original &
display: inline-block!important
&:hover &:hover
color: lighten($dark-grey,5%) color: lighten($dark-grey,5%)
&:before
padding: 3px
&.post-reply &.post-reply
@extend .icon-comment @extend .ion-plus
&.post-propagate &.post-propagate
@extend .icon-twistagain @extend .ion-shuffle
&.post-favorite &.post-favorite
display: none!important //maybe one day display: none!important //maybe one day
@extend .icon-star @extend .ion-alert
.post:hover & .post:hover &
.post-reply, .post-propagate //, .post-favorite maybe one day .post-reply, .post-propagate //, .post-favorite maybe one day
display: inline-block display: inline-block
.open .related .open .related
.post-reply, .post-reply,
.post-propagate, .post-propagate,
@ -252,6 +251,7 @@
text-align: center text-align: center
overflow-y: auto overflow-y: auto
background: black background: black
clear: both
.post-stats .post-stats
float: left float: left
@ -261,8 +261,8 @@
font-size: 12px font-size: 12px
float: left float: left
line-height: 20px line-height: 20px
@extend .extend-icon @extend .ion-shuffle
@extend .icon-twistagain @extend .ion
&:before &:before
margin-right: 0 margin-right: 0
span:last-child span:last-child

81
sass/layout/_profile.sass
View File

@ -64,7 +64,6 @@ $modal-postboard-post-height: 100%
position: relative position: relative
text-align: left text-align: left
word-wrap: break-word word-wrap: break-word
transition: all .2s linear
background: none!important background: none!important
padding: 10px padding: 10px
h1, h2 h1, h2
@ -74,7 +73,6 @@ $modal-postboard-post-height: 100%
&:before &:before
content: "" content: ""
border: solid 0px #fff border: solid 0px #fff
transition: all .2s linear
position: absolute position: absolute
left: 1px left: 1px
top: 1px top: 1px
@ -95,9 +93,10 @@ $modal-postboard-post-height: 100%
float: none float: none
.profile-bio .profile-bio
font-style: italic @extend i
text-align: left text-align: left
font-size: 1rem font-size: .9rem
margin-left: $usr-img + 10 margin-left: $usr-img + 10
.profile-card-buttons .profile-card-buttons
text-align: center text-align: center
@ -171,46 +170,58 @@ $modal-postboard-post-height: 100%
/* EDITION PROFILE*/ /* EDITION PROFILE*/
.forEdition.profile-card .forEdition.profile-card
+box-sizing(border-box)
@extend .clear-fix @extend .clear-fix
width: auto margin: 0
width: $postboardWidth
background: none
padding: 0
.profile-card-main .profile-card-main
margin: 0 padding: 10px 0
width: 330px
+box-sizing(border-box)
padding: 10px
input input
display: block display: block
margin: 5px auto margin: 0 0 10px 100px
background: white width: 600px
border: 1px solid lighten($dark-grey, 50%)
background: $bloc-background-color
border: 1px solid $bloc-light-color
padding: 6px 4px padding: 6px 4px
margin-bottom: 4px margin-bottom: 4px
text-align: center font-size: 1rem
transition: all .2s linear font-weight: 400
&:hover, &:focus &:hover, &:focus
background: white background: white
border-color: $main-color-light border-color: $main-color-light
.input-description img
width: 90% width: 70px
float: left
h2
font-weight: 400
padding: 1rem 2rem
color: white
.input-name
font-size: 20px
.forEdition .profile-card-main button
.input-website, .input-city float: right
display: inline-block margin: 10px
.input-tox, .input-bitmessage &.last-child
width: 90% margin-right: 0
margin-top: 10px &.submit-changes
h2 @extend button.color-1
text-transform: none &.toggle-priv-key
font-weight: 700 @extend button.color-2
font-size: .9em .secret-key-container
text-align: left !important
.profile-edition-buttons font-size: 1rem!important
text-align: right .secret-key
clear: both
.selectable_theme.theme_calm margin: 20px 0
display: none background: white
text-align: left !important
font-size: 1rem!important
padding: 10px
.label
clear: both
display: block
font-weight: 500
margin: 20px 0

13
sass/layout/_wrapper.sass
View File

@ -33,16 +33,21 @@
margin-bottom: 20px margin-bottom: 20px
background: $bloc-light-color background: $bloc-light-color
width: 100% width: 100%
min-height: $mini-usr-img
+box-shadow(1px 2px 2px rgba(#111, 0.1)) +box-shadow(1px 2px 2px rgba(#111, 0.1))
+border-radius(3px)
@extend .clear-fix @extend .clear-fix
overflow: hidden
h3 h3
float: left float: left
padding: 10px padding: 10px
h4 h4
clear: left clear: left
border-top: 1px solid $main-background-color padding: 10px 10px 5px 10px
padding: 7px 10px
font-size: 90% font-size: 90%
small small
display: none display: none
ol
@extend .clear-fix
clear: both
position: relative

5
sass/pages/_following.sass
View File

@ -1,8 +1,7 @@
.following .following
width: 55% width: $postboardWidth
margin-left: 15% float: left
padding: 7px 20px
h2 h2
display: none display: none
.following-list li .following-list li

133
sass/style.sass
View File

@ -1,3 +1,4 @@
@charset "UTF-8"
@import compass @import compass
@import 'compass/reset' @import 'compass/reset'
@import 'compass/utilities' @import 'compass/utilities'
@ -33,23 +34,26 @@
cursor: pointer cursor: pointer
display: block display: block
margin: 0 margin: 0
padding: 5px width: 50%
border-bottom: 1px solid $main-background-color padding: .5rem
float: left
text-align: center text-align: center
font-size: .9em
transition: color .1s linear transition: color .1s linear
position: relative
border-left: 1px solid $main-background-color
span
font-size: .8rem
line-height: .8rem
display: block
&.disabled &.disabled
background: $bloc-background-color background: $bloc-background-color
&.active, &.active span color: rgba($defaut-font-color, .3)
z-index: 3
&.active
color: $defaut-font-color color: $defaut-font-color
cursor: default cursor: default
&:hover span, &.disabled:hover span
color: $defaut-font-color z-index: 5
&.disabled span
color: rgba($defaut-font-color, .3)
@ -99,7 +103,7 @@ ul.userMenu-search-profiles
width: 100% width: 100%
font-size: 12px font-size: 12px
font-weight: 400 font-weight: 400
line-height: $mini-usr-img line-height: $mini-usr-img / 1.5
display: block display: block
margin: 0 margin: 0
padding: 0 padding: 0
@ -114,30 +118,31 @@ ul.userMenu-search-profiles
.mini-screen-name .mini-screen-name
font-weight: 500 font-weight: 500
.mini-profile-photo .mini-profile-photo
width: $mini-usr-img width: $mini-usr-img / 1.5
height: auto height: auto
min-height: $mini-usr-img height: $mini-usr-img / 1.5
overflow: hidden
margin: 5px margin: 5px
float: left float: left
overflow-x: hidden overflow-x: hidden
.mini-profile-info .mini-profile-info
width: 100% width: 100%
float: none float: none
.mini-profile-name
padding: 5px 0 0 0
button button
font-size: 1.4rem font-size: 13px
line-height: $mini-usr-img - 15 line-height: $mini-usr-img / 2
height: $mini-usr-img - 10 height: $mini-usr-img / 1.5
width: $mini-usr-img width: $mini-usr-img / 1.5
text-align: center text-align: center
font-weight: 500 font-weight: 700
padding: 0 padding: 0
+border-radius(2px) @extend .ion
@extend .extend-icon
position: absolute position: absolute
top: 10px top: 5px
right: 10px right: 5px
@ -199,7 +204,7 @@ ul.userMenu-search-profiles
border-bottom: 1px solid $main-background-color border-bottom: 1px solid $main-background-color
a a
color: lighten($dark-grey,20%) color: lighten($dark-grey,10%)
display: block display: block
padding: 1rem 0 padding: 1rem 0
&:hover &:hover
@ -211,14 +216,14 @@ ul.userMenu-search-profiles
font-size: 1.4rem!important font-size: 1.4rem!important
.userMenu-connections a .userMenu-connections a
@extend .icon-bell @extend .ion-mention
@extend .extend-icon @extend .ion
.userMenu-messages a .userMenu-messages a
@extend .icon-mail @extend .ion-chatbox
@extend .extend-icon @extend .ion
.userMenu-user a .userMenu-user a
@extend .icon-user @extend .ion-profile
@extend .extend-icon @extend .ion
.messages-qtd .messages-qtd
position: absolute position: absolute
@ -237,7 +242,7 @@ ul.userMenu-search-profiles
.mini-profile-view .mini-profile-view
display: none display: none
.left .mini-profile-info .left .mini-profile-info
padding-top: 32px padding-top: 20px
.mini-profile-name .mini-profile-name
color: $dark-grey color: $dark-grey
@ -299,30 +304,28 @@ ul.userMenu-search-profiles
display: block display: block
position: absolute position: absolute
bottom: 10px bottom: 10px
text-align: center
padding: 10px padding: 10px
width: 100%
background: $bloc-light-color
font-size: 12px font-size: 12px
z-index: 10 z-index: 10
+transition(all .2s linear) +transition(all .2s linear)
+box-shadow(-8px 0 13px rgba(#111, 0.2))
.show-more-followers .show-more-followers
font-weight: 700 @extend button
display: block @extend .small
cursor: pointer
float: right float: right
color: $dark-grey margin-right: 5px
.mini-follower-link, .followed-by .mini-follower-link, .followed-by
display: inline-block display: inline-block
margin: 1px margin: 1px 5px
line-height: 12px line-height: 12px
&.isFollowing:after &.isFollowing:after
display: none display: none
&:after
content: ''
font-weight: 900
color: $main-color-dark
margin-left: 1px
@ -416,23 +419,13 @@ textarea.splited-post
&:hover button &:hover button
display: block display: block
small
display: none
h3
float: left
padding: 20px
ol
@extend .clear-fix
clear: both
img.twister-user-photo img.twister-user-photo
float: left float: left
display: block display: block
float: left float: left
width: $mini-usr-img width: $micro-usr-img
height: auto height: auto
margin: 0 10px 0 0 margin: 0 10px 0 0
@ -467,16 +460,16 @@ img.twister-user-photo
.twister-user-remove .twister-user-remove
font-size: 13px font-size: 13px
opacity: .2 opacity: .5
text-decoration: none text-decoration: none
cursor: pointer cursor: pointer
position: absolute position: absolute
padding: 5px padding: 5px
top: -5px top: 0
right: -5px right: 0
display: inline-block display: block
@extend .icon-cancel @extend .ion-close
@extend .extend-icon @extend .ion
.twister-user:hover .twister-user-remove .twister-user:hover .twister-user-remove
text-decoration: none text-decoration: none
@ -485,8 +478,8 @@ img.twister-user-photo
opacity: 1 opacity: 1
.refresh-toptrends, .twistday-reminder .refresh, .refresh-users .refresh-toptrends, .twistday-reminder .refresh, .refresh-users
@extend .icon-arrows @extend .ion-alert
@extend .extend-icon @extend .ion
color: $main-color-dark color: $main-color-dark
cursor: pointer cursor: pointer
font-size: 11px font-size: 11px
@ -542,26 +535,14 @@ img.twister-user-photo
/********* TWISTDAY REMINDER *******/ /********* TWISTDAY REMINDER *******/
.twistday-reminder .twistday-reminder
small
display: none
.twister-user
background: $bloc-light-color
position: relative
+transition-property(background)
+transition-duration(.1s)
&:hover
background: white
.twister-user-full, .twister-user-tag .twister-user-full, .twister-user-tag
font-size: 1rem font-size: .9rem
line-height: 1rem line-height: 1rem
color: $defaut-font-color color: $defaut-font-color
font-weight: 500 font-weight: 500
opacity: 1 opacity: 1
letter-spacing: 0
display: inline-block display: inline-block
.twisterday .twisterday
font-size: 12px font-size: 12px