You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
379 lines
8.8 KiB
379 lines
8.8 KiB
/* 기본 및 공통 스타일 */
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #f0f2f5;
|
|
color: #333;
|
|
/* [수정] flexbox 레이아웃 적용 */
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh; /* 전체 뷰포트 높이 사용 */
|
|
}
|
|
|
|
button {
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
border: 1px solid #ccc;
|
|
padding: 5px 10px;
|
|
}
|
|
|
|
/* 1. 로그인 페이지 스타일 (index.html) */
|
|
/* ... (기존 로그인 스타일 동일) ... */
|
|
.login-page {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
}
|
|
|
|
.login-container {
|
|
background: #fff;
|
|
padding: 2rem 3rem;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
text-align: center;
|
|
}
|
|
|
|
.login-container h1 {
|
|
font-size: 1.5rem;
|
|
color: #444;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.input-group {
|
|
margin-bottom: 1rem;
|
|
text-align: left;
|
|
}
|
|
|
|
.input-group label {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.input-group input {
|
|
width: 100%;
|
|
padding: 0.8rem;
|
|
border: 1px solid #ddd;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.login-button {
|
|
width: 100%;
|
|
padding: 0.8rem;
|
|
background-color: #5a67d8;
|
|
color: white;
|
|
border: none;
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
margin-top: 1rem;
|
|
}
|
|
.login-button:hover {
|
|
background-color: #434190;
|
|
}
|
|
|
|
|
|
/* 2. 대시보드 페이지 스타일 (dashboard.html) */
|
|
header {
|
|
background-color: #333;
|
|
padding: 0 1rem;
|
|
/* [수정] 크기 고정 */
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.tab-button {
|
|
background: none;
|
|
border: none;
|
|
color: #aaa;
|
|
padding: 1rem 1.5rem;
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.tab-button.active {
|
|
color: white;
|
|
border-bottom: 3px solid #5a67d8;
|
|
}
|
|
|
|
.logout-button {
|
|
background-color: #d9534f;
|
|
color: white;
|
|
border: none;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 4px;
|
|
font-size: 0.9rem;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
}
|
|
.logout-button:hover {
|
|
background-color: #c9302c;
|
|
}
|
|
|
|
main {
|
|
padding: 1rem;
|
|
/* [수정] 남은 공간을 모두 채움 */
|
|
flex-grow: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0; /* 내용이 많을 때 축소 가능하도록 */
|
|
}
|
|
|
|
.tab-content {
|
|
display: none;
|
|
}
|
|
.tab-content.active {
|
|
/* [수정] display: block -> flex */
|
|
display: flex;
|
|
flex-direction: column;
|
|
/* [수정] 부모(main) 공간을 채움 */
|
|
flex-grow: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* 2-1. Video 탭 (PDF 2페이지) */
|
|
|
|
/* [추가] .video-container가 공간을 채우도록 */
|
|
.video-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
min-height: 0;
|
|
}
|
|
|
|
/* ========== .video-player 스타일 수정 ========== */
|
|
.video-player {
|
|
width: 100%;
|
|
/* [제거] min-height: 720px; */
|
|
/* [추가] .video-container 공간을 채움 */
|
|
flex-grow: 1;
|
|
min-height: 0; /* 축소 가능하도록 */
|
|
background-color: #111; /* video-test.html 배경색 적용 */
|
|
color: #eee; /* video-test.html 글자색 적용 */
|
|
display: flex;
|
|
flex-direction: row; /* 가로 정렬로 변경 */
|
|
gap: 10px; /* video-test.html gap 적용 */
|
|
padding: 10px; /* video-test.html padding 적용 */
|
|
box-sizing: border-box;/* video-test.html box-sizing 적용 */
|
|
/* justify-content: center; */ /* 기존 중앙 정렬 제거 */
|
|
/* align-items: center; */ /* 기존 중앙 정렬 제거 */
|
|
/* font-size: 1.5rem; */ /* 기존 폰트 크기 제거 */
|
|
border-radius: 4px;
|
|
position: relative;
|
|
}
|
|
|
|
/* ========== [수정됨] #current-model <select> 스타일 -> Segmented Control 스타일로 수정 ========== */
|
|
.segmented-control-container {
|
|
position: absolute;
|
|
top: 40px; /* #info (12px) 아래 여유 공간 */
|
|
left: 20px;
|
|
z-index: 10;
|
|
display: flex;
|
|
flex-wrap: wrap; /* 좁은 화면에서 줄바꿈 */
|
|
gap: 4px; /* 버튼 사이 간격 */
|
|
background-color: rgba(50, 50, 50, 0.7); /* 반투명 배경 */
|
|
padding: 4px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* 실제 라디오 버튼은 숨김 */
|
|
.segmented-control-container input[type="radio"] {
|
|
display: none;
|
|
}
|
|
|
|
/* 버튼처럼 보일 라벨 스타일 */
|
|
.segmented-control-button {
|
|
display: inline-block;
|
|
padding: 6px 10px;
|
|
font-size: 0.85rem; /* 폰트 약간 작게 */
|
|
color: #eee;
|
|
background-color: #555;
|
|
border: 1px solid #777;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s, color 0.2s;
|
|
user-select: none; /* 텍스트 선택 방지 */
|
|
}
|
|
|
|
/* 마우스 오버시 */
|
|
.segmented-control-button:hover {
|
|
background-color: #666;
|
|
}
|
|
|
|
/* 선택된(checked) 라디오 버튼의 *다음* 형제(label) 스타일 */
|
|
.segmented-control-container input[type="radio"]:checked + .segmented-control-button {
|
|
background-color: #5a67d8; /* 활성 탭 색상과 유사하게 */
|
|
color: white;
|
|
border-color: #434190;
|
|
font-weight: bold;
|
|
}
|
|
/* ========== [수정됨] 스타일 변경 끝 ========== */
|
|
|
|
|
|
/* ========== video-test.html 스타일 추가 ========== */
|
|
#video-wrap {
|
|
flex: 2;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
/* #current-model 과 겹치지 않도록 z-index 추가 */
|
|
position: relative;
|
|
/* z-index: 1; */ /* [수정됨] z-index 제거 */
|
|
}
|
|
#info {
|
|
font-size: 12px;
|
|
color: #aaa;
|
|
/* [수정됨] 박스 위에 표시되도록 z-index 추가 */
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
#frame {
|
|
flex: 1; /* 높이 채우도록 추가 */
|
|
min-height: 0; /* flex-shrink 방지 */
|
|
max-width: 100%;
|
|
/* max-height: calc(100vh - 80px); /* 기존 스타일 제거 */
|
|
background: #000;
|
|
object-fit: contain;
|
|
border: 1px solid #333;
|
|
/* [수정됨] 박스 컨테이너의 기준이 되도록 z-index 추가 */
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
#det-wrap {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4px;
|
|
/* #video-res 와 겹치지 않도록 z-index 추가 */
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
#det-title {
|
|
font-weight: bold;
|
|
font-size: 13px;
|
|
}
|
|
#det-list {
|
|
flex: 1;
|
|
font-size: 11px;
|
|
background: #000;
|
|
border: 1px solid #333;
|
|
padding: 6px;
|
|
overflow-y: auto;
|
|
white-space: pre;
|
|
}
|
|
.status {
|
|
font-size: 11px;
|
|
color: #6cf;
|
|
}
|
|
.status.err {
|
|
color: #f66;
|
|
}
|
|
|
|
/* 2-2. AI Models 탭 (PDF 3페이지) */
|
|
|
|
/* [수정됨] .toolbar 스타일 */
|
|
.toolbar {
|
|
/* [수정] flexbox로 변경 */
|
|
display: flex;
|
|
justify-content: flex-end; /* 기존 text-align: right와 동일한 효과 */
|
|
align-items: center;
|
|
gap: 10px; /* 요소 간 간격 */
|
|
margin-bottom: 1rem;
|
|
/* text-align: right; -- 제거 */
|
|
}
|
|
|
|
/* [추가됨] 새로고침 버튼을 맨 오른쪽으로 밀기 */
|
|
.toolbar .refresh-button {
|
|
margin-left: auto;
|
|
}
|
|
|
|
/* [추가됨] 파일명 표시 레이블 */
|
|
#file-name-display {
|
|
font-size: 0.9rem;
|
|
color: #555;
|
|
background-color: #f9f9f9;
|
|
border: 1px solid #ddd;
|
|
padding: 5px 10px;
|
|
border-radius: 4px;
|
|
min-width: 350px;
|
|
text-align: left;
|
|
font-style: italic;
|
|
/* 버튼과 높이를 맞추기 위한 line-height */
|
|
line-height: 1.4;
|
|
}
|
|
|
|
|
|
.hidden-file-input {
|
|
display: none;
|
|
}
|
|
|
|
.model-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
background: white;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
.model-table th,
|
|
.model-table td {
|
|
border: 1px solid #ddd;
|
|
padding: 0.8rem 1rem;
|
|
text-align: left;
|
|
}
|
|
|
|
.model-table th {
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
/* [수정됨] nth-child 선택자 수정 (컬럼 1, 4 중앙 정렬) */
|
|
.model-table td:nth-child(1),
|
|
.model-table td:nth-child(4) {
|
|
text-align: center;
|
|
}
|
|
/* [수정됨] nth-child 선택자 수정 (컬럼 5 '삭제' 중앙 정렬) */
|
|
.model-table td:nth-child(5) {
|
|
text-align: center;
|
|
}
|
|
|
|
.btn-browse {
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
border: 1px solid #ccc;
|
|
padding: 5px 10px;
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
font-family: Arial, sans-serif;
|
|
line-height: normal;
|
|
background-color: #e0e0e0;
|
|
}
|
|
.btn-browse:hover {
|
|
background-color: #d5d5d5;
|
|
}
|
|
|
|
.btn-action { background-color: #4CAF50; color: white; border:none; }
|
|
.btn-delete { background-color: #f44336; color: white; border:none; }
|
|
|
|
/* [추가됨] 바운딩 박스 스타일 */
|
|
#bbox-container {
|
|
position: absolute;
|
|
pointer-events: none; /* 클릭 이벤트 방지 */
|
|
z-index: 5; /* 프레임(1) 위, 정보(10) 아래 */
|
|
/* 위치와 크기는 app.js에서 동적으로 설정됩니다. */
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.bbox {
|
|
position: absolute;
|
|
border: 2px solid red; /* 요청된 빨간색 테두리 */
|
|
box-sizing: border-box; /* 테두리 포함 크기 계산 */
|
|
}
|
|
/*<!--2025.11.12 15:56-->*/ |