diff options
| author | Tom <tw201207@gmail.com> | 2014-11-13 21:57:50 +0100 |
|---|---|---|
| committer | Tom <tw201207@gmail.com> | 2014-11-13 22:10:46 +0100 |
| commit | 11e5e5d409e6c80617b3569199e404c8e4e44e06 (patch) | |
| tree | def1f2c70efdc91f0f33a8dd9930d5c1d58ece5b /src/main/resources | |
| parent | b95f47005679e25e2da67e0747edfec81d973cfe (diff) | |
| download | gitblit-11e5e5d409e6c80617b3569199e404c8e4e44e06.tar.gz gitblit-11e5e5d409e6c80617b3569199e404c8e4e44e06.zip | |
Fix that opacity slider
Using the browser's built-in slider doesn't work if the browser hides
scrollbars (like Firefox on Mac). So,construct our own slider with
three divs and some CSS. Event-handling Javascript changed to match
this new implementation.
Diffstat (limited to 'src/main/resources')
| -rw-r--r-- | src/main/resources/gitblit.css | 52 |
1 files changed, 34 insertions, 18 deletions
diff --git a/src/main/resources/gitblit.css b/src/main/resources/gitblit.css index bdab2056..906b555b 100644 --- a/src/main/resources/gitblit.css +++ b/src/main/resources/gitblit.css @@ -1492,10 +1492,10 @@ img.imgdiff-left { img.imagediff {
user-select: none;
/* Checkerboard background */
- background-color: white;
- background-image: linear-gradient(45deg, #DDD 25%, transparent 25%, transparent 75%, #DDD 75%, #DDD), linear-gradient(45deg, #DDD 25%, transparent 25%, transparent 75%, #DDD 75%, #DDD);
- background-size: 16px 16px;
- background-position: 0 0, 8px 8px;
+ background-color: white;
+ background-image: linear-gradient(45deg, #DDD 25%, transparent 25%, transparent 75%, #DDD 75%, #DDD), linear-gradient(45deg, #DDD 25%, transparent 25%, transparent 75%, #DDD 75%, #DDD);
+ background-size: 16px 16px;
+ background-position: 0 0, 8px 8px;
}
.diff-img {
@@ -1505,24 +1505,40 @@ img.imagediff { div.imgdiff-slider {
display: inline-block;
position: relative;
- margin: 0px 2px;
- width: 420px;
- max-width: 420px;
- height: 24px;
- min-height: 18px;
- overflow-x: scroll;
+ margin: 0px 5px;
+ width: 418px;
+ height: 18px;
background: linear-gradient(to right, #F00, #0F0);
+ border: 1px solid #888;
}
-div.imgdiff-slider-inner {
+div.imgdiff-slider-resizeable {
position: absolute;
- bottom: 0;
- margin: 0;
- padding: 0;
- width : 1000%;
- height: 1px;
- border: none;
- background: transparent;
+ top: 0px;
+ left: 0px;
+ bottom: 0px;
+ width: 18px;
+ min-width: 18px;
+ max-width: 100%;
+ overflow: hidden;
+ resize: horizontal;
+ border-right: 1px solid #888;
+ /* The "handle" */
+ background-image: linear-gradient(to right, white, white);
+ background-size: 18px 18px;
+ background-position: top right;
+ background-repeat: no-repeat;
+ cursor: ew-resize;
+}
+
+/* Provides the *left* border of the "handle" */
+div.imagediff-slider-left {
+ position: absolute;
+ top: 0px;
+ right: 0px;
+ bottom: 0px;
+ margin-right:18px;
+ border-right: 1px solid #888;
}
/* End image diffs */
|