/* * 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%; @include breakpoint($tablet) { overflow-x: hidden; } } .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($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($tablet) { width: auto; left: 100%; right: -100%; margin-left: 15px; } .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; } } .post-controls { float:right; position: relative; ul { position: absolute; top:15px; right:-10px; } } .post-edit { @include icon($i-edit, 14px); margin-right:7px; padding: 5px; } img { width:100%; height:auto; } }//.preview-post }//.manage