418 lines
26 KiB
CSS
418 lines
26 KiB
CSS
@import url('/main/css/reset.css');
|
|
@import url('/main/css/font.css');
|
|
@import url('/main/css/style_archive.css');
|
|
@import url('/main/css/style_official_doc.css');
|
|
@import url('/main/css/style_overview.css');
|
|
|
|
|
|
|
|
html { font-size: 1rem; }
|
|
|
|
|
|
|
|
@media screen and (max-width: 1920px) {
|
|
html { font-size: 0.8333333vw; }
|
|
}
|
|
|
|
@media screen and (max-width: 1024px) {
|
|
html { font-size: 1.3333333vw; }
|
|
body > .footer .right { display: none !important; }
|
|
}
|
|
|
|
|
|
|
|
:root {
|
|
--color-red: #F21D0D;
|
|
--color-pink: #E8175E;
|
|
--color-magenta: #B92ED1;
|
|
--color-purple: #6D3DC2;
|
|
--color-navy: #4255bd;
|
|
--color-blue: #0D8DF2;
|
|
--color-cyan: #03AEFC;
|
|
--color-green: #4DB251;
|
|
--color-yellow: #FFBF00;
|
|
--color-orange: #FF9800;
|
|
--color-dahong: #FF3D00;
|
|
--color-brown: #A0705F;
|
|
--color-iron: #7F7F7F;
|
|
--color-steel: #688897;
|
|
|
|
--color-red-light: #FEE9E7;
|
|
--color-pink-light: #FDE8EF;
|
|
--color-magenta-light: #F8EBFB;
|
|
--color-purple-light: #F1ECF9;
|
|
--color-navy-light: #EDEEF9;
|
|
--color-blue-light: #E7F4FE;
|
|
--color-cyan-light: #E6F7FF;
|
|
--color-green-light: #EEF8EE;
|
|
--color-yellow-light: #FFF9E6;
|
|
--color-orange-light: #FFF5E6;
|
|
--color-dahong-light: #FFECE6;
|
|
--color-brown-light: #F6F1EF;
|
|
--color-iron-light: #F3F3F3;
|
|
--color-steel-light: #F0F4F5;
|
|
|
|
--color-red-medium: #FAA59E;
|
|
--color-pink-medium: #F6A2BF;
|
|
--color-magenta-medium: #E3ABEC;
|
|
--color-purple-medium: #C5B1E7;
|
|
--color-navy-medium: #B3BBE5;
|
|
--color-blue-medium: #9ED1FA;
|
|
--color-cyan-medium: #9ADFFE;
|
|
--color-green-medium: #B8E0B9;
|
|
--color-yellow-medium: #FFE599;
|
|
--color-orange-medium: #FFD699;
|
|
--color-dahong-medium: #FFB199;
|
|
--color-brown-medium: #D9C6BF;
|
|
--color-iron-medium: #CCCCCC;
|
|
--color-steel-medium: #C3CFD5;
|
|
|
|
/* 프라이머리컬러스케일 */
|
|
--primary-lv0: #E9EEED;
|
|
--primary-lv1: #D2DCDB;
|
|
--primary-lv2: #A5B9B6;
|
|
--primary-lv3: #789792;
|
|
--primary-lv4: #4B746D;
|
|
--primary-lv5: #1E5149;
|
|
--primary-lv6: #1B443D;
|
|
--primary-lv7: #193833;
|
|
--primary-lv8: #162A27;
|
|
--primary-lv9: #141E1D;
|
|
|
|
--header-scrollbar-thumb-color: #E9EEED00; --header-scrollbar-thumb-hover-color: var(--primary-lv0);
|
|
--box-shadow: #0c0c0db3 0rem 0.5rem 1rem -0.25rem;
|
|
--text-shadow-color-fff: #fff;
|
|
--text-shadow-fff: -0.0625rem 0rem var(--text-shadow-color-fff), 0rem 0.0625rem var(--text-shadow-color-fff), 0.0625rem 0rem var(--text-shadow-color-fff), 0rem -0.0625rem var(--text-shadow-color-fff), -0.0625rem -0.0625rem var(--text-shadow-color-fff), 0.0625rem 0.0625rem var(--text-shadow-color-fff), 0.0625rem -0.0625rem var(--text-shadow-color-fff), -0.0625rem 0.0625rem var(--text-shadow-color-fff);
|
|
--text-shadow-color-000: #000;
|
|
--text-shadow-000: -0.0625rem 0rem var(--text-shadow-color-000), 0rem 0.0625rem var(--text-shadow-color-000), 0.0625rem 0rem var(--text-shadow-color-000), 0rem -0.0625rem var(--text-shadow-color-000), -0.0625rem -0.0625rem var(--text-shadow-color-000), 0.0625rem 0.0625rem var(--text-shadow-color-000), 0.0625rem -0.0625rem var(--text-shadow-color-000), -0.0625rem 0.0625rem var(--text-shadow-color-000);
|
|
|
|
--log-highlight: none;
|
|
|
|
/* --thumbnail-gap: 0.5rem; */
|
|
--thumbnail-gap: 1.25rem;
|
|
--thumbnail-size: 0 0 calc((100% - 4 * var(--thumbnail-gap)) / 5);
|
|
--thumbnail-size-value: 5;
|
|
/* --thumbnail-aspect-ratio: 1 / 1; */
|
|
--thumbnail-aspect-ratio: 1.4141 / 1;
|
|
--thumbnail-ratio: contain;
|
|
|
|
--overlay-scale-transform: none;
|
|
--expired-warn: expired-warn 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
* { font-family: 'Pretendard Variable', 'Pretendard'; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
|
|
|
|
|
|
|
|
.icon { width: 1rem; height: 1rem; }
|
|
|
|
|
|
|
|
/* 유저 마우스 커서 */
|
|
.cursor { position: absolute; width: 1.875rem; height: 1.875rem; pointer-events: none; z-index: 30; }
|
|
.cursor .wrap { display: flex; justify-content: center; align-items: center; position: absolute; width: max-content; height: 100%; top: 0.9375rem; left: 100%; }
|
|
.cursor .wrap .user-text { font-size: 0.875rem; font-weight: bold; color: #fff; padding: 0.25rem 0.4rem; border-radius: 0.25rem; }
|
|
|
|
|
|
|
|
/* 위치 이동 커버 */
|
|
.relocate-cover { display: none; height: 100%; position: absolute; z-index: 50; background: #000000cc; }
|
|
|
|
.relocate-cover.list-viewer-cover .container { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5rem; width: 100%; height: 100%; }
|
|
.relocate-cover.list-viewer-cover .container * { color: #fff; font-size: 1rem; }
|
|
.relocate-cover.list-viewer-cover .container .notice-wrap .text { font-size: 1.25rem; font-weight: bold; }
|
|
.relocate-cover.list-viewer-cover .container .path-wrap { display: flex; flex-direction: column; align-items: center; gap: 3rem; }
|
|
.relocate-cover.list-viewer-cover .container .path-wrap .path { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
|
|
.relocate-cover.list-viewer-cover .container .path-wrap .path .key { font-size: 1.25rem; font-weight: bold; }
|
|
.relocate-cover.list-viewer-cover .container .path-wrap .path .value { white-space: pre-wrap; }
|
|
.relocate-cover.list-viewer-cover .container .btn-wrap { display: flex; gap: 1rem; }
|
|
.relocate-cover.list-viewer-cover .container .btn-wrap .btn { width: 9.375rem; padding: 0.5rem; border: 0.0625rem solid #555; border-radius: 0.25rem; cursor: pointer; text-align: center; font-weight: bold; }
|
|
.relocate-cover.list-viewer-cover .container .btn-wrap .btn.confirm-btn { background: linear-gradient(180deg, #1e5149 0%, #12312c 100%); }
|
|
.relocate-cover.list-viewer-cover .container .btn-wrap .btn.confirm-btn:hover { background: linear-gradient(0deg, #1e5149 0%, #12312c 100%); }
|
|
.relocate-cover.list-viewer-cover .container .btn-wrap .btn.cancel-btn { background: #fff; color: #000; }
|
|
.relocate-cover.list-viewer-cover .container .btn-wrap .btn.cancel-btn:hover { background: #000; color: #fff; }
|
|
|
|
|
|
|
|
/* 마르퀴 효과 */
|
|
.marquee-track-wrap { display: flex; align-items: center; flex-wrap: nowrap; gap: 0; width: fit-content; height: inherit; animation: scroll-marquee var(--duration, 10s) linear infinite; will-change: transform; }
|
|
|
|
.marquee-track { display: flex; align-items: center; flex-shrink: 0; gap: 0.5rem; margin: 0; padding: 0 2rem; white-space: nowrap; }
|
|
.marquee-track img { max-width: none; height: 0.75rem; }
|
|
/* .marquee-track .pm { opacity: 0.6; }
|
|
.marquee-track .category { opacity: 0.6; } */
|
|
.marquee-track .project-name { color: #fff; font-weight: 600; }
|
|
.marquee-track .text { opacity: 0.6; color: #fff; font-family: "Aldrich"; padding-top: 0.125rem; }
|
|
|
|
|
|
|
|
/* 프로젝트 비활성화 표시 */
|
|
body > .project-inactive-sign { display: none; justify-content: center; align-items: center; width: 100%; height: 100%; position: absolute; border: 0.3rem solid #f00; z-index: 999999; pointer-events: none; }
|
|
body > .project-inactive-sign .text { font-size: 5rem; font-weight: bold; color: #f003; }
|
|
|
|
/* 배너 공지 */
|
|
body > .banner-notice-area { display: none; justify-content: center; align-items: center; width: 100vw; height: 2.25rem; min-height: 2.25rem; max-height: 2.25rem; background: #000; position: relative; top: 0; z-index: 10; overflow: hidden; white-space: nowrap; }
|
|
/* body > .banner-notice-area .background { width: 100%; height: 100%; background: repeating-linear-gradient(-45deg, #ffd700, #ffd700 2rem, #000000 2rem, #000000 4rem); background-size: 5.5rem 5.5rem; animation: hazard-stripe-flow 2s ease-in infinite; border: 0.0625rem solid #000; position: absolute; z-index: 11; } */
|
|
/* body > .banner-notice-area .background { width: 100%; height: 100%; background: repeating-linear-gradient(-45deg, #ffd700, #ffd700 2rem, #000000 2rem, #000000 4rem); animation: hazard-stripe-pulse 5s ease-in infinite; border: 0.0625rem solid #000; position: absolute; z-index: 11; } */
|
|
body > .banner-notice-area .background { width: 100%; height: 100%; background: repeating-linear-gradient(-45deg, #ffd700, #ffd700 2rem, #000000 2rem, #000000 4rem); animation: hazard-stripe-pulse 3s ease-in infinite; border: 0.0625rem solid #000; position: absolute; z-index: 11; }
|
|
body > .banner-notice-area .content { position: relative; z-index: 12; }
|
|
body > .banner-notice-area .content .text-wrap { display: flex; align-items: center; justify-content: flex-start; flex-shrink: 0; }
|
|
body > .banner-notice-area .content .text-wrap .text { padding: 0.1rem 0.4rem; background: #000; border-radius: 0.25rem; font-size: 1.2rem; font-weight: 600; color: #fff; white-space: nowrap; text-shadow: var(--text-shadow-000); }
|
|
|
|
|
|
|
|
/* 헤더 */
|
|
body > .header { display: flex; justify-content: space-between; align-items: center; width: 100vw; height: 2.25rem; min-height: 2.25rem; max-height: 2.25rem; background: var(--primary-lv5); position: fixed; top: 0; z-index: 10; }
|
|
|
|
body > .header * { color: #FFF; }
|
|
|
|
body > .header > .left { display: flex; align-items: center; width: 16.25rem; height: inherit; padding: 0 1rem; }
|
|
body > .header > .left .title { display: flex; overflow: hidden; position: relative; width: 100%; height: inherit; white-space: nowrap; cursor: pointer; }
|
|
|
|
body > .header > .center { display: flex; justify-content: space-between; align-items: center; flex: 1; min-width: 0; height: inherit; border-left: 0.0625rem solid #4b746d; background: #1e5149; z-index: 20; }
|
|
body > .header > .center .wrap { display: flex; align-items: center; }
|
|
body > .header > .center .wrap .menu-tab { display: flex; align-items: center; height: 100%; padding-top: 0.25rem; position: relative; }
|
|
body > .header > .center .wrap .menu-tab .btn { display: flex; align-items: center; height: 100%; margin: 0 0.125rem; position: relative; }
|
|
body > .header > .center .wrap .menu-tab .btn:first-child { margin-left: 0; }
|
|
body > .header > .center .wrap .menu-tab .btn:last-child { margin-right: 0; }
|
|
body > .header > .center .wrap .menu-tab .btn:hover { cursor: pointer; }
|
|
body > .header > .center .wrap .menu-tab .btn:not(.selected):hover .wrap { background: #4b746d; }
|
|
body > .header > .center .wrap .menu-tab .btn .wrap { display: flex; align-items: center; gap: 0.25rem; position: relative; width: max-content; height: 100%; padding: 0.09375rem 0.25rem; pointer-events: none; border-radius: 0.25rem; }
|
|
body > .header > .center .wrap .menu-tab .btn .wrap .image { width: 1rem; height: 1rem; }
|
|
body > .header > .center .wrap .menu-tab .btn .wrap .name-text { flex: 1; min-width: 0; font-size: 0.875rem; color: #fff; white-space: pre-wrap; }
|
|
body > .header > .center .wrap .menu-tab .btn.selected .wrap { background: #e9eeed; }
|
|
body > .header > .center .wrap .menu-tab .btn.selected .wrap .name-text { color: #1e5149; }
|
|
body > .header > .center .wrap .menu-tab .overview-btn .wrap .image { background: url('/main/img/header/header-page-icon.svg') no-repeat center/contain; }
|
|
body > .header > .center .wrap .menu-tab .folder-btn .wrap .image { background: url('/main/img/header/header-folder-icon.svg') no-repeat center/contain; }
|
|
body > .header > .center .wrap .menu-tab .official-doc-btn .wrap .image { background: url('/main/img/header/header-official-doc.svg') no-repeat center/contain; }
|
|
body > .header > .center .wrap .menu-tab .model-btn .wrap .image { background: url('/main/img/header/header-model.svg') no-repeat center/contain; }
|
|
body > .header > .center .wrap .menu-tab .overview-btn,
|
|
body > .header > .center .wrap .menu-tab .official-doc-btn,
|
|
body > .header > .center .wrap .menu-tab .model-btn { display: none; }
|
|
body > .header > .center .wrap .menu-tab .overview-btn.disabled { cursor: none; pointer-events: none; }
|
|
body > .header > .center .wrap .menu-tab .overview-btn.disabled .wrap { background: #999; }
|
|
body > .header > .center .wrap .menu-tab .overview-btn.disabled .wrap .name-text { color: #ccc; }
|
|
|
|
body > .header > .center .left.wrap { align-items: flex-end; gap: 1rem; flex: 1; min-width: 0; height: inherit; padding-left: 1rem; border-right: 0.0625rem solid #4b746d; position: relative; }
|
|
|
|
body > .header > .center .left.wrap .menu-tab { overflow-x: scroll; overflow-y: hidden; }
|
|
body > .header > .center .left.wrap .menu-add { display: none; align-items: center; min-width: 1.25rem; max-width: 1.25rem; height: inherit; }
|
|
body > .header > .center .left.wrap .menu-add .add-btn { display: flex; justify-content: center; align-items: center; width: 1.25rem; height: 1.25rem; background: #35635c; border: 0.0625rem solid #4b746d; border-radius: 0.25rem; }
|
|
body > .header > .center .left.wrap .menu-add .add-btn:hover { cursor: pointer; background: #3e8d80; }
|
|
body > .header > .center .left.wrap .menu-add .add-btn .image { width: 1rem; height: 1rem; background: url('/main/img/header/header-menu-add.svg') no-repeat center/contain; pointer-events: none; }
|
|
|
|
body > .header > .center .right.wrap { justify-content: flex-end; gap: 0.375rem; width: max-content; height: inherit; padding: 0 1rem; position: relative; }
|
|
|
|
body > .header > .center .right.wrap .menu-tab { padding-bottom: 0.25rem; }
|
|
body > .header > .center .right.wrap .menu-tab .official-doc-btn .ai-logo { width: 1.75rem; height: 1.25rem; background: url('/main/img/ai_logo.svg') no-repeat center/contain; }
|
|
|
|
body > .header > .right { display: flex; justify-content: space-between; align-items: center; width: max-content; height: inherit; border-left: 0.0625rem solid #4b746d; }
|
|
body > .header > .right .connected-users { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; height: 100%; padding: 0 1rem; background: #18413A; }
|
|
body > .header > .right .connected-users .title { color: #789792; font-size: 0.75rem; pointer-events: none; }
|
|
body > .header > .right .connected-users .count { color: #ccc; font-size: 0.75rem; pointer-events: none; }
|
|
body > .header > .right .connected-users:hover { cursor: pointer; }
|
|
body > .header > .right .connected-users:hover .count { color: #fff; text-decoration: underline; }
|
|
|
|
/* 헤더 가로 스크롤바 */
|
|
.header-scrollbar::-webkit-scrollbar { width: 0.25rem; height: 0.25rem; }
|
|
.header-scrollbar::-webkit-scrollbar-track { background-color: transparent; }
|
|
.header-scrollbar::-webkit-scrollbar-thumb { background-color: var(--header-scrollbar-thumb-color); border-radius: 1rem; background-clip: content-box; border: 0.0625rem solid transparent; }
|
|
.header-scrollbar::-webkit-scrollbar-thumb:hover { background-color: var(--header-scrollbar-thumb-hover-color); cursor: pointer; }
|
|
.header-scrollbar::-webkit-scrollbar-corner { background: transparent; }
|
|
|
|
/* 헤더 스크롤 버튼 */
|
|
.scroll-btn { display: none; justify-content: center; align-items: center; width: 1.25rem; height: 1.25rem; background: #35635c; border: 0.0625rem solid #4b746d; border-radius: 0.25rem; position: absolute; top: 50%; transform: translate(0, -50%); z-index: 11; }
|
|
.scroll-btn:hover { cursor: pointer; background: #3e8d80; }
|
|
.scroll-left { right: 2.75rem; }
|
|
.scroll-right { right: 1rem; }
|
|
.scroll-left .image { width: 1rem; height: 1rem; background: url('/main/img/archive/scroll_x_angle_left.svg') no-repeat center/contain; }
|
|
.scroll-right .image { width: 1rem; height: 1rem; background: url('/main/img/archive/scroll_x_angle_left.svg') no-repeat center/contain; transform: rotate(180deg); }
|
|
|
|
|
|
|
|
/* 메인 */
|
|
body > .main { display: none; width: 100%; height: calc(100dvh - 2.25rem - 2.25rem); position: absolute; top: 2.25rem; color: #111; }
|
|
|
|
/* 전체 스크롤바 */
|
|
.scrollbar::-webkit-scrollbar { width: 0.25rem; height: 0.25rem; }
|
|
.scrollbar::-webkit-scrollbar-track { background-color: transparent; }
|
|
.scrollbar::-webkit-scrollbar-thumb { background-color: #999; border-radius: 1rem; background-clip: content-box; }
|
|
.scrollbar::-webkit-scrollbar-thumb:hover { background-color: #666; cursor: pointer; }
|
|
.scrollbar::-webkit-scrollbar-corner { background: transparent; }
|
|
|
|
|
|
|
|
/* 푸터 */
|
|
body > .footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100vw; height: 2.25rem; min-height: 2.25rem; max-height: 2.25rem; padding: 0 1rem; background: #fff; border-top: 0.0625rem solid #ddd; position: fixed; bottom: 0; z-index: 10; }
|
|
|
|
body > .footer * { font-size: 0.75rem; }
|
|
|
|
body > .footer .left { display: flex; align-items: center; flex: 1; gap: 1rem; min-width: 0; height: 100%; }
|
|
|
|
body > .footer .left .footer-separator { height: 0.75rem; border-right: 0.0625rem solid #777; }
|
|
|
|
body > .footer .left .wrap { display: flex; align-items: center; height: 100%; }
|
|
|
|
/* body > .footer .left .wrap .title { font-weight: 600; color: #444; }
|
|
body > .footer .left .wrap .title:hover { cursor: pointer; text-decoration: underline; } */
|
|
|
|
body > .footer .left .wrap .title { font-weight: 600; color: #444; }
|
|
body > .footer .left .wrap .title:hover { cursor: pointer; text-decoration: underline; }
|
|
|
|
body > .footer .left .wrap.size-wrap { justify-content: center; gap: 0.5rem; }
|
|
body > .footer .left .wrap.size-wrap .size-text { display: flex; align-items: center; gap: 0.2rem; }
|
|
body > .footer .left .wrap.size-wrap .size-text div { color: #777; }
|
|
body > .footer .left .wrap.size-wrap .size-text .numerator.over { color: #f00; }
|
|
body > .footer .left .wrap.size-wrap .size-bar .base { width: 6.25rem; height: 0.25rem; background: #e4e4e4; border-radius: 0.25rem; }
|
|
body > .footer .left .wrap.size-wrap .size-bar .value { width: 0; height: 0.25rem; background: #777; border-radius: 0.25rem; }
|
|
body > .footer .left .wrap.size-wrap .size-bar .value.over { background: #f00; }
|
|
body > .footer .left .wrap.size-wrap .size-percent { color: #777; text-shadow: var(--text-shadow-fff); }
|
|
body > .footer .left .wrap.size-wrap .size-percent.over { color: #f00; }
|
|
|
|
body > .footer .left .wrap.log-wrap { gap: 0.5rem; flex: 1; min-width: 0; }
|
|
body > .footer .left .wrap.log-wrap .latest-log { display: flex; align-items: center; flex: 1; min-width: 0; }
|
|
body > .footer .left .wrap.log-wrap .latest-log .log-item { display: flex; align-items: center; width: 100%; gap: 0.375rem; animation: var(--log-highlight); }
|
|
body > .footer .left .wrap.log-wrap .latest-log .log-item > div { display: flex; }
|
|
body > .footer .left .wrap.log-wrap .latest-log .log-item .text { color: #777; }
|
|
body > .footer .left .wrap.log-wrap .latest-log .log-item > .log-separator { height: 0.75rem; border-right: 0.0625rem solid #ccc; }
|
|
body > .footer .left .wrap.log-wrap .latest-log .log-item .log { flex-direction: column; gap: 0.2rem; flex: 1; min-width: 0; }
|
|
body > .footer .left .wrap.log-wrap .latest-log .log-item .log .text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
|
|
|
body > .footer .right { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; width: max-content; }
|
|
body > .footer .right p { color: #777; }
|
|
|
|
|
|
|
|
/* 초기 프로그레스 */
|
|
/* 원래는 none인데 flex로 변경?? */
|
|
.init-progress { z-index: 99999; display: flex; flex-direction: column; justify-content: center; align-items: center; position: absolute; top: 0rem; left: 0rem; width: 100%; height: 100%; background: #eeeeee99; backdrop-filter: blur(0.2rem); -webkit-backdrop-filter: blur(0.2rem); overflow: hidden; }
|
|
.init-progress .text { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; }
|
|
.init-progress .text span { color: #111; font-size: 1rem; font-weight: 500; }
|
|
.init-progress .text img { width: 1.5rem; height: 1.5rem; }
|
|
|
|
/* 파일 프로그래스(임시) */
|
|
.file-progress { z-index: 99999; display: none; position: absolute; top: 0rem; left: 0rem; width: 100%; height: 100%; animation: progress-background 3s infinite; overflow: hidden; }
|
|
.file-progress .file-progress-wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; width: 100%; height: 100%; }
|
|
.file-progress .file-progress-wrap .title { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; }
|
|
.file-progress .file-progress-wrap .title .title-wrap { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; }
|
|
.file-progress .file-progress-wrap .title .title-wrap span { color: #111; font-size: 1rem; font-weight: 500; }
|
|
.file-progress .file-progress-wrap .title .title-wrap img { width: 1rem; height: 1rem; }
|
|
.file-progress .file-progress-wrap .title .warn { display: none; }
|
|
.file-progress .file-progress-wrap .title .warn span { color: #777; font-size: 0.875rem; font-weight: 300; }
|
|
.file-progress .file-progress-wrap .text { display: flex; flex-direction: column; align-items: center; }
|
|
.file-progress .file-progress-wrap .text span { color: #111; font-size: 1rem; font-weight: 300; }
|
|
.file-progress .file-progress-wrap .size-progress { display: flex; flex-direction: column; align-items: center; }
|
|
.file-progress .file-progress-wrap .size-progress .size { display: flex; align-items: flex-start; gap: 1rem; }
|
|
.file-progress .file-progress-wrap .size-progress .percentage { display: flex; align-items: center; }
|
|
.file-progress .file-progress-wrap .size-progress > div > span { color: #111; font-size: 0.875rem; font-weight: 300; }
|
|
|
|
|
|
|
|
.permission-min-dev { display: none; }
|
|
.permission-min-sub-master { display: none; }
|
|
.permission-min-security-worker { display: none; }
|
|
.permission-min-worker { display: none; }
|
|
|
|
|
|
|
|
/* 다운로드 폴더 스타일 ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== */
|
|
body>.header>.center .wrap .menu-tab .download-btn .wrap .image { background: url('/main/img/header/icon__download-folder--primary-lv-3.svg') no-repeat center/contain; }
|
|
body>.header>.center .wrap .menu-tab .download-btn .wrap .download-reddot { background: url('/main/img/header/icon__download-reddot--color-dahong.svg') no-repeat center/contain; width: 0.375rem; height: 0.375rem; position: absolute; top: 0; right: -0.125rem; }
|
|
|
|
/* // 다운로드 폴더 스타일 ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== */
|
|
/* */
|
|
/* */
|
|
/* */
|
|
/* 모달-다운로드창 ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== */
|
|
.download-modal { display: flex; justify-content: center; align-items: center; position: absolute; z-index: 61; width: 100%; height: 100%; background: #00000099; }
|
|
.download-modal-wrap { display: flex; flex-direction: column; position: relative; background: #fff; border: 0.0625rem solid #aaa; margin: auto; border-radius: 0.25rem; width: 30rem; height: 40rem; box-shadow: 0 0.5rem 1.5rem 0 rgba(0, 0, 0, 0.16); }
|
|
.download-modal__head { display: flex; align-items: center; padding: 0.5rem 0.5rem 0.5rem 1rem; gap: 1rem; border-bottom: 0.0625rem solid #ddd; }
|
|
.download-modal__head_subtitle { flex-grow: 1; }
|
|
.download-modal__head_close:hover { cursor: pointer; }
|
|
.download-modal__body { flex-grow: 1; height: 0; display: flex; flex-direction: column; }
|
|
.download-modal__body_top { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-bottom: 0.0625rem solid #ddd; }
|
|
.download-modal__body_top_name { flex-grow: 1; }
|
|
.download-modal__body_top_time { width: 5.625rem; }
|
|
.download-modal__body_top_status { width: 2rem; text-align: right; }
|
|
.download-modal__body_list { display: flex; flex-direction: column; overflow-y: scroll; overflow-x: hidden; padding-right: 0.5rem; padding-left: 1rem; height: 0; flex-grow: 1; }
|
|
.download-modal__body_list_item { padding: 0.5rem 0; display: flex; align-items: flex-start; gap: 0.5rem; border-bottom: 0.0625rem solid #ddd; }
|
|
.download-modal__body_list_item_text { flex-grow: 1; width: 17.5rem; word-break: break-all; }
|
|
.download-modal__body_list_item_time { width: 5.625rem; color: #FF3D00; }
|
|
.download-modal__body_list_item_status { font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; width: 2rem; display: flex; justify-content: flex-end; }
|
|
.download-modal__foot { display: flex; align-items: center; justify-content: center; padding: 1rem; border-top: 0.0625rem solid #ddd; }
|
|
|
|
.download-modal__head_title { font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; }
|
|
.download-modal__head_subtitle { font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; color: #777; }
|
|
.download-modal__body_top_name { font-size: 0.75rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; }
|
|
.download-modal__body_top_time { font-size: 0.75rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; }
|
|
.download-modal__body_top_status { font-size: 0.75rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; }
|
|
.download-modal__body_list_item_text_title { font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; }
|
|
.download-modal__body_list_item_text_subtitle { font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; color: #777; }
|
|
.download-modal__body_list_item_time { font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; }
|
|
|
|
/* // 모달-다운로드창 ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== */
|
|
/* */
|
|
/* */
|
|
/* */
|
|
/* --재사용 컴포넌트 ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== */
|
|
.--text__color-dahong { font-weight: 500; color: #FF3D00; }
|
|
.--button__xsmall-icon { display: flex; align-items: center; justify-content: center; padding: 0.125rem; background-color: #fff; border-radius: 0.25rem; border: 0.0625rem solid #ddd; pointer-events: auto;}
|
|
.--button__xsmall-icon:hover { cursor: pointer; }
|
|
.--button__medium { display: flex; align-items: center; justify-content: center; padding: 0.5rem; width: 10rem; background-color: #fff; border: 0.0625rem solid #ddd; border-radius: 0.25rem; font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; letter-spacing: -0.0175rem; pointer-events: auto;}
|
|
.--button__medium:hover { cursor: pointer; }
|
|
.--disable { opacity: 20%; }
|
|
.--disable:hover { cursor: not-allowed; pointer-events: auto;}
|
|
.--icon { width: 1rem; height: 1rem; pointer-events: auto;}
|
|
|
|
/* // --재사용 컴포넌트 ===== ===== ===== ===== ===== ===== ===== ===== ===== ===== */
|
|
|
|
|
|
@keyframes scroll-marquee {
|
|
from { transform: translateX(0); }
|
|
to { transform: translateX(var(--translateX)); }
|
|
}
|
|
|
|
@keyframes rotate-image {
|
|
100% { transform: rotate(-360deg); }
|
|
}
|
|
|
|
@keyframes vibration {
|
|
from { transform: translateX(-0.0625rem); }
|
|
to { transform: translateX(0.0625rem); }
|
|
}
|
|
|
|
@keyframes progress-background {
|
|
0% { background-color: #fff; }
|
|
50% { background-color: #d2dcdb; }
|
|
100% { background-color: #fff; }
|
|
}
|
|
|
|
@keyframes log-highlight {
|
|
0% { opacity: 1; }
|
|
100% { opacity: 0.1; }
|
|
}
|
|
|
|
@keyframes hazard-stripe-flow {
|
|
0% { background-position: 0 0; }
|
|
100% { background-position: -5.5rem 0; }
|
|
}
|
|
|
|
@keyframes hazard-stripe-pulse {
|
|
0%, 100% { opacity: 0; }
|
|
30%, 70% { opacity: 1; }
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
@keyframes fadeOut {
|
|
from { opacity: 1; }
|
|
to { opacity: 0; }
|
|
}
|
|
|
|
@keyframes expired-warn {
|
|
0% { background: #f9613b; }
|
|
50% { background: #e9eeed; }
|
|
100% { background: #f9613b; }
|
|
} |