highlight source hints

highlight_cypress_handle.css

/* https://gist.github.com/r-k-b/0879c379ae1acd0440f88cd4f9a6c2c5 */
[data-cy] {
    position: relative;
    z-index: 1;
}
[data-cy]::before {
    /*content: attr(data-cy);*/
    content: "cy";
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    outline: 3px dashed rgba(0, 200, 100, 0.8);
    pointer-events: none;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;

    color: black;
    text-shadow: white 1px 0 10px;
    font-family: monospace;
    font-size: 8px;
    font-style: italic;
}

highlight_source_hints.css

/* https://gist.github.com/r-k-b/0879c379ae1acd0440f88cd4f9a6c2c5 */
[data-src-hint] {
    position: relative;
    z-index: 1;
}
[data-src-hint]::before {
    content: attr(data-src-hint);
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    outline: 3px dashed rgba(255, 0, 255, 0.5);
    pointer-events: none;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;

    color: black;
    text-shadow: white 1px 0 10px;
    font-family: monospace;
    font-size: 8px;
    font-style: italic;
}