- Additional classes have been added to top level of overlay reflecting each component show/hide state
These additional classes have been added to allow some degree of automation of the overlay using only CSS rules. For example a simple CSS rule could hide component A when component B is displayed.
The following classes have been added:
- logo
- race-info
- start-lights
- state-header
- driver-details
- standings
- battle
- track-map
- grid
- results
- championship
- race-control
- pit-lane
- setup-cover
- radio-channel
- dashboard
- time-delta-history
- pit-stop-history
- qualifying
- interview
- statistics
- events
- classes
- video-streams
- lap-time-history
- sectors
- inputs
- twitch-chat
- fuel
Each of these classes are set at the top level of the overlay when the corresponding component is displayed.
As an example to hide the dashboard component when the battle component is displayed add the following rule to your style overrides:
Code:
.overlay.battle>.dashboard {
transform: translateX(200px);
opacity: 0;
}
When battle style is set on the overlay (battle is visible) then battle is shifted right and made transparent to hide it