Ghost/core/admin/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;
        @include box-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;
        @include box-shadow($lightbrown 1px 0 0);
        @include breakpoint($tablet) {
            width:100%;
            @include box-shadow(none);
        }

        > header {
            height: 17px;
            padding: 30px 15px 30px 40px;
            margin-bottom: 0;
            border-bottom: none;
            @include 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;
                    @include 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;
            overflow:auto;
            padding:40px;
            @include breakpoint($netbook) { padding-left:15px; }
            @include breakpoint($letterbox) { top: 0; }

            .sub{
              color: rgb(158, 157, 149);
              padding-bottom: 20px;
              -moz-border-bottom-colors: none;
              -moz-border-left-colors: none;
              -moz-border-right-colors: none;
              -moz-border-top-colors: none;
              border-color: -moz-use-text-color -moz-use-text-color #EDECE4;
              border-image: none;
              border-right: 0 none;
              border-style: none none solid;
              border-width: 0 0 1px;
              margin-bottom: 0px;
            }
            ul.users{
              list-style: none;
              padding: 0px;
              margin-top: 0px;
              width: 75%;
              clear: both;
              li{
                display: block;
                width: 100%;
                padding: 20px;
                @include box-sizing(border-box);
                -moz-border-bottom-colors: none;
                -moz-border-left-colors: none;
                -moz-border-right-colors: none;
                -moz-border-top-colors: none;
                border-color: -moz-use-text-color -moz-use-text-color #EDECE4;
                border-image: none;
                border-right: 0 none;
                border-style: none none solid;
                border-width: 0 0 1px;

                &:last-child{
                  border: none;
                }
                .user_image{
                  float: left;
                  width: 40px;
                  height: 40px;
                  margin-right: 17px;
                  background-color: #ccc;
                  @include border-radius(20px);

                  img{
                    width: 40px;
                    height: 40px;
                    @include border-radius(20px);
                  }
                }

                .user_info{
                  float: left;
                  span{
                    display: block;
                    line-height: 1em;
                    &.name{
                      margin-top: 0.4em;
                      font-weight: bold;
                      font-size: 1.2em;
                    }
                  }
                }

                label{
                  float: right;
                  color: #fff;
                  padding: 4px 8px;
                  margin-right: 20px;
                  &.admin{
                    background-color: #DE523A;
                  }

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

            }
        }

    }//.settings-content

}//.settings