styles.css

/**
 * CSS style-sheet for Ace-inline-filter
 */

/* Div containing button and run output */
div[class='filter-ace-inline-ui-area'] {
    padding-bottom: 12px;
}

/* Standard output display box*/
div[class='filter-ace-inline-output-display'] {
    background-color: #eff;
    padding: 5px 10px 5px;
    vertical-align: middle;
    margin-bottom: 10px;
    margin-top: 6px;
}

/* Output display box for HTML*/
div[class='filter-ace-inline-output-html'] {
    background-color: #eff;
    padding: 5px 10px 5px;
    vertical-align: middle;
    margin-bottom: 0;
    margin-top: 6px;
}

/* Output display box for HTML rendered*/
div[class='filter-ace-inline-html'] {
    background-color: #eff;
    padding: 5px;
    margin-bottom: 10px;
}

/* Output display box for sandbox execution errors*/
div[class='filter-ace-inline-output-error'] {
    background-color: #ffd;
    padding: 5px 10px 5px;
    vertical-align: middle;
    margin-bottom: 10px;
}

/* Output display box for user input errors*/
div[class='filter-ace-inline-output-user'] {
    border: 1px solid red;
    background-color: #faa;
    padding: 5px 10px 5px;
    vertical-align: middle;
    margin-bottom: 10px;
}

/* Inner pre-class containing text*/
pre[class='filter-ace-inline-output-text'] {
    overflow-wrap: break-word;
    white-space: pre-wrap;
    width: 100%;
    overflow: auto;
    max-height: 600px;
    margin-top: 0;
    margin-bottom: 0;
}

/* Execution button*/
button[class='btn-ace-inline-execution'] {
    margin-bottom: 12px;
    padding: 2px 8px;
}

/* Changes box for files */
div[class='filter-ace-inline-files'] {
    margin-bottom: 0;
    margin-top: 8px;
    background-color: #ffd;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    width: 100%;
}

/* Changes box for files which do not upload */
div[class='filter-ace-inline-file-error'] {
    margin-bottom: 0;
    margin-top: 8px;
    background-color: #faa;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    width: 100%;
}

/* Use a grey background colour for read-only
   Ace-inline divs. Overrides Ace's default,
   and grunt objects to the use of !important,
   hence the clumsy selector.
*/
div[class*="ace_editor"][class*="readonly"] {
    background-color: #f4f4f4;
}