mirror of
https://github.com/Cacti/cacti.git
synced 2026-10-29 16:17:14 +09:00
TheWitness
533f3b5a04
* Harmonize DateTimePicker styling with each theme palette The jQuery UI datepicker and timepicker addon rendered with the stock ThemeRoller texture-image backgrounds and a generic gray/green look that did not match any theme (most visible in the deepness dark theme). Add per-theme, picker-scoped overrides to every theme's jquery.timepicker.css so the popup surface, header, weekday labels, day cells, selected/hover/today states, Now/Done buttons, and the time sliders use each theme's own accent and content colors. Rules are scoped to .ui-datepicker so other jQuery UI widgets are unaffected. * Address DateTimePicker a11y review (develop) - Reset the nav-icon filter on prev/next hover (cacti, paw, raspberry) so the dark jQuery UI sprite stays visible on the pale hover tint. - Give carrot and hollyberry a dark header title + dark nav icons so the month/year text clears AA on the light-ish accent header. - Carrot: move to the theme's darker orange (#d2691e) for the today outline and sliders, and use a dark foreground on the orange selected-day/button fills. - cacti and hollyberry: dark foreground on the accent selected-day/button fills to clear 4.5:1. - paper-plane and sunrise: invert the icon sprite to white so the arrows are visible on their dark headers. - dark and modern: add an explicit focus outline on the time-slider handles (both themes suppress the browser outline globally). - midwinter: rebuild the override on the theme palette variables so the picker follows dark/light mode, with the theme blue as a fixed AA accent.
171 lines
5.5 KiB
CSS
171 lines
5.5 KiB
CSS
.ui-timepicker-div .ui-widget-header { margin-bottom: 8px; }
|
|
.ui-timepicker-div dl { text-align: left; }
|
|
.ui-timepicker-div dl dt { float: left; clear:left; padding: 0 0 0 5px; }
|
|
.ui-timepicker-div dl dd { margin: 0 10px 10px 40%; }
|
|
.ui-timepicker-div td { font-size: 90%; }
|
|
.ui-tpicker-grid-label { background: none; border: none; margin: 0; padding: 0; }
|
|
.ui-timepicker-div .ui_tpicker_unit_hide{ display: none; }
|
|
|
|
.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input { background: none; color: inherit; border: none; outline: none; border-bottom: solid 1px #555; width: 95%; }
|
|
.ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input:focus { border-bottom-color: #aaa; }
|
|
|
|
.ui-timepicker-rtl{ direction: rtl; }
|
|
.ui-timepicker-rtl dl { text-align: right; padding: 0 5px 0 0; }
|
|
.ui-timepicker-rtl dl dt{ float: right; clear: right; }
|
|
.ui-timepicker-rtl dl dd { margin: 0 40% 10px 10px; }
|
|
|
|
/* Shortened version style */
|
|
.ui-timepicker-div.ui-timepicker-oneLine { padding-right: 2px; }
|
|
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time,
|
|
.ui-timepicker-div.ui-timepicker-oneLine dt { display: none; }
|
|
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label { display: block; padding-top: 2px; }
|
|
.ui-timepicker-div.ui-timepicker-oneLine dl { text-align: right; }
|
|
.ui-timepicker-div.ui-timepicker-oneLine dl dd,
|
|
.ui-timepicker-div.ui-timepicker-oneLine dl dd > div { display:inline-block; margin:0; }
|
|
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,
|
|
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before { content:':'; display:inline-block; }
|
|
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before,
|
|
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before { content:'.'; display:inline-block; }
|
|
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,
|
|
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before{ display: none; }
|
|
|
|
/* ====================================================================== *
|
|
* Cacti DateTimePicker theming - harmonized with the deepness palette.
|
|
* Scoped to .ui-datepicker so other jQuery UI widgets stay untouched.
|
|
* ====================================================================== */
|
|
|
|
/* Popup surface */
|
|
.ui-datepicker.ui-widget.ui-widget-content {
|
|
background: #11161d;
|
|
border: 1px solid #263040;
|
|
color: #e6edf3;
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
|
|
border-radius: 4px;
|
|
}
|
|
.ui-datepicker.ui-widget-content a {
|
|
color: #e6edf3;
|
|
}
|
|
|
|
/* Month / year header bar */
|
|
.ui-datepicker .ui-datepicker-header.ui-widget-header {
|
|
background: #070a0e;
|
|
border: 1px solid #070a0e;
|
|
color: #e6edf3;
|
|
border-radius: 3px;
|
|
}
|
|
.ui-datepicker .ui-datepicker-title,
|
|
.ui-datepicker .ui-datepicker-title select {
|
|
color: #e6edf3;
|
|
}
|
|
.ui-datepicker .ui-datepicker-title select {
|
|
background: #11161d;
|
|
color: #e6edf3;
|
|
border: 1px solid #263040;
|
|
}
|
|
.ui-datepicker .ui-datepicker-header .ui-icon {
|
|
filter: none;
|
|
}
|
|
|
|
/* Prev / next navigation */
|
|
.ui-datepicker .ui-datepicker-prev,
|
|
.ui-datepicker .ui-datepicker-next {
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
}
|
|
.ui-datepicker .ui-datepicker-prev-hover,
|
|
.ui-datepicker .ui-datepicker-next-hover {
|
|
background: #16303f;
|
|
border: 1px solid transparent;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* Weekday labels */
|
|
.ui-datepicker th {
|
|
color: #e6edf3;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
/* Day cells */
|
|
.ui-datepicker td a.ui-state-default,
|
|
.ui-datepicker td span.ui-state-default {
|
|
background: transparent;
|
|
border: 1px solid transparent;
|
|
color: #e6edf3;
|
|
text-align: center;
|
|
border-radius: 3px;
|
|
}
|
|
.ui-datepicker td a.ui-state-hover,
|
|
.ui-datepicker td a.ui-state-focus {
|
|
background: #16303f;
|
|
border: 1px solid transparent;
|
|
color: #d9fbef;
|
|
}
|
|
.ui-datepicker td.ui-datepicker-today a.ui-state-highlight,
|
|
.ui-datepicker td.ui-datepicker-today a {
|
|
background: transparent;
|
|
border: 1px solid #18b981;
|
|
color: #e6edf3;
|
|
}
|
|
.ui-datepicker td a.ui-state-active,
|
|
.ui-datepicker td.ui-datepicker-current-day a.ui-state-active {
|
|
background: #18b981;
|
|
border: 1px solid #18b981;
|
|
color: #04140d;
|
|
}
|
|
|
|
/* Button pane (Now / Done) */
|
|
.ui-datepicker .ui-datepicker-buttonpane {
|
|
border-top: 1px solid #263040;
|
|
}
|
|
.ui-datepicker .ui-datepicker-buttonpane button {
|
|
background: transparent;
|
|
border: 1px solid #263040;
|
|
color: #e6edf3;
|
|
border-radius: 3px;
|
|
}
|
|
.ui-datepicker .ui-datepicker-buttonpane button:hover,
|
|
.ui-datepicker .ui-datepicker-buttonpane button:focus {
|
|
background: #18b981;
|
|
border-color: #18b981;
|
|
color: #04140d;
|
|
}
|
|
|
|
/* Timepicker addon - time sliders */
|
|
.ui-datepicker .ui-timepicker-div .ui-widget-header {
|
|
background: transparent;
|
|
border: none;
|
|
color: #e6edf3;
|
|
}
|
|
.ui-datepicker .ui-timepicker-div dl dt,
|
|
.ui-datepicker .ui-timepicker-div .ui_tpicker_time_label,
|
|
.ui-datepicker .ui-tpicker-grid-label {
|
|
color: #e6edf3;
|
|
}
|
|
.ui-datepicker .ui-timepicker-div .ui-slider {
|
|
background: rgba(255, 255, 255, 0.12);
|
|
border: 1px solid #263040;
|
|
border-radius: 6px;
|
|
}
|
|
.ui-datepicker .ui-timepicker-div .ui-slider .ui-slider-range {
|
|
background: #18b981;
|
|
border-radius: 6px;
|
|
}
|
|
.ui-datepicker .ui-timepicker-div .ui-slider .ui-slider-handle {
|
|
background: #18b981;
|
|
border: 2px solid #11161d;
|
|
border-radius: 50%;
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
|
|
}
|
|
.ui-datepicker .ui-timepicker-div .ui-slider .ui-slider-handle:hover,
|
|
.ui-datepicker .ui-timepicker-div .ui-slider .ui-slider-handle:focus {
|
|
background: #26cf94;
|
|
border-color: #11161d;
|
|
}
|
|
|
|
/* Editable time input */
|
|
.ui-datepicker .ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input {
|
|
color: #e6edf3;
|
|
border-bottom: 1px solid #263040;
|
|
background: transparent;
|
|
}
|