в эфире

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » в эфире » Новый форум » злоебучие фишки

злоебучие фишки

Страница: 1

Сообщений 1 страница 2 из 2

1

  • Автор: dionis
  • Администратор
  • dionis
  • текст текст текст текст текст
    текст текст текст текст текст
    текст текст текст текст текст
    текст текст текст текст текст

[hideprofile][html]

<div class="oa-bank">

<input type="radio" name="oa-bank-tabs" id="oa-bank-main" checked>
<input type="radio" name="oa-bank-tabs" id="oa-bank-game">
<input type="radio" name="oa-bank-tabs" id="oa-bank-active">
<input type="radio" name="oa-bank-tabs" id="oa-bank-spend">

<div class="oa-bank-card">

  <!--
  ШАПКА БАНКА.
  ЗДЕСЬ МЕНЯЕМ: МАЛЕНЬКУЮ ПОДПИСЬ, БОЛЬШОЙ ЗАГОЛОВОК И ПОДЗАГОЛОВОК.
  -->
  <div class="oa-bank-top">
    <div>
     <h2> <span>ON:AIR BANK</span></h2>
      <em>баланс / начисления / списания / активность</em>
    </div>

    <div class="oa-bank-coins">
      <b><b class="onair"></b></b>
      <span>считаем голоса</span>
    </div>
  </div>

  <!--
  ВКЛАДКИ ПОЗИЦИЙ.
  ЗДЕСЬ МЕНЯЕМ НАЗВАНИЯ ВКЛАДОК, ЕСЛИ НУЖНО.
  -->
  <div class="oa-bank-tabs">
    <label for="oa-bank-main">основное</label>
    <label for="oa-bank-game">игровое</label>
    <label for="oa-bank-active">активное</label>
    <label for="oa-bank-spend">траты</label>
  </div>

  <div class="oa-bank-body">

    <!--
    ЛЕВЫЙ ЧЁРНЫЙ БЛОК.
    ОПИСАНИЕ БАНКА ПЕРЕНЕСЕНО СЮДА, ПО ПРИНЦИПУ ЗАНЯТЫХ ВНЕШНОСТЕЙ.
    -->
    <div class="oa-bank-machine">

      <div class="oa-bank-display">

        <div class="oa-bank-live">
          <i></i>
          <b>BANK ON AIR</b>
        </div>

        <div class="oa-bank-title">
          <span>daily balance</span>
          <b>банк</b>
        </div>

        <!--
        ОПИСАНИЕ В ЧЁРНОМ БЛОКЕ.
        ЗДЕСЬ МЕНЯЕМ ТЕКСТ О ТОМ, КАК РАБОТАЕТ БАНК.
        -->
        <div class="oa-bank-rules">
          <p>
            Банк — это тема, где игроки забирают <b>голоса</b> за основные действия на форуме:
            регистрацию, анкету, приход по заявке, оформление профиля и активность.
          </p>
          <p>
            Справа выбери нужные позиции, укажи количество в счётчике, а калькулятор сам соберёт итоговую заявку.
          </p>
          <p>
            Всё приносится по шаблону с доказательствами. Для трат работает отдельная вкладка «тратить».
          </p>
        </div>

        <div class="oa-bank-equalizer">
          <i></i><i></i><i></i><i></i><i></i>
        </div>

      </div>

    </div>

    <!--
    ПРАВЫЙ БЛОК.
    СВЕРХУ — ПОЗИЦИИ С ВКЛАДКАМИ.
    СНИЗУ — КАЛЬКУЛЯТОР.
    -->
    <div class="oa-bank-right">

      <div class="oa-bank-pages">

        <div class="oa-bank-page page-main">

          <div class="oa-bank-section">
            <h3>основные начисления</h3>

            <div class="oa-bank-row" data-calc data-name="регистрация персонажа" data-price="50"><span>регистрация персонажа</span><b>50 голосов</b></div>
            <div class="oa-bank-row" data-calc data-name="пришёл по заявке" data-price="100"><span>пришёл по заявке</span><b>100 голосов</b></div>
            <div class="oa-bank-row" data-calc data-name="анкета текстом" data-price="70"><span>анкета текстом</span><b>70 голосов</b></div>
            <div class="oa-bank-row" data-calc data-name="анкета мемами" data-price="100"><span>анкета мемами</span><b>100 голосов</b></div>
            <div class="oa-bank-row" data-calc data-name="оставить заявку на нужного" data-price="150"><span>оставить заявку на нужного</span><b>150 голосов</b></div>
            <div class="oa-bank-row" data-calc data-name="привести друга" data-price="200"><span>привести друга</span><b>200 голосов</b></div>
            <div class="oa-bank-row" data-calc data-name="первая покупка в магазине" data-price="100"><span>первая покупка в магазине</span><b>100 голосов</b></div>
          </div>

        </div>

        <div class="oa-bank-page page-game">

          <div class="oa-bank-section">
            <h3>игровые начисления</h3>

            <div class="oa-bank-row" data-calc data-name="открыть игровой эпизод" data-price="100"><span>открыть игровой эпизод</span><b>100 голосов</b></div>
            <div class="oa-bank-row" data-calc data-name="закрыть игровой эпизод" data-price="150"><span>закрыть игровой эпизод</span><b>150 голосов</b></div>
            <div class="oa-bank-row" data-calc data-name="написать игровой пост" data-price="200"><span>написать игровой пост</span><b>200 голосов</b></div>
            <div class="oa-bank-row" data-calc data-name="написать sns-пост" data-price="50"><span>написать sns-пост</span><b>50 голосов</b></div>
            <div class="oa-bank-row" data-calc data-name="пост до 3500 символов" data-price="100"><span>пост до 3500 символов</span><b>100 голосов</b></div>
            <div class="oa-bank-row" data-calc data-name="пост до 7000 символов" data-price="200"><span>пост до 7000 символов</span><b>200 голосов</b></div>
            <div class="oa-bank-row" data-calc data-name="пост от 10000 символов" data-price="500"><span>пост от 10000 символов</span><b>500 голосов</b></div>
            <div class="oa-bank-row" data-calc data-name="за каждую 1000 символов сверх нормы" data-price="20"><span>за каждую 1000 символов сверх нормы</span><b>20 голосов</b></div>
            <div class="oa-bank-row" data-calc data-name="ответ в течение суток" data-price="200"><span>ответ в течение суток</span><b>200 голосов</b></div>
          </div>

        </div>

        <div class="oa-bank-page page-active">

          <div class="oa-bank-section">
            <h3>активность</h3>

            <div class="oa-bank-row" data-calc data-name="первые 100 сообщений" data-price="100"><span>первые 100 сообщений</span><b>100 голосов</b></div>
            <div class="oa-bank-row" data-calc data-name="каждые 100 сообщений" data-price="50"><span>каждые 100 сообщений</span><b>50 голосов</b></div>
            <div class="oa-bank-row" data-calc data-name="1000 сообщений" data-price="500"><span>1000 сообщений</span><b>500 голосов</b></div>
            <div class="oa-bank-row" data-calc data-name="каждая 1000 сообщений" data-price="300"><span>каждая 1000 сообщений</span><b>300 голосов</b></div>
            <div class="oa-bank-row" data-calc data-name="каждые 100 позитива" data-price="50"><span>каждые 100 позитива</span><b>50 голосов</b></div>
            <div class="oa-bank-row" data-calc data-name="каждые 100 уважения" data-price="50"><span>каждые 100 уважения</span><b>50 голосов</b></div>
            <div class="oa-bank-row" data-calc data-name="быть на форуме 1 час" data-price="200"><span>быть на форуме 1 час</span><b>200 голосов</b></div>
            <div class="oa-bank-row" data-calc data-name="быть на форуме 3 часа" data-price="400"><span>быть на форуме 3 часа</span><b>400 голосов</b></div>
            <div class="oa-bank-row" data-calc data-name="жмать на топ" data-price="100"><span>жмать на топ</span><b>100 голосов</b></div>
            <div class="oa-bank-row" data-calc data-name="каждые 10 реклам" data-price="100"><span>каждые 10 реклам</span><b>100 голосов</b></div>
          </div>

        </div>

        <div class="oa-bank-page page-spend">

          <div class="oa-bank-section">
            <h3>магазин трат</h3>

            <div class="oa-bank-row" data-spend data-name="смена внешности" data-price="1500"><span>смена внешности</span><b>1500 голосов</b></div>
            <div class="oa-bank-row" data-spend data-name="выкупить внешность на неделю" data-price="1500"><span>выкупить внешность на неделю</span><b>1500 голосов</b></div>
            <div class="oa-bank-row" data-spend data-name="твин" data-price="1000"><span>твин</span><b>1000 голосов</b></div>
            <div class="oa-bank-row" data-spend data-name="выписаться из списков" data-price="10000"><span>выписаться из списков</span><b>10000 голосов</b></div>
            <div class="oa-bank-row" data-spend data-name="индивидуальный фон" data-price="2000"><span>индивидуальный фон</span><b>2000 голосов</b></div>
            <div class="oa-bank-row" data-spend data-name="индивидуальная плашка" data-price="1500"><span>индивидуальная плашка</span><b>1500 голосов</b></div>
            <div class="oa-bank-row" data-spend data-name="индивидуальная иконка" data-price="1000"><span>индивидуальная иконка</span><b>1000 голосов</b></div>
          </div>

        </div>

      </div>

      <!--
      КАЛЬКУЛЯТОР.
      ПЕРЕНЕСЁН ПОД ПОЗИЦИИ СПРАВА.
      ID НЕ ТРОГАТЬ — НА НИХ ЗАВЯЗАН СКРИПТ.
      -->
      <div class="oa-bank-reader">
        <h4>счётчик</h4>

        <div class="oa-reader-tabs">
          <button type="button" class="active" id="oaReaderIncomeTab">начислить</button>
          <button type="button" id="oaReaderSpendTab">тратить</button>
        </div>

        <div class="oa-reader-panel active" id="oaReaderIncome">
          <div class="oa-bank-picked" id="oaBankPicked">
            <span>нажми на позиции сверху</span>
          </div>

          <div class="oa-bank-total">
            <span>итого</span>
            <b id="oaBankTotal">0 голосов</b>
          </div>

          <textarea id="oaBankResult" readonly></textarea>

          <button type="button" id="oaBankCopy">скопировать</button>
          <button type="button" id="oaBankClear">очистить</button>
        </div>

        <div class="oa-reader-panel" id="oaReaderSpend">
          <div class="oa-bank-picked" id="oaSpendPicked">
            <span>нажми на траты сверху</span>
          </div>

          <div class="oa-bank-total">
            <span>тратим</span>
            <b id="oaSpendTotal">0 голосов</b>
          </div>

          <textarea id="oaSpendResult" readonly></textarea>

          <button type="button" id="oaSpendCopy">скопировать</button>
          <button type="button" id="oaSpendClear">очистить</button>
        </div>
      </div>

    </div>

  </div>

