вашеимя
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur sit amet diam eu pharetra. Aliquam sit amet odio at urna tempus vehicula in sed quam. Cras ultricies dolor sit amet ex aliquam mollis. Donec iaculis est eget vestibulum aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque efficitur sit amet diam eu pharetra. Aliquam sit amet odio at urna tempus vehicula in sed quam. Cras ultricies dolor sit amet ex aliquam mollis. Donec iaculis est eget vestibulum aliquet.
love
улица бесконечное лето долгая бесконечная жизнь какие-то еще слова
flood
вася иванов 2 3
write
1 2 3

yanichegoneznayu

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

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


Вы здесь » yanichegoneznayu » готовые штуки » внешности


внешности

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

1

ы

0

2

[hideprofile][html]

<div class="oa-faces">

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

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

    <!--
    ПРАВЫЙ БЛОК В ШАПКЕ.
    ЗДЕСЬ МЕНЯЕМ: ЗНАЧОК И КОРОТКУЮ ПОДПИСЬ.
    -->
    <div class="oa-faces-badge">
      <b>✦</b>
      <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 / ЗАНЯТЫЕ ВНЕШНОСТИ — СИНИЙ СТИЛЬ ЛИЧНОЙ СТРАНИЦЫ
   01. ОСНОВНЫЕ ЦВЕТА. МЕНЯЙТЕ ЗНАЧЕНИЯ ЗДЕСЬ.
   Все стили ограничены .oa-faces и не затрагивают другие темы Rusff.
   =============================================================== */
.oa-faces {
  --outer-dark: #10162c;       /* ВНЕШНЯЯ ТЁМНАЯ РАМКА */
  --outer-blue: #1e2b55;       /* СИНИЙ ПЕРЕЛИВ РАМКИ */
  --cover-left: #233e79;       /* ОБЛОЖКА: НАЧАЛО ГРАДИЕНТА */
  --cover-mid: #466eb7;        /* ОБЛОЖКА: ЦЕНТР */
  --cover-right: #1d2b57;      /* ОБЛОЖКА: КОНЕЦ */
  --panel-bg: #f8f9ff;         /* СВЕТЛАЯ ПАНЕЛЬ СПРАВА */
  --shelf-bg: #eff2fa;         /* ФОН КОЛОНОК BOYS/GIRLS */
  --section-bg: #ffffff;       /* ФОН БУКВЕННЫХ СЕКЦИЙ */
  --ink: #202941;              /* ОСНОВНОЙ ТЕКСТ */
  --muted: #7787a6;            /* ВТОРОСТЕПЕННЫЙ ТЕКСТ */
  --accent: #466abb;           /* СИНИЕ АКЦЕНТЫ */
  --light-accent: #9beaf4;     /* ГОЛУБОЙ АКЦЕНТ / LIVE */
  --scroll: #9caed2;           /* ПОЛОСЫ ПРОКРУТКИ */
  --faces-height: 515px;      /* ВЫСОТА ЛЕВОЙ И ПРАВОЙ ПАНЕЛЕЙ НА ПК */
  box-sizing: border-box;
  position: relative;
  width: 100%; max-width: 900px;
  margin: 15px auto; padding: 16px;
  border: 1px solid rgba(155,203,250,.26);
  border-radius: 23px;
  background: radial-gradient(ellipse at 12% 0%,rgba(83,115,198,.25),transparent 44%),
              linear-gradient(140deg,var(--outer-dark),var(--outer-blue));
  box-shadow: 0 16px 38px rgba(12,23,54,.20);
  color: #fff;
  font: 12px/1.45 'Trebuchet MS',Arial,sans-serif;
  overflow: hidden;
}
.oa-faces, .oa-faces *, .oa-faces *::before, .oa-faces *::after { box-sizing: border-box; }
.oa-faces h2, .oa-faces h3, .oa-faces h4, .oa-faces p { margin: 0; }
.oa-faces::before {
  content: ''; position: absolute; z-index: 0; pointer-events: none;
  width: 320px; height: 440px; top: -180px; right: -172px;
  border: 1px solid rgba(163,195,244,.15); border-radius: 46% 54% 60% 40%;
  transform: rotate(-22deg);
  box-shadow: 0 0 0 42px rgba(163,195,244,.025),
              0 0 0 92px rgba(163,195,244,.02);
}

