Dai stile al tuo overlay del controller con il CSS personalizzato

L'editor copre colori, dimensioni, layout ed etichette. Quando vuoi qualcosa che non offre, come un contorno che si accende alla pressione, etichette che compaiono solo mentre tieni premuto un tasto o un tuo font, il CSS personalizzato di Pro ti lascia ridisegnare qualsiasi parte dell'overlay. Questa pagina elenca tutto ciò che puoi puntare e le poche cose da lasciare stare.

Dove si scrive il CSS

Apri il tuo overlay nell'editor, vai alla scheda CSS e scegli Scrivi CSS. Il CSS si applica all'overlay in OBS, non all'anteprima nell'editor, e arriva a OBS appena salvi, senza aggiornare la fonte. Usa l'anteprima dell'editor per il layout e controlla lo stile in OBS.

Lascia vuoto il campo CSS personalizzato nelle proprietà della fonte Browser di OBS. Punta alla stessa pagina, ma il CSS salvato su gamepad.lol viaggia con l'overlay in ogni scena e in ogni profilo di OBS che usa il suo link.

L'overlay è un SVG

Ogni controllo è una forma SVG dentro un unico elemento svg. Questo decide quali proprietà funzionano: le forme si colorano con fill e stroke, non con background e border, e il testo si colora con fill, non con color. Le dimensioni come font-size e stroke-width si misurano nel disegno della skin, che è 640 × 360, e scalano con l'overlay, non in pixel dello schermo.

Selettori

Ogni controllo ha un id proprio, e tutti i controlli dello stesso tipo condividono una classe. Nell'editor CSS digita #, . oppure [ per ottenere la lista esatta della tua skin.

• Tasti frontali, chiamati come i tasti della skin: #face-a, #face-b, #face-x, #face-y su Xbox e Switch Pro; #face-cross, #face-circle, #face-square, #face-triangle su PlayStation; #face-down, #face-right, #face-left, #face-up sulla skin neutra. Classe .gpl-button.
• Croce direzionale: #dpad-up, #dpad-down, #dpad-left, #dpad-right. Classe .gpl-button.
• Dorsali e tasti menu: #bumper-l, #bumper-r, #select, #start. Classe .gpl-button.
• Levette: #stick-l e #stick-r sono le testine che si muovono, #stick-l-ring e #stick-r-ring gli anelli attorno. Classi .gpl-stick e .gpl-stick-ring.
• Grilletti: #trigger-l e #trigger-r sono i riempimenti, #trigger-l-track e #trigger-r-track gli sfondi. Classi .gpl-trigger e .gpl-trigger-track.
• Etichette e simboli: il testo di un tasto etichettato è il suo id più -label, per esempio #face-a-label o #bumper-l-label; i simboli PlayStation sono #face-cross-glyph e così via. Classi .gpl-label e .gpl-glyph. Esistono solo finché le etichette dei tasti sono attive.

Gli id dei tasti frontali seguono le lettere, non la posizione. Su Xbox la A sta in basso, su Switch Pro sta a destra, quindi una regola per #face-a si sposta quando passi tra queste due skin. Usa le classi quando vuoi che una regola sopravviva a un cambio di skin.

Lo stato premuto

Finché un controllo è tenuto, la sua forma porta l'attributo data-pressed: i tasti mentre sono premuti, i grilletti appena vengono tirati, le levette mentre sono cliccate.

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

Un'etichetta o un simbolo stanno subito dopo il loro tasto, quindi puoi dar loro stile a partire dallo stato del tasto con +. Le etichette sono testo e prendono fill; i simboli PlayStation sono tracciati e prendono stroke:

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

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

Cosa lasciare stare

L'overlay si anima scrivendo attributi SVG a ogni fotogramma: transform sulle testine delle levette, height e y sui riempimenti dei grilletti. Il CSS vince sugli attributi, quindi impostare quelle proprietà su quegli elementi li congela sul posto. Tutto il resto puoi disegnarlo liberamente: fill, stroke, stroke-width, opacity, i font.

Con i colori vale lo stesso. I colori A riposo e Premuto dell'editor sono anch'essi attributi, quindi appena il tuo CSS imposta fill su un tasto, scrivi anche una regola [data-pressed] per quel tasto, altrimenti avrà lo stesso aspetto premuto e rilasciato.

Limiti

• Niente file remoti. @import e url() che puntano a un indirizzo web vengono rifiutati. Immagini e font vanno incorporati come URI data: in base64.
• 20.000 caratteri in tutto, immagini incorporate comprese. Bastano e avanzano per lo stile e per piccole icone, non per illustrazioni intere.
• Niente backslash. Gli escape CSS vengono rifiutati, perché possono comporre qualsiasi cosa blocchino le altre regole.
• Solo con Pro. Se l'abbonamento finisce, il tuo CSS resta salvato ma smette di essere applicato, e torna se ti riabboni.

Se un salvataggio viene rifiutato, l'editor mostra un avviso e tiene aperta la finestra, quindi non perdi niente di quello che hai scritto e il CSS già attivo in OBS resta com'era.

Esempi

I colori del tuo brand

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

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

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

Un contorno che si accende alla pressione

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

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

Discreto finché non lo premi

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

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

Etichette solo mentre tieni premuto

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

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

Un font installato sul tuo PC

Il browser di OBS può usare i font installati sul computer che lo esegue, quindi un font locale non richiede alcun caricamento:

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

Chi apre l'overlay senza quel font ottiene il ripiego.

Per spostare o nascondere elementi usa invece la scheda Layout: salva le posizioni per singolo elemento e non litiga con l'animazione.