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; }