polaris-glints/build/esnext/components/VideoThumbnail/VideoThumbnail.css

Glints forked polaris react

.Polaris-VideoThumbnail__Thumbnail_15hj1 { position: relative; padding-bottom: 56.25%; background-size: cover; background-position: center center; background-repeat: no-repeat; width: 100%; height: 100%; }

.Polaris-VideoThumbnail__ThumbnailContainer_gq5vb { position: relative; height: 100%; }

.Polaris-VideoThumbnail__PlayButton_1336l { --pc-play-button-focused-state-overlay: rgba(223, 227, 232, 0.3); position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0; border: none; background: transparent; transition: opacity var(--p-duration-200) var(--p-ease-in); cursor: pointer; }

.Polaris-VideoThumbnail__PlayButton_1336l:focus { outline: none; box-shadow: inset 0.125rem 0 0 var(--p-focused); background-image: linear-gradient(var(--pc-play-button-focused-state-overlay), var(--pc-play-button-focused-state-overlay)); }

.Polaris-VideoThumbnail__PlayButton_1336l:focus .Polaris-VideoThumbnail__Timestamp_1tkqb { background-color: rgba(0, 0, 0, 0.8); }

.Polaris-VideoThumbnail__PlayButton_1336l:hover .Polaris-VideoThumbnail__Timestamp_1tkqb { background-color: rgba(0, 0, 0, 0.8); }

.Polaris-VideoThumbnail__PlayIcon_1moni { fill: var(--p-icon-on-interactive); }

.Polaris-VideoThumbnail__Timestamp_1tkqb { position: absolute; bottom: 0; padding: var(--p-space-1) var(--p-space-2) var(--p-space-1) var(--p-space-1); margin-bottom: var(--p-space-4); margin-left: var(--p-space-4); border-radius: var(--p-border-radius-1); color: var(--p-text-on-interactive); background-color: rgba(0, 0, 0, 0.6); text-align: center; transition: background-color var(--p-duration-200) var(--p-ease-in); }

.Polaris-VideoThumbnail__Progress_ixe53 { position: absolute; bottom: 0; width: 100%; background-color: var(--p-surface); height: 0.375rem; overflow: hidden; }

.Polaris-VideoThumbnail__Indicator_dw7mr { height: inherit; width: 100%; transform-origin: left; transform: scaleX(0); background-color: var(--p-border-highlight); transition: transform var(--p-duration-500) var(--p-ease); }

.Polaris-VideoThumbnail__ProgressBar_17609, .Polaris-VideoThumbnail__Label_2vd36 { position: absolute !important; top: 0; width: 0.0625rem !important; height: 0.0625rem !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; border: 0 !important; white-space: nowrap !important; }