a11y-player/dist/assets/index.css

An accessible DAISY format audiobook player for React applications

.Sections__Container{box-sizing:border-box;position:fixed;top:0;left:0;width:100%;height:100%;padding:var(--a11y-player-spacing-lg);z-index:1000;display:flex;flex-direction:column;align-items:center;overflow-y:auto}.Sections__Container--visible{transform:translate(0);transition:transform .3s cubic-bezier(.16,1,.3,1)}.Sections__Container--hidden{transform:translate(-100%);transition:transform .3s cubic-bezier(.7,0,.84,0)}.Sections__BackArrow{position:absolute;top:var(--a11y-player-spacing-lg);right:var(--a11y-player-spacing-lg);width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center;cursor:pointer}@media (max-width: 30rem){.Sections__Container{padding:var(--a11y-player-spacing-md)}.Sections__BackArrow{top:var(--a11y-player-spacing-md);right:var(--a11y-player-spacing-md);width:2rem;height:2rem}}.Sections__List{text-align:left;margin:var(--a11y-player-spacing-sm) 0;width:100%;max-width:37.5rem;padding-left:var(--a11y-player-spacing-md)}.Sections__List--level0{padding-left:0}.Sections__List li{margin-bottom:var(--a11y-player-spacing-xs)}.Sections__Button{width:100%;text-align:left;padding:var(--a11y-player-spacing-sm) var(--a11y-player-spacing-md);margin-bottom:var(--a11y-player-spacing-xs);border-radius:var(--a11y-player-radius-sm);font-size:.95rem;font-weight:400}.Sections__Button--selected{font-weight:500}.ShareButton{padding:1rem;border-radius:1rem;border:none;cursor:pointer}.ShareButton>span>svg{font-size:1.5rem}.AudioPlayer{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;font-size:1rem;width:100%}.AudioPlayer__Title{width:100%;text-align:center;margin:var(--a11y-player-spacing-sm) 0 var(--a11y-player-spacing-md);padding:0 var(--a11y-player-spacing-md);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.AudioPlayer__Audio{display:none}.AudioPlayer__Controls{width:100%;display:flex;flex-direction:column;justify-content:center;gap:var(--a11y-player-spacing-sm);margin:var(--a11y-player-spacing-sm) 0}.AudioPlayer__ControlColumns{display:flex;justify-content:space-evenly;gap:var(--a11y-player-spacing-md);width:100%}@media (max-width: 30rem){.AudioPlayer__ControlColumns{flex-wrap:wrap;gap:var(--a11y-player-spacing-sm)}.AudioPlayer__ControlsColumn{margin-bottom:var(--a11y-player-spacing-sm)}.AudioPlayer__Control{font-size:1.5rem;width:2rem;height:2rem}.AudioPlayer__Control--play-pause{font-size:2.5rem;width:3rem;height:3rem}.AudioPlayer__SpeedText{min-width:4rem}}@media (max-width: 20rem){.AudioPlayer__ControlColumns{flex-direction:column;align-items:stretch}.AudioPlayer__ControlsColumn{flex-direction:row;justify-content:center;width:100%}}.AudioPlayer__ControlsColumn{display:flex;flex-direction:column;align-items:center;gap:var(--a11y-player-spacing-md)}.AudioPlayer__ControlsColumn--play{justify-content:center}.AudioPlayer__ControlsColumn--reverse{flex-direction:column-reverse}.AudioPlayer__ProgressContainer{width:100%;display:flex;flex-direction:column;align-items:center;gap:var(--a11y-player-spacing-xs);margin:var(--a11y-player-spacing-md) 0 var(--a11y-player-spacing-sm)}.AudioPlayer__ControlsRow{display:flex;flex-direction:row;justify-content:center;gap:0}.AudioPlayer__ControlsRow--speed{margin-top:var(--a11y-player-spacing-sm)}.AudioPlayer__ControlsRow--speed .AudioPlayer__Control{margin:0 var(--a11y-player-spacing-sm);font-size:1rem}.AudioPlayer__SpeedText{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:5rem}.AudioPlayer__SpeedText span{font-size:.75rem;opacity:.8}.AudioPlayer__SpeedText strong{font-size:.9rem}.AudioPlayer__Control{padding:var(--a11y-player-spacing-sm);background-color:transparent;border:none;border-radius:var(--a11y-player-radius-md);cursor:pointer;font-size:2rem;width:2.5rem;height:2.5rem;display:flex;align-items:center;justify-content:center}.AudioPlayer__Control--play-pause{font-size:3rem;width:3.75rem;height:3.75rem}.AudioPlayer__Control--mirrored{transform:scaleX(-1)}.AudioPlayer__Progress{width:100%;height:.5rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:var(--a11y-player-radius-full);overflow:hidden}.AudioPlayer__Time{font-size:.8rem;align-self:flex-end;margin-right:var(--a11y-player-spacing-sm)}:root{--a11y-player-primary: #4a6da7;--a11y-player-primary-light: #6989c3;--a11y-player-primary-dark: #3a5d97;--a11y-player-bg-main: #ffffff;--a11y-player-bg-secondary: #f5f7fa;--a11y-player-bg-tertiary: #edf0f5;--a11y-player-text-primary: #2c3e50;--a11y-player-text-secondary: #5d6b7b;--a11y-player-text-tertiary: #8896a6;--a11y-player-accent: #e74c3c;--a11y-player-border: #dde4ee;--a11y-player-shadow: rgba(0, 0, 0, .08);--a11y-player-progress-bg: #dde4ee;--a11y-player-progress-fill: var(--a11y-player-primary);--a11y-player-spacing-xs: .25rem;--a11y-player-spacing-sm: .5rem;--a11y-player-spacing-md: 1rem;--a11y-player-spacing-lg: 1.5rem;--a11y-player-spacing-xl: 2rem;--a11y-player-radius-sm: .25rem;--a11y-player-radius-md: .5rem;--a11y-player-radius-lg: 1rem;--a11y-player-radius-full: 9999px;--a11y-player-transition-fast: .15s ease;--a11y-player-transition-normal: .25s ease;--a11y-player-transition-slow: .35s ease}:root.dark-mode{--a11y-player-bg-main: #1a1f2c;--a11y-player-bg-secondary: #252c3a;--a11y-player-bg-tertiary: #303a4d;--a11y-player-text-primary: #f0f2f5;--a11y-player-text-secondary: #c5cdd8;--a11y-player-text-tertiary: #8896a6;--a11y-player-border: #3a4354;--a11y-player-shadow: rgba(0, 0, 0, .2)}.DaisyPlayer__Container{position:relative;width:100%;max-width:100%;height:100%;margin:0 auto;padding:var(--a11y-player-spacing-lg);background-color:var(--a11y-player-bg-main);border-radius:var(--a11y-player-radius-lg);box-shadow:0 4px 24px var(--a11y-player-shadow);color:var(--a11y-player-text-primary);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;transition:all var(--a11y-player-transition-normal);overflow:hidden;border:1px solid var(--a11y-player-border);box-sizing:border-box}@media (max-width: 48rem){.DaisyPlayer__Container{padding:var(--a11y-player-spacing-md);border-radius:var(--a11y-player-radius-md)}}@media (max-width: 30rem){.DaisyPlayer__Container{padding:var(--a11y-player-spacing-sm);border-radius:var(--a11y-player-radius-sm)}}.DaisyPlayer__Container:hover{box-shadow:0 6px 28px var(--a11y-player-shadow)}.DaisyPlayer__Container h1,.DaisyPlayer__Container h2,.DaisyPlayer__Container h3,.DaisyPlayer__Container h4,.DaisyPlayer__Container h5,.DaisyPlayer__Container h6{margin:0;line-height:1.2;letter-spacing:-.01em}.DaisyPlayer__Container h1{font-size:1.75rem;font-weight:600;margin-bottom:var(--a11y-player-spacing-sm);color:var(--a11y-player-text-primary)}@media (max-width: 48rem){.DaisyPlayer__Container h1{font-size:1.5rem}}@media (max-width: 30rem){.DaisyPlayer__Container h1{font-size:1.25rem}}.DaisyPlayer__Container h3{font-size:1.1rem;font-weight:500;margin-bottom:var(--a11y-player-spacing-lg);color:var(--a11y-player-text-secondary)}@media (max-width: 48rem){.DaisyPlayer__Container h3{font-size:1rem;margin-bottom:var(--a11y-player-spacing-md)}}@media (max-width: 30rem){.DaisyPlayer__Container h3{font-size:.9rem;margin-bottom:var(--a11y-player-spacing-sm)}}.DaisyPlayer__OtherButtons{display:flex;flex-direction:row;align-items:center;justify-content:space-between;margin-bottom:var(--a11y-player-spacing-md);padding-bottom:var(--a11y-player-spacing-sm);border-bottom:1px solid var(--a11y-player-border)}.DaisyPlayer__ToggleSectionsViewButton{background-color:transparent;border:none;font-size:1.25rem;cursor:pointer;color:var(--a11y-player-text-secondary);padding:var(--a11y-player-spacing-sm);border-radius:var(--a11y-player-radius-full);display:flex;align-items:center;justify-content:center;transition:all var(--a11y-player-transition-fast)}.DaisyPlayer__ToggleSectionsViewButton:hover,.DaisyPlayer__ToggleSectionsViewButton:focus{background-color:var(--a11y-player-bg-tertiary);color:var(--a11y-player-primary);outline:none}.DaisyPlayer__ToggleSectionsViewButton:active{transform:scale(.95)}.DaisyPlayer__PlayerContainer{margin-top:var(--a11y-player-spacing-md);background-color:var(--a11y-player-bg-secondary);border-radius:var(--a11y-player-radius-md);overflow:hidden;transition:all var(--a11y-player-transition-normal);box-shadow:inset 0 1px 3px #0000000d}.AudioPlayer{background-color:transparent;padding:var(--a11y-player-spacing-md)}.AudioPlayer__Title{color:var(--a11y-player-text-primary);font-weight:500;font-size:1.1rem}.AudioPlayer__Control{color:var(--a11y-player-text-primary);transition:all var(--a11y-player-transition-fast)}.AudioPlayer__Control:hover,.AudioPlayer__Control:focus{color:var(--a11y-player-primary);background-color:var(--a11y-player-bg-tertiary)}.AudioPlayer__Control--play-pause{color:var(--a11y-player-primary)}.AudioPlayer__Control--play-pause:hover,.AudioPlayer__Control--play-pause:focus{color:var(--a11y-player-primary-dark)}.AudioPlayer__Progress{height:.5rem;border-radius:var(--a11y-player-radius-full);background-color:var(--a11y-player-progress-bg);overflow:hidden}.AudioPlayer__Progress::-webkit-progress-bar{background-color:var(--a11y-player-progress-bg)}.AudioPlayer__Progress::-webkit-progress-value{background-color:var(--a11y-player-progress-fill);transition:width var(--a11y-player-transition-fast)}.AudioPlayer__Progress::-moz-progress-bar{background-color:var(--a11y-player-progress-fill)}.AudioPlayer__Time{color:var(--a11y-player-text-secondary);font-size:.875rem}.AudioPlayer__SpeedText{color:var(--a11y-player-text-secondary)}.AudioPlayer__SpeedText strong{color:var(--a11y-player-primary)}.ShareButton{background-color:transparent;color:var(--a11y-player-text-secondary);padding:var(--a11y-player-spacing-sm);border-radius:var(--a11y-player-radius-full);transition:all var(--a11y-player-transition-fast)}.ShareButton:hover,.ShareButton:focus{background-color:var(--a11y-player-bg-tertiary);color:var(--a11y-player-primary);outline:none}.ShareButton:active{transform:scale(.95)}.ShareButton>span>svg{font-size:1.25rem}.Sections__Container{background-color:var(--a11y-player-bg-main);box-shadow:0 4px 24px var(--a11y-player-shadow)}.Sections__Container h2{color:var(--a11y-player-text-primary);margin:var(--a11y-player-spacing-md) 0;font-size:1.5rem;font-weight:600}.Sections__BackArrow{color:var(--a11y-player-text-secondary);font-size:1.5rem;padding:var(--a11y-player-spacing-sm);border-radius:var(--a11y-player-radius-full);transition:all var(--a11y-player-transition-fast)}.Sections__BackArrow:hover{background-color:var(--a11y-player-bg-tertiary);color:var(--a11y-player-primary)}.Sections__Button{background-color:var(--a11y-player-bg-secondary);color:var(--a11y-player-text-primary);border:1px solid var(--a11y-player-border);transition:all var(--a11y-player-transition-fast)}.Sections__Button:hover{border-color:var(--a11y-player-primary-light);background-color:var(--a11y-player-bg-tertiary)}.Sections__Button--selected{background-color:var(--a11y-player-primary-light);color:#fff;border-color:var(--a11y-player-primary)}