cancionero-web/res/less/song.less

@import "colors.less";

table.chordedline {
    border-spacing: 0px;
    display: inline-block;
}

.chordedline td {
    padding: 0px;
}

.chord {
    font-style: italic;
    color: @chord-color;
    @media (prefers-color-scheme: dark) {
        color: @chord-color-dark;
    }
}

.song div {
    margin: 0.5em 0;
}

div.chorus, p.chorus {
    font-weight: bold;
    border-left: @text 2px solid;
    @media (prefers-color-scheme: dark) {
        border-left: @text-dark 2px solid;
    }
    padding-left: 0.5em;
    div {
        padding-left: 0.5em;
    }
    table {
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
    }
}

.rrep {
    background-image: url(repeat-sign.svg);
    display: inline-block;
    width: 1em;
    height: 2em;
    @media (prefers-color-scheme: dark) {
        /* Black to white filter for svgs */
        filter: invert(100%);
    }
}

.lrep {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipV;
    -ms-filter: "FlipV";
    .rrep();
}

.rep {
    font-style: italic;
}

.echo {
    font-style: italic;
}

button, select#transposeSelect {
    min-width: 2em;
    min-height: 2em;
    padding: .4em;
    border-style: none;
    border-radius: @border-radius;
    color: @text;
    background-color: @secondary;
    @media (prefers-color-scheme: dark) {
        color: @text-dark;
        background-color: @secondary-dark;
    }
    &:hover {
        background-color: @secondary-hover;
        transition-duration: @transition;
        @media (prefers-color-scheme: dark) {
            background-color: @secondary-hover-dark;
        }
    }
}

select#transposeSelect {
    -webkit-appearance: none;
    -moz-appearance: none;
    font-weight: bold;
    color: black;
    @media (prefers-color-scheme: dark) {
        color: @text-dark;
    }
}