/* * Halfpix Dayoo v1.2.28 — layout guard for translated interface text. * * Translations are longer (German, French, Spanish) or set differently (Chinese, * Japanese) than the English original, and the shell was measured with English. * These rules only apply when a non-English language is active, so the English * layout is untouched. They keep buttons, tabs and navigation readable instead of * letting long labels overflow, clip, or push a row out of its container. * * The engine writes data-halfpix-lang on , so everything hangs off that. */ /* ---------------------------------------------------------------- shared --- */ :root[data-halfpix-lang]:not([data-halfpix-lang="en"]) { /* Buttons stop being a strict single line: they may wrap to two, and grow. */ --i18n-button-line: 1.25; } :root[data-halfpix-lang]:not([data-halfpix-lang="en"]) :where( .hp-button, .app-button, .hp-chip, .astra-place-order, .creation-actions button, .hp-form button[type="submit"], .hp-toolbar button, .hp-me-item__actions button, .hp-me-item__actions a, .record-actions button, .record-actions a, .hp-journal-actions button ) { height: auto; padding-block: 9px; white-space: normal; line-height: var(--i18n-button-line); text-align: center; text-wrap: balance; letter-spacing: 0; } /* Rows of actions must be allowed to wrap rather than overflow their card. */ :root[data-halfpix-lang]:not([data-halfpix-lang="en"]) :where( .hp-toolbar, .hp-action-row, .hp-journal-actions, .hp-me-item__actions, .hp-me-section-actions, .hp-profile-actions, .record-actions, .hp-me-list-toolbar, .hp-security-row, .hp-address-toolbar ) { flex-wrap: wrap; min-width: 0; } /* Any label inside a grid or flex cell may shrink instead of forcing a scrollbar. */ :root[data-halfpix-lang]:not([data-halfpix-lang="en"]) :where( .hp-field, .hp-panel, .hp-me-item, .hp-me-list > *, .record-facts, .hp-load-group ) { min-width: 0; } /* ------------------------------------------------------------ navigation --- */ /* Sidebar: one line, elided if a language needs more room than the rail has. */ :root[data-halfpix-lang]:not([data-halfpix-lang="en"]) .hp-nav__item { gap: 10px; min-width: 0; } :root[data-halfpix-lang]:not([data-halfpix-lang="en"]) .hp-nav__item > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; letter-spacing: 0; } /* Bottom bar: five fixed cells, so the label shrinks before it ever collides. */ :root[data-halfpix-lang]:not([data-halfpix-lang="en"]) .hp-bottom-nav a { min-width: 0; padding-inline: 1px; } :root[data-halfpix-lang]:not([data-halfpix-lang="en"]) .hp-bottom-nav a > span { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: clamp(9px, 2.6vw, 11px); letter-spacing: 0; } /* Account / Studio side menu entries: two lines are fine, clipping is not. */ :root[data-halfpix-lang]:not([data-halfpix-lang="en"]) :where(.hp-account-links > a, .hp-account-links > button) { align-items: center; min-height: 44px; height: auto; white-space: normal; line-height: 1.3; } /* Tabs and filter chips: let the row wrap instead of cutting a label in half. */ :root[data-halfpix-lang]:not([data-halfpix-lang="en"]) :where(.hp-me-filter, .hp-journal-filters, .hp-tab-row, .hp-chips) { flex-wrap: wrap; } /* --------------------------------------------------- uppercase eyebrows --- */ /* Wide letter-spacing on small caps is a Latin device; it hurts CJK text. */ :root[data-halfpix-lang="zh"] :where(.hp-kicker, .hp-page-heading__eyebrow, .hp-account-group-label), :root[data-halfpix-lang="ja"] :where(.hp-kicker, .hp-page-heading__eyebrow, .hp-account-group-label) { letter-spacing: .04em; text-transform: none; } /* ------------------------------------------------------ per-language fit --- */ /* German compounds are the longest labels in the interface. */ :root[data-halfpix-lang="de"] :where(.hp-button, .app-button, .hp-chip) { padding-inline: 14px; hyphens: auto; } :root[data-halfpix-lang="de"] .hp-nav__item > span, :root[data-halfpix-lang="fr"] .hp-nav__item > span, :root[data-halfpix-lang="es"] .hp-nav__item > span { font-size: 13.5px; } /* French and Spanish sentences run longer than English; keep card text tidy. */ :root[data-halfpix-lang="fr"] :where(.hp-subtitle, .hp-picker-hint, .hp-meta), :root[data-halfpix-lang="es"] :where(.hp-subtitle, .hp-picker-hint, .hp-meta), :root[data-halfpix-lang="de"] :where(.hp-subtitle, .hp-picker-hint, .hp-meta) { overflow-wrap: break-word; hyphens: auto; } /* CJK has no spaces, so a long label must be allowed to break anywhere. */ :root[data-halfpix-lang="zh"] :where(.hp-button, .app-button, .hp-chip, .hp-subtitle, .hp-meta, .hp-picker-hint), :root[data-halfpix-lang="ja"] :where(.hp-button, .app-button, .hp-chip, .hp-subtitle, .hp-meta, .hp-picker-hint) { line-break: strict; overflow-wrap: anywhere; word-break: normal; } /* CJK glyphs read heavier at the same size; buttons get a touch more room. */ :root[data-halfpix-lang="zh"] :where(.hp-button, .app-button, .hp-chip), :root[data-halfpix-lang="ja"] :where(.hp-button, .app-button, .hp-chip) { letter-spacing: .02em; } /* ------------------------------------------------------------- narrow ----- */ @media (max-width: 480px) { :root[data-halfpix-lang]:not([data-halfpix-lang="en"]) :where(.hp-button, .app-button, .hp-chip) { padding-inline: 12px; font-size: 13px; } /* Full-width action buttons are safer than two crowded columns. */ :root[data-halfpix-lang="de"] :where(.hp-security-row, .hp-address-toolbar) .hp-button { width: 100%; } }