</div>
</div>

<style>
/* АДМИНАМ: ГЛАВНЫЙ КОНТЕЙНЕР.
   ЦВЕТА БАНК БЕРЁТ ИЗ ОБЩЕЙ КАРТЫ ON:AIR В STYLE_CS.CSS. */
.oa-bank {
  --oa-page-bg-1: var(--oa-global-bg-1);
  --oa-page-bg-2: var(--oa-global-bg-2);

  --oa-pink: var(--oa-global-pink);
  --oa-hot-pink: var(--oa-global-hot-pink);
  --oa-red: var(--oa-global-red);
  --oa-blue: var(--oa-global-blue);
  --oa-mint: var(--oa-global-mint);
  --oa-dot: var(--oa-global-dot);

  --oa-dark: var(--oa-global-dark);
  --oa-darker: var(--oa-global-darker);
  --oa-black: var(--oa-global-black);

  --oa-soft: var(--oa-global-soft);
  --oa-light: var(--oa-global-card);
  --oa-light-strong: var(--oa-global-card-strong);
  --oa-pill-bg: var(--oa-global-pill);

  --oa-muted: var(--oa-global-muted);
  --oa-text: var(--oa-global-text);
  --oa-white: var(--oa-global-white);
  --oa-top-muted: var(--oa-global-top-muted);

  --oa-border: var(--oa-global-border);
  --oa-scroll: var(--oa-global-scroll);
  --oa-shadow: var(--oa-global-shadow);
  --oa-big-shadow: var(--oa-global-big-shadow);

  --oa-tab-off-bg: var(--oa-global-tab-off-bg);
  --oa-tab-off-text: var(--oa-global-tab-off-text);
  --oa-tab-on-1: var(--oa-global-tab-on-1);
  --oa-tab-on-2: var(--oa-global-tab-on-2);

  --oa-bank-height: 640px;

  width: min(880px, 100%);
  max-width: calc(100vw - 20px);
  margin: 30px auto;
  font-family: Trebuchet MS, Arial, sans-serif;
  color: var(--oa-text);
}

.oa-bank,
.oa-bank *,
.oa-bank *:before,
.oa-bank *:after {
  box-sizing: border-box;
}

.oa-bank input[type="radio"] {
  display: none;
}

/* ОСНОВНАЯ КАРТОЧКА БАНКА.
   ГЛАВНЫЙ ФОН МЕНЯЕТСЯ ЧЕРЕЗ --OA-GLOBAL-BG-1 И --OA-GLOBAL-BG-2. */
.oa-bank-card {
  padding: 26px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 10% 0%, rgba(120,220,255,.22), transparent 32%),
    radial-gradient(circle at 90% 8%, rgba(255,180,220,.28), transparent 34%),
    linear-gradient(135deg, var(--oa-page-bg-1), var(--oa-page-bg-2));
  box-shadow: 0 18px 45px var(--oa-big-shadow);
  border: 2px solid var(--oa-border);
}

/* ШАПКА */

.oa-bank-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}

.oa-bank-top span {
  display: block;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--oa-top-muted);
}

.oa-bank-top h2 {
  margin: 4px 0 4px;
  font-size: 38px;
  line-height: 1;
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: normal;
  color: var(--oa-text);
}

.oa-bank-top em {
  font-style: normal;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--oa-muted);
}

.oa-bank-coins {
  min-width: 150px;
  padding: 13px 16px;
  border-radius: 22px;
  background: var(--oa-pill-bg);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  text-align: right;
}

.oa-bank-coins b {
  display: block;
  font-size: 28px;
  line-height: 1;
  color: var(--oa-dot);
}

.oa-bank-coins span {
  letter-spacing: 1px;
}

