Spaces:
Sleeping
Sleeping
| :root { | |
| /* Google Material Design colors */ | |
| --google-blue: #4285f4; | |
| --google-red: #ea4335; | |
| --google-yellow: #fbbc05; | |
| --google-green: #34a853; | |
| --google-gray: #5f6368; | |
| --google-blue-hover: #3367d6; | |
| --google-surface: #ffffff; | |
| --google-background: #f8f9fa; | |
| --google-border: #dadce0; | |
| --google-text-primary: #202124; | |
| --google-text-secondary: #5f6368; | |
| --google-disabled: #e0e0e0; | |
| /* Spacing and dimensions */ | |
| --spacing-xs: 4px; | |
| --spacing-sm: 8px; | |
| --spacing-md: 16px; | |
| --spacing-lg: 24px; | |
| --spacing-xl: 32px; | |
| --border-radius: 8px; | |
| --shadow-1: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15); | |
| --shadow-2: 0 2px 6px 2px rgba(60, 64, 67, 0.15); | |
| --shadow-3: 0 4px 8px 3px rgba(60, 64, 67, 0.15); | |
| } | |
| /* Base styles */ | |
| body { | |
| font-family: 'Roboto', sans-serif; | |
| background-color: var(--google-background); | |
| color: var(--google-text-primary); | |
| margin: 0; | |
| padding: 0; | |
| height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| /* Material typography */ | |
| h1, h2, h3, h4, h5, h6 { | |
| font-family: 'Google Sans', 'Roboto', sans-serif; | |
| font-weight: 500; | |
| margin: 0; | |
| color: var(--google-text-primary); | |
| } | |
| .product-name { | |
| font-size: 22px; | |
| line-height: 28px; | |
| font-weight: 500; | |
| } | |
| /* App container */ | |
| .app-container { | |
| display: flex; | |
| flex-direction: column; | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| /* Header styling */ | |
| .app-header { | |
| background-color: var(--google-surface); | |
| box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3); | |
| padding: var(--spacing-md); | |
| z-index: 10; | |
| } | |
| .header-content { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| max-width: 1600px; | |
| margin: 0 auto; | |
| width: 100%; | |
| } | |
| .logo-section { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-sm); | |
| } | |
| .logo-icon { | |
| color: var(--google-blue); | |
| } | |
| .header-actions { | |
| display: flex; | |
| gap: var(--spacing-sm); | |
| } | |
| /* Main container */ | |
| .main-container { | |
| display: flex; | |
| flex: 1; | |
| overflow: hidden; | |
| max-width: 1600px; | |
| margin: 0 auto; | |
| width: 100%; | |
| height: calc(100vh - 64px); | |
| padding: var(--spacing-md); | |
| gap: var(--spacing-md); | |
| } | |
| /* Panels - update the width ratio */ | |
| .panel { | |
| display: flex; | |
| flex-direction: column; | |
| overflow: hidden; | |
| background-color: var(--google-surface); | |
| border-radius: var(--border-radius); | |
| height: 100%; | |
| box-shadow: var(--shadow-1); | |
| } | |
| .chat-panel { | |
| flex: 0.4; /* Reduced from 1 to 0.4 (40% width) */ | |
| border-right: none; | |
| } | |
| .notebook-panel { | |
| flex: 0.6; /* Increased from 1 to 0.6 (60% width) */ | |
| overflow: hidden; | |
| } | |
| /* Conversation container */ | |
| .conversation-container { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: var(--spacing-md); | |
| } | |
| /* Custom scrollbar styles */ | |
| .conversation-container::-webkit-scrollbar, | |
| .notebook-preview::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| .conversation-container::-webkit-scrollbar-track, | |
| .notebook-preview::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| .conversation-container::-webkit-scrollbar-thumb, | |
| .notebook-preview::-webkit-scrollbar-thumb { | |
| background-color: rgba(95, 99, 104, 0.3); | |
| border-radius: 20px; | |
| } | |
| .conversation-container::-webkit-scrollbar-thumb:hover, | |
| .notebook-preview::-webkit-scrollbar-thumb:hover { | |
| background-color: rgba(95, 99, 104, 0.5); | |
| } | |
| /* Input container */ | |
| .input-container { | |
| border-top: 1px solid var(--google-border); | |
| padding: var(--spacing-md); | |
| background-color: var(--google-surface); | |
| } | |
| .input-options { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .model-selector { | |
| border: 1px solid var(--google-border); | |
| border-radius: var(--border-radius); | |
| padding: var(--spacing-xs) var(--spacing-md); | |
| font-size: 14px; | |
| color: var(--google-text-primary); | |
| background-color: var(--google-surface); | |
| width: auto; | |
| outline: none; | |
| } | |
| .model-selector:focus { | |
| border-color: var(--google-blue); | |
| } | |
| .mode-toggle { | |
| display: flex; | |
| border: 1px solid var(--google-blue); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| .toggle-button { | |
| background: none; | |
| border: none; | |
| padding: 6px 12px; | |
| font-size: 14px; | |
| cursor: pointer; | |
| color: var(--google-blue); | |
| } | |
| .toggle-button.active { | |
| background-color: var(--google-blue); | |
| color: white; | |
| } | |
| /* Fix for disabled toggle buttons */ | |
| .toggle-button:disabled { | |
| cursor: not-allowed; | |
| opacity: 0.7; | |
| } | |
| /* Keep active styling even when disabled */ | |
| .toggle-button.active:disabled { | |
| background-color: var(--google-blue); | |
| color: white; | |
| opacity: 0.8; | |
| } | |
| /* Inactive button when disabled */ | |
| .toggle-button:not(.active):disabled { | |
| color: var(--google-text-secondary); | |
| background-color: transparent; | |
| } | |
| .input-field-container { | |
| position: relative; | |
| margin-bottom: var(--spacing-sm); | |
| } | |
| .prompt-input { | |
| width: 100%; | |
| border: 1px solid var(--google-border); | |
| border-radius: var(--border-radius); | |
| padding: var(--spacing-md); | |
| padding-right: 50px; /* Make room for the send button */ | |
| font-family: 'Roboto', sans-serif; | |
| font-size: 16px; | |
| resize: none; | |
| outline: none; | |
| transition: border-color 0.2s; | |
| } | |
| .prompt-input:focus { | |
| border-color: var(--google-blue); | |
| box-shadow: 0 0 0 1px var(--google-blue); | |
| } | |
| /* Send button inside input */ | |
| .send-button { | |
| position: absolute; | |
| right: 12px; | |
| top: 12px; | |
| background-color: var(--google-blue); | |
| color: white; | |
| border: none; | |
| border-radius: 50%; | |
| width: 36px; | |
| height: 36px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: background-color 0.2s; | |
| } | |
| .send-button:hover { | |
| background-color: var(--google-blue-hover); | |
| } | |
| .send-button:disabled { | |
| background-color: var(--google-disabled); | |
| cursor: not-allowed; | |
| } | |
| .send-button .material-icons { | |
| font-size: 18px; | |
| } | |
| /* Hide the original action button container */ | |
| .input-actions { | |
| display: none; | |
| } | |
| /* Google Buttons */ | |
| .google-button { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| border: none; | |
| border-radius: 4px; | |
| font-family: 'Google Sans', 'Roboto', sans-serif; | |
| font-size: 14px; | |
| font-weight: 500; | |
| padding: 8px 24px; | |
| cursor: pointer; | |
| transition: background-color 0.2s, box-shadow 0.2s; | |
| white-space: nowrap; | |
| gap: var(--spacing-sm); | |
| height: 36px; | |
| letter-spacing: 0.25px; | |
| outline: none; | |
| position: relative; | |
| } | |
| .google-button .material-icons { | |
| font-size: 18px; | |
| } | |
| .google-button.primary { | |
| background-color: var(--google-blue); | |
| color: white; | |
| } | |
| .google-button.primary:hover { | |
| background-color: var(--google-blue-hover); | |
| box-shadow: var(--shadow-1); | |
| } | |
| .google-button.outlined { | |
| background-color: transparent; | |
| border: 1px solid var(--google-border); | |
| color: var(--google-blue); | |
| } | |
| .google-button.outlined:hover { | |
| background-color: rgba(66, 133, 244, 0.04); | |
| } | |
| .google-button.text { | |
| background-color: transparent; | |
| color: var(--google-blue); | |
| padding: 8px 16px; | |
| } | |
| .google-button.text:hover { | |
| background-color: rgba(66, 133, 244, 0.04); | |
| } | |
| .google-button:disabled { | |
| background-color: var(--google-disabled); | |
| color: var(--google-text-secondary); | |
| cursor: not-allowed; | |
| box-shadow: none; | |
| } | |
| /* Notebook panel */ | |
| .notebook-panel { | |
| overflow: hidden; | |
| } | |
| .notebook-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: var(--spacing-md); | |
| border-bottom: 1px solid var(--google-border); | |
| } | |
| .notebook-title { | |
| font-size: 16px; | |
| font-weight: 500; | |
| color: var(--google-text-primary); | |
| } | |
| .notebook-preview { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: var(--spacing-md); | |
| background-color: var(--google-surface); | |
| } | |
| .placeholder-content { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| height: 100%; | |
| color: var(--google-text-secondary); | |
| } | |
| .large-icon { | |
| font-size: 48px; | |
| margin-bottom: var(--spacing-md); | |
| color: var(--google-gray); | |
| } | |
| /* Welcome message */ | |
| .welcome-message { | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| .welcome-message h2 { | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-sm); | |
| margin-bottom: var(--spacing-md); | |
| color: var(--google-blue); | |
| } | |
| .welcome-steps { | |
| margin: var(--spacing-lg) 0; | |
| } | |
| .welcome-step { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .step-number { | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 50%; | |
| background-color: var(--google-blue); | |
| color: white; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 14px; | |
| margin-right: var(--spacing-md); | |
| } | |
| .step-text { | |
| font-size: 16px; | |
| } | |
| .info-card { | |
| display: flex; | |
| background-color: #e8f0fe; | |
| border-radius: var(--border-radius); | |
| padding: var(--spacing-md); | |
| margin: var(--spacing-md) 0; | |
| } | |
| .info-icon { | |
| color: var(--google-blue); | |
| margin-right: var(--spacing-md); | |
| } | |
| .info-content { | |
| flex: 1; | |
| } | |
| .info-content p { | |
| margin: 0; | |
| } | |
| .example-section { | |
| margin-top: var(--spacing-lg); | |
| } | |
| .example-list { | |
| list-style-type: none; | |
| padding: 0; | |
| } | |
| .example-list li { | |
| padding: var(--spacing-sm) 0; | |
| border-left: 3px solid var(--google-blue); | |
| padding-left: var(--spacing-md); | |
| margin-bottom: var(--spacing-sm); | |
| background-color: rgba(66, 133, 244, 0.05); | |
| border-radius: 0 var(--border-radius) var(--border-radius) 0; | |
| } | |
| /* Messages */ | |
| .message { | |
| margin-bottom: var(--spacing-md); | |
| max-width: 85%; | |
| padding: var(--spacing-md); | |
| border-radius: var(--border-radius); | |
| } | |
| .user-message { | |
| background-color: #e8f0fe; | |
| margin-left: auto; | |
| position: relative; | |
| box-shadow: var(--shadow-1); | |
| } | |
| .ai-message { | |
| background-color: white; | |
| border: 1px solid var(--google-border); | |
| margin-right: auto; | |
| position: relative; | |
| box-shadow: var(--shadow-1); | |
| } | |
| /* Fix for user message formatting */ | |
| .user-prefix { | |
| display: inline; | |
| font-weight: 500; | |
| } | |
| .message-content { | |
| display: inline; | |
| } | |
| .message-content p { | |
| display: inline; | |
| margin: 0; | |
| } | |
| .message-content p:not(:first-child) { | |
| display: block; | |
| margin-top: var(--spacing-sm); | |
| } | |
| /* Typing indicator */ | |
| .typing-indicator { | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .typing-dot { | |
| background-color: var(--google-blue); | |
| border-radius: 50%; | |
| width: 8px; | |
| height: 8px; | |
| animation: typing-dot 1.4s infinite; | |
| } | |
| .typing-dot:nth-child(2) { | |
| animation-delay: 0.2s; | |
| } | |
| .typing-dot:nth-child(3) { | |
| animation-delay: 0.4s; | |
| } | |
| @keyframes typing-dot { | |
| 0%, 60%, 100% { transform: translateY(0); } | |
| 30% { transform: translateY(-6px); } | |
| } | |
| /* Notebook cell styling */ | |
| .notebook-cell { | |
| margin-bottom: var(--spacing-md); | |
| border: 1px solid var(--google-border); | |
| border-radius: var(--border-radius); | |
| overflow: hidden; | |
| background-color: var(--google-surface); | |
| box-shadow: var(--shadow-1); | |
| } | |
| .cell-header { | |
| padding: var(--spacing-sm) var(--spacing-md); | |
| font-size: 13px; | |
| font-weight: 500; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| border-bottom: 1px solid var(--google-border); | |
| } | |
| .cell-type { | |
| display: inline-flex; | |
| align-items: center; | |
| font-family: 'Google Sans', 'Roboto', sans-serif; | |
| font-size: 13px; | |
| } | |
| .markdown-header { | |
| background-color: #e8f0fe; | |
| color: #000000; | |
| } | |
| /* Make code header match markdown header */ | |
| .code-header { | |
| background-color: #e8f0fe; /* Changed from #e6f4ea to match markdown-header */ | |
| color: #000000; /* Changed from #188038 to match markdown-header */ | |
| } | |
| .cell-content { | |
| padding: 0; | |
| } | |
| .cell-markdown .cell-content { | |
| padding: var(--spacing-md); | |
| } | |
| .cell-code .cell-content { | |
| padding: 0; | |
| } | |
| /* Code cell styling */ | |
| .cell-code pre { | |
| margin: 0 ; | |
| border-radius: 0; | |
| } | |
| .cell-code code { | |
| padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) 0 ; | |
| font-family: 'Roboto Mono', monospace; | |
| font-size: 14px; | |
| } | |
| /* Modal styling */ | |
| .google-modal { | |
| border-radius: var(--border-radius); | |
| border: none; | |
| box-shadow: var(--shadow-3); | |
| } | |
| .google-modal .modal-header { | |
| border-bottom: 1px solid var(--google-border); | |
| padding: var(--spacing-md); | |
| } | |
| .google-modal .modal-title { | |
| font-family: 'Google Sans', 'Roboto', sans-serif; | |
| font-weight: 500; | |
| font-size: 18px; | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-sm); | |
| } | |
| .google-modal .modal-body { | |
| padding: var(--spacing-md); | |
| } | |
| .google-modal .modal-footer { | |
| border-top: 1px solid var(--google-border); | |
| padding: var(--spacing-md); | |
| } | |
| /* Input fields in modal */ | |
| .input-field { | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .input-label { | |
| display: block; | |
| margin-bottom: var(--spacing-sm); | |
| font-size: 14px; | |
| color: var(--google-text-secondary); | |
| } | |
| .text-input { | |
| width: 100%; | |
| border: 1px solid var(--google-border); | |
| border-radius: 4px; | |
| padding: 10px 12px; | |
| font-family: 'Roboto', sans-serif; | |
| font-size: 16px; | |
| outline: none; | |
| transition: border-color 0.2s; | |
| } | |
| .text-input:focus { | |
| border-color: var(--google-blue); | |
| box-shadow: 0 0 0 1px var(--google-blue); | |
| } | |
| .input-helper { | |
| margin-top: 4px; | |
| font-size: 12px; | |
| color: var(--google-text-secondary); | |
| } | |
| /* Steps card */ | |
| .steps-card { | |
| background-color: var(--google-background); | |
| border-radius: var(--border-radius); | |
| overflow: hidden; | |
| margin-bottom: var(--spacing-md); | |
| } | |
| .steps-header { | |
| background-color: #e8f0fe; | |
| padding: var(--spacing-sm) var(--spacing-md); | |
| display: flex; | |
| align-items: center; | |
| gap: var(--spacing-sm); | |
| color: var(--google-blue); | |
| } | |
| .steps-content { | |
| padding: var(--spacing-md); | |
| } | |
| .steps-list { | |
| margin: 0; | |
| padding-left: 20px; | |
| } | |
| .steps-list li { | |
| padding: 4px 0; | |
| } | |
| /* Floating scroll button */ | |
| .scroll-button { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background-color: white; | |
| color: var(--google-text-primary); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border: 1px solid var(--google-border); | |
| cursor: pointer; | |
| box-shadow: var(--shadow-2); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| z-index: 1000; | |
| } | |
| .scroll-button.visible { | |
| opacity: 1; | |
| } | |
| .scroll-button:hover { | |
| background-color: #f8f9fa; | |
| } | |
| /* Add spinning animation for loading state */ | |
| @keyframes spin-animation { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .material-icons.spinning { | |
| animation: spin-animation 1.5s linear infinite; | |
| } | |
| /* Media queries for responsive design */ | |
| @media (max-width: 768px) { | |
| .main-container { | |
| flex-direction: column; | |
| padding: var(--spacing-sm); | |
| gap: var(--spacing-sm); | |
| } | |
| .chat-panel { | |
| height: 40%; /* Reduced from 50% to 40% */ | |
| border-right: none; | |
| border-bottom: none; | |
| flex: none; /* Override the horizontal flex ratio when in column layout */ | |
| } | |
| .notebook-panel { | |
| height: 60%; /* Increased from 50% to 60% */ | |
| flex: none; /* Override the horizontal flex ratio when in column layout */ | |
| } | |
| .send-button { | |
| right: 8px; | |
| top: 8px; | |
| width: 32px; | |
| height: 32px; | |
| } | |
| } | |
| /* Developer Info Modal Styles */ | |
| .creator-section { | |
| padding: var(--spacing-md); | |
| background-color: var(--google-background); | |
| border-radius: var(--border-radius); | |
| } | |
| .section-title { | |
| margin-bottom: var(--spacing-md); | |
| color: var(--google-blue); | |
| font-family: 'Google Sans', 'Roboto', sans-serif; | |
| font-size: 18px; | |
| } | |
| .developer-info { | |
| display: flex; | |
| flex-direction: column; | |
| gap: var(--spacing-sm); | |
| } | |
| .developer-detail { | |
| font-size: 15px; | |
| line-height: 1.5; | |
| } | |
| .developer-detail a { | |
| color: var(--google-blue); | |
| text-decoration: none; | |
| } | |
| .developer-detail a:hover { | |
| text-decoration: underline; | |
| } | |
| .contact-cta { | |
| margin-top: var(--spacing-lg); | |
| } | |
| .call-to-action { | |
| font-family: 'Google Sans', 'Roboto', sans-serif; | |
| font-weight: 500; | |
| color: var(--google-text-primary); | |
| font-size: 16px; | |
| } | |