css수정(기본적으로 xit-web-res 내부 CSS 사용하고, 필요에 따라 스타일 덮어쓰기)
parent
00638009e4
commit
465ddfb6c7
@ -0,0 +1,202 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/** 앱 공통 */
|
||||
|
||||
input[type=text]:disabled,
|
||||
input[type=text]:read-only {
|
||||
background-color: #eceef1;
|
||||
}
|
||||
|
||||
input[data-fmt-type=number] {
|
||||
text-align: right;
|
||||
padding-right: 10px;
|
||||
}
|
||||
/* 셀내용에 관계없이 셀 너비 고정 */
|
||||
.table-layout-fixed {
|
||||
table-layout: fixed;
|
||||
padding-right : 10px;
|
||||
}
|
||||
|
||||
.dummy-th {
|
||||
width:auto;
|
||||
background-color: #ECEEF1!important;
|
||||
}
|
||||
.dummy-td {
|
||||
background-color: #ECEEF1;
|
||||
}
|
||||
|
||||
/* 스크롤 시에도 그리드 타이틀 표시 */
|
||||
.sticky-thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
table:has(.sticky-thead) {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
table:has(.sticky-thead) th,
|
||||
table:has(.sticky-thead) td {
|
||||
border-width: 1px;
|
||||
border-color: #d9dee3;
|
||||
}
|
||||
|
||||
|
||||
/** 텍스트,배경,선 색상 추가 */
|
||||
|
||||
.text-red {
|
||||
--bs-text-opacity: 1;
|
||||
color: red !important;
|
||||
}
|
||||
|
||||
.text-orange {
|
||||
--bs-text-opacity: 1;
|
||||
color: orange !important;
|
||||
}
|
||||
|
||||
.bg-bordergray {
|
||||
background-color: #D9DEE3;
|
||||
}
|
||||
|
||||
.bg-orange {
|
||||
--bs-bg-opacity: 1;
|
||||
background-color: orange !important;
|
||||
}
|
||||
|
||||
.bg-yellow {
|
||||
--bs-bg-opacity: 1;
|
||||
background-color: yellow !important;
|
||||
}
|
||||
|
||||
.bg-green {
|
||||
--bs-bg-opacity: 1;
|
||||
background-color: green !important;
|
||||
}
|
||||
|
||||
.bg-yellowgreen {
|
||||
--bs-bg-opacity: 1;
|
||||
background-color: yellowgreen !important;
|
||||
}
|
||||
|
||||
.border-card {
|
||||
border: 1px solid #d9dee3;
|
||||
}
|
||||
|
||||
/** 루트 탭 */
|
||||
#main-tab-content {
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
|
||||
/* 조회조건 영역 */
|
||||
.container-search {
|
||||
clear: both;
|
||||
position: relative;
|
||||
padding: 10px 15px;
|
||||
background-color: var(--bs-nav-link-color);
|
||||
border: 1px solid #d0d0d0;
|
||||
box-shadow: rgb(0 0 0 / 15%) 1.95px 1.95px 2.6px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.container-search-detail {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.form-search-title {
|
||||
display: inline-block;
|
||||
min-width: 6.25rem;
|
||||
}
|
||||
|
||||
.form-search-linebox {
|
||||
display: inline-block;
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
/* 날짜입력 */
|
||||
.form-date, .form-time {
|
||||
width: 7.5rem;
|
||||
color: #515151;
|
||||
border: 1px solid #a9a9a9;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/* 버튼영역 */
|
||||
.container-page-btn {
|
||||
min-height : 30px;
|
||||
margin:8px 0;
|
||||
clear: both;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.container-page-btn .btn{
|
||||
margin:0 3px;
|
||||
}
|
||||
|
||||
.container-window-btn-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
column-gap: 3px;
|
||||
}
|
||||
|
||||
.btns .btn {
|
||||
margin:0 3px;
|
||||
}
|
||||
|
||||
/* 버튼 추가 */
|
||||
.btn-search {
|
||||
--bs-btn-color: #fff;
|
||||
--bs-btn-bg: #44539e;
|
||||
|
||||
--bs-btn-hover-color: #fff;
|
||||
--bs-btn-hover-bg:#44539e;
|
||||
}
|
||||
|
||||
.btn-excel {
|
||||
--bs-btn-color: #fff;
|
||||
--bs-btn-bg: #217346;
|
||||
|
||||
--bs-btn-hover-color: #fff;
|
||||
--bs-btn-hover-bg:#217346;
|
||||
}
|
||||
|
||||
.btn-open-detail {
|
||||
--bs-btn-color: #fff;
|
||||
--bs-btn-bg: #44539e;
|
||||
|
||||
--bs-btn-hover-color: #fff;
|
||||
--bs-btn-hover-bg:#44539e;
|
||||
|
||||
float:right;
|
||||
}
|
||||
|
||||
|
||||
.resize-handle {
|
||||
position: absolute;
|
||||
top: 0; width: 7px; height: 40px;
|
||||
background: transparent;
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ox-auto {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.oy-auto {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.ox-scroll {
|
||||
overflow-x: scroll;
|
||||
}
|
||||
|
||||
.oy-scroll {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
@ -0,0 +1,313 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
/** 스타일 재정의 */
|
||||
|
||||
/** 컨테이너 사이즈 */
|
||||
@media (min-width: 1400px) {
|
||||
.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
|
||||
max-width: 1600px;
|
||||
}
|
||||
}
|
||||
|
||||
/** 기본 폰트,버튼 배경 */
|
||||
:root{
|
||||
--bs-font-sans-serif: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||
--bs-root-font-size: 14px;
|
||||
--bs-body-font-size: 14px; /* body 폰트사이즈 */
|
||||
--bs-body-bg: #ffffff;
|
||||
--bs-btn-hover-bg : #eee;
|
||||
--bs-btn-active-bg : #d2d2d2;
|
||||
--bs-btn-disabled-bg : #676767;
|
||||
}
|
||||
|
||||
/** 버튼 폰트,패딩,높이,색상 */
|
||||
.btn {
|
||||
--bs-btn-font-family: "Public Sans";
|
||||
--bs-btn-padding-x: 0.9375rem;
|
||||
--bs-btn-padding-y: 0.9375rem;
|
||||
--bs-btn-font-size: 1rem;
|
||||
--bs-btn-height: var(--bs-btn-font-size);
|
||||
--bs-btn-font-weight: 600;
|
||||
--bs-btn-line-height: 1.875rem;
|
||||
--bs-btn-hover-bg: #eee;
|
||||
}
|
||||
|
||||
.btn-xl, .btn-group-xl > .btn {
|
||||
--bs-btn-font-size: 1.25rem;
|
||||
--bs-btn-padding-x: 2.125rem;
|
||||
--bs-btn-padding-y: 1.25rem;
|
||||
--bs-btn-border-radius: 0.625rem;
|
||||
}
|
||||
|
||||
/** 카드 */
|
||||
.card {
|
||||
--bs-card-title-spacer-y: 0.175rem;
|
||||
--bs-card-border-width: 1px;
|
||||
--bs-card-body-border-width: 0;
|
||||
--bs-card-box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
|
||||
--bs-card-cap-padding-y: 0.75rem;
|
||||
--bs-card-cap-padding-x: 0.75rem;
|
||||
}
|
||||
|
||||
/** 모달 해더 패딩 */
|
||||
.modal {
|
||||
--bs-modal-header-padding: 0.5rem 1.5rem 0.25rem;
|
||||
}
|
||||
|
||||
/** 네비게이션 링크 폰트 크기,굵기*/
|
||||
.nav {
|
||||
--bs-nav-link-font-size: 1rem;
|
||||
--bs-nav-link-font-weight: 600;
|
||||
}
|
||||
|
||||
/** 모달 닫기 버튼 */
|
||||
.modal .modal-header .btn-close {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.modal-header .btn-close {
|
||||
margin-top: 0;
|
||||
margin-right: calc(-0.5* var(--bs-modal-header-padding-x));
|
||||
margin-bottom: calc(-0.5* var(--bs-modal-header-padding-y));
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
/** 모달 마진 */
|
||||
.modal-dialog:not(.modal-dialog-centered) {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
/** 카드 헤더 */
|
||||
.card-header {
|
||||
border-bottom: var(--bs-card-body-border-width) solid var(--bs-card-border-color);
|
||||
}
|
||||
|
||||
/** 내비게이션 탭 */
|
||||
.nav-tabs {
|
||||
--bs-nav-tabs-border-radius: 0rem;
|
||||
--bs-nav-tabs-link-border-radius: 0.375rem;
|
||||
--bs-nav-tabs-bg-image: none;
|
||||
--bs-nav-tabs-padding-top: 0rem;
|
||||
--bs-nav-tabs-padding-left: 0rem;
|
||||
padding-top: var(--bs-nav-tabs-padding-top);
|
||||
padding-left: var(--bs-nav-tabs-padding-left);
|
||||
border-radius: var(--bs-nav-tabs-border-radius);
|
||||
}
|
||||
|
||||
/** 내비게이션 아이템 */
|
||||
ul.nav-tabs > li.nav-item {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/** 내비게이션 링크 */
|
||||
.nav-link {
|
||||
height: 1.875rem
|
||||
}
|
||||
|
||||
.nav-tabs .nav-item .nav-link {
|
||||
border: 1px solid #d9dee3;
|
||||
}
|
||||
|
||||
.menu-vertical .menu-item .menu-link {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/** 메뉴 링크 */
|
||||
.bg-menu-theme .menu-sub > .menu-item > .menu-link:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
ol > li::marker {
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
/** 내비게이션 링크 */
|
||||
.nav-align-top .nav-tabs .nav-item .nav-link.active, .nav-align-top .nav-tabs .nav-item .nav-link:active {
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-item .nav-link.active, .nav-tabs .nav-item .nav-link:active {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
/** 폼 컨트롤 길이 */
|
||||
.form-control {
|
||||
width: initial;
|
||||
}
|
||||
|
||||
/** 레이아웃 네비게이션바 */
|
||||
.layout-navbar {
|
||||
height: 4rem;
|
||||
color : #000000;
|
||||
}
|
||||
|
||||
/** 라벨 폰트사이즈 */
|
||||
.form-label, .col-form-label {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
/** 모달 닫기 버튼 */
|
||||
.modal .modal-header .btn-close {
|
||||
border: 1px solid black !important;
|
||||
}
|
||||
|
||||
|
||||
/** 버튼 */
|
||||
.btn {
|
||||
min-width: max-content;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.btn-outline-dark {
|
||||
background: white;
|
||||
}
|
||||
|
||||
/** 체크박스,라디오 */
|
||||
.custom-option-basic .custom-option-content {
|
||||
padding: 0.2rem;
|
||||
}
|
||||
|
||||
/** 레이아웃 네비게이션바 컨테이너 */
|
||||
.layout-navbar.navbar-detached.container-xxl {
|
||||
max-width: 1600px;
|
||||
}
|
||||
|
||||
/** 굵은 글씨 */
|
||||
b,
|
||||
strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
|
||||
/** 폼컨트롤 폰트크기,패딩,디스플레이 */
|
||||
.form-control {
|
||||
font-size: 1rem;
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.625rem;
|
||||
}
|
||||
|
||||
/** 폼셀렉트 */
|
||||
.form-select {
|
||||
display: inline-block;
|
||||
color: #515151;
|
||||
font-size: 1rem;
|
||||
padding-top: 0.25rem;
|
||||
padding-bottom: 0.25rem;
|
||||
padding-left: 0.625rem;
|
||||
padding-right: 1.25rem;
|
||||
background-position: right 0.25rem center;
|
||||
width: max-content;
|
||||
min-width: 6.25rem;
|
||||
max-width: 16.25rem;
|
||||
}
|
||||
|
||||
/** 테이블 */
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
border: solid 1px #d9dee3;
|
||||
}
|
||||
|
||||
.table > :not(caption) > * > * {
|
||||
padding: 0.625rem 1rem;
|
||||
}
|
||||
|
||||
/* 그리드 테이블 */
|
||||
.dataTable thead{
|
||||
background-color:#FCFDFD;
|
||||
}
|
||||
|
||||
.dataTable th{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dataTable td,
|
||||
.dataTable th {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 모달 사이즈 */
|
||||
.modal-sm { min-width: 250px; --bs-modal-width: 310px; }
|
||||
.modal-md { min-width: 400px; --bs-modal-width: 500px; }
|
||||
.modal-lg { min-width: 800px; --bs-modal-width: 1000px; }
|
||||
.modal-xl { min-width: 1000px; --bs-modal-width: 1140px; }
|
||||
.modal-xxl { min-width: 1400px; --bs-modal-width: 1600px; }
|
||||
|
||||
|
||||
|
||||
|
||||
/** 길이,높이 설정 추가 */
|
||||
.w-px-10 { width: 10px !important; }
|
||||
.w-px-60 { width: 60px !important; }
|
||||
.w-px-70 { width: 70px !important; }
|
||||
.w-px-80 { width: 80px !important; }
|
||||
.w-px-90 { width: 90px !important; }
|
||||
.w-px-110 { width: 110px !important; }
|
||||
.w-px-120 { width: 120px !important; }
|
||||
.w-px-130 { width: 130px !important; }
|
||||
.w-px-140 { width: 140px !important; }
|
||||
.w-px-160 { width: 160px !important; }
|
||||
.w-px-170 { width: 170px !important; }
|
||||
.w-px-180 { width: 180px !important; }
|
||||
.w-px-190 { width: 190px !important; }
|
||||
.w-px-210 { width: 210px !important; }
|
||||
.w-px-220 { width: 220px !important; }
|
||||
.w-px-230 { width: 230px !important; }
|
||||
.w-px-240 { width: 240px !important; }
|
||||
.w-px-300 { width: 300px !important; }
|
||||
.w-px-320 { width: 320px !important; }
|
||||
.w-px-450 { width: 450px !important; }
|
||||
.w-px-550 { width: 550px !important; }
|
||||
.w-px-900 { width: 900px !important; }
|
||||
.w-px-1000 { width: 1000px !important; }
|
||||
.w-px-1100 { width: 1100px !important; }
|
||||
.w-px-1150 { width: 1150px !important; }
|
||||
.w-px-1200 { width: 1200px !important; }
|
||||
.w-px-1300 { width: 1300px !important; }
|
||||
.w-px-1400 { width: 1400px !important; }
|
||||
.w-px-1500 { width: 1500px !important; }
|
||||
|
||||
.w-10 { width: 10% !important; }
|
||||
.w-15 { width: 15% !important; }
|
||||
.w-20 { width: 20% !important; }
|
||||
.w-30 { width: 30% !important; }
|
||||
.w-35 { width: 35% !important; }
|
||||
.w-40 { width: 40% !important; }
|
||||
.w-45 { width: 45% !important; }
|
||||
.w-55 { width: 55% !important; }
|
||||
.w-60 { width: 60% !important; }
|
||||
.w-65 { width: 65% !important; }
|
||||
.w-70 { width: 70% !important; }
|
||||
.w-78 { width: 78% !important; }
|
||||
.w-80 { width: 80% !important; }
|
||||
.w-85 { width: 85% !important; }
|
||||
.w-87 { width: 87% !important; }
|
||||
.w-90 { width: 90% !important; }
|
||||
.w-95 { width: 95% !important; }
|
||||
|
||||
.h-px-10 { height: 10px !important; }
|
||||
.h-px-25 { height: 25px !important; }
|
||||
.h-px-60 { height: 60px !important; }
|
||||
.h-px-70 { height: 70px !important; }
|
||||
.h-px-80 { height: 80px !important; }
|
||||
.h-px-125 { height: 125px !important; }
|
||||
.h-px-175 { height: 175px !important; }
|
||||
.h-px-450 { height: 450px !important; }
|
||||
.h-px-550 { height: 550px !important; }
|
||||
.h-px-650 { height: 650px !important; }
|
||||
.h-px-750 { height: 750px !important; }
|
||||
.h-px-850 { height: 850px !important; }
|
||||
.h-px-900 { height: 900px !important; }
|
||||
.h-px-950 { height: 950px !important; }
|
||||
|
||||
|
||||
/** 폰트 사이즈 재정의 */
|
||||
.fs-1 { font-size: 2.375rem !important; }
|
||||
.fs-2 { font-size: 2rem !important; }
|
||||
.fs-3 { font-size: 1.625rem !important; }
|
||||
.fs-4 { font-size: 1.375rem !important; }
|
||||
.fs-5 { font-size: 1.125rem !important; }
|
||||
.fs-6 { font-size: 0.9375rem !important; }
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue