, сколько бы ни было соседей. */ body.game { /* Ровно по окну, без прокрутки страницы — как в старой игре: верхняя часть занимает оставшееся место и прокручивается внутри себя, а разговор и строка ввода прибиты к низу и всегда видны. Раньше страница вырастала по содержимому, и строка ввода уезжала за край. */ display: flex; flex-direction: column; height: 100vh; overflow: hidden; /* Отступа сверху нет: в старой игре панель начинается от нулевой строки, и из-за нашего отступа всё съезжало на семь пикселей. */ margin: 0; padding: 0; background-color: var(--page); color: var(--ink); font: 10pt Verdana, Arial, Helvetica, Tahoma, sans-serif; } /* Соседи

занимают ровно свою высоту, а растягивается и прокручивается только содержимое. */ body.game > * { flex: 0 0 auto; } body.game > main { flex: 1 1 0; min-height: 0; overflow-y: auto; } a { color: var(--link); font-weight: bold; text-decoration: none; } a:hover { color: var(--link-hover); } a:active { color: #6f0000; } /* ---- верхняя полоса: в игре это была узкая строка меню ---- */ header.top { max-width: 900px; margin: 0 auto 8px; padding: 0 8px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-bottom: 1px solid #c9c7c7; } header.top .brand { font: bold 13px Arial, sans-serif; color: var(--head); text-decoration: none; padding: 5px 0; } header.top .brand:hover { color: var(--head-2); } nav.main { display: flex; gap: 12px; } nav.main a { font: bold 10px Verdana, sans-serif; color: var(--menu); text-transform: uppercase; letter-spacing: 0.02em; text-decoration: none; padding: 6px 0; } nav.main a:hover { color: var(--menu-hover); } .session { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--dsc); } /* ---- полоса состояния ---- В старой игре это была отдельная верхняя панель (fastpanel.php), видная на любой странице: где ты, сколько здоровья, маны и денег. Без неё игровой экран выглядит набором таблиц, а не игрой. */ .status { max-width: 900px; margin: 0 auto 10px; padding: 5px 8px; background: var(--panel); border: 1px solid var(--panel-line); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .status .place { display: flex; align-items: center; gap: 6px; font-size: 11px; } .status .place img { width: 24px; height: 24px; display: block; } .status .place b { font-size: 11px; } .status .purse { font-size: 11px; color: var(--dsc); white-space: nowrap; } .status .purse b { color: var(--number); font-size: 12px; } /* Содержимое от левого края, как в старой игре: там страница не собиралась в колонку по центру, а начиналась сразу. */ main { margin: 0; padding: 0 8px 16px; min-height: 0; overflow-y: auto; } /* Ниже верхней панели старая игра ставит два узких серых столбца: слева девять пикселей, справа десять. Игровая часть, разговор и строка ввода лежат между ними. Меряно по их странице: #main_td x=9 ш=1253 при окне 1272. Раньше у нас содержимое доходило до самого края, и канта не было. */ body.game { background: #d6d6d6 url('/i/lite/_top_24.gif') repeat-y left top, url('/i/lite/_top_28.gif') repeat-y right top; } body.game > main { margin: 0 10px 0 9px; padding: 10px 0 16px 8px; background-color: #e2e0e0; } h1 { font: bold 12pt Arial, sans-serif; color: var(--head); margin: 0 0 2px; } h2 { font: bold 11pt Arial, sans-serif; color: var(--head); margin: 0; } p.sub { margin: 0 0 10px; font-size: 11px; color: var(--dsc); } /* ---- окно: заголовок полосой, как в игровых окнах ---- */ /* Панель — как .genwnew в их стилях: светло-серая с тонким кантом. Заголовок над ней обычный, тёмно-красным Arial (их H4), без полосы: полосу мы придумали сами, и из-за неё все страницы выглядели чужими. */ .panel { background: var(--panel); border: 1px solid var(--panel-line); margin-bottom: 10px; padding: 8px; } .panel > h2 { color: var(--head); font: bold 11pt Arial, Helvetica, sans-serif; margin: 0 0 6px; } .panel a { font-weight: bold; } /* ---- таблицы ---- */ table.slots, table.stats { width: 100%; border-collapse: collapse; } table.slots td, table.stats td { padding: 3px 6px; font-size: 11px; vertical-align: middle; border-bottom: 1px solid #dedede; } table.slots tr:last-child td, table.stats tr:last-child td { border-bottom: none; } table.stats td:first-child { color: var(--dsc); width: 60%; } table.stats td:last-child { text-align: right; font-weight: bold; } table.slots tr.head td { background: #dcdcdc; color: var(--dsc); font-size: 10px; border-bottom: 1px solid var(--panel-line); } table.slots tr.head td:nth-child(n+3) { text-align: right; } td.slot { color: var(--dsc); width: 26%; font-size: 11px; } td.empty { color: #909090; } td.price { text-align: right; white-space: nowrap; font-weight: bold; color: var(--number); } td.act { text-align: right; width: 1%; white-space: nowrap; } td.icon { width: 44px; padding: 2px; } span.meta { display: block; color: var(--dsc); font-size: 10px; } span.warn { display: block; color: var(--err); font-size: 10px; } .number { font-size: 11pt; font-weight: bold; color: var(--number); } /* иконка предмета на светлой подложке, как в старом инвентаре */ .ico { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: #e5e5e5; border: 1px solid #cfcfcf; } .ico img { max-width: 38px; max-height: 38px; display: block; } .ico.empty { opacity: 0.5; } /* ---- полоски здоровья и маны ---- Рисуются тем же спрайтом i/hp.jpg, что и в старой игре. В нём пять полос по 10 пикселей: серая пустая, красная, оранжевая, зелёная и синяя для маны. Смещения (-11, -21, -31, -41) взяты из классов .hp_1 .. .hp_mp старого main.css. Цвет здоровья меняется по остатку — это и есть та самая полоска, по которой в бою читают, жив противник или нет. Класс называется .hpbar, а не .bar, и это важно: планка ссылок наверху публичных страниц тоже называлась .bar, и полоска накрывала её своими height:11px и overflow:hidden. Меню на /library, /forum и главной схлопывалось в тонкую бордовую нитку, из которой торчали углы полей входа. Два разных предмета не должны носить одно имя. */ .hpbar { display: block; position: relative; height: 11px; width: 100%; overflow: hidden; background: url('/i/hp.jpg') 0 0 repeat-x; border: 1px solid #b9b9b9; margin: 2px 0 6px; } .hpbar > i { display: block; height: 100%; } .hpbar > span { display: block; } .hpbar.low > i { background: url('/i/hp.jpg') 0 -11px repeat-x; } .hpbar.middle > i { background: url('/i/hp.jpg') 0 -21px repeat-x; } .hpbar.full > i { background: url('/i/hp.jpg') 0 -31px repeat-x; } .hpbar.mp > i { background: url('/i/hp.jpg') 0 -41px repeat-x; } .hpbar > span { position: absolute; inset: 0; text-align: center; font: bold 9px Verdana, sans-serif; line-height: 11px; color: #f4f4f4; text-shadow: 0 1px 1px rgba(0,0,0,0.7); } .hpbar.mp > span { color: #00ffff; } /* ---- боевой экран ---- */ .zones { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; } .zones label.zone { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 12px; color: var(--ink); } /* Лог у старой без фона и рамки: строки размена одна под другой, разделённые тонкой чертой (btl_1.css: battle_hod_style). */ .battle-log { font-size: 12px; } .battle-log .row { padding: 2px 0; border-bottom: 1px solid #b1b1b1; line-height: 15px; } /* ---- карта движения ---- Кликабельных карт в старых файлах почти не осталось: на весь мир 28 участков в четырёх комнатах, остальные комнаты рисовали переходы иначе. Поэтому карта строится из графа дверей: текущая комната посередине, соседние вокруг неё по кругу, нажатие — переход. */ .map { position: relative; width: 100%; height: 380px; margin: 0 auto; background: #d8d6d6; border: 1px solid var(--panel-line); overflow: hidden; } .map .here, .map .there { position: absolute; transform: translate(-50%, -50%); text-align: center; width: 132px; } .map .here b { display: inline-block; padding: 6px 10px; font-size: 11px; background: var(--window-title); border: 1px solid var(--brown-dark); color: #1a1a1a; } .map .there button { width: 100%; margin: 0; padding: 4px 6px; font-size: 10.5px; background: var(--grey-btn); color: var(--grey-btn-text); border: 1px solid var(--grey-btn-line); white-space: normal; line-height: 13px; } .map .there button:hover { background: #efefef; color: #222; } .map .there.locked button { opacity: 0.5; cursor: not-allowed; } .map .line { position: absolute; height: 1px; background: #a9a7a7; transform-origin: 0 50%; z-index: 0; } .map .here, .map .there { z-index: 1; } /* ---- кукла персонажа: слоты вокруг фигуры, как в старом инвентаре ---- */ .doll { display: grid; grid-template-columns: repeat(3, 62px); gap: 4px; } .doll .cell { width: 62px; height: 62px; background: #e5e5e5; border: 1px solid #cfcfcf; display: flex; align-items: center; justify-content: center; position: relative; } .doll .cell img { max-width: 60px; max-height: 60px; display: block; } .doll .cell.empty img { opacity: 0.55; } .doll .cell form { position: absolute; right: 1px; bottom: 1px; margin: 0; } .doll .cell button { font-size: 9px; padding: 0 3px; margin: 0; line-height: 13px; } .sheet { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; } .sheet .left { flex: 0 0 auto; } .sheet .right { flex: 1 1 320px; min-width: 260px; } /* ---- верхняя панель ---- Слева плашка с названием города, справа два ряда: вкладки разделов и ссылки выбранной вкладки. Картинки те же, что в старой игре (i/lite), у каждого города своя плашка и своя нижняя полоса. Размеры и цвета сняты с неё же: полоса вкладок 565 пикселей шириной и 14 высотой, нижняя 17; текст вкладок светлый (#f0f0f0, класс .main_text в их стилях), ссылки под ними тёмные (#3b3936, .menutop). Разметка при этом не таблицами, как там, а обычными строками. */ .lite { background-repeat: repeat-x; background-position: bottom; user-select: none; } /* Высоты рядов заданы явно: 14 и 17, как в старой игре. Без этого первый ряд вырастал до 25, и второй съезжал вниз на одиннадцать. */ .lite-row { display: flex; align-items: flex-end; } .lite-top { height: 14px; overflow: hidden; background: url("/i/lite/top_lite_cap_03.gif") repeat-x top; } /* Нижняя строка меню ровно по её полосе: картинка top_lite_low_15.gif высотой пятнадцать пикселей, и строка должна быть такой же. Была семнадцать, потом девятнадцать — и текст в обоих случаях выезжал за полосу и выглядел срезанным. */ .lite-low { height: 17px; } .lite-edge { display: flex; align-items: stretch; height: 6px; } .lite-edge .cap { display: block; } .lite-edge .mid { flex: 1 1 auto; background: url('/i/lite/_top_20s.gif') repeat-x; } .lite-sub .subcap { display: block; } .lite .plate, .lite .cap { display: block; align-self: flex-end; } /* Вкладки: тёмная полоса с разделителями, по краям накладки-уголки. */ .lite-tabs { display: flex; align-items: stretch; height: 14px; margin-left: auto; } .lite-tabs > img { display: block; height: 14px; width: auto; } .lite-tabs .tabs { display: flex; align-items: stretch; height: 14px; justify-content: flex-end; min-width: 497px; overflow: hidden; background: url("/i/lite/mennu112_06.gif") repeat-x; } /* Вкладки шириной по надписи, а не поровну: в старой игре «Знания» занимает 76 пикселей, «Безопасность» — 141, и разложенные поровну они расходились с оригиналом на полсотни пикселей каждая. */ .lite-tabs .tabs button, .lite-tabs .tabs form { flex: 1 1 auto; display: flex; margin: 0; } .lite-tabs .tabs button { border: 0; background: none; cursor: pointer; padding: 0 18px; align-items: center; justify-content: center; font: bold 10px Verdana, Arial, sans-serif; color: #f0f0f0; line-height: 14px; white-space: nowrap; } .lite-tabs .tabs button:hover { color: #fff; } .lite-tabs .tabs button.on { background: #404040; color: #fff; } /* Разделитель между вкладками — та же полоска в один пиксель. */ .lite-tabs .tabs i { flex: 0 0 1px; align-self: center; height: 11px; background: url("/i/lite/mennu112_09.gif") no-repeat; } /* Нижний ряд: ссылки выбранной вкладки, прижаты вправо. */ /* Строка ссылок выбранной вкладки. У них она ровно 565 пикселей — их список туда влезает. У нас в разделе «Персонаж» на две записи больше («Персонаж» и «Задания»: у них туда попадают иначе), поэтому 565 — наименьшая ширина, а не единственная: иначе хвост уезжал на вторую строку и обрезался, и «Анкеты» на экране не было. */ /* Правый блок нижнего ряда — её таблица шириной 565: накладка 20, полоса ссылок, накладка 22. */ .lite-low-right { display: flex; align-items: flex-end; margin-left: auto; } .lite-sub { height: 17px; display: flex; align-items: center; justify-content: flex-end; min-width: 523px; white-space: nowrap; background: url("/i/lite/top_lite_low_15.gif") repeat-x; /* Её размер — 10 px (td style="font-size:10px", .menutop), а не 11: на одиннадцати ряд ссылок шире её на полсотни пикселей. */ font-size: 10px; line-height: 17px; color: #3b3936; } .lite-sub span { display: none; } .lite-sub span.on { display: inline; } .lite-sub a { color: #3b3936; font-weight: bold; text-decoration: none; padding: 0 4px; } .lite-sub a:hover { color: #76726b; } /* «Заработок» в старой панели набран зелёным — единственная цветная ссылка ряда, по ней его и находят глазами. */ .lite-sub a.earn { color: green; } .lite-sub a.earn:hover { color: #0b6b0b; } /* ---- игровой экран ---- Собран по разметке запущенной старой версии: слева кукла 240 пикселей из колонок 60 | 120 | 60, посередине характеристики простыми строками, справа зал с кнопками. Цвета, рамки и полоса здоровья — оттуда же. */ .board3 { display: flex; gap: 12px; align-items: flex-start; } /* Рюкзак: столбцы вплотную, как её ячейки с cellspacing=0. */ .board3-inv { gap: 0; } .board3 .col-doll { flex: 0 0 250px; text-align: right; padding-top: 6px; } .board3 .col-stats { flex: 0 0 287px; padding-right: 7px; padding-top: 19px; } /* Правый блок прижат к краю окна, а не идёт сразу за характеристиками: в старой игре между столбцом свойств и планом зала остаётся пустое место, и картинка с кнопками стоит у самого края. */ /* Колонка с планом у неё — таблица шириной 510 (novich.php:128): сам план 500 и прижат к правому краю, а приветствие под ним шире плана на пять пикселей слева. */ .board3 .col-room { flex: 0 0 510px; max-width: 510px; margin-left: auto; } .board3 .col-room .roomart { margin-left: auto; } /* Столбцы не перестраиваем почти никогда: старая игра этого не делала вовсе, а от переноса экран складывался в один столбец, стоило окну стать уже 900 пикселей — например, в половине экрана рядом со старой версией. Кукла и свойства занимают 500, остальное отдаём залу; ниже 640 столбцы всё же расходятся, чтобы на телефоне не было каши. */ .board3 { flex-wrap: nowrap; } .board3 .col-room { min-width: 0; } @media (max-width: 1060px) { /* В узком окне прижимать некуда — пусть идёт сразу за свойствами. */ .board3 .col-room { flex: 1 1 auto; max-width: none; margin-left: 0; } } @media (max-width: 640px) { .board3 { flex-wrap: wrap; } .board3 .col-doll, .board3 .col-stats, .board3 .col-room { flex: 1 1 100%; } } /* Строка над куклой: имя, уровень в скобках, значок города. */ .wholine { width: 246px; padding: 0 3px; text-align: center; font-size: 10pt; } .wholine .cityico { vertical-align: middle; } /* Рамка куклы — тот самый «объёмный» кант старой игры: снизу и справа тёмный, сверху и слева белый. */ /* Атрибут hidden должен прятать что угодно. У .smiles и .fastpanel стоит свой display, а любое авторское правило перебивает display:none из таблицы браузера — панель смайликов из-за этого висела открытой всегда и не закрывалась ни кнопкой, ни повторным нажатием значка. */ [hidden] { display: none !important; } .personag { /* Ширина считается без рамки и отступов: сетка внутри ровно 240, и вместе с кантом выходит 248 — как у старой. С общим border-box рамке было некуда лечь, она пряталась под сеткой, и справа канта не оставалось вовсе. Замерено tools/compare.py: у неё 248, у нас было 240. */ box-sizing: content-box; width: 240px; padding: 3px; background: #ccc; border-bottom: 1px solid #666; border-right: 1px solid #666; border-left: 1px solid #fff; border-top: 1px solid #fff; } .dollgrid { display: flex; width: 240px; align-items: flex-start; } .dollcol { width: 60px; background: #e1e1e1; } .dollmid { width: 120px; background: #e1e1e1; } .dollrow { display: flex; } .dollcell { position: relative; overflow: hidden; font-size: 0; } .dollcell img { display: block; } .dollcell .noimg { font-size: 9px; color: #444; padding: 2px; display: block; } .obraz { position: relative; height: 220px; } .obraz img { display: block; } /* Значки действующих эффектов лежат поверх образа в левом верхнем углу — как в старой игре: ряд картинок 38×23 с отступом в пиксель, перенос на следующую строку по ширине образа. */ .effs { position: absolute; top: 0; left: 0; width: 120px; z-index: 3; font-size: 0; line-height: 0; } .effs img { display: inline-block; margin: 1px; } /* Под образом два ряда по три клетки — карманы, как в старой игре. */ .dollbottom { height: 40px; } .dollbottom .dollrow { display: flex; } /* Полоса здоровья: кусок картинки i/hp.jpg, сдвинутый по вертикали. hp_none — пустая подложка, hp_1…hp_3 — от мала до полна, hp_mp — мана. */ /* Полосы лежат в ячейке ровно 20px (__user.php: ): без маны одна полоса стоит на 5px сверху, с маной первая на нуле, вторая на десятом. Высота ячейки от этого не меняется, поэтому кукла и её клетки не съезжают. */ .hpbox { position: relative; height: 20px; background: #ccc; } .hpbox .hpline { position: absolute; left: 0; right: 0; top: 5px; } .hpbox .hpline.mpline { top: 10px; } .hpbox.withmp .hpline { top: 0; } .hpline { position: relative; height: 10px; background: #ccc; border-bottom: 1px solid #dadada; box-sizing: content-box; height: 9px; } .hpline.mpline { margin-top: 1px; } .hpfill { position: absolute; left: 0; top: 0; height: 9px; } .hptext { position: relative; z-index: 2; text-align: center; font: bold 9px Verdana, sans-serif; line-height: 9px; color: #f4f4f4; } .hptext.mp { color: #00ffff; } .hp_none { background: url("/i/hp.jpg") 0 0 repeat-x; } .hp_1 { background: url("/i/hp.jpg") 0 -11px repeat-x; } .hp_2 { background: url("/i/hp.jpg") 0 -21px repeat-x; } .hp_3 { background: url("/i/hp.jpg") 0 -31px repeat-x; } .hp_mp { background: url("/i/hp.jpg") 0 -41px repeat-x; } /* Столбец характеристик: простые строки, как в оригинале. */ .statcol { font-size: 12px; line-height: normal; } .statcol .free { color: var(--head); } .statcol .shead { color: var(--head); font-weight: bold; margin: 8px 0 2px; } .statcol .plus { display: inline; margin: 0; } .statcol .plus button { cursor: pointer; padding: 0; border: 0; background: none; vertical-align: middle; line-height: 0; } .statcol .plus img { display: inline-block; } /* ---- разговор, комната и строка ввода ---- Нижняя половина экрана старой игры: слева разговор, справа комната шириной 240 пикселей на фоне #faf2f2 с кантом слева, под ними строка ввода высотой 30 на своей картинке. Цвета и размеры оттуда же. */ /* Разговор стоит в рамке с полями по девять пикселей — в старой игре по краям страницы идут узкие столбцы с кантом. Высота 35 % окна: у них разговор занимает 224 пикселя из 629. */ /* Полоска-ручка над разговором: за неё тянут, меняя высоту чата. В старой это #reline1 с тем же курсором. */ /* Ручка высоты — без своей черты: линию рисует сам разговор, а три полосы подряд (ручка, кант ленты и кант рамки) выглядели забором. */ .reline { height: 1px; margin: 0 10px 0 9px; background: #ccc; border-bottom: 1px solid #797779; cursor: n-resize; } .talk { display: flex; align-items: stretch; height: 35.6vh; min-height: 120px; max-height: 70vh; margin: 0 10px 0 9px; background: #eee; border-top: 1px solid #808080; } .talk .stream { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; position: relative; } .talk .who-here { flex: 0 0 242px; background: #faf2f2; overflow-y: auto; border-left: 2px solid #ccc; border-top: 1px solid #808080; padding: 5px; } /* Вкладки прижаты к правому верхнему углу разговора — как там. */ .tabs-line { position: absolute; right: 20px; top: 0; z-index: 2; display: flex; gap: 2px; font-size: 11px; font-weight: bold; } /* Вкладки скошены, как в старой игре: правый край уходит вбок. Делаем вырезкой, а не картинкой — тянется под любую надпись. */ /* Вкладки разговора её цветами: неактивная серая (#808080, .zbtn1c), открытая — серо-бежевая плашка #D5D2C9 с чёрным кантом сверху и снизу и жирной подписью (.zbtn2c). Скосы у неё рисуются картинками по бокам, у нас — вырезкой, но цвета теперь её. */ .tabs-line .chan { height: 18px; line-height: 18px; padding: 0 5px; margin-right: -10px; background: #808080; color: #f4f4f4; text-decoration: none; font-weight: normal; text-align: center; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); } /* Ширины вкладок её: «Чат» узкая, «Системные сообщения» широкая. Ширина задана содержимому, а не рамке: скос ест по десять пикселей с боков, и в border-box подпись обрезалась. */ .tabs-line .chan { box-sizing: content-box; } .tabs-line .chan[data-chan="зал"] { width: 25px; } .tabs-line .chan[data-chan="система"] { width: 150px; } .tabs-line .chan.on { background: #d5d2c9; color: #000; font-weight: bold; border-top: 1px solid #000; border-bottom: 1px solid #000; position: relative; z-index: 2; } .tabs-line span { padding: 2px 22px 2px 14px; margin-right: -10px; background: #808080; color: #f4f4f4; clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%); cursor: default; } .tabs-line span.on { background: #fff; color: #222; position: relative; z-index: 2; } .talk .lines { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 2px; background: #eeeeee; border-top: 1px solid #808080; font-size: 10pt; line-height: normal; } .talk .lines .msg { margin: 0 0 2px; } /* Обращённое ко мне: время получает ярко-зелёное поле — как .date2 старой (clu0b.css: color:#007000; background-color:#00FFAA). */ .talk .lines .msg.to-me .msg-at { color: #007000; background: #00ffaa; } /* Клановая реплика в общей ленте: пометка «private [клан]» той же краской, что в старой (js/onlineList.js, класс klan). */ .talk .lines .klan { color: #7a0000; cursor: pointer; font-size: 11px; } .talk .lines .msg-at { display: inline; font: 8pt Courier, "Courier New", monospace; color: #007000; margin-right: 4px; } /* Имя автора — ссылка: клик вставляет обращение в строку ввода, как в старой игре. Подчёркивания у неё там нет, только палец на наведении. */ .talk .lines .msg-author { display: inline; margin: 0; font-weight: bold; color: #003388; text-decoration: none; cursor: pointer; } .talk .lines .msg-author:hover { color: #0066ff; text-decoration: none; } /* Личная реплика: пометка «private [Имя]» красным на розовом, фона у самой строки у старой нет. */ .talk .lines .private { font-weight: bold; color: red; background: #fae0e0; } /* Смайлик в реплике стоит по строке, а не свисает под неё. */ .talk .lines .sml { vertical-align: middle; } /* Панель комнаты: кнопка обновления, название, список, галочка. */ .who-top { display: flex; align-items: center; justify-content: center; gap: 6px; } .who-top .btn { background: #504f4c; border: 1px double #9a9996; color: #dfdfdf; padding: 1px 6px; cursor: pointer; font: 12px Verdana, Arial, sans-serif; font-weight: normal; } .who-top .btn:hover { background: #6a6864; color: #fff; } .who-top img { display: block; } .who-here .roomname { text-align: center; color: var(--head); font: bold 10pt Verdana, Arial, Helvetica, Tahoma, sans-serif; padding: 0 0 8px; } .who-here ul { list-style: none; margin: 0; padding: 0 0 0 5px; font-size: 10pt; } .who-here li { line-height: normal; margin-top: 2px; padding: 0; white-space: nowrap; } .who-here li.me { font-weight: bold; } .who-here .lvl { color: #222; font-weight: normal; } .who-here .who-name { color: var(--link); font-weight: bold; text-decoration: none; } .who-here .who-name:hover { text-decoration: underline; } .who-here form { display: inline; margin: 0; } .who-here button.link { background: none; border: 0; padding: 0; margin-left: 4px; cursor: pointer; font: inherit; color: var(--link); font-weight: bold; } .who-here button.link:hover { text-decoration: underline; } .who-here .auto { display: block; margin-top: 8px; padding: 5px; font-size: 11px; cursor: pointer; } /* Строка ввода во всю ширину, как нижняя полоса старой игры. */ .saybar { /* Высота ровно 30, как у неё: значки в строке 30×30, и лишние пять пикселей заставляли их болтаться в полосе. Замерено tools/compare.py. Между значками у неё зазора нет вовсе — они стоят вплотную, ячейка к ячейке; наш зазор в шесть пикселей растягивал ряд и ломал ширину. */ display: flex; align-items: center; gap: 0; height: 30px; padding: 0 6px 0 0; margin: 0 10px 0 9px; background: #e9e9e9 url("/i/buttons/chat_bg.gif") repeat-x; border-top: 1px solid #ccc; } .saybar .ico { display: block; } .saybar input[type=text] { flex: 1 1 auto; min-width: 0; } /* Просвет перед смайликами — в старой строке там пустая ячейка в 10px. */ .saybar .chatgap { display: inline-block; width: 10px; } /* Окошки над строкой ввода: смайлики и панель быстрого доступа. Место то же, что в старой игре, — правый нижний угол разговора; там окно полупрозрачное и проясняется под курсором. */ .smiles, .fastpanel { position: absolute; right: 16px; bottom: 6px; z-index: 5; background: #dedede; border: 2px solid #000; opacity: .9; } .smiles:hover, .fastpanel:hover { opacity: 1; } .smiles { width: 400px; height: 235px; display: flex; flex-direction: column; } .smiles .sml-list { flex: 1 1 auto; overflow: auto; padding: 3px; } .smiles .sml-list img { cursor: pointer; margin: 1px; vertical-align: middle; } .smiles .sml-none { text-align: center; color: #666; margin: 60px 0 6px; } .smiles .sml-note { font-size: 11px; color: #555; margin: 0 10px; text-align: center; } .smiles .sml-btns { display: flex; justify-content: space-between; padding: 4px 5px; border-top: 1px solid #b5b5b5; } .fastpanel { width: 236px; padding-bottom: 4px; } .fastpanel .fp-head { display: flex; align-items: center; gap: 6px; padding: 2px 4px; background: #504f4c; color: #e6e6e6; font: bold 11px Verdana, sans-serif; } .fastpanel .fp-close { margin-left: auto; border: 0; background: none; color: #e6e6e6; cursor: pointer; font-size: 12px; line-height: 1; } /* Клетки 41×26 с двойным кантом — так они нарисованы в старой панели. */ .fastpanel .fp-slots { padding: 5px; text-align: center; } .fastpanel .fp-cell { position: relative; display: inline-block; width: 41px; height: 26px; margin: 1px; border-right: 1px solid #333; border-bottom: 1px solid #333; border-left: 1px solid #eee; border-top: 1px solid #eee; } .fastpanel .fp-cell.empty { opacity: .3; } .fastpanel .fp-cell form { display: inline; margin: 0; } .fastpanel .fp-cell button { border: 0; background: none; padding: 0; cursor: pointer; } .fastpanel .fp-cell button[disabled] { cursor: default; opacity: .5; } .fastpanel .fp-cell img { max-width: 41px; max-height: 26px; display: block; } .fastpanel .fp-cell .fp-off { position: absolute; right: -2px; top: -6px; } .fastpanel .fp-cell .fp-off button { color: #b01818; font-size: 10px; } .fastpanel .fp-hint { margin: 0 6px; font-size: 10px; color: #555; } .saybar .clock { font-family: "Courier New", monospace; font-size: 12px; color: #4a4030; min-width: 62px; text-align: right; } .saybar-err { margin: 4px 8px 0; } /* Письма: заголовок со ссылкой на анкету, текст, ответ. */ .letter { border-bottom: 1px solid #ddd; padding: 8px 0; font-size: 12px; } .letter:last-child { border-bottom: 0; } .letter.unread { background: #fffbe6; } .letter .head { display: flex; gap: 10px; align-items: baseline; } .letter .subj { color: var(--head); font-weight: bold; } .letter .at { margin-left: auto; color: var(--dsc); font-size: 11px; } .letter .body { margin: 4px 0; white-space: pre-wrap; } .letter .reply { font-size: 11px; } /* Ходы в подземелье: кнопки по сторонам. */ .ways { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .ways form { margin: 0; } .ways .btn { font-size: 12px; padding: 3px 14px; cursor: pointer; background: #504f4c; border: 1px double #9a9996; color: #dfdfdf; } .ways .btn:hover { background: #6a6864; color: #fff; } .here { list-style: none; margin: 4px 0; padding: 0; font-size: 12px; } .here li { padding: 2px 0; } .here li.me { font-weight: bold; } .here .lvl { color: var(--dsc); } /* Доска заявок: вкладки разделов и список. Цвета вкладок из старой игры: .m #99CCCC для выбранной, .s #BBDDDD для остальных. */ /* Вкладки доски у неё — таблица во всю ширину: ячейки цвета #99CCCC, выбранная светлее (#BBDDDD) и остаётся такой же ссылкой. Приглушённых вкладок там нет вовсе. */ .duel-tabs { display: flex; flex-wrap: nowrap; gap: 1px; margin-bottom: 10px; font-size: 12px; width: 100%; } .duel-tabs .lbl { padding: 4px 8px; font-weight: bold; flex: none; } .duel-tabs .tab { flex: 1 1 0; text-align: center; padding: 4px 6px; background: #99cccc; color: #14425a; text-decoration: none; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .duel-tabs .tab.on { background: #bbdddd; color: #0a2b3a; } .duel-tabs .tab:hover { background: #a9d5d5; } @media (max-width: 720px) { .duel-tabs { flex-wrap: wrap; } .duel-tabs .tab { flex: 1 1 30%; } } .postduel label { display: inline; margin-right: 8px; } .postduel-team label, .postduel-agreed label { display: inline; } .postduel select { padding: 2px; } .postduel button { margin-top: 0; } .duels { border-collapse: collapse; width: 100%; font-size: 10pt; } .duels td { padding: 4px 8px 4px 0; border-bottom: 1px solid #ddd; color: #222; } .duels .duel-time { font: 8pt Courier, "Courier New", monospace; color: #007000; } .duel-mine { padding: 4px 0; font-weight: bold; } .duels .nm { font-weight: bold; } .duels .lvl { color: var(--dsc); font-weight: normal; } .duels .at { color: var(--dsc); } .duels .ac { text-align: right; white-space: nowrap; } .postduel { margin-top: 10px; } /* Выбор приёма в бою. */ .tricks { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; } .tricks .trick { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; padding: 2px 8px; font-size: 12px; background: var(--panel); border: 1px solid var(--panel-line); } .tricks .trick.off { opacity: 0.5; cursor: not-allowed; } .tricks .trick .cost { color: var(--dsc); font-size: 11px; } /* Список приёмов: название, уровень, описание. */ .skills { border-collapse: collapse; width: 100%; font-size: 12px; } .skills td { padding: 4px 8px 4px 0; border-bottom: 1px solid #ddd; vertical-align: top; } .skills .nm { font-weight: bold; white-space: nowrap; } .skills .lv { color: var(--dsc); white-space: nowrap; } .skills .ds { width: 100%; } .skills .ac { white-space: nowrap; } /* Ссылка «+ Способности» — как в старой игре, вместо кнопок у каждой характеристики: очки раздаются на своей странице. */ .abilink { color: var(--link); font-weight: bold; } /* Страница распределения очков. */ .abil-table { border-collapse: collapse; font-size: 10pt; } .abil-table td { padding: 1px; } .abil-table .name { min-width: 130px; } .abil-table .now { font-weight: bold; text-align: right; width: 40px; } .abil-table .pick { white-space: nowrap; } .abil-table .amount { width: 46px; text-align: center; } /* Ступени — те же картинки 9×9, что у владений, без рамки и фона. */ .abil-table .step { cursor: pointer; border: 0; background: none; padding: 0; margin-right: 4px; } .abil-table .bonus { width: 60px; white-space: nowrap; } .abil-left { margin: 0; font-size: 10pt; } /* Ежедневное задание: подпись и медаль под характеристиками, как в старой игре. Пока задание не начато, медаль приглушена. */ .daily { width: 147px; margin-left: 15px; margin-top: 27px; text-align: center; cursor: help; } .daily .medal { display: inline-block; width: 70px; } .daily .cap { color: var(--head); font: bold 13px Arial, sans-serif; margin-bottom: 4px; } .daily img { display: inline-block; } /* ---- анкета персонажа ---- Кукла слева, под ней город и зал по центру; справа характеристики двумя группами через черту; в правом верхнем углу знак зодиака и флаг наград. Всё как на их странице. */ .profile { display: flex; gap: 16px; align-items: flex-start; } /* Кукла отодвинута от края, как у них: там столбец шириной 255 с полем в одиннадцать пикселей, и сама кукла начинается на двадцатом. */ .profile .pcol-doll { flex: 0 0 250px; margin-left: 10px; } /* Столбец характеристик тянется до знаков, как у них: там это таблица во всю оставшуюся ширину. Текст всё равно прижат влево, но при фиксированной ширине столбец обрывался раньше времени. */ /* Колонка характеристик у неё 10pt Verdana обычной высоты строки, а сама таблица отодвинута сверху на 18px (inf.php:800). */ .profile .pcol-stats { flex: 1 1 auto; font-size: 10pt; line-height: normal; padding-top: 18px; } .profile .pcol-marks { flex: 0 0 111px; text-align: right; } /* Под куклой у неё с городом 10pt и мелкими строками ниже (inf.php:626). */ .pcity { text-align: center; font-weight: bold; font-size: 10pt; padding-top: 3px; margin: 0; } .pwhere { text-align: center; font-size: 10pt; line-height: normal; } /* Между группами — черта, как в оригинале. */ /* Группы у неё — просто блок с полем в пять пикселей; черта между ними стоит отдельным

(inf.php:827, 840). */ .pgroup { border-bottom: 0; padding: 5px; margin: 0; background: none; } .psep { height: 1px; margin: 3px; border: 0; border-bottom: 1px solid #aeaeae; } /* Знак зодиака и флаг наград стоят друг под другом в узком столбце у правого края — так в их анкете. Раньше мы ставили их рядом, и правый верхний угол выглядел иначе. Поля по пять пикселей и отбивка в двадцать пять между ними — оттуда же. */ /* В их разметке у знака стоит margin-bottom:25 — без единиц, и браузер это правило пропускает. Поэтому флаг лежит вплотную под знаком, и у нас должно быть так же: отбивки между ними нет. */ .pcol-marks .zsign { display: block; width: 111px; padding: 5px; margin: 0 0 0 auto; } .pcol-marks .pevents { display: block; width: 111px; margin-left: auto; text-align: center; } .pcol-marks .pevents img { display: block; padding: 5px; } .pcol-marks .pevents .cap { font: bold 12px Verdana, sans-serif; color: var(--link); margin-top: -4px; } /* Подсказка при наведении. В старой игре это .ttl_css: серая плашка со свечением текста и мягкой тенью. Браузерная подсказка её не заменяет — она появляется с задержкой и не умеет строк. */ .ttl { position: absolute; z-index: 1000; max-width: 320px; padding: 4px 8px; background: #cfcfcf; color: #1a1a1a; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 3px; box-shadow: 0 0 3px #000; text-shadow: 0 0 2px #fff; font: 12px Verdana, Arial, sans-serif; line-height: 17px; pointer-events: none; } .ttl b { color: #000; } .ttl hr { border: 0; border-top: 1px solid #b5b5b5; margin: 3px 0; } /* ---- инвентарь ---- Три колонки, как в старой игре: кукла, свойства, рюкзак. Сверху ряд кнопок у правого края. */ /* Ряд кнопок живёт в столбце сумки (у неё — в третьем td, _inv.php:249). */ .invtop { display: flex; gap: 4px; justify-content: flex-end; margin: 0 5px 3px 5px; } .invtop .btn { font-size: 12px; padding: 2px 8px; text-decoration: none; background: #504f4c; border: 1px double #9a9996; color: #dfdfdf; } .invtop .btn:hover { background: #6a6864; color: #fff; } .board3 .col-bag { flex: 1 1 480px; min-width: 340px; } /* Заголовок рюкзака и вкладка над ним — как там: одна вкладка выделена, под ней строка с массой и деньгами. */ .baghead { display: flex; align-items: center; gap: 6px; min-height: 20px; padding: 0 2px; font-size: 12px; font-weight: bold; color: #2b2c2c; background: #a5a5a5; border-left: 1px solid #a5a5a5; border-right: 1px solid #a5a5a5; } .baghead .purse { margin-left: auto; font-weight: normal; } /* Вещь в рюкзаке: картинка слева, описание справа — как в оригинале. */ .bag { background: #a5a5a5; border-top: 1px solid #a5a5a5; border-bottom: 1px solid #a5a5a5; display: flex; flex-direction: column; gap: 1px; } .bagitem { display: flex; padding: 0; border: 0; background: #d4d4d4; font-size: 10pt; color: #222; } .bagitem:nth-child(odd) { background: #c8c8c8; } .bagitem .pic { flex: 0 0 160px; text-align: center; padding: 5px; border-right: 1px solid #a5a5a5; } .bagitem .pic img { max-width: 64px; max-height: 64px; display: block; margin: 0 auto 4px; } .bagitem .pic .noimg { font-size: 10px; color: var(--dsc); display: block; margin-bottom: 4px; } .bagitem .about { font-size: inherit; line-height: 17px; min-width: 0; padding: 7px 0 3px 3px; } .bagitem .name { font-weight: bold; } .bagitem .kind { color: #222; } .bagitem .fix { display: inline; margin-left: 6px; } .bagitem .wearform, .bagitem .useform { display: inline; } .bagitem .worn { color: brown; } .bagitem .warnbrown { color: brown; } .bagempty { background: #c7c7c7; text-align: center; padding: 4px; } .bagmsg { color: #ff0000; font-weight: bold; min-height: 18px; padding: 2px 4px; } /* Список вещей, которым нужен ремонт, — под панелью приёмов. */ .repairlist { text-align: left; font-size: 11px; margin-top: 4px; } .repairlist .worn { color: brown; } /* Окошко «Сохранить комплект» — её вида. */ .savebox { position: absolute; top: 50px; left: 250px; z-index: 99; width: 250px; border: 1px solid #b1a996; } .savecap { background: #b1a996; padding: 2px 5px; } .savebody { background: #ddd5c2; padding: 5px; } .savebody input[type=text] { width: 90%; } .savebody .btn { font-size: 12px; padding: 1px 6px; margin: 4px 4px 0 0; } /* Коробочка сортировки — как у неё: серая плашка у правого края. */ .bagsort { position: relative; } .sortbox { position: absolute; top: 19px; right: 11px; z-index: 5; background: #a5a5a5; padding: 3px 4px; min-height: 30px; white-space: nowrap; } .sortbox .btn { font-size: 12px; padding: 1px 6px; margin: 2px 2px 0 0; text-decoration: none; display: inline-block; } .sortbox .btn.on { background: #6a6864; color: #fff; } .bagsort .small.open { background: #b3c3de; color: #222; } .bagpages { background: #a5a5a5; padding: 2px 6px; font-size: 12px; } .bagpages a { margin: 0 3px; } .bagpages a.on { font-weight: bold; } .bagitem .sell { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } /* Надетая вещь снимается нажатием прямо на кукле. */ .dollcell .off { margin: 0; } .dollcell .off button { padding: 0; border: 0; background: none; cursor: pointer; display: block; } /* Награда за бой — заметнее подсказки, но не кричит. */ .gain { font-weight: bold; color: var(--head); margin: 4px 0 8px; } /* Картинка зала: 500×240 с тонкой рамкой, как в старой игре. Таблички выходов лежат поверх неё на своих местах. */ /* План зала у неё — блок #ione ровно 500×240 без рамки (fightclub.css:1-6); таблички стоят по пикселям, поэтому картинку нельзя ни ужимать, ни сдвигать рамкой — иначе таблички съезжают с нарисованных на плане. */ .roomart { position: relative; width: 500px; height: 240px; flex: none; } .roomart > img { display: block; width: 500px; height: 240px; } .roomart .spot { position: absolute; z-index: 2; } .roomart .spot img { display: block; } .roomart .spot form { margin: 0; } /* Кнопка-табличка ровно с картинку: без шрифтовой высоты и минимальных размеров общих кнопок, иначе картинка съезжает вниз на несколько пикселей и двоится с нарисованной на плане. */ .roomart .spot button { padding: 0; border: 0; background: none; cursor: pointer; display: block; margin: 0; min-height: 0; min-width: 0; height: 100%; width: 100%; line-height: 0; font-size: 0; vertical-align: top; } .roomart .spot img { vertical-align: top; } .roomart .spot button:hover img { filter: brightness(1.25) contrast(1.15); } .roomtext { font-size: 11px; line-height: normal; padding: 3px; margin: 0; } .roomtext .btn { font-size: 12px; padding: 1px 6px; line-height: normal; } /* Что есть в зале: ряд служб над текстом. */ .services { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; font-size: 12px; } .services .btn { font-size: 12px; padding: 2px 8px; text-decoration: none; background: #504f4c; border: 1px double #9a9996; color: #dfdfdf; } .services .btn:hover { background: #6a6864; color: #fff; } .services .btn.off { opacity: 0.5; cursor: help; } /* Тонкая черта над кнопками — в оригинале это .line высотой в пиксель. */ /* Черта и кнопки под ней у неё лежат во всю ширину третьего столбца таблицы, а не в колонке с планом: черта идёт от края колонки характеристик (x 497 при окне 1400) до правого края (novich.php:166, zv2.php:60). Отступ слева тот же, что у предупреждения о пароле. */ .wideblock { margin: 0 0 0 480px; } .line { display: block; height: 1px; margin: 7px 0; border-top: 1px inset #999; } /* Кнопки действий под картинкой, как в оригинале: тёмные, у правого края. */ .actions { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; } .actions a.btn { font-size: 12px; padding: 1px 6px; line-height: normal; text-decoration: none; font-weight: normal; background: #504f4c; border: 1px double #9a9996; color: #dfdfdf; cursor: pointer; } .actions a.btn:hover { background: #6a6864; color: #fff; } /* ---- кнопки ---- */ button, .btn { cursor: pointer; border: 1px double var(--btn-line); font: 12px Verdana, Arial, sans-serif; color: var(--btn-text); background-color: var(--btn); padding: 3px 10px; margin-top: 6px; } button:hover { color: #cecece; background-color: var(--btn-hover); } button:focus-visible { outline: 1px solid var(--head); outline-offset: 1px; } button.small { font-size: 11px; padding: 2px 7px; margin: 0; } button.link { background: none; border: none; padding: 0; margin: 0; color: var(--link); font-weight: bold; font-size: 11px; text-decoration: none; } button.link:hover { color: var(--link-hover); background: none; } /* ---- разделы магазина: светлые кнопки .btn_grey ---- */ .tabs { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 8px; } a.tab { font-size: 11px; padding: 3px 8px; text-decoration: none; font-weight: normal; background: var(--grey-btn); border: 1px solid var(--grey-btn-line); color: var(--grey-btn-text); } a.tab:hover { color: #333; background: #efefef; } a.tab.active { background: var(--window-title); color: #1a1a1a; font-weight: bold; } /* ---- поля ввода ---- */ label { display: block; font-size: 11px; color: var(--dsc); margin: 8px 0 2px; } input[type=text], input[type=email], input[type=password], select { font: 12px Verdana, Arial, sans-serif; color: var(--input-text); border: 1px solid var(--input-line); background: #fff; padding: 3px 5px; margin: 1px 0 2px; } input[type=text], input[type=email], input[type=password] { width: 100%; max-width: 260px; } input.bid { width: 70px; } .field-row { display: flex; gap: 16px; margin-top: 4px; } .field-row label { display: flex; align-items: center; gap: 4px; margin: 0; color: var(--ink); font-size: 11px; } /* ---- сообщения ---- */ .err, .ok { padding: 4px 8px; margin-bottom: 8px; font-size: 11px; font-weight: bold; border: 1px solid; } .err { color: var(--err); background: #fae0e0; border-color: #d0a0a0; } .ok { color: var(--ok); background: #ddf4dd; border-color: #a0c8a0; } .hint { color: var(--dsc); font-size: 11px; margin: 8px 0 0; } /* ---- постраничный переход ---- */ .pager { display: flex; align-items: center; gap: 12px; margin-top: 8px; font-size: 11px; color: var(--dsc); } /* ---- форма выставления на аукцион прямо в строке сумки ---- */ td.act form { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; } form.sell input[type=text] { width: 58px; font-size: 11px; padding: 2px 4px; } form.sell select { font-size: 11px; padding: 1px; } footer { max-width: 900px; margin: 0 auto; padding: 8px; border-top: 1px solid #c9c7c7; color: var(--dsc); font-size: 10px; } /* ========================================================== Форум — стили её forum_script/index.php:166-330: серый фон, Verdana 10pt, шапка 135px, пергамент #F2E5B1, коричневые ссылки, .inup, .date. ========================================================== */ body.p-forum { margin: 0; background-color: #3d3d3b; color: #000; font-size: 10pt; font-family: Verdana, Helvetica, Arial, Tahoma, sans-serif; } .p-forum img { border: none; } .p-forum td { font-size: 10pt; font-family: Verdana, Helvetica, Arial, Tahoma, sans-serif; } .p-forum #header { width: 100%; height: 135px; text-align: center; background-image: url('/static/assets/forum/line_capitalcity.jpg'); } .p-forum #footer { width: 100%; text-align: center; background: #000 url('/static/assets/forum/footer_capitalcity.jpg') repeat-x; padding-top: 13px; } .p-forum #footer td { color: #dfd3a3; font-size: 9px; padding: 6px 0; } .p-forum #main { width: 100%; text-align: center; } .p-forum .lground { background-image: url('/static/assets/forum/leftground.jpg'); } .p-forum .rground { background-image: url('/static/assets/forum/rightground.jpg'); } .p-forum h3 { font-weight: bold; font-size: 12pt; color: #8f0000; font-family: Verdana, Helvetica, Arial, Tahoma, sans-serif; text-align: center; } .p-forum h4 { font-weight: bold; font-size: 11pt; margin-bottom: 5px; color: #8f0000; font-family: Verdana, Helvetica, Arial, Tahoma, sans-serif; } .p-forum a { font-weight: normal; color: #524936; text-decoration: none; } .p-forum a:visited { color: #633525; } .p-forum a:active { color: #77684d; } .p-forum a:hover { color: #1e1e1e; text-decoration: underline; } .p-forum .date { font-weight: normal; font-size: 8pt; color: #007000; font-family: Courier, Verdana, Helvetica, Arial, Tahoma, sans-serif; text-decoration: none; } .p-forum .line1 { border-top: 1px solid #837b5c; width: 100%; margin-top: 7px; margin-bottom: 7px; } .p-forum .line2 { border-top: 1px solid #c4bfaa; width: 100%; margin-top: 9px; margin-bottom: 9px; } .p-forum .text1 { color: #8f0000; font-size: 12px; } .p-forum .inup { border: 1px double #302f2a; font-size: 8pt; color: #000; font-family: Verdana, Helvetica, Arial, Tahoma, sans-serif; background-color: #ded7bd; } .p-forum input, .p-forum textarea, .p-forum select { border: 1pt solid #b0b0b0; margin: 1px 0 2px; font-size: 10px; color: #191970; padding: 1px 2px; font-family: Verdana, Helvetica, Arial, Tahoma, sans-serif; width: auto; max-width: none; background: #fff; } .p-forum textarea.inup, .p-forum input.inup { background-color: #ded7bd; color: #000; border: 1px double #302f2a; } .p-forum .pages a { color: #5b3e33; padding: 1px 3px; } .p-forum .pages u { padding: 1px 3px; color: #6f0000; font-weight: bold; } .p-forum .pages a:hover { background-color: #fff; } .p-forum .btnnew { cursor: pointer; background-color: #e5e5e5; padding: 2px 7px; font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif; border: 1px #b0b0b0 solid; color: #494949; text-decoration: none; user-select: none; font-size: 10px; } .p-forum .btnnew:hover { background-color: #f2f2f2; border-color: #a5a5a5; color: #222; } .p-forum label { display: inline; font-size: inherit; color: inherit; margin: 0; } .p-forum .post { margin: 8px 0; text-align: left; } .p-forum .post .who { font-weight: bold; } .p-forum .post .when { font-size: 8pt; color: #007000; font-family: Courier, monospace; margin-left: 8px; } .p-forum .post .text { margin-top: 5px; white-space: pre-wrap; } .p-forum form.write { margin-top: 12px; text-align: left; } .p-forum form.write textarea { width: 95%; min-height: 100px; } .p-forum .err { color: red; font-weight: bold; } .p-forum .ok { color: green; } .p-forum p.empty { text-align: left; } /* ========================================================== Библиотека — оформление её lib.old-bk.com (main1.css + стили страницы items_info.php): чёрный фон, Verdana 10pt, жирные коричневые ссылки, карточки .inup3 пунктиром. Пергамент — 80 % окна минус 20, но не уже 680. ========================================================== */ body.p-library { margin: 0; background: #000; color: #000; font: 10pt Verdana, Arial, Helvetica, Tahoma, sans-serif; } .p-library td, .p-library p, .p-library ol, .p-library ul, .p-library li { font: 10pt Verdana, Arial, Helvetica, Tahoma, sans-serif; } .p-library a { font-weight: bold; color: #5b3e33; text-decoration: none; } .p-library a:visited { color: #633525; } .p-library a:active { color: #77684d; } .p-library a:hover { color: #000; text-decoration: underline; } .p-library img { border: none; } .p-library h2 { font-size: 1.5em; font-weight: bold; margin: 0.83em 0; color: #000; font-family: inherit; } .p-library .inup3 { border: 1px dashed #d3caa0; font-size: 12px; } .p-library .style6 { color: #dfd3a3; font-size: 9px; } .p-library .parchment { width: max(680px, calc(80vw - 20px)); } /* ========================================================== Новости — её news_script/style.css: фон bagr.gif на #EDE9DA, белая страница до 1000px с рамками, Verdana 8pt, красная полоса меню, виджеты справа. ========================================================== */ body.p-news { margin: 0; background: #ede9da url('/i/bagr.gif') repeat top; font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif; } .p-news #page { width: 96%; min-height: 97vh; margin: 0 auto; border-left: 1px #000 solid; border-right: 1px #000 solid; background: #fff url('/static/assets/news/rmenu_bagr.gif') repeat-y right top; } .p-news table, .p-news tr, .p-news td, .p-news div { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: #000; } .p-news a, .p-news a:visited, .p-news a:active { text-decoration: none; color: #800000; } .p-news a:hover { text-decoration: underline; color: #580000; } .p-news hr { border: 0; border-bottom: 1px solid #aeaeae; height: 0; } .p-news p { margin: 1em 0; } .p-news #access { background: #f40000 url('/static/assets/news/menu1at1.gif'); height: 36px; clear: both; display: block; float: left; width: 100%; } .p-news #access div { margin: 0 2%; padding-top: 2px; } .p-news #access ul { font-size: 13px; list-style: none; padding-left: 0; margin: 0; } .p-news #access li { margin-left: 30px; float: left; position: relative; height: 30px; top: -6px; font-size: 10pt; font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif; } .p-news #access a { color: #eee; display: block; font-weight: bold; text-decoration: none; } .p-news #access li:hover > a, .p-news #access .current_page_item > a { color: #ffc689; } .p-news #primary { display: table-cell; width: 100%; vertical-align: top; } .p-news #content { background-color: #fff; } .p-news #secondary { display: table-cell; padding: 0 20px; vertical-align: top; } .p-news .entry-date { color: #ffff80; } .p-news .widget { border: 1px #e7dfc4 solid; background-color: #fbfaf6; margin-bottom: 15px; } .p-news .widget-title { background: #e7dfc4 url('/static/assets/news/lmenu_2.gif'); height: 22px; line-height: 22px; border-bottom: 1px #e7dfc4 solid; font-weight: bold; padding-left: 10px; font-size: 10pt; font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif; } /* Страница входа собрана по разметке и стилям самого сайта (img.combats.com/index/index.css и index.js). Значения оттуда: фон #000 ссылки #F9F7EA, наведение #7E7765 с подчёркиванием, нажатие #77684D поле ввода Verdana 8pt, #DFDDD3 на #151616, рамка 1px double #817A63, ширина 144 (класс .inup) кнопка Verdana 7.5pt, #DFDDD3 на #2B2B18, та же рамка (.btn) общий текст Verdana 10pt, белый (.menu) полоса картинка высотой 205, повторяется по горизонтали баннер 428×205 по центру полосы Полоса и баннер меняются по сезону тем же правилом, что и в оригинале: март–май весна, июнь–август лето, сентябрь–ноябрь осень, иначе зима. Рекламных баннеров сверху, значков браузеров и кнопок соцсетей здесь нет — так попросил владелец. */ .p-promo * { box-sizing: border-box; } body.p-promo { margin: 0; min-height: 100vh; background-color: #000; color: #fff; font: 10pt Verdana, Arial, Helvetica, sans-serif; text-align: center; /* Всё содержимое стоит по центру экрана по вертикали, как в оригинале, а не прижато к верхнему краю. */ display: flex; flex-direction: column; justify-content: center; } .p-promo a { color: #f9f7ea; text-decoration: none; font-weight: normal; } .p-promo a:hover { color: #7e7765; text-decoration: underline; } .p-promo a:active { color: #77684d; } /* Полоса во всю ширину: та же картинка, что и в баннере, размноженная по горизонтали — за счёт этого баннер сливается с полосой. */ /* Полоса во всю ширину, а в ней три части: награда слева, баннер по центру, награда справа. В оригинале это была таблица с боковыми ячейками по 195 пикселей, прижатыми к низу с отступом 42 — здесь то же самое. */ .p-promo .band { width: 100%; height: 205px; background-repeat: repeat-x; background-position: center top; display: flex; align-items: flex-end; } /* Награды прижаты к краям экрана, баннер — ровно по центру между ними. В оригинале это была таблица во всю ширину: боковые ячейки по 195 пикселей у краёв, середина растягивалась. Здесь то же самое: боковые части фиксированной ширины, середина растёт. */ .p-promo .band .middle { flex: 1; display: flex; justify-content: center; align-items: flex-end; } .p-promo .band .banner { width: 428px; height: 205px; display: block; border: 0; } .p-promo .band .award { width: 195px; flex: 0 0 195px; display: flex; justify-content: center; padding-bottom: 42px; } .p-promo .band .award img { display: block; border: 0; } /* На узком экране награды по бокам не помещаются — прячем их, а не ломаем полосу. */ @media (max-width: 880px) { .p-promo .band .award { display: none; } } /* Ряд под полосой: предупреждение о возрасте у левого края, о том, что игровой мир может измениться — у правого, форма входа между ними. В оригинале это ячейки по 25 % ширины, прижатые к низу. */ .p-promo .lower { display: flex; align-items: flex-end; width: 100%; margin-top: 6px; } .p-promo .lower .notice { flex: 0 0 25%; display: flex; align-items: flex-end; } .p-promo .lower .notice.left { justify-content: flex-start; padding-left: 10px; } .p-promo .lower .notice.right { justify-content: flex-end; padding-right: 10px; } .p-promo .lower .notice img { display: block; border: 0; } .p-promo .lower .center { flex: 1; } /* На узком экране предупреждения уходят под форму, а не давят её. */ @media (max-width: 900px) { .p-promo .lower { flex-direction: column; align-items: center; gap: 14px; } .p-promo .lower .notice { flex: none; padding: 0; } } .p-promo form { margin-top: 26px; } .p-promo .field { margin-bottom: 5px; } .p-promo input.inup { width: 144px; padding: 2px 4px; font: 8pt Verdana, Arial, Helvetica, sans-serif; color: #dfddd3; background-color: #151616; border: 1px double #817a63; } .p-promo input.inup:focus-visible { outline: 1px solid #817a63; } /* Кнопки идут одна под другой: «Войти», под ней «Регистрация». */ .p-promo input.btn, .p-promo button.btn, .p-promo a.btn { display: inline-block; margin-top: 8px; padding: 2px 10px; cursor: pointer; text-decoration: none; font: 7.5pt Verdana, Arial, Helvetica, sans-serif; color: #dfddd3; background-color: #2b2b18; border: 1px double #817a63; } .p-promo input.btn:hover, .p-promo button.btn:hover, .p-promo a.btn:hover { color: #fff; text-decoration: none; } .p-promo .buttons { display: flex; flex-direction: column; align-items: center; gap: 0; } /* Нижнее меню: библиотека, законы, соглашения, события, форумы, новости. */ /* Нижнее меню идёт одной строкой и не переносится. */ .p-promo .footer-links { margin: 26px auto 0; display: flex; gap: 22px; justify-content: center; flex-wrap: nowrap; white-space: nowrap; max-width: 100%; overflow-x: auto; } .p-promo .footer-links a { font-size: 8pt; } .p-promo .err { max-width: 300px; margin: 16px auto 0; padding: 4px 8px; font-size: 8pt; color: #dfddd3; background-color: #3a1414; border: 1px double #817a63; } .p-promo .note { margin: 26px auto 0; max-width: 520px; color: #a7a495; font-size: 8pt; line-height: 15px; } .p-promo table.stats { margin: 12px auto 40px; border-collapse: collapse; } .p-promo table.stats td { padding: 2px 12px; font-size: 8pt; color: #a7a495; } .p-promo table.stats td:last-child { color: #dfddd3; text-align: right; } .p-promo h1 { position: absolute; left: -9999px; } /* Регистрация и смена пароля — её reg.css и register.css. */ /* Фон её страницы — #0F0000 из common.css (bgcolor 3D3D3B в разметке перекрыт). */ body.p-reg { margin: 0; background: #0f0000; color: #000; font: 10pt Verdana, Arial, Helvetica, Tahoma, sans-serif; } .p-reg label { display: inline; font-size: inherit; color: inherit; margin: 0; } /* Пергамент тянется до подвала: у неё html/body 100 %, div 94 %, min 750. */ .p-reg .regwrap { min-height: max(750px, calc(100vh - 54px)); } .p-reg .regtable { height: max(750px, calc(100vh - 54px)); } .p-reg #header .logo { position: absolute; left: -10px; top: 0; margin: 0; } .p-reg #header .logo a { height: 170px; width: 300px; display: block; background: url('/static/assets/site/logo-badge.png') 0 0 no-repeat transparent; } .p-reg #header .logo a:hover { background-position: top right; } .p-reg #header .logo a span { display: none; } .p-reg td, .p-reg p, .p-reg li { font: 10pt Verdana, Arial, Helvetica, Tahoma, sans-serif; } .p-reg p { margin: 15px 0; } .p-reg a { font-weight: normal; color: #ab772a; text-decoration: none; font-size: 16px; } .p-reg a:hover { color: #fff; } .p-reg #header { height: 54px; background: url('/static/assets/site/topnav.png') top center repeat-x transparent; } .p-reg #header .container { position: relative; margin: 0 auto; width: 980px; } .p-reg #main-menu { position: absolute; top: 17px; left: 290px; height: 54px; margin: 0; padding: 0; list-style: none; text-align: center; } .p-reg #main-menu li { position: relative; display: inline-block; text-align: left; padding-left: 15px; } .p-reg h3 { font: bold 12pt Arial, sans-serif; color: #8f0000; text-align: center; margin: 0; } .p-reg .regcopy { color: #ebd88b; font-family: 'Philosopher', sans-serif; font-size: 18px; } .p-reg .mmg { font-size: 8pt; font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif; padding-bottom: 8px; } .p-reg .style5 { color: #990000; } .p-reg .cp { cursor: pointer; } .p-reg .radio1txt { color: #302f2a; } .p-reg .radio1txt:hover { color: #5a636b; } .p-reg .psi_input1, .p-reg .psi_input1_none { background-color: #ded7bd; border: solid 1px #302f2a; padding: 5px; color: #000; font: 10px "MS Sans Serif", Tahoma, Verdana, sans-serif; box-sizing: border-box; margin: 0; } .p-reg .psi_list { padding: 2px 0; } .p-reg .psi_list select { width: 100%; border: 0; background: transparent; color: #000; font: 10px Verdana, sans-serif; padding: 0; margin: 0; } .p-reg .btnnew { cursor: pointer; background-color: #e5e5e5; padding: 2px 7px; font-family: Verdana, Arial, Helvetica, Tahoma, sans-serif; border: 1px #b0b0b0 solid; color: #494949; text-decoration: none; user-select: none; font-size: 10px; } .p-reg .btnnew:hover { background-color: #f2f2f2; border-color: #a5a5a5; color: #222; } .p-reg .rulesbox { appearance: none; -webkit-appearance: none; width: 19px; height: 19px; margin: 0; border: 0; padding: 0; background: url('/static/assets/site/psi_checkbox.png') 0 0 no-repeat; vertical-align: bottom; cursor: pointer; } .p-reg .rulesbox:checked { background-position: 0 -19px; } .p-reg fieldset { border: 1px solid #aeaeae; } .p-reg .cong p { color: green; text-align: center; } .p-reg .cong p.err { color: red; } /* ========================================================== Разделы сайта Правила этой страницы. Начинаются с .p-site — метки на её , чтобы не задевать остальные страницы. ========================================================== */ /* Разделы сайта — библиотека, законы, новости, форум и прочее — в старой игре жили на отдельных поддоменах и оформлены были иначе, чем и вход, и сам игровой экран: тёмное обрамление, узкая бордовая полоса меню, а посередине кремовая «пергаментная» страница с тёмно-красными заголовками. Здесь воспроизведено именно это. */ body.p-site { --dark: #171717; --dark-2: #262523; --parch: #ede4c8; --parch-2: #f7f0dc; --parch-line: #c9bb92; --maroon: #4e0d0d; --maroon-2: #6d1414; --head: #8f0000; --ink: #2b2b2b; --ink-2: #6b6455; --link: #003388; } .p-site * { box-sizing: border-box; } body.p-site { margin: 0; min-height: 100vh; background: var(--dark); color: var(--ink); font: 12px Verdana, Arial, Helvetica, Tahoma, sans-serif; } .p-site a { color: var(--link); text-decoration: none; } .p-site a:hover { text-decoration: underline; } /* Тёмная шапка со знаком сайта. */ /* Шапка разделов — та же полоса и баннер, что и на входе, только ниже: раздел должен узнаваться с первого взгляда, а не начинаться строкой текста. */ .p-site .crown { /* Саму картинку ставит разметка: полоса меняется по времени года, и это данные запроса, а не оформление. */ height: 132px; background: repeat-x center top #000; border-bottom: 1px solid #000; display: flex; align-items: center; justify-content: center; } .p-site .crown img { height: 132px; display: block; } /* Бордовая полоса меню. */ .p-site .bar { background: linear-gradient(180deg, var(--maroon-2) 0%, var(--maroon) 100%); border-bottom: 1px solid #2a0707; padding: 6px 14px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } .p-site .bar a { color: #f0d8a8; font-size: 11px; } .p-site .bar a:hover { color: #fff; text-decoration: none; } .p-site .bar a.here { color: #fff; font-weight: bold; } .p-site .bar .play { margin-left: auto; } /* Хлебные крошки на тёмной полосе, как в оригинале. */ .p-site .crumbs { background: var(--dark-2); color: #9a927f; font-size: 11px; padding: 5px 14px; border-bottom: 1px solid #000; } .p-site .crumbs a { color: #cdbf9a; } /* Пергаментная середина. */ .p-site .sheet { max-width: 1000px; margin: 0 auto; background: var(--parch); border-left: 1px solid #000; border-right: 1px solid #000; min-height: 70vh; display: flex; align-items: stretch; } .p-site .side { flex: 0 0 190px; background: var(--parch-2); border-right: 1px solid var(--parch-line); padding: 14px 12px; } .p-site .side h3 { font-size: 12px; color: var(--head); margin: 0 0 8px; } .p-site .side ul { list-style: none; margin: 0; padding: 0; } .p-site .side li { margin-bottom: 5px; font-size: 11px; } .p-site .side li.here a { font-weight: bold; color: var(--head); } .p-site .body { flex: 1; padding: 18px 22px 40px; min-width: 0; } @media (max-width: 760px) { .p-site .sheet { display: block; } .p-site .side { border-right: none; } } .p-site h1 { font-size: 20px; color: var(--head); margin: 0 0 4px; font-weight: bold; } .p-site p.sub { margin: 0 0 16px; color: var(--ink-2); font-size: 11px; } .p-site .item { background: var(--parch-2); border: 1px solid var(--parch-line); padding: 10px 12px; margin-bottom: 10px; } .p-site .item h2 { font-size: 13px; margin: 0 0 3px; color: var(--head); } .p-site .item .when { color: var(--ink-2); font-size: 11px; } .p-site .item .text { margin-top: 8px; font-size: 12px; line-height: 18px; white-space: pre-wrap; } .p-site table.rows { width: 100%; border-collapse: collapse; } .p-site table.rows td, .p-site table.rows th { padding: 6px 8px; font-size: 11px; text-align: left; border-bottom: 1px solid var(--parch-line); vertical-align: middle; } .p-site table.rows th { color: var(--ink-2); font-size: 11px; font-weight: normal; background: var(--parch-2); } .p-site table.rows td.num { text-align: right; color: var(--ink-2); white-space: nowrap; } .p-site table.rows .info { color: var(--ink-2); font-size: 11px; display: block; } .p-site table.rows td.ico { width: 30px; padding: 3px 4px; } .p-site table.rows td.ico img { width: 24px; height: 24px; display: block; } .p-site .post { border-bottom: 1px solid var(--parch-line); padding: 10px 0; } .p-site .post .who { color: var(--head); font-size: 12px; font-weight: bold; } .p-site .post .when { color: var(--ink-2); font-size: 11px; margin-left: 8px; } .p-site .post .text { margin-top: 6px; font-size: 12px; line-height: 18px; white-space: pre-wrap; } .p-site form.write { margin-top: 16px; } .p-site input[type=text], .p-site input[type=email], .p-site textarea { width: 100%; max-width: 460px; padding: 4px 6px; font: 12px Verdana, Arial, sans-serif; color: var(--ink); background: #fffdf5; border: 1px solid var(--parch-line); } .p-site textarea { min-height: 110px; resize: vertical; max-width: 100%; } .p-site label { display: block; margin: 8px 0 3px; font-size: 11px; color: var(--ink-2); } .p-site button, .p-site input.btn { margin-top: 10px; padding: 4px 14px; cursor: pointer; font: 12px Verdana, Arial, sans-serif; color: #f0e2c0; background: linear-gradient(180deg, var(--maroon-2) 0%, var(--maroon) 100%); border: 1px solid #2a0707; } .p-site button:hover { color: #fff; } .p-site .pager { display: flex; align-items: center; gap: 14px; margin-top: 12px; font-size: 11px; color: var(--ink-2); } .p-site .empty { color: var(--ink-2); font-size: 12px; } .p-site .err { color: #7a1010; background: #f3ddd8; border: 1px solid #c09a94; padding: 6px 10px; font-size: 11px; margin-bottom: 12px; } .p-site .ok { color: #23431c; background: #dcecc9; border: 1px solid #a9c191; padding: 6px 10px; font-size: 11px; margin-bottom: 12px; } .p-site footer { max-width: 1000px; margin: 0 auto; background: #0d0d0d; border: 1px solid #000; padding: 12px 14px; text-align: center; } .p-site footer .footer-links { display: flex; gap: 20px; justify-content: center; flex-wrap: nowrap; white-space: nowrap; overflow-x: auto; } .p-site footer a { color: #cdbf9a; font-size: 11px; } /* Задания. Сданное гасим, но не прячем: игрок должен видеть, что закрыл. */ .quest-done { opacity: .6; } .quest-goals { margin: .4em 0 .6em 1.2em; padding: 0; } .quest-goals li { margin: .15em 0; } .quest-goals .goal-done { color: #2d6a2d; font-weight: bold; } .quest-goals .goal-done::after { content: " ✓"; } /* Кнопки главы клана стоят в строке состава рядом друг с другом. */ form.inline { display: inline; } form.inline + form.inline { margin-left: .3em; } /* Анкета открывается отдельным окном — своей верхней панели у неё нет, как и в старой игре: фон серый, содержимое прижато к верхнему краю. */ /* Шрифт задан здесь, а не только на body.game: анкета живёт вне игровой рамки, и без своего правила браузер рисовал её Times с засечками, тогда как в старой main.css Verdana стоит на body и всех ячейках сразу. */ body.p-info { background: #e2e0e1; margin: 7px 5px; font: 10pt Verdana, Arial, Helvetica, Tahoma, sans-serif; color: #222; } body.p-info td, body.p-info p, body.p-info li { font-size: 10pt; } /* Анкетные данные под куклой: заголовок по центру тёмно-красным, как у неё. */ .anon { text-align: center; color: #8f0000; font-size: 13px; margin: 6px 0; } .pabout { font-size: 12px; line-height: 15px; } .pabout b { color: #444; } body.p-info main { max-width: none; padding: 0; } .wholine .citymark { vertical-align: middle; margin-left: 2px; } .wholine .towrite { margin-right: 3px; } .wholine .towrite img { vertical-align: middle; } /* Значки строки ввода. Ленты те же, что в старой игре: 30×60, выключенное состояние сверху, включённое — ниже на 30 пикселей. Часы справа на серой плашке, как у них. */ .saybar .chatbtns { display: flex; gap: 0; margin-left: auto; } .saybar .chatbtn { /* Размер ленты не задаём: у значков он разный — 30×30 у одного состояния, 30×60 у двух, 30×90 у «Звуков» с тремя. Общая мерка сжимала одни и растягивала другие, и от значков оставалась середина. */ /* display обязателен: часть значков — ссылки, а у строчного элемента ширина и высота не работают вовсе. Пока значков-ссылок был один («Инвентарь»), это было незаметно; с тремя новыми ряд поехал. */ display: block; flex: 0 0 auto; width: 30px; height: 30px; padding: 0; border: 0; cursor: pointer; background-color: transparent; background-repeat: no-repeat; background-position: 0 0; } .saybar .chatbtn.on { background-position: 0 -30px; } /* У «Звуков» лента на три состояния: выключено, тихо, громко. */ .saybar .chatbtn.loud { background-position: 0 -60px; } .saybar .clock { /* Размер и фон как у виджета старой: там стоит font-size: initial на сером поле #bbb8b6, и цифры заметно крупнее наших прежних двенадцати пикселей. Время московское — его и показывает виджет. */ font-family: "Courier New", monospace; font-size: initial; color: #2b2b2b; min-width: 88px; text-align: center; background: #bbb8b6; padding: 1px 4px; margin-left: 4px; line-height: 1.1; } /* Вкладки разделов рюкзака и строка поиска — как над списком вещей в старой игре: вкладки сверху, под ними масса, поиск и порядок. */ .bagtabs { display: flex; margin: 0; background: #d4d2d2; } .bagtabs .bagtab { flex: 1 1 14%; text-align: center; padding: 4px; font-weight: bold; color: #003388; text-decoration: none; font-size: inherit; } .bagtabs .bagtab:first-child { flex-basis: 16%; } .bagtabs .bagtab.on { background: #a5a5a5; } .bagtabs .bagtab .cnt { color: #777; font-weight: normal; } .bagfind { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 3px 5px; background: #ececec; border: 1px solid #ccc; font-size: 11px; } /* Верх столбца характеристик: опыт, счёт боёв и деньги — как у них. */ .statcol .quick { margin-bottom: 6px; line-height: 17px; } .statcol .quick .dsc { color: #777; font-size: 11px; } .statcol .quick .grow { font-weight: bold; color: #1f6b1f; } /* Владение оружием: список со ступенями, как во второй половине страницы умений старой игры. */ table.mastery { border-collapse: collapse; margin: 4px 0 6px; } table.mastery th { text-align: left; font-size: 11px; color: #777; padding: 2px 12px 2px 0; } table.mastery td { padding: 1px 2px; font-size: 10pt; } table.mastery td.now { text-align: right; min-width: 30px; } table.mastery td.pick form { display: inline; } table.mastery td.head { padding-top: 1px; } table.mastery td.head:first-child { padding-left: 0; } /* Отчёт о заходах: неудачные попытки видно сразу. */ table.rows tr.failed { background: #fdf0f0; } table.rows tr.failed td { color: #8f2a2a; } table.rows td.agent { font-size: 11px; color: #777; max-width: 420px; overflow: hidden; } /* Строка от игры, а не от игрока: без имени и чуть приглушённая. */ .talk .lines .msg.from-game { color: #4a4a4a; font-style: italic; } /* Кнопка отправки в строке ввода: значок, как в старой, а не серая текстовая кнопка. Плотность статов — их межстрочный шаг. */ .saybar .sendbtn { flex: 0 0 30px; } .statcol .shead { margin-top: 6px; } /* Предупреждение о пароле — во всю ширину ниже колонок, текст по ширине, подпись справа; счётчик клуба — правым краем, как в старой. */ p.warn { margin: 10px 8px 4px 480px; font-size: 11px; line-height: normal; text-align: right; } p.warn em { display: block; text-align: right; font-style: italic; } p.online { text-align: right; margin: 8px 8px 0; font-size: 14px; } /* Поиск в самой полосе рюкзака и красный крестик «выбросить» — по старой. */ .baghead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .baghead .bagfind-inline { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: normal; margin-left: auto; white-space: nowrap; } .baghead .purse { margin-left: 0; } .dropform { display: inline; } .dropbtn { border: 0; background: none; color: #b01818; cursor: pointer; font-size: 14px; padding: 0 2px; } /* Секции инвентаря: заголовок с ⊞/⊟ и серой линией, как в старой. */ .isec { margin: 5px 0 0; } .isec summary { cursor: pointer; list-style: none; font-weight: bold; font-size: 12px; user-select: none; } .isec summary::-webkit-details-marker { display: none; } .secbuttons { text-align: center; padding: 5px; } .secbuttons .btn { padding: 3px 15px; font-size: 12px; } .iconbtn { background: none; border: 0; padding: 0 2px; margin: 0; cursor: pointer; } .linkbtn { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; color: var(--link); text-decoration: none; font: inherit; } .linkbtn:hover { text-decoration: underline; } /* Три галочки под свойствами. В старой отмеченная подпись становится жирной — по ней сразу видно, что включено. */ .invflags { margin-top: 8px; font-size: 12px; line-height: 17px; } .invflags form { margin: 0; display: inline; } .invflags label { cursor: pointer; display: inline; margin: 0; font-size: 12px; color: #222; } .invflags label.on { font-weight: bold; } .invflags input[type=checkbox] { vertical-align: middle; margin: 0 3px 0 0; } /* Страница «Образ»: полотно обликов 120×220 с рамкой, как в старой (.obrsl1 в modules_data/_obraz.php). Выбранный обведён красным. */ .obrazgrid { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; } .obrsl { margin: 0; } .obrsl1 { display: block; padding: 1px; border: 1px solid #888; background: none; cursor: pointer; line-height: 0; } .obrsl1:hover { background: #f00; } .obrsl1.on { border-color: #b01818; box-shadow: 0 0 0 1px #b01818; } /* «Старая» шапка страницы: имя мелким жирным слева, кнопки справа — как полоса с «Вернуться» на страницах main.php. */ .oldtop { display: flex; align-items: center; gap: 8px; margin: 2px 0 8px; font-size: 13px; } .oldtop .oldtop-btns { margin-left: auto; display: flex; gap: 4px; } table.oldrows { font-size: 12px; } table.oldrows th { font-size: 11px; } /* Игровые страницы — по-старому скромные. В старой игре не было ни цветных панелей, ни крупных заголовков: мелкий Verdana, таблицы, серые линии. Правим общее оформление разом, а не каждую страницу отдельно. */ body.game main h1 { font: bold 13px Verdana, Tahoma, sans-serif; color: #000; margin: 2px 0 6px; } body.game main p.sub { font-size: 11px; margin-bottom: 6px; } body.game main .panel { background: none; border: 0; padding: 0; margin-bottom: 12px; } body.game main .panel > h2 { font: bold 12px Verdana, Tahoma, sans-serif; color: #000; border-bottom: 2px solid #c9c9c9; padding: 0 0 1px; margin-bottom: 4px; } body.game main h2 { font: bold 12px Verdana, Tahoma, sans-serif; color: #000; margin: 8px 0 4px; } body.game main table.rows th, body.game main table.duels th { font-size: 11px; } body.game main table.rows td, body.game main table.duels td { font-size: 12px; } /* Поле чата тянется во всю ширину: общее правило про 260px ему не указ. */ .saybar input[type=text] { max-width: none; } a.chatbtn { display: inline-block; } /* Запись списка «онлайн» — по старой: значки в линию с именем. */ .who-here li { line-height: 17px; } .who-here .who-ico img { vertical-align: middle; } .who-here img { vertical-align: middle; } .who-here .who-name { margin: 0 1px; } .who-here .who-attack { border: 0; background: none; padding: 0 0 0 3px; cursor: pointer; vertical-align: middle; } /* Личная строка в ленте: замочек и чуть приглушённый фон. */ .talk .lines .msg.private { background: #f3eede; } .talk .lines .msg-lock { vertical-align: middle; margin-right: 2px; } /* «против» в списках боёв — красным, как в старой. */ .vs { color: #b01818; font-size: 11px; } /* Панель выбранных приёмов 5×2 под куклой: клетки 40×25, как в старой. */ .prm-panel { width: 230px; margin: 8px 0 0 auto; display: grid; grid-template-columns: repeat(5, 42px); gap: 2px; } .prm-panel .prm { width: 44px; height: 29px; background: none; border: 0; overflow: hidden; text-align: center; padding: 0; cursor: default; } /* На странице приёмов панель у неё проще: блок 230px у левого края и значки подряд с полями (_umenie.php:1059-1080). */ .tabbody .prm-panel { display: block; width: 230px; margin: 0; } .tabbody .prm-panel .prm, .tabbody .prm-panel form { display: inline; } .tabbody .prm-panel .prm { width: auto; height: auto; } .tabbody .prm-panel .prm img, .tabbody .prm-panel img.prm { margin-top: 3px; margin-left: 4px; display: inline-block; } .tabbody .prm-panel img.prm.empty { margin-top: 4px; } button.prm { cursor: pointer; } .prm-panel .prm img { display: block; margin: 0 auto; } /* Пустая клетка панели — её картинка clearPriem.gif, без рамки и фона (seeMy, /i/items/w/clearPriem.gif 40×25). */ .prm-panel .prm.empty { background: none; border: 0; } .prm-panel .prm.empty img { display: block; } .prm-panel .prm-name { font-size: 8px; line-height: 9px; display: block; } /* Приёмы для выбора и фильтр «Категории» рядом: в старой список слева, узкий столбец с FIELDSET справа. Ссылки в столбце — в один столбик. */ .prm-pick { display: flex; gap: 16px; align-items: flex-start; } .prm-pick .prm-list { flex: 1 1 auto; min-width: 0; } .prm-pick .prm-cats-col { flex: 0 0 auto; text-align: right; } .prm-pick .prm-side { flex: 0 0 200px; } fieldset.prm-cats { border: 1px solid #aeaeae; margin: 0; padding: 4px 8px 6px; } fieldset.prm-cats legend { font-weight: normal; font-size: 10pt; } fieldset.prm-cats .cat { display: block; font-size: 11px; line-height: 15px; white-space: nowrap; } /* Мастерство: квадратные ⊞/⊟, как в старой. Достигнутый предел — серые значки без нажатия, у них там class="nonactive". */ .mastery-form .step { border: 0; background: none; cursor: pointer; font-size: 13px; padding: 0 2px; } .mastery-form .step.off { color: #b3b3b3; cursor: default; display: inline-block; } /* Минус до первого нажатия плюса тоже серый: в старой он выводится с class="nonactive" и оживает только когда в строку что-то набрано. */ .mastery-form .step.dim { color: #b3b3b3; } .mastery-save { font-size: 11px; } .mastery-save label { margin-left: 6px; color: #555; } /* ---- Доска заявок: запрет по уровню, тренировка, дни ---- */ .duel-gate { text-align: center; font-weight: bold; color: #000; padding: 24px 0; } .postduel.train { display: flex; align-items: center; gap: 8px; } .train-note { color: #1d7a1d; } .daynav { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .daynav h3 { margin: 4px 0; font-size: 13px; } .dayfilter { text-align: center; font-size: 11px; margin-bottom: 8px; } .tourlist { font-size: 12px; color: #6b6459; } /* Экранная клавиатура второго пароля: цифры в три ряда, как на замке. */ .keypad { display: grid; grid-template-columns: repeat(3, 34px); gap: 3px; margin-top: 5px; } .keypad button { width: 34px; height: 26px; font-size: 13px; cursor: pointer; border: 1px solid #b9b9b9; background: #efece2; } .keypad button:hover { background: #fff; } .pass2 { font-size: 15px; letter-spacing: 3px; } .pending { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; } .pending .took, .pending .ask { color: #8f0000; font-weight: bold; } /* ---- Форма «Анкета» ---- */ /* Анкета — числа её формы (_anketa.php:142-144, main.css). */ .anketa-table { width: 95%; margin: 0 auto; border-spacing: 1px; background: #b2b2b2; } .anketa-table td { background: #d3d2d0; padding: 3px; color: #222; } .anketa-table td.center { text-align: center; } /* Ширину полям задаёт их size, как у неё, а не наша общая ширина. */ .anketa-table input[type=text], .anketa-table select { width: auto; max-width: none; padding: 0; font: 10px "MS Sans Serif", Tahoma, sans-serif; color: #191970; } .anketa-table textarea { width: 95%; border: 1px solid #b0b0b0; background: #fff; font: 10px "MS Sans Serif", Tahoma, sans-serif; color: #191970; } /* Чекбокс ICQ стоит в строке с полем, а не отдельной строкой. */ .anketa-table label { display: inline; font-size: inherit; color: inherit; margin: 0; } /* Заголовок и ответ формы. */ .anketa-head { font: bold 12pt Arial, sans-serif; color: #8f0000; text-align: center; } .anketa-msg { color: #FF0000; } .anketa-save { padding: 0; margin: 0; } /* ---- Виджет перехода над планом зала ---- Расположение и размеры её: правый верхний угол плана, 80 пикселей ширины, дорожка полосы ровно 64 (_locations.php:604 и locGoLine). */ .roomart .goline, .bankexit .goline { position: absolute; top: 0; right: 12px; width: 80px; z-index: 101; display: flex; align-items: flex-end; gap: 0; } .roomart .goline .rel, .bankexit .goline .rel { display: block; } .roomart .goline .rel img, .bankexit .goline .rel img { display: block; } .roomart .goline .bars, .bankexit .goline .bars { display: block; } .roomart .goline .cap, .bankexit .goline .cap { display: block; } .roomart .goline .mid, .bankexit .goline .mid { display: flex; align-items: center; } /* Дорожка чёрная, а заполняется её же картинкой 1x1.gif, растянутой по ширине — ровно так это устроено в старой (MoveLine). */ .roomart .goline .track, .bankexit .goline .track { width: 64px; height: 8px; background: #000; display: block; } .roomart .goline .track i, .bankexit .goline .track i { /* Заполняется её же картинкой wait2.gif, как MoveLine у старой. */ display: block; height: 6px; width: 0; background: url('/i/move/wait2.gif') 0 0 repeat-y; } /* Строка «Вы перейдете в: …» у старой без фона и рамки, имя зала зелёное. */ .moveto { padding: 5px; cursor: pointer; font-size: 12px; } .moveto b { color: #008000; } /* План зала: по нему ходят, поэтому курсор-рука; табличка под курсором подсвечивается тем же набором фильтров, что и .aFilter у старой. */ .roomart { cursor: pointer; } .roomart .spot button img:hover, .roomart .spot img.spot-note:hover { filter: drop-shadow(0 1px 0 black) drop-shadow(0 -1px 0 #fff) drop-shadow(1px 0 0 #fff) drop-shadow(-1px 0 0 #fff) drop-shadow(0 0 5px rgba(255, 255, 255, 1)) contrast(1.25) brightness(1.25) hue-rotate(5deg); } /* ---- Экран клана ---- Полоса с вкладками собрана из её картинок /i/clanpanel/ (_clan.php:103-140), содержимое — 10pt Verdana #222 с разделителями #cac9c7. */ .cl { font: 10pt Verdana, Arial, Helvetica, sans-serif; color: #222; min-height: 440px; background-image: url('/i/clanpanel/klan_img_44.jpg'); } .cl a { color: #333; } .cl-top { overflow: hidden; } .cl-btn { float: right; margin: 1px; font: 12px "MS Sans Serif", Arial, sans-serif; background: #f0f0f0; border: 1px solid #b0b0b0; color: #222; padding: 1px 6px; text-decoration: none; cursor: pointer; display: inline-block; } .cl-btn:hover { background: #e6e6e6; color: #000; } .cl-red { color: red; } .cl-leave { float: right; margin-right: 50px; display: inline; } .cl-right { float: right; } .section { width: 100%; margin: 0 0 30px; } #clanpanel { width: 100%; height: 32px; color: #333; font-weight: bold; font-size: 11px; } #clanpanel .head { float: left; width: 75px; height: 18px; position: relative; background: url('/i/clanpanel/klan_img_03.jpg') no-repeat; } #clanpanel .head img { position: absolute; top: 23px; left: 40px; } #clanpanel .panel { float: left; width: 100%; height: 32px; white-space: nowrap; background: url('/i/clanpanel/klan_img_08.jpg') repeat-x; margin: 0; padding: 0; border: 0; } #clanpanel .foot { float: left; width: 75px; height: 12px; background: url('/i/clanpanel/klan_img_27.jpg') no-repeat; } #clanpanel .name { float: left; color: #990000; height: 32px; padding-left: 85px; padding-right: 15px; line-height: 32px; cursor: pointer; background: url('/i/clanpanel/klan_s3r3_07.jpg') no-repeat; } #clanpanel .tabs { list-style: none; float: left; margin: 0; padding: 0; } #clanpanel .tabs li { float: left; height: 32px; padding-left: 60px; padding-right: 20px; line-height: 32px; background-repeat: no-repeat; } #clanpanel .tabs .control { background-image: url('/i/clanpanel/klan_img_11.jpg'); } #clanpanel .tabs .info { background-image: url('/i/clanpanel/klan_img_21.jpg'); } #clanpanel .tabs .members { background-image: url('/i/clanpanel/klan_img_23.jpg'); } #clanpanel .tabs .last { float: right; width: 15px; padding: 0; background-image: url('/i/clanpanel/klan_img_25.jpg'); } #clanpanel .tabs a { text-decoration: none; color: #333; font-size: 10px; } #clancontent { width: 100%; float: left; padding-top: 25px; } .cl-row { border-bottom: 1px solid #cac9c7; margin-bottom: 5px; padding-bottom: 5px; } .cl-line { border-top: 1px solid #cac9c7; margin-top: 5px; padding-top: 5px; } .cl-fs { border: 1px dashed #eeeeee; padding: 6px 10px; } .cl-fs2 { border: 1px solid #aeaeae; padding: 6px 10px; margin-top: 10px; } .legtitle { font-weight: bold; padding: 0 5px; color: #990000; } .cl-mate { padding: 5px; background-color: #efedee; } .cl-who { display: inline-block; width: 350px; } .cl-who img, .cl-who a { vertical-align: middle; } .cl-name { font-weight: bold; text-decoration: none; } .cl-name.off, .cl-lvl.off { color: #837f82; } .infimg { margin-left: 2px; } .cl-wide { width: 144px; } .cl input[type=text], .cl select { font: 10px "MS Sans Serif", Arial, sans-serif; color: #191970; border: 1px solid var(--input-line); padding: 0; margin: 0 2px; width: 120px; } .cl input[type=button], .cl input[type=submit] { font: 12px "MS Sans Serif", Arial, sans-serif; background: #f0f0f0; border: 1px solid #b0b0b0; color: #222; padding: 0 5px; margin: 0; cursor: pointer; } /* Окошко действий главы — её openMod. */ .cl-mod { position: absolute; left: 50px; top: 186px; border: 1px solid #776f59; background: #ddd5bf; z-index: 99; width: 320px; } .cl-mod .mt { background: #b1a993; padding: 3px 5px; font-weight: bold; } .cl-mod .md { padding: 8px 5px; } .cl-mod-x { cursor: pointer; font-weight: bold; } .cl-mod-in { width: 144px; } /* ---- Экран контактов («Друзья») ---- Разметка её _friends.php: таблица в три колонки, серые ячейки строк, всплывающие окошки добавления, удаления и правки. */ .cn { border-collapse: collapse; } .cn > tbody > tr > td { vertical-align: top; } .cn-gap { width: 5%; } .cn-right { width: 30%; } .cn-msg { color: red; margin: 0 0 2px; } .cn h4 { font: bold 11pt Arial, Helvetica, sans-serif; color: var(--head); text-align: center; margin: 1.33em 0 5px; border: 0; padding: 0; } .cn-list { border-collapse: collapse; font-size: 10pt; } .cn-list td { padding: 2px; } .cn-grp { height: 40px; vertical-align: bottom; } .cn-grp h4 { margin-bottom: 0; } .cn-nm, .cn-st, .cn-cm { background: #efeded; } .cn-nm img, .cn-nm a { vertical-align: middle; } .cn-nm a { text-decoration: none; } .cn-away { filter: grayscale(1); } .cn-cm { width: 40%; } .cn-cm small, .cn-cm i { color: #606060; } .cn-ed { width: 1%; background: none; } .cn-ed img { float: right; cursor: pointer; } .cn-btns { padding-top: 8px; } .cn-top { width: 25%; text-align: right; white-space: nowrap; } .cn-mods { background: #efeded; text-align: left; } .cn-note { text-align: left; } /* Кнопки этого экрана — её .btn: без своего отступа, 12px MS Sans Serif. */ .cn input.btn, .cn a.btn { font: 12px "MS Sans Serif", Arial, sans-serif; padding: 0 4px; margin: 0; text-decoration: none; display: inline-block; } .cn a.btn { padding: 1px 4px; } /* Всплывающие окошки: у старой они стоят в левом верхнем углу кадра. */ .cn-box { position: absolute; left: 0; top: 0; z-index: 99; } .cn-box-fr { background: #ccc3aa; border-collapse: separate; } .cn-box-cap td { padding: 2px 4px; } .cn-box-x { cursor: pointer; text-align: center; } .cn-box-body { background: #fff6dd; padding: 4px; } .cn-box table { border-collapse: collapse; } .cn-box td { font-size: 10pt; } .cn-box input[type=text], .cn-box select { font-size: 10px; color: #191970; border: 1pt solid var(--input-line); padding: 0; margin: 1px 0 2px; } .cn-in-login, .cn-in-group { width: 140px; } .cn-in-comment { width: 105px; } .cn-in-wide { width: 100%; } .cn-ok { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; vertical-align: middle; } /* «Удалить из списка» собрано её crtmagic() — другое оформление. */ .cn-del-fr { border-collapse: collapse; } .cn-del-cap td { background: #b1a993; padding-top: 3px; } .cn-del-body { background: #ddd5bf url('/i/misc/dmagic/bneitral_17.gif') repeat-y left top, url('/i/misc/dmagic/bneitral_19.gif') repeat-y right top; padding: 0 5px; } /* ---- Страница «Рейтинг игроков» ---- Своё оформление, как в старой (reting_pers.php): чёрное поле, логотип на полосе sitebk_02.jpg, свиток 900px посередине на тёмном #3D3D3B поле, боковины n21_08_1 (29px) и nnn21_03_1 (23px), створки raitt_*, снизу полоса sitebk_07 (13px) и подпись .style6 (#DFD3A3 9px). */ body.p-rating { background: #000; margin: 0; color: #222; font: 10pt Verdana, Arial, Helvetica, Tahoma, sans-serif; } .p-rating a { color: #524936; font-weight: normal; text-decoration: none; } .p-rating a:visited { color: #633525; } .p-rating a:hover { color: #000; text-decoration: underline; } .rp-top { background: #000 url('/gfx/sitebk_02.jpg') repeat-x; text-align: center; height: 135px; } .rp-top img { display: block; margin: 0 auto; } .rp-band { background: #3d3d3b; display: flex; justify-content: center; } /* Высота свитка у неё 542px (y=135…677 на снимке при пустом списке). */ .rp-sheet { background: #f2e5b1; min-height: 542px; } .rp-sheet .rp-l { background: url('/gfx/n21_08_1.jpg'); } .rp-sheet .rp-r { background: url('/gfx/nnn21_03_1.jpg'); } .rp-sheet .rp-bot { vertical-align: bottom; padding-bottom: 50px; } .rp-sheet img { display: block; } .rp-body { padding: 18px 6px 40px 6px; } .rp-band7 { height: 13px; background: #000 url('/gfx/sitebk_07.jpg') repeat-x; } .rp-foot { background: #000; color: #dfd3a3; font-size: 9px; text-align: center; padding: 14px 0 15px; white-space: nowrap; } .rp-tabs { position: relative; text-align: center; font-size: 12px; } .rp-tabs a { color: #524936; font-weight: normal; } .rp-tabs a:hover { color: #000; text-decoration: underline; } .rp-tabs .l { float: left; } .rp-tabs .r { float: right; } .rp-stat { clear: both; text-align: right; font-size: 12px; color: #4f4b49; } .rp-stat code { color: #4f4b49; } .rp-rule { height: 11px; margin: 6px 0; background: url('/gfx/ram12_34.gif') repeat-x; } .rp-list { width: 100%; border-collapse: separate; border-spacing: 1px; font-size: 10pt; } .rp-list tr { background: #ecdfaa; } .rp-list tr.on { background: #d9ca8c; } .rp-list tr.head { background: #ecdfaa; } .rp-list tr.dark { background: #3d3d3b; } .rp-list tr.dark td { height: 0; padding: 0; } .rp-list td { height: 20px; vertical-align: top; padding: 0 4px; } .rp-list td.num { text-align: center; white-space: nowrap; } .rp-list td.num img { vertical-align: middle; margin-right: 3px; } .rp-list td.val { text-align: right; } .rp-list td.nm img { vertical-align: middle; margin-left: 3px; } .rp-note { text-align: center; margin-top: 8px; } /* ---- Страница «Рейтинг Кланов» ---- Рамка «/new/register» старой (reting_clans.php): чёрное поле, Tahoma 12pt, боковины topbgl/topbgr фоном справа-сверху и слева-сверху, столб 850px. Таблицы .rating — Times New Roman 14px с рамками 1px и внешней 3px, заголовки h2 — Times New Roman 18px bold по центру. */ body.p-clanrating { background: #000; margin: 0; color: #000; font: 12pt Tahoma, Verdana, Arial, Helvetica, sans-serif; } .p-clanrating td { font: 12pt Tahoma, Verdana, Arial, Helvetica, sans-serif; color: #000; } .p-clanrating a { color: #333; text-decoration: none; font-size: 12pt; } .p-clanrating a:hover, .p-clanrating a:active { color: red; } .p-clanrating img { display: inline-block; vertical-align: bottom; } .rc-topbgl { height: 513px; background: url('/static/assets/clans/topbgl.jpg') no-repeat right top; } .rc-topbgr { height: 507px; background: url('/static/assets/clans/topbgr.jpg') no-repeat left top; } .rc-bgl { background: url('/static/assets/clans/bgl.jpg'); } .rc-bgr { background: url('/static/assets/clans/bgr2.jpg'); } .rc-leftbg { background: url('/static/assets/clans/vesch_leftbg.jpg'); } .rc-text { text-align: left; min-height: 540px; } .rc-copy { color: #ebd88b; font-family: 'Philosopher', sans-serif; font-size: 18px; } .rc-text h2 { margin: 10px auto 5px; text-align: center; font-family: 'Times New Roman', serif; font-size: 18px; font-weight: bold; } .rc-text h2.first { margin-top: 0; } .rc-text .rating, .rc-text .rating tr, .rc-text .rating tr td { font-family: 'Times New Roman', serif; font-size: 14px; font-weight: inherit; border: 1px solid black; border-collapse: collapse; text-align: center; vertical-align: top; } .rc-text .rating { border: 3px solid black; border-collapse: collapse; } .rc-text .rating.rc-top5 { margin-top: 5px; } .rc-text .rating.rc-abil { font-weight: bold; } .rc-text .rating .light { background: #f4e7cc; } .rc-text .rating .btop { border-top: 3px solid black; } .rc-text .rating .al { text-align: left; } .rc-text .rating .vam { vertical-align: middle; } .rc-text .rating .b { font-weight: bold; } .rc-text .rating .p { padding: 0 5px; } .rc-text .rating .pl20 { padding-left: 20px; } .rc-text .rating .w130 { width: 130px; } .rc-text .rating .big { font-size: 14pt; } .rc-text .rating .bright { border-right: 3px solid black; } .rc-text .rating .bbottom { border-bottom: 3px solid black; } .rc-text .rating tr.ttdata td { font-size: 14pt; vertical-align: middle; } .rc-text .rinfo p { text-align: justify; text-indent: 25px; } .rc-text .rinfo center { display: block; } .rc-text .rinfo .warn { font-size: 18px; color: #8f0000; } .rc-text .rinfo .c14, .rc-text p.c14 { font-size: 14px; } .rc-text sup { font-size: 12px; } /* ---- Библиотека предметов ---- Меню в семь групп и карточки вещей — так же, как в старой: у неё раздел показывает каждую вещь целиком, в рамке из точек (.inup3), а не строкой. */ display: flex; gap: 10px; align-items: flex-start; border: 1px dashed #d3caa0; padding: 3px 6px; font-size: 12px; } /* Полоса перехода на странице списка залов: та же дорожка, но без картинок рамки — она стоит отдельной строкой. */ .goline-flat { margin: 0 0 6px; } .goline-flat .track { width: 64px; height: 8px; background: #000; display: block; } .goline-flat .track i { display: block; height: 6px; width: 0; background: url('/i/move/wait2.gif') 0 0 repeat-y; } /* ---- Алхимики Онлайн (_alh.php) ---- */ .alh { width: 40%; font-size: 10pt; line-height: 16px; text-align: left; } .alh-top { text-align: right; } .alh-top .btn { font: 12px "MS Sans Serif", Arial, sans-serif; padding: 1px 6px; margin-left: 4px; text-decoration: none; display: inline-block; } .alh-head { text-align: center; color: var(--head); font: bold 11pt Arial, sans-serif; margin: 0 0 5px; border: 0; } .alh-row { padding: 2px 0; } .alh-row img, .alh-row a { vertical-align: middle; } .alh-none { background: #efeded; text-align: center; padding: 2px; white-space: nowrap; } .alh-text { padding-top: 2px; } /* ---- Тех Поддержка (_bagreport.php) ---- Слева список обращений, справа колонка 350px с фильтром и формой. */ .sup { background: #e0e0e0; font-family: Arial, Helvetica, sans-serif; } .sup-top { background: #fff; height: 24px; padding: 6px 20px 2px; border-bottom: 1px solid #8c8c8c; font-size: 15px; } .sup-btns { float: right; } .sup-btns .btn { font: 12px "MS Sans Serif", Arial, sans-serif; padding: 1px 6px; margin-left: 4px; text-decoration: none; display: inline-block; } .sup-menu { height: 28px; background: url('/assets/admin/adm_menu_bg.png') repeat-x; } .sup-menu .on { display: inline-block; height: 28px; line-height: 28px; padding: 0 16px; color: #fff; text-decoration: underline; background: url('/assets/admin/adm_menu_bg-active.png') repeat-x; } .sup-ok { color: green; font-weight: bold; text-align: center; padding: 4px; } .sup-err { color: red; font-weight: bold; text-align: center; padding: 4px; } .sup-list { background: #eaeaea; padding: 10px 20px 10px 0; vertical-align: middle; } .sup-list h2 { font: bold 16px Arial, sans-serif; text-transform: uppercase; color: #fff; padding: 8px 0 8px 20px; border: 0; margin: 0 0 6px; background: #e4e4e4; } .sup-row { background: linear-gradient(to right, #c8c8c8, #eaeaea); border-right: 3px solid #b3b3b3; padding: 6px 10px; margin-bottom: 4px; } .sup-type { color: #8f0000; font-style: italic; font-size: 11px; } .sup-title { font-weight: bold; } .sup-when { float: right; font-size: 11px; } .sup-date { font: 8pt "Courier New", monospace; color: #007000; } .sup-text { font-size: 12px; padding-top: 4px; } .sup-answer { font-size: 12px; padding-top: 4px; color: #333; } .sup-side { padding: 0 10px; } .sup-box { background: #eaeaea url('/assets/admin/adm_bg-create.png') no-repeat right top; padding: 10px 14px; } .sup-box h2 { font: bold 16px Arial, sans-serif; text-transform: uppercase; color: #000; padding-left: 20px; border: 0; margin: 0; } .sup-filter { display: inline-block; padding-top: 4px; margin: 6px 30px; font-size: 12px; } .sup-filter label { display: inline; } .sup-form td { font: 10pt Arial, sans-serif; color: #3f2a11; padding: 2px; } .sup-form td.lbl { text-align: right; white-space: nowrap; } .sup-form td.mid { vertical-align: middle; } .sup-form input[type=text], .sup-form select, .sup-form textarea { padding: 2px 4px; border-radius: 5px; color: #7e4007; font-size: 10pt; border: 1px solid #b0b0b0; width: 238px; box-sizing: border-box; } .sup-form textarea { height: 100px; resize: none; } .sup-form button, .sup-filter button { font-weight: bold; color: #89634e; padding: 6px 10px; margin-top: 20px; background: #f0f0f0; border: 1px solid #b0b0b0; cursor: pointer; } .sup-filter button { margin-top: 8px; } /* ---- Телеграммы («Ваши сообщения», telegram.php) ---- Окно 500×350: полоса заголовка, три вкладки, список писем и подвал. */ .tg { width: 500px; margin: 6px auto; background: #ebe4d0; border: 1px solid #988e73; font-size: 12px; color: #222; } .tg-cap { background: #d4cbb4; border-bottom: 1px solid #988e73; padding: 4px 6px; } .tg-x { float: right; } .tg-tabs { height: 30px; background: #d4cbb4; padding: 4px 6px; } .tg-btn { display: inline-block; background: #c6b893; border: 1px solid #988e73; color: #4b2500; padding: 2px 8px; margin-right: 4px; text-decoration: none; font-size: 12px; } .tg-btn.on, .tg-btn:hover { background: #ebe4d0; color: #000; } .tg-body { position: relative; height: 280px; overflow-y: auto; } .tg-empty { text-align: center; padding-top: 130px; } .tg-row { background: #d4cbb4; border-top: 1px solid #eae3d0; border-bottom: 1px solid #988e73; padding: 5px; } .tg-row.new { background: #c6b893; } .tg-date { color: #988e73; font-size: 10px; border-right: 1px solid #b1a993; padding-right: 5px; margin-right: 5px; } .tg-del { display: inline; float: right; } .tg-del button { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; } .tg-form { padding: 4px 6px; } .tg-line { border-bottom: 1px solid #b7ae96; padding: 3px 0; } .tg input.tg-to { width: 170px; } .tg input.tg-subj { width: 269px; } .tg .tg-text { width: 100%; resize: none; } .tg-send { text-align: right; padding-top: 4px; } .tg-msg { float: left; color: red; font-weight: bold; font-size: 11px; } .tg-pages { background: #d4cbb4; text-align: center; padding: 3px; } .tg-foot { text-align: center; color: #988e73; font-size: 11px; padding: 3px; } /* Карточка письма поверх списка. */ .tg-card { position: absolute; left: 0; top: 0; width: 498px; height: 305px; background: #ebe4d0; border: 1px solid #d1c7ad; } .tg-crow { border-bottom: 1px solid #b7ae96; padding: 3px 6px; } .tg-ctext { height: 185px; overflow-y: auto; white-space: pre-wrap; } .tg-close { float: right; } .tg-cdate { float: right; } .tg-cbtns { text-align: right; padding: 4px 6px; } /* Ниже — правила, потерянные при правке «Заработка» 06.09.2026: замена блока по регулярному выражению захватила соседние разделы. Возвращены как были, без реферальных (они переписаны выше) и тех, что с тех пор переписаны заново. */ /* Форма заявки на бой: легенда, селекты условий и строка комментария. У старой это FIELDSET с красной легендой, а комментарий стоит отдельной строкой под селектами (__zv.php:2007-2011, 2074-2089). */ .postduel-legend { color: #8f0000; margin-right: 8px; } .postduel label { margin-right: 8px; font-size: 12px; } .postduel select { padding: 2px; font-size: 12px; } .postduel-comment { padding-top: 5px; } .postduel-comment input { width: 244px; padding: 3px; } .duels .cmt { color: #6b6459; font-size: 11px; } /* «Кровавый» бой у старой красный и жирный — и в селекте, и на доске. */ .bloody { color: #c00; font-weight: bold; } /* Договорная заявка: кому и на сколько — двумя строками под условиями. */ .postduel-agreed { padding-top: 5px; } .postduel-agreed label { display: inline-block; margin-right: 12px; } .duels .onlyfor { color: #8f0000; } /* Форма группового боя: четыре строки условий, как в её FIELDSET. */ .postduel-team { line-height: 22px; } /* Селекты и поля в её форме — с padding:2px (__zv.php:2126-2170). */ .postduel-team select, .postduel-team input[type=text] { padding: 2px; } .postduel-team label { margin-right: 0; } .postduel-team .dsc { color: #606060; } /* Магазин: переключатель «Купить вещи» / «Продать вещи» над прилавком. */ .shop-modes { margin: 6px 0; } /* Магазин: прилавок слева, колонка отделов справа — как в старой. */ .shop-wrap { display: flex; align-items: flex-start; gap: 10px; } .shop-main { flex: 1; min-width: 0; } .shop-side { width: 280px; flex: none; font-size: 12px; } .shop-side-head { background: #a5a5a5; text-align: center; padding: 2px 0; } .shop-group { background: #d5d5d5; padding: 2px 4px; } .shop-group img { vertical-align: -2px; } .shop-dep { display: block; padding: 2px 4px 2px 20px; background: #e2e0e0; color: #000; text-decoration: none; border-bottom: 1px solid #fff; } .shop-dep:hover { text-decoration: underline; } .shop-dep.on { background: #c7c7c7; } /* Карточка товара на прилавке: как в рюкзаке — имя ссылкой, вид и масса серым, требования и свойства списком. */ .slots .card .name { font-weight: bold; } .slots .card .kind { color: var(--dsc); font-size: 11px; margin-left: 4px; } .slots .card .info { color: #6b6459; font-size: 11px; } /* Секции левого столбца рюкзака: подпись слева, стрелки порядка и значок свёртывания справа — как в строке getLine старой игры. */ /* Флекс нужен только обёртке секций — ради их порядка. На весь столбец его ставить нельзя: подпись и число («Сила:» и «4») тут же разъезжаются по разным строкам, потому что становятся отдельными элементами флекса. */ .isecs { display: flex; flex-direction: column; } /* Поиск и сортировка над сумкой: строка во всю ширину с крестиком, рядом кнопка «Сортировка» с выпадающей коробочкой на три кнопки — как в старой. */ .bagfind-inline .bagclear { border: 0; background: none; padding: 0 2px; cursor: pointer; vertical-align: middle; } /* Под панелью приёмов: «Очистить», «Запомнить набор» и сами наборы. */ .prm-acts { margin-top: 6px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .prm-sets { margin-top: 4px; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; } .prm-show .cat.on { font-weight: bold; } /* Экран умений: слева характеристики, справа вкладки, между ними нитка — как в её таблице (TD 30% + TD width=1 bgcolor=#A0A0A0). */ .abil-board { display: flex; align-items: flex-start; gap: 10px; } .abil-board .abil-left { flex: 0 0 30%; min-width: 220px; } .abil-board .abil-split { align-self: stretch; width: 1px; background: #a0a0a0; } .abil-board .abil-right { flex: 1; min-width: 0; } @media (max-width: 720px) { .abil-board { flex-wrap: wrap; } .abil-board .abil-left, .abil-board .abil-right { flex: 1 1 100%; } .abil-board .abil-split { display: none; } } /* «Приёмы для выбора»: сетка притушенных значков, как в старой. */ /* Доступный приём горит в полную яркость, притушены только стоящие в панели и недоступные (_umenie.php:1150-1200). */ .prm-grid { display: flex; flex-wrap: wrap; gap: 0; margin: 4px 0; } .prm-grid .prm-pick { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 25px; padding: 0; border: 0; background: none; opacity: 1; cursor: pointer; margin-top: 2px; margin-left: 1px; } .prm-grid .prm-pick.inpanel, .prm-grid .prm-pick.off { opacity: 0.35; cursor: default; } .prm-grid .prm-pick.off { cursor: default; } .prm-grid .prm-pick .prm-name { font-size: 9px; line-height: 1; text-align: center; } /* Доска заявок: кружок выбора слева и общие кнопки «Принять вызов». */ .duels .pick { width: 18px; } .duel-take { margin: 6px 0; } /* Страница смены пароля: её заголовок — тёмно-красный, по центру. */ /* ---- Доска заявок (__zv.php) ---- */ /* Полоска жизни в шапке доски — её же картинкой hp.jpg. */ .duel-hp { position: relative; display: inline-block; width: 120px; height: 9px; background: url('/i/hp.jpg') 0 0 repeat-x; border-bottom: 1px solid #dadada; vertical-align: middle; margin-left: 6px; overflow: hidden; } .duel-hp > i { display: block; height: 9px; background: url('/i/hp.jpg') 0 -31px repeat-x; } .duel-hp > span { position: absolute; inset: 0; padding-left: 3px; font: bold 9px Verdana, sans-serif; line-height: 9px; color: #f4f4f4; } .duel-err { color: red; font-weight: bold; margin: 2px 0; } /* Вкладки доски: ячейка «Бои:» бирюзовая, ссылки синие жирные. */ .duel-tabs .lbl { background: #99cccc; width: 70px; text-align: center; } .duel-tabs .tab { color: #003388; font-weight: bold; font-size: 10pt; } .duel-tabs .tab.on { background: #bbdddd; color: #003388; } /* Кнопки доски — высотой с её INPUT.btn. */ .duel-take .btn, .postduel button, .postduel .btn, .duel-tabs + * .btn { padding: 1px 6px; margin-top: 0; font-size: 12px; } .duels td, .postduel label, .postduel { font-size: 10pt; color: #222; } /* Подпись про тренировочные бои — зелёная, сразу под вкладками. */ .train-note { color: #008000; } .postduel.train { margin-top: 0; } /* ---- Экран боя (btl_.php) ---- Три колонки на фоне #e8e8e8: куклы бойцов по краям, панель боя посередине; зоны выбираются картинками-радио her radio.gif. */ .btl { background: #e8e8e8; font-size: 10pt; color: #222; } .btl-err { color: red; font-weight: bold; text-align: center; } .btl-main { background: #e8e8e8; } .btl-mid { text-align: center; } .btl-login { float: left; font-size: 12px; } .btl-login.right { float: right; } .btl-login img { vertical-align: middle; margin-left: 2px; } .btl-head td { background: #a7a7a7; } .btl-head strong { font-size: 12px; } .btl-zones { margin: 0 auto; } .btl-zones td { font-size: 10pt; } .btl-zt { text-align: left; cursor: default; } /* Картинка-радио: показываем 18×18 из 36×18, включённое состояние — вторая половина картинки (её radio_on со сдвигом -18px). */ .btl-zones .crop { display: block; width: 18px; height: 18px; overflow: hidden; cursor: pointer; } .btl-zones .crop input { position: absolute; opacity: 0; width: 0; height: 0; } .btl-zones .crop img { display: block; margin-left: 0; } .btl-zones .crop input:checked + img { margin-left: -18px; } .btl-go { padding: 6px 0; background: #f2f0f0; } .btl-go button, .btl-go .btn { font: 12px "MS Sans Serif", Verdana, Arial, sans-serif; padding: 1px 8px; margin: 0; text-decoration: none; display: inline-block; } .btl-wait { height: 118px; } .btl-checks { float: left; } .btl-checks label { display: inline-block; margin: 0 4px; cursor: pointer; } .btl-checks input { position: absolute; opacity: 0; width: 0; height: 0; } .btl-checks img { opacity: 0.35; vertical-align: middle; } .btl-checks input:checked + img { opacity: 1; } .btl-refresh { float: right; margin-right: 6px; } .btl-end { color: red; font-weight: bold; text-align: center; padding: 6px 0; } .btl-hr { border: 0; border-top: 1px solid #333; margin: 8px 0 0; } .btl-target { font-size: 12px; padding-bottom: 4px; } .btl-target label { display: inline; margin-right: 8px; } .btl-target label.off { color: #888; } .btl-tricks { font-size: 12px; padding: 4px 0; } .btl-tricks label { display: inline-block; margin-right: 10px; } .btl-tricks label.off { color: #888; } .btl-teams { text-align: center; font-size: 12px; padding: 4px 0; } .btl-teams .side1 { color: #6666cc; font-weight: bold; } .btl-teams .side2 { color: #b06a00; font-weight: bold; } .btl-teams img { vertical-align: middle; } .btl-under td { font-size: 12px; } .btl-under .private { background: #fae0e0; color: #ff0000; } .btl-art { margin-top: 18px; text-align: right; } /* Кукла бойца: рамка её же, слоты по бокам, образ посередине. */ .btl-doll { width: 240px; padding: 2px; background: #e8e8e8; border-bottom: 1px solid #666; border-right: 1px solid #666; border-top: 1px solid #fff; border-left: 1px solid #fff; } .btl-doll table { border-collapse: collapse; } .btl-bars { height: 20px; } .btl-doll .hpbar { width: 120px; height: 10px; border: 0; border-bottom: 1px solid #dadada; margin: 0; overflow: hidden; } .btl-doll .hpbar > span { text-align: left; padding-left: 3px; line-height: 10px; text-shadow: none; } .btl-body { position: relative; width: 120px; height: 220px; } .btl-pockets, .btl-rings { display: flex; } .btl-doll .dollcell { border: 0; } /* Отказ перехода — красная строка, как у старой. */ .loc-err { color: red; font-weight: bold; margin: 0 0 6px; } /* ---- «Отчет о переводах» (act_trf.php) ---- */ .tr { font-size: 10pt; color: #222; padding-left: 8px; } .tr-top { text-align: right; padding: 14px 0 20px; } .tr-top .btn { font: 12px "MS Sans Serif", Verdana, Arial, sans-serif; padding: 1px 6px; margin: 0 0 0 4px; text-decoration: none; display: inline-block; } .tr-top .btn:hover { color: #cecece; background-color: #393937; } .tr-head { text-align: center; color: var(--head); font: bold 12pt Arial, Helvetica, sans-serif; margin: 0 0 19px; } .tr-form { display: inline; } .tr input.tr-date, input[type=text].tr-date { font: 10px "MS Sans Serif", Verdana, Arial, sans-serif; color: #191970; border: 1px solid var(--input-line); padding: 0 1px; margin: 1px 0 2px; width: 109px; max-width: 109px; height: 17px; box-sizing: border-box; } .tr .btn[type=submit], .tr input.btn { font: 12px "MS Sans Serif", Verdana, Arial, sans-serif; padding: 1px 6px; margin: 0 0 0 4px; } /* ---- «Заработок»: реферальная система ---- Две колонки её _ref.php: слева рассказ на 70%, справа 30% с настройкой счёта, ссылками и списком приведённых. */ .ref { font-size: 10pt; color: #222; } .ref > tbody > tr > td { vertical-align: top; } .ref-about { width: 70%; } .ref-side { width: 30%; } .ref-title { text-align: center; color: var(--head); font: bold 11pt Arial, sans-serif; margin: 1.33em 0 5px; } .ref-btns { text-align: right; padding-right: 20px; } .ref-btns .btn { font: 12px "MS Sans Serif", Arial, sans-serif; padding: 1px 6px; margin: 0 0 0 4px; text-decoration: none; display: inline-block; } .ref-side fieldset { width: 350px; border: 1px solid #aeaeae; padding: 4px 8px 8px; margin: 0; } .ref-side legend { text-align: center; margin: 1.33em auto 5px; padding: 0 4px; } .ref-side legend h4 { display: inline; color: var(--head); font: bold 11pt Arial, sans-serif; margin: 0; border: 0; } .ref-side td { font-size: 10pt; color: #222; } .ref-count { color: green; } .ref-msg { color: red; } .ref-save { float: right; } input[type=text].ref-link, .ref-side input.ref-link { background: #fbfbfb; border: 1px solid #efefef; padding: 5px; width: auto; max-width: none; font: 10px "MS Sans Serif", Arial, sans-serif; color: #191970; } .ref-btns .btn:hover, .cn a.btn:hover { color: #cecece; background-color: #393937; } .ref-side .btn { font: 12px "MS Sans Serif", Arial, sans-serif; padding: 1px 6px; margin: 0; } .ref-bank select { font: 10px "MS Sans Serif", Arial, sans-serif; color: #191970; } /* ---- Экран «Безопасность» ---- Разметка её _changepass.php: сплошной текст на всю ширину, формы в рамках fieldset, сообщения красной строкой. */ .st { font-size: 10pt; color: #222; } .st-head { margin-bottom: 4px; } .st-head .btn { padding: 1px 6px; margin: 0; text-decoration: none; display: inline-block; } .st-msg { color: red; } .st fieldset { border: 1px solid #aeaeae; margin: 0 0 7px; padding: 4px 8px 8px; } .st legend { font: bold 10pt Verdana, Arial, sans-serif; color: #222; padding: 0 2px; } .st table { border-collapse: collapse; } .st td { font-size: 10pt; color: #222; padding: 1px 3px; } .st input[type=text], .st input[type=password] { font: 10px "MS Sans Serif", Arial, sans-serif; color: #191970; border: 1px solid var(--input-line); padding: 0; margin: 1px 0 2px; width: auto; } .st input.btn { padding: 1px 6px; margin: 0; } /* Кнопка выключения второго пароля у старой без класса .btn — она выглядит как обычная кнопка формы. */ .st input.st-plain { font: 10px "MS Sans Serif", Arial, sans-serif; color: #191970; border: 1px solid var(--input-line); background: #f0f0f0; padding: 0 4px; margin: 0; cursor: pointer; } .st input[type=radio] { margin: 1px 3px 1px 0; vertical-align: middle; } /* Медаль ежедневного задания: до сотни блеклая, поверх — полоса заполнения, на сотне мигает. Заголовок у неё слева, а не по центру. */ .daily .cap { text-align: left; } .daily .medal { position: relative; width: 70px; } .daily .medal .fill { position: absolute; left: 0; bottom: 0; height: 3px; background: #1d7a1d; transition: width 0.4s; } .daily.full .medal img { animation: daily-blink 1.2s ease-in-out infinite; cursor: pointer; } @keyframes daily-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } /* Магазин: строка состояния и цена. */ .shop-state { margin: 4px 0; font-size: 12px; } .shop-state .purse-sum { color: #339900; } .slots .price .nomoney { color: #c00; } .slots .act .buycount { width: 26px; margin-right: 3px; } /* Невыполненное требование в карточке товара — красным, как у неё. */ .slots .card .unmet { color: red; } /* Заголовок секции рюкзака: одна строка, треугольник браузера убран — вместо него её значок свёртывания справа. */ .isec > summary { display: flex; align-items: center; list-style: none; cursor: pointer; background: url('/i/back.gif') 0 2px repeat-x; padding: 0; margin-bottom: 2px; } .isec > summary .secname { background: #ececec; font: bold 11px Verdana, Arial, sans-serif; border-radius: 2px; padding: 0 4px 1px 0; } .isec > summary .secbtn { background: none; border: 0; padding: 0 2px; margin: 0; cursor: pointer; line-height: 0; } .isec > summary .secbtns { margin-left: auto; display: flex; } .isec > summary a { font-size: 11px; } .isec > summary::-webkit-details-marker { display: none; } .isec > summary .secline { flex: 1; display: flex; align-items: center; } .isec > summary .secline form { display: inline-flex; margin: 0; } /* Кант вокруг игрового поля — её же (main.php: border-top/left белые, border-right/bottom #666666). Он и делает поле «вдавленным». */ /* Кант идёт по краям страницы, а не вокруг каждого блока: внутри он давал по три серых полосы подряд над разговором. Светлый сверху и слева, тёмный снизу и справа — как у неё. */ body { border-left: 1px solid #fff; border-top: 1px solid #fff; border-right: 1px solid #666; border-bottom: 1px solid #666; } /* Строку ввода кантом не трогаем: её высота ровно 30 пикселей под значки, и лишние два пикселя канта срезали им низ. */ /* Текст комнаты — её плотностью: строки в 17 пикселей, кнопки внутри строки маленькие и не раздвигают её (сверено со снимком 8081). */ /* У неё это без своего межстрочного интервала: строки приветствия идут с шагом около 13 px, а не 17 (замер снимков 07.09, novich.php:147). */ .roomtext { line-height: normal; } .roomtext .btn { vertical-align: baseline; margin: 0 2px; padding: 0 5px; font-size: 11px; line-height: 15px; } /* Экран умений: заголовок колонки, зелёный счётчик умений, зелёные виды урона и её вкладки-ссылки — всё сверено со снимком живой старой. */ /* Заголовок колонки — её .tzS: серая полоса во всю ширину (_umenie.php:88). */ .statcap { text-align: center; font-weight: bold; color: #000; background: #cccccc; height: 16px; line-height: 16px; margin: 0 0 4px; } /* Зелёные строки под кнопкой — её обычным весом. */ .abil-free { color: green; } .dmgkind { color: green; } .dmg-help { display: block; margin: 8px 0; } .abil-right .tabs { display: flex; gap: 0; margin-bottom: 6px; } /* Вкладки — её .tz/.tzOver/.tzSet (_umenie.php:87-90): ячейки по 150px, серые #CCCCCC с синим текстом, активная #A6B1C6, под курсором #C0C0C0. */ .abil-right .tabs { gap: 2px; } .abil-right .tabs .tab { flex: 0 0 150px; padding: 0; height: 18px; line-height: 18px; text-align: center; font-weight: bold; color: #003388; background: #cccccc; border: 0; text-decoration: none; } .abil-right .tabs .tab:hover { background: #c0c0c0; } .abil-right .tabs .tab.active { background: #a6b1c6; cursor: default; } .abil-right .tabs .tabfill { flex: 1 1 auto; background: #cccccc; margin-left: 1px; } .abil-right .tabbody { padding-left: 7px; } /* Рамки её fieldset (main.css: 1px solid #AEAEAE) и черта под ценами. */ .oldfs { border: 1px solid #aeaeae; padding: 4px 8px 6px; } .abil-rep hr { border: 0; border-bottom: 1px solid #aeaeae; height: 1px; } .grey { color: grey; } /* Строки рамки «Эффекты:»: чередование D5D5D5/C7C7C7, минус — #A00000. */ .effrow { padding: 2px 4px; background: #d5d5d5; } .effrow.alt { background: #c7c7c7; } .effrow .neg { color: #a00000; } /* Список приёмов: яркие — можно поставить, в панели — притушены до 0.35 и без нажатия, как у неё (pyes → opacity .35). */ .prm-grid .prm-pick { opacity: 1; } .prm-grid .prm-pick.inpanel { opacity: 0.35; cursor: default; } .prm-grid .prm-pick.learned { opacity: 0.35; cursor: pointer; } .prm-grid .prm-pick.learned:hover { opacity: 1; } /* Форма хаотичного боя: блок 620px, рамка с белой каймой и бордовой легендой (__zv.php:2188-2258). */ .chaos-form { width: 620px; overflow: hidden; } .chaos-form.open { animation: chaos-slide .7s ease-out; } @keyframes chaos-slide { from { max-height: 0; opacity: 0; } to { max-height: 400px; opacity: 1; } } .chaos-fs { border: 1px solid #fff; padding: 4px 8px 6px; } .chaos-legend { color: #8f0000; } /* Ступени владений и характеристик — её картинками plus.gif/minus.gif; недоступная серая, как её class="nonactive". */ .step img { display: inline-block; vertical-align: middle; } .step.dim img, .step.off img { opacity: 0.3; } /* Магазин по её разметке (cc/shop_.php, __user.php shopItems/genInv). */ .shopwrap { border-collapse: separate; } .shopgrey { background: #a5a5a5; } .shophead { height: 21px; padding: 2px 4px; text-align: center; } .shopgrey.counter .row { background: #d4d4d4; } .shopgrey.counter .row.alt { background: #c8c8c8; } .shopgrey.counter tr.item td.row { background: #d4d4d4; } .shopgrey.counter tr.item td.row.alt { background: #c8c8c8; } .shopgrey.counter .buycell { padding: 7px; } .shopgrey.counter .cardcell { padding: 7px; } .shopgrey.counter .lcell { border-right: 1px solid #a5a5a5; padding: 5px; } .shopgrey.counter .rcell { padding: 7px 0 3px 3px; } .shopgrey.counter .empty { background: #e2e0e0; padding: 7px; } .shopgrey.counter .giftform { background: #d5d5d5; padding: 4px 6px; text-align: left; } .shopgrey.counter .giftform ol { margin: 6px 0; padding-left: 28px; } .shopgrey.counter .giftform input, .shopgrey.counter .giftform textarea { width: auto; max-width: none; } .shopgrey.counter .name { font-weight: bold; } .shopgrey.counter .nomoney, .shopgrey.counter .unmet { color: red; } .shopgrey.counter .linkbtn { background: none; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; font-weight: bold; color: #003388; } .shopgrey.counter .linkbtn:hover { color: #0066ff; } .shopgrey.counter .buymore img { vertical-align: middle; margin-left: 2px; } .shopgrey.counter .oldbtn { font: 11px "MS Sans Serif", Tahoma, sans-serif; } .shopside .golis { background: #dedede; } .shopside .golis td { background: #d3d3d3; padding: 0 2px; } .shopside .golis .menutop { font-weight: bold; color: #003388; } .shopside .purse-sum { color: #339900; } .shopside .shopmenu-head { background: #a5a5a5; padding: 1px; } .shopside .shopmenu { line-height: 17px; } .shopside .shop_menu_txt { background: #d5d5d5; } .shopside .shop_menu_txt img { vertical-align: -2px; } /* Ссылки отделов — её обычные A: жирные #003388, без подчёркивания, 10pt Verdana, строка 17px (main.css: a, a:hover; body, td). */ .shopside .shopmenu a { text-decoration: none; color: #003388; font-weight: bold; font-size: 10pt; } .shopside .shopmenu a:hover { color: #0066ff; } .shopside .shopmenu .dep { background: #e2e0e0; line-height: 17px; } .shopside .shopmenu .dep.on { background: #c7c7c7; } .shopside .shop_menu_txt { line-height: 17px; padding: 0; } /* «Подсказка» — всплывающее окно по #popup1, как её .overlay/.popup. */ .overlay { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 50; background: rgba(0, 0, 0, .6); visibility: hidden; opacity: 0; transition: opacity .3s; } .overlay:target { visibility: visible; opacity: 1; } .overlay .popup { position: relative; margin: 60px auto; width: 60%; max-width: 760px; background: #fff; padding: 16px 20px; text-align: left; font-size: 12px; line-height: 16px; } .overlay .popup h3 { margin: 0 0 8px; } .overlay .popup .close { position: absolute; top: 6px; right: 12px; font-size: 22px; text-decoration: none; color: #333; } /* Подарки в анкете: картинки вплотную, как её float:left с отступом 1px. */ .pgifts { margin: 6px 0; overflow: hidden; } .pgifts img { float: left; margin: 1px 1px 0 0; cursor: pointer; } /* Банк — её cc/bank.php:562-710: вкладки radio+label, сетка .divTable, рамки fieldset и стандартные поля ввода. */ .bank { font-size: 10pt; } .bank h3 { color: #8f0000; font: bold 12pt Arial, sans-serif; text-align: center; margin: 8px 0; } .bank h4 { color: #8f0000; font: bold 11pt Arial, sans-serif; margin: 0 0 5px; } .bank fieldset { border: 1px solid #aeaeae; padding: 4px 8px 6px; } .bank hr { border: 0; border-bottom: 1px solid #aeaeae; height: 1px; } .bank input[type="text"], .bank input[type="password"], .bank select, .bank input[type="submit"], .bank input[type="button"] { border: 1pt solid #b0b0b0; font: 10px "MS Sans Serif", Tahoma, Verdana, sans-serif; color: #191970; width: auto; max-width: none; padding: 1px 4px; margin: 1px 0 2px; background: #fff; } .bank input[type="submit"], .bank input[type="button"] { background: #efefef; cursor: pointer; } .bank ol { margin: 6px 0; } .divTable { display: table; width: 100%; } .divTableRow { display: table-row; } .divTableBody { display: table-row-group; } .divTableCell { display: table-cell; padding: 3px 10px; vertical-align: top; } .bank { width: 100%; } .bank-tabs { width: 100%; min-width: 320px; max-width: 800px; padding: 0; margin: 0 auto; box-sizing: border-box; } .bank-tabs > input { display: none; position: absolute; } .bank-tabs > label { display: inline-block; margin: 0 0 -1px; padding: 15px 25px; font-weight: 600; text-align: center; color: #aaa; border: 1px solid #ddd; background: #f1f1f1; border-radius: 3px 3px 0 0; } .bank-tabs > label:hover { color: #888; cursor: pointer; } .bank-tabs > input:checked + label { color: #555; border-top: 1px solid #009933; border-bottom: 1px solid #fff; background: #fff; } .bank-tabs > section { display: none; padding: 15px; background: #fff; border: 1px solid #ddd; } .bank-tabs > section > p { margin: 0 0 5px; color: #383838; line-height: 1.5; } #tab1:checked ~ #content-tab1, #tab2:checked ~ #content-tab2, #tab3:checked ~ #content-tab3, #tab4:checked ~ #content-tab4, #tab5:checked ~ #content-tab5 { display: block; } /* Переход в соседний зал: полоса и серая табличка с ссылкой .menutop. */ .bankexit { float: right; } .bankexit .goline { position: relative; top: auto; right: auto; margin-left: auto; } .bankexit .golis { background: #dedede; } .bankexit .golis td { background: #d3d3d3; padding: 0 2px; } .bankexit .golis .inline { display: inline; } .bankexit .menutop { background: none; border: 0; padding: 0; cursor: pointer; font-weight: bold; font-size: 10px; text-decoration: none; color: #3b3936; } .bankexit .menutop:hover { color: #76726b; } /* Невыполненное требование в карточке вещи — красным, как её . */ .bagitem .unmet { color: red; } /* Таблица опыта (/exp, её exp.php): заголовок и таблица border=1. */ .exp { text-align: center; } .exp .exp-title { font: 21px "Times New Roman", Times, serif; text-transform: uppercase; color: #ffc45f; letter-spacing: 1px; text-align: center; border-bottom: 1px solid #ffc45f; display: inline-block; padding: 0 20px 4px; } /* border=1 в разметке её, но common.css сайта рамок не рисует — и мы нет. */ .exp #op_tbl { margin: 0 auto; border-collapse: collapse; border: 0; } .exp #op_tbl td { border: 0; padding: 2px 6px; } /* «исп-ть» у эликсира — ссылка, как у неё, а не кнопка. */ .bagitem .useform { display: inline; } .bagitem .uselink { background: none; border: 0; padding: 0; margin: 0; font: inherit; font-weight: bold; color: #003388; cursor: pointer; } .bagitem .uselink:hover { color: #0066ff; text-decoration: underline; } /* ---- Летопись боя и заголовки списков боёв ---------------------------- */ /* H3 у старой — Arial 12pt bold #8f0000 по центру (main.css:1). */ .duel-head { font: bold 12pt Arial, sans-serif; color: #8f0000; text-align: center; margin: 6px 0; } .duel-time { font: 8pt "Courier New", monospace; color: #007000; } .duel-none { text-align: center; padding: 8px 0; } .btl-log { padding: 8px; font: 11px Verdana, sans-serif; } .btl-log-head { padding-bottom: 4px; } .btl-log-sides { display: flex; flex-wrap: wrap; gap: 10px; padding: 4px 0; } .btl-log-round { border-bottom: 1px solid #e3e3e3; padding: 3px 0; } .btl-log-line { padding: 1px 0; } .p-bare { background: #fff; margin: 0; } .duel-wait { text-align: center; padding: 6px 0; } /* Приветствие зала: у старой блок прижат вправо и набран (modules_data/location/cc/*.php). */ /* Приветствие лежит в её таблице шириной 510 рядом с планом (novich.php:128), поэтому и у нас ширина та же, а блок прижат вправо. */ .roomtext-right { text-align: right; font-size: 11px; padding: 3px; } /* В Комнате для новичков текст набран выключкой по ширине: у неё style="text-align:justify" (novich.php:147). В залах этого нет. */ .roomtext-just { text-align: justify; } /* Турниры: две полосы-разделителя и по кнопке над и под списком (__zv.php:1962-1978). */ .tour-pick, .tour-list { border-bottom: #b2b2b2 solid 1px; padding: 5px; } .tour-list { margin-bottom: 5px; } .tour-err { color: red; font-weight: bold; } /* «Предмет не подлежит ремонту» — коричневым, как у старой. */ .noremont { color: brown; } /* Магазин: заголовок зала и строка ошибки её видом (cc/shop_.php:350, 419). */ .pH3 { color: #8f0000; font: bold 12pt Arial, sans-serif; text-align: center; } .shop-err { color: red; } /* Ячейки прилавка — 10pt Verdana, как у неё (main.css: body, td). */ .shopgrey.counter td { font: 10pt Verdana, Arial, sans-serif; color: #222; } .shopgrey.counter small { font-size: 11px; } /* Кнопки правой колонки магазина не должны наезжать друг на друга. */ .shopside center .btn { display: inline-block; margin: 2px 1px; } /* ---- Анкета: числа сняты с её страницы (inf.php, main.css) ------------- */ /* Кант вокруг игрового поля к анкете не относится: у её body рамки нет. */ body.p-info { border: 0; } /* Шапка над куклой: 246px содержимого плюс поля по три пикселя, 10pt. */ .wholine { font-size: 10pt; box-sizing: content-box; } .wholine .citymark { margin-left: 0; } /* Заголовок «Обезличен…» — её H3. */ .anon { font: bold 12pt Arial, sans-serif; color: #8f0000; text-align: center; margin: 1em 0; } /* Знак зодиака и флаг наград — в натуральную величину с полем в 5px. */ .pcol-marks .zsign, .pcol-marks .pevents img { box-sizing: content-box; padding: 5px; display: block; margin-left: auto; } .pcol-marks .zsign { width: 100px; height: 99px; } .pcol-marks .pevents img { width: 100px; height: 97px; } .slotbottom { display: block; } /* Черта перед «Обезличен…» — её тонкая линия #aeaeae. */ body.p-info hr { border: 0; border-bottom: 1px solid #aeaeae; height: 1px; } /* Подпись «Events» — обычная ссылка 10pt, внутри уже . */ .pcol-marks .pevents .cap { font: bold 10pt Verdana, sans-serif; margin-top: 0; } /* Галочка рядом с кнопкой «Сохранить» стоит в той же строке. */ .mastery-save { margin: 4px 0; } .mastery-save input[type=checkbox] { vertical-align: middle; margin-left: 4px; } /* Кнопки этого экрана — её .btn без наших отступов (main.css:2). */ .abil-board .btn, .mastery-save .btn, .mastery-save button { padding: 1px 6px; margin: 0; } /* Ссылки правого столбца приёмов — её 10px и отступ списка наборов. */ .prm-side .prm-clear .linkbtn { font-size: 10px; } .prm-side .prm-sets { margin-left: 10px; font-size: 10px; } .prm-side .prm-sets .linkbtn { font-size: 10px; } /* Боевой лог: время в начале строки Courier 8pt #007000, а если в строке участвует смотрящий — на светло-зелёном (main.css: .date, .date2). */ .battle-log .date { font: 8pt "Courier New", monospace; color: #007000; } .battle-log .date2 { font: 8pt "Courier New", monospace; color: #007000; background: #00FFAA; } .btl-log .date { font: 8pt "Courier New", monospace; color: #007000; } /* Приёмы в бою — полоса 440px по центру со значками 40×25 (css/btl_1.css:10-16, _cron_.php:1992-1999). */ /* Гнёзда заклятий над таблицей зон — её ряд по центру (btl_.php:354-369): картинки вплотную, без рамок и зазоров. */ .btl-magic { text-align: center; margin: 0 0 3px; line-height: 0; } .btl-magic img { display: inline-block; vertical-align: top; } .btl-priems { width: 440px; margin: 0 auto; text-align: left; } .btl-priem { display: inline-block; cursor: pointer; } .btl-priem img { margin-top: 3px; margin-left: 4px; display: inline-block; } .btl-priem input { display: none; } .btl-priem.nopriemuse { cursor: default; } .btl-priem.nopriemuse img { opacity: .65; filter: grayscale(1); } /* Выбранный приём подсвечивается рамкой: у старой выбор виден сразу по применению, у нас приём уходит вместе с ударом. */ .btl-priem input:checked + img { outline: 1px solid #8f0000; } .btl-priem.empty img { margin-top: 4px; } /* Галочки «Случайный удар» и «Не сбрасывать выбор» — её .crop2: окно 14×16, картинка 33×14, включённое состояние сдвигом -19px (css/clu0b.css:321-341). */ .btl-checks label { display: inline-block; overflow: hidden; height: 16px; width: 14px; vertical-align: text-bottom; margin: 0 4px; cursor: pointer; } .btl-checks img { display: inline-block; height: 14px; margin-left: 0; opacity: 1; } .btl-checks input:checked + img { margin-left: -19px; } /* Выбранный приём подсвечен: у неё значок гаснет после применения, у нас он остаётся видимым до конца размена. */ .btl-priem.chosen img { outline: 2px solid #8f0000; } .btl-priem { border: 0; background: none; padding: 0; } /* Строка тактик боя под панелью: значок и число, отступ между парами 11px и мелкий шрифт — её размеры (btl_.php:503-516). */ .btl-tactics { padding: 20px 0 10px; text-align: center; } .btl-tactics span { margin-right: 11px; font-size: 9px; } /* Эффекты приёмов боя над полосой приёмов: значки 40×25, стеки мелко. */ .btl-effects { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; align-items: center; width: 440px; margin: 2px auto 0; font-size: 10px; } .btl-effects .btl-eff { position: relative; display: inline-block; line-height: 0; } .btl-effects .btl-eff i { position: absolute; right: 1px; bottom: 1px; font: bold 9px Verdana, sans-serif; color: #fff; background: rgba(0,0,0,.6); padding: 0 2px; line-height: 10px; } .btl-effects .btl-eff-foe { color: #7a0000; margin-left: 6px; } /* Рюкзак: правки по разделу «Способности и владения → Рюкзак» из docs/TZ-UI.md. Файл дописывается в конец app.css (см. buildStylesheet и parts/README.md) — app.css самим агентом не трогаем. */ /* TZ-inventory-31: подсказки автокомплита поля поиска — своя коробочка вместо системного datalist, со стилями старой игры (_inv.php:202, :333-339; jquery.autocomplete.js по умолчанию использует контейнер .autocomplete-suggestions/.autocomplete-suggestion/.autocomplete-selected, а цвета берутся из подключаемого к странице acomplete.css). */ .bagq-wrap { position: relative; display: inline-block; } .bagq-wrap .autocomplete-suggestions { position: absolute; top: 100%; left: 0; right: 0; margin: 0 auto; max-height: 300px; overflow: auto; z-index: 9999; border: 1px solid #999; background: #eaeaea; color: #5A5A5A; font-size: 12px; font-family: Tahoma, Verdana, sans-serif; box-shadow: 0 2px 3px -1px rgba(50, 50, 50, .75); } .bagq-wrap .autocomplete-suggestion { padding: 1px 3px; border-bottom: 1px solid #dadada; white-space: nowrap; overflow: hidden; cursor: default; } .bagq-wrap .autocomplete-suggestion strong { font-weight: normal; color: #2D7DEF; } .bagq-wrap .autocomplete-selected { background: #FCFCFC; color: #1e1e1e; } .bagq-wrap .autocomplete-selected strong { color: #004DCE; } /* Дописывается в конец app.css по алфавиту (см. buildStylesheet в internal/web/assets.go). Здесь — точечные правки, которые не стоит мешать с общим файлом. */ /* TZ-main-18: строка ввода чата — поле, зазоры, разделитель, часы. Старая: buttons.php:714-727, 753-758; css/clu0b.css:41. */ /* Поле ввода — 11pt со скруглением и отступом снизу 2px, как у старой (input#textmsg, buttons.php:714-717); плейсхолдера в разметке больше нет. */ .saybar input[type=text] { font-size: 11pt; border-radius: 5px; margin-bottom: 2px; } /* Между полем и стрелкой «Отправить» в старой ячейка 6px (buttons.php:717-720). */ .saybar .sendbtn { margin-left: 6px; } /* Между стрелкой и «Очистить» — пустая ячейка 5px (buttons.php:718-719). */ .saybar .chatbtns .chatbtn:first-child { margin-left: 5px; } /* Разделитель chat_explode.gif лежит в ячейке 16×30 с серой подложкой bgcolor="#BAB7B3" (buttons.php:727) — не голая картинка. */ .saybar .explode { display: inline-block; width: 16px; height: 30px; background: #bab7b3; } .saybar .explode img { display: block; width: 16px; height: 30px; } /* Часы: шрифт наследуется (Verdana), не Courier New; ячейка 70px по центру, не 88 (buttons.php:753-758; общий шрифт полей — css/clu0b.css:41). */ .saybar .clock { font-family: inherit; width: 70px; min-width: 0; } /* Мастерская — её cc/remont.php:618-700. */ .rem-tabs td { background: #d3d3d3; } .rem-tabs .off { color: #777; cursor: default; } .rem-body { border: 1px solid #A5A5A5; padding: 0; } .rem-list { width: 100%; } .rem-row td { background: #d4d4d4; padding: 4px; vertical-align: middle; } .rem-row.alt td { background: #c8c8c8; } .rem-empty { padding: 8px; } /* TZ2-B13: три её ссылки ремонта («Ремонт 1 ед.», «Ремонт 10 ед.», «Полный ремонт», __user.php:7406-7410) — кнопки формы, одетые как ссылки. */ .rem-list button.lnk { background: none; border: 0; padding: 0; margin: 0; color: #003388; font: inherit; font-weight: bold; cursor: pointer; } .rem-list button.lnk:hover { color: #0066ff; } /* Вещи на полу — её клетки 80×80 (main.php:620). */ .floor .tolobf0, .floor .tolobf1, .floor .tolobf2 { display: inline-block; width: 80px; height: 80px; text-align: center; vertical-align: middle; } .floor .tolobf0 { background-color: #e5e5e5; } .floor .tolobf0:hover { background-color: #d5d5d5; } .floor .tolobf1 { background-color: #d5d5e5; cursor: default; } .floor .tolobf2 { background-color: #FFD700; } .floor .tolobf2:hover { background-color: #DAA520; } .floor img { max-width: 80px; max-height: 80px; } /* Ответ на подъём — красная строка с полем в 10px (main.php:617). */ .floor-msg { color: red; padding: 10px; } /* Строка турнира: её .zvnkj — просто поле в пять пикселей (__zv.php:1925: ). */ .zvnkj { padding: 5px; }