Оформи оверлей геймпада своим CSS

Редактор закрывает цвета, размер, раскладку и подписи. Когда нужно то, чего он не предлагает, — контур, загорающийся при нажатии, подписи, видимые только пока кнопка удерживается, или свой шрифт, — свой CSS на Pro позволяет переоформить любую часть оверлея. На этой странице перечислено всё, к чему можно обратиться, и те немногие вещи, которые лучше не трогать.

Куда писать CSS

Открой оверлей в редакторе, перейди на вкладку CSS и выбери Написать CSS. CSS применяется к оверлею в OBS, а не к предпросмотру в редакторе, и попадает в OBS сразу после сохранения, без обновления источника. Раскладку смотри в предпросмотре редактора, а оформление проверяй в OBS.

Поле для своего CSS в свойствах источника «Браузер» в OBS оставь пустым. Оно нацелено на ту же страницу, но CSS, сохранённый в gamepad.lol, едет вместе с оверлеем в каждую сцену и в каждый профиль OBS, где используется его ссылка.

Оверлей — это SVG

Каждый элемент управления — это фигура SVG внутри единственного элемента svg. Отсюда и набор работающих свойств: фигуры красятся через fill и stroke, а не через background и border, а текст — через fill, а не через color. Размеры вроде font-size и stroke-width измеряются в собственном рисунке скина 640 × 360 и масштабируются вместе с оверлеем, а не в пикселях экрана.

Селекторы

У каждого элемента управления есть свой id, а все элементы одного вида делят класс. В редакторе CSS набери #, . или [, чтобы получить точный список для своего скина.

• Лицевые кнопки названы по кнопкам скина: #face-a, #face-b, #face-x, #face-y на Xbox и Switch Pro; #face-cross, #face-circle, #face-square, #face-triangle на PlayStation; #face-down, #face-right, #face-left, #face-up на нейтральном скине. Класс .gpl-button.
• Крестовина: #dpad-up, #dpad-down, #dpad-left, #dpad-right. Класс .gpl-button.
• Бамперы и кнопки меню: #bumper-l, #bumper-r, #select, #start. Класс .gpl-button.
• Стики: #stick-l и #stick-r — подвижные шляпки, #stick-l-ring и #stick-r-ring — кольца вокруг них. Классы .gpl-stick и .gpl-stick-ring.
• Триггеры: #trigger-l и #trigger-r — заливки, #trigger-l-track и #trigger-r-track — подложки. Классы .gpl-trigger и .gpl-trigger-track.
• Подписи и символы: текст подписанной кнопки — это её id плюс -label, например #face-a-label или #bumper-l-label; символы PlayStation — #face-cross-glyph и так далее. Классы .gpl-label и .gpl-glyph. Они существуют, только пока включены подписи кнопок.

Id лицевых кнопок следуют буквам, а не положению. На Xbox A внизу, а на Switch Pro — справа, поэтому правило для #face-a переезжает при переключении между этими скинами. Если правило должно пережить смену скина, используй классы.

Состояние нажатия

Пока элемент управления удерживается, его фигура несёт атрибут data-pressed: кнопки — пока нажаты, триггеры — при любом нажатии, стики — пока вдавлены.

.gpl-button[data-pressed] {
  fill: #ffd60a;
}

Подпись или символ идут сразу за своей кнопкой, поэтому их можно оформить от состояния кнопки через +. Подписи — это текст, они берут fill; символы PlayStation — это контуры, они берут stroke:

.gpl-button[data-pressed] + .gpl-label {
  fill: #111111;
}

.gpl-button[data-pressed] + .gpl-glyph {
  stroke: #111111;
}

Что лучше не трогать

Оверлей анимируется, записывая атрибуты SVG в каждом кадре: transform на шляпках стиков, height и y на заливках триггеров. CSS побеждает атрибуты, поэтому эти свойства на этих элементах заморозят их на месте. Всё остальное оформляй свободно: fill, stroke, stroke-width, opacity, шрифты.

С цветами то же самое. Цвета «В покое» и «Нажато» из редактора — тоже атрибуты, поэтому, как только твой CSS задаёт fill на кнопке, напиши для неё и правило [data-pressed], иначе нажатой и отпущенной она будет выглядеть одинаково.

Ограничения

• Никаких внешних файлов. @import и url() с веб-адресом отклоняются. Картинки и шрифты нужно встраивать как data:-URI в base64.
• 20 000 символов всего, вместе со встроенными картинками. Этого с запасом хватает на оформление и небольшие иконки, но не на полноценную графику.
• Никаких обратных слешей. CSS-экранирование отклоняется, потому что им можно записать всё, что блокируют остальные правила.
• Только на Pro. Если подписка закончится, CSS останется сохранённым, но перестанет применяться, и вернётся, когда подписка возобновится.

Если сохранение отклонено, редактор показывает предупреждение и оставляет окно открытым: ничего набранного не теряется, а CSS, уже работающий в OBS, остаётся прежним.

Примеры

Цвета твоего бренда

.gpl-button,
.gpl-stick {
  fill: #1f1f24;
}

.gpl-button[data-pressed],
.gpl-stick[data-pressed] {
  fill: #9146ff;
}

.gpl-trigger {
  fill: #9146ff;
}

Контур, который загорается при нажатии

.gpl-button {
  stroke: #9146ff;
  stroke-width: 0;
}

.gpl-button[data-pressed] {
  stroke-width: 4;
}

Незаметно до нажатия

.gpl-button,
.gpl-stick,
.gpl-stick-ring,
.gpl-trigger-track {
  opacity: 0.35;
}

.gpl-button[data-pressed],
.gpl-stick[data-pressed] {
  opacity: 1;
}

Подписи только во время удержания

.gpl-label,
.gpl-glyph {
  opacity: 0;
}

.gpl-button[data-pressed] + .gpl-label,
.gpl-button[data-pressed] + .gpl-glyph {
  opacity: 1;
}

Шрифт, установленный на твоём ПК

Браузер OBS умеет брать шрифты, установленные на компьютере, где он запущен, поэтому локальный шрифт загружать никуда не нужно:

.gpl-label {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 400;
}

У всех, кто откроет оверлей без этого шрифта, подставится запасной.

Чтобы двигать или скрывать элементы, используй вкладку «Раскладка»: она сохраняет положение каждого элемента отдельно и не спорит с анимацией.