@charset "UTF-8"; /* Basic */ .editor-portrait { width: 726px; /*height: 375px;*/ border-radius: 4px; background: #ffffff; /*position: absolute;*/ /*top: 246px; left: 60%; margin-left: -354px; margin-top: -276px;*/ overflow: hidden; box-sizing: border-box; } .editor-portrait .upload-headimg { height: 66px; line-height: 66px; padding: 0 30px; color: #282828; border-bottom: 1px solid #eaeaea; position: relative; } .upload-headimg .edtior-crop-close { background: url("../img/popclose.png") no-repeat; width: 44px; height: 13px; position: absolute; top: 28px; right: 0px; cursor: pointer; } .editor-area { padding: 30px; } .browserupgrade { margin: 0; padding: .5em 1em; background-color: #fcfcfc; text-align: center; } button { background: transparent; } /* Header */ .docs-header { margin-bottom: 0; } .navbar-toggle:hover, .navbar-toggle:focus { border-color: #0074d9; } .navbar-toggle .icon-bar { background-color: #0074d9; } /* Jumbotron */ .docs-jumbotron { background-color: #0074d9; color: #fff; } .docs-jumbotron .version { font-size: 14px; color: #fff; filter: alpha(opacity=50); opacity: 0.5; } /* Content */ .img-container, .img-preview { background-color: #fff; } .img-container { position: relative; width: 520px; height: 200px; float: left; } /*@media (min-width: 768px) {*/ /*.img-container {*/ /*min-height: 516px;*/ /*}*/ /*}*/ .img-container > img { width: 100%; } .docs-preview { margin-right: -15px; } .img-preview { overflow: hidden; } .img-preview > img { width: 100%; } .img-preview-wrap { width: 210px; min-height: 312px; position: absolute; top: 0; right: 1px; } .preview-lg { width: 210px; height: 158px; } .img-des { width: 210px; height: 155px; background: red; position: absolute; right: 0; top: 195px; } .cover-card-view { width: 210px; float: right; color: #999999; text-align: right; } .preview-lg img { width: 260px; height: 195px; } .preview-md { width: 139px; height: 78px; } .preview-sm { width: 69px; height: 39px; } .preview-xs { width: 35px; height: 20px; margin-right: 0; } .docs-data > .input-group { margin-bottom: 10px; } .docs-data > .input-group > label { min-width: 80px; } .docs-data > .input-group > span { min-width: 50px; } .docs-tooltip { /*display: block;*/ /*color: #282828;*/ font-weight: normal; cursor: pointer; } .docs-tooltip > .icon { margin: 0 -3px; vertical-align: top; } .tooltip-inner { white-space: normal; } .btn-upload .tooltip-inner { white-space: nowrap; } .docs-options .dropdown-menu { width: 100%; } .docs-options .dropdown-menu > li { padding: 3px 20px; } .docs-options .dropdown-menu > li:hover { background-color: #f7f7f7; } .docs-options .dropdown-menu > li > label { display: block; } .docs-cropped .modal-body { text-align: center; } .docs-cropped .modal-body > img, .docs-cropped .modal-body > canvas { max-width: 100%; } /* Footer */ .docs-footer { overflow: hidden; } .heart { position: relative; display: block; width: 100%; height: 30px; margin-top: 20px; margin-bottom: 20px; color: #ddd; font-size: 18px; line-height: 30px; text-align: center; } .heart:hover { color: #ff4136; } .heart:before { position: absolute; top: 50%; right: 0; left: 0; display: block; height: 0; border-top: 1px solid #eee; content: " "; } .heart:after { position: relative; z-index: 1; padding-left: 8px; padding-right: 8px; background-color: #fff; content: "♥"; } .res-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } .modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1050; display: none; overflow: hidden; -webkit-overflow-scrolling: touch; outline: 0; } .modal-body { position: relative; padding: 15px; } .modal-open .modal { overflow-x: hidden; overflow-y: auto; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } .container-img-box { width: 495px; background: #ffffff; box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2); border-radius: 4px; } .container-img-box p { margin: 0; padding: 20px 30px; border-bottom: 1px solid #ddd; position: relative; } .container-img-box p i { display: inline-block; background: url("../img/popclose.png") no-repeat right; width: 13px; height: 13px; position: absolute; top: 24px; right: 30px; } /*.main-edtior { padding: 30px 30px 0 30px; }*/ .btn-group-add-img { width: 416px; position: absolute; top: 0; left: 0; } .img-container-wrapper { overflow: hidden; width: 726px; } .btn-submit { padding:8px 30px 0 0; text-align: center; width: 520px; clear: both; } .rotate-area { width: 20px; height: 200px; float: right; display: none; position: relative; } .btn-zoomout { position: absolute; right: 0; bottom:30px;} .btn-zoomin { position: absolute; bottom: 0; right: 0; } .btn-rotater .docs-tooltip, .btn-zoomout .docs-tooltip, .btn-zoomin .docs-tooltip { width: 18px; height: 18px; display: inline-block; } .btn-zoomout .docs-tooltip { background: url(../img/svg/fangda.svg); } .btn-zoomout .docs-tooltip:hover { background: url(../img/svg/fangda2.svg); } .btn-zoomin .docs-tooltip { background: url(../img/svg/suoxiao.svg); } .btn-zoomin .docs-tooltip:hover { background: url(../img/svg/suoxiao2.svg); } .btn-reset { position: absolute; left: 0; } .cover .upload-normal-box { width: 100%; height: 112px; text-align: center; color: #999; padding-top: 88px; background: url(../img/addworkicon.png) no-repeat center 45px; } .preview-upload-normal-box { width: 115%; height: 70%; margin: 0 0 0 -15px; text-align: center; padding-top: 60px; color: #999; background: url(../img/addworkicon.png) no-repeat center 15px; font-size: 9px; -webkit-transform: scale(0.75); } .preview-upload-normal-box .format { font-size: 9px; -webkit-transform: scale(0.75); } .cover { width:520px; height: 200px; position: absolute; left: 30px; top: 30px; background-size: 100% 100%; /*background:url(../../../images/defaultbannar.png)no-repeat center center;*/ z-index: 1; } .cover-preview { width: 210px; height: 158px; position: absolute; left: 468px; top: 97px; background: #eee; z-index: 1; } .format { font-size: 12px; } .fa-upload { background: #eeeeee; width: 698px; height: 200px; position: absolute; left: 0; overflow: hidden; } .img-function-icon { width: 20px; height: 200px; float: left; position: relative; } .btn-group-crop button { margin: 0 5px; } .upcoverbtn { position: absolute; } .editor-portrait .pop-confirm, .editor-portrait .pop-cancel { margin-top: 15px; }