Skip to content

Commit 896911f

Browse files
miaow2miaow2
committed
Add dark theme for diff
1 parent b996cf1 commit 896911f

File tree

2 files changed

+411
-2
lines changed

2 files changed

+411
-2
lines changed

‎netbox_config_diff/static/netbox_config_diff/diff2html.dark.min.css

Lines changed: 398 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,398 @@
1+
.d2h-wrapper {
2+
text-align: left
3+
}
4+
5+
.d2h-file-header {
6+
background-color: #f7f7f7;
7+
border-bottom: 1px solid #d8d8d8;
8+
display: -webkit-box;
9+
display: -ms-flexbox;
10+
display: flex;
11+
font-family: Source Sans Pro, Helvetica Neue, Helvetica, Arial, sans-serif;
12+
height: 35px;
13+
padding: 5px 10px
14+
}
15+
16+
.d2h-file-header.d2h-sticky-header {
17+
position: sticky;
18+
top: 0;
19+
z-index: 1
20+
}
21+
22+
.d2h-file-stats {
23+
display: -webkit-box;
24+
display: -ms-flexbox;
25+
display: flex;
26+
font-size: 14px;
27+
margin-left: auto
28+
}
29+
30+
.d2h-lines-added {
31+
border: 1px solid #b4e2b4;
32+
border-radius: 5px 0 0 5px;
33+
color: #399839;
34+
padding: 2px;
35+
text-align: right;
36+
vertical-align: middle
37+
}
38+
39+
.d2h-lines-deleted {
40+
border: 1px solid #e9aeae;
41+
border-radius: 0 5px 5px 0;
42+
color: #c33;
43+
margin-left: 1px;
44+
padding: 2px;
45+
text-align: left;
46+
vertical-align: middle
47+
}
48+
49+
.d2h-file-name-wrapper {
50+
-webkit-box-align: center;
51+
-ms-flex-align: center;
52+
align-items: center;
53+
display: -webkit-box;
54+
display: -ms-flexbox;
55+
display: flex;
56+
font-size: 15px;
57+
width: 100%
58+
}
59+
60+
.d2h-file-name {
61+
overflow-x: hidden;
62+
text-overflow: ellipsis;
63+
white-space: nowrap
64+
}
65+
66+
.d2h-file-wrapper {
67+
border: 1px solid #ddd;
68+
border-radius: 3px;
69+
margin-bottom: 1em
70+
}
71+
72+
.d2h-file-collapse {
73+
-webkit-box-pack: end;
74+
-ms-flex-pack: end;
75+
-webkit-box-align: center;
76+
-ms-flex-align: center;
77+
align-items: center;
78+
border: 1px solid #ddd;
79+
border-radius: 3px;
80+
cursor: pointer;
81+
display: none;
82+
font-size: 12px;
83+
justify-content: flex-end;
84+
padding: 4px 8px
85+
}
86+
87+
.d2h-file-collapse.d2h-selected {
88+
background-color: #c8e1ff
89+
}
90+
91+
.d2h-file-collapse-input {
92+
margin: 0 4px 0 0
93+
}
94+
95+
.d2h-diff-table {
96+
border-collapse: collapse;
97+
font-family: Menlo, Consolas, monospace;
98+
font-size: 13px;
99+
width: 100%
100+
}
101+
102+
.d2h-files-diff {
103+
display: -webkit-box;
104+
display: -ms-flexbox;
105+
display: flex;
106+
width: 100%
107+
}
108+
109+
.d2h-file-diff {
110+
overflow-y: hidden
111+
}
112+
113+
.d2h-file-diff.d2h-d-none,
114+
.d2h-files-diff.d2h-d-none {
115+
display: none
116+
}
117+
118+
.d2h-file-side-diff {
119+
display: inline-block;
120+
overflow-x: scroll;
121+
overflow-y: hidden;
122+
width: 50%
123+
}
124+
125+
.d2h-code-line {
126+
padding: 0 8em;
127+
width: calc(100% - 16em)
128+
}
129+
130+
.d2h-code-line,
131+
.d2h-code-side-line {
132+
display: inline-block;
133+
-webkit-user-select: none;
134+
-moz-user-select: none;
135+
-ms-user-select: none;
136+
user-select: none;
137+
white-space: nowrap
138+
}
139+
140+
.d2h-code-side-line {
141+
padding: 0 4.5em;
142+
width: calc(100% - 9em)
143+
}
144+
145+
.d2h-code-line-ctn {
146+
word-wrap: normal;
147+
background: none;
148+
display: inline-block;
149+
padding: 0;
150+
-webkit-user-select: text;
151+
-moz-user-select: text;
152+
-ms-user-select: text;
153+
user-select: text;
154+
vertical-align: middle;
155+
white-space: pre;
156+
width: 100%
157+
}
158+
159+
.d2h-code-line del,
160+
.d2h-code-side-line del {
161+
background-color: #a07c7e;
162+
border-radius: .2em;
163+
display: inline-block;
164+
margin-top: -1px;
165+
text-decoration: none
166+
}
167+
168+
.d2h-code-line ins,
169+
.d2h-code-side-line ins {
170+
background-color: #177016;
171+
border-radius: .2em;
172+
display: inline-block;
173+
margin-top: -1px;
174+
text-align: left;
175+
text-decoration: none
176+
}
177+
178+
.d2h-code-line-prefix {
179+
word-wrap: normal;
180+
background: none;
181+
display: inline;
182+
padding: 0;
183+
white-space: pre
184+
}
185+
186+
.line-num1 {
187+
float: left
188+
}
189+
190+
.line-num1,
191+
.line-num2 {
192+
-webkit-box-sizing: border-box;
193+
box-sizing: border-box;
194+
overflow: hidden;
195+
padding: 0 .5em;
196+
text-overflow: ellipsis;
197+
width: 3.5em
198+
}
199+
200+
.line-num2 {
201+
float: right
202+
}
203+
204+
.d2h-code-linenumber {
205+
background-color: #fff;
206+
border: solid #eee;
207+
border-width: 0 1px;
208+
-webkit-box-sizing: border-box;
209+
box-sizing: border-box;
210+
color: rgba(0, 0, 0, .3);
211+
cursor: pointer;
212+
display: inline-block;
213+
position: absolute;
214+
text-align: right;
215+
width: 7.5em
216+
}
217+
218+
.d2h-code-linenumber:after {
219+
content: "\200b"
220+
}
221+
222+
.d2h-code-side-linenumber {
223+
background-color: #272822;
224+
border: solid #eee;
225+
border-width: 0 1px;
226+
-webkit-box-sizing: border-box;
227+
box-sizing: border-box;
228+
color: #d0d0d0;
229+
cursor: pointer;
230+
display: inline-block;
231+
overflow: hidden;
232+
padding: 0 .5em;
233+
position: absolute;
234+
text-align: right;
235+
text-overflow: ellipsis;
236+
width: 4em
237+
}
238+
239+
.d2h-code-side-linenumber:after {
240+
content: "\200b"
241+
}
242+
243+
.d2h-code-side-emptyplaceholder,
244+
.d2h-emptyplaceholder {
245+
background-color: #272822;
246+
border-color: #e1e1e1;
247+
color: #d0d0d0;
248+
}
249+
250+
.d2h-code-line-prefix,
251+
.d2h-code-linenumber,
252+
.d2h-code-side-linenumber,
253+
.d2h-emptyplaceholder {
254+
-webkit-user-select: none;
255+
-moz-user-select: none;
256+
-ms-user-select: none;
257+
user-select: none
258+
}
259+
260+
.d2h-code-linenumber,
261+
.d2h-code-side-linenumber {
262+
direction: rtl
263+
}
264+
265+
.d2h-del {
266+
background-color: #7d4e50;
267+
border-color: #e9aeae
268+
}
269+
270+
.d2h-ins {
271+
background-color: #748a74;
272+
border-color: #b4e2b4
273+
}
274+
275+
.d2h-info {
276+
background-color: #272822;
277+
border-color: #d5e4f2;
278+
color: #d0d0d0
279+
}
280+
281+
.d2h-file-diff .d2h-del.d2h-change {
282+
background-color: #fdf2d0
283+
}
284+
285+
.d2h-file-diff .d2h-ins.d2h-change {
286+
background-color: #ded
287+
}
288+
289+
.d2h-file-list-wrapper {
290+
margin-bottom: 10px
291+
}
292+
293+
.d2h-file-list-wrapper a {
294+
color: #3572b0;
295+
text-decoration: none
296+
}
297+
298+
.d2h-file-list-wrapper a:visited {
299+
color: #3572b0
300+
}
301+
302+
.d2h-file-list-header {
303+
text-align: left
304+
}
305+
306+
.d2h-file-list-title {
307+
font-weight: 700
308+
}
309+
310+
.d2h-file-list-line {
311+
display: -webkit-box;
312+
display: -ms-flexbox;
313+
display: flex;
314+
text-align: left
315+
}
316+
317+
.d2h-file-list {
318+
display: block;
319+
list-style: none;
320+
margin: 0;
321+
padding: 0
322+
}
323+
324+
.d2h-file-list>li {
325+
border-bottom: 1px solid #ddd;
326+
margin: 0;
327+
padding: 5px 10px
328+
}
329+
330+
.d2h-file-list>li:last-child {
331+
border-bottom: none
332+
}
333+
334+
.d2h-file-switch {
335+
cursor: pointer;
336+
display: none;
337+
font-size: 10px
338+
}
339+
340+
.d2h-icon {
341+
fill: currentColor;
342+
margin-right: 10px;
343+
vertical-align: middle
344+
}
345+
346+
.d2h-deleted {
347+
color: #c33
348+
}
349+
350+
.d2h-added {
351+
color: #399839
352+
}
353+
354+
.d2h-changed {
355+
color: #d0b44c
356+
}
357+
358+
.d2h-moved {
359+
color: #3572b0
360+
}
361+
362+
.d2h-tag {
363+
background-color: #fff;
364+
display: -webkit-box;
365+
display: -ms-flexbox;
366+
display: flex;
367+
font-size: 10px;
368+
margin-left: 5px;
369+
padding: 0 2px
370+
}
371+
372+
.d2h-deleted-tag {
373+
border: 1px solid #c33
374+
}
375+
376+
.d2h-added-tag {
377+
border: 1px solid #399839
378+
}
379+
380+
.d2h-changed-tag {
381+
border: 1px solid #d0b44c
382+
}
383+
384+
.d2h-moved-tag {
385+
border: 1px solid #3572b0
386+
}
387+
388+
span {
389+
color: #d0d0d0;
390+
}
391+
392+
del {
393+
background-color: #a07c7e;
394+
}
395+
396+
ins {
397+
background-color: #177016;
398+
}

0 commit comments

Comments
 (0)