Update app.py

app.py

@@ -560,103 +560,83 @@ custom_theme = gr.themes.Base(
 )
 
 css = '''
-#gen_btn{height: 100%}
+/* 기존 스타일 유지 */
+#gen_btn{height: 90%}  /* 100% -> 90% */
 #title{text-align: center}
-#title h1{font-size: 3em; display:inline-flex; align-items:center}
-#title img{width: 100px; margin-right: 0.25em}
-#lora_list{background: var(--block-background-fill);padding: 0 1em .3em; font-size: 90%}
-.custom_lora_card{margin-bottom: 1em}
-.card_internal{display: flex;height: 100px;margin-top: .5em}
-.card_internal img{margin-right: 1em}
+#title h1{font-size: 2.7em; display:inline-flex; align-items:center}  /* 3em -> 2.7em */
+#title img{width: 90px; margin-right: 0.225em}  /* 100px -> 90px, 0.25em -> 0.225em */
+#lora_list{background: var(--block-background-fill);padding: 0 0.9em .27em; font-size: 81%}  /* 90% 적용 */
+.custom_lora_card{margin-bottom: 0.9em}
+.card_internal{display: flex;height: 90px;margin-top: .45em}  /* 100px -> 90px */
+.card_internal img{margin-right: 0.9em}
 .styler{--form-gap-width: 0px !important}
-#progress{height:30px}
+#progress{height:27px}  /* 30px -> 27px */
 #progress .generating{display:none}
-.progress-container {width: 100%;height: 30px;background-color: #f0f0f0;border-radius: 15px;overflow: hidden;margin-bottom: 20px}
-.progress-bar {height: 100%;background-color: #4f46e5;width: calc(var(--current) / var(--total) * 100%);transition: width 0.5s ease-in-out}
-#component-8, .button_total{height: 100%; align-self: stretch;}
-#loaded_loras [data-testid="block-info"]{font-size:80%}
-#custom_lora_structure{background: var(--block-background-fill)}
-#custom_lora_btn{margin-top: auto;margin-bottom: 11px}
-#random_btn{font-size: 300%}
-#component-11{align-self: stretch;}
+.progress-container {
+    width: 90%;  /* 100% -> 90% */
+    height: 27px;  /* 30px -> 27px */
+    background-color: #f0f0f0;
+    border-radius: 13.5px;  /* 15px -> 13.5px */
+    overflow: hidden;
+    margin-bottom: 18px  /* 20px -> 18px */
+}
 
+/* 갤러리 관련 스타일 */
 #lora_gallery {
-    margin: 20px 0;
-    padding: 10px;
+    margin: 18px 0;  /* 20px -> 18px */
+    padding: 9px;  /* 10px -> 9px */
     border: 1px solid #ddd;
-    border-radius: 12px;
+    border-radius: 10.8px;  /* 12px -> 10.8px */
     background: linear-gradient(to bottom right, #ffffff, #f8f9fa);
-    width: 100% !important;
-    height: 800px !important;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-    display: block !important;
-}
-
-/* 갤러리 그리드 컨테이너 */
-#gallery {
-    display: grid !important;
-    grid-template-columns: repeat(10, 1fr) !important;
-    gap: 10px !important;
-    padding: 10px !important;
-    width: 100% !important;
-    height: 100% !important;
-    overflow-y: auto !important;
-    max-width: 100% !important;
+    width: 90% !important;  /* 100% -> 90% */
+    height: 720px !important;  /* 800px -> 720px */
+    box-shadow: 0 3.6px 5.4px -0.9px rgba(0, 0, 0, 0.1);
 }
 
-/* 갤러리 아이템 */
-.gallery-item {
-    position: relative !important;
-    width: 100% !important;
-    aspect-ratio: 1 !important;
-    margin: 0 !important;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-    border-radius: 12px;
-    overflow: hidden;
+/* 컴포넌트 크기 조정을 위한 새로운 스타일 */
+.input-container {
+    margin: 4.5px !important;  /* 5px -> 4.5px */
+    padding: 4.5px !important;
 }
 
-/* 갤러리 이미지 */
-.gallery-item img {
-    width: 100% !important;
-    height: 100% !important;
-    object-fit: cover !important;
-    border-radius: 12px !important;
+.button_total {
+    padding: 7.2px 13.5px !important;  /* 8px 15px -> 7.2px 13.5px */
+    font-size: 0.81em !important;  /* 0.9em -> 0.81em */
 }
 
-/* 갤러리 그리드 래퍼 */
-.wrap, .svelte-w6dy5e {
-    display: grid !important;
-    grid-template-columns: repeat(10, 1fr) !important;  /* 10개로 통일 */
-    gap: 10px !important;
-    width: 100% !important;
-    max-width: 100% !important;
+.slider-container {
+    max-width: 85.5% !important;  /* 95% -> 85.5% */
 }
 
-/* 모든 컨테이너 공통 설정 */
-.container, .content, .block, .contain {
-    width: 100% !important;
-    max-width: 100% !important;
-    margin: 0 !important;
-    padding: 0 !important;
+/* 탭 컨테이너 여백 조정 */
+.tab-content {
+    padding: 0 18px !important;  /* 20px -> 18px */
+    max-width: 85.5% !important;  /* 95% -> 85.5% */
+    margin: 0 auto !important;
 }
 
-/* 행 설정 */
-.row {
-    width: 100% !important;
-    margin: 0 !important;
-    padding: 0 !important;
+/* 컴포넌트들의 border-radius 조정 */
+.gradio-container .input, 
+.gradio-container .button,
+.gradio-container .block,
+.gallery-item,
+#lora_gallery {
+    border-radius: 10.8px;  /* 12px -> 10.8px */
 }
 
-/* 입체감 있는 버튼 */
+/* 입체감 있는 버튼 효과 조정 */
 .button_total {
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    transition: all 0.3s ease;
+    box-shadow: 0 3.6px 5.4px -0.9px rgba(0, 0, 0, 0.1), 0 1.8px 3.6px -0.9px rgba(0, 0, 0, 0.06);
 }
 
 .button_total:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    transform: translateY(-1.8px);  /* -2px -> -1.8px */
+    box-shadow: 0 9px 13.5px -2.7px rgba(0, 0, 0, 0.1), 0 3.6px 5.4px -1.8px rgba(0, 0, 0, 0.05);
+}
+
+/* 스크롤바 크기 조정 */
+#gallery::-webkit-scrollbar {
+    width: 7.2px;  /* 8px -> 7.2px */
 }
 
 /* 입체감 있는 입력 필드 */