@securecall/client-component/dist/collection/components/securecall-client/securecall-client.css

SecureCall Core Web Component

:host {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  min-width: 300px;
  margin: auto;
  /* Dark Theme /*/
  --theme-background-color-dark: none;
  --theme-primary-color-dark: white;
  --theme-secondary-color-dark: #ccc;
  --theme-button-color-dark: rgba(4, 156, 196, 0.6);
  --theme-button-color-hover-dark: rgba(4, 156, 196, 1);
  --theme-button-color-disabled-dark: rgba(4, 156, 196, 0.3);
  --theme-text-disabled-color-dark: rgba(4, 156, 196, 1);
  --theme-border-color-dark: #ccc;
  --theme-border-color-disabled-dark: rgba(4, 156, 196, 0.3);
  --theme-input-active-background-dark: white;
  --theme-input-inactive-background-dark: #ccc;
  --theme-spinner-border-dark: rgba(255, 255, 255, 0.3);
  --theme-spinner-color-dark: rgba(4, 156, 196, 1);;
  /* Light Theme /*/
  --theme-background-color-light: none;
  --theme-primary-color-light: #333;
  --theme-secondary-color-light: #ccc;
  --theme-button-color-light: rgba(4, 156, 196, 0.6);
  --theme-button-color-hover-light: rgba(4, 156, 196, 1);
  --theme-button-color-disabled-light: rgba(4, 156, 196, 0.3);
  --theme-text-disabled-color-light: rgba(4, 156, 196, 0.6);
  --theme-border-color-light: #ccc;
  --theme-border-color-disabled-light: rgba(4, 156, 196, 0.3);
  --theme-input-active-background-light: white;
  --theme-input-inactive-background-light: #ccc;
  --theme-spinner-border-light: rgba(0, 0, 0, 0.3);
  --theme-spinner-color-light: rgba(4, 156, 196, 1);;

}

.theme-dark {
  width: 100%;
  background-color: var(--theme-background-color-dark);
  --theme-primary-color: var(--theme-primary-color-dark);
  --theme-secondary-color: var(--theme-secondary-color-dark);
  --theme-button-color: var(--theme-button-color-dark);
  --theme-button-color-hover: var(--theme-button-color-hover-dark);
  --theme-button-color-disabled: var(--theme-button-color-disabled-dark);
  --theme-text-disabled-color: var(--theme-text-disabled-color-dark);
  --theme-border-color: var(--theme-border-color-dark);
  --theme-border-color-disabled: var(--theme-border-color-disabled-dark);
  --theme-input-active-background: var(--theme-input-active-background-dark);
  --theme-input-inactive-background: var(--theme-input-inactive-background-dark);
  --theme-spinner-border: var(--theme-spinner-border-dark);
  --theme-spinner-color: var(--theme-spinner-color-dark);
}

.theme-light {
  width: 100%;
  background-color: var(--theme-background-color-light);
  --theme-primary-color: var(--theme-primary-color-light);
  --theme-secondary-color: var(--theme-secondary-color-light);
  --theme-button-color: var(--theme-button-color-light);
  --theme-button-color-hover: var(--theme-button-color-hover-light);
  --theme-button-color-disabled: var(--theme-button-color-disabled-dark);
  --theme-text-disabled-color: var(--theme-text-disabled-color-light);
  --theme-border-color: var(--theme-border-color-light);
  --theme-border-color-disabled: var(--theme-border-color-disabled-light);
  --theme-input-active-background: var(--theme-input-active-background-light);
  --theme-input-inactive-background: var(--theme-input-inactive-background-light);
  --theme-spinner-border: var(--theme-spinner-border-light);
  --theme-spinner-color: var(--theme-spinner-color-light);
}

/* CSS for the component elements */

.component-button {
  width: fit-content;
  padding: 10px 20px;
  font-size: 16px;
  color: var(--theme-primary-color);
  background-color: var(--theme-button-color);
  border: 1px solid var(--theme-secondary-color);
  border-radius: 5px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
}

.component-button:hover {
  background-color: var(--theme-button-color-hover);
  border-color: var(--theme-button-color-hover);
}

.component-button:disabled {
  background-color: var(--theme-button-color-disabled);
  border-color: var(--theme-border-color-disabled);
  color: var(--theme-text-disabled-color);
  cursor: not-allowed;
  pointer-events: none;
}

.secure-form {
  text-align: center;
}

.response-result-container {
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
}


/* CSS for the loading spinner container */
.loading-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--spinner-container-size, 50px);
}

/* CSS for the loading spinner itself */
.spinner {
  position: relative;
  width: var(--spinner-container-size, 50px);
  height: var(--spinner-container-size, 50px);
}

.spinner-circle {
  border: 4px solid var(--theme-spinner-border);
  border-top: 4px solid var(--theme-spinner-color);
  border-radius: 50%;
  width: var(--spinner-circle-size, 20px);
  height: var(--spinner-circle-size, 20px);
  animation: spin 1s linear infinite;
}

/* Animation keyframes for the spinner rotation */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}