added support for dark and high contrast nextcloud themes

Author: puthre

appinfo/info.xml

@@ -5,7 +5,7 @@
     <name>Time Tracker</name>
     <summary>Time Tracker App</summary>
     <description><![CDATA[Time Tracker App]]></description>
-    <version>0.0.31</version>
+    <version>0.0.32</version>
     <licence>agpl</licence>
     <author mail="[email protected]" >MTier Ltd.</author>
     <namespace>TimeTracker</namespace>

css/style.css

@@ -53,7 +53,7 @@ html[xmlns] .clearfix { display: block;}
 #timetracker-content {
 	width: 100%;
 	display:block;
-	background-color: rgb(250, 251, 252);
+	/*background-color: rgb(250, 251, 252);*/
 }
 #timer {
 	/* min-width: 200px; */
@@ -66,7 +66,8 @@ html[xmlns] .clearfix { display: block;}
 
     margin-bottom: 30px;
 	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
-	background-color: white;
+
+	/*background-color: white;*/
     /*min-width: 100%;*/
 }
 .day-list-item{
@@ -79,7 +80,8 @@ html[xmlns] .clearfix { display: block;}
 	padding: 10px;
 }
 .wi-child {
-	background-color: rgb(250, 251, 252);
+	/*background-color: rgb(250, 251, 252);*/
+	background-color: var(--color-background-dark);
 	padding-left: 25px;
 	padding-right: 25px;
 }
@@ -111,7 +113,7 @@ html[xmlns] .clearfix { display: block;}
 	display: flex;
 	flex-direction: row;
     box-shadow: inset 0 -1px 0 0 #e8e8e8;
-	background-color: white;
+	/*background-color: white;*/
 	line-height: 60px;
 	padding-right: 25px;
 }
@@ -150,7 +152,7 @@ html[xmlns] .clearfix { display: block;}
 .client-button {
 	display:flex;
 	color: #595959;
-	background-color: #e6e6e6;
+	/*background-color: #e6e6e6;*/
 	font-size: 11px;
 	padding: 7px 10px;
 	margin: 0 12px 12px 0;
@@ -162,18 +164,21 @@ html[xmlns] .clearfix { display: block;}
 .client-delete{
 	padding:0px 10px;
 }
+
 .clickable:hover{
-	color: #595959;
+	color: var(--color-main-text);
+	opacity: 1;
 }
 .clickable {
 	cursor: pointer;
-    color: #a6a6a6;
+	color: var(--color-main-text);
+	opacity: 0.57;
 }
 .ui-dialog { z-index: 1000 !important ;}
 #timetracker-clients {
 	width: 100%;
 	/* display:block; */
-	background-color: rgb(250, 251, 252);
+	/*background-color: rgb(250, 251, 252);*/
 	display: inline-block;
 	margin: 40px;
 	padding: 20px;
@@ -189,7 +194,7 @@ html[xmlns] .clearfix { display: block;}
 #timetracker-projects{
 	width: 100%;
 	/* display:block; */
-	background-color: rgb(250, 251, 252);
+	/*background-color: rgb(250, 251, 252);*/
 	display: inline-block;
 	margin: 40px;
 	padding: 20px;
@@ -208,7 +213,7 @@ html[xmlns] .clearfix { display: block;}
     margin: 20px 0px 20px 0px;
 	padding: 10px;
 	text-align: right;
-    background-color: #eee;
+    /*background-color: #eee;*/
 }
 .projects{
 	margin-top: 50px;
@@ -241,15 +246,15 @@ td.ε_row {
 #timetracker-tags {
     width: 100%;
     /* display: block; */
-    background-color: rgb(250, 251, 252);
+    /*background-color: rgb(250, 251, 252);*/
     display: inline-block;
 	margin: 40px;
 	padding: 20px;
 }
 .tag-button {
 	display:flex;
 	color: #595959;
-	background-color: #e6e6e6;
+	/*background-color: #e6e6e6;*/
 	font-size: 11px;
 	padding: 7px 10px;
 	margin: 0 12px 12px 0;
@@ -284,7 +289,7 @@ td.ε_row {
 	font-size: 22px;
 	/*width:40px;*/
 
-	background-color: rgb(250, 251, 252);
+	/*background-color: rgb(250, 251, 252);*/
 }
 /*
 .select2-container.set-tag .select2-default {
@@ -323,7 +328,7 @@ td.ε_row {
 #timetracker-dashboard {
     width: 100%;
     /* display: block; */
-    background-color: rgb(250, 251, 252);
+    /*background-color: rgb(250, 251, 252);*/
     display: inline-block;
 	margin: 40px;
 	padding: 20px;
@@ -392,3 +397,62 @@ td.ε_row {
 #hours-manual-entry{
 	width: 240px;
 }
+.daterangepicker {
+	background-color: var(--color-main-background);
+}
+.daterangepicker .calendar-table {
+    border: 1px solid var(--color-main-background);
+    border-radius: 4px;
+    background-color: var(--color-main-background);
+}
+.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
+    width: 50px;
+    margin: 0 auto;
+    background:var(--color-background-dark);
+    border: 1px solid var(--color-background-dark);
+    padding: 2px;
+    outline: 0;
+    font-size: 12px;
+}
+
+.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
+    background-color:var(--color-main-background);
+    border-color: transparent;
+    color:  var(--color-background-darker);
+}
+
+.daterangepicker td.available:hover, .daterangepicker th.available:hover {
+    background-color: var(--color-background-darker);
+    border-color: transparent;
+    color: inherit;
+}
+.daterangepicker .ranges li:hover {
+    background-color: var(--color-background-darker);
+}
+
+.tabulator .tabulator-tableHolder .tabulator-table {
+    background-color:var(--color-main-background);
+    color:var(--color-main-text);
+}
+.tabulator-row {
+    background-color:var(--color-main-background);
+}
+.tabulator-row.tabulator-row-even {
+	background-color:var(--color-background-dark);
+}
+.tabulator-row.tabulator-selectable:hover {
+    background-color:var(--color-background-darker);
+}
+
+.tabulator .tabulator-header {
+    background-color: var(--color-background-dark);
+    color: var(--color-text-lighter);
+}
+.tabulator .tabulator-header .tabulator-col {
+    background-color: var(--color-background-dark);
+}
+
+.ui-widget-header {
+    background: var(--color-background-dark);
+    color: var(--color-text-lighter);
+}

templates/content/reports.php

@@ -21,7 +21,7 @@
 <div class="clearfix"> </div>
 <br/>
 <div class="time-controls">
-  <div id="report-range" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
+  <div id="report-range" style="cursor: pointer; padding: 5px 10px; width: 100%">
       <i class="fa fa-calendar"></i>&nbsp;
       <span></span> <i class="fa fa-caret-down"></i>
   </div>