1200 lines
24 KiB
CSS
1200 lines
24 KiB
CSS
@charset "utf-8";
|
|
@import url("https://fonts.googleapis.com/css2?family=Aldrich&display=swap");
|
|
@import url(/index/css/reset.css);
|
|
@import url(/index/css/system.css);
|
|
/* js를 위한 id값 ===== ===== ===== ===== ===== */
|
|
|
|
#mapContainer {
|
|
position: absolute;
|
|
width: 100dvw;
|
|
height: 100dvh;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
z-index: 0;
|
|
}
|
|
|
|
/* 라디오박스 스타일 변경 ===== ===== ===== ===== ===== */
|
|
input[type="radio"] {
|
|
display: none;
|
|
}
|
|
|
|
.radio-label {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
font-size: 0.75rem;
|
|
line-height: 1rem;
|
|
}
|
|
|
|
.radio-custom-inbox {
|
|
width: 0.75rem;
|
|
height: 0.75rem;
|
|
border: 0.0625rem solid #aaa;
|
|
border-radius: 50%;
|
|
display: inline-block;
|
|
position: relative;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.radio-label input[type="radio"]:checked+.radio-custom-inbox::before {
|
|
content: "";
|
|
width: 0.375rem;
|
|
height: 0.375rem;
|
|
background: #111;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
input[type="radio"]:checked~.radio-custom-inbox {
|
|
border-color: #aaa;
|
|
}
|
|
|
|
/* 스타일 시작 ===== ===== ===== ===== ===== */
|
|
|
|
.search-box {
|
|
background-color: #fff;
|
|
border-radius: 0.25rem;
|
|
border: 0.0625rem solid #ddd;
|
|
padding: 0.25rem 0.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.search-box input[type="text"]::placeholder {
|
|
font-size: 0.875rem;
|
|
font-weight: 300;
|
|
line-height: 1.25rem;
|
|
color: #aaa;
|
|
}
|
|
|
|
input[type="text"] {
|
|
font-size: 0.875rem;
|
|
font-weight: 300;
|
|
line-height: 1.25rem;
|
|
color: #111;
|
|
width: 100%;
|
|
}
|
|
|
|
input[type="text"]:focus {
|
|
outline: none;
|
|
border: none;
|
|
}
|
|
|
|
main {
|
|
padding: 0;
|
|
pointer-events: none;
|
|
display: flex;
|
|
height: calc(100dvh - 4.5rem);
|
|
width: 100%;
|
|
gap: 0.5rem;
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 2.25rem;
|
|
}
|
|
|
|
/* aside {
|
|
background-color: var(--primary-lv-0);
|
|
width: 20rem;
|
|
min-width: 20rem;
|
|
min-width: 20rem;
|
|
border-right: 0.0625rem solid var(--primary-lv-2);
|
|
height: calc(100dvh - 4.5rem);
|
|
max-height: calc(100dvh - 4.5rem);
|
|
min-height: calc(100dvh - 4.5rem);
|
|
pointer-events: all;
|
|
} */
|
|
|
|
.tabs {
|
|
display: flex;
|
|
}
|
|
|
|
.tab-btn {
|
|
width: 50%;
|
|
padding: 0.5rem 0;
|
|
background-color: #fff;
|
|
color: #111;
|
|
font-size: 0.875rem;
|
|
font-weight: 300;
|
|
line-height: 1.25rem;
|
|
cursor: pointer;
|
|
border-bottom: 0.0625rem solid var(--primary-lv-2);
|
|
}
|
|
|
|
.tab-btn.active {
|
|
background-color: var(--primary-lv-0);
|
|
color: var(--primary-lv-6);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
line-height: 1.25rem;
|
|
cursor: pointer;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.tab-content {
|
|
padding: 0.5rem 1rem;
|
|
height: calc(100dvh - 6.75rem);
|
|
max-height: calc(100dvh - 6.75rem);
|
|
min-height: calc(100dvh - 6.75rem);
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.list-set {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
padding: 0.5rem 0;
|
|
}
|
|
|
|
.list-set--title {
|
|
color: var(--primary-lv-6);
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding-top: 0.25rem;
|
|
}
|
|
|
|
.list-set--title h4 {
|
|
color: var(--primary-lv-3);
|
|
}
|
|
|
|
li {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.5rem;
|
|
cursor: pointer;
|
|
padding: 0.25rem;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
/* li h4 {
|
|
flex-grow: 1;
|
|
} */
|
|
|
|
li:hover {
|
|
background-color: var(--primary-lv-1);
|
|
transition: all 0.1s;
|
|
}
|
|
|
|
hr {
|
|
border: none;
|
|
border-top: 0.0625rem solid var(--primary-lv-2);
|
|
margin: 0;
|
|
}
|
|
|
|
.list-inner {
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
.list-inner li h4 {
|
|
width: 11rem;
|
|
/* overflow-wrap: break-word;
|
|
word-break: break-all; */
|
|
}
|
|
|
|
.category {
|
|
width: 2.5rem;
|
|
min-width: 2.5rem;
|
|
max-width: 2.5rem;
|
|
}
|
|
|
|
.project-name {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.modal-wrap {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
position: absolute;
|
|
top: 0.5rem;
|
|
right: 0.5rem
|
|
}
|
|
|
|
.window {
|
|
width: 7.75rem;
|
|
height: fit-content;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: 0.25rem;
|
|
border: 0.0625rem solid #aaa;
|
|
background-color: #fff;
|
|
pointer-events: all;
|
|
box-shadow: 0rem 0.5rem 1.5rem 0rem rgba(0, 0, 0, 0.16);
|
|
}
|
|
|
|
.window__bottom {
|
|
width: 10.75rem;
|
|
height: fit-content;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: 0.25rem;
|
|
border: 0.0625rem solid #aaa;
|
|
background-color: #fff;
|
|
pointer-events: all;
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
margin: 2.375rem 0.5rem;
|
|
box-shadow: 0rem 0.5rem 1.5rem 0rem rgba(0, 0, 0, 0.16);
|
|
}
|
|
|
|
._status {
|
|
width: 14.5rem;
|
|
display: block;
|
|
top: 0;
|
|
}
|
|
|
|
.window-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
cursor: pointer;
|
|
padding: 0.5rem 0.5rem 0.5rem 1rem;
|
|
}
|
|
|
|
.window-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
padding: 0 0.5rem 1rem;
|
|
}
|
|
|
|
.window-body-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
padding-left: 0.5rem;
|
|
}
|
|
|
|
/* 텍스트버튼디자인 */
|
|
.xs-btn-type-icon {
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
margin: 0.5rem;
|
|
pointer-events: all;
|
|
border-color: #111;
|
|
}
|
|
|
|
.xs-btn-type-icon.on {
|
|
background-color: var(--primary-lv-2);
|
|
}
|
|
|
|
.xs-btn-type-icon.on h6 {
|
|
font-weight: 500;
|
|
}
|
|
|
|
._top {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
margin: 0.5rem;
|
|
pointer-events: all;
|
|
border-color: #111;
|
|
}
|
|
|
|
.xs-btn-type-icon:hover {
|
|
background-color: var(--primary-lv-0);
|
|
}
|
|
|
|
.xs-btn-type-done {
|
|
background-color: #fff;
|
|
border-radius: 0.25rem;
|
|
border: 0.0625rem solid var(--color-green-medium);
|
|
padding: 0 0.25rem;
|
|
min-height: 1.25rem;
|
|
max-height: 1.25rem;
|
|
max-width: fit-content;
|
|
min-width: fit-content;
|
|
color: var(--color-green);
|
|
}
|
|
|
|
.xs-btn-type-active {
|
|
background-color: #fff;
|
|
border-radius: 0.25rem;
|
|
border: 0.0625rem solid var(--color-blue-medium);
|
|
padding: 0 0.25rem;
|
|
min-height: 1.25rem;
|
|
max-height: 1.25rem;
|
|
max-width: fit-content;
|
|
min-width: fit-content;
|
|
color: var(--color-blue);
|
|
}
|
|
|
|
.xs-btn-type-stop {
|
|
background-color: #fff;
|
|
border-radius: 0.25rem;
|
|
border: 0.0625rem solid var(--color-steel-medium);
|
|
padding: 0 0.25rem;
|
|
min-height: 1.25rem;
|
|
max-height: 1.25rem;
|
|
max-width: fit-content;
|
|
min-width: fit-content;
|
|
color: var(--color-steel);
|
|
}
|
|
|
|
.xs-btn-type-bid {
|
|
background-color: #fff;
|
|
border-radius: 0.25rem;
|
|
border: 0.0625rem solid var(--color-magenta-medium);
|
|
padding: 0 0.25rem;
|
|
min-height: 1.25rem;
|
|
max-height: 1.25rem;
|
|
max-width: fit-content;
|
|
min-width: fit-content;
|
|
color: var(--color-magenta);
|
|
}
|
|
|
|
.xs-btn-type-support {
|
|
background-color: #fff;
|
|
border-radius: 0.25rem;
|
|
border: 0.0625rem solid var(--color-yellow-medium);
|
|
padding: 0 0.25rem;
|
|
min-height: 1.25rem;
|
|
max-height: 1.25rem;
|
|
max-width: fit-content;
|
|
min-width: fit-content;
|
|
color: var(--color-yellow);
|
|
}
|
|
|
|
/* overseas용 */
|
|
.xs-btn-type-아시아 {
|
|
background-color: #fff;
|
|
border-radius: 0.25rem;
|
|
border: 0.0625rem solid var(--color-green-medium);
|
|
padding: 0 0.25rem;
|
|
min-height: 1.25rem;
|
|
max-height: 1.25rem;
|
|
max-width: fit-content;
|
|
min-width: fit-content;
|
|
color: var(--color-green);
|
|
}
|
|
|
|
.xs-btn-type-아프리카 {
|
|
background-color: #fff;
|
|
border-radius: 0.25rem;
|
|
border: 0.0625rem solid var(--color-blue-medium);
|
|
padding: 0 0.25rem;
|
|
min-height: 1.25rem;
|
|
max-height: 1.25rem;
|
|
max-width: fit-content;
|
|
min-width: fit-content;
|
|
color: var(--color-blue);
|
|
}
|
|
|
|
.xs-btn-type-남아메리카 {
|
|
background-color: #fff;
|
|
border-radius: 0.25rem;
|
|
border: 0.0625rem solid var(--color-steel-medium);
|
|
padding: 0 0.25rem;
|
|
min-height: 1.25rem;
|
|
max-height: 1.25rem;
|
|
max-width: fit-content;
|
|
min-width: fit-content;
|
|
color: var(--color-steel);
|
|
}
|
|
|
|
.xs-btn-type-북아메리카 {
|
|
background-color: #fff;
|
|
border-radius: 0.25rem;
|
|
border: 0.0625rem solid var(--color-magenta-medium);
|
|
padding: 0 0.25rem;
|
|
min-height: 1.25rem;
|
|
max-height: 1.25rem;
|
|
max-width: fit-content;
|
|
min-width: fit-content;
|
|
color: var(--color-magenta);
|
|
}
|
|
|
|
/* overseas용 end*/
|
|
|
|
.logout-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.25rem;
|
|
padding: 0 0.25rem;
|
|
border-radius: 0.25rem;
|
|
margin-left: auto;
|
|
position: absolute;
|
|
right: 9.75rem;
|
|
border: 0.0625rem solid #ddd;
|
|
background-color: #fff;
|
|
color: #111;
|
|
min-height: 1.25rem;
|
|
max-height: 1.25rem;
|
|
}
|
|
|
|
.logout-btn:hover {
|
|
background-color: var(--primary-lv-0);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.custom-checkbox {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.custom-checkbox input {
|
|
display: none;
|
|
}
|
|
|
|
.custom-checkbox .checkmark {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border: 0.0625rem solid #ddd;
|
|
border-radius: 0.25rem;
|
|
margin-right: 0.5rem;
|
|
position: relative;
|
|
}
|
|
|
|
.custom-checkbox input:checked+.checkmark::after {
|
|
display: block;
|
|
z-index: 999;
|
|
content: '';
|
|
position: absolute;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
background-image: url('/index/img-onpremise/icon__checked--primary-lv-6.svg');
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
|
|
|
|
/* 텍스트라벨디자인 */
|
|
/* .point { text-align: center; pointer-events: all; height: fit-content; }
|
|
.point-title::before { content: ""; position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); width: 20px; height: 14px; background: black; clip-path: polygon(50% 100%, 0 0, 100% 0); border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; z-index: 0; }
|
|
.point-title::after { content: ""; position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); width: 18px; height: 12px; background: white; clip-path: polygon(50% 100%, 0 0, 100% 0); border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; z-index: 1; }
|
|
.point-title { display: flex; gap: var(--box-gap); border: 0.063rem solid var(--type-lv2-body); background: white; padding: var(--box-gap) var(--box-gap-hz) var(--box-gap) var(--box-gap); border-radius: var(--border-radius); width: max-content; position: relative; box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.2); } */
|
|
|
|
/* 스크롤바 ===== ===== ===== ===== ===== */
|
|
.--scrollbar::-webkit-scrollbar {
|
|
width: 0.5rem;
|
|
}
|
|
|
|
.--scrollbar::-webkit-scrollbar-track {
|
|
background: transparent
|
|
}
|
|
|
|
.--scrollbar::-webkit-scrollbar-thumb {
|
|
background-color: #aaa;
|
|
border: 0.125rem solid transparent;
|
|
border-radius: 0.25rem;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
.--scrollbar::-webkit-scrollbar-thumb:hover {
|
|
background-color: #777;
|
|
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: #1E5149;
|
|
width: 100dvw;
|
|
min-height: 2.25rem;
|
|
max-height: 2.25rem;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 1rem;
|
|
color: #fff;
|
|
position: absolute;
|
|
z-index: 3;
|
|
top: 0;
|
|
pointer-events: all;
|
|
gap: 0.825rem;
|
|
}
|
|
|
|
|
|
.--logo__project-master {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
cursor: pointer;
|
|
font-family: "Aldrich";
|
|
color: #fff;
|
|
}
|
|
|
|
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;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.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: #fff;
|
|
width: 100dvw;
|
|
min-height: 2.25rem;
|
|
max-height: 2.25rem;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 1rem;
|
|
color: #777;
|
|
position: absolute;
|
|
z-index: 3;
|
|
bottom: 0;
|
|
pointer-events: all;
|
|
border-top: 0.0625rem solid #ddd;
|
|
box-shadow: 0rem 0.5rem 1.5rem 0rem rgba(0, 0, 0, 0.16);
|
|
}
|
|
|
|
footer p,
|
|
footer h5 {
|
|
color: #777;
|
|
}
|
|
|
|
.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: #777;
|
|
}
|
|
|
|
#scalebar_wrap {
|
|
justify-content: left !important;
|
|
height: 0.25rem;
|
|
background-color: #ccc;
|
|
opacity: 0.6;
|
|
border-radius: 0.25rem;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
#scalebar {
|
|
height: 0.25rem;
|
|
background-color: #777;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.footer_indicator_latitude,
|
|
.footer_indicator_longitude {
|
|
display: block;
|
|
/* text-align: right; */
|
|
min-width: 7.5rem;
|
|
max-width: 7.5rem;
|
|
width: 7.5rem;
|
|
/* letter-spacing: 1px; */
|
|
}
|
|
|
|
.footer_indicator_coord-sys {
|
|
display: block;
|
|
text-align: right;
|
|
min-width: 3rem;
|
|
max-width: 3rem;
|
|
width: 3rem;
|
|
}
|
|
|
|
.footer_indicator_scale {
|
|
display: block;
|
|
text-align: right;
|
|
min-width: 3.25rem;
|
|
max-width: 3.25rem;
|
|
width: 3.25rem;
|
|
/* letter-spacing: 1px; */
|
|
}
|
|
|
|
.footer_indicator_gpu-memory {
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
.icon {
|
|
height: 1rem;
|
|
}
|
|
|
|
.header-icon {
|
|
height: 2.25rem;
|
|
}
|
|
|
|
.step-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.step-wrap .step-desc {
|
|
font-size: 0.75rem;
|
|
color: #777;
|
|
}
|
|
|
|
@media screen and (max-width:960px) {
|
|
.footer-right {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
|
|
/* 좌측 에이사이드 ===== ===== ===== ===== ===== */
|
|
.list {
|
|
position: fixed;
|
|
z-index: 1;
|
|
pointer-events: all;
|
|
/* background-color: var(--primary-lv-0, #E9EEED); */
|
|
/* border-right: 0.0625rem solid var(--primary-lv-2, #A5B9B6); */
|
|
width: 25rem;
|
|
/* height: calc(100dvh - 5.5rem); */
|
|
top: 2.75rem;
|
|
left: 0.5rem;
|
|
background-color: #fff;
|
|
border: 0.0625rem solid #aaa;
|
|
border-radius: 0.25rem;
|
|
box-shadow: 0rem 0.5rem 1.5rem 0rem rgba(0, 0, 0, 0.16);
|
|
}
|
|
|
|
.list__tabs {
|
|
display: none;
|
|
}
|
|
|
|
.list__tabs_button {
|
|
width: 50%;
|
|
padding: 0.5rem 0;
|
|
background-color: #fff;
|
|
color: #111;
|
|
font-size: 0.875rem;
|
|
font-weight: 300;
|
|
line-height: 1.25rem;
|
|
cursor: pointer;
|
|
border-bottom: 0.0625rem solid var(--primary-lv-2, #A5B9B6);
|
|
}
|
|
|
|
.list__contents_search-box {
|
|
margin: 0.5rem 0.5rem 0 0.5rem;
|
|
padding: 0.25rem 0.5rem;
|
|
background-color: #fff;
|
|
border-radius: 0.25rem;
|
|
border: 0.0625rem solid #ddd;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.list__contents_search-box_icon {
|
|
background: url(/index/img-onpremise/icon__search--111.svg) no-repeat center / contain;
|
|
}
|
|
|
|
.list__contents_search-box_input {
|
|
width: 100%;
|
|
font-size: 0.875rem;
|
|
font-weight: 300;
|
|
line-height: 1.25rem;
|
|
letter-spacing: -0.0175rem;
|
|
}
|
|
|
|
.list__contents_search-box_input:focus {
|
|
outline: none;
|
|
border: none;
|
|
}
|
|
|
|
.list__contents_aria {
|
|
overflow-y: scroll;
|
|
padding-left: 0.5rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: calc(100dvh - 8rem);
|
|
}
|
|
|
|
.list__contents_aria_group {
|
|
padding: 0.5rem 0;
|
|
border-bottom: 0.0625rem solid #ddd;
|
|
}
|
|
|
|
.list__contents_aria_group_head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.list__contents_aria_group_head:hover {
|
|
background-color: var(--primary-lv-0);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.list__contents_aria_group_head_icon {
|
|
background: url(/index/img-overseas/icon__arrow-down--111.svg) no-repeat center / contain;
|
|
}
|
|
|
|
.list__contents_aria_group_head_label {
|
|
color: #111;
|
|
}
|
|
|
|
.list__contents_aria_group_head_count {
|
|
color: #777;
|
|
}
|
|
|
|
.list__contents_aria_group_body {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
padding-left: 0.5rem;
|
|
}
|
|
|
|
.list__contents_aria_group_body_category {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.5rem;
|
|
padding-top: 0.3125rem;
|
|
min-width: 6.5rem;
|
|
max-width: 6.5rem;
|
|
}
|
|
|
|
.list__contents_aria_group_body_category_label {
|
|
word-break: break-all;
|
|
}
|
|
|
|
.list__contents_aria_group_body_category_icon {
|
|
background: url(/index/img-overseas/icon__bullet--ddd.svg) no-repeat center / contain;
|
|
}
|
|
|
|
.list__contents_aria_group_body_list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.list__contents_aria_group_body_list_item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 0.5rem;
|
|
padding: 0.25rem 0.5rem;
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.list__contents_aria_group_body_list_item:hover {
|
|
background-color: var(--primary-lv-0);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.list__contents_aria_group_body_list_item_type {
|
|
min-width: 1.875rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.list__contents_aria_group_body_list_item_label {
|
|
flex-grow: 1;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.list__contents_aria_group_body_list_item_status {
|
|
min-width: 1.5rem;
|
|
}
|
|
|
|
.list__contents_aria_group_body_list_item_bookmark {
|
|
margin-top: 0.1875rem;
|
|
background: url(/index/img-onpremise/icon-bookmark-none.svg) no-repeat center / contain;
|
|
display: none;
|
|
}
|
|
|
|
.list__contents_aria_group_body_list_item_manager{
|
|
min-width: 2rem;
|
|
text-align: center;
|
|
}
|
|
|
|
/* //좌측 에이사이드 ===== ===== ===== ===== ===== */
|
|
|
|
/* 컴포넌트 ===== ===== ===== ===== ===== */
|
|
.--icon {
|
|
min-width: 1rem;
|
|
min-height: 1rem;
|
|
}
|
|
|
|
.--tab__active {
|
|
background-color: var(--primary-lv-0, #E9EEED);
|
|
color: var(--primary-lv-6, #1E5149);
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
line-height: 1.25rem;
|
|
cursor: pointer;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.--status__step-active {
|
|
color: var(--color-red);
|
|
font-size: 0.875rem;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.--status__step-stop {
|
|
color: var(--color-cyan);
|
|
font-size: 0.875rem;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.--status__step-done {
|
|
color: var(--color-steel);
|
|
font-size: 0.875rem;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.--status__step-wait {
|
|
color: var(--color-green);
|
|
font-size: 0.875rem;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.--off {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.--bookmark__check {
|
|
background: url(/index/img-onpremise/icon-bookmark-select.svg) no-repeat center / contain !important;
|
|
}
|
|
|
|
details[open] summary .--icon {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/* // 컴포넌트 ===== ===== ===== ===== ===== */
|
|
/* */
|
|
/* */
|
|
/* */
|
|
/* */
|
|
/* */
|
|
/* */
|
|
/* 그 외 ===== ===== ===== ===== ===== */
|
|
._top {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
margin: 0.5rem;
|
|
pointer-events: all;
|
|
border-color: #111;
|
|
}
|
|
|
|
.xs-btn-type-icon {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
border-radius: 0.25rem;
|
|
border: 0.0625rem solid #aaa;
|
|
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;
|
|
}
|
|
|
|
.icon {
|
|
height: 1rem;
|
|
}
|
|
|
|
.custom-checkbox {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.custom-checkbox input {
|
|
display: none;
|
|
}
|
|
|
|
.custom-checkbox .checkmark {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
border: 0.0625rem solid #ddd;
|
|
border-radius: 0.25rem;
|
|
margin-right: 0.5rem;
|
|
position: relative;
|
|
}
|
|
|
|
.custom-checkbox input:checked+.checkmark::after {
|
|
display: block;
|
|
z-index: 999;
|
|
content: '';
|
|
position: absolute;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
background-image: url('/index/img-onpremise/icon__checked--primary-lv-6.svg');
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
|
|
._status {
|
|
width: 13.125rem;
|
|
}
|
|
|
|
.window-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0.5rem 0.5rem 0.5rem 1rem;
|
|
}
|
|
|
|
.window-header>img {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.window-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
padding: 0.5rem 0.5rem 1rem;
|
|
}
|
|
|
|
.window-body-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.5rem;
|
|
padding-left: 0.5rem;
|
|
}
|
|
|
|
.step-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.step-desc {
|
|
font-size: 0.75rem;
|
|
font-weight: 300;
|
|
line-height: 1.25rem;
|
|
letter-spacing: -0.0175rem;
|
|
color: #777;
|
|
}
|
|
|
|
.window-subtitle {
|
|
padding-top: 0.5rem;
|
|
}
|
|
|
|
.--MP, .--DD, .--FS, .--PD, .--DS, .--CS, .--PMC, .--IDC, .--DR, .--ETC, .--BD {
|
|
color: #111;
|
|
min-width: 1.875rem;
|
|
max-width: 1.875rem;
|
|
min-height: 1.25rem;
|
|
max-height: 1.25rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 300;
|
|
}
|
|
|
|
.--logo__project-master_version {
|
|
color: #fff;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
#type-modal {
|
|
width: 13.125rem;
|
|
}
|