/* Telegram Mini App — оформление на теме клиента. Все цвета берём из themeParams (пре-тема ставится в ), поэтому приложение выглядит как нативное и в светлой, и в тёмной теме. */ :root { --tg-bg: #ffffff; --tg-bg-secondary: #f2f3f5; --tg-text: #000000; --tg-hint: #707579; --tg-link: #3390ec; --tg-button: #3390ec; --tg-button-text: #ffffff; --tg-section: #ffffff; --tg-header: #ffffff; --tg-accent: #3390ec; --tg-subtitle: #707579; --tg-destructive: #e53935; --sat: 0px; --sab: 0px; --r: 12px; --tabh: 58px; } /* Вне Telegram тёмную палитру берём из системной темы. Внутри Telegram цвета приходят из themeParams, иначе светлая тема клиента на тёмной ОС получилась бы тёмной. */ @media (prefers-color-scheme: dark) { :root:not([data-tg-theme]) { --tg-bg: #17212b; --tg-bg-secondary: #0e1621; --tg-section: #17212b; --tg-header: #17212b; --tg-text: #f5f5f5; --tg-hint: #8d969c; --tg-subtitle: #8d969c; } } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* Атрибут hidden сильнее любых display в этом файле: полноэкранные слои не должны перехватывать тапы, даже если их забыли скрыть классом. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; height: 100%; background: var(--tg-bg-secondary); color: var(--tg-text); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.35; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; /* Один палец только скроллит: без двойного-тапа-зума и без «утаскивания». Плюс приложение не пытается зумить интерфейс жестами — как в SaaSMaster. */ touch-action: manipulation; overscroll-behavior-y: none; overscroll-behavior-x: none; } button, input { touch-action: manipulation; } body { display: flex; flex-direction: column; } #app { display: flex; flex-direction: column; min-height: 100dvh; } /* ---------- Шапка ---------- */ /* ---------- Шапка экрана (как .page-title в SaaSMaster) ---------- Своего «липкого» хедера нет: сверху нативная шапка Telegram, а заголовок — в содержимом и уезжает при скролле вместе с ним. */ .page-top { display: flex; align-items: flex-start; gap: 10px; padding: 2px 2px 12px; } .page-top-t { flex: 1; min-width: 0; } .page-title { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -.3px; } .page-sub { font-size: 14px; color: var(--tg-hint); margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .icon-btn { flex: none; width: 38px; height: 38px; margin-top: 2px; border-radius: 50%; border: 0; background: var(--tg-bg-secondary); color: var(--tg-hint); display: grid; place-items: center; cursor: pointer; transition: transform .12s ease, opacity .12s ease; } .icon-btn:active { transform: scale(.9); opacity: .6; } .icon-btn.spin svg { animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- Контент ---------- */ #main { flex: 1; padding: calc(var(--sat) + 8px) 12px calc(var(--tabh) + var(--sab) + 14px); max-width: 720px; width: 100%; margin: 0 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; } .card { background: var(--tg-section); border-radius: var(--r); overflow: hidden; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.05); } .card-h { padding: 11px 14px 7px; font-size: 13px; font-weight: 600; color: var(--tg-subtitle); letter-spacing: .2px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; width: 100%; min-height: 52px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; border-top: .5px solid rgba(128,128,128,.16); transition: background .1s ease; } .row:first-child { border-top: 0; } .row:active { background: var(--tg-bg-secondary); } .row-ico { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--tg-link); color: #fff; } .row-ico .ic { stroke-width: 1.9; } .row-b { flex: 1; min-width: 0; } .row-t { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row-s { font-size: 13px; color: var(--tg-subtitle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .row-chev { flex: none; color: var(--tg-hint); opacity: .7; } /* ---------- Пары ---------- */ .lesson { display: flex; gap: 12px; padding: 11px 14px; border-top: .5px solid rgba(128,128,128,.16); } .lesson:first-child { border-top: 0; } .lesson-t { flex: none; width: 62px; font-size: 14px; font-weight: 600; color: var(--tg-text); font-variant-numeric: tabular-nums; } .lesson-t small { display: block; font-size: 12px; font-weight: 400; color: var(--tg-subtitle); } .lesson-b { flex: 1; min-width: 0; } .lesson-n { font-size: 15.5px; font-weight: 500; } .lesson-m { font-size: 13.5px; color: var(--tg-subtitle); margin-top: 3px; } .lesson-note { font-size: 13px; color: var(--tg-subtitle); margin-top: 4px; font-style: italic; } .lesson-link { color: var(--tg-link); cursor: pointer; } .lesson-link:active { opacity: .6; } .badge { display: inline-block; font-size: 11.5px; font-weight: 600; color: var(--tg-bg); background: var(--tg-subtitle); border-radius: 6px; padding: 1px 6px; margin-left: 6px; vertical-align: 1px; } /* ---------- Дни недели (чипы) ---------- */ .days { display: flex; gap: 6px; padding: 10px; overflow-x: auto; scrollbar-width: none; } .days::-webkit-scrollbar { display: none; } .day-chip { flex: none; min-width: 46px; padding: 7px 6px; border-radius: 10px; border: 0; background: var(--tg-bg-secondary); color: var(--tg-text); font: inherit; cursor: pointer; text-align: center; transition: transform .1s ease; } .day-chip:active { transform: scale(.94); } .day-chip b { display: block; font-size: 12px; font-weight: 600; color: var(--tg-subtitle); } .day-chip span { display: block; font-size: 15px; font-weight: 600; margin-top: 1px; } .day-chip i { display: block; font-size: 10.5px; font-style: normal; color: var(--tg-subtitle); margin-top: 1px; } .day-chip.today { background: var(--tg-link); color: #fff; } .day-chip.today b, .day-chip.today i { color: rgba(255,255,255,.85); } .day-chip.sel { box-shadow: inset 0 0 0 2px var(--tg-link); } .day-chip.today.sel { box-shadow: inset 0 0 0 2px rgba(255,255,255,.9); } /* ---------- Неделя: переключатель ---------- */ .weekbar { display: flex; align-items: center; gap: 8px; padding: 4px 4px 0; } .weekbar button { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--tg-bg-secondary); color: var(--tg-hint); cursor: pointer; display: grid; place-items: center; font-size: 17px; } .weekbar button:active { transform: scale(.9); } .weekbar button:disabled { opacity: .35; } .weekbar .wtitle { flex: 1; text-align: center; font-size: 15px; font-weight: 600; } .wtitle small { display: block; font-size: 12px; font-weight: 400; color: var(--tg-subtitle); } /* ---------- Поиск ---------- */ .seg { display: flex; gap: 4px; padding: 3px; background: var(--tg-bg-secondary); border-radius: 10px; margin-bottom: 10px; } .seg button { flex: 1; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--tg-subtitle); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; } .seg button.on { background: var(--tg-section); color: var(--tg-text); box-shadow: 0 1px 3px rgba(0,0,0,.12); } .seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .field { display: flex; align-items: center; gap: 9px; padding: 10px 14px; } .field svg { flex: none; color: var(--tg-hint); } .field input { flex: 1; min-width: 0; border: 0; background: transparent; color: inherit; font: inherit; font-size: 16px; outline: none; } .field input::placeholder { color: var(--tg-hint); } .hint { padding: 10px 14px; font-size: 13px; color: var(--tg-subtitle); } /* ---------- Пусто/баннер/ошибка ---------- */ .empty { text-align: center; padding: 34px 20px; color: var(--tg-subtitle); } .empty .e-ico { font-size: 34px; } .empty .e-t { font-size: 16px; font-weight: 600; color: var(--tg-text); margin-top: 8px; } .empty .e-s { font-size: 13.5px; margin-top: 4px; } .banner { display: flex; gap: 10px; align-items: flex-start; background: var(--tg-section); border-radius: var(--r); padding: 12px 14px; margin-bottom: 10px; box-shadow: 0 1px 2px rgba(0,0,0,.05); } .banner .b-t { font-size: 14.5px; font-weight: 600; display: flex; align-items: center; gap: 7px; } .banner .b-s { font-size: 13px; color: var(--tg-subtitle); margin-top: 2px; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 12px 16px; border-radius: 12px; border: 0; cursor: pointer; background: var(--tg-button); color: var(--tg-button-text); font: inherit; font-size: 15.5px; font-weight: 600; transition: transform .1s ease, opacity .1s ease; } .btn:active { transform: scale(.985); opacity: .8; } .btn.ghost { background: var(--tg-bg-secondary); color: var(--tg-text); } .btn.danger { background: var(--tg-destructive); color: #fff; } .btn.wide { width: 100%; margin-top: 4px; } .pick { display: flex; gap: 8px; padding: 4px 4px 12px; } /* ---------- Профиль ---------- */ .prof { display: flex; align-items: center; gap: 13px; padding: 14px; } .prof .ava { width: 52px; height: 52px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 21px; font-weight: 600; color: #fff; background: var(--tg-link); overflow: hidden; } .prof .ava img { width: 100%; height: 100%; object-fit: cover; } .prof .p-t { font-size: 17px; font-weight: 600; } .prof .p-s { font-size: 13.5px; color: var(--tg-subtitle); } .sw { flex: none; width: 46px; height: 27px; border-radius: 14px; border: 0; position: relative; background: var(--tg-hint); cursor: pointer; transition: background .16s ease; } .sw::after { content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform .16s ease; box-shadow: 0 1px 3px rgba(0,0,0,.3); } .sw.on { background: var(--tg-link); } .sw.on::after { transform: translateX(19px); } /* ---------- Табы ---------- */ #tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; padding-bottom: var(--sab); background: var(--tg-header); border-top: .5px solid rgba(128,128,128,.22); height: calc(var(--tabh) + var(--sab)); } .tab { flex: 1; border: 0; background: transparent; color: var(--tg-hint); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font: inherit; font-size: 11px; font-weight: 500; cursor: pointer; padding: 0; transition: color .14s ease; } .tab svg { width: 25px; height: 25px; } .tab.on { color: var(--tg-link); font-weight: 600; } .tab.on svg { transform: translateY(-1px); } .tab:active { opacity: .55; } /* ---------- Скелетон/тост/шторка ---------- */ .skel-wrap { padding-top: 2px; } .skel-card { height: 74px; border-radius: var(--r); margin-bottom: 10px; background: linear-gradient(100deg, var(--tg-section) 30%, var(--tg-bg-secondary) 50%, var(--tg-section) 70%); background-size: 300% 100%; animation: sh 1.1s ease-in-out infinite; } @keyframes sh { from { background-position: 150% 0; } to { background-position: -50% 0; } } .toast { position: fixed; left: 50%; bottom: calc(var(--tabh) + var(--sab) + 16px); transform: translateX(-50%); z-index: 60; max-width: 88%; padding: 11px 16px; border-radius: 12px; background: rgba(0,0,0,.86); color: #fff; font-size: 14px; box-shadow: 0 6px 24px rgba(0,0,0,.28); animation: tin .18s ease; } @keyframes tin { from { opacity: 0; transform: translate(-50%, 8px); } } /* ---------- Недели чипами (как .chips в SaaSMaster) ---------- */ .wchips { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .wchips::-webkit-scrollbar { display: none; } .wchip { flex: none; padding: 8px 12px; border-radius: 12px; border: 2px solid transparent; background: var(--tg-section); color: var(--tg-text); font: inherit; font-size: 13.5px; cursor: pointer; display: flex; flex-direction: column; align-items: center; line-height: 1.25; transition: transform .1s ease; } .wchip:active { transform: scale(.96); } .wchip b { font-size: 14px; font-weight: 600; } .wchip small { font-size: 11.5px; color: var(--tg-subtitle); } .wchip.cur { border-color: var(--tg-link); } .wchip.cur small { color: var(--tg-link); } .wchip.on { background: var(--tg-button); border-color: var(--tg-button); color: var(--tg-button-text); } .wchip.on small { color: var(--tg-button-text); opacity: .85; } .wchip.dis { opacity: .35; } /* ---------- Пара: время-чип + акцент на предмете ---------- */ .lesson-t { flex: none; min-width: 64px; padding: 4px 8px; border-radius: 8px; background: var(--tg-bg-secondary); text-align: center; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; } .lesson-t small { display: block; font-size: 11.5px; font-weight: 500; color: var(--tg-subtitle); } .lesson-n { font-size: 15.5px; font-weight: 600; letter-spacing: -.1px; } .lesson-m { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; } .lesson-link { color: var(--tg-link); cursor: pointer; padding: 3px 0; -webkit-user-select: none; user-select: none; } .lesson-link:active { opacity: .55; } .lesson-note { flex-basis: 100%; font-size: 13px; color: var(--tg-subtitle); font-style: italic; } /* Гостевой баннер и подсказки — спокойнее, без лишней рамки. */ .banner.guest { background: var(--tg-bg-secondary); box-shadow: none; } .banner.guest .b-t { color: var(--tg-text); } /* ---------- Иконки (вместо эмодзи) ---------- */ .ic { flex: none; vertical-align: -3px; } .e-ico { display: flex; justify-content: center; color: var(--tg-hint); opacity: .55; margin-bottom: 6px; } .e-ico .ic { stroke-width: 1.4; } .lesson-m .ic, .lesson-note .ic { vertical-align: -2.5px; } .btn .ic { vertical-align: -3px; } .row-chev { display: flex; }