From 952d760f8d036c8e5c9f1a9d057bf693ddedc4c7 Mon Sep 17 00:00:00 2001 From: Dan Collins Date: Wed, 30 Oct 2024 20:51:25 -0400 Subject: [PATCH] Remove the :focus CSS rule, it obstructed the image making precise positioning difficult. --- thrimbletrimmer/styles/jcrop.css | 174 ++++++++++++++++++++++++++++++- 1 file changed, 172 insertions(+), 2 deletions(-) diff --git a/thrimbletrimmer/styles/jcrop.css b/thrimbletrimmer/styles/jcrop.css index 580aaea..7bc80d2 100644 --- a/thrimbletrimmer/styles/jcrop.css +++ b/thrimbletrimmer/styles/jcrop.css @@ -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) +} -/*# sourceMappingURL=jcrop.css.map */ \ No newline at end of file +.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 */