리빌더 부분 추가
This commit is contained in:
29
plugin/editor/rb.editor/css/inc.font.css
Normal file
29
plugin/editor/rb.editor/css/inc.font.css
Normal file
@ -0,0 +1,29 @@
|
||||
@font-face {
|
||||
font-family: 'Nanumsqneo';
|
||||
src: url('../fonts/Nanumsqneo/Nanumsqneo-Bold.eot');
|
||||
src: url('../fonts/Nanumsqneo/Nanumsqneo-Bold.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/Nanumsqneo/Nanumsqneo-Bold.woff2') format('woff2'),
|
||||
url('../fonts/Nanumsqneo/Nanumsqneo-Bold.woff') format('woff'),
|
||||
url('../fonts/Nanumsqneo/Nanumsqneo-Bold.ttf') format('truetype');
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: 'TheJamsil';
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
src: url('../fonts/TheJamsil/TheJamsil-Light.eot');
|
||||
src: url('../fonts/TheJamsil/TheJamsil-Light.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/TheJamsil/TheJamsil-Light.woff2') format('woff2'),
|
||||
url('../fonts/TheJamsil/TheJamsil-Light.woff') format('woff'),
|
||||
url('../fonts/TheJamsil/TheJamsil-Light.ttf') format("truetype");
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Pretendard';
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: local('Pretendard Regular'), url(../fonts/Pretendard/woff2/Pretendard-Regular.woff2) format('woff2'), url(../fonts/Pretendard/woff/Pretendard-Regular.woff) format('woff');
|
||||
}
|
||||
498
plugin/editor/rb.editor/css/inc.skin.css
Normal file
498
plugin/editor/rb.editor/css/inc.skin.css
Normal file
@ -0,0 +1,498 @@
|
||||
/* 게시물 편집 { */
|
||||
mark {background-color:rgba(170, 32, 255, 0.1) !important;}
|
||||
|
||||
.mf_wrap_inner {
|
||||
background-color: #f9f9f9;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.mf_wrap_inner .cmt_btn2 {
|
||||
background-color: transparent;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.mf_wrap_inner .rb_mf_wrap_list {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.mf_wrap_inner .cmt_btn2 b {
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.mf_wrap_inner .cmt_btn2 span.total {
|
||||
color: #999 !important;
|
||||
}
|
||||
|
||||
.mf_wrap_inner #bo_vc2 article {
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.rb_mf_wrap_list {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.rb_mf_wrap {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.rb_mf_wrap ul {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.rb_mf_wrap ul li {
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.rb_mf_wrap ul li span {
|
||||
background-color: #F0F3F9;
|
||||
padding: 5px 10px 5px 10px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.edit_add_wrap {
|
||||
top: 18px !important;
|
||||
}
|
||||
|
||||
.cmt_btn2 {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
background: #fff;
|
||||
font-weight: bold;
|
||||
margin: 30px 0 0px;
|
||||
padding: 0 0 15px;
|
||||
cursor: inherit;
|
||||
}
|
||||
|
||||
.rb_bbs_wrap .cmt_btn2 span.total {
|
||||
color: #000;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.rb_bbs_wrap .cmt_btn2 b {
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#bo_vc2 article .cm_wrap {
|
||||
float: left;
|
||||
}
|
||||
|
||||
#bo_vc2 article {
|
||||
margin: 0px 0;
|
||||
position: relative;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
#bo_vc2 .bo_vl_opt {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.edit_add_a {
|
||||
line-height: 25px !important;
|
||||
display: inline-block;
|
||||
height: 25px !important;
|
||||
border: 1px solid #ddd;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
color: #999;
|
||||
padding-left: 10px !important;
|
||||
padding-right: 10px !important;
|
||||
width: auto !important;
|
||||
font-size: 12px
|
||||
}
|
||||
|
||||
.edit_add_a:hover {
|
||||
color: #666;
|
||||
border-color: #666;
|
||||
}
|
||||
|
||||
.edit_add_b {
|
||||
line-height: 25px !important;
|
||||
display: inline-block;
|
||||
height: 25px !important;
|
||||
border: 1px solid #ddd;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
color: #999;
|
||||
padding-left: 10px !important;
|
||||
padding-right: 10px !important;
|
||||
width: auto !important;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.edit_add_b:hover {
|
||||
color: #666;
|
||||
border-color: #666;
|
||||
}
|
||||
|
||||
/* } */
|
||||
|
||||
/* 에디터 { */
|
||||
|
||||
.rb_editor_data * {
|
||||
line-height: 160% !important;
|
||||
}
|
||||
|
||||
.rb_editor_data img {max-width: 100%;}
|
||||
.rb_editor_data table {max-width: 100%;}
|
||||
|
||||
|
||||
.rb_editor_data .rb-codes pre {
|
||||
box-sizing: border-box;
|
||||
background-color: #F0F3F9;
|
||||
color: #374d6e;
|
||||
padding: 15px 15px 15px 15px;
|
||||
font-size: 12px;
|
||||
border-radius: 6px;
|
||||
position: relative;
|
||||
margin-bottom: 10px;
|
||||
text-align: left !important;
|
||||
}
|
||||
|
||||
.rb_editor_data ul,
|
||||
li {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.rb_editor_data .resizable img {
|
||||
display: block;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.rb_editor_data .resizable {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
user-select: none;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.rb_editor_data .rb-editor-hr {border-color:rgba(0,0,0,0.1) !important; display: block;}
|
||||
|
||||
/* 메타 정보 */
|
||||
|
||||
.rb_editor_data .url-preview {
|
||||
padding: 0px;
|
||||
margin: 10px 0;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border:1px solid rgba(0,0,0,0.0);
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.rb_editor_data .url-preview-video .url-preview {width: 450px; height:auto;}
|
||||
.rb_editor_data .url-preview-meta .url-preview {width: 450px; background-color: #F0F3F9; padding: 20px; border-radius: 10px; min-height: 125px;}
|
||||
.rb_editor_data .url-preview-img .url-preview {width: 450px; height:auto;}
|
||||
.rb_editor_data .url-preview-img .url-preview .delete-preview img {object-fit: none; width: auto; height:auto;}
|
||||
|
||||
|
||||
.rb_editor_data .url-preview .proxyImg {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
padding-left: 0px !important;
|
||||
margin-top: 0px !important;
|
||||
margin-bottom: 0px !important;
|
||||
}
|
||||
|
||||
.rb_editor_data .url-preview .proxyImg img {
|
||||
width: 150px;
|
||||
height: 83px !important;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
border:0px !important;
|
||||
}
|
||||
|
||||
.rb_editor_data .url-preview .metaData {
|
||||
padding-left: 170px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.rb_editor_data .url-preview .delete-preview {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rb_editor_data .url-preview .delete-preview:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.rb_editor_data .url-preview h3 {
|
||||
margin: 0px 0;
|
||||
font-size: 16px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.rb_editor_data .url-preview p {
|
||||
margin: 2px 0;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.rb_editor_data .url-preview a {
|
||||
color: #000;
|
||||
font-size: 11px;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.rb_editor_data .url-preview .rb-video-container {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%;
|
||||
/* 16:9 비율 */
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
background: black;
|
||||
}
|
||||
|
||||
.rb_editor_data .url-preview .rb-video-container iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#autosave_wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#autosave_wrapper ul.autosave_wrapper_ul1 {
|
||||
padding-right: 115px;
|
||||
}
|
||||
|
||||
#autosave_wrapper ul.autosave_wrapper_ul2 {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
width: 105px;
|
||||
}
|
||||
|
||||
#autosave_wrapper ul.autosave_wrapper_ul2 #btn_autosave {
|
||||
border-radius: 10px;
|
||||
width: 100%;
|
||||
height: 47px;
|
||||
background-color: #F0F3F9;
|
||||
color: #25282B
|
||||
}
|
||||
|
||||
#autosave_wrapper ul.autosave_wrapper_ul2 #autosave_pop {
|
||||
display: none;
|
||||
z-index: 10;
|
||||
position: absolute !important;
|
||||
top: 50px;
|
||||
right: 0;
|
||||
width: 300px;
|
||||
height: auto !important;
|
||||
height: 270px;
|
||||
max-height: 270px;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0px 50px rgba(0, 0, 0, 0.1);
|
||||
border: 0px;
|
||||
}
|
||||
|
||||
#autosave_wrapper ul.autosave_wrapper_ul2 #autosave_pop:after {
|
||||
content: '';
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 16px;
|
||||
height: 10px;
|
||||
right: 45px;
|
||||
top: -9px;
|
||||
border: solid transparent;
|
||||
border-width: 0 8px 10px 8px;
|
||||
border-bottom-color: currentColor;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
filter: drop-shadow(0 -4px 3px rgba(0, 0, 0, .1));
|
||||
z-index: 12;
|
||||
}
|
||||
|
||||
#autosave_wrapper ul.autosave_wrapper_ul2 #autosave_pop:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#autosave_wrapper ul.autosave_wrapper_ul2 #autosave_pop ul {
|
||||
border: 0px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
#autosave_wrapper ul.autosave_wrapper_ul2 #autosave_pop li {
|
||||
border-radius: 0px;
|
||||
padding: 0px 0px 10px 0px;
|
||||
font-size: 14px;
|
||||
background-color: transparent;
|
||||
position: relative;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
#autosave_wrapper ul.autosave_wrapper_ul2 #autosave_pop li:last-child {
|
||||
border-bottom: 0px;
|
||||
padding-bottom: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
#autosave_wrapper ul.autosave_wrapper_ul2 #autosave_pop span {
|
||||
float: none;
|
||||
font-size: 11px;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
#autosave_wrapper ul.autosave_wrapper_ul2 #autosave_pop a {
|
||||
float: none;
|
||||
}
|
||||
|
||||
#autosave_wrapper ul.autosave_wrapper_ul2 #autosave_pop button.autosave_del {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 0px;
|
||||
background:url(../image/svg/reset-btn.svg) no-repeat 50% 50%;
|
||||
background-size: 80%;
|
||||
text-indent:-999px;
|
||||
overflow:hidden;
|
||||
height:20px;
|
||||
width:20px;
|
||||
opacity: 0.3
|
||||
}
|
||||
|
||||
#autosave_wrapper ul.autosave_wrapper_ul2 #autosave_pop button.autosave_del:hover {opacity: 0.5;}
|
||||
|
||||
#autosave_wrapper ul.autosave_wrapper_ul2 #autosave_pop button.autosave_close {
|
||||
height: 35px;
|
||||
color: #25282B;
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||||
border-bottom-left-radius: 0px;
|
||||
border-bottom-right-radius: 10px;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
#autosave_wrapper ul.autosave_wrapper_ul2 #autosave_pop button.autosave_close:hover {
|
||||
background-color: #F0F3F9;
|
||||
}
|
||||
|
||||
.autosave_save {cursor:pointer;width:100%;height:30px;background:none;color:#888;font-weight:bold;font-size:0.92em}
|
||||
|
||||
#autosave_wrapper ul.autosave_wrapper_ul2 #autosave_pop button.autosave_save {
|
||||
height: 35px;
|
||||
color: #25282B;
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||||
width: 50%;
|
||||
border-right: 1px solid rgba(0,0,0,0.05);
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 0px;
|
||||
}
|
||||
|
||||
#autosave_wrapper ul.autosave_wrapper_ul2 #autosave_pop button.autosave_save:hover {
|
||||
background-color: #F0F3F9;
|
||||
}
|
||||
|
||||
#autosave_wrapper ul.autosave_wrapper_ul2 #autosave_pop .autosave_btn_wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#autosave_wrapper ul.autosave_wrapper_ul2 .autosave_guide {
|
||||
text-align: left;
|
||||
font-size: 13px;
|
||||
padding: 15px;
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.05);
|
||||
color: #777;
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
|
||||
.resizable-table-handle {display: none;}
|
||||
.rb_editor_table_wrap {position: relative;}
|
||||
td .resizable_wrap, th .resizable_wrap {max-width: 100%;}
|
||||
|
||||
.rb_editor_data .rb_tag {margin-top: -2px; display: inline-block; margin-bottom: 5px; vertical-align:top; max-width: 100%; width: auto; white-space: nowrap;overflow: hidden;text-overflow: ellipsis; max-width: 90%;}
|
||||
.rb_editor_data .rb_tag a {border-bottom: 0px !important; text-decoration: none !important; border-bottom: 0px !important; padding: 5px 10px 5px 10px; border-radius: 40px; font-size: 12px; background-color: #F0F3F9; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
|
||||
.rb_editor_data .rb_tag a:hover {background-color: #e6e9ef;}
|
||||
|
||||
|
||||
#bo_v_con img {border:0px}
|
||||
|
||||
.img_boxx2 .resizable img {max-width: 100%; width:100% !important; height:auto !important;}
|
||||
.img_boxx .resizable img {max-width: 100%; width:100% !important; height:auto !important;}
|
||||
.img_boxx2 .resizable {height:auto !important;}
|
||||
.img_boxx .resizable {height:auto !important;}
|
||||
|
||||
|
||||
@media all and (max-width:1024px) {
|
||||
.img_boxx2 .resizable {width:100% !important;}
|
||||
.img_boxx .resizable {width:100% !important;}
|
||||
}
|
||||
|
||||
|
||||
@media all and (max-width:512px) {
|
||||
.rb_editor_data .url-preview-video .url-preview {width: 100% !important;}
|
||||
.rb_editor_data .url-preview-meta .url-preview {width: 100% !important;}
|
||||
|
||||
.rb_editor_data .url-preview .proxyImg {
|
||||
position: inherit;
|
||||
top: inherit;
|
||||
left: inherit;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.rb_editor_data .url-preview .metaData {
|
||||
padding-left: 0px !important;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.rb_editor_data .url-preview .proxyImg img {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.rb_editor_data .url-preview .delete-preview {
|
||||
top: auto;
|
||||
bottom: 10px;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.rb_editor_data .url-preview a {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.resizable-table {overflow-x: auto; width: 100% !important; display: block; max-width: 100%;}
|
||||
.resizable-table .rb_editor_table_wrap {min-width: 768px; width: auto;}
|
||||
.rb_editor_data .url-preview .proxyImg img {height: auto !important;}
|
||||
|
||||
}
|
||||
|
||||
/* } */
|
||||
109
plugin/editor/rb.editor/css/metadata.css
Normal file
109
plugin/editor/rb.editor/css/metadata.css
Normal file
@ -0,0 +1,109 @@
|
||||
/* 메타 정보 */
|
||||
.url-preview {
|
||||
padding: 0px;
|
||||
margin: 10px 0;
|
||||
margin-bottom: 0px;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border:1px solid rgba(0,0,0,0.0);
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.url-preview-video .url-preview {width: 450px; height:auto;}
|
||||
.url-preview-meta .url-preview {width: 450px; background-color: #F0F3F9; padding: 20px; border-radius: 10px; min-height: 125px;}
|
||||
.url-preview-img .url-preview {width: 450px; height:auto;}
|
||||
.url-preview-img .url-preview a {border:0px;}
|
||||
.url-preview .delete-preview img {object-fit: none !important; width: auto; height:auto; cursor: pointer;}
|
||||
|
||||
.url-preview .proxyImg {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.url-preview .proxyImg img {
|
||||
width: 150px;
|
||||
height: 83px;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
border:0px !important;
|
||||
}
|
||||
|
||||
.url-preview .metaData {
|
||||
padding-left: 170px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.url-preview .delete-preview {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: -33px;
|
||||
background-color:transparent;
|
||||
width: 24px; height:24px;
|
||||
border: 0px;
|
||||
cursor: pointer;
|
||||
text-align: center !important;
|
||||
}
|
||||
|
||||
|
||||
.url-preview h3 {
|
||||
margin: 0px 0;
|
||||
font-size: 16px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.url-preview p {
|
||||
margin: 2px 0;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.url-preview a {
|
||||
color: #000;
|
||||
font-size: 11px;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
border:0px !important;
|
||||
border-bottom: 0px !important;
|
||||
}
|
||||
|
||||
.url-preview .rb-video-container {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%; /* 16:9 비율 */
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
background: black;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.url-preview .rb-video-container iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media all and (max-width:512px) {
|
||||
.url-preview-video .url-preview {width: 100% !important;}
|
||||
.url-preview-meta .url-preview {width: 100% !important;}
|
||||
.url-preview .proxyImg {position: inherit; top:inherit; left: inherit; width: 100%;}
|
||||
.url-preview .metaData {padding-left: 0px !important; margin-top: 15px;}
|
||||
.url-preview .proxyImg img {width: 100%; height:150px;}
|
||||
.url-preview .delete-preview {top:-1px; right:-1px; background-color: #fff;}
|
||||
.url-preview a {margin-top: 10px;}
|
||||
.url-preview .proxyImg img {height: auto !important; border:0px !important;}
|
||||
}
|
||||
151
plugin/editor/rb.editor/css/preview.css
Normal file
151
plugin/editor/rb.editor/css/preview.css
Normal file
@ -0,0 +1,151 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
word-wrap: break-word;
|
||||
font-family:'font-R',sans-serif !important;
|
||||
}
|
||||
|
||||
|
||||
.font-R {font-family:'font-R',sans-serif !important;}
|
||||
.font-B {font-family:'font-B',sans-serif !important;}
|
||||
.font-H {font-family:'font-H',sans-serif !important;}
|
||||
|
||||
ul, li {padding: 0px; margin: 0px; list-style: none;}
|
||||
mark {background-color:rgba(170, 32, 255, 0.1) !important;}
|
||||
#rb_editor_preview * {line-height: 140% !important;}
|
||||
#rb_editor_preview img {max-width: 100%;}
|
||||
#rb_editor_preview table {max-width: 100%;}
|
||||
|
||||
#rb_editor_preview {
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#rb_editor_preview .resizable img {
|
||||
display: block;
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#rb_editor_preview .resizable {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
user-select: none;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* 메타 정보 */
|
||||
|
||||
#rb_editor_preview .url-preview {
|
||||
padding: 0px;
|
||||
margin: 10px 0;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border:1px solid rgba(0,0,0,0.0);
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#rb_editor_preview .url-preview-video .url-preview {width: 450px; height:auto;}
|
||||
#rb_editor_preview .url-preview-meta .url-preview {width: 450px; background-color: #F0F3F9; padding: 20px; border-radius: 10px; min-height: 125px;}
|
||||
#rb_editor_preview .url-preview-img .url-preview {width: 450px; height:auto;}
|
||||
#rb_editor_preview .url-preview-img .url-preview a {border:0px;}
|
||||
#rb_editor_preview .url-preview-img .url-preview .delete-preview img {object-fit: none; width: auto; height:auto;}
|
||||
|
||||
#rb_editor_preview .url-preview .proxyImg {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
#rb_editor_preview .url-preview .proxyImg img {
|
||||
width: 150px;
|
||||
height: 83px;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
border:0px !important;
|
||||
}
|
||||
|
||||
#rb_editor_preview .url-preview .metaData {
|
||||
padding-left: 170px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#rb_editor_preview .url-preview .delete-preview {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#rb_editor_preview .url-preview .delete-preview:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
#rb_editor_preview .url-preview h3 {
|
||||
margin: 0px 0;
|
||||
font-size: 16px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#rb_editor_preview .url-preview p {
|
||||
margin: 2px 0;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
#rb_editor_preview .url-preview a {
|
||||
color: #000;
|
||||
font-size: 11px;
|
||||
display: block;
|
||||
margin-top: 0px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#rb_editor_preview .url-preview .rb-video-container {
|
||||
position: relative;
|
||||
padding-bottom: 56.25%; /* 16:9 비율 */
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
max-width: 100%;
|
||||
background: black;
|
||||
}
|
||||
#rb_editor_preview .url-preview .rb-video-container iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#rb_editor_preview .rb-editor-hr {border-color:rgba(0,0,0,0.1);}
|
||||
|
||||
.resizable-table-handle {display: none;}
|
||||
.rb_editor_table_wrap {position: relative;}
|
||||
td .resizable_wrap, th .resizable_wrap {max-width: 100%;}
|
||||
|
||||
#rb_editor_preview .rb_tag {margin-top: -2px; display: inline-block; margin-bottom: 5px; vertical-align:top; max-width: 100%; width: auto; white-space: nowrap;overflow: hidden;text-overflow: ellipsis; max-width: 90%;}
|
||||
#rb_editor_preview .rb_tag a {border-bottom: 0px !important; text-decoration: none !important; border-bottom: 0px !important; padding: 5px 10px 5px 10px; border-radius: 40px; font-size: 12px; background-color: #F0F3F9; display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
|
||||
#rb_editor_preview .rb_tag a:hover {background-color: #e6e9ef;}
|
||||
|
||||
@media all and (max-width:512px) {
|
||||
#rb_editor_preview .url-preview-video .url-preview {width: 100% !important;}
|
||||
#rb_editor_preview .url-preview-meta .url-preview {width: 100% !important;}
|
||||
#rb_editor_preview .url-preview .proxyImg {position: inherit; top:inherit; left: inherit; width: 100%;}
|
||||
#rb_editor_preview .url-preview .metaData {padding-left: 0px !important; margin-top: 15px;}
|
||||
#rb_editor_preview .url-preview .proxyImg img {width: 100%; height:150px;}
|
||||
#rb_editor_preview .url-preview .delete-preview {top:auto; bottom:10px; right:15px;}
|
||||
#rb_editor_preview .url-preview a {margin-top: 10px;}
|
||||
#rb_editor_preview .url-preview .proxyImg img {height: auto !important;}
|
||||
#rb_editor_preview .resizable-table {overflow-x: auto; width: 100% !important; display: block; max-width: 100%;}
|
||||
#rb_editor_preview .resizable-table .rb_editor_table_wrap {min-width: 768px; width: auto;}
|
||||
}
|
||||
118
plugin/editor/rb.editor/css/range.css
Normal file
118
plugin/editor/rb.editor/css/range.css
Normal file
@ -0,0 +1,118 @@
|
||||
|
||||
/* 커스텀 */
|
||||
.rb_range_item {
|
||||
width: 100px;
|
||||
height: 3px;
|
||||
border: 0;
|
||||
border-radius: 3px;
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
outline: none;
|
||||
border:0px !important;
|
||||
margin-left: 0px; margin-right: 0px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
.rb_range_item .ui-slider-handle {
|
||||
position: absolute;
|
||||
margin: -7px 0 0 -15px; border-radius: 100px;
|
||||
color: #fff;
|
||||
border: 0;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
width: 30px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
font-size: 9px;
|
||||
text-decoration: none;
|
||||
transition: transform 0.1s ease;
|
||||
color:#fff !important;
|
||||
background-color: #09244B;
|
||||
}
|
||||
|
||||
.rb_range_item .ui-slider-range {
|
||||
border:0px !important; border-radius: 4px !important;
|
||||
}
|
||||
|
||||
|
||||
.rb_range_item .ui-slider-handle:hover,
|
||||
.rb_range_item .ui-slider-handle:focus {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.rb_range_item .cntr {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
/* 기본 */
|
||||
#image-toolbar [type="range"] {
|
||||
appearance: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
width: 70px;
|
||||
height: 2px; /* thumb의 height와 일치 */
|
||||
margin: 0; /* reset margin */
|
||||
padding: 0; /* reset padding */
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/* thumb */
|
||||
#image-toolbar [type="range"]::-webkit-slider-thumb { /* Webkit 기반 브라우저 */
|
||||
appearance: none;
|
||||
width: 1rem; /* height와 일치 */
|
||||
height: 1rem;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background-color: #09244B;
|
||||
transition: all 0.15s ease-in-out;
|
||||
margin-top: calc((0.1rem - 1rem) * 0.5); /* calc((track의 height - thumb의 height) * 0.5) */
|
||||
}
|
||||
#image-toolbar [type="range"]::-moz-range-thumb { /* 파이어폭스 */
|
||||
appearance: none;
|
||||
width: 1rem; /* height와 일치 */
|
||||
height: 1rem;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background-color: #09244B;
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
#image-toolbar [type="range"]:focus::-webkit-slider-thumb { /* Webkit 기반 브라우저 */
|
||||
box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(0, 0, 0, .1);
|
||||
}
|
||||
#image-toolbar [type="range"]:focus::-moz-range-thumb { /* 파이어폭스 */
|
||||
box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(0, 0, 0, .1);
|
||||
}
|
||||
#image-toolbar [type="range"]::-webkit-slider-thumb:active { /* Webkit 기반 브라우저 */
|
||||
opacity: 0.7
|
||||
}
|
||||
#image-toolbar [type="range"]::-moz-range-thumb:active { /* 파이어폭스 */
|
||||
opacity: 0.7
|
||||
}
|
||||
|
||||
/* track */
|
||||
#image-toolbar [type="range"]::-webkit-slider-runnable-track { /* Webkit 기반 브라우저 */
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #d3d9de;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
#image-toolbar [type="range"]::-moz-range-track { /* 파이어폭스 */
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background-color: #d3d9de;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
/* disabled 속성 적용 시 */
|
||||
#image-toolbar [type="range"]:disabled::-webkit-slider-thumb { /* Webkit 기반 브라우저 */
|
||||
pointer-events: none;
|
||||
opacity: .5
|
||||
}
|
||||
#image-toolbar [type="range"]:disabled::-moz-range-thumb { /* 파이어폭스 */
|
||||
opacity: .5
|
||||
}
|
||||
1666
plugin/editor/rb.editor/css/style.css
Normal file
1666
plugin/editor/rb.editor/css/style.css
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user