Mylene
9 years ago
17 changed files with 3131 additions and 3091 deletions
@ -1,7 +1,14 @@
@@ -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 @@
@@ -1 +0,0 @@
|
||||
../../../css/OpenSans-Bold.ttf |
||||
@ -1 +0,0 @@
@@ -1 +0,0 @@
|
||||
../../../css/OpenSans-Regular.ttf |
||||
@ -1,97 +1,85 @@
@@ -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 |
||||
|
||||
p |
||||
padding: 5px 0 |
||||
|
||||
|
||||
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 |
||||
|
||||
textarea, input[type=text] |
||||
font: .95em/1.3em $main-font-family |
||||
font-weight: 400 |
||||
|
||||
text-decoration: none |
||||
color: $main-color-color |
||||
&:hover, &:active |
||||
color: $main-color-color |
||||
text-decoration: none |
||||
i |
||||
text-decoration: underline |
||||
font-style: normal |
||||
|
||||
i, em |
||||
font-style: italic |
||||
|
||||
strong, b |
||||
font-weight: 600 |
||||
|
||||
h1 |
||||
font-size: 1.1em |
||||
text-transform: uppercase |
||||
letter-spacing: 0.07em |
||||
font-weight: 700 |
||||
line-height: 1.1em |
||||
|
||||
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 @@
@@ -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 @@
@@ -1,55 +1,56 @@
|
||||
.login .header-bold |
||||
display: block |
||||
width: 720px |
||||
margin: 0px auto 12px auto |
||||
|
||||
.login .module |
||||
display: block |
||||
width: 720px |
||||
padding: 32px 40px |
||||
margin: 8px auto |
||||
background: white |
||||
|
||||
.login .module p |
||||
margin-bottom: 5px |
||||
|
||||
.login .module input |
||||
padding: 5px 10px |
||||
background: #f3f3f3 |
||||
border: solid 1px #dcdcdc |
||||
transition: box-shadow 0.3s, border 0.3s |
||||
font-size: 14px |
||||
|
||||
.login .module input:focus, |
||||
.login .module select:focus |
||||
background: white |
||||
transition: background-color 100ms linear |
||||
border-bottom: solid 2px $color-green |
||||
|
||||
.login .module select |
||||
height: 30px |
||||
padding: 3px 30px 3px 10px |
||||
margin: 0 |
||||
border: 1px solid #ccc |
||||
font-size: 14px |
||||
|
||||
.login .module span.availability |
||||
margin-left: 10px |
||||
color: #45474d |
||||
|
||||
.with-nickname, .import-secret-key, .create-user |
||||
margin-top: 10px |
||||
|
||||
.login .module:nth-child(2) div, |
||||
.login .module:nth-child(3) div:nth-child(2), |
||||
.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 |
||||
.login |
||||
|
||||
.header-bold |
||||
display: block |
||||
width: 720px |
||||
margin: 0px auto 12px auto |
||||
|
||||
.module |
||||
background: white |
||||
@extend .col |
||||
@extend .col-6 |
||||
padding: $space |
||||
|
||||
p |
||||
margin-bottom: 5px |
||||
|
||||
input |
||||
padding: 5px 10px |
||||
background: #f3f3f3 |
||||
border: solid 1px #dcdcdc |
||||
transition: box-shadow 0.3s, border 0.3s |
||||
font-size: 14px |
||||
|
||||
input:focus, select:focus |
||||
background: white |
||||
transition: background-color 100ms linear |
||||
border-bottom: solid 2px $color-green |
||||
|
||||
select |
||||
height: 30px |
||||
padding: 3px 30px 3px 10px |
||||
margin: 0 |
||||
border: 1px solid #ccc |
||||
font-size: 14px |
||||
|
||||
span.availability |
||||
margin-left: 10px |
||||
color: #45474d |
||||
|
||||
|
||||
|
||||
.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 |
||||
@ -1,90 +1,96 @@
@@ -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 |
||||
|
||||
|
||||
@ -1,69 +1,81 @@
@@ -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 |
||||
ul |
||||
line-height: 2rem |
||||
padding: 2rem |
||||
|
||||
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 |
||||
background: $bloc-background-color |
||||
padding: 5px 8px |
||||
line-height: 1.7 |
||||
display: inline-block |
||||
.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 |
||||
|
||||
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 |
||||
float: right |
||||
margin-right: 18px |
||||
.highlight |
||||
font-size: 1.2rem |
||||
display: block |
||||
margin: $space 0 |
||||
|
||||
.connections span, .known-peers, .dht-nodes, .blocks, .last-block-time, .mining-difficulty |
||||
color: #333 |
||||
font-weight: 700 |
||||
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 @@
@@ -1,333 +1,313 @@
|
||||
/************* POST BOARD *************/ |
||||
|
||||
|
||||
// vars for postboard |
||||
|
||||
$avatar-width : 48px |
||||
|
||||
|
||||
.postboard |
||||
@extend .col |
||||
@extend .col-5 |
||||
|
||||
|
||||
.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 |
||||
float: left |
||||
width: 50% |
||||
padding: 20px |
||||
h2 |
||||
display: none |
||||
.postboard-posts |
||||
position: relative |
||||
z-index: 1 |
||||
clear: both |
||||
|
||||
.postboard-news |
||||
display: none |
||||
|
||||
.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 |
||||
|
||||
.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%) |
||||
background: none |
||||
@extend .box-shadow |
||||
|
||||
&: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 |
||||
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 |
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* 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%) |
||||
border-left: solid 3px $main-color-color |
||||
margin-left: 1px |
||||
|
||||
|
||||
@ -1,5 +1,62 @@
@@ -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 |
||||
Loading…
Reference in new issue