152 lines
6.9 KiB
CSS
152 lines
6.9 KiB
CSS
/* static/css/custom_styles.css */
|
|
|
|
/* Select2 컨테이너 기본 스타일 조정 (Bootstrap 5 form-control 과 유사하게) */
|
|
.select2-container--bootstrap-5 .select2-selection--single {
|
|
height: calc(1.5em + 0.75rem + 2px); /* var(--bs-body-font-size) * var(--bs-form-select-line-height) + var(--bs-form-select-padding-y) * 2 + var(--bs-form-select-border-width) * 2 와 유사 */
|
|
padding: var(--bs-form-select-padding-y) var(--bs-form-select-padding-x);
|
|
font-family: var(--bs-body-font-family);
|
|
font-size: var(--bs-body-font-size);
|
|
font-weight: var(--bs-body-font-weight);
|
|
line-height: var(--bs-body-line-height);
|
|
color: var(--bs-body-color); /* Bootstrap 변수 사용 */
|
|
background-color: var(--bs-body-bg); /* Bootstrap 변수 사용 */
|
|
border: 1px solid var(--bs-border-color); /* Bootstrap 변수 사용 */
|
|
border-radius: var(--bs-border-radius);
|
|
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
|
|
}
|
|
|
|
/* 선택된 항목 텍스트 정렬 및 색상 */
|
|
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
|
|
color: var(--bs-body-color);
|
|
line-height: 1.5; /* 기본값 또는 조정 */
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
/* 화살표 아이콘 정렬 */
|
|
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow {
|
|
height: calc(1.5em + 0.75rem); /* 내부 아이템 높이에 맞춤 */
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__arrow b {
|
|
border-color: var(--bs-body-color) transparent transparent transparent; /* Bootstrap 변수 사용 고려 */
|
|
}
|
|
.select2-container--bootstrap-5.select2-container--open .select2-selection--single .select2-selection__arrow b {
|
|
border-color: transparent transparent var(--bs-body-color) transparent; /* Bootstrap 변수 사용 고려 */
|
|
}
|
|
|
|
|
|
/* 드롭다운 패널 스타일 */
|
|
.select2-container--bootstrap-5 .select2-dropdown {
|
|
background-color: var(--bs-body-bg);
|
|
border: 1px solid var(--bs-border-color-translucent); /* Bootstrap 변수 사용 */
|
|
border-radius: var(--bs-border-radius);
|
|
box-shadow: 0 0.5rem 1rem rgba(var(--bs-body-color-rgb), .15); /* Bootstrap 드롭다운 그림자와 유사하게 */
|
|
}
|
|
|
|
/* 드롭다운 내 검색창 스타일 */
|
|
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
|
|
font-family: var(--bs-body-font-family);
|
|
font-size: var(--bs-body-font-size);
|
|
color: var(--bs-body-color);
|
|
background-color: var(--bs-tertiary-bg); /* Bootstrap 변수 사용 */
|
|
border: 1px solid var(--bs-border-color);
|
|
border-radius: var(--bs-border-radius-sm); /* 약간 작은 radius */
|
|
padding: var(--bs-form-select-padding-y) var(--bs-form-select-padding-x);
|
|
}
|
|
.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field:focus {
|
|
border-color: var(--bs-primary); /* 부트스트랩 primary 색상 */
|
|
box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
|
|
}
|
|
|
|
|
|
/* 드롭다운 결과 항목 스타일 */
|
|
.select2-container--bootstrap-5 .select2-results__option {
|
|
padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
|
|
color: var(--bs-body-color);
|
|
transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
|
|
}
|
|
|
|
/* 드롭다운 결과 항목 호버/포커스 스타일 */
|
|
.select2-container--bootstrap-5 .select2-results__option--highlighted {
|
|
color: var(--bs-primary-text-emphasis); /* Bootstrap 변수 */
|
|
background-color: var(--bs-primary-bg-subtle); /* Bootstrap 변수 */
|
|
}
|
|
.select2-container--bootstrap-5 .select2-results__option[aria-selected=true] {
|
|
color: var(--bs-dropdown-link-active-color);
|
|
background-color: var(--bs-dropdown-link-active-bg);
|
|
}
|
|
|
|
/* "더 많은 결과 로딩 중..." 메시지 스타일 */
|
|
.select2-container--bootstrap-5 .select2-results__option--loading {
|
|
color: var(--bs-secondary-color);
|
|
}
|
|
|
|
/* "결과 없음" 메시지 스타일 */
|
|
.select2-container--bootstrap-5 .select2-results__message {
|
|
color: var(--bs-secondary-color);
|
|
padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
|
|
}
|
|
|
|
/* 선택 해제(X) 버튼 스타일 (allowClear: true 사용 시) */
|
|
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear {
|
|
/* 필요시 스타일 조정 */
|
|
color: var(--bs-secondary-color);
|
|
font-size: 1.2em; /* 아이콘 크기 조정 */
|
|
right: 2.5rem; /* 화살표 왼쪽에 위치하도록 조정 */
|
|
}
|
|
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__clear:hover {
|
|
color: var(--bs-danger);
|
|
}
|
|
|
|
/* static/css/custom_styles.css 또는 컴파일된 tables.css */
|
|
|
|
/* --- 다크 모드 스타일 --- */
|
|
html[data-bs-theme="dark"] {
|
|
|
|
/* 일반 테이블 헤더 (thead에 table-light 클래스가 없을 경우) */
|
|
.table > thead > tr > th {
|
|
color: var(--bs-body-color); /* 다크 모드 기본 텍스트 색상 */
|
|
background-color: var(--bs-tertiary-bg); /* 다크 모드 테이블 배경과 유사하게 */
|
|
border-color: var(--bs-border-color-translucent);
|
|
}
|
|
|
|
/* ★★★ thead에 table-light 클래스가 적용된 경우의 스타일 덮어쓰기 ★★★ */
|
|
.table thead.table-light th { /* a 태그가 아닌 th 자체에 배경과 글자색 적용 */
|
|
color: var(--bs-body-color); /* 예: Bootstrap 다크 모드의 기본 텍스트 색상 */
|
|
background-color: #343a40; /* 예: Bootstrap의 $gray-800 과 유사한 어두운 색 */
|
|
/* 또는 var(--bs-emphasis-color) 에 맞춰 var(--bs-secondary-bg) 등 */
|
|
border-color: #495057; /* 예: Bootstrap의 $gray-700 과 유사한 테두리 색 */
|
|
text-decoration: none
|
|
}
|
|
|
|
/* thead.table-light 내부의 a 태그 색상 */
|
|
.table thead.table-light th a {
|
|
color: var(--bs-body-color); /* 부모 th의 색상을 상속받도록 (가장 간단) */
|
|
text-decoration: none
|
|
}
|
|
.table thead.table-light th a:hover {
|
|
color: var(--bs-body-color); /* 다크 모드 링크 호버 색상 */
|
|
}
|
|
|
|
/* thead.table-light 내부의 Font Awesome 아이콘 색상 */
|
|
.table thead.table-light th a .fas {
|
|
color: inherit; /* 링크 색상 상속 */
|
|
}
|
|
|
|
/* --- (선택 사항) 테이블 전체에 대한 다크 모드 기본 스타일 --- */
|
|
|
|
.table {
|
|
--bs-table-color: var(--bs-body-color);
|
|
--bs-table-bg: var(--bs-secondary-bg);
|
|
--bs-table-border-color: var(--bs-border-color-translucent);
|
|
--bs-table-striped-color: var(--bs-body-color);
|
|
--bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.03);
|
|
--bs-table-active-color: var(--bs-body-color);
|
|
--bs-table-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.06);
|
|
--bs-table-hover-color: var(--bs-body-color);
|
|
--bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.045);
|
|
}
|
|
|
|
} |