/* ВКЛАДКИ */

.oa-bank-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 22px;
}

.oa-bank-tabs label {
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--oa-tab-off-bg);
  color: var(--oa-tab-off-text);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  cursor: pointer;
  transition: .25s;
}

.oa-bank-tabs label:hover {
  transform: translateY(-2px);
}

#oa-bank-main:checked ~ .oa-bank-card .oa-bank-tabs label[for="oa-bank-main"],
#oa-bank-game:checked ~ .oa-bank-card .oa-bank-tabs label[for="oa-bank-game"],
#oa-bank-active:checked ~ .oa-bank-card .oa-bank-tabs label[for="oa-bank-active"],
#oa-bank-spend:checked ~ .oa-bank-card .oa-bank-tabs label[for="oa-bank-spend"] {
  background: linear-gradient(135deg, var(--oa-tab-on-1), var(--oa-tab-on-2));
}

/* ОБЩАЯ СЕТКА.
   СЛЕВА ЧЁРНЫЙ БЛОК, СПРАВА ПОЗИЦИИ + КАЛЬКУЛЯТОР. */

.oa-bank-body {
  display: grid;
  grid-template-columns: 235px 1fr;
  gap: 22px;
  height: var(--oa-bank-height);
  min-height: 0;
  align-items: stretch;
  overflow: hidden;
}

.oa-bank-machine,
.oa-bank-right,
.oa-bank-pages,
.oa-bank-page,
.oa-bank-reader {
  min-height: 0;
}

/* ЛЕВЫЙ ЧЁРНЫЙ БЛОК */

.oa-bank-machine {
  height: 100%;
  align-self: stretch;
  border-radius: 28px;
  padding: 14px;
  background: linear-gradient(180deg, var(--oa-dark), var(--oa-darker));
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.12),
    0 16px 30px rgba(0,0,0,.18);
}

.oa-bank-display {
  position: relative;
  height: 100%;
  border-radius: 23px;
  overflow: hidden;
  padding: 16px;
  background:
    radial-gradient(circle at 80% 10%, rgba(255,180,220,.17), transparent 35%),
    radial-gradient(circle at 15% 85%, rgba(120,220,255,.18), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(120,220,255,.06));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}

.oa-bank-display:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0 35%, rgba(255,255,255,.16) 45%, transparent 58%);
  pointer-events: none;
}

.oa-bank-live {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  color: var(--oa-white);
  font-size: 10px;
  letter-spacing: 1.5px;
}

.oa-bank-live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--oa-dot);
  box-shadow: 0 0 12px rgba(255,90,137,.9);
}

.oa-bank-title {
  position: relative;
  z-index: 2;
  margin-top: 22px;
  color: var(--oa-white);
}

.oa-bank-title span {
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: rgba(255,255,255,.62);
}

.oa-bank-title b {
  display: block;
  margin-top: 8px;
  font-size: 28px;
  line-height: 1.05;
  font-weight: bold;
  text-transform: lowercase;
  letter-spacing: -.5px;
}

/* ОПИСАНИЕ В ЧЁРНОМ БЛОКЕ */

.oa-bank-rules {
  position: relative;
  z-index: 2;
  margin-top: 16px;
  padding: 13px;
  border-radius: 17px;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.80);
}

.oa-bank-rules p {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.38;
}

.oa-bank-rules p:last-child {
  margin-bottom: 0;
}

.oa-bank-rules b {
  color: var(--oa-mint);
}

.oa-bank-equalizer {
  position: relative;
  z-index: 2;
  height: 64px;
  margin-top: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 7px;
}

.oa-bank-equalizer i {
  display: block;
  width: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--oa-mint), var(--oa-pink));
  box-shadow: 0 0 10px rgba(143,245,236,.35);
}

.oa-bank-equalizer i:nth-child(1) { height: 25px; }
.oa-bank-equalizer i:nth-child(2) { height: 50px; }
.oa-bank-equalizer i:nth-child(3) { height: 36px; }
.oa-bank-equalizer i:nth-child(4) { height: 58px; }
.oa-bank-equalizer i:nth-child(5) { height: 30px; }

/* ПРАВЫЙ БЛОК */

.oa-bank-right {
  height: 100%;
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 14px;
  overflow: hidden;
  padding: 18px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 92% 8%, rgba(120,220,255,.18), transparent 34%),
    rgba(255,255,255,.68);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.7),
    0 12px 25px rgba(0,0,0,.08);
}

/* ПОЗИЦИИ */

.oa-bank-pages {
  min-width: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.oa-bank-page {
  display: none;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 8px;
}

#oa-bank-main:checked ~ .oa-bank-card .page-main,
#oa-bank-game:checked ~ .oa-bank-card .page-game,
#oa-bank-active:checked ~ .oa-bank-card .page-active,
#oa-bank-spend:checked ~ .oa-bank-card .page-spend {
  display: block;
}

.oa-bank-page::-webkit-scrollbar,
.oa-bank-picked::-webkit-scrollbar,
#oaBankResult::-webkit-scrollbar,
#oaSpendResult::-webkit-scrollbar {
  width: 6px;
}

.oa-bank-page::-webkit-scrollbar-thumb,
.oa-bank-picked::-webkit-scrollbar-thumb,
#oaBankResult::-webkit-scrollbar-thumb,
#oaSpendResult::-webkit-scrollbar-thumb {
  background: var(--oa-scroll);
  border-radius: 20px;
}

.oa-bank-page::-webkit-scrollbar-track,
.oa-bank-picked::-webkit-scrollbar-track,
#oaBankResult::-webkit-scrollbar-track,
#oaSpendResult::-webkit-scrollbar-track {
  background: transparent;
}

.oa-bank-section {
  margin-bottom: 0;
  padding: 18px;
  border-radius: 26px;
  background: var(--oa-light);
  box-shadow: 0 12px 25px var(--oa-shadow);
}

.oa-bank-section h3 {
  margin: 0 0 12px;
  font-size: 23px;
  line-height: 1;
  text-transform: lowercase;
  color: var(--oa-text);
}

.oa-bank-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
  padding: 10px 12px;
  border-radius: 15px;
  background: var(--oa-soft);
}

.oa-bank-row:last-child {
  margin-bottom: 0;
}

.oa-bank-row span {
  color: var(--oa-muted);
  font-size: 13px;
  line-height: 1.3;
}

.oa-bank-row b {
  flex-shrink: 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--oa-dark);
  color: var(--oa-white);
  font-size: 11px;
  font-weight: normal;
}

.oa-bank-row[data-calc],
.oa-bank-row[data-spend] {
  cursor: pointer;
  transition: .2s;
}

.oa-bank-row[data-calc]:hover,
.oa-bank-row[data-spend]:hover {
  transform: translateX(3px);
  background: var(--oa-light-strong);
}

/* КАЛЬКУЛЯТОР СПРАВА СНИЗУ */

.oa-bank-reader {
  padding: 14px;
  border-radius: 22px;
  background: var(--oa-light);
  color: var(--oa-text);
  box-shadow: 0 12px 25px var(--oa-shadow);
}

.oa-bank-reader h4 {
  margin: 0 0 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--oa-text);
}

.oa-reader-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin-bottom: 10px;
}

