@acdh-oeaw/universalviewer/dist/cjs/content-handlers/iiif/modules/uv-shared-module/css/right-panel.less

The Universal Viewer is a community-developed open source project on a mission to help you share your 📚📜📰📽️📻🗿 with the 🌎

.uv {

    @expandFullEnabled: false;

    .rightPanel {

        z-index: 10;

        .top {
            height: 35px;
            position: relative;

            .title {
                position: absolute;
                height: 20px;
                margin-top: 9px;
                font-size: inherit;
                font-weight: normal;
                cursor: pointer;
                left: 35px;
                letter-spacing: 0.08rem;
            }

            .collapseButton {
                position: absolute;
                background-image: data-uri('../img/arrows_right.png');
                background-repeat: no-repeat;
                width: 20px;
                height: 20px;
                cursor: pointer;
                margin-top: 7px;
                display: block;
                left: 5px;
            }

            .expandFullButton {
                position: absolute;
                background-image: data-uri('../img/arrows_left.png');
                background-repeat: no-repeat;
                width: 20px;
                height: 20px;
                cursor: pointer;
                margin-top: 7px;
                display: none;
                left: 5px;
            }

            .expandFull();
        }

        .closed {
            width: 25px;

            .title {
                .link-color-decoration(@text-color, none);
                white-space: nowrap;
                display: block;
                margin: 8px 3px 0 5px;
                cursor: pointer;
                text-transform: uppercase;
                .rotate(90deg);
                letter-spacing: 0.08rem;
            }

            .expandButton {
                background-image: data-uri('../img/arrows_left.png');
                background-repeat: no-repeat;
                width: 20px;
                height: 20px;
                cursor: pointer;
                margin: 7px 0 0 5px;
                display: block;
            }
        }

        .main {
            margin-right: @margin-medium-horizontal;
            margin-bottom: @margin-medium-vertical;

            .transcribed-text {
                width: 230px;
                padding: 5px 5px 5px 7px;

                p {
                    padding: 5px;
                    margin: 0;
                }

                .lineAnnotation {
                    &.current {
                        color: #000;
                        @col: rgb(120, 251, 185);
                        background-color: saturate(@col, 100%);
                    }

                    &:hover {
                        color: #000;
                        @col: lighten(rgb(120, 251, 185), 20%);
                        background-color: saturate(@col, 80%);
                    }
                }

                .label {
                    color: #9a9a9a;
                    border-bottom: 1px solid #343434;
                    margin: 0 10px 10px 0;
                }
            }
        }
    }

    .expandFull() when (@expandFullEnabled =true) {
        .title {
            left: 55px;
        }

        .collapseButton {
            left: 30px;
        }

        .expandFullButton {
            display: block;
        }
    }
}