twisterarmy
/
theme_nin
mirror of https://github.com/twisterarmy/theme_nin.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

more fixes + changes

nin-v2
myleneb 9 years ago
parent
997b629fba
commit
54c5c7197c
17 changed files with 2920 additions and 776 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      css/fonts/ionicons/ionicons.eot
  2. 2230
      css/fonts/ionicons/ionicons.svg
  3. BIN
      css/fonts/ionicons/ionicons.ttf
  4. BIN
      css/fonts/ionicons/ionicons.woff
  5. 723
      css/style.css
  6. 36
      js/theme_option.js
  7. 56
      sass/base/_commons.sass
  8. 229
      sass/base/_fonts.sass
  9. 4
      sass/base/_utils.sass
  10. 22
      sass/base/_var.sass
  11. 57
      sass/layout/_menu.sass
  12. 25
      sass/layout/_modal.sass
  13. 78
      sass/layout/_postboard.sass
  14. 85
      sass/layout/_profile.sass
  15. 13
      sass/layout/_wrapper.sass
  16. 5
      sass/pages/_following.sass
  17. 133
      sass/style.sass

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

Binary file not shown.

2230
css/fonts/ionicons/ionicons.svg
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
View File

Binary file not shown.

BIN
css/fonts/ionicons/ionicons.woff
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
Unescape View File

@ -6,20 +6,17 @@ $(window).resize(function() @@ -6,20 +6,17 @@ $(window).resize(function()
$(document).ready(function()
{
var windowHeight = $(window).height();
prout();
reOrganizeTemplates()
$('#postboard-top textarea').on('blur',function(){$('#postboard-top').removeClass('on');});
$('#postboard-top textarea').on('focus',function(){$('#postboard-top').addClass('on');});
$( '.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").click(function() {
//active promoted posts tab
@ -32,8 +29,6 @@ $(document).ready(function() @@ -32,8 +29,6 @@ $(document).ready(function()
$('#postboard-top').addClass(promotedPostsOnly ? "hide" : "show");
});
$(".userMenu-search-profiles .follow")
.on("eventToggleFollow", function() {
$(this).text('+').attr('title', polyglot.t('Follow'));
@ -45,9 +40,6 @@ $(document).ready(function() @@ -45,9 +40,6 @@ $(document).ready(function()
if (/\/options.html$/i.test(document.location))
$(document).ready(localizeLabels);
$(window).scroll(function(){
window_scrollY = window.pageYOffset; // declare variable here for screen not to scroll when closing modals
});
@ -55,14 +47,28 @@ $(document).ready(function() @@ -55,14 +47,28 @@ $(document).ready(function()
$(window).scroll(function(){
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')
this.addClass('onTop');
}else if (this.css('position') === 'fixed')
this.removeClass('onTop');
}).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
@ -82,6 +88,12 @@ 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'));
$('.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
newLoader()
}
@ -128,7 +140,7 @@ function openModal(modal) { @@ -128,7 +140,7 @@ function openModal(modal) {
modal.content = modal.self.find('.modal-content');
modal.postboard = modal.self.find('.postboard-posts');
modal.self.prependTo('body').fadeIn('slow');
modal.self.prependTo('body').slideDown();
if (modal.classBase === '.modal-wrapper') {

56
sass/base/_commons.sass
Unescape View File

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

229
sass/base/_fonts.sass
Unescape View File

@ -1,193 +1,120 @@ @@ -1,193 +1,120 @@
@font-face
font-family: "Roboto"
src: url("fonts/roboto/Roboto-Regular.ttf")
font-weight: 400
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-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-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-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-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-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-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
font-family: "Roboto"
src: url("fonts/roboto/Roboto-BoldItalic.ttf")
font-weight: 700
font-style: italic
/* ICONS */
/******* fontello *******/
@font-face
font-family: "fontello"
src: url('fonts/fontello/fontello.eot?7584488')
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")
font-weight: normal
font-style: normal
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
[class^="icon-"]:before, [class*=" icon-"]:before, .extend-icon:before, .icon-down-after:after
font-family: "fontello"
font-style: normal
font-weight: normal
speak: none
display: inline-block
text-decoration: inherit
width: 1em
margin-right: 3px
text-align: center
font-variant: normal
text-transform: none
line-height: 1em
margin-left: 2px
.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:after, .ion-after:before
display: none
.icon-search:before
content: '\e800'
.ion-alert:before
content: "\f101"
/* ''*/
.ion-checkmark:after, .ion-checkmark:before
content: "\f122"
.icon-mail:before
content: '\e801'
.ion-gear:before
content: "\f13d"
/* ''*/
.ion-shuffle:before
content: "\f3a8"
.icon-heart:before
content: '\e802'
.ion-mention:before
content: "\f39b"
/* ''*/
.ion-chatbox:before
content: "\f11c"
.icon-star:before
content: '\e803'
.ion-profile:before
content: "\f2d8"
/* ''*/
.ion-plus:before
content: "\f11d"
.icon-user:before
content: '\e804'
.ion-reply:before
content: "\f2d4"
/* ''*/
.ion-close:before
content: "\f12a"
.icon-camera:before
content: '\e805'
.ion-back:before
content: "\f124"
/* ''*/
.ion-post-promo:before
content: "\f470"
.icon-ok:before
content: '\e806'
.ion-post-normal:before
content: "\f1fd"
/* ''*/
.ion-home:before
content: "\f144"
.icon-cancel:before
content: '\e807'
/* ''*/
.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'
/* '' */
.ion-network:before
content: "\f2b5"

4
sass/base/_utils.sass
Unescape View File

@ -26,13 +26,15 @@ button, a.button @@ -26,13 +26,15 @@ button, a.button
text-transform: uppercase
+transition-property(background, border-color)
+transition-duration(.1s)
color: #444
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

22
sass/base/_var.sass
Unescape View File

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

57
sass/layout/_menu.sass
Unescape View File

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

25
sass/layout/_modal.sass
Unescape View File

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

78
sass/layout/_postboard.sass
Unescape View File

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

85
sass/layout/_profile.sass
Unescape View File

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

@ -33,16 +33,21 @@ @@ -33,16 +33,21 @@
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
border-top: 1px solid $main-background-color
padding: 7px 10px
padding: 10px 10px 5px 10px
font-size: 90%
small
display: none
display: none
ol
@extend .clear-fix
clear: both
position: relative

5
sass/pages/_following.sass
Unescape View File

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

133
sass/style.sass
Unescape View File

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

Write Preview
Loading…
Cancel
Save