/* ===============================================================
   02. СИНЯЯ ОБЛОЖКА — ЗАГОЛОВОК И ПОДПИСЬ «CTRL+F»
   =============================================================== */
.oa-faces .oa-faces-card { position: relative; }
.oa-faces .oa-faces-top {
  position: relative; z-index: 1;
  min-height: 134px;
  padding: 18px 21px 40px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 15px;
  overflow: hidden; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.13);
  background: radial-gradient(ellipse at 80% 0%,rgba(159,218,255,.27),transparent 43%),
              linear-gradient(117deg,var(--cover-left),var(--cover-mid) 53%,var(--cover-right));
}
.oa-faces .oa-faces-top::before {
  content: ''; position: absolute; pointer-events: none; z-index: 0;
  width: 370px; height: 175px; left: 31%; top: -65px;
  border-radius: 35% 65% 60% 40%/45% 40% 60% 55%;
  background: rgba(112,145,221,.34); transform: rotate(-12deg);
}
.oa-faces .oa-faces-top::after {
  content: 'ON AIR'; position: absolute; pointer-events: none;
  right: 16px; bottom: -33px; color: rgba(255,255,255,.115);
  font-size: 95px; font-weight: 900; line-height: 1;
  letter-spacing: -7px; white-space: nowrap;
}
.oa-faces .oa-faces-top > * { position: relative; z-index: 1; }
.oa-faces .oa-faces-top span {
  display: block; color: #cae7ff; font-size: 9px;
  text-transform: uppercase; letter-spacing: 1.8px;
}
.oa-faces .oa-faces-top h2 {
  margin: 5px 0 6px; color: #fff; font-size: 30px;
  font-weight: 900; line-height: 1.05;
  text-transform: uppercase; letter-spacing: -.9px;
}
.oa-faces .oa-faces-top em {
  display: block; color: #e4f0ff; font-size: 10px;
  font-style: normal; letter-spacing: .85px; text-transform: uppercase;
}
.oa-faces .oa-faces-badge {
  min-width: 121px; padding: 9px 12px;
  text-align: right; border-radius: 12px;
  border: 1px solid rgba(234,249,255,.28);
  background: rgba(17,40,88,.28);
}
.oa-faces .oa-faces-badge b {
  display: block; font-size: 24px; line-height: 1;
  color: var(--light-accent);
}
.oa-faces .oa-faces-badge span {
  margin-top: 4px; color: #e5f4ff; font-size: 9px; letter-spacing: .45px;
}

/* ===============================================================
   03. СЕТКА: ТЁМНАЯ ЭФИРНАЯ ПАНЕЛЬ СЛЕВА, СПИСКИ СПРАВА
   Для ширины левой колонки измените 218px.
   =============================================================== */
