Update app.py

app.py

@@ -131,50 +131,51 @@ def update_thumbnails(video, start_time_str, end_time_str):
 # -------------------------------
 custom_css = """
 body {
-  font-size: 1.6em;  /* 전체 글자 크기 더 크게 */
+  font-size: 1.6em; /* 글자 크기 증가 */
   background-color: #ffffff;
   font-family: 'Arial', sans-serif;
 }
 .gradio-container {
-  width: 80% !important;  /* 좀 더 넓게 */
+  width: 80% !important;
   margin: 0 auto;
+  background-color: #ffffff; /* 회색 제거 */
 }
 /* 제목 및 사용가이드 (왼쪽 정렬, 크게) */
 .custom-title {
-  font-size: 3.5em;  /* 더 크게 */
+  font-size: 3.5em; /* 글자 크기 증가 */
   font-weight: bold;
   margin: 20px 0;
   color: #2c3e50;
   text-align: left;
 }
 .custom-user-guide {
-  font-size: 1.8em;  /* 더 크게 */
+  font-size: 1.8em; /* 글자 크기 증가 */
   margin-bottom: 20px;
   color: #2c3e50;
   text-align: left;
 }
 /* 사용가이드 박스 스타일 (회색 제거, 흰색 배경) */
 .guide-box {
-  border: 2px solid #3498db;
+  border: 3px solid #3498db; /* 테두리 두께 증가 */
   border-radius: 10px;
-  padding: 20px;
+  padding: 20px; /* 패딩 증가 */
   background-color: #ffffff;
   margin: 20px 0;
   text-align: left;
-  font-size: 1.4em;  /* 더 크게 */
+  font-size: 1.2em; /* 글자 크기 증가 */
 }
 /* 프레임 스타일 */
 .frame {
-  border: 3px solid #3498db;  /* 더 두껍게 */
+  border: 3px solid #3498db; /* 테두리 두께 증가 */
   border-radius: 20px;
-  padding: 25px;
+  padding: 25px; /* 패딩 증가 */
   background-color: #ffffff;
   margin: 15px;
-  box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
+  box-shadow: 3px 3px 10px rgba(0,0,0,0.1);
 }
 /* 각 프레임 제목 크게 */
 .frame h3 {
-  font-size: 2.4em;  /* 더 크게 */
+  font-size: 2.2em; /* 글자 크기 증가 */
   margin-bottom: 20px;
   text-align: left;
 }
@@ -190,68 +191,52 @@ body {
 /* 포인트 버튼 스타일 */
 .gif-button {
   margin-top: 35px;
-  padding: 20px 40px;
-  font-size: 1.8em;  /* 더 크게 */
-  background-color: #ff6b00;  /* 포인트 색상으로 변경 */
+  padding: 20px 35px; /* 패딩 증가 */
+  font-size: 1.8em; /* 글자 크기 증가 */
+  background-color: #e67e22;
   color: #fff;
   border: none;
-  border-radius: 15px;
+  border-radius: 12px;
   cursor: pointer;
-  font-weight: bold;
-  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
-  transition: all 0.3s ease;
-}
-.gif-button:hover {
-  background-color: #ff8c33;
-  transform: translateY(-3px);
 }
 /* 슬라이더 스타일 (글자와 바 크게) */
 input[type=range] {
-  height: 30px;  /* 더 크게 */
+  height: 30px; /* 높이 증가 */
 }
 input[type=range]::-webkit-slider-thumb {
-  height: 30px;  /* 더 크게 */
-  width: 30px;
+  height: 30px; /* 높이 증가 */
+  width: 30px; /* 너비 증가 */
 }
 .slider-label {
-  font-size: 1.6em;  /* 더 크게 */
+  font-size: 1.6em; /* 글자 크기 증가 */
   margin-bottom: 8px;
 }
 /* 모든 input, select, button 글자 크기 키움 */
 input, button, select, textarea {
-  font-size: 1.4em;  /* 더 크게 */
+  font-size: 1.5em; /* 글자 크기 증가 */
 }
-/* 모든 라벨 크게 */
-label {
-  font-size: 1.3em !important;
+/* 라벨 글자 크기 키움 */
+label, .label-wrap span {
+  font-size: 1.3em !important; /* 글자 크기 증가 */
+  font-weight: bold;
 }
 /* 회색 배경 제거 */
-.gradio-container .prose {
-  background-color: #ffffff !important;
-  color: #2c3e50 !important;
-}
-.gradio-container .gr-form {
-  background-color: #ffffff !important;
-}
+.gradio-container .prose, 
+.gradio-container .gr-box, 
+.gradio-container .gr-form, 
 .gradio-container .gr-panel {
   background-color: #ffffff !important;
 }
-.gradio-container .gr-box {
-  background-color: #ffffff !important;
-}
-.gradio-container .gr-input {
+.gradio-container .gr-form, 
+.gradio-container .gr-group {
+  border-color: #3498db;
   background-color: #ffffff !important;
-  border: 2px solid #3498db !important;
 }
-.gradio-container .gr-checkbox {
-  transform: scale(1.5);  /* 체크박스 크게 */
-}
-.gradio-container .gr-radio {
-  transform: scale(1.5);  /* 라디오 버튼 크게 */
-}
-/* 모든 회색 배경 제거 */
-* {
-  background-color: #ffffff !important;
+.gradio-container .gr-input, 
+.gradio-container .gr-checkbox, 
+.gradio-container .gr-radio, 
+.gradio-container .gr-dropdown {
+  font-size: 1.4em; /* 글자 크기 증가 */
 }
 """