/* ======================================== ! TRANSLATER — PDF reader + EN/RU translator Два НЕЗАВИСИМЫХ плавающих окна (как в десктопной ОС): каждое со своей шапкой для перетаскивания, ручками ресайза по краям/углам, могут перекрываться и всплывать друг над другом. Визуальный язык — как у остальных модалок приложения (notepad-confirm-dialog / img-preview-dialog): var(--m-*) палитра, толстая рамка, "жёсткая" тень 8px 8px 0. Кнопка вызова — top-buttons главного экрана. append to index.html , load after notepad.css ======================================== */ .translater-btn.active { background: var(--m-yellow) !important; } /* ---------- Window shell ---------- */ .translater-window { position: fixed; display: flex; flex-direction: column; background: var(--m-surface); border: 3px solid var(--m-dark); border-radius: 16px; box-shadow: 8px 8px 0 var(--m-dark); overflow: hidden; z-index: 6000; min-width: 300px; min-height: 240px; animation: ctx-pop .15s ease-out; } .translater-window.dragging, .translater-window.resizing { transition: none; user-select: none; } /* ---------- Titlebar (drag handle) ---------- */ .translater-titlebar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: var(--m-dark); color: var(--m-yellow); flex-shrink: 0; cursor: grab; touch-action: none; } .translater-titlebar:active { cursor: grabbing; } .translater-title { font-size: 12.5px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; } .translater-close { background: none; border: 2px solid var(--m-yellow); border-radius: 50%; width: 26px; height: 26px; min-width: 26px; color: var(--m-yellow); font-weight: 900; font-size: 11px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s, color .12s, border-color .12s; } .translater-close:hover { background: var(--m-pink); border-color: var(--m-pink); color: #fff; } /* ---------- Body ---------- */ .translater-body { flex: 1; display: flex; flex-direction: column; min-height: 0; } /* ---- PDF reader ---- */ .translater-pdf-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 20px; text-align: center; } .translater-pdf-hint { font-size: 12px; font-weight: 600; color: #888; max-width: 260px; } .translater-pdf-toolbar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 2px solid var(--m-dark); background: var(--m-surface2); flex-shrink: 0; } .translater-pdf-filename { flex: 1; font-size: 12px; font-weight: 700; color: var(--m-dark); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .translater-pdf-toolbar button { border: 2px solid var(--m-dark); background: var(--m-surface); border-radius: 6px; padding: 6px 10px; font-size: 11px; font-weight: 800; cursor: pointer; font-family: inherit; white-space: nowrap; } .translater-pdf-toolbar button:hover { background: var(--m-teal); } .translater-pdf-toolbar #translaterEpubPrevBtn, .translater-pdf-toolbar #translaterEpubNextBtn, .translater-pdf-toolbar #translaterEpubFontDownBtn, .translater-pdf-toolbar #translaterEpubFontUpBtn { padding: 6px 11px; font-size: 13px; font-weight: 900; line-height: 1; } .translater-pdf-toolbar #translaterEpubPrevBtn, .translater-pdf-toolbar #translaterEpubNextBtn { font-size: 15px; } .translater-pdf-frame { flex: 1; width: 100%; border: none; background: #525659; } .translater-epub-viewer { flex: 1; width: 100%; background: var(--m-surface); overflow: hidden; } /* ---- Dictionary (live word search) ---- */ .translater-textarea { flex: none; width: 100%; border: none; outline: none; padding: 14px 16px; font-size: 15px; line-height: 1.5; font-family: 'Inter', sans-serif; color: var(--m-dark); background: var(--m-surface); border-bottom: 2px solid var(--m-dark); } .translater-textarea::placeholder { opacity: .45; } /* Kept for backward compat with any inline styles referencing the old Translate button class elsewhere; unused by the dictionary search UI. */ .translater-btn-primary { flex: none; padding: 9px 26px; border-radius: 50px; font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; cursor: pointer; font-family: inherit; border: 2px solid var(--m-dark); background: var(--m-dark); color: var(--m-yellow); transition: background .15s, color .15s, transform .1s; } .translater-btn-primary:hover { background: var(--m-teal); color: var(--m-dark); border-color: var(--m-teal); } .translater-btn-primary:active { transform: scale(.97); } .translater-btn-primary:disabled { opacity: .5; cursor: default; transform: none; } /* One dictionary entry (word + transcription + numbered senses) inside the live results list — multiple can stack when a query matches several headwords. */ .tr-entry { padding-bottom: 12px; border-bottom: 2px solid var(--m-surface2); } .tr-entry:last-child { border-bottom: none; padding-bottom: 0; } .tr-senses { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; } .tr-senses li { font-size: 13.5px; font-weight: 500; color: var(--m-dark); line-height: 1.5; } /* ---- Detailed result panel ---- */ .translater-result { flex: 1; overflow-y: auto; padding: 16px; background: var(--m-surface); display: flex; flex-direction: column; gap: 12px; } .tr-result-empty { margin: auto; text-align: center; font-size: 12.5px; font-weight: 600; color: #999; max-width: 260px; line-height: 1.5; } /* "Find with AI" — shown in .tr-result-empty when the local dictionary has no match; a DeepSeek fallback lookup one click away. */ .tr-find-btn { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; padding: 8px 20px; border-radius: 50px; border: 2px solid var(--m-dark); background: var(--m-dark); color: var(--m-yellow); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .4px; cursor: pointer; font-family: inherit; transition: background .15s, color .15s, transform .1s; } .tr-find-btn:hover { background: var(--m-teal); color: var(--m-dark); border-color: var(--m-teal); } .tr-find-btn:active { transform: scale(.97); } .tr-find-btn:disabled { opacity: .55; cursor: default; transform: none; } .tr-result-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; padding-bottom: 10px; border-bottom: 2px solid var(--m-dark); } .tr-result-translation { font-size: 22px; font-weight: 900; color: var(--m-dark); line-height: 1.2; } .tr-result-pos { font-size: 10.5px; font-weight: 800; text-transform: lowercase; letter-spacing: .5px; color: var(--m-teal); border: 2px solid var(--m-teal); border-radius: 50px; padding: 2px 9px; } .tr-result-transcription { font-size: 15px; font-weight: 500; font-style: italic; color: #888; } .tr-result-row { display: flex; flex-direction: column; gap: 5px; } .tr-result-label { font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .6px; color: #999; } .tr-alt-chips { display: flex; flex-wrap: wrap; gap: 6px; } .tr-alt-chip { font-size: 12.5px; font-weight: 700; color: var(--m-dark); background: var(--m-surface2); border: 2px solid var(--m-dark); border-radius: 50px; padding: 3px 11px; } .tr-example { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: var(--m-surface2); border-left: 3px solid var(--m-teal); border-radius: 4px; } .tr-example-line { font-size: 13px; font-weight: 600; color: var(--m-dark); line-height: 1.5; } .tr-example-target { opacity: .7; font-style: italic; } .tr-notes { font-size: 13px; font-weight: 500; color: var(--m-dark); opacity: .85; line-height: 1.5; } /* ---------- Resize handles ---------- */ .translater-rz { position: absolute; z-index: 2; touch-action: none; } .translater-rz-e { top: 8px; right: -4px; bottom: 8px; width: 9px; cursor: ew-resize; } .translater-rz-w { top: 8px; left: -4px; bottom: 8px; width: 9px; cursor: ew-resize; } .translater-rz-s { left: 8px; right: 8px; bottom: -4px; height: 9px; cursor: ns-resize; } .translater-rz-se { right: -5px; bottom: -5px; width: 18px; height: 18px; cursor: nwse-resize; } .translater-rz-sw { left: -5px; bottom: -5px; width: 18px; height: 18px; cursor: nesw-resize; } /* ---------- Mobile: cap size so windows stay usable / draggable on-screen ---------- */ @media (max-width: 640px) { .translater-window { min-width: 88vw; } } /* ======================================== ! MOBILE TRANSLATE PANEL На мобилке (≤768px, см. toggleTranslaterTranslateWindow в translater.js) вместо плавающего окна "Переводчик" открывает выдвижную панель справа — как обычный мобильный drawer, а не окно ОС. Reader (PDF/EPUB) на мобилке не используется — его кнопка скрыта в style.css. ======================================== */ .translater-mobile-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 6999; opacity: 0; transition: opacity .28s ease; } .translater-mobile-backdrop.open { opacity: 1; } .translater-mobile-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 88vw; max-width: 420px; background: var(--m-surface); border-left: 3px solid var(--m-dark); box-shadow: -8px 0 0 var(--m-dark); z-index: 7000; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .28s ease, width .28s ease, max-width .28s ease; } .translater-mobile-panel.open { transform: translateX(0); } /* Полностью раскрытое состояние — по свайпу влево за шапку панели (см. ui.js: _attachDrawerExpandSwipe). Правый край заякорен (right:0), поэтому рост ширины визуально "выезжает" влево, к краю экрана. */ .translater-mobile-panel.full { width: 100vw; max-width: 100vw; } .translater-mobile-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; padding-top: max(14px, env(safe-area-inset-top)); background: var(--m-dark); color: var(--m-yellow); touch-action: pan-y; /* горизонтальный жест ловим сами (см. ui.js), вертикальный не мешаем */ flex-shrink: 0; } .translater-mobile-title { font-size: 13px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; display: flex; align-items: center; gap: 6px; } .translater-mobile-close { background: none; border: 2px solid var(--m-yellow); border-radius: 50%; width: 30px; height: 30px; min-width: 30px; color: var(--m-yellow); font-weight: 900; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .12s, color .12s, border-color .12s; } .translater-mobile-close:hover, .translater-mobile-close:active { background: var(--m-pink); border-color: var(--m-pink); color: #fff; } .translater-mobile-body { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Строка поиска города — используется мобильной панелью Weather (ui.js: ensureMobileDrawerOpen). Тот же .translater-mobile-panel/-header/-close переиспользуется и для неё, и для Bitcoin — панель не привязана к переводчику семантически, только классами/стилями. */ .translater-mobile-search-row { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 2px solid var(--m-dark); flex-shrink: 0; } .translater-mobile-search-row input { flex: 1; min-width: 0; border: 2px solid var(--m-dark); border-radius: 50px; padding: 8px 14px; font-size: 14px; font-family: inherit; color: var(--m-dark); background: var(--m-surface); outline: none; } .translater-mobile-search-row input::placeholder { opacity: .5; } .translater-mobile-search-row button { flex-shrink: 0; border: 2px solid var(--m-dark); background: var(--m-dark); color: var(--m-yellow); border-radius: 50%; width: 38px; height: 38px; min-width: 38px; font-size: 15px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .translater-mobile-search-row button:hover, .translater-mobile-search-row button:active { background: var(--m-teal); color: var(--m-dark); border-color: var(--m-teal); } /* Внутри мобильной панели переиспользуем .translater-textarea / .translater-result / .tr-* классы из окна-дубликата — визуально идентичный результат поиска. */ .translater-mobile-body .translater-textarea { border-bottom: 2px solid var(--m-dark); } .translater-mobile-body .translater-result { flex: 1; } /* ======================================== ! STATS WINDOW (translater_stats) Кнопка 📊 в top-buttons (translaterStatsBtn) → #translaterStatsWindow — плавающее окно с тем же shell'ом (.translater-window/-titlebar/-body), что и у остальных окон Translater. Внутри: сегмент-таб (найдено в словаре / найдено через AI), сводка, таблица находок, пагинация. См. translater.js: openTranslaterStatsWindow / loadTranslaterStats. ======================================== */ .translater-stats-body { flex: 1; display: flex; flex-direction: column; min-height: 0; gap: 10px; padding: 12px 14px; } /* Сегмент-таб — тот же стиль кнопок, что у .translater-pdf-toolbar button, но во всю ширину и с явным активным состоянием. */ .tr-stats-tabs { display: flex; gap: 8px; flex-shrink: 0; } .tr-stats-tab { flex: 1; border: 2px solid var(--m-dark); background: var(--m-surface2); color: var(--m-dark); border-radius: 50px; padding: 7px 10px; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .4px; cursor: pointer; font-family: inherit; transition: background .15s, color .15s; } .tr-stats-tab:hover { background: var(--m-teal); color: var(--m-dark); border-color: var(--m-teal); } .tr-stats-tab.active, .tr-stats-tab.active:hover { background: var(--m-dark); color: var(--m-yellow); border-color: var(--m-dark); } .tr-stats-summary { flex-shrink: 0; font-size: 11.5px; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: .3px; } .tr-stats-list { flex: 1; overflow-y: auto; border: 2px solid var(--m-dark); border-radius: 10px; } .tr-stats-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .tr-stats-table thead th { position: sticky; top: 0; background: var(--m-dark); color: var(--m-yellow); text-align: left; padding: 8px 10px; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .5px; z-index: 1; } .tr-stats-table tbody tr:nth-child(even) { background: var(--m-surface2); } .tr-stats-table td { padding: 7px 10px; border-top: 2px solid var(--m-surface2); color: var(--m-dark); } .tr-stats-word { font-weight: 800; } .tr-stats-user { opacity: .75; } .tr-stats-hits { text-align: center; font-weight: 900; color: var(--m-teal); } .tr-stats-date { white-space: nowrap; opacity: .6; font-size: 11.5px; } .tr-stats-pager { flex-shrink: 0; display: flex; align-items: center; justify-content: center; gap: 14px; } /* Та же "pill" кнопка, что и .tr-find-btn, но компактнее — для Prev/Next. */ .tr-stats-page-btn { padding: 6px 16px; border-radius: 50px; border: 2px solid var(--m-dark); background: var(--m-dark); color: var(--m-yellow); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .4px; cursor: pointer; font-family: inherit; transition: background .15s, color .15s, transform .1s; } .tr-stats-page-btn:hover:not(:disabled) { background: var(--m-teal); color: var(--m-dark); border-color: var(--m-teal); } .tr-stats-page-btn:active:not(:disabled) { transform: scale(.97); } .tr-stats-page-btn:disabled { opacity: .35; cursor: default; } .tr-stats-page-info { font-size: 12px; font-weight: 800; color: var(--m-dark); }