Skip to content

Commit 5044cb3

Browse files
AllanJardAllanJard
committed
New: Dark mode support for DateTime picker. Enabled by adding the class dark to the html element
1 parent 99c7081 commit 5044cb3

File tree

2 files changed

+201
-33
lines changed

2 files changed

+201
-33
lines changed

‎css/dataTables.dateTime.scss

Lines changed: 115 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,9 @@ div.dt-datetime {
77
z-index: 2050;
88
border: 1px solid #ccc;
99
box-shadow: 0 5px 15px -5px rgba(0,0,0,.5);
10-
padding: 0 20px 6px 20px;
10+
padding: 6px 20px;
1111
width: 275px;
12+
border-radius: 5px;
1213

1314
&.inline {
1415
position: relative;
@@ -195,16 +196,15 @@ div.dt-datetime {
195196

196197

197198
div.dt-datetime-iconLeft,
198-
div.dt-datetime-iconRight,
199-
div.dt-datetime-iconUp,
200-
div.dt-datetime-iconDown {
199+
div.dt-datetime-iconRight {
201200
width: 30px;
202201
height: 30px;
203202
background-position: center;
204203
background-repeat: no-repeat;
205204
opacity: 0.3;
206205
overflow: hidden;
207206
box-sizing: border-box;
207+
border: 1px solid transparent;
208208

209209
&:hover {
210210
border: 1px solid #ccc;
@@ -227,24 +227,44 @@ div.dt-datetime {
227227
position: absolute;
228228
top: 5px;
229229
left: 5px;
230-
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==');
230+
231+
button {
232+
position: relative;
233+
z-index: 1;
234+
}
235+
236+
&:after {
237+
position: absolute;
238+
top: 7px;
239+
left: 10px;
240+
display: block;
241+
content: "";
242+
border-top: 7px solid transparent;
243+
border-right: 7px solid black;
244+
border-bottom: 7px solid transparent;
245+
}
231246
}
232247

233248
div.dt-datetime-iconRight {
234249
position: absolute;
235250
top: 5px;
236251
right: 5px;
237-
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=');
238-
}
239252

240-
div.dt-datetime-iconUp {
241-
height: 20px;
242-
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAALCAMAAABf9c24AAAAFVBMVEX///99fX1+fn57e3t6enoAAAAAAAC73bqPAAAABnRSTlMAYmJkZt92bnysAAAAL0lEQVR4AWOgJmBhxCvLyopHnpmVjY2VCadeoCxIHrcsWJ4RlyxCHlMWCTBRJxwAjrIBDMWSiM0AAAAASUVORK5CYII=');
243-
}
253+
button {
254+
position: relative;
255+
z-index: 1;
256+
}
244257

245-
div.dt-datetime-iconDown {
246-
height: 20px;
247-
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAALCAMAAABf9c24AAAAFVBMVEX///99fX1+fn57e3t6enoAAAAAAAC73bqPAAAABnRSTlMAYmJkZt92bnysAAAAMElEQVR4AWOgDmBiRQIsmPKMrGxQgJDFlEfIYpoPk8Utz8qM232MYFfhkQfKUg8AANefAQxecJ58AAAAAElFTkSuQmCC');
258+
&:after {
259+
position: absolute;
260+
top: 7px;
261+
left: 12px;
262+
display: block;
263+
content: "";
264+
border-top: 7px solid transparent;
265+
border-left: 7px solid black;
266+
border-bottom: 7px solid transparent;
267+
}
248268
}
249269
}
250270

@@ -256,4 +276,84 @@ div.dt-datetime-error {
256276
line-height: 1.25em;
257277
text-align: center;
258278
color: #b11f1f;
259-
}
279+
}
280+
281+
282+
html.dark {
283+
div.dt-datetime {
284+
border: 1px solid rgb(89, 91, 94);
285+
background-color: rgb(33, 37, 41);
286+
box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.8);
287+
288+
table {
289+
th {
290+
color: #ccc;
291+
}
292+
293+
td {
294+
color: #eee;
295+
}
296+
297+
td.selectable {
298+
background: rgb(55, 60, 65);
299+
300+
&.disabled {
301+
color: #aaa;
302+
background: rgb(23, 27, 31);
303+
304+
button:hover {
305+
color: #aaa;
306+
background: rgb(23, 27, 31);
307+
}
308+
}
309+
310+
&.now {
311+
background-color: #ddd;
312+
}
313+
314+
&.selected button {
315+
background: rgb(110, 168, 254);
316+
color: black;
317+
}
318+
319+
button:hover {
320+
background: #ff8000;
321+
color: black;
322+
}
323+
}
324+
}
325+
326+
div.dt-datetime-label {
327+
&:hover {
328+
border: 1px solid transparent;
329+
background-color: rgba(255, 255, 255, 0.1);
330+
}
331+
}
332+
333+
div.dt-datetime-iconLeft,
334+
div.dt-datetime-iconRight,
335+
div.dt-datetime-iconUp,
336+
div.dt-datetime-iconDown {
337+
&:hover {
338+
border: 1px solid transparent;
339+
background-color: rgba(255, 255, 255, 0.1);
340+
}
341+
}
342+
343+
div.dt-datetime-iconLeft {
344+
&:after {
345+
border-right-color: white;
346+
}
347+
}
348+
349+
div.dt-datetime-iconRight {
350+
&:after {
351+
border-left-color: white;
352+
}
353+
}
354+
}
355+
356+
div.dt-datetime-error {
357+
color: #b11f1f;
358+
}
359+
}

‎dist/dataTables.dateTime.css

Lines changed: 86 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,9 @@ div.dt-datetime {
44
z-index: 2050;
55
border: 1px solid #ccc;
66
box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.5);
7-
padding: 0 20px 6px 20px;
7+
padding: 6px 20px;
88
width: 275px;
9+
border-radius: 5px;
910
}
1011
div.dt-datetime.inline {
1112
position: relative;
@@ -155,30 +156,25 @@ div.dt-datetime div.dt-datetime-time div.dt-datetime-timeblock {
155156
vertical-align: middle;
156157
}
157158
div.dt-datetime div.dt-datetime-iconLeft,
158-
div.dt-datetime div.dt-datetime-iconRight,
159-
div.dt-datetime div.dt-datetime-iconUp,
160-
div.dt-datetime div.dt-datetime-iconDown {
159+
div.dt-datetime div.dt-datetime-iconRight {
161160
width: 30px;
162161
height: 30px;
163162
background-position: center;
164163
background-repeat: no-repeat;
165164
opacity: 0.3;
166165
overflow: hidden;
167166
box-sizing: border-box;
167+
border: 1px solid transparent;
168168
}
169169
div.dt-datetime div.dt-datetime-iconLeft:hover,
170-
div.dt-datetime div.dt-datetime-iconRight:hover,
171-
div.dt-datetime div.dt-datetime-iconUp:hover,
172-
div.dt-datetime div.dt-datetime-iconDown:hover {
170+
div.dt-datetime div.dt-datetime-iconRight:hover {
173171
border: 1px solid #ccc;
174172
border-radius: 2px;
175173
background-color: #f0f0f0;
176174
opacity: 0.6;
177175
}
178176
div.dt-datetime div.dt-datetime-iconLeft button,
179-
div.dt-datetime div.dt-datetime-iconRight button,
180-
div.dt-datetime div.dt-datetime-iconUp button,
181-
div.dt-datetime div.dt-datetime-iconDown button {
177+
div.dt-datetime div.dt-datetime-iconRight button {
182178
border: none;
183179
background: transparent;
184180
text-indent: 30px;
@@ -190,21 +186,39 @@ div.dt-datetime div.dt-datetime-iconLeft {
190186
position: absolute;
191187
top: 5px;
192188
left: 5px;
193-
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==");
189+
}
190+
div.dt-datetime div.dt-datetime-iconLeft button {
191+
position: relative;
192+
z-index: 1;
193+
}
194+
div.dt-datetime div.dt-datetime-iconLeft:after {
195+
position: absolute;
196+
top: 7px;
197+
left: 10px;
198+
display: block;
199+
content: "";
200+
border-top: 7px solid transparent;
201+
border-right: 7px solid black;
202+
border-bottom: 7px solid transparent;
194203
}
195204
div.dt-datetime div.dt-datetime-iconRight {
196205
position: absolute;
197206
top: 5px;
198207
right: 5px;
199-
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=");
200208
}
201-
div.dt-datetime div.dt-datetime-iconUp {
202-
height: 20px;
203-
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAALCAMAAABf9c24AAAAFVBMVEX///99fX1+fn57e3t6enoAAAAAAAC73bqPAAAABnRSTlMAYmJkZt92bnysAAAAL0lEQVR4AWOgJmBhxCvLyopHnpmVjY2VCadeoCxIHrcsWJ4RlyxCHlMWCTBRJxwAjrIBDMWSiM0AAAAASUVORK5CYII=");
209+
div.dt-datetime div.dt-datetime-iconRight button {
210+
position: relative;
211+
z-index: 1;
204212
}
205-
div.dt-datetime div.dt-datetime-iconDown {
206-
height: 20px;
207-
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAALCAMAAABf9c24AAAAFVBMVEX///99fX1+fn57e3t6enoAAAAAAAC73bqPAAAABnRSTlMAYmJkZt92bnysAAAAMElEQVR4AWOgDmBiRQIsmPKMrGxQgJDFlEfIYpoPk8Utz8qM232MYFfhkQfKUg8AANefAQxecJ58AAAAAElFTkSuQmCC");
213+
div.dt-datetime div.dt-datetime-iconRight:after {
214+
position: absolute;
215+
top: 7px;
216+
left: 12px;
217+
display: block;
218+
content: "";
219+
border-top: 7px solid transparent;
220+
border-left: 7px solid black;
221+
border-bottom: 7px solid transparent;
208222
}
209223

210224
div.dt-datetime-error {
@@ -215,4 +229,58 @@ div.dt-datetime-error {
215229
line-height: 1.25em;
216230
text-align: center;
217231
color: #b11f1f;
232+
}
233+
234+
html.dark div.dt-datetime {
235+
border: 1px solid #595b5e;
236+
background-color: #212529;
237+
box-shadow: 3px 4px 10px 1px rgba(0, 0, 0, 0.8);
238+
}
239+
html.dark div.dt-datetime table th {
240+
color: #ccc;
241+
}
242+
html.dark div.dt-datetime table td {
243+
color: #eee;
244+
}
245+
html.dark div.dt-datetime table td.selectable {
246+
background: #373c41;
247+
}
248+
html.dark div.dt-datetime table td.selectable.disabled {
249+
color: #aaa;
250+
background: #171b1f;
251+
}
252+
html.dark div.dt-datetime table td.selectable.disabled button:hover {
253+
color: #aaa;
254+
background: #171b1f;
255+
}
256+
html.dark div.dt-datetime table td.selectable.now {
257+
background-color: #ddd;
258+
}
259+
html.dark div.dt-datetime table td.selectable.selected button {
260+
background: #6ea8fe;
261+
color: black;
262+
}
263+
html.dark div.dt-datetime table td.selectable button:hover {
264+
background: #ff8000;
265+
color: black;
266+
}
267+
html.dark div.dt-datetime div.dt-datetime-label:hover {
268+
border: 1px solid transparent;
269+
background-color: rgba(255, 255, 255, 0.1);
270+
}
271+
html.dark div.dt-datetime div.dt-datetime-iconLeft:hover,
272+
html.dark div.dt-datetime div.dt-datetime-iconRight:hover,
273+
html.dark div.dt-datetime div.dt-datetime-iconUp:hover,
274+
html.dark div.dt-datetime div.dt-datetime-iconDown:hover {
275+
border: 1px solid transparent;
276+
background-color: rgba(255, 255, 255, 0.1);
277+
}
278+
html.dark div.dt-datetime div.dt-datetime-iconLeft:after {
279+
border-right-color: white;
280+
}
281+
html.dark div.dt-datetime div.dt-datetime-iconRight:after {
282+
border-left-color: white;
283+
}
284+
html.dark div.dt-datetime-error {
285+
color: #b11f1f;
218286
}

0 commit comments

Comments
 (0)