First commit of UD dark theme changes - issue sakaicontrib#94

SAKAI-5974 Modify many points of styling for Dark theme
jkozar2 · Feb 24, 2022 · 71b7021 · 71b7021
1 parent d489aac
commit 71b7021
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 25 deletions.
diff --git a/tool/src/java/org/sakaiproject/attendance/tool/pages/BasePage.java b/tool/src/java/org/sakaiproject/attendance/tool/pages/BasePage.java
@@ -239,6 +239,7 @@ protected AjaxLink<?> getAddEditWindowAjaxLink(final AttendanceEvent obj, final
 			public void onClick(AjaxRequestTarget target) {
 				final ModalWindow window = getAddOrEditItemWindow();
 				window.setTitle(new ResourceModel("attendance.add.edit.header"));
+				window.setCssClassName(window.getCssClassName() + " editItemModal");
 				window.setContent(new EventInputPanel(window.getContentId(), window, new CompoundPropertyModel<>(obj)));
 				window.show(target);
 			}

diff --git a/tool/src/webapp/css/attendance.css b/tool/src/webapp/css/attendance.css
@@ -48,7 +48,7 @@ div.table-responsive {
 }
 
 .overviewTable a, .overviewTable a:link, .overviewTable a:visited, .overviewTable a:hover, .overviewTable a:focus, .overviewTable a:active{
-    color: #0064cd;
+    color: var(--infoBanner-color);
 }
 
 .attendanceBreadcrumbs a, .attendanceBreadcrumbs a:link, .attendanceBreadcrumbs a:visited, .attendanceBreadcrumbs a:hover, .attendanceBreadcrumbs a:focus, .attendanceBreadcrumbs a:active{
@@ -192,11 +192,11 @@ table.itemListTable, table.eventViewTable, table.takeAttendanceTable, div.eventF
 }
 
 .itemListTable thead tr, .eventViewTable thead tr, .takeAttendanceTable thead tr, .div-table-row-header  {
-    background-color: #eee;
+    background-color: var(--sakai-background-color-1);
 }
 
-.itemListTable tbody tr:hover, .eventViewTable tbody tr:hover, .takeAttendanceTable tbody tr:hover, .div-table-row:hover {
-    background-color: #deeeff;
+.itemListTable tbody tr:hover, .eventViewTable tbody tr:hover, .takeAttendanceTable tbody tr:hover, table tbody tr.div-table-row:hover {
+    background-color: var(--sakai-background-color-4);
 }
 
 th.overviewDateCol, td.overviewDateCol, td.takeAttendanceDateHeader, th.takeAttendanceDateHeader, td.studentNameCol, th.studentOverviewNameHeader, th.importEventandStudentHeader, th.importNewCommentandStatusHeader,th.importOldCommentandStatusHeader {
@@ -281,7 +281,7 @@ th.overviewEditCol, td.overviewEditCol, th.itemListEditCol, td.itemListEditCol,
 }
 
 tr td.overviewEditCol a span.fa, tr td.overviewPrintCol a span.fa, .attendanceBreadcrumbs span a span.fa, #event-buttons  {
-    color: #555;
+    color: var(--sakai-text-color-1);
 }
 
 tr td.overviewEditCol a span.fa:hover, tr td.overviewPrintCol a span.fa:hover,
@@ -361,7 +361,7 @@ div.itemInfoContainer {
 
 div.addEditHeader, div.itemListHeader, div.takeAttendanceHeader, div.itemInfoHeader,
 div.activeStatusHeader, div.commentHeader, div.containerHeader {
-    background-color:#fff;
+    background-color: var(--sakai-background-color-1);
     position:absolute;
     top:-1em;
     left:.5em;
@@ -385,8 +385,12 @@ td.noEventsCol, td.noStudentsCol {
     font-style: italic;
     font-size: 1.4em;
     line-height: 1.7em;
-    background: #ffffff;
-    color: #555;
+    background: var(--sakai-background-color-1);
+    color: var(--sakai-text-color-1);
+}
+
+div.editItemModal div.w_caption, div.editItemModal div.w_content {
+    background-color: var(--sakai-background-color-2);
 }
 
 table.addEditFormTable, div.info, .addComment textarea {
@@ -449,7 +453,7 @@ p.setAll {
 
 .addComment {
     position:absolute;
-    background-color:#fff;
+    background-color: var(--sakai-background-color-3);
     border: 1px solid #555;
     width:200px;
     height:auto;
@@ -479,6 +483,7 @@ div.printContainer {
     -moz-box-shadow: 0 8px 6px -6px black;
     box-shadow: 0 8px 6px -6px black;
     z-index: 999;
+    background-color: var(--sakai-background-color-3);
 }
 
 .printTable td {
@@ -489,25 +494,14 @@ div.printContainer {
 .printTable td:nth-child(odd) {
     font-weight: bold;
     text-align: right;
-    color: #111;
+    color: var(--sakai-text-color-1);
 }
 
 h2.printHeader {
     margin: .5em 0;
     padding: 0;
 }
 
-div.printMask {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: #ccc;
-    z-index: 900;
-    opacity: 0.75;
-}
-
 div.printMask:hover, .printImage:hover {
     cursor: pointer;
     margin-right: .5em;
@@ -519,7 +513,7 @@ div.printMask:hover, .printImage:hover {
 }
 
 span.cancelPrint, span.cancelAddComment {
-    color: #0064cd;
+    color: var(--link-color);
     padding-left: .5em;
 }
 
@@ -550,7 +544,7 @@ ul.statusList {
 }
 
 li.statusItem, li.statusItemPlaceholder {
-    background: url("../images/drag-handle.png") no-repeat right center #e0f7e0;
+    background: url("../images/drag-handle-dark.png") no-repeat right center var(--background-green);
     border: 1px solid #ccc;
     font-size: 1.2em;
     line-height: 1.7em;
@@ -574,7 +568,7 @@ li.statusItem span {
 }
 
 li.statusItemDisabled  {
-    background-color: #eee;
+    background-color: var(--sakai-background-color-4);
 }
 
 p.editStatusInfo, p.editGradeInfo, p.editCommentInfo {
@@ -740,7 +734,6 @@ label.statusClickBox {
     height: 100%;
     width: 100%;
     font-size: 22px;
-    opacity: 0.2;
 }
 
 label.statusClickBox:hover {
@@ -935,6 +928,7 @@ div.wicket-modal h3.w_captionText {
     font-size: 1.5em;
     position: relative;
     height: auto;
+    color: var(--sakai-text-color-1);
 }
 /* End janking */
 

diff --git a/tool/src/webapp/images/drag-handle-dark.png b/tool/src/webapp/images/drag-handle-dark.png