Owen Leonard
a40532b1ce
This patch makes minor modifications to the Chocolat CSS so that the buttons (next, previous, close) are styled with colors that conform to the new interface color scheme. Note: You may encounter Bug 32307 when testing. To test, apply the patch and enable at least two cover image services in the staff interface: Amazon, Local cover images, and/or Coce. Locate a bibliographic record which has at least two cover images and view the detail page. Click on the cover image to trigger the image viewer overlay. Confirm that the controls in this view are colored green, matching the current color scheme. Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org> Signed-off-by: Katrin <katrin.fischer.83@web.de> Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
267 lines
7.7 KiB
CSS
267 lines
7.7 KiB
CSS
.chocolat-zoomable.chocolat-zoomed {
|
|
cursor: zoom-out;
|
|
}
|
|
.chocolat-open {
|
|
overflow: hidden;
|
|
}
|
|
.chocolat-overlay {
|
|
transition: opacity 0.4s ease, visibility 0s 0.4s ease;
|
|
height: 100%;
|
|
width: 100%;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 10;
|
|
background-color: #fff;
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
.chocolat-overlay.chocolat-visible {
|
|
transition: opacity 0.4s, visibility 0s;
|
|
visibility: visible;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.chocolat-wrapper {
|
|
transition: opacity 0.4s ease, visibility 0s 0.4s ease;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: fixed;
|
|
opacity: 0;
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 16;
|
|
color: #fff;
|
|
visibility: hidden;
|
|
}
|
|
.chocolat-wrapper.chocolat-visible {
|
|
transition: opacity 0.4s, visibility 0s;
|
|
opacity: 1;
|
|
visibility: visible;
|
|
}
|
|
|
|
.chocolat-zoomable .chocolat-img {
|
|
cursor: zoom-in;
|
|
}
|
|
.chocolat-loader {
|
|
transition: opacity 0.3s;
|
|
height: 32px;
|
|
width: 32px;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
margin-left: -16px;
|
|
margin-top: -16px;
|
|
z-index: 11;
|
|
background: url(../images/loader.gif);
|
|
opacity: 0;
|
|
}
|
|
.chocolat-loader.chocolat-visible {
|
|
opacity: 1;
|
|
}
|
|
|
|
.chocolat-image-wrapper {
|
|
position: fixed;
|
|
width: 0px;
|
|
height: 0px;
|
|
left: 50%;
|
|
top: 50%;
|
|
z-index: 14;
|
|
text-align: left;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
.chocolat-image-wrapper .chocolat-img {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
.chocolat-wrapper .chocolat-left {
|
|
width: 50px;
|
|
height: 100px;
|
|
cursor: pointer;
|
|
background: url(../images/left.png) 50% 50% no-repeat;
|
|
z-index: 17;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.chocolat-layout {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
.chocolat-image-canvas {
|
|
transition: opacity .2s;
|
|
opacity: 0;
|
|
flex-grow: 1;
|
|
align-self: stretch;
|
|
}
|
|
.chocolat-image-canvas.chocolat-visible {
|
|
opacity: 1;
|
|
}
|
|
.chocolat-center {
|
|
flex-grow: 1;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
user-select: none;
|
|
}
|
|
|
|
.chocolat-wrapper .chocolat-right {
|
|
width: 50px;
|
|
height: 100px;
|
|
cursor: pointer;
|
|
background: url(../images/right.png) 50% 50% no-repeat;
|
|
z-index: 17;
|
|
visibility: hidden;
|
|
}
|
|
.chocolat-wrapper .chocolat-right.active {
|
|
visibility: visible;
|
|
}
|
|
.chocolat-wrapper .chocolat-left.active {
|
|
visibility: visible;
|
|
}
|
|
.chocolat-wrapper .chocolat-top {
|
|
height: 50px;
|
|
overflow: hidden;
|
|
z-index: 17;
|
|
flex-shrink: 0;
|
|
}
|
|
.chocolat-wrapper .chocolat-close {
|
|
width: 50px;
|
|
height: 50px;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
background: url(../images/close.png) 50% 50% no-repeat;
|
|
}
|
|
.chocolat-wrapper .chocolat-bottom {
|
|
height: 40px;
|
|
font-size: 12px;
|
|
z-index: 17;
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
}
|
|
.chocolat-wrapper .chocolat-set-title {
|
|
display: inline-block;
|
|
padding-right: 15px;
|
|
line-height: 1;
|
|
border-right: 1px solid rgba(255, 255, 255, 0.3);
|
|
}
|
|
.chocolat-wrapper .chocolat-pagination {
|
|
float: right;
|
|
display: inline-block;
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
margin-right: 15px;
|
|
/*border-right: 1px solid rgba(255, 255, 255, 0.2);*/
|
|
}
|
|
.chocolat-wrapper .chocolat-fullscreen {
|
|
width: 16px;
|
|
height: 40px;
|
|
background: url(../images/fullscreen.png) 50% 50% no-repeat;
|
|
display: block;
|
|
cursor: pointer;
|
|
float: right;
|
|
}
|
|
.chocolat-wrapper .chocolat-description {
|
|
display: inline-block;
|
|
flex-grow: 1;
|
|
text-align: left;
|
|
}
|
|
|
|
/* no container mode*/
|
|
body.chocolat-open > .chocolat-overlay {
|
|
z-index: 15;
|
|
}
|
|
body.chocolat-open > .chocolat-loader {
|
|
z-index: 15;
|
|
}
|
|
body.chocolat-open > .chocolat-image-wrapper {
|
|
z-index: 17;
|
|
}
|
|
|
|
/* container mode*/
|
|
.chocolat-in-container .chocolat-wrapper,
|
|
.chocolat-in-container .chocolat-image-wrapper,
|
|
.chocolat-in-container .chocolat-overlay {
|
|
position: absolute;
|
|
}
|
|
.chocolat-in-container {
|
|
position: relative;
|
|
}
|
|
|
|
.chocolat-zoomable.chocolat-zooming-in .chocolat-image-wrapper,
|
|
.chocolat-zoomable.chocolat-zooming-out .chocolat-image-wrapper {
|
|
transition: width .2s ease, height .2s ease;
|
|
}
|
|
.chocolat-zoomable.chocolat-zooming-in .chocolat-img,
|
|
.chocolat-zoomable.chocolat-zooming-out .chocolat-img {
|
|
transition: margin .2s ease;
|
|
}
|
|
|
|
/* uncomment to hide controls when zoomed-in*/
|
|
/*
|
|
.chocolat-zoomable .chocolat-top,
|
|
.chocolat-zoomable .chocolat-bottom,
|
|
.chocolat-zoomable .chocolat-right,
|
|
.chocolat-zoomable .chocolat-left {
|
|
transition: opacity .3s ease, visibility 0s .3s;
|
|
opacity: 1;
|
|
}
|
|
|
|
.chocolat-zoomable.chocolat-zoomed .chocolat-top,
|
|
.chocolat-zoomable.chocolat-zoomed .chocolat-bottom,
|
|
.chocolat-zoomable.chocolat-zoomed .chocolat-right,
|
|
.chocolat-zoomable.chocolat-zoomed .chocolat-left {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
*/
|
|
|
|
/* Local chnages for Koha */
|
|
.chocolat-wrapper {
|
|
z-index: 1035;
|
|
}
|
|
|
|
.chocolat-wrapper .chocolat-left {
|
|
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-left-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0zm3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5H11.5z' style='fill:%23408540;fill-opacity:1' /%3E%3C/svg%3E") 50% 50% no-repeat;
|
|
background-size: 35px;
|
|
}
|
|
.chocolat-wrapper .chocolat-right {
|
|
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-arrow-right-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z' style='fill:%23408540;fill-opacity:1' /%3E%3C/svg%3E") 50% 50% no-repeat;
|
|
background-size: 35px;
|
|
}
|
|
|
|
.chocolat-wrapper .chocolat-close {
|
|
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-x-circle-fill' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z' style='fill:%23408540;fill-opacity:1' /%3E%3C/svg%3E") 50% 50% no-repeat;
|
|
background-size: 35px;
|
|
}
|
|
|
|
.chocolat-wrapper .chocolat-bottom {
|
|
background: rgba(0, 0, 0, 0.8);
|
|
}
|
|
|
|
.chocolat-wrapper .chocolat-bottom a {
|
|
color: #FFF;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.chocolat-wrapper .chocolat-fullscreen {
|
|
width: 40px;
|
|
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='currentColor' class='bi bi-arrow-down-left-square' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M14.357 3.656a.692.692 0 00-.691-.692H2.263a.692.692 0 00-.691.692v8.303c0 .382.31.692.691.692h11.403c.382 0 .691-.31.691-.692zm-13.477 0c0-.764.62-1.383 1.383-1.383h11.403c.764 0 1.383.62 1.383 1.383v8.303c0 .764-.62 1.383-1.383 1.383H2.263C1.5 13.342.88 12.723.88 11.96z' fill='%23fff'/%3E%3Cpath fill-rule='evenodd' d='M14.357 8.151a.692.692 0 00-.691-.692h-5.88a.692.692 0 00-.69.692v3.808c0 .382.309.692.69.692h5.88c.382 0 .691-.31.691-.692zm-7.954 0c0-.764.62-1.384 1.384-1.384h5.879c.764 0 1.383.62 1.383 1.384v3.808c0 .764-.62 1.383-1.383 1.383h-5.88c-.763 0-1.383-.619-1.383-1.383z' fill='%23fff'/%3E%3C/svg%3E");
|
|
background-position: 50% 50%;
|
|
background-repeat: no-repeat;
|
|
background-size: 25px;
|
|
}
|
|
/* End local changes for Koha */
|