diff --git a/tdx-enhanced.js b/tdx-enhanced.js index e8fd600..c8f42e0 100644 --- a/tdx-enhanced.js +++ b/tdx-enhanced.js @@ -1,7 +1,7 @@ // ==UserScript== // @name tdx-enhanced // @namespace purdue-it -// @version 2025-05-29-615 +// @version 2025-05-29-645 // @description enhanced tdx coloring & formatting. follows system color scheme. // @author Purdue STEM IT - it@purdue.edu // @match https://service.purdue.edu/TDWorkManagement* @@ -1157,6 +1157,11 @@ parseOtherElements() } + //parse side panels + if (t.classList.contains("tdx-right-side-panel")) { + parseOtherElements() + } + let module = t.querySelector("div > .tdx-dashboard__widget-container") if (module) { updateHeading(t) @@ -1241,8 +1246,8 @@ const result = solver.solve(); let filters = result.filter - console.log("STYLES:",priCol) - console.log("FILTERS:",priCol,rgb,filters) + //console.log("STYLES:",priCol) + //console.log("FILTERS:",priCol,rgb,filters) style.setProperty("--filter-brightness",filters.brightness) style.setProperty("--filter-contrast",filters.contrast) @@ -2579,6 +2584,38 @@ select.form-control { box-shadow: 0 .5px 1px 1px var(--shadow-1),0 2px 4px var(--shadow-2),0 4px 6px var(--shadow-2); } +div#ui-datepicker-div .ui-datepicker-title select, div#ui-datepicker-div .ui-timepicker-div.ui-timepicker-oneLine select, div.ui-datepicker .ui-datepicker-title select, div.ui-datepicker .ui-timepicker-div.ui-timepicker-oneLine select { + color: var(--txt-1); + border-color: var(--bg-0); + background-color: var(--bg-0); +} + +div#ui-datepicker-div .ui-datepicker-title select:hover, div#ui-datepicker-div .ui-timepicker-div.ui-timepicker-oneLine select:hover, div.ui-datepicker .ui-datepicker-title select:hover, div.ui-datepicker .ui-timepicker-div.ui-timepicker-oneLine select:hover { + border-color: var(--border-0); +} + +div#ui-datepicker-div .ui-state-default, div#ui-datepicker-div .ui-state-default:hover, div.ui-datepicker .ui-state-default, div.ui-datepicker .ui-state-default:hover { + border-color: var(--bg-0) !important; +} + +div#ui-datepicker-div .ui-datepicker-header, div.ui-datepicker .ui-datepicker-header { + background: var(--col-100) !important; +} + +div#ui-datepicker-div th, div#ui-datepicker-div td, div.ui-datepicker th, div.ui-datepicker td { + color: var(--txt-1); +} + +div#ui-datepicker-div .ui-state-highlight, div#ui-datepicker-div .ui-widget-content .ui-state-highlight, div#ui-datepicker-div .ui-widget-header .ui-state-highlight, div.ui-datepicker .ui-state-highlight, div.ui-datepicker .ui-widget-content .ui-state-highlight, div.ui-datepicker .ui-widget-header .ui-state-highlight { + background: var(--col-100) !important; + color: var(--col-400) !important; +} + +button:has(>.ui-icon-circle-triangle-e), span:has(>.ui-icon-circle-triangle-e), a:has(>.ui-icon-circle-triangle-e), button:has(>.fa-chevron-circle-right), span:has(>.fa-chevron-circle-right), a:has(>.fa-chevron-circle-right), +button:has(>.ui-icon-circle-triangle-w), span:has(>.ui-icon-circle-triangle-w), a:has(>.ui-icon-circle-triangle-w), button:has(>.fa-chevron-circle-left), span:has(>.fa-chevron-circle-left), a:has(>.fa-chevron-circle-left) { + color: var(--col-400); +} + /* Links */ .tdx-dashboard__widget-container a:not(.btn):not(.k-icon) { @@ -2782,6 +2819,17 @@ div.input-group .input-group-btn .btn-file:last-child:hover, div.input-group .in color: var(--txt-1); } +.modal-footer .btn-default { + background-color: var(--col-200) !important; + color: var(--col-400) !important; + border: none !important; +} + +.modal-footer .btn-default:hover, .modal-footer .btn-default:hover:focus, .modal-footer .btn-default:focus-visible { + background-color: var(--col-300) !important; + color: var(--col-600) !important; +} + /* .btn.btn-primary:not(.btn-sm) { color: var(--txt-1); background-color: var(--bg-5); @@ -2919,8 +2967,91 @@ td > a.btn.btn-primary:hover { border-color: var(--col-100) !important; } +a.btn.btn-link.tdx-primary-button-override { + color: var(--txt-5) !important; +} + .btn-link, .btn.btn-link, .sidebar-btn.btn-link { - color: var(--col-400); + color: var(--col-400) !important; +} + +.btn-link:hover, .btn.btn-link:hover, .sidebar-btn.btn-link:hover { + color: var(--col-400) !important; +} + +.btn-link[role=button]:hover, .btn.btn-link[role=button]:hover, .sidebar-btn.btn-link[role=button]:hover, +a.btn.btn-link.tdx-tertiary-button-override:hover { + background-color: var(--col-200) !important; +} + +.tdx-calendar .cal-views { + border-color: var(--col-400) !important; +} + +.tdx-calendar .cal-view { + color: var(--txt-2) !important; +} + +.tdx-calendar .cal-view.light-blue-bg { + background-color: var(--col-400) !important; + color: var(--txt-2) !important; +} + +.tdx-calendar .cal-view:not(.cal-view.light-blue-bg):hover, .tdx-calendar .cal-view:hover:focus, .tdx-calendar .cal-view:focus-visible { + background-color: var(--col-200) !important; +} + +.tdx-calendar #btnDatePicker { + background-color: var(--bg-0) !important; + color: var(--col-400) !important; +} + +.tdx-calendar #btnDatePicker:hover, .tdx-calendar #btnDatePicker:focus-visible, .tdx-calendar #btnDatePicker:active, .tdx-calendar #btnDatePicker:active:hover, .tdx-calendar #btnDatePicker:focus:active, .tdx-calendar #btnDatePicker:focus:hover { + color: var(--col-600) !important; +} + +button:has(.ui-icon-circle-triangle-w), span:has(.ui-icon-circle-triangle-w), +button:has(.ui-icon-circle-triangle-e), span:has(.ui-icon-circle-triangle-e) { + color: var(--col-400) !important; +} + +button:has(.ui-icon-circle-triangle-e):hover, button:has(.ui-icon-circle-triangle-e):focus-visible, button:has(.ui-icon-circle-triangle-e):active, button:has(.ui-icon-circle-triangle-e):active:hover, button:has(.ui-icon-circle-triangle-e):focus:active, button:has(.ui-icon-circle-triangle-e):focus:hover, span:has(.ui-icon-circle-triangle-e):hover, span:has(.ui-icon-circle-triangle-e):focus-visible, span:has(.ui-icon-circle-triangle-e):active, span:has(.ui-icon-circle-triangle-e):active:hover, span:has(.ui-icon-circle-triangle-e):focus:active, span:has(.ui-icon-circle-triangle-e):focus:hover, +button:has(.ui-icon-circle-triangle-w):hover, button:has(.ui-icon-circle-triangle-w):focus-visible, button:has(.ui-icon-circle-triangle-w):active, button:has(.ui-icon-circle-triangle-w):active:hover, button:has(.ui-icon-circle-triangle-w):focus:active, button:has(.ui-icon-circle-triangle-w):focus:hover, span:has(.ui-icon-circle-triangle-w):hover, span:has(.ui-icon-circle-triangle-w):focus-visible, span:has(.ui-icon-circle-triangle-w):active, span:has(.ui-icon-circle-triangle-w):active:hover, span:has(.ui-icon-circle-triangle-w):focus:active, span:has(.ui-icon-circle-triangle-w):focus:hover { + color: var(--col-600) !important; +} + +.ui-widget-header { + background: var(--bg-0) !important; +} + +.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, +.ui-widget-content, .ui-widget.ui-widget-content { + background: var(--bg-0) !important; + border-color: var(--border-0) !important; +} + +.tdx-calendar .fc-day-header { + color: var(--col-400) !important; +} + +.tdx-calendar .fc-day-number.fc-other-month a:first-child { + color: var(--col-200) !important; +} + +.tdx-calendar .fc-day-number a { + color: var(--col-600) !important; +} + +.tdx-calendar .ui-state-highlight a, .tdx-calendar .ui-widget-content .ui-state-highlight a, .tdx-calendar .ui-widget-header .ui-state-highlight a { + color: var(--col-400) !important; +} + +.tdx-calendar .ui-state-highlight { + background: var(--col-100) !important; +} + +.td-day-off { + background: var(--bg-2) !important; } .label-primary, .tdworkmgmt.table .hilite .label.label-primary { @@ -3350,20 +3481,28 @@ nav#divTabHeader, } .nav-tabs>li.active>a, .nav-tabs>li.active>button, .nav-pills>li.active>a, .nav-pills>li.active>button { - color: var(--col-600); + color: var(--col-600) !important; background-color: var(--bg-0) !important; border-color: var(--border-0); box-shadow: 0 .5px 1px 1px var(--shadow-1),0 2px 4px var(--shadow-2),0 4px 6px var(--shadow-2) !important; } .nav-tabs>li>a, .nav-tabs>li>a:hover, .nav-tabs>li>button, .nav-tabs>li>button:hover, .nav-pills>li>a, .nav-pills>li>a:hover { - background-color: var(--bg-0) !important; - color: var(--col-0); + color: var(--txt-3); } -.nav-tabs>li>a:hover, .nav-tabs>li>a:focus, .nav-tabs>li>a:hover:hover, .nav-tabs>li>a:hover:focus, .nav-tabs>li>button:hover, .nav-tabs>li>button:focus, .nav-tabs>li>button:hover:hover, .nav-tabs>li>button:hover:focus, .nav-pills>li>a:hover, .nav-pills>li>a:focus, .nav-pills>li>a:hover:hover, .nav-pills>li>a:hover:focus { +.nav-tabs>li>a:hover, .nav-tabs>li>a:hover:hover { + color: var(--txt-2); border-color: var(--border-0); - color: var(--col-1); +} + +.nav-tabs>li>a:hover { + color: var(--col-600); +} + +a.btn.btn-link.tdx-tertiary-button-override { + background-color: var(--col-100) !important; + color: var(--txt-1) !important; } .gray, .gray-hover:hover { @@ -3721,6 +3860,10 @@ div.profile-image.red-bg, div.profile-image.green-bg, div.profile-image.red-bg, color: var(--col-500) !important; } +.tdx-calendar .fa-plus { + color: var(--col-300) !important; +} + /* Icons + Filters */ .tdx-dropdown__menu-icon, .tdx-dropdown--headline:after, @@ -3739,7 +3882,7 @@ div.profile-image.red-bg, div.profile-image.green-bg, div.profile-image.red-bg, .tdx-action-menu__item--primary:after, .tdx-action-menu-dropdown:after, .tdx-icon.tdx-icon--hover-darken, .tdx-icon--hover-darken>.tdx-icon, -.tdx-dropdown__menu-icon, .tdx-dropdown--headline:after, .tdx-dropdown:after, .tdx-icon--search, .tdx-icon, +.tdx-dropdown__menu-icon, .tdx-dropdown--headline:after, .tdx-dropdown:after, .tdx-icon--search, .tdx-icon:not(.label), div.select2-container-multi .select2-choices .select2-search-choice>.select2-search-choice-close:hover, div.select2-container-multi .select2-choices .select2-search-choice>.select2-search-choice-close:focus-visible, div.select2-container-multi .select2-choices .select2-search-choice>.select2-search-choice-close:active, div.select2-container-multi .select2-choices .select2-search-choice>.select2-search-choice-close:active:hover, div.select2-container-multi .select2-choices .select2-search-choice>.select2-search-choice-close:focus:active, div.select2-container-multi .select2-choices .select2-search-choice>.select2-search-choice-close:focus:hover { filter: brightness(0) invert(var(--filter-invert)) sepia(var(--filter-sepia)) saturate(var(--filter-saturate)) hue-rotate(var(--filter-hue-rotate)) brightness(var(--filter-brightness)) contrast(var(--filter-contrast)) !important;