mirror of
https://github.com/twisterarmy/theme_nin.git
synced 2025-03-13 05:51:12 +00:00
clean sass
This commit is contained in:
Mylene
parent
346c59afef
commit
8e41c4558b
@ -1,7 +1,14 @@
|
||||
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 +0,0 @@
|
||||
../../../css/OpenSans-Bold.ttf
|
||||
@ -1 +0,0 @@
|
||||
../../../css/OpenSans-Regular.ttf
|
||||
@ -1 +0,0 @@
|
||||
../../../css/Symbola.ttf
|
||||
3846
css/style.css
3846
css/style.css
File diff suppressed because it is too large
Load Diff
@ -5,7 +5,6 @@ $(document).ready(function()
|
||||
$('.right').css('height', windowHeight - 100);
|
||||
$('.module.who-to-follow').detach().appendTo($('.dashboard.left'));
|
||||
$('.module.twistday-reminder').detach().appendTo($('.dashboard.left'));
|
||||
|
||||
});
|
||||
|
||||
|
||||
@ -112,8 +111,8 @@ function openModal(modal) {
|
||||
.append(modal.content);
|
||||
else
|
||||
modal.content = modal.self.find('.modal-content');
|
||||
modal.self.prependTo('.right').fadeIn('fast');
|
||||
$('html, body').animate({scrollTop:0},300);
|
||||
modal.self.prependTo('body').fadeIn('fast');
|
||||
|
||||
|
||||
if (modal.classBase === '.modal-wrapper') {
|
||||
modal.content.outerHeight(modal.self.height() - modal.self.find('.modal-header').outerHeight());
|
||||
|
||||
@ -1,97 +1,85 @@
|
||||
*
|
||||
outline: none!important
|
||||
+box-sizing(border-box)
|
||||
outline: none!important
|
||||
+box-sizing(border-box)
|
||||
|
||||
li
|
||||
list-style: none
|
||||
|
||||
html, body
|
||||
height: 100%
|
||||
min-height: 100%
|
||||
background: $main-background-color
|
||||
color: $defaut-font-color
|
||||
font: .95em/1.3em $main-font-family
|
||||
font-weight: 400
|
||||
height: 100%
|
||||
min-height: 100%
|
||||
color: $defaut-font-color
|
||||
position: absolute
|
||||
width: 100%
|
||||
|
||||
br
|
||||
display: block
|
||||
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
|
||||
|
||||
|
||||
img
|
||||
background: $main-background-color
|
||||
+border-radius(2px)
|
||||
|
||||
a
|
||||
text-decoration: none
|
||||
color: $main-color-color
|
||||
&:hover, &:active
|
||||
color: $main-color-color
|
||||
text-decoration: none
|
||||
i
|
||||
text-decoration: underline
|
||||
text-decoration: none
|
||||
color: $main-color-color
|
||||
&:hover, &:active
|
||||
color: $main-color-color
|
||||
text-decoration: none
|
||||
i
|
||||
text-decoration: underline
|
||||
font-style: normal
|
||||
|
||||
p
|
||||
padding: 5px 0
|
||||
i, em
|
||||
font-style: italic
|
||||
|
||||
strong, b
|
||||
font-weight: 600
|
||||
|
||||
h2, h3
|
||||
font-size: 1.1em
|
||||
text-transform: uppercase
|
||||
letter-spacing: 0.07em
|
||||
font-weight: 400
|
||||
line-height: 1.8em
|
||||
margin-bottom: 10px
|
||||
|
||||
h3
|
||||
font-weight: 700
|
||||
font-size: 1em
|
||||
h1
|
||||
font-size: 1.1em
|
||||
text-transform: uppercase
|
||||
letter-spacing: 0.07em
|
||||
font-weight: 700
|
||||
line-height: 1.1em
|
||||
|
||||
textarea, input[type=text]
|
||||
font: .95em/1.3em $main-font-family
|
||||
font-weight: 400
|
||||
|
||||
h2
|
||||
font-size: 1.1em
|
||||
text-transform: uppercase
|
||||
letter-spacing: 0.07em
|
||||
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:after
|
||||
color: $main-color-color
|
||||
content: '\e806'
|
||||
font-family: 'fontello'
|
||||
padding-left: 2px
|
||||
display: inline
|
||||
font-size: 10px
|
||||
vertical-align: top
|
||||
line-height: 10px
|
||||
&:hover
|
||||
text-decoration: none!important
|
||||
h3 &
|
||||
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
|
||||
|
||||
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
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
|
||||
@ -1,55 +1,56 @@
|
||||
.login .header-bold
|
||||
display: block
|
||||
width: 720px
|
||||
margin: 0px auto 12px auto
|
||||
.login
|
||||
|
||||
.login .module
|
||||
display: block
|
||||
width: 720px
|
||||
padding: 32px 40px
|
||||
margin: 8px auto
|
||||
background: white
|
||||
.header-bold
|
||||
display: block
|
||||
width: 720px
|
||||
margin: 0px auto 12px auto
|
||||
|
||||
.login .module p
|
||||
margin-bottom: 5px
|
||||
.module
|
||||
background: white
|
||||
@extend .col
|
||||
@extend .col-6
|
||||
padding: $space
|
||||
|
||||
.login .module input
|
||||
padding: 5px 10px
|
||||
background: #f3f3f3
|
||||
border: solid 1px #dcdcdc
|
||||
transition: box-shadow 0.3s, border 0.3s
|
||||
font-size: 14px
|
||||
p
|
||||
margin-bottom: 5px
|
||||
|
||||
.login .module input:focus,
|
||||
.login .module select:focus
|
||||
background: white
|
||||
transition: background-color 100ms linear
|
||||
border-bottom: solid 2px $color-green
|
||||
input
|
||||
padding: 5px 10px
|
||||
background: #f3f3f3
|
||||
border: solid 1px #dcdcdc
|
||||
transition: box-shadow 0.3s, border 0.3s
|
||||
font-size: 14px
|
||||
|
||||
.login .module select
|
||||
height: 30px
|
||||
padding: 3px 30px 3px 10px
|
||||
margin: 0
|
||||
border: 1px solid #ccc
|
||||
font-size: 14px
|
||||
input:focus, select:focus
|
||||
background: white
|
||||
transition: background-color 100ms linear
|
||||
border-bottom: solid 2px $color-green
|
||||
|
||||
.login .module span.availability
|
||||
margin-left: 10px
|
||||
color: #45474d
|
||||
select
|
||||
height: 30px
|
||||
padding: 3px 30px 3px 10px
|
||||
margin: 0
|
||||
border: 1px solid #ccc
|
||||
font-size: 14px
|
||||
|
||||
.with-nickname, .import-secret-key, .create-user
|
||||
margin-top: 10px
|
||||
span.availability
|
||||
margin-left: 10px
|
||||
color: #45474d
|
||||
|
||||
.login .module:nth-child(2) div,
|
||||
.login .module:nth-child(3) div:nth-child(2),
|
||||
.login .secret-key-import,
|
||||
.login .username-import
|
||||
margin-top: 20px
|
||||
margin-bottom: 20px
|
||||
margin-left: 16px
|
||||
|
||||
.login .create-user,
|
||||
.login .import-secret-key
|
||||
display: block
|
||||
margin-left: auto
|
||||
margin-right: 16px
|
||||
|
||||
.module:nth-child(2) div,
|
||||
.module:nth-child(3) div:nth-child(2),
|
||||
.secret-key-import,
|
||||
.username-import
|
||||
margin-top: 20px
|
||||
margin-bottom: 20px
|
||||
margin-left: 16px
|
||||
|
||||
.create-user,
|
||||
.import-secret-key
|
||||
display: block
|
||||
margin-left: auto
|
||||
margin-right: 16px
|
||||
.with-nickname, .import-secret-key, .create-user
|
||||
margin-top: 10px
|
||||
164
sass/_menu.sass
164
sass/_menu.sass
@ -1,90 +1,96 @@
|
||||
// vars for the menu
|
||||
|
||||
$menu-height : 50px
|
||||
$menu-font-color: $defaut-font-color
|
||||
|
||||
.userMenu
|
||||
width: 100%
|
||||
position: fixed
|
||||
left: 0
|
||||
margin: 0
|
||||
//+background-image(radial-gradient(at top , $color-green, #6F8E97,$color-blue) )
|
||||
background: $main-color-dark
|
||||
z-index: 2
|
||||
ul
|
||||
@extend .clear-fix
|
||||
+box-sizing(border-box)
|
||||
width: $site-width
|
||||
max-width: 100%
|
||||
margin: auto
|
||||
background: image-url("logo.png") no-repeat 50% 50%
|
||||
background-size: 20px
|
||||
li
|
||||
float: left
|
||||
margin: 0 20px 0 0
|
||||
position: relative
|
||||
display: block
|
||||
> a
|
||||
line-height: 50px
|
||||
padding: 0 .5em
|
||||
display: inline-block
|
||||
color: rgba(white, 0.7)!important
|
||||
font-size: 1.2em
|
||||
position: relative
|
||||
font-weight: 400
|
||||
+box-sizing(border-box)
|
||||
&:hover
|
||||
color: white!important
|
||||
&.current a
|
||||
color: white!important
|
||||
+text-shadow(1px 1px 0 rgba(#000,.2))
|
||||
width: 100%
|
||||
position: fixed
|
||||
height: $menu-height
|
||||
left: 0
|
||||
margin: 0
|
||||
background-color: #F5F5F5
|
||||
//+background-image(radial-gradient(at top , $color-green,$color-blue) )
|
||||
|
||||
z-index: 2
|
||||
ul
|
||||
@extend .clear-fix
|
||||
+box-sizing(border-box)
|
||||
width: 100%
|
||||
max-width: 75%
|
||||
margin: 0
|
||||
background: image-url("logo.png") no-repeat 50% 50%
|
||||
background-size: 20px
|
||||
li
|
||||
float: left
|
||||
margin: 0 20px 0 0
|
||||
position: relative
|
||||
display: block
|
||||
> a
|
||||
line-height: $menu-height
|
||||
padding: 0 .5em
|
||||
display: inline-block
|
||||
color: rgba($menu-font-color, 0.7)!important
|
||||
font-size: 1em
|
||||
position: relative
|
||||
font-weight: 500
|
||||
+box-sizing(border-box)
|
||||
&:hover
|
||||
color: $menu-font-color!important
|
||||
&.current a
|
||||
color: $menu-font-color!important
|
||||
//+text-shadow(1px 1px 0 rgba(#000,.2))
|
||||
|
||||
|
||||
/* Menu specific entries */
|
||||
|
||||
.userMenu li
|
||||
|
||||
&.userMenu-home
|
||||
a span.label
|
||||
display: block!important
|
||||
text-align: center
|
||||
.menu-news
|
||||
position: absolute
|
||||
text-align: center
|
||||
display: none
|
||||
top: 6px
|
||||
right: -6px
|
||||
background: $main-color-color
|
||||
color: #fff
|
||||
width: 15px
|
||||
height: 15px
|
||||
line-height: 15px
|
||||
font-size: 10px
|
||||
padding: 3px
|
||||
font-weight: 900
|
||||
+border-radius(50%)
|
||||
+box-sizing(content-box)
|
||||
+text-shadow(1px 1px 0 rgba(#000, .3))
|
||||
&.show
|
||||
display: block
|
||||
&.userMenu-home
|
||||
a span.label
|
||||
display: block!important
|
||||
text-align: center
|
||||
.menu-news
|
||||
position: absolute
|
||||
text-align: center
|
||||
display: none
|
||||
top: 6px
|
||||
right: -6px
|
||||
background: $main-color-color
|
||||
color: #fff
|
||||
width: 15px
|
||||
height: 15px
|
||||
line-height: 15px
|
||||
font-size: 10px
|
||||
padding: 3px
|
||||
font-weight: 900
|
||||
+border-radius(50%)
|
||||
+box-sizing(content-box)
|
||||
+text-shadow(1px 1px 0 rgba(#000, .3))
|
||||
&.show
|
||||
display: block
|
||||
|
||||
&.userMenu-dhtindicator, &.userMenu-connections, &.userMenu-messages
|
||||
display: none!important
|
||||
&.userMenu-dhtindicator, &.userMenu-connections, &.userMenu-messages
|
||||
display: none!important
|
||||
|
||||
&.userMenu-config, &.userMenu-search
|
||||
float: right
|
||||
position: relative
|
||||
margin-right: 0
|
||||
color: white
|
||||
+ a
|
||||
color: $main-color-dark
|
||||
&.userMenu-search
|
||||
margin: 3px
|
||||
> input
|
||||
border: 1px solid $main-color-light
|
||||
line-height: 12px
|
||||
font-size: 12px
|
||||
padding: 7px
|
||||
&:focus
|
||||
border-color: $main-color-dark
|
||||
&.userMenu-config > a
|
||||
@extend .icon-cog
|
||||
@extend .extend-icon
|
||||
font-size: 1.5em
|
||||
&.userMenu-config, &.userMenu-search
|
||||
float: right
|
||||
position: relative
|
||||
margin-right: 0
|
||||
color: $menu-font-color
|
||||
+ a
|
||||
color: $main-color-dark
|
||||
&.userMenu-search
|
||||
margin: 3px
|
||||
> input
|
||||
border: 1px solid $main-color-light
|
||||
line-height: 12px
|
||||
font-size: 12px
|
||||
padding: 7px
|
||||
&:focus
|
||||
border-color: $main-color-dark
|
||||
&.userMenu-config > a
|
||||
@extend .icon-cog
|
||||
@extend .extend-icon
|
||||
font-size: 1.5rem
|
||||
|
||||
|
||||
408
sass/_modal.sass
Normal file
408
sass/_modal.sass
Normal 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
|
||||
@ -1,69 +1,81 @@
|
||||
/********** LOGIN AND NETWORK PAGES *******/
|
||||
.network.singleBlock
|
||||
@extend .clear-fix
|
||||
ul
|
||||
padding-left: 20px
|
||||
li
|
||||
line-height: 36px
|
||||
font-size: 13px
|
||||
.network
|
||||
&.singleBlock
|
||||
@extend .clear-fix
|
||||
|
||||
.module
|
||||
@extend .col
|
||||
@extend .col-6
|
||||
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
|
||||
ul
|
||||
line-height: 2rem
|
||||
padding: 2rem
|
||||
|
||||
|
||||
.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
|
||||
.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) )
|
||||
|
||||
.highlight
|
||||
background: $bloc-background-color
|
||||
padding: 5px 8px
|
||||
line-height: 1.7
|
||||
display: inline-block
|
||||
|
||||
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
|
||||
.spam-msg
|
||||
resize: none
|
||||
width: 100%
|
||||
display: block
|
||||
padding: $space
|
||||
height: 180px
|
||||
border: solid 1px rgba(0, 0, 0, 0.1)
|
||||
position: relative
|
||||
margin: $space 0
|
||||
font-family: $main-font-family
|
||||
|
||||
.character-limit
|
||||
float: right
|
||||
margin-right: 18px
|
||||
|
||||
.connections span, .known-peers, .dht-nodes, .blocks, .last-block-time, .mining-difficulty
|
||||
color: #333
|
||||
font-weight: 700
|
||||
.highlight
|
||||
font-size: 1.2rem
|
||||
display: block
|
||||
margin: $space 0
|
||||
|
||||
span.connection-status
|
||||
font-weight: 500
|
||||
&: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
|
||||
|
||||
|
||||
@ -1,333 +1,313 @@
|
||||
/************* POST BOARD *************/
|
||||
|
||||
|
||||
// vars for postboard
|
||||
|
||||
$avatar-width : 48px
|
||||
|
||||
|
||||
.postboard
|
||||
@extend .col
|
||||
@extend .col-5
|
||||
float: left
|
||||
width: 50%
|
||||
padding: 20px
|
||||
h2
|
||||
display: none
|
||||
.postboard-posts
|
||||
position: relative
|
||||
z-index: 1
|
||||
clear: both
|
||||
|
||||
.postboard-news
|
||||
display: none
|
||||
|
||||
.postboard-posts
|
||||
position: relative
|
||||
z-index: 1
|
||||
clear: both
|
||||
|
||||
.postboard-news
|
||||
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
|
||||
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
|
||||
.post
|
||||
background: $bloc-background-color
|
||||
position: relative
|
||||
margin-bottom: 1px
|
||||
+transition-property(margin)
|
||||
+transition-duration(.4s)
|
||||
+transition-timing-function(ease-out)
|
||||
|
||||
.post, .original.post, .post.open
|
||||
position: relative
|
||||
|
||||
|
||||
.module.open
|
||||
.post
|
||||
color: darken($defaut-font-color, 15%)
|
||||
.post
|
||||
color: darken($defaut-font-color, 15%)
|
||||
|
||||
.post:hover
|
||||
color: darken($defaut-font-color, 15%)
|
||||
color: darken($defaut-font-color, 15%)
|
||||
|
||||
.post-data
|
||||
padding: 15px
|
||||
padding: $space
|
||||
|
||||
|
||||
.post.open
|
||||
.original, .related
|
||||
margin-bottom: 1px
|
||||
.original, .related
|
||||
margin-bottom: 1px
|
||||
|
||||
|
||||
.postboard-posts > .post
|
||||
+box-shadow(0 1px 1px rgba(#555, .1))
|
||||
&.open
|
||||
margin-top: 20px
|
||||
margin-bottom: 20px
|
||||
&:after
|
||||
content: ""
|
||||
position: absolute
|
||||
right: 0
|
||||
top: 0
|
||||
width: 0
|
||||
height: 100%
|
||||
transition: all .2s linear
|
||||
&.open:after
|
||||
width: 5px
|
||||
|
||||
&.open
|
||||
margin-top: $space
|
||||
margin-bottom: $space
|
||||
|
||||
&:after
|
||||
content: ""
|
||||
position: absolute
|
||||
right: 0
|
||||
top: 0
|
||||
width: 0
|
||||
height: 100%
|
||||
transition: all .2s linear
|
||||
&.open:after
|
||||
width: 5px
|
||||
|
||||
|
||||
.post:hover
|
||||
cursor: pointer
|
||||
cursor: pointer
|
||||
|
||||
|
||||
.open
|
||||
background: none
|
||||
&:hover
|
||||
background: none
|
||||
background: none
|
||||
@extend .box-shadow
|
||||
|
||||
&:hover
|
||||
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%)
|
||||
|
||||
|
||||
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
|
||||
font-weight: 700
|
||||
font-size: 1em
|
||||
line-height: 14px
|
||||
color: inherit
|
||||
text-decoration: none
|
||||
display: inline-block
|
||||
padding-left: 10px
|
||||
float: left
|
||||
font-weight: 600
|
||||
color: inherit
|
||||
text-decoration: none
|
||||
display: inline-block
|
||||
float: left
|
||||
margin-left: 10px
|
||||
|
||||
|
||||
.post-info-name:hover
|
||||
text-decoration: none
|
||||
color: black
|
||||
text-decoration: none
|
||||
color: black
|
||||
|
||||
.post-info-tag
|
||||
font-size: 12px
|
||||
opacity: .6
|
||||
margin-top: 4px
|
||||
display: inline-block
|
||||
font-size: 12px
|
||||
opacity: .6
|
||||
margin-top: 4px
|
||||
display: inline-block
|
||||
|
||||
.post-info-time
|
||||
position: absolute
|
||||
font-size: 11px
|
||||
line-height: 14px
|
||||
text-decoration: none
|
||||
top: 11px
|
||||
right: 11px
|
||||
color: lighten($dark-grey,30%)
|
||||
&:hover
|
||||
color: lighten($dark-grey,5%)
|
||||
position: absolute
|
||||
font-size: 11px
|
||||
line-height: 14px
|
||||
text-decoration: none
|
||||
top: 11px
|
||||
right: 11px
|
||||
color: lighten($dark-grey,30%)
|
||||
&:hover
|
||||
color: lighten($dark-grey,5%)
|
||||
|
||||
.post-text
|
||||
margin: 0 0 0 68px
|
||||
word-wrap: break-word
|
||||
min-height: 30px
|
||||
padding: 0
|
||||
samp
|
||||
background: #eee
|
||||
margin: 0 0 0 ($avatar-width +10)
|
||||
word-wrap: break-word
|
||||
min-height: $avatar-width
|
||||
padding: 0
|
||||
samp
|
||||
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
|
||||
font-size: 11px
|
||||
line-height: 11px
|
||||
margin: 0 0 1em 0
|
||||
color: lighten($dark-grey,30%)
|
||||
span
|
||||
@extend .icon-twistagain
|
||||
@extend .extend-icon
|
||||
&:before
|
||||
display: block
|
||||
float: left
|
||||
background: $main-color-color
|
||||
text-align: center
|
||||
padding: 1px 2px 2px 2px
|
||||
line-height: 9px
|
||||
font-size: 9px
|
||||
+border-radius(3px)
|
||||
color: white
|
||||
margin-right: .4em
|
||||
font-size: 11px
|
||||
line-height: 11px
|
||||
margin: 0 0 1em 0
|
||||
color: lighten($dark-grey,30%)
|
||||
span
|
||||
@extend .icon-twistagain
|
||||
@extend .extend-icon
|
||||
&:before
|
||||
display: block
|
||||
float: left
|
||||
background: $main-color-color
|
||||
text-align: center
|
||||
padding: 1px 2px 2px 2px
|
||||
line-height: 9px
|
||||
font-size: 9px
|
||||
+border-radius(3px)
|
||||
color: white
|
||||
margin-right: .4em
|
||||
|
||||
.mini-screen-name
|
||||
font-size: 13px
|
||||
color: $dark-grey
|
||||
|
||||
font-size: 13px
|
||||
color: $dark-grey
|
||||
|
||||
.post-retransmited-icon
|
||||
display: none
|
||||
display: none
|
||||
|
||||
.post-interactions
|
||||
margin: 10px 0 3px 0
|
||||
text-align: right
|
||||
height: 12px
|
||||
line-height: 12px
|
||||
span
|
||||
color: lighten($dark-grey,30%)
|
||||
cursor: pointer
|
||||
font-size: 12px
|
||||
line-height: 12px
|
||||
margin: 10px 0 3px 0
|
||||
text-align: right
|
||||
height: 12px
|
||||
line-height: 12px
|
||||
span
|
||||
color: lighten($dark-grey,30%)
|
||||
cursor: pointer
|
||||
font-size: 12px
|
||||
line-height: 12px
|
||||
|
||||
.post-expand
|
||||
color: lighten($dark-grey,30%)
|
||||
cursor: pointer
|
||||
font-size: 12px
|
||||
position: absolute
|
||||
left: 10px
|
||||
bottom: 10px
|
||||
&:hover
|
||||
color: lighten($dark-grey,5%)
|
||||
color: lighten($dark-grey,30%)
|
||||
cursor: pointer
|
||||
font-size: 12px
|
||||
position: absolute
|
||||
left: 10px
|
||||
bottom: 10px
|
||||
&:hover
|
||||
color: lighten($dark-grey,5%)
|
||||
|
||||
.post-reply, .post-propagate, .post-favorite
|
||||
@extend .extend-icon
|
||||
padding-left: 10px
|
||||
display: none
|
||||
&:hover
|
||||
color: lighten($dark-grey,5%)
|
||||
|
||||
.post-reply
|
||||
@extend .extend-icon
|
||||
@extend .icon-comment
|
||||
@extend .icon-comment
|
||||
|
||||
.post-propagate
|
||||
@extend .extend-icon
|
||||
@extend .icon-twistagain
|
||||
@extend .icon-twistagain
|
||||
|
||||
.post-favorite
|
||||
display: none!important
|
||||
@extend .extend-icon
|
||||
@extend .icon-star
|
||||
display: none!important
|
||||
@extend .icon-star
|
||||
|
||||
.post .show-more
|
||||
display: inline-block
|
||||
float: right
|
||||
font-size: 12px
|
||||
color: lighten($dark-grey,30%)
|
||||
@extend .extend-icon
|
||||
@extend .icon-chat
|
||||
&:hover
|
||||
color: lighten($dark-grey,5%)
|
||||
.post
|
||||
.show-more
|
||||
display: inline-block
|
||||
float: right
|
||||
font-size: 12px
|
||||
color: lighten($dark-grey,30%)
|
||||
@extend .extend-icon
|
||||
@extend .icon-chat
|
||||
&:hover
|
||||
color: lighten($dark-grey,5%)
|
||||
|
||||
|
||||
.expanded-content.show-pic
|
||||
display: block
|
||||
display: block
|
||||
|
||||
.expanded-post
|
||||
.post-expand, .post-reply, .post-propagate, .post-favorite
|
||||
color: lighten($dark-grey,30%)
|
||||
&:hover
|
||||
color: lighten($dark-grey,5%)
|
||||
|
||||
.post-expand, .post-reply, .post-propagate, .post-favorite
|
||||
color: lighten($dark-grey,30%)
|
||||
&:hover
|
||||
color: lighten($dark-grey,5%)
|
||||
|
||||
.related .post-expand
|
||||
display: none
|
||||
margin: 0
|
||||
display: none
|
||||
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-reply, .post-propagate, .post-favorite
|
||||
display: inline-block
|
||||
.post-reply, .post-propagate, .post-favorite
|
||||
display: inline-block
|
||||
|
||||
.open .related
|
||||
.post-reply, .post-propagate, .post-favorite
|
||||
display: none!important
|
||||
&:hover
|
||||
.post-reply, .post-propagate/*, .post-favorite*/
|
||||
display: inline-block!important
|
||||
.post-reply, .post-propagate, .post-favorite
|
||||
display: none!important
|
||||
&:hover
|
||||
.post-reply, .post-propagate/*, .post-favorite*/
|
||||
display: inline-block!important
|
||||
|
||||
|
||||
.post-reply:hover, .post-propagate:hover, .post-favorite:hover
|
||||
color: lighten($dark-grey,5%)
|
||||
|
||||
.expanded-content
|
||||
display: none
|
||||
padding: 5px 5px 0 5px
|
||||
@extend .clear-fix
|
||||
display: none
|
||||
padding: 5px 5px 0 5px
|
||||
@extend .clear-fix
|
||||
|
||||
.image-preview
|
||||
width: 100%
|
||||
display: block
|
||||
margin: auto
|
||||
width: 100%
|
||||
display: block
|
||||
margin: auto
|
||||
|
||||
.preview-container
|
||||
max-height: 500px
|
||||
width: 100%
|
||||
text-align: center
|
||||
overflow-y: auto
|
||||
background: black
|
||||
max-height: 500px
|
||||
width: 100%
|
||||
text-align: center
|
||||
overflow-y: auto
|
||||
background: black
|
||||
|
||||
.post-stats
|
||||
float: left
|
||||
li
|
||||
display: inline-block
|
||||
&.stat-count
|
||||
font-weight: 700
|
||||
font-size: 11px
|
||||
float: left
|
||||
line-height: 20px
|
||||
color: llighten($dark-grey,30%)
|
||||
span:last-child
|
||||
padding-right: 5px
|
||||
a
|
||||
position: relative
|
||||
text-decoration: none
|
||||
display: inline-block
|
||||
width: 20px
|
||||
height: 20px
|
||||
margin: 0 1px 0 0
|
||||
img
|
||||
width: 20px
|
||||
height: 20px
|
||||
float: left
|
||||
li
|
||||
display: inline-block
|
||||
&.stat-count
|
||||
font-weight: 700
|
||||
font-size: 11px
|
||||
float: left
|
||||
line-height: 20px
|
||||
color: llighten($dark-grey,30%)
|
||||
span:last-child
|
||||
padding-right: 5px
|
||||
a
|
||||
position: relative
|
||||
text-decoration: none
|
||||
display: inline-block
|
||||
width: 20px
|
||||
height: 20px
|
||||
margin: 0 1px 0 0
|
||||
img
|
||||
width: 20px
|
||||
height: 20px
|
||||
|
||||
|
||||
.user-name-tooltip
|
||||
display: none
|
||||
position: absolute
|
||||
background: lighten($main-color-dark,3%)
|
||||
font-size: 12px
|
||||
white-space: nowrap
|
||||
padding: 3px 5px
|
||||
color: #fff
|
||||
top: -42px
|
||||
left: 0px
|
||||
&:after
|
||||
content: ""
|
||||
position: absolute
|
||||
width: 0
|
||||
left: 4px
|
||||
bottom: -5px
|
||||
border-top: solid 5px lighten($main-color-dark,3%)
|
||||
border-left: solid 5px transparent
|
||||
border-right: solid 5px transparent
|
||||
display: none
|
||||
position: absolute
|
||||
background: lighten($main-color-dark,3%)
|
||||
font-size: 12px
|
||||
white-space: nowrap
|
||||
padding: 3px 5px
|
||||
color: #fff
|
||||
top: -42px
|
||||
left: 0px
|
||||
&:after
|
||||
content: ""
|
||||
position: absolute
|
||||
width: 0
|
||||
left: 4px
|
||||
bottom: -5px
|
||||
border-top: solid 5px lighten($main-color-dark,3%)
|
||||
border-left: solid 5px transparent
|
||||
border-right: solid 5px transparent
|
||||
|
||||
.post-stats a:hover .user-name-tooltip
|
||||
display: inline-block
|
||||
display: inline-block
|
||||
|
||||
.post-replies .sub-replies
|
||||
border-left: solid 3px $main-color-color
|
||||
margin-left: 1px
|
||||
border-left: solid 3px $main-color-color
|
||||
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%)
|
||||
|
||||
@ -14,237 +14,222 @@ $modal-postboard-post-height: 100%
|
||||
***************************************/
|
||||
|
||||
.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
|
||||
overflow: hidden
|
||||
padding: 0
|
||||
position: relative
|
||||
#profile-posts
|
||||
padding: 0
|
||||
|
||||
.postboard
|
||||
width: 100%
|
||||
height: 100%
|
||||
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
|
||||
.modal-content
|
||||
overflow: hidden
|
||||
padding: 0
|
||||
position: relative
|
||||
#profile-posts
|
||||
padding: 0
|
||||
|
||||
.postboard
|
||||
width: 100%
|
||||
height: 100%
|
||||
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
|
||||
h2.profile-screen-name
|
||||
display: block
|
||||
letter-spacing: 0
|
||||
text-transform: none
|
||||
color: lighten($dark-grey, 30%)
|
||||
padding: 5px 0
|
||||
margin: 0
|
||||
font-size: 13px
|
||||
line-height: 13px
|
||||
h2.profile-screen-name
|
||||
display: block
|
||||
letter-spacing: 0
|
||||
text-transform: none
|
||||
color: lighten($dark-grey, 30%)
|
||||
padding: 5px 0
|
||||
margin: 0
|
||||
font-size: 13px
|
||||
line-height: 13px
|
||||
|
||||
|
||||
/* Profile card*/
|
||||
|
||||
.profile-card
|
||||
width: 100%
|
||||
background: white
|
||||
border-bottom: 1px solid $background-light
|
||||
padding: $modal-gut
|
||||
width: 100%
|
||||
background: white
|
||||
border-bottom: 1px solid $background-light
|
||||
padding: $modal-gut
|
||||
.profile-card-main
|
||||
position: relative
|
||||
text-align: center
|
||||
word-wrap: break-word
|
||||
transition: all .2s linear
|
||||
background: none!important
|
||||
padding: 10px
|
||||
position: relative
|
||||
text-align: center
|
||||
word-wrap: break-word
|
||||
transition: all .2s linear
|
||||
background: none!important
|
||||
padding: 10px
|
||||
|
||||
|
||||
h1
|
||||
font-size: 22px
|
||||
font-weight: bold
|
||||
display: inline-block
|
||||
padding-top: 10px
|
||||
|
||||
&:before
|
||||
content: ""
|
||||
border: solid 0px #fff
|
||||
transition: all .2s linear
|
||||
position: absolute
|
||||
left: 1px
|
||||
top: 1px
|
||||
right: 1px
|
||||
bottom: 1px
|
||||
z-index: 0
|
||||
*
|
||||
position: relative
|
||||
z-index: 1
|
||||
&:before
|
||||
content: ""
|
||||
border: solid 0px #fff
|
||||
transition: all .2s linear
|
||||
position: absolute
|
||||
left: 1px
|
||||
top: 1px
|
||||
right: 1px
|
||||
bottom: 1px
|
||||
z-index: 0
|
||||
*
|
||||
position: relative
|
||||
z-index: 1
|
||||
|
||||
.profile-card-photo
|
||||
height: 70px
|
||||
width: 70px
|
||||
+border-radius(50%)
|
||||
margin: 0 auto
|
||||
display: block
|
||||
height: 70px
|
||||
width: 70px
|
||||
+border-radius(50%)
|
||||
margin: 0 auto
|
||||
display: block
|
||||
|
||||
.profile-card-photo.forEdition
|
||||
+border-radius(50%)
|
||||
height: 75px
|
||||
margin: 0 auto
|
||||
display: block
|
||||
width: 75px
|
||||
+border-radius(50%)
|
||||
height: 75px
|
||||
margin: 0 auto
|
||||
display: block
|
||||
width: 75px
|
||||
|
||||
.profile-bio
|
||||
padding: 10px
|
||||
font-style: italic
|
||||
text-align: center
|
||||
padding: 10px
|
||||
font-style: italic
|
||||
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
|
||||
background: $main-color-light
|
||||
.twister-user-info
|
||||
@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
|
||||
text-align: center
|
||||
clear: both
|
||||
width: 100%
|
||||
.known-followers
|
||||
text-align: center
|
||||
clear: both
|
||||
width: 100%
|
||||
|
||||
|
||||
#msngrswr
|
||||
display: none
|
||||
text-align: center
|
||||
margin: 10px 0
|
||||
display: none
|
||||
text-align: center
|
||||
margin: 10px 0
|
||||
|
||||
.profile-extra-contact
|
||||
display: none
|
||||
margin: 0 15px 0 0
|
||||
font-weight: 500
|
||||
background: $background-light
|
||||
padding: 2px 8px 3px 8px
|
||||
+border-radius(2px)
|
||||
display: none
|
||||
margin: 0 15px 0 0
|
||||
font-weight: 500
|
||||
background: $background-light
|
||||
padding: 2px 8px 3px 8px
|
||||
+border-radius(2px)
|
||||
|
||||
|
||||
.bitmessage-ctc, .tox-ctc
|
||||
font-size: 13px
|
||||
line-height: 15px
|
||||
cursor: pointer
|
||||
color: $main-color-dark
|
||||
&:hover
|
||||
color: $main-color-color
|
||||
font-size: 13px
|
||||
line-height: 15px
|
||||
cursor: pointer
|
||||
color: $main-color-dark
|
||||
&:hover
|
||||
color: $main-color-color
|
||||
|
||||
.bitmessage-ctc:after, .tox-ctc:after
|
||||
font-family: $symbol-font-family
|
||||
content: ''
|
||||
font-style: normal
|
||||
font-weight: normal
|
||||
speak: none
|
||||
display: inline-block
|
||||
text-decoration: inherit
|
||||
width: 1em
|
||||
text-align: center
|
||||
font-variant: normal
|
||||
text-transform: none
|
||||
line-height: 1em
|
||||
font-family: $symbol-font-family
|
||||
content: ''
|
||||
font-style: normal
|
||||
font-weight: normal
|
||||
speak: none
|
||||
display: inline-block
|
||||
text-decoration: inherit
|
||||
width: 1em
|
||||
text-align: center
|
||||
font-variant: normal
|
||||
text-transform: none
|
||||
line-height: 1em
|
||||
|
||||
.profile-modal
|
||||
.profile-tox, .profile-bitmessage
|
||||
display: inline-block
|
||||
margin-right: 5px
|
||||
font-size: 13px
|
||||
&:hover
|
||||
color: $main-color-color
|
||||
.profile-tox, .profile-bitmessage
|
||||
display: inline-block
|
||||
margin-right: 5px
|
||||
font-size: 13px
|
||||
&:hover
|
||||
color: $main-color-color
|
||||
|
||||
|
||||
.profile-modal .modal-buttons
|
||||
display: none
|
||||
display: none
|
||||
|
||||
/* EDITION PROFILE*/
|
||||
/* EDITION PROFILE*/
|
||||
|
||||
.forEdition.profile-card
|
||||
+box-sizing(border-box)
|
||||
@extend .clear-fix
|
||||
width: auto
|
||||
background: $background-light
|
||||
.profile-card-main
|
||||
margin: 0
|
||||
width: 330px
|
||||
+box-sizing(border-box)
|
||||
padding: 10px
|
||||
background: $background-light
|
||||
input
|
||||
display: block
|
||||
margin: 5px auto
|
||||
background: white
|
||||
border: 1px solid lighten($dark-grey, 50%)
|
||||
padding: 6px 4px
|
||||
margin-bottom: 4px
|
||||
text-align: center
|
||||
transition: all .2s linear
|
||||
&:hover, &:focus
|
||||
background: white
|
||||
border-color: $main-color-light
|
||||
+box-sizing(border-box)
|
||||
@extend .clear-fix
|
||||
width: auto
|
||||
background: $background-light
|
||||
.profile-card-main
|
||||
margin: 0
|
||||
width: 330px
|
||||
+box-sizing(border-box)
|
||||
padding: 10px
|
||||
background: $background-light
|
||||
input
|
||||
display: block
|
||||
margin: 5px auto
|
||||
background: white
|
||||
border: 1px solid lighten($dark-grey, 50%)
|
||||
padding: 6px 4px
|
||||
margin-bottom: 4px
|
||||
text-align: center
|
||||
transition: all .2s linear
|
||||
&:hover, &:focus
|
||||
background: white
|
||||
border-color: $main-color-light
|
||||
|
||||
.input-description
|
||||
width: 90%
|
||||
width: 90%
|
||||
|
||||
.input-name
|
||||
font-size: 20px
|
||||
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
|
||||
.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
|
||||
text-align: right
|
||||
|
||||
.selectable_theme.theme_calm
|
||||
display: none
|
||||
display: none
|
||||
|
||||
@ -1,5 +1,62 @@
|
||||
|
||||
|
||||
|
||||
.box-shadow
|
||||
+box-shadow(0 8px 13px rgba(#333, .1))
|
||||
|
||||
.clear-fix
|
||||
&:after // clearfix
|
||||
content: ""
|
||||
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
|
||||
@ -1,10 +1,13 @@
|
||||
//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
|
||||
$grid_cols : 12 // nombre de colonnes
|
||||
$grid_gut : 2% // largeur de la goutière en %
|
||||
|
||||
// G R I D
|
||||
|
||||
$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
|
||||
$class-col : col !default
|
||||
|
||||
@ -21,12 +24,12 @@ $class-col : col !default
|
||||
width: ($i * $grid_col) + ($j * $grid_gut)
|
||||
|
||||
|
||||
// vars used for the website
|
||||
|
||||
$site-width : $grid_max_width
|
||||
$gut-width : $grid_gut
|
||||
$indicators-width : 55px
|
||||
$postboard-modal-width : auto
|
||||
|
||||
$space : 1rem
|
||||
// colors
|
||||
|
||||
$light-grey: #e9e9e9
|
||||
$dark-blue: #38434E
|
||||
@ -34,8 +37,8 @@ $color-yellow: #E6953C
|
||||
$color-pink: #BF6B6C
|
||||
$color-green: #B4C669
|
||||
$color-red: #EF5D43
|
||||
$color-blue: #446CB3
|
||||
$dark-grey : #66686B
|
||||
$color-blue: #00AA8B
|
||||
$dark-grey : #444
|
||||
|
||||
$main-color-light: #aaa
|
||||
$main-color-dark: #596073
|
||||
@ -47,10 +50,13 @@ $background-light: lighten($main-background-color, 4% )
|
||||
|
||||
$defaut-font-color: $dark-grey
|
||||
|
||||
$global-font-size : 15px
|
||||
$main-font-size : 1rem
|
||||
$main-line-height : 1.4rem
|
||||
|
||||
|
||||
/* FONTS */
|
||||
|
||||
$main-font-family: "Roboto", sans-serif
|
||||
$symbol-font-family: "fontello"
|
||||
$serif-font-family: "Droid"
|
||||
$alt-font-family : "Laranja", serif
|
||||
$serif-font-family: "Droid", serif
|
||||
|
||||
1500
sass/style.sass
1500
sass/style.sass
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user