ы
внешности
Сообщений 1 страница 2 из 2
Поделиться2Вчера 03:36:52
[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]
