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. 2724
      css/style.css
  6. 5
      js/theme_option.js
  7. 156
      sass/_commons.sass
  8. 50
      sass/_grid.sass
  9. 111
      sass/_login.sass
  10. 164
      sass/_menu.sass
  11. 408
      sass/_modal.sass
  12. 130
      sass/_network.sass
  13. 486
      sass/_postboard.sass
  14. 353
      sass/_profile.sass
  15. 59
      sass/_utils.sass
  16. 28
      sass/_var.sass
  17. 1536
      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

2724
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());

156
sass/_commons.sass
Unescape View File

@ -1,97 +1,85 @@
* *
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 position: absolute
font: .95em/1.3em $main-font-family width: 100%
font-weight: 400
br html
display: block 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
img
background: $main-background-color
+border-radius(2px)
a a
text-decoration: none text-decoration: none
color: $main-color-color color: $main-color-color
&:hover, &:active &:hover, &:active
color: $main-color-color color: $main-color-color
text-decoration: none text-decoration: none
i i
text-decoration: underline text-decoration: underline
font-style: normal
p
padding: 5px 0 i, em
font-style: italic
h2, h3 strong, b
font-size: 1.1em font-weight: 600
text-transform: uppercase
letter-spacing: 0.07em h1
font-weight: 400 font-size: 1.1em
line-height: 1.8em text-transform: uppercase
margin-bottom: 10px letter-spacing: 0.07em
font-weight: 700
h3 line-height: 1.1em
font-weight: 700
font-size: 1em h2
font-size: 1.1em
textarea, input[type=text] text-transform: uppercase
font: .95em/1.3em $main-font-family letter-spacing: 0.07em
font-weight: 400 font-weight: 400
line-height: 1.1em
h3
font-size: 1.1em
font-weight: 400
line-height: 1.1em
br
display: block
textarea, input
background: white
display: block
border: none
/* 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
vertical-align: top vertical-align: top
line-height: 10px line-height: 10px
&:hover &:hover
text-decoration: none!important text-decoration: none!important
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

111
sass/_login.sass
Unescape View File

@ -1,55 +1,56 @@
.login .header-bold .login
display: block
width: 720px .header-bold
margin: 0px auto 12px auto display: block
width: 720px
.login .module margin: 0px auto 12px auto
display: block
width: 720px .module
padding: 32px 40px background: white
margin: 8px auto @extend .col
background: white @extend .col-6
padding: $space
.login .module p
margin-bottom: 5px p
margin-bottom: 5px
.login .module input
padding: 5px 10px input
background: #f3f3f3 padding: 5px 10px
border: solid 1px #dcdcdc background: #f3f3f3
transition: box-shadow 0.3s, border 0.3s border: solid 1px #dcdcdc
font-size: 14px transition: box-shadow 0.3s, border 0.3s
font-size: 14px
.login .module input:focus,
.login .module select:focus input:focus, 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
.module:nth-child(2) div,
.login .module:nth-child(2) div, .module:nth-child(3) div:nth-child(2),
.login .module:nth-child(3) div:nth-child(2), .secret-key-import,
.login .secret-key-import, .username-import
.login .username-import margin-top: 20px
margin-top: 20px margin-bottom: 20px
margin-bottom: 20px margin-left: 16px
margin-left: 16px
.create-user,
.login .create-user, .import-secret-key
.login .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

164
sass/_menu.sass
Unescape View File

@ -1,90 +1,96 @@
// vars for the menu
$menu-height : 50px
$menu-font-color: $defaut-font-color
.userMenu .userMenu
width: 100% width: 100%
position: fixed position: fixed
left: 0 height: $menu-height
margin: 0 left: 0
//+background-image(radial-gradient(at top , $color-green, #6F8E97,$color-blue) ) margin: 0
background: $main-color-dark background-color: #F5F5F5
z-index: 2 //+background-image(radial-gradient(at top , $color-green,$color-blue) )
ul
@extend .clear-fix z-index: 2
+box-sizing(border-box) ul
width: $site-width @extend .clear-fix
max-width: 100% +box-sizing(border-box)
margin: auto width: 100%
background: image-url("logo.png") no-repeat 50% 50% max-width: 75%
background-size: 20px margin: 0
li background: image-url("logo.png") no-repeat 50% 50%
float: left background-size: 20px
margin: 0 20px 0 0 li
position: relative float: left
display: block margin: 0 20px 0 0
> a position: relative
line-height: 50px display: block
padding: 0 .5em > a
display: inline-block line-height: $menu-height
color: rgba(white, 0.7)!important padding: 0 .5em
font-size: 1.2em display: inline-block
position: relative color: rgba($menu-font-color, 0.7)!important
font-weight: 400 font-size: 1em
+box-sizing(border-box) position: relative
&:hover font-weight: 500
color: white!important +box-sizing(border-box)
&.current a &:hover
color: white!important color: $menu-font-color!important
+text-shadow(1px 1px 0 rgba(#000,.2)) &.current a
color: $menu-font-color!important
//+text-shadow(1px 1px 0 rgba(#000,.2))
/* Menu specific entries */ /* Menu specific entries */
.userMenu li .userMenu li
&.userMenu-home &.userMenu-home
a span.label a span.label
display: block!important display: block!important
text-align: center text-align: center
.menu-news .menu-news
position: absolute position: absolute
text-align: center text-align: center
display: none display: none
top: 6px top: 6px
right: -6px right: -6px
background: $main-color-color background: $main-color-color
color: #fff color: #fff
width: 15px width: 15px
height: 15px height: 15px
line-height: 15px line-height: 15px
font-size: 10px font-size: 10px
padding: 3px padding: 3px
font-weight: 900 font-weight: 900
+border-radius(50%) +border-radius(50%)
+box-sizing(content-box) +box-sizing(content-box)
+text-shadow(1px 1px 0 rgba(#000, .3)) +text-shadow(1px 1px 0 rgba(#000, .3))
&.show &.show
display: block display: block
&.userMenu-dhtindicator, &.userMenu-connections, &.userMenu-messages &.userMenu-dhtindicator, &.userMenu-connections, &.userMenu-messages
display: none!important display: none!important
&.userMenu-config, &.userMenu-search &.userMenu-config, &.userMenu-search
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
margin: 3px margin: 3px
> input > input
border: 1px solid $main-color-light border: 1px solid $main-color-light
line-height: 12px line-height: 12px
font-size: 12px font-size: 12px
padding: 7px padding: 7px
&:focus &:focus
border-color: $main-color-dark border-color: $main-color-dark
&.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

130
sass/_network.sass
Unescape View File

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

486
sass/_postboard.sass
Unescape View File

@ -1,333 +1,313 @@
/************* POST BOARD *************/ /************* POST BOARD *************/
// vars for postboard
$avatar-width : 48px
.postboard .postboard
@extend .col float: left
@extend .col-5 width: 50%
padding: 20px
h2
.postboard-posts display: none
position: relative .postboard-posts
z-index: 1 position: relative
clear: both z-index: 1
clear: both
.postboard-news
display: none .postboard-news
.modal-content & display: none
line-height: 30px
position: absolute .post
right: 0 background: $bloc-background-color
top: 40px position: relative
font-weight: 900 margin-bottom: 1px
display: block +transition-property(margin)
padding: 0 20px +transition-duration(.4s)
color: white +transition-timing-function(ease-out)
+text-shadow(1px 1px 1px rgba(black, .1))
background: $main-color-color .post, .original.post, .post.open
display: block position: relative
.post
background: $bloc-background-color
box-sizing: border-box
position: relative
margin-bottom: 1px
transition: margin .4s ease-out
-moz-transition: margin .4s ease-out
.post, .original.post, .post.open
background: $bloc-background-color
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
content: "" &:after
position: absolute content: ""
right: 0 position: absolute
top: 0 right: 0
width: 0 top: 0
height: 100% width: 0
transition: all .2s linear height: 100%
&.open:after transition: all .2s linear
width: 5px &.open:after
width: 5px
.post:hover .post:hover
cursor: pointer cursor: pointer
.open .open
background: none background: none
&:hover @extend .box-shadow
background: none
.post-photo
margin: 0
display: inline-block
float: left
vertical-align: middle
width: 48px
height: 48px
overflow: hidden
img
width: 100%
height: 100%
//+border-radius(50%)
&:hover
background: none
.post-photo
margin: 0
display: inline-block
float: left
vertical-align: middle
width: $avatar-width
height: $avatar-width
overflow: hidden
img
width: 100%
height: 100%
//+border-radius(50%)
.post-info-name .post-info-name
font-weight: 700 font-weight: 600
font-size: 1em color: inherit
line-height: 14px text-decoration: none
color: inherit display: inline-block
text-decoration: none float: left
display: inline-block margin-left: 10px
padding-left: 10px
float: left
.post-info-name:hover .post-info-name:hover
text-decoration: none text-decoration: none
color: black color: black
.post-info-tag .post-info-tag
font-size: 12px font-size: 12px
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: 11px
line-height: 14px line-height: 14px
text-decoration: none text-decoration: none
top: 11px top: 11px
right: 11px right: 11px
color: lighten($dark-grey,30%) color: lighten($dark-grey,30%)
&:hover &:hover
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
font-size: 11px font-size: 11px
line-height: 11px line-height: 11px
margin: 0 0 1em 0 margin: 0 0 1em 0
color: lighten($dark-grey,30%) color: lighten($dark-grey,30%)
span span
@extend .icon-twistagain @extend .icon-twistagain
@extend .extend-icon @extend .extend-icon
&:before &:before
display: block display: block
float: left float: left
background: $main-color-color background: $main-color-color
text-align: center text-align: center
padding: 1px 2px 2px 2px padding: 1px 2px 2px 2px
line-height: 9px line-height: 9px
font-size: 9px font-size: 9px
+border-radius(3px) +border-radius(3px)
color: white color: white
margin-right: .4em margin-right: .4em
.mini-screen-name .mini-screen-name
font-size: 13px font-size: 13px
color: $dark-grey color: $dark-grey
.post-retransmited-icon .post-retransmited-icon
display: none display: none
.post-interactions .post-interactions
margin: 10px 0 3px 0 margin: 10px 0 3px 0
text-align: right text-align: right
height: 12px height: 12px
line-height: 12px line-height: 12px
span span
color: lighten($dark-grey,30%) color: lighten($dark-grey,30%)
cursor: pointer cursor: pointer
font-size: 12px font-size: 12px
line-height: 12px line-height: 12px
.post-expand .post-expand
color: lighten($dark-grey,30%) color: lighten($dark-grey,30%)
cursor: pointer cursor: pointer
font-size: 12px font-size: 12px
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-reply, .post-propagate, .post-favorite
@extend .extend-icon
padding-left: 10px
display: none
&:hover
color: lighten($dark-grey,5%)
.post-reply .post-reply
@extend .extend-icon @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
display: inline-block .show-more
float: right display: inline-block
font-size: 12px float: right
color: lighten($dark-grey,30%) font-size: 12px
@extend .extend-icon color: lighten($dark-grey,30%)
@extend .icon-chat @extend .extend-icon
&:hover @extend .icon-chat
color: lighten($dark-grey,5%) &:hover
color: lighten($dark-grey,5%)
.expanded-content.show-pic .expanded-content.show-pic
display: block display: block
.expanded-post .expanded-post
.post-expand, .post-reply, .post-propagate, .post-favorite
color: lighten($dark-grey,30%) .post-expand, .post-reply, .post-propagate, .post-favorite
&:hover color: lighten($dark-grey,30%)
color: lighten($dark-grey,5%) &:hover
color: lighten($dark-grey,5%)
.related .post-expand .related .post-expand
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
display: inline-block display: inline-block
.open .related .open .related
.post-reply, .post-propagate, .post-favorite .post-reply, .post-propagate, .post-favorite
display: none!important display: none!important
&:hover &:hover
.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
padding: 5px 5px 0 5px padding: 5px 5px 0 5px
@extend .clear-fix @extend .clear-fix
.image-preview .image-preview
width: 100% width: 100%
display: block display: block
margin: auto margin: auto
.preview-container .preview-container
max-height: 500px max-height: 500px
width: 100% width: 100%
text-align: center text-align: center
overflow-y: auto overflow-y: auto
background: black background: black
.post-stats .post-stats
float: left float: left
li li
display: inline-block display: inline-block
&.stat-count &.stat-count
font-weight: 700 font-weight: 700
font-size: 11px font-size: 11px
float: left float: left
line-height: 20px line-height: 20px
color: llighten($dark-grey,30%) color: llighten($dark-grey,30%)
span:last-child span:last-child
padding-right: 5px padding-right: 5px
a a
position: relative position: relative
text-decoration: none text-decoration: none
display: inline-block display: inline-block
width: 20px width: 20px
height: 20px height: 20px
margin: 0 1px 0 0 margin: 0 1px 0 0
img img
width: 20px width: 20px
height: 20px height: 20px
.user-name-tooltip .user-name-tooltip
display: none display: none
position: absolute position: absolute
background: lighten($main-color-dark,3%) background: lighten($main-color-dark,3%)
font-size: 12px font-size: 12px
white-space: nowrap white-space: nowrap
padding: 3px 5px padding: 3px 5px
color: #fff color: #fff
top: -42px top: -42px
left: 0px left: 0px
&:after &:after
content: "" content: ""
position: absolute position: absolute
width: 0 width: 0
left: 4px left: 4px
bottom: -5px bottom: -5px
border-top: solid 5px lighten($main-color-dark,3%) border-top: solid 5px lighten($main-color-dark,3%)
border-left: solid 5px transparent border-left: solid 5px transparent
border-right: solid 5px transparent border-right: solid 5px transparent
.post-stats a:hover .user-name-tooltip .post-stats a:hover .user-name-tooltip
display: inline-block display: inline-block
.post-replies .sub-replies .post-replies .sub-replies
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%)

353
sass/_profile.sass
Unescape View File

@ -14,237 +14,222 @@ $modal-postboard-post-height: 100%
***************************************/ ***************************************/
.profile-modal .profile-modal
.profile-data
display: block
margin: auto .modal-content
padding-top: 0 overflow: hidden
padding: 0
@extend .clear-fix position: relative
li #profile-posts
display: inline padding: 0
margin: 0 5px
float: none .postboard
a width: 100%
display: inline height: 100%
span position: relative
&.posts-count, &.following-count, &.followers-count
display: inline-block
padding-right: 5px .postboard-posts
display: block
.modal-content height: $modal-postboard-post-height
overflow: hidden overflow-y: auto
padding: 0 .postboard-posts .post
position: relative padding: 0
#profile-posts margin-bottom: 1px
padding: 0 .post-interactions
margin: 2px 10px 3px 60px
.postboard .profile-card
width: 100% margin: 0
height: 100% padding: 0
position: relative
.postboard-posts
display: block
height: $modal-postboard-post-height
overflow-y: auto
.postboard-posts .post
padding: 0
margin-bottom: 1px
.post-interactions
margin: 2px 10px 3px 60px
.profile-card
margin: 0
padding: 0
.profile-modal .profile-modal
h2.profile-screen-name h2.profile-screen-name
display: block display: block
letter-spacing: 0 letter-spacing: 0
text-transform: none text-transform: none
color: lighten($dark-grey, 30%) color: lighten($dark-grey, 30%)
padding: 5px 0 padding: 5px 0
margin: 0 margin: 0
font-size: 13px font-size: 13px
line-height: 13px line-height: 13px
/* Profile card*/ /* Profile card*/
.profile-card .profile-card
width: 100% width: 100%
background: white background: white
border-bottom: 1px solid $background-light border-bottom: 1px solid $background-light
padding: $modal-gut padding: $modal-gut
.profile-card-main .profile-card-main
position: relative position: relative
text-align: center text-align: center
word-wrap: break-word word-wrap: break-word
transition: all .2s linear transition: all .2s linear
background: none!important background: none!important
padding: 10px padding: 10px
h1
font-size: 22px &:before
font-weight: bold content: ""
display: inline-block border: solid 0px #fff
padding-top: 10px transition: all .2s linear
position: absolute
&:before left: 1px
content: "" top: 1px
border: solid 0px #fff right: 1px
transition: all .2s linear bottom: 1px
position: absolute z-index: 0
left: 1px *
top: 1px position: relative
right: 1px z-index: 1
bottom: 1px
z-index: 0
*
position: relative
z-index: 1
.profile-card-photo .profile-card-photo
height: 70px height: 70px
width: 70px width: 70px
+border-radius(50%) +border-radius(50%)
margin: 0 auto margin: 0 auto
display: block display: block
.profile-card-photo.forEdition .profile-card-photo.forEdition
+border-radius(50%) +border-radius(50%)
height: 75px height: 75px
margin: 0 auto margin: 0 auto
display: block display: block
width: 75px width: 75px
.profile-bio .profile-bio
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
.isFollowing:after
font-size: 15px
position: absolute
.follow
@extend .color-1
.unfollow
@extend .color-2
.direct-messages-with-user, .follow, .unfollow
display: inline-block
position: static
.isFollowing:after
font-size: 15px
position: absolute
.unfollow .twister-user-info
background: $main-color-light @extend .clear-fix
text-align: center
width: 100%
padding: 0
.twister-user-info
@extend .clear-fix
text-align: center
width: 100%
padding: 0
.follow
background: $main-color-color
.known-followers .known-followers
text-align: center text-align: center
clear: both clear: both
width: 100% width: 100%
#msngrswr #msngrswr
display: none display: none
text-align: center text-align: center
margin: 10px 0 margin: 10px 0
.profile-extra-contact .profile-extra-contact
display: none display: none
margin: 0 15px 0 0 margin: 0 15px 0 0
font-weight: 500 font-weight: 500
background: $background-light background: $background-light
padding: 2px 8px 3px 8px padding: 2px 8px 3px 8px
+border-radius(2px) +border-radius(2px)
.bitmessage-ctc, .tox-ctc .bitmessage-ctc, .tox-ctc
font-size: 13px font-size: 13px
line-height: 15px line-height: 15px
cursor: pointer cursor: pointer
color: $main-color-dark color: $main-color-dark
&:hover &:hover
color: $main-color-color color: $main-color-color
.bitmessage-ctc:after, .tox-ctc:after .bitmessage-ctc:after, .tox-ctc:after
font-family: $symbol-font-family font-family: $symbol-font-family
content: '' content: ''
font-style: normal font-style: normal
font-weight: normal font-weight: normal
speak: none speak: none
display: inline-block display: inline-block
text-decoration: inherit text-decoration: inherit
width: 1em width: 1em
text-align: center text-align: center
font-variant: normal font-variant: normal
text-transform: none text-transform: none
line-height: 1em line-height: 1em
.profile-modal .profile-modal
.profile-tox, .profile-bitmessage .profile-tox, .profile-bitmessage
display: inline-block display: inline-block
margin-right: 5px margin-right: 5px
font-size: 13px font-size: 13px
&:hover &:hover
color: $main-color-color color: $main-color-color
.profile-modal .modal-buttons .profile-modal .modal-buttons
display: none display: none
/* EDITION PROFILE*/ /* EDITION PROFILE*/
.forEdition.profile-card .forEdition.profile-card
+box-sizing(border-box) +box-sizing(border-box)
@extend .clear-fix @extend .clear-fix
width: auto width: auto
background: $background-light background: $background-light
.profile-card-main .profile-card-main
margin: 0 margin: 0
width: 330px width: 330px
+box-sizing(border-box) +box-sizing(border-box)
padding: 10px padding: 10px
background: $background-light background: $background-light
input input
display: block display: block
margin: 5px auto margin: 5px auto
background: white background: white
border: 1px solid lighten($dark-grey, 50%) border: 1px solid lighten($dark-grey, 50%)
padding: 6px 4px padding: 6px 4px
margin-bottom: 4px margin-bottom: 4px
text-align: center text-align: center
transition: all .2s linear transition: all .2s linear
&:hover, &:focus &:hover, &:focus
background: white background: white
border-color: $main-color-light border-color: $main-color-light
.input-description .input-description
width: 90% width: 90%
.input-name .input-name
font-size: 20px font-size: 20px
.forEdition .profile-card-main .forEdition .profile-card-main
.input-website, .input-city .input-website, .input-city
display: inline-block display: inline-block
.input-tox, .input-bitmessage .input-tox, .input-bitmessage
width: 90% width: 90%
margin-top: 10px margin-top: 10px
h2 h2
text-transform: none text-transform: none
font-weight: 700 font-weight: 700
font-size: .9em font-size: .9em
.profile-edition-buttons .profile-edition-buttons
text-align: right text-align: right
.selectable_theme.theme_calm .selectable_theme.theme_calm
display: none display: none

59
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

1536
sass/style.sass
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save