mirror of
https://github.com/twisterarmy/theme_nin.git
synced 2025-02-06 12:04:32 +00:00
More cleaning & templating
This commit is contained in:
Mylene
parent
87d65143a1
commit
b6bc99aade
610
css/style.css
610
css/style.css
File diff suppressed because it is too large
Load Diff
@ -1,26 +1,27 @@
|
||||
|
||||
$(document).ready(function()
|
||||
{
|
||||
var windowHeight = $(window).height();
|
||||
//$('.right').css('height', windowHeight - 100);
|
||||
$('.module.who-to-follow').detach().appendTo($('.dashboard.right'));
|
||||
$('.module.twistday-reminder').detach().appendTo($('.dashboard.right'));
|
||||
});
|
||||
|
||||
|
||||
|
||||
$(window).resize(function()
|
||||
{
|
||||
var windowHeight = $(window).height();
|
||||
//$('.right').css('height', windowHeight - 100);
|
||||
|
||||
$('.module.who-to-follow').detach().appendTo($('.dashboard.right'));
|
||||
$('.module.twistday-reminder').detach().appendTo($('.dashboard.right'));
|
||||
});
|
||||
|
||||
$(function(){
|
||||
|
||||
|
||||
|
||||
|
||||
$(document).ready(function()
|
||||
{
|
||||
|
||||
$('.module.who-to-follow').detach().appendTo($('.dashboard.right'));
|
||||
$('.module.twistday-reminder').detach().appendTo($('.dashboard.right'));
|
||||
var windowHeight = $(window).height();
|
||||
$('.modal-close').html('');
|
||||
//$('.right').css('height', windowHeight - 100);
|
||||
$('.mini-profile .open-following-page').parent('li').detach().appendTo($('.mini-profile-indicators'));
|
||||
//$('.mini-profile .open-following-page').parent('li').detach().appendTo($('.mini-profile-indicators'));
|
||||
|
||||
$('.modal-back').html('');
|
||||
$('.twister-user-remove').html('');
|
||||
$('.profile-card-main').attr('style', '');
|
||||
@ -39,6 +40,7 @@ $(function(){
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
$( ".promoted-posts-only").click(function() {
|
||||
// modify the way promoted posts are shown
|
||||
@ -66,6 +68,10 @@ $(function(){
|
||||
$(document).ready(localizeLabels);
|
||||
|
||||
|
||||
$('<div></div>').appendTo('.postboard-loading');
|
||||
$('<div></div>').appendTo('.postboard-loading');
|
||||
$('<div></div>').appendTo('.postboard-loading');
|
||||
|
||||
|
||||
|
||||
});
|
||||
@ -100,8 +106,10 @@ function openModal(modal) {
|
||||
.append(modal.content);
|
||||
else
|
||||
modal.content = modal.self.find('.modal-content');
|
||||
modal.self.prependTo('body').fadeIn('fast');
|
||||
|
||||
modal.postboard = modal.self.find('.postboard-posts');
|
||||
|
||||
modal.self.prependTo('body').fadeIn('slow');
|
||||
|
||||
|
||||
if (modal.classBase === '.modal-wrapper') {
|
||||
modal.content.outerHeight(modal.self.height() - modal.self.find('.modal-header').outerHeight());
|
||||
|
||||
@ -14,7 +14,7 @@ html, body
|
||||
html
|
||||
font-size: $global-font-size
|
||||
background-color: $main-background-color
|
||||
+background-image(linear-gradient(to top right, #fff, $main-background-color, #fff) )
|
||||
//+background-image(linear-gradient(to top right, #fff, $main-background-color, #fff) )
|
||||
background-attachment: fixed
|
||||
|
||||
body
|
||||
@ -22,6 +22,7 @@ body
|
||||
line-height : $main-line-height
|
||||
font-family : $main-font-family
|
||||
font-weight: 400
|
||||
overflow-y: scroll
|
||||
|
||||
|
||||
|
||||
@ -71,6 +72,18 @@ textarea, input
|
||||
display: block
|
||||
border: none
|
||||
|
||||
|
||||
samp
|
||||
background: #eee
|
||||
font-size: .9rem
|
||||
line-height: .9rem
|
||||
display: inline-block
|
||||
padding: 5px 8px
|
||||
+border-radius(2px)
|
||||
color: #333
|
||||
font-weight: 500
|
||||
font-family: monospace
|
||||
|
||||
/* isFollowing */
|
||||
|
||||
.isFollowing:after
|
||||
|
||||
@ -2,7 +2,8 @@
|
||||
|
||||
|
||||
.box-shadow
|
||||
+box-shadow(0 8px 13px rgba(#333, .1))
|
||||
+box-shadow(0 8px 13px rgba(#111, 0))
|
||||
|
||||
|
||||
.clear-fix
|
||||
&:after // clearfix
|
||||
@ -21,7 +22,6 @@ button, a.button
|
||||
letter-spacing: 0.07rem
|
||||
font-size: .75rem
|
||||
position: relative
|
||||
z-index: 10
|
||||
font-weight: 300
|
||||
margin: 2px
|
||||
text-transform: uppercase
|
||||
@ -42,21 +42,21 @@ button, a.button
|
||||
color: #666
|
||||
+box-shadow(1px 1px 0 rgba(#444, .3))
|
||||
&.color-1
|
||||
background: $main-color-color
|
||||
border-color: darken($main-color-color, 5%)
|
||||
background: #5E80A2
|
||||
border-color: darken(#5E80A2, 5%)
|
||||
color: white
|
||||
font-weight: 500
|
||||
&:hover
|
||||
border-color: darken($main-color-color, 15%)
|
||||
border-color: darken(#5E80A2, 15%)
|
||||
&.color-2
|
||||
background: #C3C3C3
|
||||
border-color: darken(#C3C3C3, 5%)
|
||||
background: #64676C
|
||||
border-color: darken(#64676C, 5%)
|
||||
color: white
|
||||
font-weight: 500
|
||||
&:hover
|
||||
border-color: darken(#C3C3C3, 15%)
|
||||
border-color: darken(#64676C, 15%)
|
||||
&.small
|
||||
padding: .3rem .5rem
|
||||
padding: .5rem
|
||||
font-weight: 700
|
||||
font-size: .6rem
|
||||
line-height: .6rem
|
||||
font-size: .7rem
|
||||
line-height: .7rem
|
||||
@ -32,7 +32,7 @@ $space : 1rem
|
||||
// colors
|
||||
|
||||
$light-grey: #C3C3C3
|
||||
$color-green: #B4C669
|
||||
$color-green: #A1B775
|
||||
$color-red: #EF5D43
|
||||
$color-blue: #39434F
|
||||
$dark-grey : #444
|
||||
@ -41,14 +41,14 @@ $dark-grey : #444
|
||||
$main-color-light: #aaa
|
||||
$main-color-dark: #222
|
||||
$main-color-color: $color-green
|
||||
$main-background-color: lighten($light-grey, 10% )
|
||||
$bloc-light-color : lighten($light-grey, 20% )
|
||||
$main-background-color: #EBEBEB
|
||||
$bloc-light-color : #FDFCFA
|
||||
|
||||
$bloc-background-color: white
|
||||
$bloc-background-color: #EBEBEB
|
||||
|
||||
$defaut-font-color: $dark-grey
|
||||
|
||||
$global-font-size : 15px
|
||||
$global-font-size : 14px
|
||||
$main-font-size : 1rem
|
||||
$main-line-height : 1.4rem
|
||||
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
/****** DIRECT MESSAGES MODAL**********/
|
||||
|
||||
.modal-wrapper.directMessages
|
||||
|
||||
|
||||
|
||||
.post-area-new
|
||||
display: none
|
||||
z-index: 5
|
||||
background: $main-background-color
|
||||
background: $main-color-dark !important
|
||||
position: absolute
|
||||
bottom: 0
|
||||
width: 100%
|
||||
padding: 0!important
|
||||
width: 100% !important
|
||||
padding: 20px!important
|
||||
.modal-header
|
||||
h3 span
|
||||
display: inline-block!important
|
||||
@ -21,14 +21,14 @@
|
||||
.modal-content
|
||||
+box-sizing(border-box)
|
||||
width: 100%
|
||||
|
||||
background: #f0f0f0
|
||||
|
||||
.post-photo
|
||||
height: 48px
|
||||
width: 48px
|
||||
.post-text
|
||||
margin-left: 58px
|
||||
font-size: .9em
|
||||
font-size: .9rem
|
||||
.post-info-name
|
||||
float: none
|
||||
.post-info-tag
|
||||
@ -60,13 +60,19 @@
|
||||
.direct-messages-list
|
||||
.post:hover:after
|
||||
display: block
|
||||
.post:hover
|
||||
background: white
|
||||
li
|
||||
position: relative
|
||||
border-bottom: 1px solid $main-background-color
|
||||
.direct-messages-thread
|
||||
padding-bottom: 150px
|
||||
padding-bottom: 180px
|
||||
|
||||
max-width: 420px
|
||||
margin: auto
|
||||
li
|
||||
position: relative
|
||||
position: relative!important
|
||||
|
||||
.post
|
||||
@extend .clear-fix
|
||||
background: none
|
||||
@ -78,7 +84,8 @@
|
||||
display: block
|
||||
text-align: center
|
||||
font-size: 10px
|
||||
margin: 10px 0
|
||||
padding-top: 10px
|
||||
margin-bottom: 10px
|
||||
cursor: default
|
||||
position: static
|
||||
&:hover
|
||||
@ -108,18 +115,18 @@
|
||||
position: relative
|
||||
display: inline-block
|
||||
max-width: 300px
|
||||
font-size: .9em
|
||||
font-size: .9rem
|
||||
padding: 5px 10px
|
||||
z-index: 4
|
||||
float: left
|
||||
word-wrap: break-word
|
||||
max-width: 60%
|
||||
min-height: 15px
|
||||
max-width: 70%
|
||||
min-height: 48px
|
||||
|
||||
.post-photo
|
||||
position: absolute
|
||||
left: 0
|
||||
top: 10px
|
||||
top: 35px
|
||||
|
||||
|
||||
|
||||
|
||||
@ -9,15 +9,15 @@ $menu-font-color: white
|
||||
height: $menu-height
|
||||
left: 0
|
||||
margin: 0
|
||||
background-color: lighten($main-color-dark,10%)
|
||||
//+background-image(radial-gradient(at top , $color-green,$color-blue) )
|
||||
background-color: #64676C
|
||||
//+background-image(linear-gradient(to left , $color-green, $color-green, #5E80A2) )
|
||||
|
||||
z-index: 2
|
||||
ul
|
||||
@extend .clear-fix
|
||||
+box-sizing(border-box)
|
||||
width: 100%
|
||||
max-width: 75%
|
||||
max-width: 70%
|
||||
margin: 0
|
||||
background: image-url("logo.png") no-repeat 50% 50%
|
||||
background-size: 20px
|
||||
|
||||
@ -9,9 +9,9 @@ $header-modal-height : $menu-height
|
||||
|
||||
|
||||
.modal-wrapper
|
||||
background: white
|
||||
background: $bloc-background-color
|
||||
z-index: 3000
|
||||
width: 25%
|
||||
width: 30%
|
||||
position: fixed
|
||||
+box-sizing(border-box)
|
||||
@extend .box-shadow
|
||||
@ -19,6 +19,11 @@ $header-modal-height : $menu-height
|
||||
right: 0
|
||||
bottom: 0
|
||||
overflow: hidden
|
||||
|
||||
.postboard
|
||||
border: none
|
||||
padding: 0
|
||||
|
||||
.post-area-new
|
||||
padding: 10px
|
||||
|
||||
@ -36,14 +41,15 @@ $header-modal-height : $menu-height
|
||||
overflow: hidden
|
||||
overflow-y: auto
|
||||
.postboard-news
|
||||
position: absolute
|
||||
position: fixed
|
||||
display: block
|
||||
right: 0
|
||||
z-index: 20
|
||||
right: 2px
|
||||
top: $header-modal-height +2
|
||||
z-index: 2000
|
||||
@extend .color-1
|
||||
h2 span
|
||||
display: none
|
||||
background: $bloc-light-color
|
||||
background: $bloc-background-color
|
||||
|
||||
|
||||
|
||||
@ -51,7 +57,7 @@ $header-modal-height : $menu-height
|
||||
|
||||
.modal-header
|
||||
position: relative
|
||||
background: $main-color-dark
|
||||
background: darken(#64676C,12%)
|
||||
height: $header-modal-height
|
||||
+box-sizing(border-box)
|
||||
@extend .clear-fix
|
||||
@ -102,19 +108,12 @@ $header-modal-height : $menu-height
|
||||
position: relative
|
||||
width: 100%
|
||||
margin: auto
|
||||
background: $main-background-color
|
||||
background: $bloc-background-color
|
||||
|
||||
h2
|
||||
display: block
|
||||
|
||||
.post-text
|
||||
margin: 0 0 0 40px
|
||||
.post-photo
|
||||
width: 30px
|
||||
height: 30px
|
||||
img
|
||||
width: 100%
|
||||
height: 100%
|
||||
//+border-radius(50%)
|
||||
|
||||
|
||||
|
||||
|
||||
@ -132,8 +131,7 @@ $header-modal-height : $menu-height
|
||||
.modal-buttons
|
||||
padding: 10px
|
||||
text-align: right
|
||||
button:last-child
|
||||
padding: 5px 20px
|
||||
|
||||
|
||||
/************ FOLLOWING-CONFIG MODAL **********/
|
||||
|
||||
@ -167,6 +165,12 @@ $header-modal-height : $menu-height
|
||||
|
||||
.post-expand, .post-interactions
|
||||
display: none
|
||||
.post-info-time
|
||||
position: static
|
||||
float: right
|
||||
.post-text
|
||||
margin-top: 10px
|
||||
margin-bottom: 10px
|
||||
|
||||
/********* REPLY POSTS MODAL***************/
|
||||
|
||||
@ -233,8 +237,9 @@ $header-modal-height : $menu-height
|
||||
width: 100%
|
||||
@extend .clear-fix
|
||||
color: $defaut-font-color
|
||||
background: $bloc-background-color
|
||||
&:hover
|
||||
background: $bloc-background-color
|
||||
background: $bloc-light-color
|
||||
.mini-profile-photo
|
||||
height: 48px
|
||||
width: 48px
|
||||
@ -250,18 +255,21 @@ $header-modal-height : $menu-height
|
||||
/******* 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
|
||||
|
||||
a.twister-user-name
|
||||
color: $defaut-font-color
|
||||
span
|
||||
padding-bottom: .5rem
|
||||
font-size: 1rem
|
||||
line-height: 1rem
|
||||
color: $defaut-font-color
|
||||
font-weight: 500
|
||||
opacity: 1
|
||||
letter-spacing: 0
|
||||
.twister-user-info
|
||||
text-align: left
|
||||
font-size: .8rem
|
||||
@ -275,4 +283,4 @@ $header-modal-height : $menu-height
|
||||
.bio
|
||||
color: rgba(0, 0, 0, 0.6)
|
||||
font-style: italic
|
||||
padding: .5rem
|
||||
padding-bottom: .5rem
|
||||
|
||||
@ -3,11 +3,12 @@
|
||||
|
||||
// vars for postboard
|
||||
|
||||
$avatar-width : 48px
|
||||
$avatar-width : 45px
|
||||
|
||||
|
||||
.postboard
|
||||
width: 100%
|
||||
width: 40%
|
||||
margin-left: 30%
|
||||
padding: 20px
|
||||
h2
|
||||
display: none
|
||||
@ -15,18 +16,18 @@ $avatar-width : 48px
|
||||
position: relative
|
||||
z-index: 1
|
||||
clear: both
|
||||
|
||||
|
||||
.postboard-news
|
||||
display: none
|
||||
|
||||
.post
|
||||
background: $bloc-background-color
|
||||
background: $bloc-light-color
|
||||
position: relative
|
||||
margin-bottom: 1px
|
||||
@extend .box-shadow
|
||||
+transition-property(margin)
|
||||
+transition-duration(.4s)
|
||||
+transition-duration(.5s)
|
||||
+transition-timing-function(ease-out)
|
||||
|
||||
.post, .original.post, .post.open
|
||||
position: relative
|
||||
|
||||
@ -48,10 +49,11 @@ $avatar-width : 48px
|
||||
|
||||
|
||||
.postboard-posts > .post
|
||||
|
||||
+border-radius(2px)
|
||||
&.open
|
||||
margin-top: $space
|
||||
margin-bottom: $space
|
||||
+border-radius(2px)
|
||||
|
||||
&:after
|
||||
content: ""
|
||||
@ -71,7 +73,7 @@ $avatar-width : 48px
|
||||
|
||||
.open
|
||||
background: none!important
|
||||
@extend .box-shadow
|
||||
|
||||
|
||||
.post-photo
|
||||
margin: 0
|
||||
@ -79,13 +81,9 @@ $avatar-width : 48px
|
||||
float: left
|
||||
vertical-align: middle
|
||||
width: $avatar-width
|
||||
height: $avatar-width
|
||||
overflow: hidden
|
||||
img
|
||||
width: 100%
|
||||
height: 100%
|
||||
//+border-radius(50%)
|
||||
|
||||
height: auto!important
|
||||
|
||||
.post-info-name
|
||||
font-weight: 600
|
||||
@ -120,18 +118,9 @@ $avatar-width : 48px
|
||||
.post-text
|
||||
margin: 0 0 0 ($avatar-width +10)
|
||||
word-wrap: break-word
|
||||
min-height: $avatar-width
|
||||
min-height: $avatar-width - 20
|
||||
padding: 0
|
||||
samp
|
||||
background: #eee
|
||||
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
|
||||
@ -244,13 +233,14 @@ $avatar-width : 48px
|
||||
padding: 5px 5px 0 5px
|
||||
@extend .clear-fix
|
||||
|
||||
|
||||
.image-preview
|
||||
width: 100%
|
||||
max-width: 100%
|
||||
width: auto
|
||||
display: block
|
||||
margin: auto
|
||||
|
||||
.preview-container
|
||||
max-height: 500px
|
||||
width: 100%
|
||||
text-align: center
|
||||
overflow-y: auto
|
||||
@ -304,6 +294,5 @@ $avatar-width : 48px
|
||||
display: inline-block
|
||||
|
||||
.post-replies .sub-replies
|
||||
border-left: solid 3px $main-color-color
|
||||
margin-left: 1px
|
||||
border-left: solid 18px $main-background-color
|
||||
|
||||
|
||||
@ -26,13 +26,14 @@ $modal-postboard-post-height: 100%
|
||||
.postboard
|
||||
width: 100%
|
||||
height: 100%
|
||||
position: relative
|
||||
position: absolute
|
||||
|
||||
|
||||
.postboard-posts
|
||||
display: block
|
||||
height: $modal-postboard-post-height
|
||||
overflow-y: auto
|
||||
overflow: auto
|
||||
|
||||
.postboard-posts .post
|
||||
padding: 0
|
||||
margin-bottom: 1px
|
||||
@ -41,6 +42,8 @@ $modal-postboard-post-height: 100%
|
||||
.profile-card
|
||||
margin: 0
|
||||
padding: 0
|
||||
.profile-data
|
||||
background: none
|
||||
|
||||
.profile-modal
|
||||
h2.profile-screen-name
|
||||
@ -58,7 +61,7 @@ $modal-postboard-post-height: 100%
|
||||
|
||||
.profile-card
|
||||
width: 100%
|
||||
background: white
|
||||
background: $bloc-light-color
|
||||
padding: $modal-gut
|
||||
.profile-card-main
|
||||
position: relative
|
||||
@ -122,11 +125,7 @@ $modal-postboard-post-height: 100%
|
||||
|
||||
|
||||
|
||||
.twister-user-info
|
||||
@extend .clear-fix
|
||||
text-align: center
|
||||
width: 100%
|
||||
padding: 0
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
283
sass/style.sass
283
sass/style.sass
@ -1,4 +1,7 @@
|
||||
|
||||
@import '../css/jquery.mCustomScrollbar.css'
|
||||
|
||||
|
||||
@import compass
|
||||
@import 'compass/reset'
|
||||
@import 'compass/utilities'
|
||||
@ -26,7 +29,6 @@
|
||||
|
||||
|
||||
|
||||
|
||||
.promoted-posts-only
|
||||
margin: 0 0
|
||||
@extend .clear-fix
|
||||
@ -56,7 +58,7 @@
|
||||
|
||||
/* Wrapper and blocks */
|
||||
.wrapper
|
||||
width: 50%
|
||||
width: 100%
|
||||
max-width: 100%
|
||||
margin: auto
|
||||
padding-top: $menu-height
|
||||
@ -65,21 +67,32 @@
|
||||
|
||||
.dashboard
|
||||
&.left
|
||||
position: fixed
|
||||
position: absolute
|
||||
top: $menu-height
|
||||
left: 0
|
||||
height: 100vh
|
||||
overflow: hidden
|
||||
width: 25%
|
||||
width: 30%
|
||||
> .module
|
||||
float: right
|
||||
&.right
|
||||
position: fixed
|
||||
right: 0
|
||||
top: $menu-height
|
||||
overflow: hidden
|
||||
width: 25%
|
||||
|
||||
|
||||
width: 30%
|
||||
|
||||
> .module
|
||||
max-width: 320px
|
||||
margin-bottom: 20px
|
||||
background: $bloc-light-color
|
||||
width: 100%
|
||||
@extend .box-shadow
|
||||
h3
|
||||
float: left
|
||||
padding: 20px
|
||||
h4
|
||||
clear: left
|
||||
border-top: 1px solid $main-background-color
|
||||
padding: 10px
|
||||
|
||||
|
||||
|
||||
@ -176,10 +189,7 @@ ul.userMenu-search-profiles
|
||||
.mini-profile
|
||||
@extend .box-shadow
|
||||
.mini-profile-info
|
||||
position: relative
|
||||
text-align: center
|
||||
background: $bloc-background-color
|
||||
padding: 20px 0
|
||||
|
||||
|
||||
a.button
|
||||
background: $main-color-light
|
||||
@ -212,17 +222,21 @@ ul.userMenu-search-profiles
|
||||
font-size: .8em
|
||||
width: 25%
|
||||
float: left
|
||||
text-align: center
|
||||
border-right: 1px solid $main-background-color
|
||||
&:last-child
|
||||
border: none
|
||||
|
||||
a
|
||||
color: $dark-grey
|
||||
color: lighten($dark-grey,20%)
|
||||
display: block
|
||||
padding: 1em 0
|
||||
padding: 1rem 0
|
||||
&:hover
|
||||
text-decoration: underline
|
||||
|
||||
color: $dark-grey
|
||||
&:before
|
||||
display: block!important
|
||||
width: 100%!important
|
||||
font-size: 1.4rem!important
|
||||
|
||||
.userMenu-connections a
|
||||
@extend .icon-bell
|
||||
@ -349,11 +363,11 @@ ul.userMenu-search-profiles
|
||||
-moz-transition: height 0.3s linear
|
||||
-o-transition: height 0.3s linear
|
||||
-ms-transition: height 0.3s linear
|
||||
height: 28px
|
||||
height: 48px
|
||||
border: none
|
||||
background: rgba(255, 255, 255, 1)
|
||||
border: 1px solid rgba(0, 0, 0, 0.1)
|
||||
padding: 3px
|
||||
padding: 5px
|
||||
margin: 5px 0
|
||||
&:focus
|
||||
border-bottom: solid 1px $main-color-color
|
||||
@ -398,6 +412,13 @@ ul.userMenu-search-profiles
|
||||
margin: 0 0 10px 0
|
||||
|
||||
|
||||
#post-preview
|
||||
background: $bloc-background-color
|
||||
border: 1px solid $main-background-color
|
||||
padding: 15px
|
||||
+transition-property(all)
|
||||
+transition-duration(.1s)
|
||||
width: 100%!important
|
||||
|
||||
|
||||
|
||||
@ -438,31 +459,25 @@ textarea.splited-post
|
||||
|
||||
.who-to-follow
|
||||
&.module
|
||||
margin-bottom: 20px
|
||||
background: white
|
||||
padding: 20px
|
||||
width: 100%
|
||||
@extend .box-shadow
|
||||
|
||||
li
|
||||
width: 100%
|
||||
min-height: auto
|
||||
border-bottom: 1px solid $main-background-color
|
||||
margin: 0
|
||||
padding-bottom: 10px
|
||||
margin-top: 10px
|
||||
&:last-child
|
||||
border: none
|
||||
@extend .clear-fix
|
||||
button
|
||||
position: absolute
|
||||
right: 0
|
||||
top: 20%
|
||||
right: 10px
|
||||
top: 10px
|
||||
@extend .small
|
||||
display: none
|
||||
&:hover button
|
||||
display: block
|
||||
.bio
|
||||
text-align: left!important
|
||||
|
||||
|
||||
small
|
||||
display: none
|
||||
h3
|
||||
float: left
|
||||
padding: 20px
|
||||
ol
|
||||
@extend .clear-fix
|
||||
clear: both
|
||||
@ -470,27 +485,29 @@ textarea.splited-post
|
||||
.twister-user
|
||||
position: relative
|
||||
box-sizing: border-box
|
||||
background: $bloc-background-color
|
||||
background: $bloc-light-color
|
||||
@extend .clear-fix
|
||||
@extend .col
|
||||
@extend .col-3
|
||||
border-top: 1px solid $main-background-color
|
||||
width: 100%
|
||||
min-height: auto
|
||||
&:nth-child(4n)
|
||||
@extend .last
|
||||
padding: 10px 0
|
||||
clear: left
|
||||
+transition-property(background)
|
||||
+transition-duration(.1s)
|
||||
@extend .clear-fix
|
||||
&:hover
|
||||
background: white
|
||||
|
||||
|
||||
|
||||
img.twister-user-photo
|
||||
+border-radius(50%)
|
||||
float: left
|
||||
vertical-align: middle
|
||||
display: block
|
||||
float: left
|
||||
vertical-align: middle
|
||||
|
||||
width: 48px
|
||||
height: 48px
|
||||
margin: 10px
|
||||
height: auto
|
||||
margin: 0 10px
|
||||
background: $main-background-color
|
||||
|
||||
|
||||
@ -609,97 +626,117 @@ ol.toptrends-list
|
||||
/********* TWISTDAY REMINDER *******/
|
||||
|
||||
.twistday-reminder
|
||||
width: 100%
|
||||
background: white
|
||||
@extend .box-shadow
|
||||
@extend .clear-fix
|
||||
padding: 20px
|
||||
|
||||
|
||||
small
|
||||
display: none
|
||||
.twister-user
|
||||
|
||||
background: $bloc-light-color
|
||||
position: relative
|
||||
+transition-property(background)
|
||||
+transition-duration(.1s)
|
||||
&:hover
|
||||
background: white
|
||||
|
||||
|
||||
|
||||
.twister-user-full, .twister-user-tag
|
||||
padding: 0 0 .5rem 0
|
||||
font-size: 1rem
|
||||
line-height: 1rem
|
||||
color: $defaut-font-color
|
||||
font-weight: 500
|
||||
opacity: 1
|
||||
letter-spacing: 0
|
||||
display: inline-block
|
||||
.twisterday
|
||||
font-size: 12px
|
||||
|
||||
|
||||
/******* LOADER *************/
|
||||
|
||||
|
||||
|
||||
|
||||
.postboard-loading, .loading-roller
|
||||
clear: both
|
||||
text-align: center
|
||||
div
|
||||
display: inline-block
|
||||
width: 120px
|
||||
height: 10px
|
||||
background-color: $main-color-light
|
||||
position: relative
|
||||
margin: 10px 0 0 0
|
||||
&:after
|
||||
content: ""
|
||||
position: absolute
|
||||
background-color: white
|
||||
left: 2px
|
||||
top: 2px
|
||||
bottom: 2px
|
||||
z-index: 999
|
||||
animation-name: slide
|
||||
animation-duration: 1.5s
|
||||
animation-easing-function: linear
|
||||
animation-iteration-count: infinite
|
||||
-webkit-animation-name: slide
|
||||
-webkit-animation-duration: 1.5s
|
||||
-webkit-animation-easing-function: linear
|
||||
-webkit-animation-iteration-count: infinite
|
||||
-moz-animation-name: slide
|
||||
-moz-animation-duration: 1.5s
|
||||
-moz-animation-easing-function: linear
|
||||
-moz-animation-iteration-count: infinite
|
||||
font-size: 100px
|
||||
width: .4em
|
||||
height: .4em
|
||||
position: relative
|
||||
list-style: none
|
||||
border-radius: 50%
|
||||
margin: 100px auto
|
||||
display: none
|
||||
|
||||
@keyframes slide
|
||||
0%
|
||||
right: 60px
|
||||
left: 2px
|
||||
5%
|
||||
left: 2px
|
||||
50%
|
||||
right: 2px
|
||||
left: 60px
|
||||
55%
|
||||
right: 2px
|
||||
100%
|
||||
right: 60px
|
||||
left: 2px
|
||||
div
|
||||
width: .1em
|
||||
height: .1em
|
||||
position: absolute
|
||||
border-radius: 50%
|
||||
|
||||
&:nth-child(1)
|
||||
background: #62839F
|
||||
top: 0
|
||||
left: 50%
|
||||
margin-left: -.05em
|
||||
transform-origin: 50% 250%
|
||||
animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate
|
||||
|
||||
|
||||
@-webkit-keyframes slide
|
||||
0%
|
||||
right: 100px
|
||||
left: 2px
|
||||
5%
|
||||
left: 2px
|
||||
50%
|
||||
right: 2px
|
||||
left: 100px
|
||||
55%
|
||||
right: 2px
|
||||
100%
|
||||
right: 100px
|
||||
left: 2px
|
||||
&:nth-child(2)
|
||||
background: #749294
|
||||
top: 50%
|
||||
right: 0
|
||||
margin-top: -.05em
|
||||
transform-origin: -150% 50%
|
||||
animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate
|
||||
|
||||
|
||||
@-moz-keyframes slide
|
||||
0%
|
||||
right: 60px
|
||||
left: 2px
|
||||
5%
|
||||
left: 2px
|
||||
50%
|
||||
right: 2px
|
||||
left: 60px
|
||||
55%
|
||||
right: 2px
|
||||
100%
|
||||
right: 60px
|
||||
left: 2px
|
||||
&:nth-child(3)
|
||||
background: #94AC7E
|
||||
bottom: 0
|
||||
left: 50%
|
||||
margin-left: -.05em
|
||||
transform-origin: 50% -150%
|
||||
animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate
|
||||
|
||||
|
||||
&:nth-child(4)
|
||||
background: #B4C669
|
||||
top: 50%
|
||||
left: 0
|
||||
margin-top: -.05em
|
||||
transform-origin: 250% 50%
|
||||
animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate
|
||||
|
||||
@keyframes rota
|
||||
to
|
||||
transform: rotate(360deg)
|
||||
|
||||
|
||||
@keyframes opa
|
||||
12.0%
|
||||
opacity: 0.80
|
||||
19.5%
|
||||
opacity: 0.88
|
||||
37.2%
|
||||
opacity: 0.64
|
||||
40.5%
|
||||
opacity: 0.52
|
||||
52.7%
|
||||
opacity: 0.69
|
||||
60.2%
|
||||
opacity: 0.60
|
||||
66.6%
|
||||
opacity: 0.52
|
||||
70.0%
|
||||
opacity: 0.63
|
||||
79.9%
|
||||
opacity: 0.60
|
||||
84.2%
|
||||
opacity: 0.75
|
||||
91.0%
|
||||
opacity: 0.87
|
||||
|
||||
|
||||
|
||||
/* Options*/
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user