@tindtechnologies/universalviewer
Version:
The Universal Viewer is a community-developed open source project on a mission to help you share your 📚📜📰📽️📻🗿 with the 🌎
216 lines (185 loc) • 7.12 kB
text/less
@import 'mobile';
.uv-iiif-extension-host.uv-openseadragon-extension{
@search-result: @brand-secondary;
.centerPanel {
.content{
position: relative;
.displayregion {
border: 2px solid #fff ;
}
.viewer {
margin: 0 8px 0 8px;
.navigator.extraMargin {
margin: 0 30px 0 0 ;
}
.openseadragon-container > div:not(.openseadragon-canvas):first {
display: none;
.xl-mediaquery({
display: block;
});
}
.paging.btn {
position: absolute ;
width: 30px;
height: 90px;
background-repeat: no-repeat;
background-color: @body-bg;
background-position: 0px 50%;
cursor: pointer;
padding: 0px;
border: none;
.border-radius(0);
&.vertical {
height: 30px;
width: 90px;
background-position: 50% 0;
}
&.prev {
background-image: data-uri('../img/left_arrow.png');
left: 0;
&.disabled {
background-image: data-uri('../img/left_arrow_disabled.png');
}
}
&.prev.vertical {
background-image: data-uri('../img/up_arrow.png');
left: 0;
top: 0;
&.disabled {
background-image: data-uri('../img/up_arrow_disabled.png');
}
&.down {
background-image: data-uri('../img/down_arrow.png');
&.disabled {
background-image: data-uri('../img/down_arrow_disabled.png');
}
}
}
&.next {
background-image: data-uri('../img/right_arrow.png');
right: 0;
&.disabled {
background-image: data-uri('../img/right_arrow_disabled.png');
}
}
&.next.vertical {
background-image: data-uri('../img/down_arrow.png');
left: 0;
top: 0;
margin-left: 15px;
&.disabled {
background-image: data-uri('../img/down_arrow_disabled.png');
}
&.up {
background-image: data-uri('../img/up_arrow.png');
&.disabled {
background-image: data-uri('../img/up_arrow_disabled.png');
}
}
}
}
.zoomIn{
display: none ;
.xl-mediaquery({
display: inline-block ;
cursor: pointer ;
background-image: data-uri('../img/zoom_in.png') ;
width: 28px;
height: 28px;
// margin: 3px !important;
img {
display: none;
}
&:focus {
.tab-focus();
}
});
}
.zoomOut{
display: none ;
.xl-mediaquery({
display: inline-block ;
cursor: pointer ;
background-image: data-uri('../img/zoom_out.png') ;
width: 28px;
height: 28px;
// margin: 3px !important;
img {
display: none;
}
&:focus {
.tab-focus();
}
});
}
.goHome{
cursor: pointer ;
}
div[title="Rotate left"] {
display: none ;
}
.rotate{
display: none ;
.xl-mediaquery({
display: inline-block ;
cursor: pointer ;
background-image: data-uri('../img/rotate_right.png') ;
width: 28px;
height: 28px;
// margin: 3px !important;
img {
display: none;
}
&:focus {
.tab-focus();
}
});
}
div[title="Previous page"] {
display: none ;
}
div[title="Next page"] {
display: none ;
}
}
.spinner {
position: absolute;
width: 27px;
height: 27px;
border-radius: 27px;
.loading(@loader-black-bg);
}
.annotationRect{
background-color: desaturate(@search-result, 40%);
.opacity(.5);
&.current {
//border: 3px solid #fff;
@col: lighten(@search-result, 20%);
background-color: saturate(@col, 100%);
}
}
.annotationPin{
// background-color: white;
background-image: data-uri('../img/pin.svg') ;
width: 28px ;
height: 37px ;
background-position-x: 1px;
transform: translate(-45%, -90%);
overflow: hidden;
cursor: pointer;
span {
color: #2a2a2a;
user-select: none;
display: block;
width: 95%;
text-align: center;
margin-top: 8px;
font-size: 11px;
}
}
}
}
.openseadragon-canvas {
outline: none;
}
}