@outbook/webcomponents-player 1.4.0 → 1.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/_style/player.style.js +1 -1
- package/package.json +1 -1
package/_style/player.style.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/* eslint-disable */
|
|
2
2
|
import { css } from 'lit';
|
|
3
3
|
|
|
4
|
-
export default css`.skeleton-loader{--pulse-bg-start: blue;--pulse-bg-end: red}@keyframes colorPulse{from{background-color:var(--pulse-bg-start)}to{background-color:var(--pulse-bg-end)}}.skeleton-loader{background-color:var(--pulse-bg-start);animation:colorPulse 3.2s ease infinite alternate-reverse;opacity:.3}:host{display:block;color-scheme:inherit;--_accent-0: var(--outbook-player--color-accent-0, oklch(100% 0 0deg));--_accent-50: var(--outbook-player--color-accent-50, oklch(98.5% 0 0deg));--_accent-100: var(--outbook-player--color-accent-100, oklch(97% 0 0deg));--_accent-200: var(--outbook-player--color-accent-200, oklch(92.2% 0 0deg));--_accent-300: var(--outbook-player--color-accent-300, oklch(87% 0 0deg));--_accent-400: var(--outbook-player--color-accent-400, oklch(70.8% 0 0deg));--_accent-500: var(--outbook-player--color-accent-500, oklch(55.6% 0 0deg));--_accent-600: var(--outbook-player--color-accent-600, oklch(43.9% 0 0deg));--_accent-700: var(--outbook-player--color-accent-700, oklch(37.1% 0 0deg));--_accent-800: var(--outbook-player--color-accent-800, oklch(26.9% 0 0deg));--_accent-900: var(--outbook-player--color-accent-900, oklch(20.5% 0 0deg));--_accent-950: var(--outbook-player--color-accent-950, oklch(14.5% 0 0deg));--_accent-1000: var(--outbook-player--color-accent-1000, oklch(0% 0 0deg));--pulse-bg-start: light-dark( var(--_accent-100), var(--_accent-600) );--pulse-bg-end: light-dark( var(--_accent-600), var(--_accent-500) );--outbook-badge-file-extension--border-color: light-dark( oklch(37.1% 0 0deg), oklch(87% 0 0deg) );--outbook-badge-file-extension--text-color: light-dark( oklch(14.5% 0 0deg), oklch(100% 0 0deg) );--outbook-scrollable--indicator-color: light-dark( var(--_accent-900), var(--_accent-200) );--outbook-player-timeline--background: light-dark( var(--_accent-200), var(--_accent-800) );--outbook-player-timeline--background-completed: light-dark( var(--_accent-800), var(--_accent-200) );--outbook-player-timeline--chapter--mark-color: light-dark( oklch(14.5% 0 0deg), oklch(98.5% 0 0deg) );--outbook-player-timeline--chapter-played-mark-color: light-dark( oklch(98.5% 0 0deg), oklch(14.5% 0 0deg) );--_text-color: light-dark(oklch(20.5% 0 0deg), oklch(100% 0 0deg));--_background-color: light-dark(oklch(98.5% 0 0deg), oklch(20.5% 0 0deg));--_separator-color: light-dark(oklch(92.2% 0 0deg), oklch(43.9% 0 0deg));--_link-color: light-dark(var(--_accent-700), var(--_accent-200));--_link-color-hover: light-dark(var(--_accent-500), var(--_accent-50))}*{box-sizing:border-box;padding:0;margin:0}ul,ol,li{list-style:none}a,button,[role=button],[role=link]{cursor:pointer}a[disabled],button[disabled],[role=button][disabled],[role=link][disabled]{cursor:default}.player{container-name:player;container-type:inline-size;height:var(--_main-height
|
|
4
|
+
export default css`.skeleton-loader{--pulse-bg-start: blue;--pulse-bg-end: red}@keyframes colorPulse{from{background-color:var(--pulse-bg-start)}to{background-color:var(--pulse-bg-end)}}.skeleton-loader{background-color:var(--pulse-bg-start);animation:colorPulse 3.2s ease infinite alternate-reverse;opacity:.3}:host{display:block;color-scheme:inherit;width:100%;--_main-height: var(--outbook-player--height, 32rem);--_accent-0: var(--outbook-player--color-accent-0, oklch(100% 0 0deg));--_accent-50: var(--outbook-player--color-accent-50, oklch(98.5% 0 0deg));--_accent-100: var(--outbook-player--color-accent-100, oklch(97% 0 0deg));--_accent-200: var(--outbook-player--color-accent-200, oklch(92.2% 0 0deg));--_accent-300: var(--outbook-player--color-accent-300, oklch(87% 0 0deg));--_accent-400: var(--outbook-player--color-accent-400, oklch(70.8% 0 0deg));--_accent-500: var(--outbook-player--color-accent-500, oklch(55.6% 0 0deg));--_accent-600: var(--outbook-player--color-accent-600, oklch(43.9% 0 0deg));--_accent-700: var(--outbook-player--color-accent-700, oklch(37.1% 0 0deg));--_accent-800: var(--outbook-player--color-accent-800, oklch(26.9% 0 0deg));--_accent-900: var(--outbook-player--color-accent-900, oklch(20.5% 0 0deg));--_accent-950: var(--outbook-player--color-accent-950, oklch(14.5% 0 0deg));--_accent-1000: var(--outbook-player--color-accent-1000, oklch(0% 0 0deg));--pulse-bg-start: light-dark( var(--_accent-100), var(--_accent-600) );--pulse-bg-end: light-dark( var(--_accent-600), var(--_accent-500) );--outbook-badge-file-extension--border-color: light-dark( oklch(37.1% 0 0deg), oklch(87% 0 0deg) );--outbook-badge-file-extension--text-color: light-dark( oklch(14.5% 0 0deg), oklch(100% 0 0deg) );--outbook-scrollable--indicator-color: light-dark( var(--_accent-900), var(--_accent-200) );--outbook-player-timeline--background: light-dark( var(--_accent-200), var(--_accent-800) );--outbook-player-timeline--background-completed: light-dark( var(--_accent-800), var(--_accent-200) );--outbook-player-timeline--chapter--mark-color: light-dark( oklch(14.5% 0 0deg), oklch(98.5% 0 0deg) );--outbook-player-timeline--chapter-played-mark-color: light-dark( oklch(98.5% 0 0deg), oklch(14.5% 0 0deg) );--_text-color: light-dark(oklch(20.5% 0 0deg), oklch(100% 0 0deg));--_background-color: light-dark(oklch(98.5% 0 0deg), oklch(20.5% 0 0deg));--_separator-color: light-dark(oklch(92.2% 0 0deg), oklch(43.9% 0 0deg));--_link-color: light-dark(var(--_accent-700), var(--_accent-200));--_link-color-hover: light-dark(var(--_accent-500), var(--_accent-50))}*{box-sizing:border-box;padding:0;margin:0}ul,ol,li{list-style:none}a,button,[role=button],[role=link]{cursor:pointer}a[disabled],button[disabled],[role=button][disabled],[role=link][disabled]{cursor:default}.player{container-name:player;container-type:inline-size;height:var(--_main-height);background-color:var(--_background-color);position:relative}.player::after,.player::before{content:"";height:100%;width:100%;position:absolute;left:0;top:0}.player.has-gradient::after{opacity:.65;background-color:var(--_background-color)}.player::before{opacity:.45;background:linear-gradient(145deg, var(--_accent-400) 0%, var(--_accent-500) 25%, var(--_accent-600) 50%, var(--_accent-700) 75%, var(--_accent-800) 100%)}.player.has-gradient::before{opacity:1;background:linear-gradient(145deg, var(--player--main-color-0) 0%, var(--player--main-color-1) 25%, var(--player--main-color-2) 50%, var(--player--main-color-3) 75%, var(--player--main-color-4) 100%)}@container player (width < 768px){.player__inner{--player--flex-direction: column;--_secondary-block-width: unset;--_secondary-block-min-width: unset}}@container player (width >= 768px){.player__inner{--player--flex-direction: row;--_secondary-block-width: 25%;--_secondary-block-min-width: 20rem}.playlist-align-left .player__inner{--player--flex-direction: row-reverse}}.player__inner{display:flex;flex-direction:column;height:100%;color:var(--_text-color);position:relative;z-index:2}.player__body{display:flex;flex-direction:var(--player--flex-direction);flex:1 0 0;overflow:hidden}.player__playlist{overflow:hidden;padding:0 0 0 0.5rem;display:flex;flex:1 0 0}.player__track-info{width:var(--_secondary-block-width);min-width:var(--_secondary-block-min-width);padding:0.5rem}.player__controls{display:flex;justify-content:center;margin-top:-1rem}.player__controls,.player__timeline{position:relative}.player__timeline{padding:0 0.5rem}.player-controls{--_controls-color: light-dark( var(--_accent-950), var(--_accent-100) );--_controls-size: 3rem}@container player (width >= 768px){.player-controls{--_controls-size: 3.5rem}}@container player (width >= 1024px){.player-controls{--_controls-size: 4rem}}.player-controls,.player-controls__items{width:auto}.player-controls__items{display:flex}.player-controls__button{background:rgba(0,0,0,0);border:0;color:var(--_controls-color)}.player-controls__button:focus-visible{outline:var(--outbook-outline--color, light-dark(oklch(48.8% 0.243 264.376deg), oklch(88.2% 0.059 254.128deg))) solid 2px;outline-offset:-4px}.player-controls__button.is-disabled{opacity:.4}.player-controls__icon{width:var(--_controls-size);height:var(--_controls-size)}.player-playlist{--_playlist-font-weight: normal;--_playlist-font-size: 0.75rem;--_playlist-font-size-small: 0.625rem;--_playlist-item-background-color: transparent;--_playlist-item-image-size: 3rem}.player-playlist .is-playing{--_playlist-font-weight: 600;--_playlist-item-background-color: var(--_accent-200)}.ambient-dark .player-playlist .is-playing{--_playlist-item-background-color: var(--_accent-700)}@container player (width >= 768px){.player-playlist{--_playlist-font-size: 0.875rem;--_playlist-font-size-small: 0.75rem}}@container player (width >= 1024px){.player-playlist{--_playlist-font-size: 1rem;--_playlist-font-size-small: 0.875rem;--_playlist-item-image-size: 4rem}}.player-playlist .track-text__item{font-weight:var(--_playlist-font-weight);font-size:var(--_playlist-font-size);line-height:150%}.player-playlist .track-text__item.size-small{font-size:var(--_playlist-font-size-small)}.player-playlist__items{padding:0;position:relative}.player-playlist__item{position:relative;border-bottom:1px solid var(--_separator-color)}.player-playlist__item.is-playing:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;opacity:.45}@keyframes colorPulse{from{background-color:var(--pulse-bg-start)}to{background-color:var(--pulse-bg-end)}}.player-playlist__item.is-playing:before{background-color:var(--pulse-bg-start);animation:colorPulse 3.2s ease infinite alternate-reverse;opacity:.3}.player-playlist__item:last-child{border-bottom:0}.player-playlist__item-button{display:flex;padding:0.5rem;position:relative;align-items:center}.player-playlist__item-button:focus-visible{outline:var(--outbook-outline--color, light-dark(oklch(48.8% 0.243 264.376deg), oklch(88.2% 0.059 254.128deg))) solid 2px;outline-offset:-4px}.player-playlist__item-group,.player-playlist__item-block{display:flex;align-items:center;margin-left:1rem;height:var(--_playlist-item-image-size)}.player-playlist__item-group:first-child,.player-playlist__item-block:first-child{margin-left:0}.player-playlist__item-group.is-last-right,.player-playlist__item-block.is-last-right{margin-left:auto;padding-left:0.5rem}.player-playlist__item-image{width:var(--_playlist-item-image-size);height:var(--_playlist-item-image-size);flex-shrink:0}.player-playlist__item-playing-icon{width:1rem;height:1rem;display:flex;align-items:center}.player-playlist__item-playing-icon-inner{width:100%;aspect-ratio:1/1}.track-info{--track-info--flex-direction: row;--track-info--image-width: 4rem;--track-info--image-separation-horizontal: 1rem;--track-info--image-separation-vertical: 0;--track-info--height: 4rem}@container player (width >= 768px){.track-info{--track-info--flex-direction: column;--track-info--image-width: 100%;--track-info--image-separation-horizontal: 0;--track-info--image-separation-vertical: 1rem;--track-info--height: auto}}.track-info__inner{display:flex;flex-direction:var(--track-info--flex-direction);height:var(--track-info--height)}.track-info__inner .track-text__item{font-size:1rem;line-height:150%}.track-info__inner .track-text__item.size-small{font-size:0.75rem}.track-info__image{width:var(--track-info--image-width);flex-shrink:0;display:flex;align-items:center;margin-right:var(--track-info--image-separation-horizontal);margin-bottom:var(--track-info--image-separation-vertical)}.track-info__image>*{width:100%}.track-info__data{display:flex;align-items:center}`;
|