220 lines
22 KiB
CSS
220 lines
22 KiB
CSS
/* photo editer */
|
|
.ptEditer_wrap {width: 1100px; min-width: 950px; height: 850px; display: flex;position: relative;overflow: hidden;}
|
|
/* photo edit - header */
|
|
.ptEditer_header {width: 324px;height:100%;display: flex;}
|
|
/* tab */
|
|
.ptEditer_header .tabType3 {background-color: #fbc72b;width: 100px; height: 100%;text-align: center;}
|
|
.ptEditer_header .tabType3 .tab {width: 100%; height: 108px;margin: 0 auto; display: table;border-top: 1px solid #fcd255;border-bottom: 1px solid #d6a925;}
|
|
.ptEditer_header .tabType3 .tab:first-child {border-top: 0;}
|
|
.ptEditer_header .tabType3 .tab a {display: table-cell;vertical-align: middle;}
|
|
.ptEditer_header .tabType3 .tab span {display: block;padding-top: 12px; line-height: 1.3;}
|
|
.ptEditer_header .tabType3 .tab .myPhoto {background-image: url(/publish/images/popup/editer_tab1.png);width: 28px;height: 28px;}
|
|
.ptEditer_header .tabType3 .tab .recomTemplate {background-image: url(/publish/images/popup/editer_tab2.png);width: 25px;height: 28px;}
|
|
.ptEditer_header .tabType3 .tab .sticker {background-image: url(/publish/images/popup/editer_tab3.png);width: 28px;height: 27px;}
|
|
.ptEditer_header .tabType3 .tab .editPhoto {background-image: url(/publish/images/popup/editer_tab4.png);width: 30px;height: 32px;}
|
|
/* tab active 시 */
|
|
.ptEditer_header .tabType3 .tab.active {background-color: #222;border-top: 1px solid #222;border-bottom: 1px solid #222;}
|
|
.ptEditer_header .tabType3 .tab.active a {color: #fff;}
|
|
.ptEditer_header .tabType3 .tab.tab.active .myPhoto {background-image: url(/publish/images/popup/editer_tab1_on.png);width: 28px;height: 28px;}
|
|
.ptEditer_header .tabType3 .tab.active .recomTemplate {background-image: url(/publish/images/popup/editer_tab2_on.png);width: 25px;height: 28px;}
|
|
.ptEditer_header .tabType3 .tab.active .sticker {background-image: url(/publish/images/popup/editer_tab3_on.png);width: 28px;height: 27px;}
|
|
.ptEditer_header .tabType3 .tab.active .editPhoto {background-image: url(/publish/images/popup/editer_tab4_on.png);width: 30px;height: 32px;}
|
|
.ptEditer_header .header_cont {display: none;flex-basis: calc(100% - 100px);padding: 24px 20px 12px 20px;box-sizing: border-box;background-color: #222;}
|
|
.ptEditer_header .header_cont.current {display: block;/*max-width: 220px;*/}
|
|
/* tab disable 시 */
|
|
.ptEditer_header .tabType3 .tab.disable {background-color: #dbae2a; border-bottom: 1px solid #dbae2a; border-bottom: 1px solid #ba9424}
|
|
.ptEditer_header .tabType3 .tab.disable i {opacity: 0.3;}
|
|
.ptEditer_header .tabType3 .tab.disable span {opacity: 0.3;}
|
|
|
|
/* header cont */
|
|
.header_cont {color: #fff;box-sizing: border-box;line-height: 1.3;}
|
|
.header_cont h3 {font-size: 20px;font-weight: 500;padding-bottom: 7px;}
|
|
.header_cont p {font-size: 14px;font-weight: 200;color: #aeaeae; margin-bottom: 16px;}
|
|
|
|
/* contWrap */
|
|
.header_cont .contWrap {display: flex;justify-content: space-between;flex-flow: wrap;}
|
|
.header_cont .contWrap li {width: calc(100%/2 - 7px);margin-bottom: 12px; position: relative;}
|
|
.header_cont .contWrap li:hover::after {content: ""; position: absolute; top: 0; left: 0; background-color: rgba(43, 48, 71,0.5); z-index: 1; width: 100%; height: 100%; border-radius: 2px;box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.12);}
|
|
.header_cont.recomTem_cont .contWrap li img {width: 100%; border-radius: 3px;}
|
|
.contWrap_scroll .mCSB_outside + .mCSB_scrollTools {right: -18px;}
|
|
.contWrap_scroll .mCS-dark.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {background-color: #555;}
|
|
.contWrap_scroll .mCS-dark.mCSB_scrollTools .mCSB_dragger.mCSB_dragger_onDrag .mCSB_dragger_bar {background-color: rgba(255,255,255,0.5);}
|
|
/* header cont - 추천 템플릿 */
|
|
.recomTem_cont .contWrap_scroll {height: 538px;}
|
|
.header_cont .search_box {margin: 0 0 10px 0;position: relative;}
|
|
.header_cont .search_box input[type="text"] {width: 100%;height: 34px;border-radius: 3px;margin-bottom: 5px;font-size: 14px;}
|
|
.header_cont .search_box button {position: absolute;top: 5px; right: 10px;}
|
|
.header_cont .search_box select {width: 100%;height: 34px;padding-left: 10px; border-radius: 3px; border: 1px solid #fbc72b; background-color: #434343;color: #fff;font-size: 14px;background-image: url(/publish/images/popup/select.png);background-repeat: no-repeat;background-position: 93% center;}
|
|
.header_cont.recomTem_cont .contWrap li img {width: 100%; border-radius: 3px;}
|
|
/* header cont - 스티커 */
|
|
.sticker_cont .contWrap_scroll {height: 639px;}
|
|
.header_cont.sticker_cont .contWrap li {width:calc(100%/3 - 5px);height:60px;margin:0 0 5px;padding:5px;background-color:rgba(255,255,255,0.7);border-radius:3px;cursor:pointer;box-sizing:border-box;}
|
|
.header_cont.sticker_cont .contWrap li img {position:relative;top:50%;max-width:100%;max-height:100%;transform:translateY(-50%);}
|
|
.header_cont.sticker_cont .contWrap li a {display: table-cell;text-align: center;vertical-align: middle;}
|
|
.header_cont.sticker_cont .contWrap li:hover {background-color: rgba(255,255,255,0.8);}
|
|
/* header cont - 편집도구 */
|
|
.header_cont .search_box2 {margin: 0 0 10px 0; position: relative;}
|
|
.header_cont.photoEdit_cont button.edit_btn {width: 100%; height: 34px; border-radius: 3px; border: 1px solid #fbc72b; color: #fff; background-color: rgba(255,255,255,0.15) ; font-size: 14px; font-weight: 300;}
|
|
.header_cont.photoEdit_cont button.edit_btn:hover {background-color: rgba(255,255,255,0.2);}
|
|
.header_cont.photoEdit_cont button.edit_btn i { background-repeat: no-repeat; margin: 0 7px 2px 0;}
|
|
.header_cont.photoEdit_cont button.edit_btn i.put_text {background-image: url(/publish/images/popup/put_text.png); width: 13px; height: 16px;} /* 텍스트 */
|
|
.header_cont.photoEdit_cont button.edit_btn i.cut_img {background-image: url(/publish/images/popup/cut_img.png); width: 19px; height: 19px;} /* 자르기 */
|
|
.header_cont .search_box2 select {width: 100%; height: 34px;padding-left: 10px;border-radius: 3px; margin: 7px 0; color: #555;font-size: 15px;background-image: url(/publish/images/popup/select2.png);background-repeat: no-repeat; background-position: 93% center;}
|
|
.header_cont .search_box2 input[type="text"]::-webkit-calendar-picker-indicator {display:none !important;}
|
|
|
|
.header_cont .search_box2 .font_size_wrap {position:relative;background-image:url(/publish/images/popup/select2.png);background-repeat:no-repeat;background-position:93% center;}
|
|
.header_cont .search_box2 .font_size_wrap input[type="text"].font_size {position:relative;width:calc(100% - 40px);height:34px;padding-left:10px;border-radius:3px;color:#555;font-size:14px;font-family:' Noto Sans KR';z-index:2;}
|
|
.header_cont .search_box2 .font_size_wrap .font_size_list {position:absolute;right:0;top:0;margin:0;outline:none;}
|
|
|
|
.header_cont.photoEdit_cont>div:nth-child(1) {padding-bottom: 12px; border-bottom: 1px solid #4e4e4e;}
|
|
.header_cont.photoEdit_cont>div:nth-child(2) {height: 100px; padding: 12px 0; border-bottom: 1px solid #4e4e4e; position: relative;}
|
|
.header_cont.photoEdit_cont>div:nth-child(3) {padding-top: 12px;}
|
|
.header_cont.photoEdit_cont .editContWrap {display: flex; justify-content: space-between;}
|
|
.header_cont.photoEdit_cont .editContWrap li {width: calc(100%/3 - 5px); height: 55px;border-radius: 5px;display: table; margin-bottom: 6px;}
|
|
.header_cont.photoEdit_cont .editContWrap li a {display: table-cell; vertical-align: middle; text-align:center;}
|
|
.header_cont.photoEdit_cont .editContWrap li span {display: block;font-size: 13px;font-weight: 200; color: #888;padding-top: 4px;}
|
|
/* 편집도구 텍스트 */
|
|
.header_cont.photoEdit_cont .editContWrap.text li { border: 1px solid #656565;}
|
|
.header_cont.photoEdit_cont .editContWrap.text li:nth-child(1) i {background-image: url(/publish/images/popup/photo_edit_text1.png);width: 20px;height: 21px;}
|
|
.header_cont.photoEdit_cont .editContWrap.text li:nth-child(2) i {background-image: url(/publish/images/popup/photo_edit_text2.png);width: 20px;height: 21px;}
|
|
.header_cont.photoEdit_cont .editContWrap.text li:nth-child(3) i {background-image: url(/publish/images/popup/photo_edit_text3.png);width: 22px;height: 24px;}
|
|
.header_cont.photoEdit_cont .editContWrap.text li:nth-child(4) i {background-image: url(/publish/images/popup/photo_edit_text4.png);width: 22px;height: 21px;}
|
|
.header_cont.photoEdit_cont .editContWrap.text li:nth-child(5) i {background-image: url(/publish/images/popup/photo_edit_text5.png);width: 29px;height: 23px;}
|
|
.header_cont.photoEdit_cont .editContWrap.text li:nth-child(6) i {background-image: url(/publish/images/popup/photo_edit_text6.png);width: 27px;height: 27px;}
|
|
/* hover 시 */
|
|
.header_cont.photoEdit_cont .editContWrap.text li.active,
|
|
.header_cont.photoEdit_cont .editContWrap.text li:hover {border: 1px solid #fbc72b;}
|
|
.header_cont.photoEdit_cont .editContWrap.text li.active span,
|
|
.header_cont.photoEdit_cont .editContWrap.text li:hover span {color: #fff;}
|
|
.header_cont.photoEdit_cont .editContWrap.text li:nth-child(1).active i,
|
|
.header_cont.photoEdit_cont .editContWrap.text li:nth-child(1):hover i {background-image: url(/publish/images/popup/photo_edit_text1_hover.png);}
|
|
.header_cont.photoEdit_cont .editContWrap.text li:nth-child(2).active i,
|
|
.header_cont.photoEdit_cont .editContWrap.text li:nth-child(2):hover i {background-image: url(/publish/images/popup/photo_edit_text2_hover.png);}
|
|
.header_cont.photoEdit_cont .editContWrap.text li:nth-child(3).active i,
|
|
.header_cont.photoEdit_cont .editContWrap.text li:nth-child(3):hover i {background-image: url(/publish/images/popup/photo_edit_text3_hover.png);}
|
|
.header_cont.photoEdit_cont .editContWrap.text li:nth-child(4).active i,
|
|
.header_cont.photoEdit_cont .editContWrap.text li:nth-child(4):hover i {background-image: url(/publish/images/popup/photo_edit_text4_hover.png);}
|
|
.header_cont.photoEdit_cont .editContWrap.text li:nth-child(5).active i,
|
|
.header_cont.photoEdit_cont .editContWrap.text li:nth-child(5):hover i {background-image: url(/publish/images/popup/photo_edit_text5_hover.png);}
|
|
.header_cont.photoEdit_cont .editContWrap.text li:nth-child(6).active i,
|
|
.header_cont.photoEdit_cont .editContWrap.text li:nth-child(6):hover i {background-image: url(/publish/images/popup/photo_edit_text6_hover.png);}
|
|
.header_cont.photoEdit_cont .color_palette {padding: 10px; border: 1px solid #656565; border-radius: 10px;}
|
|
.header_cont.photoEdit_cont .color_palette p {margin-bottom: 5px; font-size: 13px;}
|
|
.header_cont.photoEdit_cont .color_palette ul {height: 78px; box-sizing: border-box;}
|
|
/* 편집도구 자르기 */
|
|
.header_cont.photoEdit_cont .editContWrap.cut li {background-color: rgba(0,0,0,0.3);}
|
|
.header_cont.photoEdit_cont .editContWrap.cut li:nth-child(1) i {background-image: url(/publish/images/popup/photo_edit_cut1.png);width: 14px;height: 22px;}
|
|
.header_cont.photoEdit_cont .editContWrap.cut li:nth-child(2) i {background-image: url(/publish/images/popup/photo_edit_cut2.png);width: 16px;height: 16px;}
|
|
.header_cont.photoEdit_cont .editContWrap.cut li:nth-child(3) i {background-image: url(/publish/images/popup/photo_edit_cut3.png);width: 22px;height: 13px;}
|
|
.header_cont.photoEdit_cont .editContWrap.cut li:nth-child(4) i {background-image: url(/publish/images/popup/photo_edit_cut4.png);width: 22px;height: 15px;}
|
|
.header_cont.photoEdit_cont .editContWrap.cut li:nth-child(5) i {background-image: url(/publish/images/popup/photo_edit_cut5.png);width: 22px;height: 17px;}
|
|
.header_cont.photoEdit_cont .editContWrap.cut li:nth-child(6) i {background-image: url(/publish/images/popup/photo_edit_cut6.png);width: 11px;height: 23px;}
|
|
/* hover 시 */
|
|
.header_cont.photoEdit_cont .editContWrap.cut li:hover span {color: #fff;font-weight: 400;}
|
|
.header_cont.photoEdit_cont .editContWrap.cut li:nth-child(1):hover i {background-image: url(/publish/images/popup/photo_edit_cut1_hover.png);}
|
|
.header_cont.photoEdit_cont .editContWrap.cut li:nth-child(2):hover i {background-image: url(/publish/images/popup/photo_edit_cut2_hover.png);}
|
|
.header_cont.photoEdit_cont .editContWrap.cut li:nth-child(3):hover i {background-image: url(/publish/images/popup/photo_edit_cut3_hover.png);}
|
|
.header_cont.photoEdit_cont .editContWrap.cut li:nth-child(4):hover i {background-image: url(/publish/images/popup/photo_edit_cut4_hover.png);}
|
|
.header_cont.photoEdit_cont .editContWrap.cut li:nth-child(5):hover i {background-image: url(/publish/images/popup/photo_edit_cut5_hover.png);}
|
|
.header_cont.photoEdit_cont .editContWrap.cut li:nth-child(6):hover i {background-image: url(/publish/images/popup/photo_edit_cut6_hover.png);}
|
|
.header_cont.photoEdit_cont .set_btn {width: 100%; margin-top: 7px; display: flex; justify-content: space-between; position: absolute;}
|
|
.header_cont.photoEdit_cont .set_btn button {height: 27px;border-radius: 3px;font-size: 14px; width: calc(100%/2 - 4px);}
|
|
/* 편집도구 회전 */
|
|
.header_cont.photoEdit_cont .editContWrap2 {display: flex; justify-content: space-between;flex-flow: wrap;}
|
|
.header_cont.photoEdit_cont .editContWrap2 li {width: calc(100%/4 - 5px); height: 42px;border-radius: 5px; margin-bottom: 45px; text-align: center;}
|
|
.header_cont.photoEdit_cont .editContWrap2 li i {background-color: rgba(0,0,0,0.3); position: relative; width: 100%; height: 40px; border-radius: 5px;}
|
|
.header_cont.photoEdit_cont .editContWrap2 li i::after {content: "";position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
|
|
.header_cont.photoEdit_cont .editContWrap2 li:nth-child(1) i::after {background-image: url(/publish/images/popup/photo_edit_rotate1.png);width: 28px;height: 28px;}
|
|
.header_cont.photoEdit_cont .editContWrap2 li:nth-child(2) i::after {background-image: url(/publish/images/popup/photo_edit_rotate2.png);width: 28px;height: 28px;}
|
|
.header_cont.photoEdit_cont .editContWrap2 li:nth-child(3) i::after {background-image: url(/publish/images/popup/photo_edit_rotate3.png);width: 22px;height: 24px;}
|
|
.header_cont.photoEdit_cont .editContWrap2 li:nth-child(4) i::after {background-image: url(/publish/images/popup/photo_edit_rotate4.png);width: 24px;height: 22px;}
|
|
.header_cont.photoEdit_cont .editContWrap2 li:nth-child(5) i::after {background-image: url(/publish/images/popup/photo_edit_light1.png);width: 25px;height: 25px;}
|
|
.header_cont.photoEdit_cont .editContWrap2 li:nth-child(6) i::after {background-image: url(/publish/images/popup/photo_edit_light2.png);width: 25px;height: 25px;}
|
|
.header_cont.photoEdit_cont .editContWrap2 li:nth-child(7) i::after {background-image: url(/publish/images/popup/photo_edit_light3.png);width: 21px;height: 21px;}
|
|
.header_cont.photoEdit_cont .editContWrap2 li:nth-child(8) i::after {background-image: url(/publish/images/popup/photo_edit_light4.png);width: 21px;height: 21px;}
|
|
.header_cont.photoEdit_cont .editContWrap2 li span {font-size: 12px; color: #c2c2c2; font-weight: 300; display: inline-block; padding-top: 5px;}
|
|
|
|
/* hover 시 */
|
|
.header_cont.photoEdit_cont .editContWrap2 li:nth-child(1):hover i::after {background-image: url(/publish/images/popup/photo_edit_rotate1_hover.png);}
|
|
.header_cont.photoEdit_cont .editContWrap2 li:nth-child(2):hover i::after {background-image: url(/publish/images/popup/photo_edit_rotate2_hover.png);}
|
|
.header_cont.photoEdit_cont .editContWrap2 li:nth-child(3):hover i::after {background-image: url(/publish/images/popup/photo_edit_rotate3_hover.png);}
|
|
.header_cont.photoEdit_cont .editContWrap2 li:nth-child(4):hover i::after {background-image: url(/publish/images/popup/photo_edit_rotate4_hover.png);}
|
|
.header_cont.photoEdit_cont .editContWrap2 li:nth-child(5):hover i::after {background-image: url(/publish/images/popup/photo_edit_light1_hover.png);}
|
|
.header_cont.photoEdit_cont .editContWrap2 li:nth-child(6):hover i::after {background-image: url(/publish/images/popup/photo_edit_light2_hover.png);}
|
|
.header_cont.photoEdit_cont .editContWrap2 li:nth-child(7):hover i::after {background-image: url(/publish/images/popup/photo_edit_light3_hover.png);}
|
|
.header_cont.photoEdit_cont .editContWrap2 li:nth-child(8):hover i::after {background-image: url(/publish/images/popup/photo_edit_light4_hover.png);}
|
|
|
|
.header_cont.photoEdit_cont .set_btn .set_app {background-color: #fbc72b;}
|
|
.header_cont.photoEdit_cont .set_btn .set_app i {background-image: url(/publish/images/popup/check.png);width: 11px; height: 9px; margin-right: 3px;}
|
|
.header_cont.photoEdit_cont .set_btn .set_cancel {background-color: #414141; color: #fff; margin-left: 3px;}
|
|
.header_cont.photoEdit_cont .set_btn .set_cancel i {background-image: url(/publish/images/popup/close2.png);width: 9px; height: 9px;margin-right: 3px;}
|
|
|
|
/* photo edit - body */
|
|
/* preview image (이미지 미리보기) */
|
|
.image_preview {position: absolute; width: 140px; height: 100%; padding: 25px 20px; background-color: rgba(0,0,0,0.35); box-sizing: border-box;}
|
|
.image_preview .preview {text-align: right; margin-bottom: 12px; position: relative;}
|
|
.image_preview .preview.on::after {position: absolute; content: ""; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100px; height: 150px; border: 3px solid #fbc72b; box-sizing: border-box; z-index: 1}
|
|
.image_preview .preview .preview_img_wrap {width: 100px; height: 150px; box-sizing: border-box; position: relative; overflow: hidden;}
|
|
/* .image_preview .preview .preview_img_wrap.on {position: relative;}
|
|
.image_preview .preview .preview_img_wrap.on::after {position: absolute; content: ""; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100px; height: 150px; border: 3px solid #fbc72b; box-sizing: border-box;} */
|
|
/* 이미지 미리보기 숫자표시 */
|
|
.image_preview .preview .img_number {background-image: url(/publish/images/popup/img_number_bg.png); background-repeat: no-repeat; width: 46px; height: 46px; position: absolute; top: 0; left: 0;z-index: 1; font-family: 'pass', 'Roboto', Helvetica, Arial, sans-serif ; font-weight: 600; font-size: 15px;}
|
|
.image_preview .preview .img_number span {position: absolute; top: 3px; left: 5px;}
|
|
|
|
/* .image_preview .preview .img_number { width: 0; height: 0; border-bottom: 40px solid transparent; border-left: 40px solid #fbc72b; position: absolute; top: 0; left: 0;} */
|
|
/* .image_preview .preview .img_number::after {top: 5px; left: 6px; position: absolute; font-size: 15px; font-family: 'pass', 'Roboto', Helvetica, Arial, sans-serif ; font-weight: 600;z-index: 2;} */
|
|
/* .image_preview .preview:nth-child(1) .img_number::after {content: "1"; }
|
|
.image_preview .preview:nth-child(2) .img_number::after {content: "2"; }
|
|
.image_preview .preview:nth-child(3) .img_number::after {content: "3"; } */
|
|
/* 이미지 미리보기 삭제 버튼 */
|
|
.image_preview .preview .preview_img_wrap button.img_close {position: absolute; top: 6px; right: 6px; z-index:10}
|
|
.image_preview .preview .preview_img_wrap button.img_close i {background-image: url(/publish/images/popup/preview_img_close.png); background-repeat: no-repeat; width: 20px; height: 20px;}
|
|
.image_preview .preview .preview_img_wrap.on button.img_close i {background-image: url(/publish/images/popup/preview_img_close_on.png); }
|
|
/* 이미지 추가 버튼 */
|
|
.image_preview .preview .no_img {background-color: rgba(0,0,0,0.3);width: 100px; height: 150px; box-sizing: border-box; position: relative; overflow: hidden;}
|
|
.image_preview .preview .no_img button.img_add {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 10}
|
|
.image_preview .preview .no_img button.img_add i {background-image: url(/publish/images/popup/add_img.png); background-repeat: no-repeat; width: 40px; height: 40px;}
|
|
.image_preview .preview .no_img button.img_add:hover i {background-image: url(/publish/images/popup/add_img_on.png);}
|
|
|
|
.req_text {font-size: 13px; font-weight: 300; color: rgba(255,255,255,0.7); line-height: 1.4; text-align: center; position: absolute; left: 25px; bottom: 193px;}
|
|
/* 이미지 편집 보드 */
|
|
.ptEditer_body {width: calc(100% - 324px); height: 100%;background-image: url(/publish/images/popup/edit_bg.jpg);background-repeat: no-repeat;background-size: cover; position: relative;}
|
|
.ptEditer_body .edit_area {float: right; width: calc(100% - 140px); height: calc(850px - 60px); display:table; position: relative;}
|
|
.ptEditer_body .edit_area .edit_area_wrap { display:table-cell; vertical-align:middle; text-align:center;}
|
|
.ptEditer_body .edit_area .edit_area_wrap span {font-size: 15px; font-weight: 100; padding-top: 5px; color: #fff; letter-spacing: 0.5px; position: absolute; right: 23px; bottom: 18px; opacity: 0.8;}
|
|
|
|
.ptEditer_body .edit_area .edit_area_wrap .tui-image-editor-canvas-container {margin:auto}
|
|
/* .ptEditer_body {width: calc(100% - 324px); height: 100%;background-image: url(/publish/images/popup/edit_bg.jpg);background-repeat: no-repeat;background-size: cover; position: relative;}
|
|
.ptEditer_body .edit_area {float: right; width: calc(100% - 140px); height: 760px;}
|
|
.ptEditer_body .edit_area .edit_area_wrap {width: 360px;height: 540px;margin: 80px auto; text-align: center; box-shadow: 3px 3px 7px rgba(0,0,0,0.3); overflow: hidden;}
|
|
.ptEditer_body .edit_area .edit_area_wrap span {font-size: 14px; font-weight: 100; padding-top: 5px; color: #fff; letter-spacing: 0; position: absolute; right: 64px; bottom: 117px;} */
|
|
/*// photo edit - body */
|
|
|
|
/* photo edit - footer */
|
|
.ptEditer_footer {width: calc(100% - 324px);padding: 12px 20px; position: absolute;bottom: 0;right: 0; background-color: #3b424f;box-sizing: border-box;}
|
|
/* footer left */
|
|
.ptEditer_footer .footer_left {float: left;}
|
|
.ptEditer_footer .footer_left button {border:1px solid #767b84;border-radius: 3px;height: 36px;padding: 0 13px;color: #fff;font-size: 14px;margin-right: 2px;font-weight: 200;}.ptEditer_footer .footer_left button:hover {box-shadow: 0px 0px 5px 3px rgb(0 0 0 / 12%);border: 1px solid #fff;}
|
|
.ptEditer_footer .footer_left button i {margin-right: 5px;}
|
|
.ptEditer_footer .footer_left .footer_prev {background-image: url(/publish/images/popup/prev.png);width: 13px;height: 10px;}
|
|
.ptEditer_footer .footer_left .footer_next {background-image: url(/publish/images/popup/next.png);width: 13px;height: 10px;}
|
|
.ptEditer_footer .footer_left .footer_replay {background-image: url(/publish/images/popup/replay.png);width: 14px;height: 17px;}
|
|
/* footer right */
|
|
.ptEditer_footer .footer_right {float: right;}
|
|
.ptEditer_footer .footer_right button {height: 36px;padding: 0 13px;border-radius: 3px;margin-left: 2px; font-size: 16px;}
|
|
.ptEditer_footer .footer_right button:first-child {background-color: #fbc72b;}
|
|
.ptEditer_footer .footer_right button:first-child:hover {background-color:#f8bd0e;box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.12);}
|
|
.ptEditer_footer .footer_right button:last-child {background-color: #757b86;color: #fff;font-weight: 200;}
|
|
.ptEditer_footer .footer_right button:last-child:hover {background-color:#6a6c72;box-shadow: 0px 0px 5px 3px rgba(0,0,0,0.12);}
|
|
.ptEditer_footer .footer_right .footer_close {background-image: url(/publish/images/popup/close.png);width: 12px;height: 12px;margin-right: 5px; margin-bottom: 2px;}
|
|
/* //photo editer */
|
|
|
|
|
|
|
|
|
|
|
|
/* ie */
|
|
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
|
/* photo editer */
|
|
.ptEditer_wrap {height: 765px;}
|
|
} |