Line borders for readability
Does not look so good on IE yet...
| 107 | chunk.lines.each do |line| | chunk.lines.each do |line| | 107 |
|---|---|---|---|
| 108 | b.tr do | b.tr do | 108 |
| 109 | b.th {b << (line.original_position || ' ').to_s} | b.th {b << (line.original_position || ' ').to_s} | 109 |
| 110 | b.td :class => 'l' do | b.td {b.pre {b << (h(line.original_text) || ' ')}} | 110 |
| 111 | b.pre {b << (h(line.original_text) || ' ')} | ||
| 112 | end | ||
| 113 | b.td {b.pre {b << (h(line.modified_text) || ' ')}} | b.td {b.pre {b << (h(line.modified_text) || ' ')}} | 111 |
| 114 | b.th {b << (line.modified_position || ' ').to_s} | b.th {b << (line.modified_position || ' ').to_s} | 112 |
| 115 | end | end | 113 |
| 152 | .changed { background:#FFD; } | .changed { background:#FFD; } | 152 |
|---|---|---|---|
| 153 | 153 | ||
| 154 | table.diff { | table.diff { | 154 |
| 155 | border: solid #999; | border: 0px none; | 155 |
| 156 | border-width: 1px 0 1px 0; | border-bottom: 1px solid #999; | 156 |
| 157 | border-collapse: collapse; | border-collapse: separate; | 157 |
| 158 | font-family: monospace; | font-family: monospace; | 158 |
| 159 | font-size: 0.8em; | font-size: 0.8em; | 159 |
| 160 | margin: 0 0 1em 0; | margin: 0 0 1em 0; | 160 |
empty-cells: show; | 161 | ||
| 161 | } | } | 162 |
| 162 | 163 | ||
| 163 | table.diff pre { | table.diff pre { | 164 |
| 7 more lines | |||
| 171 | word-wrap: break-word; /* IE 5.5+ */ | word-wrap: break-word; /* IE 5.5+ */ | 172 |
| 172 | } | } | 173 |
| 173 | 174 | ||
| 174 | table.diff td, th { padding: .05em .4em .05em .4em; } | table.diff td, table.diff th { | 175 |
padding: .05em .4em .05em .4em; | 176 | ||
border-style: solid solid none none; | 177 | ||
border-width: 1px 1px 0px 1px; | 178 | ||
border-color: #ddd #999 #ddd #999; | 179 | ||
} | 180 | ||
| 175 | 181 | ||
| 176 | table.diff th { | table.diff th { | 182 |
| 177 | font-weight: normal; | font-weight: normal; | 183 |
| 178 | text-align: center; | text-align: center; | 184 |
| 179 | border: solid #999; | ||
| 180 | border-width: 0 1px 0 1px; | ||
| 181 | } | } | 185 |
| 182 | 186 | ||
| 183 | table.diff td.l { border-right: 1px solid #999; } | table.diff th:first-child { border-left-style: solid } | 187 |
| 184 | 188 | ||
| 185 | table.diff col.left { width: 50%; } | table.diff tr:first-child td, table.diff tr:first-child th { | 189 |
border-top: 1px solid #999 | 190 | ||
} | 191 | ||
| 186 | 192 | ||
table.diff col.left { width: 50%; } | 193 | ||
| 187 | table.diff col.right { width: 50%; } | table.diff col.right { width: 50%; } | 194 |
| 188 | 195 | ||
| 189 | table.diff tbody { | ||
| 190 | border: #aaa solid; | ||
| 191 | border-width: 1px 0 1px 0; | ||
| 192 | } | ||
| 193 | |||
| 194 | tbody.unchanged { | tbody.unchanged { | 196 |
| 195 | background: #FFF; | background: #FFF; | 197 |
| 196 | border: none; | border: none; | 198 |
| 197 | } | } | 199 |
| 198 | 200 | ||
| 199 | tbody.modification { background: #ffffb8; } | tbody.modification { background: #ffffb8; } | 201 |
tbody.modification th, tbody.modification td { border-top-color: #dd9 } | 202 | ||
| 200 | 203 | ||
| 201 | tbody.addition { background: #b8ffb8; } | tbody.addition { background: #b8ffb8; } | 204 |
tbody.addition th, tbody.addition td { border-top-color: #9d9 } | 205 | ||
| 202 | 206 | ||
| 203 | tbody.deletion { background: #ffb8b8; } | tbody.deletion { background: #ffb8b8; } | 207 |
tbody.deletion th, tbody.deletion td { border-top-color: #d99 } | 208 | ||
| 204 | 209 | ||
| 205 | tbody.separator { | tbody.separator { | 210 |
| 206 | background: #d0d0c4; | background: #d0d0c4; | 211 |