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

clean sass

nin-v2
Mylene 9 years ago
parent
346c59afef
commit
8e41c4558b
17 changed files with 3131 additions and 3091 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      README.md
  2. 1
      css/fonts/OpenSans-Bold.ttf
  3. 1
      css/fonts/OpenSans-Regular.ttf
  4. 1
      css/fonts/Symbola.ttf
  5. 2722
      css/style.css
  6. 5
      js/theme_option.js
  7. 86
      sass/_commons.sass
  8. 50
      sass/_grid.sass
  9. 41
      sass/_login.sass
  10. 34
      sass/_menu.sass
  11. 408
      sass/_modal.sass
  12. 70
      sass/_network.sass
  13. 116
      sass/_postboard.sass
  14. 39
      sass/_profile.sass
  15. 57
      sass/_utils.sass
  16. 28
      sass/_var.sass
  17. 446
      sass/style.sass

9
README.md
Unescape View File

@ -1,7 +1,14 @@
Theme Nin v2 for twister-html Theme Nin v2 for twister-html
============================= =============================
Nin is a clean and flat theme for [Twister](http://twister.net.co) [(twister-core on github)](https://github.com/miguelfreitas/twister-core) based on [twister-html](https://github.com/miguelfreitas/twister-html) Nin is a clean and flat theme [Twister](http://twister.net.co) [(twister-core on github)](https://github.com/miguelfreitas/twister-core) based on the html client [twister-html](https://github.com/miguelfreitas/twister-html)
This is experimental by now.
Maproad
-- cleaning sass
--

1
css/fonts/OpenSans-Bold.ttf
Unescape View File

@ -1 +0,0 @@
../../../css/OpenSans-Bold.ttf

1
css/fonts/OpenSans-Regular.ttf
Unescape View File

@ -1 +0,0 @@
../../../css/OpenSans-Regular.ttf

1
css/fonts/Symbola.ttf
Unescape View File

@ -1 +0,0 @@
../../../css/Symbola.ttf

2722
css/style.css
View File

File diff suppressed because it is too large Load Diff

5
js/theme_option.js
Unescape View File

@ -5,7 +5,6 @@ $(document).ready(function()
$('.right').css('height', windowHeight - 100); $('.right').css('height', windowHeight - 100);
$('.module.who-to-follow').detach().appendTo($('.dashboard.left')); $('.module.who-to-follow').detach().appendTo($('.dashboard.left'));
$('.module.twistday-reminder').detach().appendTo($('.dashboard.left')); $('.module.twistday-reminder').detach().appendTo($('.dashboard.left'));
}); });
@ -112,8 +111,8 @@ function openModal(modal) {
.append(modal.content); .append(modal.content);
else else
modal.content = modal.self.find('.modal-content'); modal.content = modal.self.find('.modal-content');
modal.self.prependTo('.right').fadeIn('fast'); modal.self.prependTo('body').fadeIn('fast');
$('html, body').animate({scrollTop:0},300);
if (modal.classBase === '.modal-wrapper') { if (modal.classBase === '.modal-wrapper') {
modal.content.outerHeight(modal.self.height() - modal.self.find('.modal-header').outerHeight()); modal.content.outerHeight(modal.self.height() - modal.self.find('.modal-header').outerHeight());

86
sass/_commons.sass
Unescape View File

@ -2,23 +2,27 @@
outline: none!important outline: none!important
+box-sizing(border-box) +box-sizing(border-box)
li
list-style: none
html, body html, body
height: 100% height: 100%
min-height: 100% min-height: 100%
background: $main-background-color
color: $defaut-font-color color: $defaut-font-color
font: .95em/1.3em $main-font-family position: absolute
width: 100%
html
font-size: $global-font-size
background-color: $main-background-color
+background-image(linear-gradient(to top right, #aaa, $main-background-color,$main-background-color,$main-background-color, #aaa) )
background-attachment: fixed
body
font-size: $main-font-size
line-height : $main-line-height
font-family : $main-font-family
font-weight: 400 font-weight: 400
br
display: block
img
background: $main-background-color
+border-radius(2px)
a a
text-decoration: none text-decoration: none
@ -28,34 +32,47 @@ a
text-decoration: none text-decoration: none
i i
text-decoration: underline text-decoration: underline
font-style: normal
i, em
font-style: italic
p strong, b
padding: 5px 0 font-weight: 600
h1
font-size: 1.1em
text-transform: uppercase
letter-spacing: 0.07em
font-weight: 700
line-height: 1.1em
h2, h3 h2
font-size: 1.1em font-size: 1.1em
text-transform: uppercase text-transform: uppercase
letter-spacing: 0.07em letter-spacing: 0.07em
font-weight: 400 font-weight: 400
line-height: 1.8em line-height: 1.1em
margin-bottom: 10px
h3 h3
font-weight: 700 font-size: 1.1em
font-size: 1em
textarea, input[type=text]
font: .95em/1.3em $main-font-family
font-weight: 400 font-weight: 400
line-height: 1.1em
br
display: block
textarea, input
background: white
display: block
border: none
/* isFollowing */ /* isFollowing */
.isFollowing:after .isFollowing:after
color: $main-color-color color: $main-color-color
content: '\e806' content: '\e806'
font-family: 'fontello' font-family: $symbol-font-family
padding-left: 2px padding-left: 2px
display: inline display: inline
font-size: 10px font-size: 10px
@ -66,32 +83,3 @@ textarea, input[type=text]
h3 & h3 &
display: none display: none
/************** BUTTONS ************/
button, a.button
padding: 6px 8px
font-size: 13px
display: inline-block
line-height: 1em
font-weight: 500
margin: 0
float: none
text-shadow: 2px 2px 0 rgba(black,0)
+transition-property(background)
+transition-duration(.1s)
color: white
background-color: #6F8E97
+border-radius(2px)
border: none
font-family: 'fontello', 'Roboto'
cursor: pointer
&:hover
background: $main-color-color
text-shadow: 2px 2px 0 rgba(black,.1)
&.disabled
opacity: .5
background-color: #999
&:hover
color: $bloc-background-color

50
sass/_grid.sass
Unescape View File

@ -1,50 +0,0 @@
.clear-fix:after
content: ''
display: table
clear: both
// grille ultra-simple pour projets ultra-simples
$grid_width : 100% // largeur de la grille en %
$grid_max_width : 1080px // largeur max. en px
$grid_cols : 12 // nombre de colonnes
$grid_gut : 0 // largeur de la goutière en %
$grid_col : ($grid_width - ($grid_gut * ($grid_cols - 1))) / $grid_cols
$grid_col_push : $grid_width/$grid_cols
$class-col : col !default
$class-push : push !default
// contenant
.wrap
width: $grid_width
max-width: $grid_max_width
margin: 0 auto
background : transparent
position: relative
z-index: 10
+box-sizing(border-box)
@extend .clear-fix
.col
float: left
margin: 0 $grid_gut 0 0
+box-sizing(border-box)
@extend .clear-fix
@for $i from 1 through $grid_cols
$j: $i - 1
.#{$class-col}-#{$i}
width: ($i * $grid_col) + ($j * $grid_gut)
.#{$class-col}-#{$i}-full
width: ($i * $grid_col_push)
float: left
margin: 0
+box-sizing(border-box)
@extend .clear-fix
.#{$class-push}-#{$i}
margin-left: ($i * $grid_col) + ($i * $grid_gut)
.col.last, .#{$class-col}-#{$grid_cols}
margin-right: 0
.col.first
clear : left

41
sass/_login.sass
Unescape View File

@ -1,55 +1,56 @@
.login .header-bold .login
.header-bold
display: block display: block
width: 720px width: 720px
margin: 0px auto 12px auto margin: 0px auto 12px auto
.login .module .module
display: block
width: 720px
padding: 32px 40px
margin: 8px auto
background: white background: white
@extend .col
@extend .col-6
padding: $space
.login .module p p
margin-bottom: 5px margin-bottom: 5px
.login .module input input
padding: 5px 10px padding: 5px 10px
background: #f3f3f3 background: #f3f3f3
border: solid 1px #dcdcdc border: solid 1px #dcdcdc
transition: box-shadow 0.3s, border 0.3s transition: box-shadow 0.3s, border 0.3s
font-size: 14px font-size: 14px
.login .module input:focus, input:focus, select:focus
.login .module select:focus
background: white background: white
transition: background-color 100ms linear transition: background-color 100ms linear
border-bottom: solid 2px $color-green border-bottom: solid 2px $color-green
.login .module select select
height: 30px height: 30px
padding: 3px 30px 3px 10px padding: 3px 30px 3px 10px
margin: 0 margin: 0
border: 1px solid #ccc border: 1px solid #ccc
font-size: 14px font-size: 14px
.login .module span.availability span.availability
margin-left: 10px margin-left: 10px
color: #45474d color: #45474d
.with-nickname, .import-secret-key, .create-user
margin-top: 10px
.login .module:nth-child(2) div,
.login .module:nth-child(3) div:nth-child(2), .module:nth-child(2) div,
.login .secret-key-import, .module:nth-child(3) div:nth-child(2),
.login .username-import .secret-key-import,
.username-import
margin-top: 20px margin-top: 20px
margin-bottom: 20px margin-bottom: 20px
margin-left: 16px margin-left: 16px
.login .create-user, .create-user,
.login .import-secret-key .import-secret-key
display: block display: block
margin-left: auto margin-left: auto
margin-right: 16px margin-right: 16px
.with-nickname, .import-secret-key, .create-user
margin-top: 10px

34
sass/_menu.sass
Unescape View File

@ -1,18 +1,24 @@
// vars for the menu
$menu-height : 50px
$menu-font-color: $defaut-font-color
.userMenu .userMenu
width: 100% width: 100%
position: fixed position: fixed
height: $menu-height
left: 0 left: 0
margin: 0 margin: 0
//+background-image(radial-gradient(at top , $color-green, #6F8E97,$color-blue) ) background-color: #F5F5F5
background: $main-color-dark //+background-image(radial-gradient(at top , $color-green,$color-blue) )
z-index: 2 z-index: 2
ul ul
@extend .clear-fix @extend .clear-fix
+box-sizing(border-box) +box-sizing(border-box)
width: $site-width width: 100%
max-width: 100% max-width: 75%
margin: auto margin: 0
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
@ -21,19 +27,19 @@
position: relative position: relative
display: block display: block
> a > a
line-height: 50px line-height: $menu-height
padding: 0 .5em padding: 0 .5em
display: inline-block display: inline-block
color: rgba(white, 0.7)!important color: rgba($menu-font-color, 0.7)!important
font-size: 1.2em font-size: 1em
position: relative position: relative
font-weight: 400 font-weight: 500
+box-sizing(border-box) +box-sizing(border-box)
&:hover &:hover
color: white!important color: $menu-font-color!important
&.current a &.current a
color: white!important color: $menu-font-color!important
+text-shadow(1px 1px 0 rgba(#000,.2)) //+text-shadow(1px 1px 0 rgba(#000,.2))
/* Menu specific entries */ /* Menu specific entries */
@ -71,7 +77,7 @@
float: right float: right
position: relative position: relative
margin-right: 0 margin-right: 0
color: white color: $menu-font-color
+ a + a
color: $main-color-dark color: $main-color-dark
&.userMenu-search &.userMenu-search
@ -86,5 +92,5 @@
&.userMenu-config > a &.userMenu-config > a
@extend .icon-cog @extend .icon-cog
@extend .extend-icon @extend .extend-icon
font-size: 1.5em font-size: 1.5rem

408
sass/_modal.sass
Unescape View File

@ -0,0 +1,408 @@
/*********** POPUP MODAL **************/
// vars modal
$header-modal-height : $menu-height
.modal-wrapper
background: white
z-index: 3000
width: 25%
position: fixed
+box-sizing(border-box)
@extend .box-shadow
height: 100%
right: 0
bottom: 0
overflow: hidden
.post-area-new
padding: 10px
.modal-blackout
background: rgba(0, 0, 0, 0)
z-index: -1
position: fixed
left: 0
top: 0
width: 0
height: 0
.modal-content
@extend .clear-fix
background: $background-light
overflow-y: auto
.postboard-news
position: absolute
display: block
right: 0
z-index: 20
@extend .color-1
h2 span
display: none
.modal-header
position: relative
background: $color-blue
height: $header-modal-height
+box-sizing(border-box)
@extend .clear-fix
border-bottom: 1px solid $background-light
h3
padding-left: 20px
line-height: $header-modal-height
font-weight: 500
font-size: 1rem
color: white
.modal-close
@extend .extend-icon
@extend .icon-cancel
position: absolute
right: 10px
top: 0
font-size: 14px
line-height: $header-modal-height
cursor: pointer
color: rgba(white , 0.7)
&:hover
color: white
b
display: none
.mark-all-as-read
float: right
cursor: pointer
font-size: 1.3em
line-height: $header-modal-height
padding: 0 5px
color: white
transition: all .1s linear
display: none
.modal-back:hover, .mark-all-as-read:hover
color: white
.mark-all-as-read
@extend .extend-icon
@extend .icon-ok
.modal-back
@extend .extend-icon
@extend .icon-left
position: absolute
right: 35px
top: 0
font-size: 14px
line-height: $header-modal-height
cursor: pointer
color: rgba(white , 0.7)
&:hover
color: white
b
display: none
/* MODAL */
.modal-content
width: 100%
.postboard
padding: 0
clear: none!important
position: relative
width: 100%
margin: auto
h2
display: block
.post-text
margin: 0 0 0 40px
.post-photo
width: 30px
height: 30px
img
width: 100%
height: 100%
//+border-radius(50%)
/*********** POPUP PROMPT *************/
.prompt-wrapper
background: rgba( 255, 255,255, 1.0 )
z-index: 5
position: fixed
top: 50%
left: 50%
width: 600px
margin-left: -300px
@extend .box-shadow
.modal-buttons
padding: 10px
text-align: right
button:last-child
padding: 5px 20px
/************ FOLLOWING-CONFIG MODAL **********/
.prompt-wrapper.following-config-modal
margin-top: -100px
.modal-content
padding: 10px
text-align: center
.modal-buttons
display: none
h2
text-transform: none
.following-config-method-buttons
.public-following
background-color: $color-green
margin: 0px 2px
padding: 6px 16px
/************ RETWIST POSTS MODAL **********/
.prompt-wrapper.reTwist
&.prompt-wrapper
margin-top: -110px
.modal-content
padding: 20px 15px
.modal-buttons
.modal-propagate
background-color: $color-green
.post-expand, .post-interactions
display: none
/********* REPLY POSTS MODAL***************/
.prompt-wrapper.reply
&.prompt-wrapper
margin-top: -110px
.modal-buttons, .post-expand, .post-interactions
display: none
.post-area
padding-bottom: 6px
/****** DIRECT MESSAGES MODAL**********/
.modal-wrapper.directMessages
.post-area-new
display: none
z-index: 5
background: $main-background-color
position: absolute
bottom: 0
width: 100%
padding: 0!important
.modal-header
h3 span
display: inline!important
.modal-content
+box-sizing(border-box)
width: 100%
.post-photo
height: 48px
width: 48px
.post-text
margin-left: 58px
font-size: .9em
.post-info-name
float: none
.post-info-tag
line-height: 1em
padding: 0
display: inline
font-size: 80%
margin: 0 0 0 1em
.post-info-sent
position: absolute
left: 50%
top: 10px
display: none
.direct-messages-list .post
padding: 20px
cursor: pointer
&:after
content: ""
font-family: $symbol-font-family
position: absolute
right: 5px
top: 50%
font-size: 1.1em
margin: -6px 0 0 0
color: rgba(0, 0, 0, 0.4)
display: none
.direct-messages-list
.post:hover:after
display: block
.direct-messages-thread
padding-bottom: 150px
.post
@extend .clear-fix
background: none
left: 0
margin: 0px 10px 20px 10px
cursor: default
.post-info-time
float: none
display: block
text-align: center
font-size: 10px
margin: 10px 0
cursor: default
&:hover
color: $main-color-light
.post-text:after, .post-text:nth-child(2n):after
content: ""
width: 1px
background: transparent
position: absolute
top: 10px
white-space: normal
.post-text:after
border-top: solid 7px transparent
border-bottom: solid 7px transparent
border-right: solid 7px white
left: -7px
.post-text
background: white
margin-right: 60px
margin-left: 60px
position: relative
display: inline-block
max-width: 300px
font-size: .9em
padding: 5px 10px
z-index: 4
float: left
word-wrap: break-word
max-width: 60%
min-height: 15px
.post-photo
position: absolute
left: 0
top: 10px
.post.sent
.post-text:after
border-top: solid 7px transparent
border-bottom: solid 7px transparent
border-right: none
border-left: solid 7px white
right: -7px
left: auto
.post-text
float: right
.post-photo
position: absolute
right: 0
left: auto
/********* 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
.modal-content
padding: 0
ol
margin: 5px
.open-profile-modal
&:hover
text-decoration: none
.postboard
h2
display: none
/******* WHO TO FOLLOW MODAL*******/
.modal-wrapper.who-to-follow-modal
.modal-content
padding: 15px
+box-sizing(border-box)
ol
margin: 5px
.open-profile-modal
&:hover
text-decoration: none
.twister-user
position: relative
padding: 5px
.twister-user-info
text-align: left
font-size: .8rem
line-height: 1rem
width: 80%
button
position: absolute
right: 0
top: 5%
@extend .small
.bio
color: rgba(0, 0, 0, 0.6)
font-style: italic
padding: .5rem

70
sass/_network.sass
Unescape View File

@ -1,53 +1,44 @@
/********** LOGIN AND NETWORK PAGES *******/ /********** LOGIN AND NETWORK PAGES *******/
.network.singleBlock .network
&.singleBlock
@extend .clear-fix @extend .clear-fix
ul ul
padding-left: 20px line-height: 2rem
li padding: 2rem
line-height: 36px
font-size: 13px
.module .module
@extend .col @extend .col
@extend .col-6 @extend .col-6
padding: 1.5%
background: $bloc-background-color background: $bloc-background-color
+box-shadow(0 1px 1px rgba(#555, .1))
margin-bottom: 50px
&:last-child &:last-child
@extend .last @extend .last
h2 h2
display: block +background-image(linear-gradient(to right , $color-green, #5E80A2) )
h3
font-weight: 500
text-transform: none
border-bottom: 1px solid rgba(black, 0.2)
margin: 20px 0 10px 0
.spam-msg
.singleBlock .spam-msg
resize: none resize: none
width: 100% width: 100%
display: block display: block
border-radius: 3px padding: $space
padding: 4px height: 180px
font-size: 13px
height: 80px
border: solid 1px rgba(0, 0, 0, 0.1) border: solid 1px rgba(0, 0, 0, 0.1)
line-height: 20px
position: relative position: relative
margin-left: -20px margin: $space 0
margin-bottom: 10px font-family: $main-font-family
.highlight .highlight
background: $bloc-background-color font-size: 1.2rem
padding: 5px 8px display: block
line-height: 1.7 margin: $space 0
display: inline-block
span.connection-status span.connection-status
line-height: 1em
font-weight: 500 font-weight: 500
font-size: 1em
&:before &:before
content: "" content: ""
display: inline-block display: inline-block
@ -61,9 +52,30 @@ span.connection-status
.character-limit .character-limit
float: right float: right
margin-right: 18px margin-right: $space
.connections span, .known-peers, .dht-nodes, .blocks, .last-block-time, .mining-difficulty .connections span, .known-peers, .dht-nodes, .blocks, .last-block-time, .mining-difficulty
color: #333 color: $main-color-color
font-weight: 700 font-weight: 700
font-family: Arial
font-size: 95%
h2
font-weight: 400
+background-image(linear-gradient(to left , $color-green, #5E80A2) )
padding: 1rem 2rem
color: white
h3
font-weight: 600
margin-top: 2*$space
padding: 0 1.5rem
+box-sizing(content-box)
&:after
display: block
content: ''
height: 1px
width: 100%
background: rgba(#5F81A1,.5)
margin-top: $space

116
sass/_postboard.sass
Unescape View File

@ -1,10 +1,17 @@
/************* POST BOARD *************/ /************* POST BOARD *************/
.postboard
@extend .col
@extend .col-5
// vars for postboard
$avatar-width : 48px
.postboard
float: left
width: 50%
padding: 20px
h2
display: none
.postboard-posts .postboard-posts
position: relative position: relative
z-index: 1 z-index: 1
@ -12,53 +19,41 @@
.postboard-news .postboard-news
display: none display: none
.modal-content &
line-height: 30px
position: absolute
right: 0
top: 40px
font-weight: 900
display: block
padding: 0 20px
color: white
+text-shadow(1px 1px 1px rgba(black, .1))
background: $main-color-color
display: block
.post .post
background: $bloc-background-color background: $bloc-background-color
box-sizing: border-box
position: relative position: relative
margin-bottom: 1px margin-bottom: 1px
transition: margin .4s ease-out +transition-property(margin)
-moz-transition: margin .4s ease-out +transition-duration(.4s)
+transition-timing-function(ease-out)
.post, .original.post, .post.open .post, .original.post, .post.open
background: $bloc-background-color
position: relative position: relative
.module.open .module.open
.post .post
color: darken($defaut-font-color, 15%) color: darken($defaut-font-color, 15%)
.post:hover .post:hover
color: darken($defaut-font-color, 15%) color: darken($defaut-font-color, 15%)
.post-data .post-data
padding: 15px padding: $space
.post.open .post.open
.original, .related .original, .related
margin-bottom: 1px margin-bottom: 1px
.postboard-posts > .post .postboard-posts > .post
+box-shadow(0 1px 1px rgba(#555, .1))
&.open &.open
margin-top: 20px margin-top: $space
margin-bottom: 20px margin-bottom: $space
&:after &:after
content: "" content: ""
position: absolute position: absolute
@ -77,6 +72,8 @@
.open .open
background: none background: none
@extend .box-shadow
&:hover &:hover
background: none background: none
@ -85,8 +82,8 @@
display: inline-block display: inline-block
float: left float: left
vertical-align: middle vertical-align: middle
width: 48px width: $avatar-width
height: 48px height: $avatar-width
overflow: hidden overflow: hidden
img img
width: 100% width: 100%
@ -94,17 +91,13 @@
//+border-radius(50%) //+border-radius(50%)
.post-info-name .post-info-name
font-weight: 700 font-weight: 600
font-size: 1em
line-height: 14px
color: inherit color: inherit
text-decoration: none text-decoration: none
display: inline-block display: inline-block
padding-left: 10px
float: left float: left
margin-left: 10px
.post-info-name:hover .post-info-name:hover
@ -129,12 +122,20 @@
color: lighten($dark-grey,5%) color: lighten($dark-grey,5%)
.post-text .post-text
margin: 0 0 0 68px margin: 0 0 0 ($avatar-width +10)
word-wrap: break-word word-wrap: break-word
min-height: 30px min-height: $avatar-width
padding: 0 padding: 0
samp samp
background: #eee background: $background-light
font-size: .9rem
line-height: .9rem
display: inline-block
padding: 5px 8px
+border-radius(2px)
color: #333
font-weight: 500
font-family: monospace
.post-context .post-context
@ -161,7 +162,6 @@
font-size: 13px font-size: 13px
color: $dark-grey color: $dark-grey
.post-retransmited-icon .post-retransmited-icon
display: none display: none
@ -186,20 +186,25 @@
&:hover &:hover
color: lighten($dark-grey,5%) color: lighten($dark-grey,5%)
.post-reply .post-reply, .post-propagate, .post-favorite
@extend .extend-icon @extend .extend-icon
padding-left: 10px
display: none
&:hover
color: lighten($dark-grey,5%)
.post-reply
@extend .icon-comment @extend .icon-comment
.post-propagate .post-propagate
@extend .extend-icon
@extend .icon-twistagain @extend .icon-twistagain
.post-favorite .post-favorite
display: none!important display: none!important
@extend .extend-icon
@extend .icon-star @extend .icon-star
.post .show-more .post
.show-more
display: inline-block display: inline-block
float: right float: right
font-size: 12px font-size: 12px
@ -214,6 +219,7 @@
display: block display: block
.expanded-post .expanded-post
.post-expand, .post-reply, .post-propagate, .post-favorite .post-expand, .post-reply, .post-propagate, .post-favorite
color: lighten($dark-grey,30%) color: lighten($dark-grey,30%)
&:hover &:hover
@ -223,9 +229,6 @@
display: none display: none
margin: 0 margin: 0
.post-reply, .post-propagate, .post-favorite
padding-left: 10px
display: none
.post:hover, .original.open .post-interactions, .post:hover .original .post-interactions, .related.post:hover .post:hover, .original.open .post-interactions, .post:hover .original .post-interactions, .related.post:hover
.post-reply, .post-propagate, .post-favorite .post-reply, .post-propagate, .post-favorite
@ -238,8 +241,7 @@
.post-reply, .post-propagate/*, .post-favorite*/ .post-reply, .post-propagate/*, .post-favorite*/
display: inline-block!important display: inline-block!important
.post-reply:hover, .post-propagate:hover, .post-favorite:hover
color: lighten($dark-grey,5%)
.expanded-content .expanded-content
display: none display: none
@ -309,25 +311,3 @@
border-left: solid 3px $main-color-color border-left: solid 3px $main-color-color
margin-left: 1px margin-left: 1px
/* MODAL */
.modal-content
width: 100%
.postboard
padding: 0
clear: none!important
position: relative
width: 100%
margin: auto
.post-text
margin: 0 0 0 40px
.post-photo
width: 30px
height: 30px
img
width: 100%
height: 100%
//+border-radius(50%)

39
sass/_profile.sass
Unescape View File

@ -14,22 +14,7 @@ $modal-postboard-post-height: 100%
***************************************/ ***************************************/
.profile-modal .profile-modal
.profile-data
display: block
margin: auto
padding-top: 0
@extend .clear-fix
li
display: inline
margin: 0 5px
float: none
a
display: inline
span
&.posts-count, &.following-count, &.followers-count
display: inline-block
padding-right: 5px
.modal-content .modal-content
overflow: hidden overflow: hidden
@ -85,11 +70,6 @@ $modal-postboard-post-height: 100%
padding: 10px padding: 10px
h1
font-size: 22px
font-weight: bold
display: inline-block
padding-top: 10px
&:before &:before
content: "" content: ""
@ -123,19 +103,25 @@ $modal-postboard-post-height: 100%
padding: 10px padding: 10px
font-style: italic font-style: italic
text-align: center text-align: center
font-size: .8em
.profile-card-buttons
text-align: center
padding: 0 0 $space 0
.direct-messages-with-user, .follow, .unfollow
display: inline-block
position: static
.isFollowing:after .isFollowing:after
font-size: 15px font-size: 15px
position: absolute position: absolute
.follow
@extend .color-1
.unfollow .unfollow
background: $main-color-light @extend .color-2
.twister-user-info .twister-user-info
@extend .clear-fix @extend .clear-fix
@ -143,8 +129,7 @@ $modal-postboard-post-height: 100%
width: 100% width: 100%
padding: 0 padding: 0
.follow
background: $main-color-color
.known-followers .known-followers
text-align: center text-align: center

57
sass/_utils.sass
Unescape View File

@ -1,5 +1,62 @@
.box-shadow
+box-shadow(0 8px 13px rgba(#333, .1))
.clear-fix .clear-fix
&:after // clearfix &:after // clearfix
content: "" content: ""
display: table display: table
clear: both clear: both
/************** BUTTONS ************/
button, a.button
padding: .6rem 1rem
display: inline-block
line-height: .75rem
letter-spacing: 0.07rem
font-size: .75rem
position: relative
z-index: 10
font-weight: 300
margin: 2px
text-transform: uppercase
+transition-property(background, border-color)
+transition-duration(.1s)
color: #444
background: #F8F8F8
border: 1px solid darken( #F8F8F8 , 5%)
font-family: $symbol-font-family, $main-font-family
cursor: pointer
&:hover
border-color: darken( #F8F8F8 , 15%)
&.disabled
opacity: .5
color: #999
background-color: $bloc-background-color
&:hover
color: #666
+box-shadow(1px 1px 0 rgba(#444, .3))
&.color-1
background: $color-blue
border-color: darken($color-blue, 5%)
color: white
font-weight: 500
&:hover
border-color: darken($color-blue, 15%)
&.color-2
background: #C3C3C3
border-color: darken(#C3C3C3, 5%)
color: white
font-weight: 500
&:hover
border-color: darken(#C3C3C3, 15%)
&.small
padding: .3rem .5rem
font-weight: 700
font-size: .6rem
line-height: .6rem

28
sass/_var.sass
Unescape View File

@ -1,10 +1,13 @@
//these are the main variables used in the sass file //these are the main variables used in the sass file
$grid_width : 100% // largeur de la grille en %
$grid_max_width : 96% // largeur max. en px // G R I D
$grid_cols : 12 // nombre de colonnes
$grid_gut : 2% // largeur de la goutière en % $grid_width : 100% // grid width %
$grid_max_width : 100% // max width
$grid_cols : 12 // cols number
$grid_gut : 2.5% // gut width %
$grid_col : ($grid_width - ($grid_gut * ($grid_cols - 1))) / $grid_cols $grid_col : ($grid_width - ($grid_gut * ($grid_cols - 1))) / $grid_cols
$class-col : col !default $class-col : col !default
@ -21,12 +24,12 @@ $class-col : col !default
width: ($i * $grid_col) + ($j * $grid_gut) width: ($i * $grid_col) + ($j * $grid_gut)
// vars used for the website
$site-width : $grid_max_width $site-width : $grid_max_width
$gut-width : $grid_gut $gut-width : $grid_gut
$indicators-width : 55px $space : 1rem
$postboard-modal-width : auto // colors
$light-grey: #e9e9e9 $light-grey: #e9e9e9
$dark-blue: #38434E $dark-blue: #38434E
@ -34,8 +37,8 @@ $color-yellow: #E6953C
$color-pink: #BF6B6C $color-pink: #BF6B6C
$color-green: #B4C669 $color-green: #B4C669
$color-red: #EF5D43 $color-red: #EF5D43
$color-blue: #446CB3 $color-blue: #00AA8B
$dark-grey : #66686B $dark-grey : #444
$main-color-light: #aaa $main-color-light: #aaa
$main-color-dark: #596073 $main-color-dark: #596073
@ -47,10 +50,13 @@ $background-light: lighten($main-background-color, 4% )
$defaut-font-color: $dark-grey $defaut-font-color: $dark-grey
$global-font-size : 15px
$main-font-size : 1rem
$main-line-height : 1.4rem
/* FONTS */ /* FONTS */
$main-font-family: "Roboto", sans-serif $main-font-family: "Roboto", sans-serif
$symbol-font-family: "fontello" $symbol-font-family: "fontello"
$serif-font-family: "Droid" $serif-font-family: "Droid", serif
$alt-font-family : "Laranja", serif

446
sass/style.sass
Unescape View File

@ -2,15 +2,22 @@
@import compass @import compass
@import 'compass/reset' @import 'compass/reset'
@import 'compass/utilities' @import 'compass/utilities'
// utils
@import _var @import _var
@import _commons
@import _utils @import _utils
// layout
@import _menu @import _menu
@import _modal
@import _profile @import _profile
@import _postboard @import _postboard
@import _following @import _following
@import _login @import _login
@import _network @import _network
@import _commons
@import _tabs @import _tabs
@ -48,22 +55,21 @@
.wrapper .wrapper
width: $site-width width: $site-width
max-width: 100% max-width: 100%
margin: 0 auto margin: 0
padding-top: 70px padding-top: $menu-height
position: relative position: relative
z-index: 1 z-index: 1
min-height: 100% min-height: 100%
.dashboard .dashboard
&.left, &.right &.left, &.right
@extend .col float: left
@extend .col-3 width: 25%
position: relative position: relative
&.right &.right
@extend .last @extend .last
height: 0 height: 0
background: #ededed
@extend .col-4
@ -81,8 +87,7 @@
right: -10px right: -10px
width: 250px width: 250px
overflow: hidden overflow: hidden
border-bottom: solid 2px $main-color-color @extend .box-shadow
box-shadow: 8px 10px 15px 0px rgba(0,0,0, .3)
.userMenu-search .dialog-modal:after .userMenu-search .dialog-modal:after
right: auto right: auto
@ -153,42 +158,20 @@ ul.userMenu-search-profiles
clear: both clear: both
.follow-suggestions
button
.follow .unfollow
position: absolute
bottom: 10px
right: 10px
&:hover
background-color: $main-color-light
.follow
background-color: $main-color-color
.unfollow
background-color: $main-color-dark
li
position: relative
box-sizing: border-box
background: $bloc-background-color
@extend .clear-fix
@extend .col
@extend .col-3
min-height: 100px
margin-bottom: 20px
&:nth-child(4n)
@extend .last
&:nth-child(4n+1)
clear: left
/***************** MINI PROFILE *******************************/ /***************** MINI PROFILE *******************************/
.mini-profile .mini-profile
@extend .box-shadow
.mini-profile-info .mini-profile-info
position: relative position: relative
text-align: center text-align: center
background: $bloc-background-color background: $bloc-background-color
padding: 20px 0 padding: 20px 0
a.button a.button
background: $main-color-light background: $main-color-light
margin: 1em auto margin: 1em auto
@ -200,6 +183,7 @@ ul.userMenu-search-profiles
@extend .clear-fix @extend .clear-fix
.post-area-new .post-area-new
@extend .open @extend .open
+box-shadow(none)
padding: 0 padding: 0
margin: 0 margin: 0
textarea textarea
@ -289,14 +273,9 @@ ul.userMenu-search-profiles
background: $bloc-background-color background: $bloc-background-color
li li
display: block display: inline
@extend .col margin: 0 5px
@extend .col-4 float: none
+box-sizing(border-box)
&.current a
border-bottom: 3px solid $main-color-color
&:last-child
@extend .last
a a
color: $dark-grey color: $dark-grey
display: inline-block display: inline-block
@ -306,12 +285,10 @@ ul.userMenu-search-profiles
color: $main-color-light color: $main-color-light
span span
&.posts-count, &.following-count, &.followers-count &.posts-count, &.following-count, &.followers-count
font-weight: 900 display: inline-block
display: block padding-right: 5px
line-height: 15px &:last-child
display: none
.mini-profile-info a:hover .mini-profile-info a:hover
text-decoration: none text-decoration: none
@ -353,7 +330,6 @@ ul.userMenu-search-profiles
.post-area-new .post-area-new
textarea textarea
resize: none resize: none
box-shadow: none!important
+box-sizing(border-box) +box-sizing(border-box)
width: 100% width: 100%
display: block display: block
@ -369,7 +345,7 @@ ul.userMenu-search-profiles
padding: 3px padding: 3px
margin: 5px 0 margin: 5px 0
&:focus &:focus
border-bottom: solid 2px $color-green border-bottom: solid 1px $main-color-color
#postboard-top #postboard-top
clear: both clear: both
@ -406,8 +382,9 @@ ul.userMenu-search-profiles
float: right float: right
.post-area-new .post-area-new
@extend .open @extend .open
+box-shadow(none)
textarea textarea
margin: 0 0 5px 0 margin: 0 0 10px 0
@ -445,27 +422,6 @@ textarea.splited-post
/******* WHO TO FOLLOW MODAL*******/
.modal-wrapper.who-to-follow-modal
.modal-content
padding: 15px
+box-sizing(border-box)
ol
margin: 5px
.open-profile-modal
&:hover
text-decoration: none
.twister-user
position: relative
padding: 5px
.bio
color: rgba(0, 0, 0, 0.6)
font-style: italic
/******** WHO TO FOLLOW ********/ /******** WHO TO FOLLOW ********/
@ -475,6 +431,7 @@ textarea.splited-post
background: white background: white
padding: 20px padding: 20px
width: 100% width: 100%
@extend .box-shadow
li li
width: 100% width: 100%
min-height: auto min-height: auto
@ -511,12 +468,7 @@ textarea.splited-post
border-bottom: 1px solid $background-light border-bottom: 1px solid $background-light
&:nth-child(4n) &:nth-child(4n)
@extend .last @extend .last
.twister-user-info
width: 80%
button
position: absolute
right: 0
top: 5%
img.twister-user-photo img.twister-user-photo
@ -618,6 +570,7 @@ img.twister-user-photo
margin: 0 0 20px 0 margin: 0 0 20px 0
background: white background: white
padding: 20px padding: 20px
@extend .box-shadow
small small
display: none display: none
h3 h3
@ -650,346 +603,13 @@ ol.toptrends-list
.twistday-reminder .twistday-reminder
width: 100% width: 100%
background: white background: white
@extend .box-shadow
@extend .clear-fix @extend .clear-fix
padding: 20px padding: 20px
small small
display: none display: none
/*********** POPUP MODAL **************/
.modal-wrapper
background: white
z-index: 3000
width: 100%
position: absolute
+box-sizing(border-box)
height: 100%
left: 0
top: 0
overflow: hidden
.post-area-new
padding: 10px
.modal-blackout
background: rgba(0, 0, 0, 0)
z-index: -1
position: fixed
left: 0
top: 0
width: 0
height: 0
.modal-content
@extend .clear-fix
background: $background-light
overflow-y: auto
.postboard h2
position: fixed
z-index: 2
margin-top: -60px
margin-left: -60px
span
display: none
.modal-header
position: relative
background: $main-color-dark
height: 40px
+box-sizing(border-box)
@extend .clear-fix
border-bottom: 1px solid $background-light
h3
padding-left: 20px
color: white
line-height: 40px
.modal-close
@extend .extend-icon
@extend .icon-cancel
position: absolute
right: 10px
top: 0
font-size: 14px
line-height: 40px
cursor: pointer
color: rgba(white , 0.7)
&:hover
color: white
b
display: none
.mark-all-as-read
float: right
cursor: pointer
font-size: 1.3em
line-height: 40px
padding: 0 5px
color: white
transition: all .1s linear
display: none
.modal-back:hover, .mark-all-as-read:hover
color: white
.mark-all-as-read
@extend .extend-icon
@extend .icon-ok
.modal-back
@extend .extend-icon
@extend .icon-left
position: absolute
right: 35px
top: 0
font-size: 14px
line-height: 40px
cursor: pointer
color: rgba(white , 0.7)
&:hover
color: white
b
display: none
/*********** POPUP PROMPT *************/
.prompt-wrapper
background: rgba( 255, 255,255, 1.0 )
z-index: 5
position: fixed
top: 50%
left: 50%
width: 600px
margin-left: -300px
box-shadow: 0 0 30px rgba( 0, 0, 0, .6 )
.modal-buttons
padding: 10px
text-align: right
button:last-child
padding: 5px 20px
/************ FOLLOWING-CONFIG MODAL **********/
.prompt-wrapper.following-config-modal
margin-top: -100px
.modal-content
padding: 10px
text-align: center
.modal-buttons
display: none
h2
text-transform: none
.following-config-method-buttons
.public-following
background-color: $color-green
margin: 0px 2px
padding: 6px 16px
/************ RETWIST POSTS MODAL **********/
.prompt-wrapper.reTwist
&.prompt-wrapper
margin-top: -110px
.modal-content
padding: 20px 15px
.modal-buttons
.modal-propagate
background-color: $color-green
.post-expand, .post-interactions
display: none
/********* REPLY POSTS MODAL***************/
.prompt-wrapper.reply
&.prompt-wrapper
margin-top: -110px
.modal-buttons, .post-expand, .post-interactions
display: none
.post-area
padding-bottom: 6px
/****** DIRECT MESSAGES MODAL**********/
.modal-wrapper.directMessages
.post-area-new
display: none
z-index: 5
background: $main-background-color
position: absolute
bottom: 0
width: 100%
padding: 0!important
.modal-header
h3 span
display: inline!important
.modal-content
+box-sizing(border-box)
width: 100%
.post-photo
height: 48px
width: 48px
.post-text
margin-left: 58px
font-size: .9em
.post-info-name
float: none
.post-info-tag
line-height: 1em
padding: 0
display: inline
font-size: 80%
margin: 0 0 0 1em
.post-info-sent
position: absolute
left: 50%
top: 10px
display: none
.direct-messages-list .post
padding: 20px
cursor: pointer
&:after
content: ""
font-family: $symbol-font-family
position: absolute
right: 5px
top: 50%
font-size: 1.1em
margin: -6px 0 0 0
color: rgba(0, 0, 0, 0.4)
display: none
.direct-messages-list
.post:hover:after
display: block
.direct-messages-thread
padding-bottom: 150px
.post
@extend .clear-fix
background: none
left: 0
margin: 0px 10px 20px 10px
cursor: default
.post-info-time
float: none
display: block
text-align: center
font-size: 10px
margin: 10px 0
cursor: default
&:hover
color: $main-color-light
.post-text:after, .post-text:nth-child(2n):after
content: ""
width: 1px
background: transparent
position: absolute
top: 10px
white-space: normal
.post-text:after
border-top: solid 7px transparent
border-bottom: solid 7px transparent
border-right: solid 7px white
left: -7px
.post-text
background: white
margin-right: 60px
margin-left: 60px
position: relative
display: inline-block
max-width: 300px
font-size: .9em
padding: 5px 10px
z-index: 4
float: left
word-wrap: break-word
max-width: 60%
min-height: 15px
.post-photo
position: absolute
left: 0
top: 10px
.post.sent
.post-text:after
border-top: solid 7px transparent
border-bottom: solid 7px transparent
border-right: none
border-left: solid 7px white
right: -7px
left: auto
.post-text
float: right
.post-photo
position: absolute
right: 0
left: auto
/********* 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
.modal-content
padding: 0
ol
margin: 5px
.open-profile-modal
&:hover
text-decoration: none
.postboard
h2
display: none
@ -1126,7 +746,7 @@ ul.dropdown-menu
background-color: #fff background-color: #fff
border: 1px solid rgba(0, 0, 0, 0.2) border: 1px solid rgba(0, 0, 0, 0.2)
border-bottom: solid 2px #B4C669 border-bottom: solid 2px #B4C669
box-shadow: 8px 10px 10px 0px rgba(0,0,0, .2) @extend .box-shadow
li li
> li > a > li > a
padding: 3px 20px padding: 3px 20px

Write Preview
Loading…
Cancel
Save