/*
* Component styles for Telegram Mini App
* File contains reusable UI components that are not tied to specific pages
*/
/* VARIABLES AND THEME SETTINGS */
:root {
/* Объявлений --tg-theme-* здесь нет: их перебивал инлайн, который
telegram-web-app.js ставит на . */
/* Custom theme variables */
}
/* Dark theme overrides */
html.dark-theme {
/* --app-card-bg-color: #2c2c2c;
--app-secondary-button-color: var(--ui-a-08); */
}
/* Base styles */
* {
box-sizing: border-box;
}
body {
background-color: var(--ui-surface);
color: var(--ui-text);
font-family: system-ui, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
margin: 0;
padding: 0;
line-height: 1.5;
font-size: var(--ui-t-lg);
overscroll-behavior-y: contain;
min-height: 100vh;
min-height: 100dvh;
}
/* CONTAINERS */
/* 50px сверху — просвет под фиксированной шапкой .nav-bar-mobile (48px):
ступень шкалы равна её высоте, и содержимое встало бы вплотную. */
.container {
margin: 0 auto;
padding: 50px var(--ui-s-3) var(--ui-s-3) var(--ui-s-3);
padding-bottom: 50px;
box-sizing: border-box;
max-width: 100%;
}
.page-container {
padding: var(--ui-s-5) var(--ui-s-3) 0px var(--ui-s-3);
max-width: 100%;
}
/* TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 {
color: var(--ui-text);
margin-top: 0;
margin-bottom: var(--ui-s-4);
font-weight: 600;
line-height: 1.2;
}
.page-title {
font-size: var(--ui-t-3xl);
font-weight: 600;
margin-bottom: var(--ui-s-4);
color: var(--ui-text);
}
.header-container {
margin-bottom: var(--ui-s-5);
}
.header-container .page-title {
margin-bottom: 0;
}
/* Navigation states */
.navigating {
opacity: 0.7;
cursor: not-allowed;
pointer-events: none;
}
.navigating .fa-spinner {
animation: spin 1s linear infinite;
}
@keyframes navigation-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Button states during navigation */
button.navigating,
a.navigating,
[data-navigate].navigating {
opacity: 0.6;
transform: scale(0.98);
cursor: wait;
pointer-events: none;
}
/* Prevent multiple clicks on navigation elements */
button[onclick]:active,
a[onclick]:active,
[data-navigate]:active {
transform: scale(0.95);
}
/* Enhanced visual feedback for navigation buttons */
.ui-appbar-btn,
.nav-btn {
position: relative;
overflow: hidden;
}
.ui-appbar-btn.navigating,
.nav-btn.navigating {
opacity: 0.6;
transform: scale(0.98);
}
/* Ripple effect for better touch feedback */
.ui-appbar-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
/* Отклик на кнопках, стоящих на поверхности: --ui-a-* считается от цвета
ТЕКСТА темы, поэтому виден в обеих темах — белая вспышка на белом нет. */
background: var(--ui-a-15);
transform: translate(-50%, -50%);
transition: width var(--ui-dur-3) var(--ui-ease), height var(--ui-dur-3) var(--ui-ease);
pointer-events: none;
}
.ui-appbar-btn:active::after {
width: 100px;
height: 100px;
}
/* FORMS */
/* .form-control удалён: это была вторая реализация .ui-input, последние два
поля (ссылки-приглашения) переведены на примитив слоя. */
.macro-bars { display: flex; flex-direction: column; gap: var(--ui-s-3); }
.macro-row { display: grid; grid-template-columns: 70px 1fr auto; gap: var(--ui-s-3); align-items: center; }
.macro-label { font-weight: 600; color: var(--ui-text-3); font-size: var(--ui-t-sm); }
.macro-track { width: 100%; height: 8px; background: var(--ui-surface-2); border-radius: var(--ui-r-xs); overflow: hidden; }
.macro-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--ui-accent, var(--ui-accent)), var(--ui-accent)); transition: width var(--ui-dur-3) var(--ui-ease); }
.macro-val { font-weight: 700; font-size: var(--ui-t-sm); color: var(--ui-text); }
.meals-empty {
background: var(--ui-surface-2);
border: 1px dashed var(--ui-line);
border-radius: var(--ui-r-md);
padding: var(--ui-s-4);
color: var(--ui-text-3);
text-align: center;
font-size: var(--ui-t-md);
line-height: 1.4;
}
.meal-item {
background: var(--ui-surface);
border: 1px solid var(--ui-line);
border-radius: var(--ui-r-sm);
padding: var(--ui-s-3);
margin-bottom: var(--ui-s-2);
transition: all var(--ui-dur-2) var(--ui-ease);
}
@media (hover: hover) {
.meal-item:hover {
box-shadow: var(--ui-shadow-sm);
}
}
.meal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--ui-s-2);
}
.meal-title {
font-weight: 600;
color: var(--ui-text, var(--ui-text));
font-size: var(--ui-t-md);
}
.meal-macros {
font-size: var(--ui-t-sm);
color: var(--ui-text-3, var(--ui-text-2));
font-weight: 500;
}
/* Modal for adding meal */
.meal-modal .ui-modal { max-width: 420px; }
/* Модалку целиком описывает слой. */
.btn-primary-modern {
background: var(--ui-accent);
color: var(--ui-on-accent);
border: none;
padding: var(--ui-s-3) var(--ui-s-5);
border-radius: var(--ui-r-md, var(--ui-r-md));
cursor: pointer;
font-size: var(--ui-t-md, var(--ui-t-md));
font-weight: 600;
transition: all var(--ui-dur-2) var(--ui-ease);
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
touch-action: manipulation;
min-height: var(--ui-h-lg);
}
@media (hover: hover) {
.btn-primary-modern:hover {
/* цвет, а не opacity: прозрачность гасит и подпись, и тень вместе с фоном */
background: var(--ui-accent-hover);
}
}
.btn-primary-modern:active {
transform: scale(0.97);
}
/* LOADING/ERROR STATES */
.loading-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--ui-s-5);
text-align: center;
min-height: 200px;
}
.spinner {
width: 36px;
height: 36px;
/* Крутилка — блок, а text-align на блочный элемент не действует: без своего
центрирования она прижималась к левому краю. */
margin-inline: auto;
/* Дорожка крутилки — от цвета текста темы: чёрным числом она в тёмной теме
сливалась с фоном, и вместо кольца был виден только акцентный сегмент. */
border: 3px solid var(--ui-a-10);
border-top: 3px solid var(--ui-accent);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Красивое оформление страницы ошибки */
.error-container {
max-width: 400px;
margin: 40px auto;
background: var(--ui-surface);
border-radius: var(--ui-r-lg);
padding: var(--ui-s-6) var(--ui-s-5) var(--ui-s-5) var(--ui-s-5);
box-shadow: var(--ui-shadow-sm);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.error-code {
font-size: var(--ui-t-3xl);
font-weight: 700;
color: var(--ui-danger);
margin-bottom: var(--ui-s-2);
}
/* Заголовок страницы ошибки. Имя error-message ушло: так теперь называется
плашка сообщения (ui-alert), а это именно заголовок. */
.error-title {
font-size: var(--ui-t-xl);
font-weight: 700;
margin-bottom: var(--ui-s-2);
color: var(--ui-text);
}
.error-container p {
color: var(--ui-text-2);
margin-bottom: var(--ui-s-4);
font-size: var(--ui-t-lg);
}
.mt-4 {
margin-top: var(--ui-s-5) !important;
display: flex;
gap: var(--ui-s-3);
justify-content: center;
}
@media (max-width: 500px) {
.error-container {
max-width: 98vw;
padding: var(--ui-s-4) 4vw var(--ui-s-4) 4vw;
}
.error-code {
font-size: var(--ui-t-2xl);
}
.error-title {
font-size: var(--ui-t-lg);
}
.mt-4 {
flex-direction: column;
gap: var(--ui-s-2);
}
}
/* CARDS */
/* Тень карточки — токеном, а не парой чисел с чёрным: --ui-shadow-* в тёмной
теме плотнее, а rgba(0,0,0,.05) на тёмном фоне не давал ничего. */
.card {
background: var(--ui-surface);
border-radius: var(--ui-r-md);
padding: var(--ui-s-4);
box-shadow: var(--ui-shadow-sm);
border: 1px solid var(--ui-line);
margin-bottom: var(--ui-s-4);
}
.card h3, .card h4 {
margin-top: 0;
}
#photosGallery {
display: flex;
flex-direction: column;
gap: var(--ui-s-4);
}
.table-sm {
font-size: var(--ui-t-lg);
}
@media (max-width: 600px) {
.card { padding: var(--ui-s-3); }
}
.invite-link {
background: var(--ui-surface);
border: 1px solid var(--ui-line);
border-radius: var(--ui-r-xs);
padding: var(--ui-s-3);
margin: var(--ui-s-3) 0;
word-break: break-all;
}
.steps {
margin-top: var(--ui-s-6);
}
.step {
margin-bottom: var(--ui-s-4);
padding-left: var(--ui-s-6);
position: relative;
}
.alert {
display: none;
margin-top: var(--ui-s-3);
}
/* UTILITY CLASSES */
.mb-3 {
margin-bottom: var(--ui-s-4) !important;
}
/* RESPONSIVE ADJUSTMENTS */
@media screen and (max-width: 480px) {
body {
font-size: var(--ui-t-lg);
}
.page-title {
font-size: var(--ui-t-3xl);
}
}
/* EDIT WORKOUT PLAN & MODAL STYLES */
/* .modal-close-btn удалён: класса нет в разметке, крестик окна — .ui-modal-close. */
/* SAVING OVERLAY */
.saving-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* Затемнение под окном — общий токен: --ui-dim в тёмной теме плотнее, а одно
число на все темы почти не отделяло окно от того, что под ним. */
background-color: var(--ui-dim);
z-index: var(--ui-z-overlay);
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(2px);
}
.saving-overlay .saving-message {
background: var(--ui-surface);
color: var(--ui-text);
padding: var(--ui-s-5) var(--ui-s-6);
margin: 0 var(--ui-s-5);
border-radius: var(--ui-r-md);
box-shadow: var(--ui-shadow-lg);
display: flex;
align-items: center;
gap: var(--ui-s-3);
font-weight: 500;
/* 40px остаются числом: ближайшая ступень — сдвиг на 8px, а не снап. Видимого
эффекта у ограничения нет — плашку раньше сжимает поле margin. */
max-width: calc(100vw - 40px);
box-sizing: border-box;
}
/* DISABLED BUTTON STATES */
#saveWorkoutPlanBtn:disabled,
#copyWorkoutPlanBtn:disabled,
#saveButton:disabled {
opacity: 0.7;
cursor: not-allowed;
}
/* EDIT NUTRITION PLAN SPECIFIC STYLES */
#saveButton {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
/* Крутилка лежит на акцентной заливке, поэтому оба цвета от --ui-on-accent:
--ui-a-* в тёмной теме давала белую дорожку, и кольцо пропадало. */
.btn-primary .spinner {
border-color: color-mix(in srgb, var(--ui-on-accent) 30%, transparent);
border-top-color: var(--ui-on-accent);
}
/* Telegram Mini App specific fixes */
.tg-app-fix {
/* Removed position: fixed and related properties to allow normal scrolling */
background-color: var(--ui-surface);
/* You can add padding/margin if needed for safe area insets */
}
.meta-label {
font-weight: 600;
}
/* Цвет кнопок здесь не задаём: зелёная кнопка — это .ui-btn--success,
красная — .ui-btn--danger, и обе уже описаны в слое примитивов. */
.client-card {
background: var(--ui-surface);
border-radius: var(--ui-r-md);
box-shadow: var(--ui-shadow-sm);
padding: var(--ui-s-4) var(--ui-s-4);
margin-bottom: var(--ui-s-4);
display: flex;
align-items: center;
cursor: pointer;
transition: box-shadow var(--ui-dur-2) var(--ui-ease), transform var(--ui-dur-2) var(--ui-ease);
border: 1px solid var(--ui-line);
}
@media (hover: hover) {
.client-card:hover, .client-card:focus {
box-shadow: var(--ui-shadow-md);
transform: translateY(-2px) scale(1.01);
border-color: var(--ui-accent);
}
}
.client-info {
align-items: center;
gap: var(--ui-s-4);
margin-bottom: var(--ui-s-4);
}
.client-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--ui-accent);
color: var(--ui-on-accent);
display: flex;
align-items: center;
justify-content: center;
font-size: var(--ui-t-2xl);
font-weight: 600;
flex-shrink: 0;
}
.client-name {
font-size: var(--ui-t-lg);
font-weight: 600;
}
.client-meta {
font-size: var(--ui-t-lg);
color: var(--ui-text-2);
margin-top: 2px;
}
.plan-card {
background: var(--ui-surface);
border-radius: var(--ui-r-md);
padding: var(--ui-s-4);
box-shadow: var(--ui-shadow-sm);
border: 1px solid var(--ui-line);
transition: all var(--ui-dur-2) var(--ui-ease);
}
@media (hover: hover) {
.plan-card:hover {
box-shadow: var(--ui-shadow-md);
transform: translateY(-2px);
}
}
/* Chart container styles */
canvas {
max-width: 100%;
height: auto !important;
}
/* plan-header-modern moved to trainer.css - removed duplicate */
/* Responsive adjustments for client info */
@media (max-width: 480px) {
.plan-header-modern {
gap: var(--ui-s-2);
}
}
/* plan-actions-modern moved to trainer.css - removed duplicate */
/* Нормы питания */
.nutrition-norms {
background: var(--ui-surface);
border-radius: var(--ui-r-md);
padding: var(--ui-s-4);
box-shadow: var(--ui-shadow-sm);
border: 1px solid var(--ui-line);
}
.norms-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: var(--ui-s-4);
margin-top: var(--ui-s-3);
}
/* Модальные окна */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--ui-dim);
z-index: var(--ui-z-modal);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: var(--ui-s-5);
box-sizing: border-box;
}
.ui-modal-foot .btn-primary-modern { margin-left: 0; }
/* .close-button удалён: класса нет в разметке, крестик окна — .ui-modal-close. */
/* Plans grid in modal */
.modal .plans-grid {
display: flex;
flex-direction: column;
gap: var(--ui-s-3);
max-height: none;
overflow: visible;
/* padding: var(--ui-s-1) var(--ui-s-5); */
}
/* Responsive modal */
@media (max-width: 600px) {
.modal {
padding: var(--ui-s-3);
}
/* Узкую форму окна держит слой: на ширине большого пальца оно прижимается
к низу во всю ширину. */
/* .modal .plans-grid {
padding: var(--ui-s-1) var(--ui-s-4);
} */
.ui-modal-foot {
padding: var(--ui-s-3) var(--ui-s-5) var(--ui-s-4) var(--ui-s-5);
gap: var(--ui-s-2);
}
.ui-modal-foot .ui-btn.ui-btn--primary,
.ui-modal-foot .ui-btn.ui-btn--secondary {
width: 100%;
justify-content: center;
}
}
/* Form improvements in modals */
.modal .ui-field {
margin-bottom: var(--ui-s-5);
}
.modal .ui-field:last-child {
margin-bottom: 0;
}
/* .modal .form-control удалён вместе с базовым .form-control: поля окна — .ui-input. */
/* Tab styles - improved with rounded corners and proper styling */
.tab-buttons {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--ui-s-2);
margin-bottom: var(--ui-s-5);
padding: 0;
border: none;
}
/* Вид вкладки — из слоя (.ui-tab). Здесь только раскладка: вкладка занимает
свою колонку целиком, длинная подпись обрезается многоточием. */
.tab-buttons .ui-tab {
width: 100%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
/* Responsive tab buttons */
@media (max-width: 600px) {
.tab-buttons {
gap: var(--ui-s-2);
margin-bottom: var(--ui-s-5);
}
}
@media (max-width: 480px) {
.tab-buttons {
gap: var(--ui-s-1);
margin-bottom: var(--ui-s-4);
}
}
#measurementsRangeSwitcher .btn {
min-width: 70px;
font-size: var(--ui-t-lg);
padding: var(--ui-s-2) var(--ui-s-3);
}
@media (max-width: 600px) {
#measurementsRangeSwitcher .btn { font-size: var(--ui-t-lg); min-width: 60px; padding: var(--ui-s-2) var(--ui-s-1); }
.card { padding: var(--ui-s-2); }
}
@media (max-width: 600px) {
.card { padding: var(--ui-s-2); }
}
/* Mobile Navigation */
.nav-bar-mobile {
position: fixed;
top: 0; left: 0; right: 0;
height: 48px;
background: var(--ui-surface);
box-shadow: var(--ui-shadow-sm);
display: flex;
align-items: center;
justify-content: space-between;
z-index: var(--ui-z-sticky);
padding: 0 var(--ui-s-3);
}
.nav-bar-mobile .nav-btn {
background: var(--ui-surface);
border: 1px solid var(--ui-line);
border-radius: var(--ui-r-lg);
color: var(--ui-text);
padding: var(--ui-s-3) var(--ui-s-4);
font-size: var(--ui-t-lg);
font-weight: 600;
cursor: pointer;
transition: all var(--ui-dur-2) var(--ui-ease);
text-decoration: none;
display: flex;
align-items: center;
gap: var(--ui-s-2);
}
.nav-bar-mobile .nav-btn:active {
background: var(--ui-surface-2);
}
@media (min-width: 700px) {
.nav-bar-mobile { display: none; }
}
/* Шеврон нарисован внутри data:-URI, а var() в него не подставляется — цвет
стрелки (%236c757d здесь и %23ffffff в тёмной ветке ниже) остаётся числом. */
.form-select {
display: inline-block;
width: auto;
min-width: 120px;
max-width: 220px;
padding: var(--ui-s-2) var(--ui-s-6) var(--ui-s-2) var(--ui-s-3);
font-size: var(--ui-t-lg);
color: var(--ui-text);
background: var(--ui-surface) url('data:image/svg+xml;utf8,') no-repeat right 12px center/18px 18px;
border: 1px solid var(--ui-line);
border-radius: var(--ui-r-sm);
/* Тень строится от цвета текста темы (--ui-a-04) и сама переворачивается,
поэтому в тёмной ветке ниже своей строки с тенью нет. */
box-shadow: 0 1px 4px var(--ui-a-04);
transition: border-color var(--ui-dur-2) var(--ui-ease), box-shadow var(--ui-dur-2) var(--ui-ease);
appearance: none;
cursor: pointer;
}
.form-select:focus {
border-color: var(--ui-accent);
outline: none;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--ui-accent) 15%, transparent);
}
@media (hover: hover) {
.form-select:hover {
border-color: var(--ui-accent);
}
}
.form-select option {
color: var(--ui-text);
background: var(--ui-surface);
}
.search-icon {
position: absolute;
left: var(--ui-s-3);
top: 50%;
transform: translateY(-50%);
color: var(--ui-text-3);
font-size: var(--ui-t-lg);
z-index: 2;
}
.plan-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.plan-title {
font-size: var(--ui-t-lg);
font-weight: 600;
margin: 0 0 var(--ui-s-2) 0;
color: var(--ui-text);
}
.plan-actions {
display: flex;
gap: var(--ui-s-2);
}
/* plan-action-btn moved to trainer.css - removed duplicate */
/* UNIFIED TEXT STYLES - Extending from trainer.css */
/* .ui-input/.ui-input--area убраны: кегль поля держит слой. Действующая
перебивка на 16px (анти-зум iOS) осталась одна — в trainer.css. */
.plan-description-modern,
.client-meta,
.exercise-name,
.file-upload-text,
.file-name {
font-size: var(--ui-t-lg);
}
/* Свой шеврон у