@oat-sa/tao-test-runner-qti/dist/plugins/content/accessibility/css/key-navigation.css

TAO Test Runner QTI implementation

/*
Usage:
- linear-gradient((color1, color2, color3)) - returns linear-gradient with evenly distributed colors,
   if 3 colors used then the position of each will be 33,33%
- linear-gradient((color1 0%, color2 30%, color3 80%)) - returns linear-gradient with manually distributed colors,
   first param - color, second - position. Also you can use px or other valid units for set position.
*/
/* based on "visually-hidden" mixin in LDS for accessibility goals */
/*
 * Every style defined here must be mirrored with `writing-mode-horizontal-tb` mixin.
   Because writing-mode can be defined on 2 levels: a) item, b) text block or interaction;
     so if there's a horizontal block inside vertical item, vertical styles should *not* be used for it.
 */
/* Do not edit */
.test-runner-scope .content-wrapper {
  /* focus on checkbox input */
}
.test-runner-scope .content-wrapper :not(.writing-mode-vertical-rl) p.key-navigation-group,
.test-runner-scope .content-wrapper :not(.writing-mode-vertical-rl) div.key-navigation-group:not(.select2-container):not(.writing-mode-vertical-rl):not(:has) {
  padding: 5px !important;
}
.test-runner-scope .content-wrapper .key-navigation-group:not(.qti-extendedTextInteraction):not(.qti-textEntryInteraction):not(.qti-customInteraction):not(.qti-choiceInteraction) {
  border-width: 1px !important;
  border-style: solid;
  border-color: transparent;
}
.test-runner-scope .content-wrapper .key-navigation-group:not(.qti-extendedTextInteraction):not(.qti-textEntryInteraction):not(.qti-customInteraction):not(.qti-choiceInteraction).focusin {
  border-color: rgb(14, 93, 145) !important;
  outline: none;
}
.test-runner-scope .content-wrapper .key-navigation-group:not(.qti-customInteraction).qti-interaction .qti-choice.key-navigation-highlight:not(.tts-content-node) {
  background: #e7eff4 !important;
}
.test-runner-scope .content-wrapper .key-navigation-group.focusin:focus.qti-extendedTextInteraction, .test-runner-scope .content-wrapper .key-navigation-group.focusin:focus.qti-choiceInteraction {
  outline: 1px solid rgb(14, 93, 145);
}
.test-runner-scope .content-wrapper .key-navigation-group.qti-choiceInteraction.focusin:not(:focus) .choice-area,
.test-runner-scope .content-wrapper .key-navigation-group.qti-choiceInteraction .choice-area:focus {
  outline: 1px solid rgb(14, 93, 145);
}
.test-runner-scope .content-wrapper span.key-navigation-group {
  border: none !important;
}
.test-runner-scope .content-wrapper span.key-navigation-group.focusin {
  outline: solid rgb(14, 93, 145) 1px !important;
  outline-offset: 1px;
}
.test-runner-scope .test-sidebar .key-navigation-group.focusin {
  background: #e7eff4;
}
.test-runner-scope .test-sidebar .key-navigation-group .qti-navigator-filters .key-navigation-highlight .qti-navigator-tab {
  border-width: 2px;
}
.test-runner-scope .test-sidebar .key-navigation-group .qti-navigator-filters .key-navigation-highlight:focus {
  outline: none;
}
.test-runner-scope .test-sidebar .key-navigation-group .qti-navigator-filters .key-navigation-highlight:focus .qti-navigator-tab {
  border-top-color: #222 !important;
  border-left-color: #222 !important;
  border-right-color: #222 !important;
}
.test-runner-scope .test-sidebar .key-navigation-group li.qti-navigator-item.key-navigation-highlight {
  padding-left: 8px;
  border-left: solid 2px #222;
}
.test-runner-scope .test-sidebar .key-navigation-group li.qti-navigator-item.key-navigation-highlight .key-navigation-highlight:focus {
  outline: none;
}
.test-runner-scope .test-sidebar .qti-navigator-fizzy .key-navigation-group.focusin {
  background: #f2f2f2;
}
.test-runner-scope .bottom-action-bar.content-action-bar.key-navigation-group.focusin {
  -ms-box-shadow: 0 0 6px 2px #3e7da7;
  -o-box-shadow: 0 0 6px 2px #3e7da7;
  box-shadow: 0 0 6px 2px #3e7da7;
}
.test-runner-scope .bottom-action-bar.content-action-bar.key-navigation-group .key-navigation-highlight:focus {
  margin-bottom: 0;
  border-bottom-color: #e7eff4 !important;
  outline: none;
}
.test-runner-scope .bottom-action-bar.content-action-bar.key-navigation-group .key-navigation-highlight:focus.active {
  border-bottom-color: transparent !important;
  background: #e7eff4 !important;
}
.test-runner-scope .bottom-action-bar.content-action-bar.key-navigation-group .key-navigation-highlight:focus:not(.active):not(:active) .li-inner {
  color: #e7eff4;
}

header .settings-menu .key-navigation-group {
  padding-right: 5px;
}
header .settings-menu .key-navigation-group.focusin {
  background-color: rgba(14, 93, 145, 0.5);
  padding-bottom: 10px;
}
header .settings-menu .key-navigation-highlight:focus {
  height: 54px;
  color: white !important;
  border-bottom: solid 2px white !important;
}
/*# sourceMappingURL=key-navigation.css.map */