.frans-audioplayer { width: 100%; margin: 1.5rem 0; } /* * Able Player 5 – zentrale Designvariablen * * Die Werte entsprechen zunächst den Standardwerten von Able Player. * Änderungen hier überschreiben die gebündelte Hersteller-CSS, ohne dass * ableplayer.min.css bearbeitet werden muss. * * Einige Dialoge werden direkt unter eingefügt. Deshalb stehen deren * Klassen zusätzlich zum lokal begrenzten .able-wrapper im Selektor. */ .able { z-index: 8!important; } .frans-audioplayer .able-wrapper, .able-chapters-div, .able-modal-dialog, .able-modal-overlay, .able-playlist, .able-search-results, .able-transcript-area { /* Grundfarben */ --able-white: #fff; --able-black: var(--color-darkblue); --able-transparent-gray: #00000077; --able-medium-light-gray: #a8a8a8; --able-light-gray: #dadada; --able-very-light-gray: #eee; --able-off-white: #fdfdfd; --able-dark-gray: #262626; --able-medium-dark-gray: #333; --able-medium-dark-gray2: var(--color-justblue); --able-medium-gray: #666; --able-bright-yellow: #ff6; --able-light-yellow: #ffc; --able-bright-orange: #f90; --able-light-orange: #ffbb37; --able-bright-green: var(--color-justgreen); --able-light-pink: #fee; /* Allgemeine Steuerung */ --able-base-control-size: 24px; --able-color: var(--able-white); --able-control-background: var(--able-black); --able-control-color: var(--able-white); --able-control-label-color: var(--able-white); --able-controller-background: var(--able-medium-dark-gray2); --able-separator-color: var(--able-medium-light-gray); --able-big-play-background: var(--able-transparent-gray); /* Zeitleiste */ --able-seekbar-border: var(--able-medium-light-gray); --able-seekbar-background: var(--able-black); --able-seekbar-loaded: var(--able-medium-gray); --able-seekbar-played: var(--able-light-gray); --able-seekbar-head: var(--able-off-white); /* Lautstärke */ --able-volume-background: var(--able-black); --able-volume-outline: var(--able-medium-gray); /* Statuszeile */ --able-statusbar-color: var(--able-light-gray); --able-statusbar-background: var(--able-black); /* Tastaturfokus und Mauszeiger */ --able-focus-outline: var(--able-light-orange); --able-hover-outline: var(--able-bright-green); /* Hinweise und Warnungen */ --able-alert-background: var(--able-light-yellow); --able-alert-button-color: var(--able-black); /* Tooltips */ --able-tooltip-border: var(--able-dark-gray); --able-tooltip-color: var(--able-medium-dark-gray); --able-tooltip-background: var(--able-very-light-gray); /* Einstellungsmenüs */ --able-menu-border: var(--able-dark-gray); --able-menu-background: var(--able-black); --able-menu-outline: var(--able-medium-gray); --able-menu-color: var(--able-white); --able-menu-focus-background: var(--able-very-light-gray); --able-menu-focus-color: var(--able-black); /* Dialogfenster */ --able-modal-color: var(--able-black); --able-modal-background: var(--able-off-white); --able-modal-overlay: var(--able-transparent-gray); --able-modal-border: 3px solid var(--able-light-gray); --able-drag-outline: var(--able-bright-orange); --able-resizable-color: var(--able-medium-gray); /* Untertitel und Beschreibungen – für eine mögliche spätere Nutzung */ --able-default-caption-color: var(--able-white); --able-default-caption-background: var(--able-black); --able-default-description-color: var(--able-bright-yellow); --able-default-description-background: var(--able-dark-gray); --able-description-border: var(--able-medium-gray); /* Transkript */ --able-transcript-background: var(--able-white); --able-cue-audio-description-background: var(--able-light-pink); --able-cue-audio-description-color: var(--able-dark-gray); --able-cue-highlighted-background: var(--able-black); --able-cue-highlighted-color: var(--able-white); --able-cue-interacting-background: var(--able-light-yellow); --able-cue-interacting-color: var(--able-black); /* Kapitel */ --able-chapter-background: transparent; --able-chapter-color: var(--able-black); --able-current-chapter-background: var(--able-black); --able-current-chapter-color: var(--able-white); /* Wiedergabelisten */ --able-now-playing-color: var(--able-white); --able-now-playing-background: var(--able-black); --able-playlist-item-background: var(--able-off-white); --able-playlist-item-color: var(--able-black); --able-playlist-item-button-color: var(--able-black); --able-playlist-current-background: var(--able-white); --able-playlist-current-border: var(--able-dark-gray); --able-playlist-current-outline: var(--able-medium-dark-gray); --able-playlist-current-active-color: var(--able-black); --able-playlist-current-active-background: var(--able-white); /* Suche */ --able-search-results-button-background: var(--able-white); --able-search-results-button-color: var(--able-black); /* Kompatibilitätsalias für einen Variablennamen in Able Player 5.0.0. */ --able-search-results-buttonc-color: var(--able-search-results-button-color); --able-search-term-background: var(--able-light-yellow); --able-search-term-color: var(--able-black); /* Gebärdensprachfenster – für eine mögliche spätere Nutzung */ --able-sign-background: var(--able-white); --able-sign-border: var(--able-black); } .able-status-bar { border-bottom-left-radius: calc(var(--base-radius) / 2); border-bottom-right-radius: calc(var(--base-radius) / 2); } .able-controller { border-top-left-radius: calc(var(--base-radius) / 2); border-top-right-radius: calc(var(--base-radius) / 2); } .frans-audioplayer__hinweis { margin-bottom: 0.75rem; font-weight: 700; } .frans-audioplayer__audio, .frans-audioplayer .able-player, .frans-audioplayer .able-audio { width: 100%; max-width: 100%; } .frans-audioplayer__download { margin-top: 0.75rem; } .frans-audioplayer a:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; } .frans-audioplayer__error { padding: 0.75rem; border: 2px solid #b32d2e; color: #8a2424; background: #fff; }