mirror of
https://github.com/Cacti/cacti.git
synced 2026-10-29 08:06:58 +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.
179 lines
6.2 KiB
CSS
179 lines
6.2 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 midwinter palette.
|
|
* Surface colours use the theme palette variables so the picker follows
|
|
* both the default dark mode and the light mode; the accent is the theme
|
|
* blue. Scoped to .ui-datepicker so other jQuery UI widgets stay
|
|
* untouched.
|
|
* ====================================================================== */
|
|
|
|
/* Popup surface */
|
|
.ui-datepicker.ui-widget.ui-widget-content {
|
|
background: var(--background-content);
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-color-lighter);
|
|
box-shadow: var(--box-shadow-color) 0 6px 20px;
|
|
border-radius: 4px;
|
|
}
|
|
.ui-datepicker.ui-widget-content a {
|
|
color: var(--text-color-lighter);
|
|
}
|
|
|
|
/* Month / year header bar */
|
|
.ui-datepicker .ui-datepicker-header.ui-widget-header {
|
|
background: #2f6cce;
|
|
border: 1px solid #2f6cce;
|
|
color: #ffffff;
|
|
border-radius: 3px;
|
|
}
|
|
.ui-datepicker .ui-datepicker-title,
|
|
.ui-datepicker .ui-datepicker-title select {
|
|
color: #ffffff;
|
|
}
|
|
.ui-datepicker .ui-datepicker-title select {
|
|
background: var(--background-content);
|
|
color: var(--text-color-lighter);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
.ui-datepicker .ui-datepicker-header .ui-icon {
|
|
filter: brightness(0) invert(1);
|
|
}
|
|
|
|
/* 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: #255cb0;
|
|
border: 1px solid transparent;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* Weekday labels */
|
|
.ui-datepicker th {
|
|
color: var(--text-color-lighter);
|
|
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: var(--text-color-lighter);
|
|
text-align: center;
|
|
border-radius: 3px;
|
|
}
|
|
.ui-datepicker td a.ui-state-hover,
|
|
.ui-datepicker td a.ui-state-focus {
|
|
background: rgba(47, 108, 206, 0.18);
|
|
border: 1px solid transparent;
|
|
color: var(--text-color-lighter);
|
|
}
|
|
.ui-datepicker td.ui-datepicker-today a.ui-state-highlight,
|
|
.ui-datepicker td.ui-datepicker-today a {
|
|
background: transparent;
|
|
border: 1px solid #2f6cce;
|
|
color: var(--text-color-lighter);
|
|
}
|
|
.ui-datepicker td a.ui-state-active,
|
|
.ui-datepicker td.ui-datepicker-current-day a.ui-state-active {
|
|
background: #2f6cce;
|
|
border: 1px solid #2f6cce;
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* Button pane (Now / Done) */
|
|
.ui-datepicker .ui-datepicker-buttonpane {
|
|
border-top: 1px solid var(--border-color);
|
|
}
|
|
.ui-datepicker .ui-datepicker-buttonpane button {
|
|
background: transparent;
|
|
border: 1px solid var(--border-color);
|
|
color: var(--text-color-lighter);
|
|
border-radius: 3px;
|
|
}
|
|
.ui-datepicker .ui-datepicker-buttonpane button:hover,
|
|
.ui-datepicker .ui-datepicker-buttonpane button:focus {
|
|
background: #2f6cce;
|
|
border-color: #2f6cce;
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* Timepicker addon - time sliders */
|
|
.ui-datepicker .ui-timepicker-div .ui-widget-header {
|
|
background: transparent;
|
|
border: none;
|
|
color: var(--text-color-lighter);
|
|
}
|
|
.ui-datepicker .ui-timepicker-div dl dt,
|
|
.ui-datepicker .ui-timepicker-div .ui_tpicker_time_label,
|
|
.ui-datepicker .ui-tpicker-grid-label {
|
|
color: var(--text-color-lighter);
|
|
}
|
|
.ui-datepicker .ui-timepicker-div .ui-slider {
|
|
background: rgba(127, 127, 127, 0.22);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
}
|
|
.ui-datepicker .ui-timepicker-div .ui-slider .ui-slider-range {
|
|
background: #2f6cce;
|
|
border-radius: 6px;
|
|
}
|
|
.ui-datepicker .ui-timepicker-div .ui-slider .ui-slider-handle {
|
|
background: #2f6cce;
|
|
border: 2px solid var(--background-content);
|
|
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: #3f7bd8;
|
|
border-color: var(--background-content);
|
|
}
|
|
.ui-datepicker .ui-timepicker-div .ui-slider .ui-slider-handle:focus,
|
|
.ui-datepicker .ui-timepicker-div .ui-slider .ui-slider-handle:focus-visible {
|
|
outline: 2px solid #2f6cce;
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
/* Editable time input */
|
|
.ui-datepicker .ui-timepicker-div .ui_tpicker_time .ui_tpicker_time_input {
|
|
color: var(--text-color-lighter);
|
|
border-bottom: 1px solid var(--border-color);
|
|
background: transparent;
|
|
}
|