twisterarmy/theme_nin
1
0
Fork 0
mirror of https://github.com/twisterarmy/theme_nin.git synced 2025-02-06 20:15:01 +00:00
Code Issues Projects Releases Wiki Activity

More cleaning & templating

Browse Source
This commit is contained in:
Mylene 2015-07-28 10:40:52 +02:00
parent 87d65143a1
commit b6bc99aade
11 changed files with 628 additions and 513 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

610
css/style.css
View File

File diff suppressed because it is too large Load Diff

36
js/theme_option.js
View File

@ -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() $(window).resize(function()
{ {
var windowHeight = $(window).height();
//$('.right').css('height', windowHeight - 100);
$('.module.who-to-follow').detach().appendTo($('.dashboard.right')); $('.module.who-to-follow').detach().appendTo($('.dashboard.right'));
$('.module.twistday-reminder').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(); var windowHeight = $(window).height();
$('.modal-close').html(''); $('.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(''); $('.modal-back').html('');
$('.twister-user-remove').html(''); $('.twister-user-remove').html('');
$('.profile-card-main').attr('style', ''); $('.profile-card-main').attr('style', '');
@ -39,6 +40,7 @@ $(function(){
}); });
$( ".promoted-posts-only").click(function() { $( ".promoted-posts-only").click(function() {
// modify the way promoted posts are shown // modify the way promoted posts are shown
@ -66,6 +68,10 @@ $(function(){
$(document).ready(localizeLabels); $(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); .append(modal.content);
else else
modal.content = modal.self.find('.modal-content'); 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') { if (modal.classBase === '.modal-wrapper') {
modal.content.outerHeight(modal.self.height() - modal.self.find('.modal-header').outerHeight()); modal.content.outerHeight(modal.self.height() - modal.self.find('.modal-header').outerHeight());

15
sass/base/_commons.sass
View File

@ -14,7 +14,7 @@ html, body
html html
font-size: $global-font-size font-size: $global-font-size
background-color: $main-background-color 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 background-attachment: fixed
body body
@ -22,6 +22,7 @@ body
line-height : $main-line-height line-height : $main-line-height
font-family : $main-font-family font-family : $main-font-family
font-weight: 400 font-weight: 400
overflow-y: scroll
@ -71,6 +72,18 @@ textarea, input
display: block display: block
border: none 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 */
.isFollowing:after .isFollowing:after

22
sass/base/_utils.sass
View File

@ -2,7 +2,8 @@
.box-shadow .box-shadow
+box-shadow(0 8px 13px rgba(#333, .1)) +box-shadow(0 8px 13px rgba(#111, 0))
.clear-fix .clear-fix
&:after // clearfix &:after // clearfix
@ -21,7 +22,6 @@ button, a.button
letter-spacing: 0.07rem letter-spacing: 0.07rem
font-size: .75rem font-size: .75rem
position: relative position: relative
z-index: 10
font-weight: 300 font-weight: 300
margin: 2px margin: 2px
text-transform: uppercase text-transform: uppercase
@ -42,21 +42,21 @@ button, a.button
color: #666 color: #666
+box-shadow(1px 1px 0 rgba(#444, .3)) +box-shadow(1px 1px 0 rgba(#444, .3))
&.color-1 &.color-1
background: $main-color-color background: #5E80A2
border-color: darken($main-color-color, 5%) border-color: darken(#5E80A2, 5%)
color: white color: white
font-weight: 500 font-weight: 500
&:hover &:hover
border-color: darken($main-color-color, 15%) border-color: darken(#5E80A2, 15%)
&.color-2 &.color-2
background: #C3C3C3 background: #64676C
border-color: darken(#C3C3C3, 5%) border-color: darken(#64676C, 5%)
color: white color: white
font-weight: 500 font-weight: 500
&:hover &:hover
border-color: darken(#C3C3C3, 15%) border-color: darken(#64676C, 15%)
&.small &.small
padding: .3rem .5rem padding: .5rem
font-weight: 700 font-weight: 700
font-size: .6rem font-size: .7rem
line-height: .6rem line-height: .7rem

10
sass/base/_var.sass
View File

@ -32,7 +32,7 @@ $space : 1rem
// colors // colors
$light-grey: #C3C3C3 $light-grey: #C3C3C3
$color-green: #B4C669 $color-green: #A1B775
$color-red: #EF5D43 $color-red: #EF5D43
$color-blue: #39434F $color-blue: #39434F
$dark-grey : #444 $dark-grey : #444
@ -41,14 +41,14 @@ $dark-grey : #444
$main-color-light: #aaa $main-color-light: #aaa
$main-color-dark: #222 $main-color-dark: #222
$main-color-color: $color-green $main-color-color: $color-green
$main-background-color: lighten($light-grey, 10% ) $main-background-color: #EBEBEB
$bloc-light-color : lighten($light-grey, 20% ) $bloc-light-color : #FDFCFA
$bloc-background-color: white $bloc-background-color: #EBEBEB
$defaut-font-color: $dark-grey $defaut-font-color: $dark-grey
$global-font-size : 15px $global-font-size : 14px
$main-font-size : 1rem $main-font-size : 1rem
$main-line-height : 1.4rem $main-line-height : 1.4rem

33
sass/layout/_dm.sass
View File

@ -1,16 +1,16 @@
/****** DIRECT MESSAGES MODAL**********/ /****** DIRECT MESSAGES MODAL**********/
.modal-wrapper.directMessages .modal-wrapper.directMessages
.post-area-new .post-area-new
display: none display: none
z-index: 5 z-index: 5
background: $main-background-color background: $main-color-dark !important
position: absolute position: absolute
bottom: 0 bottom: 0
width: 100% width: 100% !important
padding: 0!important padding: 20px!important
.modal-header .modal-header
h3 span h3 span
display: inline-block!important display: inline-block!important
@ -21,14 +21,14 @@
.modal-content .modal-content
+box-sizing(border-box) +box-sizing(border-box)
width: 100% width: 100%
background: #f0f0f0
.post-photo .post-photo
height: 48px height: 48px
width: 48px width: 48px
.post-text .post-text
margin-left: 58px margin-left: 58px
font-size: .9em font-size: .9rem
.post-info-name .post-info-name
float: none float: none
.post-info-tag .post-info-tag
@ -60,13 +60,19 @@
.direct-messages-list .direct-messages-list
.post:hover:after .post:hover:after
display: block display: block
.post:hover
background: white
li li
position: relative position: relative
border-bottom: 1px solid $main-background-color border-bottom: 1px solid $main-background-color
.direct-messages-thread .direct-messages-thread
padding-bottom: 150px padding-bottom: 180px
max-width: 420px
margin: auto
li li
position: relative position: relative!important
.post .post
@extend .clear-fix @extend .clear-fix
background: none background: none
@ -78,7 +84,8 @@
display: block display: block
text-align: center text-align: center
font-size: 10px font-size: 10px
margin: 10px 0 padding-top: 10px
margin-bottom: 10px
cursor: default cursor: default
position: static position: static
&:hover &:hover
@ -108,18 +115,18 @@
position: relative position: relative
display: inline-block display: inline-block
max-width: 300px max-width: 300px
font-size: .9em font-size: .9rem
padding: 5px 10px padding: 5px 10px
z-index: 4 z-index: 4
float: left float: left
word-wrap: break-word word-wrap: break-word
max-width: 60% max-width: 70%
min-height: 15px min-height: 48px
.post-photo .post-photo
position: absolute position: absolute
left: 0 left: 0
top: 10px top: 35px

6
sass/layout/_menu.sass
View File

@ -9,15 +9,15 @@ $menu-font-color: white
height: $menu-height height: $menu-height
left: 0 left: 0
margin: 0 margin: 0
background-color: lighten($main-color-dark,10%) background-color: #64676C
//+background-image(radial-gradient(at top , $color-green,$color-blue) ) //+background-image(linear-gradient(to left , $color-green, $color-green, #5E80A2) )
z-index: 2 z-index: 2
ul ul
@extend .clear-fix @extend .clear-fix
+box-sizing(border-box) +box-sizing(border-box)
width: 100% width: 100%
max-width: 75% max-width: 70%
margin: 0 margin: 0
background: image-url("logo.png") no-repeat 50% 50% background: image-url("logo.png") no-repeat 50% 50%
background-size: 20px background-size: 20px

66
sass/layout/_modal.sass
View File

@ -9,9 +9,9 @@ $header-modal-height : $menu-height
.modal-wrapper .modal-wrapper
background: white background: $bloc-background-color
z-index: 3000 z-index: 3000
width: 25% width: 30%
position: fixed position: fixed
+box-sizing(border-box) +box-sizing(border-box)
@extend .box-shadow @extend .box-shadow
@ -19,6 +19,11 @@ $header-modal-height : $menu-height
right: 0 right: 0
bottom: 0 bottom: 0
overflow: hidden overflow: hidden
.postboard
border: none
padding: 0
.post-area-new .post-area-new
padding: 10px padding: 10px
@ -36,14 +41,15 @@ $header-modal-height : $menu-height
overflow: hidden overflow: hidden
overflow-y: auto overflow-y: auto
.postboard-news .postboard-news
position: absolute position: fixed
display: block display: block
right: 0 right: 2px
z-index: 20 top: $header-modal-height +2
z-index: 2000
@extend .color-1 @extend .color-1
h2 span h2 span
display: none display: none
background: $bloc-light-color background: $bloc-background-color
@ -51,7 +57,7 @@ $header-modal-height : $menu-height
.modal-header .modal-header
position: relative position: relative
background: $main-color-dark background: darken(#64676C,12%)
height: $header-modal-height height: $header-modal-height
+box-sizing(border-box) +box-sizing(border-box)
@extend .clear-fix @extend .clear-fix
@ -102,19 +108,12 @@ $header-modal-height : $menu-height
position: relative position: relative
width: 100% width: 100%
margin: auto margin: auto
background: $main-background-color background: $bloc-background-color
h2 h2
display: block 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 .modal-buttons
padding: 10px padding: 10px
text-align: right text-align: right
button:last-child
padding: 5px 20px
/************ FOLLOWING-CONFIG MODAL **********/ /************ FOLLOWING-CONFIG MODAL **********/
@ -167,6 +165,12 @@ $header-modal-height : $menu-height
.post-expand, .post-interactions .post-expand, .post-interactions
display: none display: none
.post-info-time
position: static
float: right
.post-text
margin-top: 10px
margin-bottom: 10px
/********* REPLY POSTS MODAL***************/ /********* REPLY POSTS MODAL***************/
@ -233,8 +237,9 @@ $header-modal-height : $menu-height
width: 100% width: 100%
@extend .clear-fix @extend .clear-fix
color: $defaut-font-color color: $defaut-font-color
background: $bloc-background-color
&:hover &:hover
background: $bloc-background-color background: $bloc-light-color
.mini-profile-photo .mini-profile-photo
height: 48px height: 48px
width: 48px width: 48px
@ -250,18 +255,21 @@ $header-modal-height : $menu-height
/******* WHO TO FOLLOW MODAL*******/ /******* WHO TO FOLLOW MODAL*******/
.modal-wrapper.who-to-follow-modal .modal-wrapper.who-to-follow-modal
.modal-content
padding: 15px
+box-sizing(border-box)
ol
margin: 5px
.open-profile-modal .open-profile-modal
&:hover &:hover
text-decoration: none 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 .twister-user-info
text-align: left text-align: left
font-size: .8rem font-size: .8rem
@ -275,4 +283,4 @@ $header-modal-height : $menu-height
.bio .bio
color: rgba(0, 0, 0, 0.6) color: rgba(0, 0, 0, 0.6)
font-style: italic font-style: italic
padding: .5rem padding-bottom: .5rem

45
sass/layout/_postboard.sass
View File

@ -3,11 +3,12 @@
// vars for postboard // vars for postboard
$avatar-width : 48px $avatar-width : 45px
.postboard .postboard
width: 100% width: 40%
margin-left: 30%
padding: 20px padding: 20px
h2 h2
display: none display: none
@ -15,18 +16,18 @@ $avatar-width : 48px
position: relative position: relative
z-index: 1 z-index: 1
clear: both clear: both
.postboard-news .postboard-news
display: none display: none
.post .post
background: $bloc-background-color background: $bloc-light-color
position: relative position: relative
margin-bottom: 1px margin-bottom: 1px
@extend .box-shadow
+transition-property(margin) +transition-property(margin)
+transition-duration(.4s) +transition-duration(.5s)
+transition-timing-function(ease-out) +transition-timing-function(ease-out)
.post, .original.post, .post.open .post, .original.post, .post.open
position: relative position: relative
@ -48,10 +49,11 @@ $avatar-width : 48px
.postboard-posts > .post .postboard-posts > .post
+border-radius(2px)
&.open &.open
margin-top: $space margin-top: $space
margin-bottom: $space margin-bottom: $space
+border-radius(2px)
&:after &:after
content: "" content: ""
@ -71,7 +73,7 @@ $avatar-width : 48px
.open .open
background: none!important background: none!important
@extend .box-shadow
.post-photo .post-photo
margin: 0 margin: 0
@ -79,13 +81,9 @@ $avatar-width : 48px
float: left float: left
vertical-align: middle vertical-align: middle
width: $avatar-width width: $avatar-width
height: $avatar-width
overflow: hidden
img img
width: 100% width: 100%
height: 100% height: auto!important
//+border-radius(50%)
.post-info-name .post-info-name
font-weight: 600 font-weight: 600
@ -120,18 +118,9 @@ $avatar-width : 48px
.post-text .post-text
margin: 0 0 0 ($avatar-width +10) margin: 0 0 0 ($avatar-width +10)
word-wrap: break-word word-wrap: break-word
min-height: $avatar-width min-height: $avatar-width - 20
padding: 0 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 .post-context
@ -244,13 +233,14 @@ $avatar-width : 48px
padding: 5px 5px 0 5px padding: 5px 5px 0 5px
@extend .clear-fix @extend .clear-fix
.image-preview .image-preview
width: 100% max-width: 100%
width: auto
display: block display: block
margin: auto margin: auto
.preview-container .preview-container
max-height: 500px
width: 100% width: 100%
text-align: center text-align: center
overflow-y: auto overflow-y: auto
@ -304,6 +294,5 @@ $avatar-width : 48px
display: inline-block display: inline-block
.post-replies .sub-replies .post-replies .sub-replies
border-left: solid 3px $main-color-color border-left: solid 18px $main-background-color
margin-left: 1px

15
sass/layout/_profile.sass
View File

@ -26,13 +26,14 @@ $modal-postboard-post-height: 100%
.postboard .postboard
width: 100% width: 100%
height: 100% height: 100%
position: relative position: absolute
.postboard-posts .postboard-posts
display: block display: block
height: $modal-postboard-post-height height: $modal-postboard-post-height
overflow-y: auto overflow: auto
.postboard-posts .post .postboard-posts .post
padding: 0 padding: 0
margin-bottom: 1px margin-bottom: 1px
@ -41,6 +42,8 @@ $modal-postboard-post-height: 100%
.profile-card .profile-card
margin: 0 margin: 0
padding: 0 padding: 0
.profile-data
background: none
.profile-modal .profile-modal
h2.profile-screen-name h2.profile-screen-name
@ -58,7 +61,7 @@ $modal-postboard-post-height: 100%
.profile-card .profile-card
width: 100% width: 100%
background: white background: $bloc-light-color
padding: $modal-gut padding: $modal-gut
.profile-card-main .profile-card-main
position: relative 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
View File

@ -1,4 +1,7 @@
@import '../css/jquery.mCustomScrollbar.css'
@import compass @import compass
@import 'compass/reset' @import 'compass/reset'
@import 'compass/utilities' @import 'compass/utilities'
@ -26,7 +29,6 @@
.promoted-posts-only .promoted-posts-only
margin: 0 0 margin: 0 0
@extend .clear-fix @extend .clear-fix
@ -56,7 +58,7 @@
/* Wrapper and blocks */ /* Wrapper and blocks */
.wrapper .wrapper
width: 50% width: 100%
max-width: 100% max-width: 100%
margin: auto margin: auto
padding-top: $menu-height padding-top: $menu-height
@ -65,21 +67,32 @@
.dashboard .dashboard
&.left &.left
position: fixed position: absolute
top: $menu-height top: $menu-height
left: 0 left: 0
height: 100vh width: 30%
overflow: hidden > .module
width: 25% float: right
&.right &.right
position: fixed position: fixed
right: 0 right: 0
top: $menu-height top: $menu-height
overflow: hidden 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 .mini-profile
@extend .box-shadow @extend .box-shadow
.mini-profile-info .mini-profile-info
position: relative
text-align: center
background: $bloc-background-color
padding: 20px 0
a.button a.button
background: $main-color-light background: $main-color-light
@ -212,17 +222,21 @@ ul.userMenu-search-profiles
font-size: .8em font-size: .8em
width: 25% width: 25%
float: left float: left
text-align: center
border-right: 1px solid $main-background-color border-right: 1px solid $main-background-color
&:last-child &:last-child
border: none border: none
a a
color: $dark-grey color: lighten($dark-grey,20%)
display: block display: block
padding: 1em 0 padding: 1rem 0
&:hover &:hover
text-decoration: underline color: $dark-grey
&:before
display: block!important
width: 100%!important
font-size: 1.4rem!important
.userMenu-connections a .userMenu-connections a
@extend .icon-bell @extend .icon-bell
@ -349,11 +363,11 @@ ul.userMenu-search-profiles
-moz-transition: height 0.3s linear -moz-transition: height 0.3s linear
-o-transition: height 0.3s linear -o-transition: height 0.3s linear
-ms-transition: height 0.3s linear -ms-transition: height 0.3s linear
height: 28px height: 48px
border: none border: none
background: rgba(255, 255, 255, 1) background: rgba(255, 255, 255, 1)
border: 1px solid rgba(0, 0, 0, 0.1) border: 1px solid rgba(0, 0, 0, 0.1)
padding: 3px padding: 5px
margin: 5px 0 margin: 5px 0
&:focus &:focus
border-bottom: solid 1px $main-color-color border-bottom: solid 1px $main-color-color
@ -398,6 +412,13 @@ ul.userMenu-search-profiles
margin: 0 0 10px 0 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 .who-to-follow
&.module &.module
margin-bottom: 20px
background: white
padding: 20px
width: 100%
@extend .box-shadow
li 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 button
position: absolute position: absolute
right: 0 right: 10px
top: 20% top: 10px
@extend .small
display: none
&:hover button
display: block
.bio
text-align: left!important
small small
display: none display: none
h3 h3
float: left float: left
padding: 20px
ol ol
@extend .clear-fix @extend .clear-fix
clear: both clear: both
@ -470,27 +485,29 @@ textarea.splited-post
.twister-user .twister-user
position: relative position: relative
box-sizing: border-box box-sizing: border-box
background: $bloc-background-color background: $bloc-light-color
@extend .clear-fix @extend .clear-fix
@extend .col border-top: 1px solid $main-background-color
@extend .col-3
width: 100% width: 100%
min-height: auto min-height: auto
&:nth-child(4n) padding: 10px 0
@extend .last clear: left
+transition-property(background)
+transition-duration(.1s)
@extend .clear-fix
&:hover
background: white
img.twister-user-photo img.twister-user-photo
+border-radius(50%)
float: left float: left
vertical-align: middle
display: block display: block
float: left float: left
vertical-align: middle
width: 48px width: 48px
height: 48px height: auto
margin: 10px margin: 0 10px
background: $main-background-color background: $main-background-color
@ -609,97 +626,117 @@ ol.toptrends-list
/********* TWISTDAY REMINDER *******/ /********* TWISTDAY REMINDER *******/
.twistday-reminder .twistday-reminder
width: 100%
background: white
@extend .box-shadow
@extend .clear-fix
padding: 20px
small small
display: none 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 *************/ /******* LOADER *************/
.postboard-loading, .loading-roller .postboard-loading, .loading-roller
clear: both font-size: 100px
text-align: center width: .4em
div height: .4em
display: inline-block position: relative
width: 120px list-style: none
height: 10px border-radius: 50%
background-color: $main-color-light margin: 100px auto
position: relative display: none
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
@keyframes slide div
0% width: .1em
right: 60px height: .1em
left: 2px position: absolute
5% border-radius: 50%
left: 2px
50% &:nth-child(1)
right: 2px background: #62839F
left: 60px top: 0
55% left: 50%
right: 2px margin-left: -.05em
100% transform-origin: 50% 250%
right: 60px animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate
left: 2px
@-webkit-keyframes slide &:nth-child(2)
0% background: #749294
right: 100px top: 50%
left: 2px right: 0
5% margin-top: -.05em
left: 2px transform-origin: -150% 50%
50% animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate
right: 2px
left: 100px
55%
right: 2px
100%
right: 100px
left: 2px
@-moz-keyframes slide &:nth-child(3)
0% background: #94AC7E
right: 60px bottom: 0
left: 2px left: 50%
5% margin-left: -.05em
left: 2px transform-origin: 50% -150%
50% animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate
right: 2px
left: 60px
55% &:nth-child(4)
right: 2px background: #B4C669
100% top: 50%
right: 60px left: 0
left: 2px 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*/ /* Options*/