.oa-reader-tabs button {
  padding: 8px 8px;
  border: 0;
  border-radius: 999px;
  background: var(--oa-tab-off-bg);
  color: var(--oa-tab-off-text);
  font-family: Trebuchet MS, Arial, sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .8px;
  cursor: pointer;
}

.oa-reader-tabs button.active {
  background: linear-gradient(135deg, var(--oa-tab-on-1), var(--oa-tab-on-2));
  color: var(--oa-white);
}

.oa-reader-panel {
  display: none;
}

.oa-reader-panel.active {
  display: block;
}

.oa-bank-picked {
  max-height: 96px;
  overflow-y: auto;
  padding: 9px;
  border-radius: 15px;
  background: var(--oa-soft);
  margin-bottom: 10px;
}

.oa-bank-picked span {
  display: block;
  font-size: 11px;
  line-height: 1.35;
  color: var(--oa-muted);
}

.oa-picked-item {
  margin-bottom: 8px;
  padding: 8px;
  border-radius: 14px;
  background: rgba(255,255,255,.7);
}

.oa-picked-item strong {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  line-height: 1.25;
  color: var(--oa-text);
}

.oa-picked-item em {
  display: block;
  font-style: normal;
  font-size: 10px;
  color: var(--oa-muted);
}

.oa-picked-controls {
  display: grid;
  grid-template-columns: 24px 1fr 24px;
  gap: 5px;
  align-items: center;
  margin-top: 6px;
}

.oa-picked-minus,
.oa-picked-plus {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 999px;
  background: var(--oa-dark);
  color: var(--oa-white);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.oa-bank .oa-picked-item input {
  display: block;
  width: 100%;
  padding: 6px 7px;
  border: 0;
  border-radius: 10px;
  background: rgba(255,255,255,.88);
  color: var(--oa-text);
  font-family: Trebuchet MS, Arial, sans-serif;
  font-size: 11px;
  text-align: center;
}

.oa-picked-remove {
  margin-top: 6px;
  padding: 4px 8px;
  border: 0;
  border-radius: 999px;
  background: var(--oa-tab-off-bg);
  color: var(--oa-tab-off-text);
  font-size: 9px;
  cursor: pointer;
}

.oa-bank-total {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding: 9px 10px;
  border-radius: 14px;
  background: var(--oa-black);
  color: var(--oa-mint);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#oaBankResult,
#oaSpendResult {
  width: 100%;
  height: 78px;
  margin-top: 10px;
  padding: 10px;
  border: 0;
  border-radius: 15px;
  background: var(--oa-soft);
  color: var(--oa-muted);
  font-family: Trebuchet MS, Arial, sans-serif;
  font-size: 11px;
  line-height: 1.4;
  resize: none;
  overflow-y: auto;
}

#oaBankCopy,
#oaBankClear,
#oaSpendCopy,
#oaSpendClear {
  width: 100%;
  margin-top: 7px;
  padding: 8px 10px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--oa-tab-on-1), var(--oa-tab-on-2));
  color: var(--oa-white);
  font-family: Trebuchet MS, Arial, sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
}

#oaBankClear,
#oaSpendClear {
  background: var(--oa-tab-off-bg);
  color: var(--oa-tab-off-text);
}

/* АДАПТИВ */

@media (max-width: 760px) {
  .oa-bank {
    max-width: calc(100vw - 12px);
    margin: 16px auto;
    padding-bottom: 180px;
  }

  .oa-bank-card {
    padding: 18px;
    border-radius: 26px;
  }

  .oa-bank-top {
    display: block;
  }

  .oa-bank-top h2 {
    font-size: 31px;
  }

  .oa-bank-coins {
    width: 100%;
    min-width: 0;
    margin-top: 15px;
    text-align: left;
  }

  .oa-bank-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 8px;
  }

  .oa-bank-tabs label {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .oa-bank-body {
    display: block;
    height: auto;
    overflow: visible;
  }

  .oa-bank-machine {
    height: auto;
    margin-bottom: 18px;
  }

  .oa-bank-display {
    min-height: 360px;
    height: auto;
  }

  .oa-bank-right {
    display: block;
    height: auto;
    overflow: visible;
  }

  .oa-bank-pages,
  .oa-bank-page {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    padding-right: 0;
  }

  .oa-bank-page {
    display: none;
  }

  .oa-bank-reader {
    margin-top: 14px;
  }

  .oa-bank-picked {
    max-height: 190px;
  }

  #oaBankResult,
  #oaSpendResult {
    height: 150px;
    font-size: 12px;
  }

  .oa-bank .oa-picked-item input {
    font-size: 16px;
  }

  #oa-bank-main:checked ~ .oa-bank-card .page-main,
  #oa-bank-game:checked ~ .oa-bank-card .page-game,
  #oa-bank-active:checked ~ .oa-bank-card .page-active,
  #oa-bank-spend:checked ~ .oa-bank-card .page-spend {
    display: block;
  }
}

@media (max-width: 520px) {
  .oa-bank-card {
    padding: 14px;
    border-radius: 22px;
  }

  .oa-bank-top h2 {
    font-size: 28px;
  }

  .oa-bank-display {
    min-height: 330px;
    padding: 15px;
  }

  .oa-bank-title b {
    font-size: 25px;
  }

  .oa-bank-equalizer {
    margin-top: 18px;
  }

  .oa-bank-section,
  .oa-bank-reader {
    padding: 15px;
  }

  .oa-bank-row {
    display: block;
  }

  .oa-bank-row span {
    display: block;
    margin-bottom: 8px;
  }

  .oa-bank-row b {
    display: inline-block;
  }
}
</style>

[/html]

начислить

Код:
[b]за что:[/b]
[b]доказательства:[/b]
[b]сумма:[/b]
[b]итого на балансе:[/b]

потратить

Код:
[b]что берём:[/b]
[b]скока тратим:[/b]
[b]скока осталось:[/b]

0

2

  • Автор: dionis
  • Администратор
  • dionis
  • текст текст текст текст текст
    текст текст текст текст текст
    текст текст текст текст текст
    текст текст текст текст текст

[hideprofile][html]

<div class="oa-faces">

<div class="oa-faces-card">

  <!--
  ШАПКА ЗАНЯТЫХ ВНЕШНОСТЕЙ.
  ЗДЕСЬ МЕНЯЕМ: МАЛЕНЬКУЮ ПОДПИСЬ, БОЛЬШОЙ ЗАГОЛОВОК И ПОДЗАГОЛОВОК.
  -->
  <div class="oa-faces-top">
    <div>
      <h2><span>ON:AIR Face Claimed</span></2>
      <h3><em>актуальный список занятых фейсов</em></h3>
    </div>

    <!--
    ПРАВЫЙ БЛОК В ШАПКЕ.
    ЗДЕСЬ МЕНЯЕМ: ЗНАЧОК И КОРОТКУЮ ПОДПИСЬ.
    -->
    <div class="oa-faces-badge">
