#CSS Variables

To facilitate unified management of the overall style of built-in Widgets in the player, the player preset a set of CSS variables.

Currently, all built-in Widgets have integrated these variables. Developers can customize the text color, background color, and other style properties of Widgets by setting the corresponding CSS variables to achieve a unified theme or personalized configuration.

#Variable Definitions

#Variable List

💡 Modifying CSS variables will automatically affect all loaded supported components without the need to modify styles individually.

#Usage Example

Passing from the player has the highest priority:

<IPCPlayerIntegration
  style={{ height: '300px' }}
  instance={instance}
  devId={instance.devId}
  playerFit="cover"
  CSSVariable={{
    '--iconColor': '#ff6700',
    '--iconActiveColor': '#fff',
  }}
/>

#Light/Dark Theme Distinction

Set different theme color variables based on device theme

:root {
  --iconColor: '#000';
}
:root[theme='dark'] {
  --iconColor: '#fff';
}

#--ipc-player-size-scale

--ipc-player-size-scale is a scale factor used by the player to implement screen adaptation.

#Design Background

All Widgets inside the player do not use the rpx unit because:

• rpx is a proportional scaling unit based on the screen width;
• The player supports landscape mode, and using rpx in landscape causes elements to appear too large visually;
• Therefore, the player uses px units consistently for layout.

#Why is a scale factor still needed?

In some scenarios with larger device screens (such as iPads), using fixed px values alone may make elements appear too small.
To address this, the player introduces the --ipc-player-size-scale scale factor to dynamically adjust the size and position of Widgets.

#Usage Example

.icon {
  font-size: calc(var(--iconFontSize) * var(--ipc-player-size-scale, 1));
}

Assuming:

--iconFontSize value is 20px

--ipc-player-size-scale defaults to 1

The calculated result is:

20px × 1 = 20px

#Icon Adaptation

If you want to adjust the icon font size to 30px when the screen width exceeds 768px and is in portrait mode, you can dynamically modify the scale factor via media query:

page {
  --ipc-player-size-scale: 1;
}

@media (min-width: 768px) and (orientation: portrait) {
  page {
    --ipc-player-size-scale: 1.5;
  }
}