#94: changes to dark theme from UD (#98)

* First commit of UD dark theme changes - issue #94
SAKAI-5974 Modify many points of styling for Dark theme

* Second commit of dark theme changes form UD - issue #94
SAKAI-5974 Add new theme-independent sort icons, add theme to datepicker

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);
 			}

tool/src/webapp/css/attendance.css

@@ -48,15 +48,15 @@ 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{
     color: #0064cd;
 }
 
 h1.overviewHeader, h1.itemsHeader, h1.settingsHeader, h1.gradingHeader {
-    color: #555;
+    color: var(--sakai-text-color-1);
     margin-top: 1.2em;
     min-height: 32px;
 }
@@ -146,16 +146,16 @@ table.itemListTable, table.eventViewTable, table.takeAttendanceTable {
 }
 
 thead tr .tablesorter-header:not(.sorter-false):not(.tablesorter-headerAsc):not(.tablesorter-headerDesc), table.itemListTable thead tr .header, table.takeAttendanceTable thead tr .header, th.tablesorter-headerUnsorted, tr.div-table-row > th.header:not(.headerSortDown):not(.headerSortUp)  {
-    background: url(../images/bg.gif) no-repeat bottom .5em right;
+    background: url(../images/bg.png) no-repeat bottom .5em right;
     cursor: pointer;
     padding-right: 24px;
 }
 
 thead tr .tablesorter-headerAsc, table.itemListTable thead tr .headerSortUp, table.takeAttendanceTable thead tr .headerSortUp, th.headerSortUp {
-    background: url(../images/asc.gif) no-repeat bottom .5em right;
+    background: url(../images/asc.png) no-repeat bottom .5em right;
 }
 thead tr .tablesorter-headerDesc, table.itemListTable thead tr .headerSortDown, table.takeAttendanceTable thead tr .headerSortDown, th.headerSortDown {
-    background: url(../images/desc.gif) no-repeat bottom .5em right;
+    background: url(../images/desc.png) no-repeat bottom .5em right;
 }
 
 table.itemListTable, table.eventViewTable, table.takeAttendanceTable, div.eventFormContainer, form.addEditForm, .addComment h3, td.overviewGradeCol form {
@@ -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 */
 
@@ -1094,3 +1088,7 @@ span.yui-skin-sam img {
     font-size: 1.3em;
 }
 
+div#startDateTime span.yui-skin-sam span.yui-calcontainer, div#startDateTime th.calweekdaycell, div#startDateTime td.calcell:not(.oom), div#startDateTime span.yui-skin-sam span.yui-calcontainer a:not(.calnavright):not(.calnavleft), div#startDateTime span.yui-skin-sam span.yui-calcontainer div.title {
+    background: var(--sakai-background-color-2);
+    color: var(--sakai-text-color-2);
+}