styles.css

/*
* Ally css.
*/

/* Initially, all ally elements are all hidden until Ally flips them on with an "ally-active" CSS class. */
.filter-ally-wrapper .ally-feedback,
.filter-ally-wrapper .ally-download,
.filter-ally-wrapper .ally-image-cover {
    display: none;
}

.filter-ally-wrapper .ally-download.ally-active,
.filter-ally-wrapper .ally-feedback.ally-active,
.filter-ally-wrapper .ally-image-cover.ally-active {
    display: inline-block;
}

/* Links to ally feedback and download menu. */
.filter-ally-wrapper .ally-actions a[data-ally-file-id] {
    display: block;
    margin: 0 2.5px;
}

.filter-ally-wrapper .ally-actions a[data-ally-file-id]:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

/* Ally icons - 20x20. */
.filter-ally-wrapper .ally-actions img {
    width: 20px;
    height: 20px;
}

.filter-ally-wrapper .ally-feedback {
    vertical-align: text-bottom; /* Fix aspect ratio issue with icon. */
}

/*
* Ally for images.
*/

/* Ally image cover. */
.filter-ally-wrapper .ally-image-cover {
    position: absolute;
    z-index: 1;
}

.filter-ally-wrapper .ally-image-cover .ally-image-seizure-guard {
    width: 100%;
    height: 100%;
}

/* "ally-feedback" items for embedded image overlays cannot be display: none because they need to retain their
   dimensions for placement. Instead, we make them invisible and place them behind the image so they don't obstruct
   anything until they are "active". */
.filter-ally-wrapper.ally-image-wrapper .ally-actions .ally-feedback {
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    background-color: #FFF;
    visibility: hidden;
    z-index: -1;
}

.filter-ally-wrapper.ally-image-wrapper .ally-actions .ally-feedback.ally-active {
    visibility: visible;
    z-index: 2;
}

.filter-ally-wrapper.ally-image-wrapper .ally-actions .ally-feedback a {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 5px;
}

.filter-ally-wrapper.ally-image-wrapper .ally-actions .ally-feedback img {
    vertical-align: baseline;
}

.filter-ally-wrapper.ally-image-wrapper .ally-accessibility-score-indicator {
    box-sizing: border-box;
}

/*
* CSS for behat tests.
*/

/* CSS required for testing purposes only */
body.behat-site .filter-ally-wrapper .ally-image-cover,
body.behat-site .filter-ally-wrapper .ally-actions .ally-feedback,
body.behat-site .filter-ally-wrapper .ally-actions .ally-download {
    border: 4px solid red;
    display: inline-block;
}

body.behat-site .filter-ally-wrapper.ally-image-wrapper .ally-actions .ally-feedback {
    visibility: visible;
    z-index: 2;
}

@media (min-width: 767px) {
    body:not(.snap-resource-card) .mform .form-group:has(.ally-score-meter-container.ally-add-tooltip) {
        padding-top: 3rem!important; /* Avoid overlap with ally score indicator */
    }
}

/* Allow the clickable Ally icons to be clicked, on the activities of a Course section. */
body.path-course li.activity.modtype_resource span.ally-actions {
    position: relative;
    z-index: 1;
}

.ally-wysiwyg-feedback-tinymce .ally-score-meter-container-toolbar {
    /* Place ally toolbar (feedback indicator) outside and above the tiny mce editor */
    /* ALLY-11 - fix css bugs as part of Moodle 4.3 upgrade */
    overflow-y: visible;
}

.filter-ally-wrapper.ally-anchor-wrapper {
    display: inline-block;
}

.filter-ally-wrapper.ally-anchor-wrapper .ally-actions {
    display: inline-flex;
}

/* =====================================================*/
/* ALLY-11 - fix css bugs as part of Moodle 4.3 upgrade */

/*
 * Fixes the top buttons appearing behind the accessibility header when
viewing the full-screen information.
 * This seems to be caused by the Moodle message appearing at the
bottom of the editor when a draft is restored.
 */
.ally-wysiwyg-feedback-atto-fullscreen {
    overflow-y: hidden !important;
}

/* End ALLY-11 fixes */
/* =====================================================*/


/* =====================================================*/
/* ALLY-14 - fix css bugs as part of Moodle 4.4 upgrade */
body .form-group.row.fitem .ally-score-meter-container-toolbar .ally-score-meter-container-toolbar {
    position: relative;
    padding: 0;
}

.ally-score-meter-container-toolbar > button.ally-score-meter-container {
    top: 0 !important;
    padding: 0!important;
    margin-bottom: -2px !important;
}

.tox.tox-tinymce.ally-wysiwyg-feedback-tinymce .ally-score-meter-container-toolbar {
    margin-top: -11px;
    top: -8px
}
.tox.tox-tinymce.ally-wysiwyg-feedback-tinymce {
    /* Required to restore the space destroyed by negative margin and top in previous selector code */
    margin-top: 16px;
}
/* End ALLY-14 fixes */
/* =====================================================*/