초기 PM 소스 전체 업로드
This commit is contained in:
koj729
26
libs/ifcViewer/css/font.css
Normal file
26
libs/ifcViewer/css/font.css
Normal file
@@ -0,0 +1,26 @@
|
||||
/* 폰트 */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&family=Protest+Riot&family=Gowun+Dodum&display=swap');
|
||||
|
||||
@font-face {
|
||||
font-family: 'S-CoreDream-3Light';
|
||||
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'SeoulNamsanM';
|
||||
src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/SeoulNamsanM.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* @font-face {
|
||||
font-family: "Nova Flat", system-ui;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
src:url('https://fonts.googleapis.com/css2?family=Nova+Flat&display=swap');
|
||||
} */
|
||||
|
||||
|
||||
|
||||
/* 폰트적용 */
|
||||
/* * { font-family: 'Noto Sans KR', 'Protest Riot', 'Gowun Dodum', sans-serif; } */
|
||||
10
libs/ifcViewer/css/reset.css
Normal file
10
libs/ifcViewer/css/reset.css
Normal file
@@ -0,0 +1,10 @@
|
||||
/* https://velog.io/@teo/2022-CSS-Reset-%EB%8B%A4%EC%8B%9C-%EC%8D%A8%EB%B3%B4%EA%B8%B0 */
|
||||
* { margin: 0; padding: 0; font: inherit; color: inherit; }
|
||||
*, :after, :before { box-sizing: border-box; }
|
||||
:root {-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;cursor:default;line-height:1.5;overflow-wrap:break-word;word-break:break-word;tab-size:4}
|
||||
html, body { height:100%; color: #000; }
|
||||
img, picture, video, canvas, svg { display: block;max-width:100%; }
|
||||
button { background:none;border:0;cursor:pointer; }
|
||||
a { text-decoration:none }
|
||||
table { border-collapse:collapse;border-spacing:0 }
|
||||
ul, li { list-style: none; }
|
||||
100
libs/ifcViewer/css/style.css
Normal file
100
libs/ifcViewer/css/style.css
Normal file
@@ -0,0 +1,100 @@
|
||||
@import url('./reset.css');
|
||||
@import url('./font.css');
|
||||
|
||||
* { font-family: 'Gowun Dodum', 'Noto Sans KR', sans-serif; font-size: 14px; }
|
||||
|
||||
:root {--background-color: rgba(0, 0, 0, 0.3); --color1: #6944F0; --color2: #6944F0; --gray: rgba(255, 255, 255, 0.7); }
|
||||
|
||||
html,body { position: relative; font-size: 62.5%; }
|
||||
body { overflow: hidden; user-select: none; }
|
||||
|
||||
.wrap { display: flex; flex-direction: column; height: 100%; }
|
||||
|
||||
|
||||
/* -------------------- Main : Center -------------------- */
|
||||
.full-screen { width: 100vw; height: 100vh; position: relative; overflow: hidden; }
|
||||
|
||||
.btnGroup { display: flex; gap: 10px; position: absolute; left: 460px; top: 20px; }
|
||||
.btnGroup > button { width: fit-content; font-size: 12px;}
|
||||
.btnGroup > input { width: fit-content; font-size: 12px;}
|
||||
|
||||
.left { display: flex; flex-direction: column; position: absolute; top: 14px; left: 14px; width: 420px; max-height: calc(100% - 28px); padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.5); }
|
||||
.left .side-resize { position: absolute; top: 0; right: -6px; width: 6px; height: 100%; background: none; cursor: ew-resize; }
|
||||
.left .left-header .file-info { display: flex; align-items: center;}
|
||||
.left .left-header .file-info .schema { width: fit-content; margin-right: 6px; padding: 0 4px; border-radius: 4px; color: white; background: gray; font-size: 12px; }
|
||||
.left .left-header .file-info .file-name { flex: 1; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.left .left-header h2 { font-family: 'S-CoreDream-3Light'; font-size: 18px; font-weight: bold; }
|
||||
.left .left-conts { display: flex; flex-direction: column; position: relative; overflow: auto; scrollbar-gutter: stable; margin-right: -14px; }
|
||||
|
||||
.tree-container { width: fit-content; min-width: -webkit-fill-available; background: var(--gray); user-select: none; font-size: 14px; }
|
||||
.tree { list-style: none; margin: 8px 14px; width: 100%;}
|
||||
.tree *:before { width: 14px; height: 14px; display: inline-block; }
|
||||
|
||||
.tree ul { list-style: none; margin-left: 10px; padding-left: 11px; border-left: 1px dashed #999;}
|
||||
.tree ul:first-child { margin-left: 0; padding-left: 0; border-left: 0; }
|
||||
.tree li { list-style: none; width: 100%; white-space: nowrap; }
|
||||
|
||||
.tree li > .input-caret { display: none; }
|
||||
.tree li > .label-caret { display: inline-block; width: 14px; height: 14px; margin: 0 4px; background: url('../img/arrow-plus.svg') no-repeat center center/cover; transition: all 0.2s ease; cursor: pointer; }
|
||||
.tree li > .input-caret:checked+.label-caret { background: url('../img/arrow-minus.svg') no-repeat center center/cover; transform: rotate(-360deg); }
|
||||
.tree li > div { display: inline-block; }
|
||||
.tree li > div > .ifc-type { display: inline-block; padding-left: 6px; color: gray; font-size: 14px; cursor: pointer; }
|
||||
.tree li > div > .ifc-name { display: inline-block; padding-left: 6px; font-size: 14px; }
|
||||
.tree li > div.selected { background-color: rgba(0, 123, 255, 0.2); }
|
||||
.tree li .label-caret > span { margin-left: 14px; color: #000; }
|
||||
.tree .input-caret:not(:checked)~ul { display: none; }
|
||||
|
||||
.tree li > .input-visible { display: none; }
|
||||
.tree li > .label-visible { display: inline-block; width: 14px; height: 14px; margin-left: 4px; background: url('../img/hide.svg') no-repeat center center/cover; transition: all 0.2s ease; cursor: pointer; }
|
||||
.tree li > .input-visible:checked+.label-visible { background: url('../img/show.svg') no-repeat center center/cover; transform: rotate(-360deg); }
|
||||
|
||||
.right { display: flex; flex-direction: column; position: absolute; top: 14px; right: -680px; width: 420px; max-height: calc(100% - 28px); padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.5); }
|
||||
.right .side-resize { position: absolute; top: 0; left: -6px; width: 6px; height: 100%; background: none; cursor: ew-resize; }
|
||||
|
||||
.show-right { right: 14px !important; }
|
||||
|
||||
.right .right-header h2 { font-family: 'S-CoreDream-3Light'; font-size: 18px; font-weight: bold; }
|
||||
.right .right-conts { display: flex; flex-direction: column; position: relative; overflow-y: auto; scrollbar-gutter: stable; margin-right: -14px; }
|
||||
|
||||
.accordion { margin-top: 8px;}
|
||||
.accordion .accordion-header { display: flex; height: 32px; border-left: 2px solid var(--color2); border-bottom: 1px solid rgba(0, 0, 0, 0.1); background:var(--gray); }
|
||||
.accordion .accordion-header .btn-accordion { display: flex; align-items: center; position: relative; width: 100%; padding-left: 14px; font-size: 16px; font-weight: bold; text-align: left; }
|
||||
.accordion .accordion-header .btn-accordion img { width: 16px; height: 16px; margin-right: 7px; }
|
||||
.accordion .accordion-header .btn-accordion::after { content: ""; display: inline-block; position: absolute; right: 4px; width: 16px; height: 16px; background: url('../img/caret.svg') no-repeat center center/cover; transition: all 0.2s; }
|
||||
.accordion .accordion-header .btn-accordion.collapse::after { transform: rotate(-180deg); }
|
||||
.accordion .accordion-collapse { max-height: 0; overflow: hidden; transition: all 0.2s; background:var(--gray); }
|
||||
.accordion .accordion-collapse[aria-hidden="false"] { max-height: 5000px; /* A large enough value to accommodate content */ }
|
||||
.accordion .accordion-collapse .accordion-body { display: flex; flex-direction: column; gap: 2px; padding: 14px; border-left: 2px solid var(--color2); }
|
||||
.accordion .accordion-collapse .accordion-body .sub-title { margin-top: 7px; }
|
||||
.accordion .accordion-collapse .accordion-body .sub-title:first-child { margin-top: 0; }
|
||||
.accordion .accordion-collapse .accordion-body dl { display: flex; }
|
||||
.accordion .accordion-collapse .accordion-body dl dt { width: 40%; padding-left: 8px; color: gray; word-break: break-all; }
|
||||
.accordion .accordion-collapse .accordion-body dl dd { flex:1; padding-left: 8px; word-break: break-all; }
|
||||
|
||||
|
||||
|
||||
/* -------------------- Scrollbar -------------------- */
|
||||
.scrollbar::-webkit-scrollbar { width: 16px; }
|
||||
.scrollbar::-webkit-scrollbar-track { background-color: transparent; }
|
||||
.scrollbar::-webkit-scrollbar-thumb { background-color: gray; border-radius: 20px; border: 6px solid transparent; background-clip: content-box; min-height: 50px; }
|
||||
.scrollbar::-webkit-scrollbar-thumb:hover { background-color: var(--color1); }
|
||||
.scrollbar::-webkit-scrollbar-corner { background: transparent; }
|
||||
|
||||
|
||||
|
||||
/* -------------------- Progress -------------------- */
|
||||
.progress-wrap { display: flex; justify-content: center; align-items: center; position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
|
||||
.progress-wrap .progress-content { display: flex; flex-direction: column; align-items: center; font-family: 'Protest Riot'; font-size: 30px; }
|
||||
|
||||
.loader { display: inline-block; position: relative; width: 48px; height: 48px; }
|
||||
.loader::after, .loader::before { content: ''; position: absolute; left: 0; top: 0; width: 48px; height: 48px; border: 4px solid #FFF; box-sizing: border-box; animation: rotation 2s ease-in-out infinite; }
|
||||
.loader::after { border-color: var(--color1); animation-delay: 1s; }
|
||||
@keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
|
||||
|
||||
|
||||
|
||||
/* -------------------- Media query -------------------- */
|
||||
@media (max-width: 768px) {
|
||||
.left { display: none }
|
||||
.right { display: none }
|
||||
}
|
||||
Reference in New Issue
Block a user