/* ======================================== ! TRANSLATER CARDS — флэш-карточки для повторения слов Плавающее окно того же вида, что translater-window (translater.css) — здесь только содержимое тела окна: сама переворачивающаяся карточка, прогресс, кнопки навигации и экраны "пусто" / "конец списка". append to index.html , load after translater.css ======================================== */ #translaterCardsBtn.active { background: var(--m-yellow) !important; } .tc-body { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 16px; height: 100%; box-sizing: border-box; overflow-y: auto; } /* Reused as-is inside the mobile drawer's .translater-mobile-body (same markup, no desktop-only chrome around it) — just let it fill the slot. */ .translater-mobile-body .tc-body { height: auto; min-height: 100%; } .tc-progress { font-size: 12px; font-weight: 400; font-style: italic; letter-spacing: .2px; color: #6b7280; flex-shrink: 0; } /* -------- Flip card -------- */ .tc-card { width: 100%; max-width: 320px; flex: 1; min-height: 160px; perspective: 1200px; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: pan-y; /* horizontal swipes are ours; vertical scroll still works */ user-select: none; } /* Touch (phone/tablet): the WINDOW itself is fixed-size and floating (draggable, not resizable — see tc-window-fixed / openTranslaterCardsWindow), so the card inside just fills its slot; no more stretching to fill a flexible drawer. */ @media (hover: none), (pointer: coarse) { .tc-card { flex: none; width: 100%; max-width: 100%; height: 230px; min-height: 230px; } } /* Fixed-size floating window (mobile/tablet) — no resize handles rendered, so nothing to style there; just a touch to make it read as "compact and deliberate" rather than a leftover desktop window. */ .tc-window-fixed { resize: none; } /* Slide-in "движение" when a swipe changes the card (see _tcGoNext/_tcGoPrev + the animClass logic in renderTranslaterCards). Using @keyframes rather than a transition because the card element is rebuilt from scratch on every render — transitions don't play on a freshly-created element, but an animation applied at creation time does. */ @keyframes tc-slide-in-right { from { transform: translateX(36px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes tc-slide-in-left { from { transform: translateX(-36px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .tc-card.tc-anim-next { animation: tc-slide-in-right .28s ease-out; } .tc-card.tc-anim-prev { animation: tc-slide-in-left .28s ease-out; } .tc-card-inner { position: relative; width: 100%; height: 100%; min-height: 160px; transition: transform .45s cubic-bezier(.4, .1, .2, 1); transform-style: preserve-3d; } .tc-card.flipped .tc-card-inner { transform: rotateY(180deg); } /* -------- Card face — "textbook concept-check" look: white card, thin hairline border, soft drop shadow (NOT the app's usual hard Memphis offset-shadow) -------- */ .tc-card-face { position: absolute; inset: 0; backface-visibility: hidden; border: 1px solid #dde3ec; border-radius: 14px; background: #ffffff; box-shadow: 0 10px 24px rgba(15, 23, 42, .10), 0 2px 6px rgba(15, 23, 42, .06); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; box-sizing: border-box; text-align: center; } .tc-card-front { background: #ffffff; } .tc-card-back { background: #fafbfd; transform: rotateY(180deg); overflow-y: auto; /* Front face stays centered (short content). Back face has variable, often-tall content (meaning + grammatical forms) — start it from the top instead of centering, otherwise a tall back face gets vertically centered INSIDE the scroll container and the headword (first child) scrolls out above the visible area before the user sees it. */ justify-content: flex-start; align-items: stretch; text-align: left; } /* Keep the headword visible at all times while the meaning/forms beneath it scroll — "слово уходит вверх": without this it's just the first flex child like everything else, and scrolls out of view above the visible area once the back face (meaning + forms) grows taller than the card. */ .tc-card-back .tc-word-small { position: sticky; top: 0; z-index: 2; align-self: center; background: #fafbfd; padding-bottom: 2px; flex-shrink: 0; } .tc-word { display: inline-block; font-size: 25px; font-weight: 800; color: #1d4ed8; border-bottom: 3px solid #1d4ed8; padding-bottom: 3px; word-break: break-word; font-family: Arial, Helvetica, sans-serif; } .tc-word-small { font-size: 15px; opacity: .75; border-bottom-width: 2px; } .tc-transcription { font-size: 14px; font-weight: 400; font-style: italic; color: #6b7280; } .tc-senses { margin: 0; text-align: left; display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; line-height: 1.6; color: #1f2937; font-family: Arial, Helvetica, sans-serif; } .tc-sense-num { font-weight: 900; } .tc-plain-meaning { font-size: 13.5px; line-height: 1.6; color: #1f2937; text-align: left; font-family: Arial, Helvetica, sans-serif; } /* -------- Grammatical dictionary forms (plural, past tense, etc.) -------- */ .tc-forms { width: 100%; margin-top: 10px; padding-top: 10px; border-top: 1px dashed #dde3ec; text-align: left; } .tc-forms-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #9ca3af; margin-bottom: 6px; font-family: Arial, Helvetica, sans-serif; } .tc-forms-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .tc-forms-item { background: #f4f6fa; border: 1px solid #e6eaf0; border-radius: 8px; padding: 6px 9px; } .tc-forms-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .tc-forms-form { font-size: 14px; font-weight: 700; color: #1d4ed8; font-family: Arial, Helvetica, sans-serif; } .tc-forms-pos { font-size: 11px; font-weight: 400; font-style: italic; color: #6b7280; } .tc-forms-meaning { font-size: 12.5px; line-height: 1.5; color: #374151; margin-top: 3px; font-family: Arial, Helvetica, sans-serif; } /* -------- Controls -------- */ .tc-controls { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 320px; flex-shrink: 0; flex-wrap: wrap; } .tc-btn { border: 1px solid #dde3ec; background: #ffffff; color: #1d4ed8; border-radius: 8px; padding: 8px 12px; font-size: 12px; font-weight: 700; letter-spacing: .2px; cursor: pointer; font-family: Arial, Helvetica, sans-serif; white-space: nowrap; transition: background .15s, color .15s, opacity .15s, border-color .15s; } .tc-btn:hover:not(:disabled) { background: #eef2ff; border-color: #c7d2fe; } .tc-btn:disabled { opacity: .35; cursor: not-allowed; } .tc-swipe-hint { font-size: 11px; font-weight: 400; font-style: italic; color: #6b7280; text-align: center; flex-shrink: 0; } .tc-cancel-btn { border: none; background: none; color: #9ca3af; font-size: 12px; font-weight: 600; letter-spacing: .2px; cursor: pointer; padding: 4px 8px; flex-shrink: 0; } .tc-cancel-btn:hover { color: #ef4444; text-decoration: underline; } /* -------- Empty / end-of-list states -------- */ .tc-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; color: #1f2937; font-size: 14px; font-weight: 600; padding: 10px; font-family: Arial, Helvetica, sans-serif; } .tc-empty-icon { font-size: 40px; } .tc-empty-hint { font-size: 12px; font-weight: 400; font-style: italic; color: #6b7280; max-width: 260px; } .tc-end-actions { display: flex; align-items: center; gap: 10px; margin-top: 6px; } .tc-body .translater-btn-primary { background: #1d4ed8; border-color: #1d4ed8; color: #ffffff; } .tc-body .translater-btn-primary:hover { background: #1e40af; border-color: #1e40af; } @media (max-width: 480px) { .tc-word { font-size: 21px; } }