<div class="oa-logo">

  <svg viewBox="0 0 1100 600" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="ON:AIR">

    <!-- РАЗОМКНУТЫЙ НЕОНОВЫЙ КРУГ-->

    <g class="oa-circle-group oa-neon">
      <circle class="oa-circle-main" cx="370" cy="300" r="220"/>

      <circle class="oa-circle-inner" cx="370" cy="300" r="207"/> </g>

    <!--         ON    -->
    <text class="oa-on oa-neon" x="0" y="0">ON</text>

    <!-- ДВОЕТОЧИЕ -->
    <g class="oa-colon oa-neon">
      <circle class="oa-colon-dot oa-colon-top" cx="0" cy="0" />
      <circle class="oa-colon-dot oa-colon-bottom" cx="0" cy="0" />
     </g>

    <!--  AIR -->
    <text class="oa-air oa-neon" x="0" y="0">Air</text>

    <!--  ГЛИТЧ-ПОЛОСА = -->
    <g class="oa-glitch">
      <rect class="oa-glitch-main" x="0" y="0" width="510" height="4"/>
      <rect class="oa-glitch-main" x="16" y="8" width="590" height="3"/>
      <rect class="oa-glitch-thin" x="45" y="15" width="465" height="2" />
      <rect class="oa-glitch-main" x="0" y="21" width="545" height="4"/>
      <rect class="oa-glitch-thin" x="82" y="29" width="395" height="2"/>
      <rect class="oa-glitch-main" x="14" y="4" width="40" height="10"/>
      <rect class="oa-glitch-main" x="128" y="1" width="27" height="12"/>
      <rect class="oa-glitch-main" x="242" y="13" width="52" height="11"/>
      <rect class="oa-glitch-main" x="374" y="5" width="35" height="14"/>
      <rect class="oa-glitch-main" x="486" y="17"  width="64" height="9"/>
    </g>
  </svg>
