custom.css

/* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
    display: none;
}


/* Hide scrollbar for IE, Edge and Firefox */
body {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}


/* Apply zoom specifically for the Homepage */
/* body {
    zoom: 0.8;
} */
html {
  font-size: 80%;
}


/* Due to tailwind v4*/
.container {
  @media(min-width: 767px) {
    max-width: 100vw !important;
    width: 90% !important;
  }
}


/* Make all iframe color-scheme as dark by default */
/* iframe {
  color-scheme: dark !important;
} */


/* .service-block:has(.glance),
.service-block:has(.uptimekuma),
.service-block:has(.home-assistant) {
  border: none;
} */


/* Iframe styles */
/* .home-assistant,
.glance,
.weather {
  width: 110%;
  border: 0;
}


.home-assistant {
  height: 250px;
  margin: -10px 0px 0px 0px;
} */


/* For custom classes used in iFrame */
.iframe-home-assistant-media {
  width: 300px;
  height: 500px;
}


.iframe-home-assistant-weather {
  background: transparent;
  height: 285px;
  margin: -13px 0px 0px 0px;
  @media(min-width: 767px) {
    zoom: 0.85;
    height: 280px;
  }
  @media(min-width: 1536px) {
    zoom: 0.83;
    height: 290px;
  }
  @media(min-width: 1800px) {
    zoom: 0.92;
    height: 260px;
  }
}


.iframe-grafana {
  background: transparent;
  zoom: 0.8;
  height: 900px;
  margin: -13px 0px 0px 0px;
}


.iframe-cameras {
  background: transparent;
  zoom: 0.9;
  height: 800px;
  margin: -13px 0px 0px 0px;
}


.iframe-cricket {
  background: transparent;
  height: 200px;
  margin: -13px 0px 0px 0px;
}


#floatCrictimes {
    color-scheme: light !important;
}


/*
For custom column layout
[https://web.archive.org/web/20250220082406/https://pastebin.com/MHmLFvLL](https://web.archive.org/web/20250220082406/https://pastebin.com/MHmLFvLL)
[https://web.archive.org/web/20250220083734/https://pastebin.com/1DCcKecf](https://web.archive.org/web/20250220083734/https://pastebin.com/1DCcKecf)
[https://web.archive.org/web/20250220082606/https://pastebin.com/4qKdL0d0](https://web.archive.org/web/20250220082606/https://pastebin.com/4qKdL0d0)
[https://web.archive.org/web/20250220082808/https://pastebin.com/rMWV1T0V](https://web.archive.org/web/20250220082808/https://pastebin.com/rMWV1T0V)
*/
.services-list.flex.flex-col {
    display: grid !important;
    grid-template-columns: repeat(42, 1fr);
    gap: 0.5rem;
}
.services-list.flex.flex-col .service {
    grid-column: span 42;
}
.services-list.flex.flex-col .service > div {
    height: 100%;
}
.services-list.flex.flex-col .service > .mb-2 {
    margin-bottom: 0 !important;
}
.services-list.flex.flex-col [id^="col-1-8"].service {  /* 1/8 */
    grid-column: span 7;
}
.services-list.flex.flex-col [id^="col-9-21"].service { /* 9/21 */
    grid-column: span 18;
}
.services-list.flex.flex-col [id^="col-1-2"].service { /* 1/2 */
    grid-column: span 21;
}
.services-list.flex.flex-col [id^="col-12-21"].service {  /* 12/21 */
    grid-column: span 24;
}
.services-list.flex.flex-col [id^="col-3x"].service {
  @media(min-width: 1100px) {
    grid-column: span 50;
  }
  @media(min-width: 1536px) {
    grid-column: span 156;
  }
  @media(min-width: 1800px) {
    grid-column: span 194;
  }
}


/* @media(min-width: 1100px) {
  .services-list.flex.flex-col #col-3x.service {
    grid-column: span 144;
  }
}


@media(min-width: 1536px) {
  .services-list.flex.flex-col #col-3x.service {
    grid-column: span 174;
  }
}


@media(min-width: 1800px) {
  .services-list.flex.flex-col #col-3x.service {
    grid-column: span 204;
  }
} */


.service-icon {
  width: 2.3rem !important;
}
#col-1-8 .service-icon {
  width: auto !important; /* Reset or override for col-1-8 */
}


.logout-icon {
  font-size: 18px !important;
  color: #ffffff99 !important;
  margin: auto;
}


/* Reduce padding and width for the health/status button */
.service-container-stats > div {
  padding: 0.75rem 0.4rem !important;
}


.custom-docker-btn > div:hover,
.custom-docker-btn:focus > div {
  background: rgba(0,0,0,0.18) !important; /* or match the exact shade from the original */
}


/* Vertically center the .service-icon within .service-title */
.service-title {
    align-items: center !important; /* Vertically center children, including .service-icon */
}


/* Adjust icon size */
.service-icon {
    width: 24px !important;
    height: 24px !important;
}
.service-icon img {
    width: 24px !important;
    height: 24px !important;
}


/* Camera reboot button styling */
.custom-camera-reboot-btn > div:hover,
.custom-camera-reboot-btn:focus > div {
  background: rgba(34, 197, 94, 0.2) !important; /* Green tint for camera actions */
}


.custom-camera-reboot-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5 !important;
}


/* Optional: Add animation for reboot button */
.custom-camera-reboot-btn:active svg {
  animation: spin 0.5s linear;
}


@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}