Spaces:
Running
Running
| /* | |
| -- DESIGN REFRESH -- | |
| - Updated color palette for a slightly more modern and vibrant feel. | |
| - Reduced main border-radius for a sharper, cleaner look. | |
| - Enhanced box-shadows for better depth. | |
| - Added subtle transitions and hover effects for improved user experience. | |
| - Refined input focus states for better accessibility and visual feedback. | |
| */ | |
| :root { | |
| /* Updated Color Palette */ | |
| --md-sys-color-primary: #7156B3; | |
| --md-sys-color-primary-rgb: 113, 86, 179; /* For use in rgba() */ | |
| --md-sys-color-on-primary: #FFFFFF; | |
| --md-sys-color-primary-container: #EADDFF; | |
| --md-sys-color-on-primary-container: #21005D; | |
| --md-sys-color-error: #B3261E; | |
| --md-sys-color-error-container: #F9DEDC; | |
| --md-sys-color-on-error-container: #410E0B; | |
| /* Slightly cooler background tones */ | |
| --md-sys-color-background: #F8F7FC; | |
| --md-sys-color-on-background: #1C1B1F; | |
| --md-sys-color-surface: #FFFFFF; | |
| --md-sys-color-surface-variant: #E7E0EC; | |
| --md-sys-color-outline: #79747E; | |
| --md-sys-color-surface-container-low: #F3EFF8; | |
| /* Updated Layout Variables */ | |
| --border-radius: 12px; /* Sharper corners */ | |
| --border-radius-small: 8px; | |
| --transition-speed: 0.25s; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| body { | |
| font-family: 'Assistant', sans-serif; | |
| background-color: var(--md-sys-color-background); | |
| color: var(--md-sys-color-on-background); | |
| line-height: 1.6; | |
| transition: background-color var(--transition-speed) ease; | |
| } | |
| /* --- Beta Banner --- */ | |
| .beta-banner { | |
| display: none; /* Initially hidden, shown by JS */ | |
| background: linear-gradient(135deg, #EADDFF, #D0BCFF); | |
| border: 1px solid var(--md-sys-color-primary); | |
| border-radius: var(--border-radius); | |
| padding: 1.5rem; | |
| margin-bottom: 2rem; | |
| position: relative; | |
| box-shadow: 0 6px 20px rgba(var(--md-sys-color-primary-rgb), 0.15); | |
| animation: fadeIn 0.5s ease-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(-20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .banner-content { | |
| display: flex; | |
| align-items: center; | |
| gap: 1.5rem; | |
| flex-wrap: wrap; | |
| } | |
| .banner-icon .material-symbols-outlined { | |
| font-size: 48px; | |
| color: var(--md-sys-color-primary); | |
| } | |
| .banner-text { | |
| flex: 1; | |
| min-width: 250px; | |
| } | |
| .banner-text h3 { | |
| font-size: 1.4rem; | |
| font-weight: 700; | |
| color: var(--md-sys-color-on-primary-container); | |
| margin-bottom: 0.25rem; | |
| } | |
| .banner-text p { | |
| font-size: 1rem; | |
| color: #49454F; | |
| line-height: 1.5; | |
| } | |
| .banner-action .btn { | |
| white-space: nowrap; | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.1); | |
| } | |
| .close-banner-btn { | |
| position: absolute; | |
| top: 12px; | |
| left: 12px; /* For RTL layout */ | |
| background: transparent; | |
| border: none; | |
| cursor: pointer; | |
| color: var(--md-sys-color-outline); | |
| padding: 4px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease; | |
| } | |
| .close-banner-btn:hover { | |
| background-color: rgba(var(--md-sys-color-primary-rgb), 0.1); | |
| color: var(--md-sys-color-primary); | |
| } | |
| @media (max-width: 768px) { | |
| .banner-content { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| text-align: right; | |
| } | |
| .banner-action { | |
| margin-top: 1rem; | |
| align-self: center; | |
| } | |
| } | |
| .container { | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 2rem 1.5rem; | |
| } | |
| .card { | |
| background-color: var(--md-sys-color-surface); /* Changed from container-low for better contrast */ | |
| border-radius: var(--border-radius); | |
| padding: 2rem; | |
| border: 1px solid var(--md-sys-color-surface-variant); | |
| /* Enhanced shadow for more depth */ | |
| box-shadow: 0 4px 16px rgba(0,0,0,0.07); | |
| transition: all var(--transition-speed) ease; | |
| } | |
| header { | |
| padding-bottom: 2rem; | |
| text-align: center; | |
| } | |
| h1, h2 { | |
| font-weight: 700; | |
| color: var(--md-sys-color-primary); | |
| } | |
| h1 { | |
| font-size: 2.6rem; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 1rem; | |
| letter-spacing: -1px; | |
| } | |
| h2 { | |
| font-size: 1.5rem; | |
| margin-bottom: 1.5rem; | |
| /* Subtler bottom border */ | |
| border-bottom: 1px solid var(--md-sys-color-surface-variant); | |
| padding-bottom: 0.75rem; | |
| } | |
| .material-symbols-outlined { | |
| font-size: inherit; | |
| vertical-align: middle; | |
| } | |
| .btn { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| padding: 10px 24px; | |
| font-family: 'Assistant', sans-serif; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| border-radius: 99px; | |
| border: none; | |
| cursor: pointer; | |
| transition: all var(--transition-speed) ease; | |
| text-decoration: none; | |
| } | |
| .btn:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| background-color: var(--md-sys-color-outline); | |
| transform: none; | |
| box-shadow: none; | |
| } | |
| .btn-primary { | |
| background-color: var(--md-sys-color-primary); | |
| color: var(--md-sys-color-on-primary); | |
| } | |
| .btn-secondary { | |
| background-color: var(--md-sys-color-surface-variant); | |
| color: var(--md-sys-color-on-background); | |
| border: 1px solid var(--md-sys-color-outline); | |
| } | |
| .btn-secondary:hover:not(:disabled) { | |
| background-color: var(--md-sys-color-surface-container-low); | |
| border-color: var(--md-sys-color-primary); | |
| } | |
| .btn:hover:not(:disabled) { | |
| /* Adding a subtle lift effect on hover */ | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 12px rgba(var(--md-sys-color-primary-rgb), 0.15); | |
| } | |
| .btn-primary:hover:not(:disabled) { | |
| background-color: #5f43a7; /* Slightly darker purple on hover */ | |
| } | |
| .input-group { | |
| margin-bottom: 1.5rem; | |
| } | |
| .input-group label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| font-weight: 600; | |
| color: var(--md-sys-color-on-background); | |
| } | |
| .input-group input[type="password"], .input-group input[type="text"], .input-group select, .input-group textarea { | |
| width: 100%; | |
| padding: 12px; | |
| border: 1px solid var(--md-sys-color-outline); | |
| border-radius: var(--border-radius-small); | |
| font-size: 1rem; | |
| background-color: var(--md-sys-color-surface); | |
| font-family: 'Assistant', sans-serif; | |
| transition: all var(--transition-speed) ease; | |
| } | |
| /* Enhanced focus state for inputs */ | |
| .input-group input[type="password"]:focus, | |
| .input-group input[type="text"]:focus, | |
| .input-group select:focus, | |
| .input-group textarea:focus { | |
| outline: none; | |
| border-color: var(--md-sys-color-primary); | |
| box-shadow: 0 0 0 3px rgba(var(--md-sys-color-primary-rgb), 0.1); | |
| } | |
| .input-group textarea { | |
| resize: vertical; | |
| min-height: 80px; | |
| } | |
| #model-custom-input { | |
| margin-top: 0.75rem; | |
| } | |
| .file-input-wrapper { | |
| border: 2px dashed var(--md-sys-color-outline); | |
| border-radius: var(--border-radius); | |
| padding: 2rem; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all var(--transition-speed) ease; | |
| } | |
| .file-input-wrapper:hover, .file-input-wrapper.drag-over { | |
| background-color: var(--md-sys-color-primary-container); | |
| border-color: var(--md-sys-color-primary); | |
| } | |
| .file-input-wrapper.disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| background-color: var(--md-sys-color-surface-container-low); | |
| border-color: var(--md-sys-color-outline); | |
| } | |
| .file-input-wrapper.disabled:hover { | |
| background-color: var(--md-sys-color-surface-container-low); | |
| border-color: var(--md-sys-color-outline); | |
| } | |
| .file-input-wrapper input[type="file"] { | |
| display: none; | |
| } | |
| .file-name { | |
| margin-top: 1rem; | |
| font-weight: 600; | |
| color: var(--md-sys-color-primary); | |
| } | |
| #results-section { | |
| display: none; | |
| margin-top: 2rem; | |
| } | |
| .results-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1rem; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| } | |
| .results-header h2 { | |
| margin-bottom: 0; | |
| padding-bottom: 0; | |
| border-bottom: none; | |
| } | |
| .view-toggle { | |
| display: flex; | |
| border: 1px solid var(--md-sys-color-outline); | |
| border-radius: 99px; | |
| overflow: hidden; | |
| background-color: var(--md-sys-color-surface-container-low); | |
| } | |
| .view-btn { | |
| background: transparent; | |
| border: none; | |
| padding: 6px 16px; | |
| cursor: pointer; | |
| font-weight: 600; | |
| font-family: 'Assistant', sans-serif; | |
| font-size: 0.9rem; | |
| color: var(--md-sys-color-primary); | |
| transition: all var(--transition-speed) ease; | |
| } | |
| .view-btn.active { | |
| background-color: var(--md-sys-color-primary); | |
| color: var(--md-sys-color-on-primary); | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| } | |
| .textarea-container { | |
| position: relative; | |
| margin-bottom: 1rem; | |
| } | |
| #results-output { | |
| width: 100%; | |
| height: 300px; | |
| padding: 1rem; | |
| border: 1px solid var(--md-sys-color-outline); | |
| border-radius: var(--border-radius-small); | |
| font-family: monospace; | |
| background-color: var(--md-sys-color-surface-container-low); | |
| font-size: 0.95rem; /* Slightly larger for readability */ | |
| resize: vertical; | |
| direction: rtl; | |
| text-align: right; | |
| } | |
| #results-output:focus { | |
| outline: none; | |
| border-color: var(--md-sys-color-primary); | |
| box-shadow: 0 0 0 3px rgba(var(--md-sys-color-primary-rgb), 0.1); | |
| } | |
| #copy-button { | |
| position: absolute; | |
| bottom: 18px; | |
| left: 12px; | |
| padding: 8px; | |
| min-width: auto; | |
| width: 40px; | |
| height: 40px; | |
| background-color: var(--md-sys-color-surface-variant); | |
| color: var(--md-sys-color-on-surface-variant); | |
| border-radius: 50%; | |
| z-index: 10; | |
| transition: all var(--transition-speed) ease; | |
| box-shadow: none; /* remove shadow from .btn */ | |
| } | |
| #copy-button:hover:not(:disabled) { | |
| transform: scale(1.1); | |
| background-color: var(--md-sys-color-primary); | |
| color: var(--md-sys-color-on-primary); | |
| box-shadow: none; | |
| } | |
| #copy-button.has-scrollbar { | |
| left: 28px; | |
| } | |
| #copy-button .material-symbols-outlined { font-size: 20px; } | |
| .buttons-container { | |
| display: flex; | |
| gap: 1rem; | |
| margin-top: 1rem; | |
| justify-content: center; | |
| flex-wrap: wrap; | |
| } | |
| #status-container { | |
| margin-top: 1.5rem; | |
| display: none; | |
| } | |
| #status-message { | |
| text-align: center; | |
| padding: 1rem; | |
| font-weight: 600; | |
| border-radius: var(--border-radius-small) var(--border-radius-small) 0 0; | |
| } | |
| #status-message.loading { | |
| background-color: var(--md-sys-color-primary-container); | |
| color: var(--md-sys-color-on-primary-container); | |
| } | |
| #status-message.error { | |
| background-color: var(--md-sys-color-error-container); | |
| color: var(--md-sys-color-on-error-container); | |
| } | |
| #progress-bar-container { | |
| width: 100%; | |
| background-color: var(--md-sys-color-surface-variant); | |
| border-radius: 0 0 var(--border-radius-small) var(--border-radius-small); | |
| overflow: hidden; | |
| height: 8px; | |
| } | |
| #progress-bar { | |
| width: 0%; | |
| height: 100%; | |
| background-color: var(--md-sys-color-primary); | |
| transition: width 0.3s ease-in-out; | |
| } | |
| #progress-bar.error { | |
| background-color: var(--md-sys-color-error); | |
| } | |
| /* New section for additional links */ | |
| .additional-links-section { | |
| margin-top: 2rem; | |
| text-align: center; | |
| } | |
| .additional-links-section h2 { | |
| border-bottom: none; | |
| margin-bottom: 2rem; | |
| } | |
| .links-grid { | |
| display: grid; | |
| /* Adjust grid to fit 1, 2, or 3 columns based on screen width */ | |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); | |
| gap: 1.5rem; | |
| } | |
| .link-card { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| padding: 1.5rem; | |
| background-color: var(--md-sys-color-surface); | |
| border: 1px solid var(--md-sys-color-surface-variant); | |
| border-radius: var(--border-radius); | |
| text-decoration: none; | |
| color: var(--md-sys-color-on-background); | |
| transition: all var(--transition-speed) ease; | |
| box-shadow: 0 4px 16px rgba(0,0,0,0.05); | |
| } | |
| .link-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 8px 24px rgba(var(--md-sys-color-primary-rgb), 0.12); | |
| border-color: var(--md-sys-color-primary); | |
| } | |
| .link-card-icon .material-symbols-outlined { | |
| font-size: 36px; | |
| color: var(--md-sys-color-primary); | |
| background-color: var(--md-sys-color-primary-container); | |
| padding: 1rem; | |
| border-radius: 50%; | |
| margin-bottom: 1rem; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all var(--transition-speed) ease; | |
| } | |
| .link-card:hover .link-card-icon .material-symbols-outlined { | |
| transform: scale(1.1); | |
| } | |
| .link-card-text h3 { | |
| font-size: 1.15rem; | |
| font-weight: 700; | |
| color: var(--md-sys-color-on-background); | |
| margin-bottom: 0.25rem; | |
| } | |
| .link-card-text p { | |
| font-size: 0.9rem; | |
| color: var(--md-sys-color-outline); | |
| line-height: 1.5; | |
| } | |
| footer { | |
| text-align: center; | |
| margin-top: 0; /* Reduced margin since the new section is above */ | |
| padding: 2rem 1.5rem; | |
| color: var(--md-sys-color-outline); | |
| font-size: 0.9rem; | |
| } | |
| footer a { | |
| color: var(--md-sys-color-primary); | |
| text-decoration: none; | |
| font-weight: 600; | |
| } | |
| footer a:hover { | |
| text-decoration: underline; | |
| } | |
| .github-link { | |
| margin-left: 8px; | |
| vertical-align: middle; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .github-link i { | |
| font-size: 18px; | |
| color: var(--md-sys-color-primary); | |
| transition: color var(--transition-speed) ease; | |
| vertical-align: middle; | |
| } | |
| .github-link:hover i { | |
| color: #5f43a7; | |
| } | |
| .srt-only { | |
| display: none; | |
| } | |
| .format-toggle-group { | |
| display: flex; | |
| border: 1px solid var(--md-sys-color-outline); | |
| border-radius: var(--border-radius-small); | |
| overflow: hidden; | |
| width: 100%; | |
| } | |
| .format-toggle-btn { | |
| flex: 1; | |
| background: transparent; | |
| border: none; | |
| padding: 12px 16px; | |
| cursor: pointer; | |
| font-weight: 600; | |
| font-family: 'Assistant', sans-serif; | |
| font-size: 1rem; | |
| color: var(--md-sys-color-primary); | |
| transition: all var(--transition-speed) ease; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| } | |
| .format-toggle-btn:not(:first-child) { | |
| border-right: 1px solid var(--md-sys-color-outline); | |
| } | |
| .format-toggle-btn.active { | |
| background-color: var(--md-sys-color-primary-container); | |
| color: var(--md-sys-color-on-primary-container); | |
| } | |
| .format-toggle-btn:hover:not(.active) { | |
| background-color: var(--md-sys-color-surface-container-low); | |
| } |