|
|
| html, body, gradio-app, .gradio-container { background: #F6F2EB !important; } |
| .gradio-container { --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --body-background-fill: #F6F2EB; --body-text-color: #302A29; --color-accent: #8B0029; --color-accent-soft: #F2E5E8; --input-background-fill: #FFFEFC; --input-border-color: #DFD6CA; --input-border-color-focus: #8B0029; --block-background-fill: #FFFEFC; --block-border-color: #E6DED3; } |
| #mixlid-content { max-width: 1040px; width: 100%; margin: 0 auto !important; padding: 64px 32px 48px; gap: 44px; font-family: var(--font); color: #302A29; box-sizing: border-box; } |
| #mixlid-title { text-align: center; } |
| #mixlid-title h1 { font-family: var(--font); font-size: 96px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.05; color: #8B0029 !important; margin: 0 0 22px; } |
| #mixlid-title p { max-width: 64ch; margin: 0 auto; color: #786E65; font-size: 17px; font-weight: 400; line-height: 1.65; text-wrap: balance; } |
| #mixlid-hero { gap: 20px; } |
| #resource-links .resources { display: flex; justify-content: center; gap: 10px; } |
| #resource-links .resource { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border: 1px solid #DFD6CA; border-radius: 999px; background: #FFFEFC; color: #51443D; font-size: 13px; font-weight: 500; line-height: 1.5; } |
| #resource-links .resource-icon { display: block; width: 20px; height: 20px; object-fit: contain; } |
| #work-panel { gap: 0; border-radius: 14px; background: #FFFEFC; box-shadow: 0 20px 60px #49312610, 0 4px 12px #49312606; overflow: hidden; } |
| #mode-row { padding: 16px 24px; border-bottom: 1px solid #EDE6DC; justify-content: flex-start; } |
| #mode-selector { flex: 0 0 auto; min-width: 0; padding: 0; } |
| #mode-selector .wrap { width: fit-content; gap: 4px; padding: 3px; background: #F3EEE7; border-radius: 8px; } |
| #mode-selector label { display: inline-flex; flex: 0 0 112px; min-width: 0; box-sizing: border-box; justify-content: center; align-items: center; min-height: 34px; padding: 0 16px; border: 0 !important; border-radius: 5px; background: transparent !important; box-shadow: none !important; font-size: 13px; color: #786E65; } |
| #mode-selector label:has(input:checked) { background: #FFFEFC !important; color: #8B0029; font-weight: 650; } |
| #mode-selector input { position: absolute; opacity: 0; width: 1px; height: 1px; } |
| #mode-selector label:hover { color: #8B0029; } |
| #workspace-row { height: 360px; min-height: 360px; gap: 0; align-items: stretch; } |
| #input-panel { height: 100%; min-height: 0; padding: 24px; gap: 14px; overflow: hidden; } |
| #input-label p { margin: 0; color: #65584F; font-size: 12px; font-weight: 600; } |
| #text-input, #text-input > .wrap { flex: 1 1 0; min-height: 0; background: transparent !important; border: 0 !important; box-shadow: none !important; } |
| #text-input textarea { height: 274px !important; min-height: 0; max-height: none !important; padding: 0; border: 0 !important; border-radius: 3px; background: transparent !important; box-shadow: none !important; overflow-y: auto !important; resize: none; font-family: var(--font); font-size: 15px; line-height: 1.85; color: #302A29; caret-color: #8B0029; } |
| #text-input textarea::placeholder { color: #80756C; opacity: 1; } |
| #result-panel { height: 100%; min-height: 0; padding: 24px 24px 12px; gap: 0; overflow: hidden; background: #FBF8F4; border-left: 1px solid #EDE6DC; } |
| #language-output { flex: 1 1 0; min-height: 0; overflow-y: auto; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none; } |
| #language-output > label { padding: 0; border: 0 !important; background: transparent !important; color: #65584F; font-size: 12px; font-weight: 600; } |
| #language-output > label > span { display: none; } |
| #language-output .empty { display: none; } |
| #language-output .container { padding: 18px 0; gap: 14px; } |
| #language-output .textfield { padding-right: 8px; font-size: 15px; line-height: 1.85; word-break: normal; overflow-wrap: anywhere; } |
| #language-output .textspan { padding: 1px 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } |
| #language-output .textspan .text { white-space: normal; } |
| #language-output .textspan.hl:not(.no-cat) { background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)); } |
| #language-output .category-legend { gap: 6px; font-size: 12px; } |
| #language-output .category-label { padding: 3px 8px; border-radius: 6px; font-weight: 700; line-height: 1.4; } |
| #prediction-details { padding: 0; border: 0 !important; border-top: 1px solid #EDE6DC !important; border-radius: 0; background: #FBF8F4 !important; box-shadow: none !important; } |
| #prediction-json { max-height: 260px !important; overflow: auto; border: 0 !important; background: transparent !important; } |
| #prediction-details > .wrap { padding: 0 24px 16px; } |
| #prediction-details > .label-wrap { align-items: center; min-height: 44px; padding: 12px 24px; border: 0 !important; background: transparent !important; color: #786E65; } |
| #prediction-details > .label-wrap span { font-size: 12px; font-weight: 700; } |
| #prediction-details > .label-wrap .icon { flex: 0 0 1em; width: 1em; height: 1em; line-height: 1; text-align: center; } |
| #prediction-details > .label-wrap:hover { color: #302A29; } |
| #action-row { align-items: center; gap: 24px; padding: 16px 24px; border-top: 1px solid #EDE6DC; } |
| #example-texts { flex: 1 1 0; } |
| #example-texts .label { color: #786E65; font-size: 11px; margin-bottom: 7px; } |
| #example-texts > .gallery { display: flex; flex-wrap: wrap; gap: 8px; } |
| #example-texts .gallery > button { min-height: 30px; padding: 5px 9px; border: 1px solid #E6DED3 !important; border-radius: 5px; background: transparent !important; color: #65584F; font-family: var(--font); font-size: 12px; line-height: 1.5; white-space: normal; height: auto; } |
| #example-texts .gallery > button > .gallery { display: block; padding: 0; white-space: normal; overflow: visible; } |
| #example-texts .gallery > button:hover { background: #F6F2EB !important; border-color: #C9BCAF !important; } |
| #identify-button { flex: 0 0 188px; max-width: 188px; min-height: 44px; border-radius: 7px; border: 0; background: #8B0029 !important; color: #FFFEFC !important; box-shadow: none; font-family: var(--font); font-size: 13px; font-weight: 600; cursor: pointer; } |
| #identify-button:hover { background: #6D0020 !important; } |
| #identify-button:active { background: #530019 !important; } |
| #identify-button:disabled { opacity: 0.55; cursor: wait; } |
| #mixlid-content button:focus-visible, #mixlid-content textarea:focus-visible, #mode-selector label:focus-within { outline: 2px solid #8B0029; outline-offset: 2px; } |
| #mixlid-content ::selection { background: #EACBD3; color: #530019; } |
| #supported-languages h3 { margin: 0 0 12px; font-size: 12px; font-weight: 600; color: #65584F; } |
| #supported-languages p { display: grid; grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 6px; margin: 0; } |
| #supported-languages code { display: block; margin: 0; padding: 1px 4px; border: 1px solid #E6DED3; border-radius: 999px; background: #F3EEE7; color: #65584F; font-size: 9px; line-height: 1.5; text-align: center; white-space: nowrap; } |
|
|
| @media (max-width: 700px) { |
| #mixlid-content { padding: 36px 16px 28px; gap: 28px; } |
| #mixlid-title h1 { font-size: clamp(56px, 20vw, 76px); } |
| #workspace-row { height: auto; min-height: 0; flex-direction: column; } |
| #input-panel, #result-panel { flex: none; width: 100%; min-width: 0 !important; } |
| #input-panel { height: 260px; } |
| #text-input textarea { height: 174px !important; } |
| #result-panel { height: 320px; border-top: 1px solid #EDE6DC; border-left: 0; } |
| #action-row { flex-direction: column; align-items: stretch; gap: 16px; } |
| #example-texts { flex: none; width: 100%; } |
| #identify-button { flex-basis: auto; width: 100%; max-width: none; } |
| } |
|
|
|
|
