From 67316125cca903136afd41bcb0e0787c4b993965 Mon Sep 17 00:00:00 2001 From: catenglaender <59924129+catenglaender@users.noreply.github.com> Date: Fri, 19 Jul 2024 14:09:57 +0200 Subject: [PATCH] 8/UI/mejs-videoplayer keyboard focus ILIAS style 34185 (#7791) --- templates/default/delos.css | 44 +++++++++++++++++++ .../less/Services/MediaObjects/delos.less | 11 +++++ 2 files changed, 55 insertions(+) diff --git a/templates/default/delos.css b/templates/default/delos.css index 9d2c2eff3532..7aed618868d2 100644 --- a/templates/default/delos.css +++ b/templates/default/delos.css @@ -16308,6 +16308,50 @@ span.bibl_text_inline_Emph { width: 100px; cursor: pointer; } +.mejs__overlay-button:focus-visible, +.mejs__container:focus-visible, +.ilPlayerPreviewPlayButton:focus-visible, +.mejs__time-total:focus-visible { + position: relative; + outline: 2px solid #FFFFFF; + outline-offset: 4px; +} +.mejs__overlay-button:focus-visible::after, +.mejs__container:focus-visible::after, +.ilPlayerPreviewPlayButton:focus-visible::after, +.mejs__time-total:focus-visible::after { + content: " "; + position: absolute; + top: -2px; + left: -2px; + right: -2px; + bottom: -2px; + border: 2px solid #FFFFFF; + outline: 3px solid #0078D7; +} +.mejs__overlay-button:active, +.mejs__container:active, +.ilPlayerPreviewPlayButton:active, +.mejs__time-total:active, +.mejs__overlay-button.engaged, +.mejs__container.engaged, +.ilPlayerPreviewPlayButton.engaged, +.mejs__time-total.engaged { + outline: none; +} +.mejs__button button:focus-visible, +.ilPageVideo button:focus-visible { + outline: none; + border: 3px solid #0078D7; + box-shadow: inset 0px 0px 0px 2px #FFFFFF, 0px 0px 0px 2px #FFFFFF; + outline-offset: initial; +} +.mejs__button button::after, +.ilPageVideo button::after, +.mejs__button button:focus:focus-visible::after, +.ilPageVideo button:focus:focus-visible::after { + content: none; +} .ilPlayerPreviewOverlay:hover .ilPlayerPreviewPlayButton { background-position: 0 -100px; } diff --git a/templates/default/less/Services/MediaObjects/delos.less b/templates/default/less/Services/MediaObjects/delos.less index 133e2a68ef73..830f08bbd8f0 100644 --- a/templates/default/less/Services/MediaObjects/delos.less +++ b/templates/default/less/Services/MediaObjects/delos.less @@ -51,6 +51,17 @@ cursor: pointer; } +.mejs__overlay-button, +.mejs__container, +.ilPlayerPreviewPlayButton, +.mejs__time-total { + .il-focus(); +} +.mejs__button button, +.ilPageVideo button { + .il-focus-border-only(); +} + .ilPlayerPreviewOverlay:hover .ilPlayerPreviewPlayButton { background-position: 0 -100px; }