@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);;

  --icon-valid:   url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/><path d="m10.97 4.97-.02.022-3.473 4.425-2.093-2.094a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05"/></svg>');
  --icon-invalid: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/><path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"/></svg>');
  --icon-reset:   url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2z"/><path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466"/></svg>');
}

.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);
  }
}