/* CombatsLite — страницы игры на телефоне (узкий экран или узкий игровой фрейм оболочки). Подключается из html_head() с media="(max-width: 800px)" — на компьютере не действует. Вид клуба сохраняется (серые таблицы, Verdana, картинки клуба); меняется раскладка: - колонки-ячейки страниц (карточка | статы | картинка) встают одна под другой или переносятся по ширине; - картинки не шире экрана; длинные таблицы прокручиваются внутри себя, а не всей страницей; - поля ввода 16px (iOS не увеличивает страницу при вводе), кнопки и переключатели крупнее под палец. Правила страниц подключаются раньше их собственных css (square.css и т.п. выводятся в ), поэтому где нужно — селекторы с body впереди, чтобы перебить их без !important. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { overflow-wrap: break-word; } .content { padding: 4px 6px; } img { max-width: 100%; } input[type=text], input[type=password], input[type=number], input[type=email], input[type=search], select, textarea { font-size: 16px; max-width: 100%; box-sizing: border-box; } input[type=submit], input[type=button], button, .btn2 { min-height: 30px; } input[type=radio], input[type=checkbox] { width: 18px; height: 18px; vertical-align: middle; } textarea { width: 100%; } pre { white-space: pre-wrap; } .foot { padding-bottom: 8px; } /* полоса меню и строка состояния (у администрации): переносятся, а не растягивают страницу */ table.menu td, table.status td { white-space: normal; } table.status, table.status tbody, table.status tr { display: block; } table.status td { display: inline-block; padding: 2px 6px; } table.menu td.menu-l { line-height: 22px; } /* ---------- длинные таблицы: прокрутка внутри таблицы ---------- */ table.b, table.zlist, table.hlist, table.inf-fights, table.clan-mem, table.po-rep, table.avgrid, table.b.items { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } table.zlist { width: auto; } /* ---------- колонки-ячейки: одна под другой ---------- */ /* общий приём: строка таблицы — гибкий ряд с переносом, ячейки — блоки своей ширины */ body table.sq, body table.mp, body table.rc, body table.invwrap, body table.shop, body table.ch, body table.fight, body table.rp, body table.po, body table.inf-t, body table.clan-t, body table.blog-top, body table.mcols, body table.ztop { display: block; width: 100%; } body table.sq > tbody, body table.mp > tbody, body table.rc > tbody, body table.invwrap > tbody, body table.shop > tbody, body table.ch > tbody, body table.fight > tbody, body table.rp > tbody, body table.po > tbody, body table.inf-t > tbody, body table.clan-t > tbody, body table.blog-top > tbody, body table.mcols > tbody, body table.ztop > tbody { display: block; } body table.sq > tbody > tr, body table.mp > tbody > tr, body table.rc > tbody > tr, body table.invwrap > tbody > tr, body table.shop > tbody > tr, body table.ch > tbody > tr, body table.fight > tbody > tr, body table.rp > tbody > tr, body table.po > tbody > tr, body table.inf-t > tbody > tr, body table.clan-t > tbody > tr, body table.blog-top > tbody > tr, body table.mcols > tbody > tr, body table.ztop > tbody > tr { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; } body table.sq > tbody > tr > td, body table.mp > tbody > tr > td, body table.rc > tbody > tr > td, body table.invwrap > tbody > tr > td, body table.shop > tbody > tr > td, body table.ch > tbody > tr > td, body table.fight > tbody > tr > td, body table.rp > tbody > tr > td, body table.po > tbody > tr > td, body table.inf-t > tbody > tr > td, body table.clan-t > tbody > tr > td, body table.blog-top > tbody > tr > td, body table.mcols > tbody > tr > td, body table.ztop > tbody > tr > td { display: block; box-sizing: border-box; width: auto; max-width: 100%; } /* карточка бойца и статы рядом, если помещаются; иначе статы под карточкой */ body table.sq td.sq-card, body table.mp td.mp-card, body table.rc td.rc-card, body table.invwrap.inv3 td.inv-left, body table.ch td.ch-card { width: auto; flex: 0 0 auto; padding: 0 4px 0 0; } body table.sq td.sq-stats, body table.mp td.mp-stats, body table.rc td.rc-stats, body table.invwrap.inv3 td.inv-stats, body table.ch td.ch-stats { width: auto; flex: 1 1 110px; padding: 18px 0 0 6px; white-space: normal; } /* картинка площади, план клуба, кнопки комнаты — сверху во всю ширину */ body table.sq td.sq-right, body table.mp td.mp-map, body table.rc td.rc-right, body table.invwrap.inv3 td.inv-right { order: -1; flex: 0 0 100%; width: 100%; padding: 0 0 8px; } body table.rc td.rc-right { order: 5; text-align: center; } body table.invwrap.inv3 td.inv-right { order: 2; } body table.invwrap.inv3 td.inv-stats { order: 3; flex-basis: 100%; padding: 8px 4px 0; } body table.invwrap.inv3 { width: 100%; } /* рюкзак сразу под карточкой, характеристики — ниже (поверх правил узкого окна из css/inventory.css) */ body table.invwrap.inv3 > tbody > tr { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; } body table.invwrap.inv3 td.inv-left { display: block; min-width: 0; } body table.invwrap.inv3 td.inv-right { display: block; padding-top: 8px; } body table.invwrap.inv3 td.inv-stats { display: block; min-width: 0; } body table.invwrap.inv3 td.inv-stats { white-space: normal; } table.inv-st td { white-space: normal; } /* площадь и улица: панорама по ширине, ссылки на здания и кнопки — переносятся, по центру */ .sq-pan, .hmap-wrap { width: 100%; margin: 0 auto 4px; } .sq-links { text-align: center; line-height: 26px; } .sq-links a { margin-right: 4px; } .sq-links .sq-cnt { margin: 0 10px 0 0; } .sq-btns, .hm-btns { text-align: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; } .sq-btns .btn2, .hm-btns .btn2 { font-size: 12px; min-height: 34px; padding: 2px 14px; margin: 0; } .hm-btns .hm-ret { display: inline-flex; } .sq-pass, .hm-pass, .sq-online, .hm-online, .hm-cap, .sq-pass *, .rc-warn { text-align: center; } .sq-pass br, .hm-pass br { display: none; } .hm-bezel { transform: scale(1); } .hm-refresh { width: 28px; height: 28px; } /* комната бойца: кнопки справа — строками по центру, крупнее */ .rc-btn { font-size: 12px; padding: 6px 12px; margin: 3px; } .rc-warn { margin: 0 auto; } .rc-links { line-height: 24px; } /* ---------- рюкзак ---------- */ .inv-btns { text-align: center; } .inv-btns .btn2, .inv-btns a { margin: 2px; } .tabs.inv-tabs .tab { padding: 8px 12px; } .inv-head .inv-search input[type=text] { width: 150px; font-size: 16px; } .inv-head .inv-sort select { font-size: 16px; } .inv-list table.ib td.ib-pic, table.ib td.ib-pic { width: 80px; } /* ---------- карточки вещей (item_block): картинка и действия слева узкой колонкой ---------- */ .shop-list table.ib td.ib-pic { width: 86px; padding: 8px 4px 6px; } .shop-list table.ib td.ib-body { padding: 8px 6px; } .ib-act input.lnk, .ib-act a, .ib-act button { display: inline-block; min-height: 28px; line-height: 28px; } .shop-qty { display: inline-block; margin: 4px 0 0; } .shop-qty .qbtn { width: 32px; height: 30px; font-size: 16px; } .shop-qty input { width: 40px; height: 28px; font-size: 16px; } /* ---------- магазин, комиссионка, ремонт, почта: правая колонка отделов — над списком ---------- */ body table.shop td.shop-main { order: 2; flex: 0 0 100%; width: 100%; padding: 0; } body table.shop td.shop-side, body table.shop td.side { order: 1; flex: 0 0 100%; width: 100%; padding: 0 0 8px; } .side-sign { display: none; } .side-links, .side-money, .side-btns { text-align: center; } /* ссылки выхода и отделы — плитками в несколько рядов, чтобы список вещей был ближе к началу страницы */ body .side .side-links { display: flex; gap: 4px; } body .side .side-links a { flex: 1 1 0; text-align: center; padding: 6px 4px; margin: 0; } body .side .side-money { text-align: center; margin: 6px 0; } body .side .side-btns { display: flex; justify-content: center; gap: 6px; } body .side .side-btns .btn2 { margin: 0; font-size: 12px; min-height: 32px; } body .side ul.depts { display: flex; flex-wrap: wrap; gap: 3px; padding: 4px; background: #eeeeee; } body .side ul.depts li, body .side ul.depts li.sub { padding: 0; font-size: 12px; line-height: 16px; border: 1px solid #c4c4c4; background: #e2e2e2; } body .side ul.depts li.on { background: #c8c8c8; border-color: #8a8a8a; } body .side ul.depts li a { display: block; padding: 7px 8px; } body .side ul.depts li .gray { display: none; } .side-btns .btn2 { padding: 6px 12px; } .side-h { margin-top: 8px; } .shop-filter input[type=text] { width: 100%; font-size: 16px; } .shop-filter select { font-size: 16px; } .shop-filter input[type=submit] { margin: 4px 0 0; padding: 4px 14px; } /* ---------- поединок ---------- */ /* порядок: название боя и выбор ударов → счёт → обе карточки рядом (уменьшенные) → лог */ body table.fight > tbody > tr { flex-direction: row; } body table.fight td.mid { display: contents; } /* порядок на телефоне: название поединка, сверху оба бойца (образы), под ними ход (удары/блоки, «Вперёд»), затем команды и лог */ body table.fight td.mid > * { order: 2; flex: 0 0 100%; box-sizing: border-box; } body table.fight td.mid > .ftitle { order: 0; } body table.fight td.mid > .fteams { order: 3; margin-top: 6px; } body table.fight td.mid > .ficons { order: 3; } body table.fight td.side { order: 1; flex: 1 1 50%; width: 50%; padding: 0 2px 6px; } body table.fight td.mid > .log, body table.fight td.mid > script { order: 4; } body table.fight td.side table.cc { zoom: .7; margin: 0 auto; } body table.fight .fstats { font-size: 11px; line-height: 15px; } body table.fight .fover { text-align: center; } .ftitle { font-size: 16px; margin: 0 0 4px; } #mf { width: 100%; } table.zonebox { width: 100%; table-layout: fixed; } table.zonebox th { padding: 4px 2px; } table.zonebox th.zsp, table.zonebox td.zsp { width: 6px; } table.zonebox td { white-space: normal; padding: 2px; } table.zonebox td:not(.prefrow):not(.scrollrow) label { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 2px 4px; margin: 2px 0; font-size: 13px; line-height: 16px; background: #ececec; border: 1px solid #c8c8c8; box-sizing: border-box; } table.zonebox td:not(.prefrow):not(.scrollrow) label:has(input:checked) { background: #fff; border-color: #8b0000; } table.zonebox td:not(.prefrow):not(.scrollrow) label input { flex: 0 0 auto; width: 20px; height: 20px; margin: 0; } table.zonebox td.zbtn input[type=submit] { width: 100%; min-height: 44px; font-size: 16px; font-weight: bold; } table.zonebox td.prefrow { font-size: 12px; line-height: 30px; } table.zonebox td.scrollrow select { width: 100%; } .fp-set { width: 32px; height: 30px; font-size: 13px; } .ftarget label { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; margin-right: 10px; } .fend input[type=button] { min-height: 40px; padding: 0 30px; font-size: 14px; } .log { font-size: 12px; } /* ---------- заявки на бой ---------- */ table.ztabs { display: block; } table.ztabs > tbody, table.ztabs tr { display: flex; flex-wrap: wrap; gap: 2px; } table.ztabs td { display: block; padding: 6px 8px; } table.ztabs td.zl { width: auto; } .zap input[type=text], .zap select { font-size: 16px; } .zap input[type=submit], .zap input[type=button] { font-size: 13px; padding: 5px 10px; } .zap input.ilnk { font-size: 13px; min-height: 28px; } .zap fieldset { max-width: 100%; box-sizing: border-box; } .zap table { max-width: 100%; } .zap td { white-space: normal; } /* ---------- анкета «Информация о персонаже» ---------- */ body table.inf-t td { flex: 0 1 auto; } .inf-right { width: auto; } /* ---------- вкладки, общие кнопки ---------- */ .tabs .tab { padding: 8px 12px; } .btn2 { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; vertical-align: middle; } /* ---------- админка: без прокрутки всей страницы вбок (таблицы прокручиваются внутри себя, см. выше) ---------- */ body.adm .asec-h { flex-wrap: wrap; } body.adm .asec-h > span:not(.acl-bar) { flex: 1 1 140px; } body.adm .asec-h .acl-bar { flex: 1 1 100%; flex-wrap: wrap; margin-left: 0; } body.adm .acl-btn { min-height: 30px; } body.adm table { max-width: 100%; } body.adm table:not(.b) { display: block; overflow-x: auto; } body.adm input[type=text], body.adm input[type=number], body.adm select, body.adm textarea { font-size: 16px; } body.adm .adm-cols > div, body.adm .adm-box { min-width: 0; max-width: 100%; box-sizing: border-box; } /* колонки .mcols (анкета, банк) и шапка заявок .ztop: ячейки на всю ширину одна под другой */ body table.mcols > tbody > tr > td { flex: 0 0 100%; } body table.ztop > tbody > tr { justify-content: space-between; } body table.ztop > tbody > tr > td { flex: 1 1 auto; } /* анкетные данные: подпись над полем, поля во всю ширину */ table.ank, table.ank > tbody, table.ank tr, table.ank td { display: block; } table.ank td { padding: 1px 2px; } table.ank input[type=text], table.ank textarea { width: 100%; } /* касания: без задержки двойного нажатия (масштаб страницы) */ a, button, input, label, select, .btn2 { touch-action: manipulation; } body table.fight td.side .fstats { display: none; } /* на телефоне под образами — сразу ход, статы бойцов не растягивают экран */