427 lines
42 KiB
CSS
427 lines
42 KiB
CSS
/******************************************************************************************************************************************************************/
|
|
/***************************************************************************************************************************************************** main *******/
|
|
/******************************************************************************************************************************************************************/
|
|
/* main */
|
|
.official-doc-main { height: calc(100dvh - 4.5rem); width: 100dvw; position: absolute; top: 2.25rem; overflow-y: hidden; overflow-x: auto; }
|
|
|
|
/* 디테일 */
|
|
.official-doc-main ul { display: flex; flex-direction: column; height: calc(100% - 4.625rem); overflow-y: scroll; overflow-x: hidden; padding: 0.0625rem; }
|
|
.official-doc-main li { display: flex; flex-direction: column; margin-left: 0.2875rem; margin-right: 0.0625rem; }
|
|
.official-doc-main hr { margin: 0; border: none; border-top: 0.0625rem solid #ddd; }
|
|
.official-doc-main p { font-size: 0.75rem; font-weight: 350; line-height: 1.25rem; color: #777; }
|
|
.official-doc-main h2 { font-size: 0.875rem; font-weight: 350; line-height: 1.25rem; }
|
|
.official-doc-main h3 { font-size: 0.875rem; font-weight: 550; line-height: 1.25rem; }
|
|
.official-doc-main h4 { font-size: 0.875rem; font-weight: 350; line-height: 1.25rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 100%; }
|
|
.official-doc-main h5 { font-size: 0.75rem; font-weight: 550; line-height: 1.25rem; }
|
|
.official-doc-main h6 { font-size: 0.75rem; font-weight: 350; line-height: 1.25rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
|
|
|
.official-doc-title { gap: 0.5rem; color: var(--primary-lv5); align-items: center; }
|
|
.official-doc-title h3 { color: var(--primary-lv5); font-size: 0.875rem; font-weight: 500; }
|
|
.official-doc-subtitle { gap: 0.5rem; }
|
|
.official-doc-subtitle h6,
|
|
.official-doc-subtitle .official-doc-tone-down { color: #8FA8A4; }
|
|
|
|
/* 파일 리스트 컨테이너 */
|
|
.official-doc-list-container { flex-grow: 1; z-index: 12; }
|
|
/* 파일 리스트 바디 영역 */
|
|
.official-doc-main-body { height: 100%; }
|
|
/* 파일 리스트 영역 */
|
|
.official-doc-file { flex-grow: 1; height: calc(100% - 2.25rem); position: relative; }
|
|
/* 수/발신영역 */
|
|
.official-doc-top,
|
|
.official-doc-bottom { min-width: 71.125rem; height: calc(50% - 0.25rem); background-color: #fff; }
|
|
/* 파일 리스트 미리보기 영역 */
|
|
.official-doc-preview { display: flex; flex-direction: column; width: 100%; min-width: 40rem; max-width: 40rem; height: 100%; border-left: 0.0625rem solid #ddd; }
|
|
/* 모달 미리보기 영역 */
|
|
.official-doc-modal-preview { background-color: #eee; border-radius: 0 0.25rem 0.25rem 0; }
|
|
|
|
|
|
.official-doc-select-group { display: flex; gap: 0.8rem; }
|
|
.official-doc-select-group-item { display: flex; gap: 0.2rem; }
|
|
.official-doc-select-group-item select { min-width: 10rem; padding: 0 0.25rem; font-size: 0.8rem; }
|
|
.official-doc-select-group-item option { font-size: 0.8rem; }
|
|
|
|
.official-doc-header { justify-content: space-between; padding: 0.5rem 1rem; border-bottom: 0.0625rem solid #1E5149; position: relative; z-index: 1; background-color: #fff; }
|
|
.official-doc-header--left,
|
|
.official-doc-header--right { gap: 1rem; }
|
|
|
|
.official-doc-main li,
|
|
.official-doc-title,
|
|
.official-doc-subtitle,
|
|
.official-doc-header,
|
|
.official-doc-header--left,
|
|
.official-doc-header--right,
|
|
.official-doc-category { display: flex; }
|
|
|
|
/* .official-doc-file--number,
|
|
.official-doc-file--office-number,
|
|
.official-doc-file--date,
|
|
.official-doc-file--state { display: flex; } */
|
|
|
|
.official-doc-file--number,
|
|
.official-doc-file--office-number,
|
|
.official-doc-file--date,
|
|
.official-doc-file--from,
|
|
.official-doc-file--to,
|
|
.official-doc-file--state { display: flex; align-items: center; }
|
|
|
|
.official-doc-file--number { width: 2.75rem; padding-left: 0.5rem !important; }
|
|
.official-doc-file--office-number { width: 6rem; }
|
|
.official-doc-file--date { width: 6rem; }
|
|
.official-doc-file--office-number,
|
|
.official-doc-file--date { gap: 0.25rem; padding: 0.5rem; }
|
|
.official-doc-file--from { width: 4rem; padding: 0.5rem; }
|
|
.official-doc-file--to { width: 4rem; padding: 0.5rem; }
|
|
.official-doc-file--title { flex-grow: 1; width: 0; padding: 0.5rem; display: flex; align-items: center; }
|
|
.official-doc-file--state { min-width: 5.5rem; padding: 0.25rem; padding-right: 1rem; }
|
|
|
|
.doc-required-info { font-size: 0.875rem; margin-bottom: 0.5rem; }
|
|
.doc-required-star { color: #FF3D00; }
|
|
|
|
.official-doc-file--state .official-doc-file--stateText { display: flex; align-items: center; font-weight: bold; pointer-events: none; text-shadow: var(--text-shadow-fff); padding: 0.5rem 0; }
|
|
.official-doc-file--state .official-doc-file--stateText.viewable { color: #4db251; font-size: 0.875rem; }
|
|
.official-doc-file--state .official-doc-file--stateText.unsupport { color: #f21d0d; font-size: 0.875rem; }
|
|
|
|
.official-doc-border { border-bottom: 0.0625rem solid #ddd; margin: 0 0.5rem; }
|
|
|
|
.official-doc-list { display: flex; gap: 0.5rem; font-size: 0.75rem; position: relative; background-color: #fff; margin-left: 0.325rem; margin-right: 0.25rem; }
|
|
.official-doc-main li.box-selected { box-shadow: #789792 0 0 0 0.0625rem, #0c0c0d0d 0 0 0.25rem 0.0625rem, #0c0c0d38 0 1rem 1rem -0.5rem; z-index: 3; }
|
|
.official-doc-main .doc-list-item.item-selected { background-color: #BCCBC8 !important; }
|
|
.official-doc-main .doc-list-item:hover { cursor: pointer; background: #e9eeed; }
|
|
.official-doc-main .official-doc-file-info { display: flex; gap: 0.5rem; }
|
|
.official-doc-file .attach-item-wrap { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 1rem; }
|
|
.official-doc-file .attach-item-wrap .info { display: flex; align-items: end; gap: 0.5rem; }
|
|
.attach-item-wrap.attach .doc-attach--left .symbol { margin-right: 0.5rem; }
|
|
.attach-item-wrap.attach .doc-attach--left .text--doc-attach { font-size: 0.75rem; font-weight: 500; padding: 0 0.25rem; border-radius: 0.25rem; background-color: #fff; color: #6d3dc2; border: 0.0625rem solid #c5b1e7; line-height: 1.25rem; }
|
|
.attach-item-wrap.attach .doc-attach--left .text--doc-version { font-size: 0.75rem; font-weight: bold; padding: 0 0.25rem; border-radius: 0.25rem; background-color: #fff; color: #0d8df2; border: 0.0625rem solid #9ed1fa; line-height: 1.25rem; }
|
|
.attach-item-wrap.attach .doc-attach--right { margin-left: 0.25rem; }
|
|
.official-doc-file--attach { min-width: 4.5rem; padding: 0.5rem; padding-right: 1rem; }
|
|
|
|
.attach-item-wrap .state { min-width: 4.25rem; }
|
|
.attach-item-wrap .state .state-text { font-size: 0.875rem; font-weight: bold; pointer-events: none; text-shadow: var(--text-shadow-fff); }
|
|
.attach-item-wrap .state.viewable .state-text { color: #4db251; }
|
|
.attach-item-wrap .state.unsupport .state-text { color: #f21d0d; }
|
|
.attach-item-wrap .state .convert-btn { display: flex; justify-content: center; align-items: center; width: auto; outline: 1px solid #ccc; border-radius: 4px; background: #fff; padding: 0.2rem 0.3rem; transition: 0.3s; }
|
|
.attach-item-wrap .state .convert-btn div { pointer-events: none; }
|
|
.attach-item-wrap .state .convert-btn .convert-btn-image { width: 1rem; height: 1rem; background: url('/main/img/archive/convert_gray.svg') no-repeat center/contain; }
|
|
.attach-item-wrap .state .convert-btn .convert-btn-text { color: #000; font-weight: bold; padding-left: 2px; font-size: 0.75rem; }
|
|
.attach-item-wrap .state .convert-btn:hover,
|
|
.attach-item-wrap .state.working .convert-btn { background: #000; }
|
|
.attach-item-wrap .state .convert-btn:hover .convert-btn-image,
|
|
.attach-item-wrap .state.working .convert-btn .convert-btn-image { background: url('/main/img/archive/convert_white.svg') no-repeat center/contain; }
|
|
.attach-item-wrap .state.working .convert-btn .convert-btn-image { animation: rotate-image 1.5s linear infinite; }
|
|
.attach-item-wrap .state .convert-btn:hover .convert-btn-text,
|
|
.attach-item-wrap .state.working .convert-btn .convert-btn-text { color: #fff; }
|
|
|
|
.official-doc-list > div { font-weight: bold; }
|
|
.official-doc-list > div:hover { background: #bccbc8; cursor: pointer; }
|
|
.official-doc-list > .doc-sort-asc::after { content: ''; width: 1rem; height: 1rem; background: url('/main/img/archive/icon__arrow-up--777.svg') no-repeat center/contain; }
|
|
.official-doc-list > .doc-sort-desc::after { content: ''; width: 1rem; height: 1rem; transform: rotate(180deg); background: url('/main/img/archive/icon__arrow-up--777.svg') no-repeat center/contain; }
|
|
|
|
/* 초기화면 도움말 */
|
|
.official-doc-main .official-doc-instructions { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; justify-content: center; align-items: center; flex-direction: column; z-index: 99; background-color: #000000b8; }
|
|
.official-doc-main .official-doc-instructions img { max-width: 90vw; max-height: 88vh; width: auto; height: auto; object-fit: contain; }
|
|
.official-doc-main .official-doc-instructions .doc-instructions-close-btn { display: flex; align-items: center; position: absolute; top: 1rem; right: 1rem; z-index: 99; }
|
|
.official-doc-main .official-doc-instructions .doc-instructions-close-btn .instructions-radio { display: flex; justify-content: end; align-items: center; margin-right: 1rem; gap: 0.35rem; color: #fff; }
|
|
.official-doc-main .official-doc-instructions .doc-instructions-close-btn .instructions-radio .custom-checkbox input[type="checkbox"] { display: none; }
|
|
.official-doc-main .official-doc-instructions .doc-instructions-close-btn .instructions-radio .custom-checkbox span { position: relative; width: 1.25rem; height: 1.25rem; margin-top: 0.25rem; border: 0.0625rem solid #ddd; border-radius: 0.25rem; background-color: #fff; display: inline-block; background-size: contain; background-position: center; background-repeat: no-repeat; }
|
|
.official-doc-main .official-doc-instructions .doc-instructions-close-btn .instructions-radio .custom-checkbox input[type="checkbox"]:checked + span { background-image: url(/main/img/officialDoc/icon-checkbox-bccbc8.svg); width: 1.25rem; height: 1.25rem; }
|
|
.official-doc-main .official-doc-instructions .doc-instructions-close-btn .xs-btn-instructions { cursor: pointer; display: flex; justify-content: center; align-items: center; background-color: #fff; min-height: 2rem; max-height: 2rem; min-width: 2rem; max-width: 2rem; border-radius: 0.25rem; border: 0.15rem solid #1e5149; }
|
|
|
|
/* 맨 위에 공통헤더 */
|
|
.official-doc-main-header { display: flex; align-items: center; height: 2.3rem; padding: 0.5rem 0.5rem 0.5rem 1rem; background-color: #E9EEED; border-bottom: 0.0625rem solid #a5b9b6; color: #1E5149; justify-content: space-between; }
|
|
.official-doc-main-header .official-doc-head { display: flex; align-items: center; height: 2.25rem; padding: 0.5rem 0.5rem 0.5rem 1rem; background-color: #E9EEED; border-bottom: 0.0625rem solid #BCCBC8; justify-content: space-between; }
|
|
.official-doc-main-header .official-doc-head--left { display: flex; gap: 1rem; }
|
|
.official-doc-main-header .official-doc-head-space,
|
|
.official-doc-head--right { display: flex; gap: 0.5rem; align-items: center; }
|
|
.official-doc-head--right { color: #000; }
|
|
.official-doc-main-header .official-doc-head--right-line { height: 2.25rem; width: 0.0625rem; background-color: #BCCBC8; }
|
|
.official-doc-main-header .doc-custom-select-wrapper { min-width: 5rem; position: relative; font-family: sans-serif; color: #111; font-size: 0.75rem; font-weight: 500; font-family: 'pretendard'; }
|
|
.official-doc-main-header .doc-custom-select { display: flex; justify-content: space-between; align-items: center; background-color: #fff; border: 0.0625rem solid #ddd; border-radius: 0.25rem; cursor: pointer; padding: 0.25rem 0.5rem; position: relative; }
|
|
.official-doc-main-header .doc-custom-select .selected { display: block; padding-left: 0.25rem; font-size: 0.75rem; }
|
|
.official-doc-main-header .doc-custom-select>.icon { position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; }
|
|
.official-doc-main-header .doc-custom-select .options { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 0.0625rem solid #ddd; border-top: none; border-radius: 0 0 0.25rem 0.25rem; z-index: 10; }
|
|
.official-doc-main-header .doc-custom-select.open .options { display: block; }
|
|
.official-doc-main-header .option { padding: 0.5rem; cursor: pointer; font-size: 0.75rem; }
|
|
.official-doc-main-header .option:hover { background-color: #eee; }
|
|
.official-doc-main-header .xs-btn-type { background-color: #fff; border-radius: 0.25rem; border: 0.0625rem solid #ddd; padding: 0 0.25rem; min-height: 1.25rem; max-height: 1.25rem; max-width: fit-content; min-width: fit-content; cursor: pointer; display: flex; align-items: center; }
|
|
.official-doc-main-header .xs-btn-type-icon { display: flex; justify-content: center; align-items: center; background-color: #fff; border-radius: 0.25rem; border: 0.0625rem solid #ddd; padding: 0 0.25rem 0 0.125rem; gap: 0.125rem; min-height: 1.25rem; max-height: 1.25rem; max-width: fit-content; min-width: fit-content; cursor: pointer; }
|
|
.official-doc-main-header .official-doc-tab-on { background-color: #1E5149; color: #fff; }
|
|
|
|
/* 드래그앤드롭 영역 */
|
|
.official-doc-main-body .doc-dnd-area { z-index: 41; display: none; flex-direction: column; justify-content: center; align-items: center; height: calc(100% - 2.25rem - 2.25rem - 2.25rem); gap: 0.5rem; position: absolute; background: #e9eeeddd; border: 0.125rem solid #a5b9b6; border-radius: 0.25rem; }
|
|
.official-doc-main-body .doc-dnd-area .doc-image { width: 3rem; height: 3rem; background: url('/main/img/archive/upload_out_dnd.svg') no-repeat center/contain; pointer-events: none; }
|
|
.official-doc-main-body .doc-dnd-area .doc-text { color: #a5b9b6; font-size: 0.875rem; font-weight: 500; pointer-events: none; }
|
|
.official-doc-main-body .doc-dnd-area .doc-warn { color: #a5b9b6; font-weight: 500; pointer-events: none; }
|
|
|
|
/* ai 로딩 페이지 */
|
|
.doc-ai-loading { z-index: 10000; display: none; flex-direction: column; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #eee; overflow: hidden; }
|
|
.doc-ai-loading .text { display: flex; flex-direction: row; align-items: center; margin-top: 1.5rem; color: #1e5149; font-weight: bold; justify-content: center; }
|
|
|
|
|
|
/* 화면 위아래 슬라이더 */
|
|
.official-doc-file .official-doc-center-division { min-width: 71.125rem; /* max-width: 71.125rem; */ height: 0.5rem; background-color: #D2DCDB; position: relative; z-index: 2; width: 100%; transform: translate(0rem, 0rem); }
|
|
.official-doc-file .official-doc-center-xs-division { height: 0.5rem; background-color: #BCCBC8; position: absolute; z-index: 1; width: 100%; transform: translate(0rem, 0rem); }
|
|
|
|
/* 버튼 */
|
|
.official-doc-file .official-doc-division-button { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 0.25rem; border-radius: 0.25rem; background-color: #D2DCDB; width: 1.625rem; height: 1.625rem; z-index: 15; cursor: ns-resize; }
|
|
.official-doc-file .official-doc-division-xs-button { position: relative; top: 100%; left: 50%; transform: translate(-50%, -50%); padding: 0.25rem; border-radius: 0.25rem; background-color: #BCCBC8; width: 2rem; height: 1rem; z-index: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; }
|
|
|
|
|
|
/******************************************************************************************************************************************************************/
|
|
/**************************************************************************************************************************************************** modal *******/
|
|
/******************************************************************************************************************************************************************/
|
|
/* 모달 공통 */
|
|
.official-doc-modal { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 53; border: 0.0625rem solid #111; border-radius: 0.25rem; background-color: #fff; box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.16); /* min-width: 40rem; */ }
|
|
.official-doc-modal-background { display: none; z-index: 52; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(17, 17, 17, 0.6); overflow: hidden; }
|
|
|
|
.official-doc-modal ul { display: flex; flex-direction: column; height: calc(100% - 4.625rem); overflow-y: auto; overflow-x: hidden; }
|
|
.official-doc-modal li { display: flex; flex-direction: column; }
|
|
.official-doc-modal hr { margin: 0; border: none; border-top: 0.0625rem solid #ddd; }
|
|
.official-doc-modal p { font-size: 0.75rem; font-weight: 350; line-height: 1.25rem; color: #777; }
|
|
.official-doc-modal h2 { font-size: 0.875rem; font-weight: 350; line-height: 1.25rem; }
|
|
.official-doc-modal h3 { font-size: 0.875rem; font-weight: 550; line-height: 1.25rem; }
|
|
.official-doc-modal h4 { font-size: 0.875rem; font-weight: 350; line-height: 1.25rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
|
.official-doc-modal h5 { font-size: 0.75rem; font-weight: 550; line-height: 1.25rem; }
|
|
.official-doc-modal h6 { font-size: 0.75rem; font-weight: 350; line-height: 1.25rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
|
|
|
.official-doc-modal,
|
|
.official-doc-modal-wraper,
|
|
.official-doc-modal-block,
|
|
.official-doc-modal-body,
|
|
.official-doc-modal-header,
|
|
.official-doc-type-wrap { display: flex; }
|
|
|
|
.official-doc-modal>.icon { position: absolute; right: 0.5rem; top: 0.5rem; cursor: pointer; }
|
|
.official-doc-modal .official-doc-modal-block { flex-direction: column; min-width: 26rem; width: 30dvw; }
|
|
.official-doc-modal .official-doc-modal-body { flex-direction: column; flex-grow: 1; gap: 0.5rem; padding: 0.5rem 1rem; }
|
|
.official-doc-modal .official-doc-modal-header { color: #111; gap: 0.5rem; padding: 0.5rem; border-bottom: 0.0625rem solid #ddd; align-items: center; }
|
|
.official-doc-modal .official-doc-modal-header .official-doc-modal-header--end img { pointer-events: auto; cursor: pointer; width: 1rem; height: 1rem; }
|
|
.official-doc-modal .official-doc-modal-header .text-green { color: #1E5149; }
|
|
.official-doc-modal .official-doc-modal-footer { padding: 1rem 0; text-align: center; }
|
|
.official-doc-modal .official-doc-modal-preview { min-width: 26rem; width: 30dvw; border-left: 0.0625rem solid #ddd; }
|
|
.official-doc-modal .official-doc-modal-preview iframe { flex-grow: 1; }
|
|
|
|
.official-doc-modal .radio-wrapper { display: flex; gap: 0.5rem; cursor: pointer; user-select: none; margin: 0.125rem 0; align-items: center; min-width: 6rem; }
|
|
.official-doc-modal .radio-wrapper input[type="radio"] { display: none; }
|
|
.official-doc-modal .custom-radio { width: 1rem; height: 1rem; border: 0.0625rem solid #ddd; border-radius: 100%; position: relative; }
|
|
.official-doc-modal .radio-wrapper input[type="radio"]:checked+.custom-radio { border-color: #1E5149; }
|
|
.official-doc-modal .custom-radio::after { content: ""; position: absolute; display: none; top: 20%; left: 20%; width: 0.5rem; height: 0.5rem; border-radius: 100%; background-color: #1E5149; }
|
|
.official-doc-modal .radio-wrapper input[type="radio"]:checked+.custom-radio::after { display: block; }
|
|
.official-doc-modal .radio-wrapper .custom-radio-text { font-size: 0.875rem; font-weight: 350; line-height: 1.25rem; }
|
|
.official-doc-modal .radio-wrapper.disabled { cursor: not-allowed; }
|
|
.official-doc-modal .radio-wrapper input[type="radio"]:disabled + .custom-radio + .custom-radio-text { opacity: 0.5; pointer-events: none; cursor: not-allowed; }
|
|
|
|
.official-doc-modal .official-doc-negative-btn,
|
|
.official-doc-modal .official-doc-positive-btn { width: 10rem; padding: 0.5rem 1rem; border-radius: 0.25rem; cursor: pointer; font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; height: 2.25rem; }
|
|
.official-doc-modal .official-doc-negative-btn { background-color: #fff; border: 0.0625rem solid #ddd; }
|
|
.official-doc-modal .official-doc-positive-btn { background: linear-gradient(180deg, #1e5149 0%, #12312c 100%); }
|
|
.official-doc-modal .official-doc-positive-btn h3 { color: #fff; }
|
|
.official-doc-modal .doc-close { width: 1rem; height: 1rem; background: url(/main/img/officialDoc/icon-close.svg) no-repeat center / contain; cursor: pointer; transition: 0.2s; }
|
|
|
|
/* 공문 ai 선택 모달 */
|
|
.official-doc-modal.official-doc-ai-choice-modal { display: none; }
|
|
|
|
/* 공문 파일 추가/수정/입력 모달 */
|
|
.official-doc-modal.official-doc-upsert-modal { display: none; }
|
|
.official-doc-modal .official-doc-type-wrap { align-items: center; }
|
|
.official-doc-modal .official-doc-type-wrap p { min-width: 5rem; }
|
|
.official-doc-modal .official-doc-type-wrap input { color: #FF3D00; font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; width: 100%; }
|
|
.official-doc-modal .official-doc-type-wrap input:focus { outline: 0.125rem solid #414141; }
|
|
.official-doc-modal .official-doc-type-wrap input[type="text"] { border: 0.0625rem solid #ddd; border-radius: 0.25rem; padding: 0.125rem 0.5rem; font-size: 0.75rem; width: 100%; font-weight: 300; }
|
|
.official-doc-modal .official-doc-type-wrap input[type="date"] { position: relative; -webkit-appearance: none; appearance: none; -moz-appearance: none; background: url(/main/img/officialDoc/icon__calendar--aaa.svg) no-repeat; background-position: right 0.25rem center; padding-right: 0.5rem; background-size: 1rem 1rem; padding-right: 2rem; border: 0.0625rem solid #ddd; box-sizing: border-box; height: 1.75rem; border-radius: 0.25rem; width: 100%; padding: 0.125rem 0.5rem; font-size: 0.75rem; font-weight: 300; }
|
|
.official-doc-modal .official-doc-type-wrap input[type="date"]::-webkit-calendar-picker-indicator, .official-doc-modal input[type=time]::-webkit-calendar-picker-indicator { position: absolute; right: 0; top: 0; width: 100%; height: 100%; background: transparent; }
|
|
.official-doc-modal .official-doc-type-wrap input[type="date"]:hover { border: 0.063rem solid #111; cursor: pointer; background-color: #eee; }
|
|
|
|
.official-doc-modal .official-doc-type-wrap input:read-only { color: #111; }
|
|
.official-doc-modal .official-doc-type-wrap input:read-only:focus { outline: none; }
|
|
.official-doc-modal .official-doc-type-wrap textarea { border: 0.0625rem solid #ddd; border-radius: 0.25rem; padding: 0.125rem 0.5rem; color: #FF3D00; font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; width: 100%; /* min-width: 81.5%; max-width: 81.5%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; */ }
|
|
|
|
.official-doc-modal .doc-modal-custom-select-wrap { position: relative; font-family: sans-serif; color: #111; font-size: 0.75rem; font-weight: 500; font-family: 'pretendard'; }
|
|
.official-doc-modal .doc-modal-custom-select-wrap .doc-modal-custom-select { display: flex; justify-content: space-between; background-color: #fff; border: 0.0625rem solid #ddd; border-radius: 0.25rem; cursor: pointer; padding: 0.25rem 0.5rem; position: relative; margin-left: 0.5rem; width: 9.5rem; }
|
|
|
|
.official-doc-modal .doc-modal-custom-select-wrap .doc-modal-custom-select { display: flex; align-items: center; }
|
|
.official-doc-modal .doc-modal-custom-select-wrap .doc-modal-custom-select .selected { display: block; font-size: 0.75rem; color: #FF3D00; font-weight: 300; }
|
|
.official-doc-modal .doc-modal-custom-select-wrap .doc-modal-custom-select > .icon { position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; }
|
|
.official-doc-modal .doc-modal-custom-select-wrap .doc-modal-custom-select .options { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 0.0625rem solid #ddd; border-top: none; border-radius: 0 0 0.25rem 0.25rem; z-index: 51; }
|
|
.official-doc-modal .doc-modal-custom-select-wrap .doc-modal-custom-select.open .options { display: block; z-index: 51; }
|
|
.official-doc-modal .doc-select-icon-wrap { min-width: 1rem; min-height: 1rem; }
|
|
.official-doc-modal .option { padding: 0.5rem; cursor: pointer; font-size: 0.75rem; color: #FF3D00; font-weight: 300; }
|
|
.official-doc-modal .option:hover { background-color: #eee; }
|
|
|
|
/* 공문 설정 세팅 모달 */
|
|
.official-doc-modal.official-doc-setting-modal { display: none; flex-direction: column; }
|
|
.official-doc-setting-modal-header { color: #111; gap: 0.5rem; padding: 0.5rem; border-bottom: 0.0625rem solid #aaa; }
|
|
.official-doc-dori { display: flex; justify-content: space-between; padding-left: 1rem; font-size: 0.875rem; font-weight: 500; }
|
|
.official-doc-dori>img { cursor: pointer; }
|
|
.official-doc-modal-body-s { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 300; }
|
|
.official-doc-cell-div { display: flex; margin-bottom: 0.5rem; }
|
|
.official-doc-cell-0--title p { padding: 0 2rem 0 0; min-height: 2.7rem; }
|
|
.official-doc-cell-0--title.top { margin-top: 2.1875rem; }
|
|
.official-doc-cell-0--title.top p { margin-top: 2.85rem; }
|
|
.official-doc-cell-0--title.bottom p { margin-top: 1.785rem; }
|
|
.official-doc-cell-1--title,
|
|
.official-doc-cell-2--title { padding-bottom: 0.55rem; }
|
|
.official-doc-cell-division-border { margin: 1rem 0; width: 11rem; height: 0.0625rem; background-color: #ddd; }
|
|
.official-doc-short-border { width: 5rem !important; }
|
|
.official-doc-long-border { width: 100% !important; }
|
|
.official-doc-cell-1,
|
|
.official-doc-cell-2 { display: flex; flex-direction: column; gap: 0.85rem; width: 10rem; }
|
|
.official-doc-cell-1 hr,
|
|
.official-doc-cell-2 hr { width: 100%; height: 0.0625rem; background-color: #ddd; }
|
|
.official-doc-cell-1--body-1,
|
|
.official-doc-cell-1--body-2,
|
|
.official-doc-cell-2--body-1,
|
|
.official-doc-cell-2--body-2 { display: flex; gap: 1rem; }
|
|
.official-doc-cell-1--body-1 p,
|
|
.official-doc-cell-1--body-2 p,
|
|
.official-doc-cell-2--body-1 p,
|
|
.official-doc-cell-2--body-2 p { min-width: 4.5rem; }
|
|
|
|
.official-doc-cell-center-division { background-color: #ddd; width: 0.1rem; margin-right: 1.8rem; }
|
|
.official-doc-inline-list { display: flex; flex-direction: column; gap: 0.5rem; width: 10rem; }
|
|
.official-doc-inline { display: flex; align-items: center; gap: 0.5rem; }
|
|
.official-doc-inline input { outline: none; box-shadow: none; background-color: inherit; border: none; }
|
|
.official-doc-inline input[type="text"] { color: #FF3D00; border: 0.0625rem solid #ddd; border-radius: 0.25rem; padding: 0.25rem 1rem; font-size: 0.875rem; width: 8.25rem; font-weight: 300; }
|
|
.official-doc-inline input[type="text"]:focus { color: #FF3D00; outline: 0.0625rem solid #111; }
|
|
.official-doc-inline input::placeholder { color: #FF3D00; font-weight: 300; line-height: 1.25rem; }
|
|
.official-doc-inline-add-btn { /* width: 13.875rem; */ background-color: #E9EEED; border-radius: 0.25rem; border: 0.0625rem solid #BCCBC8; display: flex; align-items: center; justify-content: center; color: #1E5149; padding: 0.125rem 0; cursor: pointer; margin-right: 1.75rem; font-size: 0.875rem; font-weight: 300; }
|
|
.official-doc-line-text { display: flex; gap: 0.5rem; }
|
|
.official-doc-line-set { min-width: 100%; height: 0.0625rem; background-color: #ddd; }
|
|
.official-doc-line-icon { display: flex; padding-left: 3.675rem; }
|
|
.official-doc-line-icon img { height: 1.125rem; }
|
|
|
|
.official-doc-modal .custom-checkbox input[type="checkbox"] { display: none; }
|
|
.official-doc-modal .custom-checkbox span { position: relative; width: 1.25rem; height: 1.25rem; margin-top: 0.25rem; border: 0.0625rem solid #ddd; border-radius: 0.25rem; background-color: #fff; display: inline-block; background-size: contain; background-position: center; background-repeat: no-repeat; }
|
|
.official-doc-modal .custom-checkbox input[type="checkbox"]:checked + span { background-image: url(/main/img/officialDoc/icon-checkbox.svg); width: 1.25rem; height: 1.25rem; }
|
|
.official-doc-setting-modal .xs-btn { display: flex; justify-content: center; align-items: center; background-color: #fff; min-height: 1.25rem; max-height: 1.25rem; min-width: 1.25rem; max-width: 1.25rem; border-radius: 0.25rem; border: 0.0625rem solid #ddd; cursor: pointer; }
|
|
|
|
.order-base { display: flex; flex-direction: column; gap: 0.5rem; }
|
|
.order-target { display: flex; flex-direction: column; gap: 0.5rem; }
|
|
.other-order-base { display: flex; flex-direction: column; gap: 0.5rem; }
|
|
.other-order-target { display: flex; flex-direction: column; gap: 0.5rem; }
|
|
|
|
/* 공문 컨텍스트메뉴 모달 */
|
|
.official-doc-modal.official-doc-context-modal .official-doc-modal-block { width: 100%; }
|
|
.official-doc-modal.official-doc-context-modal .official-doc-modal-block .official-doc-modal-body { display: flex; text-align: center; align-items: center; }
|
|
.official-doc-modal.official-doc-context-modal .official-doc-modal-block .official-doc-modal-body .text-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 0.875rem; line-height: 1.6; }
|
|
.official-doc-modal.official-doc-context-modal .official-doc-modal-block .official-doc-modal-body input { width: 30rem; padding: 0.3125rem; color: #FF3D00; outline: 0.0625rem solid #ddd; border-radius: 0.25rem; border: none; }
|
|
.official-doc-modal.official-doc-context-modal .official-doc-modal-block .official-doc-modal-body input:focus { outline: 0.125rem solid #414141; }
|
|
.official-doc-modal.official-doc-context-modal .official-doc-modal-block .official-doc-modal-body .input-wrap .warn { font-size: 0.875rem; margin-top: 0.5rem; color: #f21d0d; font-weight: bold; text-align: center; white-space: pre; line-height: 1.2; animation: vibration 0.1s; animation-iteration-count: 6; }
|
|
|
|
/* 파일 미리보기 영역 */
|
|
.official-doc-preview .official-doc-preview--notice { display: flex; width: 100%; height: 100%; justify-content: center; align-items: center; text-align: center; color: #777; font-size: 1.125rem; font-weight: bold; }
|
|
|
|
.official-doc-preview .official-doc-preview--container { height: 100%; display: none; flex-direction: column; }
|
|
|
|
.official-doc-preview .official-doc-preview--container .viewer-header { width: 100%; background: #e9eeed; border-bottom: 0.0625rem solid #a5b9b6; padding: 0 1rem; }
|
|
.official-doc-preview .official-doc-preview--container .viewer-header .wrap { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 2.25rem; }
|
|
.official-doc-preview .official-doc-preview--container .viewer-header .text-wrap { display: flex; align-items: center; gap: 0.5rem; }
|
|
.official-doc-preview .official-doc-preview--container .viewer-header .text-wrap .title { font-weight: bold; color: #1E5149; }
|
|
.official-doc-preview .official-doc-preview--container .viewer-header .btn { display: flex; align-items: center; height: 1.25rem; background: #fff; outline: 0.0625rem solid #ddd; border-radius: 0.25rem; padding: 0.2rem; transition: 0.3s; }
|
|
.official-doc-preview .official-doc-preview--container .viewer-header .btn:hover { background: #000; cursor: pointer; }
|
|
.official-doc-preview .official-doc-preview--container .viewer-header .btn:hover .text { color: #fff; }
|
|
|
|
.official-doc-preview .official-doc-preview--container .viewer-wrap { display: flex; height: 100%; }
|
|
.official-doc-preview .official-doc-preview--container .viewer-wrap .viewer { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
|
|
.official-doc-preview .official-doc-preview--container .viewer-wrap .viewer iframe { width: 100%; height: 100%; border: none; }
|
|
.official-doc-preview .official-doc-preview--container .viewer-wrap .viewer iframe body { background-color: 383838; }
|
|
.official-doc-preview .official-doc-preview--container .viewer-wrap .viewer .viewer-unsupport-wrap { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
|
|
.official-doc-preview .official-doc-preview--container .viewer-wrap .viewer .viewer-unsupport-wrap .text { color: #777; font-size: 1.25rem; font-weight: bold; }
|
|
.official-doc-preview .official-doc-preview--container .viewer-wrap .viewer .viewer-convert-wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; }
|
|
.official-doc-preview .official-doc-preview--container .viewer-wrap .viewer .viewer-convert-wrap .text { color: #777; font-size: 1.25rem; font-weight: bold; }
|
|
.official-doc-preview .official-doc-preview--container .viewer-wrap .viewer .viewer-text-wrap { display: flex; justify-content: center; align-items: center; padding: 0.125rem 1rem; width: 100%; height: 100%; overflow-y: scroll; }
|
|
.official-doc-preview .official-doc-preview--container .viewer-wrap .viewer .viewer-text-wrap .viewer-text { width: 100%; height: 100%; padding: 0 1rem; white-space: pre-wrap; font-size: 0.875rem; }
|
|
|
|
.official-doc-preview .official-doc-preview--container .info-wrap { display: flex; flex-direction: column; width: 100%; position: relative; transition: 0.3s; max-height: 500px; }
|
|
.official-doc-preview .official-doc-preview--container .info-wrap.close { max-height: 0px; }
|
|
.official-doc-preview .official-doc-preview--container .info-wrap.open { max-height: 500px; }
|
|
|
|
.official-doc-preview .official-doc-preview--container .info-wrap .separator { position: absolute; width: 100%; border-top: 0.0625rem solid #A5B9B6; z-index: 20; }
|
|
.official-doc-preview .official-doc-preview--container .info-wrap .separator .toggle-btn { display: flex; align-items: center; justify-content: center; gap: 0.25rem; position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 0); padding: 0 0.25rem; background: #E9EEED; border: 0.0625rem solid #A5B9B6; border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; transition: 0.2s; }
|
|
.official-doc-preview .official-doc-preview--container .info-wrap .separator .toggle-btn .image { width: 1rem; height: 1rem; background: url('/main/img/archive/toggle_bottom_darkgreen.svg') no-repeat center/contain; transition: 0.2s; pointer-events: none; transform: rotate(0deg); }
|
|
.official-doc-preview .official-doc-preview--container .info-wrap .separator .toggle-btn .text { color: #1E5149; transition: 0.2s; }
|
|
.official-doc-preview .official-doc-preview--container .info-wrap.close .separator .toggle-btn .image { transform: rotate(180deg); }
|
|
.official-doc-preview .official-doc-preview--container .info-wrap .separator .toggle-btn:hover { cursor: pointer; background: #bccbc8; }
|
|
.official-doc-preview .official-doc-preview--container .info-wrap .separator .toggle-btn:hover .image { scale: 1.25; }
|
|
|
|
.official-doc-preview .official-doc-preview--container .info-wrap .metadata { display: flex; width: 100%; height: fit-content; min-height: 0; border-top: 0.0625rem solid #a5b9b6; position: relative; overflow-x: hidden; overflow-y: scroll; transition: 0.3s; }
|
|
.official-doc-preview .official-doc-preview--container .info-wrap.close .metadata { opacity: 0; }
|
|
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap { display: flex; flex-direction: column; justify-content: center; width: calc(100% - 1.75rem); margin: 0 0.75rem 0 1rem; }
|
|
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; }
|
|
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap.line1 .item,
|
|
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap.line2 .item { border-bottom: 0.0625rem solid #ddd; padding: 0.5rem 0; align-items: center; }
|
|
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap.line3 .item { border-bottom: 0.0625rem solid #ddd; }
|
|
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap.line3 .item,
|
|
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap.line4 .item { padding: 0.5rem 0; align-items: center; }
|
|
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap.line2 .item { width: 30% !important; }
|
|
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap .item { display: flex; gap: 1rem; width: 100%; height: 100%; align-items: center; }
|
|
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap .item .key { display: flex; justify-content: space-between; white-space: nowrap; color: #777; min-width: 3rem; max-width: 3rem; }
|
|
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap .item .key span { flex: 0 0 auto; font-weight: 300; line-height: 1.25rem; }
|
|
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap .item .value-wrap { display: flex; justify-content: space-between; align-items: center; width: calc(100% - 4rem); height: 100%; font-weight: 500; }
|
|
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap.line1 .item .value-wrap .value,
|
|
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap.line2 .item .value-wrap .value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25rem; }
|
|
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap.line3 .item .value-wrap .value,
|
|
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap.line4 .item .value-wrap .value { overflow: hidden; overflow-y: auto; max-height: 5rem; width: 100%; line-height: 1.25rem; }
|
|
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap .item .btn { display: flex; align-items: center; height: 1.25rem; outline: 0.0625rem solid #aaa; border-radius: 0.25rem; padding: 0.125rem 0.25rem; transition: 0.3s; }
|
|
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap .item .btn .text { transition: 0.3s; }
|
|
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap .item .btn:hover { background: #000; cursor: pointer; }
|
|
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap .item .btn:hover .text { color: #fff; }
|
|
.official-doc-preview .official-doc-preview--container .info-wrap .metadata .metadata-item-wrap .wrap .item .textarea:disabled { color: #000; width: 100%; height: 100%; padding: 0.125rem 0; resize: none; border: none; border-radius: 0.25rem; font-size: 0.875rem; line-height: 1rem; background: transparent; z-index: 30; }
|
|
|
|
/******************************************************************************************************************************************************************/
|
|
/********************************************************************************************************************************************** contextmenu *******/
|
|
/******************************************************************************************************************************************************************/
|
|
/* 컨텍스트메뉴 */
|
|
.official-doc-contextmenu { display: none; flex-direction: column; position: absolute; min-width: 12.5rem; background: #fff; user-select: none; border: 0.0625rem solid #ddd; border-radius: 0.25rem; z-index: 40; }
|
|
.official-doc-contextmenu div { font-size: 0.875rem; z-index: 40; }
|
|
.official-doc-contextmenu .official-doc-contextmenu-container { width: 100%; height: 100%; position: relative; padding: 0.25rem; box-shadow: var(--box-shadow); font-weight: 300; z-index: 40; }
|
|
.official-doc-contextmenu .official-doc-contextmenu-container .official-doc-contextmenu-padding { padding: 0.25rem; }
|
|
.official-doc-contextmenu .official-doc-contextmenu-container .official-doc-contextmenu-item { display: flex; align-items: center; position: relative; color: var(--primary); cursor: pointer; transition: 0.3s; }
|
|
.official-doc-contextmenu .official-doc-contextmenu-container .official-doc-contextmenu-item:hover { background: #d4dddb80; border-radius: 0.25rem; }
|
|
.official-doc-contextmenu .official-doc-contextmenu-container .official-doc-contextmenu-item.disabled { background: #aaa; }
|
|
.official-doc-contextmenu .official-doc-contextmenu-container .official-doc-contextmenu-item.disabled:hover { cursor: not-allowed; }
|
|
.official-doc-contextmenu .official-doc-contextmenu-container .official-doc-contextmenu-item .btn { width: 100%; background: none; }
|
|
.official-doc-contextmenu .official-doc-contextmenu-container .official-doc-contextmenu-item .btn:hover { background: none; }
|
|
.official-doc-contextmenu .official-doc-contextmenu-container .official-doc-contextmenu-item img { width: 1.25rem; height: 1.25rem; margin-right: 0.875rem; }
|
|
.official-doc-contextmenu .official-doc-contextmenu-container .official-doc-contextmenu-item input[type="file"] { display: none; }
|
|
.official-doc-contextmenu .official-doc-contextmenu-container .official-doc-contextmenu-item .btn label { display: flex; align-items: center; cursor: pointer; width: 100%; }
|
|
.official-doc-contextmenu .official-doc-contextmenu-container .official-doc-contextmenu-item .wrap { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; color: #111; }
|
|
.official-doc-contextmenu .official-doc-contextmenu-container .official-doc-contextmenu-item .wrap .name { font-size: 0.875rem; color: #111; }
|
|
.official-doc-contextmenu .official-doc-contextmenu-container .official-doc-contextmenu-item .wrap>div { pointer-events: none; }
|
|
.official-doc-contextmenu .official-doc-contextmenu-container .official-doc-contextmenu-item .wrap .shortcut { color: #777; }
|
|
|
|
/******************************************************************************************************************************************************************/
|
|
/********************************************************************************************************************************************** z-index *******/
|
|
/******************************************************************************************************************************************************************/
|
|
/*
|
|
.official-doc-header 1
|
|
.official-doc-main li.box-selected 3
|
|
.official-doc-main-header .doc-custom-select .options 10
|
|
|
|
.official-doc-list-container 12
|
|
.official-doc-main-body .doc-dnd-area 41
|
|
|
|
.official-doc-file .official-doc-center-division 2
|
|
.official-doc-file .official-doc-center-xs-division 1
|
|
|
|
.official-doc-file .official-doc-division-button 1
|
|
.official-doc-file .official-doc-division-xs-button 1
|
|
|
|
.official-doc-preview-container .official-doc-center-xs-division 1
|
|
.official-doc-preview-container .official-doc-division-button 15
|
|
.official-doc-preview-container .official-doc-division-xs-button 1
|
|
|
|
.official-doc-contextmenu 40
|
|
.official-doc-contextmenu div 40
|
|
.official-doc-contextmenu .official-doc-contextmenu-container 40
|
|
|
|
.official-doc-modal-background 52
|
|
.official-doc-modal 53
|
|
.official-doc-modal .doc-modal-custom-select .options 51
|
|
.official-doc-modal .doc-modal-custom-select.open .options 51
|
|
|
|
.official-doc-main .official-doc-instructions 99
|
|
.official-doc-instructions .doc-instructions-close-btn 99
|
|
.doc-ai-loading 10000
|
|
*/ |