Ghost/core/client/assets/sass/layouts/settings.scss

/*
 * These styles control elements specific to the settings screen
 * used for configuring your Ghost install.
 *
 * Table of Contents:
 * 
 * Settings
 *
 */


/* =============================================================================
   Settings
   ============================================================================= */

.settings {
    // The main white bg for the page
    .wrapper {
        background: #fff;
        box-shadow: $shadow;
        position:absolute;
        top:0;
        bottom:0;
        left:0;
        right:0;
        margin:0;
        padding:0;
    }

    .title {
        text-transform: uppercase;
        font-weight: normal;
        font-size: 1.6em;
        line-height: 0.8em;
        margin:0 0 18px 0;
        padding:0;
        border: none;
    }


/* =============================================================================
   Sidebar
   ============================================================================= */

    //The whole left column sidebar, duh.
    .settings-sidebar {
        width:20%;
        position:absolute;
        top:0;
        left:0;
        bottom:0;
        z-index: 700;
        box-shadow: $lightbrown 1px 0 0;
        @include breakpoint($tablet) {
            width:100%;
            box-shadow: none;
        }

        > header {
            height: 17px;
            padding: 30px 15px 30px 40px;
            margin-bottom: 0;
            border-bottom: none;
            box-shadow: #edece4 0 -1px 0 inset;
            @include breakpoint($netbook) {
                padding-left: 15px;
            };
        }
    }//.settings-sidebar

    //Main settings-menu styles, apply to every item
    .settings-menu {
        position:absolute;
        top: 77px; //30px + 17px title + 30px
        left:0;
        bottom:0;
        right:-1px;
        overflow: auto;
        @include breakpoint($tablet) { right:0; };

        ul {
            border-top:none;
            @include breakpoint($tablet) { border-bottom: #edece4 1px solid; }
        }

        li {
            margin-right:1px;
            border-top: #fff 1px solid;
            @include breakpoint($tablet) {
                margin-right:0;
                border-top: #edece4 1px solid;
            }

            a {
                padding:15px 15px 15px 40px;
                border-bottom:none;
                @include breakpoint($netbook) { padding-left: 15px; }
                @include breakpoint($tablet) {
                    @include icon-after($i-chevron) {float:right;margin-top:5px;};
                }
            }

            &:first-child { border-top: none; }
            &:first-child.active { border-top:none; }

            &.active {
                @include breakpoint($biggerthan-tablet) {
                    // only apply active styles on larger devices

                    margin-right:0;
                    position:relative;
                    z-index: 300;
                    border-top: #edece4 1px solid;
                    box-shadow:
                        #fff 1px 0 0,
                        #edece4 0 1px 0;
                    @include transition;

                    a {
                        color: $darkgrey;
                        font-weight: bold;
                        background: #fff;

                    }

                }
            }//.active

        }//li

        // Give all icons some space
        li a:before {
            margin-right: 20px;
            @include breakpoint($netbook) {
                margin-right: 15px;
            }
        }

        // Add the icons for specific menu items
        .general a { @include icon($i-settings) }
        .publishing a { @include icon($i-content) }
        .services a { @include icon($i-services) }
        .users a { @include icon($i-users) }
        .appearance a { @include icon($i-appearance) }
        .plugins a { @include icon($i-plugins) }

    }//.settings-menu


/* =============================================================================
   Content
   ============================================================================= */

    // The main content panel on the right
    .settings-content {
        padding:0;
        position:absolute;
        top:0;
        right:0;
        left:20%;
        bottom:0;
        @include breakpoint($tablet) { display: none; }

        display: none;
        &.active {display:block;}

        > header {
            height: 17px;
            padding: 30px 220px 29px 40px;
            border-bottom:$lightbrown 1px solid;
            margin-bottom:40px;
            text-transform: none;
            font-weight: normal;
            line-height: inherit;
            color: inherit;
            @include breakpoint($netbook) { padding-left:15px; }
            @include breakpoint($letterbox) {
                height: auto;
                padding: 5px;
                position: absolute;
                top:0;
                right:0;
                border:none;

                .title { display:none; }
            }

        }//header

        .page-actions {
            position:absolute;
            top:20px;
            right:40px;
            z-index: 700;
            font-size: 1em;
            @include breakpoint($netbook) { right:15px; }

            .button-add {
                position:relative;
                padding-left:50px;
                @include icon($i-add, 1.4em, rgba(255,255,255,0.6)) {
                    position: absolute;
                    top:0;
                    padding:9px 8px 0 0;
                    left:9px;
                    bottom:0;
                    width: 20px;
                    border-right: darken($green, 8%) 1px solid;
                };
            }
        }

        .content {
            position: absolute;
            top:77px; //30px + 17px title + 30px
            right:0;
            left:0;
            bottom:0;
            padding:40px;
            overflow:auto;

            &.no-padding {
                padding: 0;
            }

            @include breakpoint($netbook) { padding-left:15px; }
            @include breakpoint($letterbox) { top: 0; }
        }

/* =============================================================================
   Users List
   ============================================================================= */

        .user-group-header {
            margin-bottom: 0px;
            padding-bottom: 20px;
            border: 0 none;
            border-bottom: 1px solid darken($lightbrown, 10%);

            h3 {
                display: inline-block;
                margin: 0;
                color: $midbrown;
                font-weight: normal;
                font-size: 1.1em;
                line-height: 1em;
            }

        }

        .user-search {
            display: inline-block;
            float: right;

            label { margin: 0}

            &:hover .user-search-input, .user-search-input:focus {
                width: 260px;
                padding: 0 10px;
            }

            .user-search-input {
                @include box-sizing(border-box);
                width: 0px;
                padding: 0;
                border: none;
                border-bottom: lighten($lightbrown, 2%) 1px solid;
                @include transition(width 0.2s ease-in-out);
                box-shadow: none;
            }

            .search-icon {
                @include icon($i-search, 1em, $midbrown);
            }
        }

        .users {
            padding: 0px;
            margin-top: 0px;
            list-style: none;
        }

        .user {
            @include box-sizing(border-box);
            display: block;
            width: 100%;
            padding: 20px;
            border: 0 none;
            border-top: 1px solid $lightgrey;

            &:first-child {
                border: none;
            }

            .user-image {
                display: inline-block;
                width: 40px;
                height: 40px;
                margin-right: 17px;
                vertical-align: middle;
                background-color: $lightbrown;
                border-radius: 20px;

                &.invite {
                    @include box-sizing(border-box);
                    padding-top: 8px;
                    text-align: center;
                    @include icon($i-mail, 1em, $brown);
                }

                img {
                    width: 40px;
                    height: 40px;
                    border-radius: 20px;
                }
            }

            .user-meta {
                display: inline-block;
                vertical-align: middle;

                .user-name {
                    margin: 0;
                    margin-top: 0.4em;
                    font-weight: 400;
                    font-size: 1.2em;
                    line-height: 1em;
                }

                .user-last-seen {
                    line-height: 1em;
                }
            }
        }

        .user-role {
            padding: 2px 8px;
            float: right;
            font-size: 0.8em;
            color: #fff;
            text-transform: uppercase;

            &.admin {
                background-color: #DE523A;
            }
            &.editor {
                background-color: #4A8CBD;
            }
        }

/* =============================================================================
   User Profile
   ============================================================================= */

        .user-profile-header {
            position: relative;
            width: 100%;
            height: 300px;
        }

        .cover-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;

            img {
                position: absolute;
                max-width: 100%;
            }
        }

        .button-change-cover {
            position: absolute;
            right: 40px;
            bottom: 40px;
            background: rgba(0,0,0,0.4);
            color: #FFFFFF;
            z-index: 2;

            &:hover {
                background: rgba(0,0,0,0.8);
            }
        }

        .user-details-container {
            position: relative;
            top: -90px;
            z-index: 1;
        }

        .user-details-top {
            margin-bottom: 0;
            overflow: auto;

            p {
                color: #FFFFFF;
            }
        }

        .user-avatar-image {
            @include box-sizing(border-box);
            position: relative;
            width: 120px;
            height: 120px;
            float: left;
            margin-left: 40px;
            margin-right: 20px;
            border-radius: 60px;
            border: 3px solid #FFFFFF;
            cursor: pointer;
            z-index: 2;

            img {
                width: 100%;
                height: 100%;
                border-radius: 60px;
            }

            .button-change-avatar {
                position: absolute;
                top: 0;
                width: 100%;
                height: 100%;
                display: block;
                border-radius: 60px;
                background: rgba(0,0,0,0.5);
                opacity: 0;
                color: #FFFFFF;
                @include transition(opacity 0.3s ease);
            }

            &:hover {
                .button-change-avatar {
                    opacity: 1;
                }
            }
        }

        .user-details-bottom {
            padding: 0 40px;
            margin: 0;
        }

        .bio-container {
            max-width: 370px;
        }

        .bio-desc {
            display: inline-block;
        }

        .word-count {
            margin-right: 20px;
            float: right;
            font-weight: bold;
            color: darken($brown, 5%);
        }

/* =============================================================================
   User Profile
   ============================================================================= */

        .plugin-section {
            padding-bottom: 20px;
        }

        .plugin-section-header {
            h3 {
                margin: 15px 0;
                font-size: 1.1em;
                font-weight: normal;
                color: $brown;
            }
        }

        .plugin-section-footer {
            text-align: right;
        }

        .button-update-all {
            @include icon($i-power, 1em, #FFC125){ // TODO: Need lightening icon
                margin-right: 5px;
            };
        }

        .button-cancel {
            @include icon($i-x, 1em, #FFFFFF){
                margin-right: 5px;
            };
        }

        .plugin-section-table {
            margin-top: 5px;

            tbody > tr:nth-child(odd) > td {
                background: none;
            }

            .plugin-section-item {

                &.inactive {
                    .plugin-meta {
                        opacity: 0.4;
                    }

                    td:last-child {
                        .plugin-meta {
                            opacity: 1;
                        }
                    }
                }

                td {
                    padding: 20px 0;
                    border-bottom:$lightbrown 1px solid;

                    &:first-child {
                        padding-left: 0px;
                        border-top:$lightbrown 1px solid;

                        .plugin-meta {
                            padding: 0px;
                            width: 75%;
                            border-left: none;
                            text-align: left;
                        }
                    }

                    &:last-child {
                        .plugin-meta {
                            padding: 0px;
                            text-align: right;
                        }
                    }
                }
            }

            .plugin-icon {
                display: inline-block;
                width: 40px;
                height: 40px;
                margin-right: 15px;
                background: #FFC125;
                border-radius: 5px;
                vertical-align: middle;

                img {
                    width: 100%;
                }
            }

            .plugin-meta {
                @include box-sizing(border-box);
                display: inline-block;
                width: 100%;
                height: 100%;
                padding: 0 20px;
                vertical-align: middle;
                border-left: $lightbrown 1px solid;
                text-align: center;
            }

            .plugin-info {
                display: block;
                color: lighten($grey, 5%);
                font-size: 1.2em;
                font-weight: normal;
                vertical-align: top;
            }

            .plugin-title {
                color: $grey;
            }

            .plugin-sub-info {
                display: block;
                color: $midgrey;
            }

            .plugin-download-progress {
                position: relative;
                display: block;
                height: 6px;
                margin-top: 10px;
                background: $lightbrown;
                border-radius: 3px;

                > span {
                    position: absolute;
                    left: 0;
                    top: 0;
                    content: "";
                    height: 100%;
                    background-color: $blue;
                    border-radius: 3px;
                }
            }

            .rating {

                unicode-bidi: bidi-override;
                text-align: center;

                > span {
                    display: inline-block;
                    position: relative;
                    width: 1.1em;
                    height: 1.1em;
                    font-size: 0.8em;

                    &:before {
                        content: "\2605";
                        position: absolute;
                        left: 0;
                        opacity: 0.5;
                    }

                    &.active {
                        &:before {
                            content: "\2605";
                            opacity: 1;
                        }
                    }
                }


            }
            .plugin-settings-icon {
                display: block;
                margin-top: 9px;
                font-size: 1.4em;
                @include icon($i-settings, 1em, $grey);
            }

        } //.plugin-section-table


    }//.settings-content

}//.settings