calendar styling + other small changes

ECN · May 31, 2025 · ad8ff4d · ad8ff4d
1 parent 9a234b2
commit ad8ff4d
Showing 1 changed file with 153 additions and 10 deletions.
diff --git 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;