FitOSC.Shared/wwwroot/css/scss/_main.scss
@import "_variables";

@font-face
{
  font-family: "Brush Script MT";
  src: url("../../css/fonts/brush-script-mt.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face
{
  font-family: "Open Iconic";
  src: url("../../css/fonts/open-iconic.eot");
  src: url("../../css/fonts/open-iconic.eot?#iefix") format("embedded-opentype"),
  url("../../css/fonts/open-iconic.woff") format("woff"),
  url("../../css/fonts/open-iconic.ttf") format("truetype"),
  url("../../css/fonts/open-iconic.svg#openiconic") format("svg");
  font-weight: normal;
  font-style: normal;
}

body
{
  font-family: "Roboto", sans-serif;
  background-color: $theme-color-background;
  color: $theme-color-text;
  position: relative;
  margin: 0;
}

.app
{
  display: flex;
  height: 100vh;
  user-select: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  
  .app-center
  {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: min(100%, 800px);
	margin-outside: auto;
	margin-top: 3rem;
	
	.app-header-title
	{
	  font-size: 120px;
	  padding: 8px;
	  position: absolute;
	  top: 20px;
	  font-family: "Brush Script MT", cursive;
	  background: linear-gradient(to right,
			  #0077ff,
			  #01c1ff);
	  -webkit-background-clip: text;
	  color: transparent; /* Ensures the gradient is visible */
	  pointer-events: none;
	  
	}
	
	.app-divider
	{
	  width: 200px;
	  border-bottom: 1px solid white;
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
	  align-items: center;
	  transform: translateY(-50%);
	  pointer-events: none;
	  div
	  {
		transform: translateY(50%);
		background: $theme-color-background;
		padding: 10px 2px;
	  }
	}
	
	.app-controls-container
	{
	  display: flex;
	  flex-direction: column;
	  gap: 2px;
	  align-content: center;
	  justify-content: center;
	  position: absolute;
	  opacity: 0;
	  transition: opacity 0.5s ease-in-out;
	  &.show
	  {
		opacity: 1;
		z-index: 50;
	  }
	}
	
	.app-checklist-item
	{
	  opacity: 0;
	  transition: opacity 0.5s ease-in-out;
	  
	  display: flex;
	  flex-direction: row;
	  align-items: center;
	  justify-content: flex-start;;
	  gap: 1rem;
	  padding: 8px 12px;
	  border-radius: 8px;
	  background: $theme-color-shadow;
	  flex-grow: 1;
	  
	  &.show{
		opacity: 1;
	  }
	  
	  div{
		flex-grow: 1;
	  }
	  
	  i {
		&.fa-check-square{
		  color: #4caf50;
		}
		&.fa-x-square{
		  color: red;
		}
		color: dodgerblue;
	  }
	  
	}
	
	
	.app-controls
	{
	  display: flex;
	  flex-direction: row;
	  gap: 1rem;
	  align-content: center;
	  justify-content: center;
	}
	
	.app-title
	{
	  font-size: 2rem;
	  margin-bottom: 1rem;
	}
	
	.app-subtitle
	{
	  font-size: 1rem;
	  margin-bottom: 1rem;
	}
	
	button
	{
	  background-color: $theme-color-primary;
	  color: white;
	  padding: 0.5rem 1rem;
	  border: 2px solid transparent;
	  border-radius: 0.25rem;
	  cursor: pointer;
	  font-size: 1rem;
	  transition: border-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
	  user-select: none;
	  
	  &.enabled
	  {
		background-color: #26b050;
		
		&:hover:not(:disabled)
		{
		  //noinspection CssInvalidFunction
		  background-color: darken(#26b050, 10%);
		}
	  }
	  
	  &.disabled
	  {
		background-color: #b02626;
		
		&:hover:not(:disabled)
		{
		  //noinspection CssInvalidFunction
		  background-color: darken(#b02626, 10%);
		}
	  }
	  
	  &.circle-button
	  {
		width: 40px;
		height: 40px;
		border-radius: 50%; /* Makes the button a circle */
		font-size: 18px;
		font-weight: bold;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		cursor: pointer;
		transition: background-color 0.3s;
		
	  }
	  
	  &:disabled
	  {
		//noinspection CssInvalidFunction
		background-color: lighten($theme-color-primary, 10%); // Lighten the background color
		cursor: default;
		opacity: 0.6; // Dim the button to show it's disabled
		border-color: transparent;
		box-shadow: none;
		
	  }
	  
	  &:hover:not(:disabled)
	  {
		//noinspection CssInvalidFunction
		background: darken($theme-color-primary, 10%);
		
		&.enable
		{
		  //noinspection CssInvalidFunction
		  background-color: darken(#26b050, 10%);
		}
		
		&.disabled
		{
		  //noinspection CssInvalidFunction
		  background-color: darken(#b02626, 10%);
		}
	  }
	  
	  &.interacted
	  {
		border: 2px solid darkblue; // Define your glow color variable
		box-shadow: 0 0 10px 2px darkblue;
		
		animation: glow 0.25s forwards;
		
		@keyframes glow
		{
		  0%
		  {
			border-color: darkblue;
			box-shadow: 0 0 10px 2px darkblue;
		  }
		  100%
		  {
			border-color: transparent;
			box-shadow: none;
		  }
		}
	  }
	}
	
	.app-info
	{
	  display: flex;
	  flex-direction: row;
	  gap: 80px;
	  margin-top: 12px;
	  background: $theme-color-shadow;
	  padding: 8px 30px;
	  border-radius: 8px;
	  user-select: none;
	  justify-content: space-between;
	  position: relative;
	  
	  
	  .app-info-item
	  {
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		gap: 12px;
		
		&.lastSession
		{
		  .app-info-item-value
		  {
			color: $theme-color-primary;
		  }
		}
		
		button
		{
		  margin: auto;
		}
		
		
		.app-info-item-title
		{
		  margin: 2px;
		  //noinspection CssInvalidFunction
		  border-bottom: 1px solid transparentize(white, 0.5);
		}
		
		.app-info-item-value
		{
		  
		}
		
		.app-info-item-unit
		{
		  font-size: 0.8rem;
		}
	  }
	}
  }
  
  .app-config-container
  {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	bottom: 0;
	position: absolute;
	left: 0;
	padding: 1rem;
	
	.app-config-item
	{
	  height: 60px;
	  width: 60px;
	  
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  border-radius: 50%;
	  overflow: hidden;
	  background: $theme-color-shadow;
	  
	  &:disabled
	  {
		background: $theme-color-shadow;
		
	  }
	  
	  
	  &:hover:not(:disabled)
	  {
		background: $theme-color-shadow;
		
		cursor: pointer;
		
		label
		{
		  transform: translateY(-60px);
		  scale: 1;
		  transition: scale 0.1s ease-in-out;
		  white-space: nowrap;
		  
		}
	  }
	  
	  .app-config-item-icon-background
	  {
		width: 48px;
		height: 48px;
		background: $theme-color-shadow;
		display: flex;
		align-items: center;
		justify-content: center;
		
		i
		{
		  
		  font-size: 32px;
		  z-index: 2;
		  
		}
	  }
	  
	  label
	  {
		position: absolute;
		z-index: 0;
		background: $theme-color-shadow;
		padding: 4px 8px;
		border-radius: 12px;
		scale: 0;
	  }
	}
  }
  
  .app-support-container
  {
	display: flex;
	flex-direction: row;
	gap: 1rem;
	bottom: 0;
	position: absolute;
	right: 0;
	padding: 1rem;
	
	.app-support-item
	{
	  height: 60px;
	  width: 60px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  border-radius: 50%;
	  overflow: hidden;
	  
	  &:hover
	  {
		cursor: pointer;
		
		label
		{
		  transform: translateY(-60px);
		  scale: 1;
		  transition: scale 0.1s ease-in-out;
		}
	  }
	  
	  img
	  {
		width: 48px;
		height: 48px;
		z-index: 2;
		padding: 12px;
		background: $theme-color-shadow;
		
	  }
	  
	  label
	  {
		position: absolute;
		z-index: 0;
		background: $theme-color-shadow;
		padding: 4px 8px;
		border-radius: 12px;
		scale: 0;
	  }
	}
	
	
  }
}

.app-modal-container
{
  display: none;
  flex-direction: column;
  gap: 1rem;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  justify-content: center;
  align-items: center;
  z-index: 100;
  
  &.open
  {
	display: flex;
  }
  
  .app-modal-background
  {
	position: absolute;
	height: 100%;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.3); /* semi-transparent background */
	backdrop-filter: blur(2px); /* Adjust the blur intensity */
	cursor: pointer;
	pointer-events: all;
  }
  
  .app-modal
  {
	z-index: 101;
	background-color: $theme-color-background;
	border-radius: 8px;
	width: clamp(400px, 50%, 800px);
	
	.app-modal-header
	{
	  display: flex;
	  flex-direction: row;
	  justify-content: space-between;
	  align-items: center;
	  padding: 8px 12px;
	  font-size: 20px;
	  //noinspection CssInvalidFunction
	  border-bottom: 1px solid transparentize(white, 0.5);
	  
	  .app-modal-header-close
	  {
		pointer-events: all;
		
		cursor: pointer;
		
		&:hover
		{
		  //noinspection CssInvalidFunction
		  color: darken($theme-color-text, 10%);
		}
	  }
	}
	
	.app-modal-body
	{
	  display: flex;
	  flex-direction: column;
	  gap: 4px;
	  align-items: center;
	  justify-content: flex-start;
	  height: 600px;
	  overflow-y: auto;
	  flex-grow: 1;
	  padding: 4px 12px;
	  
	  .app-modal-body-container
	  {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
	  }
	  
	  .app-modal-body-content-item
	  {
		display: flex;
		flex-direction: row;
		gap: 1rem;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		font-size: 1rem;
		
		
		label
		{
		  flex-grow: 1;
		}
		
		i
		{
		  
		  &.fa-check-circle
		  {
			color: #4caf50;
		  }
		  
		  &.fa-circle-x-square
		  {
			color: #dc0d0d;
		  }
		}
	  }
	  
	  #settings
	  {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
	  }
	  
	  
	}
	
	.app-modal-footer
	{
	  display: flex;
	  flex-direction: row;
	  justify-content: flex-end;
	  align-items: center;
	  padding: 8px 12px;
	  //noinspection CssInvalidFunction
	  border-top: 1px solid transparentize(white, 0.5);
	  gap: 1rem;
	  
	  button
	  {
		padding: 4px 12px;
		border: 2px solid transparent;
		border-radius: 0.25rem;
		cursor: pointer;
		font-size: 1rem;
		transition: border-color 0.5s ease-in-out, box-shadow 0.5s ease-in-out;
		user-select: none;
		background: $theme-color-primary;
		color: white;
		
		&:hover:not(:disabled)
		{
		  //noinspection CssInvalidFunction
		  background: darken($theme-color-primary, 10%);
		  
		}
	  }
	}
  }
}

@function interpolate-color($value)
{
  @return linear-gradient(to right, #4caf50 calc(#{$value} * 100%), #ddd calc(#{$value} * 100%));
}

.app-trim-container
{
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
  background: $theme-color-shadow;
  padding: 8px 30px;
  border-radius: 8px;
  margin-top: 1rem;
  
  
  label
  {
	white-space: nowrap;
	min-width: 5ch;
  }
}

.trim-pot
{
  min-width: 200px;
  position: relative;
  display: flex;
  flex-grow: 1;
  
  .trim-slider
  {
	width: 100%;
	height: 10px;
	border-radius: 5px;
	outline: none;
	
	// Use the data-value attribute to set the --value custom property
	&[data-value]
	{
	  --value: attr(data-value number);
	  
	  // Apply the background based on the --value custom property
	  background: interpolate-color(var(--value));
	}
	
	// Style the thumb (the knob that the user drags)
	&::-webkit-slider-thumb
	{
	  -webkit-appearance: none;
	  appearance: none;
	  width: 25px;
	  height: 25px;
	  background-color: #333;
	  border-radius: 50%;
	  cursor: pointer;
	  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	}
  }
}