.oa-faces .oa-faces-body {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 218px minmax(0,1fr);
  gap: 12px; align-items: stretch;
  height: var(--faces-height); min-height: 0;
  margin: -21px 10px 0;
}
.oa-faces .oa-faces-machine,
.oa-faces .oa-faces-panel,
.oa-faces .oa-faces-main,
.oa-faces .oa-face-column { min-width: 0; min-height: 0; }
.oa-faces .oa-faces-machine {
  padding: 7px; border-radius: 17px;
  background: linear-gradient(155deg,#17254b,#294e88);
  border: 1px solid rgba(178,209,255,.24);
  box-shadow: 0 9px 19px rgba(9,20,54,.22);
}
.oa-faces .oa-faces-display {
  position: relative; height: 100%; padding: 15px 13px;
  overflow: hidden; border-radius: 12px;
  border: 1px solid rgba(214,235,255,.12);
  background: radial-gradient(circle at 100% 0%,rgba(156,214,255,.18),transparent 40%),
              radial-gradient(circle at 0% 90%,rgba(169,151,221,.13),transparent 42%),
              linear-gradient(145deg,#1b2d54,#1d3b6b);
}
.oa-faces .oa-faces-display::after {
  content: ''; position: absolute; bottom: -92px; right: -110px;
  width: 206px; height: 206px; border-radius: 50%;
  border: 1px solid rgba(220,240,255,.18);
  box-shadow: 0 0 0 25px rgba(220,240,255,.035); pointer-events: none;
}
.oa-faces .oa-faces-live {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 10px; border: 1px solid rgba(155,234,244,.26);
  border-radius: 20px; color: #dff8ff;
  background: rgba(13,32,69,.45); font-size: 9px; letter-spacing: 1px;
}
.oa-faces .oa-faces-live i {
  width: 7px; height: 7px; background: var(--light-accent);
  border-radius: 50%; box-shadow: 0 0 8px rgba(137,228,247,.8);
}
.oa-faces .oa-faces-title { position: relative; z-index: 1; margin-top: 28px; }
.oa-faces .oa-faces-title span {
  display: block; color: #adcaf0; font-size: 9px;
  letter-spacing: 2px; text-transform: uppercase;
}
.oa-faces .oa-faces-title b {
  display: block; margin: 5px 0 10px;
  color: #fff; font-size: 27px; font-weight: 900; line-height: 1.05;
}
.oa-faces .oa-faces-rules {
  position: relative; z-index: 1;
  padding: 12px 11px; margin-top: 15px;
  border-radius: 12px; background: rgba(255,255,255,.075);
  border: 1px solid rgba(211,233,255,.13);
}
.oa-faces .oa-faces-rules p {
  margin: 0 0 9px; font-size: 10.5px; line-height: 1.51;
  color: #d9e7fc;
}
.oa-faces .oa-faces-rules p:last-child { margin-bottom: 0; }
.oa-faces .oa-faces-rules b { color: var(--light-accent); }
.oa-faces .oa-faces-equalizer {
  position: relative; z-index: 1;
  display: flex; align-items: flex-end; justify-content: center;
  gap: 8px; height: 61px; margin-top: 21px;
}
.oa-faces .oa-faces-equalizer i {
  display: block; width: 9px; border-radius: 9px;
  background: linear-gradient(180deg,var(--light-accent),#6d8dd1);
  box-shadow: 0 0 10px rgba(139,222,245,.15);
}
.oa-faces .oa-faces-equalizer i:nth-child(1) { height: 23px; }
.oa-faces .oa-faces-equalizer i:nth-child(2) { height: 44px; }
.oa-faces .oa-faces-equalizer i:nth-child(3) { height: 33px; }
.oa-faces .oa-faces-equalizer i:nth-child(4) { height: 55px; }
.oa-faces .oa-faces-equalizer i:nth-child(5) { height: 27px; }

/* ===============================================================
   04. СВЕТЛАЯ ПАНЕЛЬ И ДВЕ КОЛОНКИ BOYS / GIRLS
   =============================================================== */
.oa-faces .oa-faces-panel {
  height: 100%; padding: 13px;
  border: 1px solid rgba(255,255,255,.95); border-radius: 17px;
  color: var(--ink); background: var(--panel-bg);
  box-shadow: 0 9px 22px rgba(7,20,53,.22);
  overflow: hidden;
}
.oa-faces .oa-faces-main {
  display: grid; grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 11px; height: 100%;
}
.oa-faces .oa-face-column {
  display: flex; flex-direction: column;
  padding: 12px 11px; border-radius: 13px;
  background: var(--shelf-bg); border: 1px solid #dce5f5;
  overflow: hidden;
}
.oa-faces .oa-face-title {
  flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
  margin-bottom: 9px; padding: 0 0 8px;
  border-bottom: 1px solid #d8e1f2;
  color: #283e6d; font-size: 15px; line-height: 1;
  font-weight: 900; text-transform: uppercase; letter-spacing: 1px;
}
/* CSS-значение вместо символа ✳, чтобы Rusff не выводил ✳ */
.oa-faces .oa-face-title::before {
  content: '\2733'; color: var(--accent); font-size: 15px; font-weight: normal;
}
.oa-faces .oa-face-title::after {
  content: 'COLLECTION'; margin-left: auto; color: #8195ba;
  font-size: 8px; font-weight: 400; letter-spacing: 1px;
}

/* ===============================================================
   05. ДВА УРОВНЯ СКРОЛЛА:
   .oa-face-scroll — прокрутка всей колонки;
   .oa-face-list — прокрутка длинного списка внутри буквы.
   =============================================================== */
.oa-faces .oa-face-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  padding: 1px 5px 1px 0;
  scrollbar-color: var(--scroll) transparent; scrollbar-width: thin;
}
.oa-faces .oa-face-scroll::-webkit-scrollbar { width: 5px; }
.oa-faces .oa-face-scroll::-webkit-scrollbar-thumb {
  background: var(--scroll); border-radius: 9px;
}
.oa-faces .oa-face-section {
  margin-bottom: 9px; padding: 10px 9px;
  border: 1px solid #e7ecf6; border-radius: 10px;
  background: var(--section-bg);
  box-shadow: 0 2px 5px rgba(29,52,100,.035);
}
.oa-faces .oa-face-section:last-child { margin-bottom: 0; }
.oa-faces .oa-face-letter {
  margin-bottom: 8px; padding: 6px 7px;
  border-radius: 8px; background: #e9eefb;
  color: #4163a7; text-align: center;
  font-size: 9px; font-weight: 900; letter-spacing: 1.1px;
}
.oa-faces .oa-face-list {
  max-height: 116px; padding-right: 4px;
  overflow-y: auto; overflow-x: hidden;
  color: #51617d; text-align: center;
  font-size: 11px; line-height: 1.66;
  overflow-wrap: anywhere;
  scrollbar-color: #becbe3 transparent; scrollbar-width: thin;
}
.oa-faces .oa-face-list b { color: #294782; font-weight: 900; }
.oa-faces .oa-face-list::-webkit-scrollbar { width: 4px; }
.oa-faces .oa-face-list::-webkit-scrollbar-thumb {
  border-radius: 10px; background: #becbe3;
}

/* ===============================================================
   06. АДАПТАЦИЯ ПОД УЗКОЕ ОКНО / ТЕЛЕФОН
   =============================================================== */
@media (max-width: 820px) {
  .oa-faces .oa-faces-body {
    grid-template-columns: 1fr; height: auto; margin: -21px 8px 0;
  }
  .oa-faces .oa-faces-machine { min-height: 0; }
  .oa-faces .oa-faces-display { min-height: 245px; }
  .oa-faces .oa-faces-title { margin-top: 16px; }
  .oa-faces .oa-faces-rules { margin-top: 10px; }
  .oa-faces .oa-faces-equalizer { position: absolute; right: 13px; bottom: 12px; opacity: .5; }
  .oa-faces .oa-faces-panel { height: auto; }
  .oa-faces .oa-faces-main { height: auto; }
  .oa-faces .oa-face-scroll { height: 330px; flex: none; }
}
@media (max-width: 530px) {
  .oa-faces { padding: 10px; margin: 10px auto; border-radius: 16px; }
  .oa-faces .oa-faces-top { min-height: 137px; padding: 13px 13px 40px; gap: 7px; }
  .oa-faces .oa-faces-top h2 { font-size: 23px; }
  .oa-faces .oa-faces-top em { font-size: 9px; }
  .oa-faces .oa-faces-top::after { font-size: 63px; bottom: -18px; }
  .oa-faces .oa-faces-badge { min-width: 76px; padding: 7px; }
  .oa-faces .oa-faces-badge span { font-size: 8px; letter-spacing: 0; }
  .oa-faces .oa-faces-body { margin: -20px 4px 0; gap: 9px; }
  .oa-faces .oa-faces-panel { padding: 9px; }
  .oa-faces .oa-faces-main { grid-template-columns: 1fr; gap: 10px; }
  .oa-faces .oa-face-scroll { height: 275px; }
  .oa-faces .oa-faces-display { min-height: 255px; }
  .oa-faces .oa-faces-equalizer { display: none; }
}

</style>

[/html]
[/hideprofile]

0


Вы здесь » yanichegoneznayu » готовые штуки » внешности


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