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;
        }
    }

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

        .collapseButton {
            left: 30px;
        }

        .expandFullButton {
            display: block;
        }
    }
}