Change datepicker a bit

This commit is contained in:
Tom Hubrecht 2020-12-19 21:34:14 +01:00
parent b284d65d3e
commit bffccdc055

View file

@ -1,12 +1,12 @@
.xdsoft_datetimepicker { .xdsoft_datetimepicker {
box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.506); box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.506);
background: #fff; background: #fff;
border-bottom: 1px solid #bbb; border-bottom: 1px solid #bbb;
border-left: 1px solid #ccc; border-left: 1px solid #ccc;
border-right: 1px solid #ccc; border-right: 1px solid #ccc;
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
color: #333; color: #333;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
padding: 8px; padding: 8px;
padding-left: 0; padding-left: 0;
padding-top: 2px; padding-top: 2px;
@ -16,6 +16,7 @@
box-sizing: border-box; box-sizing: border-box;
display: none; display: none;
} }
.xdsoft_datetimepicker.xdsoft_rtl { .xdsoft_datetimepicker.xdsoft_rtl {
padding: 8px 0 8px 8px; padding: 8px 0 8px 8px;
} }
@ -45,8 +46,13 @@
user-select: none; user-select: none;
} }
.xdsoft_noselect::selection { background: transparent } .xdsoft_noselect::selection {
.xdsoft_noselect::-moz-selection { background: transparent } background: transparent
}
.xdsoft_noselect::-moz-selection {
background: transparent
}
.xdsoft_datetimepicker.xdsoft_inline { .xdsoft_datetimepicker.xdsoft_inline {
display: inline-block; display: inline-block;
@ -61,11 +67,13 @@
margin: 0; margin: 0;
} }
.xdsoft_datetimepicker .xdsoft_datepicker, .xdsoft_datetimepicker .xdsoft_timepicker { .xdsoft_datetimepicker .xdsoft_datepicker,
.xdsoft_datetimepicker .xdsoft_timepicker {
display: none; display: none;
} }
.xdsoft_datetimepicker .xdsoft_datepicker.active, .xdsoft_datetimepicker .xdsoft_timepicker.active { .xdsoft_datetimepicker .xdsoft_datepicker.active,
.xdsoft_datetimepicker .xdsoft_timepicker.active {
display: block; display: block;
} }
@ -74,6 +82,7 @@
float: left; float: left;
margin-left: 8px; margin-left: 8px;
} }
.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_datepicker { .xdsoft_datetimepicker.xdsoft_rtl .xdsoft_datepicker {
float: right; float: right;
margin-right: 8px; margin-right: 8px;
@ -91,6 +100,7 @@
margin-left: 8px; margin-left: 8px;
margin-top: 0; margin-top: 0;
} }
.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker { .xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker {
float: right; float: right;
margin-right: 8px; margin-right: 8px;
@ -127,6 +137,7 @@
float: left; float: left;
background-position: -20px 0; background-position: -20px 0;
} }
.xdsoft_datetimepicker .xdsoft_today_button { .xdsoft_datetimepicker .xdsoft_today_button {
float: left; float: left;
background-position: -70px 0; background-position: -70px 0;
@ -169,6 +180,7 @@
margin-left: 14px; margin-left: 14px;
margin-top: 7px; margin-top: 7px;
} }
.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker .xdsoft_prev, .xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker .xdsoft_prev,
.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker .xdsoft_next { .xdsoft_datetimepicker.xdsoft_rtl .xdsoft_timepicker .xdsoft_next {
float: none; float: none;
@ -189,7 +201,7 @@
} }
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div { .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div {
background: #f5f5f5; background: #e9edf4;
border-top: 1px solid #ddd; border-top: 1px solid #ddd;
color: #666; color: #666;
font-size: 12px; font-size: 12px;
@ -248,11 +260,17 @@
overflow-y: hidden; overflow-y: hidden;
} }
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select.xdsoft_monthselect{ right: -7px } .xdsoft_datetimepicker .xdsoft_label>.xdsoft_select.xdsoft_monthselect {
.xdsoft_datetimepicker .xdsoft_label > .xdsoft_select.xdsoft_yearselect{ right: 2px } right: -7px
}
.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select.xdsoft_yearselect {
right: 2px
}
.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option:hover { .xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option:hover {
color: #fff; color: #fff;
background: #ff8000; background: #1d273a;
} }
.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option { .xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option {
@ -261,8 +279,8 @@
} }
.xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option.xdsoft_current { .xdsoft_datetimepicker .xdsoft_label>.xdsoft_select>div>.xdsoft_option.xdsoft_current {
background: #33aaff; background: #6681b2;
box-shadow: #178fe5 0 1px 3px 0 inset; box-shadow: #1d273a 0 1px 2px 0 inset;
color: #fff; color: #fff;
font-weight: 700; font-weight: 700;
} }
@ -295,9 +313,10 @@
height: 25px; height: 25px;
} }
.xdsoft_datetimepicker .xdsoft_calendar td,.xdsoft_datetimepicker .xdsoft_calendar th { .xdsoft_datetimepicker .xdsoft_calendar td,
.xdsoft_datetimepicker .xdsoft_calendar th {
width: 14.2857142%; width: 14.2857142%;
background: #f5f5f5; background: #e9edf4;
border: 1px solid #ddd; border: 1px solid #ddd;
color: #666; color: #666;
font-size: 12px; font-size: 12px;
@ -308,36 +327,33 @@
cursor: pointer; cursor: pointer;
height: 25px; height: 25px;
} }
.xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_calendar td,.xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_calendar th {
.xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_calendar td,
.xdsoft_datetimepicker.xdsoft_showweeks .xdsoft_calendar th {
width: 12.5%; width: 12.5%;
} }
.xdsoft_datetimepicker .xdsoft_calendar th { .xdsoft_datetimepicker .xdsoft_calendar th {
background: #f1f1f1; background: #f1f4f8;
} }
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today { .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_today {
color: #33aaff; color: #6681b2;
} }
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_highlighted_default { .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_highlighted_default {
background: #ffe9d2; background: #ffe9d2;
box-shadow: #ffb871 0 1px 4px 0 inset; box-shadow: #ffb871 0 1px 2px 0 inset;
color: #000;
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_highlighted_mint {
background: #c1ffc9;
box-shadow: #00dd1c 0 1px 4px 0 inset;
color: #000; color: #000;
} }
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current { .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current {
background: #33aaff; background: #6681b2;
box-shadow: #178fe5 0 1px 3px 0 inset; box-shadow: #1d273a 0 1px 2px 0 inset;
color: #fff; color: #fff;
font-weight: 700; font-weight: 700;1d273a
} }
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_other_month,
@ -356,14 +372,14 @@
.xdsoft_datetimepicker .xdsoft_calendar td:hover, .xdsoft_datetimepicker .xdsoft_calendar td:hover,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:hover { .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:hover {
color: #fff !important; color: #fff !important;
background: #ff8000 !important; background: #1d273a !important;
box-shadow: none !important; box-shadow: none !important;
} }
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current.xdsoft_disabled:hover, .xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current.xdsoft_disabled:hover,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current.xdsoft_disabled:hover { .xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current.xdsoft_disabled:hover {
background: #33aaff !important; background: #6681b2 !important;
box-shadow: #178fe5 0 1px 3px 0 inset !important; box-shadow: #178fe5 0 1px 2px 0 inset !important;
color: #fff !important; color: #fff !important;
} }
@ -389,18 +405,25 @@
margin-left: 8px; margin-left: 8px;
} }
.xdsoft_datetimepicker .xdsoft_copyright a { color: #eee !important } .xdsoft_datetimepicker .xdsoft_copyright a {
.xdsoft_datetimepicker .xdsoft_copyright a:hover { color: #aaa !important } color: #eee !important
}
.xdsoft_datetimepicker .xdsoft_copyright a:hover {
color: #aaa !important
}
.xdsoft_time_box { .xdsoft_time_box {
position: relative; position: relative;
border: 1px solid #ccc; border: 1px solid #ccc;
} }
.xdsoft_scrollbar>.xdsoft_scroller { .xdsoft_scrollbar>.xdsoft_scroller {
background: #ccc !important; background: #ccc !important;
height: 20px; height: 20px;
border-radius: 3px; border-radius: 3px;
} }
.xdsoft_scrollbar { .xdsoft_scrollbar {
position: absolute; position: absolute;
width: 7px; width: 7px;
@ -409,114 +432,16 @@
bottom: 0; bottom: 0;
cursor: pointer; cursor: pointer;
} }
.xdsoft_datetimepicker.xdsoft_rtl .xdsoft_scrollbar { .xdsoft_datetimepicker.xdsoft_rtl .xdsoft_scrollbar {
left: 0; left: 0;
right: auto; right: auto;
} }
.xdsoft_scroller_box { .xdsoft_scroller_box {
position: relative; position: relative;
} }
.xdsoft_datetimepicker.xdsoft_dark {
box-shadow: 0 5px 15px -5px rgba(255, 255, 255, 0.506);
background: #000;
border-bottom: 1px solid #444;
border-left: 1px solid #333;
border-right: 1px solid #333;
border-top: 1px solid #333;
color: #ccc;
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box {
border-bottom: 1px solid #222;
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box >div >div {
background: #0a0a0a;
border-top: 1px solid #222;
color: #999;
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label {
background-color: #000;
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label > .xdsoft_select {
border: 1px solid #333;
background: #000;
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label > .xdsoft_select > div > .xdsoft_option:hover {
color: #000;
background: #007fff;
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label > .xdsoft_select > div > .xdsoft_option.xdsoft_current {
background: #cc5500;
box-shadow: #b03e00 0 1px 3px 0 inset;
color: #000;
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_label i,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_prev,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_next,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_today_button {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAeCAYAAADaW7vzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUExQUUzOTA0M0UyMTFFNDlBM0FFQTJENTExRDVBODYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUExQUUzOTE0M0UyMTFFNDlBM0FFQTJENTExRDVBODYiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQTFBRTM4RTQzRTIxMUU0OUEzQUVBMkQ1MTFENUE4NiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQTFBRTM4RjQzRTIxMUU0OUEzQUVBMkQ1MTFENUE4NiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pp0VxGEAAAIASURBVHja7JrNSgMxEMebtgh+3MSLr1T1Xn2CHoSKB08+QmR8Bx9A8e7RixdB9CKCoNdexIugxFlJa7rNZneTbLIpM/CnNLsdMvNjM8l0mRCiQ9Ye61IKCAgZAUnH+mU3MMZaHYChBnJUDzWOFZdVfc5+ZFLbrWDeXPwbxIqrLLfaeS0hEBVGIRQCEiZoHQwtlGSByCCdYBl8g8egTTAWoKQMRBRBcZxYlhzhKegqMOageErsCHVkk3hXIFooDgHB1KkHIHVgzKB4ADJQ/A1jAFmAYhkQqA5TOBtocrKrgXwQA8gcFIuAIO8sQSA7hidvPwaQGZSaAYHOUWJABhWWw2EMIH9QagQERU4SArJXo0ZZL18uvaxejXt/Em8xjVBXmvFr1KVm/AJ10tRe2XnraNqaJvKE3KHuUbfK1E+VHB0q40/y3sdQSxY4FHWeKJCunP8UyDdqJZenT3ntVV5jIYCAh20vT7ioP8tpf6E2lfEMwERe+whV1MHjwZB7PBiCxcGQWwKZKD62lfGNnP/1poFAA60T7rF1UgcKd2id3KDeUS+oLWV8DfWAepOfq00CgQabi9zjcgJVYVD7PVzQUAUGAQkbNJTBICDhgwYTjDYD6XeW08ZKh+A4pYkzenOxXUbvZcWz7E8ykRMnIHGX1XPl+1m2vPYpL+2qdb8CDAARlKFEz/ZVkAAAAABJRU5ErkJggg==);
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th {
background: #0a0a0a;
border: 1px solid #222;
color: #999;
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th {
background: #0e0e0e;
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_today {
color: #cc5500;
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_highlighted_default {
background: #ffe9d2;
box-shadow: #ffb871 0 1px 4px 0 inset;
color:#000;
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_highlighted_mint {
background: #c1ffc9;
box-shadow: #00dd1c 0 1px 4px 0 inset;
color:#000;
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_default,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_current {
background: #cc5500;
box-shadow: #b03e00 0 1px 3px 0 inset;
color: #000;
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar td:hover,
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_timepicker .xdsoft_time_box >div >div:hover {
color: #000 !important;
background: #007fff !important;
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_calendar th {
color: #666;
}
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyright { color: #333 !important }
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyright a { color: #111 !important }
.xdsoft_datetimepicker.xdsoft_dark .xdsoft_copyright a:hover { color: #555 !important }
.xdsoft_dark .xdsoft_time_box {
border: 1px solid #333;
}
.xdsoft_dark .xdsoft_scrollbar >.xdsoft_scroller {
background: #333 !important;
}
.xdsoft_datetimepicker .xdsoft_save_selected { .xdsoft_datetimepicker .xdsoft_save_selected {
display: block; display: block;
border: 1px solid #dddddd !important; border: 1px solid #dddddd !important;
@ -525,11 +450,12 @@
color: #454551; color: #454551;
font-size: 13px; font-size: 13px;
} }
.xdsoft_datetimepicker .blue-gradient-button { .xdsoft_datetimepicker .blue-gradient-button {
font-family: "museo-sans", "Book Antiqua", sans-serif; font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
font-size: 12px; font-size: 12px;
font-weight: 300; font-weight: 300;
color: #82878c; color: #1d273a;
height: 28px; height: 28px;
position: relative; position: relative;
padding: 4px 17px 4px 33px; padding: 4px 17px 4px 33px;
@ -549,7 +475,11 @@
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#f4f8fa', GradientType=0); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#f4f8fa', GradientType=0);
/* IE6-9 */ /* IE6-9 */
} }
.xdsoft_datetimepicker .blue-gradient-button:hover, .xdsoft_datetimepicker .blue-gradient-button:focus, .xdsoft_datetimepicker .blue-gradient-button:hover span, .xdsoft_datetimepicker .blue-gradient-button:focus span {
.xdsoft_datetimepicker .blue-gradient-button:hover,
.xdsoft_datetimepicker .blue-gradient-button:focus,
.xdsoft_datetimepicker .blue-gradient-button:hover span,
.xdsoft_datetimepicker .blue-gradient-button:focus span {
color: #454551; color: #454551;
background: -moz-linear-gradient(top, #f4f8fa 0%, #FFF 73%); background: -moz-linear-gradient(top, #f4f8fa 0%, #FFF 73%);
/* FF3.6+ */ /* FF3.6+ */