Update css/custom.css

ui update

css/custom.css

@@ -1,73 +1,134 @@
-.activeWatch {
-    background-color: lightgray;
-}
+/* css/custom.css */
+/* Keep Bootstrap in control. Only add gentle, modern enhancements. */
 
-h2 {
-    margin-left: 10px;
-    margin-top: 25px !important;
-}
-
-.table-bordered {
-    width: 100%;
-    table-layout: fixed;
-    text-align: center;
-    /*border: 1px solid #0e0017 !important;*/
-
-}
-
-td {
-    overflow-wrap: break-word;
-}
-
-button {
-    /*background-color: lightgray;*/
-    /*border: none;*/
-    /*color: white;*/
-    padding: 1% 5%;
-    text-align: center;
-    text-decoration: none;
-    display: inline-block;
-    /*font-size: 16px;*/
-    border-radius: 20px;
-}
-
-button, .form-group{
-    margin: 5px !important;
-}
-
-input {
-    text-align: center;
-}
-
-.stopButton, .resetButton {
-    width: 98% !important;
-}
-
-.form-group {
-    width: 98%;
-}
-
-.tableHeader {
-    min-width: 100px;
+:root {
+  --silias-radius: 14px;
 }
 
 html, body {
-    height: 100%;
-    margin: 0;
-}
-.wrapper {
-    min-height: 100%;
-
-    /* Equal to height of footer */
-    /* But also accounting for potential margin-bottom of last child */
-    margin-bottom: -240px;
-}
-footer,
-.push {
-    height: 300px;
+  height: 100%;
 }
 
-.footer {
-    vertical-align: top;
-    text-align: left;
+body {
+  /* Bootstrap uses system font stack, keep it */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Navbar */
+.navbar-brand {
+  letter-spacing: 0.2px;
+}
+
+/* Card polish */
+.card {
+  border-radius: var(--silias-radius);
+}
+.card.shadow-sm {
+  box-shadow: 0 10px 25px rgba(0,0,0,.06) !important;
+}
+
+/* Form */
+.form-label {
+  font-weight: 600;
+}
+
+.form-text {
+  color: #6c757d;
+}
+
+.form-control,
+.form-select {
+  border-radius: 0.75rem;
+}
+
+.form-control:focus,
+.form-select:focus {
+  box-shadow: 0 0 0 .2rem rgba(13,110,253,.15);
+}
+
+/* Buttons: DO NOT globally style "button" tag */
+.btn {
+  border-radius: 0.85rem;
+}
+.btn-lg {
+  padding-top: .85rem;
+  padding-bottom: .85rem;
+}
+
+/* Scroll panels (if you keep class from index.php) */
+.scrollWindow {
+  border-radius: 1rem;
+}
+
+/* Checkbox rows */
+.form-check {
+  padding: .25rem 0;
+}
+.form-check-input {
+  cursor: pointer;
+}
+.form-check-label {
+  cursor: pointer;
+}
+
+/* Alerts */
+.alert {
+  border-radius: 0.9rem;
+}
+
+/* Footer */
+footer {
+  margin-top: 0;
+}
+footer a {
+  text-decoration: none;
+}
+footer a:hover {
+  text-decoration: underline;
+}
+
+/* Small badges look nicer */
+.badge {
+  border-radius: 999px;
+  padding: .45rem .7rem;
+}
+
+/* Optional: make long checkbox lists easier to scan */
+.scrollWindow .form-check + .form-check {
+  border-top: 1px solid rgba(0,0,0,.04);
+}
+.scrollWindow .form-check {
+  padding: .35rem .25rem;
+}
+
+/* Ensure links inside muted text are readable */
+.text-muted a {
+  color: inherit;
+}
+.text-muted a:hover {
+  color: #0d6efd;
+}
+
+/* Mobile tweaks */
+@media (max-width: 576px) {
+  .card-body {
+    padding: 1.25rem !important;
+  }
+}
+/* Fix: checkboxes not clipped and never overlap text */
+.scrollWindow .form-check {
+  padding-left: 0 !important;      /* remove bootstrap offset */
+  margin: 0 !important;
+}
+
+.scrollWindow .form-check-input {
+  margin-left: 0 !important;       /* remove negative margin */
+  float: left;                     /* classic layout */
+}
+
+.scrollWindow .form-check-label {
+  display: block;
+  padding-left: 1.6rem;            /* space for the checkbox */
+  line-height: 1.4;
 }