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

/*
 * These styles control elements specific to the mage posts screen
 * used for previewing and reading existing content in Ghost.
 *
 * Table of Contents:
 * 
 * Manage
 * Preview
 *
 */


/* =============================================================================
   Manage
   ============================================================================= */

.manage {
    .content-view-container {
        position: relative;
        height: 100%;
        width: 100%;
    }
    .content-list {
        @include box-sizing(border-box);
        width: 35%;
        padding: 15px;
        position: absolute;
        bottom:0; 
        top:0;
        left:0; 
        border-right:$lightbrown 2px solid;
        background: #fff;
        box-shadow: $shadow;

        @include breakpoint(900px) {
            width:300px;
        }
        @include breakpoint($tablet) {
            width:auto;
            right:0;
            z-index: 500;
            border:none;
        }


        .content-filter {
            position:relative;
            z-index: 300;
            > a {
                padding: 5px;
                margin-left:-5px;
            }

            .menu-drop {
                display: block;
            }
        }

        .button-add {
            @include icon($i-add);
            position:absolute;
            top:10px;
            right:15px;
            z-index: 700;
            color: #fff;
            padding-left:5px;
        }


        .content-list-content {
            position:absolute;
            top:0;
            right:0;
            bottom:0;
            left:0;
            overflow: auto;
            padding-top: 40px;
        }

        .entry-title {
            font-size: 1.4em;
            line-height:1.1em;
            margin-bottom:0.5em;
            font-weight: normal;
        }

        .views {
            @include icon($i-stats, 10px, $brown);
            float:right;
            text-align: right;
            margin-left:15px;
            @include breakpoint($tablet) {
                float:none;
            }
        }

        .featured .date {
            @include icon($i-featured, 11px) {
                margin-right:12px;
                vertical-align: 0;
            };
        }

        ol {
            list-style: none;
            padding:0;
            margin:0;
            border-top: $lightbrown 1px solid;

            li {
                margin:0;
                padding: 0;
                border-bottom: $lightbrown 1px solid;
                position:relative;

                a {
                    
                    display:block;
                    padding:20px 15px;
                    color: $brown;
                    @include breakpoint($mobile) { padding:15px; }
                    @include breakpoint($tablet) { padding-right: 40px; }
                    
                    @include icon-after($i-chevron) {
                        position:absolute;
                        top:50%;
                        margin-top:-6px;
                        right:15px;
                    }
                    @include breakpoint($biggerthan-tablet) { &::after {display: none} }

                    &:hover { text-decoration: none; }

                }

            }//li

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

                    border-bottom: lighten($midgrey, 40%) 1px solid;
                    background: lighten($midgrey, 45%);
                    box-shadow: 
                        lighten($midgrey, 40%) 0 -1px 0, // top border
                        rgba(0,0,0,0.06) 7px 0 0 inset, // big left border
                        lighten($midgrey, 40%) 1px 0 0 inset; // small left border

                    a:hover {
                        box-shadow: rgba(0,0,0,0.1) 7px 0 0 inset;
                        @include transition(all 0.4s ease);
                    }

                    .entry-title { font-weight: bold; }
                    .entry-meta { color: $darkgrey; }

                    .views {
                        @include icon($i-stats, 10px, $darkgrey);
                        color: $darkgrey;
                        font-weight: normal;
                    }

                }
            }//li.active
        }

    }//.content-list


/* =============================================================================
   Preview
   ============================================================================= */

    .content-preview {
        @include box-sizing(border-box);
        width: 65%;
        padding: 15px;
        position: absolute;
        bottom:0;
        top:0; 
        right:0; 
        border-left:$lightbrown 2px solid;
        background: #fff;
        box-shadow: $shadow;
        @include breakpoint(900px) {
            width: auto;
            left: 300px;
        }

        .unfeatured {
            @include icon($i-unfeatured, 14px);
            vertical-align: -6%;
            margin: 0 7px 0 -5px;
            padding: 5px;
        }
        .featured {
            @include icon($i-featured, 14px);
            vertical-align: -6%;
            margin: 0 7px 0 -5px;
            padding: 5px;
        }

        .normal {
            text-transform: none;
            margin:0 3px;
        }

        .content-preview-content {
            position: absolute;
            top:0;
            right:0;
            bottom:0;
            left:0;
            overflow: auto;
            padding: 80px 40px;
            
            .wrapper {
                max-width: 700px;
                margin:0 auto;
            }
        }

        .post-controls {
            float:right;
            position: relative;

            ul {
                position: absolute;
                top:15px;
                right:-15px;
            }
        }
        
        .post-edit {
            @include icon($i-edit, 14px);
            margin-right:7px;
            padding: 5px;
        }
        .post-settings {
            @include icon($i-settings, 14px);
            padding: 5px;
            margin-right: -5px;
        }

        img {
            width:100%;
            height:auto;
        }

    }//.preview-post

}//.manage