/* ==========================================================================
ui.jqgrid.modern.css (v2 - 레이아웃 안전 버전)
----------------------------------------------------------------------
ui.jqgrid.css 위에 얹는 "모던 테마" 오버라이드 레이어입니다.
[v1 → v2 수정 이유]
jqGrid는 헤더 테이블(.ui-jqgrid-htable)과 본문 테이블(.ui-jqgrid-btable)이
서로 다른 이고, JS가 렌더링 시점에 각 셀 폭을 픽셀 단위로 계산해
style="width:.." 로 강제 지정해 두 테이블 컬럼을 맞춰놓는 구조다.
v1에서 th/td의 가로 padding을 늘리고(0 2px → 0 8px) 컨테이너에 실제
border를 추가했더니, box-sizing: content-box 하에서는 padding/border가
JS가 계산한 폭 바깥으로 더해져서 헤더-바디 컬럼 정렬이 깨졌다.
v2는:
1) 폭 계산에 관여하는 요소(th/td, 컨테이너, hdiv/bdiv)는 전부
box-sizing: border-box로 강제해서 padding이 지정폭 "안쪽"에 포함되게 함
2) 그래도 위험한 가로 padding 확대는 하지 않고 원본 값(0 2px) 유지
3) 폭 계산에 관여하는 요소의 "테두리"는 실제 border 대신 레이아웃에
영향을 주지 않는 box-shadow(윤곽선 효과)로 대체
4) 폭과 무관한 요소(모달, 버튼, 페이저, 검색메뉴 등)는 기존처럼 실제
border/padding을 자유롭게 써도 안전함(jqGrid의 폭 동기화 대상이 아님)
[범위] 편집 다이얼로그(.ui-jqdialog, .fm-button)와 페이저(.ui-jqgrid-pager,
.ui-pg-*)는 커스텀 구현을 쓰고 있어 스타일을 넣지 않았습니다. 그리드
본체(캡션/헤더/바디행/검색툴바/로딩오버레이/컬럼메뉴/스크롤바)만 다룹니다.
========================================================================== */
:root {
/* 실제 KRX 사이트 그리드(콘넥스 투자자별 매매동향 등)에서 실측 추출한 색상.
- 헤더: 투톤 스틸블루(그룹헤더 #667491 / 하위 컬럼헤더 #515F7D), 흰 텍스트
- 숫자 강조 컬러: #3D7DC4 */
--jqg-primary: #3d7dc4;
--jqg-primary-dark: #2c5f9e;
--jqg-primary-soft: #e5eefa;
--jqg-text: #333333;
--jqg-text-muted: #666666;
--jqg-text-inverse: #ffffff;
--jqg-header-bg: #515f7d;
--jqg-header-border: #3f4a63;
--jqg-header-text: #ffffff;
--jqg-header-text-muted: #dbe1ea;
--jqg-border: #dddddd;
--jqg-border-strong: #c2c2c2;
--jqg-row-bg: #ffffff;
--jqg-row-alt-bg: #f7f9fd;
--jqg-row-hover: #eef1f6;
/* 선택 행: 헤더보다 한 톤 밝은 스틸블루(그룹헤더 톤)로 위계를 둠 - 헤더(가장 진함) > 선택행 > 일반행(흰색) */
--jqg-row-selected: #667491;
--jqg-row-selected-hover: #57647e;
--jqg-row-selected-text: #ffffff;
--jqg-radius: 10px;
--jqg-radius-sm: 6px;
--jqg-shadow-1: 0 1px 2px rgba(16, 24, 40, .04), 0 12px 28px -6px rgba(16, 24, 40, .14);
--jqg-shadow-2: 0 4px 14px rgba(16, 24, 40, .08);
}
/* ---------- [핵심] 폭 계산에 관여하는 요소는 전부 border-box로 강제 ---------- */
.ui-jqgrid,
.ui-jqgrid *,
.ui-jqgrid *::before,
.ui-jqgrid *::after {
box-sizing: border-box !important;
}
/* ---------- 전역 타이포 ----------
font-family는 더 이상 강제하지 않는다. .ui-jqgrid에 지정하면 font-family는
상속 속성이라 자식인 th/td까지 그대로 내려가고, 폰트가 바뀌면 같은
font-weight/font-size라도 문자 폭 자체가 달라져서 컬럼폭에 딱 맞춰둔
헤더 텍스트가 넘칠 수 있다(실제로 겪은 문제). 그래서 폭에 영향이 없는
색상만 지정한다. */
.ui-jqgrid,
.ui-jqgrid .ui-jqgrid-view {
color: var(--jqg-text);
overflow: hidden; /* 모서리 클리핑용. bdiv 자신의 overflow:auto(가로/세로 스크롤)는 그대로 살아있음 */
border-radius: var(--jqg-radius);
}
/* ---------- 그리드 컨테이너 (실제 border 대신 box-shadow) ----------
[수정] overflow:hidden을 컨테이너 자신에게 걸면 border-radius로 안쪽
모서리는 깔끔해지지만, 같은 요소의 box-shadow(플로팅 그림자)까지
같이 잘려서 안 보이게 되는 문제가 있었음. overflow:hidden을 없애고,
대신 맨 위(타이틀바)/맨 아래(바디) 요소에 각각 라운드를 직접 줘서
모서리는 깔끔하게, 그림자는 안 잘리게 둘 다 해결. */
.ui-jqgrid {
border: 0 none !important;
border-radius: var(--jqg-radius) !important;
box-shadow: 0 0 0 1px var(--jqg-border), var(--jqg-shadow-1);
}
.ui-jqgrid .ui-jqgrid-bdiv {
/* [수정] overflow-x:hidden을 여기 걸었더니 base css의 overflow:auto(가로+세로
스크롤)를 덮어써서 가로 스크롤바 자체가 없어지는 문제가 생겼음.
모서리 클리핑은 상위 .ui-jqgrid-view의 overflow:hidden이 대신 담당하므로
여기서는 overflow를 아예 건드리지 않는다(base 값 그대로 사용). */
border-bottom-left-radius: var(--jqg-radius);
border-bottom-right-radius: var(--jqg-radius);
}
/* ---------- 캡션(타이틀 바) : 폭 동기화 대상 아님 ---------- */
.ui-jqgrid .ui-jqgrid-titlebar {
background: var(--jqg-row-bg);
border: 0 none !important;
border-top-left-radius: var(--jqg-radius);
border-top-right-radius: var(--jqg-radius);
box-shadow: inset 0 -1px 0 var(--jqg-header-border);
height: 42px !important;
padding: 0 14px !important;
display: flex;
align-items: center;
}
.ui-jqgrid .ui-jqgrid-title {
font-size: 14px;
font-weight: 600;
color: var(--jqg-text);
letter-spacing: -0.01em;
}
.ui-jqgrid .ui-jqgrid-titlebar-close {
border-radius: var(--jqg-radius-sm);
transition: background-color .15s ease;
}
.ui-jqgrid .ui-jqgrid-titlebar-close:hover {
background: var(--jqg-row-hover);
}
/* ---------- 컬럼 헤더 ---------- */
.ui-jqgrid .ui-jqgrid-hdiv {
background: var(--jqg-header-bg) !important;
border: 0 none !important;
border-top-left-radius: var(--jqg-radius); /* 타이틀바 없는 화면 대비. 있으면 중간에 가려져 안 보임 */
border-top-right-radius: var(--jqg-radius);
box-shadow: inset 0 -1px 0 var(--jqg-header-border);
overflow: hidden; /* 안의 헤더 테이블이 둥근 모서리 밖으로 삐져나오지 않게. 그림자는 .ui-jqgrid(부모)에 있어 영향 없음 */
}
.ui-jqgrid .ui-jqgrid-htable th {
background: var(--jqg-header-bg) !important;
border-color: var(--jqg-header-border) !important;
padding: 0 2px !important;
}
.ui-th-column, .ui-jqgrid .ui-jqgrid-htable th.ui-th-column,
.ui-th-column-header, .ui-jqgrid .ui-jqgrid-htable th.ui-th-column-header {
border-top: 0 none !important;
color: var(--jqg-header-text-muted);
/* 컬럼폭이 타이트한 헤더가 많아 살짝 작게(11.5px) - 원본 그리드뷰 기준(12px)보다
0.5px 줄여서 안전마진 확보. font-weight/letter-spacing은 일부러 건드리지
않음(세미볼드/자간은 폭을 넓혀서 넘침을 악화시킴). */
font-size: 11.5px;
text-overflow: ellipsis; /* 그래도 폭이 모자라면 잘라내지 말고 ...으로 표시 */
}
.ui-jqgrid .ui-jqgrid-htable th div {
color: var(--jqg-header-text-muted);
}
.ui-jqgrid .ui-jqgrid-htable th em {
font-style: normal;
color: #ffb648 !important; /* KRX 로고 오렌지의 밝은 버전 - 어두운 헤더 배경 위에서도 확실히 보임 */
font-weight: 700;
}
.ui-jqgrid span.g {
color: #35c47a !important; /* 원본 #008000보다 밝은 그린. em(오렌지)과는 다른 계열이며 어두운 배경에서도 보이는 밝기 */
font-weight: 600;
}
.ui-jqgrid .ui-jqgrid-sortable:hover {
color: var(--jqg-header-text);
}
.ui-jqgrid .ui-grid-ico-sort {
opacity: .8;
filter: brightness(0) invert(1); /* 원래 어두운 색 스프라이트 아이콘을 흰 헤더에 맞춰 하얗게 반전 */
transition: opacity .15s ease;
}
.ui-jqgrid .ui-grid-ico-sort.ui-state-disabled { opacity: .3; }
.ui-jqgrid th:hover .ui-grid-ico-sort { opacity: 1; }
.ui-jqgrid .ui-jqgrid-resize-mark {
background-color: #ffffff !important;
width: 2px !important;
}
/* ---------- 본문 행 (가로 padding은 원본 유지, 색/전환효과만 변경) ---------- */
.ui-jqgrid .ui-jqgrid-bdiv {
background: var(--jqg-row-bg);
}
.ui-jqgrid tr.jqgrow td {
height: 32px !important;
padding: 0 2px !important;
border-bottom: 1px solid var(--jqg-border) !important;
border-right-color: var(--jqg-border) !important;
font-size: 11.5px;
transition: background-color .1s ease;
}
.ui-jqgrid tr.jqgrow.ui-row-ltr:nth-child(even) {
background-color: var(--jqg-row-alt-bg);
}
.ui-jqgrid tr.ui-row-ltr:hover {
background: var(--jqg-row-hover) !important;
font-weight: normal !important;
}
.ui-jqgrid tr.ui-row-ltr:hover td {
font-weight: normal !important;
}
.ui-jqgrid tr.ui-state-highlight {
background: var(--jqg-row-selected) !important;
box-shadow: inset 3px 0 0 var(--jqg-primary-dark);
}
.ui-jqgrid tr.ui-state-highlight td {
color: var(--jqg-row-selected-text) !important;
border-bottom-color: var(--jqg-row-selected-hover) !important;
}
.ui-jqgrid tr.ui-state-highlight:hover {
background: var(--jqg-row-selected-hover) !important;
}
/* ---------- No(행번호) 컬럼: rownumbers:true 옵션이 만드는 전용 셀 ----------
반투명(rgba) 배경을 써서, 아래 깔린 행(흰색/줄무늬/선택된 파란색 등) 위에
자연스럽게 겹쳐지도록 함 - 불투명한 색을 쓰면 선택행/줄무늬에서 그 칸만
색이 어긋나 보이는 문제가 생기는데, 반투명이면 어떤 배경 위에서도 톤만
살짝 죽여서 자연스럽게 구분됨. */
.ui-jqgrid td.jqgrid-rownum {
background-color: rgba(81, 95, 125, .07);
color: var(--jqg-text-muted);
font-weight: 600;
text-align: center;
}
.ui-jqgrid tr.ui-state-highlight td.jqgrid-rownum {
background-color: rgba(0, 0, 0, .1);
color: var(--jqg-row-selected-text) !important;
}
.ui-jqgrid th.jqgrid-rownum,
.ui-jqgrid .ui-jqgrid-htable th:first-child {
color: var(--jqg-header-text-muted);
}
/* ---------- 푸터 / 합계행 ---------- */
.ui-jqgrid tr.footrow td {
background: var(--jqg-header-bg);
font-weight: 600;
border-color: var(--jqg-header-border) !important;
}
/* ---------- 검색 툴바 (필터 행): th padding은 손대지 않고 내부 input만 ---------- */
.ui-jqgrid tr.ui-search-toolbar th {
background: var(--jqg-row-bg) !important;
}
.ui-jqgrid tr.ui-search-toolbar input,
.ui-jqgrid tr.ui-search-toolbar select {
border: 1px solid var(--jqg-border-strong) !important;
border-radius: var(--jqg-radius-sm) !important;
padding: 3px 5px !important;
font-size: 12px;
width: 95% !important;
}
.ui-jqgrid tr.ui-search-toolbar input:focus,
.ui-jqgrid tr.ui-search-toolbar select:focus {
outline: none;
border-color: var(--jqg-primary) !important;
box-shadow: 0 0 0 3px var(--jqg-primary-soft);
}
/* ---------- 로딩 오버레이 (폭 동기화와 무관) ----------
list.jsp 등 여러 화면의 jqGrid loadtext 옵션이 다음처럼 이미지를 직접
박아넣고 있음 (300개 화면에 흩어져 있어 한 번에 못 고침):
loadtext : '
'
JS/JSP를 건드리지 않고 CSS만으로 해결: .loading 안의 ![]()
는 무조건
숨기고, 그 자리에 CSS 스피너(::before)를 대신 띄운다. loadtext 값이
이미지든 텍스트든 상관없이 모든 화면에 동일하게 적용된다.
주의: display 속성은 절대 건드리지 않는다. jqGrid가 로딩 시작/종료 시
.loading 요소에 inline style로 display를 직접 토글하는데, 여기서
display를 재정의(특히 !important)하면 로딩 박스가 안 사라지거나
안 나타나는 문제가 생길 수 있다. 그래서 가로 배치는 flex 대신
position:absolute 스피너로 구현했다. */
.ui-jqgrid .loading img {
display: none !important;
}
.ui-jqgrid .loading {
position: absolute !important;
overflow: hidden;
width: 44px !important;
height: 44px !important;
min-width: 0 !important;
padding: 0 !important;
background: var(--jqg-row-bg) !important;
border: 1px solid var(--jqg-border) !important;
border-radius: 50% !important;
box-shadow: var(--jqg-shadow-2) !important;
color: var(--jqg-text);
font-size: 0 !important; /* 이미지 뒤에 남아있을 수 있는 공백/텍스트 노드를 시각적으로 접음 */
}
.ui-jqgrid .loading::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
margin: -9px 0 0 -9px;
width: 18px;
height: 18px;
background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2040%2040%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%20%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2215%22%20fill%3D%22none%22%20stroke%3D%22%2300B4D5%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20stroke-dasharray%3D%2258%2094.2%22%20stroke-dashoffset%3D%220%22%20/%3E%20%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%2215%22%20fill%3D%22none%22%20stroke%3D%22%23E8A020%22%20stroke-width%3D%225%22%20stroke-linecap%3D%22round%22%20stroke-dasharray%3D%2215%2094.2%22%20stroke-dashoffset%3D%22-66%22%20/%3E%20%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
animation: jqg-spin .9s linear infinite;
}
@keyframes jqg-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.ui-jqgrid .loading::before { animation: none; }
}
/* ---------- 컬럼 메뉴 / 검색 메뉴 팝업 (폭 동기화와 무관) ---------- */
.ui-search-menu, .ui-nav-menu, .column-menu {
border: 1px solid var(--jqg-border) !important;
border-radius: var(--jqg-radius) !important;
box-shadow: var(--jqg-shadow-2) !important;
background: var(--jqg-row-bg);
}
.column-menu .divider {
background-color: var(--jqg-border);
}
/* ---------- 모던 스크롤바 (webkit 계열) ---------- */
.ui-jqgrid .ui-jqgrid-bdiv::-webkit-scrollbar {
width: 10px;
height: 10px;
}
.ui-jqgrid .ui-jqgrid-bdiv::-webkit-scrollbar-track {
background: transparent;
}
.ui-jqgrid .ui-jqgrid-bdiv::-webkit-scrollbar-thumb {
background-color: #cbd5e1;
border-radius: 999px;
border: 2px solid var(--jqg-row-bg);
}
.ui-jqgrid .ui-jqgrid-bdiv::-webkit-scrollbar-thumb:hover {
background-color: #94a3b8;
}