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

/*
 * Content screen styles
 *
 * Table of Contents
 *
 * Content Management
 * Preview
 */


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

.manage {
    .content-view-container {
        position: relative;
        height: 100%;
        width: 100%;

        @media (max-width: 800px) {
            overflow-x: hidden;
        }
    } // .content-view-container
    .content-list {
        width: 35%;
        padding: 15px;
        position: absolute;
        bottom: 0;
        top: 0;
        left: 0;
        border-right: $lightbrown 2px solid;
        background: #fff;
        box-shadow: $shadow;

        @media (max-width: 800px) {
            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;
            }
        } // .content-filter

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


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

        .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;
            @media (max-width: 800px) {
                float: none;
            }
        }

        .featured .status {
            @include icon($i-featured, 11px) {
                margin-right: 10px;
                vertical-align: 7%;
            };
        }

        .status .draft {
            color: $red;
        }
        .status .scheduled {
            color: $orange;
        }


      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;
                    @media (max-width: 400px) {
                        padding: 15px;
                    }
                    @media (max-width: 800px) {
                        padding-right: 40px;
                    }

                    @include icon-after($i-chevron) {
                        position: absolute;
                        top: 50%;
                        margin-top: -6px;
                        right: 15px;
                    }
                    @media (min-width: 801px) {
                        &:after {
                            display: none;
                        }
                    }

                    &:hover {
                        text-decoration: none;
                    }

                } // a

            } // li

            li.active {
                @media (min-width: 801px) {
                    // 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
        } // ol

    } // .content-list
} // .manage


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

.manage {

    .content-preview {
        width: 65%;
        padding: 15px;
        position: absolute;
        bottom:0;
        top:0;
        right:0;
        border-left:$lightbrown 2px solid;
        background: #fff;
        box-shadow: $shadow;
        @media (max-width: 800px) {
            width: auto;
            left: 100%;
            right: -100%;
            margin-left: 15px;
            border:none;
        }

        .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;
            word-break: break-word;
            hyphens: auto;

            .wrapper {
                max-width: 700px;
                margin:0 auto;
            }
        } // .content-preview-content

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

        .post-settings-menu {
            position: absolute;
            top: 35px;
            right: -3px;
        }

        .post-edit {
            @include icon($i-edit, 14px);
            margin-right:7px;
            padding: 5px;
        }

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

    } // .preview-post

    .no-posts-box {
        position: relative;
        height: 90%;
        margin: 0px auto;
        padding: 0px;
        display: table;
        z-index: 600;
        @media (max-width: 800px) {
            position: fixed;
            top: 45%;
            left: 50%;
        }

        .no-posts {
            vertical-align: middle;
            display: table-cell;
            text-align: center;
            @media (max-width: 800px) {
                display: block;
                position: relative;
                left: -50%;
            }

            h3 {
                color: $brown;
                font-weight: 200;
                font-size: 2em;
            }
        } // ,no-posts

    } // .no-posts-box

} // .manage