def get_css(): return """ @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap'); /* === 基本設定 === */ body, .gradio-container, .prose, button, input, textarea, span, div, label { font-family: 'JetBrains Mono', monospace !important; letter-spacing: -0.03em; } body, .gradio-container { background-color: #020617 !important; background-image: radial-gradient(circle at 50% 0%, #0f172a 0%, #020617 80%); color: #34d399 !important; } /* === タイトル === */ .title-area { margin-bottom: 20px; text-align: center; padding-top: 20px; border-bottom: 1px solid rgba(52, 211, 153, 0.2); padding-bottom: 10px; } .title-area h1 { font-size: 2.5rem !important; font-weight: 700; letter-spacing: 0.1em; color: #34d399 !important; text-shadow: 0 0 15px rgba(52, 211, 153, 0.3); margin-bottom: 0.2rem; } .subtitle { font-size: 0.75rem !important; color: #6ee7b7 !important; opacity: 0.8; } .description { font-size: 0.75rem !important; color: #94a3b8 !important; opacity: 0.9; margin: 0 auto 20px auto; line-height: 1.6; text-align: left !important; padding: 15px 20px; background: rgba(15, 23, 42, 0.5); border-radius: 4px; border-left: 2px solid #10b981; } .description a { color: #34d399 !important; text-decoration: underline; } .description p { text-align: left !important; margin: 0 !important; } /* === Column spacing === */ .main-row { gap: 24px !important; } .main-row > div { min-height: 700px; } /* === 枠 (Glass Frame) === */ .step-frame { background: rgba(2, 6, 23, 0.7) !important; border: 1px solid #10b981 !important; border-radius: 4px !important; padding: 12px 16px !important; margin-bottom: 12px !important; transition: all 0.3s ease !important; box-shadow: 0 0 10px rgba(16, 185, 129, 0.05); height: 100%; display: flex; flex-direction: column; } #right-panel { min-height: 600px; } .step-active { border-color: #34d399 !important; box-shadow: 0 0 20px rgba(16, 185, 129, 0.2) !important; opacity: 1 !important; } .step-inactive { border-color: #1e293b !important; opacity: 0.3 !important; pointer-events: none; } .step-label { font-size: 0.75rem; font-weight: 700; color: #34d399 !important; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; display: block; text-shadow: 0 0 5px rgba(52, 211, 153, 0.4); } .step-hint { font-size: 0.7rem !important; color: #6ee7b7 !important; opacity: 0.7; margin-bottom: 8px; } /* === 入力パーツ === */ label span { font-size: 0.7rem !important; margin-bottom: 4px !important; color: #6ee7b7 !important; } textarea, input { background-color: #020617 !important; border: 1px solid #10b981 !important; color: #34d399 !important; border-radius: 2px !important; font-size: 0.9rem !important; padding: 4px 8px !important; } /* Editable inputs should be white */ input:not([readonly]):not(:disabled), textarea:not([readonly]):not(:disabled) { color: #ffffff !important; } /* Dropdown inputs white when editable */ .svelte-1gfkn6j input { color: #ffffff !important; } /* Disabled dropdown styling */ .svelte-1gfkn6j[disabled], .svelte-1gfkn6j:disabled, input:disabled, textarea:disabled { opacity: 0.4 !important; cursor: not-allowed !important; } ::placeholder { color: #059669 !important; opacity: 0.7; } textarea:focus, input:focus { border-color: #34d399 !important; box-shadow: 0 0 10px rgba(52, 211, 153, 0.2) !important; } input[type=number] { color: #ffffff !important; } /* === タスクカード & ボタン === */ button { text-transform: uppercase !important; letter-spacing: 0.05em !important; font-weight: 700 !important; border-radius: 2px !important; } .task-card { height: 45px !important; min-height: 45px !important; background: #0f172a !important; border: 1px solid #10b981 !important; color: #34d399 !important; font-size: 0.75rem !important; } .task-card:hover { background: #10b981 !important; color: #020617 !important; box-shadow: 0 0 15px rgba(16, 185, 129, 0.4); } /* Active/selected task card - Gradio primary variant */ .task-card.primary, .task-card[data-variant="primary"], button.primary.task-card, .task-card.svelte-cmf5ev.primary { background: #10b981 !important; color: #020617 !important; box-shadow: 0 0 15px rgba(16, 185, 129, 0.4) !important; border-color: #34d399 !important; } /* === Dropdown options styling === */ ul[role="listbox"], .options, [data-testid="dropdown-options"], .dropdown-options, div[class*="dropdown"] ul { background-color: #1e293b !important; border: 1px solid #10b981 !important; max-height: 300px; overflow-y: auto; } ul[role="listbox"] li, .options li, [data-testid="dropdown-options"] li, .dropdown-options li, div[class*="dropdown"] ul li { background-color: #1e293b !important; color: #34d399 !important; padding: 8px 12px !important; } ul[role="listbox"] li:hover, .options li:hover, [data-testid="dropdown-options"] li:hover, .dropdown-options li:hover, div[class*="dropdown"] ul li:hover, ul[role="listbox"] li.selected, ul[role="listbox"] li[aria-selected="true"], .options li.selected { background-color: #334155 !important; color: #ffffff !important; } /* === チャット入力エリア (Step 3) === */ .input-area { display: flex; align-items: flex-end; gap: 10px; margin-top: auto; padding-top: 10px; } #prompt-preview textarea { background-color: #1e293b !important; border: 1px solid #34d399 !important; color: #34d399 !important; font-size: 0.85rem !important; line-height: 1.4 !important; } #send-btn { background: #34d399 !important; color: #020617 !important; border: none !important; width: 50px !important; height: 50px !important; font-size: 1.5rem !important; border-radius: 8px !important; display: flex; align-items: center; justify-content: center; padding-bottom: 4px !important; transition: all 0.2s ease; } #send-btn:hover { transform: scale(1.05); box-shadow: 0 0 15px rgba(52, 211, 153, 0.6); } /* Stop button style */ .stop-btn { background: #ef4444 !important; color: white !important; } .stop-btn:hover { background: #dc2626 !important; box-shadow: 0 0 15px rgba(239, 68, 68, 0.6) !important; } /* === チャットボット (バブルデザイン) === */ .bubble-wrap { background: transparent !important; } .user { background-color: #1e293b !important; color: #34d399 !important; border: 1px solid #10b981 !important; border-radius: 12px 12px 0 12px !important; padding: 12px !important; margin-bottom: 8px !important; text-align: right; margin-left: auto; max-width: 80%; } .bot { background-color: #020617 !important; color: #34d399 !important; border: 1px solid #34d399 !important; border-radius: 12px 12px 12px 0 !important; padding: 12px !important; margin-bottom: 16px !important; text-align: left; margin-right: auto; max-width: 80%; box-shadow: 0 0 10px rgba(16, 185, 129, 0.1); } /* アバター隠し */ .avatar-container { display: none !important; } /* === 実行秒数・タイマー・API表示を非表示にする設定 === */ .generating, .progress-text, .meta-text, .meta-text-center, .eta-bar, footer { display: none !important; } .loading-wrap { display: none !important; } """