</div>
      <span>ctrl + f для поиска</span>
    </div>
  </div>

  <div class="oa-faces-body">

    <!--
    ЛЕВЫЙ ЧЁРНЫЙ ON AIR-БЛОК.
    ЗДЕСЬ МЕНЯЕМ: FACE ON AIR, FACE CLAIM, ЗАНЯТЫЕ, ПРАВИЛА И ПОДПИСИ.
    -->
    <div class="oa-faces-machine">

      <div class="oa-faces-display">

        <div class="oa-faces-live">
          <i></i>
          <b>FACE ON AIR</b>
        </div>

        <div class="oa-faces-title">
          <span>face claim</span>
          <b>занятые</b>
        </div>

        <!--
        ПРАВИЛА В ЧЁРНОМ БЛОКЕ.
        ЗДЕСЬ МЕНЯЕМ ОПИСАНИЕ, ПРАВИЛА ЗАНЯТЫХ, ПРИДЕРЖАННЫХ И ВЫКУПЛЕННЫХ ВНЕШНОСТЕЙ.
        -->
        <div class="oa-faces-rules">
          <p>
            Внешность считается занятой после принятия анкеты. Перед регистрацией проверьте список через поиск по странице:
            <b>ctrl + f</b>.
          </p>
          <p>
            О возможном освобождении фейса можно узнать в гостевой или в списках на удаление.
          </p>
          <p>
            Придержанные и выкупленные внешности отмечаются отдельно в гостевой.
          </p>
        </div>

        <div class="oa-faces-equalizer">
          <i></i><i></i><i></i><i></i><i></i>
        </div>

      </div>

    </div>

    <!--
    ПРАВОЕ ОСНОВНОЕ ОКНО.
    ТАБЛИЦА BOYS / GIRLS РАСТЯНУТА ПО ВЫСОТЕ ЧЁРНОГО БЛОКА.
    -->
    <div class="oa-faces-panel">

      <div class="oa-faces-main">

        <!--
        БЛОК BOYS.
        СЮДА АДМИНЫ ВНОСЯТ ЗАНЯТЫЕ МУЖСКИЕ ВНЕШНОСТИ.
        ВНУТРИ КАЖДОЙ БУКВЕННОЙ КАТЕГОРИИ ЕСТЬ ОТДЕЛЬНЫЙ СКРОЛЛ.
        -->
        <div class="oa-face-column oa-face-boys">

          <div class="oa-face-title">boys</div>

          <div class="oa-face-scroll">

            <div class="oa-face-section">
              <div class="oa-face-letter">A — B — C — D</div>
              <div class="oa-face-list">
                <b>A.C.E</b> - Lee Donghun<br>
                <b>AB6IX</b> - Jeon Woong<br>
                <b>ATEEZ</b> - Choi San<br>
                <b>ATEEZ</b> - Park Seonghwa<br>
                <b>ASTRO</b> - Cha Eunwoo<br>
                <b>BTS</b> - Kim Taehyung<br>
                <b>BTS</b> - Min Yoongi<br>
                <b>CIX</b> - Bae Jinyoung<br>
                <b>CRAVITY</b> - Kang Minhee<br>
                <b>DKZ</b> - Park Jaechan
              </div>
            </div>

            <div class="oa-face-section">
              <div class="oa-face-letter">E — F — G — H</div>
              <div class="oa-face-list">
                <b>EXO</b> - Byun Baekhyun<br>
                <b>EXO</b> - Park Chanyeol<br>
                <b>EXO</b> - Oh Sehun<br>
                <b>ENHYPEN</b> - Park Sunghoon<br>
                <b>ENHYPEN</b> - Lee Heeseung<br>
                <b>GOT7</b> - Mark Tuan<br>
                <b>GOT7</b> - Jackson Wang<br>
                <b>HIGHLIGHT</b> - Yoon Dujun<br>
                <b>HIGHLIGHT</b> - Yang Yoseob<br>
                <b>actor</b> - Hwang Inyeop
              </div>
            </div>

            <div class="oa-face-section">
              <div class="oa-face-letter">I — J — K — L</div>
              <div class="oa-face-list">
                <b>IKON</b> - Kim Jinhwan<br>
                <b>IKON</b> - Song Yunhyeong<br>
                <b>JYJ</b> - Kim Jaejoong<br>
                <b>actor</b> - Ji Changwook<br>
                <b>actor</b> - Jung Haein<br>
                <b>actor</b> - Kim Seonho<br>
                <b>actor</b> - Kim Woobin<br>
                <b>actor</b> - Lee Minho<br>
                <b>actor</b> - Lee Dohyun<br>
                <b>actor</b> - Lee Jongsuk
              </div>
            </div>

            <div class="oa-face-section">
              <div class="oa-face-letter">M — N — O — P</div>
              <div class="oa-face-list">
                <b>MONSTA X</b> - Yoo Kihyun<br>
                <b>MONSTA X</b> - Lee Minhyuk<br>
                <b>NCT</b> - Lee Taeyong<br>
                <b>NCT</b> - Na Jaemin<br>
                <b>NCT</b> - Jung Jaehyun<br>
                <b>ONEUS</b> - Lee Seoho<br>
                <b>ONEUS</b> - Kim Youngjo<br>
                <b>PENTAGON</b> - Jung Wooseok<br>
                <b>PENTAGON</b> - Kang Hyunggu<br>
                <b>P1Harmony</b> - Choi Taeyang
              </div>
            </div>

            <div class="oa-face-section">
              <div class="oa-face-letter">Q — R — S — T</div>
              <div class="oa-face-list">
                <b>RIIZE</b> - Jung Sungchan<br>
                <b>RIIZE</b> - Park Wonbin<br>
                <b>SEVENTEEN</b> - Yoon Jeonghan<br>
                <b>SEVENTEEN</b> - Kim Mingyu<br>
                <b>SEVENTEEN</b> - Wen Junhui<br>
                <b>Stray Kids</b> - Hwang Hyunjin<br>
                <b>Stray Kids</b> - Lee Felix<br>
                <b>TXT</b> - Choi Yeonjun<br>
                <b>TXT</b> - Choi Soobin<br>
                <b>THE BOYZ</b> - Lee Juyeon
              </div>
            </div>

            <div class="oa-face-section">
              <div class="oa-face-letter">U — V — W — X — Y — Z</div>
              <div class="oa-face-list">
                <b>UP10TION</b> - Kim Wooseok<br>
                <b>VICTON</b> - Han Seungwoo<br>
                <b>VIXX</b> - Jung Taekwoon<br>
                <b>VIXX</b> - Kim Wonshik<br>
                <b>WayV</b> - Wong Yukhei<br>
                <b>WayV</b> - Xiao Dejun<br>
                <b>WEi</b> - Kim Yohan<br>
                <b>WINNER</b> - Kang Seungyoon<br>
                <b>Xdinary Heroes</b> - Goo Gunil<br>
                <b>ZEROBASEONE</b> - Zhang Hao
              </div>
            </div>

          </div>

        </div>

        <!--
        БЛОК GIRLS.
        СЮДА АДМИНЫ ВНОСЯТ ЗАНЯТЫЕ ЖЕНСКИЕ ВНЕШНОСТИ.
        ВНУТРИ КАЖДОЙ БУКВЕННОЙ КАТЕГОРИИ ЕСТЬ ОТДЕЛЬНЫЙ СКРОЛЛ.
        -->
        <div class="oa-face-column oa-face-girls">

          <div class="oa-face-title">girls</div>

          <div class="oa-face-scroll">

            <div class="oa-face-section">
              <div class="oa-face-letter">A — B — C — D</div>
              <div class="oa-face-list">
                <b>aespa</b> - Yoo Jimin<br>
                <b>aespa</b> - Kim Minjeong<br>
                <b>AOA</b> - Kim Seolhyun<br>
                <b>Apink</b> - Jung Eunji<br>
                <b>BLACKPINK</b> - Kim Jisoo<br>
                <b>BLACKPINK</b> - Lalisa Manobal<br>
                <b>Billlie</b> - Kim Siyoon<br>
                <b>CLC</b> - Choi Yujin<br>
                <b>Dreamcatcher</b> - Kim Minji<br>
                <b>Dreamcatcher</b> - Lee Siyeon
              </div>
            </div>

            <div class="oa-face-section">
              <div class="oa-face-letter">E — F — G — H</div>
              <div class="oa-face-list">
                <b>EVERGLOW</b> - Wang Yiren<br>
                <b>EVERGLOW</b> - Kim Sihyeon<br>
                <b>EXID</b> - Ahn Hani<br>
                <b>fromis_9</b> - Lee Saerom<br>
                <b>fromis_9</b> - Roh Jisun<br>
                <b>GFRIEND</b> - Jung Yerin<br>
                <b>GFRIEND</b> - Kim Yewon<br>
                <b>Girls' Generation</b> - Kim Taeyeon<br>
                <b>Girls' Generation</b> - Im Yoona<br>
                <b>H1-KEY</b> - Lee Hwiseo
              </div>
            </div>

            <div class="oa-face-section">
              <div class="oa-face-letter">I — J — K — L</div>
              <div class="oa-face-list">
                <b>ITZY</b> - Shin Ryujin<br>
                <b>ITZY</b> - Hwang Yeji<br>
                <b>IVE</b> - An Yujin<br>
                <b>IVE</b> - Jang Wonyoung<br>
                <b>Jessica</b> - Jung Sooyeon<br>
                <b>Kep1er</b> - Shen Xiaoting<br>
                <b>Kep1er</b> - Kim Chaehyun<br>
                <b>LE SSERAFIM</b> - Kim Chaewon<br>
                <b>LE SSERAFIM</b> - Miyawaki Sakura<br>
                <b>LOONA</b> - Jeon Heejin
              </div>
            </div>

            <div class="oa-face-section">
              <div class="oa-face-letter">M — N — O — P</div>
              <div class="oa-face-list">
                <b>MAMAMOO</b> - Moon Byulyi<br>
                <b>MAMAMOO</b> - Ahn Hyejin<br>
                <b>Miss A</b> - Bae Suzy<br>
                <b>NewJeans</b> - Kim Minji<br>
                <b>NewJeans</b> - Pham Hanni<br>
                <b>NewJeans</b> - Kang Haerin<br>
                <b>OH MY GIRL</b> - Choi Hyojung<br>
                <b>OH MY GIRL</b> - Yoo Shiah<br>
                <b>PURPLE KISS</b> - Na Goeun<br>
                <b>PRISTIN</b> - Zhou Jieqiong
              </div>
            </div>

            <div class="oa-face-section">
              <div class="oa-face-letter">Q — R — S — T</div>
              <div class="oa-face-list">
                <b>Red Velvet</b> - Bae Joohyun<br>
                <b>Red Velvet</b> - Kang Seulgi<br>
                <b>Red Velvet</b> - Park Sooyoung<br>
                <b>STAYC</b> - Bae Sumin<br>
                <b>STAYC</b> - Yoon Seeun<br>
                <b>STAYC</b> - Jang Yeeun<br>
                <b>TWICE</b> - Im Nayeon<br>
                <b>TWICE</b> - Myoui Mina<br>
                <b>TWICE</b> - Hirai Momo<br>
                <b>tripleS</b> - Yoon Seoyeon
              </div>
            </div>

            <div class="oa-face-section">
              <div class="oa-face-letter">U — V — W — X — Y — Z</div>
              <div class="oa-face-list">
                <b>VIVIZ</b> - Jung Eunbi<br>
                <b>VIVIZ</b> - Hwang Eunbi<br>
                <b>WJSN</b> - Kim Jiyeon<br>
                <b>WJSN</b> - Bona Kim<br>
                <b>Weki Meki</b> - Choi Yoojung<br>
                <b>Weeekly</b> - Lee Soojin<br>
                <b>woo!ah!</b> - Kwon Nayeon<br>
                <b>actress</b> - Won Jina<br>
                <b>YENA</b> - Choi Yena<br>
                <b>actress</b> - Zhao Lusi
              </div>
            </div>

          </div>

        </div>

      </div>

    </div>

  </div>

</div>
</div>

<style>
/*
ОБЩАЯ КАРТА ЦВЕТОВ ON:AIR.
ЕСЛИ У ВАС ЭТА КАРТА УЖЕ ЕСТЬ В ОБЩЕМ CSS ФОРУМА, ЭТОТ БЛОК МОЖНО НЕ ДУБЛИРОВАТЬ.
МЕНЯЕМ ЦВЕТА ТУТ — И ВСЕ БЛОКИ, КОТОРЫЕ ПОДВЯЗАНЫ К --OA-GLOBAL-..., МЕНЯЮТСЯ ВМЕСТЕ.
*/

