Custom fluidd theme that sets the background image to the webcam stream, and forces all cards to be semi-transparent until hovered over

.fluidd-theme___custom.css

/*
rgb(from var(--v-card-background-color) calc(r - 75) g b / 50%)

rgb(from var(--v-card-heading-base) calc(r + 40) calc(g + 40) b / 50%)

--v-card-background-color
*/

/* BG Animation */
:root {
  /*--v-webcam-url: url(http://192.168.0.96:4408/webcam/?action=stream);*/
  --v-webcam-url: url(http://192.168.0.96:8080/?action=stream);
  --v-card-background-color: #B6B6B6;
  --v-blur-card-title: rgb(75 70 70 / 50%);
  --v-blur-card-content: rgb(0 0 0 / 20%);
  --v-blur-focus-transition-fn: cubic-bezier(.29, 1.01, 1, -0.68);
  --v-blur-focus-transition: background-color 0.5s;
}

/*
.theme--dark.v-card, 
.theme--dark.v-content {
	background-color: var(--v-card-background-color) !important;
}*/

/**
 * HUD (heads up display) style dashboard for Fluidd.
 * 
 * Screenshots: https://imgur.com/a/fluidd-custom-css-hud-style-dashboard-EUFwbPe
 * Reddit: https://www.reddit.com/r/klippers/comments/1dmf75y/neat_custom_css_that_changes_the_fluidd/
 */

/* Set the page background to the webcam feed */
main.v-main > div.v-main__wrap > div.container 
/* Experimental!! - Seeing if this will only set the  bg image if there's something printing. 
	:has(div[id=card-content] > div.v-tabs-items > div.v-window__container > div.v-window-item:nth-of-type(1):is(.v-window-item--active))
*/
{
	background-image: var(--v-webcam-url) !important;
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
}

.v-application .card-heading {
    background-color: var(--v-card-heading-base);
    border-color: var(--v-card-heading-base);
}

div:where(
	.v-data-table, 
	.v-tabs-items, 
	.v-card, 
	.v-expansion-panel,
	.v-card__title, 
	.collapsable-card-title, 
	.card-heading):not(:hover) 
{
	transition: var(--v-blur-focus-transition);
	transition-timing-function: var(--v-blur-focus-transition-fn);
}

/**
 * Look for any of the panels based on some specific 
 * known classes, and set the non-hover background 
 * color to 20% opaque with a dark color with a
 * fancy transition thingy.
 * 
 * This should bring panel opacity back to 0 with 
 * the correct theme color when you hover over it.
 */
div:where(
	.v-data-table, 
	.v-tabs-items, 
	.v-card, 
	.v-expansion-panel):not(:hover) 
{
	background-color: rgba(from var(--v-secondary-darken4) calc(r - 50) calc(g - 50) calc(b - 50) 10) !important;
}

div:where(
	.v-card__title, 
	.collapsable-card-title, 
	.card-heading):not(:hover) 
{
	background-color: rgba(from var(--v-card-heading-base) calc(r - 50) calc(g - 50) calc(b - 50) 10) !important;
}