Added index.css for specific styling

Author: erenvbn

wwwroot/css/index.css

@@ -0,0 +1,98 @@
+body {
+  background-color: #3f4549;
+}
+
+[data-card="cameraContainer"] {
+  width: 100%;
+  box-sizing: border-box;
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
+  background-color: #fff;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin: 1rem;
+  transition: box-shadow 0.3s ease, border-radius 0.3s ease,
+    background-color 0.3s ease;
+}
+
+[data-card="cameraContainer"]:hover {
+  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3);
+  border-radius: 1.5rem;
+  background-color: #dcdcdc;
+}
+
+.camera-card {
+  width: 100%;
+}
+
+.bg-light-gray {
+  background-color: #7d8690; /* Light Gray */
+}
+
+.bg-gray {
+  background-color: #6c757d; /* Gray */
+}
+
+.bg-dark-gray {
+  background-color: #3f4549; /* Dark Gray */
+}
+
+body {
+  overflow-y: scroll;
+  scrollbar-width: thin;
+  scrollbar-color: #333 #f5f5f5;
+}
+
+body::-webkit-scrollbar {
+  width: 8px;
+}
+
+body::-webkit-scrollbar-thumb {
+  background-color: #333;
+}
+
+body::-webkit-scrollbar-track {
+  background-color: #f5f5f5;
+}
+
+
+#streamNotif {
+  visibility: hidden;
+  min-width: 3rem;
+  background-color: #20ad6b;
+  color: #ffffff;
+  text-align: center;
+  border-radius: 2rem;
+  padding: 2rem;
+  position: fixed;
+  z-index: 1;
+  left: 50%;
+  bottom: 2rem;
+  font-size: 1.5rem;
+  opacity: 0.9;
+}
+
+#streamNotif.show {
+  visibility: visible;
+  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
+  animation: fadein 0.5s, fadeout 0.5s 2.5s;
+}
+
+@-webkit-keyframes fadein {
+  from {bottom: 0; opacity: 0;} 
+  to {bottom: 30px; opacity: 1;}
+}
+
+@keyframes fadein {
+  from {bottom: 0; opacity: 0;}
+  to {bottom: 30px; opacity: 1;}
+}
+
+@-webkit-keyframes fadeout {
+  from {bottom: 30px; opacity: 1;} 
+  to {bottom: 0; opacity: 0;}
+}
+
+@keyframes fadeout {
+  from {bottom: 30px; opacity: 1;}
+  to {bottom: 0; opacity: 0;}
+}