Remove the :focus CSS rule, it obstructed the image making precise positioning difficult.

pull/432/head
Dan Collins 4 weeks ago committed by Mike Lang
parent c3cb931e3e
commit 952d760f8d

@ -1,3 +1,173 @@
.jcrop-widget .jcrop-handle{display:none;position:absolute;border:1px rgba(127,127,127,0.8) solid;width:10px;height:10px;box-sizing:border-box;background:rgba(255,255,255,0.8)}.jcrop-widget .jcrop-handle.nw{top:-3px;left:-3px;cursor:nwse-resize}.jcrop-widget .jcrop-handle.w{top:50%;transform:translateY(-50%);left:-3px;cursor:ew-resize}.jcrop-widget .jcrop-handle.sw{bottom:-3px;left:-3px;cursor:nesw-resize}.jcrop-widget .jcrop-handle.ne{top:-3px;right:-3px;cursor:nesw-resize}.jcrop-widget .jcrop-handle.e{top:50%;transform:translateY(-50%);right:-3px;cursor:ew-resize}.jcrop-widget .jcrop-handle.se{bottom:-3px;right:-3px;cursor:nwse-resize}.jcrop-widget .jcrop-handle.n{left:50%;transform:translateX(-50%);top:-3px;cursor:ns-resize}.jcrop-widget .jcrop-handle.s{left:50%;transform:translateX(-50%);bottom:-3px;cursor:ns-resize}.jcrop-widget.active .jcrop-handle{display:block}.jcrop-widget{position:absolute;box-sizing:border-box;border:1px white dashed;opacity:0.7;background:transparent;transition:opacity 1s;padding:0;margin:0;cursor:move}.jcrop-widget:hover{transition:opacity 0.8s;opacity:0.8}.jcrop-widget:focus{transition:opacity 0.5s;opacity:1;outline-style:auto;outline-width:3px;outline-color:rgba(0,0,0,0.3)}.jcrop-shade{background:rgba(0,0,0,0.5);transition:opacity 0.4s, background-color 0.7s;position:absolute}.jcrop-shade.l{top:0px;left:0px;height:100%}.jcrop-shade.r{top:0px;right:0px;height:100%}.jcrop-shade.t{top:0px}.jcrop-shade.b{bottom:0px}.jcrop-stage{position:relative;width:100%}.jcrop-image-stage img{position:absolute;z-index:-1}.jcrop-ux-inactive-handles .jcrop-widget .jcrop-handle{display:block}.jcrop-widget img{width:100%;height:auto}.jcrop-ux-fade-more .jcrop-widget{opacity:0.25}.jcrop-ux-fade-more .jcrop-widget:hover{transition:opacity 0.4s;opacity:0.8}.jcrop-ux-fade-more .jcrop-widget:focus{transition:opacity 0.5s;opacity:1;outline-style:auto;outline-width:3px;outline-color:rgba(0,0,0,0.3)}.jcrop-ux-fade-more .jcrop-widget{opacity:0.25}.jcrop-ux-fade-more .jcrop-widget:hover{opacity:0.65}.jcrop-ux-keep-current .jcrop-widget.active{opacity:1;outline-style:auto;outline-width:3px;outline-color:rgba(0,0,0,0.3)}.jcrop-ux-no-outline .jcrop-widget{outline:none !important}.jcrop-disable.jcrop-stage{opacity:.8}.jcrop-disable.jcrop-stage .jcrop-widget{outline:none !important} .jcrop-widget .jcrop-handle {
display: none;
position: absolute;
border: 1px rgba(127, 127, 127, 0.8) solid;
width: 10px;
height: 10px;
box-sizing: border-box;
background: rgba(255, 255, 255, 0.8)
}
.jcrop-widget .jcrop-handle.nw {
top: -3px;
left: -3px;
cursor: nwse-resize
}
.jcrop-widget .jcrop-handle.w {
top: 50%;
transform: translateY(-50%);
left: -3px;
cursor: ew-resize
}
.jcrop-widget .jcrop-handle.sw {
bottom: -3px;
left: -3px;
cursor: nesw-resize
}
.jcrop-widget .jcrop-handle.ne {
top: -3px;
right: -3px;
cursor: nesw-resize
}
.jcrop-widget .jcrop-handle.e {
top: 50%;
transform: translateY(-50%);
right: -3px;
cursor: ew-resize
}
.jcrop-widget .jcrop-handle.se {
bottom: -3px;
right: -3px;
cursor: nwse-resize
}
.jcrop-widget .jcrop-handle.n {
left: 50%;
transform: translateX(-50%);
top: -3px;
cursor: ns-resize
}
.jcrop-widget .jcrop-handle.s {
left: 50%;
transform: translateX(-50%);
bottom: -3px;
cursor: ns-resize
}
.jcrop-widget.active .jcrop-handle {
display: block
}
.jcrop-widget {
position: absolute;
box-sizing: border-box;
border: 1px white dashed;
opacity: 0.7;
background: transparent;
transition: opacity 1s;
padding: 0;
margin: 0;
cursor: move
}
.jcrop-widget:hover {
transition: opacity 0.8s;
opacity: 0.8
}
.jcrop-shade {
background: rgba(0, 0, 0, 0.5);
transition: opacity 0.4s, background-color 0.7s;
position: absolute
}
.jcrop-shade.l {
top: 0px;
left: 0px;
height: 100%
}
.jcrop-shade.r {
top: 0px;
right: 0px;
height: 100%
}
.jcrop-shade.t {
top: 0px
}
.jcrop-shade.b {
bottom: 0px
}
.jcrop-stage {
position: relative;
width: 100%
}
.jcrop-image-stage img {
position: absolute;
z-index: -1
}
.jcrop-ux-inactive-handles .jcrop-widget .jcrop-handle {
display: block
}
.jcrop-widget img {
width: 100%;
height: auto
}
.jcrop-ux-fade-more .jcrop-widget {
opacity: 0.25
}
.jcrop-ux-fade-more .jcrop-widget:hover {
transition: opacity 0.4s;
opacity: 0.8
}
.jcrop-ux-fade-more .jcrop-widget:focus {
transition: opacity 0.5s;
opacity: 1;
outline-style: auto;
outline-width: 3px;
outline-color: rgba(0, 0, 0, 0.3)
}
.jcrop-ux-fade-more .jcrop-widget {
opacity: 0.25
}
.jcrop-ux-fade-more .jcrop-widget:hover {
opacity: 0.65
}
.jcrop-ux-keep-current .jcrop-widget.active {
opacity: 1;
outline-style: auto;
outline-width: 3px;
outline-color: rgba(0, 0, 0, 0.3)
}
.jcrop-ux-no-outline .jcrop-widget {
outline: none !important
}
.jcrop-disable.jcrop-stage {
opacity: .8
}
.jcrop-disable.jcrop-stage .jcrop-widget {
outline: none !important
}
/*# sourceMappingURL=jcrop.css.map */ /*# sourceMappingURL=jcrop.css.map */
Loading…
Cancel
Save