頁面內體驗自訂 CSS 參考

樣式化元件

這些 CSS 類適用於通過 UI 樣式的項目。通過使用這些類，可以使用自定義CSS覆蓋這些樣式。您還可以使用這些類將UI樣式應用於自定義HTML。這些類是穩定的，不應該在模板版本之間更改。

類別	描述
`ee-components-style-global`	體驗的全球造型
`ee-components-style-anchor`	一般連結樣式
`ee-components-style-navigation`	導航鏈接樣式（後退按鈕，共享按鈕等）
`ee-components-style-videoInfo`	視訊資訊方塊樣式 (非覆疊)
`ee-components-style-videoTitle`	視訊標題樣式 (非覆蓋)
`ee-components-style-videoDescription`	視訊描述樣式 (非覆疊)
`ee-components-style-overlay`	覆疊視訊資訊方塊樣式
`ee-components-style-overlayTitle`	覆疊視訊標題樣式
`ee-components-style-overlayDescription`	覆疊視訊描述樣式
`ee-components-style-overlayBanner`	覆蓋橫幅/指示器樣式（觀看指示器）
`ee-components-style-playButton`	播放按鈕基本樣式（請參閱播放按鈕組件以獲取更複雜的樣式）

基本元件

這些是可以使用自定義 CSS 進行樣式化的基本組件。組件類是穩定的，不應在模板版本之間進行更改。內部類相對穩定，並且很可能在模板版本之間不會更改。

播放按鈕

播放按鈕會出現在每個視訊縮圖上。

類別	描述
`ee-components-play-button`	播放按鈕組件
`ee-components-play-button-svg`	SVG 容器
`ee-components-play-button-group`	SVG 內部群組
`ee-components-play-button-button`	播放按鈕 SVG 群組
`ee-components-play-button-frame`	播放按鈕圓框
`ee-components-play-button-icon`	播放按鈕圖示
`ee-components-play-button-countdown`	倒數 SVG 群組
`ee-components-play-button-pause`	倒數暫停圖示
`ee-components-play-button-text`	倒數計時文字
`ee-components-play-button-track`	倒數曲目
`ee-components-play-button-runner`	倒數進度

箭頭

旋轉木馬範本的箭頭 (適用於單一和完整出血的簡報選項)。

類別	描述
`ee-components-arrow`	箭頭元件 (包括背景)
`ee-components-arrow-inner`	箭頭

播放下一個

在以下情況下，大縮略圖上會顯示上一個下一個指示符自動前進到下一個視頻在播放器設置中啟用。

類別	描述
`ee-components-up-next`	上下一個元件
`ee-components-up-next-thumbnail`	下一個視訊縮圖
`ee-components-up-next-text`	向上下一個文字 (倒數 + 影片名稱)
`ee-components-up-next-text-countdown`	倒數計時文字
`ee-components-up-next-close`	關閉按鈕

觀看的視訊指示器

在「視訊」設定中啟用此選項時，會顯示「觀看指示器」。

類別	描述
`ee-components-watched-video-banner`	觀看的視訊指示器

視訊元件

與個別視訊相關的元件。這些類是穩定的，不應該在模板版本之間更改。

玩家

布萊特灣玩家的貨櫃

類別	描述
`ee-components-player`	播放器容器

縮圖

視訊海報影像的基本容器 (不包括播放按鈕)。

類別	描述
`ee-components-thumbnail`	縮圖容器

影片資訊

類別	描述
`ee-components-video-info`	視訊資訊容器
`ee-components-video-info-content`	內部視訊資訊容器
`ee-components-video-info-name`	視訊名稱容器
`ee-components-video-info-name-content`	視訊名稱
`ee-components-video-info-duration`	視訊持續時間
`ee-components-video-info-description`	影片說明
`ee-components-video-info-related-link`	影片相關連結
`ee-components-video-info-download`	影片下載連結

視訊縮圖

包含以「視訊資訊」組件包覆的「縮圖」組件。

類別	描述
`ee-components-video-thumbnail`	視訊縮圖元件

視訊收藏元件

與影片集合相關的組件 (播放清單等)。這些類是穩定的，不應該在模板版本之間更改。

翻閱封面

視頻的三維封面流程呈現。

類別	描述
`ee-components-cover-flow`	覆蓋層流量元件
`ee-components-cover-flow-item`	封面流程項目 (影片縮圖)

點帶

表示列表中每個視頻的點條

類別	描述
`ee-components-dot-strip`	點帶元件
`ee-components-dot-strip-item`	點條項目
`ee-components-dot-strip-dot`	條中的個別點

海報旋轉木馬

海報圖像的旋轉木馬（帶箭頭）

類別	描述
`ee-components-poster-carousel`	海報旋轉木馬元件
`ee-components-poster-carousel-container`	列容器
`ee-components-poster-carousel-row`	海報列
`ee-components-poster-carousel-cell`	列項目 (視訊縮圖)

縮圖排

一條縮圖圖像（帶箭頭）

類別	描述
`ee-components-thumbnail-strip`	縮圖排元件
`ee-components-thumbnail-strip-container`	列容器
`ee-components-thumbnail-strip-row`	縮圖列
`ee-components-thumbnail-strip-cell`	列項目 (視訊縮圖)

視訊方格

縮圖影像的格點

類別	描述
`ee-components-video-grid`	視訊網格元件
`ee-components-video-grid-cell`	格點項目 (視訊縮圖)

視訊清單

縮圖影像的垂直清單

類別	描述
`ee-components-video-list`	視訊清單元件
`ee-components-video-list-item`	清單項目 (視訊縮圖)

共用元件

與社交分享相關的元件。共享按鈕類相對穩定，在模板版本之間很可能不會更改。共享面板的類別很可能在不久的將來發生變化，應視為不穩定。

「共享」按鈕

「分享」按鈕或圖示。

或

類別	描述
`ee-components-share-button`	共用按鈕元件
`ee-components-share-button-button`	「分享」按鈕 (非圖示)

共用面板

社交分享顯示設定為按鈕時的分享面板。

類別	描述
`ee-components-share-wrapper-panel`	面板包裝元件
`ee-components-share-wrapper-inner`	面板
`ee-components-share-wrapper-close`	關閉按鈕
`ee-components-share-wrapper-item`	共用項目
`ee-components-share-wrapper-item-name`	共用項目名稱

可編輯的元件

可以通過 UI 中的加號按鈕添加到體驗的組件。這些類是穩定的，不應該在模板版本之間更改。未提供這些組件的屏幕快照，因為它們的外觀在很大程度上取決於用戶輸入的內容。

類別	描述
ee組件廣告	廣告元件

自訂 HTML

自訂 HTML 元件

類別	描述
`ee-components-html`	自訂 HTML 元件

圖片

影像元件

類別	描述
`ee-components-image`	影像元件
`ee-components-image-image`	內部影像

文字

文字元件

類別	描述
`ee-components-text`	文字元件

Twitter

微博元件

類別	描述
`ee-components-twitter`	微博元件

全域類別

這些都是全球性的體驗課程。這些類是穩定的，不應該在模板版本之間更改。

類別	描述
`ee-components-app`	最外層的體驗元素
`ee-components-view<` /TD	體驗檢視 (頁面內、燈箱)
`ee-components-container`	加號按鈕組件容器