/* Telegram Mini App Design System */ :root { /* Telegram theme colors */ --tg-color-bg: var(--tg-theme-bg-color, #ffffff); --tg-color-secondary-bg: var(--tg-theme-secondary-bg-color, #f1f1f1); --tg-color-section-bg: var(--tg-theme-section-bg-color, #ffffff); --tg-color-text: var(--tg-theme-text-color, #000000); --tg-color-hint: var(--tg-theme-hint-color, #999999); --tg-color-link: var(--tg-theme-link-color, #007aff); --tg-color-button: var(--tg-theme-button-color, #007aff); --tg-color-button-text: var(--tg-theme-button-text-color, #ffffff); --tg-color-destructive: var(--tg-theme-destructive-text-color, #ff3b30); /* Telegram dimensions */ --tg-border-radius: 12px; --tg-border-radius-small: 8px; --tg-spacing-xs: 4px; --tg-spacing-sm: 8px; --tg-spacing-md: 12px; --tg-spacing-lg: 16px; --tg-spacing-xl: 20px; --tg-spacing-xxl: 24px; /* Typography - Refined type scale (Major Third - 1.25) */ --tg-font-size-xs: 12px; --tg-font-size-sm: 14px; --tg-font-size-md: 16px; /* base */ --tg-font-size-lg: 18px; /* 16 * 1.125 ≈ 18 */ --tg-font-size-xl: 22px; /* 18 * 1.222 ≈ 22 */ --tg-font-size-xxl: 28px; /* 22 * 1.273 ≈ 28 */ /* Font weights */ --tg-font-weight-regular: 400; --tg-font-weight-medium: 500; --tg-font-weight-semibold: 600; --tg-font-weight-bold: 700; /* Letter spacing for improved readability */ --tg-letter-spacing-tight: -0.01em; --tg-letter-spacing-normal: 0; --tg-letter-spacing-wide: 0.01em; --tg-line-height-tight: 1.2; --tg-line-height-normal: 1.4; --tg-line-height-relaxed: 1.6; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background: var(--tg-color-bg); color: var(--tg-color-text); font-size: var(--tg-font-size-md); line-height: var(--tg-line-height-normal); overflow-x: hidden; } /* Root container */ .tg-root { min-height: 100vh; display: flex; flex-direction: column; } /* Content area */ .tg-content { flex: 1; padding: var(--tg-spacing-lg); padding-bottom: 100px; display: flex; flex-direction: column; gap: var(--tg-spacing-xl); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .tg-content.tg-pulling { transition: none; } /* Pull-to-refresh indicator */ .tg-pull-indicator { position: fixed; top: -60px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--tg-spacing-xs); opacity: 0; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 50; pointer-events: none; } .tg-content.tg-pulling .tg-pull-indicator { opacity: 1; top: 20px; } .tg-pull-indicator__icon { color: var(--tg-color-button); transition: transform 0.3s ease; } .tg-content.tg-pulling .tg-pull-indicator__icon { animation: pullRotate 0.6s ease-in-out infinite; } .tg-pull-indicator__text { font-size: var(--tg-font-size-sm); color: var(--tg-color-hint); font-weight: var(--tg-font-weight-medium); } @keyframes pullRotate { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } } /* Form components */ .tg-form { position: fixed; bottom: 0; left: 0; right: 0; padding: var(--tg-spacing-lg); background: var(--tg-color-bg); border-top: 1px solid var(--tg-color-secondary-bg); z-index: 100; } .tg-input-wrapper { position: relative; } .tg-input { width: 100%; height: 48px; padding: 0 var(--tg-spacing-lg); padding-right: 48px; /* Make room for clear button */ background: var(--tg-color-section-bg); border: 2px solid var(--tg-color-secondary-bg); border-radius: var(--tg-border-radius); font-size: var(--tg-font-size-lg); color: var(--tg-color-text); transition: all 0.2s ease; outline: none; } .tg-input::placeholder { color: var(--tg-color-hint); } .tg-input:focus { border-color: var(--tg-color-button); background: var(--tg-color-bg); } .tg-input-clear { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--tg-color-hint); padding: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s ease; -webkit-tap-highlight-color: transparent; } .tg-input-clear:hover { background: var(--tg-color-secondary-bg); color: var(--tg-color-text); } .tg-input-clear:active { transform: translateY(-50%) scale(0.9); } /* Button components */ .tg-button { position: relative; display: flex; align-items: center; justify-content: center; gap: var(--tg-spacing-sm); border: none; border-radius: var(--tg-border-radius); font-family: inherit; font-weight: var(--tg-font-weight-medium); cursor: pointer; transition: all 0.2s ease; outline: none; user-select: none; -webkit-tap-highlight-color: transparent; } .tg-button--primary { background: var(--tg-color-button); color: var(--tg-color-button-text); } .tg-button--large { height: 48px; padding: 0 var(--tg-spacing-xl); font-size: var(--tg-font-size-lg); } .tg-button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3); } .tg-button:active:not(:disabled) { transform: translateY(0); } .tg-button:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; box-shadow: none !important; } .tg-button__text { display: flex; align-items: center; gap: var(--tg-spacing-xs); } /* Placeholder component */ .tg-placeholder { text-align: center; padding: var(--tg-spacing-xxl) var(--tg-spacing-lg); max-width: 300px; margin: 0 auto; } .tg-placeholder__icon { font-size: 48px; margin-bottom: var(--tg-spacing-lg); opacity: 0.6; } .tg-placeholder__title { font-size: var(--tg-font-size-xl); font-weight: var(--tg-font-weight-semibold); letter-spacing: var(--tg-letter-spacing-tight); color: var(--tg-color-text); margin-bottom: var(--tg-spacing-sm); } .tg-placeholder__description { font-size: var(--tg-font-size-sm); color: var(--tg-color-hint); line-height: var(--tg-line-height-relaxed); } .tg-placeholder--secondary { opacity: 0.8; } /* Spinner component */ .tg-spinner { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; padding: var(--tg-spacing-xxl); display: none; z-index: 10; opacity: 0; transition: opacity 0.15s ease-in; } .tg-spinner.tg-spinner--visible { display: block; animation: tg-fade-in 0.15s ease-in forwards; } .tg-spinner__icon { width: 40px; height: 40px; border: 3px solid var(--tg-color-secondary-bg); border-top: 3px solid var(--tg-color-button); border-radius: 50%; margin: 0 auto var(--tg-spacing-lg); animation: tg-spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; } .tg-spinner__text { font-size: var(--tg-font-size-sm); color: var(--tg-color-hint); font-weight: var(--tg-font-weight-medium); } @keyframes tg-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes tg-fade-in { from { opacity: 0; transform: translate(-50%, -45%); } to { opacity: 1; transform: translate(-50%, -50%); } } /* Skeleton loading screens */ .tg-skeleton-list { display: flex; flex-direction: column; gap: var(--tg-spacing-xs); } .tg-skeleton-list.tg-hidden { display: none; } .tg-skeleton-item { display: flex; gap: var(--tg-spacing-md); padding: var(--tg-spacing-md); background: var(--tg-color-section-bg); border-radius: var(--tg-border-radius); } .tg-skeleton-thumbnail { width: 80px; height: 60px; background: linear-gradient(90deg, var(--tg-color-secondary-bg) 25%, var(--tg-color-hint) 50%, var(--tg-color-secondary-bg) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--tg-border-radius-small); flex-shrink: 0; } .tg-skeleton-text { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--tg-spacing-sm); } .tg-skeleton-line { height: 16px; background: linear-gradient(90deg, var(--tg-color-secondary-bg) 25%, var(--tg-color-hint) 50%, var(--tg-color-secondary-bg) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 4px; } .tg-skeleton-line--short { width: 60%; } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* List component */ .tg-list { display: none; flex-direction: column; gap: var(--tg-spacing-xs); } .tg-list.tg-list--visible { display: flex; } .tg-list-item { background: var(--tg-color-section-bg); border-radius: var(--tg-border-radius); overflow: hidden; transition: all 0.2s ease; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; position: relative; opacity: 0; animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; } /* Staggered animation delays for first 20 items */ .tg-list-item:nth-child(1) { animation-delay: 0.05s; } .tg-list-item:nth-child(2) { animation-delay: 0.08s; } .tg-list-item:nth-child(3) { animation-delay: 0.11s; } .tg-list-item:nth-child(4) { animation-delay: 0.14s; } .tg-list-item:nth-child(5) { animation-delay: 0.17s; } .tg-list-item:nth-child(6) { animation-delay: 0.20s; } .tg-list-item:nth-child(7) { animation-delay: 0.23s; } .tg-list-item:nth-child(8) { animation-delay: 0.26s; } .tg-list-item:nth-child(9) { animation-delay: 0.29s; } .tg-list-item:nth-child(10) { animation-delay: 0.32s; } .tg-list-item:nth-child(n+11) { animation-delay: 0.35s; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Hover effects for desktop */ @media (hover: hover) and (pointer: fine) { .tg-list-item:hover { background: var(--tg-color-secondary-bg); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } } /* Touch feedback for mobile - brief highlight only */ .tg-list-item:active { transform: translateY(0); background: var(--tg-color-secondary-bg); } /* Prevent sticky hover states on touch devices */ @media (hover: none) { .tg-list-item:hover { background: var(--tg-color-section-bg); transform: none; box-shadow: none; } } .tg-list-item__content { display: flex; align-items: center; gap: var(--tg-spacing-md); padding: var(--tg-spacing-md); } .tg-list-item__media { position: relative; flex-shrink: 0; } .tg-list-item__thumbnail { width: 80px; height: 60px; object-fit: cover; border-radius: var(--tg-border-radius-small); background: var(--tg-color-secondary-bg); image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; image-rendering: optimizeQuality; } .tg-list-item__play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: none; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s ease; z-index: 2; } .tg-list-item__media:hover .tg-list-item__play-btn, .tg-list-item--playing .tg-list-item__play-btn { opacity: 1; } @media (hover: none) { .tg-list-item__play-btn { opacity: 1; } } .tg-list-item__duration { position: absolute; bottom: 2px; right: 2px; background: rgba(0, 0, 0, 0.8); color: white; font-size: var(--tg-font-size-xs); padding: 2px 4px; border-radius: 4px; font-weight: var(--tg-font-weight-medium); } .tg-list-item__info { flex: 1; min-width: 0; } .tg-list-item__title { font-size: var(--tg-font-size-md); font-weight: var(--tg-font-weight-medium); letter-spacing: var(--tg-letter-spacing-tight); color: var(--tg-color-text); line-height: 1.3; /* Улучшенный line-height для многострочных заголовков */ margin-bottom: var(--tg-spacing-xs); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tg-list-item__subtitle { font-size: var(--tg-font-size-sm); color: var(--tg-color-hint); line-height: var(--tg-line-height-tight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Converting state */ .tg-list-item--converting { opacity: 0.6; pointer-events: none; } .tg-list-item--converting::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; border: 2px solid var(--tg-color-secondary-bg); border-top: 2px solid var(--tg-color-button); border-radius: 50%; animation: tg-spin 1s linear infinite; } /* Conversion progress bar */ .tg-conversion-progress { position: absolute; bottom: 0; left: 0; right: 0; padding: var(--tg-spacing-xs); background: rgba(0, 0, 0, 0.05); z-index: 10; } .tg-conversion-progress__bar { height: 4px; background: var(--tg-color-secondary-bg); border-radius: 2px; overflow: hidden; } .tg-conversion-progress__fill { height: 100%; background: var(--tg-color-button); transition: width 0.3s ease; border-radius: 2px; width: 0; } .tg-conversion-progress__text { font-size: var(--tg-font-size-xs); color: var(--tg-color-hint); text-align: center; margin-top: 4px; } /* Audio player */ .tg-audio-player { padding: var(--tg-spacing-sm) var(--tg-spacing-md); background: var(--tg-color-secondary-bg); border-top: 1px solid rgba(0, 0, 0, 0.05); } .tg-audio-player__progress { display: flex; flex-direction: column; gap: var(--tg-spacing-xs); } .tg-audio-player__progress-bar { height: 4px; background: rgba(0, 0, 0, 0.1); border-radius: 2px; overflow: hidden; cursor: pointer; } .tg-audio-player__progress-fill { height: 100%; background: var(--tg-color-button); width: 0%; transition: width 0.1s linear; border-radius: 2px; } .tg-audio-player__time { display: flex; justify-content: space-between; font-size: var(--tg-font-size-xs); color: var(--tg-color-hint); font-variant-numeric: tabular-nums; } .tg-list-item--loading-preview { opacity: 0.7; pointer-events: none; } /* Status message */ .tg-status-message { position: fixed; top: 12px; left: var(--tg-spacing-md); right: var(--tg-spacing-md); z-index: 1000; padding: 10px 14px; border-radius: 10px; font-size: 13px; font-weight: var(--tg-font-weight-medium); animation: tg-slide-down 0.3s ease-out; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.12); max-width: 320px; margin: 0 auto; cursor: pointer; transition: opacity 0.3s ease, transform 0.3s ease; } .tg-status-message:active { transform: scale(0.98); } .tg-status-message--hiding { animation: tg-fade-out 0.3s ease-out forwards; } .tg-status-message--success { background: #34c759; border: 1px solid #2aa854; color: #ffffff; } .tg-status-message--error { background: #ff3b30; border: 1px solid #d70015; color: #ffffff; } .tg-status-message--info { background: #007aff; border: 1px solid #0056cc; color: #ffffff; } .tg-status-message--warning { background: #ff9500; border: 1px solid #e68500; color: #ffffff; } @keyframes tg-slide-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } @keyframes tg-fade-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-12px); } } /* Update notification */ .tg-update-notification { position: fixed; top: var(--tg-spacing-lg); left: var(--tg-spacing-lg); right: var(--tg-spacing-lg); z-index: 1000; animation: tg-slide-down 0.3s ease-out; } .tg-update-notification__content { background: var(--tg-color-button); color: var(--tg-color-button-text); padding: var(--tg-spacing-md) var(--tg-spacing-lg); border-radius: var(--tg-border-radius); display: flex; justify-content: space-between; align-items: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); font-weight: var(--tg-font-weight-medium); } .tg-update-notification__button { background: rgba(255, 255, 255, 0.2); color: var(--tg-color-button-text); border: none; padding: var(--tg-spacing-sm) var(--tg-spacing-lg); border-radius: var(--tg-border-radius-small); font-size: var(--tg-font-size-sm); font-weight: var(--tg-font-weight-semibold); cursor: pointer; transition: background 0.2s ease; -webkit-tap-highlight-color: transparent; } .tg-update-notification__button:active { background: rgba(255, 255, 255, 0.3); } /* Recent Searches */ .tg-recent-searches { margin-bottom: var(--tg-spacing-lg); animation: tg-fade-in 0.3s ease-out; } .tg-recent-searches__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--tg-spacing-sm); font-size: var(--tg-font-size-sm); color: var(--tg-color-hint); padding: 0 var(--tg-spacing-xs); } .tg-recent-searches__title { font-weight: var(--tg-font-weight-medium); } .tg-recent-searches__clear { background: none; border: none; color: var(--tg-color-link); cursor: pointer; padding: 4px 8px; font-size: var(--tg-font-size-sm); font-weight: var(--tg-font-weight-medium); border-radius: 4px; transition: background 0.2s ease; -webkit-tap-highlight-color: transparent; } .tg-recent-searches__clear:hover { background: var(--tg-color-secondary-bg); } .tg-recent-searches__clear:active { transform: scale(0.95); } .tg-recent-searches__list { display: flex; flex-direction: column; gap: var(--tg-spacing-xs); } .tg-recent-search-item { display: flex; align-items: center; gap: var(--tg-spacing-sm); padding: var(--tg-spacing-sm) var(--tg-spacing-md); background: var(--tg-color-section-bg); border: none; border-radius: var(--tg-border-radius); width: 100%; text-align: left; cursor: pointer; transition: all 0.2s ease; font-size: var(--tg-font-size-md); color: var(--tg-color-text); -webkit-tap-highlight-color: transparent; } .tg-recent-search-item svg { flex-shrink: 0; color: var(--tg-color-hint); } .tg-recent-search-item span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (hover: hover) and (pointer: fine) { .tg-recent-search-item:hover { background: var(--tg-color-secondary-bg); transform: translateX(2px); } } .tg-recent-search-item:active { background: var(--tg-color-secondary-bg); transform: scale(0.98); } /* Loading More indicator */ .tg-loading-more { display: flex; align-items: center; justify-content: center; gap: var(--tg-spacing-sm); padding: var(--tg-spacing-lg); color: var(--tg-color-hint); font-size: var(--tg-font-size-sm); } .tg-loading-more .tg-spinner__icon { width: 20px; height: 20px; border-width: 2px; margin: 0; } #scroll-sentinel { height: 1px; visibility: hidden; } /* Utility classes */ .tg-hidden { display: none !important; } .tg-visible { display: block !important; } /* Responsive design */ @media (max-width: 768px) and (min-width: 481px) { .tg-list-item__thumbnail { width: 100px; height: 100px; } .tg-list-item__title { font-size: var(--tg-font-size-sm); } } @media (max-width: 480px) { .tg-content { padding: var(--tg-spacing-md); } .tg-navigation { padding: var(--tg-spacing-md); } .tg-list { grid-template-columns: 1fr; gap: var(--tg-spacing-sm); } .tg-list-item__content { flex-direction: row; text-align: left; padding: var(--tg-spacing-sm); } .tg-list-item__media { margin-bottom: 0; margin-right: var(--tg-spacing-sm); flex-shrink: 0; } .tg-list-item__thumbnail { width: 60px; height: 60px; } .tg-list-item__info { flex: 1; min-width: 0; } .tg-list-item__title { text-align: left; font-size: var(--tg-font-size-sm); -webkit-line-clamp: 1; line-clamp: 1; } .tg-list-item__subtitle { text-align: left; } } /* Dark theme support */ @media (prefers-color-scheme: dark) { :root { --tg-color-bg: var(--tg-theme-bg-color, #000000); --tg-color-secondary-bg: var(--tg-theme-secondary-bg-color, #1c1c1e); --tg-color-section-bg: var(--tg-theme-section-bg-color, #1c1c1e); --tg-color-text: var(--tg-theme-text-color, #ffffff); --tg-color-hint: var(--tg-theme-hint-color, #8e8e93); } }