body.project
    background #31344a
    color #ffffff

    .label
        font-size 10px
        margin-bottom 2px

    header
        position relative
        height 80px
        overflow hidden

        .logo
            position absolute
            top 40px
            left -35px

            .disks
                .disk
                    position absolute
                    border-radius 50%
                    background #fff
                    transform translateX(-50%) translateY(-50%)

                    &.index-0
                        width 70px
                        height 70px
                        background #fff
                    &.index-1
                        width 140px
                        height 140px
                        background #666b99
                    &.index-2
                        width 210px
                        height 210px
                        background #555980
                    &.index-3
                        width 280px
                        height 280px
                        background #474a6b
                    &.index-4
                        width 350px
                        height 350px
                        background #3b3e59
            .title
                position absolute
                top 0
                left 80px
                line-height 4px
                font-size 28px
                font-family 'Stellar'
                text-transform uppercase
                letter-spacing 2px
                text-decoration none

    aside.aside
        position fixed
        top 80px
        left 0
        bottom 0
        width 240px

        header.aside-header
            position relative
            width 100%
            height 115px
            padding 12px 20px 0 20px
            border-top 1px solid #515771
            border-bottom 1px solid #515771
            background #2c2f42

            .name
                position absolute
                top 15px
                left 20px
                font-weight bold

            .details
                text-align right

                .detail
                    margin-bottom 6px

                    .value
                        font-weight bold


        .aside-tree
            position absolute
            top 115px
            left 0
            bottom 95px
            width calc(100% + 15px)
            overflow-y scroll
            overflow-x scroll

            nav.files-tree-nav
                position absolute
                top 0
                left 0
                width 100%

                li
                    line-height 24px
                    font-size 12px
                    cursor pointer
                    white-space nowrap

                    .name
                        position relative
                        display inline-block
                        padding-left 20px
                        padding-right 6px
                        font-smoothing(auto)
                        +retina()
                            font-smoothing(antialiased)

                    .notif
                        display inline-block
                        height 12px
                        margin 0 2px 0 3px
                        padding 0 4px
                        line-height 12px
                        border-radius 6px
                        font-size 8px
                        font-smoothing(auto)

                        &.new-file
                            background #748bd5

                        &.new-version
                            background #ec399e
                            line-height 13px

                    > span
                        display inline-block
                        padding-right 20px
                        padding-left 15px * 1
                    li > span
                        padding-left 15px * 2
                    li li > span
                        padding-left 15px * 3
                    li li li > span
                        padding-left 15px * 4
                    li li li li > span
                        padding-left 15px * 5
                    li li li li li > span
                        padding-left 15px * 6
                    li li li li li li > span
                        padding-left 15px * 7
                    li li li li li li li > span
                        padding-left 15px * 8
                    li li li li li li li li > span
                        padding-left 15px * 9

                    &.active
                        background #4d5b8d

                i
                    position absolute
                    top 25%
                    left 0
                    display block
                    width 12px
                    height 50%
                    background center center no-repeat

                    &.folder
                        background-image url('../svg/folder.svg')
                    &.folder-active
                        background-image url('../svg/folder-active.svg')
                    &.js
                        background-image url('../svg/js.svg')
                    &.html
                        background-image url('../svg/html.svg')
                    &.sass
                        background-image url('../svg/sass.svg')
                    &.less
                        background-image url('../svg/less.svg')
                    &.stylus
                        background-image url('../svg/stylus.svg')
                    &.css
                        background-image url('../svg/css.svg')
                    &.php
                        background-image url('../svg/php.svg')
                    &.json
                        background-image url('../svg/json.svg')
                    &.jade
                        background-image url('../svg/jade.svg')
                    &.pug
                        background-image url('../svg/pug.svg')
                    &.md
                        background-image url('../svg/md.svg')
                    &.sql
                        background-image url('../svg/sql.svg')
                    &.apache
                        background-image url('../svg/apache.svg')
                    &.yml
                        background-image url('../svg/yml.svg')
                    &.svg
                        background-image url('../svg/svg.svg')
                    &.font
                        background-image url('../svg/font.svg')
                    &.image
                        background-image url('../svg/image.svg')
                    &.video
                        background-image url('../svg/video.svg')
                    &.audio
                        background-image url('../svg/audio.svg')
                    &.zip
                        background-image url('../svg/zip.svg')
                    &.txt
                        background-image url('../svg/txt.svg')
                    &.coffee
                        background-image url('../svg/coffee.svg')
                    &.git
                        background-image url('../svg/git.svg')
                    &.xml
                        background-image url('../svg/xml.svg')
                    &.twig
                        background-image url('../svg/twig.svg')
                    &.c
                        background-image url('../svg/c.svg')
                    &.random
                        background-image url('../svg/random.svg')

        footer.aside-footer
            position absolute
            bottom 0
            left 0
            width 100%
            height 110px
            padding 10px 20px 0 20px
            border-top 1px solid #515771
            background #2c2f42

            .button-container

            .button
                &.switch
                    display inline-block
                    padding 5px 10px 5px 0
                    text-decoration none

                    .switch-icon
                        display inline-block
                        position relative
                        top 2px
                        width 22px
                        height 12px
                        margin 0 10px 0 0

                        .bar
                            position absolute
                            top 2px
                            left 0
                            width 100%
                            height 8px
                            background #404a78
                            border-radius 4px
                            transition background 0.15s
                            will-change background

                        .disk
                            position absolute
                            top 0
                            left 0
                            background #4f547d
                            width 12px
                            height 12px
                            border-radius 6px
                            box-shadow 0px 2px 2px rgba(0,0,0,0.2)
                            transition transform 0.15s
                            will-change transform

                    &.active
                        .switch-icon
                            .bar
                                background #5965a0

                            .disk
                                transform translateX(10px)

                &.default
                    display inline-block
                    margin 10px 0
                    padding 5px 10px
                    background rgba(128,147,232,0.2)
                    text-decoration none
                    transition background 0.15s
                    will-change background
                    &:hover
                        background rgba(128,147,232,0.30)


    section.main
        position fixed
        top 80px
        left 240px
        right 0
        bottom 0
        background #31344a

        section.big-centered-text
            position absolute
            top 0
            left 0
            width 100%
            height 100%
            border-top 1px solid #515771
            border-left 1px solid #515771

            .text
                position absolute
                top 50%
                left 0
                width 100%
                text-align center
                color #c6c0d8
                text-transform uppercase
                font-size 20px
                opacity 0.2
                font-weight bold

        section.file
            top 0
            left 0
            width 100%
            height 100%

            header.file-header
                position absolute
                top 0
                left 200px
                right 0
                height 30px
                background #4d5b8d
                text-align center

                .content
                    line-height 30px
                    display inline-block

                    .path
                        display inline-block
                        margin-right 3px
                        opacity 0.5

                    .name
                        display inline-block
                        font-weight bold
                
                .right-buttons
                    position absolute
                    top 0
                    right 2px
                    
                    .button
                        display inline-block
                        margin 4px 2px
                        padding 5px 10px
                        background rgba(128,147,232,0.2)
                        text-decoration none
                        transition background 0.15s
                        will-change background
                        &:hover
                            background rgba(128,147,232,0.30)

            nav.versions-nav
                position absolute
                top 0
                left 0
                bottom 0
                width 215px
                padding-bottom 5px
                background #4d5b8d
                overflow-y scroll
                overflow-x hidden

                a.version
                    display block
                    position relative
                    width 200px
                    height 55px

                    .background
                        display block
                        position absolute
                        top 5px
                        right 5px
                        bottom 0px
                        left 5px
                        background #404a73
                        transition background 0.15s
                        will-change background

                    .content
                        position absolute
                        top 10px
                        right 13px
                        bottom 10px
                        left 10px
                        text-align right

                        .date
                            font-weight bold

                        .time-from-now
                            font-size 10px
                            opacity 0.5

                        .differences
                            position absolute
                            top 0
                            left 0
                            text-align left

                            .label
                                margin-bottom 4px

                            .bar
                                display block
                                position relative
                                width 75px
                                height 2px
                                margin-bottom 3px
                                background rgba(189,202,255,0.25)
                                transition background 0.15s
                                will-change background

                                .fill
                                    position absolute
                                    top 0
                                    left 0
                                    height 100%
                                    background #17f861

                            .percent
                                font-size 10px
                                color #17f861
                                white-space nowrap
                                text-align right
                                font-smoothing(auto)
                                +retina()
                                    font-smoothing(antialiased)

                    &:hover
                        .background
                            background #616d9f
                        .content
                            .differences
                                .bar
                                    background rgba(189,202,255,0.30)
                    &.active
                        .background
                            background #7481b5
                        .content
                            .differences
                                .bar
                                    background rgba(189,202,255,0.5)

            section.code
                position absolute
                top 30px
                right -15px
                bottom -15px
                left 200px
                background #31344a
                overflow-y scroll
                overflow-x scroll

                pre
                    position relative

                    code
                        line-height 20px
                        font-family monospace

                .lines
                    position absolute
                    top 0
                    left 0
                    width 38px
                    padding 0.5em
                    opacity 0.2

                .current
                    pre
                        code
                            display inline-block
                            margin-right 15px
                            margin-bottom 15px
                            margin-left 38px
                            background none

                .differences
                    position absolute
                    top 0
                    left 38px
                    padding 0.5em
                    pointer-events none

                    pre
                        code

                            .value
                                visibility hidden

                            &.inactive
                                display none

                            span
                                &.removed
                                    display none
                                    border 1px solid red

                                    .value
                                        display none

                                &.added
                                    border 1px solid #b0ea23
                                    background rgba(176, 234, 35, 0.1)