preview.css 6.7 KB
body {
    color: #333;
    font-size: 14px;
    margin: 0;
    padding: 0;
}

body, html {
    height: 100%;
}
.bluebg, body.blue {
    background: #4a5b6d;
    background: radial-gradient(circle,#69798a 40%,#4a5b6d);
    height: 100%;
    margin: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.bluebg {
    z-index: 400;
}
.previewwrapper {
    height: 100%;
    margin: 0 auto;
    min-width: 960px;
    position: relative;
    max-width: 100%;
    overflow-x: hidden;
    padding-top: 56px;
    padding-bottom: 68px;
    box-sizing: border-box;
}

.previewclose {
	background: url(../img/editor-preview-close.svg) center no-repeat #efefef;
    background-size: 15px 15px;
    border-radius: 0 0 8px 8px;
    cursor: pointer;
    display: inline-block;
    position: absolute;
    padding: 28px 30px;
    right: 30px;
    top: 0;
}
a {
    outline: 0;
}
.previewclose span {
    display: none;
}
.close {
	background-image: url(../img/editor-close.png);
}
.preview {
    background: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,.5);
    clear: both;
    height: 100%;
    margin: 0 auto;
    position: relative;
    top: 0;
    width: 762px;
}
.preview, .previewheader {
    border-radius: 8px 8px 0 0;
}

.email, .preview {
    overflow: hidden;
}
.previewheader {
    background: #fcfcfc;
    border-bottom: 1px solid #f0f0f0;
    color: #646464;
    font-size: 18px;
    padding: 15px 0;
    text-align: center;
}
/** 桌上型 */
.preview.no-hdr.no-label .email {
    top: 31px;
}

.preview.no-hdr .email {
    border-top: none;
    top: 53px;
}
.email {
    background: #fff;
    width: 762px;
    position: absolute;
    top: 134px;
    border-top: 1px solid #c1c1c1;
    bottom: 0;
    box-sizing: border-box;
}
.inbox-preview-frame {
    border: none;
    height: 100%;
    width: 100%;
    overflow-x:auto;
}
iframe {
    border: none;
}
/** 移动设备型 */
.mobile-device {
    background: #f7f7f8;
    border: 4px solid #efefef;
    border-bottom: none;
    box-shadow: 0 0 40px rgba(0,0,0,.3);
    border-radius: 50px 50px 0 0;
    padding: 40px 15px 0;
    position: relative;
    height: 100%;
    box-sizing: border-box;
    width: 360px;
    margin: 0 auto;
}
.mobile-device:before {
    background: #efefef;
    border-radius: 2px 2px 0 0;
    border-left: 2px solid #d8d8d8;
    box-shadow: inset 0 -1px 2px rgba(0,0,0,.2), 0 -2px 6px rgba(0,0,0,.1);
    display: inline-block;
    height: 5px;
    position: absolute;
    right: 44px;
    top: -8px;
    width: 50px;
}
.blk_vid_txt:before, .mobile-device:before {
    content: '';
}
.mobile-device .mobile-sidebar {
    position: absolute;
    top: 110px;
    left: -9px;
}
.mobile-device .mobile-sidebar span:first-child {
    height: 40px;
}
.mobile-device .mobile-sidebar span {
    background: #efefef;
    border-radius: 2px 0 0 2px;
    box-shadow: inset -1px 0 2px rgba(0,0,0,.2);
    display: block;
    height: 30px;
    margin-bottom: 20px;
    width: 5px;
}
.mobile-device .mobile-hdr {
    margin: 0 auto;
    padding-bottom: 30px;
    text-align: center;
}
.mobile-device .mobile-hdr-cam {
    background: linear-gradient(140deg,#064a6e 0,#064a6e 50%,#110a06 51%,#110a06 100%);
    border: 3px solid #d8d8d8;
    border-radius: 100%;
    display: inline-block;
    height: 8px;
    width: 8px;
}
.mobile-device .mobile-hdr-speaker {
    background: #68747b;
    border: 3px solid #e3e3e4;
    box-shadow: inset 0 2px 2px rgba(0,0,0,.3);
    border-radius: 6px;
    display: block;
    height: 6px;
    margin: 10px auto 0;
    width: 60px;
}
.mobile-device.no-hdr .iphonecontent {
    top: 109px;
}
.mobile-device .iphonecontent {
    background: #fff;
    width: 322px;
    border-left: 1px solid #c1c1c1;
    border-right: 1px solid #c1c1c1;
    border-top: 1px solid #e1e1e1;
    box-sizing: border-box;
    position: absolute;
    top: 225px;
    bottom: 2px;
}
.mobile-preview-frame {
    border: none;
    height: 100%;
    width: 100%;
    overflow: auto;
    text-align: center;
}
/** 底部 */
.preview-bar, .previewfooter {
    min-width: 920px;
}

.previewfooter {
    background: #fcfcfc;
    border-top: 1px solid #c1c1c1;
    bottom: 0;
    position: fixed;
    text-align: center;
    z-index: 1;
    width: 100%;
}
.previewfooter .right_buttons {
    margin: 15px 0;
    position: absolute;
    right: 30px;
}
.previewfooter .right_buttons li {
    display: inline-block;
    margin-right: 15px;
}
.previewfooter .right_buttons li a {
    border: 1px solid #c1c1c1;
    border-radius: 6px;
    color: #585858;
    cursor: pointer;
    display: block;
    font-size: 14px;
    padding: 8px 20px;
    text-decoration: none;
}
.previewfooter .right_buttons li span {
    display: none;
    margin-right: 16px;
}
.previewfooter .right_buttons li:last-child {
    margin-right: 0;
}
.preview-views {
    margin: 10px 0;
    text-align: center;
}

.preview-views .layouts-nav, .previewfooter .layouts-nav {
    display: inline-block;
    margin-top: 5px;
    width: auto;
}
.editor-save-menu, .layouts-nav, .layouts-nav-wrap, .pl-search-results {
    text-align: center;
}
.layouts-nav {
    border: 1px solid #525e66;
    border-radius: 6px;
    margin: 40px auto 0;
    overflow: hidden;
    position: relative;
    width: 374px;
}

.layouts-nav>a {
    border-right: 1px solid #525e66;
    color: #525e66;
    display: block;
    float: left;
    padding: 8px 0;
    width: 187px;
    text-decoration: none;
    font-size: 13px;
}
.layouts-nav>a:first-child {
    border-right: 1px solid #525e66;
    width: 186px;
}
.layouts-nav>a.selected {
    background: #c0c6ca;
    color: #fff;
}

.preview-views .layouts-nav>a, .previewfooter .layouts-nav>a {
    border-right: 1px solid #525e66;
    cursor: pointer;
    display: inline-block;
    font-weight: 600;
    padding: 8px 40px;
    width: auto;
}
html .layouts-nav>a, html .layouts-nav>a, html .layouts-nav>a {
    font-size: 14px;
}
.preview-views .layouts-nav>a:first-child, .previewfooter .layouts-nav>a:first-child {
    width: auto;
}

.preview-views .layouts-nav>a:last-child, .previewfooter .layouts-nav>a:last-child {
    border-right: none;
}

.layouts-nav>a:last-child {
    border: none;
}

.previewfooter .right_buttons li a:hover {
    border-color: #585858;
}

.inbox-preview-frame img{
	max-width:750px !important;
	max-height:550px !important;
}
.iphonecontent img{
	display: inline-block !important;
	max-width:303px !important;
	max-height: 250px !important;
}
.iphonecontent video{
	max-width:303px !important;
	max-height: 250px !important;
}
.iphonecontent table,.iphonecontent table tr, .iphonecontent table td, .iphonecontent table td div{
	max-width: 303px !important;
    float: left;
    min-width:303px !important;
    text-align: center;
    display: inline-block !important;
}
.iphonecontent table td{
	padding: 0px !important;
}

#emailpreviewdialog ul{
	list-style: inherit;
}