CouchPotatoServer/couchpotato/static/style/main.scss

@import "fonts";
@import "mixins";

body, html {
	font-size: 14px;
	line-height: 1.5;
	font-family: OpenSans, "Helvetica Neue", Helvetica, Arial, Geneva, sans-serif;
    font-weight: 300;
	height:  100%;
	margin: 0;
	padding: 0;
	background: $menu_color;
    overflow: hidden;
}

body {
    @include flexbox();
    flex-flow: row nowrap;
}

a {
    text-decoration: none;
}

input, textarea, select {
    font-size: 1em;
    font-weight: 300;
    padding: $padding/2;
    background: $background_color;
    border: 1px solid #f2f2f2;
}

/* Header */
.header {
    width: $header_width;
    min-width: $header_width;
    position: relative;

    a {
        color: #FFF;
        letter-spacing: 1px;
    }

    .navigation {

        .logo {
            background: $couch_color;
            display: block;
            text-align: center;

            font-family: Lobster, serif;
            color: #FFF;
            font-size: 38px;
            line-height: $header_height;
            height: $header_height;

            span:nth-child(odd){
                display: block;
            }
            span:nth-child(even){
                display: none;

            }
        }

        ul {
            padding: 0;
            margin: 0;

            li a {
                padding: $padding/2 $padding;
                display: block;
            }
        }

    }


    .menu, .search_form, .notification_menu  {
        position: absolute;
        z-index: 200;
        bottom: $padding / 3;
        width: 44px;
        height: 44px;

        > a {
            display: inline-block;
            height: 100%;
            width: 100%;
            text-align: center;
            line-height: 44px;
        }
    }

    .notification_menu {
        left: 50%;
        @include translateX(-50%);

        .button:before {
            font-size: 20px;
            top: -2px;
        }

        ul {
            min-height: 60px;
            max-height: 300px;
            overflow: auto;

            &:empty:after {
                content: 'No notifications (yet)';
                width: 100%;
                position: absolute;
                line-height: 60px;
                font-size: 15px;
                font-style: italic;
                opacity: .4;
                left: $padding * 2;
            }

            &:empty:before {
                content: '\e808';
                font-family: "icons";
                height: 100%;
                line-height: 60px;
                margin-left: $padding;
                text-align: center;
                opacity: .4;
            }
        }
    }

    .menu  {
        left: $padding / 3;

        .button:before {
            font-size: 20px;
            top: -2px;
        }
    }

    .search_form {
        right: $padding / 3;
    }

    .more_menu {

        .wrapper {
            bottom: 0;
            left: 44px;
            right: auto;
        }

    }
}

/* Content */
.content {
    @include flex(1 auto);

    background: $background_color;
    border-radius: 3px 0 0 3px;
    overflow: hidden;

    h1, h2, h3 {
        padding: 0;
        margin: 0;
    }

    .pages {
        height: 100%;
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    .footer {
        position: fixed;
        bottom: 0;
        height: $padding;
        width: 100%;
    }
}

/* Page */
.page {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    padding: $padding 0;
    overflow: auto;

    &.active {
        display: block;
    }

    .navigation {
        @include flexbox();
        position: fixed;
        top: 0;
        height: $header_height;
        left: $header_width;
        right: 0;
        background: $background_color;
        border-radius: 3px 0 0 3px;
        z-index: 100;

        ul {
            @include flex(1 auto);
            list-style: none;

            li {
                display: inline-block;

                a {
                    font-size: 24px;
                    line-height: $header_height;
                    padding: $padding;
                    color: rgba(0,0,0,.5);
                }
            }

            .active a {
                color: #000;
            }
        }

    }

}

/* Page levels */
@for $i from 1 through 4 {
    .level_#{$i} {
        z-index: #{$i * 10};
    }
}


/* Menu basis */
.more_menu {
    position: relative;
    line-height: 1em;

    .button {
        font-size: 24px;
        cursor: pointer;
        display: inline-block;

        &:before {
            position: relative;
        }
    }

    .wrapper {
        display: none;
        position: absolute;
        width: 320px;
        right: 0;
        background: $background_color;
        z-index: 5000;
        box-shadow: 0 0 4px rgba(0,0,0,.1);

        &:before {
            @include transform(rotate(45deg) translateY(-60%));
            content: '';
            display: block;
            position: absolute;
            height: 20px;
            width: 20px;
            background: $background_color;
            left: -10px;
            bottom: 2px;
            z-index: 1;
            opacity: 0;
        }

        ul {
            position: relative;
            z-index: 2;
            overflow: hidden;
        }

        ul li {
            display: block;
            line-height: 1em;

            a {
                display: block;
                color: $text_color;
                padding: $padding/4 $padding/2;
                font-size: 1em;
                line-height: 22px;
            }

            &:first-child a {
                padding-top: $padding/2;
            }

            &:last-child a {
                padding-bottom: $padding/2;
            }
        }
    }

    &.show {

        .wrapper {
            display: block;

            &:before {
                opacity: 1;
            }
        }
    }
}