VIDraft/mouse-Visual-Chat

1/* Modern color scheme */2:root {3  --primary: #0066cc;      4  --secondary: #3385ff;    5  --accent: #66a3ff;       6  --background: #f7f9fc;   7  --surface: #ffffff;      8  --text-primary: #2c3e50; 9  --text-secondary: #546e7a;10  --text-tertiary: #78909c;11  --success: #34c759;      12  --warning: #ff9500;      13  --error: #ff3b30;        14  --neutral-100: #f8f9fa;15  --neutral-200: #e9ecef;16  --neutral-300: #dee2e6;17  --neutral-400: #ced4da;18}19 20body {21  font-family: 'Inter', system-ui, sans-serif;22  background: var(--background);23  color: var(--text-primary);24  line-height: 1.5;25}26 27/* 탭 스타일 강화 */28.main-tabs > div.tab-nav {29    background: rgba(255, 255, 255, 0.95);30    padding: 10px 10px 0 10px;31    border-radius: 12px 12px 0 0;32    box-shadow: 0 -4px 20px rgba(0,0,0,0.05);33}34 35.main-tabs > div.tab-nav > button {36    font-size: 1.2em !important;37    padding: 0.8em 1.5em !important;38    background: rgba(255, 255, 255, 0.9) !important;39    border: 1px solid #eef2f6 !important;40    border-bottom: none !important;41    border-radius: 12px 12px 0 0 !important;42    margin-right: 8px !important;43    color: #94a3b8 !important;44    font-weight: 500 !important;45    transition: all 0.3s ease !important;46    position: relative !important;47    top: 1px !important;48}49 50.main-tabs > div.tab-nav > button:hover {51    background: linear-gradient(to bottom, #ffffff, #f8fafc) !important;52    color: #64748b !important;53    transform: translateY(-2px);54}55 56.main-tabs > div.tab-nav > button.selected {57    background: linear-gradient(45deg, #0084ff, #00a3ff) !important;58    color: white !important;59    border: none !important;60    box-shadow: 0 4px 15px rgba(0,132,255,0.3) !important;61    transform: translateY(-2px);62}63 64.main-tabs {65    margin-top: -20px !important;66    border-radius: 0 0 15px 15px !important;67    box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;68    border: 1px solid rgba(255,255,255,0.8) !important;69    background: white !important;70}71 72/* 탭 컨텐츠 영역 */73.main-tabs > div[role="tabpanel"] {74    background: white;75    border-radius: 0 0 12px 12px;76    padding: 20px;77    box-shadow: inset 0 2px 10px rgba(0,0,0,0.03);78}79 80/* 프롬프트 입력창 스타일 - 더 구체적인 선택자 */81.mouse-tab .ant-input-textarea .ant-input,82.mouse-tab .ant-input-textarea-large .ant-input,83#mouse-tab .ant-input-textarea .ant-input,84#mouse-tab .ant-input-textarea-large .ant-input,85.ant-input-textarea .ant-input,86.ant-input-textarea-large .ant-input,87div[class*="ant-input"] textarea,88textarea.ant-input {89    height: 300px !important;90    min-height: 300px !important;91    max-height: 300px !important;92    resize: none !important;93    border: 2px solid var(--neutral-200) !important;94    border-radius: 12px !important;95    padding: 1rem !important;96    font-size: 14px !important;97    line-height: 1.5 !important;98    width: 100% !important;99    box-sizing: border-box !important;100    overflow-y: auto !important;101}102 103/* 컨테이너 스타일도 강제 적용 */104.mouse-tab .ant-input-textarea,105.mouse-tab .ant-input-textarea-large,106#mouse-tab .ant-input-textarea,107#mouse-tab .ant-input-textarea-large,108.ant-input-textarea,109.ant-input-textarea-large,110div[class*="ant-input-textarea"] {111    height: 300px !important;112    min-height: 300px !important;113    max-height: 300px !important;114}115 116 117/* 추가적인 스타일 오버라이드 */118.ant-input-textarea-large .ant-input {119    height: 300px !important;120    min-height: 300px !important;121    max-height: 300px !important;122}123 124/* Gradio 컴포넌트 스타일 오버라이드 */125.gradio-container .gr-text-input,126.gradio-container textarea {127    height: 300px !important;128    min-height: 300px !important;129    max-height: 300px !important;130}131 132 133/* 입력창 부모 요소들의 높이 제한 해제 */134.ant-input-textarea-show-count::after,135.ant-input-textarea-large::after,136.ant-input-textarea::after {137    height: auto !important;138    min-height: auto !important;139    max-height: none !important;140}141 142/* iframe 컨테이너 */143.html_content {144    height: 800px !important;145    max-height: 800px !important;146    min-height: 800px !important;147    border-radius: 12px;148    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);149    background: var(--surface);150}151 152/* iframe 자체 */153iframe {154    height: 800px !important;155    max-height: 800px !important;156    min-height: 800px !important;157    width: 100% !important;158    border: none !important;159}160 161.left_header {162  display: flex;163  flex-direction: column;164  justify-content: center;165  align-items: center;166  background: linear-gradient(135deg, var(--surface), var(--neutral-100));167  backdrop-filter: blur(10px);168  border-radius: 24px;169  padding: 2rem;170  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);171  border: 1px solid var(--neutral-200);172  text-align: center;173  margin-bottom: 2rem;174}175 176.left_header img {177  width: 180px;178  margin-bottom: 1rem;179  border-radius: 12px;180  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);181}182 183.left_header h1 {184  margin: 0.5rem 0;185  font-weight: 600;186  color: var(--text-primary);187}188 189.render_header {190  height: 30px;191  width: 100%;192  padding: 5px 16px;193  background-color: var(--neutral-100);194  margin-top: 50px;195  border-radius: 8px 8px 0 0;196}197 198.header_btn {199  display: inline-block;200  height: 10px;201  width: 10px;202  border-radius: 50%;203  margin-right: 4px;204}205 206.render_header > .header_btn:nth-child(1) {207  background-color: var(--error);208}209 210.render_header > .header_btn:nth-child(2) {211  background-color: var(--warning);212}213 214.render_header > .header_btn:nth-child(3) {215  background-color: var(--success);216}217 218.setting-buttons {219  position: sticky;220  top: 1rem;221  right: 0;222  z-index: 1000;223  display: flex;224  gap: 8px;225  padding: 12px;226  background: rgba(255, 255, 255, 0.9);227  backdrop-filter: blur(8px);228  border-radius: 12px;229  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);230  border: 1px solid var(--neutral-200);231}232 233.ant-btn {234  flex: 1;235  min-width: 80px;236  border-radius: 8px;237  font-weight: 500;238  transition: all 0.3s;239  height: 40px;240  display: flex;241  align-items: center;242  justify-content: center;243}244 245.ant-btn-primary {246  background: linear-gradient(to right, var(--primary), var(--secondary));247  border: none;248  color: white;249}250 251.ant-btn-primary:hover {252  transform: translateY(-2px);253  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.3);254}255 256.ant-btn-default {257  background: var(--surface);258  border: 1px solid var(--primary);259  color: var(--primary);260}261 262.ant-btn-default:hover {263  color: var(--secondary);264  border-color: var(--secondary);265  transform: translateY(-2px);266  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.1);267}268 269.ant-btn-default[title="Code 실행"] {270  background-color: var(--success);271  color: white;272  border: none;273}274 275.ant-btn-default[title="Code 실행"]:hover {276  background-color: #40d869;277}278 279/* 스크롤바 설정 */280::-webkit-scrollbar {281  width: 8px;282  height: 8px;283}284 285::-webkit-scrollbar-track {286  background: var(--neutral-100);287}288 289::-webkit-scrollbar-thumb {290  background: var(--neutral-300);291  border-radius: 4px;292}293 294::-webkit-scrollbar-thumb:hover {295  background: var(--neutral-400);296}297 298/* Drawer customization */299.ant-drawer-content-wrapper {300  border-radius: 16px 0 0 16px;301}302 303.ant-drawer-header {304  background: var(--primary);305  color: white;306  border-radius: 16px 0 0 0;307}308 309.ant-drawer-title {310  color: white;311  font-weight: 500;312}313 314.ant-drawer-close {315  color: white;316}317 318.ant-drawer-body {319  background: var(--surface);320}321 322/* 입력창 포커스 스타일 */323.ant-input-textarea textarea:focus {324  border-color: var(--accent);325  box-shadow: 0 0 0 3px rgba(102, 163, 255, 0.2);326}327 328/* Responsive adjustments */329@media (max-width: 768px), screen and (max-height: 900px) {330    .left_header {331        padding: 1rem;332    }333    334    .setting-buttons {335        flex-wrap: wrap;336    }337 338    .ant-btn {339        min-width: 60px;340        font-size: 0.9rem;341    }342 343    /* 모바일에서도 동일한 높이 유지 */344    div[class*="ant-input-textarea"],345    div[class*="ant-input-textarea"] textarea,346    .ant-input-textarea,347    .ant-input-textarea textarea,348    .ant-input-textarea-large,349    .ant-input-textarea-large textarea,350    .ant-input.ant-input-textarea-large,351    .ant-input.ant-input-textarea-large textarea,352    textarea.ant-input,353    .ant-input-textarea .ant-input,354    .ant-input-textarea-large .ant-input,355    #mouse-tab textarea,356    .mouse-tab textarea,357    [class*="textbox"] textarea,358    .gradio-container textarea,359    .gr-text-input,360    textarea.gr-text-input,361    .gr-panel textarea {362        height: 300px !important;363        min-height: 300px !important;364        max-height: 300px !important;365    }366    367    .html_content,368    iframe {369        height: 800px !important;370        min-height: 800px !important;371        max-height: 800px !important;372    }373 374    .right_panel {375        height: calc(100vh - 80px);376        min-height: 600px;377    }378 379    .html_content {380        height: calc(100vh - 160px);381        min-height: 500px;382    }383}384 385footer, .footer, div[class*="footer"], #footer {386  display: none !important;387}388 389/* 우측 패널 스타일 */390.right_panel {391    background: white;392    border-radius: 15px;393    padding: 20px;394    box-shadow: 0 4px 15px rgba(0,0,0,0.1);395    height: calc(100vh - 100px);396    min-height: 800px;397}