home page redesign

pradip-allwyn · Apr 10, 2024 · ae87501 · ae87501
1 parent 408df30
commit ae87501
Show file tree

Hide file tree

Showing 2 changed files with 324 additions and 44 deletions.
diff --git a/htdocs/css/style.css b/htdocs/css/style.css
@@ -749,6 +749,10 @@ td.table_label {
 		}
 
 		span.red2 {
+			background-color: #d9667a;
+		}
+
+		body.dark span.red2 {
 			background-color: #ac394d;
 		}
 
@@ -762,7 +766,7 @@ td.table_label {
         }
 
         .wflog.grid-item {
-            border: 1px solid #ccc;
+            border:  0.1px solid rgba(48,48,48,1);
             padding: 10px;
 			word-wrap: break-word;
 			overflow: hidden;
@@ -772,4 +776,198 @@ td.table_label {
         .wflog.grid-title {   
 			/* font-weight: bold;        */
 			font-size: 1.6em;
-        }
+        }
+
+		.flex-container {
+			display: flex;
+			white-space: nowrap;
+			flex-wrap: wrap;
+			justify-content: space-between;
+			/* align-items: center; */
+		}
+
+		.flex-container-stats {
+			display: flex;
+			white-space: nowrap;
+			flex-wrap: wrap;
+			justify-content: space-around;
+			/* align-items: center; */
+		}
+
+		.upcoming.grid-container {
+            display: grid;
+            grid-template-columns: repeat(6, minmax(240px, 1fr)); 
+            gap: 14px;
+            padding: 12px;
+			direction: ltr;
+        }
+
+		@media (max-width: 1600px) { /* Adjust the max-width value based on when you want the change to occur */
+			.upcoming.grid-container {
+				grid-template-columns: repeat(4, minmax(240px, 1fr)); /* Change to 6 columns when screen width is 768px or smaller */
+			}
+		}
+
+		@media (max-width: 1200px) { /* Adjust the max-width value based on when you want the change to occur */
+			.upcoming.grid-container {
+				grid-template-columns: repeat(3, minmax(240px, 1fr)); /* Change to 6 columns when screen width is 768px or smaller */
+			}
+		}
+
+		@media (max-width: 900px) { /* Adjust the max-width value based on when you want the change to occur */
+			.upcoming.grid-container {
+				grid-template-columns: repeat(2, minmax(240px, 1fr)); /* Change to 6 columns when screen width is 768px or smaller */
+			}
+		}
+
+		.stats.grid-container {
+            display: grid;
+            /* grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));  */
+			grid-template-columns: repeat(10, 1fr);
+			align-items: center; 
+            gap: 14px;
+            padding: 4px;
+			direction: ltr;
+			/* background-color: #80808005; */
+			border-radius: 12px;
+
+        }
+
+		@media (max-width: 1200px) { /* Adjust the max-width value based on when you want the change to occur */
+			.stats.grid-container {
+				grid-template-columns: repeat(5, 1fr); /* Change to 6 columns when screen width is 768px or smaller */
+			}
+		}
+
+        .upcoming.grid-item {
+            border: 1px solid #ccccccde;
+			/* transition: border-width 0.3s; */
+            padding: 8px;
+			border-radius: 12px;
+			word-wrap: break-word;
+			white-space: wrap;
+			overflow: hidden;
+			/* white-space: normal; */
+			direction: ltr;
+			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+			/* vertical-align: middle; */
+        }
+
+		.stats.grid-item {
+            border: 1px solid #ccccccde;
+			background-color: #FAFAFA;
+			/* transition: border-width 0.3s; */
+            padding: 4px;
+			border-radius: 12px;
+			word-wrap: break-word;
+			white-space: wrap;
+			overflow: hidden;
+			/* white-space: normal; */
+			direction: ltr;
+			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+			/* vertical-align: middle; */
+        }
+		body.dark .stats.grid-item {
+			background-color: initial;
+		}
+		body.dark .stats.grid-item:hover {
+			color: #FFF;
+		}
+
+
+		body.dark .upcoming.grid-item {
+			box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.75);
+		}
+
+		body.dark .stats.grid-item {
+			box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.75);
+		}
+
+		.upcoming.minute.grid-item {
+			background-color: #b7ffb770
+		}
+
+				body.dark .upcoming.minute.grid-item {
+					background-color: #2c702cDD;
+					transition: background-color 3s;
+					/* rgb(0,108,0); */
+					/* color: #FFF; */
+					color: #d3c7c7
+				}
+
+				.upcoming.grid-item a {
+					font-size: 1.1em;
+				}
+
+				body.dark .upcoming.grid-item a {
+					color: #3a639b;
+				}
+
+				body.dark .upcoming.minute.grid-item a {
+					color: #d3c7c7 !important;
+					font-size: 1.2em;
+				}
+
+				body.dark .upcoming.soon.grid-item a {
+					/* color: #301919!important;
+					 */
+					 /* color: #efd2d2 !important; */
+					 /* color: #d3c7c7; */
+					color: #d3c7c7 !important;
+					font-size: 1.2em;
+				}
+
+				.upcoming.minute.grid-item a {
+					color: rgb(84, 84, 84) !important;
+					font-size: 1.2em;
+				}
+
+				.upcoming.soon.grid-item a {
+					color: rgb(84, 84, 84) !important;
+					font-size: 1.2em;
+				}
+
+				/* body.dark upcoming.minute.grid-item a {
+						color: #FFF !important;
+				} */
+
+		.upcoming.soon.grid-item {
+			background-color: #f5e05870;
+
+			/* border-color: white; */
+		}
+
+		body.dark .upcoming.soon.grid-item {
+			background-color: rgba(255, 115, 0, 0.7);
+			/* color: #301919!important; */
+			/* color: #fff; */
+			color: #d3c7c7;
+			/* color: rgb(84, 84, 84); */
+		}
+
+		.upcoming.grid-item:hover {
+			border-color: rgba(46, 38, 12, 0.4);
+			/* background-color:rgb(0, 255, 0) */
+
+		}
+
+		body.dark .upcoming.grid-item:hover {
+			/* border-color: rgba(46, 38, 12, 0.4); */
+			color: #FFF;
+		}
+
+
+		body.dark .upcoming.grid-item {
+			border: 1px solid #cccccc26;
+		}
+
+		body.dark .stats.grid-item {
+			border: 1px solid #cccccc26;
+		}
+
+        .upcoming.grid-title {   
+			/* font-weight: bold;        */
+			font-size: 1.2em;
+        }
+
+