Increased table fonts, added highlight for differences in dates

Author: Daniel Rudziński

dist/jsgantt.css

@@ -2,7 +2,7 @@
 
 div.gantt {
   font-family: tahoma, arial, verdana, Sans-serif;
-  font-size: 10px;
+  font-size: 12px;
   color: #656565;
 }
 
@@ -31,10 +31,9 @@ div.gantt {
   font-size: 12px;
   border: #efefef 1px solid;
   text-align: center;
-  cursor: default
+  cursor: default;
 }
 
-
 .gtasklist {
   height: 19px;
   min-width: 5px;
@@ -44,7 +43,7 @@ div.gantt {
   border-right: none;
 }
 
-.gtasknolist-label{
+.gtasknolist-label {
   padding: 10px 50px;
 }
 /* all three width values set just to make sure - helps resizing code */
@@ -56,7 +55,7 @@ div.gantt {
 .gminorheading {
   background-color: #ffffff;
   font-weight: bold;
-  font-size: 9px;
+  font-size: 11px;
   white-space: nowrap;
 }
 
@@ -154,9 +153,9 @@ td.gspanning {
 
 .gtaskname {
   min-width: 170px;
-  max-width: 170px;
-  width: 170px;
-  font-size: 9px;
+  max-width: 220px;
+  width: 220px;
+  font-size: 12px;
   border-left: none;
 }
 
@@ -246,6 +245,11 @@ span.gfoldercollapse {
   background-color: #fffde5;
 }
 
+.gitemdifferent td {
+  background-image: none;
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
 /* task bar caption text styles */
 
 .gmilecaption,
@@ -487,7 +491,7 @@ span.gfoldercollapse {
 div.gtaskbarcontainer {
   z-index: 1;
   position: absolute;
-  top: 0px
+  top: 0px;
 }
 
 .textbar {
@@ -510,7 +514,7 @@ div.gtaskbarcontainer {
   font-size: 10px;
   display: block;
   background: #ffffff;
-  color: #656565
+  color: #656565;
 }
 
 .gTaskInfo {
@@ -652,7 +656,7 @@ div.gtaskbarcontainer {
 /* Old Internet Explorer version hacks */
 
 .gantt {
-  _height: 100%
+  _height: 100%;
 }
 
 /* otherwise the chart disappears! */
@@ -777,7 +781,6 @@ td.gspanning div {
 }
 
 @media print {
-
   /* All your print styles go here */
   html,
   .gchartgrid {
@@ -795,8 +798,8 @@ td.gspanning div {
 
   /* Hide scrollbar for IE, Edge and Firefox */
   .gchartcontainer * {
-    -ms-overflow-style: none;  /* IE and Edge */
-    scrollbar-width: none;  /* Firefox */
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
   }
 
   /* Hide tool-tip */
@@ -849,7 +852,8 @@ td.gspanning div {
 
 .gmainleft {
   overflow: hidden;
-  flex: 0 0 50%;
+  flex: 0 0 20%;
+  min-width: 220px;
   /* Allow side to grow and shrink */
   flex: 1 0 auto;
 }
@@ -957,25 +961,25 @@ td.gspanning div {
   }
 
   table {
-    page-break-after: auto
+    page-break-after: auto;
   }
 
   tr {
     page-break-inside: avoid;
-    page-break-after: auto
+    page-break-after: auto;
   }
 
   td {
     page-break-inside: avoid;
-    page-break-after: auto
+    page-break-after: auto;
   }
 
   thead {
-    display: table-header-group
+    display: table-header-group;
   }
 
   tfoot {
-    display: table-footer-group
+    display: table-footer-group;
   }
 }
 
@@ -996,7 +1000,7 @@ td.gspanning div {
   border-radius: 8px;
   border: 2px solid white;
   /* should match background, can't be transparent */
-  background-color: rgba(0, 0, 0, .5);
+  background-color: rgba(0, 0, 0, 0.5);
 }
 
 .frame::-webkit-scrollbar-track {
@@ -1009,4 +1013,4 @@ td.gspanning div {
   overflow: scroll;
   -ms-overflow-style: scrollbar;
   display: block;
-}
+}