:root {
  --oa-global-pink: #ffb4dc;
  --oa-global-hot-pink: #ff3cac;
  --oa-global-red: #ff6b6b;
  --oa-global-blue: #78dcff;
  --oa-global-mint: #8ff5ec;

  --oa-global-pink-soft: rgba(255,180,220,.28);
  --oa-global-pink-glow: rgba(255,180,220,.17);
  --oa-global-blue-soft: rgba(120,220,255,.22);
  --oa-global-blue-glow: rgba(120,220,255,.18);
  --oa-global-mint-glow: rgba(143,245,236,.35);

  --oa-global-dark: #2f2f31;
  --oa-global-darker: #19191b;

  --oa-global-soft: rgba(244,241,234,.95);
  --oa-global-light: rgba(255,255,255,.86);
  --oa-global-glass: rgba(255,255,255,.72);

  --oa-global-text: #222;
  --oa-global-copy: #666;
  --oa-global-muted: #777;
  --oa-global-overline: #999;
  --oa-global-white: #fff;

  --oa-global-border: rgba(30,30,30,.9);
  --oa-global-shadow: rgba(0,0,0,.15);

  --oa-global-font: Trebuchet MS, Arial, sans-serif;
}

/*
ПОДВЯЗКА ЗАНЯТЫХ ВНЕШНОСТЕЙ К ОБЩЕЙ КАРТЕ ЦВЕТОВ.
--oa-faces-height — ОБЩАЯ ВЫСОТА ЧЁРНОГО БЛОКА И ПРАВОЙ ТАБЛИЦЫ НА ПК.
*/

.oa-faces {
  --oa-pink: var(--oa-global-pink, #ffb4dc);
  --oa-hot-pink: var(--oa-global-hot-pink, #ff3cac);
  --oa-red: var(--oa-global-red, #ff6b6b);
  --oa-blue: var(--oa-global-blue, #78dcff);
  --oa-mint: var(--oa-global-mint, #8ff5ec);

  --oa-pink-soft: var(--oa-global-pink-soft, rgba(255,180,220,.28));
  --oa-pink-glow: var(--oa-global-pink-glow, rgba(255,180,220,.17));
  --oa-blue-soft: var(--oa-global-blue-soft, rgba(120,220,255,.22));
  --oa-blue-glow: var(--oa-global-blue-glow, rgba(120,220,255,.18));
  --oa-mint-glow: var(--oa-global-mint-glow, rgba(143,245,236,.35));

  --oa-dark: var(--oa-global-dark, #2f2f31);
  --oa-darker: var(--oa-global-darker, #19191b);

  --oa-soft: var(--oa-global-soft, rgba(244,241,234,.95));
  --oa-light: var(--oa-global-light, rgba(255,255,255,.86));
  --oa-glass: var(--oa-global-glass, rgba(255,255,255,.72));

  --oa-text: var(--oa-global-text, #222);
  --oa-copy: var(--oa-global-copy, #666);
  --oa-muted: var(--oa-global-muted, #777);
  --oa-overline: var(--oa-global-overline, #999);
  --oa-white: var(--oa-global-white, #fff);

  --oa-border: var(--oa-global-border, rgba(30,30,30,.9));
  --oa-shadow: var(--oa-global-shadow, rgba(0,0,0,.15));
  --oa-faces-height: 560px;

  width: min(900px, 100%);
  max-width: calc(100vw - 20px);
  margin: 30px auto;
  font-family: var(--oa-global-font, Trebuchet MS, Arial, sans-serif);
  color: var(--oa-text);
}

.oa-faces,
.oa-faces *,
.oa-faces *:before,
.oa-faces *:after {
  box-sizing: border-box;
}

.oa-faces-card {
  padding: 26px;
  border-radius: 36px;
  background:
    radial-gradient(circle at 10% 0%, var(--oa-blue-soft), transparent 32%),
    radial-gradient(circle at 90% 8%, var(--oa-pink-soft), transparent 34%),
    linear-gradient(135deg, var(--oa-white), #fbfaf7);
  box-shadow: 0 18px 45px var(--oa-shadow);
  border: 2px solid var(--oa-border);
}

/*
ШАПКА.
ЗДЕСЬ МЕНЯЮТСЯ РАЗМЕРЫ, ШРИФТЫ И ОТСТУПЫ ВЕРХНЕЙ ЧАСТИ.
*/

.oa-faces-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 22px;
}

.oa-faces-top span {
  display: block;
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--oa-overline);
}

.oa-faces-top h2 {
  margin: 4px 0 4px;
  font-size: 38px;
  line-height: 1;
  font-family: Georgia, serif;
  font-style: italic;
  font-weight: normal;
  text-transform: lowercase;
}

.oa-faces-top em {
  font-style: normal;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--oa-muted);
}

.oa-faces-badge {
  min-width: 160px;
  padding: 13px 16px;
  border-radius: 22px;
  background: var(--oa-glass);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
  text-align: right;
}

.oa-faces-badge b {
  display: block;
  font-size: 28px;
  line-height: 1;
  color: var(--oa-hot-pink);
}

.oa-faces-badge span {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--oa-muted);
}

/*
ОБЩАЯ СЕТКА.
235PX — ШИРИНА ЧЁРНОГО БЛОКА СЛЕВА. МОЖНО СДЕЛАТЬ УЖЕ: 215PX. ШИРЕ: 255PX.
*/

.oa-faces-body {
  display: grid;
  grid-template-columns: 235px 1fr;
  gap: 22px;
  height: var(--oa-faces-height);
  align-items: stretch;
  overflow: hidden;
}

.oa-faces-machine,
.oa-faces-panel,
.oa-faces-main,
.oa-face-column {
  min-height: 0;
}

/*
ЛЕВЫЙ ЧЁРНЫЙ БЛОК.
ТУТ МЕНЯЮТСЯ РАЗМЕРЫ, ФОН, ОТСТУПЫ И СКРУГЛЕНИЯ ON AIR-БЛОКА.
*/

.oa-faces-machine {
  height: 100%;
  border-radius: 28px;
  padding: 14px;
  background:
    linear-gradient(180deg, var(--oa-dark), var(--oa-darker));
  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,.12),
    0 16px 30px rgba(0,0,0,.18);
}

.oa-faces-display {
  position: relative;
  height: 100%;
  border-radius: 23px;
  overflow: hidden;
  padding: 16px;
  background:
    radial-gradient(circle at 80% 10%, var(--oa-pink-glow), transparent 35%),
    radial-gradient(circle at 15% 85%, var(--oa-blue-glow), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.16), rgba(120,220,255,.06));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
}

.oa-faces-display:after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, transparent 0 35%, rgba(255,255,255,.16) 45%, transparent 58%);
  pointer-events: none;
}

.oa-faces-live {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.28);
  color: var(--oa-white);
  font-size: 10px;
  letter-spacing: 1.5px;
}

.oa-faces-live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--oa-hot-pink);
  box-shadow: 0 0 12px rgba(255,60,172,.75);
}

.oa-faces-title {
  position: relative;
  z-index: 2;
  margin-top: 22px;
  color: var(--oa-white);
}

.oa-faces-title span {
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  color: rgba(255,255,255,.62);
}

.oa-faces-title b {
  display: block;
  margin-top: 8px;
  font-size: 28px;
  line-height: 1.05;
  font-family: var(--oa-global-font, Trebuchet MS, Arial, sans-serif);
  font-weight: bold;
  text-transform: lowercase;
  letter-spacing: -.5px;
}

/*
ПРАВИЛА В ЧЁРНОМ БЛОКЕ.
ТУТ МЕНЯЕТСЯ ТЕКСТ, РАЗМЕР ШРИФТА, ОТСТУПЫ И ФОН ПРАВИЛ.
*/

.oa-faces-rules {
  position: relative;
  z-index: 2;
  margin-top: 16px;
  padding: 13px;
  border-radius: 17px;
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.80);
}

.oa-faces-rules p {
  margin: 0 0 8px;
  font-size: 11px;
  line-height: 1.38;
}

.oa-faces-rules p:last-child {
  margin-bottom: 0;
}

.oa-faces-rules b {
  color: var(--oa-mint);
}

.oa-faces-equalizer {
  position: relative;
  z-index: 2;
  height: 64px;
  margin-top: 24px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 7px;
}

.oa-faces-equalizer i {
  display: block;
  width: 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--oa-mint), var(--oa-pink));
  box-shadow: 0 0 12px var(--oa-mint-glow);
}

