489 lines
9.6 KiB
CSS
489 lines
9.6 KiB
CSS
@charset "utf-8";
|
|
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard.css");
|
|
|
|
/* Copyright Ⓒ Hanmaceng Corp. All Rights Reserved. */
|
|
/* 기술개발센터 김건우A 연구원 b25013@hanmaceng.co.kr */
|
|
|
|
/* 버전 히스토리 */
|
|
/* 2025-03-17 : -- root.css 정의 */
|
|
/* 2025-03-19 : -- "root.css" → "system.css" 으로 이름 변경 */
|
|
/* 2025-03-20 : -- '컴포넌트 정의'부분 수정 */
|
|
/* 2025-03-20 : -- 'header'부분 수정 */
|
|
/* 2025-03-20 : -- '컴포넌트 정의' - 스크롤바 추가 */
|
|
/* 2025-03-25 : -- 'header'부분 수정 */
|
|
/* 2025-03-28 : -- '프라이머리컬러스케일' 추가 */
|
|
/* 2025-03-28 : -- 'header', 'footer' 리뉴얼 */
|
|
/* 2025-03-31 : -- 'main'부분 수정 */
|
|
/* 2025-03-31 : -- 'h2'정의 추가 */
|
|
/* 2025-04-15 : -- 전면 리뉴얼 */
|
|
|
|
/* -- ↓ -- style -- ↓ -- */
|
|
|
|
/* 색상 및 시스템 정의 ===== ===== ===== ===== ===== */
|
|
: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-lv-0: #E9EEED;
|
|
--primary-lv-1: #D2DCDB;
|
|
--primary-lv-2: #A5B9B6;
|
|
--primary-lv-3: #789792;
|
|
--primary-lv-4: #4B746D;
|
|
--primary-lv-5: #35635C;
|
|
--primary-lv-6: #1E5149;
|
|
--primary-lv-7: #1B443D;
|
|
--primary-lv-8: #193833;
|
|
--primary-lv-9: #162A27;
|
|
}
|
|
|
|
|
|
/* 컴포넌트 정의 ===== ===== ===== ===== ===== */
|
|
/* 폰트 고정값 */
|
|
|
|
html {
|
|
/* font-size: clamp(0rem, 0.8dvw, 1.125rem) !important; */
|
|
font-size: 0.8333333dvw;
|
|
}
|
|
|
|
main {
|
|
display: flex;
|
|
height: calc(100dvh - 4.5rem);
|
|
width: 100%;
|
|
padding: 0.5rem;
|
|
gap: 0.5rem;
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 2.25rem;
|
|
/* overflow-y: auto; */
|
|
}
|
|
|
|
/* 가로 해상도 320px일때 */
|
|
@media screen and (max-width:320px) {
|
|
main {
|
|
display: none !important;
|
|
}
|
|
}
|
|
|
|
body {
|
|
font-family: 'Pretendard';
|
|
color: #111;
|
|
}
|
|
|
|
/* 한줄 강조 emphasize-20px */
|
|
h1 {
|
|
font-size: 1.25rem;
|
|
font-weight: 700;
|
|
line-height: 1.25rem;
|
|
letter-spacing: -0.0175rem;
|
|
}
|
|
|
|
/* 프로젝트 제목 project-title-16px */
|
|
h2 {
|
|
font-size: 1rem;
|
|
font-weight: 500;
|
|
line-height: 1.25rem;
|
|
letter-spacing: -0.0175rem;
|
|
}
|
|
|
|
/* 본문 제목 title-14px */
|
|
h3 {
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
line-height: 1.25rem;
|
|
letter-spacing: -0.0175rem;
|
|
}
|
|
|
|
/* 본문 body-14px */
|
|
h4 {
|
|
font-size: 0.875rem;
|
|
font-weight: 300;
|
|
line-height: 1.25rem;
|
|
letter-spacing: -0.0175rem;
|
|
}
|
|
|
|
/* 알약형 capsule-12px */
|
|
h5 {
|
|
font-size: 0.75rem;
|
|
font-weight: 500;
|
|
line-height: 1.25rem;
|
|
letter-spacing: -0.0175rem;
|
|
}
|
|
|
|
/* 소본문 body-12px */
|
|
h6 {
|
|
font-size: 0.75rem;
|
|
font-weight: 300;
|
|
line-height: 1.25rem;
|
|
letter-spacing: -0.0175rem;
|
|
}
|
|
|
|
/* 주석 caption */
|
|
p {
|
|
font-size: 0.75rem;
|
|
font-weight: 300;
|
|
line-height: 1.25rem;
|
|
letter-spacing: -0.0175rem;
|
|
|
|
color: #777;
|
|
}
|
|
|
|
/* 파란색강조 */
|
|
.type-em-blue {
|
|
color: var(--color-blue) !important;
|
|
font-weight: 500 !important;
|
|
}
|
|
|
|
/* 빨간색강조 */
|
|
.type-em-red {
|
|
color: var(--color-dahong) !important;
|
|
font-weight: 500 !important;
|
|
}
|
|
|
|
/* 플레이스홀더 */
|
|
.type-placeholder {
|
|
color: #aaa;
|
|
}
|
|
|
|
/* 스크롤바 */
|
|
::-webkit-scrollbar {
|
|
width: 0.25rem;
|
|
height: 0.25rem;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: #eee;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: #aaa;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #aaa;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 아이콘타입 버튼 */
|
|
.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;
|
|
}
|
|
|
|
/* 텍스트타입 버튼 */
|
|
.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;
|
|
}
|
|
|
|
/* 아이콘+텍스트타입 버튼 */
|
|
.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;
|
|
}
|
|
|
|
/* 아이콘+텍스트타입 버튼 */
|
|
.xs-btn-type-icon-header {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: var(--primary-lv-5);
|
|
border-radius: 0.25rem;
|
|
border: 0.0625rem solid var(--primary-lv-4);
|
|
padding: 0 0.25rem 0 0.125rem;
|
|
color: #fff;
|
|
gap: 0.125rem;
|
|
min-height: 1.25rem;
|
|
max-height: 1.25rem;
|
|
max-width: fit-content;
|
|
min-width: fit-content;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.xs-btn-type-icon-header:hover {
|
|
background-color: var(--primary-lv-4);
|
|
}
|
|
|
|
|
|
|
|
/* header.css 정의 ===== ===== ===== ===== ===== */
|
|
header {
|
|
background-color: var(--primary-lv-6);
|
|
width: 100dvw;
|
|
min-height: 2.25rem;
|
|
max-height: 2.25rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 1rem;
|
|
color: #fff;
|
|
position: absolute;
|
|
z-index: 3;
|
|
top: 0;
|
|
pointer-events: all;
|
|
}
|
|
|
|
header h4 {
|
|
color: var(--primary-lv-3);
|
|
}
|
|
|
|
header a {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 2rem;
|
|
}
|
|
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.end {
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
.header-left h6 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.header-right h4 {
|
|
color: var(--primary-lv-3);
|
|
}
|
|
|
|
.header-right {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
max-width: fit-content;
|
|
min-width: fit-content;
|
|
margin-left: 0.25rem;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
|
|
.header-name {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.header-name::before {
|
|
content: "";
|
|
width: 0.0625rem;
|
|
height: 0.75rem;
|
|
background-color: var(--primary-lv-2);
|
|
opacity: 0.4;
|
|
margin-right: 0.75rem;
|
|
}
|
|
|
|
.header-others {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.header-permission {
|
|
display: flex;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.header-btn-admin {
|
|
display: flex;
|
|
gap: 0.125rem;
|
|
background-color: rgba(0, 0, 0, 0);
|
|
color: var(--primary-lv-3);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.header-btn-logout {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
color: var(--primary-lv-3);
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
img[alt="hambuger"] {
|
|
display: none;
|
|
}
|
|
|
|
.header-others-number {
|
|
display: none;
|
|
}
|
|
|
|
|
|
/* footer.css 정의 ===== ===== ===== ===== ===== */
|
|
footer {
|
|
background-color: #111;
|
|
width: 100dvw;
|
|
min-height: 2.25rem;
|
|
max-height: 2.25rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 1rem;
|
|
color: #aaa;
|
|
position: absolute;
|
|
z-index: 3;
|
|
bottom: 0;
|
|
pointer-events: all;
|
|
}
|
|
|
|
footer p,
|
|
footer h5 {
|
|
color: #aaa;
|
|
}
|
|
|
|
.footer-left {
|
|
display: flex;
|
|
align-items: center;
|
|
/* gap: 0.125rem; */
|
|
}
|
|
|
|
.footer-left a p {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.footer-middle {
|
|
display: flex;
|
|
align-items: center;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
footer button {
|
|
background-color: rgba(0, 0, 0, 0);
|
|
}
|
|
|
|
footer button p {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.coordinate {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.getComponent {
|
|
margin-left: 0.25rem;
|
|
}
|
|
|
|
.footer-section {
|
|
margin-left: 2rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.footer-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.footer-gauge {
|
|
max-width: 6.25rem;
|
|
min-width: 6.25rem;
|
|
max-height: 0.25rem;
|
|
min-height: 0.25rem;
|
|
border-radius: 0.25rem;
|
|
background-color: rgba(119, 119, 119, 0.2);
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
.footer-left span {
|
|
font-size: 0.75rem;
|
|
line-height: 1.25rem;
|
|
color: #aaa;
|
|
}
|
|
|
|
#scalebar_wrap {
|
|
justify-content: left !important;
|
|
height: 0.25rem;
|
|
background-color: #666;
|
|
opacity: 0.6;
|
|
border-radius: 0.25rem;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
#scalebar {
|
|
height: 0.25rem;
|
|
background-color: #fff;
|
|
border-radius: 0.25rem;
|
|
|
|
} |