From 3e1336cc6d32511daf2acab9c45a517cd3b10058 Mon Sep 17 00:00:00 2001
From: Tom <tw201207@gmail.com>
Date: Wed, 12 Nov 2014 14:31:12 -0500
Subject: [PATCH] Opacity adjustments for image diffs
---
src/main/resources/gitblit.css | 240 ++++++++++++++++++++++++++++++++++++++++++++---------------
1 files changed, 177 insertions(+), 63 deletions(-)
diff --git a/src/main/resources/gitblit.css b/src/main/resources/gitblit.css
index ba6f534..bdab205 100644
--- a/src/main/resources/gitblit.css
+++ b/src/main/resources/gitblit.css
@@ -38,6 +38,19 @@
font-weight: bold;
}
+.gray {
+ color: #888;
+}
+
+.octicon-centered {
+ text-align: center;
+ width: 16px;
+}
+
+tr:hover .octicon-centered {
+ color:#eee;
+}
+
.label a.bugtraq {
font-weight: normal;
color: white;
@@ -237,14 +250,13 @@
}
.repositorynavbar {
- background-color: #fbfbfb;
+ background-color: #f8f8f8;
border-bottom: 1px solid #ccc;
margin-bottom: 10px;
}
.repositorynavbar .title {
- line-height: 32px;
- padding: 5px 0px;
+ padding: 10px 0px;
}
.repositorynavbar .repository {
@@ -1338,19 +1350,6 @@
font-family: inherit;
}
-div.diff.hunk_header {
- -moz-border-bottom-colors: none;
- -moz-border-image: none;
- -moz-border-left-colors: none;
- -moz-border-right-colors: none;
- -moz-border-top-colors: none;
- border-color: #FFE0FF;
- border-style: dotted;
- border-width: 1px 0 0;
- margin-top: 2px;
- font-family: inherit;
-}
-
span.diff.hunk_info {
background-color: #FFEEFF;
color: #990099;
@@ -1362,61 +1361,171 @@
font-family: inherit;
}
-div.diff.add2 {
- background-color: #DDFFDD;
- font-family: inherit;
+.diff-cell {
+ margin: 0px;
+ padding: 0 2px;
+ border: 0;
+ border-left: 1px solid #bbb;
}
-div.diff.remove2 {
+.add2 {
+ background-color: #DDFFDD;
+}
+
+.remove2 {
background-color: #FFDDDD;
- font-family: inherit;
}
-div.diff table {
+.context2 {
+ background-color: #FEFEFE;
+}
+
+.trailingws-add {
+ background-color: #99FF99;
+}
+
+.trailingws-sub {
+ background-color: #FF9999;
+}
+
+div.diff > table {
border-radius: 0;
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
width: 100%;
}
-div.diff table th, div.diff table td {
- margin: 0px;
- padding: 0px;
- font-family: monospace;
- border: 0;
-}
-
-div.diff table th {
- background-color: #f0f0f0;
+.diff-line {
+ background-color: #fbfbfb;
text-align: center;
color: #999;
- padding-left: 5px;
- padding-right: 5px;
- width: 30px;
+ padding-left: 2px;
+ padding-right: 2px;
+ width: 3em; /* Font-size relative! */
+ min-width: 3em;
}
-div.diff table th.header {
- background-color: #D2C3AF;
- border-right: 0px;
- border-bottom: 1px solid #808080;
- font-family: inherit;
- font-size:0.9em;
- color: black;
- padding: 2px;
- text-align: left;
+.diff-line:before {
+ content: attr(data-lineno);
}
-div.diff table td.hunk_header {
+.diff-state {
+ background-color: #fbfbfb;
+ text-align: center;
+ color: #999;
+ padding-left: 2px;
+ padding-right: 2px;
+ width: 0.5em; /* Font-size relative! */
+}
+
+.diff-state-add:before {
+ color: green;
+ font-weight: bold;
+ content: '+';
+}
+
+.diff-state-sub:before {
+ color: red;
+ font-weight: bold;
+ content: '-';
+}
+
+.hunk_header {
background-color: #dAe2e5 !important;
+ border-left: 1px solid #bbb;
border-top: 1px solid #bac2c5;
border-bottom: 1px solid #bac2c5;
color: #555;
}
-div.diff table td {
- border-left: 1px solid #bbb;
- background-color: #fbfbfb;
+/* Image diffs.
+ Kudos to Lea Verou: http://lea.verou.me/2014/07/image-comparison-slider-with-pure-css/
+ Slightly modified by Tom to allow moving the slider fully at the left edge of the images. */
+div.imgdiff {
+ margin: 5px 2px;
+ position: relative;
+ display: inline-block;
+ line-height: 0;
+ padding-left: 18px;
}
+
+/* Note: width defines the initial position of the slider. Would have liked to have it
+ at 50% initially, but that fails on webkit, which refuses to go below the specified
+ width. (min-width won't help.) This is known behavior of webkit, see
+ https://codereview.chromium.org/239983004 and https://bugs.webkit.org/show_bug.cgi?id=72948
+ There is a hack (setting width to 1px in :hover) to work around this, but that causes
+ ugly screen flicker and makes for a dreadful UI. We're better off setting the slider
+ to the far left initially. */
+div.imgdiff-left {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ width: 18px;
+ max-width: 100%;
+ overflow: hidden;
+ resize: horizontal;
+ /* Some border that should be visible on most images, combined of a dark color (red)
+ and white in case the image was all red itself or used other colors that would make
+ a thin red line hard to make out. */
+ border-right: 1px solid red;
+ box-shadow: 1px 0px 0px 0px white;
+}
+
+div.imgdiff-left:before {
+ content: '';
+ position: absolute;
+ right: 0;
+ bottom: 0;
+ width: 13px;
+ height: 13px;
+ background: linear-gradient(-45deg, red 50%, transparent 0);
+ background-clip: content-box;
+ cursor: ew-resize;
+}
+
+img.imgdiff-left {
+ margin-left: 18px; /* Compensate for padding on outer div. */
+ user-select: none;
+}
+
+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;
+}
+
+.diff-img {
+ margin: 2px;
+}
+
+div.imgdiff-slider {
+ display: inline-block;
+ position: relative;
+ margin: 0px 2px;
+ width: 420px;
+ max-width: 420px;
+ height: 24px;
+ min-height: 18px;
+ overflow-x: scroll;
+ background: linear-gradient(to right, #F00, #0F0);
+}
+
+div.imgdiff-slider-inner {
+ position: absolute;
+ bottom: 0;
+ margin: 0;
+ padding: 0;
+ width : 1000%;
+ height: 1px;
+ border: none;
+ background: transparent;
+}
+
+/* End image diffs */
td.changeType {
width: 15px;
@@ -2085,67 +2194,72 @@
color: #815b3a;
}
.severity-catastrophic {
- color:#CC79A7;
+ color:#D51900;
}
.severity-catastrophic:after {
font-family: Helvetica,arial,freesans,clean,sans-serif ;
- content: "Ca";
+ content: "●●●●●";
font-weight:900;
- font-size:.6em;
+ font-size:.45em;
font-variant:small-caps;
display:flex;
+ white-space: pre;
}
.severity-critical {
- color:#D55E00;
+ color:#D55900;
}
.severity-critical:after {
font-family: Helvetica,arial,freesans,clean,sans-serif ;
- content: "c";
+ content: " ●●●●";
font-weight:900;
- font-size:.6em;
+ font-size:.45em;
font-variant:small-caps;
display:flex;
+ white-space: pre;
}
.severity-serious {
color:#E69F00;
}
.severity-serious:after {
font-family: Helvetica,arial,freesans,clean,sans-serif ;
- content: "s";
+ content: " ●●●";
font-weight:900;
- font-size:.6em;
+ font-size:.45em;
font-variant:small-caps;
display:flex;
+ white-space: pre;
}
.severity-minor {
- color:#0072B2;
+ color:#009E73;
}
.severity-minor:after {
font-family: Helvetica,arial,freesans,clean,sans-serif ;
- content: "m";
+ content: " ●●";
font-weight:900;
- font-size:.6em;
+ font-size:.45em;
font-variant:small-caps;
display:flex;
+ white-space: pre;
}
.severity-negligible {
- color:#009E73;
+ color:#0072B2;
}
.severity-negligible:after {
font-family: Helvetica,arial,freesans,clean,sans-serif ;
- content: "n";
+ content: " ●";
font-weight:900;
- font-size:.6em;
+ font-size:.45em;
font-variant:small-caps;
display:flex;
+ white-space: pre;
}
.severity-unrated {
}
.priority-urgent {
- color:#CC79A7;
+ color:#D51900;
}
.priority-high {
- color:#D55E00;
+ color:#D55900;
}
.priority-normal {
}
--
Gitblit v1.9.1