.oa-faces-equalizer i:nth-child(1) { height: 25px; }
.oa-faces-equalizer i:nth-child(2) { height: 50px; }
.oa-faces-equalizer i:nth-child(3) { height: 36px; }
.oa-faces-equalizer i:nth-child(4) { height: 58px; }
.oa-faces-equalizer i:nth-child(5) { height: 30px; }

/*
ПРАВОЕ ИНФОРМАТИВНОЕ ОКНО.
ВЫСОТА РАВНА ЧЁРНОМУ БЛОКУ ЗА СЧЁТ HEIGHT: 100%.
*/

.oa-faces-panel {
  min-width: 0;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding: 18px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 92% 8%, var(--oa-blue-glow), transparent 34%),
    rgba(255,255,255,.68);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.7),
    0 12px 25px rgba(0,0,0,.08);
}

/*
СПИСКИ BOYS / GIRLS.
ЗДЕСЬ МЕНЯЕТСЯ ОБЩАЯ СЕТКА ДВУХ КОЛОНОК.
*/

.oa-faces-main {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  height: 100%;
  min-height: 0;
}

/*
КОЛОНКИ BOYS / GIRLS.
ВАЖНО: OVERFLOW: VISIBLE НУЖЕН, ЧТОБЫ ПЛАШКИ BOYS / GIRLS НЕ ОБРЕЗАЛИСЬ СВЕРХУ.
*/

.oa-face-column {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow: visible;
  border-radius: 24px;
  background: var(--oa-light);
  box-shadow: 0 12px 25px rgba(0,0,0,.08);
  padding: 30px 14px 14px;
}

.oa-face-title {
  position: absolute;
  top: -9px;
  left: 22px;
  right: 22px;
  margin: 0;
  padding: 6px 10px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--oa-dark), var(--oa-darker));
  color: var(--oa-white);
  text-align: center;
  font-size: 12px;
  text-transform: lowercase;
  letter-spacing: 1px;
}

.oa-face-boys .oa-face-title {
  box-shadow: 0 0 14px rgba(120,220,255,.22);
}

.oa-face-girls .oa-face-title {
  box-shadow: 0 0 14px rgba(255,60,172,.18);
}

/*
ВНУТРЕННИЙ СКРОЛЛ ВСЕЙ КОЛОНКИ BOYS / GIRLS.
*/

.oa-face-scroll {
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 7px;
}

.oa-face-scroll::-webkit-scrollbar {
  width: 6px;
}

.oa-face-scroll::-webkit-scrollbar-track {
  background: rgba(230,225,218,.65);
  border-radius: 20px;
}

.oa-face-scroll::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--oa-blue), var(--oa-pink));
  border-radius: 20px;
}

/*
БУКВЕННЫЕ СЕКЦИИ.
ЗДЕСЬ МЕНЯЕТСЯ ВИД ОДНОГО БЛОКА A-B-C-D И Т.Д.
*/

.oa-face-section {
  padding: 11px;
  border-radius: 18px;
  background: rgba(255,255,255,.70);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.7),
    0 8px 16px rgba(0,0,0,.04);
  margin-bottom: 12px;
}

.oa-face-section:last-child {
  margin-bottom: 0;
}

.oa-face-letter {
  padding: 7px 10px;
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(244,241,234,.92));
  border: 1px solid rgba(47,47,49,.10);
  color: var(--oa-muted);
  text-align: center;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: 9px;
}

.oa-face-list {
  text-align: center;
  color: var(--oa-text);
  font-size: 12px;
  line-height: 1.55;
  text-transform: lowercase;

  /*
  СКРОЛЛ ВНУТРИ КАЖДОЙ БУКВЕННОЙ КАТЕГОРИИ.
  ЕСЛИ В A-B-C-D ИЛИ M-N-O-P БУДЕТ БОЛЬШЕ 20 ПОЗИЦИЙ, БЛОК НЕ РАЗНЕСЁТ ВЁРСТКУ.
  */
  max-height: 120px;
  overflow-y: auto;
  padding-right: 5px;
}

.oa-face-list b {
  color: var(--oa-text);
}

.oa-face-list::-webkit-scrollbar {
  width: 5px;
}

.oa-face-list::-webkit-scrollbar-track {
  background: rgba(230,225,218,.65);
  border-radius: 20px;
}

.oa-face-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--oa-blue), var(--oa-pink));
  border-radius: 20px;
}

/*
АДАПТИВ.
НА ПЛАНШЕТАХ ЧЁРНЫЙ БЛОК УХОДИТ НАВЕРХ, СПИСКИ ОСТАЮТСЯ НИЖЕ.
*/

@media (max-width: 820px) {
  .oa-faces-body {
    display: block;
    height: auto;
    overflow: visible;
  }

  .oa-faces-machine {
    height: auto;
    margin-bottom: 18px;
  }

  .oa-faces-display {
    min-height: 360px;
    height: auto;
  }

  .oa-faces-panel {
    height: auto;
    overflow: visible;
  }

  .oa-faces-main {
    grid-template-columns: 1fr;
    height: auto;
  }

  .oa-face-column {
    height: auto;
  }

  .oa-face-scroll {
    height: auto;
    max-height: 320px;
  }
}

/*
АДАПТИВ ТЕЛЕФОНА.
ЗДЕСЬ МЕНЯЕТСЯ РАЗМЕР ШАПКИ, ОТСТУПЫ И СКРУГЛЕНИЯ.
*/

@media (max-width: 620px) {
  .oa-faces {
    max-width: calc(100vw - 12px);
    margin: 16px auto;
  }

  .oa-faces-card {
    padding: 18px;
    border-radius: 26px;
  }

  .oa-faces-top {
    display: block;
  }

  .oa-faces-top h2 {
    font-size: 31px;
  }

  .oa-faces-top em {
    font-size: 10px;
    line-height: 1.45;
  }

  .oa-faces-badge {
    width: 100%;
    min-width: 0;
    margin-top: 15px;
    text-align: left;
  }

  .oa-faces-panel {
    padding: 15px;
  }

  .oa-face-column {
    min-height: 0;
  }
}

@media (max-width: 420px) {
  .oa-faces-card {
    padding: 14px;
    border-radius: 22px;
  }

  .oa-faces-top h2 {
    font-size: 28px;
  }

  .oa-faces-title b {
    font-size: 25px;
  }

  .oa-face-letter {
    font-size: 10px;
    letter-spacing: 1px;
  }

  .oa-face-list {
    font-size: 11px;
  }
}
</style>

[/html]

0

Страница: 1

Вы здесь » в эфире » Новый форум » злоебучие фишки

Рейтинг форумов | Создать форум бесплатно